2f:[] 2d:{"title":"Create HTML Display","cells":[{"id":0,"value":"# Create HTML Display","pinned":false,"hidden":false,"mode":"md"},{"id":29,"value":"import { canvasValues } from \"eb11a24ab32ae888\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":87,"value":"import {\n gridPoint,\n canvasPoint,\n findItemNameInGroup,\n ensureGroupExistsInPaper,\n addChildToGroup,\n activateTool,\n hidGrp,\n mainGrp,\n tmpGrp,\n hidKids,\n mainKids,\n tmpKids,\n selection\n} from \"f7064faddbbc3e58\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":78,"value":"import { enableSliderfunctions } from \"60705e9a1108a1aa\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":153,"value":"import { enableBoolOperationfunctions } from \"dfbc05dadb18ddcb\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":85,"value":"function clickListener(p) {\n const div = document.createElement(\"div\");\n\n const updateSelectedShape = () => {\n div.value = selection.hid(p);\n };\n\n document.addEventListener(\"formChange\", () => {\n updateSelectedShape();\n // In the context of Observable, the Observable runtime itself listens to the \"input\" event.\n // This informs the displayed cell to update upon click, if deleted, cell do not response to click.\n div.dispatchEvent(new CustomEvent(\"input\")); // Trigger an update in the reactive cell\n });\n\n updateSelectedShape(); // Set the initial value\n\n return div;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":76,"value":"function FormSyncFunction(p, selectedShape) {\n if (selectedShape === null || selectedShape.length === 0) {\n return htl.html` `;\n }\n var item = selectedShape;\n //creating the Html Form for the current selection,\n var form, fields;\n [form, fields] = selectionToFormAndField(item, p);\n\n //adding functionalities to the html form.\n enableSliderfunctions(p, form, fields, item);\n enableBoolOperationfunctions(item, form, p);\n\n return form;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":124,"value":"function selectionToFormAndField(item, p) {\n var form, fields;\n if (item.length === 0) {\n return null;\n }\n if (item.length > 1) {\n form = createForm(item, p, \"path\", true);\n fields = formItem.path;\n } else {\n var singleItem = item[0];\n if (singleItem.name.includes(\"Circle\")) {\n form = createForm(singleItem, p, \"circle\", false);\n fields = formItem.circle;\n } else if (singleItem.name.includes(\"Rectangle\")) {\n form = createForm(singleItem, p, \"rectangle\", false);\n fields = formItem.rectangle;\n } else if (singleItem.name.includes(\"Path\")) {\n form = createForm(singleItem, p, \"path\", false);\n fields = formItem.path;\n }\n }\n return [form, fields];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":27,"value":"function createForm(item, p, shape, boolOp) {\n var bound = p.view.bounds;\n var center = p.view.center;\n var hMin = (bound.left - center.x) / canvasValues.gridScale;\n var hMax = (bound.right - center.x) / canvasValues.gridScale;\n var vMin = (bound.top - center.y) / canvasValues.gridScale;\n var vMax = (bound.bottom - center.y) / canvasValues.gridScale;\n var fields;\n if (shape === \"circle\") {\n fields = createCircleFields(item, hMin, hMax, vMin, vMax);\n } else if (shape === \"rectangle\") {\n fields = createRectangleFields(item, hMin, hMax, vMin, vMax);\n } else if (shape === \"path\") {\n fields = createPathFields(item, hMin, hMax, vMin, vMax);\n }\n return createHtml(item, fields, boolOp);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":25,"value":"function createHtml(item, fields, boolOp) {\n return htl.html`\n \n `;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":98,"value":"function createSliderAndValue(fields) {\n return fields.map(\n (field) => htl.html`\n

\n ${field.label}:\n \n \n

\n `\n );\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":9,"value":"function createOperationButtons(boolOp) {\n if (boolOp) {\n return htl.html`\n \n \n \n `;\n } else {\n return \"\";\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":39,"value":"function createCircleFields(item, HorizMin, horizMax, vertMin, vertmax) {\n return [\n createGeomField(\"x\", \"x\", HorizMin, horizMax, item.position.x),\n createGeomField(\"y\", \"y\", vertMin, vertmax, item.position.y),\n createGeomField(\"r\", \"r\", 0.05, horizMax * 2, item.bounds.width)\n ];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":47,"value":"function createRectangleFields(item, HorizMin, horizMax, vertMin, vertmax) {\n return [\n createGeomField(\"x\", \"x\", HorizMin, horizMax, item.position.x),\n createGeomField(\"y\", \"y\", vertMin, vertmax, item.position.y),\n createGeomField(\"w\", \"w\", 0.05, horizMax * 2, item.bounds.width),\n createGeomField(\"h\", \"h\", 0.05, vertmax * 2, item.bounds.height),\n createGeomField(\"rotation\", \"rotation\", 0, 360, 0)\n ];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":54,"value":"function createPathFields(item, HorizMin, horizMax, vertMin, vertmax) {\n var x, y;\n // whether it is a group of path or single Path;\n if (Array.isArray(item)) {\n x = item.reduce((accu, cur) => accu + cur.position.x, 0) / item.length;\n y = item.reduce((accu, cur) => accu + cur.position.y, 0) / item.length;\n } else {\n x = item.position.x;\n y = item.position.y;\n }\n return [\n createGeomField(\"x\", \"x\", HorizMin, horizMax, x),\n createGeomField(\"y\", \"y\", vertMin, vertmax, y),\n createGeomField(\"rotation\", \"rotation\", 0, 360, 0),\n createGeomField(\"scale\", \"scale\", 0.05, 3, 1)\n ];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":34,"value":"function createGeomField(id, label, min, max, value) {\n return { id: id, label: label, min: min, max: max, value: value };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":81,"value":"formItem = {\n var formItem = {\n circle: [\"x\", \"y\", \"r\"],\n rectangle: [\"x\", \"y\", \"w\", \"h\", \"rotation\"],\n path: [\"x\", \"y\", \"rotation\", \"scale\"]\n };\n return formItem;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":150,"value":"function removeEventListeners(form, item, fields) {\n item.forEach((eachItem) => {\n fields.forEach((field) => {\n // Remove input event listener\n form\n .querySelector(`#${field.id}`)\n .removeEventListener(\n \"input\" /* reference to the input event handler */\n );\n\n // Remove change event listener for the value element\n form\n .querySelector(`#${field.id}Value`)\n .removeEventListener(\n \"change\" /* reference to the change event handler */\n );\n });\n });\n}","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W2f","stdlib":"1","titling":"auto"}