/g, '
');\n\n/* src/core/ui/components/ContentEditable.svelte generated by Svelte v3.52.0 */\n\nfunction create_fragment$h(ctx) {\n\tlet pre;\n\tlet pre_data_wrap_content_value;\n\tlet mounted;\n\tlet dispose;\n\n\treturn {\n\t\tc() {\n\t\t\tpre = element(\"pre\");\n\t\t\tattr(pre, \"class\", \"PinturaContentEditable\");\n\n\t\t\tattr(pre, \"data-wrap-content\", pre_data_wrap_content_value = !/*wrapLines*/ ctx[3] && !/*allowNewline*/ ctx[4]\n\t\t\t? 'nowrap'\n\t\t\t: 'wrap');\n\n\t\t\tattr(pre, \"contenteditable\", \"\");\n\t\t\tattr(pre, \"spellcheck\", /*spellcheck*/ ctx[0]);\n\t\t\tattr(pre, \"autocorrect\", /*autocorrect*/ ctx[1]);\n\t\t\tattr(pre, \"autocapitalize\", /*autocapitalize*/ ctx[2]);\n\t\t\tattr(pre, \"style\", /*contentStyle*/ ctx[6]);\n\t\t},\n\t\tm(target, anchor) {\n\t\t\tinsert(target, pre, anchor);\n\t\t\t/*pre_binding*/ ctx[24](pre);\n\n\t\t\tif (!mounted) {\n\t\t\t\tdispose = [\n\t\t\t\t\tlisten(pre, \"input\", /*handleInput*/ ctx[11]),\n\t\t\t\t\tlisten(pre, \"compositionend\", /*handleCompositionEnd*/ ctx[10]),\n\t\t\t\t\tlisten(pre, \"paste\", /*handlePaste*/ ctx[12]),\n\t\t\t\t\tlisten(pre, \"keydown\", /*handleKeydown*/ ctx[8]),\n\t\t\t\t\tlisten(pre, \"keyup\", /*handleKeyup*/ ctx[9]),\n\t\t\t\t\tlisten(pre, \"blur\", /*handleBlur*/ ctx[7])\n\t\t\t\t];\n\n\t\t\t\tmounted = true;\n\t\t\t}\n\t\t},\n\t\tp(ctx, dirty) {\n\t\t\tif (dirty[0] & /*wrapLines, allowNewline*/ 24 && pre_data_wrap_content_value !== (pre_data_wrap_content_value = !/*wrapLines*/ ctx[3] && !/*allowNewline*/ ctx[4]\n\t\t\t? 'nowrap'\n\t\t\t: 'wrap')) {\n\t\t\t\tattr(pre, \"data-wrap-content\", pre_data_wrap_content_value);\n\t\t\t}\n\n\t\t\tif (dirty[0] & /*spellcheck*/ 1) {\n\t\t\t\tattr(pre, \"spellcheck\", /*spellcheck*/ ctx[0]);\n\t\t\t}\n\n\t\t\tif (dirty[0] & /*autocorrect*/ 2) {\n\t\t\t\tattr(pre, \"autocorrect\", /*autocorrect*/ ctx[1]);\n\t\t\t}\n\n\t\t\tif (dirty[0] & /*autocapitalize*/ 4) {\n\t\t\t\tattr(pre, \"autocapitalize\", /*autocapitalize*/ ctx[2]);\n\t\t\t}\n\n\t\t\tif (dirty[0] & /*contentStyle*/ 64) {\n\t\t\t\tattr(pre, \"style\", /*contentStyle*/ ctx[6]);\n\t\t\t}\n\t\t},\n\t\ti: noop,\n\t\to: noop,\n\t\td(detaching) {\n\t\t\tif (detaching) detach(pre);\n\t\t\t/*pre_binding*/ ctx[24](null);\n\t\t\tmounted = false;\n\t\t\trun_all(dispose);\n\t\t}\n\t};\n}\n\nfunction instance$h($$self, $$props, $$invalidate) {\n\tlet isReady;\n\tlet { spellcheck = 'false' } = $$props;\n\tlet { autocorrect = 'off' } = $$props;\n\tlet { autocapitalize = 'off' } = $$props;\n\tlet { wrapLines = true } = $$props;\n\tlet { allowNewline = true } = $$props;\n\tlet { textFormat = 'text' } = $$props;\n\tlet { formatInput = passthrough } = $$props;\n\tlet { formatPaste = passthrough } = $$props;\n\tlet { style = undefined } = $$props;\n\tlet { innerHTML = undefined } = $$props;\n\tlet { oninput = noop$1 } = $$props;\n\tlet { enableTextStyleShortcuts = false } = $$props;\n\tconst confirm = () => confirmInputState();\n\tconst focus = () => element && element.focus();\n\n\tconst select = () => {\n\t\tif (!element) return;\n\t\tconst range = document.createRange();\n\t\trange.selectNodeContents(element);\n\t\tconst selection = getSelectionSafe();\n\t\tselection.removeAllRanges();\n\t\tselection.addRange(range);\n\t};\n\n\t// events\n\tconst dispatchEvent = createEventDispatcher();\n\n\t// reference to contenteditable element\n\tlet element;\n\n\t// use
for line breaks\n\tdocument.execCommand('defaultParagraphSeparator', false, 'br');\n\n\tconst setInnerHTML = html => {\n\t\tif (html === element.innerHTML) return;\n\t\t$$invalidate(5, element.innerHTML = html, element);\n\t\tif (element === document.activeElement) select();\n\t};\n\n\tconst removeTextStyles = html => {\n\t\treturn html.replace(/<\\/?(?:i|b|em|u|s|strike|strong|font)>/, '').replace(/style=\".*?\"/g, '').replace(/\\n/gim, '
');\n\t};\n\n\tconst updateInnerHTML = () => {\n\t\t// sync property\n\t\t$$invalidate(13, innerHTML = element.innerHTML);\n\n\t\t// let others know\n\t\tconst currentValue = replaceDivWithBr(innerHTML);\n\n\t\tdispatchEvent('input', currentValue);\n\t\toninput(currentValue);\n\n\t\t// always scroll to top\n\t\trequestAnimationFrame(() => element && element.scrollTo(0, 0));\n\t};\n\n\tconst confirmInputState = () => {\n\t\t// bookmark caret positions\n\t\tinsertBookmarks(element);\n\n\t\t// remove styles\n\t\tconst html = textFormat === 'html'\n\t\t? element.innerHTML\n\t\t: removeTextStyles(element.innerHTML);\n\n\t\t// update HTML (don't remove caret positions)\n\t\t$$invalidate(5, element.innerHTML = formatInput(html), element);\n\n\t\t// select bookmarks and remove from DOM\n\t\tselectBookmarks(element);\n\n\t\t// content updated\n\t\tupdateInnerHTML();\n\t};\n\n\tconst handleBlur = () => {\n\t\tdispatchEvent('blur');\n\t};\n\n\tconst handleConfirm = () => {\n\t\tdispatchEvent('confirm');\n\t};\n\n\tconst handleCancel = () => {\n\t\tdispatchEvent('cancel');\n\t};\n\n\tconst styleKeys = {\n\t\tb: 'bold',\n\t\ti: 'italic',\n\t\tu: 'underline',\n\t\ts: 'strikethrough'\n\t};\n\n\tconst handleStyleShortcut = key => {\n\t\tconst cmd = styleKeys[key];\n\t\tcmd && document.execCommand(cmd);\n\t};\n\n\tconst handleKeydown = e => {\n\t\t// is escape key, cancel\n\t\tif ((/escape/i).test(e.code)) {\n\t\t\te.stopPropagation();\n\t\t\treturn handleCancel();\n\t\t}\n\n\t\tconst cmdPressed = e.ctrlKey || e.metaKey;\n\n\t\t// prevent text style keys\n\t\tif (textFormat === 'html' && cmdPressed) {\n\t\t\tif ((/b|i|u|s/).test(e.key)) {\n\t\t\t\tenableTextStyleShortcuts && handleStyleShortcut(e.key);\n\t\t\t\te.preventDefault();\n\t\t\t\treturn;\n\t\t\t}\n\t\t}\n\n\t\t// stop here\n\t\tif (!(/enter/i).test(e.code)) return;\n\n\t\t// don't let others handle return while in text area\n\t\te.stopPropagation();\n\n\t\t// is cmd + enter or ctrl + enter\n\t\tif (cmdPressed) return handleConfirm();\n\n\t\t// block return when newlines not allowed\n\t\tif (!allowNewline) e.preventDefault();\n\n\t\tdocument.execCommand('insertLineBreak');\n\t\te.preventDefault();\n\t};\n\n\tconst handleKeyup = () => {\n\t\t\n\t};\n\n\tconst handleCompositionEnd = e => {\n\t\tif (e.data === '') return;\n\t\tconfirmInputState();\n\t};\n\n\tconst handleInput = e => {\n\t\tconst { inputType } = e;\n\n\t\t// more info on when inputType is which value\n\t\t// https://rawgit.com/w3c/input-events/v1/index.html#interface-InputEvent-Attributes\n\t\tif (inputType === 'insertCompositionText' || inputType === 'deleteCompositionText') {\n\t\t\t// we're composing (to for example write é, or Japanese characters),\n\t\t\t// if so, wait for composition end before formatting content\n\t\t\treturn;\n\t\t}\n\n\t\tconfirmInputState();\n\t};\n\n\tconst handlePaste = e => {\n\t\te.preventDefault();\n\n\t\t// remove styles\n\t\tconst plainText = e.clipboardData.getData('text/plain');\n\n\t\tconst html = textFormat === 'html'\n\t\t? plainText\n\t\t: removeTextStyles(plainText);\n\n\t\t// format the pasted text before adding\n\t\tconst text = formatPaste(html);\n\n\t\tif (!text.length) return;\n\n\t\t// get range for current selection and replace with text\n\t\tconst range = getSelectionSafe().getRangeAt(0);\n\n\t\trange.deleteContents();\n\t\trange.insertNode(document.createTextNode(text));\n\n\t\t// content updated\n\t\tupdateInnerHTML();\n\t};\n\n\t//#region bookmarks\n\tconst createBookmark = name => {\n\t\tconst bookmarkNode = h('span');\n\t\tbookmarkNode.dataset.bookmark = name;\n\t\treturn bookmarkNode;\n\t};\n\n\tconst insertBookmark = (node, offset, name) => {\n\t\t// create the bookmark element\n\t\tconst bookmarkNode = createBookmark(name);\n\n\t\t// split up in two text nodes and insert\n\t\tif (node.nodeType === Node.TEXT_NODE) {\n\t\t\tconst text = node.textContent;\n\n\t\t\tif (name === 'start') {\n\t\t\t\tconst before = t(text.substr(0, offset));\n\t\t\t\tconst after = t(text.substr(offset));\n\t\t\t\tnode.replaceWith(before, bookmarkNode, after);\n\t\t\t} else {\n\t\t\t\tconst before = t(text.substr(0, offset));\n\t\t\t\tconst after = t(text.substr(offset));\n\t\t\t\tnode.replaceWith(before, bookmarkNode, after);\n\t\t\t}\n\t\t} else // is node\n\t\tif (node.nodeType === Node.ELEMENT_NODE) {\n\t\t\tnode.insertBefore(bookmarkNode, node.childNodes[offset]);\n\t\t}\n\t};\n\n\tconst getSelectionSafe = () => {\n\t\tconst root = element.getRootNode();\n\n\t\t// chrome needs to select from shadowRoot if in Shadow DOM\n\t\t// firefox can select from document and doesn't have getSelection support on shadowRoot\n\t\t// safari cannot deal with text selection in shadowRoot at this time (MacOS Safari 16)\n\t\treturn 'getSelection' in root\n\t\t? root.getSelection()\n\t\t: document.getSelection();\n\t};\n\n\tconst insertBookmarks = element => {\n\t\tconst selection = getSelectionSafe();\n\t\tif (!(selection.getRangeAt && selection.rangeCount)) return;\n\t\tconst range = selection.getRangeAt(0);\n\t\tconst { startOffset, endOffset, startContainer, endContainer } = range;\n\n\t\t// range needs to be in element\n\t\tif (!element.contains(range.startContainer) || !element.contains(range.endContainer)) return;\n\n\t\t// should break up one text container\n\t\tif (startContainer.nodeType === Node.TEXT_NODE && startContainer === endContainer) {\n\t\t\tconst text = startContainer.textContent;\n\t\t\tconst before = text.substr(0, startOffset);\n\t\t\tconst bookmarkStart = createBookmark('start');\n\n\t\t\tconst selected = endOffset - startOffset > 0\n\t\t\t? text.substr(startOffset, endOffset)\n\t\t\t: '';\n\n\t\t\tconst bookmarkEnd = createBookmark('end');\n\t\t\tconst after = text.substr(endOffset);\n\t\t\tstartContainer.replaceWith(before, bookmarkStart, selected, bookmarkEnd, after);\n\t\t} else // should add to separate containers\n\t\t{\n\t\t\tinsertBookmark(startContainer, startOffset, 'start');\n\n\t\t\tinsertBookmark(\n\t\t\t\tendContainer,\n\t\t\t\t// if is same container need to move to next index as we've just added start bookmark\n\t\t\t\tendOffset + (startContainer === endContainer ? 1 : 0),\n\t\t\t\t'end'\n\t\t\t);\n\t\t}\n\t};\n\n\tconst selectBookmarks = element => {\n\t\t// get locations of bookmarks\n\t\tconst bookmarkStart = findBookmark(element, 'start');\n\n\t\tconst bookmarkEnd = findBookmark(element, 'end');\n\n\t\t// remove bookmarks (if found)\n\t\tif (!bookmarkStart || !bookmarkEnd) return;\n\n\t\t// set caret positions\n\t\tconst range = document.createRange();\n\n\t\trange.setStart(bookmarkStart, 0);\n\t\trange.setEnd(bookmarkEnd, 0);\n\t\tconst selection = getSelectionSafe();\n\t\tselection.removeAllRanges();\n\t\tselection.addRange(range);\n\n\t\t// remove bookmarks\n\t\tbookmarkStart.remove();\n\n\t\tbookmarkEnd.remove();\n\t};\n\n\tconst findBookmark = (element, name) => {\n\t\tconst children = element.children;\n\n\t\tfor (let i = 0; i < children.length; i++) {\n\t\t\tconst node = children[i];\n\t\t\tif (node.dataset.bookmark === name) return node;\n\n\t\t\tif (node.children.length) {\n\t\t\t\tconst bookmarkNode = findBookmark(node, name);\n\t\t\t\tif (bookmarkNode) return bookmarkNode;\n\t\t\t}\n\t\t}\n\n\t\treturn;\n\t};\n\n\t// add extra space on left or right side of content input so special symbols\n\t// are rendered on correct line while waiting for completion\n\tlet contentStyle;\n\n\tfunction pre_binding($$value) {\n\t\tbinding_callbacks[$$value ? 'unshift' : 'push'](() => {\n\t\t\telement = $$value;\n\t\t\t$$invalidate(5, element);\n\t\t});\n\t}\n\n\t$$self.$$set = $$props => {\n\t\tif ('spellcheck' in $$props) $$invalidate(0, spellcheck = $$props.spellcheck);\n\t\tif ('autocorrect' in $$props) $$invalidate(1, autocorrect = $$props.autocorrect);\n\t\tif ('autocapitalize' in $$props) $$invalidate(2, autocapitalize = $$props.autocapitalize);\n\t\tif ('wrapLines' in $$props) $$invalidate(3, wrapLines = $$props.wrapLines);\n\t\tif ('allowNewline' in $$props) $$invalidate(4, allowNewline = $$props.allowNewline);\n\t\tif ('textFormat' in $$props) $$invalidate(14, textFormat = $$props.textFormat);\n\t\tif ('formatInput' in $$props) $$invalidate(15, formatInput = $$props.formatInput);\n\t\tif ('formatPaste' in $$props) $$invalidate(16, formatPaste = $$props.formatPaste);\n\t\tif ('style' in $$props) $$invalidate(17, style = $$props.style);\n\t\tif ('innerHTML' in $$props) $$invalidate(13, innerHTML = $$props.innerHTML);\n\t\tif ('oninput' in $$props) $$invalidate(18, oninput = $$props.oninput);\n\t\tif ('enableTextStyleShortcuts' in $$props) $$invalidate(19, enableTextStyleShortcuts = $$props.enableTextStyleShortcuts);\n\t};\n\n\t$$self.$$.update = () => {\n\t\tif ($$self.$$.dirty[0] & /*element*/ 32) {\n\t\t\t// set value when html property is set and element reference is bound\n\t\t\t$$invalidate(23, isReady = !!element);\n\t\t}\n\n\t\tif ($$self.$$.dirty[0] & /*isReady, innerHTML*/ 8396800) {\n\t\t\tif (isReady && innerHTML) setInnerHTML(innerHTML);\n\t\t}\n\n\t\tif ($$self.$$.dirty[0] & /*wrapLines, allowNewline, style*/ 131096) {\n\t\t\tif (!wrapLines && allowNewline) {\n\t\t\t\t// TODO: no fix for center text yet\n\t\t\t\tconst contentStyleAdditional = style.includes(':right')\n\t\t\t\t? 'text-indent:-100px!important'\n\t\t\t\t: !style.includes(':center')\n\t\t\t\t\t? 'min-width:calc(100% + 100px)!important'\n\t\t\t\t\t: '';\n\n\t\t\t\t$$invalidate(6, contentStyle = style + ';overflow:visible;' + contentStyleAdditional);\n\t\t\t} else {\n\t\t\t\t$$invalidate(6, contentStyle = style);\n\t\t\t}\n\t\t}\n\t};\n\n\treturn [\n\t\tspellcheck,\n\t\tautocorrect,\n\t\tautocapitalize,\n\t\twrapLines,\n\t\tallowNewline,\n\t\telement,\n\t\tcontentStyle,\n\t\thandleBlur,\n\t\thandleKeydown,\n\t\thandleKeyup,\n\t\thandleCompositionEnd,\n\t\thandleInput,\n\t\thandlePaste,\n\t\tinnerHTML,\n\t\ttextFormat,\n\t\tformatInput,\n\t\tformatPaste,\n\t\tstyle,\n\t\toninput,\n\t\tenableTextStyleShortcuts,\n\t\tconfirm,\n\t\tfocus,\n\t\tselect,\n\t\tisReady,\n\t\tpre_binding\n\t];\n}\n\nclass ContentEditable extends SvelteComponent {\n\tconstructor(options) {\n\t\tsuper();\n\n\t\tinit(\n\t\t\tthis,\n\t\t\toptions,\n\t\t\tinstance$h,\n\t\t\tcreate_fragment$h,\n\t\t\tsafe_not_equal,\n\t\t\t{\n\t\t\t\tspellcheck: 0,\n\t\t\t\tautocorrect: 1,\n\t\t\t\tautocapitalize: 2,\n\t\t\t\twrapLines: 3,\n\t\t\t\tallowNewline: 4,\n\t\t\t\ttextFormat: 14,\n\t\t\t\tformatInput: 15,\n\t\t\t\tformatPaste: 16,\n\t\t\t\tstyle: 17,\n\t\t\t\tinnerHTML: 13,\n\t\t\t\toninput: 18,\n\t\t\t\tenableTextStyleShortcuts: 19,\n\t\t\t\tconfirm: 20,\n\t\t\t\tfocus: 21,\n\t\t\t\tselect: 22\n\t\t\t},\n\t\t\tnull,\n\t\t\t[-1, -1]\n\t\t);\n\t}\n\n\tget spellcheck() {\n\t\treturn this.$$.ctx[0];\n\t}\n\n\tset spellcheck(spellcheck) {\n\t\tthis.$$set({ spellcheck });\n\t\tflush();\n\t}\n\n\tget autocorrect() {\n\t\treturn this.$$.ctx[1];\n\t}\n\n\tset autocorrect(autocorrect) {\n\t\tthis.$$set({ autocorrect });\n\t\tflush();\n\t}\n\n\tget autocapitalize() {\n\t\treturn this.$$.ctx[2];\n\t}\n\n\tset autocapitalize(autocapitalize) {\n\t\tthis.$$set({ autocapitalize });\n\t\tflush();\n\t}\n\n\tget wrapLines() {\n\t\treturn this.$$.ctx[3];\n\t}\n\n\tset wrapLines(wrapLines) {\n\t\tthis.$$set({ wrapLines });\n\t\tflush();\n\t}\n\n\tget allowNewline() {\n\t\treturn this.$$.ctx[4];\n\t}\n\n\tset allowNewline(allowNewline) {\n\t\tthis.$$set({ allowNewline });\n\t\tflush();\n\t}\n\n\tget textFormat() {\n\t\treturn this.$$.ctx[14];\n\t}\n\n\tset textFormat(textFormat) {\n\t\tthis.$$set({ textFormat });\n\t\tflush();\n\t}\n\n\tget formatInput() {\n\t\treturn this.$$.ctx[15];\n\t}\n\n\tset formatInput(formatInput) {\n\t\tthis.$$set({ formatInput });\n\t\tflush();\n\t}\n\n\tget formatPaste() {\n\t\treturn this.$$.ctx[16];\n\t}\n\n\tset formatPaste(formatPaste) {\n\t\tthis.$$set({ formatPaste });\n\t\tflush();\n\t}\n\n\tget style() {\n\t\treturn this.$$.ctx[17];\n\t}\n\n\tset style(style) {\n\t\tthis.$$set({ style });\n\t\tflush();\n\t}\n\n\tget innerHTML() {\n\t\treturn this.$$.ctx[13];\n\t}\n\n\tset innerHTML(innerHTML) {\n\t\tthis.$$set({ innerHTML });\n\t\tflush();\n\t}\n\n\tget oninput() {\n\t\treturn this.$$.ctx[18];\n\t}\n\n\tset oninput(oninput) {\n\t\tthis.$$set({ oninput });\n\t\tflush();\n\t}\n\n\tget enableTextStyleShortcuts() {\n\t\treturn this.$$.ctx[19];\n\t}\n\n\tset enableTextStyleShortcuts(enableTextStyleShortcuts) {\n\t\tthis.$$set({ enableTextStyleShortcuts });\n\t\tflush();\n\t}\n\n\tget confirm() {\n\t\treturn this.$$.ctx[20];\n\t}\n\n\tget focus() {\n\t\treturn this.$$.ctx[21];\n\t}\n\n\tget select() {\n\t\treturn this.$$.ctx[22];\n\t}\n}\n\nconst DefaultFormattingTags = ['i', 'b', 'u', 'strike'].map((tag) => ({\n tag,\n tagOpen: new RegExp(`<${tag}>`, 'g'),\n tagClose: new RegExp(`<\\/${tag}>`, 'g'),\n placeholderOpen: new RegExp(`___${tag}O___`, 'g'),\n placeholderClose: new RegExp(`___${tag}C___`, 'g'),\n}));\nconst replaceFormattingTags = (str, tags = DefaultFormattingTags) => {\n tags.forEach(({ tag, tagOpen, tagClose }) => {\n str = str.replace(tagOpen, `___${tag}O___`).replace(tagClose, `___${tag}C___`);\n });\n return str;\n};\nconst restoreFormattingTags = (str, tags = DefaultFormattingTags) => {\n tags.forEach(({ tag, placeholderOpen, placeholderClose }) => {\n str = str.replace(placeholderOpen, `<${tag}>`).replace(placeholderClose, ``);\n });\n return str;\n};\nvar textToHTML = (text) => {\n // temporary replace bold italic\n text = replaceFormattingTags(text);\n // now encode\n text = text\n // collapse space sequences\n .replace(/ {2,}/g, ' ')\n // handle non breaking space characters\n .replace(/\\u00a0/g, ' ')\n // lines\n .split('\\n')\n // to br's\n .join('
');\n // put back bold and italic\n text = restoreFormattingTags(text);\n return text;\n};\n\nvar htmlToText = (html) => {\n const lines = replaceDivWithBr(html).split(/
|
/g);\n return lines\n .join('\\n')\n .replace(/ /g, String.fromCharCode(160))\n .replace(/&/g, '&');\n};\n\nvar fromPercentage = (value, context) => isString(value) ? (parseFloat(value) / 100) * context : value;\n\nvar toPercentagePoint = (point, context) => ({\n x: toPercentage(point.x, context.width),\n y: toPercentage(point.y, context.height),\n});\n\n/* src/core/ui/components/ShapeLayoutEditor.svelte generated by Svelte v3.52.0 */\n\nfunction get_each_context$3(ctx, list, i) {\n\tconst child_ctx = ctx.slice();\n\tchild_ctx[224] = list[i];\n\tchild_ctx[226] = i;\n\treturn child_ctx;\n}\n\n// (3548:12) {#each shapeNavList as item, index (item.id)}\nfunction create_each_block$3(key_1, ctx) {\n\tlet li;\n\tlet button;\n\tlet colorpreview;\n\tlet t0;\n\tlet span;\n\tlet t1_value = /*item*/ ctx[224].name + \"\";\n\tlet t1;\n\tlet button_aria_label_value;\n\tlet t2;\n\tlet current;\n\tlet mounted;\n\tlet dispose;\n\n\tcolorpreview = new ColorPreview({\n\t\t\tprops: { color: /*item*/ ctx[224].color }\n\t\t});\n\n\tfunction click_handler() {\n\t\treturn /*click_handler*/ ctx[152](/*index*/ ctx[226]);\n\t}\n\n\treturn {\n\t\tkey: key_1,\n\t\tfirst: null,\n\t\tc() {\n\t\t\tli = element(\"li\");\n\t\t\tbutton = element(\"button\");\n\t\t\tcreate_component(colorpreview.$$.fragment);\n\t\t\tt0 = space();\n\t\t\tspan = element(\"span\");\n\t\t\tt1 = text(t1_value);\n\t\t\tt2 = space();\n\t\t\tattr(button, \"class\", \"PinturaShapeListItem\");\n\t\t\tattr(button, \"type\", \"button\");\n\t\t\tattr(button, \"aria-label\", button_aria_label_value = \"Select shape \" + /*item*/ ctx[224].name);\n\t\t\tthis.first = li;\n\t\t},\n\t\tm(target, anchor) {\n\t\t\tinsert(target, li, anchor);\n\t\t\tappend(li, button);\n\t\t\tmount_component(colorpreview, button, null);\n\t\t\tappend(button, t0);\n\t\t\tappend(button, span);\n\t\t\tappend(span, t1);\n\t\t\tappend(li, t2);\n\t\t\tcurrent = true;\n\n\t\t\tif (!mounted) {\n\t\t\t\tdispose = listen(button, \"click\", click_handler);\n\t\t\t\tmounted = true;\n\t\t\t}\n\t\t},\n\t\tp(new_ctx, dirty) {\n\t\t\tctx = new_ctx;\n\t\t\tconst colorpreview_changes = {};\n\t\t\tif (dirty[0] & /*shapeNavList*/ 1048576) colorpreview_changes.color = /*item*/ ctx[224].color;\n\t\t\tcolorpreview.$set(colorpreview_changes);\n\t\t\tif ((!current || dirty[0] & /*shapeNavList*/ 1048576) && t1_value !== (t1_value = /*item*/ ctx[224].name + \"\")) set_data(t1, t1_value);\n\n\t\t\tif (!current || dirty[0] & /*shapeNavList*/ 1048576 && button_aria_label_value !== (button_aria_label_value = \"Select shape \" + /*item*/ ctx[224].name)) {\n\t\t\t\tattr(button, \"aria-label\", button_aria_label_value);\n\t\t\t}\n\t\t},\n\t\ti(local) {\n\t\t\tif (current) return;\n\t\t\ttransition_in(colorpreview.$$.fragment, local);\n\t\t\tcurrent = true;\n\t\t},\n\t\to(local) {\n\t\t\ttransition_out(colorpreview.$$.fragment, local);\n\t\t\tcurrent = false;\n\t\t},\n\t\td(detaching) {\n\t\t\tif (detaching) detach(li);\n\t\t\tdestroy_component(colorpreview);\n\t\t\tmounted = false;\n\t\t\tdispose();\n\t\t}\n\t};\n}\n\n// (3564:4) {#if shouldRenderShapeManipulator}\nfunction create_if_block_4$2(ctx) {\n\tlet shapemanipulator;\n\tlet current;\n\n\tshapemanipulator = new ShapeManipulator({\n\t\t\tprops: {\n\t\t\t\tvisible: true,\n\t\t\t\tpoints: /*shapeManipulatorPoints*/ ctx[12],\n\t\t\t\trotatorPoint: /*shapeManipulatorRotationPointPosition*/ ctx[26],\n\t\t\t\tenableDragEdges: /*allowEdgeControls*/ ctx[16],\n\t\t\t\tenableDragPoints: /*allowCornerControls*/ ctx[28],\n\t\t\t\tenableRotatePoints: /*allowRotateControls*/ ctx[14]\n\t\t\t}\n\t\t});\n\n\tshapemanipulator.$on(\"resizestart\", /*handleManipulatorResizeGrab*/ ctx[36]);\n\tshapemanipulator.$on(\"resizemove\", /*handleManipulatorResizeDrag*/ ctx[37]);\n\tshapemanipulator.$on(\"resizeend\", /*handleManipulatorResizeEnd*/ ctx[38]);\n\tshapemanipulator.$on(\"rotatestart\", /*handleManipulatorRotateGrab*/ ctx[39]);\n\tshapemanipulator.$on(\"rotatemove\", /*handleManipulatorRotateDrag*/ ctx[40]);\n\tshapemanipulator.$on(\"rotateend\", /*handleManipulatorRotateEnd*/ ctx[41]);\n\n\treturn {\n\t\tc() {\n\t\t\tcreate_component(shapemanipulator.$$.fragment);\n\t\t},\n\t\tm(target, anchor) {\n\t\t\tmount_component(shapemanipulator, target, anchor);\n\t\t\tcurrent = true;\n\t\t},\n\t\tp(ctx, dirty) {\n\t\t\tconst shapemanipulator_changes = {};\n\t\t\tif (dirty[0] & /*shapeManipulatorPoints*/ 4096) shapemanipulator_changes.points = /*shapeManipulatorPoints*/ ctx[12];\n\t\t\tif (dirty[0] & /*shapeManipulatorRotationPointPosition*/ 67108864) shapemanipulator_changes.rotatorPoint = /*shapeManipulatorRotationPointPosition*/ ctx[26];\n\t\t\tif (dirty[0] & /*allowEdgeControls*/ 65536) shapemanipulator_changes.enableDragEdges = /*allowEdgeControls*/ ctx[16];\n\t\t\tif (dirty[0] & /*allowCornerControls*/ 268435456) shapemanipulator_changes.enableDragPoints = /*allowCornerControls*/ ctx[28];\n\t\t\tif (dirty[0] & /*allowRotateControls*/ 16384) shapemanipulator_changes.enableRotatePoints = /*allowRotateControls*/ ctx[14];\n\t\t\tshapemanipulator.$set(shapemanipulator_changes);\n\t\t},\n\t\ti(local) {\n\t\t\tif (current) return;\n\t\t\ttransition_in(shapemanipulator.$$.fragment, local);\n\t\t\tcurrent = true;\n\t\t},\n\t\to(local) {\n\t\t\ttransition_out(shapemanipulator.$$.fragment, local);\n\t\t\tcurrent = false;\n\t\t},\n\t\td(detaching) {\n\t\t\tdestroy_component(shapemanipulator, detaching);\n\t\t}\n\t};\n}\n\n// (3581:4) {#if shouldRenderTextInput}\nfunction create_if_block_1$2(ctx) {\n\tlet current_block_type_index;\n\tlet if_block;\n\tlet if_block_anchor;\n\tlet current;\n\tconst if_block_creators = [create_if_block_2$2, create_if_block_3$2];\n\tconst if_blocks = [];\n\n\tfunction select_block_type(ctx, dirty) {\n\t\tif (/*textInputMode*/ ctx[4] === 'modal') return 0;\n\t\tif (/*textInputMode*/ ctx[4] === 'inline') return 1;\n\t\treturn -1;\n\t}\n\n\tif (~(current_block_type_index = select_block_type(ctx))) {\n\t\tif_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx);\n\t}\n\n\treturn {\n\t\tc() {\n\t\t\tif (if_block) if_block.c();\n\t\t\tif_block_anchor = empty();\n\t\t},\n\t\tm(target, anchor) {\n\t\t\tif (~current_block_type_index) {\n\t\t\t\tif_blocks[current_block_type_index].m(target, anchor);\n\t\t\t}\n\n\t\t\tinsert(target, if_block_anchor, anchor);\n\t\t\tcurrent = true;\n\t\t},\n\t\tp(ctx, dirty) {\n\t\t\tlet previous_block_index = current_block_type_index;\n\t\t\tcurrent_block_type_index = select_block_type(ctx);\n\n\t\t\tif (current_block_type_index === previous_block_index) {\n\t\t\t\tif (~current_block_type_index) {\n\t\t\t\t\tif_blocks[current_block_type_index].p(ctx, dirty);\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\tif (if_block) {\n\t\t\t\t\tgroup_outros();\n\n\t\t\t\t\ttransition_out(if_blocks[previous_block_index], 1, 1, () => {\n\t\t\t\t\t\tif_blocks[previous_block_index] = null;\n\t\t\t\t\t});\n\n\t\t\t\t\tcheck_outros();\n\t\t\t\t}\n\n\t\t\t\tif (~current_block_type_index) {\n\t\t\t\t\tif_block = if_blocks[current_block_type_index];\n\n\t\t\t\t\tif (!if_block) {\n\t\t\t\t\t\tif_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx);\n\t\t\t\t\t\tif_block.c();\n\t\t\t\t\t} else {\n\t\t\t\t\t\tif_block.p(ctx, dirty);\n\t\t\t\t\t}\n\n\t\t\t\t\ttransition_in(if_block, 1);\n\t\t\t\t\tif_block.m(if_block_anchor.parentNode, if_block_anchor);\n\t\t\t\t} else {\n\t\t\t\t\tif_block = null;\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t\ti(local) {\n\t\t\tif (current) return;\n\t\t\ttransition_in(if_block);\n\t\t\tcurrent = true;\n\t\t},\n\t\to(local) {\n\t\t\ttransition_out(if_block);\n\t\t\tcurrent = false;\n\t\t},\n\t\td(detaching) {\n\t\t\tif (~current_block_type_index) {\n\t\t\t\tif_blocks[current_block_type_index].d(detaching);\n\t\t\t}\n\n\t\t\tif (detaching) detach(if_block_anchor);\n\t\t}\n\t};\n}\n\n// (3605:45) \nfunction create_if_block_3$2(ctx) {\n\tlet div;\n\tlet contenteditable;\n\tlet current;\n\tlet mounted;\n\tlet dispose;\n\n\tlet contenteditable_props = {\n\t\tformatInput: /*formatContentEditable*/ ctx[43],\n\t\twrapLines: !!/*activeMarkupComputed*/ ctx[13].width,\n\t\ttextFormat: /*activeMarkupComputed*/ ctx[13].format,\n\t\tenableTextStyleShortcuts: /*enableTextStyleControls*/ ctx[5],\n\t\tallowNewline: /*shapeAllowNewline*/ ctx[27],\n\t\tstyle: /*textInputTextStyles*/ ctx[25]\n\t};\n\n\tcontenteditable = new ContentEditable({ props: contenteditable_props });\n\t/*contenteditable_binding*/ ctx[155](contenteditable);\n\tcontenteditable.$on(\"input\", /*handleTextInput*/ ctx[44]);\n\tcontenteditable.$on(\"keyup\", /*handleTextInputKeyUp*/ ctx[47]);\n\tcontenteditable.$on(\"cancel\", /*handleTextCancel*/ ctx[49]);\n\tcontenteditable.$on(\"confirm\", /*handleTextConfirm*/ ctx[48]);\n\n\treturn {\n\t\tc() {\n\t\t\tdiv = element(\"div\");\n\t\t\tcreate_component(contenteditable.$$.fragment);\n\t\t\tattr(div, \"class\", \"PinturaInlineInput\");\n\t\t\tattr(div, \"style\", /*textInputPositionStyles*/ ctx[24]);\n\t\t},\n\t\tm(target, anchor) {\n\t\t\tinsert(target, div, anchor);\n\t\t\tmount_component(contenteditable, div, null);\n\t\t\tcurrent = true;\n\n\t\t\tif (!mounted) {\n\t\t\t\tdispose = listen(div, \"focusout\", /*focusout_handler*/ ctx[156]);\n\t\t\t\tmounted = true;\n\t\t\t}\n\t\t},\n\t\tp(ctx, dirty) {\n\t\t\tconst contenteditable_changes = {};\n\t\t\tif (dirty[0] & /*activeMarkupComputed*/ 8192) contenteditable_changes.wrapLines = !!/*activeMarkupComputed*/ ctx[13].width;\n\t\t\tif (dirty[0] & /*activeMarkupComputed*/ 8192) contenteditable_changes.textFormat = /*activeMarkupComputed*/ ctx[13].format;\n\t\t\tif (dirty[0] & /*enableTextStyleControls*/ 32) contenteditable_changes.enableTextStyleShortcuts = /*enableTextStyleControls*/ ctx[5];\n\t\t\tif (dirty[0] & /*shapeAllowNewline*/ 134217728) contenteditable_changes.allowNewline = /*shapeAllowNewline*/ ctx[27];\n\t\t\tif (dirty[0] & /*textInputTextStyles*/ 33554432) contenteditable_changes.style = /*textInputTextStyles*/ ctx[25];\n\t\t\tcontenteditable.$set(contenteditable_changes);\n\n\t\t\tif (!current || dirty[0] & /*textInputPositionStyles*/ 16777216) {\n\t\t\t\tattr(div, \"style\", /*textInputPositionStyles*/ ctx[24]);\n\t\t\t}\n\t\t},\n\t\ti(local) {\n\t\t\tif (current) return;\n\t\t\ttransition_in(contenteditable.$$.fragment, local);\n\t\t\tcurrent = true;\n\t\t},\n\t\to(local) {\n\t\t\ttransition_out(contenteditable.$$.fragment, local);\n\t\t\tcurrent = false;\n\t\t},\n\t\td(detaching) {\n\t\t\tif (detaching) detach(div);\n\t\t\t/*contenteditable_binding*/ ctx[155](null);\n\t\t\tdestroy_component(contenteditable);\n\t\t\tmounted = false;\n\t\t\tdispose();\n\t\t}\n\t};\n}\n\n// (3582:8) {#if textInputMode === 'modal'}\nfunction create_if_block_2$2(ctx) {\n\tlet inputform;\n\tlet current;\n\n\tinputform = new InputForm({\n\t\t\tprops: {\n\t\t\t\tpanelOffset: /*offset*/ ctx[2],\n\t\t\t\tonconfirm: /*handleTextConfirm*/ ctx[48],\n\t\t\t\toncancel: /*handleTextCancel*/ ctx[49],\n\t\t\t\tlabelCancel: /*locale*/ ctx[6].shapeLabelInputCancel,\n\t\t\t\ticonCancel: /*locale*/ ctx[6].shapeIconInputCancel,\n\t\t\t\tlabelConfirm: /*locale*/ ctx[6].shapeLabelInputConfirm,\n\t\t\t\ticonConfirm: /*locale*/ ctx[6].shapeIconInputConfirm,\n\t\t\t\t$$slots: { default: [create_default_slot$7] },\n\t\t\t\t$$scope: { ctx }\n\t\t\t}\n\t\t});\n\n\treturn {\n\t\tc() {\n\t\t\tcreate_component(inputform.$$.fragment);\n\t\t},\n\t\tm(target, anchor) {\n\t\t\tmount_component(inputform, target, anchor);\n\t\t\tcurrent = true;\n\t\t},\n\t\tp(ctx, dirty) {\n\t\t\tconst inputform_changes = {};\n\t\t\tif (dirty[0] & /*offset*/ 4) inputform_changes.panelOffset = /*offset*/ ctx[2];\n\t\t\tif (dirty[0] & /*locale*/ 64) inputform_changes.labelCancel = /*locale*/ ctx[6].shapeLabelInputCancel;\n\t\t\tif (dirty[0] & /*locale*/ 64) inputform_changes.iconCancel = /*locale*/ ctx[6].shapeIconInputCancel;\n\t\t\tif (dirty[0] & /*locale*/ 64) inputform_changes.labelConfirm = /*locale*/ ctx[6].shapeLabelInputConfirm;\n\t\t\tif (dirty[0] & /*locale*/ 64) inputform_changes.iconConfirm = /*locale*/ ctx[6].shapeIconInputConfirm;\n\n\t\t\tif (dirty[0] & /*textInputTextStyles, textInput, textInputText*/ 41943296 | dirty[7] & /*$$scope*/ 1024) {\n\t\t\t\tinputform_changes.$$scope = { dirty, ctx };\n\t\t\t}\n\n\t\t\tinputform.$set(inputform_changes);\n\t\t},\n\t\ti(local) {\n\t\t\tif (current) return;\n\t\t\ttransition_in(inputform.$$.fragment, local);\n\t\t\tcurrent = true;\n\t\t},\n\t\to(local) {\n\t\t\ttransition_out(inputform.$$.fragment, local);\n\t\t\tcurrent = false;\n\t\t},\n\t\td(detaching) {\n\t\t\tdestroy_component(inputform, detaching);\n\t\t}\n\t};\n}\n\n// (3583:12)
\nfunction create_default_slot$7(ctx) {\n\tlet textarea;\n\tlet mounted;\n\tlet dispose;\n\n\treturn {\n\t\tc() {\n\t\t\ttextarea = element(\"textarea\");\n\t\t\tattr(textarea, \"spellcheck\", \"false\");\n\t\t\tattr(textarea, \"autocorrect\", \"off\");\n\t\t\tattr(textarea, \"autocapitalize\", \"off\");\n\t\t\tattr(textarea, \"style\", /*textInputTextStyles*/ ctx[25]);\n\t\t},\n\t\tm(target, anchor) {\n\t\t\tinsert(target, textarea, anchor);\n\t\t\t/*textarea_binding*/ ctx[153](textarea);\n\t\t\tset_input_value(textarea, /*textInputText*/ ctx[23]);\n\n\t\t\tif (!mounted) {\n\t\t\t\tdispose = [\n\t\t\t\t\tlisten(textarea, \"keydown\", /*handleTextInputKeyDown*/ ctx[46]),\n\t\t\t\t\tlisten(textarea, \"keypress\", /*handleTextInputAttempt*/ ctx[45]),\n\t\t\t\t\tlisten(textarea, \"keyup\", /*handleTextInputKeyUp*/ ctx[47]),\n\t\t\t\t\tlisten(textarea, \"input\", /*handleTextInput*/ ctx[44]),\n\t\t\t\t\tlisten(textarea, \"input\", /*textarea_input_handler*/ ctx[154])\n\t\t\t\t];\n\n\t\t\t\tmounted = true;\n\t\t\t}\n\t\t},\n\t\tp(ctx, dirty) {\n\t\t\tif (dirty[0] & /*textInputTextStyles*/ 33554432) {\n\t\t\t\tattr(textarea, \"style\", /*textInputTextStyles*/ ctx[25]);\n\t\t\t}\n\n\t\t\tif (dirty[0] & /*textInputText*/ 8388608) {\n\t\t\t\tset_input_value(textarea, /*textInputText*/ ctx[23]);\n\t\t\t}\n\t\t},\n\t\td(detaching) {\n\t\t\tif (detaching) detach(textarea);\n\t\t\t/*textarea_binding*/ ctx[153](null);\n\t\t\tmounted = false;\n\t\t\trun_all(dispose);\n\t\t}\n\t};\n}\n\n// (3631:4) {#if $markupControlsOpacity > 0}\nfunction create_if_block$3(ctx) {\n\tlet div;\n\tlet dynamiccomponenttree;\n\tlet current;\n\tlet mounted;\n\tlet dispose;\n\n\tdynamiccomponenttree = new DynamicComponentTree_1({\n\t\t\tprops: {\n\t\t\t\titems: /*shapeControls*/ ctx[21],\n\t\t\t\tkey: /*activeShapeId*/ ctx[10]\n\t\t\t}\n\t\t});\n\n\treturn {\n\t\tc() {\n\t\t\tdiv = element(\"div\");\n\t\t\tcreate_component(dynamiccomponenttree.$$.fragment);\n\t\t\tattr(div, \"class\", \"PinturaShapeControls\");\n\t\t\tattr(div, \"style\", /*markupControlsStyle*/ ctx[22]);\n\t\t},\n\t\tm(target, anchor) {\n\t\t\tinsert(target, div, anchor);\n\t\t\tmount_component(dynamiccomponenttree, div, null);\n\t\t\tcurrent = true;\n\n\t\t\tif (!mounted) {\n\t\t\t\tdispose = [\n\t\t\t\t\tlisten(div, \"measure\", /*measure_handler_1*/ ctx[157]),\n\t\t\t\t\taction_destroyer(measurable.call(null, div))\n\t\t\t\t];\n\n\t\t\t\tmounted = true;\n\t\t\t}\n\t\t},\n\t\tp(ctx, dirty) {\n\t\t\tconst dynamiccomponenttree_changes = {};\n\t\t\tif (dirty[0] & /*shapeControls*/ 2097152) dynamiccomponenttree_changes.items = /*shapeControls*/ ctx[21];\n\t\t\tif (dirty[0] & /*activeShapeId*/ 1024) dynamiccomponenttree_changes.key = /*activeShapeId*/ ctx[10];\n\t\t\tdynamiccomponenttree.$set(dynamiccomponenttree_changes);\n\n\t\t\tif (!current || dirty[0] & /*markupControlsStyle*/ 4194304) {\n\t\t\t\tattr(div, \"style\", /*markupControlsStyle*/ ctx[22]);\n\t\t\t}\n\t\t},\n\t\ti(local) {\n\t\t\tif (current) return;\n\t\t\ttransition_in(dynamiccomponenttree.$$.fragment, local);\n\t\t\tcurrent = true;\n\t\t},\n\t\to(local) {\n\t\t\ttransition_out(dynamiccomponenttree.$$.fragment, local);\n\t\t\tcurrent = false;\n\t\t},\n\t\td(detaching) {\n\t\t\tif (detaching) detach(div);\n\t\t\tdestroy_component(dynamiccomponenttree);\n\t\t\tmounted = false;\n\t\t\trun_all(dispose);\n\t\t}\n\t};\n}\n\nfunction create_fragment$g(ctx) {\n\tlet div;\n\tlet nav;\n\tlet ul;\n\tlet each_blocks = [];\n\tlet each_1_lookup = new Map();\n\tlet t0;\n\tlet t1;\n\tlet t2;\n\tlet interactable_action;\n\tlet current;\n\tlet mounted;\n\tlet dispose;\n\tlet each_value = /*shapeNavList*/ ctx[20];\n\tconst get_key = ctx => /*item*/ ctx[224].id;\n\n\tfor (let i = 0; i < each_value.length; i += 1) {\n\t\tlet child_ctx = get_each_context$3(ctx, each_value, i);\n\t\tlet key = get_key(child_ctx);\n\t\teach_1_lookup.set(key, each_blocks[i] = create_each_block$3(key, child_ctx));\n\t}\n\n\tlet if_block0 = /*shouldRenderShapeManipulator*/ ctx[15] && create_if_block_4$2(ctx);\n\tlet if_block1 = /*shouldRenderTextInput*/ ctx[11] && create_if_block_1$2(ctx);\n\tlet if_block2 = /*$markupControlsOpacity*/ ctx[17] > 0 && create_if_block$3(ctx);\n\n\treturn {\n\t\tc() {\n\t\t\tdiv = element(\"div\");\n\t\t\tnav = element(\"nav\");\n\t\t\tul = element(\"ul\");\n\n\t\t\tfor (let i = 0; i < each_blocks.length; i += 1) {\n\t\t\t\teach_blocks[i].c();\n\t\t\t}\n\n\t\t\tt0 = space();\n\t\t\tif (if_block0) if_block0.c();\n\t\t\tt1 = space();\n\t\t\tif (if_block1) if_block1.c();\n\t\t\tt2 = space();\n\t\t\tif (if_block2) if_block2.c();\n\t\t\tattr(nav, \"class\", \"PinturaShapeList\");\n\t\t\tattr(nav, \"data-visible\", /*showShapeList*/ ctx[18]);\n\t\t\tattr(div, \"class\", \"PinturaShapeEditor\");\n\t\t\tattr(div, \"tabindex\", \"0\");\n\t\t},\n\t\tm(target, anchor) {\n\t\t\tinsert(target, div, anchor);\n\t\t\tappend(div, nav);\n\t\t\tappend(nav, ul);\n\n\t\t\tfor (let i = 0; i < each_blocks.length; i += 1) {\n\t\t\t\teach_blocks[i].m(ul, null);\n\t\t\t}\n\n\t\t\tappend(div, t0);\n\t\t\tif (if_block0) if_block0.m(div, null);\n\t\t\tappend(div, t1);\n\t\t\tif (if_block1) if_block1.m(div, null);\n\t\t\tappend(div, t2);\n\t\t\tif (if_block2) if_block2.m(div, null);\n\t\t\t/*div_binding*/ ctx[158](div);\n\t\t\tcurrent = true;\n\n\t\t\tif (!mounted) {\n\t\t\t\tdispose = [\n\t\t\t\t\tlisten(nav, \"focusin\", /*handleFocusIn*/ ctx[52]),\n\t\t\t\t\tlisten(nav, \"focusout\", /*handleFocusOut*/ ctx[53]),\n\t\t\t\t\tlisten(div, \"keydown\", function () {\n\t\t\t\t\t\tif (is_function(/*disabled*/ ctx[1] ? noop$1 : /*handleKey*/ ctx[42])) (/*disabled*/ ctx[1] ? noop$1 : /*handleKey*/ ctx[42]).apply(this, arguments);\n\t\t\t\t\t}),\n\t\t\t\t\tlisten(div, \"nudge\", function () {\n\t\t\t\t\t\tif (is_function(/*disabled*/ ctx[1] ? noop$1 : /*handleNudge*/ ctx[51])) (/*disabled*/ ctx[1] ? noop$1 : /*handleNudge*/ ctx[51]).apply(this, arguments);\n\t\t\t\t\t}),\n\t\t\t\t\tlisten(div, \"measure\", /*measure_handler*/ ctx[151]),\n\t\t\t\t\tlisten(div, \"pointermove\", function () {\n\t\t\t\t\t\tif (is_function(/*disabled*/ ctx[1]\n\t\t\t\t\t\t? noop$1\n\t\t\t\t\t\t: /*handlePointerMove*/ ctx[54])) (/*disabled*/ ctx[1]\n\t\t\t\t\t\t? noop$1\n\t\t\t\t\t\t: /*handlePointerMove*/ ctx[54]).apply(this, arguments);\n\t\t\t\t\t}),\n\t\t\t\t\tlisten(div, \"interactionstart\", function () {\n\t\t\t\t\t\tif (is_function(/*disabled*/ ctx[1]\n\t\t\t\t\t\t? noop$1\n\t\t\t\t\t\t: /*handleInteractionStart*/ ctx[31])) (/*disabled*/ ctx[1]\n\t\t\t\t\t\t? noop$1\n\t\t\t\t\t\t: /*handleInteractionStart*/ ctx[31]).apply(this, arguments);\n\t\t\t\t\t}),\n\t\t\t\t\tlisten(div, \"interactionupdate\", function () {\n\t\t\t\t\t\tif (is_function(/*disabled*/ ctx[1]\n\t\t\t\t\t\t? noop$1\n\t\t\t\t\t\t: /*handleInteractionUpdate*/ ctx[33])) (/*disabled*/ ctx[1]\n\t\t\t\t\t\t? noop$1\n\t\t\t\t\t\t: /*handleInteractionUpdate*/ ctx[33]).apply(this, arguments);\n\t\t\t\t\t}),\n\t\t\t\t\tlisten(div, \"interactioncancel\", function () {\n\t\t\t\t\t\tif (is_function(/*disabled*/ ctx[1]\n\t\t\t\t\t\t? noop$1\n\t\t\t\t\t\t: /*handleInteractionCancel*/ ctx[32])) (/*disabled*/ ctx[1]\n\t\t\t\t\t\t? noop$1\n\t\t\t\t\t\t: /*handleInteractionCancel*/ ctx[32]).apply(this, arguments);\n\t\t\t\t\t}),\n\t\t\t\t\tlisten(div, \"interactionrelease\", function () {\n\t\t\t\t\t\tif (is_function(/*disabled*/ ctx[1]\n\t\t\t\t\t\t? noop$1\n\t\t\t\t\t\t: /*handleInteractionRelease*/ ctx[34])) (/*disabled*/ ctx[1]\n\t\t\t\t\t\t? noop$1\n\t\t\t\t\t\t: /*handleInteractionRelease*/ ctx[34]).apply(this, arguments);\n\t\t\t\t\t}),\n\t\t\t\t\tlisten(div, \"interactionend\", function () {\n\t\t\t\t\t\tif (is_function(/*disabled*/ ctx[1]\n\t\t\t\t\t\t? noop$1\n\t\t\t\t\t\t: /*handleInteractionEnd*/ ctx[35])) (/*disabled*/ ctx[1]\n\t\t\t\t\t\t? noop$1\n\t\t\t\t\t\t: /*handleInteractionEnd*/ ctx[35]).apply(this, arguments);\n\t\t\t\t\t}),\n\t\t\t\t\taction_destroyer(measurable.call(null, div)),\n\t\t\t\t\taction_destroyer(nudgeable.call(null, div)),\n\t\t\t\t\taction_destroyer(interactable_action = interactable.call(null, div, {\n\t\t\t\t\t\tdrag: true,\n\t\t\t\t\t\tinertia: true,\n\t\t\t\t\t\tmultiTouch: false,\n\t\t\t\t\t\tshouldStartInteraction: interactable_function,\n\t\t\t\t\t\tgetEventPosition: /*interactable_function_1*/ ctx[159]\n\t\t\t\t\t}))\n\t\t\t\t];\n\n\t\t\t\tmounted = true;\n\t\t\t}\n\t\t},\n\t\tp(new_ctx, dirty) {\n\t\t\tctx = new_ctx;\n\n\t\t\tif (dirty[0] & /*shapeNavList, selectShape, markup*/ 1048705) {\n\t\t\t\teach_value = /*shapeNavList*/ ctx[20];\n\t\t\t\tgroup_outros();\n\t\t\t\teach_blocks = update_keyed_each(each_blocks, dirty, get_key, 1, ctx, each_value, each_1_lookup, ul, outro_and_destroy_block, create_each_block$3, null, get_each_context$3);\n\t\t\t\tcheck_outros();\n\t\t\t}\n\n\t\t\tif (!current || dirty[0] & /*showShapeList*/ 262144) {\n\t\t\t\tattr(nav, \"data-visible\", /*showShapeList*/ ctx[18]);\n\t\t\t}\n\n\t\t\tif (/*shouldRenderShapeManipulator*/ ctx[15]) {\n\t\t\t\tif (if_block0) {\n\t\t\t\t\tif_block0.p(ctx, dirty);\n\n\t\t\t\t\tif (dirty[0] & /*shouldRenderShapeManipulator*/ 32768) {\n\t\t\t\t\t\ttransition_in(if_block0, 1);\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\tif_block0 = create_if_block_4$2(ctx);\n\t\t\t\t\tif_block0.c();\n\t\t\t\t\ttransition_in(if_block0, 1);\n\t\t\t\t\tif_block0.m(div, t1);\n\t\t\t\t}\n\t\t\t} else if (if_block0) {\n\t\t\t\tgroup_outros();\n\n\t\t\t\ttransition_out(if_block0, 1, 1, () => {\n\t\t\t\t\tif_block0 = null;\n\t\t\t\t});\n\n\t\t\t\tcheck_outros();\n\t\t\t}\n\n\t\t\tif (/*shouldRenderTextInput*/ ctx[11]) {\n\t\t\t\tif (if_block1) {\n\t\t\t\t\tif_block1.p(ctx, dirty);\n\n\t\t\t\t\tif (dirty[0] & /*shouldRenderTextInput*/ 2048) {\n\t\t\t\t\t\ttransition_in(if_block1, 1);\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\tif_block1 = create_if_block_1$2(ctx);\n\t\t\t\t\tif_block1.c();\n\t\t\t\t\ttransition_in(if_block1, 1);\n\t\t\t\t\tif_block1.m(div, t2);\n\t\t\t\t}\n\t\t\t} else if (if_block1) {\n\t\t\t\tgroup_outros();\n\n\t\t\t\ttransition_out(if_block1, 1, 1, () => {\n\t\t\t\t\tif_block1 = null;\n\t\t\t\t});\n\n\t\t\t\tcheck_outros();\n\t\t\t}\n\n\t\t\tif (/*$markupControlsOpacity*/ ctx[17] > 0) {\n\t\t\t\tif (if_block2) {\n\t\t\t\t\tif_block2.p(ctx, dirty);\n\n\t\t\t\t\tif (dirty[0] & /*$markupControlsOpacity*/ 131072) {\n\t\t\t\t\t\ttransition_in(if_block2, 1);\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\tif_block2 = create_if_block$3(ctx);\n\t\t\t\t\tif_block2.c();\n\t\t\t\t\ttransition_in(if_block2, 1);\n\t\t\t\t\tif_block2.m(div, null);\n\t\t\t\t}\n\t\t\t} else if (if_block2) {\n\t\t\t\tgroup_outros();\n\n\t\t\t\ttransition_out(if_block2, 1, 1, () => {\n\t\t\t\t\tif_block2 = null;\n\t\t\t\t});\n\n\t\t\t\tcheck_outros();\n\t\t\t}\n\n\t\t\tif (interactable_action && is_function(interactable_action.update) && dirty[0] & /*rootRect*/ 8) interactable_action.update.call(null, {\n\t\t\t\tdrag: true,\n\t\t\t\tinertia: true,\n\t\t\t\tmultiTouch: false,\n\t\t\t\tshouldStartInteraction: interactable_function,\n\t\t\t\tgetEventPosition: /*interactable_function_1*/ ctx[159]\n\t\t\t});\n\t\t},\n\t\ti(local) {\n\t\t\tif (current) return;\n\n\t\t\tfor (let i = 0; i < each_value.length; i += 1) {\n\t\t\t\ttransition_in(each_blocks[i]);\n\t\t\t}\n\n\t\t\ttransition_in(if_block0);\n\t\t\ttransition_in(if_block1);\n\t\t\ttransition_in(if_block2);\n\t\t\tcurrent = true;\n\t\t},\n\t\to(local) {\n\t\t\tfor (let i = 0; i < each_blocks.length; i += 1) {\n\t\t\t\ttransition_out(each_blocks[i]);\n\t\t\t}\n\n\t\t\ttransition_out(if_block0);\n\t\t\ttransition_out(if_block1);\n\t\t\ttransition_out(if_block2);\n\t\t\tcurrent = false;\n\t\t},\n\t\td(detaching) {\n\t\t\tif (detaching) detach(div);\n\n\t\t\tfor (let i = 0; i < each_blocks.length; i += 1) {\n\t\t\t\teach_blocks[i].d();\n\t\t\t}\n\n\t\t\tif (if_block0) if_block0.d();\n\t\t\tif (if_block1) if_block1.d();\n\t\t\tif (if_block2) if_block2.d();\n\t\t\t/*div_binding*/ ctx[158](null);\n\t\t\tmounted = false;\n\t\t\trun_all(dispose);\n\t\t}\n\t};\n}\n\nconst POLYGON_END_PATH_DISTANCE_SQUARED = 256;\nconst POLYGON_VERTEX_MIN_DISTANCE_SQUARED = 100;\nconst ROTATION_CONTROL_OFFSET = 20;\nconst MIN_TEXT_MARKUP_WIDTH = 10;\nconst markupHoverShapeId = 'markup-hover';\nconst shapeControlDist = 16;\nconst interactable_function = (e, element) => e.target === element;\n\nfunction instance$g($$self, $$props, $$invalidate) {\n\tlet activeMarkup;\n\tlet activeMarkupSelected;\n\tlet activeShapeIsDraft;\n\tlet activeShapeId;\n\tlet activeMarkupComputed;\n\tlet activeMarkupItemIsDraft;\n\tlet shapeActivePoints;\n\tlet allowResizeControls;\n\tlet allowRotateControls;\n\tlet allowEdgeControls;\n\tlet allowCornerControls;\n\tlet shouldRenderShapeManipulator;\n\tlet shapeActiveScreenPoints;\n\tlet shapeManipulatorPoints;\n\tlet shapeAllowNewline;\n\tlet shapeManipulatorRotationPoint;\n\tlet shapeManipulatorRotationPointPosition;\n\tlet currentPointerPosition;\n\tlet isTextMarkupSelected;\n\tlet shouldRenderTextInput;\n\tlet textShapeOrigin;\n\tlet textShapeDisplayOrigin;\n\tlet textSizeDisplayOrigin;\n\tlet textRectDisplayOrigin;\n\tlet textInputText;\n\tlet activeTextShapeComputed;\n\tlet textInputTextStyles;\n\tlet textInputPositionStyles;\n\tlet controlledMarkupItem;\n\tlet allowShapeFlip;\n\tlet allowShapeChangeTextLayout;\n\tlet allowShapeDuplicate;\n\tlet allowShapeRemove;\n\tlet allowShapeReorder;\n\tlet allowShapeInput;\n\tlet allowShapeAdjustOpacity;\n\tlet allowShapeStyleText;\n\tlet shouldShowMarkupControls;\n\tlet markupControlsAnchorPosition;\n\tlet shapeControlsPosition;\n\tlet markupControlsStyle;\n\tlet shapeControlsMode;\n\tlet shapeControls;\n\tlet shapeNavList;\n\tlet $markupControlsOpacity;\n\tlet $isAnimated;\n\tlet $keysPressedStored;\n\tlet { uid = getUniqueId() } = $$props;\n\tlet { ui } = $$props;\n\tlet { disabled = false } = $$props;\n\tlet { markup } = $$props;\n\tlet { offset } = $$props;\n\tlet { contextRotation = 0 } = $$props;\n\tlet { contextFlipX = false } = $$props;\n\tlet { contextFlipY = false } = $$props;\n\tlet { contextZoom = 1 } = $$props;\n\tlet { active = false } = $$props;\n\tlet { opacity = 1 } = $$props;\n\tlet { parentRect } = $$props;\n\tlet { rootRect } = $$props;\n\tlet { utilRect } = $$props;\n\tlet { hoverColor } = $$props;\n\tlet { textInputMode = 'inline' } = $$props;\n\tlet { oninteractionstart = noop$1 } = $$props;\n\tlet { oninteractionupdate = noop$1 } = $$props;\n\tlet { oninteractionrelease = noop$1 } = $$props;\n\tlet { oninteractionend = noop$1 } = $$props;\n\tlet { oninteractioncancel = noop$1 } = $$props;\n\tlet { onaddshape = noop$1 } = $$props;\n\tlet { onupdateshape = noop$1 } = $$props;\n\tlet { onselectshape = noop$1 } = $$props;\n\tlet { onremoveshape = noop$1 } = $$props;\n\tlet { ontapshape = noop$1 } = $$props;\n\tlet { onhovershape = noop$1 } = $$props;\n\tlet { onhovercanvas = noop$1 } = $$props;\n\tlet { ontapcanvas = noop$1 } = $$props;\n\tlet { beforeSelectShape = () => true } = $$props;\n\tlet { beforeDeselectShape = () => true } = $$props;\n\tlet { beforeRemoveShape = () => true } = $$props;\n\tlet { beforeUpdateShape = (shape, props) => props } = $$props;\n\tlet { willRenderShapeControls = passthrough } = $$props;\n\tlet { willRenderShapeTextControls = passthrough } = $$props;\n\tlet { willStartInteraction = (position, rect) => true } = $$props;\n\tlet { mapEditorPointToImagePoint } = $$props;\n\tlet { mapImagePointToEditorPoint } = $$props;\n\tlet { eraseRadius = undefined } = $$props;\n\tlet { selectRadius = undefined } = $$props;\n\tlet { enableButtonFlipVertical = false } = $$props;\n\tlet { enableTapToAddText = true } = $$props;\n\tlet { enableTextStyleControls = true } = $$props;\n\tlet { locale } = $$props;\n\tconst isAnimated = getContext('isAnimated');\n\tcomponent_subscribe($$self, isAnimated, value => $$invalidate(150, $isAnimated = value));\n\n\t//\n\t// Cache\n\t//\n\tconst updateShape = (shape, props, parentRect) => {\n\t\tlet propsToUpdate = beforeUpdateShape({ ...shape }, props, { ...parentRect });\n\t\tshapeUpdateProps(shape, propsToUpdate, parentRect);\n\t};\n\n\tconst snapRelativeToAnchor = (anchor, target) => {\n\t\tconst length = vectorDistance(anchor, target);\n\t\tconst angle = vectorAngleBetween(anchor, target);\n\t\tconst angleSnapInterval = Math.PI / 8;\n\t\tconst angleSnapped = angleSnapInterval * Math.round(angle / angleSnapInterval) - contextRotation % angleSnapInterval;\n\t\ttarget.x = anchor.x + length * Math.cos(angleSnapped);\n\t\ttarget.y = anchor.y + length * Math.sin(angleSnapped);\n\t};\n\n\t//#region polygon helpers\n\tconst circleOverlapsWithLine = (point, radius, from, to) => {\n\t\tconst ac = vectorCreate(point.x - from.x, point.y - from.y);\n\t\tconst ab = vectorCreate(to.x - from.x, to.y - from.y);\n\t\tconst ab2 = vectorDot(ab, ab);\n\t\tconst acab = vectorDot(ac, ab);\n\t\tlet t = acab / ab2;\n\t\tt = t < 0 ? 0 : t;\n\t\tt = t > 1 ? 1 : t;\n\t\tconst h = vectorCreate(ab.x * t + from.x - point.x, ab.y * t + from.y - point.y);\n\t\tconst h2 = vectorDot(h, h);\n\t\treturn h2 <= radius * radius;\n\t};\n\n\tconst circleOverlapsWithPath = (position, radius, points) => {\n\t\tconst l = points.length;\n\n\t\tfor (let i = 0; i < l - 1; i++) {\n\t\t\tif (circleOverlapsWithLine(position, radius, points[i], points[i + 1])) return true;\n\t\t}\n\n\t\treturn false;\n\t};\n\n\tconst circleOverlapsWithPolygon = (position, radius, points) => {\n\t\tif (pointInPoly$1(position, points)) return true;\n\t\tif (circleOverlapsWithPath(position, radius, points)) return true;\n\t\treturn circleOverlapsWithLine(position, radius, points[0], points[points.length - 1]);\n\t};\n\n\tconst circleOverlapsWithEllipse = (position, radius, ellipse, rotation, flipX, flipY) => {\n\t\tconst points = ellipseToPolygon(vectorCreate(ellipse.x, ellipse.y), ellipse.rx, ellipse.ry, rotation, flipX, flipY, 12);\n\t\treturn circleOverlapsWithPolygon(position, radius, points);\n\t};\n\n\tconst circleOverlapsWithRect = (position, radius, rect, rotation, pivot) => circleOverlapsWithPolygon(position, radius, rectRotate(rect, rotation, pivot || rectCenter(rect)));\n\n\tconst shapeToPoly = (computedShape, resolution = 12) => {\n\t\tif (shapeIsRect(computedShape)) {\n\t\t\treturn rectRotate(computedShape, computedShape.rotation, rectCenter(computedShape));\n\t\t} else if (shapeIsText(computedShape)) {\n\t\t\tconst computedRect = getMarkupShapeRect(computedShape);\n\t\t\treturn rectRotate(computedRect, computedShape.rotation, rectCenter(computedRect));\n\t\t} else if (shapeIsEllipse(computedShape)) {\n\t\t\treturn ellipseToPolygon(vectorCreate(computedShape.x, computedShape.y), computedShape.rx, computedShape.ry, computedShape.rotation, computedShape.flipX, computedShape.flipY, resolution);\n\t\t}\n\n\t\treturn [];\n\t};\n\n\t//#endregion\n\t//#region createShape eraseShape\n\tconst keysPressedStored = getContext('keysPressed');\n\n\tcomponent_subscribe($$self, keysPressedStored, value => $$invalidate(172, $keysPressedStored = value));\n\n\t// draw shape manipulator edges\n\tconst getShapeUpdateRotation = (rotation, flipX, flipY) => {\n\t\tif (rotation === 0) return rotation;\n\t\tif (flipX && flipY) return rotation;\n\t\tif (flipX) return -rotation;\n\t\tif (flipY) return -rotation;\n\t\treturn rotation;\n\t};\n\n\tconst createShape = (shapeDefault, options = {}) => {\n\t\t// state\n\t\tlet interactionOrigin;\n\n\t\tlet interactionRadius;\n\t\tlet interactionPosition;\n\t\tlet isEllipse = shapeIsEllipse(shapeDefault);\n\t\tlet isText = shapeIsText(shapeDefault);\n\t\tlet isRelative = options.position === 'relative';\n\t\tconst isSteppedInputMode = options.inputMode === 'step';\n\n\t\tif (shapeIsPath(shapeDefault)) {\n\t\t\t// stepped input mode\n\t\t\tif (isSteppedInputMode) {\n\t\t\t\tlet isFirstPoint = false;\n\n\t\t\t\tconst getPoint = (previousPoint, pointerPosition) => {\n\t\t\t\t\t// has started drawing? only handle end\n\t\t\t\t\tconst draft = getMarkupItemDraft();\n\n\t\t\t\t\t// if has previous point\n\t\t\t\t\tconst previousPointComputed = previousPoint && vectorCreate(fromPercentage(previousPoint.x, parentRect.width), fromPercentage(previousPoint.y, parentRect.height));\n\n\t\t\t\t\t// point in editor view\n\t\t\t\t\tconst previousPointInEditor = previousPointComputed && mapImagePointToEditorPoint(previousPointComputed);\n\n\t\t\t\t\t// if shift is held snap to last point\n\t\t\t\t\tif ($keysPressedStored.includes(16) && previousPointInEditor) snapRelativeToAnchor(previousPointInEditor, pointerPosition);\n\n\t\t\t\t\tconst currentPoint = mapEditorPointToImagePoint(pointerPosition);\n\n\t\t\t\t\t// get first point as absolute\n\t\t\t\t\tconst originPoint = draft.points.length ? draft.points[0] : currentPoint;\n\n\t\t\t\t\tconst originPointComputed = vectorCreate(fromPercentage(originPoint.x, parentRect.width), fromPercentage(originPoint.y, parentRect.height));\n\n\t\t\t\t\t// point in editor view\n\t\t\t\t\tconst originPointInEditor = mapImagePointToEditorPoint(originPointComputed);\n\n\t\t\t\t\t// distance between origin and new point\n\t\t\t\t\tconst distFromOriginSquared = vectorDistanceSquared(originPointInEditor, pointerPosition);\n\n\t\t\t\t\t// clicked second point at same location, discard draft\n\t\t\t\t\tif (!isFirstPoint && draft.points.length === 1 && distFromOriginSquared < 36) {\n\t\t\t\t\t\treturn discardMarkupItemDraft();\n\t\t\t\t\t}\n\n\t\t\t\t\t// minimum of three points to create a polygon\n\t\t\t\t\tif (draft.points.length > 2 && distFromOriginSquared <= POLYGON_END_PATH_DISTANCE_SQUARED) {\n\t\t\t\t\t\tdraft.pathClose = true;\n\n\t\t\t\t\t\t// select the draft\n\t\t\t\t\t\tselectShape(draft);\n\n\t\t\t\t\t\tconst shape = confirmMarkupItemDraft();\n\t\t\t\t\t\tonaddshape(shape);\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\n\t\t\t\t\t// clicked at same location as previous point, confirm as line\n\t\t\t\t\tconst hasVisibleStroke = draft.strokeWidth && draft.strokeColor && (draft.strokeColor[3] === undefined || draft.strokeColor[3] > 0);\n\n\t\t\t\t\tconst distFromPreviousSquared = vectorDistanceSquared(previousPointInEditor, pointerPosition);\n\n\t\t\t\t\tif (hasVisibleStroke && draft.points.length > 1 && distFromPreviousSquared < POLYGON_END_PATH_DISTANCE_SQUARED) {\n\t\t\t\t\t\t// open path\n\t\t\t\t\t\tdraft.pathClose = false;\n\n\t\t\t\t\t\tdraft.backgroundColor = [0, 0, 0, 0];\n\n\t\t\t\t\t\t// select the draft\n\t\t\t\t\t\tselectShape(draft);\n\n\t\t\t\t\t\tconst shape = confirmMarkupItemDraft();\n\t\t\t\t\t\tonaddshape(shape);\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\n\t\t\t\t\t// distance between previous and new point needs to be sufficient\n\t\t\t\t\tif (draft.points.length > 0) {\n\t\t\t\t\t\tif (distFromPreviousSquared < POLYGON_VERTEX_MIN_DISTANCE_SQUARED) return;\n\t\t\t\t\t}\n\n\t\t\t\t\t// return new point!\n\t\t\t\t\treturn isRelative\n\t\t\t\t\t? toPercentagePoint(currentPoint, parentRect)\n\t\t\t\t\t: currentPoint;\n\t\t\t\t};\n\n\t\t\t\treturn {\n\t\t\t\t\tstart: e => {\n\t\t\t\t\t\tconst { origin } = e.detail;\n\t\t\t\t\t\tinteractionRadius = 4;\n\t\t\t\t\t\tinteractionOrigin = vectorClone(origin);\n\t\t\t\t\t\tinteractionPosition = vectorClone(origin);\n\n\t\t\t\t\t\t// has started drawing? only handle end\n\t\t\t\t\t\tconst draft = getMarkupItemDraft();\n\n\t\t\t\t\t\tif (draft) {\n\t\t\t\t\t\t\t// add next point\n\t\t\t\t\t\t\tconst previousPoint = draft.points[draft.points.length - 1];\n\n\t\t\t\t\t\t\tconst computedPoint = getPoint(previousPoint, interactionOrigin);\n\t\t\t\t\t\t\tif (computedPoint) draft.points = [...draft.points, computedPoint];\n\t\t\t\t\t\t\treturn syncShapes();\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t// first point\n\t\t\t\t\t\tisFirstPoint = true;\n\t\t\t\t\t},\n\t\t\t\t\tupdate: e => {\n\t\t\t\t\t\t// this only runs for first point so we can drag to start AND tap to start a path\n\t\t\t\t\t\tif (!isFirstPoint) return;\n\n\t\t\t\t\t\t// get draft ref\n\t\t\t\t\t\tconst draft = getMarkupItemDraft();\n\n\t\t\t\t\t\tif (!draft) return;\n\n\t\t\t\t\t\t// get next point\n\t\t\t\t\t\tconst previousPoint = draft.points[0];\n\n\t\t\t\t\t\tconst computedPoint = getPoint(previousPoint, vectorCreate(interactionOrigin.x + e.detail.translation.x, interactionOrigin.y + e.detail.translation.y));\n\t\t\t\t\t\tif (!computedPoint) return;\n\n\t\t\t\t\t\t// first point is pointerdown, keep overwriting next point\n\t\t\t\t\t\tdraft.points[1] = computedPoint;\n\n\t\t\t\t\t\t// update view\n\t\t\t\t\t\tsyncShapes();\n\t\t\t\t\t},\n\t\t\t\t\trelease: e => e.detail.preventInertia(),\n\t\t\t\t\tcancel: e => discardMarkupItemDraft(),\n\t\t\t\t\tend: e => {\n\t\t\t\t\t\tif (!isFirstPoint) return;\n\n\t\t\t\t\t\t// hasn't started drawing yet, let's add origin\n\t\t\t\t\t\tconst originPoint = mapEditorPointToImagePoint(interactionOrigin);\n\n\t\t\t\t\t\tconst computedPoint = isRelative\n\t\t\t\t\t\t? toPercentagePoint(originPoint, parentRect)\n\t\t\t\t\t\t: originPoint;\n\n\t\t\t\t\t\t// if is tap\n\t\t\t\t\t\tconst { isTap } = e.detail;\n\n\t\t\t\t\t\tif (isTap) {\n\t\t\t\t\t\t\t// if any shape below pointer select the shape and discard the path\n\t\t\t\t\t\t\tconst foundShapes = getShapesNearPosition(originPoint, 0, shapeCanSelect);\n\n\t\t\t\t\t\t\tif (foundShapes.length) return discardMarkupItemDraft();\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t// add to markup so it's drawn\n\t\t\t\t\t\taddMarkupItemDraft({ ...shapeDefault, points: [computedPoint] });\n\t\t\t\t\t}\n\t\t\t\t};\n\t\t\t}\n\n\t\t\t// drag input mode\n\t\t\treturn {\n\t\t\t\tstart: e => {\n\t\t\t\t\tconst { origin } = e.detail;\n\t\t\t\t\tinteractionRadius = 4;\n\t\t\t\t\tinteractionOrigin = vectorClone(origin);\n\t\t\t\t\tinteractionPosition = vectorClone(origin);\n\t\t\t\t\tconst originPoint = mapEditorPointToImagePoint(origin);\n\n\t\t\t\t\tconst computedPoint = isRelative\n\t\t\t\t\t? toPercentagePoint(originPoint, parentRect)\n\t\t\t\t\t: originPoint;\n\n\t\t\t\t\t// add to markup so it's drawn\n\t\t\t\t\taddMarkupItemDraft({ ...shapeDefault, points: [computedPoint] });\n\t\t\t\t},\n\t\t\t\tupdate: e => {\n\t\t\t\t\tconst draft = getMarkupItemDraft();\n\t\t\t\t\tconst { translation } = e.detail;\n\n\t\t\t\t\t// position\n\t\t\t\t\tconst pointerPosition = vectorCreate(interactionOrigin.x + translation.x, interactionOrigin.y + translation.y);\n\n\t\t\t\t\t// distance between interaction and pointer if it's too close, we don't draw this point\n\t\t\t\t\tconst dist = vectorDistance(interactionPosition, pointerPosition);\n\n\t\t\t\t\tif (fixPrecision(dist, 5) <= interactionRadius) return;\n\n\t\t\t\t\t// get angle between interaction and pointer\n\t\t\t\t\tconst angle = vectorAngleBetween(pointerPosition, interactionPosition);\n\n\t\t\t\t\t// move brush towards pointer at angle\n\t\t\t\t\tconst moveDist = interactionRadius - dist;\n\n\t\t\t\t\tinteractionPosition.x += moveDist * Math.cos(angle);\n\t\t\t\t\tinteractionPosition.y += moveDist * Math.sin(angle);\n\n\t\t\t\t\t// create point\n\t\t\t\t\tconst point = mapEditorPointToImagePoint(interactionPosition);\n\n\t\t\t\t\tconst computedPoint = isRelative\n\t\t\t\t\t? toPercentagePoint(point, parentRect)\n\t\t\t\t\t: point;\n\n\t\t\t\t\tdraft.points = draft.points.concat(computedPoint);\n\t\t\t\t\tsyncShapes();\n\t\t\t\t},\n\t\t\t\trelease: e => e.detail.preventInertia(),\n\t\t\t\tcancel: () => {\n\t\t\t\t\tdiscardMarkupItemDraft();\n\t\t\t\t},\n\t\t\t\tend: e => {\n\t\t\t\t\tif (e.detail.isTap) return discardMarkupItemDraft();\n\t\t\t\t\tconst shape = confirmMarkupItemDraft();\n\t\t\t\t\tonaddshape(shape);\n\t\t\t\t}\n\t\t\t};\n\t\t} else if (isEllipse || isText || shapeIsRect(shapeDefault)) {\n\t\t\treturn {\n\t\t\t\tstart: e => {\n\t\t\t\t\tconst { origin } = e.detail;\n\n\t\t\t\t\t// need to remember origin so we can correctly apply interaction translation\n\t\t\t\t\tinteractionOrigin = vectorClone(origin);\n\n\t\t\t\t\tconst mappedOriginPosition = mapEditorPointToImagePoint(interactionOrigin);\n\n\t\t\t\t\tconst computedOriginPosition = isRelative\n\t\t\t\t\t? toPercentagePoint(mappedOriginPosition, parentRect)\n\t\t\t\t\t: mappedOriginPosition;\n\n\t\t\t\t\tconst rotation = -1 * getShapeUpdateRotation(contextRotation, contextFlipX, contextFlipY);\n\n\t\t\t\t\t// add to markup so it's drawn\n\t\t\t\t\tconst draft = {\n\t\t\t\t\t\t...shapeDefault,\n\t\t\t\t\t\trotation,\n\t\t\t\t\t\t...computedOriginPosition\n\t\t\t\t\t};\n\n\t\t\t\t\t// de-flip shape\n\t\t\t\t\tdraft.flipX = contextFlipX;\n\n\t\t\t\t\tdraft.flipY = contextFlipY;\n\n\t\t\t\t\t// remove position\n\t\t\t\t\tdelete draft.position;\n\n\t\t\t\t\t// hide initially\n\t\t\t\t\tdraft.opacity = 0;\n\n\t\t\t\t\t// set base position props\n\t\t\t\t\tconst initProps = isEllipse ? ['rx', 'ry'] : ['width', 'height'];\n\n\t\t\t\t\tinitProps.forEach(prop => {\n\t\t\t\t\t\t// skip existing props\n\t\t\t\t\t\t// if (hasProp(draft, prop)) return;\n\t\t\t\t\t\t// set base props\n\t\t\t\t\t\tdraft[prop] = isRelative ? '0%' : 0;\n\t\t\t\t\t});\n\n\t\t\t\t\taddMarkupItemDraft(draft);\n\t\t\t\t},\n\t\t\t\tupdate: e => {\n\t\t\t\t\tconst draft = getMarkupItemDraft();\n\t\t\t\t\tdraft.opacity = 1;\n\t\t\t\t\tconst { aspectRatio } = draft;\n\t\t\t\t\tlet { translation } = e.detail;\n\n\t\t\t\t\t// limit to aspect ratio\n\t\t\t\t\tif (aspectRatio) {\n\t\t\t\t\t\tconst t = Math.abs(translation.x) * aspectRatio;\n\t\t\t\t\t\ttranslation.x = translation.x;\n\t\t\t\t\t\ttranslation.y = t * Math.sign(translation.y);\n\t\t\t\t\t}\n\n\t\t\t\t\t// position\n\t\t\t\t\tconst pointerPosition = vectorCreate(interactionOrigin.x + translation.x, interactionOrigin.y + translation.y);\n\n\t\t\t\t\tconst mappedOriginPosition = mapEditorPointToImagePoint(interactionOrigin);\n\t\t\t\t\tconst mappedPointerPosition = mapEditorPointToImagePoint(pointerPosition);\n\n\t\t\t\t\tconst pivot = {\n\t\t\t\t\t\tx: mappedOriginPosition.x + (mappedPointerPosition.x - mappedOriginPosition.x) * 0.5,\n\t\t\t\t\t\ty: mappedOriginPosition.y + (mappedPointerPosition.y - mappedOriginPosition.y) * 0.5\n\t\t\t\t\t};\n\n\t\t\t\t\tconst rotation = getShapeUpdateRotation(contextRotation, contextFlipX, contextFlipY);\n\t\t\t\t\tvectorRotate(mappedOriginPosition, rotation, pivot);\n\t\t\t\t\tvectorRotate(mappedPointerPosition, rotation, pivot);\n\t\t\t\t\tconst l = Math.min(mappedOriginPosition.x, mappedPointerPosition.x);\n\t\t\t\t\tconst t = Math.min(mappedOriginPosition.y, mappedPointerPosition.y);\n\t\t\t\t\tconst r = Math.max(mappedOriginPosition.x, mappedPointerPosition.x);\n\t\t\t\t\tconst b = Math.max(mappedOriginPosition.y, mappedPointerPosition.y);\n\t\t\t\t\tlet width = r - l;\n\t\t\t\t\tlet height = b - t;\n\t\t\t\t\tlet props = {};\n\n\t\t\t\t\tif (isEllipse) {\n\t\t\t\t\t\tprops.x = l + width * 0.5;\n\t\t\t\t\t\tprops.y = t + height * 0.5;\n\t\t\t\t\t\tprops.rx = width * 0.5;\n\t\t\t\t\t\tprops.ry = height * 0.5;\n\t\t\t\t\t} else {\n\t\t\t\t\t\tprops.x = l;\n\t\t\t\t\t\tprops.y = t;\n\t\t\t\t\t\tprops.width = width;\n\t\t\t\t\t\tprops.height = height;\n\t\t\t\t\t}\n\n\t\t\t\t\tupdateShape(draft, props, parentRect);\n\t\t\t\t\tsyncShapes();\n\t\t\t\t},\n\t\t\t\trelease: e => {\n\t\t\t\t\te.detail.preventInertia();\n\t\t\t\t},\n\t\t\t\tcancel: e => {\n\t\t\t\t\tdiscardMarkupItemDraft();\n\t\t\t\t},\n\t\t\t\tend: e => {\n\t\t\t\t\tconst draft = getMarkupItemDraft();\n\n\t\t\t\t\tif (e.detail.isTap) {\n\t\t\t\t\t\t// will cancel if is not text shape\n\t\t\t\t\t\tif (!shapeIsText(draft) || !enableTapToAddText || interactionTarget) return discardMarkupItemDraft();\n\n\t\t\t\t\t\t// will add 'auto' text shape if not targetting other shape\n\t\t\t\t\t\tdelete draft.width;\n\n\t\t\t\t\t\tdelete draft.height;\n\t\t\t\t\t\tif (draft.disableNewline !== false) delete draft.textAlign;\n\n\t\t\t\t\t\t// position the shape correctly\n\t\t\t\t\t\tconst draftComputedShape = shapeComputeDisplay({ ...draft }, parentRect);\n\n\t\t\t\t\t\tconst size = textToSize(draft.text, draftComputedShape);\n\n\t\t\t\t\t\tconst mappedOriginPosition = mapEditorPointToImagePoint({\n\t\t\t\t\t\t\tx: interactionOrigin.x,\n\t\t\t\t\t\t\ty: interactionOrigin.y - size.height * 0.5\n\t\t\t\t\t\t});\n\n\t\t\t\t\t\tconst mappedPointerPosition = mapEditorPointToImagePoint({\n\t\t\t\t\t\t\tx: interactionOrigin.x + size.width,\n\t\t\t\t\t\t\ty: interactionOrigin.y + size.height * 0.5\n\t\t\t\t\t\t});\n\n\t\t\t\t\t\tconst pivot = {\n\t\t\t\t\t\t\tx: mappedOriginPosition.x + (mappedPointerPosition.x - mappedOriginPosition.x) * 0.5,\n\t\t\t\t\t\t\ty: mappedOriginPosition.y + (mappedPointerPosition.y - mappedOriginPosition.y) * 0.5\n\t\t\t\t\t\t};\n\n\t\t\t\t\t\tconst rotation = getShapeUpdateRotation(contextRotation, contextFlipX, contextFlipY);\n\t\t\t\t\t\tvectorRotate(mappedOriginPosition, rotation, pivot);\n\t\t\t\t\t\tvectorRotate(mappedPointerPosition, rotation, pivot);\n\t\t\t\t\t\tlet l = Math.min(mappedOriginPosition.x, mappedPointerPosition.x);\n\t\t\t\t\t\tlet t = Math.min(mappedOriginPosition.y, mappedPointerPosition.y);\n\t\t\t\t\t\tif (l < 0) l = 0;\n\t\t\t\t\t\tif (t < 0) t = 0;\n\t\t\t\t\t\tif (l + size.width > parentRect.width) l = parentRect.width - size.width;\n\t\t\t\t\t\tif (t + size.height > parentRect.height) t = parentRect.height - size.height;\n\n\t\t\t\t\t\tdraft.x = isString(draft.x)\n\t\t\t\t\t\t? toPercentage(l, parentRect.width)\n\t\t\t\t\t\t: l;\n\n\t\t\t\t\t\tdraft.y = isString(draft.y)\n\t\t\t\t\t\t? toPercentage(t, parentRect.height)\n\t\t\t\t\t\t: t;\n\t\t\t\t\t}\n\n\t\t\t\t\t// reveal\n\t\t\t\t\tdraft.opacity = 1;\n\n\t\t\t\t\t// finish markup\n\t\t\t\t\tif (!shapeIsText(draft)) {\n\t\t\t\t\t\tconst shape = confirmMarkupItemDraft();\n\t\t\t\t\t\tonaddshape(shape);\n\t\t\t\t\t}\n\n\t\t\t\t\t// select the draft\n\t\t\t\t\tselectShape(draft);\n\n\t\t\t\t\t// also enable editing the text\n\t\t\t\t\tif (shapeIsText(draft)) editMarkupItem(draft);\n\t\t\t\t}\n\t\t\t};\n\t\t} else if (shapeIsLine(shapeDefault)) {\n\t\t\treturn {\n\t\t\t\tstart: e => {\n\t\t\t\t\tconst { origin } = e.detail;\n\t\t\t\t\tconst originMapped = mapEditorPointToImagePoint(origin);\n\t\t\t\t\tconst originSnapped = vectorApply(originMapped, snapToPixel);\n\t\t\t\t\tinteractionOrigin = vectorClone(origin);\n\n\t\t\t\t\t// add to markup so it's drawn\n\t\t\t\t\taddMarkupItemDraft({\n\t\t\t\t\t\t...shapeDefault,\n\t\t\t\t\t\tx1: isRelative\n\t\t\t\t\t\t? toPercentage(originSnapped.x, parentRect.width)\n\t\t\t\t\t\t: originSnapped.x,\n\t\t\t\t\t\ty1: isRelative\n\t\t\t\t\t\t? toPercentage(originSnapped.y, parentRect.height)\n\t\t\t\t\t\t: originSnapped.y,\n\t\t\t\t\t\tx2: isRelative\n\t\t\t\t\t\t? toPercentage(originSnapped.x, parentRect.width)\n\t\t\t\t\t\t: originSnapped.x,\n\t\t\t\t\t\ty2: isRelative\n\t\t\t\t\t\t? toPercentage(originSnapped.y, parentRect.height)\n\t\t\t\t\t\t: originSnapped.y,\n\t\t\t\t\t\topacity: 0\n\t\t\t\t\t});\n\t\t\t\t},\n\t\t\t\tupdate: e => {\n\t\t\t\t\tconst draft = getMarkupItemDraft();\n\t\t\t\t\tconst { translation } = e.detail;\n\t\t\t\t\tconst interactionTarget = vectorAdd(vectorClone(interactionOrigin), translation);\n\n\t\t\t\t\t// shift pressed\n\t\t\t\t\tif ($keysPressedStored.includes(16)) {\n\t\t\t\t\t\tconst length = vectorDistance(interactionOrigin, interactionTarget);\n\t\t\t\t\t\tconst angle = vectorAngleBetween(interactionOrigin, interactionTarget);\n\t\t\t\t\t\tconst angleSnapInterval = Math.PI / 4;\n\t\t\t\t\t\tconst angleSnapped = angleSnapInterval * Math.round(angle / angleSnapInterval);\n\t\t\t\t\t\tinteractionTarget.x = interactionOrigin.x + length * Math.cos(angleSnapped);\n\t\t\t\t\t\tinteractionTarget.y = interactionOrigin.y + length * Math.sin(angleSnapped);\n\t\t\t\t\t}\n\n\t\t\t\t\t// update line end position\n\t\t\t\t\tconst point = mapEditorPointToImagePoint(interactionTarget);\n\n\t\t\t\t\tupdateMarkupShape(draft, {\n\t\t\t\t\t\tx2: isRelative\n\t\t\t\t\t\t? toPercentage(point.x, parentRect.width)\n\t\t\t\t\t\t: point.x,\n\t\t\t\t\t\ty2: isRelative\n\t\t\t\t\t\t? toPercentage(point.y, parentRect.height)\n\t\t\t\t\t\t: point.y,\n\t\t\t\t\t\topacity: 1\n\t\t\t\t\t});\n\n\t\t\t\t\tsyncShapes();\n\t\t\t\t},\n\t\t\t\trelease: e => e.detail.preventInertia(),\n\t\t\t\tcancel: e => {\n\t\t\t\t\tdiscardMarkupItemDraft();\n\t\t\t\t},\n\t\t\t\tend: e => {\n\t\t\t\t\tconst draft = getMarkupItemDraft();\n\t\t\t\t\tif (e.detail.isTap) return discardMarkupItemDraft();\n\t\t\t\t\tdraft.opacity = 1;\n\n\t\t\t\t\t// finish markup\n\t\t\t\t\tconst shape = confirmMarkupItemDraft();\n\n\t\t\t\t\tonaddshape(shape);\n\n\t\t\t\t\t// select the draft\n\t\t\t\t\tselectShape(shape);\n\t\t\t\t}\n\t\t\t};\n\t\t}\n\t};\n\n\tconst eraseShape = () => {\n\t\tlet origin;\n\t\tlet positionPrevious;\n\t\tconst eraseRadiusSquared = eraseRadius * eraseRadius;\n\n\t\tconst erase = (positionA, positionB, forceErase = false) => {\n\t\t\tconst d2 = vectorDistanceSquared(positionA, positionB);\n\n\t\t\t// skip, too close to previous point\n\t\t\tif (!forceErase && d2 < 2) return false;\n\n\t\t\tconst shapesThatCanBeErased = markup.filter(shape => !shape.disableErase);\n\n\t\t\t// if line is shorter than radius do simple erase operation, find all points within range from current position\n\t\t\tlet shapesFound;\n\n\t\t\tif (d2 < eraseRadiusSquared) {\n\t\t\t\tshapesFound = getShapesNearPosition(mapEditorPointToImagePoint(positionB), eraseRadius);\n\t\t\t} else {\n\t\t\t\tshapesFound = getShapesBetweenPoints(shapesThatCanBeErased, mapEditorPointToImagePoint(positionA), mapEditorPointToImagePoint(positionB), eraseRadius);\n\t\t\t}\n\n\t\t\tconst shapesRemoved = removeMarkupItems(shapesFound);\n\t\t\tshapesRemoved.forEach(onremoveshape);\n\t\t\treturn true;\n\t\t};\n\n\t\treturn {\n\t\t\tstart: e => {\n\t\t\t\torigin = vectorCreate(Math.round(e.detail.origin.x), Math.round(e.detail.origin.y));\n\t\t\t\terase(origin, origin, true);\n\t\t\t\tpositionPrevious = origin;\n\t\t\t},\n\t\t\tupdate: e => {\n\t\t\t\tconst { translation } = e.detail;\n\t\t\t\tconst positionCurrent = vectorCreate(Math.round(origin.x + translation.x), Math.round(origin.y + translation.y));\n\n\t\t\t\tif (erase(positionPrevious, positionCurrent)) {\n\t\t\t\t\tpositionPrevious = vectorClone(positionCurrent);\n\t\t\t\t}\n\t\t\t},\n\t\t\trelease: e => e.detail.preventInertia(),\n\t\t\tend: () => {\n\t\t\t\t\n\t\t\t}\n\t\t};\n\t};\n\n\t//#endregion\n\t//\n\t// Mapping coordinates\n\t//\n\tconst getImagePointWithScreenTranslation = (point, translation) => {\n\t\tconst pointInScreenSpace = mapImagePointToEditorPoint(point);\n\t\treturn mapEditorPointToImagePoint(vectorAdd(pointInScreenSpace, translation));\n\t};\n\n\t//\n\t// Interaction\n\t//\n\t//#region translateShape rotateShape resizeShape\n\tconst translateShape = (shapeCurrent, shapeOriginComputed, translation) => {\n\t\tif (shapeIsLine(shapeCurrent)) {\n\t\t\tconst beginImageOffset = getImagePointWithScreenTranslation(shapeLineGetStartPoint(shapeOriginComputed), translation);\n\t\t\tconst endImageOffset = getImagePointWithScreenTranslation(shapeLineGetEndPoint(shapeOriginComputed), translation);\n\n\t\t\tupdateShape(\n\t\t\t\tshapeCurrent,\n\t\t\t\t{\n\t\t\t\t\tx1: beginImageOffset.x,\n\t\t\t\t\ty1: beginImageOffset.y,\n\t\t\t\t\tx2: endImageOffset.x,\n\t\t\t\t\ty2: endImageOffset.y\n\t\t\t\t},\n\t\t\t\tparentRect\n\t\t\t);\n\t\t} else if (shapeCurrent.points) {\n\t\t\tupdateShape(\n\t\t\t\tshapeCurrent,\n\t\t\t\t{\n\t\t\t\t\tpoints: shapeOriginComputed.points.map(point => {\n\t\t\t\t\t\treturn getImagePointWithScreenTranslation(point, translation);\n\t\t\t\t\t})\n\t\t\t\t},\n\t\t\t\tparentRect\n\t\t\t);\n\t\t} else if (shapeIsRect(shapeCurrent) || shapeIsText(shapeCurrent) || shapeIsEllipse(shapeCurrent)) {\n\t\t\tconst imagePoint = getImagePointWithScreenTranslation(shapeOriginComputed, translation);\n\t\t\tupdateShape(shapeCurrent, imagePoint, parentRect);\n\t\t}\n\n\t\tsyncShapes();\n\t};\n\n\tconst IndexFlipXMap = { 0: 1, 1: 0, 2: 3, 3: 2 };\n\tconst IndexFlipYMap = { 0: 3, 1: 2, 2: 1, 3: 0 };\n\n\tconst resizeShape = (shapeCurrent, shapeOriginComputed, indexes, translation, options) => {\n\t\t// is a line of points\n\t\tif (shapeIsLine(shapeCurrent) || shapeIsPath(shapeCurrent) && hasProp(shapeCurrent, 'pathClose')) {\n\t\t\tconst [targetIndex] = indexes;\n\n\t\t\tconst snap = $keysPressedStored.includes(16)\n\t\t\t? snapRelativeToAnchor\n\t\t\t: (_, target) => target;\n\n\t\t\tlet getPoint;\n\t\t\tlet snapPoint;\n\t\t\tlet setPoint;\n\n\t\t\tif (shapeIsLine(shapeCurrent)) {\n\t\t\t\t// start\n\t\t\t\tif (targetIndex === 0) {\n\t\t\t\t\tgetPoint = () => shapeLineGetStartPoint(shapeOriginComputed);\n\n\t\t\t\t\t// snap angle relative to opposite point\n\t\t\t\t\tsnapPoint = point => snap(shapeLineGetEndPoint(shapeOriginComputed), point);\n\n\t\t\t\t\tsetPoint = (shape, point) => {\n\t\t\t\t\t\tshape.x1 = point.x;\n\t\t\t\t\t\tshape.y1 = point.y;\n\t\t\t\t\t};\n\t\t\t\t} else // end\n\t\t\t\tif (targetIndex === 1) {\n\t\t\t\t\tgetPoint = () => shapeLineGetEndPoint(shapeOriginComputed);\n\n\t\t\t\t\t// snap angle relative to opposite point\n\t\t\t\t\tsnapPoint = point => snap(shapeLineGetStartPoint(shapeOriginComputed), point);\n\n\t\t\t\t\tsetPoint = (shape, point) => {\n\t\t\t\t\t\tshape.x2 = point.x;\n\t\t\t\t\t\tshape.y2 = point.y;\n\t\t\t\t\t};\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\tconst computedPoints = shapeOriginComputed.points;\n\t\t\t\tgetPoint = () => computedPoints[targetIndex];\n\n\t\t\t\tsnapPoint = point => {\n\t\t\t\t\tconst pointBefore = computedPoints[arrayIndexWrap(targetIndex - 1, computedPoints)];\n\t\t\t\t\tconst pointAfter = computedPoints[arrayIndexWrap(targetIndex + 1, computedPoints)];\n\t\t\t\t\tsnap(pointBefore, point);\n\t\t\t\t\tsnap(pointAfter, point);\n\t\t\t\t};\n\n\t\t\t\tsetPoint = (shape, point) => shape.points[targetIndex] = point;\n\t\t\t}\n\n\t\t\tconst point = getImagePointWithScreenTranslation(getPoint(), translation);\n\t\t\tsnapPoint(point);\n\t\t\tsetPoint(shapeCurrent, point);\n\t\t} else // is a box\n\t\tif (shapeHasSize(shapeCurrent) || shapeIsEllipse(shapeCurrent) || shapeIsTextBox(shapeCurrent)) {\n\t\t\tlet hasAutoHeight = false;\n\t\t\tlet shapeOriginRect;\n\n\t\t\tif (shapeIsEllipse(shapeCurrent)) {\n\t\t\t\tshapeOriginRect = rectCreateFromEllipse(shapeOriginComputed);\n\t\t\t} else if (shapeHasSize(shapeCurrent)) {\n\t\t\t\tshapeOriginRect = rectCreateFromAny(shapeOriginComputed);\n\t\t\t} else {\n\t\t\t\t// is text with 'width' only\n\t\t\t\thasAutoHeight = true;\n\n\t\t\t\tshapeOriginRect = rectCreateFromAny(shapeOriginComputed);\n\t\t\t\tconst size = textToSize(shapeOriginComputed.text, shapeOriginComputed);\n\t\t\t\tshapeOriginRect.height = size.height;\n\t\t\t}\n\n\t\t\tlet shapeAspectRatio;\n\n\t\t\tif (shapeCurrent.aspectRatio) {\n\t\t\t\tshapeAspectRatio = shapeCurrent.aspectRatio;\n\t\t\t} else if (options.shiftKey && !hasAutoHeight) {\n\t\t\t\tshapeAspectRatio = shapeOriginRect.width / shapeOriginRect.height;\n\t\t\t}\n\n\t\t\t// current shape\n\t\t\tconst rectAligned = rectCreateFromAny(shapeOriginRect);\n\n\t\t\tconst rectAlignedCenterPosition = rectCenter(rectAligned);\n\t\t\tconst rectRotation = shapeCurrent.rotation;\n\t\t\tconst rectAlignedCorners = rectGetCorners(rectAligned);\n\t\t\tconst rectCorners = rectRotate(rectAligned, rectRotation);\n\n\t\t\t// is translating one corner\n\t\t\tif (indexes.length === 1) {\n\t\t\t\t// corner\n\t\t\t\tlet cornerIndex = indexes[0];\n\n\t\t\t\tif (shapeCurrent.flipX) cornerIndex = IndexFlipXMap[cornerIndex];\n\t\t\t\tif (shapeCurrent.flipY) cornerIndex = IndexFlipYMap[cornerIndex];\n\t\t\t\tconst [tl, tr, br, bl] = rectAlignedCorners;\n\t\t\t\tconst screenTargetPosition = mapImagePointToEditorPoint(rectCorners[cornerIndex]);\n\t\t\t\tvectorAdd(screenTargetPosition, translation);\n\t\t\t\tconst imageTargetPosition = mapEditorPointToImagePoint(screenTargetPosition);\n\t\t\t\tconst imageTargetTranslation = vectorCreate(imageTargetPosition.x - rectCorners[cornerIndex].x, imageTargetPosition.y - rectCorners[cornerIndex].y);\n\t\t\t\tconst imageTargetTranslationAligned = vectorRotate(vectorClone(imageTargetTranslation), -rectRotation);\n\t\t\t\tconst imageTargetPositionAligned = vectorCreate(rectAlignedCorners[cornerIndex].x + imageTargetTranslationAligned.x, rectAlignedCorners[cornerIndex].y + imageTargetTranslationAligned.y);\n\t\t\t\tlet anchor;\n\t\t\t\tif (cornerIndex === 0) anchor = br;\n\t\t\t\tif (cornerIndex === 1) anchor = bl;\n\t\t\t\tif (cornerIndex === 2) anchor = tl;\n\t\t\t\tif (cornerIndex === 3) anchor = tr;\n\n\t\t\t\t// create an aligned and updated rectangle\n\t\t\t\tconst rectAlignedResized = rectCreateFromPoints([anchor, imageTargetPositionAligned]);\n\n\t\t\t\t// limit rect\n\t\t\t\tif (shapeAspectRatio) {\n\t\t\t\t\t// get size that adheres to aspect ratio but still fits current rectangle\n\t\t\t\t\tconst { width, height } = rectContainRect(rectAlignedResized, shapeAspectRatio);\n\n\t\t\t\t\tconst [t, r, b, l] = rectToBounds(rectAlignedResized);\n\n\t\t\t\t\t// update size\n\t\t\t\t\trectAlignedResized.width = width;\n\n\t\t\t\t\trectAlignedResized.height = height;\n\n\t\t\t\t\t// align to anchor\n\t\t\t\t\tif (imageTargetPositionAligned.y < anchor.y) {\n\t\t\t\t\t\trectAlignedResized.y = b - height;\n\t\t\t\t\t}\n\n\t\t\t\t\tif (imageTargetPositionAligned.x < anchor.x) {\n\t\t\t\t\t\trectAlignedResized.x = r - width;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t// rotate the aligned rectangle around it's original pivot point\n\t\t\t\tconst rr = rectRotate(rectAlignedResized, rectRotation, rectAlignedCenterPosition);\n\n\t\t\t\t// now calculate the new center and then rotate the tl and br corners around that center to find their new positions\n\t\t\t\tconst rrc = vectorCenter(rr);\n\n\t\t\t\tconst p1 = vectorRotate(rr[0], -rectRotation, rrc);\n\t\t\t\tconst p2 = vectorRotate(rr[2], -rectRotation, rrc);\n\t\t\t\tconst rectUpdated = rectCreateFromPoints([p1, p2]);\n\n\t\t\t\tupdateShape(\n\t\t\t\t\tshapeCurrent,\n\t\t\t\t\tshapeIsEllipse(shapeCurrent)\n\t\t\t\t\t? ellipseCreateFromRect(rectUpdated)\n\t\t\t\t\t: rectUpdated,\n\t\t\t\t\tparentRect\n\t\t\t\t);\n\t\t\t} else // is translating two corner points\n\t\t\t{\n\t\t\t\t// 0-1 -> 2-3\n\t\t\t\t// 1-2 -> 3-0\n\t\t\t\t// 2-3 -> 0-1\n\t\t\t\t// 3-0 -> 1-2\n\t\t\t\tindexes = indexes.map(index => {\n\t\t\t\t\tif (shapeCurrent.flipX) index = IndexFlipXMap[index];\n\t\t\t\t\tif (shapeCurrent.flipY) index = IndexFlipYMap[index];\n\t\t\t\t\treturn index;\n\t\t\t\t});\n\n\t\t\t\tconst [cornerA, cornerB] = indexes.map(index => rectCorners[index]);\n\n\t\t\t\tconst mid = {\n\t\t\t\t\tx: cornerA.x + (cornerB.x - cornerA.x) * 0.5,\n\t\t\t\t\ty: cornerA.y + (cornerB.y - cornerA.y) * 0.5\n\t\t\t\t};\n\n\t\t\t\tconst [cornerAlignedA, cornerAlignedB] = indexes.map(index => rectAlignedCorners[index]);\n\n\t\t\t\tconst [cornerAlignedC, cornerAlignedD] = indexes.map(index => {\n\t\t\t\t\tconst mappedIndex = index + 2;\n\t\t\t\t\tif (mappedIndex < 4) return rectAlignedCorners[mappedIndex];\n\t\t\t\t\treturn rectAlignedCorners[mappedIndex - 4];\n\t\t\t\t});\n\n\t\t\t\t// const midAligned = {\n\t\t\t\t// x: cornerAlignedA.x + (cornerAlignedB.x - cornerAlignedA.x) * .5,\n\t\t\t\t// y: cornerAlignedA.y + (cornerAlignedB.y - cornerAlignedA.y) * .5\n\t\t\t\t// };\n\t\t\t\tconst midAnchorAligned = {\n\t\t\t\t\tx: cornerAlignedC.x + (cornerAlignedD.x - cornerAlignedC.x) * 0.5,\n\t\t\t\t\ty: cornerAlignedC.y + (cornerAlignedD.y - cornerAlignedC.y) * 0.5\n\t\t\t\t};\n\n\t\t\t\tconst screenTargetPosition = mapImagePointToEditorPoint(mid);\n\t\t\t\tvectorAdd(screenTargetPosition, translation);\n\t\t\t\tconst imageTargetPosition = mapEditorPointToImagePoint(screenTargetPosition);\n\t\t\t\tconst imageTargetTranslation = vectorCreate(imageTargetPosition.x - mid.x, imageTargetPosition.y - mid.y);\n\t\t\t\tconst imageTargetTranslationAligned = vectorRotate(vectorClone(imageTargetTranslation), -rectRotation);\n\t\t\t\tconst d = vectorSubtract(vectorClone(cornerAlignedA), cornerAlignedB);\n\t\t\t\tconst f = vectorApply(d, v => 1 - Math.abs(Math.sign(v)));\n\t\t\t\tconst t = vectorCreate(imageTargetTranslationAligned.x * f.x, imageTargetTranslationAligned.y * f.y);\n\t\t\t\tvectorAdd(cornerAlignedA, t);\n\t\t\t\tvectorAdd(cornerAlignedB, t);\n\t\t\t\tconst rectAlignedResized = rectCreateFromPoints(rectAlignedCorners);\n\n\t\t\t\t// limit rect\n\t\t\t\tif (shapeAspectRatio) {\n\t\t\t\t\tlet width = rectAlignedResized.width;\n\t\t\t\t\tlet height = rectAlignedResized.height;\n\n\t\t\t\t\tif (f.y === 0) {\n\t\t\t\t\t\theight = width / shapeAspectRatio;\n\t\t\t\t\t} else {\n\t\t\t\t\t\twidth = height * shapeAspectRatio;\n\t\t\t\t\t}\n\n\t\t\t\t\t// update size\n\t\t\t\t\trectAlignedResized.width = width;\n\n\t\t\t\t\trectAlignedResized.height = height;\n\n\t\t\t\t\t// align to anchor\n\t\t\t\t\tif (f.y === 0) {\n\t\t\t\t\t\trectAlignedResized.y = midAnchorAligned.y - height * 0.5;\n\t\t\t\t\t} else {\n\t\t\t\t\t\trectAlignedResized.x = midAnchorAligned.x - width * 0.5;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t// rotate the aligned rectangle around it's original pivot point\n\t\t\t\tconst rr = rectRotate(rectAlignedResized, rectRotation, rectAlignedCenterPosition);\n\n\t\t\t\t// now calculate the new center and then rotate the tl and br corners around that center to find their new positions\n\t\t\t\tconst rrc = vectorCenter(rr);\n\n\t\t\t\tconst p1 = vectorRotate(rr[0], -rectRotation, rrc);\n\t\t\t\tconst p2 = vectorRotate(rr[2], -rectRotation, rrc);\n\t\t\t\tconst rectUpdated = rectCreateFromPoints([p1, p2]);\n\t\t\t\tlet props;\n\n\t\t\t\tif (shapeIsEllipse(shapeCurrent)) {\n\t\t\t\t\tprops = ellipseCreateFromRect(rectUpdated);\n\t\t\t\t} else if (shapeHasSize(shapeCurrent)) {\n\t\t\t\t\tprops = rectUpdated;\n\t\t\t\t} else if (hasAutoHeight) {\n\t\t\t\t\tprops = {\n\t\t\t\t\t\tx: rectUpdated.x,\n\t\t\t\t\t\ty: rectUpdated.y,\n\t\t\t\t\t\twidth: rectUpdated.width\n\t\t\t\t\t};\n\t\t\t\t}\n\n\t\t\t\tupdateShape(shapeCurrent, props, parentRect);\n\t\t\t}\n\t\t}\n\n\t\t// redraw\n\t\tsyncShapes();\n\t};\n\n\tlet rotatorInitialPosition;\n\n\tconst rotateShape = (shapeCurrent, shapeOriginComputed, translation, options) => {\n\t\t// calculate angle between translated rotation control and origin\n\t\tconst shapeRect = getMarkupShapeRect(shapeComputeDisplay(shapeDeepCopy(shapeCurrent), parentRect));\n\n\t\tconst shapeCenter = rectCenter(shapeRect);\n\t\tconst p = getImagePointWithScreenTranslation(rotatorInitialPosition, translation);\n\t\tlet shapeRotation = vectorAngleBetween(p, shapeCenter) + Math.PI / 2;\n\n\t\tif (options.shiftKey) {\n\t\t\tconst rotatorSnapInterval = Math.PI / 16;\n\t\t\tshapeRotation = rotatorSnapInterval * Math.round(shapeRotation / rotatorSnapInterval) - contextRotation % rotatorSnapInterval;\n\t\t}\n\n\t\tupdateShape(shapeCurrent, { rotation: shapeRotation }, parentRect);\n\t\tsyncShapes();\n\t};\n\n\tconst getMarkupItemDraft = () => {\n\t\tif (!markup.length) return;\n\t\treturn markup.find(shapeIsDraft);\n\t};\n\n\tconst getMarkupItemDraftIndex = () => {\n\t\tif (!markup.length) return;\n\t\treturn markup.findIndex(shapeIsDraft);\n\t};\n\n\tconst addMarkupItemDraft = (shape, sync = true) => {\n\t\tif (getMarkupItemDraft()) return;\n\t\tshapeMakeDraft(shape);\n\t\treturn addShape(shape, sync);\n\t};\n\n\tconst confirmMarkupItemDraft = () => {\n\t\tconst markupItem = getMarkupItemDraft();\n\t\tif (!markupItem) return;\n\t\tshapeMakeFinal(markupItem);\n\t\tsyncShapes();\n\t\treturn markupItem;\n\t};\n\n\tconst discardMarkupItemDraft = () => {\n\t\tif (!getMarkupItemDraft()) return;\n\t\tmarkup.splice(getMarkupItemDraftIndex(), 1);\n\t\tsyncShapes();\n\t};\n\n\tconst createMarkupItem = (props = {}) => ({ id: getUniqueId(), ...props });\n\tconst syncShapes = () => $$invalidate(0, markup);\n\n\tconst addShape = (shape, sync = true) => {\n\t\tmarkup.push(shape);\n\n\t\t// sync markup array\n\t\tif (sync) syncShapes();\n\n\t\treturn shape;\n\t};\n\n\tconst removeMarkupShapeProps = (shape, props = [], sync = true) => {\n\t\tprops.filter(Boolean).forEach(prop => delete shape[prop]);\n\n\t\t// sync markup array\n\t\tif (!sync) return;\n\n\t\tsyncShapes();\n\t};\n\n\tconst updateMarkupShape = (shape, props, sync = true) => {\n\t\t// update markup\n\t\tshape = Object.assign(shape, props);\n\n\t\t// sync markup array\n\t\tif (!sync) return;\n\n\t\tsyncShapes();\n\t};\n\n\tconst updateMarkupShapeProperty = (shape, name, value, sync = true) => {\n\t\tshape[name] = value;\n\n\t\t// sync markup array\n\t\tif (!sync) return;\n\n\t\tsyncShapes();\n\t};\n\n\tconst updateMarkupItemsShapeProperty = (name, value, sync = true) => {\n\t\tmarkup.forEach(shape => updateMarkupShapeProperty(shape, name, value, false));\n\n\t\t// sync markup array\n\t\tif (!sync) return;\n\n\t\tsyncShapes();\n\t};\n\n\tconst updateMarkupShapeItems = (props, sync = true) => {\n\t\tmarkup.forEach(markupItem => updateMarkupShape(markupItem, props, false));\n\n\t\t// sync markup array\n\t\tif (!sync) return;\n\n\t\tsyncShapes();\n\t};\n\n\tconst getActiveMarkupItem = () => [...markup].reverse().find(shapeIsSelected);\n\tconst hasActiveMarkupItem = () => !!getActiveMarkupItem();\n\n\tconst removeShape = shapeToRemove => {\n\t\tif (!beforeRemoveShape(shapeToRemove)) return false;\n\t\t$$invalidate(0, markup = markup.filter(shape => shape !== shapeToRemove));\n\t\tonremoveshape(shapeToRemove);\n\t};\n\n\tconst removeActiveMarkupItem = () => {\n\t\tconst activeShape = getActiveMarkupItem();\n\t\tif (!activeShape) return;\n\n\t\t// get removable markup items,\n\t\tconst removableShapes = markup.filter(shape => shapeCanRemove(shape) && shapeCanSelect(shape));\n\n\t\t// find index of active shape so we can select the next active shape on removal\n\t\tconst index = removableShapes.findIndex(shape => shape === activeShape);\n\n\t\t// remove the active ship from the shape array\n\t\tconst didRemove = removeShape(activeShape);\n\n\t\tif (didRemove === false) return;\n\n\t\t// remember selection\n\t\tpreviousSelectedShape = activeShape;\n\n\t\t// if no more markup items, release active shape\n\t\tif (removableShapes.length - 1 <= 0) return blurShapes();\n\n\t\t// select next active markup item\n\t\tconst indexNext = index - 1 < 0 ? removableShapes.length - 1 : index - 1;\n\n\t\tselectShape(removableShapes[indexNext]);\n\t};\n\n\tlet previousSelectedShape = undefined;\n\n\tconst blurShapes = (options = {}) => {\n\t\tconst { storePrevious = true } = options;\n\n\t\t// clear text state cache, when a text shape is blurred the changes are confirmed\n\t\tObject.keys(ShapeTextStateCache).forEach(key => ShapeTextStateCache[key] = {});\n\n\t\t// remember shape\n\t\tif (storePrevious) previousSelectedShape = getSelectedShape();\n\n\t\tupdateMarkupShapeItems({\n\t\t\tisSelected: false,\n\t\t\tisEditing: false,\n\t\t\t_prerender: false\n\t\t});\n\t};\n\n\tconst getSelectedShape = () => markup.find(shapeIsSelected);\n\n\tconst selectShape = (shape, sync = true) => {\n\t\t// can't select draft\n\t\tif (shapeIsDraft(shape)) return;\n\n\t\t// get currently selected shape\n\t\tconst selectedShapeCurrent = getSelectedShape();\n\n\t\tconst selectedShape = selectedShapeCurrent || previousSelectedShape;\n\n\t\t// was already selected\n\t\tconst wasSelectedShape = shapeIsSelected(shape);\n\n\t\t// reset previous selected shape\n\t\tpreviousSelectedShape = undefined;\n\n\t\t// if is returned false will cancel select operation\n\t\tif (!beforeSelectShape(selectedShape, shape)) return;\n\n\t\t// remove selected state from other markup\n\t\tblurShapes();\n\n\t\t// select\n\t\tshapeSelect(shape);\n\n\t\t// selected this shape\n\t\t!wasSelectedShape && onselectshape(shape);\n\n\t\t// sync\n\t\tif (!sync) return;\n\n\t\tsyncShapes();\n\t};\n\n\tconst deselectMarkupItem = markupItem => {\n\t\t// we're blurring an active text field, should confirm state if inline text editing\n\t\tif (textInput && textInput.confirm && markupItem.isEditing) textInput.confirm();\n\n\t\tupdateMarkupShape(markupItem, {\n\t\t\tisSelected: false,\n\t\t\tisEditing: false,\n\t\t\t_prerender: false\n\t\t});\n\t};\n\n\tconst editMarkupItem = markupItem => {\n\t\tupdateMarkupShape(markupItem, {\n\t\t\tisSelected: true,\n\t\t\tisEditing: true,\n\t\t\t_prerender: textInputMode === 'inline'\n\t\t});\n\t};\n\n\tconst finishEditMarkupItem = markupItem => {\n\t\tupdateMarkupShape(markupItem, {\n\t\t\tisSelected: true,\n\t\t\tisEditing: false,\n\t\t\t_prerender: false\n\t\t});\n\t};\n\n\tconst removeMarkupItems = shapesToRemove => {\n\t\tif (!shapesToRemove.length) return [];\n\t\tconst shapesToRemoveFiltered = shapesToRemove.filter(beforeRemoveShape);\n\t\t$$invalidate(0, markup = markup.filter(shape => !shapesToRemoveFiltered.includes(shape)));\n\t\treturn shapesToRemoveFiltered;\n\t};\n\n\tconst getTextShapeRect = shape => {\n\t\tconst size = textToSize(shape.text, shape);\n\n\t\treturn rectCreate(\n\t\t\tshape.x,\n\t\t\tshape.y,\n\t\t\tshape.width\n\t\t\t? Math.min(shape.width, size.width)\n\t\t\t: size.width,\n\t\t\tshape.height\n\t\t\t? Math.min(shape.height, size.height)\n\t\t\t: size.height\n\t\t);\n\t};\n\n\tconst getMarkupShapeRect = shape => {\n\t\t// has own rect\n\t\tif (shapeHasSize(shape)) return rectCreateFromAny(shape);\n\n\t\tif (shapeIsEllipse(shape)) return rectCreateFromEllipse(shape);\n\n\t\t// calculate the size on canvas\n\t\tconst rect = getTextShapeRect(shape);\n\n\t\trect.width = Math.max(MIN_TEXT_MARKUP_WIDTH, shape.width || rect.width);\n\t\treturn rect;\n\t};\n\n\tconst getShapesNearPosition = (position, range = 0, shapeFilter = () => true) => [...markup].// reverse the array, want to select from top to bottom\n\treverse().// filter out shapes we're not interested in\n\tfilter(shapeFilter).// need priority indicator\n\tmap(shape => ({ shape, priority: 1 })).// find markup near pointer\n\tfilter(result => {\n\t\t// get shape\n\t\tconst { shape } = result;\n\n\t\t// we need to know where the shape will end up\n\t\tconst computedShape = shapeComputeDisplay(shapeDeepCopy(shape), parentRect);\n\n\t\t// add stroke width to range\n\t\tconst r = range + (computedShape.strokeWidth || 0);\n\n\t\t// test if clicked in rect\n\t\tif (shapeIsRect(computedShape)) {\n\t\t\treturn circleOverlapsWithRect(position, r, computedShape, shape.rotation);\n\t\t}\n\n\t\t// test if clicked on text\n\t\tif (shapeIsText(computedShape)) {\n\t\t\tconst shapeRect = getMarkupShapeRect(computedShape);\n\t\t\tconst isPositionInBounds = circleOverlapsWithRect(position, r, shapeRect, shape.rotation);\n\t\t\tlet isPositionInVisual = false;\n\n\t\t\tif (isPositionInBounds && !shapeIsSelected(shape)) {\n\t\t\t\tconst visualRect = getTextShapeRect(computedShape);\n\n\t\t\t\tif (shape.textAlign === 'right' && !shape.flipX) {\n\t\t\t\t\tvisualRect.x = shapeRect.x + shapeRect.width - visualRect.width;\n\t\t\t\t}\n\n\t\t\t\tif (shape.textAlign === 'center') {\n\t\t\t\t\tvisualRect.x = shapeRect.x + shapeRect.width * 0.5 - visualRect.width * 0.5;\n\t\t\t\t}\n\n\t\t\t\tisPositionInVisual = circleOverlapsWithRect(position, r, visualRect, shape.rotation, rectCenter(shapeRect));\n\t\t\t\tif (!isPositionInVisual) result.priority = -1;\n\t\t\t}\n\n\t\t\treturn isPositionInBounds;\n\t\t}\n\n\t\t// test if click on ellipse\n\t\tif (shapeIsEllipse(computedShape)) {\n\t\t\treturn circleOverlapsWithEllipse(position, r, computedShape, shape.rotation, shape.flipX, shape.flipY);\n\t\t}\n\n\t\t// test if clicked on line\n\t\tif (shapeIsLine(computedShape)) {\n\t\t\t// radius around click position, test if line intersects\n\t\t\treturn circleOverlapsWithLine(position, Math.max(16, r), shapeLineGetStartPoint(computedShape), shapeLineGetEndPoint(computedShape)); // always increase range when selecting lines\n\t\t}\n\n\t\t// test if clicked inside polygon\n\t\tif (shapeIsPath(computedShape) && computedShape.pathClose) {\n\t\t\treturn circleOverlapsWithPolygon(position, r, computedShape.points);\n\t\t}\n\n\t\t// test if clicked on path\n\t\tif (shapeIsPath(computedShape)) {\n\t\t\t// radius around click position, test if line intersects\n\t\t\treturn circleOverlapsWithPath(position, Math.max(16, r), computedShape.points); // always increase range when selecting lines\n\t\t}\n\n\t\treturn false;\n\t}).sort((a, b) => {\n\t\tif (a.priority < b.priority) return 1;\n\t\tif (a.priority > b.priority) return -1;\n\t\treturn 0;\n\t}).map(item => item.shape);\n\n\tconst getShapesBetweenPoints = (shapes, a, b, range = 0) => {\n\t\t// make sure range is not negative\n\t\tconst r = Math.abs(range);\n\n\t\t// create line\n\t\tconst line = lineCreate(a, b);\n\n\t\t// eraseLine should be in image space\n\t\tconst eraseLine = lineExtend(line, r);\n\n\t\t// create line polygon\n\t\tconst erasePoly = lineExtrude(eraseLine, r);\n\n\t\t// loop over shapes and find intersecting shapes\n\t\tconst res = shapes.filter(shape => {\n\t\t\tconst computedShape = shapeComputeDisplay(shapeDeepCopy(shape), parentRect);\n\n\t\t\t// if shape is line or path\n\t\t\tif (shapeIsLine(computedShape) || shapeIsPath(computedShape)) {\n\t\t\t\tconst points = computedShape.points\n\t\t\t\t? [...computedShape.points]\n\t\t\t\t: [\n\t\t\t\t\t\tshapeLineGetStartPoint(computedShape),\n\t\t\t\t\t\tshapeLineGetEndPoint(computedShape)\n\t\t\t\t\t];\n\n\t\t\t\treturn !!linePointsIntersection(eraseLine, points);\n\t\t\t}\n\n\t\t\t// else turn into polygon and compare polygons\n\t\t\treturn polyIntersectsWithPoly(erasePoly, shapeToPoly(computedShape));\n\t\t});\n\n\t\treturn res;\n\t};\n\n\t//#region shape base interaction\n\tlet interactionPoint = undefined;\n\n\tlet interactionTimer = undefined;\n\tlet interactionTarget = undefined;\n\tlet interactionShape = undefined;\n\tlet interactionShapeOrigin = undefined;\n\tlet interactionShapeOriginComputed = undefined;\n\tlet interactionShapeWasSelected = false;\n\tlet isInteracting = false;\n\n\tconst handleInteractionStart = e => {\n\t\tconst { origin } = e.detail;\n\t\tinteractionShape = undefined;\n\t\tinteractionShapeOrigin = undefined;\n\t\tinteractionShapeOriginComputed = undefined;\n\t\tinteractionShapeWasSelected = false;\n\t\tinteractionTarget = undefined;\n\t\tclearTimeout(interactionTimer);\n\t\tinteractionTimer = setTimeout(() => $$invalidate(120, isInteracting = true), 250);\n\n\t\t// if is editing text\n\t\tconst draft = getMarkupItemDraft();\n\n\t\tif (draft && !(shapeIsPath(draft) && hasProp(draft, 'pathClose'))) confirmMarkupItemDraft();\n\n\t\t// test if target is a shape, if not, run interaction handler\n\t\tinteractionPoint = mapEditorPointToImagePoint(vectorClone(origin));\n\n\t\tconst foundShapes = getShapesNearPosition(interactionPoint, selectRadius, shape => shapeCanSelect(shape));\n\t\tconst targettedMarkupItem = foundShapes.length && foundShapes.shift();\n\n\t\t// confirm text when moving between shapes\n\t\tif (activeMarkup && shapeIsTextEditing(activeMarkup)) handleTextConfirm();\n\n\t\t// deselect\n\t\tif (!targettedMarkupItem && activeMarkup && shapeIsTextEditing(activeMarkup)) deselectMarkupItem(activeMarkup);\n\n\t\t// if is clicking outside of canvas, don't create new shape\n\t\tif (!willStartInteraction(origin)) return;\n\n\t\t// check if markup was targetted\n\t\tif (targettedMarkupItem && shapeIsSelected(targettedMarkupItem)) {\n\t\t\tinteractionShapeWasSelected = true;\n\t\t\tinteractionShape = targettedMarkupItem;\n\n\t\t\t// create a deep copy so we can check on end interaction if the shape was changed\n\t\t\tinteractionShapeOrigin = shapeDeepCopy(interactionShape);\n\n\t\t\t// clone shape we're interacting with so we can update it properly\n\t\t\tinteractionShapeOriginComputed = shapeComputeDisplay(shapeDeepCopy(interactionShape), parentRect);\n\n\t\t\treturn;\n\t\t}\n\n\t\t// set target\n\t\tinteractionTarget = targettedMarkupItem || undefined;\n\n\t\t// started interacting\n\t\tconst didStartInteraction = oninteractionstart(e);\n\n\t\t// drag current targetted it as fallback interaction,\n\t\t// helps make sticker interaction easier\n\t\tif (!didStartInteraction && targettedMarkupItem) {\n\t\t\t// select\n\t\t\tselectShape(targettedMarkupItem);\n\n\t\t\tinteractionShape = targettedMarkupItem;\n\n\t\t\t// create a deep copy so we can check on end interaction if the shape was changed\n\t\t\tinteractionShapeOrigin = shapeDeepCopy(interactionShape);\n\n\t\t\t// clone shape we're interacting with so we can update it properly\n\t\t\tinteractionShapeOriginComputed = shapeComputeDisplay(shapeDeepCopy(interactionShape), parentRect);\n\t\t}\n\t};\n\n\tconst resetInteraction = () => {\n\t\tclearTimeout(interactionTimer);\n\t\tinteractionTimer = undefined;\n\t\t$$invalidate(120, isInteracting = false);\n\t};\n\n\tconst handleInteractionCancel = e => {\n\t\tresetInteraction();\n\t\toninteractioncancel(e);\n\t};\n\n\tconst handleInteractionUpdate = e => {\n\t\tconst { translation } = e.detail;\n\n\t\t// is interacting with shape\n\t\tif (interactionShape) {\n\t\t\t// prevent moving if not allowed\n\t\t\tif (!shapeCanMove(interactionShape)) return;\n\n\t\t\t// prevent moving if is editing text\n\t\t\tif (shapeIsTextEditing(interactionShape)) return;\n\n\t\t\treturn translateShape(interactionShape, interactionShapeOriginComputed, translation);\n\t\t}\n\n\t\toninteractionupdate(e);\n\t};\n\n\tconst handleInteractionRelease = e => {\n\t\tresetInteraction();\n\n\t\t// test if is text and if we double tapped, if so, switch to text edit mode\n\t\tif (interactionShape) {\n\t\t\tif (shapeIsTextEditing(interactionShape)) {\n\t\t\t\thandleTextCancel();\n\t\t\t} else // if tapped shape, and shape is text, and shape was selected\n\t\t\tif (e.detail.isTap && interactionShapeWasSelected && shapeIsText(interactionShape) && shapeCanInput(interactionShape) !== false) {\n\t\t\t\teditMarkupItem(interactionShape);\n\t\t\t}\n\n\t\t\treturn;\n\t\t}\n\n\t\toninteractionrelease(e);\n\t};\n\n\tconst handleInteractionEnd = e => {\n\t\tconst isSelectInteraction = interactionTarget && e.detail.isTap;\n\n\t\tif (e.detail.isTap) ontapcanvas({\n\t\t\ttarget: interactionShape || interactionTarget,\n\t\t\tposition: interactionPoint\n\t\t});\n\n\t\t// shape remains active so user can resize, rotate\n\t\tif (interactionShape) {\n\t\t\tontapshape(interactionShape);\n\n\t\t\tif (!shapeEqual(interactionShape, interactionShapeOrigin)) {\n\t\t\t\tonupdateshape(interactionShape);\n\t\t\t}\n\n\t\t\tinteractionShape = undefined;\n\t\t\treturn;\n\t\t}\n\n\t\t// can we deselect the current shape?\n\t\tconst currentSelectedShape = getSelectedShape();\n\n\t\tconst allowDeselectShape = currentSelectedShape\n\t\t? beforeDeselectShape(currentSelectedShape, interactionTarget || undefined)\n\t\t: true;\n\n\t\tif (allowDeselectShape) {\n\t\t\tblurShapes({ storePrevious: false });\n\t\t}\n\n\t\toninteractionend(e);\n\n\t\tif (allowDeselectShape && isSelectInteraction) {\n\t\t\tselectShape(interactionTarget);\n\t\t}\n\t};\n\n\t//#endregion\n\t//\n\t// Shape manipulation\n\t//\n\tconst getMarkupShapePoints = shape => {\n\t\tif (shapeIsRect(shape)) {\n\t\t\t// too small to draw\n\t\t\tif (shape.width < 1 && shape.height < 1) return;\n\n\t\t\tconst center = rectCenter(shape);\n\t\t\tconst points = rectGetCorners(shape);\n\n\t\t\tif (shape.flipX || shape.flipY) {\n\t\t\t\tvectorsFlip(points, shape.flipX, shape.flipY, center.x, center.y);\n\t\t\t}\n\n\t\t\treturn vectorsRotate(points, shape.rotation, center.x, center.y);\n\t\t}\n\n\t\tif (shapeIsEllipse(shape)) {\n\t\t\tif (shape.rx < 1 && shape.ry < 1) return;\n\t\t\tconst center = shape;\n\t\t\tconst points = rectGetCorners(rectCreateFromEllipse(shape));\n\n\t\t\tif (shape.flipX || shape.flipY) {\n\t\t\t\tvectorsFlip(points, shape.flipX, shape.flipY, center.x, center.y);\n\t\t\t}\n\n\t\t\treturn vectorsRotate(points, shape.rotation, center.x, center.y);\n\t\t}\n\n\t\tif (shapeIsLine(shape)) {\n\t\t\treturn [shapeLineGetStartPoint(shape), shapeLineGetEndPoint(shape)];\n\t\t}\n\n\t\tif (shapeIsPath(shape)) {\n\t\t\treturn [...shape.points];\n\t\t}\n\n\t\tif (shapeIsText(shape)) {\n\t\t\t// too small to draw\n\t\t\tif (shape.width < 5 && shape.height < 5) return;\n\n\t\t\tconst rect = getMarkupShapeRect(shape);\n\t\t\trect.width = Math.max(MIN_TEXT_MARKUP_WIDTH, rect.width);\n\t\t\tconst center = rectCenter(rect);\n\t\t\tconst points = rectGetCorners(rect);\n\n\t\t\tif (shape.flipX || shape.flipY) {\n\t\t\t\tvectorsFlip(points, shape.flipX, shape.flipY, center.x, center.y);\n\t\t\t}\n\n\t\t\treturn vectorsRotate(points, shape.rotation, center.x, center.y);\n\t\t}\n\n\t\treturn [];\n\t};\n\n\tconst getShapeRotationPoint = shape => {\n\t\tconst points = getMarkupShapePoints(shape);\n\t\tlet origin;\n\t\tlet dir;\n\n\t\tif (shape.flipY) {\n\t\t\torigin = vectorCenter([points[0], points[1]]);\n\t\t\tdir = vectorNormalize(vectorCreate(points[1].x - points[2].x, points[1].y - points[2].y));\n\t\t} else {\n\t\t\torigin = vectorCenter([points[2], points[3]]);\n\t\t\tdir = vectorNormalize(vectorCreate(points[2].x - points[1].x, points[2].y - points[1].y));\n\t\t}\n\n\t\tvectorMultiply(dir, ROTATION_CONTROL_OFFSET / contextZoom);\n\t\treturn { origin, dir };\n\t};\n\n\tconst getShapeRotationPointOnScreen = shape => {\n\t\tconst markupPoint = getShapeRotationPoint(shape);\n\n\t\tconst screenPosition = mapImagePointToEditorPoint({\n\t\t\tx: markupPoint.origin.x + markupPoint.dir.x,\n\t\t\ty: markupPoint.origin.y + markupPoint.dir.y\n\t\t});\n\n\t\tconst screenOrigin = mapImagePointToEditorPoint(markupPoint.origin);\n\n\t\treturn {\n\t\t\torigin: screenOrigin,\n\t\t\tposition: screenPosition\n\t\t};\n\t};\n\n\tconst showHover = shape => {\n\t\tconst shapePoints = getMarkupShapePoints(shapeComputeDisplay(shapeDeepCopy(shape), parentRect));\n\t\tif (!shapePoints) return;\n\t\tconst points = shapePoints.map(mapImagePointToEditorPoint);\n\n\t\tconst pathClose = shape.pathClose\n\t\t? true\n\t\t: shapeIsPath(shape) || shapeIsLine(shape) ? false : true;\n\n\t\tconst outlineShadow = {\n\t\t\tid: markupHoverShapeId,\n\t\t\tpoints: points.map(p => vectorCreate(p.x + 1, p.y + 1)),\n\t\t\tstrokeColor: [0, 0, 0, 0.1],\n\t\t\tstrokeWidth: 2,\n\t\t\tpathClose\n\t\t};\n\n\t\tconst outline = {\n\t\t\tid: markupHoverShapeId,\n\t\t\tpoints,\n\t\t\tstrokeColor: hoverColor,\n\t\t\tstrokeWidth: 2,\n\t\t\tpathClose\n\t\t};\n\n\t\t// remove any previous hover shapes\n\t\tconst res = ui.filter(shape => shape.id !== markupHoverShapeId);\n\n\t\t// update ui\n\t\t$$invalidate(55, ui = [...res, outlineShadow, outline]);\n\t};\n\n\tconst hideHover = () => {\n\t\t// remove shapes\n\t\tconst res = ui.filter(shape => shape.id !== markupHoverShapeId);\n\n\t\t// no shapes removed, don't update ui\n\t\tif (res.length === ui.length) return;\n\n\t\t$$invalidate(55, ui = res);\n\t};\n\n\tlet hoverShape;\n\n\t// draw shape manipulator edges\n\tconst ShapeManipulatorUid = `markup-manipulator-segment-` + uid;\n\n\tconst redrawManipulatorLines = (opacity, shape, pointerPosition) => {\n\t\tconst isPath = shapeIsPath(shape);\n\t\tconst isPolygon = isPath && hasProp(shape, 'pathClose');\n\t\tconst hasStroke = isPolygon && shapeHasStroke(shape);\n\t\tconst isDraft = shapeIsDraft(shape);\n\t\tconst isTextEditing = shapeIsTextEditing(shape);\n\n\t\t// don't draw line manipulator on sharpie draft\n\t\tif (isDraft && isPath && !isPolygon) return;\n\n\t\t// create manipulator outline segments\n\t\tconst segments = [];\n\n\t\tconst screenPoints = [...shapeActiveScreenPoints];\n\t\tconst screenPointsLast = screenPoints[screenPoints.length - 1];\n\t\tconst screenPointsFirst = screenPoints[0];\n\t\tconst shadowOpacity = (isTextEditing ? 0.05 : 0.1) * opacity;\n\t\tconst lineOpacity = (isTextEditing ? 0.5 : 1) * opacity;\n\t\tconst strokeColorShadow = [0, 0, 0];\n\t\tconst strokeColor = [1, 1, 1];\n\t\tconst strokeWidth = isTextEditing ? 1 : 1.5;\n\n\t\t// if shift is held snap to last point\n\t\tif ($keysPressedStored.includes(16) && screenPointsLast && pointerPosition) snapRelativeToAnchor(screenPointsLast, pointerPosition);\n\n\t\tconst distToOriginSquared = screenPoints.length && isPolygon && isDraft && pointerPosition\n\t\t? vectorDistanceSquared(screenPointsFirst, pointerPosition)\n\t\t: Infinity;\n\n\t\tconst distToLastSquared = screenPoints.length && isPolygon && isDraft && pointerPosition\n\t\t? vectorDistanceSquared(screenPointsLast, pointerPosition)\n\t\t: Infinity;\n\n\t\tconst canClosePath = distToOriginSquared <= POLYGON_END_PATH_DISTANCE_SQUARED;\n\t\tconst canEndPath = distToLastSquared <= POLYGON_END_PATH_DISTANCE_SQUARED;\n\n\t\t// if we can't close the path we draw a line from the last point to the pointer position\n\t\tif (!canClosePath && pointerPosition) screenPoints.push(pointerPosition);\n\n\t\tconst canDrawLine = screenPoints.length > 1;\n\n\t\tconst closeSelectionPath = shape.pathClose\n\t\t? true\n\t\t: shapeIsPath(shape) || shapeIsLine(shape)\n\t\t\t? screenPoints.length > 2 && canClosePath\n\t\t\t: true;\n\n\t\t// shadows\n\t\tcanDrawLine && segments.push({\n\t\t\tid: ShapeManipulatorUid,\n\t\t\tpoints: screenPoints.map(p => vectorCreate(p.x + 1, p.y + 1)),\n\t\t\tpathClose: closeSelectionPath,\n\t\t\tstrokeColor: strokeColorShadow,\n\t\t\tstrokeWidth: 2,\n\t\t\topacity: shadowOpacity\n\t\t});\n\n\t\tisPolygon && segments.push(...screenPoints.map(point => {\n\t\t\treturn {\n\t\t\t\tid: ShapeManipulatorUid,\n\t\t\t\t...point,\n\t\t\t\trx: strokeWidth * 2,\n\t\t\t\try: strokeWidth * 2,\n\t\t\t\tbackgroundColor: strokeColorShadow,\n\t\t\t\topacity: shadowOpacity\n\t\t\t};\n\t\t}));\n\n\t\tif (shapeManipulatorRotationPoint) {\n\t\t\t// add rotator line shadow\n\t\t\tsegments.push({\n\t\t\t\tid: ShapeManipulatorUid,\n\t\t\t\tpoints: [\n\t\t\t\t\tvectorCreate(shapeManipulatorRotationPoint.origin.x + 1, shapeManipulatorRotationPoint.origin.y + 1),\n\t\t\t\t\tvectorCreate(shapeManipulatorRotationPoint.position.x + 1, shapeManipulatorRotationPoint.position.y + 1)\n\t\t\t\t],\n\t\t\t\tstrokeColor: strokeColorShadow,\n\t\t\t\tstrokeWidth: 2,\n\t\t\t\topacity: shadowOpacity\n\t\t\t});\n\t\t}\n\n\t\t// lines\n\t\tcanDrawLine && segments.push({\n\t\t\tid: ShapeManipulatorUid,\n\t\t\tpoints: screenPoints,\n\t\t\tpathClose: closeSelectionPath,\n\t\t\tstrokeColor,\n\t\t\tstrokeWidth,\n\t\t\tbackgroundColor: isDraft && isPolygon && shape.backgroundColor && shape.backgroundColor[3] > 0\n\t\t\t? shape.backgroundColor\n\t\t\t: [0, 0, 0, 0],\n\t\t\topacity: lineOpacity\n\t\t});\n\n\t\tisPolygon && segments.push(...screenPoints.map(point => {\n\t\t\treturn {\n\t\t\t\tid: ShapeManipulatorUid,\n\t\t\t\t...point,\n\t\t\t\trx: strokeWidth * 3,\n\t\t\t\try: strokeWidth * 3,\n\t\t\t\tbackgroundColor: [0.5, 0.5, 0.5],\n\t\t\t\tstrokeWidth,\n\t\t\t\tstrokeColor\n\t\t\t};\n\t\t}));\n\n\t\tisPolygon && isDraft && shapeActiveScreenPoints.length >= 3 && segments.push({\n\t\t\t...screenPointsFirst,\n\t\t\tid: ShapeManipulatorUid,\n\t\t\trx: strokeWidth * (canClosePath ? 5 : 4),\n\t\t\try: strokeWidth * (canClosePath ? 5 : 4),\n\t\t\tbackgroundColor: canClosePath ? hoverColor : [0.5, 0.5, 0.5],\n\t\t\tstrokeWidth,\n\t\t\tstrokeColor\n\t\t});\n\n\t\tisPolygon && isDraft && hasStroke && !canClosePath && shapeActivePoints.length >= 2 && segments.push({\n\t\t\t...screenPointsLast,\n\t\t\tid: ShapeManipulatorUid,\n\t\t\trx: strokeWidth * (canEndPath ? 5 : 4),\n\t\t\try: strokeWidth * (canEndPath ? 5 : 4),\n\t\t\tbackgroundColor: canEndPath ? hoverColor : [0.5, 0.5, 0.5],\n\t\t\tstrokeWidth,\n\t\t\tstrokeColor\n\t\t});\n\n\t\tif (shapeManipulatorRotationPoint) {\n\t\t\t// add rotator line\n\t\t\tsegments.push({\n\t\t\t\tid: ShapeManipulatorUid,\n\t\t\t\tpoints: [\n\t\t\t\t\t{\n\t\t\t\t\t\tx: shapeManipulatorRotationPoint.origin.x,\n\t\t\t\t\t\ty: shapeManipulatorRotationPoint.origin.y\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tx: shapeManipulatorRotationPoint.position.x,\n\t\t\t\t\t\ty: shapeManipulatorRotationPoint.position.y\n\t\t\t\t\t}\n\t\t\t\t],\n\t\t\t\tstrokeColor,\n\t\t\t\tstrokeWidth,\n\t\t\t\topacity: lineOpacity\n\t\t\t});\n\t\t}\n\n\t\t// replace existing segments\n\t\t$$invalidate(55, ui = ui.filter(guide => guide.id !== ShapeManipulatorUid).concat(segments));\n\t};\n\n\tconst removeMarkupManipulatorLines = () => {\n\t\t$$invalidate(55, ui = ui.filter(guide => guide.id !== ShapeManipulatorUid));\n\t};\n\n\tconst togglePrerender = isActive => {\n\t\tif (!isActive) return updateMarkupShapeItems({ _prerender: false });\n\t\tconst shape = markup.find(markupItem => markupItem.isEditing);\n\t\tif (!shape) return;\n\t\tupdateMarkupShape(shape, { _prerender: textInputMode === 'inline' });\n\t};\n\n\tconst handleManipulatorResizeGrab = e => {\n\t\t$$invalidate(120, isInteracting = true);\n\t\tinteractionShape = activeMarkup;\n\t\tinteractionShapeOriginComputed = activeMarkupComputed;\n\t};\n\n\tconst handleManipulatorResizeDrag = e => {\n\t\t// is possible when using multiple fingers (scale canvas + drag / resize)\n\t\tif (!interactionShape) {\n\t\t\t$$invalidate(120, isInteracting = false);\n\t\t\treturn;\n\t\t}\n\n\t\tconst { translation, indexes, shiftKey } = e.detail;\n\t\tresizeShape(interactionShape, interactionShapeOriginComputed, indexes, translation, { shiftKey });\n\t};\n\n\tconst handleManipulatorResizeEnd = e => {\n\t\t// is possible when using multiple fingers (scale canvas + drag / resize)\n\t\tif (!interactionShape) {\n\t\t\t$$invalidate(120, isInteracting = false);\n\t\t\treturn;\n\t\t}\n\n\t\tselectShape(interactionShape);\n\t\tconst { isTap } = e.detail;\n\t\tif (isTap) ontapshape(interactionShape);\n\t\tinteractionShape = undefined;\n\t\t$$invalidate(120, isInteracting = false);\n\t\tonupdateshape(activeMarkup);\n\t};\n\n\tconst handleManipulatorRotateGrab = e => {\n\t\trotatorInitialPosition = getShapeRotationPoint(activeMarkupComputed).origin;\n\t\t$$invalidate(120, isInteracting = true);\n\t\tinteractionShape = activeMarkup;\n\t\tinteractionShapeOriginComputed = activeMarkupComputed;\n\t};\n\n\tconst handleManipulatorRotateDrag = e => {\n\t\t// is possible when using multiple fingers (scale canvas + drag / resize)\n\t\tif (!interactionShape) {\n\t\t\t$$invalidate(120, isInteracting = false);\n\t\t\treturn;\n\t\t}\n\n\t\tconst { translation, shiftKey } = e.detail;\n\t\trotateShape(interactionShape, interactionShapeOriginComputed, translation, { shiftKey });\n\t};\n\n\tconst handleManipulatorRotateEnd = () => {\n\t\t// is possible when using multiple fingers (scale canvas + drag / resize)\n\t\tif (!interactionShape) {\n\t\t\t$$invalidate(120, isInteracting = false);\n\t\t\treturn;\n\t\t}\n\n\t\tselectShape(interactionShape);\n\t\tinteractionShape = undefined;\n\t\t$$invalidate(120, isInteracting = false);\n\t\tonupdateshape(activeMarkup);\n\t};\n\n\t//\n\t// Keyboard\n\t//\n\tconst handleKey = e => {\n\t\t// get key type\n\t\tconst { key } = e;\n\n\t\tconst isEscape = (/escape/i).test(key);\n\n\t\t// if (isEscape && getMarkupItemDraft()) {\n\t\t// e.preventDefault();\n\t\t// e.stopPropagation();\n\t\t// discardMarkupItemDraft();\n\t\t// return;\n\t\t// }\n\t\t// only handle key input if a shape has been selected\n\t\tif (!hasActiveMarkupItem()) return;\n\n\t\t// if is escape deselect active item\n\t\tif (isEscape) {\n\t\t\te.preventDefault();\n\t\t\te.stopPropagation();\n\t\t\treturn deselectMarkupItem(activeMarkup);\n\t\t}\n\n\t\t// if is tab, select next markup item\n\t\t/*\nif (/arrow/i.test(key)) {\n const success = e.shiftKey \n ? selectPreviousMarkupItem(activeMarkup)\n : selectNextMarkupItem(activeMarkup);\n \n if (success) {\n e.preventDefault();\n e.stopPropagation();\n }\n}\n*/\n\t\t// if is remove active\n\t\tif ((/backspace|delete/i).test(key) && !isTextInputElement(e.target)) {\n\t\t\t// prevent back navigation on Firefox\n\t\t\te.preventDefault();\n\n\t\t\t// remove the item\n\t\t\tremoveActiveMarkupItem();\n\t\t}\n\n\t\t// if is duplicate active shape keyboard shortcut\n\t\tif (allowShapeDuplicate && key === 'd' && (e.metaKey || e.ctrlKey)) {\n\t\t\te.preventDefault();\n\t\t\te.stopPropagation();\n\t\t\tduplicateActiveMarkup();\n\t\t}\n\t};\n\n\tconst isTextInputElement = element => {\n\t\treturn element.isContentEditable || (/input|textarea/i).test(element.nodeName);\n\t};\n\n\t//\n\t// Text input\n\t//\n\tlet textInput;\n\n\tconst getTextShapeOriginSnapshot = () => ({ ...activeMarkup });\n\n\tconst getTextInputTextStyles = (shapeComputed, mode) => {\n\t\tconst { textAlign = 'left', fontFamily = 'sans-serif', fontWeight = 'normal', fontStyle = 'normal' } = shapeComputed;\n\t\tconst imp = '!important';\n\t\tconst cosmetic = `text-align:${textAlign}${imp};font-family:${fontFamily}${imp};font-weight:${fontWeight}${imp};font-style:${fontStyle}${imp};`;\n\t\tif (mode === 'modal') return cosmetic;\n\t\tlet fontSize = shapeComputed.fontSize;\n\n\t\t// this is to work around Firefox 1000px limit on font-size\n\t\tlet fontScalar = 1;\n\n\t\tlet fontScalarStyles = '';\n\n\t\tif (fontSize > 1000 && isFirefox()) {\n\t\t\tfontScalar = fontSize / 1000;\n\t\t\tfontScalarStyles = `transform-origin:0 0;transform:scale(${fontScalar})`;\n\t\t\tfontSize = 1000;\n\t\t}\n\n\t\tlet lineHeight = shapeComputed.lineHeight / fontScalar;\n\t\tconst color = colorArrayToRGBA(shapeComputed.color);\n\t\tconst initialLineOffset = Math.max(0, fontSize - lineHeight) * 0.5;\n\t\treturn `--font-scalar:${fontScalar};--bottom-inset:${initialLineOffset}px;padding:${initialLineOffset}px 0 0${imp};color:${color}${imp};font-size:${fontSize}px${imp};line-height:${lineHeight}px${imp};${cosmetic};${fontScalarStyles}`;\n\t};\n\n\tconst getTextInputPositionStyles = (shapeComputed, offset, contextZoom, contextRotation) => {\n\t\tlet center;\n\t\tlet size;\n\n\t\tif (shapeComputed.width && shapeComputed.height) {\n\t\t\t// text box\n\t\t\tcenter = rectCenter(shapeComputed);\n\n\t\t\tsize = sizeCreateFromAny(shapeComputed);\n\t\t} else {\n\t\t\t// text line\n\t\t\tsize = textToSize(activeMarkup.text, activeMarkupComputed);\n\n\t\t\t// if has fix width, we'll use that\n\t\t\tsize.width = activeMarkupComputed.width || size.width;\n\n\t\t\tcenter = vectorCreate(shapeComputed.x + size.width * 0.5, shapeComputed.y + size.height * 0.5);\n\t\t}\n\n\t\tconst lineHeight = Math.max(0, shapeComputed.fontSize - shapeComputed.lineHeight) + shapeComputed.lineHeight;\n\t\tconst position = mapImagePointToEditorPoint(center);\n\t\tlet tx = position.x - offset.x - size.width * 0.5;\n\t\tlet ty = position.y - offset.y - size.height * 0.5;\n\t\tlet flipX = shapeComputed.flipX;\n\t\tlet flipY = shapeComputed.flipY;\n\t\tlet r = shapeComputed.rotation;\n\n\t\tif (contextFlipX && contextFlipY) {\n\t\t\tflipX = !flipX;\n\t\t\tflipY = !flipY;\n\t\t} else if (contextFlipX) {\n\t\t\tflipX = !flipX;\n\t\t\tr = -r;\n\t\t} else if (contextFlipY) {\n\t\t\tflipY = !flipY;\n\t\t\tr = -r;\n\t\t}\n\n\t\tr += contextRotation;\n\t\tconst sx = contextZoom * (flipX ? -1 : 1);\n\t\tconst sy = contextZoom * (flipY ? -1 : 1);\n\t\treturn `--line-height:${lineHeight}px;width:${size.width}px;height:${size.height}px;transform:translate(${tx}px,${ty}px) rotate(${r}rad) scale(${sx}, ${sy})`;\n\t};\n\n\t// sets the contenteditable text when user clicks text shape\n\tconst syncTextInput = () => updateTextInputValue(textInputText);\n\n\tconst updateTextInputValue = text => {\n\t\t$$invalidate(8, textInput.innerHTML = textToHTML(text), textInput);\n\t};\n\n\t// cleans up single line text\n\tconst removeLineBreaks = text => {\n\t\tconst lines = text.// split on lines so we can create compressed normal line of text\n\t\tsplit(/[\\n\\r]/g);\n\n\t\tif (lines.length > 1) {\n\t\t\treturn lines.// remove spaces around lines\n\t\t\tmap(str => str.trim()).// remove empty strings\n\t\t\tfilter(str => str.length).// create new line\n\t\t\tjoin(' ');\n\t\t}\n\n\t\t// just return line\n\t\treturn lines[0];\n\t};\n\n\tconst getTextInputValue = element => {\n\t\tconst elementValue = element.value === undefined\n\t\t? element.innerHTML\n\t\t: element.value;\n\n\t\tconst elementValueClean = activeMarkup.format === 'text'\n\t\t? htmlToText(elementValue)\n\t\t: elementValue;\n\n\t\tconst value = shapeIsTextBlock(activeMarkup) && activeMarkup.disableNewline !== false\n\t\t? removeLineBreaks(elementValueClean)\n\t\t: elementValueClean;\n\n\t\treturn value;\n\t};\n\n\tconst formatContentEditable = html => {\n\t\t// check if can input\n\t\tconst canInput = shapeCanInput(activeMarkup, html);\n\n\t\treturn canInput === true ? html : canInput;\n\t};\n\n\tconst handleTextInput = () => {\n\t\tconst value = getTextInputValue(textInput);\n\t\tconst canInput = shapeCanInput(activeMarkup, value);\n\t\tconst text = canInput === true ? value : canInput;\n\t\tlet x = textShapeDisplayOrigin.x;\n\t\tlet y = textShapeDisplayOrigin.y;\n\n\t\t// if does not have height we need to adjust offset if is rotated\n\t\tif (!activeMarkup.height) {\n\t\t\t// draw origin rect\n\t\t\tconst originRotatedRect = rectRotate({ ...textRectDisplayOrigin }, activeMarkup.rotation);\n\n\t\t\t// draw current rect\n\t\t\tconst size = textToSize(text, activeMarkupComputed);\n\n\t\t\tconst currentRotatedRect = rectRotate({ x, y, ...size }, activeMarkup.rotation);\n\t\t\tconst [originTopLeft, ,originBottomRight] = originRotatedRect;\n\t\t\tconst [currentTopLeft, ,currentBottomRight] = currentRotatedRect;\n\t\t\tlet a = originTopLeft;\n\t\t\tlet b = currentTopLeft;\n\n\t\t\t// if flipped we need to 'extend' the text field in the opposite direction\n\t\t\tif (activeMarkup.flipX) {\n\t\t\t\ta = originBottomRight;\n\t\t\t\tb = currentBottomRight;\n\t\t\t}\n\n\t\t\t// move\n\t\t\tconst d = vectorSubtract(vectorClone(a), b);\n\n\t\t\tx += d.x;\n\t\t\ty += d.y;\n\t\t}\n\n\t\tupdateMarkupShape(activeMarkup, {\n\t\t\tx: isString(textShapeOrigin.x)\n\t\t\t? toPercentage(x, parentRect.width)\n\t\t\t: x,\n\t\t\ty: isString(textShapeOrigin.y)\n\t\t\t? toPercentage(y, parentRect.height)\n\t\t\t: y,\n\t\t\ttext\n\t\t});\n\t};\n\n\tconst handleTextInputAttempt = e => {\n\t\tconst { target, key } = e;\n\t\tconst currentValue = target.value || target.innerText;\n\t\tconst selectionStart = target.selectionStart || 0;\n\t\tconst selectionEnd = target.selectionEnd || currentValue.length;\n\t\tconst currentValueStart = currentValue.substring(0, selectionStart);\n\t\tconst currentValueEnd = currentValue.substring(selectionEnd);\n\t\tconst intendedValue = currentValueStart + key + currentValueEnd;\n\t\tconst filteredValue = shapeCanInput(activeMarkup, intendedValue);\n\t\tif (filteredValue !== intendedValue) return e.preventDefault();\n\t};\n\n\t// prevent moving shape when focusing text field, and close field if escape pressed\n\tconst handleTextInputKeyDown = e => {\n\t\t// block newlines for auto width text that doesn't allow newlines\n\t\tif (shapeIsTextBlock(activeMarkup) && (/enter/i).test(e.code) && activeMarkup.disableNewline !== false) return e.preventDefault();\n\n\t\tif ((/arrow/i).test(e.code)) return e.stopPropagation();\n\t\tif ((/escape/i).test(e.key)) return handleTextCancel();\n\t};\n\n\t// handle alt/ctrl/cmd + return\n\tconst handleTextInputKeyUp = e => {\n\t\t// get key type\n\t\tconst { key, ctrlKey, altKey } = e;\n\n\t\t// confirm multi line text elements\n\t\tif ((/enter/i).test(key) && (ctrlKey || altKey)) return handleTextConfirm();\n\t};\n\n\tconst handleTextConfirm = () => {\n\t\t// if was draft, now need to confirm\n\t\tlet wasDraft = activeShapeIsDraft;\n\n\t\tif (activeShapeIsDraft) confirmMarkupItemDraft();\n\n\t\t// final text input check\n\t\ttextInput && textInput.confirm && textInput.confirm();\n\n\t\thandleTextInput();\n\n\t\t// done\n\t\tfinishEditMarkupItem(activeMarkup);\n\n\t\tif (wasDraft) onaddshape(activeMarkup); else onupdateshape(activeMarkup);\n\t};\n\n\tconst handleTextCancel = () => {\n\t\tif (activeShapeIsDraft) {\n\t\t\tdiscardMarkupItemDraft();\n\t\t} else {\n\t\t\tupdateMarkupShape(activeMarkup, {\n\t\t\t\ttext: textShapeOrigin.text,\n\t\t\t\tx: textShapeOrigin.x,\n\t\t\t\ty: textShapeOrigin.y\n\t\t\t});\n\n\t\t\tfinishEditMarkupItem(activeMarkup);\n\t\t}\n\t};\n\n\t//#region shape popup menu actions\n\tconst getShapeSizeTranslation = (originRect, targetRect, { flipX, flipY, rotation }, anchor = 'top left') => {\n\t\tlet a, b;\n\n\t\t// draw origin rect\n\t\tconst [originTopLeft, originTopRight, originBottomRight, originBottomLeft] = rectRotate(originRect, rotation);\n\n\t\t// draw target rect\n\t\tconst [targetTopLeft, targetTopRight, targetBottomRight, targetBottomLeft] = rectRotate(targetRect, rotation);\n\n\t\tif (anchor === 'top center') {\n\t\t\t// for now doesn't matter if it's flipped horizontal\n\t\t\tconst originMid = vectorCenter(flipY\n\t\t\t? [originBottomLeft, originBottomRight]\n\t\t\t: [originTopLeft, originTopRight]);\n\n\t\t\tconst targetMid = vectorCenter(flipY\n\t\t\t? [targetBottomLeft, targetBottomRight]\n\t\t\t: [targetTopLeft, targetTopRight]);\n\n\t\t\ta = originMid;\n\t\t\tb = targetMid;\n\t\t} else if (anchor === 'top right' && !flipX || anchor === 'top left' && flipX) {\n\t\t\t// tr\n\t\t\ta = flipY ? originBottomRight : originTopRight;\n\n\t\t\tb = flipY ? targetBottomRight : targetTopRight;\n\t\t} else {\n\t\t\t// tl\n\t\t\ta = flipY ? originBottomLeft : originTopLeft;\n\n\t\t\tb = flipY ? targetBottomLeft : targetTopLeft;\n\t\t}\n\n\t\treturn vectorSubtract(vectorClone(a), b);\n\t};\n\n\tconst translateRelative = (current, position, translation) => vectorCreate(\n\t\tisString(current.x)\n\t\t? toPercentage(position.x + translation.x, parentRect.width)\n\t\t: position.x + translation.x,\n\t\tisString(current.y)\n\t\t? toPercentage(position.y + translation.y, parentRect.height)\n\t\t: position.y + translation.y\n\t);\n\n\tconst ShapeTextStateCache = {};\n\tconst handleEditTextActiveMarkup = () => editMarkupItem(activeMarkup);\n\n\tconst handleTextSwitchLayout = () => {\n\t\tconst shapeTextSize = sizeApply(textToSize(activeMarkup.text, activeMarkupComputed), v => Math.ceil(v));\n\t\tconst isFixedBox = hasProp(activeMarkup, 'height');\n\t\tconst isAutoHeightBox = !isFixedBox && hasProp(activeMarkup, 'width');\n\n\t\t// set/get cache entries for this text shape\n\t\tconst key = activeMarkup.id;\n\n\t\tlet cache = ShapeTextStateCache[key];\n\n\t\tif (!cache) {\n\t\t\tShapeTextStateCache[key] = {};\n\t\t\tcache = ShapeTextStateCache[key];\n\t\t}\n\n\t\tconst toAutoWidth = sizeFrom => {\n\t\t\t// remove width prop\n\t\t\tconst { width, ...autoSizeProps } = activeMarkupComputed;\n\n\t\t\tconst sizeTo = textToSize(activeMarkup.text, autoSizeProps);\n\n\t\t\t// this will change dimensions so if rotated we have to calculate new position\n\t\t\tconst translation = getShapeSizeTranslation(rectCreate(activeMarkupComputed.x, activeMarkupComputed.y, sizeFrom.width, sizeFrom.height), rectCreate(activeMarkupComputed.x, activeMarkupComputed.y, sizeTo.width, sizeTo.height), activeMarkupComputed, `top ${activeMarkup.textAlign}`);\n\n\t\t\tconst shouldRemoveTextAlign = activeMarkupComputed.disableNewline !== false;\n\n\t\t\t// switch to auto mode\n\t\t\tremoveMarkupShapeProps(activeMarkup, ['width', 'height', shouldRemoveTextAlign && 'textAlign']);\n\n\t\t\t// update position based on size translation\n\t\t\tupdateMarkupShape(activeMarkup, {\n\t\t\t\t...translateRelative(activeMarkup, activeMarkupComputed, translation)\n\t\t\t});\n\t\t};\n\n\t\tconst toAutoHeight = sizeFrom => {\n\t\t\t// -> switch to auto height mode\n\t\t\tconst sizeTo = sizeCreate(cache.width || activeMarkupComputed.width || shapeTextSize.width, shapeTextSize.height);\n\n\t\t\tconst textAlign = cache.textAlign || 'left';\n\n\t\t\t// this will change dimensions so if rotated we have to calculate new position\n\t\t\tconst translation = getShapeSizeTranslation(rectCreate(activeMarkupComputed.x, activeMarkupComputed.y, sizeFrom.width, sizeFrom.height), rectCreate(activeMarkupComputed.x, activeMarkupComputed.y, sizeTo.width, sizeTo.height), activeMarkupComputed, `top ${textAlign}`);\n\n\t\t\t// switch to auto-height mode\n\t\t\tremoveMarkupShapeProps(activeMarkup, ['height']);\n\n\t\t\t// update position based on size translation\n\t\t\tupdateMarkupShape(activeMarkup, {\n\t\t\t\t...translateRelative(activeMarkup, activeMarkupComputed, translation),\n\t\t\t\twidth: isString(activeMarkup.width)\n\t\t\t\t? toPercentage(sizeTo.width, parentRect.width)\n\t\t\t\t: sizeTo.width,\n\t\t\t\ttextAlign\n\t\t\t});\n\t\t};\n\n\t\tconst toFixedSize = sizeFrom => {\n\t\t\t// this can change dimensions so we need to recalculate position\n\t\t\tconst sizeTo = sizeCreate(cache.width || shapeTextSize.width, cache.height || shapeTextSize.height);\n\n\t\t\tconst textAlign = cache.textAlign || 'left';\n\n\t\t\t// this will change dimensions so if rotated we have to calculate new position\n\t\t\tconst translation = getShapeSizeTranslation(rectCreate(activeMarkupComputed.x, activeMarkupComputed.y, sizeFrom.width, sizeFrom.height), rectCreate(activeMarkupComputed.x, activeMarkupComputed.y, sizeTo.width, sizeTo.height), activeMarkupComputed, `top ${textAlign}`);\n\n\t\t\t// switch to fixed box, use stored alignment or default to left text align\n\t\t\tupdateMarkupShape(activeMarkup, {\n\t\t\t\t...translateRelative(activeMarkup, activeMarkupComputed, translation),\n\t\t\t\twidth: isString(activeMarkup.width)\n\t\t\t\t? toPercentage(sizeTo.width, parentRect.width)\n\t\t\t\t: sizeTo.width,\n\t\t\t\theight: isString(activeMarkup.width)\n\t\t\t\t? toPercentage(sizeTo.height, parentRect.height)\n\t\t\t\t: sizeTo.height,\n\t\t\t\ttextAlign\n\t\t\t});\n\t\t};\n\n\t\tif (isFixedBox) {\n\t\t\t// store size so we can restore it later\n\t\t\tcache.textAlign = activeMarkup.textAlign;\n\n\t\t\tcache.width = activeMarkupComputed.width;\n\t\t\tcache.height = activeMarkupComputed.height;\n\t\t\tconst sizeFrom = sizeCreate(activeMarkupComputed.width, activeMarkupComputed.height);\n\n\t\t\tif (shapeCanChangeTextLayout(activeMarkup, 'auto-height')) {\n\t\t\t\ttoAutoHeight(sizeFrom);\n\t\t\t} else if (shapeCanChangeTextLayout(activeMarkup, 'auto-width')) {\n\t\t\t\ttoAutoWidth(sizeFrom);\n\t\t\t}\n\t\t} else if (isAutoHeightBox) {\n\t\t\t// store alignment so we can restore it later\n\t\t\tcache.textAlign = activeMarkup.textAlign;\n\n\t\t\tcache.width = activeMarkupComputed.width;\n\n\t\t\t// -> switch to auto width\n\t\t\tconst sizeFrom = sizeCreate(activeMarkupComputed.width, shapeTextSize.height);\n\n\t\t\tif (shapeCanChangeTextLayout(activeMarkup, 'auto-width')) {\n\t\t\t\ttoAutoWidth(sizeFrom);\n\t\t\t} else if (shapeCanChangeTextLayout(activeMarkup, 'fixed-size')) {\n\t\t\t\ttoFixedSize(sizeFrom);\n\t\t\t}\n\t\t} else {\n\t\t\t// -> switch to fixed size or auto height\n\t\t\tcache.textAlign = activeMarkup.textAlign;\n\n\t\t\tconst sizeFrom = sizeCreate(Math.ceil(shapeTextSize.width), Math.ceil(shapeTextSize.height));\n\n\t\t\tif (shapeCanChangeTextLayout(activeMarkup, 'fixed-size')) {\n\t\t\t\ttoFixedSize(sizeFrom);\n\t\t\t} else if (shapeCanChangeTextLayout(activeMarkup, 'auto-height')) {\n\t\t\t\ttoAutoHeight(sizeFrom);\n\t\t\t}\n\t\t}\n\t};\n\n\tconst handleFlipX = e => {\n\t\te.stopPropagation();\n\t\tconst flipX = activeMarkup.flipX || false;\n\t\tupdateMarkupShapeProperty(activeMarkup, 'flipX', !flipX);\n\t\tonupdateshape(activeMarkup);\n\t};\n\n\tconst handleFlipY = e => {\n\t\te.stopPropagation();\n\t\tconst flipY = activeMarkup.flipY || false;\n\t\tupdateMarkupShapeProperty(activeMarkup, 'flipY', !flipY);\n\t\tonupdateshape(activeMarkup);\n\t};\n\n\tconst handleAdjustOpacity = value => {\n\t\tupdateMarkupShapeProperty(activeMarkup, 'opacity', value);\n\t};\n\n\tconst handleConfirmOpacity = value => {\n\t\thandleAdjustOpacity(value);\n\t\tonupdateshape(activeMarkup);\n\t};\n\n\tconst handleRemoveActiveMarkup = e => {\n\t\te.stopPropagation();\n\t\te.target.blur(); // cancels focus of remove button\n\t\tremoveActiveMarkupItem();\n\t};\n\n\tconst handleMoveToFrontActiveMarkup = e => {\n\t\te.stopPropagation();\n\n\t\t// test if is not already at top of stack, if so, exit\n\t\tconst index = markup.findIndex(shape => shape === activeMarkup);\n\n\t\tif (index === markup.length - 1) return;\n\n\t\t// add to last index\n\t\t$$invalidate(0, markup = markup.filter(markupItem => markupItem !== activeMarkup).concat([activeMarkup]));\n\n\t\tonupdateshape(activeMarkup);\n\t};\n\n\tconst handleDuplicateActiveMarkup = e => {\n\t\te.stopPropagation();\n\t\tduplicateActiveMarkup();\n\t};\n\n\tconst duplicateActiveMarkup = () => {\n\t\t// create clone\n\t\tconst clone = shapeDeepCopy(activeMarkup);\n\n\t\tclone.id = getUniqueId();\n\t\tconst duplicationOffset = vectorCreate(50, -50);\n\n\t\t// offset\n\t\tif (hasProp(clone, 'points')) {\n\t\t\tconst computedProps = shapeGetPropsPixelValues(clone, ['points'], parentRect);\n\n\t\t\tcomputedProps.points.forEach(point => {\n\t\t\t\tpoint.x += duplicationOffset.x;\n\t\t\t\tpoint.y += duplicationOffset.y;\n\t\t\t});\n\n\t\t\tshapeUpdateProps(clone, computedProps, parentRect);\n\t\t} else if (shapeIsLine(clone)) {\n\t\t\tconst computedProps = shapeGetPropsPixelValues(clone, ['x1', 'y1', 'x2', 'y2'], parentRect);\n\t\t\tcomputedProps.x1 += duplicationOffset.x;\n\t\t\tcomputedProps.y1 += duplicationOffset.y;\n\t\t\tcomputedProps.x2 += duplicationOffset.x;\n\t\t\tcomputedProps.y2 += duplicationOffset.y;\n\t\t\tshapeUpdateProps(clone, computedProps, parentRect);\n\t\t} else {\n\t\t\tconst currentPosition = shapeGetPropsPixelValues(clone, ['x', 'y'], parentRect);\n\t\t\tcurrentPosition.x += 50;\n\t\t\tcurrentPosition.y -= 50;\n\t\t\tshapeUpdateProps(clone, currentPosition, parentRect);\n\t\t}\n\n\t\t// add clone\n\t\tmarkup.push(clone);\n\n\t\t// added\n\t\tonaddshape(clone);\n\n\t\t// select clone\n\t\tselectShape(clone);\n\t};\n\n\t//#endregion\n\tconst getMarkupControlsAnchorPosition = rect => vectorApply(vectorCreate(rect.x + rect.width * 0.5, rect.y), snapToPixel);\n\n\t//\n\t// show & position markup controls panel\n\t//\n\tconst markupControlsOpacity = spring(0, { stiffness: 0.2, damping: 0.7 });\n\n\tcomponent_subscribe($$self, markupControlsOpacity, value => $$invalidate(17, $markupControlsOpacity = value));\n\tlet shapeControlsSize;\n\n\tconst getShapeControlPositionOnCanvas = position => {\n\t\tconst left = utilRect.x;\n\t\tconst top = utilRect.y;\n\t\tconst right = left + utilRect.width;\n\t\tlet x = Math.max(position.x - shapeControlsSize.width * 0.5, left);\n\t\tlet y = Math.max(position.y - shapeControlsSize.height - shapeControlDist, top);\n\t\tif (x + shapeControlsSize.width > right) x = right - shapeControlsSize.width;\n\t\treturn vectorCreate(x, y);\n\t};\n\n\tconst TextLayoutChangeIcon = (locale, shape) => {\n\t\tconst { disableTextLayout = [] } = shape;\n\n\t\t// is fixed size\n\t\tif ('height' in shape) {\n\t\t\tif (disableTextLayout.includes('auto-height')) {\n\t\t\t\t// next is auto-width, no need to set as is empty\n\t\t\t\treturn locale.shapeIconButtonTextLayoutAutoWidth;\n\t\t\t} else {\n\t\t\t\t// next is auto-height\n\t\t\t\treturn locale.shapeIconButtonTextLayoutAutoHeight;\n\t\t\t}\n\t\t} else // is auto-height\n\t\tif ('width' in shape) {\n\t\t\tif (disableTextLayout.includes('auto-width')) {\n\t\t\t\t// next is fixed-size\n\t\t\t\treturn locale.shapeIconButtonTextLayoutFixedSize;\n\t\t\t} else {\n\t\t\t\t// next is auto-width, no need to set as is empty\n\t\t\t\treturn locale.shapeIconButtonTextLayoutAutoWidth;\n\t\t\t}\n\t\t} else // is auto-width\n\t\t{\n\t\t\t// next is fixed-size\n\t\t\tif (disableTextLayout.includes('fixed-size')) {\n\t\t\t\t// next is fixed-size\n\t\t\t\treturn locale.shapeIconButtonTextLayoutAutoHeight;\n\t\t\t} else {\n\t\t\t\t// next is auto-width, no need to set as is empty\n\t\t\t\treturn locale.shapeIconButtonTextLayoutFixedSize;\n\t\t\t}\n\t\t}\n\t};\n\n\tconst TextLayoutChangeLabel = (locale, shape) => {\n\t\tconst { disableTextLayout = [] } = shape;\n\n\t\t// is fixed size\n\t\tif ('height' in shape) {\n\t\t\tif (disableTextLayout.includes('auto-height')) {\n\t\t\t\t// next is auto-width, no need to set as is empty\n\t\t\t\treturn locale.shapeTitleButtonTextLayoutAutoWidth;\n\t\t\t} else {\n\t\t\t\t// next is auto-height\n\t\t\t\treturn locale.shapeTitleButtonTextLayoutAutoHeight;\n\t\t\t}\n\t\t} else // is auto-height\n\t\tif ('width' in shape) {\n\t\t\tif (disableTextLayout.includes('auto-width')) {\n\t\t\t\t// next is fixed-size\n\t\t\t\treturn locale.shapeTitleButtonTextLayoutFixedSize;\n\t\t\t} else {\n\t\t\t\t// next is auto-width, no need to set as is empty\n\t\t\t\treturn locale.shapeTitleButtonTextLayoutAutoWidth;\n\t\t\t}\n\t\t} else // is auto-width\n\t\t{\n\t\t\t// next is fixed-size\n\t\t\tif (disableTextLayout.includes('fixed-size')) {\n\t\t\t\t// next is fixed-size\n\t\t\t\treturn locale.shapeTitleButtonTextLayoutAutoHeight;\n\t\t\t} else {\n\t\t\t\t// next is auto-width, no need to set as is empty\n\t\t\t\treturn locale.shapeTitleButtonTextLayoutFixedSize;\n\t\t\t}\n\t\t}\n\t};\n\n\tconst handleNudge = e => {\n\t\tconst shape = getActiveMarkupItem();\n\t\tif (!shape) return;\n\t\tif (shapeIsTextEditing(shape)) return;\n\t\tif (!shapeCanMove(shape)) return;\n\t\tinteractionShape = shape;\n\t\tinteractionShapeOriginComputed = shapeComputeDisplay(shapeDeepCopy(interactionShape), parentRect);\n\t\ttranslateShape(interactionShape, interactionShapeOriginComputed, e.detail);\n\t};\n\n\t// shape navigator\n\tlet showShapeList = false;\n\n\tconst handleFocusIn = e => {\n\t\t$$invalidate(18, showShapeList = true);\n\t};\n\n\tconst handleFocusOut = ({ relatedTarget }) => {\n\t\t// still in list\n\t\tif (relatedTarget && relatedTarget.classList.contains('shape-selector__button')) return;\n\n\t\t$$invalidate(18, showShapeList = false);\n\t};\n\n\t// change cursor style\n\tlet lastImagePosition = vectorCreateEmpty();\n\n\tlet pointerPositionInEditor = undefined;\n\n\tconst handlePointerMove = e => {\n\t\t// not handled for touch interaction\n\t\tif (e.pointerType === 'touch') return;\n\n\t\t// if interactionTimer is set an interaction was started\n\t\tif (isInteracting || interactionTimer) setHoverShape(undefined);\n\n\t\tconst editorPosition = getEventPositionInEditor(e, rootRect);\n\t\tconst imagePosition = vectorApply(mapEditorPointToImagePoint(editorPosition), v => Math.round(v));\n\t\tif (vectorEqual(imagePosition, lastImagePosition)) return;\n\t\tlastImagePosition = vectorClone(imagePosition);\n\t\t$$invalidate(122, pointerPositionInEditor = editorPosition);\n\t\tif (isInteracting || interactionTimer) return;\n\t\tonhovercanvas(editorPosition, imagePosition);\n\n\t\t// no hover effect when creating markup\n\t\tif (activeMarkupItemIsDraft) return;\n\n\t\tconst [shape] = getShapesNearPosition(imagePosition, 0, shapeCanSelect);\n\n\t\t// can't hover draft\n\t\tif (shape && shapeIsDraft(shape)) return;\n\n\t\tsetHoverShape(shape);\n\t};\n\n\tconst setHoverShape = shape => {\n\t\t// let others know we're hovering this shape\n\t\tonhovershape(shape);\n\n\t\t// update interface\n\t\t$$invalidate(121, hoverShape = shape);\n\t};\n\n\t// clean up\n\tonDestroy(() => {\n\t\t// clean up invisible lines\n\t\tremoveMarkupManipulatorLines();\n\n\t\t// clean up hover lines\n\t\thideHover();\n\t});\n\n\t// element ref\n\tlet element;\n\n\tfunction measure_handler(event) {\n\t\tbubble.call(this, $$self, event);\n\t}\n\n\tconst click_handler = index => selectShape(markup[index]);\n\n\tfunction textarea_binding($$value) {\n\t\tbinding_callbacks[$$value ? 'unshift' : 'push'](() => {\n\t\t\ttextInput = $$value;\n\t\t\t$$invalidate(8, textInput);\n\t\t});\n\t}\n\n\tfunction textarea_input_handler() {\n\t\ttextInputText = this.value;\n\t\t((((($$invalidate(23, textInputText), $$invalidate(11, shouldRenderTextInput)), $$invalidate(125, activeMarkup)), $$invalidate(143, isTextMarkupSelected)), $$invalidate(1, disabled)), $$invalidate(0, markup));\n\t}\n\n\tfunction contenteditable_binding($$value) {\n\t\tbinding_callbacks[$$value ? 'unshift' : 'push'](() => {\n\t\t\ttextInput = $$value;\n\t\t\t$$invalidate(8, textInput);\n\t\t});\n\t}\n\n\tconst focusout_handler = () => {\n\t\t// need to focus root shape editor node as otherwise next escape press closes modal when in modal\n\t\telement && element.focus();\n\t};\n\n\tconst measure_handler_1 = e => $$invalidate(9, shapeControlsSize = e.detail);\n\n\tfunction div_binding($$value) {\n\t\tbinding_callbacks[$$value ? 'unshift' : 'push'](() => {\n\t\t\telement = $$value;\n\t\t\t$$invalidate(19, element);\n\t\t});\n\t}\n\n\tconst interactable_function_1 = e => getEventPositionInEditor(e, rootRect);\n\n\t$$self.$$set = $$props => {\n\t\tif ('uid' in $$props) $$invalidate(56, uid = $$props.uid);\n\t\tif ('ui' in $$props) $$invalidate(55, ui = $$props.ui);\n\t\tif ('disabled' in $$props) $$invalidate(1, disabled = $$props.disabled);\n\t\tif ('markup' in $$props) $$invalidate(0, markup = $$props.markup);\n\t\tif ('offset' in $$props) $$invalidate(2, offset = $$props.offset);\n\t\tif ('contextRotation' in $$props) $$invalidate(57, contextRotation = $$props.contextRotation);\n\t\tif ('contextFlipX' in $$props) $$invalidate(58, contextFlipX = $$props.contextFlipX);\n\t\tif ('contextFlipY' in $$props) $$invalidate(59, contextFlipY = $$props.contextFlipY);\n\t\tif ('contextZoom' in $$props) $$invalidate(60, contextZoom = $$props.contextZoom);\n\t\tif ('active' in $$props) $$invalidate(61, active = $$props.active);\n\t\tif ('opacity' in $$props) $$invalidate(62, opacity = $$props.opacity);\n\t\tif ('parentRect' in $$props) $$invalidate(63, parentRect = $$props.parentRect);\n\t\tif ('rootRect' in $$props) $$invalidate(3, rootRect = $$props.rootRect);\n\t\tif ('utilRect' in $$props) $$invalidate(64, utilRect = $$props.utilRect);\n\t\tif ('hoverColor' in $$props) $$invalidate(65, hoverColor = $$props.hoverColor);\n\t\tif ('textInputMode' in $$props) $$invalidate(4, textInputMode = $$props.textInputMode);\n\t\tif ('oninteractionstart' in $$props) $$invalidate(66, oninteractionstart = $$props.oninteractionstart);\n\t\tif ('oninteractionupdate' in $$props) $$invalidate(67, oninteractionupdate = $$props.oninteractionupdate);\n\t\tif ('oninteractionrelease' in $$props) $$invalidate(68, oninteractionrelease = $$props.oninteractionrelease);\n\t\tif ('oninteractionend' in $$props) $$invalidate(69, oninteractionend = $$props.oninteractionend);\n\t\tif ('oninteractioncancel' in $$props) $$invalidate(70, oninteractioncancel = $$props.oninteractioncancel);\n\t\tif ('onaddshape' in $$props) $$invalidate(71, onaddshape = $$props.onaddshape);\n\t\tif ('onupdateshape' in $$props) $$invalidate(72, onupdateshape = $$props.onupdateshape);\n\t\tif ('onselectshape' in $$props) $$invalidate(73, onselectshape = $$props.onselectshape);\n\t\tif ('onremoveshape' in $$props) $$invalidate(74, onremoveshape = $$props.onremoveshape);\n\t\tif ('ontapshape' in $$props) $$invalidate(75, ontapshape = $$props.ontapshape);\n\t\tif ('onhovershape' in $$props) $$invalidate(76, onhovershape = $$props.onhovershape);\n\t\tif ('onhovercanvas' in $$props) $$invalidate(77, onhovercanvas = $$props.onhovercanvas);\n\t\tif ('ontapcanvas' in $$props) $$invalidate(78, ontapcanvas = $$props.ontapcanvas);\n\t\tif ('beforeSelectShape' in $$props) $$invalidate(79, beforeSelectShape = $$props.beforeSelectShape);\n\t\tif ('beforeDeselectShape' in $$props) $$invalidate(80, beforeDeselectShape = $$props.beforeDeselectShape);\n\t\tif ('beforeRemoveShape' in $$props) $$invalidate(81, beforeRemoveShape = $$props.beforeRemoveShape);\n\t\tif ('beforeUpdateShape' in $$props) $$invalidate(82, beforeUpdateShape = $$props.beforeUpdateShape);\n\t\tif ('willRenderShapeControls' in $$props) $$invalidate(83, willRenderShapeControls = $$props.willRenderShapeControls);\n\t\tif ('willRenderShapeTextControls' in $$props) $$invalidate(84, willRenderShapeTextControls = $$props.willRenderShapeTextControls);\n\t\tif ('willStartInteraction' in $$props) $$invalidate(85, willStartInteraction = $$props.willStartInteraction);\n\t\tif ('mapEditorPointToImagePoint' in $$props) $$invalidate(86, mapEditorPointToImagePoint = $$props.mapEditorPointToImagePoint);\n\t\tif ('mapImagePointToEditorPoint' in $$props) $$invalidate(87, mapImagePointToEditorPoint = $$props.mapImagePointToEditorPoint);\n\t\tif ('eraseRadius' in $$props) $$invalidate(88, eraseRadius = $$props.eraseRadius);\n\t\tif ('selectRadius' in $$props) $$invalidate(89, selectRadius = $$props.selectRadius);\n\t\tif ('enableButtonFlipVertical' in $$props) $$invalidate(90, enableButtonFlipVertical = $$props.enableButtonFlipVertical);\n\t\tif ('enableTapToAddText' in $$props) $$invalidate(91, enableTapToAddText = $$props.enableTapToAddText);\n\t\tif ('enableTextStyleControls' in $$props) $$invalidate(5, enableTextStyleControls = $$props.enableTextStyleControls);\n\t\tif ('locale' in $$props) $$invalidate(6, locale = $$props.locale);\n\t};\n\n\t$$self.$$.update = () => {\n\t\tif ($$self.$$.dirty[0] & /*disabled, markup*/ 3) {\n\t\t\t$$invalidate(125, activeMarkup = !disabled && markup && (getMarkupItemDraft() || getActiveMarkupItem()));\n\t\t}\n\n\t\tif ($$self.$$.dirty[4] & /*activeMarkup*/ 2) {\n\t\t\t$$invalidate(148, activeMarkupSelected = !!activeMarkup);\n\t\t}\n\n\t\tif ($$self.$$.dirty[4] & /*activeMarkup*/ 2) {\n\t\t\t$$invalidate(139, activeShapeIsDraft = activeMarkup && shapeIsDraft(activeMarkup));\n\t\t}\n\n\t\tif ($$self.$$.dirty[4] & /*activeMarkup, activeShapeIsDraft*/ 32770) {\n\t\t\t$$invalidate(10, activeShapeId = activeMarkup && !activeShapeIsDraft\n\t\t\t? activeMarkup.id\n\t\t\t: undefined);\n\t\t}\n\n\t\tif ($$self.$$.dirty[0] & /*rootRect*/ 8 | $$self.$$.dirty[2] & /*parentRect*/ 2 | $$self.$$.dirty[4] & /*activeMarkup*/ 2) {\n\t\t\t// rootRect is in there so it recomputes the shape when the editor is resized\n\t\t\t$$invalidate(13, activeMarkupComputed = rootRect && activeMarkup && shapeComputeDisplay(shapeDeepCopy(activeMarkup), parentRect));\n\t\t}\n\n\t\tif ($$self.$$.dirty[4] & /*activeMarkup, activeShapeIsDraft*/ 32770) {\n\t\t\t$$invalidate(123, activeMarkupItemIsDraft = !!(activeMarkup && activeShapeIsDraft));\n\t\t}\n\n\t\tif ($$self.$$.dirty[0] & /*activeMarkupComputed*/ 8192 | $$self.$$.dirty[2] & /*opacity*/ 1 | $$self.$$.dirty[4] & /*activeMarkup*/ 2) {\n\t\t\t// $: shapeProps = activeMarkup || undefined;\n\t\t\t// TODO: we use opacity to trigger a redraw of the active points, this should be changed to the image zoom factor in a future release\n\t\t\t// && !shapeIsPath(activeMarkupComputed)\n\t\t\t$$invalidate(147, shapeActivePoints = activeMarkup && opacity && getMarkupShapePoints(activeMarkupComputed) || []);\n\t\t}\n\n\t\tif ($$self.$$.dirty[4] & /*activeMarkup*/ 2) {\n\t\t\t$$invalidate(149, allowResizeControls = activeMarkup && shapeCanResize(activeMarkup) && !shapeIsTextEditing(activeMarkup));\n\t\t}\n\n\t\tif ($$self.$$.dirty[4] & /*activeMarkup*/ 2) {\n\t\t\t$$invalidate(14, allowRotateControls = activeMarkup && shapeCanRotate(activeMarkup) && !shapeIsTextEditing(activeMarkup));\n\t\t}\n\n\t\tif ($$self.$$.dirty[4] & /*allowResizeControls, activeMarkup*/ 33554434) {\n\t\t\t$$invalidate(16, allowEdgeControls = allowResizeControls && hasProp(activeMarkup, 'text') && !activeMarkup.height\n\t\t\t? [[1, 2], [3, 0]]\n\t\t\t: activeMarkup && (shapeIsLine(activeMarkup) || shapeIsPath(activeMarkup))\n\t\t\t\t? false\n\t\t\t\t: allowResizeControls);\n\t\t}\n\n\t\tif ($$self.$$.dirty[0] & /*allowEdgeControls*/ 65536 | $$self.$$.dirty[4] & /*activeMarkup, allowResizeControls*/ 33554434) {\n\t\t\t$$invalidate(28, allowCornerControls = activeMarkup\n\t\t\t? Array.isArray(allowEdgeControls)\n\t\t\t\t? false\n\t\t\t\t: allowResizeControls\n\t\t\t: false);\n\t\t}\n\n\t\tif ($$self.$$.dirty[4] & /*activeMarkup, shapeActivePoints*/ 8388610) {\n\t\t\t$$invalidate(15, shouldRenderShapeManipulator = activeMarkup && shapeActivePoints.length > 1);\n\t\t}\n\n\t\tif ($$self.$$.dirty[2] & /*mapImagePointToEditorPoint*/ 33554432 | $$self.$$.dirty[4] & /*shapeActivePoints*/ 8388608) {\n\t\t\t$$invalidate(145, shapeActiveScreenPoints = shapeActivePoints.map(mapImagePointToEditorPoint));\n\t\t}\n\n\t\tif ($$self.$$.dirty[0] & /*offset*/ 4 | $$self.$$.dirty[4] & /*shapeActiveScreenPoints*/ 2097152) {\n\t\t\t$$invalidate(12, shapeManipulatorPoints = shapeActiveScreenPoints.map(point => vectorCreate(point.x - offset.x, point.y - offset.y)));\n\t\t}\n\n\t\tif ($$self.$$.dirty[4] & /*activeMarkupSelected, activeMarkup*/ 16777218) {\n\t\t\t$$invalidate(27, shapeAllowNewline = activeMarkupSelected && (shapeIsTextBox(activeMarkup)\n\t\t\t? // has selected text box, if text box has disableNewline property, follow setting, else allow new lines\n\t\t\t\thasProp(activeMarkup, 'disableNewline')\n\t\t\t\t? !activeMarkup.disableNewline\n\t\t\t\t: true\n\t\t\t: // has selected something else, only disable new lines if disableNewline is explicitly set to false\n\t\t\t\tactiveMarkup.disableNewline === false));\n\t\t}\n\n\t\tif ($$self.$$.dirty[2] & /*mapImagePointToEditorPoint*/ 33554432 | $$self.$$.dirty[3] & /*hoverShape*/ 268435456) {\n\t\t\thoverShape && mapImagePointToEditorPoint && !shapeIsSelected(hoverShape) && shapeCanSelect(hoverShape)\n\t\t\t? showHover(hoverShape)\n\t\t\t: hideHover();\n\t\t}\n\n\t\tif ($$self.$$.dirty[0] & /*shouldRenderShapeManipulator, allowRotateControls, shapeManipulatorPoints, activeMarkupComputed*/ 61440 | $$self.$$.dirty[2] & /*opacity*/ 1) {\n\t\t\t// TODO: we use opacity to trigger a redraw of the active points,\n\t\t\t// this should be changed to the image zoom factor in a future release\n\t\t\t$$invalidate(146, shapeManipulatorRotationPoint = shouldRenderShapeManipulator && allowRotateControls && opacity && shapeManipulatorPoints && getShapeRotationPointOnScreen(activeMarkupComputed));\n\t\t}\n\n\t\tif ($$self.$$.dirty[0] & /*offset*/ 4 | $$self.$$.dirty[4] & /*shapeManipulatorRotationPoint*/ 4194304) {\n\t\t\t$$invalidate(26, shapeManipulatorRotationPointPosition = shapeManipulatorRotationPoint && vectorCreate(shapeManipulatorRotationPoint.position.x - offset.x, shapeManipulatorRotationPoint.position.y - offset.y));\n\t\t}\n\n\t\tif ($$self.$$.dirty[3] & /*pointerPositionInEditor*/ 536870912 | $$self.$$.dirty[4] & /*activeShapeIsDraft, activeMarkup*/ 32770) {\n\t\t\t$$invalidate(144, currentPointerPosition = activeShapeIsDraft && shapeIsPath(activeMarkup) && pointerPositionInEditor);\n\t\t}\n\n\t\tif ($$self.$$.dirty[2] & /*opacity*/ 1 | $$self.$$.dirty[4] & /*activeMarkup, shapeActiveScreenPoints, currentPointerPosition*/ 3145730) {\n\t\t\t// add contextPresentationRect so we redraw active markup each frame\n\t\t\tif (activeMarkup && shapeActiveScreenPoints && opacity > 0) {\n\t\t\t\tredrawManipulatorLines(opacity, activeMarkup, currentPointerPosition);\n\t\t\t}\n\t\t}\n\n\t\tif ($$self.$$.dirty[4] & /*activeMarkup*/ 2) {\n\t\t\tif (!activeMarkup) {\n\t\t\t\tremoveMarkupManipulatorLines();\n\t\t\t}\n\t\t}\n\n\t\tif ($$self.$$.dirty[1] & /*active*/ 1073741824) {\n\t\t\ttogglePrerender(active);\n\t\t}\n\n\t\tif ($$self.$$.dirty[0] & /*textInput, textInputMode*/ 272) {\n\t\t\t// auto focus text input when created and in inline mode\n\t\t\tif (textInput && textInputMode === 'inline') textInput.focus();\n\t\t}\n\n\t\tif ($$self.$$.dirty[4] & /*activeMarkup*/ 2) {\n\t\t\t$$invalidate(143, isTextMarkupSelected = activeMarkup && shapeIsText(activeMarkup));\n\t\t}\n\n\t\tif ($$self.$$.dirty[4] & /*isTextMarkupSelected, activeMarkup*/ 524290) {\n\t\t\t$$invalidate(11, shouldRenderTextInput = isTextMarkupSelected && shapeCanInput(activeMarkup) !== false && shapeIsTextEditing(activeMarkup));\n\t\t}\n\n\t\tif ($$self.$$.dirty[0] & /*shouldRenderTextInput*/ 2048) {\n\t\t\t$$invalidate(138, textShapeOrigin = shouldRenderTextInput\n\t\t\t? getTextShapeOriginSnapshot()\n\t\t\t: undefined);\n\t\t}\n\n\t\tif ($$self.$$.dirty[2] & /*parentRect*/ 2 | $$self.$$.dirty[4] & /*textShapeOrigin*/ 16384) {\n\t\t\t$$invalidate(140, textShapeDisplayOrigin = textShapeOrigin && shapeComputeDisplay({ ...textShapeOrigin }, parentRect));\n\t\t}\n\n\t\tif ($$self.$$.dirty[4] & /*textShapeDisplayOrigin*/ 65536) {\n\t\t\t$$invalidate(142, textSizeDisplayOrigin = textShapeDisplayOrigin && textToSize(textShapeDisplayOrigin.text, textShapeDisplayOrigin));\n\t\t}\n\n\t\tif ($$self.$$.dirty[4] & /*textShapeDisplayOrigin, textSizeDisplayOrigin*/ 327680) {\n\t\t\ttextRectDisplayOrigin = textShapeDisplayOrigin && rectCreate(textShapeDisplayOrigin.x, textShapeDisplayOrigin.y, textSizeDisplayOrigin.width, textSizeDisplayOrigin.height);\n\t\t}\n\n\t\tif ($$self.$$.dirty[0] & /*shouldRenderTextInput*/ 2048 | $$self.$$.dirty[4] & /*activeMarkup*/ 2) {\n\t\t\t$$invalidate(23, textInputText = shouldRenderTextInput ? activeMarkup.text : '');\n\t\t}\n\n\t\tif ($$self.$$.dirty[0] & /*rootRect, shouldRenderTextInput*/ 2056 | $$self.$$.dirty[2] & /*parentRect*/ 2 | $$self.$$.dirty[4] & /*activeMarkup*/ 2) {\n\t\t\t$$invalidate(141, activeTextShapeComputed = rootRect && activeMarkup && shouldRenderTextInput && shapeComputeDisplay(\n\t\t\t\t{\n\t\t\t\t\t...shapeDeepCopy(activeMarkup),\n\t\t\t\t\t// this is the same as how canvas floors shape width/height\n\t\t\t\t\twidth: isNumber(activeMarkup.width)\n\t\t\t\t\t? Math.floor(activeMarkup.width)\n\t\t\t\t\t: undefined,\n\t\t\t\t\theight: isNumber(activeMarkup.height)\n\t\t\t\t\t? Math.floor(activeMarkup.height)\n\t\t\t\t\t: undefined\n\t\t\t\t},\n\t\t\t\tparentRect\n\t\t\t));\n\t\t}\n\n\t\tif ($$self.$$.dirty[0] & /*shouldRenderTextInput, textInputMode*/ 2064 | $$self.$$.dirty[4] & /*activeTextShapeComputed*/ 131072) {\n\t\t\t$$invalidate(25, textInputTextStyles = shouldRenderTextInput && getTextInputTextStyles(activeTextShapeComputed, textInputMode));\n\t\t}\n\n\t\tif ($$self.$$.dirty[0] & /*shouldRenderTextInput, offset*/ 2052 | $$self.$$.dirty[1] & /*contextZoom, contextRotation*/ 603979776 | $$self.$$.dirty[4] & /*activeTextShapeComputed*/ 131072) {\n\t\t\t$$invalidate(24, textInputPositionStyles = shouldRenderTextInput && getTextInputPositionStyles(activeTextShapeComputed, offset, contextZoom, contextRotation));\n\t\t}\n\n\t\tif ($$self.$$.dirty[0] & /*shouldRenderTextInput, textInput, textInputMode*/ 2320) {\n\t\t\tif (shouldRenderTextInput && textInput && textInputMode === 'inline') syncTextInput();\n\t\t}\n\n\t\tif ($$self.$$.dirty[3] & /*activeMarkupItemIsDraft*/ 1073741824 | $$self.$$.dirty[4] & /*activeMarkup, controlledMarkupItem*/ 34) {\n\t\t\t$$invalidate(129, controlledMarkupItem = activeMarkup && !activeMarkupItemIsDraft\n\t\t\t? activeMarkup\n\t\t\t: controlledMarkupItem);\n\t\t}\n\n\t\tif ($$self.$$.dirty[4] & /*controlledMarkupItem*/ 32) {\n\t\t\t$$invalidate(131, allowShapeFlip = controlledMarkupItem && shapeCanFlip(controlledMarkupItem));\n\t\t}\n\n\t\tif ($$self.$$.dirty[4] & /*controlledMarkupItem*/ 32) {\n\t\t\t$$invalidate(126, allowShapeChangeTextLayout = controlledMarkupItem && shapeCanChangeTextLayout(controlledMarkupItem));\n\t\t}\n\n\t\tif ($$self.$$.dirty[4] & /*controlledMarkupItem*/ 32) {\n\t\t\t$$invalidate(128, allowShapeDuplicate = controlledMarkupItem && shapeCanDuplicate(controlledMarkupItem));\n\t\t}\n\n\t\tif ($$self.$$.dirty[4] & /*controlledMarkupItem*/ 32) {\n\t\t\t$$invalidate(127, allowShapeRemove = controlledMarkupItem && shapeCanRemove(controlledMarkupItem));\n\t\t}\n\n\t\tif ($$self.$$.dirty[4] & /*controlledMarkupItem*/ 32) {\n\t\t\t$$invalidate(130, allowShapeReorder = controlledMarkupItem && shapeCanReorder(controlledMarkupItem));\n\t\t}\n\n\t\tif ($$self.$$.dirty[4] & /*controlledMarkupItem*/ 32) {\n\t\t\t$$invalidate(124, allowShapeInput = controlledMarkupItem && shapeCanInput(controlledMarkupItem) !== false);\n\t\t}\n\n\t\tif ($$self.$$.dirty[4] & /*controlledMarkupItem*/ 32) {\n\t\t\t$$invalidate(132, allowShapeAdjustOpacity = controlledMarkupItem && hasProp(controlledMarkupItem, 'backgroundImage') && shapeCanStyle(controlledMarkupItem, 'opacity'));\n\t\t}\n\n\t\tif ($$self.$$.dirty[4] & /*activeMarkup*/ 2) {\n\t\t\t$$invalidate(134, allowShapeStyleText = activeMarkup && activeMarkup.format === 'html');\n\t\t}\n\n\t\tif ($$self.$$.dirty[3] & /*activeMarkupItemIsDraft*/ 1073741824 | $$self.$$.dirty[4] & /*activeMarkup, allowShapeStyleText*/ 1026) {\n\t\t\t$$invalidate(137, shouldShowMarkupControls = activeMarkup && (!activeMarkupItemIsDraft || allowShapeStyleText));\n\t\t}\n\n\t\tif ($$self.$$.dirty[3] & /*isInteracting*/ 134217728 | $$self.$$.dirty[4] & /*shouldShowMarkupControls, $isAnimated*/ 67117056) {\n\t\t\t// show controls if markup is active, but not in draft mode, except for when editing text\n\t\t\tmarkupControlsOpacity.set(shouldShowMarkupControls && !isInteracting ? 1 : 0, { hard: $isAnimated === false });\n\t\t}\n\n\t\tif ($$self.$$.dirty[0] & /*shapeManipulatorPoints*/ 4096 | $$self.$$.dirty[4] & /*shouldShowMarkupControls, markupControlsAnchorPosition*/ 12288) {\n\t\t\t$$invalidate(136, markupControlsAnchorPosition = shouldShowMarkupControls && shapeManipulatorPoints.length\n\t\t\t? getMarkupControlsAnchorPosition(rectCreateFromPoints(shapeManipulatorPoints))\n\t\t\t: markupControlsAnchorPosition);\n\t\t}\n\n\t\tif ($$self.$$.dirty[0] & /*shapeControlsSize*/ 512 | $$self.$$.dirty[2] & /*utilRect*/ 4 | $$self.$$.dirty[4] & /*markupControlsAnchorPosition*/ 4096) {\n\t\t\t$$invalidate(135, shapeControlsPosition = markupControlsAnchorPosition && shapeControlsSize && utilRect && getShapeControlPositionOnCanvas(markupControlsAnchorPosition));\n\t\t}\n\n\t\tif ($$self.$$.dirty[0] & /*$markupControlsOpacity*/ 131072 | $$self.$$.dirty[4] & /*shapeControlsPosition*/ 2048) {\n\t\t\t$$invalidate(22, markupControlsStyle = shapeControlsPosition && `transform: translate(${shapeControlsPosition.x}px, ${shapeControlsPosition.y}px);opacity:${$markupControlsOpacity}`);\n\t\t}\n\n\t\tif ($$self.$$.dirty[0] & /*shouldRenderTextInput*/ 2048) {\n\t\t\t$$invalidate(133, shapeControlsMode = shouldRenderTextInput ? 'text' : 'shape');\n\t\t}\n\n\t\tif ($$self.$$.dirty[0] & /*activeShapeId, locale, markup*/ 1089 | $$self.$$.dirty[2] & /*willRenderShapeTextControls, willRenderShapeControls, enableButtonFlipVertical*/ 274726912 | $$self.$$.dirty[4] & /*shapeControlsMode, allowShapeStyleText, allowShapeAdjustOpacity, activeMarkup, allowShapeFlip, allowShapeReorder, controlledMarkupItem, allowShapeDuplicate, allowShapeRemove, allowShapeInput, allowShapeChangeTextLayout*/ 2047) {\n\t\t\t$$invalidate(21, shapeControls = // render text controls\n\t\t\tshapeControlsMode === 'text' && willRenderShapeTextControls && allowShapeStyleText\n\t\t\t? runSafe(() => willRenderShapeTextControls(\n\t\t\t\t\t[\n\t\t\t\t\t\t[\n\t\t\t\t\t\t\t'div',\n\t\t\t\t\t\t\t'text-styles',\n\t\t\t\t\t\t\t{ class: 'PinturaShapeControlsGroup' },\n\t\t\t\t\t\t\t[\n\t\t\t\t\t\t\t\t...[\n\t\t\t\t\t\t\t\t\t[\n\t\t\t\t\t\t\t\t\t\t'bold',\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\tlabel: 'B',\n\t\t\t\t\t\t\t\t\t\t\tstyle: 'font-weight:900;',\n\t\t\t\t\t\t\t\t\t\t\ttitle: 'Bold',\n\t\t\t\t\t\t\t\t\t\t\tshortcut: ['CMD', 'B']\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t\t\t[\n\t\t\t\t\t\t\t\t\t\t'italic',\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\tlabel: 'I',\n\t\t\t\t\t\t\t\t\t\t\tstyle: 'font-family:Times New Roman;font-style:italic;',\n\t\t\t\t\t\t\t\t\t\t\ttitle: 'Italic',\n\t\t\t\t\t\t\t\t\t\t\tshortcut: ['CMD', 'I']\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t\t\t[\n\t\t\t\t\t\t\t\t\t\t'underline',\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\tlabel: 'U',\n\t\t\t\t\t\t\t\t\t\t\tstyle: 'text-decoration:underline;',\n\t\t\t\t\t\t\t\t\t\t\ttitle: 'Underline',\n\t\t\t\t\t\t\t\t\t\t\tshortcut: ['CMD', 'U']\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t\t\t[\n\t\t\t\t\t\t\t\t\t\t'strikeThrough',\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\tlabel: 'S',\n\t\t\t\t\t\t\t\t\t\t\tstyle: 'text-decoration:line-through;',\n\t\t\t\t\t\t\t\t\t\t\ttitle: 'Strikethrough',\n\t\t\t\t\t\t\t\t\t\t\tshortcut: ['CMD', 'S']\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t]\n\t\t\t\t\t\t\t\t].map(([style, props]) => {\n\t\t\t\t\t\t\t\t\treturn [\n\t\t\t\t\t\t\t\t\t\t'Button',\n\t\t\t\t\t\t\t\t\t\t'style-' + style,\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\tonclick: () => document.execCommand(style),\n\t\t\t\t\t\t\t\t\t\t\t...props,\n\t\t\t\t\t\t\t\t\t\t\tstyle: 'font-size:1.25em;text-underline-offset:1px;text-decoration-thickness:1.5px;font-weight:400;' + props.style\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t];\n\t\t\t\t\t\t\t\t})\n\t\t\t\t\t\t\t]\n\t\t\t\t\t\t],\n\t\t\t\t\t\t[\n\t\t\t\t\t\t\t'div',\n\t\t\t\t\t\t\t'text-reset',\n\t\t\t\t\t\t\t{ class: 'PinturaShapeControlsGroup' },\n\t\t\t\t\t\t\t[\n\t\t\t\t\t\t\t\t[\n\t\t\t\t\t\t\t\t\t'Button',\n\t\t\t\t\t\t\t\t\t'style-reset',\n\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\tonclick: () => document.execCommand('removeFormat'),\n\t\t\t\t\t\t\t\t\t\tstyle: 'font-weight:400;',\n\t\t\t\t\t\t\t\t\t\tlabel: 'T×',\n\t\t\t\t\t\t\t\t\t\ttitle: 'Remove styles'\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t]\n\t\t\t\t\t\t\t]\n\t\t\t\t\t\t]\n\t\t\t\t\t],\n\t\t\t\t\tactiveShapeId\n\t\t\t\t))\n\t\t\t: // render shape controls\n\t\t\t\tshapeControlsMode === 'shape' && willRenderShapeControls && activeShapeId\n\t\t\t\t? runSafe(() => willRenderShapeControls(\n\t\t\t\t\t\t[\n\t\t\t\t\t\t\tallowShapeAdjustOpacity && [\n\t\t\t\t\t\t\t\t'div',\n\t\t\t\t\t\t\t\t'alpha',\n\t\t\t\t\t\t\t\t{ class: 'PinturaShapeControlsGroup' },\n\t\t\t\t\t\t\t\t[\n\t\t\t\t\t\t\t\t\t[\n\t\t\t\t\t\t\t\t\t\t'Slider',\n\t\t\t\t\t\t\t\t\t\t'adjust-opacity',\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\tonrelease: handleConfirmOpacity,\n\t\t\t\t\t\t\t\t\t\t\tonchange: handleAdjustOpacity,\n\t\t\t\t\t\t\t\t\t\t\tstep: 0.01,\n\t\t\t\t\t\t\t\t\t\t\tvalue: hasProp(activeMarkup, 'opacity')\n\t\t\t\t\t\t\t\t\t\t\t? activeMarkup.opacity\n\t\t\t\t\t\t\t\t\t\t\t: 1,\n\t\t\t\t\t\t\t\t\t\t\tlabel: (value, min, max) => `${Math.round(value / max * 100)}%`,\n\t\t\t\t\t\t\t\t\t\t\tmin: 0,\n\t\t\t\t\t\t\t\t\t\t\tmax: 1,\n\t\t\t\t\t\t\t\t\t\t\tdirection: 'x'\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t]\n\t\t\t\t\t\t\t\t]\n\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t[\n\t\t\t\t\t\t\t\t'div',\n\t\t\t\t\t\t\t\t'beta',\n\t\t\t\t\t\t\t\t{ class: 'PinturaShapeControlsGroup' },\n\t\t\t\t\t\t\t\t[\n\t\t\t\t\t\t\t\t\tallowShapeFlip && [\n\t\t\t\t\t\t\t\t\t\t'Button',\n\t\t\t\t\t\t\t\t\t\t'flip-horizontal',\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\tonclick: handleFlipX,\n\t\t\t\t\t\t\t\t\t\t\tlabel: locale.shapeTitleButtonFlipHorizontal,\n\t\t\t\t\t\t\t\t\t\t\ticon: locale.shapeIconButtonFlipHorizontal,\n\t\t\t\t\t\t\t\t\t\t\thideLabel: true\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t\t\tallowShapeFlip && enableButtonFlipVertical && [\n\t\t\t\t\t\t\t\t\t\t'Button',\n\t\t\t\t\t\t\t\t\t\t'flip-vertical',\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\tonclick: handleFlipY,\n\t\t\t\t\t\t\t\t\t\t\tlabel: locale.shapeTitleButtonFlipVertical,\n\t\t\t\t\t\t\t\t\t\t\ticon: locale.shapeIconButtonFlipVertical,\n\t\t\t\t\t\t\t\t\t\t\thideLabel: true\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t\t\tallowShapeReorder && [\n\t\t\t\t\t\t\t\t\t\t'Button',\n\t\t\t\t\t\t\t\t\t\t'to-front',\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\tonclick: handleMoveToFrontActiveMarkup,\n\t\t\t\t\t\t\t\t\t\t\tlabel: locale.shapeTitleButtonMoveToFront,\n\t\t\t\t\t\t\t\t\t\t\ticon: locale.shapeIconButtonMoveToFront,\n\t\t\t\t\t\t\t\t\t\t\thideLabel: true,\n\t\t\t\t\t\t\t\t\t\t\tdisabled: markup[markup.length - 1] === controlledMarkupItem\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t\t\tallowShapeDuplicate && [\n\t\t\t\t\t\t\t\t\t\t'Button',\n\t\t\t\t\t\t\t\t\t\t'duplicate',\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\tonclick: handleDuplicateActiveMarkup,\n\t\t\t\t\t\t\t\t\t\t\tlabel: locale.shapeTitleButtonDuplicate,\n\t\t\t\t\t\t\t\t\t\t\ticon: locale.shapeIconButtonDuplicate,\n\t\t\t\t\t\t\t\t\t\t\tshortcut: ['CMD', 'D'],\n\t\t\t\t\t\t\t\t\t\t\thideLabel: true\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t\t\tallowShapeRemove && [\n\t\t\t\t\t\t\t\t\t\t'Button',\n\t\t\t\t\t\t\t\t\t\t'remove',\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\tonclick: handleRemoveActiveMarkup,\n\t\t\t\t\t\t\t\t\t\t\tlabel: locale.shapeTitleButtonRemove,\n\t\t\t\t\t\t\t\t\t\t\ticon: locale.shapeIconButtonRemove,\n\t\t\t\t\t\t\t\t\t\t\tshortcut: ['Backspace'],\n\t\t\t\t\t\t\t\t\t\t\thideLabel: true\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t]\n\t\t\t\t\t\t\t\t].filter(Boolean)\n\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\tallowShapeInput && allowShapeChangeTextLayout && [\n\t\t\t\t\t\t\t\t'div',\n\t\t\t\t\t\t\t\t'gamma',\n\t\t\t\t\t\t\t\t{ class: 'PinturaShapeControlsGroup' },\n\t\t\t\t\t\t\t\t[\n\t\t\t\t\t\t\t\t\t[\n\t\t\t\t\t\t\t\t\t\t'Button',\n\t\t\t\t\t\t\t\t\t\t'text-layout',\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\tonclick: handleTextSwitchLayout,\n\t\t\t\t\t\t\t\t\t\t\tlabel: localize(TextLayoutChangeLabel, locale, activeMarkup),\n\t\t\t\t\t\t\t\t\t\t\ticon: localize(TextLayoutChangeIcon, locale, activeMarkup),\n\t\t\t\t\t\t\t\t\t\t\thideLabel: true\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t]\n\t\t\t\t\t\t\t\t]\n\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\tallowShapeInput && [\n\t\t\t\t\t\t\t\t'div',\n\t\t\t\t\t\t\t\t'delta',\n\t\t\t\t\t\t\t\t{ class: 'PinturaShapeControlsGroup' },\n\t\t\t\t\t\t\t\t[\n\t\t\t\t\t\t\t\t\t[\n\t\t\t\t\t\t\t\t\t\t'Button',\n\t\t\t\t\t\t\t\t\t\t'edit-text',\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\tlabel: locale.shapeLabelInputText,\n\t\t\t\t\t\t\t\t\t\t\tonclick: handleEditTextActiveMarkup\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t]\n\t\t\t\t\t\t\t\t]\n\t\t\t\t\t\t\t]\n\t\t\t\t\t\t].filter(Boolean),\n\t\t\t\t\t\tactiveShapeId\n\t\t\t\t\t))\n\t\t\t\t: // fallback to empty array\n\t\t\t\t\t[]);\n\t\t}\n\n\t\tif ($$self.$$.dirty[0] & /*markup, locale*/ 65) {\n\t\t\t$$invalidate(20, shapeNavList = markup.filter(shapeCanSelect).filter(shape => !shapeIsDraft(shape)).map(shape => ({\n\t\t\t\tid: shape.id,\n\t\t\t\tcolor: shapeIsText(shape)\n\t\t\t\t? shape.color\n\t\t\t\t: shapeIsLine(shape)\n\t\t\t\t\t? shape.strokeColor\n\t\t\t\t\t: shape.backgroundColor,\n\t\t\t\tname: shape.name || locale[`shapeLabelTool${capitalizeFirstLetter(shapeGetDescription(shape))}`]\n\t\t\t})));\n\t\t}\n\t};\n\n\treturn [\n\t\tmarkup,\n\t\tdisabled,\n\t\toffset,\n\t\trootRect,\n\t\ttextInputMode,\n\t\tenableTextStyleControls,\n\t\tlocale,\n\t\tselectShape,\n\t\ttextInput,\n\t\tshapeControlsSize,\n\t\tactiveShapeId,\n\t\tshouldRenderTextInput,\n\t\tshapeManipulatorPoints,\n\t\tactiveMarkupComputed,\n\t\tallowRotateControls,\n\t\tshouldRenderShapeManipulator,\n\t\tallowEdgeControls,\n\t\t$markupControlsOpacity,\n\t\tshowShapeList,\n\t\telement,\n\t\tshapeNavList,\n\t\tshapeControls,\n\t\tmarkupControlsStyle,\n\t\ttextInputText,\n\t\ttextInputPositionStyles,\n\t\ttextInputTextStyles,\n\t\tshapeManipulatorRotationPointPosition,\n\t\tshapeAllowNewline,\n\t\tallowCornerControls,\n\t\tisAnimated,\n\t\tkeysPressedStored,\n\t\thandleInteractionStart,\n\t\thandleInteractionCancel,\n\t\thandleInteractionUpdate,\n\t\thandleInteractionRelease,\n\t\thandleInteractionEnd,\n\t\thandleManipulatorResizeGrab,\n\t\thandleManipulatorResizeDrag,\n\t\thandleManipulatorResizeEnd,\n\t\thandleManipulatorRotateGrab,\n\t\thandleManipulatorRotateDrag,\n\t\thandleManipulatorRotateEnd,\n\t\thandleKey,\n\t\tformatContentEditable,\n\t\thandleTextInput,\n\t\thandleTextInputAttempt,\n\t\thandleTextInputKeyDown,\n\t\thandleTextInputKeyUp,\n\t\thandleTextConfirm,\n\t\thandleTextCancel,\n\t\tmarkupControlsOpacity,\n\t\thandleNudge,\n\t\thandleFocusIn,\n\t\thandleFocusOut,\n\t\thandlePointerMove,\n\t\tui,\n\t\tuid,\n\t\tcontextRotation,\n\t\tcontextFlipX,\n\t\tcontextFlipY,\n\t\tcontextZoom,\n\t\tactive,\n\t\topacity,\n\t\tparentRect,\n\t\tutilRect,\n\t\thoverColor,\n\t\toninteractionstart,\n\t\toninteractionupdate,\n\t\toninteractionrelease,\n\t\toninteractionend,\n\t\toninteractioncancel,\n\t\tonaddshape,\n\t\tonupdateshape,\n\t\tonselectshape,\n\t\tonremoveshape,\n\t\tontapshape,\n\t\tonhovershape,\n\t\tonhovercanvas,\n\t\tontapcanvas,\n\t\tbeforeSelectShape,\n\t\tbeforeDeselectShape,\n\t\tbeforeRemoveShape,\n\t\tbeforeUpdateShape,\n\t\twillRenderShapeControls,\n\t\twillRenderShapeTextControls,\n\t\twillStartInteraction,\n\t\tmapEditorPointToImagePoint,\n\t\tmapImagePointToEditorPoint,\n\t\teraseRadius,\n\t\tselectRadius,\n\t\tenableButtonFlipVertical,\n\t\tenableTapToAddText,\n\t\tcreateShape,\n\t\teraseShape,\n\t\tgetMarkupItemDraft,\n\t\tgetMarkupItemDraftIndex,\n\t\taddMarkupItemDraft,\n\t\tconfirmMarkupItemDraft,\n\t\tdiscardMarkupItemDraft,\n\t\tcreateMarkupItem,\n\t\tsyncShapes,\n\t\taddShape,\n\t\tremoveMarkupShapeProps,\n\t\tupdateMarkupShape,\n\t\tupdateMarkupShapeProperty,\n\t\tupdateMarkupItemsShapeProperty,\n\t\tupdateMarkupShapeItems,\n\t\tgetActiveMarkupItem,\n\t\thasActiveMarkupItem,\n\t\tremoveShape,\n\t\tremoveActiveMarkupItem,\n\t\tblurShapes,\n\t\tdeselectMarkupItem,\n\t\teditMarkupItem,\n\t\tfinishEditMarkupItem,\n\t\tremoveMarkupItems,\n\t\tgetTextShapeRect,\n\t\tgetMarkupShapeRect,\n\t\tgetShapesNearPosition,\n\t\tgetShapesBetweenPoints,\n\t\tisInteracting,\n\t\thoverShape,\n\t\tpointerPositionInEditor,\n\t\tactiveMarkupItemIsDraft,\n\t\tallowShapeInput,\n\t\tactiveMarkup,\n\t\tallowShapeChangeTextLayout,\n\t\tallowShapeRemove,\n\t\tallowShapeDuplicate,\n\t\tcontrolledMarkupItem,\n\t\tallowShapeReorder,\n\t\tallowShapeFlip,\n\t\tallowShapeAdjustOpacity,\n\t\tshapeControlsMode,\n\t\tallowShapeStyleText,\n\t\tshapeControlsPosition,\n\t\tmarkupControlsAnchorPosition,\n\t\tshouldShowMarkupControls,\n\t\ttextShapeOrigin,\n\t\tactiveShapeIsDraft,\n\t\ttextShapeDisplayOrigin,\n\t\tactiveTextShapeComputed,\n\t\ttextSizeDisplayOrigin,\n\t\tisTextMarkupSelected,\n\t\tcurrentPointerPosition,\n\t\tshapeActiveScreenPoints,\n\t\tshapeManipulatorRotationPoint,\n\t\tshapeActivePoints,\n\t\tactiveMarkupSelected,\n\t\tallowResizeControls,\n\t\t$isAnimated,\n\t\tmeasure_handler,\n\t\tclick_handler,\n\t\ttextarea_binding,\n\t\ttextarea_input_handler,\n\t\tcontenteditable_binding,\n\t\tfocusout_handler,\n\t\tmeasure_handler_1,\n\t\tdiv_binding,\n\t\tinteractable_function_1\n\t];\n}\n\nclass ShapeLayoutEditor extends SvelteComponent {\n\tconstructor(options) {\n\t\tsuper();\n\n\t\tinit(\n\t\t\tthis,\n\t\t\toptions,\n\t\t\tinstance$g,\n\t\t\tcreate_fragment$g,\n\t\t\tsafe_not_equal,\n\t\t\t{\n\t\t\t\tuid: 56,\n\t\t\t\tui: 55,\n\t\t\t\tdisabled: 1,\n\t\t\t\tmarkup: 0,\n\t\t\t\toffset: 2,\n\t\t\t\tcontextRotation: 57,\n\t\t\t\tcontextFlipX: 58,\n\t\t\t\tcontextFlipY: 59,\n\t\t\t\tcontextZoom: 60,\n\t\t\t\tactive: 61,\n\t\t\t\topacity: 62,\n\t\t\t\tparentRect: 63,\n\t\t\t\trootRect: 3,\n\t\t\t\tutilRect: 64,\n\t\t\t\thoverColor: 65,\n\t\t\t\ttextInputMode: 4,\n\t\t\t\toninteractionstart: 66,\n\t\t\t\toninteractionupdate: 67,\n\t\t\t\toninteractionrelease: 68,\n\t\t\t\toninteractionend: 69,\n\t\t\t\toninteractioncancel: 70,\n\t\t\t\tonaddshape: 71,\n\t\t\t\tonupdateshape: 72,\n\t\t\t\tonselectshape: 73,\n\t\t\t\tonremoveshape: 74,\n\t\t\t\tontapshape: 75,\n\t\t\t\tonhovershape: 76,\n\t\t\t\tonhovercanvas: 77,\n\t\t\t\tontapcanvas: 78,\n\t\t\t\tbeforeSelectShape: 79,\n\t\t\t\tbeforeDeselectShape: 80,\n\t\t\t\tbeforeRemoveShape: 81,\n\t\t\t\tbeforeUpdateShape: 82,\n\t\t\t\twillRenderShapeControls: 83,\n\t\t\t\twillRenderShapeTextControls: 84,\n\t\t\t\twillStartInteraction: 85,\n\t\t\t\tmapEditorPointToImagePoint: 86,\n\t\t\t\tmapImagePointToEditorPoint: 87,\n\t\t\t\teraseRadius: 88,\n\t\t\t\tselectRadius: 89,\n\t\t\t\tenableButtonFlipVertical: 90,\n\t\t\t\tenableTapToAddText: 91,\n\t\t\t\tenableTextStyleControls: 5,\n\t\t\t\tlocale: 6,\n\t\t\t\tcreateShape: 92,\n\t\t\t\teraseShape: 93,\n\t\t\t\tgetMarkupItemDraft: 94,\n\t\t\t\tgetMarkupItemDraftIndex: 95,\n\t\t\t\taddMarkupItemDraft: 96,\n\t\t\t\tconfirmMarkupItemDraft: 97,\n\t\t\t\tdiscardMarkupItemDraft: 98,\n\t\t\t\tcreateMarkupItem: 99,\n\t\t\t\tsyncShapes: 100,\n\t\t\t\taddShape: 101,\n\t\t\t\tremoveMarkupShapeProps: 102,\n\t\t\t\tupdateMarkupShape: 103,\n\t\t\t\tupdateMarkupShapeProperty: 104,\n\t\t\t\tupdateMarkupItemsShapeProperty: 105,\n\t\t\t\tupdateMarkupShapeItems: 106,\n\t\t\t\tgetActiveMarkupItem: 107,\n\t\t\t\thasActiveMarkupItem: 108,\n\t\t\t\tremoveShape: 109,\n\t\t\t\tremoveActiveMarkupItem: 110,\n\t\t\t\tblurShapes: 111,\n\t\t\t\tselectShape: 7,\n\t\t\t\tdeselectMarkupItem: 112,\n\t\t\t\teditMarkupItem: 113,\n\t\t\t\tfinishEditMarkupItem: 114,\n\t\t\t\tremoveMarkupItems: 115,\n\t\t\t\tgetTextShapeRect: 116,\n\t\t\t\tgetMarkupShapeRect: 117,\n\t\t\t\tgetShapesNearPosition: 118,\n\t\t\t\tgetShapesBetweenPoints: 119\n\t\t\t},\n\t\t\tnull,\n\t\t\t[-1, -1, -1, -1, -1, -1, -1, -1]\n\t\t);\n\t}\n\n\tget createShape() {\n\t\treturn this.$$.ctx[92];\n\t}\n\n\tget eraseShape() {\n\t\treturn this.$$.ctx[93];\n\t}\n\n\tget getMarkupItemDraft() {\n\t\treturn this.$$.ctx[94];\n\t}\n\n\tget getMarkupItemDraftIndex() {\n\t\treturn this.$$.ctx[95];\n\t}\n\n\tget addMarkupItemDraft() {\n\t\treturn this.$$.ctx[96];\n\t}\n\n\tget confirmMarkupItemDraft() {\n\t\treturn this.$$.ctx[97];\n\t}\n\n\tget discardMarkupItemDraft() {\n\t\treturn this.$$.ctx[98];\n\t}\n\n\tget createMarkupItem() {\n\t\treturn this.$$.ctx[99];\n\t}\n\n\tget syncShapes() {\n\t\treturn this.$$.ctx[100];\n\t}\n\n\tget addShape() {\n\t\treturn this.$$.ctx[101];\n\t}\n\n\tget removeMarkupShapeProps() {\n\t\treturn this.$$.ctx[102];\n\t}\n\n\tget updateMarkupShape() {\n\t\treturn this.$$.ctx[103];\n\t}\n\n\tget updateMarkupShapeProperty() {\n\t\treturn this.$$.ctx[104];\n\t}\n\n\tget updateMarkupItemsShapeProperty() {\n\t\treturn this.$$.ctx[105];\n\t}\n\n\tget updateMarkupShapeItems() {\n\t\treturn this.$$.ctx[106];\n\t}\n\n\tget getActiveMarkupItem() {\n\t\treturn this.$$.ctx[107];\n\t}\n\n\tget hasActiveMarkupItem() {\n\t\treturn this.$$.ctx[108];\n\t}\n\n\tget removeShape() {\n\t\treturn this.$$.ctx[109];\n\t}\n\n\tget removeActiveMarkupItem() {\n\t\treturn this.$$.ctx[110];\n\t}\n\n\tget blurShapes() {\n\t\treturn this.$$.ctx[111];\n\t}\n\n\tget selectShape() {\n\t\treturn this.$$.ctx[7];\n\t}\n\n\tget deselectMarkupItem() {\n\t\treturn this.$$.ctx[112];\n\t}\n\n\tget editMarkupItem() {\n\t\treturn this.$$.ctx[113];\n\t}\n\n\tget finishEditMarkupItem() {\n\t\treturn this.$$.ctx[114];\n\t}\n\n\tget removeMarkupItems() {\n\t\treturn this.$$.ctx[115];\n\t}\n\n\tget getTextShapeRect() {\n\t\treturn this.$$.ctx[116];\n\t}\n\n\tget getMarkupShapeRect() {\n\t\treturn this.$$.ctx[117];\n\t}\n\n\tget getShapesNearPosition() {\n\t\treturn this.$$.ctx[118];\n\t}\n\n\tget getShapesBetweenPoints() {\n\t\treturn this.$$.ctx[119];\n\t}\n}\n\n/* src/core/ui/components/ShapeStyleControls.svelte generated by Svelte v3.52.0 */\n\nfunction get_each_context$2(ctx, list, i) {\n\tconst child_ctx = ctx.slice();\n\tchild_ctx[9] = list[i];\n\treturn child_ctx;\n}\n\n// (25:12) {#each controls as control (control.id)}\nfunction create_each_block$2(key_1, ctx) {\n\tlet li;\n\tlet span;\n\tlet t0_value = localize(/*control*/ ctx[9].componentProps.title, /*locale*/ ctx[1]) + \"\";\n\tlet t0;\n\tlet t1;\n\tlet switch_instance;\n\tlet t2;\n\tlet current;\n\tconst switch_instance_spread_levels = [/*control*/ ctx[9].componentProps];\n\tvar switch_value = /*control*/ ctx[9].component;\n\n\tfunction switch_props(ctx) {\n\t\tlet switch_instance_props = {};\n\n\t\tfor (let i = 0; i < switch_instance_spread_levels.length; i += 1) {\n\t\t\tswitch_instance_props = assign(switch_instance_props, switch_instance_spread_levels[i]);\n\t\t}\n\n\t\treturn { props: switch_instance_props };\n\t}\n\n\tif (switch_value) {\n\t\tswitch_instance = construct_svelte_component(switch_value, switch_props());\n\t}\n\n\treturn {\n\t\tkey: key_1,\n\t\tfirst: null,\n\t\tc() {\n\t\t\tli = element(\"li\");\n\t\t\tspan = element(\"span\");\n\t\t\tt0 = text(t0_value);\n\t\t\tt1 = space();\n\t\t\tif (switch_instance) create_component(switch_instance.$$.fragment);\n\t\t\tt2 = space();\n\t\t\tattr(span, \"class\", \"PinturaShapeStyleLabel\");\n\t\t\tattr(li, \"class\", \"PinturaShapeStyle\");\n\t\t\tthis.first = li;\n\t\t},\n\t\tm(target, anchor) {\n\t\t\tinsert(target, li, anchor);\n\t\t\tappend(li, span);\n\t\t\tappend(span, t0);\n\t\t\tappend(li, t1);\n\t\t\tif (switch_instance) mount_component(switch_instance, li, null);\n\t\t\tappend(li, t2);\n\t\t\tcurrent = true;\n\t\t},\n\t\tp(new_ctx, dirty) {\n\t\t\tctx = new_ctx;\n\t\t\tif ((!current || dirty & /*controls, locale*/ 3) && t0_value !== (t0_value = localize(/*control*/ ctx[9].componentProps.title, /*locale*/ ctx[1]) + \"\")) set_data(t0, t0_value);\n\n\t\t\tconst switch_instance_changes = (dirty & /*controls*/ 1)\n\t\t\t? get_spread_update(switch_instance_spread_levels, [get_spread_object(/*control*/ ctx[9].componentProps)])\n\t\t\t: {};\n\n\t\t\tif (switch_value !== (switch_value = /*control*/ ctx[9].component)) {\n\t\t\t\tif (switch_instance) {\n\t\t\t\t\tgroup_outros();\n\t\t\t\t\tconst old_component = switch_instance;\n\n\t\t\t\t\ttransition_out(old_component.$$.fragment, 1, 0, () => {\n\t\t\t\t\t\tdestroy_component(old_component, 1);\n\t\t\t\t\t});\n\n\t\t\t\t\tcheck_outros();\n\t\t\t\t}\n\n\t\t\t\tif (switch_value) {\n\t\t\t\t\tswitch_instance = construct_svelte_component(switch_value, switch_props());\n\t\t\t\t\tcreate_component(switch_instance.$$.fragment);\n\t\t\t\t\ttransition_in(switch_instance.$$.fragment, 1);\n\t\t\t\t\tmount_component(switch_instance, li, t2);\n\t\t\t\t} else {\n\t\t\t\t\tswitch_instance = null;\n\t\t\t\t}\n\t\t\t} else if (switch_value) {\n\t\t\t\tswitch_instance.$set(switch_instance_changes);\n\t\t\t}\n\t\t},\n\t\ti(local) {\n\t\t\tif (current) return;\n\t\t\tif (switch_instance) transition_in(switch_instance.$$.fragment, local);\n\t\t\tcurrent = true;\n\t\t},\n\t\to(local) {\n\t\t\tif (switch_instance) transition_out(switch_instance.$$.fragment, local);\n\t\t\tcurrent = false;\n\t\t},\n\t\td(detaching) {\n\t\t\tif (detaching) detach(li);\n\t\t\tif (switch_instance) destroy_component(switch_instance);\n\t\t}\n\t};\n}\n\n// (23:4) \nfunction create_default_slot$6(ctx) {\n\tlet ul;\n\tlet each_blocks = [];\n\tlet each_1_lookup = new Map();\n\tlet current;\n\tlet each_value = /*controls*/ ctx[0];\n\tconst get_key = ctx => /*control*/ ctx[9].id;\n\n\tfor (let i = 0; i < each_value.length; i += 1) {\n\t\tlet child_ctx = get_each_context$2(ctx, each_value, i);\n\t\tlet key = get_key(child_ctx);\n\t\teach_1_lookup.set(key, each_blocks[i] = create_each_block$2(key, child_ctx));\n\t}\n\n\treturn {\n\t\tc() {\n\t\t\tul = element(\"ul\");\n\n\t\t\tfor (let i = 0; i < each_blocks.length; i += 1) {\n\t\t\t\teach_blocks[i].c();\n\t\t\t}\n\n\t\t\tattr(ul, \"class\", \"PinturaShapeStyleList\");\n\t\t},\n\t\tm(target, anchor) {\n\t\t\tinsert(target, ul, anchor);\n\n\t\t\tfor (let i = 0; i < each_blocks.length; i += 1) {\n\t\t\t\teach_blocks[i].m(ul, null);\n\t\t\t}\n\n\t\t\tcurrent = true;\n\t\t},\n\t\tp(ctx, dirty) {\n\t\t\tif (dirty & /*controls, localize, locale*/ 3) {\n\t\t\t\teach_value = /*controls*/ ctx[0];\n\t\t\t\tgroup_outros();\n\t\t\t\teach_blocks = update_keyed_each(each_blocks, dirty, get_key, 1, ctx, each_value, each_1_lookup, ul, outro_and_destroy_block, create_each_block$2, null, get_each_context$2);\n\t\t\t\tcheck_outros();\n\t\t\t}\n\t\t},\n\t\ti(local) {\n\t\t\tif (current) return;\n\n\t\t\tfor (let i = 0; i < each_value.length; i += 1) {\n\t\t\t\ttransition_in(each_blocks[i]);\n\t\t\t}\n\n\t\t\tcurrent = true;\n\t\t},\n\t\to(local) {\n\t\t\tfor (let i = 0; i < each_blocks.length; i += 1) {\n\t\t\t\ttransition_out(each_blocks[i]);\n\t\t\t}\n\n\t\t\tcurrent = false;\n\t\t},\n\t\td(detaching) {\n\t\t\tif (detaching) detach(ul);\n\n\t\t\tfor (let i = 0; i < each_blocks.length; i += 1) {\n\t\t\t\teach_blocks[i].d();\n\t\t\t}\n\t\t}\n\t};\n}\n\nfunction create_fragment$f(ctx) {\n\tlet div;\n\tlet scrollable;\n\tlet current;\n\n\tscrollable = new Scrollable({\n\t\t\tprops: {\n\t\t\t\tclass: \"PinturaShapeStyles\",\n\t\t\t\telasticity: /*scrollElasticity*/ ctx[2],\n\t\t\t\t$$slots: { default: [create_default_slot$6] },\n\t\t\t\t$$scope: { ctx }\n\t\t\t}\n\t\t});\n\n\treturn {\n\t\tc() {\n\t\t\tdiv = element(\"div\");\n\t\t\tcreate_component(scrollable.$$.fragment);\n\t\t\tattr(div, \"style\", /*style*/ ctx[3]);\n\t\t},\n\t\tm(target, anchor) {\n\t\t\tinsert(target, div, anchor);\n\t\t\tmount_component(scrollable, div, null);\n\t\t\tcurrent = true;\n\t\t},\n\t\tp(ctx, [dirty]) {\n\t\t\tconst scrollable_changes = {};\n\t\t\tif (dirty & /*scrollElasticity*/ 4) scrollable_changes.elasticity = /*scrollElasticity*/ ctx[2];\n\n\t\t\tif (dirty & /*$$scope, controls, locale*/ 4099) {\n\t\t\t\tscrollable_changes.$$scope = { dirty, ctx };\n\t\t\t}\n\n\t\t\tscrollable.$set(scrollable_changes);\n\n\t\t\tif (!current || dirty & /*style*/ 8) {\n\t\t\t\tattr(div, \"style\", /*style*/ ctx[3]);\n\t\t\t}\n\t\t},\n\t\ti(local) {\n\t\t\tif (current) return;\n\t\t\ttransition_in(scrollable.$$.fragment, local);\n\t\t\tcurrent = true;\n\t\t},\n\t\to(local) {\n\t\t\ttransition_out(scrollable.$$.fragment, local);\n\t\t\tcurrent = false;\n\t\t},\n\t\td(detaching) {\n\t\t\tif (detaching) detach(div);\n\t\t\tdestroy_component(scrollable);\n\t\t}\n\t};\n}\n\nfunction instance$f($$self, $$props, $$invalidate) {\n\tlet style;\n\tlet $opacity;\n\tlet $isAnimated;\n\tlet { isActive = false } = $$props;\n\tlet { controls = [] } = $$props;\n\tlet { locale } = $$props;\n\tlet { scrollElasticity } = $$props;\n\n\t// context\n\tconst isAnimated = getContext('isAnimated');\n\n\tcomponent_subscribe($$self, isAnimated, value => $$invalidate(8, $isAnimated = value));\n\tconst opacity = spring(0, { stiffness: 0.25, damping: 0.9 });\n\tcomponent_subscribe($$self, opacity, value => $$invalidate(7, $opacity = value));\n\n\t$$self.$$set = $$props => {\n\t\tif ('isActive' in $$props) $$invalidate(6, isActive = $$props.isActive);\n\t\tif ('controls' in $$props) $$invalidate(0, controls = $$props.controls);\n\t\tif ('locale' in $$props) $$invalidate(1, locale = $$props.locale);\n\t\tif ('scrollElasticity' in $$props) $$invalidate(2, scrollElasticity = $$props.scrollElasticity);\n\t};\n\n\t$$self.$$.update = () => {\n\t\tif ($$self.$$.dirty & /*isActive, $isAnimated*/ 320) {\n\t\t\topacity.set(isActive ? 1 : 0, { hard: $isAnimated === false });\n\t\t}\n\n\t\tif ($$self.$$.dirty & /*$opacity, isActive*/ 192) {\n\t\t\t$$invalidate(3, style = `opacity:${$opacity};${!isActive ? 'pointer-events:none;' : ''}${$opacity <= 0 ? 'visibility:hidden' : ''}`);\n\t\t}\n\t};\n\n\treturn [\n\t\tcontrols,\n\t\tlocale,\n\t\tscrollElasticity,\n\t\tstyle,\n\t\tisAnimated,\n\t\topacity,\n\t\tisActive,\n\t\t$opacity,\n\t\t$isAnimated\n\t];\n}\n\nclass ShapeStyleControls extends SvelteComponent {\n\tconstructor(options) {\n\t\tsuper();\n\n\t\tinit(this, options, instance$f, create_fragment$f, safe_not_equal, {\n\t\t\tisActive: 6,\n\t\t\tcontrols: 0,\n\t\t\tlocale: 1,\n\t\t\tscrollElasticity: 2\n\t\t});\n\t}\n}\n\n/* src/core/ui/components/ShapeStyleEditor.svelte generated by Svelte v3.52.0 */\n\nfunction get_each_context$1(ctx, list, i) {\n\tconst child_ctx = ctx.slice();\n\tchild_ctx[12] = list[i].key;\n\tchild_ctx[3] = list[i].controls;\n\tchild_ctx[13] = list[i].isActive;\n\treturn child_ctx;\n}\n\n// (143:4) {#each currentStyleControlSets as { key, controls, isActive }\nfunction create_each_block$1(key_1, ctx) {\n\tlet first;\n\tlet shapestylecontrols;\n\tlet current;\n\n\tshapestylecontrols = new ShapeStyleControls({\n\t\t\tprops: {\n\t\t\t\tisActive: /*isActive*/ ctx[13],\n\t\t\t\tcontrols: /*controls*/ ctx[3],\n\t\t\t\tlocale: /*locale*/ ctx[1],\n\t\t\t\tscrollElasticity: /*scrollElasticity*/ ctx[2]\n\t\t\t}\n\t\t});\n\n\treturn {\n\t\tkey: key_1,\n\t\tfirst: null,\n\t\tc() {\n\t\t\tfirst = empty();\n\t\t\tcreate_component(shapestylecontrols.$$.fragment);\n\t\t\tthis.first = first;\n\t\t},\n\t\tm(target, anchor) {\n\t\t\tinsert(target, first, anchor);\n\t\t\tmount_component(shapestylecontrols, target, anchor);\n\t\t\tcurrent = true;\n\t\t},\n\t\tp(new_ctx, dirty) {\n\t\t\tctx = new_ctx;\n\t\t\tconst shapestylecontrols_changes = {};\n\t\t\tif (dirty & /*currentStyleControlSets*/ 16) shapestylecontrols_changes.isActive = /*isActive*/ ctx[13];\n\t\t\tif (dirty & /*currentStyleControlSets*/ 16) shapestylecontrols_changes.controls = /*controls*/ ctx[3];\n\t\t\tif (dirty & /*locale*/ 2) shapestylecontrols_changes.locale = /*locale*/ ctx[1];\n\t\t\tif (dirty & /*scrollElasticity*/ 4) shapestylecontrols_changes.scrollElasticity = /*scrollElasticity*/ ctx[2];\n\t\t\tshapestylecontrols.$set(shapestylecontrols_changes);\n\t\t},\n\t\ti(local) {\n\t\t\tif (current) return;\n\t\t\ttransition_in(shapestylecontrols.$$.fragment, local);\n\t\t\tcurrent = true;\n\t\t},\n\t\to(local) {\n\t\t\ttransition_out(shapestylecontrols.$$.fragment, local);\n\t\t\tcurrent = false;\n\t\t},\n\t\td(detaching) {\n\t\t\tif (detaching) detach(first);\n\t\t\tdestroy_component(shapestylecontrols, detaching);\n\t\t}\n\t};\n}\n\nfunction create_fragment$e(ctx) {\n\tlet div;\n\tlet each_blocks = [];\n\tlet each_1_lookup = new Map();\n\tlet div_class_value;\n\tlet current;\n\tlet each_value = /*currentStyleControlSets*/ ctx[4];\n\tconst get_key = ctx => /*key*/ ctx[12];\n\n\tfor (let i = 0; i < each_value.length; i += 1) {\n\t\tlet child_ctx = get_each_context$1(ctx, each_value, i);\n\t\tlet key = get_key(child_ctx);\n\t\teach_1_lookup.set(key, each_blocks[i] = create_each_block$1(key, child_ctx));\n\t}\n\n\treturn {\n\t\tc() {\n\t\t\tdiv = element(\"div\");\n\n\t\t\tfor (let i = 0; i < each_blocks.length; i += 1) {\n\t\t\t\teach_blocks[i].c();\n\t\t\t}\n\n\t\t\tattr(div, \"class\", div_class_value = arrayJoin(['PinturaShapeStyleEditor', /*klass*/ ctx[0]]));\n\t\t},\n\t\tm(target, anchor) {\n\t\t\tinsert(target, div, anchor);\n\n\t\t\tfor (let i = 0; i < each_blocks.length; i += 1) {\n\t\t\t\teach_blocks[i].m(div, null);\n\t\t\t}\n\n\t\t\tcurrent = true;\n\t\t},\n\t\tp(ctx, [dirty]) {\n\t\t\tif (dirty & /*currentStyleControlSets, locale, scrollElasticity*/ 22) {\n\t\t\t\teach_value = /*currentStyleControlSets*/ ctx[4];\n\t\t\t\tgroup_outros();\n\t\t\t\teach_blocks = update_keyed_each(each_blocks, dirty, get_key, 1, ctx, each_value, each_1_lookup, div, outro_and_destroy_block, create_each_block$1, null, get_each_context$1);\n\t\t\t\tcheck_outros();\n\t\t\t}\n\n\t\t\tif (!current || dirty & /*klass*/ 1 && div_class_value !== (div_class_value = arrayJoin(['PinturaShapeStyleEditor', /*klass*/ ctx[0]]))) {\n\t\t\t\tattr(div, \"class\", div_class_value);\n\t\t\t}\n\t\t},\n\t\ti(local) {\n\t\t\tif (current) return;\n\n\t\t\tfor (let i = 0; i < each_value.length; i += 1) {\n\t\t\t\ttransition_in(each_blocks[i]);\n\t\t\t}\n\n\t\t\tcurrent = true;\n\t\t},\n\t\to(local) {\n\t\t\tfor (let i = 0; i < each_blocks.length; i += 1) {\n\t\t\t\ttransition_out(each_blocks[i]);\n\t\t\t}\n\n\t\t\tcurrent = false;\n\t\t},\n\t\td(detaching) {\n\t\t\tif (detaching) detach(div);\n\n\t\t\tfor (let i = 0; i < each_blocks.length; i += 1) {\n\t\t\t\teach_blocks[i].d();\n\t\t\t}\n\t\t}\n\t};\n}\n\nfunction instance$e($$self, $$props, $$invalidate) {\n\tlet controlKeys;\n\tlet activeControls;\n\tlet currentStyleControlSets;\n\tlet { class: klass = undefined } = $$props;\n\tlet { controls = {} } = $$props;\n\tlet { shape = undefined } = $$props;\n\tlet { onchange } = $$props;\n\tlet { locale } = $$props;\n\tlet { scrollElasticity } = $$props;\n\n\tconst getShapeControls = shape => {\n\t\tconst activeControls = controlKeys.filter(styleKey => styleKey.split('_').every(styleKey => // shape needs to have the property\n\t\thasProp(shape, styleKey) && // shape needs to be able to style the property\n\t\tshapeCanStyle(shape, styleKey))).map(styleKey => {\n\t\t\tconst styleKeys = styleKey.split('_');\n\n\t\t\tconst currentValue = styleKeys.length > 1\n\t\t\t? styleKeys.map(key => shape[key])\n\t\t\t: shape[styleKey];\n\n\t\t\tlet [component, componentProps] = controls[styleKey];\n\n\t\t\t// is reference to other control or string representation of component\n\t\t\tif (isString(component)) {\n\t\t\t\t// exif if not a valid default control\n\t\t\t\tif (controls[component]) {\n\t\t\t\t\t// create component based on reference\n\t\t\t\t\tconst componentCustomProps = { ...componentProps };\n\n\t\t\t\t\t[component, componentProps] = controls[component];\n\n\t\t\t\t\tcomponentProps = {\n\t\t\t\t\t\t...componentProps,\n\t\t\t\t\t\t...componentCustomProps\n\t\t\t\t\t};\n\t\t\t\t} else if (component === 'Dropdown') {\n\t\t\t\t\tcomponent = Dropdown;\n\t\t\t\t} else {\n\t\t\t\t\t// skip\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tconst options = isFunction(componentProps.options)\n\t\t\t? componentProps.options(shape)\n\t\t\t: componentProps.options;\n\n\t\t\treturn {\n\t\t\t\tid: styleKey,\n\t\t\t\tcomponent,\n\t\t\t\tcomponentProps: {\n\t\t\t\t\t...componentProps,\n\t\t\t\t\t// set the options prop\n\t\t\t\t\toptions,\n\t\t\t\t\t// defaults\n\t\t\t\t\tlocale,\n\t\t\t\t\tvalue: currentValue,\n\t\t\t\t\toptionLabelClass: 'PinturaButtonLabel',\n\t\t\t\t\tonchange: detail => {\n\t\t\t\t\t\tconst value = isObject(detail) && !isArray(detail)\n\t\t\t\t\t\t? detail.value\n\t\t\t\t\t\t: detail;\n\n\t\t\t\t\t\t// allow custom changes\n\t\t\t\t\t\tif (componentProps.onchange) componentProps.onchange(value, shape);\n\n\t\t\t\t\t\t// internal change\n\t\t\t\t\t\tconst props = styleKeys.length > 1\n\t\t\t\t\t\t? styleKeys.reduce(\n\t\t\t\t\t\t\t\t(prev, key, index) => {\n\t\t\t\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\t\t\t\t...prev,\n\t\t\t\t\t\t\t\t\t\t[key]: Array.isArray(value) ? value[index] : value\n\t\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t{}\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t: { [styleKey]: value };\n\n\t\t\t\t\t\tonchange(props);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t};\n\t\t}).filter(Boolean);\n\n\t\treturn activeControls;\n\t};\n\n\tconst styleControlSets = [];\n\n\tconst getStyleControlSets = (key, controls) => {\n\t\tlet controlSet = styleControlSets.find(controlSet => controlSet.key === key);\n\n\t\tif (!controlSet) {\n\t\t\t// create\n\t\t\tcontrolSet = { key, controls };\n\n\t\t\t// add\n\t\t\tstyleControlSets.push(controlSet);\n\t\t}\n\n\t\t// hide all\n\t\tstyleControlSets.forEach(controlSet => controlSet.isActive = false);\n\n\t\t// update active controls\n\t\tcontrolSet.controls = controls;\n\n\t\t// show active\n\t\tcontrolSet.isActive = true;\n\n\t\treturn styleControlSets;\n\t};\n\n\t$$self.$$set = $$props => {\n\t\tif ('class' in $$props) $$invalidate(0, klass = $$props.class);\n\t\tif ('controls' in $$props) $$invalidate(3, controls = $$props.controls);\n\t\tif ('shape' in $$props) $$invalidate(5, shape = $$props.shape);\n\t\tif ('onchange' in $$props) $$invalidate(6, onchange = $$props.onchange);\n\t\tif ('locale' in $$props) $$invalidate(1, locale = $$props.locale);\n\t\tif ('scrollElasticity' in $$props) $$invalidate(2, scrollElasticity = $$props.scrollElasticity);\n\t};\n\n\t$$self.$$.update = () => {\n\t\tif ($$self.$$.dirty & /*controls*/ 8) {\n\t\t\t// finds the controls needed to style the selected shape\n\t\t\t$$invalidate(8, controlKeys = Object.keys(controls).filter(key => controls[key]));\n\t\t}\n\n\t\tif ($$self.$$.dirty & /*shape, controlKeys*/ 288) {\n\t\t\t$$invalidate(7, activeControls = shape && Object.keys(shape).length && controlKeys && shapeCanStyle(shape)\n\t\t\t? getShapeControls(shape)\n\t\t\t: []);\n\t\t}\n\n\t\tif ($$self.$$.dirty & /*shape, activeControls*/ 160) {\n\t\t\t$$invalidate(4, currentStyleControlSets = getStyleControlSets(\n\t\t\t\tshape && Object.keys(shape).length\n\t\t\t\t? Object.keys(shape).join('_')\n\t\t\t\t: 'none',\n\t\t\t\tactiveControls || []\n\t\t\t));\n\t\t}\n\t};\n\n\treturn [\n\t\tklass,\n\t\tlocale,\n\t\tscrollElasticity,\n\t\tcontrols,\n\t\tcurrentStyleControlSets,\n\t\tshape,\n\t\tonchange,\n\t\tactiveControls,\n\t\tcontrolKeys\n\t];\n}\n\nclass ShapeStyleEditor extends SvelteComponent {\n\tconstructor(options) {\n\t\tsuper();\n\n\t\tinit(this, options, instance$e, create_fragment$e, safe_not_equal, {\n\t\t\tclass: 0,\n\t\t\tcontrols: 3,\n\t\t\tshape: 5,\n\t\t\tonchange: 6,\n\t\t\tlocale: 1,\n\t\t\tscrollElasticity: 2\n\t\t});\n\t}\n}\n\n/* src/core/ui/components/DragButton.svelte generated by Svelte v3.52.0 */\n\nconst { document: document_1$1 } = globals;\n\nfunction create_fragment$d(ctx) {\n\tlet t;\n\tlet button;\n\tlet mounted;\n\tlet dispose;\n\n\treturn {\n\t\tc() {\n\t\t\tt = space();\n\t\t\tbutton = element(\"button\");\n\t\t\tattr(button, \"class\", \"PinturaDragButton\");\n\t\t\tattr(button, \"type\", \"button\");\n\t\t\tattr(button, \"title\", /*title*/ ctx[1]);\n\t\t\tbutton.disabled = /*disabled*/ ctx[2];\n\t\t},\n\t\tm(target, anchor) {\n\t\t\tinsert(target, t, anchor);\n\t\t\tinsert(target, button, anchor);\n\t\t\tbutton.innerHTML = /*html*/ ctx[0];\n\t\t\t/*button_binding*/ ctx[11](button);\n\n\t\t\tif (!mounted) {\n\t\t\t\tdispose = [\n\t\t\t\t\tlisten(document_1$1.body, \"load\", /*handleLoad*/ ctx[5], true),\n\t\t\t\t\tlisten(document_1$1.body, \"error\", /*handleError*/ ctx[6], true),\n\t\t\t\t\tlisten(button, \"pointerdown\", /*handleDown*/ ctx[4])\n\t\t\t\t];\n\n\t\t\t\tmounted = true;\n\t\t\t}\n\t\t},\n\t\tp(ctx, [dirty]) {\n\t\t\tif (dirty & /*html*/ 1) button.innerHTML = /*html*/ ctx[0];\n\t\t\tif (dirty & /*title*/ 2) {\n\t\t\t\tattr(button, \"title\", /*title*/ ctx[1]);\n\t\t\t}\n\n\t\t\tif (dirty & /*disabled*/ 4) {\n\t\t\t\tbutton.disabled = /*disabled*/ ctx[2];\n\t\t\t}\n\t\t},\n\t\ti: noop,\n\t\to: noop,\n\t\td(detaching) {\n\t\t\tif (detaching) detach(t);\n\t\t\tif (detaching) detach(button);\n\t\t\t/*button_binding*/ ctx[11](null);\n\t\t\tmounted = false;\n\t\t\trun_all(dispose);\n\t\t}\n\t};\n}\n\nfunction instance$d($$self, $$props, $$invalidate) {\n\tlet { html } = $$props;\n\tlet { title } = $$props;\n\tlet { onclick } = $$props;\n\tlet { disabled = false } = $$props;\n\tlet { ongrab = noop$1 } = $$props;\n\tlet { ondrag = noop$1 } = $$props;\n\tlet { ondrop = noop$1 } = $$props;\n\tlet element;\n\tconst isOverButton = e => vectorDistanceSquared(downPosition, vectorCreate(e.pageX, e.pageY)) < 256;\n\tlet downPosition;\n\n\tconst handleDown = e => {\n\t\tdownPosition = vectorCreate(e.pageX, e.pageY);\n\t\tongrab(e);\n\t\tdocument.documentElement.addEventListener('pointermove', handleMove);\n\t\tdocument.documentElement.addEventListener('pointerup', handleUp);\n\t};\n\n\tconst handleUp = e => {\n\t\tdocument.documentElement.removeEventListener('pointermove', handleMove);\n\t\tdocument.documentElement.removeEventListener('pointerup', handleUp);\n\t\tconst upPosition = vectorCreate(e.pageX, e.pageY);\n\n\t\t// must have moved enough distance to drop\n\t\tif (vectorDistanceSquared(downPosition, upPosition) < 32) return onclick(e);\n\n\t\t// cant drop in button /\n\t\tif (isOverButton(e)) return;\n\n\t\t// was dragging\n\t\tondrop(e);\n\t};\n\n\tconst handleMove = e => {\n\t\t// must have moved enough distance from button\n\t\tif (isOverButton(e)) return;\n\n\t\t// dragging out of button\n\t\tondrag(e);\n\t};\n\n\t// image loading\n\tconst isImageTarget = target => element && element.contains(target) && target.nodeName === 'IMG';\n\n\tconst handleLoad = ({ target }) => {\n\t\tif (!isImageTarget(target)) return;\n\t\t$$invalidate(3, element.dataset.load = true, element);\n\t};\n\n\tconst handleError = ({ target }) => {\n\t\tif (!isImageTarget(target)) return;\n\t\t$$invalidate(3, element.dataset.error = true, element);\n\t};\n\n\tfunction button_binding($$value) {\n\t\tbinding_callbacks[$$value ? 'unshift' : 'push'](() => {\n\t\t\telement = $$value;\n\t\t\t$$invalidate(3, element);\n\t\t});\n\t}\n\n\t$$self.$$set = $$props => {\n\t\tif ('html' in $$props) $$invalidate(0, html = $$props.html);\n\t\tif ('title' in $$props) $$invalidate(1, title = $$props.title);\n\t\tif ('onclick' in $$props) $$invalidate(7, onclick = $$props.onclick);\n\t\tif ('disabled' in $$props) $$invalidate(2, disabled = $$props.disabled);\n\t\tif ('ongrab' in $$props) $$invalidate(8, ongrab = $$props.ongrab);\n\t\tif ('ondrag' in $$props) $$invalidate(9, ondrag = $$props.ondrag);\n\t\tif ('ondrop' in $$props) $$invalidate(10, ondrop = $$props.ondrop);\n\t};\n\n\t$$self.$$.update = () => {\n\t\tif ($$self.$$.dirty & /*element*/ 8) {\n\t\t\tif (element && element.querySelector('img')) $$invalidate(3, element.dataset.loader = true, element);\n\t\t}\n\t};\n\n\treturn [\n\t\thtml,\n\t\ttitle,\n\t\tdisabled,\n\t\telement,\n\t\thandleDown,\n\t\thandleLoad,\n\t\thandleError,\n\t\tonclick,\n\t\tongrab,\n\t\tondrag,\n\t\tondrop,\n\t\tbutton_binding\n\t];\n}\n\nclass DragButton extends SvelteComponent {\n\tconstructor(options) {\n\t\tsuper();\n\n\t\tinit(this, options, instance$d, create_fragment$d, safe_not_equal, {\n\t\t\thtml: 0,\n\t\t\ttitle: 1,\n\t\t\tonclick: 7,\n\t\t\tdisabled: 2,\n\t\t\tongrab: 8,\n\t\t\tondrag: 9,\n\t\t\tondrop: 10\n\t\t});\n\t}\n}\n\n/* src/core/ui/components/ShapePresetsList.svelte generated by Svelte v3.52.0 */\n\nfunction get_each_context(ctx, list, i) {\n\tconst child_ctx = ctx.slice();\n\tchild_ctx[14] = list[i];\n\treturn child_ctx;\n}\n\n// (25:4) {#each presets as preset (preset.id)}\nfunction create_each_block(key_1, ctx) {\n\tlet li;\n\tlet dragbutton;\n\tlet t;\n\tlet didMountPresetThumb_action;\n\tlet current;\n\tlet mounted;\n\tlet dispose;\n\n\tfunction func() {\n\t\treturn /*func*/ ctx[10](/*preset*/ ctx[14]);\n\t}\n\n\tfunction func_1(...args) {\n\t\treturn /*func_1*/ ctx[11](/*preset*/ ctx[14], ...args);\n\t}\n\n\tfunction func_2(...args) {\n\t\treturn /*func_2*/ ctx[12](/*preset*/ ctx[14], ...args);\n\t}\n\n\tfunction func_3(...args) {\n\t\treturn /*func_3*/ ctx[13](/*preset*/ ctx[14], ...args);\n\t}\n\n\tdragbutton = new DragButton({\n\t\t\tprops: {\n\t\t\t\tonclick: func,\n\t\t\t\tongrab: func_1,\n\t\t\t\tondrag: func_2,\n\t\t\t\tondrop: func_3,\n\t\t\t\tdisabled: /*disabled*/ ctx[1] || /*preset*/ ctx[14].disabled,\n\t\t\t\ttitle: /*preset*/ ctx[14].title,\n\t\t\t\thtml: /*preset*/ ctx[14].thumb\n\t\t\t}\n\t\t});\n\n\treturn {\n\t\tkey: key_1,\n\t\tfirst: null,\n\t\tc() {\n\t\t\tli = element(\"li\");\n\t\t\tcreate_component(dragbutton.$$.fragment);\n\t\t\tt = space();\n\t\t\tattr(li, \"class\", \"PinturaShapePreset\");\n\t\t\tattr(li, \"style\", /*style*/ ctx[6]);\n\t\t\tthis.first = li;\n\t\t},\n\t\tm(target, anchor) {\n\t\t\tinsert(target, li, anchor);\n\t\t\tmount_component(dragbutton, li, null);\n\t\t\tappend(li, t);\n\t\t\tcurrent = true;\n\n\t\t\tif (!mounted) {\n\t\t\t\tdispose = action_destroyer(didMountPresetThumb_action = /*didMountPresetThumb*/ ctx[8].call(null, li, /*preset*/ ctx[14]));\n\t\t\t\tmounted = true;\n\t\t\t}\n\t\t},\n\t\tp(new_ctx, dirty) {\n\t\t\tctx = new_ctx;\n\t\t\tconst dragbutton_changes = {};\n\t\t\tif (dirty & /*onclickpreset, presets*/ 5) dragbutton_changes.onclick = func;\n\t\t\tif (dirty & /*ongrabpreset, presets*/ 9) dragbutton_changes.ongrab = func_1;\n\t\t\tif (dirty & /*ondragpreset, presets*/ 17) dragbutton_changes.ondrag = func_2;\n\t\t\tif (dirty & /*ondroppreset, presets*/ 33) dragbutton_changes.ondrop = func_3;\n\t\t\tif (dirty & /*disabled, presets*/ 3) dragbutton_changes.disabled = /*disabled*/ ctx[1] || /*preset*/ ctx[14].disabled;\n\t\t\tif (dirty & /*presets*/ 1) dragbutton_changes.title = /*preset*/ ctx[14].title;\n\t\t\tif (dirty & /*presets*/ 1) dragbutton_changes.html = /*preset*/ ctx[14].thumb;\n\t\t\tdragbutton.$set(dragbutton_changes);\n\n\t\t\tif (!current || dirty & /*style*/ 64) {\n\t\t\t\tattr(li, \"style\", /*style*/ ctx[6]);\n\t\t\t}\n\n\t\t\tif (didMountPresetThumb_action && is_function(didMountPresetThumb_action.update) && dirty & /*presets*/ 1) didMountPresetThumb_action.update.call(null, /*preset*/ ctx[14]);\n\t\t},\n\t\ti(local) {\n\t\t\tif (current) return;\n\t\t\ttransition_in(dragbutton.$$.fragment, local);\n\t\t\tcurrent = true;\n\t\t},\n\t\to(local) {\n\t\t\ttransition_out(dragbutton.$$.fragment, local);\n\t\t\tcurrent = false;\n\t\t},\n\t\td(detaching) {\n\t\t\tif (detaching) detach(li);\n\t\t\tdestroy_component(dragbutton);\n\t\t\tmounted = false;\n\t\t\tdispose();\n\t\t}\n\t};\n}\n\nfunction create_fragment$c(ctx) {\n\tlet ul;\n\tlet each_blocks = [];\n\tlet each_1_lookup = new Map();\n\tlet current;\n\tlet each_value = /*presets*/ ctx[0];\n\tconst get_key = ctx => /*preset*/ ctx[14].id;\n\n\tfor (let i = 0; i < each_value.length; i += 1) {\n\t\tlet child_ctx = get_each_context(ctx, each_value, i);\n\t\tlet key = get_key(child_ctx);\n\t\teach_1_lookup.set(key, each_blocks[i] = create_each_block(key, child_ctx));\n\t}\n\n\treturn {\n\t\tc() {\n\t\t\tul = element(\"ul\");\n\n\t\t\tfor (let i = 0; i < each_blocks.length; i += 1) {\n\t\t\t\teach_blocks[i].c();\n\t\t\t}\n\n\t\t\tattr(ul, \"class\", \"PinturaShapePresetsList\");\n\t\t},\n\t\tm(target, anchor) {\n\t\t\tinsert(target, ul, anchor);\n\n\t\t\tfor (let i = 0; i < each_blocks.length; i += 1) {\n\t\t\t\teach_blocks[i].m(ul, null);\n\t\t\t}\n\n\t\t\tcurrent = true;\n\t\t},\n\t\tp(ctx, [dirty]) {\n\t\t\tif (dirty & /*style, presets, onclickpreset, ongrabpreset, ondragpreset, ondroppreset, disabled*/ 127) {\n\t\t\t\teach_value = /*presets*/ ctx[0];\n\t\t\t\tgroup_outros();\n\t\t\t\teach_blocks = update_keyed_each(each_blocks, dirty, get_key, 1, ctx, each_value, each_1_lookup, ul, outro_and_destroy_block, create_each_block, null, get_each_context);\n\t\t\t\tcheck_outros();\n\t\t\t}\n\t\t},\n\t\ti(local) {\n\t\t\tif (current) return;\n\n\t\t\tfor (let i = 0; i < each_value.length; i += 1) {\n\t\t\t\ttransition_in(each_blocks[i]);\n\t\t\t}\n\n\t\t\tcurrent = true;\n\t\t},\n\t\to(local) {\n\t\t\tfor (let i = 0; i < each_blocks.length; i += 1) {\n\t\t\t\ttransition_out(each_blocks[i]);\n\t\t\t}\n\n\t\t\tcurrent = false;\n\t\t},\n\t\td(detaching) {\n\t\t\tif (detaching) detach(ul);\n\n\t\t\tfor (let i = 0; i < each_blocks.length; i += 1) {\n\t\t\t\teach_blocks[i].d();\n\t\t\t}\n\t\t}\n\t};\n}\n\nfunction instance$c($$self, $$props, $$invalidate) {\n\tlet style;\n\tlet $opacity;\n\tlet { presets } = $$props;\n\tlet { disabled = undefined } = $$props;\n\tlet { onclickpreset } = $$props;\n\tlet { ongrabpreset = undefined } = $$props;\n\tlet { ondragpreset = undefined } = $$props;\n\tlet { ondroppreset = undefined } = $$props;\n\tconst opacity = spring(0, { stiffness: 0.25, damping: 0.9 });\n\tcomponent_subscribe($$self, opacity, value => $$invalidate(9, $opacity = value));\n\tconst didMountPresetThumb = (element, item) => item.mount && item.mount(element.firstChild, item);\n\tonMount(() => opacity.set(1));\n\tconst func = preset => onclickpreset(preset.id);\n\tconst func_1 = (preset, e) => ongrabpreset && ongrabpreset(preset.id, e);\n\tconst func_2 = (preset, e) => ondragpreset && ondragpreset(preset.id, e);\n\tconst func_3 = (preset, e) => ondroppreset && ondroppreset(preset.id, e);\n\n\t$$self.$$set = $$props => {\n\t\tif ('presets' in $$props) $$invalidate(0, presets = $$props.presets);\n\t\tif ('disabled' in $$props) $$invalidate(1, disabled = $$props.disabled);\n\t\tif ('onclickpreset' in $$props) $$invalidate(2, onclickpreset = $$props.onclickpreset);\n\t\tif ('ongrabpreset' in $$props) $$invalidate(3, ongrabpreset = $$props.ongrabpreset);\n\t\tif ('ondragpreset' in $$props) $$invalidate(4, ondragpreset = $$props.ondragpreset);\n\t\tif ('ondroppreset' in $$props) $$invalidate(5, ondroppreset = $$props.ondroppreset);\n\t};\n\n\t$$self.$$.update = () => {\n\t\tif ($$self.$$.dirty & /*$opacity*/ 512) {\n\t\t\t$$invalidate(6, style = `opacity:${$opacity}`);\n\t\t}\n\t};\n\n\treturn [\n\t\tpresets,\n\t\tdisabled,\n\t\tonclickpreset,\n\t\tongrabpreset,\n\t\tondragpreset,\n\t\tondroppreset,\n\t\tstyle,\n\t\topacity,\n\t\tdidMountPresetThumb,\n\t\t$opacity,\n\t\tfunc,\n\t\tfunc_1,\n\t\tfunc_2,\n\t\tfunc_3\n\t];\n}\n\nclass ShapePresetsList extends SvelteComponent {\n\tconstructor(options) {\n\t\tsuper();\n\n\t\tinit(this, options, instance$c, create_fragment$c, safe_not_equal, {\n\t\t\tpresets: 0,\n\t\t\tdisabled: 1,\n\t\t\tonclickpreset: 2,\n\t\t\tongrabpreset: 3,\n\t\t\tondragpreset: 4,\n\t\t\tondroppreset: 5\n\t\t});\n\t}\n}\n\nvar isSVGMarkup = (str) => /