').append(btn.title);\n }\n } else if (btn.list) {\n // Add button to list\n button.addClass('push_button');\n $('#' + btn.list + '_opts').append(button);\n if (btn.isDefault) {\n $('#cur_' + btn.list).append(button.children().clone());\n const svgicon = btn.svgicon || btn.id;\n placementObj['#cur_' + btn.list] = svgicon;\n }\n } else if (btn.includeWith) {\n // Add to flyout menu / make flyout menu\n const opts = btn.includeWith;\n // opts.button, default, position\n refBtn = $(opts.button);\n\n flyoutHolder = refBtn.parent();\n // Create a flyout menu if there isn't one already\n let tlsId;\n if (!refBtn.parent().hasClass('tools_flyout')) {\n // Create flyout placeholder\n tlsId = refBtn[0].id.replace('tool_', 'tools_');\n showBtn = refBtn.clone()\n .attr('id', tlsId + '_show')\n .append($('
', {class: 'flyout_arrow_horiz'}));\n\n refBtn.before(showBtn);\n // Create a flyout div\n flyoutHolder = makeFlyoutHolder(tlsId, refBtn);\n }\n\n refData = Actions.getButtonData(opts.button);\n\n if (opts.isDefault) {\n placementObj['#' + tlsId + '_show'] = btn.id;\n }\n // TODO: Find way to set the current icon using the iconloader if this is not default\n\n // Include data for extension button as well as ref button\n const curH = holders['#' + flyoutHolder[0].id] = [{\n sel: '#' + id,\n fn: btn.events.click,\n icon: btn.id,\n key: btn.key,\n isDefault: Boolean(btn.includeWith && btn.includeWith.isDefault)\n }, refData];\n\n // {sel:'#tool_rect', fn: clickRect, evt: 'mouseup', key: 4, parent: '#tools_rect', icon: 'rect'}\n\n const pos = ('position' in opts) ? opts.position : 'last';\n const len = flyoutHolder.children().length;\n\n // Add at given position or end\n if (!isNaN(pos) && pos >= 0 && pos < len) {\n flyoutHolder.children().eq(pos).before(button);\n } else {\n flyoutHolder.append(button);\n curH.reverse();\n }\n }\n\n if (!svgicons) {\n button.append(icon);\n }\n\n if (!btn.list) {\n // Add given events to button\n $.each(btn.events, function (name, func) {\n if (name === 'click' && btn.type === 'mode') {\n // `touch.js` changes `touchstart` to `mousedown`,\n // so we must map extension click events as well\n if (isTouch() && name === 'click') {\n name = 'mousedown';\n }\n if (btn.includeWith) {\n button.bind(name, func);\n } else {\n button.bind(name, function () {\n if (toolButtonClick(button)) {\n func();\n }\n });\n }\n if (btn.key) {\n $(document).bind('keydown', btn.key, func);\n if (btn.title) {\n button.attr('title', btn.title + ' [' + btn.key + ']');\n }\n }\n } else {\n button.bind(name, func);\n }\n });\n }\n\n setupFlyouts(holders);\n });\n\n $.each(btnSelects, function () {\n addAltDropDown(this.elem, this.list, this.callback, {seticon: true});\n });\n\n if (svgicons) {\n return new Promise((resolve, reject) => { // eslint-disable-line promise/avoid-new\n $.svgIcons(svgicons, {\n w: 24, h: 24,\n id_match: false,\n no_img: (!isWebkit()),\n fallback: fallbackObj,\n placement: placementObj,\n callback (icons) {\n // Non-ideal hack to make the icon match the current size\n // if (curPrefs.iconsize && curPrefs.iconsize !== 'm') {\n if (editor.pref('iconsize') !== 'm') {\n prepResize();\n }\n runCallback();\n resolve();\n }\n });\n });\n }\n }\n return runCallback();\n };\n\n /**\n * @param {string} color\n * @param {Float} opac\n * @param {string} type\n * @returns {module:jGraduate~Paint}\n */\n const getPaint = function (color, opac, type) {\n // update the editor's fill paint\n const opts = {alpha: opac};\n if (color.startsWith('url(#')) {\n let refElem = svgCanvas.getRefElem(color);\n if (refElem) {\n refElem = refElem.cloneNode(true);\n } else {\n refElem = $('#' + type + '_color defs *')[0];\n }\n opts[refElem.tagName] = refElem;\n } else if (color.startsWith('#')) {\n opts.solidColor = color.substr(1);\n } else {\n opts.solidColor = 'none';\n }\n return new $.jGraduate.Paint(opts);\n };\n\n // $('#text').focus(function () { textBeingEntered = true; });\n // $('#text').blur(function () { textBeingEntered = false; });\n\n // bind the selected event to our function that handles updates to the UI\n svgCanvas.bind('selected', selectedChanged);\n svgCanvas.bind('transition', elementTransition);\n svgCanvas.bind('changed', elementChanged);\n svgCanvas.bind('saved', saveHandler);\n svgCanvas.bind('exported', exportHandler);\n svgCanvas.bind('exportedPDF', function (win, data) {\n if (!data.output) { // Ignore Chrome\n return;\n }\n const {exportWindowName} = data;\n if (exportWindowName) {\n exportWindow = window.open('', exportWindowName); // A hack to get the window via JSON-able name without opening a new one\n }\n if (!exportWindow || exportWindow.closed) {\n /* await */ $.alert(uiStrings.notification.popupWindowBlocked);\n return;\n }\n exportWindow.location.href = data.output;\n });\n svgCanvas.bind('zoomed', zoomChanged);\n svgCanvas.bind('zoomDone', zoomDone);\n svgCanvas.bind(\n 'updateCanvas',\n /**\n * @param {external:Window} win\n * @param {PlainObject} centerInfo\n * @param {false} centerInfo.center\n * @param {module:math.XYObject} centerInfo.newCtr\n * @listens module:svgcanvas.SvgCanvas#event:updateCanvas\n * @returns {void}\n */\n function (win, {center, newCtr}) {\n updateCanvas(center, newCtr);\n }\n );\n svgCanvas.bind('contextset', contextChanged);\n svgCanvas.bind('extension_added', extAdded);\n svgCanvas.textActions.setInputElem($('#text')[0]);\n\n let str = '
';\n $.each(palette, function (i, item) {\n str += '
';\n });\n $('#palette').append(str);\n\n // Set up editor background functionality\n // TODO add checkerboard as \"pattern\"\n const colorBlocks = ['#FFF', '#888', '#000']; // ,'url(data:image/gif;base64,R0lGODlhEAAQAIAAAP%2F%2F%2F9bW1iH5BAAAAAAALAAAAAAQABAAAAIfjG%2Bgq4jM3IFLJgpswNly%2FXkcBpIiVaInlLJr9FZWAQA7)'];\n str = '';\n $.each(colorBlocks, function () {\n str += '
';\n });\n $('#bg_blocks').append(str);\n const blocks = $('#bg_blocks div');\n const curBg = 'cur_background';\n blocks.each(function () {\n const blk = $(this);\n blk.click(function () {\n blocks.removeClass(curBg);\n $(this).addClass(curBg);\n });\n });\n\n setBackground(editor.pref('bkgd_color'), editor.pref('bkgd_url'));\n\n $('#image_save_opts input').val([editor.pref('img_save')]);\n\n /**\n * @type {module:jQuerySpinButton.ValueCallback}\n */\n const changeRectRadius = function (ctl) {\n svgCanvas.setRectRadius(ctl.value);\n };\n\n /**\n * @type {module:jQuerySpinButton.ValueCallback}\n */\n const changeFontSize = function (ctl) {\n svgCanvas.setFontSize(ctl.value);\n };\n\n /**\n * @type {module:jQuerySpinButton.ValueCallback}\n */\n const changeStrokeWidth = function (ctl) {\n let val = ctl.value;\n if (val === 0 && selectedElement && ['line', 'polyline'].includes(selectedElement.nodeName)) {\n val = ctl.value = 1;\n }\n svgCanvas.setStrokeWidth(val);\n };\n\n /**\n * @type {module:jQuerySpinButton.ValueCallback}\n */\n const changeRotationAngle = function (ctl) {\n svgCanvas.setRotationAngle(ctl.value);\n $('#tool_reorient').toggleClass('disabled', parseInt(ctl.value) === 0);\n };\n\n /**\n * @param {external:jQuery.fn.SpinButton} ctl Spin Button\n * @param {string} [val=ctl.value]\n * @returns {void}\n */\n const changeOpacity = function (ctl, val) {\n if (Utils.isNullish(val)) { val = ctl.value; }\n $('#group_opacity').val(val);\n if (!ctl || !ctl.handle) {\n $('#opac_slider').slider('option', 'value', val);\n }\n svgCanvas.setOpacity(val / 100);\n };\n\n /**\n * @param {external:jQuery.fn.SpinButton} ctl Spin Button\n * @param {string} [val=ctl.value]\n * @param {boolean} noUndo\n * @returns {void}\n */\n const changeBlur = function (ctl, val, noUndo) {\n if (Utils.isNullish(val)) { val = ctl.value; }\n $('#blur').val(val);\n let complete = false;\n if (!ctl || !ctl.handle) {\n $('#blur_slider').slider('option', 'value', val);\n complete = true;\n }\n if (noUndo) {\n svgCanvas.setBlurNoUndo(val);\n } else {\n svgCanvas.setBlur(val, complete);\n }\n };\n\n $('#stroke_style').change(function () {\n svgCanvas.setStrokeAttr('stroke-dasharray', $(this).val());\n operaRepaint();\n });\n\n $('#stroke_linejoin').change(function () {\n svgCanvas.setStrokeAttr('stroke-linejoin', $(this).val());\n operaRepaint();\n });\n\n // Lose focus for select elements when changed (Allows keyboard shortcuts to work better)\n $('select').change(function () { $(this).blur(); });\n\n // fired when user wants to move elements to another layer\n let promptMoveLayerOnce = false;\n $('#selLayerNames').change(async function () {\n const destLayer = this.options[this.selectedIndex].value;\n const confirmStr = uiStrings.notification.QmoveElemsToLayer.replace('%s', destLayer);\n /**\n * @param {boolean} ok\n * @returns {void}\n */\n const moveToLayer = function (ok) {\n if (!ok) { return; }\n promptMoveLayerOnce = true;\n svgCanvas.moveSelectedToLayer(destLayer);\n svgCanvas.clearSelection();\n populateLayers();\n };\n if (destLayer) {\n if (promptMoveLayerOnce) {\n moveToLayer(true);\n } else {\n const ok = await $.confirm(confirmStr);\n if (!ok) {\n return;\n }\n moveToLayer(true);\n }\n }\n });\n\n $('#font_family').change(function () {\n svgCanvas.setFontFamily(this.value);\n });\n\n $('#seg_type').change(function () {\n svgCanvas.setSegType($(this).val());\n });\n\n $('#text').bind('keyup input', function () {\n svgCanvas.setTextContent(this.value);\n });\n\n $('#image_url').change(function () {\n setImageURL(this.value);\n });\n\n $('#link_url').change(function () {\n if (this.value.length) {\n svgCanvas.setLinkURL(this.value);\n } else {\n svgCanvas.removeHyperlink();\n }\n });\n\n $('#g_title').change(function () {\n svgCanvas.setGroupTitle(this.value);\n });\n\n $('.attr_changer').change(function () {\n const attr = this.getAttribute('data-attr');\n let val = this.value;\n const valid = isValidUnit(attr, val, selectedElement);\n\n if (!valid) {\n this.value = selectedElement.getAttribute(attr);\n /* await */ $.alert(uiStrings.notification.invalidAttrValGiven);\n return false;\n }\n\n if (attr !== 'id' && attr !== 'class') {\n if (isNaN(val)) {\n val = svgCanvas.convertToNum(attr, val);\n } else if (curConfig.baseUnit !== 'px') {\n // Convert unitless value to one with given unit\n\n const unitData = getTypeMap();\n\n if (selectedElement[attr] || svgCanvas.getMode() === 'pathedit' || attr === 'x' || attr === 'y') {\n val *= unitData[curConfig.baseUnit];\n }\n }\n }\n\n // if the user is changing the id, then de-select the element first\n // change the ID, then re-select it with the new ID\n if (attr === 'id') {\n const elem = selectedElement;\n svgCanvas.clearSelection();\n elem.id = val;\n svgCanvas.addToSelection([elem], true);\n } else {\n svgCanvas.changeSelectedAttribute(attr, val);\n }\n this.blur();\n return true;\n });\n\n // Prevent selection of elements when shift-clicking\n $('#palette').mouseover(function () {\n const inp = $('
');\n $(this).append(inp);\n inp.focus().remove();\n });\n\n $('.palette_item').mousedown(function (evt) {\n // shift key or right click for stroke\n const picker = evt.shiftKey || evt.button === 2 ? 'stroke' : 'fill';\n let color = $(this).data('rgb');\n let paint;\n\n // Webkit-based browsers returned 'initial' here for no stroke\n if (color === 'none' || color === 'transparent' || color === 'initial') {\n color = 'none';\n paint = new $.jGraduate.Paint();\n } else {\n paint = new $.jGraduate.Paint({alpha: 100, solidColor: color.substr(1)});\n }\n\n paintBox[picker].setPaint(paint);\n svgCanvas.setColor(picker, color);\n\n if (color !== 'none' && svgCanvas.getPaintOpacity(picker) !== 1) {\n svgCanvas.setPaintOpacity(picker, 1.0);\n }\n updateToolButtonState();\n }).bind('contextmenu', function (e) { e.preventDefault(); });\n\n $('#toggle_stroke_tools').on('click', function () {\n $('#tools_bottom').toggleClass('expanded');\n });\n\n (function () {\n const wArea = workarea[0];\n\n let lastX = null, lastY = null,\n panning = false, keypan = false;\n\n $('#svgcanvas').bind('mousemove mouseup', function (evt) {\n if (panning === false) { return true; }\n\n wArea.scrollLeft -= (evt.clientX - lastX);\n wArea.scrollTop -= (evt.clientY - lastY);\n\n lastX = evt.clientX;\n lastY = evt.clientY;\n\n if (evt.type === 'mouseup') { panning = false; }\n return false;\n }).mousedown(function (evt) {\n if (evt.button === 1 || keypan === true) {\n panning = true;\n lastX = evt.clientX;\n lastY = evt.clientY;\n return false;\n }\n return true;\n });\n\n $(window).mouseup(function () {\n panning = false;\n });\n\n $(document).bind('keydown', 'space', function (evt) {\n svgCanvas.spaceKey = keypan = true;\n evt.preventDefault();\n }).bind('keyup', 'space', function (evt) {\n evt.preventDefault();\n svgCanvas.spaceKey = keypan = false;\n }).bind('keydown', 'shift', function (evt) {\n if (svgCanvas.getMode() === 'zoom') {\n workarea.css('cursor', zoomOutIcon);\n }\n }).bind('keyup', 'shift', function (evt) {\n if (svgCanvas.getMode() === 'zoom') {\n workarea.css('cursor', zoomInIcon);\n }\n });\n\n /**\n * @param {boolean} active\n * @returns {void}\n */\n editor.setPanning = function (active) {\n svgCanvas.spaceKey = keypan = active;\n };\n }());\n\n (function () {\n const button = $('#main_icon');\n const overlay = $('#main_icon span');\n const list = $('#main_menu');\n\n let onButton = false;\n let height = 0;\n let jsHover = true;\n let setClick = false;\n\n /*\n // Currently unused\n const hideMenu = function () {\n list.fadeOut(200);\n };\n */\n\n $(window).mouseup(function (evt) {\n if (!onButton) {\n button.removeClass('buttondown');\n // do not hide if it was the file input as that input needs to be visible\n // for its change event to fire\n if (evt.target.tagName !== 'INPUT') {\n list.fadeOut(200);\n } else if (!setClick) {\n setClick = true;\n $(evt.target).click(function () {\n list.css('margin-left', '-9999px').show();\n });\n }\n }\n onButton = false;\n }).mousedown(function (evt) {\n // $('.contextMenu').hide();\n const islib = $(evt.target).closest('div.tools_flyout, .contextMenu').length;\n if (!islib) {\n $('.tools_flyout:visible,.contextMenu').fadeOut(250);\n }\n });\n\n overlay.bind('mousedown', function () {\n if (!button.hasClass('buttondown')) {\n // Margin must be reset in case it was changed before;\n list.css('margin-left', 0).show();\n if (!height) {\n height = list.height();\n }\n // Using custom animation as slideDown has annoying 'bounce effect'\n list.css('height', 0).animate({\n height\n }, 200);\n onButton = true;\n } else {\n list.fadeOut(200);\n }\n button.toggleClass('buttondown buttonup');\n }).hover(function () {\n onButton = true;\n }).mouseout(function () {\n onButton = false;\n });\n\n const listItems = $('#main_menu li');\n\n // Check if JS method of hovering needs to be used (Webkit bug)\n listItems.mouseover(function () {\n jsHover = ($(this).css('background-color') === 'rgba(0, 0, 0, 0)');\n\n listItems.unbind('mouseover');\n if (jsHover) {\n listItems.mouseover(function () {\n this.style.backgroundColor = '#FFC';\n }).mouseout(function () {\n this.style.backgroundColor = 'transparent';\n return true;\n });\n }\n });\n }());\n // Made public for UI customization.\n // TODO: Group UI functions into a public editor.ui interface.\n /**\n * See {@link http://api.jquery.com/bind/#bind-eventType-eventData-handler}.\n * @callback module:SVGEditor.DropDownCallback\n * @param {external:jQuery.Event} ev See {@link http://api.jquery.com/Types/#Event}\n * @listens external:jQuery.Event\n * @returns {void|boolean} Calls `preventDefault()` and `stopPropagation()`\n */\n /**\n * @param {Element|string} elem DOM Element or selector\n * @param {module:SVGEditor.DropDownCallback} callback Mouseup callback\n * @param {boolean} dropUp\n * @returns {void}\n */\n editor.addDropDown = function (elem, callback, dropUp) {\n if (!$(elem).length) { return; } // Quit if called on non-existent element\n const button = $(elem).find('button');\n const list = $(elem).find('ul').attr('id', $(elem)[0].id + '-list');\n if (dropUp) {\n $(elem).addClass('dropup');\n } else {\n // Move list to place where it can overflow container\n $('#option_lists').append(list);\n }\n list.find('li').bind('mouseup', callback);\n\n let onButton = false;\n $(window).mouseup(function (evt) {\n if (!onButton) {\n button.removeClass('down');\n list.hide();\n }\n onButton = false;\n });\n\n button.bind('mousedown', function () {\n if (!button.hasClass('down')) {\n if (!dropUp) {\n const pos = $(elem).position();\n list.css({\n top: pos.top + 24,\n left: pos.left - 10\n });\n }\n list.show();\n onButton = true;\n } else {\n list.hide();\n }\n button.toggleClass('down');\n }).hover(function () {\n onButton = true;\n }).mouseout(function () {\n onButton = false;\n });\n };\n\n editor.addDropDown('#font_family_dropdown', function () {\n $('#font_family').val($(this).text()).change();\n });\n\n editor.addDropDown('#opacity_dropdown', function () {\n if ($(this).find('div').length) { return; }\n const perc = parseInt($(this).text().split('%')[0]);\n changeOpacity(false, perc);\n }, true);\n\n // For slider usage, see: http://jqueryui.com/demos/slider/\n $('#opac_slider').slider({\n start () {\n $('#opacity_dropdown li:not(.special)').hide();\n },\n stop () {\n $('#opacity_dropdown li').show();\n $(window).mouseup();\n },\n slide (evt, ui) {\n changeOpacity(ui);\n }\n });\n\n editor.addDropDown('#blur_dropdown', $.noop);\n\n let slideStart = false;\n $('#blur_slider').slider({\n max: 10,\n step: 0.1,\n stop (evt, ui) {\n slideStart = false;\n changeBlur(ui);\n $('#blur_dropdown li').show();\n $(window).mouseup();\n },\n start () {\n slideStart = true;\n },\n slide (evt, ui) {\n changeBlur(ui, null, slideStart);\n }\n });\n\n editor.addDropDown('#zoom_dropdown', function () {\n const item = $(this);\n const val = item.data('val');\n if (val) {\n zoomChanged(window, val);\n } else {\n changeZoom({value: parseFloat(item.text())});\n }\n }, true);\n\n addAltDropDown('#stroke_linecap', '#linecap_opts', function () {\n setStrokeOpt(this, true);\n }, {dropUp: true});\n\n addAltDropDown('#stroke_linejoin', '#linejoin_opts', function () {\n setStrokeOpt(this, true);\n }, {dropUp: true});\n\n addAltDropDown('#tool_position', '#position_opts', function () {\n const letter = this.id.replace('tool_pos', '').charAt(0);\n svgCanvas.alignSelectedElements(letter, 'page');\n }, {multiclick: true});\n\n /*\n\n When a flyout icon is selected\n (if flyout) {\n - Change the icon\n - Make pressing the button run its stuff\n }\n - Run its stuff\n\n When its shortcut key is pressed\n - If not current in list, do as above\n , else:\n - Just run its stuff\n\n */\n\n // Unfocus text input when workarea is mousedowned.\n (function () {\n let inp;\n /**\n *\n * @returns {void}\n */\n const unfocus = function () {\n $(inp).blur();\n };\n\n $('#svg_editor').find('button, select, input:not(#text)').focus(function () {\n inp = this; // eslint-disable-line consistent-this\n uiContext = 'toolbars';\n workarea.mousedown(unfocus);\n }).blur(function () {\n uiContext = 'canvas';\n workarea.unbind('mousedown', unfocus);\n // Go back to selecting text if in textedit mode\n if (svgCanvas.getMode() === 'textedit') {\n $('#text').focus();\n }\n });\n }());\n\n /**\n *\n * @returns {void}\n */\n const clickFHPath = function () {\n if (toolButtonClick('#tool_fhpath')) {\n svgCanvas.setMode('fhpath');\n }\n };\n\n /**\n *\n * @returns {void}\n */\n const clickLine = function () {\n if (toolButtonClick('#tool_line')) {\n svgCanvas.setMode('line');\n }\n };\n\n /**\n *\n * @returns {void}\n */\n const clickSquare = function () {\n if (toolButtonClick('#tool_square')) {\n svgCanvas.setMode('square');\n }\n };\n\n /**\n *\n * @returns {void}\n */\n const clickRect = function () {\n if (toolButtonClick('#tool_rect')) {\n svgCanvas.setMode('rect');\n }\n };\n\n /**\n *\n * @returns {void}\n */\n const clickFHRect = function () {\n if (toolButtonClick('#tool_fhrect')) {\n svgCanvas.setMode('fhrect');\n }\n };\n\n /**\n *\n * @returns {void}\n */\n const clickCircle = function () {\n if (toolButtonClick('#tool_circle')) {\n svgCanvas.setMode('circle');\n }\n };\n\n /**\n *\n * @returns {void}\n */\n const clickEllipse = function () {\n if (toolButtonClick('#tool_ellipse')) {\n svgCanvas.setMode('ellipse');\n }\n };\n\n /**\n *\n * @returns {void}\n */\n const clickFHEllipse = function () {\n if (toolButtonClick('#tool_fhellipse')) {\n svgCanvas.setMode('fhellipse');\n }\n };\n\n /**\n *\n * @returns {void}\n */\n const clickImage = function () {\n if (toolButtonClick('#tool_image')) {\n svgCanvas.setMode('image');\n }\n };\n\n /**\n *\n * @returns {void}\n */\n const clickZoom = function () {\n if (toolButtonClick('#tool_zoom')) {\n svgCanvas.setMode('zoom');\n workarea.css('cursor', zoomInIcon);\n }\n };\n\n /**\n * @param {Float} multiplier\n * @returns {void}\n */\n const zoomImage = function (multiplier) {\n const res = svgCanvas.getResolution();\n multiplier = multiplier ? res.zoom * multiplier : 1;\n // setResolution(res.w * multiplier, res.h * multiplier, true);\n $('#zoom').val(multiplier * 100);\n svgCanvas.setZoom(multiplier);\n zoomDone();\n updateCanvas(true);\n };\n\n /**\n *\n * @returns {void}\n */\n const dblclickZoom = function () {\n if (toolButtonClick('#tool_zoom')) {\n zoomImage();\n setSelectMode();\n }\n };\n\n /**\n *\n * @returns {void}\n */\n const clickText = function () {\n if (toolButtonClick('#tool_text')) {\n svgCanvas.setMode('text');\n }\n };\n\n /**\n *\n * @returns {void}\n */\n const clickPath = function () {\n if (toolButtonClick('#tool_path')) {\n svgCanvas.setMode('path');\n }\n };\n\n /**\n * Delete is a contextual tool that only appears in the ribbon if\n * an element has been selected.\n * @returns {void}\n */\n const deleteSelected = function () {\n if (!Utils.isNullish(selectedElement) || multiselected) {\n svgCanvas.deleteSelectedElements();\n }\n };\n\n /**\n *\n * @returns {void}\n */\n const cutSelected = function () {\n if (!Utils.isNullish(selectedElement) || multiselected) {\n svgCanvas.cutSelectedElements();\n }\n };\n\n /**\n *\n * @returns {void}\n */\n const copySelected = function () {\n if (!Utils.isNullish(selectedElement) || multiselected) {\n svgCanvas.copySelectedElements();\n }\n };\n\n /**\n *\n * @returns {void}\n */\n const pasteInCenter = function () {\n const zoom = svgCanvas.getZoom();\n const x = (workarea[0].scrollLeft + workarea.width() / 2) / zoom - svgCanvas.contentW;\n const y = (workarea[0].scrollTop + workarea.height() / 2) / zoom - svgCanvas.contentH;\n svgCanvas.pasteElements('point', x, y);\n };\n\n /**\n *\n * @returns {void}\n */\n const moveToTopSelected = function () {\n if (!Utils.isNullish(selectedElement)) {\n svgCanvas.moveToTopSelectedElement();\n }\n };\n\n /**\n *\n * @returns {void}\n */\n const moveToBottomSelected = function () {\n if (!Utils.isNullish(selectedElement)) {\n svgCanvas.moveToBottomSelectedElement();\n }\n };\n\n /**\n * @param {\"Up\"|\"Down\"} dir\n * @returns {void}\n */\n const moveUpDownSelected = function (dir) {\n if (!Utils.isNullish(selectedElement)) {\n svgCanvas.moveUpDownSelected(dir);\n }\n };\n\n /**\n *\n * @returns {void}\n */\n const convertToPath = function () {\n if (!Utils.isNullish(selectedElement)) {\n svgCanvas.convertToPath();\n }\n };\n\n /**\n *\n * @returns {void}\n */\n const reorientPath = function () {\n if (!Utils.isNullish(selectedElement)) {\n path.reorient();\n }\n };\n\n /**\n *\n * @returns {Promise
} Resolves to `undefined`\n */\n const makeHyperlink = async function () {\n if (!Utils.isNullish(selectedElement) || multiselected) {\n const url = await $.prompt(uiStrings.notification.enterNewLinkURL, 'http://');\n if (url) {\n svgCanvas.makeHyperlink(url);\n }\n }\n };\n\n /**\n * @param {Float} dx\n * @param {Float} dy\n * @returns {void}\n */\n const moveSelected = function (dx, dy) {\n if (!Utils.isNullish(selectedElement) || multiselected) {\n if (curConfig.gridSnapping) {\n // Use grid snap value regardless of zoom level\n const multi = svgCanvas.getZoom() * curConfig.snappingStep;\n dx *= multi;\n dy *= multi;\n }\n svgCanvas.moveSelectedElements(dx, dy);\n }\n };\n\n /**\n *\n * @returns {void}\n */\n const linkControlPoints = function () {\n $('#tool_node_link').toggleClass('push_button_pressed tool_button');\n const linked = $('#tool_node_link').hasClass('push_button_pressed');\n path.linkControlPoints(linked);\n };\n\n /**\n *\n * @returns {void}\n */\n const clonePathNode = function () {\n if (path.getNodePoint()) {\n path.clonePathNode();\n }\n };\n\n /**\n *\n * @returns {void}\n */\n const deletePathNode = function () {\n if (path.getNodePoint()) {\n path.deletePathNode();\n }\n };\n\n /**\n *\n * @returns {void}\n */\n const addSubPath = function () {\n const button = $('#tool_add_subpath');\n const sp = !button.hasClass('push_button_pressed');\n button.toggleClass('push_button_pressed tool_button');\n path.addSubPath(sp);\n };\n\n /**\n *\n * @returns {void}\n */\n const opencloseSubPath = function () {\n path.opencloseSubPath();\n };\n\n /**\n *\n * @returns {void}\n */\n const selectNext = function () {\n svgCanvas.cycleElement(1);\n };\n\n /**\n *\n * @returns {void}\n */\n const selectPrev = function () {\n svgCanvas.cycleElement(0);\n };\n\n /**\n * @param {0|1} cw\n * @param {Integer} step\n * @returns {void}\n */\n const rotateSelected = function (cw, step) {\n if (Utils.isNullish(selectedElement) || multiselected) { return; }\n if (!cw) { step *= -1; }\n const angle = parseFloat($('#angle').val()) + step;\n svgCanvas.setRotationAngle(angle);\n updateContextPanel();\n };\n\n /**\n * @fires module:svgcanvas.SvgCanvas#event:ext_onNewDocument\n * @returns {Promise} Resolves to `undefined`\n */\n const clickClear = async function () {\n const [x, y] = curConfig.dimensions;\n const ok = await $.confirm(uiStrings.notification.QwantToClear);\n if (!ok) {\n return;\n }\n setSelectMode();\n svgCanvas.clear();\n svgCanvas.setResolution(x, y);\n updateCanvas(true);\n zoomImage();\n populateLayers();\n updateContextPanel();\n prepPaints();\n svgCanvas.runExtensions('onNewDocument');\n };\n\n /**\n *\n * @returns {false}\n */\n const clickBold = function () {\n svgCanvas.setBold(!svgCanvas.getBold());\n updateContextPanel();\n return false;\n };\n\n /**\n *\n * @returns {false}\n */\n const clickItalic = function () {\n svgCanvas.setItalic(!svgCanvas.getItalic());\n updateContextPanel();\n return false;\n };\n\n /**\n *\n * @returns {void}\n */\n const clickSave = function () {\n // In the future, more options can be provided here\n const saveOpts = {\n images: editor.pref('img_save'),\n round_digits: 6\n };\n svgCanvas.save(saveOpts);\n };\n\n let loadingURL;\n /**\n *\n * @returns {Promise} Resolves to `undefined`\n */\n const clickExport = async function () {\n const imgType = await $.select('Select an image type for export: ', [\n // See http://kangax.github.io/jstests/toDataUrl_mime_type_test/ for a useful list of MIME types and browser support\n // 'ICO', // Todo: Find a way to preserve transparency in SVG-Edit if not working presently and do full packaging for x-icon; then switch back to position after 'PNG'\n 'PNG',\n 'JPEG', 'BMP', 'WEBP', 'PDF'\n ], function () {\n const sel = $(this);\n if (sel.val() === 'JPEG' || sel.val() === 'WEBP') {\n if (!$('#image-slider').length) {\n $(`${uiStrings.ui.quality}\n
`).appendTo(sel.parent());\n }\n } else {\n $('#image-slider').parent().remove();\n }\n }); // todo: replace hard-coded msg with uiStrings.notification.\n if (!imgType) {\n return;\n }\n // Open placeholder window (prevents popup)\n let exportWindowName;\n\n /**\n *\n * @returns {void}\n */\n function openExportWindow () {\n const {loadingImage} = uiStrings.notification;\n if (curConfig.exportWindowType === 'new') {\n editor.exportWindowCt++;\n }\n exportWindowName = curConfig.canvasName + editor.exportWindowCt;\n let popHTML, popURL;\n if (loadingURL) {\n popURL = loadingURL;\n } else {\n popHTML = `\n \n ${loadingImage} \n \n ${loadingImage} \n `;\n if (typeof URL !== 'undefined' && URL.createObjectURL) {\n const blob = new Blob([popHTML], {type: 'text/html'});\n popURL = URL.createObjectURL(blob);\n } else {\n popURL = 'data:text/html;base64;charset=utf-8,' + Utils.encode64(popHTML);\n }\n loadingURL = popURL;\n }\n exportWindow = window.open(popURL, exportWindowName);\n }\n const chrome = isChrome();\n if (imgType === 'PDF') {\n if (!customExportPDF && !chrome) {\n openExportWindow();\n }\n svgCanvas.exportPDF(exportWindowName);\n } else {\n if (!customExportImage) {\n openExportWindow();\n }\n const quality = parseInt($('#image-slider').val()) / 100;\n /* const results = */ await svgCanvas.rasterExport(imgType, quality, exportWindowName);\n }\n };\n\n /**\n * By default, svgCanvas.open() is a no-op. It is up to an extension\n * mechanism (opera widget, etc.) to call `setCustomHandlers()` which\n * will make it do something.\n * @returns {void}\n */\n const clickOpen = function () {\n svgCanvas.open();\n };\n\n /**\n *\n * @returns {void}\n */\n const clickImport = function () {\n /* */\n };\n\n /**\n *\n * @returns {void}\n */\n const clickUndo = function () {\n if (undoMgr.getUndoStackSize() > 0) {\n undoMgr.undo();\n populateLayers();\n }\n };\n\n /**\n *\n * @returns {void}\n */\n const clickRedo = function () {\n if (undoMgr.getRedoStackSize() > 0) {\n undoMgr.redo();\n populateLayers();\n }\n };\n\n /**\n *\n * @returns {void}\n */\n const clickGroup = function () {\n // group\n if (multiselected) {\n svgCanvas.groupSelectedElements();\n // ungroup\n } else if (selectedElement) {\n svgCanvas.ungroupSelectedElement();\n }\n };\n\n /**\n *\n * @returns {void}\n */\n const clickClone = function () {\n svgCanvas.cloneSelectedElements(20, 20);\n };\n\n /**\n *\n * @returns {void}\n */\n const clickAlign = function () {\n const letter = this.id.replace('tool_align', '').charAt(0);\n svgCanvas.alignSelectedElements(letter, $('#align_relative_to').val());\n };\n\n /**\n *\n * @returns {void}\n */\n const clickWireframe = function () {\n $('#tool_wireframe').toggleClass('push_button_pressed tool_button');\n workarea.toggleClass('wireframe');\n\n if (supportsNonSS) { return; }\n const wfRules = $('#wireframe_rules');\n if (!wfRules.length) {\n /* wfRules = */ $('').appendTo('head');\n } else {\n wfRules.empty();\n }\n\n updateWireFrame();\n };\n\n $('#svg_docprops_container, #svg_prefs_container').draggable({\n cancel: 'button,fieldset',\n containment: 'window'\n }).css('position', 'absolute');\n\n let docprops = false;\n let preferences = false;\n\n /**\n *\n * @returns {void}\n */\n const showDocProperties = function () {\n if (docprops) { return; }\n docprops = true;\n\n // This selects the correct radio button by using the array notation\n $('#image_save_opts input').val([editor.pref('img_save')]);\n\n // update resolution option with actual resolution\n const res = svgCanvas.getResolution();\n if (curConfig.baseUnit !== 'px') {\n res.w = convertUnit(res.w) + curConfig.baseUnit;\n res.h = convertUnit(res.h) + curConfig.baseUnit;\n }\n\n $('#canvas_width').val(res.w);\n $('#canvas_height').val(res.h);\n $('#canvas_title').val(svgCanvas.getDocumentTitle());\n\n $('#svg_docprops').show();\n };\n\n /**\n *\n * @returns {void}\n */\n const showPreferences = function () {\n if (preferences) { return; }\n preferences = true;\n $('#main_menu').hide();\n\n // Update background color with current one\n const canvasBg = curPrefs.bkgd_color;\n const url = editor.pref('bkgd_url');\n blocks.each(function () {\n const blk = $(this);\n const isBg = blk.css('background-color') === canvasBg;\n blk.toggleClass(curBg, isBg);\n if (isBg) { $('#canvas_bg_url').removeClass(curBg); }\n });\n if (!canvasBg) { blocks.eq(0).addClass(curBg); }\n if (url) {\n $('#canvas_bg_url').val(url);\n }\n $('#grid_snapping_on').prop('checked', curConfig.gridSnapping);\n $('#grid_snapping_step').attr('value', curConfig.snappingStep);\n $('#grid_color').attr('value', curConfig.gridColor);\n\n $('#svg_prefs').show();\n };\n\n /**\n *\n * @returns {void}\n */\n const openHomePage = function () {\n window.open(homePage, '_blank');\n };\n\n /**\n *\n * @returns {void}\n */\n const hideSourceEditor = function () {\n $('#svg_source_editor').hide();\n editingsource = false;\n $('#svg_source_textarea').blur();\n };\n\n /**\n *\n * @returns {Promise} Resolves to `undefined`\n */\n const saveSourceEditor = async function () {\n if (!editingsource) { return; }\n\n const saveChanges = function () {\n svgCanvas.clearSelection();\n hideSourceEditor();\n zoomImage();\n populateLayers();\n updateTitle();\n prepPaints();\n };\n\n if (!svgCanvas.setSvgString($('#svg_source_textarea').val())) {\n const ok = await $.confirm(uiStrings.notification.QerrorsRevertToSource);\n if (!ok) {\n return;\n }\n saveChanges();\n return;\n }\n saveChanges();\n setSelectMode();\n };\n\n /**\n *\n * @returns {void}\n */\n const hideDocProperties = function () {\n $('#svg_docprops').hide();\n $('#canvas_width,#canvas_height').removeAttr('disabled');\n $('#resolution')[0].selectedIndex = 0;\n $('#image_save_opts input').val([editor.pref('img_save')]);\n docprops = false;\n };\n\n /**\n *\n * @returns {void}\n */\n const hidePreferences = function () {\n $('#svg_prefs').hide();\n preferences = false;\n };\n\n /**\n *\n * @returns {boolean} Whether there were problems saving the document properties\n */\n const saveDocProperties = function () {\n // set title\n const newTitle = $('#canvas_title').val();\n updateTitle(newTitle);\n svgCanvas.setDocumentTitle(newTitle);\n\n // update resolution\n const width = $('#canvas_width'), w = width.val();\n const height = $('#canvas_height'), h = height.val();\n\n if (w !== 'fit' && !isValidUnit('width', w)) {\n width.parent().addClass('error');\n /* await */ $.alert(uiStrings.notification.invalidAttrValGiven);\n return false;\n }\n\n width.parent().removeClass('error');\n\n if (h !== 'fit' && !isValidUnit('height', h)) {\n height.parent().addClass('error');\n /* await */ $.alert(uiStrings.notification.invalidAttrValGiven);\n return false;\n }\n\n height.parent().removeClass('error');\n\n if (!svgCanvas.setResolution(w, h)) {\n /* await */ $.alert(uiStrings.notification.noContentToFitTo);\n return false;\n }\n\n // Set image save option\n editor.pref('img_save', $('#image_save_opts :checked').val());\n updateCanvas();\n hideDocProperties();\n return true;\n };\n\n /**\n * Save user preferences based on current values in the UI.\n * @function module:SVGEditor.savePreferences\n * @returns {Promise}\n */\n const savePreferences = editor.savePreferences = async function () {\n // Set background\n const color = $('#bg_blocks div.cur_background').css('background-color') || '#FFF';\n setBackground(color, $('#canvas_bg_url').val());\n\n // set language\n const lang = $('#lang_select').val();\n if (lang && lang !== editor.pref('lang')) {\n const {langParam, langData} = await editor.putLocale(lang, goodLangs, curConfig);\n await setLang(langParam, langData);\n }\n\n // set icon size\n setIconSize($('#iconsize').val());\n\n // set grid setting\n curConfig.gridSnapping = $('#grid_snapping_on')[0].checked;\n curConfig.snappingStep = $('#grid_snapping_step').val();\n curConfig.gridColor = $('#grid_color').val();\n curConfig.showRulers = $('#show_rulers')[0].checked;\n\n $('#rulers').toggle(curConfig.showRulers);\n if (curConfig.showRulers) { updateRulers(); }\n curConfig.baseUnit = $('#base_unit').val();\n\n svgCanvas.setConfig(curConfig);\n\n updateCanvas();\n hidePreferences();\n };\n\n let resetScrollPos = $.noop;\n\n /**\n *\n * @returns {Promise} Resolves to `undefined`\n */\n const cancelOverlays = async function () {\n $('#dialog_box').hide();\n if (!editingsource && !docprops && !preferences) {\n if (curContext) {\n svgCanvas.leaveContext();\n }\n return;\n }\n\n if (editingsource) {\n if (origSource !== $('#svg_source_textarea').val()) {\n const ok = await $.confirm(uiStrings.notification.QignoreSourceChanges);\n if (ok) {\n hideSourceEditor();\n }\n } else {\n hideSourceEditor();\n }\n } else if (docprops) {\n hideDocProperties();\n } else if (preferences) {\n hidePreferences();\n }\n resetScrollPos();\n };\n\n const winWh = {width: $(window).width(), height: $(window).height()};\n\n // Fix for Issue 781: Drawing area jumps to top-left corner on window resize (IE9)\n if (isIE()) {\n resetScrollPos = function () {\n if (workarea[0].scrollLeft === 0 && workarea[0].scrollTop === 0) {\n workarea[0].scrollLeft = curScrollPos.left;\n workarea[0].scrollTop = curScrollPos.top;\n }\n };\n\n curScrollPos = {\n left: workarea[0].scrollLeft,\n top: workarea[0].scrollTop\n };\n\n $(window).resize(resetScrollPos);\n editor.ready(function () {\n // TODO: Find better way to detect when to do this to minimize\n // flickering effect\n return new Promise((resolve, reject) => { // eslint-disable-line promise/avoid-new\n setTimeout(function () {\n resetScrollPos();\n resolve();\n }, 500);\n });\n });\n\n workarea.scroll(function () {\n curScrollPos = {\n left: workarea[0].scrollLeft,\n top: workarea[0].scrollTop\n };\n });\n }\n\n $(window).resize(function (evt) {\n $.each(winWh, function (type, val) {\n const curval = $(window)[type]();\n workarea[0]['scroll' + (type === 'width' ? 'Left' : 'Top')] -= (curval - val) / 2;\n winWh[type] = curval;\n });\n setFlyoutPositions();\n });\n\n workarea.scroll(function () {\n // TODO: jQuery's scrollLeft/Top() wouldn't require a null check\n if ($('#ruler_x').length) {\n $('#ruler_x')[0].scrollLeft = workarea[0].scrollLeft;\n }\n if ($('#ruler_y').length) {\n $('#ruler_y')[0].scrollTop = workarea[0].scrollTop;\n }\n });\n\n $('#url_notice').click(function () {\n /* await */ $.alert(this.title);\n });\n\n $('#change_image_url').click(promptImgURL);\n\n // added these event handlers for all the push buttons so they\n // behave more like buttons being pressed-in and not images\n (function () {\n const toolnames = [\n 'clear', 'open', 'save', 'source', 'delete',\n 'delete_multi', 'paste', 'clone', 'clone_multi',\n 'move_top', 'move_bottom'\n ];\n const curClass = 'tool_button_current';\n\n let allTools = '';\n\n $.each(toolnames, function (i, item) {\n allTools += (i ? ',' : '') + '#tool_' + item;\n });\n\n $(allTools).mousedown(function () {\n $(this).addClass(curClass);\n }).bind('mousedown mouseout', function () {\n $(this).removeClass(curClass);\n });\n\n $('#tool_undo, #tool_redo').mousedown(function () {\n if (!$(this).hasClass('disabled')) { $(this).addClass(curClass); }\n }).bind('mousedown mouseout', function () {\n $(this).removeClass(curClass);\n });\n }());\n\n // switch modifier key in tooltips if mac\n // NOTE: This code is not used yet until I can figure out how to successfully bind ctrl/meta\n // in Opera and Chrome\n if (isMac() && !window.opera) {\n const shortcutButtons = [\n 'tool_clear', 'tool_save', 'tool_source',\n 'tool_undo', 'tool_redo', 'tool_clone'\n ];\n let i = shortcutButtons.length;\n while (i--) {\n const button = document.getElementById(shortcutButtons[i]);\n if (button) {\n const {title} = button;\n const index = title.indexOf('Ctrl+');\n button.title = [\n title.substr(0, index),\n 'Cmd+',\n title.substr(index + 5)\n ].join('');\n }\n }\n }\n\n /**\n * @param {external:jQuery} elem\n * @todo Go back to the color boxes having white background-color and then setting\n * background-image to none.png (otherwise partially transparent gradients look weird)\n * @returns {void}\n */\n const colorPicker = function (elem) {\n const picker = elem.attr('id') === 'stroke_color' ? 'stroke' : 'fill';\n // const opacity = (picker == 'stroke' ? $('#stroke_opacity') : $('#fill_opacity'));\n const title = picker === 'stroke'\n ? uiStrings.ui.pick_stroke_paint_opacity\n : uiStrings.ui.pick_fill_paint_opacity;\n // let wasNone = false; // Currently unused\n const pos = elem.offset();\n let {paint} = paintBox[picker];\n $('#color_picker')\n .draggable({\n cancel: '.jGraduate_tabs, .jGraduate_colPick, .jGraduate_gradPick, .jPicker',\n containment: 'window'\n })\n .css(curConfig.colorPickerCSS || {left: pos.left - 140, bottom: 40})\n .jGraduate(\n {\n paint,\n window: {pickerTitle: title},\n images: {clientPath: curConfig.jGraduatePath},\n newstop: 'inverse'\n },\n function (p) {\n paint = new $.jGraduate.Paint(p);\n paintBox[picker].setPaint(paint);\n svgCanvas.setPaint(picker, paint);\n $('#color_picker').hide();\n },\n function () {\n $('#color_picker').hide();\n }\n );\n };\n\n class PaintBox {\n constructor (container, type) {\n const cur = curConfig[type === 'fill' ? 'initFill' : 'initStroke'];\n // set up gradients to be used for the buttons\n const svgdocbox = new DOMParser().parseFromString(\n `\n \n `,\n 'text/xml'\n );\n\n let docElem = svgdocbox.documentElement;\n docElem = $(container)[0].appendChild(document.importNode(docElem, true));\n docElem.setAttribute('width', 16.5);\n\n this.rect = docElem.firstElementChild;\n this.defs = docElem.getElementsByTagName('defs')[0];\n this.grad = this.defs.firstElementChild;\n this.paint = new $.jGraduate.Paint({solidColor: cur.color});\n this.type = type;\n }\n setPaint (paint, apply) {\n this.paint = paint;\n\n const ptype = paint.type;\n const opac = paint.alpha / 100;\n\n let fillAttr = 'none';\n switch (ptype) {\n case 'solidColor':\n fillAttr = (paint[ptype] !== 'none') ? '#' + paint[ptype] : paint[ptype];\n break;\n case 'linearGradient':\n case 'radialGradient': {\n this.grad.remove();\n this.grad = this.defs.appendChild(paint[ptype]);\n const id = this.grad.id = 'gradbox_' + this.type;\n fillAttr = 'url(#' + id + ')';\n break;\n }\n }\n\n this.rect.setAttribute('fill', fillAttr);\n this.rect.setAttribute('opacity', opac);\n\n if (apply) {\n svgCanvas.setColor(this.type, this._paintColor, true);\n svgCanvas.setPaintOpacity(this.type, this._paintOpacity, true);\n }\n }\n\n update (apply) {\n if (!selectedElement) { return; }\n\n const {type} = this;\n switch (selectedElement.tagName) {\n case 'use':\n case 'image':\n case 'foreignObject':\n // These elements don't have fill or stroke, so don't change\n // the current value\n return;\n case 'g':\n case 'a': {\n const childs = selectedElement.getElementsByTagName('*');\n\n let gPaint = null;\n for (let i = 0, len = childs.length; i < len; i++) {\n const elem = childs[i];\n const p = elem.getAttribute(type);\n if (i === 0) {\n gPaint = p;\n } else if (gPaint !== p) {\n gPaint = null;\n break;\n }\n }\n\n if (gPaint === null) {\n // No common color, don't update anything\n this._paintColor = null;\n return;\n }\n this._paintColor = gPaint;\n this._paintOpacity = 1;\n break;\n } default: {\n this._paintOpacity = parseFloat(selectedElement.getAttribute(type + '-opacity'));\n if (isNaN(this._paintOpacity)) {\n this._paintOpacity = 1.0;\n }\n\n const defColor = type === 'fill' ? 'black' : 'none';\n this._paintColor = selectedElement.getAttribute(type) || defColor;\n }\n }\n\n if (apply) {\n svgCanvas.setColor(type, this._paintColor, true);\n svgCanvas.setPaintOpacity(type, this._paintOpacity, true);\n }\n\n this._paintOpacity *= 100;\n\n const paint = getPaint(this._paintColor, this._paintOpacity, type);\n // update the rect inside #fill_color/#stroke_color\n this.setPaint(paint);\n }\n\n prep () {\n const ptype = this.paint.type;\n\n switch (ptype) {\n case 'linearGradient':\n case 'radialGradient': {\n const paint = new $.jGraduate.Paint({copy: this.paint});\n svgCanvas.setPaint(this.type, paint);\n break;\n }\n }\n }\n }\n PaintBox.ctr = 0;\n\n paintBox.fill = new PaintBox('#fill_color', 'fill');\n paintBox.stroke = new PaintBox('#stroke_color', 'stroke');\n\n $('#stroke_width').val(curConfig.initStroke.width);\n $('#group_opacity').val(curConfig.initOpacity * 100);\n\n // Use this SVG elem to test vectorEffect support\n const testEl = paintBox.fill.rect.cloneNode(false);\n testEl.setAttribute('style', 'vector-effect:non-scaling-stroke');\n const supportsNonSS = (testEl.style.vectorEffect === 'non-scaling-stroke');\n testEl.removeAttribute('style');\n const svgdocbox = paintBox.fill.rect.ownerDocument;\n // Use this to test support for blur element. Seems to work to test support in Webkit\n const blurTest = svgdocbox.createElementNS(NS.SVG, 'feGaussianBlur');\n if (blurTest.stdDeviationX === undefined) {\n $('#tool_blur').hide();\n }\n $(blurTest).remove();\n\n // Test for zoom icon support\n (function () {\n const pre = '-' + uaPrefix.toLowerCase() + '-zoom-';\n const zoom = pre + 'in';\n workarea.css('cursor', zoom);\n if (workarea.css('cursor') === zoom) {\n zoomInIcon = zoom;\n zoomOutIcon = pre + 'out';\n }\n workarea.css('cursor', 'auto');\n }());\n\n // Test for embedImage support (use timeout to not interfere with page load)\n setTimeout(function () {\n svgCanvas.embedImage('images/logo.png', function (datauri) {\n if (!datauri) {\n // Disable option\n $('#image_save_opts [value=embed]').attr('disabled', 'disabled');\n $('#image_save_opts input').val(['ref']);\n editor.pref('img_save', 'ref');\n $('#image_opt_embed').css('color', '#666').attr(\n 'title',\n uiStrings.notification.featNotSupported\n );\n }\n });\n }, 1000);\n\n $('#fill_color, #tool_fill .icon_label').click(function () {\n colorPicker($('#fill_color'));\n updateToolButtonState();\n });\n\n $('#stroke_color, #tool_stroke .icon_label').click(function () {\n colorPicker($('#stroke_color'));\n updateToolButtonState();\n });\n\n $('#group_opacityLabel').click(function () {\n $('#opacity_dropdown button').mousedown();\n $(window).mouseup();\n });\n\n $('#zoomLabel').click(function () {\n $('#zoom_dropdown button').mousedown();\n $(window).mouseup();\n });\n\n $('#tool_move_top').mousedown(function (evt) {\n $('#tools_stacking').show();\n evt.preventDefault();\n });\n\n $('.layer_button').mousedown(function () {\n $(this).addClass('layer_buttonpressed');\n }).mouseout(function () {\n $(this).removeClass('layer_buttonpressed');\n }).mouseup(function () {\n $(this).removeClass('layer_buttonpressed');\n });\n\n $('.push_button').mousedown(function () {\n if (!$(this).hasClass('disabled')) {\n $(this).addClass('push_button_pressed').removeClass('push_button');\n }\n }).mouseout(function () {\n $(this).removeClass('push_button_pressed').addClass('push_button');\n }).mouseup(function () {\n $(this).removeClass('push_button_pressed').addClass('push_button');\n });\n\n // ask for a layer name\n $('#layer_new').click(async function () {\n let uniqName,\n i = svgCanvas.getCurrentDrawing().getNumLayers();\n do {\n uniqName = uiStrings.layers.layer + ' ' + (++i);\n } while (svgCanvas.getCurrentDrawing().hasLayer(uniqName));\n\n const newName = await $.prompt(uiStrings.notification.enterUniqueLayerName, uniqName);\n if (!newName) { return; }\n if (svgCanvas.getCurrentDrawing().hasLayer(newName)) {\n /* await */ $.alert(uiStrings.notification.dupeLayerName);\n return;\n }\n svgCanvas.createLayer(newName);\n updateContextPanel();\n populateLayers();\n });\n\n /**\n *\n * @returns {void}\n */\n function deleteLayer () {\n if (svgCanvas.deleteCurrentLayer()) {\n updateContextPanel();\n populateLayers();\n // This matches what SvgCanvas does\n // TODO: make this behavior less brittle (svg-editor should get which\n // layer is selected from the canvas and then select that one in the UI)\n $('#layerlist tr.layer').removeClass('layersel');\n $('#layerlist tr.layer:first').addClass('layersel');\n }\n }\n\n /**\n *\n * @returns {Promise}\n */\n async function cloneLayer () {\n const name = svgCanvas.getCurrentDrawing().getCurrentLayerName() + ' copy';\n\n const newName = await $.prompt(uiStrings.notification.enterUniqueLayerName, name);\n if (!newName) { return; }\n if (svgCanvas.getCurrentDrawing().hasLayer(newName)) {\n /* await */ $.alert(uiStrings.notification.dupeLayerName);\n return;\n }\n svgCanvas.cloneLayer(newName);\n updateContextPanel();\n populateLayers();\n }\n\n /**\n *\n * @returns {void}\n */\n function mergeLayer () {\n if ($('#layerlist tr.layersel').index() === svgCanvas.getCurrentDrawing().getNumLayers() - 1) {\n return;\n }\n svgCanvas.mergeLayer();\n updateContextPanel();\n populateLayers();\n }\n\n /**\n * @param {Integer} pos\n * @returns {void}\n */\n function moveLayer (pos) {\n const total = svgCanvas.getCurrentDrawing().getNumLayers();\n\n let curIndex = $('#layerlist tr.layersel').index();\n if (curIndex > 0 || curIndex < total - 1) {\n curIndex += pos;\n svgCanvas.setCurrentLayerPosition(total - curIndex - 1);\n populateLayers();\n }\n }\n\n $('#layer_delete').click(deleteLayer);\n\n $('#layer_up').click(() => {\n moveLayer(-1);\n });\n\n $('#layer_down').click(() => {\n moveLayer(1);\n });\n\n $('#layer_rename').click(async function () {\n // const curIndex = $('#layerlist tr.layersel').prevAll().length; // Currently unused\n const oldName = $('#layerlist tr.layersel td.layername').text();\n const newName = await $.prompt(uiStrings.notification.enterNewLayerName, '');\n if (!newName) { return; }\n if (oldName === newName || svgCanvas.getCurrentDrawing().hasLayer(newName)) {\n /* await */ $.alert(uiStrings.notification.layerHasThatName);\n return;\n }\n\n svgCanvas.renameCurrentLayer(newName);\n populateLayers();\n });\n\n const SIDEPANEL_MAXWIDTH = 300;\n const SIDEPANEL_OPENWIDTH = 150;\n let sidedrag = -1, sidedragging = false, allowmove = false;\n\n /**\n * @param {Float} delta\n * @fires module:svgcanvas.SvgCanvas#event:ext_workareaResized\n * @returns {void}\n */\n const changeSidePanelWidth = function (delta) {\n const rulerX = $('#ruler_x');\n $('#sidepanels').width('+=' + delta);\n $('#layerpanel').width('+=' + delta);\n rulerX.css('right', parseInt(rulerX.css('right')) + delta);\n workarea.css('right', parseInt(workarea.css('right')) + delta);\n svgCanvas.runExtensions('workareaResized');\n };\n\n /**\n * @param {Event} evt\n * @returns {void}\n */\n const resizeSidePanel = function (evt) {\n if (!allowmove) { return; }\n if (sidedrag === -1) { return; }\n sidedragging = true;\n let deltaX = sidedrag - evt.pageX;\n const sideWidth = $('#sidepanels').width();\n if (sideWidth + deltaX > SIDEPANEL_MAXWIDTH) {\n deltaX = SIDEPANEL_MAXWIDTH - sideWidth;\n // sideWidth = SIDEPANEL_MAXWIDTH;\n } else if (sideWidth + deltaX < 2) {\n deltaX = 2 - sideWidth;\n // sideWidth = 2;\n }\n if (deltaX === 0) { return; }\n sidedrag -= deltaX;\n changeSidePanelWidth(deltaX);\n };\n\n /**\n * If width is non-zero, then fully close it; otherwise fully open it.\n * @param {boolean} close Forces the side panel closed\n * @returns {void}\n */\n const toggleSidePanel = function (close) {\n const dpr = window.devicePixelRatio || 1;\n const w = $('#sidepanels').width();\n const isOpened = (dpr < 1 ? w : w / dpr) > 2;\n const zoomAdjustedSidepanelWidth = (dpr < 1 ? 1 : dpr) * SIDEPANEL_OPENWIDTH;\n const deltaX = (isOpened || close ? 0 : zoomAdjustedSidepanelWidth) - w;\n changeSidePanelWidth(deltaX);\n };\n\n $('#sidepanel_handle')\n .mousedown(function (evt) {\n sidedrag = evt.pageX;\n $(window).mousemove(resizeSidePanel);\n allowmove = false;\n // Silly hack for Chrome, which always runs mousemove right after mousedown\n setTimeout(function () {\n allowmove = true;\n }, 20);\n })\n .mouseup(function (evt) {\n if (!sidedragging) { toggleSidePanel(); }\n sidedrag = -1;\n sidedragging = false;\n });\n\n $(window).mouseup(function () {\n sidedrag = -1;\n sidedragging = false;\n $('#svg_editor').unbind('mousemove', resizeSidePanel);\n });\n\n populateLayers();\n\n // function changeResolution (x,y) {\n // const {zoom} = svgCanvas.getResolution();\n // setResolution(x * zoom, y * zoom);\n // }\n\n const centerCanvas = () => {\n // this centers the canvas vertically in the workarea (horizontal handled in CSS)\n workarea.css('line-height', workarea.height() + 'px');\n };\n\n $(window).bind('load resize', centerCanvas);\n\n /**\n * @type {module:jQuerySpinButton.StepCallback}\n */\n function stepFontSize (elem, step) {\n const origVal = Number(elem.value);\n const sugVal = origVal + step;\n const increasing = sugVal >= origVal;\n if (step === 0) { return origVal; }\n\n if (origVal >= 24) {\n if (increasing) {\n return Math.round(origVal * 1.1);\n }\n return Math.round(origVal / 1.1);\n }\n if (origVal <= 1) {\n if (increasing) {\n return origVal * 2;\n }\n return origVal / 2;\n }\n return sugVal;\n }\n\n /**\n * @type {module:jQuerySpinButton.StepCallback}\n */\n function stepZoom (elem, step) {\n const origVal = Number(elem.value);\n if (origVal === 0) { return 100; }\n const sugVal = origVal + step;\n if (step === 0) { return origVal; }\n\n if (origVal >= 100) {\n return sugVal;\n }\n if (sugVal >= origVal) {\n return origVal * 2;\n }\n return origVal / 2;\n }\n\n // function setResolution (w, h, center) {\n // updateCanvas();\n // // w -= 0; h -= 0;\n // // $('#svgcanvas').css({width: w, height: h});\n // // $('#canvas_width').val(w);\n // // $('#canvas_height').val(h);\n // //\n // // if (center) {\n // // const wArea = workarea;\n // // const scrollY = h/2 - wArea.height()/2;\n // // const scrollX = w/2 - wArea.width()/2;\n // // wArea[0].scrollTop = scrollY;\n // // wArea[0].scrollLeft = scrollX;\n // // }\n // }\n\n $('#resolution').change(function () {\n const wh = $('#canvas_width,#canvas_height');\n if (!this.selectedIndex) {\n if ($('#canvas_width').val() === 'fit') {\n wh.removeAttr('disabled').val(100);\n }\n } else if (this.value === 'content') {\n wh.val('fit').attr('disabled', 'disabled');\n } else {\n const dims = this.value.split('x');\n $('#canvas_width').val(dims[0]);\n $('#canvas_height').val(dims[1]);\n wh.removeAttr('disabled');\n }\n });\n\n // Prevent browser from erroneously repopulating fields\n $('input,select').attr('autocomplete', 'off');\n\n const dialogSelectors = [\n '#tool_source_cancel', '#tool_docprops_cancel',\n '#tool_prefs_cancel', '.overlay'\n ];\n /* eslint-disable jsdoc/require-property */\n /**\n * Associate all button actions as well as non-button keyboard shortcuts.\n * @namespace {PlainObject} module:SVGEditor~Actions\n */\n const Actions = (function () {\n /* eslint-enable jsdoc/require-property */\n /**\n * @typedef {PlainObject} module:SVGEditor.ToolButton\n * @property {string} sel The CSS selector for the tool\n * @property {external:jQuery.Function} fn A handler to be attached to the `evt`\n * @property {string} evt The event for which the `fn` listener will be added\n * @property {module:SVGEditor.Key} [key] [key, preventDefault, NoDisableInInput]\n * @property {string} [parent] Selector\n * @property {boolean} [hidekey] Whether to show key value in title\n * @property {string} [icon] The button ID\n * @property {boolean} isDefault For flyout holders\n */\n /**\n *\n * @name module:SVGEditor~ToolButtons\n * @type {module:SVGEditor.ToolButton[]}\n */\n const toolButtons = [\n {sel: '#tool_select', fn: clickSelect, evt: 'click', key: ['V', true]},\n {sel: '#tool_fhpath', fn: clickFHPath, evt: 'click', key: ['Q', true]},\n {sel: '#tool_line', fn: clickLine, evt: 'click', key: ['L', true],\n parent: '#tools_line', prepend: true},\n {sel: '#tool_rect', fn: clickRect, evt: 'mouseup',\n key: ['R', true], parent: '#tools_rect', icon: 'rect'},\n {sel: '#tool_square', fn: clickSquare, evt: 'mouseup',\n parent: '#tools_rect', icon: 'square'},\n {sel: '#tool_fhrect', fn: clickFHRect, evt: 'mouseup',\n parent: '#tools_rect', icon: 'fh_rect'},\n {sel: '#tool_ellipse', fn: clickEllipse, evt: 'mouseup',\n key: ['E', true], parent: '#tools_ellipse', icon: 'ellipse'},\n {sel: '#tool_circle', fn: clickCircle, evt: 'mouseup',\n parent: '#tools_ellipse', icon: 'circle'},\n {sel: '#tool_fhellipse', fn: clickFHEllipse, evt: 'mouseup',\n parent: '#tools_ellipse', icon: 'fh_ellipse'},\n {sel: '#tool_path', fn: clickPath, evt: 'click', key: ['P', true]},\n {sel: '#tool_text', fn: clickText, evt: 'click', key: ['T', true]},\n {sel: '#tool_image', fn: clickImage, evt: 'mouseup'},\n {sel: '#tool_zoom', fn: clickZoom, evt: 'mouseup', key: ['Z', true]},\n {sel: '#tool_clear', fn: clickClear, evt: 'mouseup', key: ['N', true]},\n {sel: '#tool_save', fn () {\n if (editingsource) {\n saveSourceEditor();\n } else {\n clickSave();\n }\n }, evt: 'mouseup', key: ['S', true]},\n {sel: '#tool_export', fn: clickExport, evt: 'mouseup'},\n {sel: '#tool_open', fn: clickOpen, evt: 'mouseup', key: ['O', true]},\n {sel: '#tool_import', fn: clickImport, evt: 'mouseup'},\n {sel: '#tool_source', fn: showSourceEditor, evt: 'click', key: ['U', true]},\n {sel: '#tool_wireframe', fn: clickWireframe, evt: 'click', key: ['F', true]},\n {\n key: ['esc', false, false],\n fn () {\n if (dialogSelectors.every((sel) => {\n return $(sel + ':hidden').length;\n })) {\n svgCanvas.clearSelection();\n }\n },\n hidekey: true\n },\n {sel: dialogSelectors.join(','), fn: cancelOverlays, evt: 'click',\n key: ['esc', false, false], hidekey: true},\n {sel: '#tool_source_save', fn: saveSourceEditor, evt: 'click'},\n {sel: '#tool_docprops_save', fn: saveDocProperties, evt: 'click'},\n {sel: '#tool_docprops', fn: showDocProperties, evt: 'click'},\n {sel: '#tool_prefs_save', fn: savePreferences, evt: 'click'},\n {sel: '#tool_editor_prefs', fn: showPreferences, evt: 'click'},\n {sel: '#tool_editor_homepage', fn: openHomePage, evt: 'click'},\n {sel: '#tool_open', fn () { window.dispatchEvent(new CustomEvent('openImage')); }, evt: 'click'},\n {sel: '#tool_import', fn () { window.dispatchEvent(new CustomEvent('importImage')); }, evt: 'click'},\n {sel: '#tool_delete,#tool_delete_multi', fn: deleteSelected,\n evt: 'click', key: ['del/backspace', true]},\n {sel: '#tool_reorient', fn: reorientPath, evt: 'click'},\n {sel: '#tool_node_link', fn: linkControlPoints, evt: 'click'},\n {sel: '#tool_node_clone', fn: clonePathNode, evt: 'click'},\n {sel: '#tool_node_delete', fn: deletePathNode, evt: 'click'},\n {sel: '#tool_openclose_path', fn: opencloseSubPath, evt: 'click'},\n {sel: '#tool_add_subpath', fn: addSubPath, evt: 'click'},\n {sel: '#tool_move_top', fn: moveToTopSelected, evt: 'click', key: 'ctrl+shift+]'},\n {sel: '#tool_move_bottom', fn: moveToBottomSelected, evt: 'click', key: 'ctrl+shift+['},\n {sel: '#tool_topath', fn: convertToPath, evt: 'click'},\n {sel: '#tool_make_link,#tool_make_link_multi', fn: makeHyperlink, evt: 'click'},\n {sel: '#tool_undo', fn: clickUndo, evt: 'click'},\n {sel: '#tool_redo', fn: clickRedo, evt: 'click'},\n {sel: '#tool_clone,#tool_clone_multi', fn: clickClone, evt: 'click', key: ['D', true]},\n {sel: '#tool_group_elements', fn: clickGroup, evt: 'click', key: ['G', true]},\n {sel: '#tool_ungroup', fn: clickGroup, evt: 'click'},\n {sel: '#tool_unlink_use', fn: clickGroup, evt: 'click'},\n {sel: '[id^=tool_align]', fn: clickAlign, evt: 'click'},\n // these two lines are required to make Opera work properly with the flyout mechanism\n // {sel: '#tools_rect_show', fn: clickRect, evt: 'click'},\n // {sel: '#tools_ellipse_show', fn: clickEllipse, evt: 'click'},\n {sel: '#tool_bold', fn: clickBold, evt: 'mousedown'},\n {sel: '#tool_italic', fn: clickItalic, evt: 'mousedown'},\n {sel: '#sidepanel_handle', fn: toggleSidePanel, key: ['X']},\n {sel: '#copy_save_done', fn: cancelOverlays, evt: 'click'},\n\n // Shortcuts not associated with buttons\n\n {key: 'ctrl+left', fn () { rotateSelected(0, 1); }},\n {key: 'ctrl+right', fn () { rotateSelected(1, 1); }},\n {key: 'ctrl+shift+left', fn () { rotateSelected(0, 5); }},\n {key: 'ctrl+shift+right', fn () { rotateSelected(1, 5); }},\n {key: 'shift+O', fn: selectPrev},\n {key: 'shift+P', fn: selectNext},\n {key: [modKey + 'up', true], fn () { zoomImage(2); }},\n {key: [modKey + 'down', true], fn () { zoomImage(0.5); }},\n {key: [modKey + ']', true], fn () { moveUpDownSelected('Up'); }},\n {key: [modKey + '[', true], fn () { moveUpDownSelected('Down'); }},\n {key: ['up', true], fn () { moveSelected(0, -1); }},\n {key: ['down', true], fn () { moveSelected(0, 1); }},\n {key: ['left', true], fn () { moveSelected(-1, 0); }},\n {key: ['right', true], fn () { moveSelected(1, 0); }},\n {key: 'shift+up', fn () { moveSelected(0, -10); }},\n {key: 'shift+down', fn () { moveSelected(0, 10); }},\n {key: 'shift+left', fn () { moveSelected(-10, 0); }},\n {key: 'shift+right', fn () { moveSelected(10, 0); }},\n {key: ['alt+up', true], fn () { svgCanvas.cloneSelectedElements(0, -1); }},\n {key: ['alt+down', true], fn () { svgCanvas.cloneSelectedElements(0, 1); }},\n {key: ['alt+left', true], fn () { svgCanvas.cloneSelectedElements(-1, 0); }},\n {key: ['alt+right', true], fn () { svgCanvas.cloneSelectedElements(1, 0); }},\n {key: ['alt+shift+up', true], fn () { svgCanvas.cloneSelectedElements(0, -10); }},\n {key: ['alt+shift+down', true], fn () { svgCanvas.cloneSelectedElements(0, 10); }},\n {key: ['alt+shift+left', true], fn () { svgCanvas.cloneSelectedElements(-10, 0); }},\n {key: ['alt+shift+right', true], fn () { svgCanvas.cloneSelectedElements(10, 0); }},\n {key: 'a', fn () { svgCanvas.selectAllInCurrentLayer(); }},\n {key: modKey + 'a', fn () { svgCanvas.selectAllInCurrentLayer(); }},\n\n // Standard shortcuts\n {key: modKey + 'z', fn: clickUndo},\n {key: modKey + 'shift+z', fn: clickRedo},\n {key: modKey + 'y', fn: clickRedo},\n\n {key: modKey + 'x', fn: cutSelected},\n {key: modKey + 'c', fn: copySelected},\n {key: modKey + 'v', fn: pasteInCenter}\n ];\n\n // Tooltips not directly associated with a single function\n const keyAssocs = {\n '4/Shift+4': '#tools_rect_show',\n '5/Shift+5': '#tools_ellipse_show'\n };\n\n return {\n /** @lends module:SVGEditor~Actions */\n /**\n * @returns {void}\n */\n setAll () {\n const flyouts = {};\n\n $.each(toolButtons, function (i, opts) {\n // Bind function to button\n let btn;\n if (opts.sel) {\n btn = $(opts.sel);\n if (!btn.length) { return true; } // Skip if markup does not exist\n if (opts.evt) {\n // `touch.js` changes `touchstart` to `mousedown`,\n // so we must map tool button click events as well\n if (isTouch() && opts.evt === 'click') {\n opts.evt = 'mousedown';\n }\n btn[opts.evt](opts.fn);\n }\n\n // Add to parent flyout menu, if able to be displayed\n if (opts.parent && $(opts.parent + '_show').length) {\n let fH = $(opts.parent);\n if (!fH.length) {\n fH = makeFlyoutHolder(opts.parent.substr(1));\n }\n if (opts.prepend) {\n btn[0].style.margin = 'initial';\n }\n fH[opts.prepend ? 'prepend' : 'append'](btn);\n\n if (!Array.isArray(flyouts[opts.parent])) {\n flyouts[opts.parent] = [];\n }\n flyouts[opts.parent].push(opts);\n }\n }\n\n // Bind function to shortcut key\n if (opts.key) {\n // Set shortcut based on options\n let keyval,\n // disInInp = true,\n pd = false;\n if (Array.isArray(opts.key)) {\n keyval = opts.key[0];\n if (opts.key.length > 1) { pd = opts.key[1]; }\n // if (opts.key.length > 2) { disInInp = opts.key[2]; }\n } else {\n keyval = opts.key;\n }\n keyval = String(keyval);\n\n const {fn} = opts;\n $.each(keyval.split('/'), function (j, key) {\n $(document).bind('keydown', key, function (e) {\n fn();\n if (pd) {\n e.preventDefault();\n }\n // Prevent default on ALL keys?\n return false;\n });\n });\n\n // Put shortcut in title\n if (opts.sel && !opts.hidekey && btn.attr('title')) {\n const newTitle = btn.attr('title').split('[')[0] + ' (' + keyval + ')';\n keyAssocs[keyval] = opts.sel;\n // Disregard for menu items\n if (!btn.parents('#main_menu').length) {\n btn.attr('title', newTitle);\n }\n }\n }\n return true;\n });\n\n // Setup flyouts\n setupFlyouts(flyouts);\n\n // Misc additional actions\n\n // Make 'return' keypress trigger the change event\n $('.attr_changer, #image_url').bind(\n 'keydown',\n 'return',\n function (evt) {\n $(this).change();\n evt.preventDefault();\n }\n );\n\n $(window).bind('keydown', 'tab', function (e) {\n if (uiContext === 'canvas') {\n e.preventDefault();\n selectNext();\n }\n }).bind('keydown', 'shift+tab', function (e) {\n if (uiContext === 'canvas') {\n e.preventDefault();\n selectPrev();\n }\n });\n\n $('#tool_zoom').dblclick(dblclickZoom);\n },\n /**\n * @returns {void}\n */\n setTitles () {\n $.each(keyAssocs, function (keyval, sel) {\n const menu = ($(sel).parents('#main_menu').length);\n\n $(sel).each(function () {\n let t;\n if (menu) {\n t = $(this).text().split(' [')[0];\n } else {\n t = this.title.split(' [')[0];\n }\n let keyStr = '';\n // Shift+Up\n $.each(keyval.split('/'), function (i, key) {\n const modBits = key.split('+');\n let mod = '';\n if (modBits.length > 1) {\n mod = modBits[0] + '+';\n key = modBits[1];\n }\n keyStr += (i ? '/' : '') + mod + (uiStrings['key_' + key] || key);\n });\n if (menu) {\n this.lastChild.textContent = t + ' [' + keyStr + ']';\n } else {\n this.title = t + ' [' + keyStr + ']';\n }\n });\n });\n },\n /**\n * @param {string} sel Selector to match\n * @returns {module:SVGEditor.ToolButton}\n */\n getButtonData (sel) {\n return Object.values(toolButtons).find((btn) => {\n return btn.sel === sel;\n });\n }\n };\n }());\n\n // Select given tool\n editor.ready(function () {\n let tool;\n const itool = curConfig.initTool,\n container = $('#tools_left, #svg_editor .tools_flyout'),\n preTool = container.find('#tool_' + itool),\n regTool = container.find('#' + itool);\n if (preTool.length) {\n tool = preTool;\n } else if (regTool.length) {\n tool = regTool;\n } else {\n tool = $('#tool_select');\n }\n tool.click().mouseup();\n\n if (curConfig.wireframe) {\n $('#tool_wireframe').click();\n }\n\n if (curConfig.showlayers) {\n toggleSidePanel();\n }\n\n $('#rulers').toggle(Boolean(curConfig.showRulers));\n\n if (curConfig.showRulers) {\n $('#show_rulers')[0].checked = true;\n }\n\n if (curConfig.baseUnit) {\n $('#base_unit').val(curConfig.baseUnit);\n }\n\n if (curConfig.gridSnapping) {\n $('#grid_snapping_on')[0].checked = true;\n }\n\n if (curConfig.snappingStep) {\n $('#grid_snapping_step').val(curConfig.snappingStep);\n }\n\n if (curConfig.gridColor) {\n $('#grid_color').val(curConfig.gridColor);\n }\n });\n\n // init SpinButtons\n $('#rect_rx').SpinButton({\n min: 0, max: 1000, stateObj, callback: changeRectRadius\n });\n $('#stroke_width').SpinButton({\n min: 0, max: 99, smallStep: 0.1, stateObj, callback: changeStrokeWidth\n });\n $('#angle').SpinButton({\n min: -180, max: 180, step: 5, stateObj, callback: changeRotationAngle\n });\n $('#font_size').SpinButton({\n min: 0.001, stepfunc: stepFontSize, stateObj, callback: changeFontSize\n });\n $('#group_opacity').SpinButton({\n min: 0, max: 100, step: 5, stateObj, callback: changeOpacity\n });\n $('#blur').SpinButton({\n min: 0, max: 10, step: 0.1, stateObj, callback: changeBlur\n });\n $('#zoom').SpinButton({\n min: 0.001, max: 10000, step: 50, stepfunc: stepZoom,\n stateObj, callback: changeZoom\n // Set default zoom\n }).val(\n svgCanvas.getZoom() * 100\n );\n\n $('#workarea').contextMenu(\n {\n menu: 'cmenu_canvas',\n inSpeed: 0\n },\n function (action, el, pos) {\n switch (action) {\n case 'delete':\n deleteSelected();\n break;\n case 'cut':\n cutSelected();\n break;\n case 'copy':\n copySelected();\n break;\n case 'paste':\n svgCanvas.pasteElements();\n break;\n case 'paste_in_place':\n svgCanvas.pasteElements('in_place');\n break;\n case 'group':\n case 'group_elements':\n svgCanvas.groupSelectedElements();\n break;\n case 'ungroup':\n svgCanvas.ungroupSelectedElement();\n break;\n case 'move_front':\n moveToTopSelected();\n break;\n case 'move_up':\n moveUpDownSelected('Up');\n break;\n case 'move_down':\n moveUpDownSelected('Down');\n break;\n case 'move_back':\n moveToBottomSelected();\n break;\n default:\n if (hasCustomHandler(action)) {\n getCustomHandler(action).call();\n }\n break;\n }\n }\n );\n\n /**\n * Implements {@see module:jQueryContextMenu.jQueryContextMenuListener}.\n * @param {\"dupe\"|\"delete\"|\"merge_down\"|\"merge_all\"} action\n * @param {external:jQuery} el\n * @param {{x: Float, y: Float, docX: Float, docY: Float}} pos\n * @returns {void}\n */\n const lmenuFunc = function (action, el, pos) {\n switch (action) {\n case 'dupe':\n /* await */ cloneLayer();\n break;\n case 'delete':\n deleteLayer();\n break;\n case 'merge_down':\n mergeLayer();\n break;\n case 'merge_all':\n svgCanvas.mergeAllLayers();\n updateContextPanel();\n populateLayers();\n break;\n }\n };\n\n $('#layerlist').contextMenu(\n {\n menu: 'cmenu_layers',\n inSpeed: 0\n },\n lmenuFunc\n );\n\n $('#layer_moreopts').contextMenu(\n {\n menu: 'cmenu_layers',\n inSpeed: 0,\n allowLeft: true\n },\n lmenuFunc\n );\n\n $('.contextMenu li').mousedown(function (ev) {\n ev.preventDefault();\n });\n\n $('#cmenu_canvas li').disableContextMenu();\n canvMenu.enableContextMenuItems('#delete,#cut,#copy');\n\n /**\n * @returns {void}\n */\n function enableOrDisableClipboard () {\n let svgeditClipboard;\n try {\n svgeditClipboard = localStorage.getItem('svgedit_clipboard');\n } catch (err) {}\n canvMenu[(svgeditClipboard ? 'en' : 'dis') + 'ableContextMenuItems'](\n '#paste,#paste_in_place'\n );\n }\n enableOrDisableClipboard();\n\n window.addEventListener('storage', function (e) {\n if (e.key !== 'svgedit_clipboard') { return; }\n\n enableOrDisableClipboard();\n });\n\n window.addEventListener('beforeunload', function (e) {\n // Suppress warning if page is empty\n if (undoMgr.getUndoStackSize() === 0) {\n editor.showSaveWarning = false;\n }\n\n // showSaveWarning is set to 'false' when the page is saved.\n if (!curConfig.no_save_warning && editor.showSaveWarning) {\n // Browser already asks question about closing the page\n e.returnValue = uiStrings.notification.unsavedChanges; // Firefox needs this when beforeunload set by addEventListener (even though message is not used)\n return uiStrings.notification.unsavedChanges;\n }\n return true;\n });\n\n /**\n * Expose the `uiStrings`.\n * @function module:SVGEditor.canvas.getUIStrings\n * @returns {module:SVGEditor.uiStrings}\n */\n editor.canvas.getUIStrings = function () {\n return uiStrings;\n };\n\n /**\n * @returns {Promise} Resolves to boolean indicating `true` if there were no changes\n * and `false` after the user confirms.\n */\n editor.openPrep = function () {\n $('#main_menu').hide();\n if (undoMgr.getUndoStackSize() === 0) {\n return true;\n }\n return $.confirm(uiStrings.notification.QwantToOpen);\n };\n\n /**\n *\n * @param {Event} e\n * @returns {void}\n */\n function onDragEnter (e) {\n e.stopPropagation();\n e.preventDefault();\n // and indicator should be displayed here, such as \"drop files here\"\n }\n\n /**\n *\n * @param {Event} e\n * @returns {void}\n */\n function onDragOver (e) {\n e.stopPropagation();\n e.preventDefault();\n }\n\n /**\n *\n * @param {Event} e\n * @returns {void}\n */\n function onDragLeave (e) {\n e.stopPropagation();\n e.preventDefault();\n // hypothetical indicator should be removed here\n }\n // Use HTML5 File API: http://www.w3.org/TR/FileAPI/\n // if browser has HTML5 File API support, then we will show the open menu item\n // and provide a file input to click. When that change event fires, it will\n // get the text contents of the file and send it to the canvas\n if (window.FileReader) {\n /**\n * @param {Event} e\n * @returns {void}\n */\n const importImage = function (e) {\n $.process_cancel(uiStrings.notification.loadingImage);\n e.stopPropagation();\n e.preventDefault();\n $('#workarea').removeAttr('style');\n $('#main_menu').hide();\n const file = (e.type === 'drop') ? e.dataTransfer.files[0] : this.files[0];\n if (!file) {\n $('#dialog_box').hide();\n return;\n }\n /* if (file.type === 'application/pdf') { // Todo: Handle PDF imports\n\n }\n else */\n if (!file.type.includes('image')) {\n return;\n }\n // Detected an image\n // svg handling\n let reader;\n if (file.type.includes('svg')) {\n reader = new FileReader();\n reader.onloadend = function (ev) {\n const newElement = svgCanvas.importSvgString(ev.target.result, true);\n svgCanvas.ungroupSelectedElement();\n svgCanvas.ungroupSelectedElement();\n svgCanvas.groupSelectedElements();\n svgCanvas.alignSelectedElements('m', 'page');\n svgCanvas.alignSelectedElements('c', 'page');\n // highlight imported element, otherwise we get strange empty selectbox\n svgCanvas.selectOnly([newElement]);\n $('#dialog_box').hide();\n };\n reader.readAsText(file);\n } else {\n // bitmap handling\n reader = new FileReader();\n reader.onloadend = function ({target: {result}}) {\n /**\n * Insert the new image until we know its dimensions.\n * @param {Float} width\n * @param {Float} height\n * @returns {void}\n */\n const insertNewImage = function (width, height) {\n const newImage = svgCanvas.addSVGElementFromJson({\n element: 'image',\n attr: {\n x: 0,\n y: 0,\n width,\n height,\n id: svgCanvas.getNextId(),\n style: 'pointer-events:inherit'\n }\n });\n svgCanvas.setHref(newImage, result);\n svgCanvas.selectOnly([newImage]);\n svgCanvas.alignSelectedElements('m', 'page');\n svgCanvas.alignSelectedElements('c', 'page');\n updateContextPanel();\n $('#dialog_box').hide();\n };\n // create dummy img so we know the default dimensions\n let imgWidth = 100;\n let imgHeight = 100;\n const img = new Image();\n img.style.opacity = 0;\n img.addEventListener('load', function () {\n imgWidth = img.offsetWidth || img.naturalWidth || img.width;\n imgHeight = img.offsetHeight || img.naturalHeight || img.height;\n insertNewImage(imgWidth, imgHeight);\n });\n img.src = result;\n };\n reader.readAsDataURL(file);\n }\n };\n\n workarea[0].addEventListener('dragenter', onDragEnter);\n workarea[0].addEventListener('dragover', onDragOver);\n workarea[0].addEventListener('dragleave', onDragLeave);\n workarea[0].addEventListener('drop', importImage);\n\n const open = $('} A Promise which resolves to `undefined`\n */\n const setLang = editor.setLang = async function (lang, allStrings) {\n editor.langChanged = true;\n editor.pref('lang', lang);\n $('#lang_select').val(lang);\n if (!allStrings) {\n return;\n }\n // Todo: Remove `allStrings.lang` property in locale in\n // favor of just `lang`?\n document.documentElement.lang = allStrings.lang; // lang;\n // Todo: Add proper RTL Support!\n // Todo: Use RTL detection instead and take out of locales?\n // document.documentElement.dir = allStrings.dir;\n $.extend(uiStrings, allStrings);\n\n // const notif = allStrings.notification; // Currently unused\n // $.extend will only replace the given strings\n const oldLayerName = $('#layerlist tr.layersel td.layername').text();\n const renameLayer = (oldLayerName === uiStrings.common.layer + ' 1');\n\n svgCanvas.setUiStrings(allStrings);\n Actions.setTitles();\n\n if (renameLayer) {\n svgCanvas.renameCurrentLayer(uiStrings.common.layer + ' 1');\n populateLayers();\n }\n\n // In case extensions loaded before the locale, now we execute a callback on them\n if (extsPreLang.length) {\n await Promise.all(extsPreLang.map((ext) => {\n loadedExtensionNames.push(ext.name);\n return ext.langReady({\n lang,\n uiStrings,\n importLocale: getImportLocale({defaultLang: lang, defaultName: ext.name})\n });\n }));\n extsPreLang.length = 0;\n } else {\n loadedExtensionNames.forEach((loadedExtensionName) => {\n svgCanvas.runExtension(\n loadedExtensionName,\n 'langReady',\n /** @type {module:svgcanvas.SvgCanvas#event:ext_langReady} */ {\n lang, uiStrings, importLocale: getImportLocale({defaultLang: lang, defaultName: loadedExtensionName})\n }\n );\n });\n }\n svgCanvas.runExtensions('langChanged', /** @type {module:svgcanvas.SvgCanvas#event:ext_langChanged} */ lang);\n\n // Update flyout tooltips\n setFlyoutTitles();\n\n // Copy title for certain tool elements\n const elems = {\n '#stroke_color': '#tool_stroke .icon_label, #tool_stroke .color_block',\n '#fill_color': '#tool_fill label, #tool_fill .color_block',\n '#linejoin_miter': '#cur_linejoin',\n '#linecap_butt': '#cur_linecap'\n };\n\n $.each(elems, function (source, dest) {\n $(dest).attr('title', $(source)[0].title);\n });\n\n // Copy alignment titles\n $('#multiselected_panel div[id^=tool_align]').each(function () {\n $('#tool_pos' + this.id.substr(10))[0].title = this.title;\n });\n };\n localeInit(\n /**\n * @implements {module:locale.LocaleEditorInit}\n */\n {\n /**\n * Gets an array of results from extensions with a `addLangData` method,\n * returning an object with a `data` property set to its locales (to be\n * merged with regular locales).\n * @param {string} langParam\n * @fires module:svgcanvas.SvgCanvas#event:ext_addLangData\n * @todo Can we forego this in favor of `langReady` (or forego `langReady`)?\n * @returns {module:locale.AddLangExtensionLocaleData[]}\n */\n addLangData (langParam) {\n return svgCanvas.runExtensions(\n 'addLangData',\n /**\n * @function\n * @type {module:svgcanvas.ExtensionVarBuilder}\n * @param {string} name\n * @returns {module:svgcanvas.SvgCanvas#event:ext_addLangData}\n */\n (name) => { // We pass in a function as we don't know the extension name here when defining this `addLangData` method\n return {\n lang: langParam,\n importLocale: getImportLocale({defaultLang: langParam, defaultName: name})\n };\n },\n true\n );\n },\n curConfig\n }\n );\n // Load extensions\n // Bit of a hack to run extensions in local Opera/IE9\n if (document.location.protocol === 'file:') {\n setTimeout(extAndLocaleFunc, 100);\n } else {\n // Returns a promise (if we wanted to fire 'extensions-loaded' event,\n // potentially useful to hide interface as some extension locales\n // are only available after this)\n extAndLocaleFunc();\n }\n};\n\n/**\n* @callback module:SVGEditor.ReadyCallback\n* @returns {Promise|void}\n*/\n/**\n* Queues a callback to be invoked when the editor is ready (or\n* to be invoked immediately if it is already ready--i.e.,\n* if `runCallbacks` has been run).\n* @param {module:SVGEditor.ReadyCallback} cb Callback to be queued to invoke\n* @returns {Promise} Resolves when all callbacks, including the supplied have resolved\n*/\neditor.ready = function (cb) { // eslint-disable-line promise/prefer-await-to-callbacks\n return new Promise((resolve, reject) => { // eslint-disable-line promise/avoid-new\n if (isReady) {\n resolve(cb()); // eslint-disable-line callback-return, promise/prefer-await-to-callbacks\n return;\n }\n callbacks.push([cb, resolve, reject]);\n });\n};\n\n/**\n* Invokes the callbacks previous set by `svgEditor.ready`\n* @returns {Promise} Resolves to `undefined` if all callbacks succeeded and rejects otherwise\n*/\neditor.runCallbacks = async function () {\n try {\n await Promise.all(callbacks.map(([cb]) => {\n return cb(); // eslint-disable-line promise/prefer-await-to-callbacks\n }));\n } catch (err) {\n callbacks.forEach(([, , reject]) => {\n reject();\n });\n throw err;\n }\n callbacks.forEach(([, resolve]) => {\n resolve();\n });\n isReady = true;\n};\n\n/**\n* @param {string} str The SVG string to load\n* @param {PlainObject} [opts={}]\n* @param {boolean} [opts.noAlert=false] Option to avoid alert to user and instead get rejected promise\n* @returns {Promise}\n*/\neditor.loadFromString = function (str, {noAlert} = {}) {\n return editor.ready(async function () {\n try {\n await loadSvgString(str, {noAlert});\n } catch (err) {\n if (noAlert) {\n throw err;\n }\n }\n });\n};\n\n/**\n* Not presently in use.\n* @param {PlainObject} featList\n* @returns {void}\n*/\neditor.disableUI = function (featList) {\n // $(function () {\n // $('#tool_wireframe, #tool_image, #main_button, #tool_source, #sidepanels').remove();\n // $('#tools_top').css('left', 5);\n // });\n};\n\n/**\n * @callback module:SVGEditor.URLLoadCallback\n * @param {boolean} success\n * @returns {void}\n */\n/**\n* @param {string} url URL from which to load an SVG string via Ajax\n* @param {PlainObject} [opts={}] May contain properties: `cache`, `callback`\n* @param {boolean} [opts.cache]\n* @param {boolean} [opts.noAlert]\n* @returns {Promise} Resolves to `undefined` or rejects upon bad loading of\n* the SVG (or upon failure to parse the loaded string) when `noAlert` is\n* enabled\n*/\neditor.loadFromURL = function (url, {cache, noAlert} = {}) {\n return editor.ready(function () {\n return new Promise((resolve, reject) => { // eslint-disable-line promise/avoid-new\n $.ajax({\n url,\n dataType: 'text',\n cache: Boolean(cache),\n beforeSend () {\n $.process_cancel(uiStrings.notification.loadingImage);\n },\n success (str) {\n resolve(loadSvgString(str, {noAlert}));\n },\n error (xhr, stat, err) {\n if (xhr.status !== 404 && xhr.responseText) {\n resolve(loadSvgString(xhr.responseText, {noAlert}));\n return;\n }\n if (noAlert) {\n reject(new Error('URLLoadFail'));\n return;\n }\n $.alert(uiStrings.notification.URLLoadFail + ': \\n' + err);\n resolve();\n },\n complete () {\n $('#dialog_box').hide();\n }\n });\n });\n });\n};\n\n/**\n* @param {string} str The Data URI to base64-decode (if relevant) and load\n* @param {PlainObject} [opts={}]\n* @param {boolean} [opts.noAlert]\n* @returns {Promise} Resolves to `undefined` and rejects if loading SVG string fails and `noAlert` is enabled\n*/\neditor.loadFromDataURI = function (str, {noAlert} = {}) {\n return editor.ready(function () {\n let base64 = false;\n let pre = str.match(/^data:image\\/svg\\+xml;base64,/);\n if (pre) {\n base64 = true;\n } else {\n pre = str.match(/^data:image\\/svg\\+xml(?:;|;utf8)?,/);\n }\n if (pre) {\n pre = pre[0];\n }\n const src = str.slice(pre.length);\n return loadSvgString(base64 ? Utils.decode64(src) : decodeURIComponent(src), {noAlert});\n });\n};\n\n/**\n * @param {string} name Used internally; no need for i18n.\n * @param {module:svgcanvas.ExtensionInitCallback} init Config to be invoked on this module\n * @param {module:svgcanvas.ExtensionInitArgs} initArgs\n * @throws {Error} If called too early\n * @returns {Promise} Resolves to `undefined`\n*/\neditor.addExtension = function (name, init, initArgs) {\n // Note that we don't want this on editor.ready since some extensions\n // may want to run before then (like server_opensave).\n // $(function () {\n if (!svgCanvas) {\n throw new Error('Extension added too early');\n }\n return svgCanvas.addExtension.call(this, name, init, initArgs);\n // });\n};\n\n// Defer injection to wait out initial menu processing. This probably goes\n// away once all context menu behavior is brought to context menu.\neditor.ready(() => {\n injectExtendedContextMenuItemsIntoDom();\n});\n\nlet extensionsAdded = false;\nconst messageQueue = [];\n/**\n * @param {PlainObject} info\n * @param {any} info.data\n * @param {string} info.origin\n * @fires module:svgcanvas.SvgCanvas#event:message\n * @returns {void}\n */\nconst messageListener = ({data, origin}) => { // eslint-disable-line no-shadow\n // console.log('data, origin, extensionsAdded', data, origin, extensionsAdded);\n const messageObj = {data, origin};\n if (!extensionsAdded) {\n messageQueue.push(messageObj);\n } else {\n // Extensions can handle messages at this stage with their own\n // canvas `message` listeners\n svgCanvas.call('message', messageObj);\n }\n};\nwindow.addEventListener('message', messageListener);\n\n// Run init once DOM is loaded\n// jQuery(editor.init);\n\n(async () => {\ntry {\n // We wait a micro-task to let the svgEditor variable be defined for module checks\n await Promise.resolve();\n editor.init();\n} catch (err) {\n console.error(err); // eslint-disable-line no-console\n}\n})();\n\nexport default editor;\n","// Todo: Update: https://github.com/jeresig/jquery.hotkeys\n/*\n * jQuery Hotkeys Plugin\n * Copyright 2010, John Resig\n * Dual licensed under the MIT or GPL Version 2 licenses.\n *\n * http://github.com/jeresig/jquery.hotkeys\n *\n * Based upon the plugin by Tzury Bar Yochay:\n * http://github.com/tzuryby/hotkeys\n *\n * Original idea by:\n * Binny V A, http://www.openjs.com/scripts/events/keyboard_shortcuts/\n*/\n\n// We *do* want to allow the escape key within textareas (and possibly tab too), so add the condition `n.which !== 27`\n\nexport default function(b){b.hotkeys={version:\"0.8\",specialKeys:{8:\"backspace\",9:\"tab\",13:\"return\",16:\"shift\",17:\"ctrl\",18:\"alt\",19:\"pause\",20:\"capslock\",27:\"esc\",32:\"space\",33:\"pageup\",34:\"pagedown\",35:\"end\",36:\"home\",37:\"left\",38:\"up\",39:\"right\",40:\"down\",45:\"insert\",46:\"del\",96:\"0\",97:\"1\",98:\"2\",99:\"3\",100:\"4\",101:\"5\",102:\"6\",103:\"7\",104:\"8\",105:\"9\",106:\"*\",107:\"+\",109:\"-\",110:\".\",111:\"/\",112:\"f1\",113:\"f2\",114:\"f3\",115:\"f4\",116:\"f5\",117:\"f6\",118:\"f7\",119:\"f8\",120:\"f9\",121:\"f10\",122:\"f11\",123:\"f12\",144:\"numlock\",145:\"scroll\",191:\"/\",224:\"meta\",219:\"[\",221:\"]\"},shiftNums:{\"`\":\"~\",\"1\":\"!\",\"2\":\"@\",\"3\":\"#\",\"4\":\"$\",\"5\":\"%\",\"6\":\"^\",\"7\":\"&\",\"8\":\"*\",\"9\":\"(\",\"0\":\")\",\"-\":\"_\",\"=\":\"+\",\";\":\": \",\"'\":'\"',\",\":\"<\",\".\":\">\",\"/\":\"?\",\"\\\\\":\"|\"}};function a(d){if(typeof d.data!==\"string\"){return}var c=d.handler,e=d.data.toLowerCase().split(\" \");d.handler=function(n){if(this!==n.target&&(n.which !== 27 && (/textarea|select/i.test(n.target.nodeName)||n.target.type===\"text\"))){return}var h=n.type!==\"keypress\"&&b.hotkeys.specialKeys[n.which],o=String.fromCharCode(n.which).toLowerCase(),k,m=\"\",g={};if(n.altKey&&h!==\"alt\"){m+=\"alt+\"}if(n.ctrlKey&&h!==\"ctrl\"){m+=\"ctrl+\"}if(n.metaKey&&!n.ctrlKey&&h!==\"meta\"){m+=\"meta+\"}if(n.shiftKey&&h!==\"shift\"){m+=\"shift+\"}if(h){g[m+h]=true}else{g[m+o]=true;g[m+b.hotkeys.shiftNums[o]]=true;if(m===\"shift+\"){g[b.hotkeys.shiftNums[o]]=true}}for(var j=0,f=e.length;jlatest version in which the problems have been fixed.'\n );\n}\nreturn retValue;\n}());\n\nconst supportsNonScalingStroke_ = (function () {\nconst rect = document.createElementNS(NS.SVG, 'rect');\nrect.setAttribute('style', 'vector-effect:non-scaling-stroke');\nreturn rect.style.vectorEffect === 'non-scaling-stroke';\n}());\n\nlet supportsNativeSVGTransformLists_ = (function () {\nconst rect = document.createElementNS(NS.SVG, 'rect');\nconst rxform = rect.transform.baseVal;\nconst t1 = svg.createSVGTransform();\nrxform.appendItem(t1);\nconst r1 = rxform.getItem(0);\nconst isSVGTransform = (o) => {\n // https://developer.mozilla.org/en-US/docs/Web/API/SVGTransform\n return o && typeof o === 'object' && typeof o.setMatrix === 'function' && 'angle' in o;\n};\nreturn isSVGTransform(r1) && isSVGTransform(t1) &&\n r1.type === t1.type && r1.angle === t1.angle &&\n r1.matrix.a === t1.matrix.a &&\n r1.matrix.b === t1.matrix.b &&\n r1.matrix.c === t1.matrix.c &&\n r1.matrix.d === t1.matrix.d &&\n r1.matrix.e === t1.matrix.e &&\n r1.matrix.f === t1.matrix.f;\n}());\n\n// Public API\n\n/**\n * @function module:browser.isOpera\n * @returns {boolean}\n*/\nexport const isOpera = () => isOpera_;\n/**\n * @function module:browser.isWebkit\n * @returns {boolean}\n*/\nexport const isWebkit = () => isWebkit_;\n/**\n * @function module:browser.isGecko\n * @returns {boolean}\n*/\nexport const isGecko = () => isGecko_;\n/**\n * @function module:browser.isIE\n * @returns {boolean}\n*/\nexport const isIE = () => isIE_;\n/**\n * @function module:browser.isChrome\n * @returns {boolean}\n*/\nexport const isChrome = () => isChrome_;\n/**\n * @function module:browser.isWindows\n * @returns {boolean}\n*/\nexport const isWindows = () => isWindows_;\n/**\n * @function module:browser.isMac\n * @returns {boolean}\n*/\nexport const isMac = () => isMac_;\n/**\n * @function module:browser.isTouch\n * @returns {boolean}\n*/\nexport const isTouch = () => isTouch_;\n\n/**\n * @function module:browser.supportsSelectors\n * @returns {boolean}\n*/\nexport const supportsSelectors = () => supportsSelectors_;\n\n/**\n * @function module:browser.supportsXpath\n * @returns {boolean}\n*/\nexport const supportsXpath = () => supportsXpath_;\n\n/**\n * @function module:browser.supportsPathReplaceItem\n * @returns {boolean}\n*/\nexport const supportsPathReplaceItem = () => supportsPathReplaceItem_;\n\n/**\n * @function module:browser.supportsPathInsertItemBefore\n * @returns {boolean}\n*/\nexport const supportsPathInsertItemBefore = () => supportsPathInsertItemBefore_;\n\n/**\n * @function module:browser.supportsPathBBox\n * @returns {boolean}\n*/\nexport const supportsPathBBox = () => supportsPathBBox_;\n\n/**\n * @function module:browser.supportsHVLineContainerBBox\n * @returns {boolean}\n*/\nexport const supportsHVLineContainerBBox = () => supportsHVLineContainerBBox_;\n\n/**\n * @function module:browser.supportsGoodTextCharPos\n * @returns {boolean}\n*/\nexport const supportsGoodTextCharPos = () => supportsGoodTextCharPos_;\n\n/**\n* @function module:browser.supportsEditableText\n * @returns {boolean}\n*/\nexport const supportsEditableText = () => supportsEditableText_;\n\n/**\n * @function module:browser.supportsGoodDecimals\n * @returns {boolean}\n*/\nexport const supportsGoodDecimals = () => supportsGoodDecimals_;\n\n/**\n* @function module:browser.supportsNonScalingStroke\n* @returns {boolean}\n*/\nexport const supportsNonScalingStroke = () => supportsNonScalingStroke_;\n\n/**\n* @function module:browser.supportsNativeTransformLists\n* @returns {boolean}\n*/\nexport const supportsNativeTransformLists = () => supportsNativeSVGTransformLists_;\n\n/**\n * Set `supportsNativeSVGTransformLists_` to `false` (for unit testing).\n * @function module:browser.disableSupportsNativeTransformLists\n * @returns {void}\n*/\nexport const disableSupportsNativeTransformLists = () => {\n supportsNativeSVGTransformLists_ = false;\n};\n","/**\n * A jQuery module to work with SVG attributes.\n * @module jQueryAttr\n * @license MIT\n */\n\n/**\n* This fixes `$(...).attr()` to work as expected with SVG elements.\n* Does not currently use `*AttributeNS()` since we rarely need that.\n* Adds {@link external:jQuery.fn.attr}.\n* See {@link https://api.jquery.com/attr/} for basic documentation of `.attr()`.\n*\n* Additional functionality:\n* - When getting attributes, a string that's a number is returned as type number.\n* - If an array is supplied as the first parameter, multiple values are returned\n* as an object with values for each given attribute.\n* @function module:jQueryAttr.jQueryAttr\n* @param {external:jQuery} $ The jQuery object to which to add the plug-in\n* @returns {external:jQuery}\n*/\nexport default function jQueryPluginSVG ($) {\n const proxied = $.fn.attr,\n svgns = 'http://www.w3.org/2000/svg';\n /**\n * @typedef {PlainObject} module:jQueryAttr.Attributes\n */\n /**\n * @function external:jQuery.fn.attr\n * @param {string|string[]|PlainObject} key\n * @param {string} value\n * @returns {external:jQuery|module:jQueryAttr.Attributes}\n */\n $.fn.attr = function (key, value) {\n const len = this.length;\n if (!len) { return proxied.call(this, key, value); }\n for (let i = 0; i < len; ++i) {\n const elem = this[i];\n // set/get SVG attribute\n if (elem.namespaceURI === svgns) {\n // Setting attribute\n if (value !== undefined) {\n elem.setAttribute(key, value);\n } else if (Array.isArray(key)) {\n // Getting attributes from array\n const obj = {};\n let j = key.length;\n\n while (j--) {\n const aname = key[j];\n let attr = elem.getAttribute(aname);\n // This returns a number when appropriate\n if (attr || attr === '0') {\n attr = isNaN(attr) ? attr : (attr - 0);\n }\n obj[aname] = attr;\n }\n return obj;\n }\n if (typeof key === 'object') {\n // Setting attributes from object\n for (const [name, val] of Object.entries(key)) {\n elem.setAttribute(name, val);\n }\n // Getting attribute\n } else {\n let attr = elem.getAttribute(key);\n if (attr || attr === '0') {\n attr = isNaN(attr) ? attr : (attr - 0);\n }\n return attr;\n }\n } else {\n return proxied.call(this, key, value);\n }\n }\n return this;\n };\n return $;\n}\n","/**\n * Partial polyfill of `SVGTransformList`\n * @module SVGTransformList\n *\n * @license MIT\n *\n * @copyright 2010 Alexis Deveria, 2010 Jeff Schiller\n */\n\nimport {NS} from './namespaces.js';\nimport {supportsNativeTransformLists} from './browser.js';\n\nconst svgroot = document.createElementNS(NS.SVG, 'svg');\n\n/**\n * Helper function to convert `SVGTransform` to a string.\n * @param {SVGTransform} xform\n * @returns {string}\n */\nfunction transformToString (xform) {\n const m = xform.matrix;\n let text = '';\n switch (xform.type) {\n case 1: // MATRIX\n text = 'matrix(' + [m.a, m.b, m.c, m.d, m.e, m.f].join(',') + ')';\n break;\n case 2: // TRANSLATE\n text = 'translate(' + m.e + ',' + m.f + ')';\n break;\n case 3: // SCALE\n if (m.a === m.d) {\n text = 'scale(' + m.a + ')';\n } else {\n text = 'scale(' + m.a + ',' + m.d + ')';\n }\n break;\n case 4: { // ROTATE\n let cx = 0;\n let cy = 0;\n // this prevents divide by zero\n if (xform.angle !== 0) {\n const K = 1 - m.a;\n cy = (K * m.f + m.b * m.e) / (K * K + m.b * m.b);\n cx = (m.e - m.b * cy) / K;\n }\n text = 'rotate(' + xform.angle + ' ' + cx + ',' + cy + ')';\n break;\n }\n }\n return text;\n}\n\n/**\n * Map of SVGTransformList objects.\n */\nlet listMap_ = {};\n\n/**\n* @interface module:SVGTransformList.SVGEditTransformList\n* @property {Integer} numberOfItems unsigned long\n*/\n/**\n* @function module:SVGTransformList.SVGEditTransformList#clear\n* @returns {void}\n*/\n/**\n* @function module:SVGTransformList.SVGEditTransformList#initialize\n* @param {SVGTransform} newItem\n* @returns {SVGTransform}\n*/\n/**\n* DOES NOT THROW DOMException, INDEX_SIZE_ERR.\n* @function module:SVGTransformList.SVGEditTransformList#getItem\n* @param {Integer} index unsigned long\n* @returns {SVGTransform}\n*/\n/**\n* DOES NOT THROW DOMException, INDEX_SIZE_ERR.\n* @function module:SVGTransformList.SVGEditTransformList#insertItemBefore\n* @param {SVGTransform} newItem\n* @param {Integer} index unsigned long\n* @returns {SVGTransform}\n*/\n/**\n* DOES NOT THROW DOMException, INDEX_SIZE_ERR.\n* @function module:SVGTransformList.SVGEditTransformList#replaceItem\n* @param {SVGTransform} newItem\n* @param {Integer} index unsigned long\n* @returns {SVGTransform}\n*/\n/**\n* DOES NOT THROW DOMException, INDEX_SIZE_ERR.\n* @function module:SVGTransformList.SVGEditTransformList#removeItem\n* @param {Integer} index unsigned long\n* @returns {SVGTransform}\n*/\n/**\n* @function module:SVGTransformList.SVGEditTransformList#appendItem\n* @param {SVGTransform} newItem\n* @returns {SVGTransform}\n*/\n/**\n* NOT IMPLEMENTED.\n* @ignore\n* @function module:SVGTransformList.SVGEditTransformList#createSVGTransformFromMatrix\n* @param {SVGMatrix} matrix\n* @returns {SVGTransform}\n*/\n/**\n* NOT IMPLEMENTED.\n* @ignore\n* @function module:SVGTransformList.SVGEditTransformList#consolidate\n* @returns {SVGTransform}\n*/\n\n/**\n* SVGTransformList implementation for Webkit.\n* These methods do not currently raise any exceptions.\n* These methods also do not check that transforms are being inserted. This is basically\n* implementing as much of SVGTransformList that we need to get the job done.\n* @implements {module:SVGTransformList.SVGEditTransformList}\n*/\nexport class SVGTransformList { // eslint-disable-line no-shadow\n /**\n * @param {Element} elem\n * @returns {SVGTransformList}\n */\n constructor (elem) {\n this._elem = elem || null;\n this._xforms = [];\n // TODO: how do we capture the undo-ability in the changed transform list?\n this._update = function () {\n let tstr = '';\n // /* const concatMatrix = */ svgroot.createSVGMatrix();\n for (let i = 0; i < this.numberOfItems; ++i) {\n const xform = this._list.getItem(i);\n tstr += transformToString(xform) + ' ';\n }\n this._elem.setAttribute('transform', tstr);\n };\n this._list = this;\n this._init = function () {\n // Transform attribute parser\n let str = this._elem.getAttribute('transform');\n if (!str) { return; }\n\n // TODO: Add skew support in future\n const re = /\\s*((scale|matrix|rotate|translate)\\s*\\(.*?\\))\\s*,?\\s*/;\n // const re = /\\s*(?(?:scale|matrix|rotate|translate)\\s*\\(.*?\\))\\s*,?\\s*/;\n let m = true;\n while (m) {\n m = str.match(re);\n str = str.replace(re, '');\n if (m && m[1]) {\n const x = m[1];\n const bits = x.split(/\\s*\\(/);\n const name = bits[0];\n const valBits = bits[1].match(/\\s*(.*?)\\s*\\)/);\n valBits[1] = valBits[1].replace(/(\\d)-/g, '$1 -');\n const valArr = valBits[1].split(/[, ]+/);\n const letters = 'abcdef'.split('');\n /*\n if (m && m.groups.xform) {\n const x = m.groups.xform;\n const [name, bits] = x.split(/\\s*\\(/);\n const valBits = bits.match(/\\s*(?.*?)\\s*\\)/);\n valBits.groups.nonWhitespace = valBits.groups.nonWhitespace.replace(\n /(?\\d)-/g, '$ -'\n );\n const valArr = valBits.groups.nonWhitespace.split(/[, ]+/);\n const letters = [...'abcdef'];\n */\n const mtx = svgroot.createSVGMatrix();\n Object.values(valArr).forEach(function (item, i) {\n valArr[i] = parseFloat(item);\n if (name === 'matrix') {\n mtx[letters[i]] = valArr[i];\n }\n });\n const xform = svgroot.createSVGTransform();\n const fname = 'set' + name.charAt(0).toUpperCase() + name.slice(1);\n const values = name === 'matrix' ? [mtx] : valArr;\n\n if (name === 'scale' && values.length === 1) {\n values.push(values[0]);\n } else if (name === 'translate' && values.length === 1) {\n values.push(0);\n } else if (name === 'rotate' && values.length === 1) {\n values.push(0, 0);\n }\n xform[fname](...values);\n this._list.appendItem(xform);\n }\n }\n };\n this._removeFromOtherLists = function (item) {\n if (item) {\n // Check if this transform is already in a transformlist, and\n // remove it if so.\n Object.values(listMap_).some((tl) => {\n for (let i = 0, len = tl._xforms.length; i < len; ++i) {\n if (tl._xforms[i] === item) {\n tl.removeItem(i);\n return true;\n }\n }\n return false;\n });\n }\n };\n\n this.numberOfItems = 0;\n }\n /**\n * @returns {void}\n */\n clear () {\n this.numberOfItems = 0;\n this._xforms = [];\n }\n\n /**\n * @param {SVGTransform} newItem\n * @returns {void}\n */\n initialize (newItem) {\n this.numberOfItems = 1;\n this._removeFromOtherLists(newItem);\n this._xforms = [newItem];\n }\n\n /**\n * @param {Integer} index unsigned long\n * @throws {Error}\n * @returns {SVGTransform}\n */\n getItem (index) {\n if (index < this.numberOfItems && index >= 0) {\n return this._xforms[index];\n }\n const err = new Error('DOMException with code=INDEX_SIZE_ERR');\n err.code = 1;\n throw err;\n }\n\n /**\n * @param {SVGTransform} newItem\n * @param {Integer} index unsigned long\n * @returns {SVGTransform}\n */\n insertItemBefore (newItem, index) {\n let retValue = null;\n if (index >= 0) {\n if (index < this.numberOfItems) {\n this._removeFromOtherLists(newItem);\n const newxforms = new Array(this.numberOfItems + 1);\n // TODO: use array copying and slicing\n let i;\n for (i = 0; i < index; ++i) {\n newxforms[i] = this._xforms[i];\n }\n newxforms[i] = newItem;\n for (let j = i + 1; i < this.numberOfItems; ++j, ++i) {\n newxforms[j] = this._xforms[i];\n }\n this.numberOfItems++;\n this._xforms = newxforms;\n retValue = newItem;\n this._list._update();\n } else {\n retValue = this._list.appendItem(newItem);\n }\n }\n return retValue;\n }\n\n /**\n * @param {SVGTransform} newItem\n * @param {Integer} index unsigned long\n * @returns {SVGTransform}\n */\n replaceItem (newItem, index) {\n let retValue = null;\n if (index < this.numberOfItems && index >= 0) {\n this._removeFromOtherLists(newItem);\n this._xforms[index] = newItem;\n retValue = newItem;\n this._list._update();\n }\n return retValue;\n }\n\n /**\n * @param {Integer} index unsigned long\n * @throws {Error}\n * @returns {SVGTransform}\n */\n removeItem (index) {\n if (index < this.numberOfItems && index >= 0) {\n const retValue = this._xforms[index];\n const newxforms = new Array(this.numberOfItems - 1);\n let i;\n for (i = 0; i < index; ++i) {\n newxforms[i] = this._xforms[i];\n }\n for (let j = i; j < this.numberOfItems - 1; ++j, ++i) {\n newxforms[j] = this._xforms[i + 1];\n }\n this.numberOfItems--;\n this._xforms = newxforms;\n this._list._update();\n return retValue;\n }\n const err = new Error('DOMException with code=INDEX_SIZE_ERR');\n err.code = 1;\n throw err;\n }\n\n /**\n * @param {SVGTransform} newItem\n * @returns {SVGTransform}\n */\n appendItem (newItem) {\n this._removeFromOtherLists(newItem);\n this._xforms.push(newItem);\n this.numberOfItems++;\n this._list._update();\n return newItem;\n }\n}\n\n/**\n* @function module:SVGTransformList.resetListMap\n* @returns {void}\n*/\nexport const resetListMap = function () {\n listMap_ = {};\n};\n\n/**\n * Removes transforms of the given element from the map.\n * @function module:SVGTransformList.removeElementFromListMap\n * @param {Element} elem - a DOM Element\n * @returns {void}\n */\nexport let removeElementFromListMap = function (elem) { // eslint-disable-line import/no-mutable-exports\n if (elem.id && listMap_[elem.id]) {\n delete listMap_[elem.id];\n }\n};\n\n/**\n* Returns an object that behaves like a `SVGTransformList` for the given DOM element.\n* @function module:SVGTransformList.getTransformList\n* @param {Element} elem - DOM element to get a transformlist from\n* @todo The polyfill should have `SVGAnimatedTransformList` and this should use it\n* @returns {SVGAnimatedTransformList|SVGTransformList}\n*/\nexport const getTransformList = function (elem) {\n if (!supportsNativeTransformLists()) {\n const id = elem.id || 'temp';\n let t = listMap_[id];\n if (!t || id === 'temp') {\n listMap_[id] = new SVGTransformList(elem);\n listMap_[id]._init();\n t = listMap_[id];\n }\n return t;\n }\n if (elem.transform) {\n return elem.transform.baseVal;\n }\n if (elem.gradientTransform) {\n return elem.gradientTransform.baseVal;\n }\n if (elem.patternTransform) {\n return elem.patternTransform.baseVal;\n }\n\n return null;\n};\n\n/**\n* @callback module:SVGTransformList.removeElementFromListMap\n* @param {Element} elem\n* @returns {void}\n*/\n/**\n* Replace `removeElementFromListMap` for unit-testing.\n* @function module:SVGTransformList.changeRemoveElementFromListMap\n* @param {module:SVGTransformList.removeElementFromListMap} cb Passed a single argument `elem`\n* @returns {void}\n*/\n\nexport const changeRemoveElementFromListMap = function (cb) { // eslint-disable-line promise/prefer-await-to-callbacks\n removeElementFromListMap = cb;\n};\n","/**\n * Tools for working with units.\n * @module units\n * @license MIT\n *\n * @copyright 2010 Alexis Deveria, 2010 Jeff Schiller\n */\n\nimport {NS} from './namespaces.js';\nimport {isNullish} from './utilities.js';\n\nconst wAttrs = ['x', 'x1', 'cx', 'rx', 'width'];\nconst hAttrs = ['y', 'y1', 'cy', 'ry', 'height'];\nconst unitAttrs = ['r', 'radius', ...wAttrs, ...hAttrs];\n// unused\n/*\nconst unitNumMap = {\n '%': 2,\n em: 3,\n ex: 4,\n px: 5,\n cm: 6,\n mm: 7,\n in: 8,\n pt: 9,\n pc: 10\n};\n*/\n// Container of elements.\nlet elementContainer_;\n\n// Stores mapping of unit type to user coordinates.\nlet typeMap_ = {};\n\n/**\n * @interface module:units.ElementContainer\n */\n/**\n * @function module:units.ElementContainer#getBaseUnit\n * @returns {string} The base unit type of the container ('em')\n */\n/**\n * @function module:units.ElementContainer#getElement\n * @returns {?Element} An element in the container given an id\n */\n/**\n * @function module:units.ElementContainer#getHeight\n * @returns {Float} The container's height\n */\n/**\n * @function module:units.ElementContainer#getWidth\n * @returns {Float} The container's width\n */\n/**\n * @function module:units.ElementContainer#getRoundDigits\n * @returns {Integer} The number of digits number should be rounded to\n */\n\n/**\n * @typedef {PlainObject} module:units.TypeMap\n * @property {Float} em\n * @property {Float} ex\n * @property {Float} in\n * @property {Float} cm\n * @property {Float} mm\n * @property {Float} pt\n * @property {Float} pc\n * @property {Integer} px\n * @property {0} %\n */\n\n/**\n * Initializes this module.\n *\n * @function module:units.init\n * @param {module:units.ElementContainer} elementContainer - An object implementing the ElementContainer interface.\n * @returns {void}\n */\nexport const init = function (elementContainer) {\n elementContainer_ = elementContainer;\n\n // Get correct em/ex values by creating a temporary SVG.\n const svg = document.createElementNS(NS.SVG, 'svg');\n document.body.append(svg);\n const rect = document.createElementNS(NS.SVG, 'rect');\n rect.setAttribute('width', '1em');\n rect.setAttribute('height', '1ex');\n rect.setAttribute('x', '1in');\n svg.append(rect);\n const bb = rect.getBBox();\n svg.remove();\n\n const inch = bb.x;\n typeMap_ = {\n em: bb.width,\n ex: bb.height,\n in: inch,\n cm: inch / 2.54,\n mm: inch / 25.4,\n pt: inch / 72,\n pc: inch / 6,\n px: 1,\n '%': 0\n };\n};\n\n/**\n* Group: Unit conversion functions.\n*/\n\n/**\n * @function module:units.getTypeMap\n * @returns {module:units.TypeMap} The unit object with values for each unit\n*/\nexport const getTypeMap = function () {\n return typeMap_;\n};\n\n/**\n* @typedef {GenericArray} module:units.CompareNumbers\n* @property {Integer} length 2\n* @property {Float} 0\n* @property {Float} 1\n*/\n\n/**\n* Rounds a given value to a float with number of digits defined in\n* `round_digits` of `saveOptions`\n*\n* @function module:units.shortFloat\n* @param {string|Float|module:units.CompareNumbers} val - The value (or Array of two numbers) to be rounded\n* @returns {Float|string} If a string/number was given, returns a Float. If an array, return a string\n* with comma-separated floats\n*/\nexport const shortFloat = function (val) {\n const digits = elementContainer_.getRoundDigits();\n if (!isNaN(val)) {\n return Number(Number(val).toFixed(digits));\n }\n if (Array.isArray(val)) {\n return shortFloat(val[0]) + ',' + shortFloat(val[1]);\n }\n return parseFloat(val).toFixed(digits) - 0;\n};\n\n/**\n* Converts the number to given unit or baseUnit.\n* @function module:units.convertUnit\n* @param {string|Float} val\n* @param {\"em\"|\"ex\"|\"in\"|\"cm\"|\"mm\"|\"pt\"|\"pc\"|\"px\"|\"%\"} [unit]\n* @returns {Float}\n*/\nexport const convertUnit = function (val, unit) {\n unit = unit || elementContainer_.getBaseUnit();\n // baseVal.convertToSpecifiedUnits(unitNumMap[unit]);\n // const val = baseVal.valueInSpecifiedUnits;\n // baseVal.convertToSpecifiedUnits(1);\n return shortFloat(val / typeMap_[unit]);\n};\n\n/**\n* Sets an element's attribute based on the unit in its current value.\n*\n* @function module:units.setUnitAttr\n* @param {Element} elem - DOM element to be changed\n* @param {string} attr - Name of the attribute associated with the value\n* @param {string} val - Attribute value to convert\n* @returns {void}\n*/\nexport const setUnitAttr = function (elem, attr, val) {\n // if (!isNaN(val)) {\n // New value is a number, so check currently used unit\n // const oldVal = elem.getAttribute(attr);\n\n // Enable this for alternate mode\n // if (oldVal !== null && (isNaN(oldVal) || elementContainer_.getBaseUnit() !== 'px')) {\n // // Old value was a number, so get unit, then convert\n // let unit;\n // if (oldVal.substr(-1) === '%') {\n // const res = getResolution();\n // unit = '%';\n // val *= 100;\n // if (wAttrs.includes(attr)) {\n // val = val / res.w;\n // } else if (hAttrs.includes(attr)) {\n // val = val / res.h;\n // } else {\n // return val / Math.sqrt((res.w*res.w) + (res.h*res.h))/Math.sqrt(2);\n // }\n // } else {\n // if (elementContainer_.getBaseUnit() !== 'px') {\n // unit = elementContainer_.getBaseUnit();\n // } else {\n // unit = oldVal.substr(-2);\n // }\n // val = val / typeMap_[unit];\n // }\n //\n // val += unit;\n // }\n // }\n elem.setAttribute(attr, val);\n};\n\nconst attrsToConvert = {\n line: ['x1', 'x2', 'y1', 'y2'],\n circle: ['cx', 'cy', 'r'],\n ellipse: ['cx', 'cy', 'rx', 'ry'],\n foreignObject: ['x', 'y', 'width', 'height'],\n rect: ['x', 'y', 'width', 'height'],\n image: ['x', 'y', 'width', 'height'],\n use: ['x', 'y', 'width', 'height'],\n text: ['x', 'y']\n};\n\n/**\n* Converts all applicable attributes to the configured baseUnit.\n* @function module:units.convertAttrs\n* @param {Element} element - A DOM element whose attributes should be converted\n* @returns {void}\n*/\nexport const convertAttrs = function (element) {\n const elName = element.tagName;\n const unit = elementContainer_.getBaseUnit();\n const attrs = attrsToConvert[elName];\n if (!attrs) { return; }\n\n const len = attrs.length;\n for (let i = 0; i < len; i++) {\n const attr = attrs[i];\n const cur = element.getAttribute(attr);\n if (cur) {\n if (!isNaN(cur)) {\n element.setAttribute(attr, (cur / typeMap_[unit]) + unit);\n }\n // else {\n // Convert existing?\n // }\n }\n }\n};\n\n/**\n* Converts given values to numbers. Attributes must be supplied in\n* case a percentage is given.\n*\n* @function module:units.convertToNum\n* @param {string} attr - Name of the attribute associated with the value\n* @param {string} val - Attribute value to convert\n* @returns {Float} The converted number\n*/\nexport const convertToNum = function (attr, val) {\n // Return a number if that's what it already is\n if (!isNaN(val)) { return val - 0; }\n if (val.substr(-1) === '%') {\n // Deal with percentage, depends on attribute\n const num = val.substr(0, val.length - 1) / 100;\n const width = elementContainer_.getWidth();\n const height = elementContainer_.getHeight();\n\n if (wAttrs.includes(attr)) {\n return num * width;\n }\n if (hAttrs.includes(attr)) {\n return num * height;\n }\n return num * Math.sqrt((width * width) + (height * height)) / Math.sqrt(2);\n }\n const unit = val.substr(-2);\n const num = val.substr(0, val.length - 2);\n // Note that this multiplication turns the string into a number\n return num * typeMap_[unit];\n};\n\n/**\n* Check if an attribute's value is in a valid format.\n* @function module:units.isValidUnit\n* @param {string} attr - The name of the attribute associated with the value\n* @param {string} val - The attribute value to check\n* @param {Element} selectedElement\n* @returns {boolean} Whether the unit is valid\n*/\nexport const isValidUnit = function (attr, val, selectedElement) {\n if (unitAttrs.includes(attr)) {\n // True if it's just a number\n if (!isNaN(val)) {\n return true;\n }\n // Not a number, check if it has a valid unit\n val = val.toLowerCase();\n return Object.keys(typeMap_).some((unit) => {\n const re = new RegExp('^-?[\\\\d\\\\.]+' + unit + '$');\n return re.test(val);\n });\n }\n if (attr === 'id') {\n // if we're trying to change the id, make sure it's not already present in the doc\n // and the id value is valid.\n\n let result = false;\n // because getElem() can throw an exception in the case of an invalid id\n // (according to https://www.w3.org/TR/xml-id/ IDs must be a NCName)\n // we wrap it in an exception and only return true if the ID was valid and\n // not already present\n try {\n const elem = elementContainer_.getElement(val);\n result = (isNullish(elem) || elem === selectedElement);\n } catch (e) {}\n return result;\n }\n return true;\n};\n","/**\n * For command history tracking and undo functionality.\n * @module history\n * @license MIT\n * @copyright 2010 Jeff Schiller\n */\n\nimport {getHref, setHref, getRotationAngle, isNullish} from './utilities.js';\nimport {removeElementFromListMap} from './svgtransformlist.js';\n\n/**\n* Group: Undo/Redo history management.\n*/\nexport const HistoryEventTypes = {\n BEFORE_APPLY: 'before_apply',\n AFTER_APPLY: 'after_apply',\n BEFORE_UNAPPLY: 'before_unapply',\n AFTER_UNAPPLY: 'after_unapply'\n};\n\n// const removedElements = {};\n\n/**\n* Base class for commands.\n*/\nclass Command {\n /**\n * @returns {string}\n */\n getText () {\n return this.text;\n }\n}\n\n// Todo: Figure out why the interface members aren't showing\n// up (with or without modules applied), despite our apparently following\n// http://usejsdoc.org/tags-interface.html#virtual-comments\n\n/**\n * An interface that all command objects must implement.\n * @interface module:history.HistoryCommand\n*/\n/**\n * Applies.\n *\n * @function module:history.HistoryCommand#apply\n * @param {module:history.HistoryEventHandler} handler\n * @fires module:history~Command#event:history\n * @returns {void|true}\n */\n/**\n *\n * Unapplies.\n * @function module:history.HistoryCommand#unapply\n * @param {module:history.HistoryEventHandler} handler\n * @fires module:history~Command#event:history\n * @returns {void|true}\n */\n/**\n * Returns the elements.\n * @function module:history.HistoryCommand#elements\n * @returns {Element[]}\n */\n/**\n * Gets the text.\n * @function module:history.HistoryCommand#getText\n * @returns {string}\n */\n/**\n * Gives the type.\n * @function module:history.HistoryCommand.type\n * @returns {string}\n */\n/**\n * Gives the type.\n * @function module:history.HistoryCommand#type\n * @returns {string}\n*/\n\n/**\n * @event module:history~Command#event:history\n * @type {module:history.HistoryCommand}\n */\n\n/**\n * An interface for objects that will handle history events.\n * @interface module:history.HistoryEventHandler\n */\n/**\n *\n * @function module:history.HistoryEventHandler#handleHistoryEvent\n * @param {string} eventType One of the HistoryEvent types\n * @param {module:history~Command#event:history} command\n * @listens module:history~Command#event:history\n * @returns {void}\n *\n */\n\n/**\n * History command for an element that had its DOM position changed.\n * @implements {module:history.HistoryCommand}\n * @param {Element} elem - The DOM element that was moved\n * @param {Element} oldNextSibling - The element's next sibling before it was moved\n * @param {Element} oldParent - The element's parent before it was moved\n * @param {string} [text] - An optional string visible to user related to this change\n*/\nexport class MoveElementCommand extends Command {\n constructor (elem, oldNextSibling, oldParent, text) {\n super();\n this.elem = elem;\n this.text = text ? ('Move ' + elem.tagName + ' to ' + text) : ('Move ' + elem.tagName);\n this.oldNextSibling = oldNextSibling;\n this.oldParent = oldParent;\n this.newNextSibling = elem.nextSibling;\n this.newParent = elem.parentNode;\n }\n type () { // eslint-disable-line class-methods-use-this\n return 'svgedit.history.MoveElementCommand';\n }\n\n /**\n * Re-positions the element.\n * @param {module:history.HistoryEventHandler} handler\n * @fires module:history~Command#event:history\n * @returns {void}\n */\n apply (handler) {\n // TODO(codedread): Refactor this common event code into a base HistoryCommand class.\n if (handler) {\n handler.handleHistoryEvent(HistoryEventTypes.BEFORE_APPLY, this);\n }\n\n this.elem = this.newParent.insertBefore(this.elem, this.newNextSibling);\n\n if (handler) {\n handler.handleHistoryEvent(HistoryEventTypes.AFTER_APPLY, this);\n }\n }\n\n /**\n * Positions the element back to its original location.\n * @param {module:history.HistoryEventHandler} handler\n * @fires module:history~Command#event:history\n * @returns {void}\n */\n unapply (handler) {\n if (handler) {\n handler.handleHistoryEvent(HistoryEventTypes.BEFORE_UNAPPLY, this);\n }\n\n this.elem = this.oldParent.insertBefore(this.elem, this.oldNextSibling);\n\n if (handler) {\n handler.handleHistoryEvent(HistoryEventTypes.AFTER_UNAPPLY, this);\n }\n }\n\n /**\n * @returns {Element[]} Array with element associated with this command\n */\n elements () {\n return [this.elem];\n }\n}\nMoveElementCommand.type = MoveElementCommand.prototype.type;\n\n/**\n* History command for an element that was added to the DOM.\n* @implements {module:history.HistoryCommand}\n*\n* @param {Element} elem - The newly added DOM element\n* @param {string} text - An optional string visible to user related to this change\n*/\nexport class InsertElementCommand extends Command {\n constructor (elem, text) {\n super();\n this.elem = elem;\n this.text = text || ('Create ' + elem.tagName);\n this.parent = elem.parentNode;\n this.nextSibling = this.elem.nextSibling;\n }\n\n type () { // eslint-disable-line class-methods-use-this\n return 'svgedit.history.InsertElementCommand';\n }\n\n /**\n * Re-inserts the new element.\n * @param {module:history.HistoryEventHandler} handler\n * @fires module:history~Command#event:history\n * @returns {void}\n */\n apply (handler) {\n if (handler) {\n handler.handleHistoryEvent(HistoryEventTypes.BEFORE_APPLY, this);\n }\n\n this.elem = this.parent.insertBefore(this.elem, this.nextSibling);\n\n if (handler) {\n handler.handleHistoryEvent(HistoryEventTypes.AFTER_APPLY, this);\n }\n }\n\n /**\n * Removes the element.\n * @param {module:history.HistoryEventHandler} handler\n * @fires module:history~Command#event:history\n * @returns {void}\n */\n unapply (handler) {\n if (handler) {\n handler.handleHistoryEvent(HistoryEventTypes.BEFORE_UNAPPLY, this);\n }\n\n this.parent = this.elem.parentNode;\n this.elem = this.elem.parentNode.removeChild(this.elem);\n\n if (handler) {\n handler.handleHistoryEvent(HistoryEventTypes.AFTER_UNAPPLY, this);\n }\n }\n\n /**\n * @returns {Element[]} Array with element associated with this command\n */\n elements () {\n return [this.elem];\n }\n}\nInsertElementCommand.type = InsertElementCommand.prototype.type;\n\n/**\n* History command for an element removed from the DOM.\n* @implements {module:history.HistoryCommand}\n* @param {Element} elem - The removed DOM element\n* @param {Node} oldNextSibling - The DOM element's nextSibling when it was in the DOM\n* @param {Element} oldParent - The DOM element's parent\n* @param {string} [text] - An optional string visible to user related to this change\n*/\nexport class RemoveElementCommand extends Command {\n constructor (elem, oldNextSibling, oldParent, text) {\n super();\n this.elem = elem;\n this.text = text || ('Delete ' + elem.tagName);\n this.nextSibling = oldNextSibling;\n this.parent = oldParent;\n\n // special hack for webkit: remove this element's entry in the svgTransformLists map\n removeElementFromListMap(elem);\n }\n type () { // eslint-disable-line class-methods-use-this\n return 'svgedit.history.RemoveElementCommand';\n }\n\n /**\n * Re-removes the new element.\n * @param {module:history.HistoryEventHandler} handler\n * @fires module:history~Command#event:history\n * @returns {void}\n */\n apply (handler) {\n if (handler) {\n handler.handleHistoryEvent(HistoryEventTypes.BEFORE_APPLY, this);\n }\n\n removeElementFromListMap(this.elem);\n this.parent = this.elem.parentNode;\n this.elem = this.parent.removeChild(this.elem);\n\n if (handler) {\n handler.handleHistoryEvent(HistoryEventTypes.AFTER_APPLY, this);\n }\n }\n\n /**\n * Re-adds the new element.\n * @param {module:history.HistoryEventHandler} handler\n * @fires module:history~Command#event:history\n * @returns {void}\n */\n unapply (handler) {\n if (handler) {\n handler.handleHistoryEvent(HistoryEventTypes.BEFORE_UNAPPLY, this);\n }\n\n removeElementFromListMap(this.elem);\n if (isNullish(this.nextSibling)) {\n if (window.console) {\n console.log('Error: reference element was lost'); // eslint-disable-line no-console\n }\n }\n this.parent.insertBefore(this.elem, this.nextSibling); // Don't use `before` or `prepend` as `this.nextSibling` may be `null`\n\n if (handler) {\n handler.handleHistoryEvent(HistoryEventTypes.AFTER_UNAPPLY, this);\n }\n }\n\n /**\n * @returns {Element[]} Array with element associated with this command\n */\n elements () {\n return [this.elem];\n }\n}\nRemoveElementCommand.type = RemoveElementCommand.prototype.type;\n\n/**\n* @typedef {\"#text\"|\"#href\"|string} module:history.CommandAttributeName\n*/\n/**\n* @typedef {PlainObject} module:history.CommandAttributes\n*/\n\n/**\n* History command to make a change to an element.\n* Usually an attribute change, but can also be textcontent.\n* @implements {module:history.HistoryCommand}\n* @param {Element} elem - The DOM element that was changed\n* @param {module:history.CommandAttributes} attrs - Attributes to be changed with the values they had *before* the change\n* @param {string} text - An optional string visible to user related to this change\n*/\nexport class ChangeElementCommand extends Command {\n constructor (elem, attrs, text) {\n super();\n this.elem = elem;\n this.text = text ? ('Change ' + elem.tagName + ' ' + text) : ('Change ' + elem.tagName);\n this.newValues = {};\n this.oldValues = attrs;\n for (const attr in attrs) {\n if (attr === '#text') {\n this.newValues[attr] = elem.textContent;\n } else if (attr === '#href') {\n this.newValues[attr] = getHref(elem);\n } else {\n this.newValues[attr] = elem.getAttribute(attr);\n }\n }\n }\n type () { // eslint-disable-line class-methods-use-this\n return 'svgedit.history.ChangeElementCommand';\n }\n\n /**\n * Performs the stored change action.\n * @param {module:history.HistoryEventHandler} handler\n * @fires module:history~Command#event:history\n * @returns {true}\n */\n apply (handler) {\n if (handler) {\n handler.handleHistoryEvent(HistoryEventTypes.BEFORE_APPLY, this);\n }\n\n let bChangedTransform = false;\n Object.entries(this.newValues).forEach(([attr, value]) => {\n if (value) {\n if (attr === '#text') {\n this.elem.textContent = value;\n } else if (attr === '#href') {\n setHref(this.elem, value);\n } else {\n this.elem.setAttribute(attr, value);\n }\n } else if (attr === '#text') {\n this.elem.textContent = '';\n } else {\n this.elem.setAttribute(attr, '');\n this.elem.removeAttribute(attr);\n }\n\n if (attr === 'transform') { bChangedTransform = true; }\n });\n\n // relocate rotational transform, if necessary\n if (!bChangedTransform) {\n const angle = getRotationAngle(this.elem);\n if (angle) {\n const bbox = this.elem.getBBox();\n const cx = bbox.x + bbox.width / 2,\n cy = bbox.y + bbox.height / 2;\n const rotate = ['rotate(', angle, ' ', cx, ',', cy, ')'].join('');\n if (rotate !== this.elem.getAttribute('transform')) {\n this.elem.setAttribute('transform', rotate);\n }\n }\n }\n\n if (handler) {\n handler.handleHistoryEvent(HistoryEventTypes.AFTER_APPLY, this);\n }\n\n return true;\n }\n\n /**\n * Reverses the stored change action.\n * @param {module:history.HistoryEventHandler} handler\n * @fires module:history~Command#event:history\n * @returns {true}\n */\n unapply (handler) {\n if (handler) {\n handler.handleHistoryEvent(HistoryEventTypes.BEFORE_UNAPPLY, this);\n }\n\n let bChangedTransform = false;\n Object.entries(this.oldValues).forEach(([attr, value]) => {\n if (value) {\n if (attr === '#text') {\n this.elem.textContent = value;\n } else if (attr === '#href') {\n setHref(this.elem, value);\n } else {\n this.elem.setAttribute(attr, value);\n }\n } else if (attr === '#text') {\n this.elem.textContent = '';\n } else {\n this.elem.removeAttribute(attr);\n }\n if (attr === 'transform') { bChangedTransform = true; }\n });\n // relocate rotational transform, if necessary\n if (!bChangedTransform) {\n const angle = getRotationAngle(this.elem);\n if (angle) {\n const bbox = this.elem.getBBox();\n const cx = bbox.x + bbox.width / 2,\n cy = bbox.y + bbox.height / 2;\n const rotate = ['rotate(', angle, ' ', cx, ',', cy, ')'].join('');\n if (rotate !== this.elem.getAttribute('transform')) {\n this.elem.setAttribute('transform', rotate);\n }\n }\n }\n\n // Remove transformlist to prevent confusion that causes bugs like 575.\n removeElementFromListMap(this.elem);\n\n if (handler) {\n handler.handleHistoryEvent(HistoryEventTypes.AFTER_UNAPPLY, this);\n }\n\n return true;\n }\n\n /**\n * @returns {Element[]} Array with element associated with this command\n */\n elements () {\n return [this.elem];\n }\n}\nChangeElementCommand.type = ChangeElementCommand.prototype.type;\n\n// TODO: create a 'typing' command object that tracks changes in text\n// if a new Typing command is created and the top command on the stack is also a Typing\n// and they both affect the same element, then collapse the two commands into one\n\n/**\n* History command that can contain/execute multiple other commands.\n* @implements {module:history.HistoryCommand}\n*/\nexport class BatchCommand extends Command {\n /**\n * @param {string} [text] - An optional string visible to user related to this change\n */\n constructor (text) {\n super();\n this.text = text || 'Batch Command';\n this.stack = [];\n }\n\n type () { // eslint-disable-line class-methods-use-this\n return 'svgedit.history.BatchCommand';\n }\n\n /**\n * Runs \"apply\" on all subcommands.\n * @param {module:history.HistoryEventHandler} handler\n * @fires module:history~Command#event:history\n * @returns {void}\n */\n apply (handler) {\n if (handler) {\n handler.handleHistoryEvent(HistoryEventTypes.BEFORE_APPLY, this);\n }\n\n const len = this.stack.length;\n for (let i = 0; i < len; ++i) {\n this.stack[i].apply(handler);\n }\n\n if (handler) {\n handler.handleHistoryEvent(HistoryEventTypes.AFTER_APPLY, this);\n }\n }\n\n /**\n * Runs \"unapply\" on all subcommands.\n * @param {module:history.HistoryEventHandler} handler\n * @fires module:history~Command#event:history\n * @returns {void}\n */\n unapply (handler) {\n if (handler) {\n handler.handleHistoryEvent(HistoryEventTypes.BEFORE_UNAPPLY, this);\n }\n\n for (let i = this.stack.length - 1; i >= 0; i--) {\n this.stack[i].unapply(handler);\n }\n\n if (handler) {\n handler.handleHistoryEvent(HistoryEventTypes.AFTER_UNAPPLY, this);\n }\n }\n\n /**\n * Iterate through all our subcommands.\n * @returns {Element[]} All the elements we are changing\n */\n elements () {\n const elems = [];\n let cmd = this.stack.length;\n while (cmd--) {\n const thisElems = this.stack[cmd].elements();\n let elem = thisElems.length;\n while (elem--) {\n if (!elems.includes(thisElems[elem])) { elems.push(thisElems[elem]); }\n }\n }\n return elems;\n }\n\n /**\n * Adds a given command to the history stack.\n * @param {Command} cmd - The undo command object to add\n * @returns {void}\n */\n addSubCommand (cmd) {\n this.stack.push(cmd);\n }\n\n /**\n * @returns {boolean} Indicates whether or not the batch command is empty\n */\n isEmpty () {\n return !this.stack.length;\n }\n}\nBatchCommand.type = BatchCommand.prototype.type;\n\n/**\n*\n*/\nexport class UndoManager {\n /**\n * @param {module:history.HistoryEventHandler} historyEventHandler\n */\n constructor (historyEventHandler) {\n this.handler_ = historyEventHandler || null;\n this.undoStackPointer = 0;\n this.undoStack = [];\n\n // this is the stack that stores the original values, the elements and\n // the attribute name for begin/finish\n this.undoChangeStackPointer = -1;\n this.undoableChangeStack = [];\n }\n\n /**\n * Resets the undo stack, effectively clearing the undo/redo history.\n * @returns {void}\n */\n resetUndoStack () {\n this.undoStack = [];\n this.undoStackPointer = 0;\n }\n\n /**\n * @returns {Integer} Current size of the undo history stack\n */\n getUndoStackSize () {\n return this.undoStackPointer;\n }\n\n /**\n * @returns {Integer} Current size of the redo history stack\n */\n getRedoStackSize () {\n return this.undoStack.length - this.undoStackPointer;\n }\n\n /**\n * @returns {string} String associated with the next undo command\n */\n getNextUndoCommandText () {\n return this.undoStackPointer > 0 ? this.undoStack[this.undoStackPointer - 1].getText() : '';\n }\n\n /**\n * @returns {string} String associated with the next redo command\n */\n getNextRedoCommandText () {\n return this.undoStackPointer < this.undoStack.length ? this.undoStack[this.undoStackPointer].getText() : '';\n }\n\n /**\n * Performs an undo step.\n * @returns {void}\n */\n undo () {\n if (this.undoStackPointer > 0) {\n const cmd = this.undoStack[--this.undoStackPointer];\n cmd.unapply(this.handler_);\n }\n }\n\n /**\n * Performs a redo step.\n * @returns {void}\n */\n redo () {\n if (this.undoStackPointer < this.undoStack.length && this.undoStack.length > 0) {\n const cmd = this.undoStack[this.undoStackPointer++];\n cmd.apply(this.handler_);\n }\n }\n\n /**\n * Adds a command object to the undo history stack.\n * @param {Command} cmd - The command object to add\n * @returns {void}\n */\n addCommandToHistory (cmd) {\n // TODO: we MUST compress consecutive text changes to the same element\n // (right now each keystroke is saved as a separate command that includes the\n // entire text contents of the text element)\n // TODO: consider limiting the history that we store here (need to do some slicing)\n\n // if our stack pointer is not at the end, then we have to remove\n // all commands after the pointer and insert the new command\n if (this.undoStackPointer < this.undoStack.length && this.undoStack.length > 0) {\n this.undoStack = this.undoStack.splice(0, this.undoStackPointer);\n }\n this.undoStack.push(cmd);\n this.undoStackPointer = this.undoStack.length;\n }\n\n /**\n * This function tells the canvas to remember the old values of the\n * `attrName` attribute for each element sent in. The elements and values\n * are stored on a stack, so the next call to `finishUndoableChange()` will\n * pop the elements and old values off the stack, gets the current values\n * from the DOM and uses all of these to construct the undo-able command.\n * @param {string} attrName - The name of the attribute being changed\n * @param {Element[]} elems - Array of DOM elements being changed\n * @returns {void}\n */\n beginUndoableChange (attrName, elems) {\n const p = ++this.undoChangeStackPointer;\n let i = elems.length;\n const oldValues = new Array(i), elements = new Array(i);\n while (i--) {\n const elem = elems[i];\n if (isNullish(elem)) { continue; }\n elements[i] = elem;\n oldValues[i] = elem.getAttribute(attrName);\n }\n this.undoableChangeStack[p] = {\n attrName,\n oldValues,\n elements\n };\n }\n\n /**\n * This function returns a `BatchCommand` object which summarizes the\n * change since `beginUndoableChange` was called. The command can then\n * be added to the command history.\n * @returns {BatchCommand} Batch command object with resulting changes\n */\n finishUndoableChange () {\n const p = this.undoChangeStackPointer--;\n const changeset = this.undoableChangeStack[p];\n const {attrName} = changeset;\n const batchCmd = new BatchCommand('Change ' + attrName);\n let i = changeset.elements.length;\n while (i--) {\n const elem = changeset.elements[i];\n if (isNullish(elem)) { continue; }\n const changes = {};\n changes[attrName] = changeset.oldValues[i];\n if (changes[attrName] !== elem.getAttribute(attrName)) {\n batchCmd.addSubCommand(new ChangeElementCommand(elem, changes, attrName));\n }\n }\n this.undoableChangeStack[p] = null;\n return batchCmd;\n }\n}\n","/* globals jQuery */\n/**\n * Path functionality.\n * @module path\n * @license MIT\n *\n * @copyright 2011 Alexis Deveria, 2011 Jeff Schiller\n */\n\nimport './svgpathseg.js';\nimport {NS} from './namespaces.js';\nimport {getTransformList} from './svgtransformlist.js';\nimport {shortFloat} from './units.js';\nimport {ChangeElementCommand, BatchCommand} from './history.js';\nimport {\n transformPoint, getMatrix, snapToAngle, rectsIntersect,\n transformListToTransform\n} from './math.js';\nimport {\n assignAttributes, getElem, getRotationAngle, getBBox,\n getRefElem, findDefs, snapToGrid, isNullish,\n getBBox as utilsGetBBox\n} from './utilities.js';\nimport {\n supportsPathInsertItemBefore, supportsPathReplaceItem, isWebkit\n} from './browser.js';\n\nconst $ = jQuery;\n\nconst segData = {\n 2: ['x', 'y'], // PATHSEG_MOVETO_ABS\n 4: ['x', 'y'], // PATHSEG_LINETO_ABS\n 6: ['x', 'y', 'x1', 'y1', 'x2', 'y2'], // PATHSEG_CURVETO_CUBIC_ABS\n 8: ['x', 'y', 'x1', 'y1'], // PATHSEG_CURVETO_QUADRATIC_ABS\n 10: ['x', 'y', 'r1', 'r2', 'angle', 'largeArcFlag', 'sweepFlag'], // PATHSEG_ARC_ABS\n 12: ['x'], // PATHSEG_LINETO_HORIZONTAL_ABS\n 14: ['y'], // PATHSEG_LINETO_VERTICAL_ABS\n 16: ['x', 'y', 'x2', 'y2'], // PATHSEG_CURVETO_CUBIC_SMOOTH_ABS\n 18: ['x', 'y'] // PATHSEG_CURVETO_QUADRATIC_SMOOTH_ABS\n};\n\n/**\n * @tutorial LocaleDocs\n * @typedef {module:locale.LocaleStrings|PlainObject} module:path.uiStrings\n * @property {PlainObject} ui\n*/\n\nconst uiStrings = {};\n/**\n* @function module:path.setUiStrings\n* @param {module:path.uiStrings} strs\n* @returns {void}\n*/\nexport const setUiStrings = function (strs) {\n Object.assign(uiStrings, strs.ui);\n};\n\nlet pathFuncs = [];\n\nlet linkControlPts = true;\n\n// Stores references to paths via IDs.\n// TODO: Make this cross-document happy.\nlet pathData = {};\n\n/**\n* @function module:path.setLinkControlPoints\n* @param {boolean} lcp\n* @returns {void}\n*/\nexport const setLinkControlPoints = function (lcp) {\n linkControlPts = lcp;\n};\n\n/**\n * @name module:path.path\n * @type {null|module:path.Path}\n * @memberof module:path\n*/\nexport let path = null; // eslint-disable-line import/no-mutable-exports\n\nlet editorContext_ = null;\n\n/**\n* @external MouseEvent\n*/\n\n/**\n* Object with the following keys/values.\n* @typedef {PlainObject} module:path.SVGElementJSON\n* @property {string} element - Tag name of the SVG element to create\n* @property {PlainObject} attr - Has key-value attributes to assign to the new element. An `id` should be set so that {@link module:utilities.EditorContext#addSVGElementFromJson} can later re-identify the element for modification or replacement.\n* @property {boolean} [curStyles=false] - Indicates whether current style attributes should be applied first\n* @property {module:path.SVGElementJSON[]} [children] - Data objects to be added recursively as children\n* @property {string} [namespace=\"http://www.w3.org/2000/svg\"] - Indicate a (non-SVG) namespace\n*/\n/**\n * @interface module:path.EditorContext\n * @property {module:select.SelectorManager} selectorManager\n * @property {module:svgcanvas.SvgCanvas} canvas\n */\n/**\n * @function module:path.EditorContext#call\n * @param {\"selected\"|\"changed\"} ev - String with the event name\n * @param {module:svgcanvas.SvgCanvas#event:selected|module:svgcanvas.SvgCanvas#event:changed} arg - Argument to pass through to the callback function. If the event is \"changed\", an array of `Element`s is passed; if \"selected\", a single-item array of `Element` is passed.\n * @returns {void}\n */\n/**\n * @function module:path.EditorContext#resetD\n * @param {SVGPathElement} p\n * @returns {void}\n*/\n/**\n * Note: This doesn't round to an integer necessarily.\n * @function module:path.EditorContext#round\n * @param {Float} val\n * @returns {Float} Rounded value to nearest value based on `currentZoom`\n */\n/**\n * @function module:path.EditorContext#clearSelection\n * @param {boolean} [noCall] - When `true`, does not call the \"selected\" handler\n * @returns {void}\n*/\n/**\n * @function module:path.EditorContext#addToSelection\n * @param {Element[]} elemsToAdd - An array of DOM elements to add to the selection\n * @param {boolean} showGrips - Indicates whether the resize grips should be shown\n * @returns {void}\n*/\n/**\n * @function module:path.EditorContext#addCommandToHistory\n * @param {Command} cmd\n * @returns {void}\n */\n/**\n * @function module:path.EditorContext#remapElement\n * @param {Element} selected - DOM element to be changed\n * @param {PlainObject} changes - Object with changes to be remapped\n * @param {SVGMatrix} m - Matrix object to use for remapping coordinates\n * @returns {void}\n */\n/**\n * @function module:path.EditorContext#addSVGElementFromJson\n * @param {module:path.SVGElementJSON} data\n * @returns {Element} The new element\n*/\n/**\n * @function module:path.EditorContext#getGridSnapping\n * @returns {boolean}\n */\n/**\n * @function module:path.EditorContext#getOpacity\n * @returns {Float}\n */\n/**\n * @function module:path.EditorContext#getSelectedElements\n * @returns {Element[]} the array with selected DOM elements\n*/\n/**\n * @function module:path.EditorContext#getContainer\n * @returns {Element}\n */\n/**\n * @function module:path.EditorContext#setStarted\n * @param {boolean} s\n * @returns {void}\n */\n/**\n * @function module:path.EditorContext#getRubberBox\n * @returns {SVGRectElement}\n*/\n/**\n * @function module:path.EditorContext#setRubberBox\n * @param {SVGRectElement} rb\n * @returns {SVGRectElement} Same as parameter passed in\n */\n/**\n * @function module:path.EditorContext#addPtsToSelection\n * @param {PlainObject} cfg\n * @param {boolean} cfg.closedSubpath\n * @param {SVGCircleElement[]} cfg.grips\n * @returns {void}\n */\n/**\n * @function module:path.EditorContext#endChanges\n * @param {PlainObject} cfg\n * @param {string} cfg.cmd\n * @param {Element} cfg.elem\n * @returns {void}\n*/\n/**\n * @function module:path.EditorContext#getCurrentZoom\n * @returns {Float} The current zoom level\n */\n/**\n * Returns the last created DOM element ID string.\n * @function module:path.EditorContext#getId\n * @returns {string}\n */\n/**\n * Creates and returns a unique ID string for a DOM element.\n * @function module:path.EditorContext#getNextId\n * @returns {string}\n*/\n/**\n * Gets the desired element from a mouse event.\n * @function module:path.EditorContext#getMouseTarget\n * @param {external:MouseEvent} evt - Event object from the mouse event\n * @returns {Element} DOM element we want\n */\n/**\n * @function module:path.EditorContext#getCurrentMode\n * @returns {string}\n */\n/**\n * @function module:path.EditorContext#setCurrentMode\n * @param {string} cm The mode\n * @returns {string} The same mode as passed in\n*/\n/**\n * @function module:path.EditorContext#getDrawnPath\n * @returns {SVGPathElement|null}\n */\n/**\n * @function module:path.EditorContext#setDrawnPath\n * @param {SVGPathElement|null} dp\n * @returns {SVGPathElement|null} The same value as passed in\n */\n/**\n * @function module:path.EditorContext#getSVGRoot\n * @returns {SVGSVGElement}\n*/\n\n/**\n* @function module:path.init\n* @param {module:path.EditorContext} editorContext\n* @returns {void}\n*/\nexport const init = function (editorContext) {\n editorContext_ = editorContext;\n\n pathFuncs = [0, 'ClosePath'];\n const pathFuncsStrs = [\n 'Moveto', 'Lineto', 'CurvetoCubic', 'CurvetoQuadratic', 'Arc',\n 'LinetoHorizontal', 'LinetoVertical', 'CurvetoCubicSmooth', 'CurvetoQuadraticSmooth'\n ];\n $.each(pathFuncsStrs, function (i, s) {\n pathFuncs.push(s + 'Abs');\n pathFuncs.push(s + 'Rel');\n });\n};\n\n/**\n* @function module:path.insertItemBefore\n* @param {Element} elem\n* @param {Segment} newseg\n* @param {Integer} index\n* @returns {void}\n*/\nexport const insertItemBefore = function (elem, newseg, index) {\n // Support insertItemBefore on paths for FF2\n const list = elem.pathSegList;\n\n if (supportsPathInsertItemBefore()) {\n list.insertItemBefore(newseg, index);\n return;\n }\n const len = list.numberOfItems;\n const arr = [];\n for (let i = 0; i < len; i++) {\n const curSeg = list.getItem(i);\n arr.push(curSeg);\n }\n list.clear();\n for (let i = 0; i < len; i++) {\n if (i === index) { // index + 1\n list.appendItem(newseg);\n }\n list.appendItem(arr[i]);\n }\n};\n\n/**\n* @function module:path.ptObjToArr\n* @todo See if this should just live in `replacePathSeg`\n* @param {string} type\n* @param {SVGPathSegMovetoAbs|SVGPathSegLinetoAbs|SVGPathSegCurvetoCubicAbs|SVGPathSegCurvetoQuadraticAbs|SVGPathSegArcAbs|SVGPathSegLinetoHorizontalAbs|SVGPathSegLinetoVerticalAbs|SVGPathSegCurvetoCubicSmoothAbs|SVGPathSegCurvetoQuadraticSmoothAbs} segItem\n* @returns {ArgumentsArray}\n*/\nexport const ptObjToArr = function (type, segItem) {\n const props = segData[type];\n return props.map((prop) => {\n return segItem[prop];\n });\n};\n\n/**\n* @function module:path.getGripPt\n* @param {Segment} seg\n* @param {module:math.XYObject} altPt\n* @returns {module:math.XYObject}\n*/\nexport const getGripPt = function (seg, altPt) {\n const {path: pth} = seg;\n let out = {\n x: altPt ? altPt.x : seg.item.x,\n y: altPt ? altPt.y : seg.item.y\n };\n\n if (pth.matrix) {\n const pt = transformPoint(out.x, out.y, pth.matrix);\n out = pt;\n }\n\n const currentZoom = editorContext_.getCurrentZoom();\n out.x *= currentZoom;\n out.y *= currentZoom;\n\n return out;\n};\n\n/**\n* @function module:path.getPointFromGrip\n* @param {module:math.XYObject} pt\n* @param {module:path.Path} pth\n* @returns {module:math.XYObject}\n*/\nexport const getPointFromGrip = function (pt, pth) {\n const out = {\n x: pt.x,\n y: pt.y\n };\n\n if (pth.matrix) {\n pt = transformPoint(out.x, out.y, pth.imatrix);\n out.x = pt.x;\n out.y = pt.y;\n }\n\n const currentZoom = editorContext_.getCurrentZoom();\n out.x /= currentZoom;\n out.y /= currentZoom;\n\n return out;\n};\n\n/**\n* Requires prior call to `setUiStrings` if `xlink:title`\n* to be set on the grip.\n* @function module:path.addPointGrip\n* @param {Integer} index\n* @param {Integer} x\n* @param {Integer} y\n* @returns {SVGCircleElement}\n*/\nexport const addPointGrip = function (index, x, y) {\n // create the container of all the point grips\n const pointGripContainer = getGripContainer();\n\n let pointGrip = getElem('pathpointgrip_' + index);\n // create it\n if (!pointGrip) {\n pointGrip = document.createElementNS(NS.SVG, 'circle');\n const atts = {\n id: 'pathpointgrip_' + index,\n display: 'none',\n r: 4,\n fill: '#0FF',\n stroke: '#00F',\n 'stroke-width': 2,\n cursor: 'move',\n style: 'pointer-events:all'\n };\n if ('pathNodeTooltip' in uiStrings) { // May be empty if running path.js without svg-editor\n atts['xlink:title'] = uiStrings.pathNodeTooltip;\n }\n assignAttributes(pointGrip, atts);\n pointGrip = pointGripContainer.appendChild(pointGrip);\n\n const grip = $('#pathpointgrip_' + index);\n grip.dblclick(function () {\n if (path) {\n path.setSegType();\n }\n });\n }\n if (x && y) {\n // set up the point grip element and display it\n assignAttributes(pointGrip, {\n cx: x,\n cy: y,\n display: 'inline'\n });\n }\n return pointGrip;\n};\n\n/**\n* @function module:path.getGripContainer\n* @returns {Element}\n*/\nexport const getGripContainer = function () {\n let c = getElem('pathpointgrip_container');\n if (!c) {\n const parentElement = getElem('selectorParentGroup');\n c = parentElement.appendChild(document.createElementNS(NS.SVG, 'g'));\n c.id = 'pathpointgrip_container';\n }\n return c;\n};\n\n/**\n* Requires prior call to `setUiStrings` if `xlink:title`\n* to be set on the grip.\n* @function module:path.addCtrlGrip\n* @param {string} id\n* @returns {SVGCircleElement}\n*/\nexport const addCtrlGrip = function (id) {\n let pointGrip = getElem('ctrlpointgrip_' + id);\n if (pointGrip) { return pointGrip; }\n\n pointGrip = document.createElementNS(NS.SVG, 'circle');\n const atts = {\n id: 'ctrlpointgrip_' + id,\n display: 'none',\n r: 4,\n fill: '#0FF',\n stroke: '#55F',\n 'stroke-width': 1,\n cursor: 'move',\n style: 'pointer-events:all'\n };\n if ('pathCtrlPtTooltip' in uiStrings) { // May be empty if running path.js without svg-editor\n atts['xlink:title'] = uiStrings.pathCtrlPtTooltip;\n }\n assignAttributes(pointGrip, atts);\n getGripContainer().append(pointGrip);\n return pointGrip;\n};\n\n/**\n* @function module:path.getCtrlLine\n* @param {string} id\n* @returns {SVGLineElement}\n*/\nexport const getCtrlLine = function (id) {\n let ctrlLine = getElem('ctrlLine_' + id);\n if (ctrlLine) { return ctrlLine; }\n\n ctrlLine = document.createElementNS(NS.SVG, 'line');\n assignAttributes(ctrlLine, {\n id: 'ctrlLine_' + id,\n stroke: '#555',\n 'stroke-width': 1,\n style: 'pointer-events:none'\n });\n getGripContainer().append(ctrlLine);\n return ctrlLine;\n};\n\n/**\n* @function module:path.getPointGrip\n* @param {Segment} seg\n* @param {boolean} update\n* @returns {SVGCircleElement}\n*/\nexport const getPointGrip = function (seg, update) {\n const {index} = seg;\n const pointGrip = addPointGrip(index);\n\n if (update) {\n const pt = getGripPt(seg);\n assignAttributes(pointGrip, {\n cx: pt.x,\n cy: pt.y,\n display: 'inline'\n });\n }\n\n return pointGrip;\n};\n\n/**\n* @function module:path.getControlPoints\n* @param {Segment} seg\n* @returns {PlainObject}\n*/\nexport const getControlPoints = function (seg) {\n const {item, index} = seg;\n if (!('x1' in item) || !('x2' in item)) { return null; }\n const cpt = {};\n /* const pointGripContainer = */ getGripContainer();\n\n // Note that this is intentionally not seg.prev.item\n const prev = path.segs[index - 1].item;\n\n const segItems = [prev, item];\n\n for (let i = 1; i < 3; i++) {\n const id = index + 'c' + i;\n\n const ctrlLine = cpt['c' + i + '_line'] = getCtrlLine(id);\n\n const pt = getGripPt(seg, {x: item['x' + i], y: item['y' + i]});\n const gpt = getGripPt(seg, {x: segItems[i - 1].x, y: segItems[i - 1].y});\n\n assignAttributes(ctrlLine, {\n x1: pt.x,\n y1: pt.y,\n x2: gpt.x,\n y2: gpt.y,\n display: 'inline'\n });\n\n cpt['c' + i + '_line'] = ctrlLine;\n\n // create it\n const pointGrip = cpt['c' + i] = addCtrlGrip(id);\n\n assignAttributes(pointGrip, {\n cx: pt.x,\n cy: pt.y,\n display: 'inline'\n });\n cpt['c' + i] = pointGrip;\n }\n return cpt;\n};\n\n/**\n* This replaces the segment at the given index. Type is given as number.\n* @function module:path.replacePathSeg\n* @param {Integer} type Possible values set during {@link module:path.init}\n* @param {Integer} index\n* @param {ArgumentsArray} pts\n* @param {SVGPathElement} elem\n* @returns {void}\n*/\nexport const replacePathSeg = function (type, index, pts, elem) {\n const pth = elem || path.elem;\n\n const func = 'createSVGPathSeg' + pathFuncs[type];\n const seg = pth[func](...pts);\n\n if (supportsPathReplaceItem()) {\n pth.pathSegList.replaceItem(seg, index);\n } else {\n const segList = pth.pathSegList;\n const len = segList.numberOfItems;\n const arr = [];\n for (let i = 0; i < len; i++) {\n const curSeg = segList.getItem(i);\n arr.push(curSeg);\n }\n segList.clear();\n for (let i = 0; i < len; i++) {\n if (i === index) {\n segList.appendItem(seg);\n } else {\n segList.appendItem(arr[i]);\n }\n }\n }\n};\n\n/**\n* @function module:path.getSegSelector\n* @param {Segment} seg\n* @param {boolean} update\n* @returns {SVGPathElement}\n*/\nexport const getSegSelector = function (seg, update) {\n const {index} = seg;\n let segLine = getElem('segline_' + index);\n if (!segLine) {\n const pointGripContainer = getGripContainer();\n // create segline\n segLine = document.createElementNS(NS.SVG, 'path');\n assignAttributes(segLine, {\n id: 'segline_' + index,\n display: 'none',\n fill: 'none',\n stroke: '#0FF',\n 'stroke-width': 2,\n style: 'pointer-events:none',\n d: 'M0,0 0,0'\n });\n pointGripContainer.append(segLine);\n }\n\n if (update) {\n const {prev} = seg;\n if (!prev) {\n segLine.setAttribute('display', 'none');\n return segLine;\n }\n\n const pt = getGripPt(prev);\n // Set start point\n replacePathSeg(2, 0, [pt.x, pt.y], segLine);\n\n const pts = ptObjToArr(seg.type, seg.item); // , true);\n for (let i = 0; i < pts.length; i += 2) {\n const point = getGripPt(seg, {x: pts[i], y: pts[i + 1]});\n pts[i] = point.x;\n pts[i + 1] = point.y;\n }\n\n replacePathSeg(seg.type, 1, pts, segLine);\n }\n return segLine;\n};\n\n/**\n * @typedef {PlainObject} Point\n * @property {Integer} x The x value\n * @property {Integer} y The y value\n */\n\n/**\n* Takes three points and creates a smoother line based on them.\n* @function module:path.smoothControlPoints\n* @param {Point} ct1 - Object with x and y values (first control point)\n* @param {Point} ct2 - Object with x and y values (second control point)\n* @param {Point} pt - Object with x and y values (third point)\n* @returns {Point[]} Array of two \"smoothed\" point objects\n*/\nexport const smoothControlPoints = function (ct1, ct2, pt) {\n // each point must not be the origin\n const x1 = ct1.x - pt.x,\n y1 = ct1.y - pt.y,\n x2 = ct2.x - pt.x,\n y2 = ct2.y - pt.y;\n\n if ((x1 !== 0 || y1 !== 0) && (x2 !== 0 || y2 !== 0)) {\n const\n r1 = Math.sqrt(x1 * x1 + y1 * y1),\n r2 = Math.sqrt(x2 * x2 + y2 * y2),\n nct1 = editorContext_.getSVGRoot().createSVGPoint(),\n nct2 = editorContext_.getSVGRoot().createSVGPoint();\n let anglea = Math.atan2(y1, x1),\n angleb = Math.atan2(y2, x2);\n if (anglea < 0) { anglea += 2 * Math.PI; }\n if (angleb < 0) { angleb += 2 * Math.PI; }\n\n const angleBetween = Math.abs(anglea - angleb),\n angleDiff = Math.abs(Math.PI - angleBetween) / 2;\n\n let newAnglea, newAngleb;\n if (anglea - angleb > 0) {\n newAnglea = angleBetween < Math.PI ? (anglea + angleDiff) : (anglea - angleDiff);\n newAngleb = angleBetween < Math.PI ? (angleb - angleDiff) : (angleb + angleDiff);\n } else {\n newAnglea = angleBetween < Math.PI ? (anglea - angleDiff) : (anglea + angleDiff);\n newAngleb = angleBetween < Math.PI ? (angleb + angleDiff) : (angleb - angleDiff);\n }\n\n // rotate the points\n nct1.x = r1 * Math.cos(newAnglea) + pt.x;\n nct1.y = r1 * Math.sin(newAnglea) + pt.y;\n nct2.x = r2 * Math.cos(newAngleb) + pt.x;\n nct2.y = r2 * Math.sin(newAngleb) + pt.y;\n\n return [nct1, nct2];\n }\n return undefined;\n};\n\n/**\n*\n*/\nexport class Segment {\n /**\n * @param {Integer} index\n * @param {SVGPathSeg} item\n * @todo Is `item` be more constrained here?\n */\n constructor (index, item) {\n this.selected = false;\n this.index = index;\n this.item = item;\n this.type = item.pathSegType;\n\n this.ctrlpts = [];\n this.ptgrip = null;\n this.segsel = null;\n }\n\n /**\n * @param {boolean} y\n * @returns {void}\n */\n showCtrlPts (y) {\n for (const i in this.ctrlpts) {\n if ({}.hasOwnProperty.call(this.ctrlpts, i)) {\n this.ctrlpts[i].setAttribute('display', y ? 'inline' : 'none');\n }\n }\n }\n\n /**\n * @param {boolean} y\n * @returns {void}\n */\n selectCtrls (y) {\n $('#ctrlpointgrip_' + this.index + 'c1, #ctrlpointgrip_' + this.index + 'c2')\n .attr('fill', y ? '#0FF' : '#EEE');\n }\n\n /**\n * @param {boolean} y\n * @returns {void}\n */\n show (y) {\n if (this.ptgrip) {\n this.ptgrip.setAttribute('display', y ? 'inline' : 'none');\n this.segsel.setAttribute('display', y ? 'inline' : 'none');\n // Show/hide all control points if available\n this.showCtrlPts(y);\n }\n }\n\n /**\n * @param {boolean} y\n * @returns {void}\n */\n select (y) {\n if (this.ptgrip) {\n this.ptgrip.setAttribute('stroke', y ? '#0FF' : '#00F');\n this.segsel.setAttribute('display', y ? 'inline' : 'none');\n if (this.ctrlpts) {\n this.selectCtrls(y);\n }\n this.selected = y;\n }\n }\n\n /**\n * @returns {void}\n */\n addGrip () {\n this.ptgrip = getPointGrip(this, true);\n this.ctrlpts = getControlPoints(this); // , true);\n this.segsel = getSegSelector(this, true);\n }\n\n /**\n * @param {boolean} full\n * @returns {void}\n */\n update (full) {\n if (this.ptgrip) {\n const pt = getGripPt(this);\n assignAttributes(this.ptgrip, {\n cx: pt.x,\n cy: pt.y\n });\n\n getSegSelector(this, true);\n\n if (this.ctrlpts) {\n if (full) {\n this.item = path.elem.pathSegList.getItem(this.index);\n this.type = this.item.pathSegType;\n }\n getControlPoints(this);\n }\n // this.segsel.setAttribute('display', y ? 'inline' : 'none');\n }\n }\n\n /**\n * @param {Integer} dx\n * @param {Integer} dy\n * @returns {void}\n */\n move (dx, dy) {\n const {item} = this;\n\n const curPts = this.ctrlpts\n ? [\n item.x += dx, item.y += dy,\n item.x1, item.y1, item.x2 += dx, item.y2 += dy\n ]\n : [item.x += dx, item.y += dy];\n\n replacePathSeg(\n this.type,\n this.index,\n // type 10 means ARC\n this.type === 10 ? ptObjToArr(this.type, item) : curPts\n );\n\n if (this.next && this.next.ctrlpts) {\n const next = this.next.item;\n const nextPts = [\n next.x, next.y,\n next.x1 += dx, next.y1 += dy, next.x2, next.y2\n ];\n replacePathSeg(this.next.type, this.next.index, nextPts);\n }\n\n if (this.mate) {\n // The last point of a closed subpath has a 'mate',\n // which is the 'M' segment of the subpath\n const {item: itm} = this.mate;\n const pts = [itm.x += dx, itm.y += dy];\n replacePathSeg(this.mate.type, this.mate.index, pts);\n // Has no grip, so does not need 'updating'?\n }\n\n this.update(true);\n if (this.next) { this.next.update(true); }\n }\n\n /**\n * @param {Integer} num\n * @returns {void}\n */\n setLinked (num) {\n let seg, anum, pt;\n if (num === 2) {\n anum = 1;\n seg = this.next;\n if (!seg) { return; }\n pt = this.item;\n } else {\n anum = 2;\n seg = this.prev;\n if (!seg) { return; }\n pt = seg.item;\n }\n\n const {item} = seg;\n item['x' + anum] = pt.x + (pt.x - this.item['x' + num]);\n item['y' + anum] = pt.y + (pt.y - this.item['y' + num]);\n\n const pts = [\n item.x, item.y,\n item.x1, item.y1,\n item.x2, item.y2\n ];\n\n replacePathSeg(seg.type, seg.index, pts);\n seg.update(true);\n }\n\n /**\n * @param {Integer} num\n * @param {Integer} dx\n * @param {Integer} dy\n * @returns {void}\n */\n moveCtrl (num, dx, dy) {\n const {item} = this;\n item['x' + num] += dx;\n item['y' + num] += dy;\n\n const pts = [\n item.x, item.y,\n item.x1, item.y1, item.x2, item.y2\n ];\n\n replacePathSeg(this.type, this.index, pts);\n this.update(true);\n }\n\n /**\n * @param {Integer} newType Possible values set during {@link module:path.init}\n * @param {ArgumentsArray} pts\n * @returns {void}\n */\n setType (newType, pts) {\n replacePathSeg(newType, this.index, pts);\n this.type = newType;\n this.item = path.elem.pathSegList.getItem(this.index);\n this.showCtrlPts(newType === 6);\n this.ctrlpts = getControlPoints(this);\n this.update(true);\n }\n}\n\n/**\n*\n*/\nexport class Path {\n /**\n * @param {SVGPathElement} elem\n * @throws {Error} If constructed without a path element\n */\n constructor (elem) {\n if (!elem || elem.tagName !== 'path') {\n throw new Error('svgedit.path.Path constructed without a element');\n }\n\n this.elem = elem;\n this.segs = [];\n this.selected_pts = [];\n path = this; // eslint-disable-line consistent-this\n\n this.init();\n }\n\n /**\n * Reset path data.\n * @returns {module:path.Path}\n */\n init () {\n // Hide all grips, etc\n\n // fixed, needed to work on all found elements, not just first\n $(getGripContainer()).find('*').each(function () {\n $(this).attr('display', 'none');\n });\n\n const segList = this.elem.pathSegList;\n const len = segList.numberOfItems;\n this.segs = [];\n this.selected_pts = [];\n this.first_seg = null;\n\n // Set up segs array\n for (let i = 0; i < len; i++) {\n const item = segList.getItem(i);\n const segment = new Segment(i, item);\n segment.path = this;\n this.segs.push(segment);\n }\n\n const {segs} = this;\n\n let startI = null;\n for (let i = 0; i < len; i++) {\n const seg = segs[i];\n const nextSeg = (i + 1) >= len ? null : segs[i + 1];\n const prevSeg = (i - 1) < 0 ? null : segs[i - 1];\n if (seg.type === 2) {\n if (prevSeg && prevSeg.type !== 1) {\n // New sub-path, last one is open,\n // so add a grip to last sub-path's first point\n const startSeg = segs[startI];\n startSeg.next = segs[startI + 1];\n startSeg.next.prev = startSeg;\n startSeg.addGrip();\n }\n // Remember that this is a starter seg\n startI = i;\n } else if (nextSeg && nextSeg.type === 1) {\n // This is the last real segment of a closed sub-path\n // Next is first seg after \"M\"\n seg.next = segs[startI + 1];\n\n // First seg after \"M\"'s prev is this\n seg.next.prev = seg;\n seg.mate = segs[startI];\n seg.addGrip();\n if (isNullish(this.first_seg)) {\n this.first_seg = seg;\n }\n } else if (!nextSeg) {\n if (seg.type !== 1) {\n // Last seg, doesn't close so add a grip\n // to last sub-path's first point\n const startSeg = segs[startI];\n startSeg.next = segs[startI + 1];\n startSeg.next.prev = startSeg;\n startSeg.addGrip();\n seg.addGrip();\n\n if (!this.first_seg) {\n // Open path, so set first as real first and add grip\n this.first_seg = segs[startI];\n }\n }\n } else if (seg.type !== 1) {\n // Regular segment, so add grip and its \"next\"\n seg.addGrip();\n\n // Don't set its \"next\" if it's an \"M\"\n if (nextSeg && nextSeg.type !== 2) {\n seg.next = nextSeg;\n seg.next.prev = seg;\n }\n }\n }\n return this;\n }\n\n /**\n * @callback module:path.PathEachSegCallback\n * @this module:path.Segment\n * @param {Integer} i The index of the seg being iterated\n * @returns {boolean|void} Will stop execution of `eachSeg` if returns `false`\n */\n /**\n * @param {module:path.PathEachSegCallback} fn\n * @returns {void}\n */\n eachSeg (fn) {\n const len = this.segs.length;\n for (let i = 0; i < len; i++) {\n const ret = fn.call(this.segs[i], i);\n if (ret === false) { break; }\n }\n }\n\n /**\n * @param {Integer} index\n * @returns {void}\n */\n addSeg (index) {\n // Adds a new segment\n const seg = this.segs[index];\n if (!seg.prev) { return; }\n\n const {prev} = seg;\n let newseg, newX, newY;\n switch (seg.item.pathSegType) {\n case 4: {\n newX = (seg.item.x + prev.item.x) / 2;\n newY = (seg.item.y + prev.item.y) / 2;\n newseg = this.elem.createSVGPathSegLinetoAbs(newX, newY);\n break;\n } case 6: { // make it a curved segment to preserve the shape (WRS)\n // https://en.wikipedia.org/wiki/De_Casteljau%27s_algorithm#Geometric_interpretation\n const p0x = (prev.item.x + seg.item.x1) / 2;\n const p1x = (seg.item.x1 + seg.item.x2) / 2;\n const p2x = (seg.item.x2 + seg.item.x) / 2;\n const p01x = (p0x + p1x) / 2;\n const p12x = (p1x + p2x) / 2;\n newX = (p01x + p12x) / 2;\n const p0y = (prev.item.y + seg.item.y1) / 2;\n const p1y = (seg.item.y1 + seg.item.y2) / 2;\n const p2y = (seg.item.y2 + seg.item.y) / 2;\n const p01y = (p0y + p1y) / 2;\n const p12y = (p1y + p2y) / 2;\n newY = (p01y + p12y) / 2;\n newseg = this.elem.createSVGPathSegCurvetoCubicAbs(newX, newY, p0x, p0y, p01x, p01y);\n const pts = [seg.item.x, seg.item.y, p12x, p12y, p2x, p2y];\n replacePathSeg(seg.type, index, pts);\n break;\n }\n }\n\n insertItemBefore(this.elem, newseg, index);\n }\n\n /**\n * @param {Integer} index\n * @returns {void}\n */\n deleteSeg (index) {\n const seg = this.segs[index];\n const list = this.elem.pathSegList;\n\n seg.show(false);\n const {next} = seg;\n if (seg.mate) {\n // Make the next point be the \"M\" point\n const pt = [next.item.x, next.item.y];\n replacePathSeg(2, next.index, pt);\n\n // Reposition last node\n replacePathSeg(4, seg.index, pt);\n\n list.removeItem(seg.mate.index);\n } else if (!seg.prev) {\n // First node of open path, make next point the M\n // const {item} = seg;\n const pt = [next.item.x, next.item.y];\n replacePathSeg(2, seg.next.index, pt);\n list.removeItem(index);\n } else {\n list.removeItem(index);\n }\n }\n\n /**\n * @param {Integer} index\n * @returns {void}\n */\n removePtFromSelection (index) {\n const pos = this.selected_pts.indexOf(index);\n if (pos === -1) {\n return;\n }\n this.segs[index].select(false);\n this.selected_pts.splice(pos, 1);\n }\n\n /**\n * @returns {void}\n */\n clearSelection () {\n this.eachSeg(function () {\n // 'this' is the segment here\n this.select(false);\n });\n this.selected_pts = [];\n }\n\n /**\n * @returns {void}\n */\n storeD () {\n this.last_d = this.elem.getAttribute('d');\n }\n\n /**\n * @param {Integer} y\n * @returns {Path}\n */\n show (y) {\n // Shows this path's segment grips\n this.eachSeg(function () {\n // 'this' is the segment here\n this.show(y);\n });\n if (y) {\n this.selectPt(this.first_seg.index);\n }\n return this;\n }\n\n /**\n * Move selected points.\n * @param {Integer} dx\n * @param {Integer} dy\n * @returns {void}\n */\n movePts (dx, dy) {\n let i = this.selected_pts.length;\n while (i--) {\n const seg = this.segs[this.selected_pts[i]];\n seg.move(dx, dy);\n }\n }\n\n /**\n * @param {Integer} dx\n * @param {Integer} dy\n * @returns {void}\n */\n moveCtrl (dx, dy) {\n const seg = this.segs[this.selected_pts[0]];\n seg.moveCtrl(this.dragctrl, dx, dy);\n if (linkControlPts) {\n seg.setLinked(this.dragctrl);\n }\n }\n\n /**\n * @param {?Integer} newType See {@link https://www.w3.org/TR/SVG/single-page.html#paths-InterfaceSVGPathSeg}\n * @returns {void}\n */\n setSegType (newType) {\n this.storeD();\n let i = this.selected_pts.length;\n let text;\n while (i--) {\n const selPt = this.selected_pts[i];\n\n // Selected seg\n const cur = this.segs[selPt];\n const {prev} = cur;\n if (!prev) { continue; }\n\n if (!newType) { // double-click, so just toggle\n text = 'Toggle Path Segment Type';\n\n // Toggle segment to curve/straight line\n const oldType = cur.type;\n\n newType = (oldType === 6) ? 4 : 6;\n }\n\n newType = Number(newType);\n\n const curX = cur.item.x;\n const curY = cur.item.y;\n const prevX = prev.item.x;\n const prevY = prev.item.y;\n let points;\n switch (newType) {\n case 6: {\n if (cur.olditem) {\n const old = cur.olditem;\n points = [curX, curY, old.x1, old.y1, old.x2, old.y2];\n } else {\n const diffX = curX - prevX;\n const diffY = curY - prevY;\n // get control points from straight line segment\n /*\n const ct1x = (prevX + (diffY/2));\n const ct1y = (prevY - (diffX/2));\n const ct2x = (curX + (diffY/2));\n const ct2y = (curY - (diffX/2));\n */\n // create control points on the line to preserve the shape (WRS)\n const ct1x = (prevX + (diffX / 3));\n const ct1y = (prevY + (diffY / 3));\n const ct2x = (curX - (diffX / 3));\n const ct2y = (curY - (diffY / 3));\n points = [curX, curY, ct1x, ct1y, ct2x, ct2y];\n }\n break;\n } case 4: {\n points = [curX, curY];\n\n // Store original prevve segment nums\n cur.olditem = cur.item;\n break;\n }\n }\n\n cur.setType(newType, points);\n }\n path.endChanges(text);\n }\n\n /**\n * @param {Integer} pt\n * @param {Integer} ctrlNum\n * @returns {void}\n */\n selectPt (pt, ctrlNum) {\n this.clearSelection();\n if (isNullish(pt)) {\n this.eachSeg(function (i) {\n // 'this' is the segment here.\n if (this.prev) {\n pt = i;\n }\n });\n }\n this.addPtsToSelection(pt);\n if (ctrlNum) {\n this.dragctrl = ctrlNum;\n\n if (linkControlPts) {\n this.segs[pt].setLinked(ctrlNum);\n }\n }\n }\n\n /**\n * Update position of all points.\n * @returns {Path}\n */\n update () {\n const {elem} = this;\n if (getRotationAngle(elem)) {\n this.matrix = getMatrix(elem);\n this.imatrix = this.matrix.inverse();\n } else {\n this.matrix = null;\n this.imatrix = null;\n }\n\n this.eachSeg(function (i) {\n this.item = elem.pathSegList.getItem(i);\n this.update();\n });\n\n return this;\n }\n\n /**\n * @param {string} text\n * @returns {void}\n */\n endChanges (text) {\n if (isWebkit()) { editorContext_.resetD(this.elem); }\n const cmd = new ChangeElementCommand(this.elem, {d: this.last_d}, text);\n editorContext_.endChanges({cmd, elem: this.elem});\n }\n\n /**\n * @param {Integer|Integer[]} indexes\n * @returns {void}\n */\n addPtsToSelection (indexes) {\n if (!Array.isArray(indexes)) { indexes = [indexes]; }\n indexes.forEach((index) => {\n const seg = this.segs[index];\n if (seg.ptgrip) {\n if (!this.selected_pts.includes(index) && index >= 0) {\n this.selected_pts.push(index);\n }\n }\n });\n this.selected_pts.sort();\n let i = this.selected_pts.length;\n const grips = [];\n grips.length = i;\n // Loop through points to be selected and highlight each\n while (i--) {\n const pt = this.selected_pts[i];\n const seg = this.segs[pt];\n seg.select(true);\n grips[i] = seg.ptgrip;\n }\n\n const closedSubpath = Path.subpathIsClosed(this.selected_pts[0]);\n editorContext_.addPtsToSelection({grips, closedSubpath});\n }\n\n // STATIC\n /**\n * @param {Integer} index\n * @returns {boolean}\n */\n static subpathIsClosed (index) {\n let clsd = false;\n // Check if subpath is already open\n path.eachSeg(function (i) {\n if (i <= index) { return true; }\n if (this.type === 2) {\n // Found M first, so open\n return false;\n }\n if (this.type === 1) {\n // Found Z first, so closed\n clsd = true;\n return false;\n }\n return true;\n });\n\n return clsd;\n }\n}\n\n/**\n* @function module:path.getPath_\n* @param {SVGPathElement} elem\n* @returns {module:path.Path}\n*/\nexport const getPath_ = function (elem) {\n let p = pathData[elem.id];\n if (!p) {\n p = pathData[elem.id] = new Path(elem);\n }\n return p;\n};\n\n/**\n* @function module:path.removePath_\n* @param {string} id\n* @returns {void}\n*/\nexport const removePath_ = function (id) {\n if (id in pathData) { delete pathData[id]; }\n};\n\nlet newcx, newcy, oldcx, oldcy, angle;\n\nconst getRotVals = function (x, y) {\n let dx = x - oldcx;\n let dy = y - oldcy;\n\n // rotate the point around the old center\n let r = Math.sqrt(dx * dx + dy * dy);\n let theta = Math.atan2(dy, dx) + angle;\n dx = r * Math.cos(theta) + oldcx;\n dy = r * Math.sin(theta) + oldcy;\n\n // dx,dy should now hold the actual coordinates of each\n // point after being rotated\n\n // now we want to rotate them around the new center in the reverse direction\n dx -= newcx;\n dy -= newcy;\n\n r = Math.sqrt(dx * dx + dy * dy);\n theta = Math.atan2(dy, dx) - angle;\n\n return {x: r * Math.cos(theta) + newcx,\n y: r * Math.sin(theta) + newcy};\n};\n\n// If the path was rotated, we must now pay the piper:\n// Every path point must be rotated into the rotated coordinate system of\n// its old center, then determine the new center, then rotate it back\n// This is because we want the path to remember its rotation\n\n/**\n* @function module:path.recalcRotatedPath\n* @todo This is still using ye olde transform methods, can probably\n* be optimized or even taken care of by `recalculateDimensions`\n* @returns {void}\n*/\nexport const recalcRotatedPath = function () {\n const currentPath = path.elem;\n angle = getRotationAngle(currentPath, true);\n if (!angle) { return; }\n // selectedBBoxes[0] = path.oldbbox;\n const oldbox = path.oldbbox; // selectedBBoxes[0],\n oldcx = oldbox.x + oldbox.width / 2;\n oldcy = oldbox.y + oldbox.height / 2;\n const box = getBBox(currentPath);\n newcx = box.x + box.width / 2;\n newcy = box.y + box.height / 2;\n\n // un-rotate the new center to the proper position\n const dx = newcx - oldcx,\n dy = newcy - oldcy,\n r = Math.sqrt(dx * dx + dy * dy),\n theta = Math.atan2(dy, dx) + angle;\n\n newcx = r * Math.cos(theta) + oldcx;\n newcy = r * Math.sin(theta) + oldcy;\n\n const list = currentPath.pathSegList;\n\n let i = list.numberOfItems;\n while (i) {\n i -= 1;\n const seg = list.getItem(i),\n type = seg.pathSegType;\n if (type === 1) { continue; }\n\n const rvals = getRotVals(seg.x, seg.y),\n points = [rvals.x, rvals.y];\n if (!isNullish(seg.x1) && !isNullish(seg.x2)) {\n const cVals1 = getRotVals(seg.x1, seg.y1);\n const cVals2 = getRotVals(seg.x2, seg.y2);\n points.splice(points.length, 0, cVals1.x, cVals1.y, cVals2.x, cVals2.y);\n }\n replacePathSeg(type, i, points);\n } // loop for each point\n\n /* box = */ getBBox(currentPath);\n // selectedBBoxes[0].x = box.x; selectedBBoxes[0].y = box.y;\n // selectedBBoxes[0].width = box.width; selectedBBoxes[0].height = box.height;\n\n // now we must set the new transform to be rotated around the new center\n const Rnc = editorContext_.getSVGRoot().createSVGTransform(),\n tlist = getTransformList(currentPath);\n Rnc.setRotate((angle * 180.0 / Math.PI), newcx, newcy);\n tlist.replaceItem(Rnc, 0);\n};\n\n// ====================================\n// Public API starts here\n\n/**\n* @function module:path.clearData\n* @returns {void}\n*/\nexport const clearData = function () {\n pathData = {};\n};\n\n// Making public for mocking\n/**\n* @function module:path.reorientGrads\n* @param {Element} elem\n* @param {SVGMatrix} m\n* @returns {void}\n*/\nexport const reorientGrads = function (elem, m) {\n const bb = utilsGetBBox(elem);\n for (let i = 0; i < 2; i++) {\n const type = i === 0 ? 'fill' : 'stroke';\n const attrVal = elem.getAttribute(type);\n if (attrVal && attrVal.startsWith('url(')) {\n const grad = getRefElem(attrVal);\n if (grad.tagName === 'linearGradient') {\n let x1 = grad.getAttribute('x1') || 0;\n let y1 = grad.getAttribute('y1') || 0;\n let x2 = grad.getAttribute('x2') || 1;\n let y2 = grad.getAttribute('y2') || 0;\n\n // Convert to USOU points\n x1 = (bb.width * x1) + bb.x;\n y1 = (bb.height * y1) + bb.y;\n x2 = (bb.width * x2) + bb.x;\n y2 = (bb.height * y2) + bb.y;\n\n // Transform those points\n const pt1 = transformPoint(x1, y1, m);\n const pt2 = transformPoint(x2, y2, m);\n\n // Convert back to BB points\n const gCoords = {\n x1: (pt1.x - bb.x) / bb.width,\n y1: (pt1.y - bb.y) / bb.height,\n x2: (pt2.x - bb.x) / bb.width,\n y2: (pt2.y - bb.y) / bb.height\n };\n\n const newgrad = grad.cloneNode(true);\n $(newgrad).attr(gCoords);\n\n newgrad.id = editorContext_.getNextId();\n findDefs().append(newgrad);\n elem.setAttribute(type, 'url(#' + newgrad.id + ')');\n }\n }\n }\n};\n\n/**\n* This is how we map paths to our preferred relative segment types.\n* @name module:path.pathMap\n* @type {GenericArray}\n*/\nconst pathMap = [\n 0, 'z', 'M', 'm', 'L', 'l', 'C', 'c', 'Q', 'q', 'A', 'a',\n 'H', 'h', 'V', 'v', 'S', 's', 'T', 't'\n];\n\n/**\n * Convert a path to one with only absolute or relative values.\n * @todo move to pathActions.js\n * @function module:path.convertPath\n * @param {SVGPathElement} pth - the path to convert\n * @param {boolean} toRel - true of convert to relative\n * @returns {string}\n */\nexport const convertPath = function (pth, toRel) {\n const {pathSegList} = pth;\n const len = pathSegList.numberOfItems;\n let curx = 0, cury = 0;\n let d = '';\n let lastM = null;\n\n for (let i = 0; i < len; ++i) {\n const seg = pathSegList.getItem(i);\n // if these properties are not in the segment, set them to zero\n let x = seg.x || 0,\n y = seg.y || 0,\n x1 = seg.x1 || 0,\n y1 = seg.y1 || 0,\n x2 = seg.x2 || 0,\n y2 = seg.y2 || 0;\n\n const type = seg.pathSegType;\n let letter = pathMap[type]['to' + (toRel ? 'Lower' : 'Upper') + 'Case']();\n\n switch (type) {\n case 1: // z,Z closepath (Z/z)\n d += 'z';\n if (lastM && !toRel) {\n curx = lastM[0];\n cury = lastM[1];\n }\n break;\n case 12: // absolute horizontal line (H)\n x -= curx;\n // Fallthrough\n case 13: // relative horizontal line (h)\n if (toRel) {\n curx += x;\n letter = 'l';\n } else {\n x += curx;\n curx = x;\n letter = 'L';\n }\n // Convert to \"line\" for easier editing\n d += pathDSegment(letter, [[x, cury]]);\n break;\n case 14: // absolute vertical line (V)\n y -= cury;\n // Fallthrough\n case 15: // relative vertical line (v)\n if (toRel) {\n cury += y;\n letter = 'l';\n } else {\n y += cury;\n cury = y;\n letter = 'L';\n }\n // Convert to \"line\" for easier editing\n d += pathDSegment(letter, [[curx, y]]);\n break;\n case 2: // absolute move (M)\n case 4: // absolute line (L)\n case 18: // absolute smooth quad (T)\n x -= curx;\n y -= cury;\n // Fallthrough\n case 5: // relative line (l)\n case 3: // relative move (m)\n case 19: // relative smooth quad (t)\n if (toRel) {\n curx += x;\n cury += y;\n } else {\n x += curx;\n y += cury;\n curx = x;\n cury = y;\n }\n if (type === 2 || type === 3) { lastM = [curx, cury]; }\n\n d += pathDSegment(letter, [[x, y]]);\n break;\n case 6: // absolute cubic (C)\n x -= curx; x1 -= curx; x2 -= curx;\n y -= cury; y1 -= cury; y2 -= cury;\n // Fallthrough\n case 7: // relative cubic (c)\n if (toRel) {\n curx += x;\n cury += y;\n } else {\n x += curx; x1 += curx; x2 += curx;\n y += cury; y1 += cury; y2 += cury;\n curx = x;\n cury = y;\n }\n d += pathDSegment(letter, [[x1, y1], [x2, y2], [x, y]]);\n break;\n case 8: // absolute quad (Q)\n x -= curx; x1 -= curx;\n y -= cury; y1 -= cury;\n // Fallthrough\n case 9: // relative quad (q)\n if (toRel) {\n curx += x;\n cury += y;\n } else {\n x += curx; x1 += curx;\n y += cury; y1 += cury;\n curx = x;\n cury = y;\n }\n d += pathDSegment(letter, [[x1, y1], [x, y]]);\n break;\n // eslint-disable-next-line sonarjs/no-duplicated-branches\n case 10: // absolute elliptical arc (A)\n x -= curx;\n y -= cury;\n // Fallthrough\n case 11: // relative elliptical arc (a)\n if (toRel) {\n curx += x;\n cury += y;\n } else {\n x += curx;\n y += cury;\n curx = x;\n cury = y;\n }\n d += pathDSegment(letter, [[seg.r1, seg.r2]], [\n seg.angle,\n (seg.largeArcFlag ? 1 : 0),\n (seg.sweepFlag ? 1 : 0)\n ], [x, y]);\n break;\n case 16: // absolute smooth cubic (S)\n x -= curx; x2 -= curx;\n y -= cury; y2 -= cury;\n // Fallthrough\n case 17: // relative smooth cubic (s)\n if (toRel) {\n curx += x;\n cury += y;\n } else {\n x += curx; x2 += curx;\n y += cury; y2 += cury;\n curx = x;\n cury = y;\n }\n d += pathDSegment(letter, [[x2, y2], [x, y]]);\n break;\n } // switch on path segment type\n } // for each segment\n return d;\n};\n\n/**\n * TODO: refactor callers in `convertPath` to use `getPathDFromSegments` instead of this function.\n * Legacy code refactored from `svgcanvas.pathActions.convertPath`.\n * @param {string} letter - path segment command (letter in potentially either case from {@link module:path.pathMap}; see [SVGPathSeg#pathSegTypeAsLetter]{@link https://www.w3.org/TR/SVG/single-page.html#paths-__svg__SVGPathSeg__pathSegTypeAsLetter})\n * @param {GenericArray>} points - x,y points\n * @param {GenericArray>} [morePoints] - x,y points\n * @param {Integer[]} [lastPoint] - x,y point\n * @returns {string}\n */\nfunction pathDSegment (letter, points, morePoints, lastPoint) {\n $.each(points, function (i, pnt) {\n points[i] = shortFloat(pnt);\n });\n let segment = letter + points.join(' ');\n if (morePoints) {\n segment += ' ' + morePoints.join(' ');\n }\n if (lastPoint) {\n segment += ' ' + shortFloat(lastPoint);\n }\n return segment;\n}\n\n/* eslint-disable jsdoc/require-property */\n/**\n* Group: Path edit functions.\n* Functions relating to editing path elements.\n* @namespace {PlainObject} pathActions\n* @memberof module:path\n*/\nexport const pathActions = (function () {\n /* eslint-enable jsdoc/require-property */\n let subpath = false;\n let newPoint, firstCtrl;\n\n let currentPath = null;\n let hasMoved = false;\n // No `editorContext_` yet but should be ok as is `null` by default\n // editorContext_.setDrawnPath(null);\n\n /**\n * This function converts a polyline (created by the fh_path tool) into\n * a path element and coverts every three line segments into a single bezier\n * curve in an attempt to smooth out the free-hand.\n * @function smoothPolylineIntoPath\n * @param {Element} element\n * @returns {Element}\n */\n const smoothPolylineIntoPath = function (element) {\n let i;\n const {points} = element;\n const N = points.numberOfItems;\n if (N >= 4) {\n // loop through every 3 points and convert to a cubic bezier curve segment\n //\n // NOTE: this is cheating, it means that every 3 points has the potential to\n // be a corner instead of treating each point in an equal manner. In general,\n // this technique does not look that good.\n //\n // I am open to better ideas!\n //\n // Reading:\n // - http://www.efg2.com/Lab/Graphics/Jean-YvesQueinecBezierCurves.htm\n // - https://www.codeproject.com/KB/graphics/BezierSpline.aspx?msg=2956963\n // - https://www.ian-ko.com/ET_GeoWizards/UserGuide/smooth.htm\n // - https://www.cs.mtu.edu/~shene/COURSES/cs3621/NOTES/spline/Bezier/bezier-der.html\n let curpos = points.getItem(0), prevCtlPt = null;\n let d = [];\n d.push(['M', curpos.x, ',', curpos.y, ' C'].join(''));\n for (i = 1; i <= (N - 4); i += 3) {\n let ct1 = points.getItem(i);\n const ct2 = points.getItem(i + 1);\n const end = points.getItem(i + 2);\n\n // if the previous segment had a control point, we want to smooth out\n // the control points on both sides\n if (prevCtlPt) {\n const newpts = smoothControlPoints(prevCtlPt, ct1, curpos);\n if (newpts && newpts.length === 2) {\n const prevArr = d[d.length - 1].split(',');\n prevArr[2] = newpts[0].x;\n prevArr[3] = newpts[0].y;\n d[d.length - 1] = prevArr.join(',');\n ct1 = newpts[1];\n }\n }\n\n d.push([ct1.x, ct1.y, ct2.x, ct2.y, end.x, end.y].join(','));\n\n curpos = end;\n prevCtlPt = ct2;\n }\n // handle remaining line segments\n d.push('L');\n while (i < N) {\n const pt = points.getItem(i);\n d.push([pt.x, pt.y].join(','));\n i++;\n }\n d = d.join(' ');\n\n // create new path element\n element = editorContext_.addSVGElementFromJson({\n element: 'path',\n curStyles: true,\n attr: {\n id: editorContext_.getId(),\n d,\n fill: 'none'\n }\n });\n // No need to call \"changed\", as this is already done under mouseUp\n }\n return element;\n };\n\n return (/** @lends module:path.pathActions */ {\n /**\n * @param {MouseEvent} evt\n * @param {Element} mouseTarget\n * @param {Float} startX\n * @param {Float} startY\n * @returns {boolean|void}\n */\n mouseDown (evt, mouseTarget, startX, startY) {\n let id;\n if (editorContext_.getCurrentMode() === 'path') {\n let mouseX = startX; // Was this meant to work with the other `mouseX`? (was defined globally so adding `let` to at least avoid a global)\n let mouseY = startY; // Was this meant to work with the other `mouseY`? (was defined globally so adding `let` to at least avoid a global)\n\n const currentZoom = editorContext_.getCurrentZoom();\n let x = mouseX / currentZoom,\n y = mouseY / currentZoom,\n stretchy = getElem('path_stretch_line');\n newPoint = [x, y];\n\n if (editorContext_.getGridSnapping()) {\n x = snapToGrid(x);\n y = snapToGrid(y);\n mouseX = snapToGrid(mouseX);\n mouseY = snapToGrid(mouseY);\n }\n\n if (!stretchy) {\n stretchy = document.createElementNS(NS.SVG, 'path');\n assignAttributes(stretchy, {\n id: 'path_stretch_line',\n stroke: '#22C',\n 'stroke-width': '0.5',\n fill: 'none'\n });\n stretchy = getElem('selectorParentGroup').appendChild(stretchy);\n }\n stretchy.setAttribute('display', 'inline');\n\n let keep = null;\n let index;\n // if pts array is empty, create path element with M at current point\n const drawnPath = editorContext_.getDrawnPath();\n if (!drawnPath) {\n const dAttr = 'M' + x + ',' + y + ' '; // Was this meant to work with the other `dAttr`? (was defined globally so adding `var` to at least avoid a global)\n /* drawnPath = */ editorContext_.setDrawnPath(editorContext_.addSVGElementFromJson({\n element: 'path',\n curStyles: true,\n attr: {\n d: dAttr,\n id: editorContext_.getNextId(),\n opacity: editorContext_.getOpacity() / 2\n }\n }));\n // set stretchy line to first point\n stretchy.setAttribute('d', ['M', mouseX, mouseY, mouseX, mouseY].join(' '));\n index = subpath ? path.segs.length : 0;\n addPointGrip(index, mouseX, mouseY);\n } else {\n // determine if we clicked on an existing point\n const seglist = drawnPath.pathSegList;\n let i = seglist.numberOfItems;\n const FUZZ = 6 / currentZoom;\n let clickOnPoint = false;\n while (i) {\n i--;\n const item = seglist.getItem(i);\n const px = item.x, py = item.y;\n // found a matching point\n if (x >= (px - FUZZ) && x <= (px + FUZZ) &&\n y >= (py - FUZZ) && y <= (py + FUZZ)\n ) {\n clickOnPoint = true;\n break;\n }\n }\n\n // get path element that we are in the process of creating\n id = editorContext_.getId();\n\n // Remove previous path object if previously created\n removePath_(id);\n\n const newpath = getElem(id);\n let newseg;\n let sSeg;\n const len = seglist.numberOfItems;\n // if we clicked on an existing point, then we are done this path, commit it\n // (i, i+1) are the x,y that were clicked on\n if (clickOnPoint) {\n // if clicked on any other point but the first OR\n // the first point was clicked on and there are less than 3 points\n // then leave the path open\n // otherwise, close the path\n if (i <= 1 && len >= 2) {\n // Create end segment\n const absX = seglist.getItem(0).x;\n const absY = seglist.getItem(0).y;\n\n sSeg = stretchy.pathSegList.getItem(1);\n if (sSeg.pathSegType === 4) {\n newseg = drawnPath.createSVGPathSegLinetoAbs(absX, absY);\n } else {\n newseg = drawnPath.createSVGPathSegCurvetoCubicAbs(\n absX,\n absY,\n sSeg.x1 / currentZoom,\n sSeg.y1 / currentZoom,\n absX,\n absY\n );\n }\n\n const endseg = drawnPath.createSVGPathSegClosePath();\n seglist.appendItem(newseg);\n seglist.appendItem(endseg);\n } else if (len < 3) {\n keep = false;\n return keep;\n }\n $(stretchy).remove();\n\n // This will signal to commit the path\n // const element = newpath; // Other event handlers define own `element`, so this was probably not meant to interact with them or one which shares state (as there were none); I therefore adding a missing `var` to avoid a global\n /* drawnPath = */ editorContext_.setDrawnPath(null);\n editorContext_.setStarted(false);\n\n if (subpath) {\n if (path.matrix) {\n editorContext_.remapElement(newpath, {}, path.matrix.inverse());\n }\n\n const newD = newpath.getAttribute('d');\n const origD = $(path.elem).attr('d');\n $(path.elem).attr('d', origD + newD);\n $(newpath).remove();\n if (path.matrix) {\n recalcRotatedPath();\n }\n init();\n pathActions.toEditMode(path.elem);\n path.selectPt();\n return false;\n }\n // else, create a new point, update path element\n } else {\n // Checks if current target or parents are #svgcontent\n if (!$.contains(\n editorContext_.getContainer(),\n editorContext_.getMouseTarget(evt)\n )) {\n // Clicked outside canvas, so don't make point\n // console.log('Clicked outside canvas');\n return false;\n }\n\n const num = drawnPath.pathSegList.numberOfItems;\n const last = drawnPath.pathSegList.getItem(num - 1);\n const lastx = last.x, lasty = last.y;\n\n if (evt.shiftKey) {\n const xya = snapToAngle(lastx, lasty, x, y);\n ({x, y} = xya);\n }\n\n // Use the segment defined by stretchy\n sSeg = stretchy.pathSegList.getItem(1);\n if (sSeg.pathSegType === 4) {\n newseg = drawnPath.createSVGPathSegLinetoAbs(\n editorContext_.round(x),\n editorContext_.round(y)\n );\n } else {\n newseg = drawnPath.createSVGPathSegCurvetoCubicAbs(\n editorContext_.round(x),\n editorContext_.round(y),\n sSeg.x1 / currentZoom,\n sSeg.y1 / currentZoom,\n sSeg.x2 / currentZoom,\n sSeg.y2 / currentZoom\n );\n }\n\n drawnPath.pathSegList.appendItem(newseg);\n\n x *= currentZoom;\n y *= currentZoom;\n\n // set stretchy line to latest point\n stretchy.setAttribute('d', ['M', x, y, x, y].join(' '));\n index = num;\n if (subpath) { index += path.segs.length; }\n addPointGrip(index, x, y);\n }\n // keep = true;\n }\n\n return undefined;\n }\n\n // TODO: Make sure currentPath isn't null at this point\n if (!path) { return undefined; }\n\n path.storeD();\n\n ({id} = evt.target);\n let curPt;\n if (id.substr(0, 14) === 'pathpointgrip_') {\n // Select this point\n curPt = path.cur_pt = parseInt(id.substr(14));\n path.dragging = [startX, startY];\n const seg = path.segs[curPt];\n\n // only clear selection if shift is not pressed (otherwise, add\n // node to selection)\n if (!evt.shiftKey) {\n if (path.selected_pts.length <= 1 || !seg.selected) {\n path.clearSelection();\n }\n path.addPtsToSelection(curPt);\n } else if (seg.selected) {\n path.removePtFromSelection(curPt);\n } else {\n path.addPtsToSelection(curPt);\n }\n } else if (id.startsWith('ctrlpointgrip_')) {\n path.dragging = [startX, startY];\n\n const parts = id.split('_')[1].split('c');\n curPt = Number(parts[0]);\n const ctrlNum = Number(parts[1]);\n path.selectPt(curPt, ctrlNum);\n }\n\n // Start selection box\n if (!path.dragging) {\n let rubberBox = editorContext_.getRubberBox();\n if (isNullish(rubberBox)) {\n rubberBox = editorContext_.setRubberBox(\n editorContext_.selectorManager.getRubberBandBox()\n );\n }\n const currentZoom = editorContext_.getCurrentZoom();\n assignAttributes(rubberBox, {\n x: startX * currentZoom,\n y: startY * currentZoom,\n width: 0,\n height: 0,\n display: 'inline'\n }, 100);\n }\n return undefined;\n },\n /**\n * @param {Float} mouseX\n * @param {Float} mouseY\n * @returns {void}\n */\n mouseMove (mouseX, mouseY) {\n const currentZoom = editorContext_.getCurrentZoom();\n hasMoved = true;\n const drawnPath = editorContext_.getDrawnPath();\n if (editorContext_.getCurrentMode() === 'path') {\n if (!drawnPath) { return; }\n const seglist = drawnPath.pathSegList;\n const index = seglist.numberOfItems - 1;\n\n if (newPoint) {\n // First point\n // if (!index) { return; }\n\n // Set control points\n const pointGrip1 = addCtrlGrip('1c1');\n const pointGrip2 = addCtrlGrip('0c2');\n\n // dragging pointGrip1\n pointGrip1.setAttribute('cx', mouseX);\n pointGrip1.setAttribute('cy', mouseY);\n pointGrip1.setAttribute('display', 'inline');\n\n const ptX = newPoint[0];\n const ptY = newPoint[1];\n\n // set curve\n // const seg = seglist.getItem(index);\n const curX = mouseX / currentZoom;\n const curY = mouseY / currentZoom;\n const altX = (ptX + (ptX - curX));\n const altY = (ptY + (ptY - curY));\n\n pointGrip2.setAttribute('cx', altX * currentZoom);\n pointGrip2.setAttribute('cy', altY * currentZoom);\n pointGrip2.setAttribute('display', 'inline');\n\n const ctrlLine = getCtrlLine(1);\n assignAttributes(ctrlLine, {\n x1: mouseX,\n y1: mouseY,\n x2: altX * currentZoom,\n y2: altY * currentZoom,\n display: 'inline'\n });\n\n if (index === 0) {\n firstCtrl = [mouseX, mouseY];\n } else {\n const last = seglist.getItem(index - 1);\n let lastX = last.x;\n let lastY = last.y;\n\n if (last.pathSegType === 6) {\n lastX += (lastX - last.x2);\n lastY += (lastY - last.y2);\n } else if (firstCtrl) {\n lastX = firstCtrl[0] / currentZoom;\n lastY = firstCtrl[1] / currentZoom;\n }\n replacePathSeg(6, index, [ptX, ptY, lastX, lastY, altX, altY], drawnPath);\n }\n } else {\n const stretchy = getElem('path_stretch_line');\n if (stretchy) {\n const prev = seglist.getItem(index);\n if (prev.pathSegType === 6) {\n const prevX = prev.x + (prev.x - prev.x2);\n const prevY = prev.y + (prev.y - prev.y2);\n replacePathSeg(6, 1, [mouseX, mouseY, prevX * currentZoom, prevY * currentZoom, mouseX, mouseY], stretchy);\n } else if (firstCtrl) {\n replacePathSeg(6, 1, [mouseX, mouseY, firstCtrl[0], firstCtrl[1], mouseX, mouseY], stretchy);\n } else {\n replacePathSeg(4, 1, [mouseX, mouseY], stretchy);\n }\n }\n }\n return;\n }\n // if we are dragging a point, let's move it\n if (path.dragging) {\n const pt = getPointFromGrip({\n x: path.dragging[0],\n y: path.dragging[1]\n }, path);\n const mpt = getPointFromGrip({\n x: mouseX,\n y: mouseY\n }, path);\n const diffX = mpt.x - pt.x;\n const diffY = mpt.y - pt.y;\n path.dragging = [mouseX, mouseY];\n\n if (path.dragctrl) {\n path.moveCtrl(diffX, diffY);\n } else {\n path.movePts(diffX, diffY);\n }\n } else {\n path.selected_pts = [];\n path.eachSeg(function (i) {\n const seg = this; // eslint-disable-line consistent-this\n if (!seg.next && !seg.prev) { return; }\n\n // const {item} = seg;\n const rubberBox = editorContext_.getRubberBox();\n const rbb = rubberBox.getBBox();\n\n const pt = getGripPt(seg);\n const ptBb = {\n x: pt.x,\n y: pt.y,\n width: 0,\n height: 0\n };\n\n const sel = rectsIntersect(rbb, ptBb);\n\n this.select(sel);\n // Note that addPtsToSelection is not being run\n if (sel) { path.selected_pts.push(seg.index); }\n });\n }\n },\n /**\n * @typedef module:path.keepElement\n * @type {PlainObject}\n * @property {boolean} keep\n * @property {Element} element\n */\n /**\n * @param {Event} evt\n * @param {Element} element\n * @param {Float} mouseX\n * @param {Float} mouseY\n * @returns {module:path.keepElement|void}\n */\n mouseUp (evt, element, mouseX, mouseY) {\n const drawnPath = editorContext_.getDrawnPath();\n // Create mode\n if (editorContext_.getCurrentMode() === 'path') {\n newPoint = null;\n if (!drawnPath) {\n element = getElem(editorContext_.getId());\n editorContext_.setStarted(false);\n firstCtrl = null;\n }\n\n return {\n keep: true,\n element\n };\n }\n\n // Edit mode\n const rubberBox = editorContext_.getRubberBox();\n if (path.dragging) {\n const lastPt = path.cur_pt;\n\n path.dragging = false;\n path.dragctrl = false;\n path.update();\n\n if (hasMoved) {\n path.endChanges('Move path point(s)');\n }\n\n if (!evt.shiftKey && !hasMoved) {\n path.selectPt(lastPt);\n }\n } else if (rubberBox && rubberBox.getAttribute('display') !== 'none') {\n // Done with multi-node-select\n rubberBox.setAttribute('display', 'none');\n\n if (rubberBox.getAttribute('width') <= 2 && rubberBox.getAttribute('height') <= 2) {\n pathActions.toSelectMode(evt.target);\n }\n\n // else, move back to select mode\n } else {\n pathActions.toSelectMode(evt.target);\n }\n hasMoved = false;\n return undefined;\n },\n /**\n * @param {Element} element\n * @returns {void}\n */\n toEditMode (element) {\n path = getPath_(element);\n editorContext_.setCurrentMode('pathedit');\n editorContext_.clearSelection();\n path.show(true).update();\n path.oldbbox = utilsGetBBox(path.elem);\n subpath = false;\n },\n /**\n * @param {Element} elem\n * @fires module:svgcanvas.SvgCanvas#event:selected\n * @returns {void}\n */\n toSelectMode (elem) {\n const selPath = (elem === path.elem);\n editorContext_.setCurrentMode('select');\n path.show(false);\n currentPath = false;\n editorContext_.clearSelection();\n\n if (path.matrix) {\n // Rotated, so may need to re-calculate the center\n recalcRotatedPath();\n }\n\n if (selPath) {\n editorContext_.call('selected', [elem]);\n editorContext_.addToSelection([elem], true);\n }\n },\n /**\n * @param {boolean} on\n * @returns {void}\n */\n addSubPath (on) {\n if (on) {\n // Internally we go into \"path\" mode, but in the UI it will\n // still appear as if in \"pathedit\" mode.\n editorContext_.setCurrentMode('path');\n subpath = true;\n } else {\n pathActions.clear(true);\n pathActions.toEditMode(path.elem);\n }\n },\n /**\n * @param {Element} target\n * @returns {void}\n */\n select (target) {\n if (currentPath === target) {\n pathActions.toEditMode(target);\n editorContext_.setCurrentMode('pathedit');\n // going into pathedit mode\n } else {\n currentPath = target;\n }\n },\n /**\n * @fires module:svgcanvas.SvgCanvas#event:changed\n * @returns {void}\n */\n reorient () {\n const elem = editorContext_.getSelectedElements()[0];\n if (!elem) { return; }\n const angl = getRotationAngle(elem);\n if (angl === 0) { return; }\n\n const batchCmd = new BatchCommand('Reorient path');\n const changes = {\n d: elem.getAttribute('d'),\n transform: elem.getAttribute('transform')\n };\n batchCmd.addSubCommand(new ChangeElementCommand(elem, changes));\n editorContext_.clearSelection();\n this.resetOrientation(elem);\n\n editorContext_.addCommandToHistory(batchCmd);\n\n // Set matrix to null\n getPath_(elem).show(false).matrix = null;\n\n this.clear();\n\n editorContext_.addToSelection([elem], true);\n editorContext_.call('changed', editorContext_.getSelectedElements());\n },\n\n /**\n * @param {boolean} remove Not in use\n * @returns {void}\n */\n clear (remove) {\n const drawnPath = editorContext_.getDrawnPath();\n currentPath = null;\n if (drawnPath) {\n const elem = getElem(editorContext_.getId());\n $(getElem('path_stretch_line')).remove();\n $(elem).remove();\n $(getElem('pathpointgrip_container')).find('*').attr('display', 'none');\n firstCtrl = null;\n editorContext_.setDrawnPath(null);\n editorContext_.setStarted(false);\n } else if (editorContext_.getCurrentMode() === 'pathedit') {\n this.toSelectMode();\n }\n if (path) { path.init().show(false); }\n },\n /**\n * @param {?(Element|SVGPathElement)} pth\n * @returns {false|void}\n */\n resetOrientation (pth) {\n if (isNullish(pth) || pth.nodeName !== 'path') { return false; }\n const tlist = getTransformList(pth);\n const m = transformListToTransform(tlist).matrix;\n tlist.clear();\n pth.removeAttribute('transform');\n const segList = pth.pathSegList;\n\n // Opera/win/non-EN throws an error here.\n // TODO: Find out why!\n // Presumed fixed in Opera 10.5, so commented out for now\n\n // try {\n const len = segList.numberOfItems;\n // } catch(err) {\n // const fixed_d = pathActions.convertPath(pth);\n // pth.setAttribute('d', fixed_d);\n // segList = pth.pathSegList;\n // const len = segList.numberOfItems;\n // }\n // let lastX, lastY;\n for (let i = 0; i < len; ++i) {\n const seg = segList.getItem(i);\n const type = seg.pathSegType;\n if (type === 1) { continue; }\n const pts = [];\n $.each(['', 1, 2], function (j, n) {\n const x = seg['x' + n], y = seg['y' + n];\n if (x !== undefined && y !== undefined) {\n const pt = transformPoint(x, y, m);\n pts.splice(pts.length, 0, pt.x, pt.y);\n }\n });\n replacePathSeg(type, i, pts, pth);\n }\n\n reorientGrads(pth, m);\n return undefined;\n },\n /**\n * @returns {void}\n */\n zoomChange () {\n if (editorContext_.getCurrentMode() === 'pathedit') {\n path.update();\n }\n },\n /**\n * @typedef {PlainObject} module:path.NodePoint\n * @property {Float} x\n * @property {Float} y\n * @property {Integer} type\n */\n /**\n * @returns {module:path.NodePoint}\n */\n getNodePoint () {\n const selPt = path.selected_pts.length ? path.selected_pts[0] : 1;\n\n const seg = path.segs[selPt];\n return {\n x: seg.item.x,\n y: seg.item.y,\n type: seg.type\n };\n },\n /**\n * @param {boolean} linkPoints\n * @returns {void}\n */\n linkControlPoints (linkPoints) {\n setLinkControlPoints(linkPoints);\n },\n /**\n * @returns {void}\n */\n clonePathNode () {\n path.storeD();\n\n const selPts = path.selected_pts;\n // const {segs} = path;\n\n let i = selPts.length;\n const nums = [];\n\n while (i--) {\n const pt = selPts[i];\n path.addSeg(pt);\n\n nums.push(pt + i);\n nums.push(pt + i + 1);\n }\n path.init().addPtsToSelection(nums);\n\n path.endChanges('Clone path node(s)');\n },\n /**\n * @returns {void}\n */\n opencloseSubPath () {\n const selPts = path.selected_pts;\n // Only allow one selected node for now\n if (selPts.length !== 1) { return; }\n\n const {elem} = path;\n const list = elem.pathSegList;\n\n // const len = list.numberOfItems;\n\n const index = selPts[0];\n\n let openPt = null;\n let startItem = null;\n\n // Check if subpath is already open\n path.eachSeg(function (i) {\n if (this.type === 2 && i <= index) {\n startItem = this.item;\n }\n if (i <= index) { return true; }\n if (this.type === 2) {\n // Found M first, so open\n openPt = i;\n return false;\n }\n if (this.type === 1) {\n // Found Z first, so closed\n openPt = false;\n return false;\n }\n return true;\n });\n\n if (isNullish(openPt)) {\n // Single path, so close last seg\n openPt = path.segs.length - 1;\n }\n\n if (openPt !== false) {\n // Close this path\n\n // Create a line going to the previous \"M\"\n const newseg = elem.createSVGPathSegLinetoAbs(startItem.x, startItem.y);\n\n const closer = elem.createSVGPathSegClosePath();\n if (openPt === path.segs.length - 1) {\n list.appendItem(newseg);\n list.appendItem(closer);\n } else {\n insertItemBefore(elem, closer, openPt);\n insertItemBefore(elem, newseg, openPt);\n }\n\n path.init().selectPt(openPt + 1);\n return;\n }\n\n // M 1,1 L 2,2 L 3,3 L 1,1 z // open at 2,2\n // M 2,2 L 3,3 L 1,1\n\n // M 1,1 L 2,2 L 1,1 z M 4,4 L 5,5 L6,6 L 5,5 z\n // M 1,1 L 2,2 L 1,1 z [M 4,4] L 5,5 L(M)6,6 L 5,5 z\n\n const seg = path.segs[index];\n\n if (seg.mate) {\n list.removeItem(index); // Removes last \"L\"\n list.removeItem(index); // Removes the \"Z\"\n path.init().selectPt(index - 1);\n return;\n }\n\n let lastM, zSeg;\n\n // Find this sub-path's closing point and remove\n for (let i = 0; i < list.numberOfItems; i++) {\n const item = list.getItem(i);\n\n if (item.pathSegType === 2) {\n // Find the preceding M\n lastM = i;\n } else if (i === index) {\n // Remove it\n list.removeItem(lastM);\n // index--;\n } else if (item.pathSegType === 1 && index < i) {\n // Remove the closing seg of this subpath\n zSeg = i - 1;\n list.removeItem(i);\n break;\n }\n }\n\n let num = (index - lastM) - 1;\n\n while (num--) {\n insertItemBefore(elem, list.getItem(lastM), zSeg);\n }\n\n const pt = list.getItem(lastM);\n\n // Make this point the new \"M\"\n replacePathSeg(2, lastM, [pt.x, pt.y]);\n\n // i = index; // i is local here, so has no effect; what was the intent for this?\n\n path.init().selectPt(0);\n },\n /**\n * @returns {void}\n */\n deletePathNode () {\n if (!pathActions.canDeleteNodes) { return; }\n path.storeD();\n\n const selPts = path.selected_pts;\n\n let i = selPts.length;\n while (i--) {\n const pt = selPts[i];\n path.deleteSeg(pt);\n }\n\n // Cleanup\n const cleanup = function () {\n const segList = path.elem.pathSegList;\n let len = segList.numberOfItems;\n\n const remItems = function (pos, count) {\n while (count--) {\n segList.removeItem(pos);\n }\n };\n\n if (len <= 1) { return true; }\n\n while (len--) {\n const item = segList.getItem(len);\n if (item.pathSegType === 1) {\n const prev = segList.getItem(len - 1);\n const nprev = segList.getItem(len - 2);\n if (prev.pathSegType === 2) {\n remItems(len - 1, 2);\n cleanup();\n break;\n } else if (nprev.pathSegType === 2) {\n remItems(len - 2, 3);\n cleanup();\n break;\n }\n } else if (item.pathSegType === 2) {\n if (len > 0) {\n const prevType = segList.getItem(len - 1).pathSegType;\n // Path has M M\n if (prevType === 2) {\n remItems(len - 1, 1);\n cleanup();\n break;\n // Entire path ends with Z M\n } else if (prevType === 1 && segList.numberOfItems - 1 === len) {\n remItems(len, 1);\n cleanup();\n break;\n }\n }\n }\n }\n return false;\n };\n\n cleanup();\n\n // Completely delete a path with 1 or 0 segments\n if (path.elem.pathSegList.numberOfItems <= 1) {\n pathActions.toSelectMode(path.elem);\n editorContext_.canvas.deleteSelectedElements();\n return;\n }\n\n path.init();\n path.clearSelection();\n\n // TODO: Find right way to select point now\n // path.selectPt(selPt);\n if (window.opera) { // Opera repaints incorrectly\n const cp = $(path.elem);\n cp.attr('d', cp.attr('d'));\n }\n path.endChanges('Delete path node(s)');\n },\n /* eslint-disable jsdoc/require-returns */\n // Can't seem to use `@borrows` here, so using `@see`\n /**\n * Smooth polyline into path.\n * @function module:path.pathActions.smoothPolylineIntoPath\n * @see module:path~smoothPolylineIntoPath\n */\n smoothPolylineIntoPath,\n /* eslint-enable jsdoc/require-returns */\n /**\n * @param {?Integer} v See {@link https://www.w3.org/TR/SVG/single-page.html#paths-InterfaceSVGPathSeg}\n * @returns {void}\n */\n setSegType (v) {\n path.setSegType(v);\n },\n /**\n * @param {string} attr\n * @param {Float} newValue\n * @returns {void}\n */\n moveNode (attr, newValue) {\n const selPts = path.selected_pts;\n if (!selPts.length) { return; }\n\n path.storeD();\n\n // Get first selected point\n const seg = path.segs[selPts[0]];\n const diff = {x: 0, y: 0};\n diff[attr] = newValue - seg.item[attr];\n\n seg.move(diff.x, diff.y);\n path.endChanges('Move path point');\n },\n /**\n * @param {Element} elem\n * @returns {void}\n */\n fixEnd (elem) {\n // Adds an extra segment if the last seg before a Z doesn't end\n // at its M point\n // M0,0 L0,100 L100,100 z\n const segList = elem.pathSegList;\n const len = segList.numberOfItems;\n let lastM;\n for (let i = 0; i < len; ++i) {\n const item = segList.getItem(i);\n if (item.pathSegType === 2) {\n lastM = item;\n }\n\n if (item.pathSegType === 1) {\n const prev = segList.getItem(i - 1);\n if (prev.x !== lastM.x || prev.y !== lastM.y) {\n // Add an L segment here\n const newseg = elem.createSVGPathSegLinetoAbs(lastM.x, lastM.y);\n insertItemBefore(elem, newseg, i);\n // Can this be done better?\n pathActions.fixEnd(elem);\n break;\n }\n }\n }\n if (isWebkit()) { editorContext_.resetD(elem); }\n },\n /* eslint-disable jsdoc/require-returns */\n // Can't seem to use `@borrows` here, so using `@see`\n /**\n * Convert a path to one with only absolute or relative values.\n * @function module:path.pathActions.convertPath\n * @see module:path.convertPath\n */\n convertPath\n /* eslint-enable jsdoc/require-returns */\n });\n})();\n// end pathActions\n","/**\n * Mathematical utilities.\n * @module math\n * @license MIT\n *\n * @copyright 2010 Alexis Deveria, 2010 Jeff Schiller\n */\n\n/**\n* @typedef {PlainObject} module:math.AngleCoord45\n* @property {Float} x - The angle-snapped x value\n* @property {Float} y - The angle-snapped y value\n* @property {Integer} a - The angle at which to snap\n*/\n\n/**\n* @typedef {PlainObject} module:math.XYObject\n* @property {Float} x\n* @property {Float} y\n*/\n\nimport {NS} from './namespaces.js';\nimport {getTransformList} from './svgtransformlist.js';\nimport {isNullish} from './utilities.js';\n\n// Constants\nconst NEAR_ZERO = 1e-14;\n\n// Throw away SVGSVGElement used for creating matrices/transforms.\nconst svg = document.createElementNS(NS.SVG, 'svg');\n\n/**\n * A (hopefully) quicker function to transform a point by a matrix\n * (this function avoids any DOM calls and just does the math).\n * @function module:math.transformPoint\n * @param {Float} x - Float representing the x coordinate\n * @param {Float} y - Float representing the y coordinate\n * @param {SVGMatrix} m - Matrix object to transform the point with\n * @returns {module:math.XYObject} An x, y object representing the transformed point\n*/\nexport const transformPoint = function (x, y, m) {\n return {x: m.a * x + m.c * y + m.e, y: m.b * x + m.d * y + m.f};\n};\n\n/**\n * Helper function to check if the matrix performs no actual transform\n * (i.e. exists for identity purposes).\n * @function module:math.isIdentity\n * @param {SVGMatrix} m - The matrix object to check\n * @returns {boolean} Indicates whether or not the matrix is 1,0,0,1,0,0\n*/\nexport const isIdentity = function (m) {\n return (m.a === 1 && m.b === 0 && m.c === 0 && m.d === 1 && m.e === 0 && m.f === 0);\n};\n\n/**\n * This function tries to return a `SVGMatrix` that is the multiplication `m1 * m2`.\n * We also round to zero when it's near zero.\n * @function module:math.matrixMultiply\n * @param {...SVGMatrix} args - Matrix objects to multiply\n * @returns {SVGMatrix} The matrix object resulting from the calculation\n*/\nexport const matrixMultiply = function (...args) {\n const m = args.reduceRight((prev, m1) => {\n return m1.multiply(prev);\n });\n\n if (Math.abs(m.a) < NEAR_ZERO) { m.a = 0; }\n if (Math.abs(m.b) < NEAR_ZERO) { m.b = 0; }\n if (Math.abs(m.c) < NEAR_ZERO) { m.c = 0; }\n if (Math.abs(m.d) < NEAR_ZERO) { m.d = 0; }\n if (Math.abs(m.e) < NEAR_ZERO) { m.e = 0; }\n if (Math.abs(m.f) < NEAR_ZERO) { m.f = 0; }\n\n return m;\n};\n\n/**\n * See if the given transformlist includes a non-indentity matrix transform.\n * @function module:math.hasMatrixTransform\n * @param {SVGTransformList} [tlist] - The transformlist to check\n * @returns {boolean} Whether or not a matrix transform was found\n*/\nexport const hasMatrixTransform = function (tlist) {\n if (!tlist) { return false; }\n let num = tlist.numberOfItems;\n while (num--) {\n const xform = tlist.getItem(num);\n if (xform.type === 1 && !isIdentity(xform.matrix)) { return true; }\n }\n return false;\n};\n\n/**\n* @typedef {PlainObject} module:math.TransformedBox An object with the following values\n* @property {module:math.XYObject} tl - The top left coordinate\n* @property {module:math.XYObject} tr - The top right coordinate\n* @property {module:math.XYObject} bl - The bottom left coordinate\n* @property {module:math.XYObject} br - The bottom right coordinate\n* @property {PlainObject} aabox - Object with the following values:\n* @property {Float} aabox.x - Float with the axis-aligned x coordinate\n* @property {Float} aabox.y - Float with the axis-aligned y coordinate\n* @property {Float} aabox.width - Float with the axis-aligned width coordinate\n* @property {Float} aabox.height - Float with the axis-aligned height coordinate\n*/\n\n/**\n * Transforms a rectangle based on the given matrix.\n * @function module:math.transformBox\n * @param {Float} l - Float with the box's left coordinate\n * @param {Float} t - Float with the box's top coordinate\n * @param {Float} w - Float with the box width\n * @param {Float} h - Float with the box height\n * @param {SVGMatrix} m - Matrix object to transform the box by\n * @returns {module:math.TransformedBox}\n*/\nexport const transformBox = function (l, t, w, h, m) {\n const tl = transformPoint(l, t, m),\n tr = transformPoint((l + w), t, m),\n bl = transformPoint(l, (t + h), m),\n br = transformPoint((l + w), (t + h), m),\n\n minx = Math.min(tl.x, tr.x, bl.x, br.x),\n maxx = Math.max(tl.x, tr.x, bl.x, br.x),\n miny = Math.min(tl.y, tr.y, bl.y, br.y),\n maxy = Math.max(tl.y, tr.y, bl.y, br.y);\n\n return {\n tl,\n tr,\n bl,\n br,\n aabox: {\n x: minx,\n y: miny,\n width: (maxx - minx),\n height: (maxy - miny)\n }\n };\n};\n\n/**\n * This returns a single matrix Transform for a given Transform List\n * (this is the equivalent of `SVGTransformList.consolidate()` but unlike\n * that method, this one does not modify the actual `SVGTransformList`).\n * This function is very liberal with its `min`, `max` arguments.\n * @function module:math.transformListToTransform\n * @param {SVGTransformList} tlist - The transformlist object\n * @param {Integer} [min=0] - Optional integer indicating start transform position\n * @param {Integer} [max] - Optional integer indicating end transform position;\n * defaults to one less than the tlist's `numberOfItems`\n * @returns {SVGTransform} A single matrix transform object\n*/\nexport const transformListToTransform = function (tlist, min, max) {\n if (isNullish(tlist)) {\n // Or should tlist = null have been prevented before this?\n return svg.createSVGTransformFromMatrix(svg.createSVGMatrix());\n }\n min = min || 0;\n max = max || (tlist.numberOfItems - 1);\n min = parseInt(min);\n max = parseInt(max);\n if (min > max) { const temp = max; max = min; min = temp; }\n let m = svg.createSVGMatrix();\n for (let i = min; i <= max; ++i) {\n // if our indices are out of range, just use a harmless identity matrix\n const mtom = (i >= 0 && i < tlist.numberOfItems\n ? tlist.getItem(i).matrix\n : svg.createSVGMatrix());\n m = matrixMultiply(m, mtom);\n }\n return svg.createSVGTransformFromMatrix(m);\n};\n\n/**\n * Get the matrix object for a given element.\n * @function module:math.getMatrix\n * @param {Element} elem - The DOM element to check\n * @returns {SVGMatrix} The matrix object associated with the element's transformlist\n*/\nexport const getMatrix = function (elem) {\n const tlist = getTransformList(elem);\n return transformListToTransform(tlist).matrix;\n};\n\n/**\n * Returns a 45 degree angle coordinate associated with the two given\n * coordinates.\n * @function module:math.snapToAngle\n * @param {Integer} x1 - First coordinate's x value\n * @param {Integer} y1 - First coordinate's y value\n * @param {Integer} x2 - Second coordinate's x value\n * @param {Integer} y2 - Second coordinate's y value\n * @returns {module:math.AngleCoord45}\n*/\nexport const snapToAngle = function (x1, y1, x2, y2) {\n const snap = Math.PI / 4; // 45 degrees\n const dx = x2 - x1;\n const dy = y2 - y1;\n const angle = Math.atan2(dy, dx);\n const dist = Math.sqrt(dx * dx + dy * dy);\n const snapangle = Math.round(angle / snap) * snap;\n\n return {\n x: x1 + dist * Math.cos(snapangle),\n y: y1 + dist * Math.sin(snapangle),\n a: snapangle\n };\n};\n\n/**\n * Check if two rectangles (BBoxes objects) intersect each other.\n * @function module:math.rectsIntersect\n * @param {SVGRect} r1 - The first BBox-like object\n * @param {SVGRect} r2 - The second BBox-like object\n * @returns {boolean} True if rectangles intersect\n */\nexport const rectsIntersect = function (r1, r2) {\n return r2.x < (r1.x + r1.width) &&\n (r2.x + r2.width) > r1.x &&\n r2.y < (r1.y + r1.height) &&\n (r2.y + r2.height) > r1.y;\n};\n","/* globals jQuery */\n/**\n * Miscellaneous utilities.\n * @module utilities\n * @license MIT\n *\n * @copyright 2010 Alexis Deveria, 2010 Jeff Schiller\n */\n\nimport './svgpathseg.js';\nimport jQueryPluginSVG from './jQuery.attr.js'; // Needed for SVG attribute setting and array form with `attr`\nimport {NS} from './namespaces.js';\nimport {getTransformList} from './svgtransformlist.js';\nimport {setUnitAttr, getTypeMap} from './units.js';\nimport {convertPath} from './path.js';\nimport {\n hasMatrixTransform, transformListToTransform, transformBox\n} from './math.js';\nimport {\n isWebkit, supportsHVLineContainerBBox, supportsPathBBox, supportsXpath,\n supportsSelectors\n} from './browser.js';\n\n// Constants\nconst $ = jQueryPluginSVG(jQuery);\n\n// String used to encode base64.\nconst KEYSTR = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';\n\n// Much faster than running getBBox() every time\nconst visElems = 'a,circle,ellipse,foreignObject,g,image,line,path,polygon,polyline,rect,svg,text,tspan,use';\nconst visElemsArr = visElems.split(',');\n// const hidElems = 'clipPath,defs,desc,feGaussianBlur,filter,linearGradient,marker,mask,metadata,pattern,radialGradient,stop,switch,symbol,title,textPath';\n\nlet editorContext_ = null;\nlet domdoc_ = null;\nlet domcontainer_ = null;\nlet svgroot_ = null;\n\n/**\n* Object with the following keys/values.\n* @typedef {PlainObject} module:utilities.SVGElementJSON\n* @property {string} element - Tag name of the SVG element to create\n* @property {PlainObject} attr - Has key-value attributes to assign to the new element. An `id` should be set so that {@link module:utilities.EditorContext#addSVGElementFromJson} can later re-identify the element for modification or replacement.\n* @property {boolean} [curStyles=false] - Indicates whether current style attributes should be applied first\n* @property {module:utilities.SVGElementJSON[]} [children] - Data objects to be added recursively as children\n* @property {string} [namespace=\"http://www.w3.org/2000/svg\"] - Indicate a (non-SVG) namespace\n*/\n\n/**\n * An object that creates SVG elements for the canvas.\n *\n * @interface module:utilities.EditorContext\n * @property {module:path.pathActions} pathActions\n */\n/**\n * @function module:utilities.EditorContext#getSVGContent\n * @returns {SVGSVGElement}\n */\n/**\n * Create a new SVG element based on the given object keys/values and add it\n * to the current layer.\n * The element will be run through `cleanupElement` before being returned.\n * @function module:utilities.EditorContext#addSVGElementFromJson\n * @param {module:utilities.SVGElementJSON} data\n * @returns {Element} The new element\n*/\n/**\n * @function module:utilities.EditorContext#getSelectedElements\n * @returns {Element[]} the array with selected DOM elements\n*/\n/**\n * @function module:utilities.EditorContext#getDOMDocument\n * @returns {HTMLDocument}\n*/\n/**\n * @function module:utilities.EditorContext#getDOMContainer\n * @returns {HTMLElement}\n*/\n/**\n * @function module:utilities.EditorContext#getSVGRoot\n * @returns {SVGSVGElement}\n*/\n/**\n * @function module:utilities.EditorContext#getBaseUnit\n * @returns {string}\n*/\n/**\n * @function module:utilities.EditorContext#getSnappingStep\n * @returns {Float|string}\n*/\n\n/**\n* @function module:utilities.init\n* @param {module:utilities.EditorContext} editorContext\n* @returns {void}\n*/\nexport const init = function (editorContext) {\n editorContext_ = editorContext;\n domdoc_ = editorContext.getDOMDocument();\n domcontainer_ = editorContext.getDOMContainer();\n svgroot_ = editorContext.getSVGRoot();\n};\n\n/**\n * Used to prevent the [Billion laughs attack]{@link https://en.wikipedia.org/wiki/Billion_laughs_attack}.\n * @function module:utilities.dropXMLInternalSubset\n * @param {string} str String to be processed\n * @returns {string} The string with entity declarations in the internal subset removed\n * @todo This might be needed in other places `parseFromString` is used even without LGTM flagging\n */\nexport const dropXMLInternalSubset = (str) => {\n return str.replace(/()/, '$1$2');\n // return str.replace(/(?\\?\\]>)/, '$$');\n};\n\n/**\n* Converts characters in a string to XML-friendly entities.\n* @function module:utilities.toXml\n* @example `&` becomes `&`\n* @param {string} str - The string to be converted\n* @returns {string} The converted string\n*/\nexport const toXml = function (str) {\n // ' is ok in XML, but not HTML\n // > does not normally need escaping, though it can if within a CDATA expression (and preceded by \"]]\")\n return str\n .replace(/&/g, '&')\n .replace(//g, '>')\n .replace(/\"/g, '"')\n .replace(/'/g, '''); // Note: `'` is XML only\n};\n\n/**\n* Converts XML entities in a string to single characters.\n* @function module:utilities.fromXml\n* @example `&` becomes `&`\n* @param {string} str - The string to be converted\n* @returns {string} The converted string\n*/\nexport function fromXml (str) {\n return $('
').html(str).text();\n}\n\n// This code was written by Tyler Akins and has been placed in the\n// public domain. It would be nice if you left this header intact.\n// Base64 code from Tyler Akins -- http://rumkin.com\n\n// schiller: Removed string concatenation in favour of Array.join() optimization,\n// also precalculate the size of the array needed.\n\n/**\n* Converts a string to base64.\n* @function module:utilities.encode64\n* @param {string} input\n* @returns {string} Base64 output\n*/\nexport function encode64 (input) {\n // base64 strings are 4/3 larger than the original string\n input = encodeUTF8(input); // convert non-ASCII characters\n // input = convertToXMLReferences(input);\n if (window.btoa) {\n return window.btoa(input); // Use native if available\n }\n const output = new Array(Math.floor((input.length + 2) / 3) * 4);\n\n let i = 0,\n p = 0;\n do {\n const chr1 = input.charCodeAt(i++);\n const chr2 = input.charCodeAt(i++);\n const chr3 = input.charCodeAt(i++);\n\n /* eslint-disable no-bitwise */\n const enc1 = chr1 >> 2;\n const enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);\n\n let enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);\n let enc4 = chr3 & 63;\n /* eslint-enable no-bitwise */\n\n if (isNaN(chr2)) {\n enc3 = 64;\n enc4 = 64;\n } else if (isNaN(chr3)) {\n enc4 = 64;\n }\n\n output[p++] = KEYSTR.charAt(enc1);\n output[p++] = KEYSTR.charAt(enc2);\n output[p++] = KEYSTR.charAt(enc3);\n output[p++] = KEYSTR.charAt(enc4);\n } while (i < input.length);\n\n return output.join('');\n}\n\n/**\n* Converts a string from base64.\n* @function module:utilities.decode64\n* @param {string} input Base64-encoded input\n* @returns {string} Decoded output\n*/\nexport function decode64 (input) {\n if (window.atob) {\n return decodeUTF8(window.atob(input));\n }\n\n // remove all characters that are not A-Z, a-z, 0-9, +, /, or =\n input = input.replace(/[^A-Za-z\\d+/=]/g, '');\n\n let output = '';\n let i = 0;\n\n do {\n const enc1 = KEYSTR.indexOf(input.charAt(i++));\n const enc2 = KEYSTR.indexOf(input.charAt(i++));\n const enc3 = KEYSTR.indexOf(input.charAt(i++));\n const enc4 = KEYSTR.indexOf(input.charAt(i++));\n\n /* eslint-disable no-bitwise */\n const chr1 = (enc1 << 2) | (enc2 >> 4);\n const chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);\n const chr3 = ((enc3 & 3) << 6) | enc4;\n /* eslint-enable no-bitwise */\n\n output += String.fromCharCode(chr1);\n\n if (enc3 !== 64) {\n output += String.fromCharCode(chr2);\n }\n if (enc4 !== 64) {\n output += String.fromCharCode(chr3);\n }\n } while (i < input.length);\n return decodeUTF8(output);\n}\n\n/**\n* @function module:utilities.decodeUTF8\n* @param {string} argString\n* @returns {string}\n*/\nexport function decodeUTF8 (argString) {\n return decodeURIComponent(escape(argString));\n}\n\n// codedread:does not seem to work with webkit-based browsers on OSX // Brettz9: please test again as function upgraded\n/**\n* @function module:utilities.encodeUTF8\n* @param {string} argString\n* @returns {string}\n*/\nexport const encodeUTF8 = function (argString) {\n return unescape(encodeURIComponent(argString));\n};\n\n/**\n * Convert dataURL to object URL.\n * @function module:utilities.dataURLToObjectURL\n * @param {string} dataurl\n * @returns {string} object URL or empty string\n */\nexport const dataURLToObjectURL = function (dataurl) {\n if (typeof Uint8Array === 'undefined' || typeof Blob === 'undefined' || typeof URL === 'undefined' || !URL.createObjectURL) {\n return '';\n }\n const arr = dataurl.split(','),\n mime = arr[0].match(/:(.*?);/)[1],\n bstr = atob(arr[1]);\n /*\n const [prefix, suffix] = dataurl.split(','),\n {groups: {mime}} = prefix.match(/:(?.*?);/),\n bstr = atob(suffix);\n */\n let n = bstr.length;\n const u8arr = new Uint8Array(n);\n while (n--) {\n u8arr[n] = bstr.charCodeAt(n);\n }\n const blob = new Blob([u8arr], {type: mime});\n return URL.createObjectURL(blob);\n};\n\n/**\n * Get object URL for a blob object.\n * @function module:utilities.createObjectURL\n * @param {Blob} blob A Blob object or File object\n * @returns {string} object URL or empty string\n */\nexport const createObjectURL = function (blob) {\n if (!blob || typeof URL === 'undefined' || !URL.createObjectURL) {\n return '';\n }\n return URL.createObjectURL(blob);\n};\n\n/**\n * @property {string} blankPageObjectURL\n */\nexport const blankPageObjectURL = (function () {\n if (typeof Blob === 'undefined') {\n return '';\n }\n const blob = new Blob(['SVG-edit '], {type: 'text/html'});\n return createObjectURL(blob);\n})();\n\n/**\n* Converts a string to use XML references (for non-ASCII).\n* @function module:utilities.convertToXMLReferences\n* @param {string} input\n* @returns {string} Decimal numeric character references\n*/\nexport const convertToXMLReferences = function (input) {\n let output = '';\n [...input].forEach((ch) => {\n const c = ch.charCodeAt();\n if (c <= 127) {\n output += ch;\n } else {\n output += `&#${c};`;\n }\n });\n return output;\n};\n\n/**\n* Cross-browser compatible method of converting a string to an XML tree.\n* Found this function [here]{@link http://groups.google.com/group/jquery-dev/browse_thread/thread/c6d11387c580a77f}.\n* @function module:utilities.text2xml\n* @param {string} sXML\n* @throws {Error}\n* @returns {XMLDocument}\n*/\nexport const text2xml = function (sXML) {\n if (sXML.includes('` element, creating it first if necessary\n*/\nexport const findDefs = function () {\n const svgElement = editorContext_.getSVGContent();\n let defs = svgElement.getElementsByTagNameNS(NS.SVG, 'defs');\n if (defs.length > 0) {\n defs = defs[0];\n } else {\n defs = svgElement.ownerDocument.createElementNS(NS.SVG, 'defs');\n if (svgElement.firstChild) {\n // first child is a comment, so call nextSibling\n svgElement.insertBefore(defs, svgElement.firstChild.nextSibling);\n // svgElement.firstChild.nextSibling.before(defs); // Not safe\n } else {\n svgElement.append(defs);\n }\n }\n return defs;\n};\n\n// TODO(codedread): Consider moving the next to functions to bbox.js\n\n/**\n* Get correct BBox for a path in Webkit.\n* Converted from code found [here]{@link http://blog.hackers-cafe.net/2009/06/how-to-calculate-bezier-curves-bounding.html}.\n* @function module:utilities.getPathBBox\n* @param {SVGPathElement} path - The path DOM element to get the BBox for\n* @returns {module:utilities.BBoxObject} A BBox-like object\n*/\nexport const getPathBBox = function (path) {\n const seglist = path.pathSegList;\n const tot = seglist.numberOfItems;\n\n const bounds = [[], []];\n const start = seglist.getItem(0);\n let P0 = [start.x, start.y];\n\n const getCalc = function (j, P1, P2, P3) {\n return function (t) {\n return 1 - (t ** 3) * P0[j] +\n 3 * 1 - (t ** 2) * t * P1[j] +\n 3 * (1 - t) * (t ** 2) * P2[j] +\n (t ** 3) * P3[j];\n };\n };\n\n for (let i = 0; i < tot; i++) {\n const seg = seglist.getItem(i);\n\n if (seg.x === undefined) { continue; }\n\n // Add actual points to limits\n bounds[0].push(P0[0]);\n bounds[1].push(P0[1]);\n\n if (seg.x1) {\n const P1 = [seg.x1, seg.y1],\n P2 = [seg.x2, seg.y2],\n P3 = [seg.x, seg.y];\n\n for (let j = 0; j < 2; j++) {\n const calc = getCalc(j, P1, P2, P3);\n\n const b = 6 * P0[j] - 12 * P1[j] + 6 * P2[j];\n const a = -3 * P0[j] + 9 * P1[j] - 9 * P2[j] + 3 * P3[j];\n const c = 3 * P1[j] - 3 * P0[j];\n\n if (a === 0) {\n if (b === 0) { continue; }\n const t = -c / b;\n if (t > 0 && t < 1) {\n bounds[j].push(calc(t));\n }\n continue;\n }\n const b2ac = (b ** 2) - 4 * c * a;\n if (b2ac < 0) { continue; }\n const t1 = (-b + Math.sqrt(b2ac)) / (2 * a);\n if (t1 > 0 && t1 < 1) { bounds[j].push(calc(t1)); }\n const t2 = (-b - Math.sqrt(b2ac)) / (2 * a);\n if (t2 > 0 && t2 < 1) { bounds[j].push(calc(t2)); }\n }\n P0 = P3;\n } else {\n bounds[0].push(seg.x);\n bounds[1].push(seg.y);\n }\n }\n\n const x = Math.min.apply(null, bounds[0]);\n const w = Math.max.apply(null, bounds[0]) - x;\n const y = Math.min.apply(null, bounds[1]);\n const h = Math.max.apply(null, bounds[1]) - y;\n return {\n x,\n y,\n width: w,\n height: h\n };\n};\n\n/**\n* Get the given/selected element's bounding box object, checking for\n* horizontal/vertical lines (see issue 717)\n* Note that performance is currently terrible, so some way to improve would\n* be great.\n* @param {Element} selected - Container or `` DOM element\n* @returns {DOMRect} Bounding box object\n*/\nfunction groupBBFix (selected) {\n if (supportsHVLineContainerBBox()) {\n try { return selected.getBBox(); } catch (e) {}\n }\n const ref = $.data(selected, 'ref');\n let matched = null;\n let ret, copy;\n\n if (ref) {\n copy = $(ref).children().clone().attr('visibility', 'hidden');\n $(svgroot_).append(copy);\n matched = copy.filter('line, path');\n } else {\n matched = $(selected).find('line, path');\n }\n\n let issue = false;\n if (matched.length) {\n matched.each(function () {\n const bb = this.getBBox();\n if (!bb.width || !bb.height) {\n issue = true;\n }\n });\n if (issue) {\n const elems = ref ? copy : $(selected).children();\n ret = getStrokedBBox(elems);\n } else {\n ret = selected.getBBox();\n }\n } else {\n ret = selected.getBBox();\n }\n if (ref) {\n copy.remove();\n }\n return ret;\n}\n\n/**\n* Get the given/selected element's bounding box object, convert it to be more\n* usable when necessary.\n* @function module:utilities.getBBox\n* @param {Element} elem - Optional DOM element to get the BBox for\n* @returns {module:utilities.BBoxObject} Bounding box object\n*/\nexport const getBBox = function (elem) {\n const selected = elem || editorContext_.geSelectedElements()[0];\n if (elem.nodeType !== 1) { return null; }\n const elname = selected.nodeName;\n\n let ret = null;\n switch (elname) {\n case 'text':\n if (selected.textContent === '') {\n selected.textContent = 'a'; // Some character needed for the selector to use.\n ret = selected.getBBox();\n selected.textContent = '';\n } else if (selected.getBBox) {\n ret = selected.getBBox();\n }\n break;\n case 'path':\n if (!supportsPathBBox()) {\n ret = getPathBBox(selected);\n } else if (selected.getBBox) {\n ret = selected.getBBox();\n }\n break;\n case 'g':\n case 'a':\n ret = groupBBFix(selected);\n break;\n default:\n\n if (elname === 'use') {\n ret = groupBBFix(selected); // , true);\n }\n if (elname === 'use' || (elname === 'foreignObject' && isWebkit())) {\n if (!ret) { ret = selected.getBBox(); }\n // This is resolved in later versions of webkit, perhaps we should\n // have a featured detection for correct 'use' behavior?\n // ——————————\n if (!isWebkit()) {\n const {x, y, width, height} = ret;\n const bb = {\n width,\n height,\n x: x + parseFloat(selected.getAttribute('x') || 0),\n y: y + parseFloat(selected.getAttribute('y') || 0)\n };\n ret = bb;\n }\n } else if (visElemsArr.includes(elname)) {\n if (selected) {\n try {\n ret = selected.getBBox();\n } catch (err) {\n // tspan (and textPath apparently) have no `getBBox` in Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=937268\n // Re: Chrome returning bbox for containing text element, see: https://bugs.chromium.org/p/chromium/issues/detail?id=349835\n const extent = selected.getExtentOfChar(0); // pos+dimensions of the first glyph\n const width = selected.getComputedTextLength(); // width of the tspan\n ret = {\n x: extent.x,\n y: extent.y,\n width,\n height: extent.height\n };\n }\n } else {\n // Check if element is child of a foreignObject\n const fo = $(selected).closest('foreignObject');\n if (fo.length) {\n if (fo[0].getBBox) {\n ret = fo[0].getBBox();\n }\n }\n }\n }\n }\n if (ret) {\n ret = bboxToObj(ret);\n }\n\n // get the bounding box from the DOM (which is in that element's coordinate system)\n return ret;\n};\n\n/**\n* @typedef {GenericArray} module:utilities.PathSegmentArray\n* @property {Integer} length 2\n* @property {\"M\"|\"L\"|\"C\"|\"Z\"} 0\n* @property {Float[]} 1\n*/\n\n/**\n* Create a path 'd' attribute from path segments.\n* Each segment is an array of the form: `[singleChar, [x,y, x,y, ...]]`\n* @function module:utilities.getPathDFromSegments\n* @param {module:utilities.PathSegmentArray[]} pathSegments - An array of path segments to be converted\n* @returns {string} The converted path d attribute.\n*/\nexport const getPathDFromSegments = function (pathSegments) {\n let d = '';\n\n $.each(pathSegments, function (j, [singleChar, pts]) {\n d += singleChar;\n for (let i = 0; i < pts.length; i += 2) {\n d += (pts[i] + ',' + pts[i + 1]) + ' ';\n }\n });\n\n return d;\n};\n\n/**\n* Make a path 'd' attribute from a simple SVG element shape.\n* @function module:utilities.getPathDFromElement\n* @param {Element} elem - The element to be converted\n* @returns {string} The path d attribute or `undefined` if the element type is unknown.\n*/\nexport const getPathDFromElement = function (elem) {\n // Possibly the cubed root of 6, but 1.81 works best\n let num = 1.81;\n let d, a, rx, ry;\n switch (elem.tagName) {\n case 'ellipse':\n case 'circle': {\n a = $(elem).attr(['rx', 'ry', 'cx', 'cy']);\n const {cx, cy} = a;\n ({rx, ry} = a);\n if (elem.tagName === 'circle') {\n ry = $(elem).attr('r');\n rx = ry;\n }\n\n d = getPathDFromSegments([\n ['M', [(cx - rx), (cy)]],\n ['C', [(cx - rx), (cy - ry / num), (cx - rx / num), (cy - ry), (cx), (cy - ry)]],\n ['C', [(cx + rx / num), (cy - ry), (cx + rx), (cy - ry / num), (cx + rx), (cy)]],\n ['C', [(cx + rx), (cy + ry / num), (cx + rx / num), (cy + ry), (cx), (cy + ry)]],\n ['C', [(cx - rx / num), (cy + ry), (cx - rx), (cy + ry / num), (cx - rx), (cy)]],\n ['Z', []]\n ]);\n break;\n } case 'path':\n d = elem.getAttribute('d');\n break;\n case 'line':\n a = $(elem).attr(['x1', 'y1', 'x2', 'y2']);\n d = 'M' + a.x1 + ',' + a.y1 + 'L' + a.x2 + ',' + a.y2;\n break;\n case 'polyline':\n d = 'M' + elem.getAttribute('points');\n break;\n case 'polygon':\n d = 'M' + elem.getAttribute('points') + ' Z';\n break;\n case 'rect': {\n const r = $(elem).attr(['rx', 'ry']);\n ({rx, ry} = r);\n const b = elem.getBBox();\n const {x, y} = b,\n w = b.width,\n h = b.height;\n num = 4 - num; // Why? Because!\n\n if (!rx && !ry) {\n // Regular rect\n d = getPathDFromSegments([\n ['M', [x, y]],\n ['L', [x + w, y]],\n ['L', [x + w, y + h]],\n ['L', [x, y + h]],\n ['L', [x, y]],\n ['Z', []]\n ]);\n } else {\n d = getPathDFromSegments([\n ['M', [x, y + ry]],\n ['C', [x, y + ry / num, x + rx / num, y, x + rx, y]],\n ['L', [x + w - rx, y]],\n ['C', [x + w - rx / num, y, x + w, y + ry / num, x + w, y + ry]],\n ['L', [x + w, y + h - ry]],\n ['C', [x + w, y + h - ry / num, x + w - rx / num, y + h, x + w - rx, y + h]],\n ['L', [x + rx, y + h]],\n ['C', [x + rx / num, y + h, x, y + h - ry / num, x, y + h - ry]],\n ['L', [x, y + ry]],\n ['Z', []]\n ]);\n }\n break;\n } default:\n break;\n }\n\n return d;\n};\n\n/**\n* Get a set of attributes from an element that is useful for convertToPath.\n* @function module:utilities.getExtraAttributesForConvertToPath\n* @param {Element} elem - The element to be probed\n* @returns {PlainObject<\"marker-start\"|\"marker-end\"|\"marker-mid\"|\"filter\"|\"clip-path\", string>} An object with attributes.\n*/\nexport const getExtraAttributesForConvertToPath = function (elem) {\n const attrs = {};\n // TODO: make this list global so that we can properly maintain it\n // TODO: what about @transform, @clip-rule, @fill-rule, etc?\n $.each(['marker-start', 'marker-end', 'marker-mid', 'filter', 'clip-path'], function () {\n const a = elem.getAttribute(this);\n if (a) {\n attrs[this] = a;\n }\n });\n return attrs;\n};\n\n/**\n* Get the BBox of an element-as-path.\n* @function module:utilities.getBBoxOfElementAsPath\n* @param {Element} elem - The DOM element to be probed\n* @param {module:utilities.EditorContext#addSVGElementFromJson} addSVGElementFromJson - Function to add the path element to the current layer. See canvas.addSVGElementFromJson\n* @param {module:path.pathActions} pathActions - If a transform exists, `pathActions.resetOrientation()` is used. See: canvas.pathActions.\n* @returns {DOMRect|false} The resulting path's bounding box object.\n*/\nexport const getBBoxOfElementAsPath = function (elem, addSVGElementFromJson, pathActions) {\n const path = addSVGElementFromJson({\n element: 'path',\n attr: getExtraAttributesForConvertToPath(elem)\n });\n\n const eltrans = elem.getAttribute('transform');\n if (eltrans) {\n path.setAttribute('transform', eltrans);\n }\n\n const {parentNode} = elem;\n if (elem.nextSibling) {\n elem.before(path);\n } else {\n parentNode.append(path);\n }\n\n const d = getPathDFromElement(elem);\n if (d) {\n path.setAttribute('d', d);\n } else {\n path.remove();\n }\n\n // Get the correct BBox of the new path, then discard it\n pathActions.resetOrientation(path);\n let bb = false;\n try {\n bb = path.getBBox();\n } catch (e) {\n // Firefox fails\n }\n path.remove();\n return bb;\n};\n\n/**\n* Convert selected element to a path.\n* @function module:utilities.convertToPath\n* @param {Element} elem - The DOM element to be converted\n* @param {module:utilities.SVGElementJSON} attrs - Apply attributes to new path. see canvas.convertToPath\n* @param {module:utilities.EditorContext#addSVGElementFromJson} addSVGElementFromJson - Function to add the path element to the current layer. See canvas.addSVGElementFromJson\n* @param {module:path.pathActions} pathActions - If a transform exists, pathActions.resetOrientation() is used. See: canvas.pathActions.\n* @param {module:draw.DrawCanvasInit#clearSelection|module:path.EditorContext#clearSelection} clearSelection - see [canvas.clearSelection]{@link module:svgcanvas.SvgCanvas#clearSelection}\n* @param {module:path.EditorContext#addToSelection} addToSelection - see [canvas.addToSelection]{@link module:svgcanvas.SvgCanvas#addToSelection}\n* @param {module:history} hstry - see history module\n* @param {module:path.EditorContext#addCommandToHistory|module:draw.DrawCanvasInit#addCommandToHistory} addCommandToHistory - see [canvas.addCommandToHistory]{@link module:svgcanvas~addCommandToHistory}\n* @returns {SVGPathElement|null} The converted path element or null if the DOM element was not recognized.\n*/\nexport const convertToPath = function (elem, attrs, addSVGElementFromJson, pathActions, clearSelection, addToSelection, hstry, addCommandToHistory) {\n const batchCmd = new hstry.BatchCommand('Convert element to Path');\n\n // Any attribute on the element not covered by the passed-in attributes\n attrs = $.extend({}, attrs, getExtraAttributesForConvertToPath(elem));\n\n const path = addSVGElementFromJson({\n element: 'path',\n attr: attrs\n });\n\n const eltrans = elem.getAttribute('transform');\n if (eltrans) {\n path.setAttribute('transform', eltrans);\n }\n\n const {id} = elem;\n const {parentNode} = elem;\n if (elem.nextSibling) {\n elem.before(path);\n } else {\n parentNode.append(path);\n }\n\n const d = getPathDFromElement(elem);\n if (d) {\n path.setAttribute('d', d);\n\n // Replace the current element with the converted one\n\n // Reorient if it has a matrix\n if (eltrans) {\n const tlist = getTransformList(path);\n if (hasMatrixTransform(tlist)) {\n pathActions.resetOrientation(path);\n }\n }\n\n const {nextSibling} = elem;\n batchCmd.addSubCommand(new hstry.RemoveElementCommand(elem, nextSibling, parent));\n batchCmd.addSubCommand(new hstry.InsertElementCommand(path));\n\n clearSelection();\n elem.remove();\n path.setAttribute('id', id);\n path.removeAttribute('visibility');\n addToSelection([path], true);\n\n addCommandToHistory(batchCmd);\n\n return path;\n }\n // the elem.tagName was not recognized, so no \"d\" attribute. Remove it, so we've haven't changed anything.\n path.remove();\n return null;\n};\n\n/**\n* Can the bbox be optimized over the native getBBox? The optimized bbox is the same as the native getBBox when\n* the rotation angle is a multiple of 90 degrees and there are no complex transforms.\n* Getting an optimized bbox can be dramatically slower, so we want to make sure it's worth it.\n*\n* The best example for this is a circle rotate 45 degrees. The circle doesn't get wider or taller when rotated\n* about it's center.\n*\n* The standard, unoptimized technique gets the native bbox of the circle, rotates the box 45 degrees, uses\n* that width and height, and applies any transforms to get the final bbox. This means the calculated bbox\n* is much wider than the original circle. If the angle had been 0, 90, 180, etc. both techniques render the\n* same bbox.\n*\n* The optimization is not needed if the rotation is a multiple 90 degrees. The default technique is to call\n* getBBox then apply the angle and any transforms.\n*\n* @param {Float} angle - The rotation angle in degrees\n* @param {boolean} hasAMatrixTransform - True if there is a matrix transform\n* @returns {boolean} True if the bbox can be optimized.\n*/\nfunction bBoxCanBeOptimizedOverNativeGetBBox (angle, hasAMatrixTransform) {\n const angleModulo90 = angle % 90;\n const closeTo90 = angleModulo90 < -89.99 || angleModulo90 > 89.99;\n const closeTo0 = angleModulo90 > -0.001 && angleModulo90 < 0.001;\n return hasAMatrixTransform || !(closeTo0 || closeTo90);\n}\n\n/**\n* Get bounding box that includes any transforms.\n* @function module:utilities.getBBoxWithTransform\n* @param {Element} elem - The DOM element to be converted\n* @param {module:utilities.EditorContext#addSVGElementFromJson} addSVGElementFromJson - Function to add the path element to the current layer. See canvas.addSVGElementFromJson\n* @param {module:path.pathActions} pathActions - If a transform exists, pathActions.resetOrientation() is used. See: canvas.pathActions.\n* @returns {module:utilities.BBoxObject|module:math.TransformedBox|DOMRect} A single bounding box object\n*/\nexport const getBBoxWithTransform = function (elem, addSVGElementFromJson, pathActions) {\n // TODO: Fix issue with rotated groups. Currently they work\n // fine in FF, but not in other browsers (same problem mentioned\n // in Issue 339 comment #2).\n\n let bb = getBBox(elem);\n\n if (!bb) {\n return null;\n }\n\n const tlist = getTransformList(elem);\n const angle = getRotationAngleFromTransformList(tlist);\n const hasMatrixXForm = hasMatrixTransform(tlist);\n\n if (angle || hasMatrixXForm) {\n let goodBb = false;\n if (bBoxCanBeOptimizedOverNativeGetBBox(angle, hasMatrixXForm)) {\n // Get the BBox from the raw path for these elements\n // TODO: why ellipse and not circle\n const elemNames = ['ellipse', 'path', 'line', 'polyline', 'polygon'];\n if (elemNames.includes(elem.tagName)) {\n goodBb = getBBoxOfElementAsPath(elem, addSVGElementFromJson, pathActions);\n bb = goodBb;\n } else if (elem.tagName === 'rect') {\n // Look for radius\n const rx = elem.getAttribute('rx');\n const ry = elem.getAttribute('ry');\n if (rx || ry) {\n goodBb = getBBoxOfElementAsPath(elem, addSVGElementFromJson, pathActions);\n bb = goodBb;\n }\n }\n }\n\n if (!goodBb) {\n const {matrix} = transformListToTransform(tlist);\n bb = transformBox(bb.x, bb.y, bb.width, bb.height, matrix).aabox;\n\n // Old technique that was exceedingly slow with large documents.\n //\n // Accurate way to get BBox of rotated element in Firefox:\n // Put element in group and get its BBox\n //\n // Must use clone else FF freaks out\n // const clone = elem.cloneNode(true);\n // const g = document.createElementNS(NS.SVG, 'g');\n // const parent = elem.parentNode;\n // parent.append(g);\n // g.append(clone);\n // const bb2 = bboxToObj(g.getBBox());\n // g.remove();\n }\n }\n return bb;\n};\n\n/**\n * @param {Element} elem\n * @returns {Float}\n * @todo This is problematic with large stroke-width and, for example, a single\n * horizontal line. The calculated BBox extends way beyond left and right sides.\n */\nfunction getStrokeOffsetForBBox (elem) {\n const sw = elem.getAttribute('stroke-width');\n return (!isNaN(sw) && elem.getAttribute('stroke') !== 'none') ? sw / 2 : 0;\n}\n\n/**\n * @typedef {PlainObject} BBox\n * @property {Integer} x The x value\n * @property {Integer} y The y value\n * @property {Float} width\n * @property {Float} height\n */\n\n/**\n* Get the bounding box for one or more stroked and/or transformed elements.\n* @function module:utilities.getStrokedBBox\n* @param {Element[]} elems - Array with DOM elements to check\n* @param {module:utilities.EditorContext#addSVGElementFromJson} addSVGElementFromJson - Function to add the path element to the current layer. See canvas.addSVGElementFromJson\n* @param {module:path.pathActions} pathActions - If a transform exists, pathActions.resetOrientation() is used. See: canvas.pathActions.\n* @returns {module:utilities.BBoxObject|module:math.TransformedBox|DOMRect} A single bounding box object\n*/\nexport const getStrokedBBox = function (elems, addSVGElementFromJson, pathActions) {\n if (!elems || !elems.length) { return false; }\n\n let fullBb;\n $.each(elems, function () {\n if (fullBb) { return; }\n if (!this.parentNode) { return; }\n fullBb = getBBoxWithTransform(this, addSVGElementFromJson, pathActions);\n });\n\n // This shouldn't ever happen...\n if (fullBb === undefined) { return null; }\n\n // fullBb doesn't include the stoke, so this does no good!\n // if (elems.length == 1) return fullBb;\n\n let maxX = fullBb.x + fullBb.width;\n let maxY = fullBb.y + fullBb.height;\n let minX = fullBb.x;\n let minY = fullBb.y;\n\n // If only one elem, don't call the potentially slow getBBoxWithTransform method again.\n if (elems.length === 1) {\n const offset = getStrokeOffsetForBBox(elems[0]);\n minX -= offset;\n minY -= offset;\n maxX += offset;\n maxY += offset;\n } else {\n $.each(elems, function (i, elem) {\n const curBb = getBBoxWithTransform(elem, addSVGElementFromJson, pathActions);\n if (curBb) {\n const offset = getStrokeOffsetForBBox(elem);\n minX = Math.min(minX, curBb.x - offset);\n minY = Math.min(minY, curBb.y - offset);\n // TODO: The old code had this test for max, but not min. I suspect this test should be for both min and max\n if (elem.nodeType === 1) {\n maxX = Math.max(maxX, curBb.x + curBb.width + offset);\n maxY = Math.max(maxY, curBb.y + curBb.height + offset);\n }\n }\n });\n }\n\n fullBb.x = minX;\n fullBb.y = minY;\n fullBb.width = maxX - minX;\n fullBb.height = maxY - minY;\n return fullBb;\n};\n\n/**\n* Get all elements that have a BBox (excludes ``, ``, etc).\n* Note that 0-opacity, off-screen etc elements are still considered \"visible\"\n* for this function.\n* @function module:utilities.getVisibleElements\n* @param {Element} parentElement - The parent DOM element to search within\n* @returns {Element[]} All \"visible\" elements.\n*/\nexport const getVisibleElements = function (parentElement) {\n if (!parentElement) {\n parentElement = $(editorContext_.getSVGContent()).children(); // Prevent layers from being included\n }\n\n const contentElems = [];\n $(parentElement).children().each(function (i, elem) {\n if (elem.getBBox) {\n contentElems.push(elem);\n }\n });\n return contentElems.reverse();\n};\n\n/**\n* Get the bounding box for one or more stroked and/or transformed elements.\n* @function module:utilities.getStrokedBBoxDefaultVisible\n* @param {Element[]} elems - Array with DOM elements to check\n* @returns {module:utilities.BBoxObject} A single bounding box object\n*/\nexport const getStrokedBBoxDefaultVisible = function (elems) {\n if (!elems) { elems = getVisibleElements(); }\n return getStrokedBBox(\n elems,\n editorContext_.addSVGElementFromJson,\n editorContext_.pathActions\n );\n};\n\n/**\n* Get the rotation angle of the given transform list.\n* @function module:utilities.getRotationAngleFromTransformList\n* @param {SVGTransformList} tlist - List of transforms\n* @param {boolean} toRad - When true returns the value in radians rather than degrees\n* @returns {Float} The angle in degrees or radians\n*/\nexport const getRotationAngleFromTransformList = function (tlist, toRad) {\n if (!tlist) { return 0; } // <svg> elements have no tlist\n const N = tlist.numberOfItems;\n for (let i = 0; i < N; ++i) {\n const xform = tlist.getItem(i);\n if (xform.type === 4) {\n return toRad ? xform.angle * Math.PI / 180.0 : xform.angle;\n }\n }\n return 0.0;\n};\n\n/**\n* Get the rotation angle of the given/selected DOM element.\n* @function module:utilities.getRotationAngle\n* @param {Element} [elem] - DOM element to get the angle for. Default to first of selected elements.\n* @param {boolean} [toRad=false] - When true returns the value in radians rather than degrees\n* @returns {Float} The angle in degrees or radians\n*/\nexport let getRotationAngle = function (elem, toRad) { // eslint-disable-line import/no-mutable-exports\n const selected = elem || editorContext_.getSelectedElements()[0];\n // find the rotation transform (if any) and set it\n const tlist = getTransformList(selected);\n return getRotationAngleFromTransformList(tlist, toRad);\n};\n\n/**\n* Get the reference element associated with the given attribute value.\n* @function module:utilities.getRefElem\n* @param {string} attrVal - The attribute value as a string\n* @returns {Element} Reference element\n*/\nexport const getRefElem = function (attrVal) {\n return getElem(getUrlFromAttr(attrVal).substr(1));\n};\n\n/**\n* Get a DOM element by ID within the SVG root element.\n* @function module:utilities.getElem\n* @param {string} id - String with the element's new ID\n* @returns {?Element}\n*/\nexport const getElem = (supportsSelectors())\n ? function (id) {\n // querySelector lookup\n return svgroot_.querySelector('#' + id);\n }\n : supportsXpath()\n ? function (id) {\n // xpath lookup\n return domdoc_.evaluate(\n 'svg:svg[@id=\"svgroot\"]//svg:*[@id=\"' + id + '\"]',\n domcontainer_,\n function () { return NS.SVG; },\n 9,\n null\n ).singleNodeValue;\n }\n : function (id) {\n // jQuery lookup: twice as slow as xpath in FF\n return $(svgroot_).find('[id=' + id + ']')[0];\n };\n\n/**\n* Assigns multiple attributes to an element.\n* @function module:utilities.assignAttributes\n* @param {Element} elem - DOM element to apply new attribute values to\n* @param {PlainObject<string, string>} attrs - Object with attribute keys/values\n* @param {Integer} [suspendLength] - Milliseconds to suspend redraw\n* @param {boolean} [unitCheck=false] - Boolean to indicate the need to use units.setUnitAttr\n* @returns {void}\n*/\nexport const assignAttributes = function (elem, attrs, suspendLength, unitCheck) {\n for (const [key, value] of Object.entries(attrs)) {\n const ns = (key.substr(0, 4) === 'xml:'\n ? NS.XML\n : key.substr(0, 6) === 'xlink:' ? NS.XLINK : null);\n\n if (ns) {\n elem.setAttributeNS(ns, key, value);\n } else if (!unitCheck) {\n elem.setAttribute(key, value);\n } else {\n setUnitAttr(elem, key, value);\n }\n }\n};\n\n/**\n* Remove unneeded (default) attributes, making resulting SVG smaller.\n* @function module:utilities.cleanupElement\n* @param {Element} element - DOM element to clean up\n* @returns {void}\n*/\nexport const cleanupElement = function (element) {\n const defaults = {\n 'fill-opacity': 1,\n 'stop-opacity': 1,\n opacity: 1,\n stroke: 'none',\n 'stroke-dasharray': 'none',\n 'stroke-linejoin': 'miter',\n 'stroke-linecap': 'butt',\n 'stroke-opacity': 1,\n 'stroke-width': 1,\n rx: 0,\n ry: 0\n };\n\n if (element.nodeName === 'ellipse') {\n // Ellipse elements require rx and ry attributes\n delete defaults.rx;\n delete defaults.ry;\n }\n\n Object.entries(defaults).forEach(([attr, val]) => {\n if (element.getAttribute(attr) === String(val)) {\n element.removeAttribute(attr);\n }\n });\n};\n\n/**\n* Round value to for snapping.\n* @function module:utilities.snapToGrid\n* @param {Float} value\n* @returns {Integer}\n*/\nexport const snapToGrid = function (value) {\n const unit = editorContext_.getBaseUnit();\n let stepSize = editorContext_.getSnappingStep();\n if (unit !== 'px') {\n stepSize *= getTypeMap()[unit];\n }\n value = Math.round(value / stepSize) * stepSize;\n return value;\n};\n\n/**\n* Escapes special characters in a regular expression.\n* @function module:utilities.regexEscape\n* @param {string} str\n* @returns {string}\n*/\nexport const regexEscape = function (str) {\n // Originally from: http://phpjs.org/functions\n return String(str).replace(/[.\\\\+*?[^\\]$(){}=!<>|:-]/g, '\\\\$&');\n};\n\n/**\n * Prevents default browser click behaviour on the given element.\n * @function module:utilities.preventClickDefault\n * @param {Element} img - The DOM element to prevent the click on\n * @returns {void}\n */\nexport const preventClickDefault = function (img) {\n $(img).click(function (e) { e.preventDefault(); });\n};\n\n/**\n * @callback module:utilities.GetNextID\n * @returns {string} The ID\n */\n/**\n * Create a clone of an element, updating its ID and its children's IDs when needed.\n * @function module:utilities.copyElem\n * @param {Element} el - DOM element to clone\n * @param {module:utilities.GetNextID} getNextId - The getter of the next unique ID.\n * @returns {Element} The cloned element\n */\nexport const copyElem = function (el, getNextId) {\n // manually create a copy of the element\n const newEl = document.createElementNS(el.namespaceURI, el.nodeName);\n $.each(el.attributes, function (i, attr) {\n if (attr.localName !== '-moz-math-font-style') {\n newEl.setAttributeNS(attr.namespaceURI, attr.nodeName, attr.value);\n }\n });\n // set the copied element's new id\n newEl.removeAttribute('id');\n newEl.id = getNextId();\n\n // Opera's \"d\" value needs to be reset for Opera/Win/non-EN\n // Also needed for webkit (else does not keep curved segments on clone)\n if (isWebkit() && el.nodeName === 'path') {\n const fixedD = convertPath(el);\n newEl.setAttribute('d', fixedD);\n }\n\n // now create copies of all children\n $.each(el.childNodes, function (i, child) {\n switch (child.nodeType) {\n case 1: // element node\n newEl.append(copyElem(child, getNextId));\n break;\n case 3: // text node\n newEl.textContent = child.nodeValue;\n break;\n default:\n break;\n }\n });\n\n if ($(el).data('gsvg')) {\n $(newEl).data('gsvg', newEl.firstChild);\n } else if ($(el).data('symbol')) {\n const ref = $(el).data('symbol');\n $(newEl).data('ref', ref).data('symbol', ref);\n } else if (newEl.tagName === 'image') {\n preventClickDefault(newEl);\n }\n\n return newEl;\n};\n\n/**\n * Whether a value is `null` or `undefined`.\n * @param {any} val\n * @returns {boolean}\n */\nexport const isNullish = (val) => {\n return val === null || val === undefined;\n};\n\n/**\n* Overwrite methods for unit testing.\n* @function module:utilities.mock\n* @param {PlainObject} mockMethods\n* @returns {void}\n*/\nexport const mock = ({\n getHref: getHrefUser, setHref: setHrefUser, getRotationAngle: getRotationAngleUser\n}) => {\n getHref = getHrefUser;\n setHref = setHrefUser;\n getRotationAngle = getRotationAngleUser;\n};\n","/* globals jQuery */\n/**\n * Adds context menu functionality.\n * @module contextmenu\n * @license Apache-2.0\n * @author Adam Bender\n */\n// Dependencies:\n// 1) jQuery (for dom injection of context menus)\n\nconst $ = jQuery;\n\nlet contextMenuExtensions = {};\n\n/**\n * Signature depends on what the user adds; in the case of our uses with\n * SVGEditor, no parameters are passed nor anything expected for a return.\n * @callback module:contextmenu.MenuItemAction\n * @param {...args} args\n * @returns {any}\n*/\n\n/**\n* @typedef {PlainObject} module:contextmenu.MenuItem\n* @property {string} id\n* @property {string} label\n* @property {module:contextmenu.MenuItemAction} action\n*/\n\n/**\n* @param {module:contextmenu.MenuItem} menuItem\n* @returns {boolean}\n*/\nconst menuItemIsValid = function (menuItem) {\n return menuItem && menuItem.id && menuItem.label && menuItem.action && typeof menuItem.action === 'function';\n};\n\n/**\n* @function module:contextmenu.add\n* @param {module:contextmenu.MenuItem} menuItem\n* @throws {Error|TypeError}\n* @returns {void}\n*/\nexport const add = function (menuItem) {\n // menuItem: {id, label, shortcut, action}\n if (!menuItemIsValid(menuItem)) {\n throw new TypeError('Menu items must be defined and have at least properties: id, label, action, where action must be a function');\n }\n if (menuItem.id in contextMenuExtensions) {\n throw new Error('Cannot add extension \"' + menuItem.id + '\", an extension by that name already exists\"');\n }\n // Register menuItem action, see below for deferred menu dom injection\n console.log('Registered contextmenu item: {id:' + menuItem.id + ', label:' + menuItem.label + '}'); // eslint-disable-line no-console\n contextMenuExtensions[menuItem.id] = menuItem;\n // TODO: Need to consider how to handle custom enable/disable behavior\n};\n\n/**\n* @function module:contextmenu.hasCustomHandler\n* @param {string} handlerKey\n* @returns {boolean}\n*/\nexport const hasCustomHandler = function (handlerKey) {\n return Boolean(contextMenuExtensions[handlerKey]);\n};\n\n/**\n* @function module:contextmenu.getCustomHandler\n* @param {string} handlerKey\n* @returns {module:contextmenu.MenuItemAction}\n*/\nexport const getCustomHandler = function (handlerKey) {\n return contextMenuExtensions[handlerKey].action;\n};\n\n/**\n* @param {module:contextmenu.MenuItem} menuItem\n* @returns {void}\n*/\nconst injectExtendedContextMenuItemIntoDom = function (menuItem) {\n if (!Object.keys(contextMenuExtensions).length) {\n // all menuItems appear at the bottom of the menu in their own container.\n // if this is the first extension menu we need to add the separator.\n $('#cmenu_canvas').append(\"<li class='separator'>\");\n }\n const shortcut = menuItem.shortcut || '';\n $('#cmenu_canvas').append(\"<li class='disabled'><a href='#\" + menuItem.id + \"'>\" +\n menuItem.label + \"<span class='shortcut'>\" +\n shortcut + '</span></a></li>');\n};\n\n/**\n* @function module:contextmenu.injectExtendedContextMenuItemsIntoDom\n* @returns {void}\n*/\nexport const injectExtendedContextMenuItemsIntoDom = function () {\n Object.values(contextMenuExtensions).forEach((menuItem) => {\n injectExtendedContextMenuItemIntoDom(menuItem);\n });\n};\n/**\n* @function module:contextmenu.resetCustomMenus\n* @returns {void}\n*/\nexport const resetCustomMenus = function () { contextMenuExtensions = {}; };\n","/* eslint-disable jsdoc/require-file-overview */\n/**\n * Adapted from {@link https://github.com/uupaa/dynamic-import-polyfill/blob/master/importModule.js}.\n * @module importModule\n * @license MIT\n */\n\n/**\n * Converts a possible relative URL into an absolute one.\n * @param {string} url\n * @returns {string}\n */\nfunction toAbsoluteURL (url) {\n const a = document.createElement('a');\n a.setAttribute('href', url); // <a href=\"hoge.html\">\n return a.cloneNode(false).href; // -> \"http://example.com/hoge.html\"\n}\n\n/**\n * Add any of the whitelisted attributes to the script tag.\n * @param {HTMLScriptElement} script\n * @param {PlainObject<string, string>} atts\n * @returns {void}\n */\nfunction addScriptAtts (script, atts) {\n ['id', 'class', 'type'].forEach((prop) => {\n if (prop in atts) {\n script[prop] = atts[prop];\n }\n });\n}\n\n// Additions by Brett\n/**\n* @typedef {PlainObject} module:importModule.ImportConfig\n* @property {string} global The variable name to set on `window` (when not using the modular version)\n* @property {boolean} [returnDefault=false]\n*/\n\n/**\n* @function module:importModule.importSetGlobalDefault\n* @param {string|GenericArray<any>} url\n* @param {module:importModule.ImportConfig} config\n* @returns {Promise<any>} The value to which it resolves depends on the export of the targeted module.\n*/\nexport function importSetGlobalDefault (url, config) {\n return importSetGlobal(url, {...config, returnDefault: true});\n}\n/**\n* @function module:importModule.importSetGlobal\n* @param {string|string[]} url\n* @param {module:importModule.ImportConfig} config\n* @returns {Promise<ArbitraryModule>} The promise resolves to either an `ArbitraryModule` or\n* any other value depends on the export of the targeted module.\n*/\nexport async function importSetGlobal (url, {global: glob, returnDefault}) {\n // Todo: Replace calls to this function with `import()` when supported\n const modularVersion = !('svgEditor' in window) ||\n !window.svgEditor ||\n window.svgEditor.modules !== false;\n if (modularVersion) {\n return importModule(url, undefined, {returnDefault});\n }\n await importScript(url);\n return window[glob];\n}\n\n/**\n *\n * @author Brett Zamir (other items are from `dynamic-import-polyfill`)\n * @param {string|string[]} url\n * @param {PlainObject} [atts={}]\n * @returns {Promise<void|Error>} Resolves to `undefined` or rejects with an `Error` upon a\n * script loading error\n */\nexport function importScript (url, atts = {}) {\n if (Array.isArray(url)) {\n return Promise.all(url.map((u) => {\n return importScript(u, atts);\n }));\n }\n return new Promise((resolve, reject) => { // eslint-disable-line promise/avoid-new\n const script = document.createElement('script');\n /**\n *\n * @returns {void}\n */\n function scriptOnError () {\n reject(new Error(`Failed to import: ${url}`));\n destructor();\n }\n /**\n *\n * @returns {void}\n */\n function scriptOnLoad () {\n resolve();\n destructor();\n }\n const destructor = () => {\n script.removeEventListener('error', scriptOnError);\n script.removeEventListener('load', scriptOnLoad);\n script.remove();\n script.src = '';\n };\n script.defer = 'defer';\n addScriptAtts(script, atts);\n script.addEventListener('error', scriptOnError);\n script.addEventListener('load', scriptOnLoad);\n script.src = url;\n\n document.head.append(script);\n });\n}\n\n/**\n*\n* @param {string|string[]} url\n* @param {PlainObject} [atts={}]\n* @param {PlainObject} opts\n* @param {boolean} [opts.returnDefault=false} = {}]\n* @returns {Promise<any>} Resolves to value of loading module or rejects with\n* `Error` upon a script loading error.\n*/\nexport function importModule (url, atts = {}, {returnDefault = false} = {}) {\n if (Array.isArray(url)) {\n return Promise.all(url.map((u) => {\n return importModule(u, atts);\n }));\n }\n return new Promise((resolve, reject) => { // eslint-disable-line promise/avoid-new\n const vector = '$importModule$' + Math.random().toString(32).slice(2);\n const script = document.createElement('script');\n /**\n *\n * @returns {void}\n */\n function scriptOnError () {\n reject(new Error(`Failed to import: ${url}`));\n destructor();\n }\n /**\n *\n * @returns {void}\n */\n function scriptOnLoad () {\n resolve(window[vector]);\n destructor();\n }\n const destructor = () => {\n delete window[vector];\n script.removeEventListener('error', scriptOnError);\n script.removeEventListener('load', scriptOnLoad);\n script.remove();\n URL.revokeObjectURL(script.src);\n script.src = '';\n };\n addScriptAtts(script, atts);\n script.defer = 'defer';\n script.type = 'module';\n script.addEventListener('error', scriptOnError);\n script.addEventListener('load', scriptOnLoad);\n const absURL = toAbsoluteURL(url);\n const loader = `import * as m from '${absURL.replace(/'/g, \"\\\\'\")}'; window.${vector} = ${returnDefault ? 'm.default || ' : ''}m;`; // export Module\n const blob = new Blob([loader], {type: 'text/javascript'});\n script.src = URL.createObjectURL(blob);\n\n document.head.append(script);\n });\n}\n\nexport default importModule;\n","/**\n * Created by alexey2baranov on 28.01.17.\n */\n/*\n An extraction of the deparam method from Ben Alman's jQuery BBQ\n http://benalman.com/projects/jquery-bbq-plugin/\n */\n\nconst coerce_types = {'true': !0, 'false': !1, 'null': null};\n\nfunction deparam (params, coerce) {\n // console.log(params)\n const obj = {};\n\n // Iterate over all name=value pairs.\n params.replace(/\\+/g, ' ').split('&').forEach(function (v) {\n const param = v.split('=');\n\n let\n key = decodeURIComponent(param[0]),\n // If key is more complex than 'foo', like 'a[]' or 'a[b][c]', split it\n // into its component parts.\n keys = key.split(']['),\n keys_last = keys.length - 1;\n\n // If the first keys part contains [ and the last ends with ], then []\n // are correctly balanced.\n if (/\\[/.test(keys[0]) && /\\]$/.test(keys[keys_last])) {\n // Remove the trailing ] from the last keys part.\n keys[keys_last] = keys[keys_last].replace(/\\]$/, '');\n\n // Split first keys part into two parts on the [ and add them back onto\n // the beginning of the keys array.\n keys = keys.shift().split('[').concat(keys);\n\n keys_last = keys.length - 1;\n } else {\n // Basic 'foo' style key.\n keys_last = 0;\n }\n\n // Are we dealing with a name=value pair, or just a name?\n if (param.length >= 2) {\n let val = decodeURIComponent(param.slice(1).join('='));\n\n // Coerce values.\n if (coerce) {\n val = val && !isNaN(val) ? +val // number\n : val === 'undefined' ? undefined // undefined\n : coerce_types[val] !== undefined ? coerce_types[val] // true, false, null\n : val; // string\n }\n\n if (keys_last) {\n let cur = obj;\n // Complex key, build deep object structure based on a few rules:\n // * The 'cur' pointer starts at the object top-level.\n // * [] = array push (n is set to array length), [n] = array if n is\n // numeric, otherwise object.\n // * If at the last keys part, set the value.\n // * For each keys part, if the current level is undefined create an\n // object or array based on the type of the next keys part.\n // * Move the 'cur' pointer to the next level.\n // * Rinse & repeat.\n for (let i = 0; i <= keys_last; i++) {\n key = keys[i] === '' ? cur.length : keys[i];\n cur = cur[key] = i < keys_last\n ? cur[key] || (keys[i + 1] && isNaN(keys[i + 1]) ? {} : [])\n : val;\n }\n\n } else {\n // Simple key, even simpler rules, since only scalars and shallow\n // arrays are allowed.\n\n if (Array.isArray(obj[key])) {\n // val is already an array, so push on the next value.\n obj[key].push(val);\n\n } else if (obj[key] !== undefined) {\n // val isn't an array, but since a second value has been specified,\n // convert val into an array.\n obj[key] = [obj[key], val];\n\n } else {\n // val is a scalar.\n obj[key] = val;\n }\n }\n\n } else if (key) {\n // No value was defined, so set something meaningful.\n obj[key] = coerce\n ? undefined\n : '';\n }\n });\n\n return obj;\n}\n\nexport default deparam;\n","/**\n * @module jQueryPluginDBox\n */\n/**\n* @param {external:jQuery} $\n* @param {PlainObject} [strings]\n* @param {PlainObject} [strings.ok]\n* @param {PlainObject} [strings.cancel]\n* @returns {external:jQuery}\n*/\nexport default function jQueryPluginDBox ($, strings = {ok: 'Ok', cancel: 'Cancel'}) {\n // This sets up alternative dialog boxes. They mostly work the same way as\n // their UI counterparts, expect instead of returning the result, a callback\n // needs to be included that returns the result as its first parameter.\n // In the future we may want to add additional types of dialog boxes, since\n // they should be easy to handle this way.\n $('#dialog_container').draggable({\n cancel: '#dialog_content, #dialog_buttons *',\n containment: 'window'\n }).css('position', 'absolute');\n\n const box = $('#dialog_box'),\n btnHolder = $('#dialog_buttons'),\n dialogContent = $('#dialog_content');\n\n /**\n * @typedef {PlainObject} module:jQueryPluginDBox.PromiseResultObject\n * @property {string|true} response\n * @property {boolean} checked\n */\n\n /**\n * Resolves to `false` (if cancelled), for prompts and selects\n * without checkboxes, it resolves to the value of the form control. For other\n * types without checkboxes, it resolves to `true`. For checkboxes, it resolves\n * to an object with the `response` key containing the same value as the previous\n * mentioned (string or `true`) and a `checked` (boolean) property.\n * @typedef {Promise<boolean|string|module:jQueryPluginDBox.PromiseResultObject>} module:jQueryPluginDBox.ResultPromise\n */\n /**\n * @typedef {PlainObject} module:jQueryPluginDBox.SelectOption\n * @property {string} text\n * @property {string} value\n */\n /**\n * @typedef {PlainObject} module:jQueryPluginDBox.CheckboxInfo\n * @property {string} label Label for the checkbox\n * @property {string} value Value of the checkbox\n * @property {string} tooltip Tooltip on the checkbox label\n * @property {boolean} checked Whether the checkbox is checked by default\n */\n /**\n * Triggered upon a change of value for the select pull-down.\n * @callback module:jQueryPluginDBox.SelectChangeListener\n * @returns {void}\n */\n /**\n * Creates a dialog of the specified type with a given message\n * and any defaults and type-specific metadata. Returns a `Promise`\n * which resolves differently depending on whether the dialog\n * was cancelled or okayed (with the response and any checked state).\n * @param {\"alert\"|\"prompt\"|\"select\"|\"process\"} type\n * @param {string} msg\n * @param {string} [defaultVal]\n * @param {module:jQueryPluginDBox.SelectOption[]} [opts]\n * @param {module:jQueryPluginDBox.SelectChangeListener} [changeListener]\n * @param {module:jQueryPluginDBox.CheckboxInfo} [checkbox]\n * @returns {jQueryPluginDBox.ResultPromise}\n */\n function dbox (type, msg, defaultVal, opts, changeListener, checkbox) {\n dialogContent.html('<p>' + msg.replace(/\\n/g, '</p><p>') + '</p>')\n .toggleClass('prompt', (type === 'prompt'));\n btnHolder.empty();\n\n const ok = $('<input type=\"button\" data-ok=\"\" value=\"' + strings.ok + '\">').appendTo(btnHolder);\n\n return new Promise((resolve, reject) => { // eslint-disable-line promise/avoid-new\n if (type !== 'alert') {\n $('<input type=\"button\" value=\"' + strings.cancel + '\">')\n .appendTo(btnHolder)\n .click(function () {\n box.hide();\n resolve(false);\n });\n }\n\n let ctrl, chkbx;\n if (type === 'prompt') {\n ctrl = $('<input type=\"text\">').prependTo(btnHolder);\n ctrl.val(defaultVal || '');\n ctrl.bind('keydown', 'return', function () { ok.click(); });\n } else if (type === 'select') {\n const div = $('<div style=\"text-align:center;\">');\n ctrl = $(`<select aria-label=\"${msg}\">`).appendTo(div);\n if (checkbox) {\n const label = $('<label>').text(checkbox.label);\n chkbx = $('<input type=\"checkbox\">').appendTo(label);\n chkbx.val(checkbox.value);\n if (checkbox.tooltip) {\n label.attr('title', checkbox.tooltip);\n }\n chkbx.prop('checked', Boolean(checkbox.checked));\n div.append($('<div>').append(label));\n }\n $.each(opts || [], function (opt, val) {\n if (typeof val === 'object') {\n ctrl.append($('<option>').val(val.value).html(val.text));\n } else {\n ctrl.append($('<option>').html(val));\n }\n });\n dialogContent.append(div);\n if (defaultVal) {\n ctrl.val(defaultVal);\n }\n if (changeListener) {\n ctrl.bind('change', 'return', changeListener);\n }\n ctrl.bind('keydown', 'return', function () { ok.click(); });\n } else if (type === 'process') {\n ok.hide();\n }\n\n box.show();\n\n ok.click(function () {\n box.hide();\n const response = (type === 'prompt' || type === 'select') ? ctrl.val() : true;\n if (chkbx) {\n resolve({response, checked: chkbx.prop('checked')});\n return;\n }\n resolve(response);\n }).focus();\n\n if (type === 'prompt' || type === 'select') {\n ctrl.focus();\n }\n });\n }\n\n /**\n * @param {string} msg Message to alert\n * @returns {jQueryPluginDBox.ResultPromise}\n */\n $.alert = function (msg) {\n return dbox('alert', msg);\n };\n /**\n * @param {string} msg Message for which to ask confirmation\n * @returns {jQueryPluginDBox.ResultPromise}\n */\n $.confirm = function (msg) {\n return dbox('confirm', msg);\n };\n /**\n * @param {string} msg Message to indicate upon cancelable indicator\n * @returns {jQueryPluginDBox.ResultPromise}\n */\n $.process_cancel = function (msg) {\n return dbox('process', msg);\n };\n /**\n * @param {string} msg Message to accompany the prompt\n * @param {string} [defaultText=''] The default text to show for the prompt\n * @returns {jQueryPluginDBox.ResultPromise}\n */\n $.prompt = function (msg, defaultText = '') {\n return dbox('prompt', msg, defaultText);\n };\n $.select = function (msg, opts, changeListener, txt, checkbox) {\n return dbox('select', msg, txt, opts, changeListener, checkbox);\n };\n return $;\n}\n","/* globals jQuery */\n/**\n * Provides tools for the layer concept.\n * @module layer\n * @license MIT\n *\n * @copyright 2011 Jeff Schiller, 2016 Flint O'Brien\n */\n\nimport {NS} from './namespaces.js';\nimport {toXml, walkTree, isNullish} from './utilities.js';\n\nconst $ = jQuery;\n\n/**\n * This class encapsulates the concept of a layer in the drawing. It can be constructed with\n * an existing group element or, with three parameters, will create a new layer group element.\n *\n * @example\n * const l1 = new Layer('name', group); // Use the existing group for this layer.\n * const l2 = new Layer('name', group, svgElem); // Create a new group and add it to the DOM after group.\n * const l3 = new Layer('name', null, svgElem); // Create a new group and add it to the DOM as the last layer.\n * @memberof module:layer\n */\nclass Layer {\n /**\n * @param {string} name - Layer name\n * @param {SVGGElement|null} group - An existing SVG group element or null.\n * If group and no svgElem, use group for this layer.\n * If group and svgElem, create a new group element and insert it in the DOM after group.\n * If no group and svgElem, create a new group element and insert it in the DOM as the last layer.\n * @param {SVGGElement} [svgElem] - The SVG DOM element. If defined, use this to add\n * a new layer to the document.\n */\n constructor (name, group, svgElem) {\n this.name_ = name;\n this.group_ = svgElem ? null : group;\n\n if (svgElem) {\n // Create a group element with title and add it to the DOM.\n const svgdoc = svgElem.ownerDocument;\n this.group_ = svgdoc.createElementNS(NS.SVG, 'g');\n const layerTitle = svgdoc.createElementNS(NS.SVG, 'title');\n layerTitle.textContent = name;\n this.group_.append(layerTitle);\n if (group) {\n $(group).after(this.group_);\n } else {\n svgElem.append(this.group_);\n }\n }\n\n addLayerClass(this.group_);\n walkTree(this.group_, function (e) {\n e.setAttribute('style', 'pointer-events:inherit');\n });\n\n this.group_.setAttribute('style', svgElem ? 'pointer-events:all' : 'pointer-events:none');\n }\n\n /**\n * Get the layer's name.\n * @returns {string} The layer name\n */\n getName () {\n return this.name_;\n }\n\n /**\n * Get the group element for this layer.\n * @returns {SVGGElement} The layer SVG group\n */\n getGroup () {\n return this.group_;\n }\n\n /**\n * Active this layer so it takes pointer events.\n * @returns {void}\n */\n activate () {\n this.group_.setAttribute('style', 'pointer-events:all');\n }\n\n /**\n * Deactive this layer so it does NOT take pointer events.\n * @returns {void}\n */\n deactivate () {\n this.group_.setAttribute('style', 'pointer-events:none');\n }\n\n /**\n * Set this layer visible or hidden based on 'visible' parameter.\n * @param {boolean} visible - If true, make visible; otherwise, hide it.\n * @returns {void}\n */\n setVisible (visible) {\n const expected = visible === undefined || visible ? 'inline' : 'none';\n const oldDisplay = this.group_.getAttribute('display');\n if (oldDisplay !== expected) {\n this.group_.setAttribute('display', expected);\n }\n }\n\n /**\n * Is this layer visible?\n * @returns {boolean} True if visible.\n */\n isVisible () {\n return this.group_.getAttribute('display') !== 'none';\n }\n\n /**\n * Get layer opacity.\n * @returns {Float} Opacity value.\n */\n getOpacity () {\n const opacity = this.group_.getAttribute('opacity');\n if (isNullish(opacity)) {\n return 1;\n }\n return parseFloat(opacity);\n }\n\n /**\n * Sets the opacity of this layer. If opacity is not a value between 0.0 and 1.0,\n * nothing happens.\n * @param {Float} opacity - A float value in the range 0.0-1.0\n * @returns {void}\n */\n setOpacity (opacity) {\n if (typeof opacity === 'number' && opacity >= 0.0 && opacity <= 1.0) {\n this.group_.setAttribute('opacity', opacity);\n }\n }\n\n /**\n * Append children to this layer.\n * @param {SVGGElement} children - The children to append to this layer.\n * @returns {void}\n */\n appendChildren (children) {\n for (const child of children) {\n this.group_.append(child);\n }\n }\n\n /**\n * @returns {SVGTitleElement|null}\n */\n getTitleElement () {\n const len = this.group_.childNodes.length;\n for (let i = 0; i < len; ++i) {\n const child = this.group_.childNodes.item(i);\n if (child && child.tagName === 'title') {\n return child;\n }\n }\n return null;\n }\n\n /**\n * Set the name of this layer.\n * @param {string} name - The new name.\n * @param {module:history.HistoryRecordingService} hrService - History recording service\n * @returns {string|null} The new name if changed; otherwise, null.\n */\n setName (name, hrService) {\n const previousName = this.name_;\n name = toXml(name);\n // now change the underlying title element contents\n const title = this.getTitleElement();\n if (title) {\n $(title).empty();\n title.textContent = name;\n this.name_ = name;\n if (hrService) {\n hrService.changeElement(title, {'#text': previousName});\n }\n return this.name_;\n }\n return null;\n }\n\n /**\n * Remove this layer's group from the DOM. No more functions on group can be called after this.\n * @returns {SVGGElement} The layer SVG group that was just removed.\n */\n removeGroup () {\n const parent = this.group_.parentNode;\n const group = parent.removeChild(this.group_);\n this.group_ = undefined;\n return group;\n }\n}\n/**\n * @property {string} CLASS_NAME - class attribute assigned to all layer groups.\n */\nLayer.CLASS_NAME = 'layer';\n\n/**\n * @property {RegExp} CLASS_REGEX - Used to test presence of class Layer.CLASS_NAME\n */\nLayer.CLASS_REGEX = new RegExp('(\\\\s|^)' + Layer.CLASS_NAME + '(\\\\s|$)');\n\n/**\n * Add class `Layer.CLASS_NAME` to the element (usually `class='layer'`).\n *\n * @param {SVGGElement} elem - The SVG element to update\n * @returns {void}\n */\nfunction addLayerClass (elem) {\n const classes = elem.getAttribute('class');\n if (isNullish(classes) || !classes.length) {\n elem.setAttribute('class', Layer.CLASS_NAME);\n } else if (!Layer.CLASS_REGEX.test(classes)) {\n elem.setAttribute('class', classes + ' ' + Layer.CLASS_NAME);\n }\n}\n\nexport default Layer;\n","/**\n * HistoryRecordingService component of history.\n * @module history\n * @license MIT\n * @copyright 2016 Flint O'Brien\n */\n\nimport {\n BatchCommand, MoveElementCommand, InsertElementCommand, RemoveElementCommand,\n ChangeElementCommand\n} from './history.js';\n\n/**\n * History recording service.\n *\n * A self-contained service interface for recording history. Once injected, no other dependencies\n * or globals are required (example: UndoManager, command types, etc.). Easy to mock for unit tests.\n * Built on top of history classes in history.js.\n *\n * There is a simple start/end interface for batch commands.\n *\n * HistoryRecordingService.NO_HISTORY is a singleton that can be passed in to functions\n * that record history. This helps when the caller requires that no history be recorded.\n *\n * The following will record history: insert, batch, insert.\n * @example\n * hrService = new history.HistoryRecordingService(this.undoMgr);\n * hrService.insertElement(elem, text); // add simple command to history.\n * hrService.startBatchCommand('create two elements');\n * hrService.changeElement(elem, attrs, text); // add to batchCommand\n * hrService.changeElement(elem, attrs2, text); // add to batchCommand\n * hrService.endBatchCommand(); // add batch command with two change commands to history.\n * hrService.insertElement(elem, text); // add simple command to history.\n *\n * @example\n * // Note that all functions return this, so commands can be chained, like so:\n * hrService\n * .startBatchCommand('create two elements')\n * .insertElement(elem, text)\n * .changeElement(elem, attrs, text)\n * .endBatchCommand();\n *\n * @memberof module:history\n */\nclass HistoryRecordingService {\n /**\n * @param {history.UndoManager|null} undoManager - The undo manager.\n * A value of `null` is valid for cases where no history recording is required.\n * See singleton: {@link module:history.HistoryRecordingService.HistoryRecordingService.NO_HISTORY}\n */\n constructor (undoManager) {\n this.undoManager_ = undoManager;\n this.currentBatchCommand_ = null;\n this.batchCommandStack_ = [];\n }\n\n /**\n * Start a batch command so multiple commands can recorded as a single history command.\n * Requires a corresponding call to endBatchCommand. Start and end commands can be nested.\n *\n * @param {string} text - Optional string describing the batch command.\n * @returns {module:history.HistoryRecordingService}\n */\n startBatchCommand (text) {\n if (!this.undoManager_) { return this; }\n this.currentBatchCommand_ = new BatchCommand(text);\n this.batchCommandStack_.push(this.currentBatchCommand_);\n return this;\n }\n\n /**\n * End a batch command and add it to the history or a parent batch command.\n * @returns {module:history.HistoryRecordingService}\n */\n endBatchCommand () {\n if (!this.undoManager_) { return this; }\n if (this.currentBatchCommand_) {\n const batchCommand = this.currentBatchCommand_;\n this.batchCommandStack_.pop();\n const {length: len} = this.batchCommandStack_;\n this.currentBatchCommand_ = len ? this.batchCommandStack_[len - 1] : null;\n this.addCommand_(batchCommand);\n }\n return this;\n }\n\n /**\n * Add a `MoveElementCommand` to the history or current batch command.\n * @param {Element} elem - The DOM element that was moved\n * @param {Element} oldNextSibling - The element's next sibling before it was moved\n * @param {Element} oldParent - The element's parent before it was moved\n * @param {string} [text] - An optional string visible to user related to this change\n * @returns {module:history.HistoryRecordingService}\n */\n moveElement (elem, oldNextSibling, oldParent, text) {\n if (!this.undoManager_) { return this; }\n this.addCommand_(new MoveElementCommand(elem, oldNextSibling, oldParent, text));\n return this;\n }\n\n /**\n * Add an `InsertElementCommand` to the history or current batch command.\n * @param {Element} elem - The DOM element that was added\n * @param {string} [text] - An optional string visible to user related to this change\n * @returns {module:history.HistoryRecordingService}\n */\n insertElement (elem, text) {\n if (!this.undoManager_) { return this; }\n this.addCommand_(new InsertElementCommand(elem, text));\n return this;\n }\n\n /**\n * Add a `RemoveElementCommand` to the history or current batch command.\n * @param {Element} elem - The DOM element that was removed\n * @param {Element} oldNextSibling - The element's next sibling before it was removed\n * @param {Element} oldParent - The element's parent before it was removed\n * @param {string} [text] - An optional string visible to user related to this change\n * @returns {module:history.HistoryRecordingService}\n */\n removeElement (elem, oldNextSibling, oldParent, text) {\n if (!this.undoManager_) { return this; }\n this.addCommand_(new RemoveElementCommand(elem, oldNextSibling, oldParent, text));\n return this;\n }\n\n /**\n * Add a `ChangeElementCommand` to the history or current batch command.\n * @param {Element} elem - The DOM element that was changed\n * @param {module:history.CommandAttributes} attrs - An object with the attributes to be changed and the values they had *before* the change\n * @param {string} [text] - An optional string visible to user related to this change\n * @returns {module:history.HistoryRecordingService}\n */\n changeElement (elem, attrs, text) {\n if (!this.undoManager_) { return this; }\n this.addCommand_(new ChangeElementCommand(elem, attrs, text));\n return this;\n }\n\n /**\n * Private function to add a command to the history or current batch command.\n * @private\n * @param {Command} cmd\n * @returns {module:history.HistoryRecordingService|void}\n */\n addCommand_ (cmd) {\n if (!this.undoManager_) { return this; }\n if (this.currentBatchCommand_) {\n this.currentBatchCommand_.addSubCommand(cmd);\n } else {\n this.undoManager_.addCommandToHistory(cmd);\n }\n return undefined;\n }\n}\n/**\n * @memberof module:history.HistoryRecordingService\n * @property {module:history.HistoryRecordingService} NO_HISTORY - Singleton that can be passed to functions that record history, but the caller requires that no history be recorded.\n */\nHistoryRecordingService.NO_HISTORY = new HistoryRecordingService();\nexport default HistoryRecordingService;\n","/* globals jQuery */\n/**\n * Tools for drawing.\n * @module draw\n * @license MIT\n * @copyright 2011 Jeff Schiller\n */\n\nimport Layer from './layer.js';\nimport HistoryRecordingService from './historyrecording.js';\n\nimport {NS} from './namespaces.js';\nimport {isOpera} from './browser.js';\nimport {\n toXml, getElem,\n copyElem as utilCopyElem\n} from './utilities.js';\nimport {\n BatchCommand, RemoveElementCommand, MoveElementCommand, ChangeElementCommand\n} from './history.js';\n\nconst $ = jQuery;\n\nconst visElems = 'a,circle,ellipse,foreignObject,g,image,line,path,polygon,polyline,rect,svg,text,tspan,use'.split(',');\n\nconst RandomizeModes = {\n LET_DOCUMENT_DECIDE: 0,\n ALWAYS_RANDOMIZE: 1,\n NEVER_RANDOMIZE: 2\n};\nlet randIds = RandomizeModes.LET_DOCUMENT_DECIDE;\n// Array with current disabled elements (for in-group editing)\nlet disabledElems = [];\n\n/**\n * Get a HistoryRecordingService.\n * @param {module:history.HistoryRecordingService} [hrService] - if exists, return it instead of creating a new service.\n * @returns {module:history.HistoryRecordingService}\n */\nfunction historyRecordingService (hrService) {\n return hrService || new HistoryRecordingService(canvas_.undoMgr);\n}\n\n/**\n * Find the layer name in a group element.\n * @param {Element} group The group element to search in.\n * @returns {string} The layer name or empty string.\n */\nfunction findLayerNameInGroup (group) {\n return $('title', group).text() ||\n (isOpera() && group.querySelectorAll\n // Hack for Opera 10.60\n ? $(group.querySelectorAll('title')).text()\n : '');\n}\n\n/**\n * Given a set of names, return a new unique name.\n * @param {string[]} existingLayerNames - Existing layer names.\n * @returns {string} - The new name.\n */\nfunction getNewLayerName (existingLayerNames) {\n let i = 1;\n // TODO(codedread): What about internationalization of \"Layer\"?\n while (existingLayerNames.includes(('Layer ' + i))) { i++; }\n return 'Layer ' + i;\n}\n\n/**\n * This class encapsulates the concept of a SVG-edit drawing.\n */\nexport class Drawing {\n /**\n * @param {SVGSVGElement} svgElem - The SVG DOM Element that this JS object\n * encapsulates. If the svgElem has a se:nonce attribute on it, then\n * IDs will use the nonce as they are generated.\n * @param {string} [optIdPrefix=svg_] - The ID prefix to use.\n * @throws {Error} If not initialized with an SVG element\n */\n constructor (svgElem, optIdPrefix) {\n if (!svgElem || !svgElem.tagName || !svgElem.namespaceURI ||\n svgElem.tagName !== 'svg' || svgElem.namespaceURI !== NS.SVG) {\n throw new Error('Error: svgedit.draw.Drawing instance initialized without a <svg> element');\n }\n\n /**\n * The SVG DOM Element that represents this drawing.\n * @type {SVGSVGElement}\n */\n this.svgElem_ = svgElem;\n\n /**\n * The latest object number used in this drawing.\n * @type {Integer}\n */\n this.obj_num = 0;\n\n /**\n * The prefix to prepend to each element id in the drawing.\n * @type {string}\n */\n this.idPrefix = optIdPrefix || 'svg_';\n\n /**\n * An array of released element ids to immediately reuse.\n * @type {Integer[]}\n */\n this.releasedNums = [];\n\n /**\n * The z-ordered array of Layer objects. Each layer has a name\n * and group element.\n * The first layer is the one at the bottom of the rendering.\n * @type {Layer[]}\n */\n this.all_layers = [];\n\n /**\n * Map of all_layers by name.\n *\n * Note: Layers are ordered, but referenced externally by name; so, we need both container\n * types depending on which function is called (i.e. all_layers and layer_map).\n *\n * @type {PlainObject<string, Layer>}\n */\n this.layer_map = {};\n\n /**\n * The current layer being used.\n * @type {Layer}\n */\n this.current_layer = null;\n\n /**\n * The nonce to use to uniquely identify elements across drawings.\n * @type {!string}\n */\n this.nonce_ = '';\n const n = this.svgElem_.getAttributeNS(NS.SE, 'nonce');\n // If already set in the DOM, use the nonce throughout the document\n // else, if randomizeIds(true) has been called, create and set the nonce.\n if (n && randIds !== RandomizeModes.NEVER_RANDOMIZE) {\n this.nonce_ = n;\n } else if (randIds === RandomizeModes.ALWAYS_RANDOMIZE) {\n this.setNonce(Math.floor(Math.random() * 100001));\n }\n }\n\n /**\n * @param {string} id Element ID to retrieve\n * @returns {Element} SVG element within the root SVGSVGElement\n */\n getElem_ (id) {\n if (this.svgElem_.querySelector) {\n // querySelector lookup\n return this.svgElem_.querySelector('#' + id);\n }\n // jQuery lookup: twice as slow as xpath in FF\n return $(this.svgElem_).find('[id=' + id + ']')[0];\n }\n\n /**\n * @returns {SVGSVGElement}\n */\n getSvgElem () {\n return this.svgElem_;\n }\n\n /**\n * @returns {!(string|Integer)} The previously set nonce\n */\n getNonce () {\n return this.nonce_;\n }\n\n /**\n * @param {!(string|Integer)} n The nonce to set\n * @returns {void}\n */\n setNonce (n) {\n this.svgElem_.setAttributeNS(NS.XMLNS, 'xmlns:se', NS.SE);\n this.svgElem_.setAttributeNS(NS.SE, 'se:nonce', n);\n this.nonce_ = n;\n }\n\n /**\n * Clears any previously set nonce.\n * @returns {void}\n */\n clearNonce () {\n // We deliberately leave any se:nonce attributes alone,\n // we just don't use it to randomize ids.\n this.nonce_ = '';\n }\n\n /**\n * Returns the latest object id as a string.\n * @returns {string} The latest object Id.\n */\n getId () {\n return this.nonce_\n ? this.idPrefix + this.nonce_ + '_' + this.obj_num\n : this.idPrefix + this.obj_num;\n }\n\n /**\n * Returns the next object Id as a string.\n * @returns {string} The next object Id to use.\n */\n getNextId () {\n const oldObjNum = this.obj_num;\n let restoreOldObjNum = false;\n\n // If there are any released numbers in the release stack,\n // use the last one instead of the next obj_num.\n // We need to temporarily use obj_num as that is what getId() depends on.\n if (this.releasedNums.length > 0) {\n this.obj_num = this.releasedNums.pop();\n restoreOldObjNum = true;\n } else {\n // If we are not using a released id, then increment the obj_num.\n this.obj_num++;\n }\n\n // Ensure the ID does not exist.\n let id = this.getId();\n while (this.getElem_(id)) {\n if (restoreOldObjNum) {\n this.obj_num = oldObjNum;\n restoreOldObjNum = false;\n }\n this.obj_num++;\n id = this.getId();\n }\n // Restore the old object number if required.\n if (restoreOldObjNum) {\n this.obj_num = oldObjNum;\n }\n return id;\n }\n\n /**\n * Releases the object Id, letting it be used as the next id in getNextId().\n * This method DOES NOT remove any elements from the DOM, it is expected\n * that client code will do this.\n * @param {string} id - The id to release.\n * @returns {boolean} True if the id was valid to be released, false otherwise.\n */\n releaseId (id) {\n // confirm if this is a valid id for this Document, else return false\n const front = this.idPrefix + (this.nonce_ ? this.nonce_ + '_' : '');\n if (typeof id !== 'string' || !id.startsWith(front)) {\n return false;\n }\n // extract the obj_num of this id\n const num = parseInt(id.substr(front.length));\n\n // if we didn't get a positive number or we already released this number\n // then return false.\n if (typeof num !== 'number' || num <= 0 || this.releasedNums.includes(num)) {\n return false;\n }\n\n // push the released number into the released queue\n this.releasedNums.push(num);\n\n return true;\n }\n\n /**\n * Returns the number of layers in the current drawing.\n * @returns {Integer} The number of layers in the current drawing.\n */\n getNumLayers () {\n return this.all_layers.length;\n }\n\n /**\n * Check if layer with given name already exists.\n * @param {string} name - The layer name to check\n * @returns {boolean}\n */\n hasLayer (name) {\n return this.layer_map[name] !== undefined;\n }\n\n /**\n * Returns the name of the ith layer. If the index is out of range, an empty string is returned.\n * @param {Integer} i - The zero-based index of the layer you are querying.\n * @returns {string} The name of the ith layer (or the empty string if none found)\n */\n getLayerName (i) {\n return i >= 0 && i < this.getNumLayers() ? this.all_layers[i].getName() : '';\n }\n\n /**\n * @returns {SVGGElement|null} The SVGGElement representing the current layer.\n */\n getCurrentLayer () {\n return this.current_layer ? this.current_layer.getGroup() : null;\n }\n\n /**\n * Get a layer by name.\n * @param {string} name\n * @returns {SVGGElement} The SVGGElement representing the named layer or null.\n */\n getLayerByName (name) {\n const layer = this.layer_map[name];\n return layer ? layer.getGroup() : null;\n }\n\n /**\n * Returns the name of the currently selected layer. If an error occurs, an empty string\n * is returned.\n * @returns {string} The name of the currently active layer (or the empty string if none found).\n */\n getCurrentLayerName () {\n return this.current_layer ? this.current_layer.getName() : '';\n }\n\n /**\n * Set the current layer's name.\n * @param {string} name - The new name.\n * @param {module:history.HistoryRecordingService} hrService - History recording service\n * @returns {string|null} The new name if changed; otherwise, null.\n */\n setCurrentLayerName (name, hrService) {\n let finalName = null;\n if (this.current_layer) {\n const oldName = this.current_layer.getName();\n finalName = this.current_layer.setName(name, hrService);\n if (finalName) {\n delete this.layer_map[oldName];\n this.layer_map[finalName] = this.current_layer;\n }\n }\n return finalName;\n }\n\n /**\n * Set the current layer's position.\n * @param {Integer} newpos - The zero-based index of the new position of the layer. Range should be 0 to layers-1\n * @returns {{title: SVGGElement, previousName: string}|null} If the name was changed, returns {title:SVGGElement, previousName:string}; otherwise null.\n */\n setCurrentLayerPosition (newpos) {\n const layerCount = this.getNumLayers();\n if (!this.current_layer || newpos < 0 || newpos >= layerCount) {\n return null;\n }\n\n let oldpos;\n for (oldpos = 0; oldpos < layerCount; ++oldpos) {\n if (this.all_layers[oldpos] === this.current_layer) { break; }\n }\n // some unknown error condition (current_layer not in all_layers)\n if (oldpos === layerCount) { return null; }\n\n if (oldpos !== newpos) {\n // if our new position is below us, we need to insert before the node after newpos\n const currentGroup = this.current_layer.getGroup();\n const oldNextSibling = currentGroup.nextSibling;\n\n let refGroup = null;\n if (newpos > oldpos) {\n if (newpos < layerCount - 1) {\n refGroup = this.all_layers[newpos + 1].getGroup();\n }\n // if our new position is above us, we need to insert before the node at newpos\n } else {\n refGroup = this.all_layers[newpos].getGroup();\n }\n this.svgElem_.insertBefore(currentGroup, refGroup); // Ok to replace with `refGroup.before(currentGroup);`?\n\n this.identifyLayers();\n this.setCurrentLayer(this.getLayerName(newpos));\n\n return {\n currentGroup,\n oldNextSibling\n };\n }\n return null;\n }\n\n /**\n * @param {module:history.HistoryRecordingService} hrService\n * @returns {void}\n */\n mergeLayer (hrService) {\n const currentGroup = this.current_layer.getGroup();\n const prevGroup = $(currentGroup).prev()[0];\n if (!prevGroup) { return; }\n\n hrService.startBatchCommand('Merge Layer');\n\n const layerNextSibling = currentGroup.nextSibling;\n hrService.removeElement(currentGroup, layerNextSibling, this.svgElem_);\n\n while (currentGroup.firstChild) {\n const child = currentGroup.firstChild;\n if (child.localName === 'title') {\n hrService.removeElement(child, child.nextSibling, currentGroup);\n child.remove();\n continue;\n }\n const oldNextSibling = child.nextSibling;\n prevGroup.append(child);\n hrService.moveElement(child, oldNextSibling, currentGroup);\n }\n\n // Remove current layer's group\n this.current_layer.removeGroup();\n // Remove the current layer and set the previous layer as the new current layer\n const index = this.all_layers.indexOf(this.current_layer);\n if (index > 0) {\n const name = this.current_layer.getName();\n this.current_layer = this.all_layers[index - 1];\n this.all_layers.splice(index, 1);\n delete this.layer_map[name];\n }\n\n hrService.endBatchCommand();\n }\n\n /**\n * @param {module:history.HistoryRecordingService} hrService\n * @returns {void}\n */\n mergeAllLayers (hrService) {\n // Set the current layer to the last layer.\n this.current_layer = this.all_layers[this.all_layers.length - 1];\n\n hrService.startBatchCommand('Merge all Layers');\n while (this.all_layers.length > 1) {\n this.mergeLayer(hrService);\n }\n hrService.endBatchCommand();\n }\n\n /**\n * Sets the current layer. If the name is not a valid layer name, then this\n * function returns `false`. Otherwise it returns `true`. This is not an\n * undo-able action.\n * @param {string} name - The name of the layer you want to switch to.\n * @returns {boolean} `true` if the current layer was switched, otherwise `false`\n */\n setCurrentLayer (name) {\n const layer = this.layer_map[name];\n if (layer) {\n if (this.current_layer) {\n this.current_layer.deactivate();\n }\n this.current_layer = layer;\n this.current_layer.activate();\n return true;\n }\n return false;\n }\n\n /**\n * Deletes the current layer from the drawing and then clears the selection.\n * This function then calls the 'changed' handler. This is an undoable action.\n * @todo Does this actually call the 'changed' handler?\n * @returns {SVGGElement} The SVGGElement of the layer removed or null.\n */\n deleteCurrentLayer () {\n if (this.current_layer && this.getNumLayers() > 1) {\n const oldLayerGroup = this.current_layer.removeGroup();\n this.identifyLayers();\n return oldLayerGroup;\n }\n return null;\n }\n\n /**\n * Updates layer system and sets the current layer to the\n * top-most layer (last `<g>` child of this drawing).\n * @returns {void}\n */\n identifyLayers () {\n this.all_layers = [];\n this.layer_map = {};\n const numchildren = this.svgElem_.childNodes.length;\n // loop through all children of SVG element\n const orphans = [], layernames = [];\n let layer = null;\n let childgroups = false;\n for (let i = 0; i < numchildren; ++i) {\n const child = this.svgElem_.childNodes.item(i);\n // for each g, find its layer name\n if (child && child.nodeType === 1) {\n if (child.tagName === 'g') {\n childgroups = true;\n const name = findLayerNameInGroup(child);\n if (name) {\n layernames.push(name);\n layer = new Layer(name, child);\n this.all_layers.push(layer);\n this.layer_map[name] = layer;\n } else {\n // if group did not have a name, it is an orphan\n orphans.push(child);\n }\n } else if (visElems.includes(child.nodeName)) {\n // Child is \"visible\" (i.e. not a <title> or <defs> element), so it is an orphan\n orphans.push(child);\n }\n }\n }\n\n // If orphans or no layers found, create a new layer and add all the orphans to it\n if (orphans.length > 0 || !childgroups) {\n layer = new Layer(getNewLayerName(layernames), null, this.svgElem_);\n layer.appendChildren(orphans);\n this.all_layers.push(layer);\n this.layer_map[name] = layer;\n } else {\n layer.activate();\n }\n this.current_layer = layer;\n }\n\n /**\n * Creates a new top-level layer in the drawing with the given name and\n * makes it the current layer.\n * @param {string} name - The given name. If the layer name exists, a new name will be generated.\n * @param {module:history.HistoryRecordingService} hrService - History recording service\n * @returns {SVGGElement} The SVGGElement of the new layer, which is\n * also the current layer of this drawing.\n */\n createLayer (name, hrService) {\n if (this.current_layer) {\n this.current_layer.deactivate();\n }\n // Check for duplicate name.\n if (name === undefined || name === null || name === '' || this.layer_map[name]) {\n name = getNewLayerName(Object.keys(this.layer_map));\n }\n\n // Crate new layer and add to DOM as last layer\n const layer = new Layer(name, null, this.svgElem_);\n // Like to assume hrService exists, but this is backwards compatible with old version of createLayer.\n if (hrService) {\n hrService.startBatchCommand('Create Layer');\n hrService.insertElement(layer.getGroup());\n hrService.endBatchCommand();\n }\n\n this.all_layers.push(layer);\n this.layer_map[name] = layer;\n this.current_layer = layer;\n return layer.getGroup();\n }\n\n /**\n * Creates a copy of the current layer with the given name and makes it the current layer.\n * @param {string} name - The given name. If the layer name exists, a new name will be generated.\n * @param {module:history.HistoryRecordingService} hrService - History recording service\n * @returns {SVGGElement} The SVGGElement of the new layer, which is\n * also the current layer of this drawing.\n */\n cloneLayer (name, hrService) {\n if (!this.current_layer) { return null; }\n this.current_layer.deactivate();\n // Check for duplicate name.\n if (name === undefined || name === null || name === '' || this.layer_map[name]) {\n name = getNewLayerName(Object.keys(this.layer_map));\n }\n\n // Create new group and add to DOM just after current_layer\n const currentGroup = this.current_layer.getGroup();\n const layer = new Layer(name, currentGroup, this.svgElem_);\n const group = layer.getGroup();\n\n // Clone children\n const children = [...currentGroup.childNodes];\n children.forEach((child) => {\n if (child.localName === 'title') { return; }\n group.append(this.copyElem(child));\n });\n\n if (hrService) {\n hrService.startBatchCommand('Duplicate Layer');\n hrService.insertElement(group);\n hrService.endBatchCommand();\n }\n\n // Update layer containers and current_layer.\n const index = this.all_layers.indexOf(this.current_layer);\n if (index >= 0) {\n this.all_layers.splice(index + 1, 0, layer);\n } else {\n this.all_layers.push(layer);\n }\n this.layer_map[name] = layer;\n this.current_layer = layer;\n return group;\n }\n\n /**\n * Returns whether the layer is visible. If the layer name is not valid,\n * then this function returns `false`.\n * @param {string} layerName - The name of the layer which you want to query.\n * @returns {boolean} The visibility state of the layer, or `false` if the layer name was invalid.\n */\n getLayerVisibility (layerName) {\n const layer = this.layer_map[layerName];\n return layer ? layer.isVisible() : false;\n }\n\n /**\n * Sets the visibility of the layer. If the layer name is not valid, this\n * function returns `null`, otherwise it returns the `SVGElement` representing\n * the layer. This is an undo-able action.\n * @param {string} layerName - The name of the layer to change the visibility\n * @param {boolean} bVisible - Whether the layer should be visible\n * @returns {?SVGGElement} The SVGGElement representing the layer if the\n * `layerName` was valid, otherwise `null`.\n */\n setLayerVisibility (layerName, bVisible) {\n if (typeof bVisible !== 'boolean') {\n return null;\n }\n const layer = this.layer_map[layerName];\n if (!layer) { return null; }\n layer.setVisible(bVisible);\n return layer.getGroup();\n }\n\n /**\n * Returns the opacity of the given layer. If the input name is not a layer, `null` is returned.\n * @param {string} layerName - name of the layer on which to get the opacity\n * @returns {?Float} The opacity value of the given layer. This will be a value between 0.0 and 1.0, or `null`\n * if `layerName` is not a valid layer\n */\n getLayerOpacity (layerName) {\n const layer = this.layer_map[layerName];\n if (!layer) { return null; }\n return layer.getOpacity();\n }\n\n /**\n * Sets the opacity of the given layer. If the input name is not a layer,\n * nothing happens. If opacity is not a value between 0.0 and 1.0, then\n * nothing happens.\n * NOTE: this function exists solely to apply a highlighting/de-emphasis\n * effect to a layer. When it is possible for a user to affect the opacity\n * of a layer, we will need to allow this function to produce an undo-able\n * action.\n * @param {string} layerName - Name of the layer on which to set the opacity\n * @param {Float} opacity - A float value in the range 0.0-1.0\n * @returns {void}\n */\n setLayerOpacity (layerName, opacity) {\n if (typeof opacity !== 'number' || opacity < 0.0 || opacity > 1.0) {\n return;\n }\n const layer = this.layer_map[layerName];\n if (layer) {\n layer.setOpacity(opacity);\n }\n }\n\n /**\n * Create a clone of an element, updating its ID and its children's IDs when needed.\n * @param {Element} el - DOM element to clone\n * @returns {Element}\n */\n copyElem (el) {\n const that = this;\n const getNextIdClosure = function () { return that.getNextId(); };\n return utilCopyElem(el, getNextIdClosure);\n }\n}\n\n/**\n * Called to ensure that drawings will or will not have randomized ids.\n * The currentDrawing will have its nonce set if it doesn't already.\n * @function module:draw.randomizeIds\n * @param {boolean} enableRandomization - flag indicating if documents should have randomized ids\n * @param {draw.Drawing} currentDrawing\n * @returns {void}\n */\nexport const randomizeIds = function (enableRandomization, currentDrawing) {\n randIds = enableRandomization === false\n ? RandomizeModes.NEVER_RANDOMIZE\n : RandomizeModes.ALWAYS_RANDOMIZE;\n\n if (randIds === RandomizeModes.ALWAYS_RANDOMIZE && !currentDrawing.getNonce()) {\n currentDrawing.setNonce(Math.floor(Math.random() * 100001));\n } else if (randIds === RandomizeModes.NEVER_RANDOMIZE && currentDrawing.getNonce()) {\n currentDrawing.clearNonce();\n }\n};\n\n// Layer API Functions\n\n/**\n* Group: Layers.\n*/\n\n/**\n * @see {@link https://api.jquery.com/jQuery.data/}\n * @name external:jQuery.data\n */\n\n/**\n * @interface module:draw.DrawCanvasInit\n * @property {module:path.pathActions} pathActions\n * @property {external:jQuery.data} elData\n * @property {module:history.UndoManager} undoMgr\n */\n/**\n * @function module:draw.DrawCanvasInit#getCurrentGroup\n * @returns {Element}\n */\n/**\n * @function module:draw.DrawCanvasInit#setCurrentGroup\n * @param {Element} cg\n * @returns {void}\n*/\n/**\n * @function module:draw.DrawCanvasInit#getSelectedElements\n * @returns {Element[]} the array with selected DOM elements\n*/\n/**\n * @function module:draw.DrawCanvasInit#getSVGContent\n * @returns {SVGSVGElement}\n */\n/**\n * @function module:draw.DrawCanvasInit#getCurrentDrawing\n * @returns {module:draw.Drawing}\n */\n/**\n * @function module:draw.DrawCanvasInit#clearSelection\n * @param {boolean} [noCall] - When `true`, does not call the \"selected\" handler\n * @returns {void}\n*/\n/**\n * Run the callback function associated with the given event.\n * @function module:draw.DrawCanvasInit#call\n * @param {\"changed\"|\"contextset\"} ev - String with the event name\n * @param {module:svgcanvas.SvgCanvas#event:changed|module:svgcanvas.SvgCanvas#event:contextset} arg - Argument to pass through to the callback\n * function. If the event is \"changed\", a (single-item) array of `Element`s is\n * passed. If the event is \"contextset\", the arg is `null` or `Element`.\n * @returns {void}\n */\n/**\n * @function module:draw.DrawCanvasInit#addCommandToHistory\n * @param {Command} cmd\n * @returns {void}\n*/\n/**\n * @function module:draw.DrawCanvasInit#changeSVGContent\n * @returns {void}\n */\n\nlet canvas_;\n/**\n* @function module:draw.init\n* @param {module:draw.DrawCanvasInit} canvas\n* @returns {void}\n*/\nexport const init = function (canvas) {\n canvas_ = canvas;\n};\n\n/**\n* Updates layer system.\n* @function module:draw.identifyLayers\n* @returns {void}\n*/\nexport const identifyLayers = function () {\n leaveContext();\n canvas_.getCurrentDrawing().identifyLayers();\n};\n\n/**\n* Creates a new top-level layer in the drawing with the given name, sets the current layer\n* to it, and then clears the selection. This function then calls the 'changed' handler.\n* This is an undoable action.\n* @function module:draw.createLayer\n* @param {string} name - The given name\n* @param {module:history.HistoryRecordingService} hrService\n* @fires module:svgcanvas.SvgCanvas#event:changed\n* @returns {void}\n*/\nexport const createLayer = function (name, hrService) {\n const newLayer = canvas_.getCurrentDrawing().createLayer(\n name,\n historyRecordingService(hrService)\n );\n canvas_.clearSelection();\n canvas_.call('changed', [newLayer]);\n};\n\n/**\n * Creates a new top-level layer in the drawing with the given name, copies all the current layer's contents\n * to it, and then clears the selection. This function then calls the 'changed' handler.\n * This is an undoable action.\n * @function module:draw.cloneLayer\n * @param {string} name - The given name. If the layer name exists, a new name will be generated.\n * @param {module:history.HistoryRecordingService} hrService - History recording service\n * @fires module:svgcanvas.SvgCanvas#event:changed\n * @returns {void}\n */\nexport const cloneLayer = function (name, hrService) {\n // Clone the current layer and make the cloned layer the new current layer\n const newLayer = canvas_.getCurrentDrawing().cloneLayer(name, historyRecordingService(hrService));\n\n canvas_.clearSelection();\n leaveContext();\n canvas_.call('changed', [newLayer]);\n};\n\n/**\n* Deletes the current layer from the drawing and then clears the selection. This function\n* then calls the 'changed' handler. This is an undoable action.\n* @function module:draw.deleteCurrentLayer\n* @fires module:svgcanvas.SvgCanvas#event:changed\n* @returns {boolean} `true` if an old layer group was found to delete\n*/\nexport const deleteCurrentLayer = function () {\n let currentLayer = canvas_.getCurrentDrawing().getCurrentLayer();\n const {nextSibling} = currentLayer;\n const parent = currentLayer.parentNode;\n currentLayer = canvas_.getCurrentDrawing().deleteCurrentLayer();\n if (currentLayer) {\n const batchCmd = new BatchCommand('Delete Layer');\n // store in our Undo History\n batchCmd.addSubCommand(new RemoveElementCommand(currentLayer, nextSibling, parent));\n canvas_.addCommandToHistory(batchCmd);\n canvas_.clearSelection();\n canvas_.call('changed', [parent]);\n return true;\n }\n return false;\n};\n\n/**\n* Sets the current layer. If the name is not a valid layer name, then this function returns\n* false. Otherwise it returns true. This is not an undo-able action.\n* @function module:draw.setCurrentLayer\n* @param {string} name - The name of the layer you want to switch to.\n* @returns {boolean} true if the current layer was switched, otherwise false\n*/\nexport const setCurrentLayer = function (name) {\n const result = canvas_.getCurrentDrawing().setCurrentLayer(toXml(name));\n if (result) {\n canvas_.clearSelection();\n }\n return result;\n};\n\n/**\n* Renames the current layer. If the layer name is not valid (i.e. unique), then this function\n* does nothing and returns `false`, otherwise it returns `true`. This is an undo-able action.\n* @function module:draw.renameCurrentLayer\n* @param {string} newName - the new name you want to give the current layer. This name must\n* be unique among all layer names.\n* @fires module:svgcanvas.SvgCanvas#event:changed\n* @returns {boolean} Whether the rename succeeded\n*/\nexport const renameCurrentLayer = function (newName) {\n const drawing = canvas_.getCurrentDrawing();\n const layer = drawing.getCurrentLayer();\n if (layer) {\n const result = drawing.setCurrentLayerName(newName, historyRecordingService());\n if (result) {\n canvas_.call('changed', [layer]);\n return true;\n }\n }\n return false;\n};\n\n/**\n* Changes the position of the current layer to the new value. If the new index is not valid,\n* this function does nothing and returns false, otherwise it returns true. This is an\n* undo-able action.\n* @function module:draw.setCurrentLayerPosition\n* @param {Integer} newPos - The zero-based index of the new position of the layer. This should be between\n* 0 and (number of layers - 1)\n* @returns {boolean} `true` if the current layer position was changed, `false` otherwise.\n*/\nexport const setCurrentLayerPosition = function (newPos) {\n const drawing = canvas_.getCurrentDrawing();\n const result = drawing.setCurrentLayerPosition(newPos);\n if (result) {\n canvas_.addCommandToHistory(new MoveElementCommand(result.currentGroup, result.oldNextSibling, canvas_.getSVGContent()));\n return true;\n }\n return false;\n};\n\n/**\n* Sets the visibility of the layer. If the layer name is not valid, this function return\n* `false`, otherwise it returns `true`. This is an undo-able action.\n* @function module:draw.setLayerVisibility\n* @param {string} layerName - The name of the layer to change the visibility\n* @param {boolean} bVisible - Whether the layer should be visible\n* @returns {boolean} true if the layer's visibility was set, false otherwise\n*/\nexport const setLayerVisibility = function (layerName, bVisible) {\n const drawing = canvas_.getCurrentDrawing();\n const prevVisibility = drawing.getLayerVisibility(layerName);\n const layer = drawing.setLayerVisibility(layerName, bVisible);\n if (layer) {\n const oldDisplay = prevVisibility ? 'inline' : 'none';\n canvas_.addCommandToHistory(new ChangeElementCommand(layer, {display: oldDisplay}, 'Layer Visibility'));\n } else {\n return false;\n }\n\n if (layer === drawing.getCurrentLayer()) {\n canvas_.clearSelection();\n canvas_.pathActions.clear();\n }\n // call('changed', [selected]);\n return true;\n};\n\n/**\n* Moves the selected elements to layerName. If the name is not a valid layer name, then `false`\n* is returned. Otherwise it returns `true`. This is an undo-able action.\n* @function module:draw.moveSelectedToLayer\n* @param {string} layerName - The name of the layer you want to which you want to move the selected elements\n* @returns {boolean} Whether the selected elements were moved to the layer.\n*/\nexport const moveSelectedToLayer = function (layerName) {\n // find the layer\n const drawing = canvas_.getCurrentDrawing();\n const layer = drawing.getLayerByName(layerName);\n if (!layer) { return false; }\n\n const batchCmd = new BatchCommand('Move Elements to Layer');\n\n // loop for each selected element and move it\n const selElems = canvas_.getSelectedElements();\n let i = selElems.length;\n while (i--) {\n const elem = selElems[i];\n if (!elem) { continue; }\n const oldNextSibling = elem.nextSibling;\n // TODO: this is pretty brittle!\n const oldLayer = elem.parentNode;\n layer.append(elem);\n batchCmd.addSubCommand(new MoveElementCommand(elem, oldNextSibling, oldLayer));\n }\n\n canvas_.addCommandToHistory(batchCmd);\n\n return true;\n};\n\n/**\n* @function module:draw.mergeLayer\n* @param {module:history.HistoryRecordingService} hrService\n* @returns {void}\n*/\nexport const mergeLayer = function (hrService) {\n canvas_.getCurrentDrawing().mergeLayer(historyRecordingService(hrService));\n canvas_.clearSelection();\n leaveContext();\n canvas_.changeSVGContent();\n};\n\n/**\n* @function module:draw.mergeAllLayers\n* @param {module:history.HistoryRecordingService} hrService\n* @returns {void}\n*/\nexport const mergeAllLayers = function (hrService) {\n canvas_.getCurrentDrawing().mergeAllLayers(historyRecordingService(hrService));\n canvas_.clearSelection();\n leaveContext();\n canvas_.changeSVGContent();\n};\n\n/**\n* Return from a group context to the regular kind, make any previously\n* disabled elements enabled again.\n* @function module:draw.leaveContext\n* @fires module:svgcanvas.SvgCanvas#event:contextset\n* @returns {void}\n*/\nexport const leaveContext = function () {\n const len = disabledElems.length;\n if (len) {\n for (let i = 0; i < len; i++) {\n const elem = disabledElems[i];\n const orig = canvas_.elData(elem, 'orig_opac');\n if (orig !== 1) {\n elem.setAttribute('opacity', orig);\n } else {\n elem.removeAttribute('opacity');\n }\n elem.setAttribute('style', 'pointer-events: inherit');\n }\n disabledElems = [];\n canvas_.clearSelection(true);\n canvas_.call('contextset', null);\n }\n canvas_.setCurrentGroup(null);\n};\n\n/**\n* Set the current context (for in-group editing).\n* @function module:draw.setContext\n* @param {Element} elem\n* @fires module:svgcanvas.SvgCanvas#event:contextset\n* @returns {void}\n*/\nexport const setContext = function (elem) {\n leaveContext();\n if (typeof elem === 'string') {\n elem = getElem(elem);\n }\n\n // Edit inside this group\n canvas_.setCurrentGroup(elem);\n\n // Disable other elements\n $(elem).parentsUntil('#svgcontent').andSelf().siblings().each(function () {\n const opac = this.getAttribute('opacity') || 1;\n // Store the original's opacity\n canvas_.elData(this, 'orig_opac', opac);\n this.setAttribute('opacity', opac * 0.33);\n this.setAttribute('style', 'pointer-events: none');\n disabledElems.push(this);\n });\n\n canvas_.clearSelection();\n canvas_.call('contextset', canvas_.getCurrentGroup());\n};\n\n/**\n* @memberof module:draw\n* @class Layer\n* @see {@link module:layer.Layer}\n*/\nexport {Layer};\n","/**\n * Tools for SVG sanitization.\n * @module sanitize\n * @license MIT\n *\n * @copyright 2010 Alexis Deveria, 2010 Jeff Schiller\n */\n\nimport {getReverseNS, NS} from './namespaces.js';\nimport {isGecko} from './browser.js';\nimport {getHref, setHref, getUrlFromAttr} from './utilities.js';\n\nconst REVERSE_NS = getReverseNS();\n\n// Todo: Split out into core attributes, presentation attributes, etc. so consistent\n/**\n * This defines which elements and attributes that we support (or at least\n * don't remove).\n * @type {PlainObject}\n */\nconst svgWhiteList_ = {\n // SVG Elements\n a: ['class', 'clip-path', 'clip-rule', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'id', 'mask', 'opacity', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'style', 'systemLanguage', 'transform', 'xlink:href', 'xlink:title'],\n circle: ['class', 'clip-path', 'clip-rule', 'cx', 'cy', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'id', 'mask', 'opacity', 'r', 'requiredFeatures', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'style', 'systemLanguage', 'transform'],\n clipPath: ['class', 'clipPathUnits', 'id'],\n defs: [],\n style: ['type'],\n desc: [],\n ellipse: ['class', 'clip-path', 'clip-rule', 'cx', 'cy', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'id', 'mask', 'opacity', 'requiredFeatures', 'rx', 'ry', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'style', 'systemLanguage', 'transform'],\n feGaussianBlur: ['class', 'color-interpolation-filters', 'id', 'requiredFeatures', 'stdDeviation'],\n feMorphology: ['class', 'in', 'operator', 'radius'],\n filter: ['class', 'color-interpolation-filters', 'filterRes', 'filterUnits', 'height', 'id', 'primitiveUnits', 'requiredFeatures', 'width', 'x', 'xlink:href', 'y'],\n foreignObject: ['class', 'font-size', 'height', 'id', 'opacity', 'requiredFeatures', 'style', 'transform', 'width', 'x', 'y'],\n g: ['class', 'clip-path', 'clip-rule', 'id', 'display', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'mask', 'opacity', 'requiredFeatures', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'style', 'systemLanguage', 'transform', 'font-family', 'font-size', 'font-style', 'font-weight', 'text-anchor'],\n image: ['class', 'clip-path', 'clip-rule', 'filter', 'height', 'id', 'mask', 'opacity', 'requiredFeatures', 'style', 'systemLanguage', 'transform', 'width', 'x', 'xlink:href', 'xlink:title', 'y'],\n line: ['class', 'clip-path', 'clip-rule', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'id', 'marker-end', 'marker-mid', 'marker-start', 'mask', 'opacity', 'requiredFeatures', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'style', 'systemLanguage', 'transform', 'x1', 'x2', 'y1', 'y2'],\n linearGradient: ['class', 'id', 'gradientTransform', 'gradientUnits', 'requiredFeatures', 'spreadMethod', 'systemLanguage', 'x1', 'x2', 'xlink:href', 'y1', 'y2'],\n marker: ['id', 'class', 'markerHeight', 'markerUnits', 'markerWidth', 'orient', 'preserveAspectRatio', 'refX', 'refY', 'systemLanguage', 'viewBox'],\n mask: ['class', 'height', 'id', 'maskContentUnits', 'maskUnits', 'width', 'x', 'y'],\n metadata: ['class', 'id'],\n path: ['class', 'clip-path', 'clip-rule', 'd', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'id', 'marker-end', 'marker-mid', 'marker-start', 'mask', 'opacity', 'requiredFeatures', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'style', 'systemLanguage', 'transform'],\n pattern: ['class', 'height', 'id', 'patternContentUnits', 'patternTransform', 'patternUnits', 'requiredFeatures', 'style', 'systemLanguage', 'viewBox', 'width', 'x', 'xlink:href', 'y'],\n polygon: ['class', 'clip-path', 'clip-rule', 'id', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'id', 'class', 'marker-end', 'marker-mid', 'marker-start', 'mask', 'opacity', 'points', 'requiredFeatures', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'style', 'systemLanguage', 'transform'],\n polyline: ['class', 'clip-path', 'clip-rule', 'id', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'marker-end', 'marker-mid', 'marker-start', 'mask', 'opacity', 'points', 'requiredFeatures', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'style', 'systemLanguage', 'transform'],\n radialGradient: ['class', 'cx', 'cy', 'fx', 'fy', 'gradientTransform', 'gradientUnits', 'id', 'r', 'requiredFeatures', 'spreadMethod', 'systemLanguage', 'xlink:href'],\n rect: ['class', 'clip-path', 'clip-rule', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'height', 'id', 'mask', 'opacity', 'requiredFeatures', 'rx', 'ry', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'style', 'systemLanguage', 'transform', 'width', 'x', 'y'],\n stop: ['class', 'id', 'offset', 'requiredFeatures', 'stop-color', 'stop-opacity', 'style', 'systemLanguage'],\n svg: ['class', 'clip-path', 'clip-rule', 'filter', 'id', 'height', 'mask', 'preserveAspectRatio', 'requiredFeatures', 'style', 'systemLanguage', 'viewBox', 'width', 'x', 'xmlns', 'xmlns:se', 'xmlns:xlink', 'y'],\n switch: ['class', 'id', 'requiredFeatures', 'systemLanguage'],\n symbol: ['class', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'font-family', 'font-size', 'font-style', 'font-weight', 'id', 'opacity', 'preserveAspectRatio', 'requiredFeatures', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'style', 'systemLanguage', 'transform', 'viewBox'],\n text: ['class', 'clip-path', 'clip-rule', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'font-family', 'font-size', 'font-style', 'font-weight', 'id', 'mask', 'opacity', 'requiredFeatures', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'style', 'systemLanguage', 'text-anchor', 'transform', 'x', 'xml:space', 'y'],\n textPath: ['class', 'id', 'method', 'requiredFeatures', 'spacing', 'startOffset', 'style', 'systemLanguage', 'transform', 'xlink:href'],\n title: [],\n tspan: ['class', 'clip-path', 'clip-rule', 'dx', 'dy', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'font-family', 'font-size', 'font-style', 'font-weight', 'id', 'mask', 'opacity', 'requiredFeatures', 'rotate', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'style', 'systemLanguage', 'text-anchor', 'textLength', 'transform', 'x', 'xml:space', 'y'],\n use: ['class', 'clip-path', 'clip-rule', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'height', 'id', 'mask', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'style', 'transform', 'width', 'x', 'xlink:href', 'y'],\n\n // MathML Elements\n annotation: ['encoding'],\n 'annotation-xml': ['encoding'],\n maction: ['actiontype', 'other', 'selection'],\n math: ['class', 'id', 'display', 'xmlns'],\n menclose: ['notation'],\n merror: [],\n mfrac: ['linethickness'],\n mi: ['mathvariant'],\n mmultiscripts: [],\n mn: [],\n mo: ['fence', 'lspace', 'maxsize', 'minsize', 'rspace', 'stretchy'],\n mover: [],\n mpadded: ['lspace', 'width', 'height', 'depth', 'voffset'],\n mphantom: [],\n mprescripts: [],\n mroot: [],\n mrow: ['xlink:href', 'xlink:type', 'xmlns:xlink'],\n mspace: ['depth', 'height', 'width'],\n msqrt: [],\n mstyle: ['displaystyle', 'mathbackground', 'mathcolor', 'mathvariant', 'scriptlevel'],\n msub: [],\n msubsup: [],\n msup: [],\n mtable: ['align', 'columnalign', 'columnlines', 'columnspacing', 'displaystyle', 'equalcolumns', 'equalrows', 'frame', 'rowalign', 'rowlines', 'rowspacing', 'width'],\n mtd: ['columnalign', 'columnspan', 'rowalign', 'rowspan'],\n mtext: [],\n mtr: ['columnalign', 'rowalign'],\n munder: [],\n munderover: [],\n none: [],\n semantics: []\n};\n\n// Produce a Namespace-aware version of svgWhitelist\nconst svgWhiteListNS_ = {};\nObject.entries(svgWhiteList_).forEach(function ([elt, atts]) {\n const attNS = {};\n Object.entries(atts).forEach(function ([i, att]) {\n if (att.includes(':')) {\n const v = att.split(':');\n attNS[v[1]] = NS[(v[0]).toUpperCase()];\n } else {\n attNS[att] = att === 'xmlns' ? NS.XMLNS : null;\n }\n });\n svgWhiteListNS_[elt] = attNS;\n});\n\n/**\n* Sanitizes the input node and its children.\n* It only keeps what is allowed from our whitelist defined above.\n* @function module:sanitize.sanitizeSvg\n* @param {Text|Element} node - The DOM element to be checked (we'll also check its children) or text node to be cleaned up\n* @returns {void}\n*/\nexport const sanitizeSvg = function (node) {\n // Cleanup text nodes\n if (node.nodeType === 3) { // 3 === TEXT_NODE\n // Trim whitespace\n node.nodeValue = node.nodeValue.replace(/^\\s+|\\s+$/g, '');\n // Remove if empty\n if (!node.nodeValue.length) {\n node.remove();\n }\n }\n\n // We only care about element nodes.\n // Automatically return for all non-element nodes, such as comments, etc.\n if (node.nodeType !== 1) { // 1 == ELEMENT_NODE\n return;\n }\n\n const doc = node.ownerDocument;\n const parent = node.parentNode;\n // can parent ever be null here? I think the root node's parent is the document...\n if (!doc || !parent) {\n return;\n }\n\n const allowedAttrs = svgWhiteList_[node.nodeName];\n const allowedAttrsNS = svgWhiteListNS_[node.nodeName];\n // if this element is supported, sanitize it\n if (typeof allowedAttrs !== 'undefined') {\n const seAttrs = [];\n let i = node.attributes.length;\n while (i--) {\n // if the attribute is not in our whitelist, then remove it\n // could use jQuery's inArray(), but I don't know if that's any better\n const attr = node.attributes.item(i);\n const attrName = attr.nodeName;\n const attrLocalName = attr.localName;\n const attrNsURI = attr.namespaceURI;\n // Check that an attribute with the correct localName in the correct namespace is on\n // our whitelist or is a namespace declaration for one of our allowed namespaces\n if (!({}.hasOwnProperty.call(allowedAttrsNS, attrLocalName) && attrNsURI === allowedAttrsNS[attrLocalName] && attrNsURI !== NS.XMLNS) &&\n !(attrNsURI === NS.XMLNS && REVERSE_NS[attr.value])) {\n // TODO(codedread): Programmatically add the se: attributes to the NS-aware whitelist.\n // Bypassing the whitelist to allow se: prefixes.\n // Is there a more appropriate way to do this?\n if (attrName.startsWith('se:') || attrName.startsWith('data-')) {\n seAttrs.push([attrName, attr.value]);\n }\n node.removeAttributeNS(attrNsURI, attrLocalName);\n }\n\n // Add spaces before negative signs where necessary\n if (isGecko()) {\n switch (attrName) {\n case 'transform':\n case 'gradientTransform':\n case 'patternTransform': {\n const val = attr.value.replace(/(\\d)-/g, '$1 -');\n // const val = attr.value.replace(/(?<digit>\\d)-/g, '$<digit> -');\n node.setAttribute(attrName, val);\n break;\n }\n }\n }\n\n // For the style attribute, rewrite it in terms of XML presentational attributes\n if (attrName === 'style') {\n const props = attr.value.split(';');\n let p = props.length;\n while (p--) {\n const [name, val] = props[p].split(':');\n const styleAttrName = (name || '').trim();\n const styleAttrVal = (val || '').trim();\n // Now check that this attribute is supported\n if (allowedAttrs.includes(styleAttrName)) {\n node.setAttribute(styleAttrName, styleAttrVal);\n }\n }\n node.removeAttribute('style');\n }\n }\n\n Object.values(seAttrs).forEach(([att, val]) => {\n node.setAttributeNS(NS.SE, att, val);\n });\n\n // for some elements that have a xlink:href, ensure the URI refers to a local element\n // (but not for links)\n const href = getHref(node);\n if (href &&\n ['filter', 'linearGradient', 'pattern',\n 'radialGradient', 'textPath', 'use'].includes(node.nodeName)) {\n // TODO: we simply check if the first character is a #, is this bullet-proof?\n if (href[0] !== '#') {\n // remove the attribute (but keep the element)\n setHref(node, '');\n node.removeAttributeNS(NS.XLINK, 'href');\n }\n }\n\n // Safari crashes on a <use> without a xlink:href, so we just remove the node here\n if (node.nodeName === 'use' && !getHref(node)) {\n node.remove();\n return;\n }\n // if the element has attributes pointing to a non-local reference,\n // need to remove the attribute\n Object.values(['clip-path', 'fill', 'filter', 'marker-end', 'marker-mid', 'marker-start', 'mask', 'stroke'], function (attr) {\n let val = node.getAttribute(attr);\n if (val) {\n val = getUrlFromAttr(val);\n // simply check for first character being a '#'\n if (val && val[0] !== '#') {\n node.setAttribute(attr, '');\n node.removeAttribute(attr);\n }\n }\n });\n\n // recurse to children\n i = node.childNodes.length;\n while (i--) { sanitizeSvg(node.childNodes.item(i)); }\n // else (element not supported), remove it\n } else {\n // remove all children from this node and insert them before this node\n // TODO: in the case of animation elements this will hardly ever be correct\n const children = [];\n while (node.hasChildNodes()) {\n children.push(parent.insertBefore(node.firstChild, node));\n }\n\n // remove this node from the document altogether\n node.remove();\n\n // call sanitizeSvg on each of those children\n let i = children.length;\n while (i--) { sanitizeSvg(children[i]); }\n }\n};\n","/* globals jQuery */\n/**\n * Recalculate.\n * @module recalculate\n * @license MIT\n */\n\nimport jQueryPluginSVG from './jQuery.attr.js'; // Needed for SVG attribute setting and array form with `attr`\nimport {NS} from './namespaces.js';\nimport {convertToNum} from './units.js';\nimport {isWebkit} from './browser.js';\nimport {getTransformList} from './svgtransformlist.js';\nimport {getRotationAngle, getHref, getBBox, getRefElem, isNullish} from './utilities.js';\nimport {BatchCommand, ChangeElementCommand} from './history.js';\nimport {remapElement} from './coords.js';\nimport {\n isIdentity, matrixMultiply, transformPoint, transformListToTransform,\n hasMatrixTransform\n} from './math.js';\n\nconst $ = jQueryPluginSVG(jQuery);\n\nlet context_;\n\n/**\n* @interface module:recalculate.EditorContext\n*/\n/**\n * @function module:recalculate.EditorContext#getSVGRoot\n * @returns {SVGSVGElement} The root DOM element\n */\n/**\n * @function module:recalculate.EditorContext#getStartTransform\n * @returns {string}\n*/\n/**\n * @function module:recalculate.EditorContext#setStartTransform\n * @param {string} transform\n * @returns {void}\n */\n\n/**\n* @function module:recalculate.init\n* @param {module:recalculate.EditorContext} editorContext\n* @returns {void}\n*/\nexport const init = function (editorContext) {\n context_ = editorContext;\n};\n\n/**\n* Updates a `<clipPath>`s values based on the given translation of an element.\n* @function module:recalculate.updateClipPath\n* @param {string} attr - The clip-path attribute value with the clipPath's ID\n* @param {Float} tx - The translation's x value\n* @param {Float} ty - The translation's y value\n* @returns {void}\n*/\nexport const updateClipPath = function (attr, tx, ty) {\n const path = getRefElem(attr).firstChild;\n const cpXform = getTransformList(path);\n const newxlate = context_.getSVGRoot().createSVGTransform();\n newxlate.setTranslate(tx, ty);\n\n cpXform.appendItem(newxlate);\n\n // Update clipPath's dimensions\n recalculateDimensions(path);\n};\n\n/**\n* Decides the course of action based on the element's transform list.\n* @function module:recalculate.recalculateDimensions\n* @param {Element} selected - The DOM element to recalculate\n* @returns {Command} Undo command object with the resulting change\n*/\nexport const recalculateDimensions = function (selected) {\n if (isNullish(selected)) { return null; }\n\n // Firefox Issue - 1081\n if (selected.nodeName === 'svg' && navigator.userAgent.includes('Firefox/20')) {\n return null;\n }\n\n const svgroot = context_.getSVGRoot();\n const tlist = getTransformList(selected);\n\n // remove any unnecessary transforms\n if (tlist && tlist.numberOfItems > 0) {\n let k = tlist.numberOfItems;\n const noi = k;\n while (k--) {\n const xform = tlist.getItem(k);\n if (xform.type === 0) {\n tlist.removeItem(k);\n // remove identity matrices\n } else if (xform.type === 1) {\n if (isIdentity(xform.matrix)) {\n if (noi === 1) {\n // Overcome Chrome bug (though only when noi is 1) with\n // `removeItem` preventing `removeAttribute` from\n // subsequently working\n // See https://bugs.chromium.org/p/chromium/issues/detail?id=843901\n selected.removeAttribute('transform');\n return null;\n }\n tlist.removeItem(k);\n }\n // remove zero-degree rotations\n } else if (xform.type === 4) {\n if (xform.angle === 0) {\n tlist.removeItem(k);\n }\n }\n }\n // End here if all it has is a rotation\n if (tlist.numberOfItems === 1 &&\n getRotationAngle(selected)) { return null; }\n }\n\n // if this element had no transforms, we are done\n if (!tlist || tlist.numberOfItems === 0) {\n // Chrome apparently had a bug that requires clearing the attribute first.\n selected.setAttribute('transform', '');\n // However, this still next line currently doesn't work at all in Chrome\n selected.removeAttribute('transform');\n // selected.transform.baseVal.clear(); // Didn't help for Chrome bug\n return null;\n }\n\n // TODO: Make this work for more than 2\n if (tlist) {\n let mxs = [];\n let k = tlist.numberOfItems;\n while (k--) {\n const xform = tlist.getItem(k);\n if (xform.type === 1) {\n mxs.push([xform.matrix, k]);\n } else if (mxs.length) {\n mxs = [];\n }\n }\n if (mxs.length === 2) {\n const mNew = svgroot.createSVGTransformFromMatrix(matrixMultiply(mxs[1][0], mxs[0][0]));\n tlist.removeItem(mxs[0][1]);\n tlist.removeItem(mxs[1][1]);\n tlist.insertItemBefore(mNew, mxs[1][1]);\n }\n\n // combine matrix + translate\n k = tlist.numberOfItems;\n if (k >= 2 && tlist.getItem(k - 2).type === 1 && tlist.getItem(k - 1).type === 2) {\n const mt = svgroot.createSVGTransform();\n\n const m = matrixMultiply(\n tlist.getItem(k - 2).matrix,\n tlist.getItem(k - 1).matrix\n );\n mt.setMatrix(m);\n tlist.removeItem(k - 2);\n tlist.removeItem(k - 2);\n tlist.appendItem(mt);\n }\n }\n\n // If it still has a single [M] or [R][M], return null too (prevents BatchCommand from being returned).\n switch (selected.tagName) {\n // Ignore these elements, as they can absorb the [M]\n case 'line':\n case 'polyline':\n case 'polygon':\n case 'path':\n break;\n default:\n if ((tlist.numberOfItems === 1 && tlist.getItem(0).type === 1) ||\n (tlist.numberOfItems === 2 && tlist.getItem(0).type === 1 && tlist.getItem(0).type === 4)) {\n return null;\n }\n }\n\n // Grouped SVG element\n const gsvg = $(selected).data('gsvg');\n\n // we know we have some transforms, so set up return variable\n const batchCmd = new BatchCommand('Transform');\n\n // store initial values that will be affected by reducing the transform list\n let changes = {};\n let initial = null;\n let attrs = [];\n switch (selected.tagName) {\n case 'line':\n attrs = ['x1', 'y1', 'x2', 'y2'];\n break;\n case 'circle':\n attrs = ['cx', 'cy', 'r'];\n break;\n case 'ellipse':\n attrs = ['cx', 'cy', 'rx', 'ry'];\n break;\n case 'foreignObject':\n case 'rect':\n case 'image':\n attrs = ['width', 'height', 'x', 'y'];\n break;\n case 'use':\n case 'text':\n case 'tspan':\n attrs = ['x', 'y'];\n break;\n case 'polygon':\n case 'polyline': {\n initial = {};\n initial.points = selected.getAttribute('points');\n const list = selected.points;\n const len = list.numberOfItems;\n changes.points = new Array(len);\n for (let i = 0; i < len; ++i) {\n const pt = list.getItem(i);\n changes.points[i] = {x: pt.x, y: pt.y};\n }\n break;\n } case 'path':\n initial = {};\n initial.d = selected.getAttribute('d');\n changes.d = selected.getAttribute('d');\n break;\n } // switch on element type to get initial values\n\n if (attrs.length) {\n changes = $(selected).attr(attrs);\n $.each(changes, function (attr, val) {\n changes[attr] = convertToNum(attr, val);\n });\n } else if (gsvg) {\n // GSVG exception\n changes = {\n x: $(gsvg).attr('x') || 0,\n y: $(gsvg).attr('y') || 0\n };\n }\n\n // if we haven't created an initial array in polygon/polyline/path, then\n // make a copy of initial values and include the transform\n if (isNullish(initial)) {\n initial = $.extend(true, {}, changes);\n $.each(initial, function (attr, val) {\n initial[attr] = convertToNum(attr, val);\n });\n }\n // save the start transform value too\n initial.transform = context_.getStartTransform() || '';\n\n let oldcenter, newcenter;\n\n // if it's a regular group, we have special processing to flatten transforms\n if ((selected.tagName === 'g' && !gsvg) || selected.tagName === 'a') {\n const box = getBBox(selected);\n\n oldcenter = {x: box.x + box.width / 2, y: box.y + box.height / 2};\n newcenter = transformPoint(\n box.x + box.width / 2,\n box.y + box.height / 2,\n transformListToTransform(tlist).matrix\n );\n // let m = svgroot.createSVGMatrix();\n\n // temporarily strip off the rotate and save the old center\n const gangle = getRotationAngle(selected);\n if (gangle) {\n const a = gangle * Math.PI / 180;\n let s;\n if (Math.abs(a) > (1.0e-10)) {\n s = Math.sin(a) / (1 - Math.cos(a));\n } else {\n // TODO: This blows up if the angle is exactly 0!\n s = 2 / a;\n }\n for (let i = 0; i < tlist.numberOfItems; ++i) {\n const xform = tlist.getItem(i);\n if (xform.type === 4) {\n // extract old center through mystical arts\n const rm = xform.matrix;\n oldcenter.y = (s * rm.e + rm.f) / 2;\n oldcenter.x = (rm.e - s * rm.f) / 2;\n tlist.removeItem(i);\n break;\n }\n }\n }\n const N = tlist.numberOfItems;\n let tx = 0, ty = 0, operation = 0;\n\n let firstM;\n if (N) {\n firstM = tlist.getItem(0).matrix;\n }\n\n let oldStartTransform;\n // first, if it was a scale then the second-last transform will be it\n if (N >= 3 && tlist.getItem(N - 2).type === 3 &&\n tlist.getItem(N - 3).type === 2 && tlist.getItem(N - 1).type === 2) {\n operation = 3; // scale\n\n // if the children are unrotated, pass the scale down directly\n // otherwise pass the equivalent matrix() down directly\n const tm = tlist.getItem(N - 3).matrix,\n sm = tlist.getItem(N - 2).matrix,\n tmn = tlist.getItem(N - 1).matrix;\n\n const children = selected.childNodes;\n let c = children.length;\n while (c--) {\n const child = children.item(c);\n tx = 0;\n ty = 0;\n if (child.nodeType === 1) {\n const childTlist = getTransformList(child);\n\n // some children might not have a transform (<metadata>, <defs>, etc)\n if (!childTlist) { continue; }\n\n const m = transformListToTransform(childTlist).matrix;\n\n // Convert a matrix to a scale if applicable\n // if (hasMatrixTransform(childTlist) && childTlist.numberOfItems == 1) {\n // if (m.b==0 && m.c==0 && m.e==0 && m.f==0) {\n // childTlist.removeItem(0);\n // const translateOrigin = svgroot.createSVGTransform(),\n // scale = svgroot.createSVGTransform(),\n // translateBack = svgroot.createSVGTransform();\n // translateOrigin.setTranslate(0, 0);\n // scale.setScale(m.a, m.d);\n // translateBack.setTranslate(0, 0);\n // childTlist.appendItem(translateBack);\n // childTlist.appendItem(scale);\n // childTlist.appendItem(translateOrigin);\n // }\n // }\n\n const angle = getRotationAngle(child);\n oldStartTransform = context_.getStartTransform();\n // const childxforms = [];\n context_.setStartTransform(child.getAttribute('transform'));\n if (angle || hasMatrixTransform(childTlist)) {\n const e2t = svgroot.createSVGTransform();\n e2t.setMatrix(matrixMultiply(tm, sm, tmn, m));\n childTlist.clear();\n childTlist.appendItem(e2t);\n // childxforms.push(e2t);\n // if not rotated or skewed, push the [T][S][-T] down to the child\n } else {\n // update the transform list with translate,scale,translate\n\n // slide the [T][S][-T] from the front to the back\n // [T][S][-T][M] = [M][T2][S2][-T2]\n\n // (only bringing [-T] to the right of [M])\n // [T][S][-T][M] = [T][S][M][-T2]\n // [-T2] = [M_inv][-T][M]\n const t2n = matrixMultiply(m.inverse(), tmn, m);\n // [T2] is always negative translation of [-T2]\n const t2 = svgroot.createSVGMatrix();\n t2.e = -t2n.e;\n t2.f = -t2n.f;\n\n // [T][S][-T][M] = [M][T2][S2][-T2]\n // [S2] = [T2_inv][M_inv][T][S][-T][M][-T2_inv]\n const s2 = matrixMultiply(t2.inverse(), m.inverse(), tm, sm, tmn, m, t2n.inverse());\n\n const translateOrigin = svgroot.createSVGTransform(),\n scale = svgroot.createSVGTransform(),\n translateBack = svgroot.createSVGTransform();\n translateOrigin.setTranslate(t2n.e, t2n.f);\n scale.setScale(s2.a, s2.d);\n translateBack.setTranslate(t2.e, t2.f);\n childTlist.appendItem(translateBack);\n childTlist.appendItem(scale);\n childTlist.appendItem(translateOrigin);\n // childxforms.push(translateBack);\n // childxforms.push(scale);\n // childxforms.push(translateOrigin);\n // logMatrix(translateBack.matrix);\n // logMatrix(scale.matrix);\n } // not rotated\n batchCmd.addSubCommand(recalculateDimensions(child));\n // TODO: If any <use> have this group as a parent and are\n // referencing this child, then we need to impose a reverse\n // scale on it so that when it won't get double-translated\n // const uses = selected.getElementsByTagNameNS(NS.SVG, 'use');\n // const href = '#' + child.id;\n // let u = uses.length;\n // while (u--) {\n // const useElem = uses.item(u);\n // if (href == getHref(useElem)) {\n // const usexlate = svgroot.createSVGTransform();\n // usexlate.setTranslate(-tx,-ty);\n // getTransformList(useElem).insertItemBefore(usexlate,0);\n // batchCmd.addSubCommand( recalculateDimensions(useElem) );\n // }\n // }\n context_.setStartTransform(oldStartTransform);\n } // element\n } // for each child\n // Remove these transforms from group\n tlist.removeItem(N - 1);\n tlist.removeItem(N - 2);\n tlist.removeItem(N - 3);\n } else if (N >= 3 && tlist.getItem(N - 1).type === 1) {\n operation = 3; // scale\n const m = transformListToTransform(tlist).matrix;\n const e2t = svgroot.createSVGTransform();\n e2t.setMatrix(m);\n tlist.clear();\n tlist.appendItem(e2t);\n // next, check if the first transform was a translate\n // if we had [ T1 ] [ M ] we want to transform this into [ M ] [ T2 ]\n // therefore [ T2 ] = [ M_inv ] [ T1 ] [ M ]\n } else if ((N === 1 || (N > 1 && tlist.getItem(1).type !== 3)) &&\n tlist.getItem(0).type === 2) {\n operation = 2; // translate\n const T_M = transformListToTransform(tlist).matrix;\n tlist.removeItem(0);\n const mInv = transformListToTransform(tlist).matrix.inverse();\n const M2 = matrixMultiply(mInv, T_M);\n\n tx = M2.e;\n ty = M2.f;\n\n if (tx !== 0 || ty !== 0) {\n // we pass the translates down to the individual children\n const children = selected.childNodes;\n let c = children.length;\n\n const clipPathsDone = [];\n while (c--) {\n const child = children.item(c);\n if (child.nodeType === 1) {\n // Check if child has clip-path\n if (child.getAttribute('clip-path')) {\n // tx, ty\n const attr = child.getAttribute('clip-path');\n if (!clipPathsDone.includes(attr)) {\n updateClipPath(attr, tx, ty);\n clipPathsDone.push(attr);\n }\n }\n\n oldStartTransform = context_.getStartTransform();\n context_.setStartTransform(child.getAttribute('transform'));\n\n const childTlist = getTransformList(child);\n // some children might not have a transform (<metadata>, <defs>, etc)\n if (childTlist) {\n const newxlate = svgroot.createSVGTransform();\n newxlate.setTranslate(tx, ty);\n if (childTlist.numberOfItems) {\n childTlist.insertItemBefore(newxlate, 0);\n } else {\n childTlist.appendItem(newxlate);\n }\n batchCmd.addSubCommand(recalculateDimensions(child));\n // If any <use> have this group as a parent and are\n // referencing this child, then impose a reverse translate on it\n // so that when it won't get double-translated\n const uses = selected.getElementsByTagNameNS(NS.SVG, 'use');\n const href = '#' + child.id;\n let u = uses.length;\n while (u--) {\n const useElem = uses.item(u);\n if (href === getHref(useElem)) {\n const usexlate = svgroot.createSVGTransform();\n usexlate.setTranslate(-tx, -ty);\n getTransformList(useElem).insertItemBefore(usexlate, 0);\n batchCmd.addSubCommand(recalculateDimensions(useElem));\n }\n }\n context_.setStartTransform(oldStartTransform);\n }\n }\n }\n context_.setStartTransform(oldStartTransform);\n }\n // else, a matrix imposition from a parent group\n // keep pushing it down to the children\n } else if (N === 1 && tlist.getItem(0).type === 1 && !gangle) {\n operation = 1;\n const m = tlist.getItem(0).matrix,\n children = selected.childNodes;\n let c = children.length;\n while (c--) {\n const child = children.item(c);\n if (child.nodeType === 1) {\n oldStartTransform = context_.getStartTransform();\n context_.setStartTransform(child.getAttribute('transform'));\n const childTlist = getTransformList(child);\n\n if (!childTlist) { continue; }\n\n const em = matrixMultiply(m, transformListToTransform(childTlist).matrix);\n const e2m = svgroot.createSVGTransform();\n e2m.setMatrix(em);\n childTlist.clear();\n childTlist.appendItem(e2m, 0);\n\n batchCmd.addSubCommand(recalculateDimensions(child));\n context_.setStartTransform(oldStartTransform);\n\n // Convert stroke\n // TODO: Find out if this should actually happen somewhere else\n const sw = child.getAttribute('stroke-width');\n if (child.getAttribute('stroke') !== 'none' && !isNaN(sw)) {\n const avg = (Math.abs(em.a) + Math.abs(em.d)) / 2;\n child.setAttribute('stroke-width', sw * avg);\n }\n }\n }\n tlist.clear();\n // else it was just a rotate\n } else {\n if (gangle) {\n const newRot = svgroot.createSVGTransform();\n newRot.setRotate(gangle, newcenter.x, newcenter.y);\n if (tlist.numberOfItems) {\n tlist.insertItemBefore(newRot, 0);\n } else {\n tlist.appendItem(newRot);\n }\n }\n if (tlist.numberOfItems === 0) {\n selected.removeAttribute('transform');\n }\n return null;\n }\n\n // if it was a translate, put back the rotate at the new center\n if (operation === 2) {\n if (gangle) {\n newcenter = {\n x: oldcenter.x + firstM.e,\n y: oldcenter.y + firstM.f\n };\n\n const newRot = svgroot.createSVGTransform();\n newRot.setRotate(gangle, newcenter.x, newcenter.y);\n if (tlist.numberOfItems) {\n tlist.insertItemBefore(newRot, 0);\n } else {\n tlist.appendItem(newRot);\n }\n }\n // if it was a resize\n } else if (operation === 3) {\n const m = transformListToTransform(tlist).matrix;\n const roldt = svgroot.createSVGTransform();\n roldt.setRotate(gangle, oldcenter.x, oldcenter.y);\n const rold = roldt.matrix;\n const rnew = svgroot.createSVGTransform();\n rnew.setRotate(gangle, newcenter.x, newcenter.y);\n const rnewInv = rnew.matrix.inverse(),\n mInv = m.inverse(),\n extrat = matrixMultiply(mInv, rnewInv, rold, m);\n\n tx = extrat.e;\n ty = extrat.f;\n\n if (tx !== 0 || ty !== 0) {\n // now push this transform down to the children\n // we pass the translates down to the individual children\n const children = selected.childNodes;\n let c = children.length;\n while (c--) {\n const child = children.item(c);\n if (child.nodeType === 1) {\n oldStartTransform = context_.getStartTransform();\n context_.setStartTransform(child.getAttribute('transform'));\n const childTlist = getTransformList(child);\n const newxlate = svgroot.createSVGTransform();\n newxlate.setTranslate(tx, ty);\n if (childTlist.numberOfItems) {\n childTlist.insertItemBefore(newxlate, 0);\n } else {\n childTlist.appendItem(newxlate);\n }\n\n batchCmd.addSubCommand(recalculateDimensions(child));\n context_.setStartTransform(oldStartTransform);\n }\n }\n }\n\n if (gangle) {\n if (tlist.numberOfItems) {\n tlist.insertItemBefore(rnew, 0);\n } else {\n tlist.appendItem(rnew);\n }\n }\n }\n // else, it's a non-group\n } else {\n // TODO: box might be null for some elements (<metadata> etc), need to handle this\n const box = getBBox(selected);\n\n // Paths (and possbly other shapes) will have no BBox while still in <defs>,\n // but we still may need to recalculate them (see issue 595).\n // TODO: Figure out how to get BBox from these elements in case they\n // have a rotation transform\n\n if (!box && selected.tagName !== 'path') return null;\n\n let m; // = svgroot.createSVGMatrix();\n // temporarily strip off the rotate and save the old center\n const angle = getRotationAngle(selected);\n if (angle) {\n oldcenter = {x: box.x + box.width / 2, y: box.y + box.height / 2};\n newcenter = transformPoint(\n box.x + box.width / 2,\n box.y + box.height / 2,\n transformListToTransform(tlist).matrix\n );\n\n const a = angle * Math.PI / 180;\n const s = (Math.abs(a) > (1.0e-10))\n ? Math.sin(a) / (1 - Math.cos(a))\n // TODO: This blows up if the angle is exactly 0!\n : 2 / a;\n\n for (let i = 0; i < tlist.numberOfItems; ++i) {\n const xform = tlist.getItem(i);\n if (xform.type === 4) {\n // extract old center through mystical arts\n const rm = xform.matrix;\n oldcenter.y = (s * rm.e + rm.f) / 2;\n oldcenter.x = (rm.e - s * rm.f) / 2;\n tlist.removeItem(i);\n break;\n }\n }\n }\n\n // 2 = translate, 3 = scale, 4 = rotate, 1 = matrix imposition\n let operation = 0;\n const N = tlist.numberOfItems;\n\n // Check if it has a gradient with userSpaceOnUse, in which case\n // adjust it by recalculating the matrix transform.\n // TODO: Make this work in Webkit using transformlist.SVGTransformList\n if (!isWebkit()) {\n const fill = selected.getAttribute('fill');\n if (fill && fill.startsWith('url(')) {\n const paint = getRefElem(fill);\n let type = 'pattern';\n if (paint.tagName !== type) type = 'gradient';\n const attrVal = paint.getAttribute(type + 'Units');\n if (attrVal === 'userSpaceOnUse') {\n // Update the userSpaceOnUse element\n m = transformListToTransform(tlist).matrix;\n const gtlist = getTransformList(paint);\n const gmatrix = transformListToTransform(gtlist).matrix;\n m = matrixMultiply(m, gmatrix);\n const mStr = 'matrix(' + [m.a, m.b, m.c, m.d, m.e, m.f].join(',') + ')';\n paint.setAttribute(type + 'Transform', mStr);\n }\n }\n }\n\n // first, if it was a scale of a non-skewed element, then the second-last\n // transform will be the [S]\n // if we had [M][T][S][T] we want to extract the matrix equivalent of\n // [T][S][T] and push it down to the element\n if (N >= 3 && tlist.getItem(N - 2).type === 3 &&\n tlist.getItem(N - 3).type === 2 && tlist.getItem(N - 1).type === 2) {\n // Removed this so a <use> with a given [T][S][T] would convert to a matrix.\n // Is that bad?\n // && selected.nodeName != 'use'\n operation = 3; // scale\n m = transformListToTransform(tlist, N - 3, N - 1).matrix;\n tlist.removeItem(N - 1);\n tlist.removeItem(N - 2);\n tlist.removeItem(N - 3);\n // if we had [T][S][-T][M], then this was a skewed element being resized\n // Thus, we simply combine it all into one matrix\n } else if (N === 4 && tlist.getItem(N - 1).type === 1) {\n operation = 3; // scale\n m = transformListToTransform(tlist).matrix;\n const e2t = svgroot.createSVGTransform();\n e2t.setMatrix(m);\n tlist.clear();\n tlist.appendItem(e2t);\n // reset the matrix so that the element is not re-mapped\n m = svgroot.createSVGMatrix();\n // if we had [R][T][S][-T][M], then this was a rotated matrix-element\n // if we had [T1][M] we want to transform this into [M][T2]\n // therefore [ T2 ] = [ M_inv ] [ T1 ] [ M ] and we can push [T2]\n // down to the element\n } else if ((N === 1 || (N > 1 && tlist.getItem(1).type !== 3)) &&\n tlist.getItem(0).type === 2) {\n operation = 2; // translate\n const oldxlate = tlist.getItem(0).matrix,\n meq = transformListToTransform(tlist, 1).matrix,\n meqInv = meq.inverse();\n m = matrixMultiply(meqInv, oldxlate, meq);\n tlist.removeItem(0);\n // else if this child now has a matrix imposition (from a parent group)\n // we might be able to simplify\n } else if (N === 1 && tlist.getItem(0).type === 1 && !angle) {\n // Remap all point-based elements\n m = transformListToTransform(tlist).matrix;\n switch (selected.tagName) {\n case 'line':\n changes = $(selected).attr(['x1', 'y1', 'x2', 'y2']);\n // Fallthrough\n case 'polyline':\n case 'polygon':\n changes.points = selected.getAttribute('points');\n if (changes.points) {\n const list = selected.points;\n const len = list.numberOfItems;\n changes.points = new Array(len);\n for (let i = 0; i < len; ++i) {\n const pt = list.getItem(i);\n changes.points[i] = {x: pt.x, y: pt.y};\n }\n }\n // Fallthrough\n case 'path':\n changes.d = selected.getAttribute('d');\n operation = 1;\n tlist.clear();\n break;\n default:\n break;\n }\n // if it was a rotation, put the rotate back and return without a command\n // (this function has zero work to do for a rotate())\n } else {\n // operation = 4; // rotation\n if (angle) {\n const newRot = svgroot.createSVGTransform();\n newRot.setRotate(angle, newcenter.x, newcenter.y);\n\n if (tlist.numberOfItems) {\n tlist.insertItemBefore(newRot, 0);\n } else {\n tlist.appendItem(newRot);\n }\n }\n if (tlist.numberOfItems === 0) {\n selected.removeAttribute('transform');\n }\n return null;\n }\n\n // if it was a translate or resize, we need to remap the element and absorb the xform\n if (operation === 1 || operation === 2 || operation === 3) {\n remapElement(selected, changes, m);\n } // if we are remapping\n\n // if it was a translate, put back the rotate at the new center\n if (operation === 2) {\n if (angle) {\n if (!hasMatrixTransform(tlist)) {\n newcenter = {\n x: oldcenter.x + m.e,\n y: oldcenter.y + m.f\n };\n }\n const newRot = svgroot.createSVGTransform();\n newRot.setRotate(angle, newcenter.x, newcenter.y);\n if (tlist.numberOfItems) {\n tlist.insertItemBefore(newRot, 0);\n } else {\n tlist.appendItem(newRot);\n }\n }\n // We have special processing for tspans: Tspans are not transformable\n // but they can have x,y coordinates (sigh). Thus, if this was a translate,\n // on a text element, also translate any tspan children.\n if (selected.tagName === 'text') {\n const children = selected.childNodes;\n let c = children.length;\n while (c--) {\n const child = children.item(c);\n if (child.tagName === 'tspan') {\n const tspanChanges = {\n x: $(child).attr('x') || 0,\n y: $(child).attr('y') || 0\n };\n remapElement(child, tspanChanges, m);\n }\n }\n }\n // [Rold][M][T][S][-T] became [Rold][M]\n // we want it to be [Rnew][M][Tr] where Tr is the\n // translation required to re-center it\n // Therefore, [Tr] = [M_inv][Rnew_inv][Rold][M]\n } else if (operation === 3 && angle) {\n const {matrix} = transformListToTransform(tlist);\n const roldt = svgroot.createSVGTransform();\n roldt.setRotate(angle, oldcenter.x, oldcenter.y);\n const rold = roldt.matrix;\n const rnew = svgroot.createSVGTransform();\n rnew.setRotate(angle, newcenter.x, newcenter.y);\n const rnewInv = rnew.matrix.inverse();\n const mInv = matrix.inverse();\n const extrat = matrixMultiply(mInv, rnewInv, rold, matrix);\n\n remapElement(selected, changes, extrat);\n if (angle) {\n if (tlist.numberOfItems) {\n tlist.insertItemBefore(rnew, 0);\n } else {\n tlist.appendItem(rnew);\n }\n }\n }\n } // a non-group\n\n // if the transform list has been emptied, remove it\n if (tlist.numberOfItems === 0) {\n selected.removeAttribute('transform');\n }\n\n batchCmd.addSubCommand(new ChangeElementCommand(selected, initial));\n\n return batchCmd;\n};\n","/* globals jQuery */\n/**\n * DOM element selection box tools.\n * @module select\n * @license MIT\n *\n * @copyright 2010 Alexis Deveria, 2010 Jeff Schiller\n */\n\nimport {isTouch, isWebkit} from './browser.js'; // , isOpera\nimport {getRotationAngle, getBBox, getStrokedBBox, isNullish} from './utilities.js';\nimport {transformListToTransform, transformBox, transformPoint} from './math.js';\nimport {getTransformList} from './svgtransformlist.js';\n\nconst $ = jQuery;\n\nlet svgFactory_;\nlet config_;\nlet selectorManager_; // A Singleton\nconst gripRadius = isTouch() ? 10 : 4;\n\n/**\n* Private class for DOM element selection boxes.\n*/\nexport class Selector {\n /**\n * @param {Integer} id - Internally identify the selector\n * @param {Element} elem - DOM element associated with this selector\n * @param {module:utilities.BBoxObject} [bbox] - Optional bbox to use for initialization (prevents duplicate `getBBox` call).\n */\n constructor (id, elem, bbox) {\n // this is the selector's unique number\n this.id = id;\n\n // this holds a reference to the element for which this selector is being used\n this.selectedElement = elem;\n\n // this is a flag used internally to track whether the selector is being used or not\n this.locked = true;\n\n // this holds a reference to the <g> element that holds all visual elements of the selector\n this.selectorGroup = svgFactory_.createSVGElement({\n element: 'g',\n attr: {id: ('selectorGroup' + this.id)}\n });\n\n // this holds a reference to the path rect\n this.selectorRect = this.selectorGroup.appendChild(\n svgFactory_.createSVGElement({\n element: 'path',\n attr: {\n id: ('selectedBox' + this.id),\n fill: 'none',\n stroke: '#22C',\n 'stroke-width': '1',\n 'stroke-dasharray': '5,5',\n // need to specify this so that the rect is not selectable\n style: 'pointer-events:none'\n }\n })\n );\n\n // this holds a reference to the grip coordinates for this selector\n this.gripCoords = {\n nw: null,\n n: null,\n ne: null,\n e: null,\n se: null,\n s: null,\n sw: null,\n w: null\n };\n\n this.reset(this.selectedElement, bbox);\n }\n\n /**\n * Used to reset the id and element that the selector is attached to.\n * @param {Element} e - DOM element associated with this selector\n * @param {module:utilities.BBoxObject} bbox - Optional bbox to use for reset (prevents duplicate getBBox call).\n * @returns {void}\n */\n reset (e, bbox) {\n this.locked = true;\n this.selectedElement = e;\n this.resize(bbox);\n this.selectorGroup.setAttribute('display', 'inline');\n }\n\n /**\n * Show the resize grips of this selector.\n * @param {boolean} show - Indicates whether grips should be shown or not\n * @returns {void}\n */\n showGrips (show) {\n const bShow = show ? 'inline' : 'none';\n selectorManager_.selectorGripsGroup.setAttribute('display', bShow);\n const elem = this.selectedElement;\n this.hasGrips = show;\n if (elem && show) {\n this.selectorGroup.append(selectorManager_.selectorGripsGroup);\n Selector.updateGripCursors(getRotationAngle(elem));\n }\n }\n\n /**\n * Updates the selector to match the element's size.\n * @param {module:utilities.BBoxObject} [bbox] - BBox to use for resize (prevents duplicate getBBox call).\n * @returns {void}\n */\n resize (bbox) {\n const selectedBox = this.selectorRect,\n mgr = selectorManager_,\n selectedGrips = mgr.selectorGrips,\n selected = this.selectedElement,\n sw = selected.getAttribute('stroke-width'),\n currentZoom = svgFactory_.getCurrentZoom();\n let offset = 1 / currentZoom;\n if (selected.getAttribute('stroke') !== 'none' && !isNaN(sw)) {\n offset += (sw / 2);\n }\n\n const {tagName} = selected;\n if (tagName === 'text') {\n offset += 2 / currentZoom;\n }\n\n // loop and transform our bounding box until we reach our first rotation\n const tlist = getTransformList(selected);\n const m = transformListToTransform(tlist).matrix;\n\n // This should probably be handled somewhere else, but for now\n // it keeps the selection box correctly positioned when zoomed\n m.e *= currentZoom;\n m.f *= currentZoom;\n\n if (!bbox) {\n bbox = getBBox(selected);\n }\n // TODO: getBBox (previous line) already knows to call getStrokedBBox when tagName === 'g'. Remove this?\n // TODO: getBBox doesn't exclude 'gsvg' and calls getStrokedBBox for any 'g'. Should getBBox be updated?\n if (tagName === 'g' && !$.data(selected, 'gsvg')) {\n // The bbox for a group does not include stroke vals, so we\n // get the bbox based on its children.\n const strokedBbox = getStrokedBBox([selected.childNodes]);\n if (strokedBbox) {\n bbox = strokedBbox;\n }\n }\n\n // apply the transforms\n const l = bbox.x, t = bbox.y, w = bbox.width, h = bbox.height;\n // bbox = {x: l, y: t, width: w, height: h}; // Not in use\n\n // we need to handle temporary transforms too\n // if skewed, get its transformed box, then find its axis-aligned bbox\n\n // *\n offset *= currentZoom;\n\n const nbox = transformBox(l * currentZoom, t * currentZoom, w * currentZoom, h * currentZoom, m),\n {aabox} = nbox;\n let nbax = aabox.x - offset,\n nbay = aabox.y - offset,\n nbaw = aabox.width + (offset * 2),\n nbah = aabox.height + (offset * 2);\n\n // now if the shape is rotated, un-rotate it\n const cx = nbax + nbaw / 2,\n cy = nbay + nbah / 2;\n\n const angle = getRotationAngle(selected);\n if (angle) {\n const rot = svgFactory_.svgRoot().createSVGTransform();\n rot.setRotate(-angle, cx, cy);\n const rotm = rot.matrix;\n nbox.tl = transformPoint(nbox.tl.x, nbox.tl.y, rotm);\n nbox.tr = transformPoint(nbox.tr.x, nbox.tr.y, rotm);\n nbox.bl = transformPoint(nbox.bl.x, nbox.bl.y, rotm);\n nbox.br = transformPoint(nbox.br.x, nbox.br.y, rotm);\n\n // calculate the axis-aligned bbox\n const {tl} = nbox;\n let minx = tl.x,\n miny = tl.y,\n maxx = tl.x,\n maxy = tl.y;\n\n const {min, max} = Math;\n\n minx = min(minx, min(nbox.tr.x, min(nbox.bl.x, nbox.br.x))) - offset;\n miny = min(miny, min(nbox.tr.y, min(nbox.bl.y, nbox.br.y))) - offset;\n maxx = max(maxx, max(nbox.tr.x, max(nbox.bl.x, nbox.br.x))) + offset;\n maxy = max(maxy, max(nbox.tr.y, max(nbox.bl.y, nbox.br.y))) + offset;\n\n nbax = minx;\n nbay = miny;\n nbaw = (maxx - minx);\n nbah = (maxy - miny);\n }\n\n const dstr = 'M' + nbax + ',' + nbay +\n ' L' + (nbax + nbaw) + ',' + nbay +\n ' ' + (nbax + nbaw) + ',' + (nbay + nbah) +\n ' ' + nbax + ',' + (nbay + nbah) + 'z';\n selectedBox.setAttribute('d', dstr);\n\n const xform = angle ? 'rotate(' + [angle, cx, cy].join(',') + ')' : '';\n this.selectorGroup.setAttribute('transform', xform);\n\n // TODO(codedread): Is this needed?\n // if (selected === selectedElements[0]) {\n this.gripCoords = {\n nw: [nbax, nbay],\n ne: [nbax + nbaw, nbay],\n sw: [nbax, nbay + nbah],\n se: [nbax + nbaw, nbay + nbah],\n n: [nbax + (nbaw) / 2, nbay],\n w: [nbax, nbay + (nbah) / 2],\n e: [nbax + nbaw, nbay + (nbah) / 2],\n s: [nbax + (nbaw) / 2, nbay + nbah]\n };\n Object.entries(this.gripCoords).forEach(([dir, coords]) => {\n selectedGrips[dir].setAttribute('cx', coords[0]);\n selectedGrips[dir].setAttribute('cy', coords[1]);\n });\n\n // we want to go 20 pixels in the negative transformed y direction, ignoring scale\n mgr.rotateGripConnector.setAttribute('x1', nbax + (nbaw) / 2);\n mgr.rotateGripConnector.setAttribute('y1', nbay);\n mgr.rotateGripConnector.setAttribute('x2', nbax + (nbaw) / 2);\n mgr.rotateGripConnector.setAttribute('y2', nbay - (gripRadius * 5));\n\n mgr.rotateGrip.setAttribute('cx', nbax + (nbaw) / 2);\n mgr.rotateGrip.setAttribute('cy', nbay - (gripRadius * 5));\n // }\n }\n\n // STATIC methods\n /**\n * Updates cursors for corner grips on rotation so arrows point the right way.\n * @param {Float} angle - Current rotation angle in degrees\n * @returns {void}\n */\n static updateGripCursors (angle) {\n const dirArr = Object.keys(selectorManager_.selectorGrips);\n let steps = Math.round(angle / 45);\n if (steps < 0) { steps += 8; }\n while (steps > 0) {\n dirArr.push(dirArr.shift());\n steps--;\n }\n Object.values(selectorManager_.selectorGrips).forEach((gripElement, i) => {\n gripElement.setAttribute('style', ('cursor:' + dirArr[i] + '-resize'));\n });\n }\n}\n\n/**\n* Manage all selector objects (selection boxes).\n*/\nexport class SelectorManager {\n constructor () {\n // this will hold the <g> element that contains all selector rects/grips\n this.selectorParentGroup = null;\n\n // this is a special rect that is used for multi-select\n this.rubberBandBox = null;\n\n // this will hold objects of type Selector (see above)\n this.selectors = [];\n\n // this holds a map of SVG elements to their Selector object\n this.selectorMap = {};\n\n // this holds a reference to the grip elements\n this.selectorGrips = {\n nw: null,\n n: null,\n ne: null,\n e: null,\n se: null,\n s: null,\n sw: null,\n w: null\n };\n\n this.selectorGripsGroup = null;\n this.rotateGripConnector = null;\n this.rotateGrip = null;\n\n this.initGroup();\n }\n\n /**\n * Resets the parent selector group element.\n * @returns {void}\n */\n initGroup () {\n // remove old selector parent group if it existed\n if (this.selectorParentGroup && this.selectorParentGroup.parentNode) {\n this.selectorParentGroup.remove();\n }\n\n // create parent selector group and add it to svgroot\n this.selectorParentGroup = svgFactory_.createSVGElement({\n element: 'g',\n attr: {id: 'selectorParentGroup'}\n });\n this.selectorGripsGroup = svgFactory_.createSVGElement({\n element: 'g',\n attr: {display: 'none'}\n });\n this.selectorParentGroup.append(this.selectorGripsGroup);\n svgFactory_.svgRoot().append(this.selectorParentGroup);\n\n this.selectorMap = {};\n this.selectors = [];\n this.rubberBandBox = null;\n\n // add the corner grips\n Object.keys(this.selectorGrips).forEach((dir) => {\n const grip = svgFactory_.createSVGElement({\n element: 'circle',\n attr: {\n id: ('selectorGrip_resize_' + dir),\n fill: '#22C',\n r: gripRadius,\n style: ('cursor:' + dir + '-resize'),\n // This expands the mouse-able area of the grips making them\n // easier to grab with the mouse.\n // This works in Opera and WebKit, but does not work in Firefox\n // see https://bugzilla.mozilla.org/show_bug.cgi?id=500174\n 'stroke-width': 2,\n 'pointer-events': 'all'\n }\n });\n\n $.data(grip, 'dir', dir);\n $.data(grip, 'type', 'resize');\n this.selectorGrips[dir] = this.selectorGripsGroup.appendChild(grip);\n });\n\n // add rotator elems\n this.rotateGripConnector = this.selectorGripsGroup.appendChild(\n svgFactory_.createSVGElement({\n element: 'line',\n attr: {\n id: ('selectorGrip_rotateconnector'),\n stroke: '#22C',\n 'stroke-width': '1'\n }\n })\n );\n\n this.rotateGrip = this.selectorGripsGroup.appendChild(\n svgFactory_.createSVGElement({\n element: 'circle',\n attr: {\n id: 'selectorGrip_rotate',\n fill: 'lime',\n r: gripRadius,\n stroke: '#22C',\n 'stroke-width': 2,\n style: 'cursor:url(' + config_.imgPath + 'rotate.png) 12 12, auto;'\n }\n })\n );\n $.data(this.rotateGrip, 'type', 'rotate');\n\n if ($('#canvasBackground').length) { return; }\n\n const [width, height] = config_.dimensions;\n const canvasbg = svgFactory_.createSVGElement({\n element: 'svg',\n attr: {\n id: 'canvasBackground',\n width,\n height,\n x: 0,\n y: 0,\n overflow: (isWebkit() ? 'none' : 'visible'), // Chrome 7 has a problem with this when zooming out\n style: 'pointer-events:none'\n }\n });\n\n const rect = svgFactory_.createSVGElement({\n element: 'rect',\n attr: {\n width: '100%',\n height: '100%',\n x: 0,\n y: 0,\n 'stroke-width': 1,\n stroke: '#000',\n fill: '#FFF',\n style: 'pointer-events:none'\n }\n });\n\n // Both Firefox and WebKit are too slow with this filter region (especially at higher\n // zoom levels) and Opera has at least one bug\n // if (!isOpera()) rect.setAttribute('filter', 'url(#canvashadow)');\n canvasbg.append(rect);\n svgFactory_.svgRoot().insertBefore(canvasbg, svgFactory_.svgContent());\n // Ok to replace above with `svgFactory_.svgContent().before(canvasbg);`?\n }\n\n /**\n *\n * @param {Element} elem - DOM element to get the selector for\n * @param {module:utilities.BBoxObject} [bbox] - Optional bbox to use for reset (prevents duplicate getBBox call).\n * @returns {Selector} The selector based on the given element\n */\n requestSelector (elem, bbox) {\n if (isNullish(elem)) { return null; }\n\n const N = this.selectors.length;\n // If we've already acquired one for this element, return it.\n if (typeof this.selectorMap[elem.id] === 'object') {\n this.selectorMap[elem.id].locked = true;\n return this.selectorMap[elem.id];\n }\n for (let i = 0; i < N; ++i) {\n if (this.selectors[i] && !this.selectors[i].locked) {\n this.selectors[i].locked = true;\n this.selectors[i].reset(elem, bbox);\n this.selectorMap[elem.id] = this.selectors[i];\n return this.selectors[i];\n }\n }\n // if we reached here, no available selectors were found, we create one\n this.selectors[N] = new Selector(N, elem, bbox);\n this.selectorParentGroup.append(this.selectors[N].selectorGroup);\n this.selectorMap[elem.id] = this.selectors[N];\n return this.selectors[N];\n }\n\n /**\n * Removes the selector of the given element (hides selection box).\n *\n * @param {Element} elem - DOM element to remove the selector for\n * @returns {void}\n */\n releaseSelector (elem) {\n if (isNullish(elem)) { return; }\n const N = this.selectors.length,\n sel = this.selectorMap[elem.id];\n if (!sel.locked) {\n // TODO(codedread): Ensure this exists in this module.\n console.log('WARNING! selector was released but was already unlocked'); // eslint-disable-line no-console\n }\n for (let i = 0; i < N; ++i) {\n if (this.selectors[i] && this.selectors[i] === sel) {\n delete this.selectorMap[elem.id];\n sel.locked = false;\n sel.selectedElement = null;\n sel.showGrips(false);\n\n // remove from DOM and store reference in JS but only if it exists in the DOM\n try {\n sel.selectorGroup.setAttribute('display', 'none');\n } catch (e) {}\n\n break;\n }\n }\n }\n\n /**\n * @returns {SVGRectElement} The rubberBandBox DOM element. This is the rectangle drawn by\n * the user for selecting/zooming\n */\n getRubberBandBox () {\n if (!this.rubberBandBox) {\n this.rubberBandBox = this.selectorParentGroup.appendChild(\n svgFactory_.createSVGElement({\n element: 'rect',\n attr: {\n id: 'selectorRubberBand',\n fill: '#22C',\n 'fill-opacity': 0.15,\n stroke: '#22C',\n 'stroke-width': 0.5,\n display: 'none',\n style: 'pointer-events:none'\n }\n })\n );\n }\n return this.rubberBandBox;\n }\n}\n\n/**\n * An object that creates SVG elements for the canvas.\n *\n * @interface module:select.SVGFactory\n */\n/**\n * @function module:select.SVGFactory#createSVGElement\n * @param {module:utilities.EditorContext#addSVGElementFromJson} jsonMap\n * @returns {SVGElement}\n */\n/**\n * @function module:select.SVGFactory#svgRoot\n * @returns {SVGSVGElement}\n */\n/**\n * @function module:select.SVGFactory#svgContent\n * @returns {SVGSVGElement}\n */\n/**\n * @function module:select.SVGFactory#getCurrentZoom\n * @returns {Float} The current zoom level\n */\n\n/**\n * @typedef {GenericArray} module:select.Dimensions\n * @property {Integer} length 2\n * @property {Float} 0 Width\n * @property {Float} 1 Height\n */\n/**\n * @typedef {PlainObject} module:select.Config\n * @property {string} imgPath\n * @property {module:select.Dimensions} dimensions\n */\n\n/**\n * Initializes this module.\n * @function module:select.init\n * @param {module:select.Config} config - An object containing configurable parameters (imgPath)\n * @param {module:select.SVGFactory} svgFactory - An object implementing the SVGFactory interface.\n * @returns {void}\n */\nexport const init = function (config, svgFactory) {\n config_ = config;\n svgFactory_ = svgFactory;\n selectorManager_ = new SelectorManager();\n};\n\n/**\n * @function module:select.getSelectorManager\n * @returns {module:select.SelectorManager} The SelectorManager instance.\n */\nexport const getSelectorManager = () => selectorManager_;\n","/* globals jQuery */\n/**\n * Manipulating coordinates.\n * @module coords\n * @license MIT\n */\n\nimport './svgpathseg.js';\nimport {\n snapToGrid, assignAttributes, getBBox, getRefElem, findDefs\n} from './utilities.js';\nimport {\n transformPoint, transformListToTransform, matrixMultiply, transformBox\n} from './math.js';\nimport {getTransformList} from './svgtransformlist.js';\n\nconst $ = jQuery;\n\n// this is how we map paths to our preferred relative segment types\nconst pathMap = [\n 0, 'z', 'M', 'm', 'L', 'l', 'C', 'c', 'Q', 'q', 'A', 'a',\n 'H', 'h', 'V', 'v', 'S', 's', 'T', 't'\n];\n\n/**\n * @interface module:coords.EditorContext\n */\n/**\n * @function module:coords.EditorContext#getGridSnapping\n * @returns {boolean}\n */\n/**\n * @function module:coords.EditorContext#getDrawing\n * @returns {module:draw.Drawing}\n*/\n/**\n * @function module:coords.EditorContext#getSVGRoot\n * @returns {SVGSVGElement}\n*/\n\nlet editorContext_ = null;\n\n/**\n* @function module:coords.init\n* @param {module:svgcanvas.SvgCanvas#event:pointsAdded} editorContext\n* @returns {void}\n*/\nexport const init = function (editorContext) {\n editorContext_ = editorContext;\n};\n\n/**\n * Applies coordinate changes to an element based on the given matrix.\n * @name module:coords.remapElement\n * @type {module:path.EditorContext#remapElement}\n*/\nexport const remapElement = function (selected, changes, m) {\n const remap = function (x, y) { return transformPoint(x, y, m); },\n scalew = function (w) { return m.a * w; },\n scaleh = function (h) { return m.d * h; },\n doSnapping = editorContext_.getGridSnapping() && selected.parentNode.parentNode.localName === 'svg',\n finishUp = function () {\n if (doSnapping) {\n Object.entries(changes).forEach(([o, value]) => {\n changes[o] = snapToGrid(value);\n });\n }\n assignAttributes(selected, changes, 1000, true);\n },\n box = getBBox(selected);\n\n for (let i = 0; i < 2; i++) {\n const type = i === 0 ? 'fill' : 'stroke';\n const attrVal = selected.getAttribute(type);\n if (attrVal && attrVal.startsWith('url(')) {\n if (m.a < 0 || m.d < 0) {\n const grad = getRefElem(attrVal);\n const newgrad = grad.cloneNode(true);\n if (m.a < 0) {\n // flip x\n const x1 = newgrad.getAttribute('x1');\n const x2 = newgrad.getAttribute('x2');\n newgrad.setAttribute('x1', -(x1 - 1));\n newgrad.setAttribute('x2', -(x2 - 1));\n }\n\n if (m.d < 0) {\n // flip y\n const y1 = newgrad.getAttribute('y1');\n const y2 = newgrad.getAttribute('y2');\n newgrad.setAttribute('y1', -(y1 - 1));\n newgrad.setAttribute('y2', -(y2 - 1));\n }\n newgrad.id = editorContext_.getDrawing().getNextId();\n findDefs().append(newgrad);\n selected.setAttribute(type, 'url(#' + newgrad.id + ')');\n }\n\n // Not really working :(\n // if (selected.tagName === 'path') {\n // reorientGrads(selected, m);\n // }\n }\n }\n\n const elName = selected.tagName;\n if (elName === 'g' || elName === 'text' || elName === 'tspan' || elName === 'use') {\n // if it was a translate, then just update x,y\n if (m.a === 1 && m.b === 0 && m.c === 0 && m.d === 1 && (m.e !== 0 || m.f !== 0)) {\n // [T][M] = [M][T']\n // therefore [T'] = [M_inv][T][M]\n const existing = transformListToTransform(selected).matrix,\n tNew = matrixMultiply(existing.inverse(), m, existing);\n changes.x = parseFloat(changes.x) + tNew.e;\n changes.y = parseFloat(changes.y) + tNew.f;\n } else {\n // we just absorb all matrices into the element and don't do any remapping\n const chlist = getTransformList(selected);\n const mt = editorContext_.getSVGRoot().createSVGTransform();\n mt.setMatrix(matrixMultiply(transformListToTransform(chlist).matrix, m));\n chlist.clear();\n chlist.appendItem(mt);\n }\n }\n\n // now we have a set of changes and an applied reduced transform list\n // we apply the changes directly to the DOM\n switch (elName) {\n case 'foreignObject':\n case 'rect':\n case 'image': {\n // Allow images to be inverted (give them matrix when flipped)\n if (elName === 'image' && (m.a < 0 || m.d < 0)) {\n // Convert to matrix\n const chlist = getTransformList(selected);\n const mt = editorContext_.getSVGRoot().createSVGTransform();\n mt.setMatrix(matrixMultiply(transformListToTransform(chlist).matrix, m));\n chlist.clear();\n chlist.appendItem(mt);\n } else {\n const pt1 = remap(changes.x, changes.y);\n changes.width = scalew(changes.width);\n changes.height = scaleh(changes.height);\n changes.x = pt1.x + Math.min(0, changes.width);\n changes.y = pt1.y + Math.min(0, changes.height);\n changes.width = Math.abs(changes.width);\n changes.height = Math.abs(changes.height);\n }\n finishUp();\n break;\n } case 'ellipse': {\n const c = remap(changes.cx, changes.cy);\n changes.cx = c.x;\n changes.cy = c.y;\n changes.rx = scalew(changes.rx);\n changes.ry = scaleh(changes.ry);\n changes.rx = Math.abs(changes.rx);\n changes.ry = Math.abs(changes.ry);\n finishUp();\n break;\n } case 'circle': {\n const c = remap(changes.cx, changes.cy);\n changes.cx = c.x;\n changes.cy = c.y;\n // take the minimum of the new selected box's dimensions for the new circle radius\n const tbox = transformBox(box.x, box.y, box.width, box.height, m);\n const w = tbox.tr.x - tbox.tl.x, h = tbox.bl.y - tbox.tl.y;\n changes.r = Math.min(w / 2, h / 2);\n\n if (changes.r) { changes.r = Math.abs(changes.r); }\n finishUp();\n break;\n } case 'line': {\n const pt1 = remap(changes.x1, changes.y1);\n const pt2 = remap(changes.x2, changes.y2);\n changes.x1 = pt1.x;\n changes.y1 = pt1.y;\n changes.x2 = pt2.x;\n changes.y2 = pt2.y;\n } // Fallthrough\n case 'text':\n case 'tspan':\n case 'use': {\n finishUp();\n break;\n } case 'g': {\n const gsvg = $(selected).data('gsvg');\n if (gsvg) {\n assignAttributes(gsvg, changes, 1000, true);\n }\n break;\n } case 'polyline':\n case 'polygon': {\n const len = changes.points.length;\n for (let i = 0; i < len; ++i) {\n const pt = changes.points[i];\n const {x, y} = remap(pt.x, pt.y);\n changes.points[i].x = x;\n changes.points[i].y = y;\n }\n\n // const len = changes.points.length;\n let pstr = '';\n for (let i = 0; i < len; ++i) {\n const pt = changes.points[i];\n pstr += pt.x + ',' + pt.y + ' ';\n }\n selected.setAttribute('points', pstr);\n break;\n } case 'path': {\n const segList = selected.pathSegList;\n let len = segList.numberOfItems;\n changes.d = [];\n for (let i = 0; i < len; ++i) {\n const seg = segList.getItem(i);\n changes.d[i] = {\n type: seg.pathSegType,\n x: seg.x,\n y: seg.y,\n x1: seg.x1,\n y1: seg.y1,\n x2: seg.x2,\n y2: seg.y2,\n r1: seg.r1,\n r2: seg.r2,\n angle: seg.angle,\n largeArcFlag: seg.largeArcFlag,\n sweepFlag: seg.sweepFlag\n };\n }\n\n len = changes.d.length;\n const firstseg = changes.d[0],\n currentpt = remap(firstseg.x, firstseg.y);\n changes.d[0].x = currentpt.x;\n changes.d[0].y = currentpt.y;\n for (let i = 1; i < len; ++i) {\n const seg = changes.d[i];\n const {type} = seg;\n // if absolute or first segment, we want to remap x, y, x1, y1, x2, y2\n // if relative, we want to scalew, scaleh\n if (type % 2 === 0) { // absolute\n const thisx = (seg.x !== undefined) ? seg.x : currentpt.x, // for V commands\n thisy = (seg.y !== undefined) ? seg.y : currentpt.y; // for H commands\n const pt = remap(thisx, thisy);\n const pt1 = remap(seg.x1, seg.y1);\n const pt2 = remap(seg.x2, seg.y2);\n seg.x = pt.x;\n seg.y = pt.y;\n seg.x1 = pt1.x;\n seg.y1 = pt1.y;\n seg.x2 = pt2.x;\n seg.y2 = pt2.y;\n seg.r1 = scalew(seg.r1);\n seg.r2 = scaleh(seg.r2);\n } else { // relative\n seg.x = scalew(seg.x);\n seg.y = scaleh(seg.y);\n seg.x1 = scalew(seg.x1);\n seg.y1 = scaleh(seg.y1);\n seg.x2 = scalew(seg.x2);\n seg.y2 = scaleh(seg.y2);\n seg.r1 = scalew(seg.r1);\n seg.r2 = scaleh(seg.r2);\n }\n } // for each segment\n\n let dstr = '';\n len = changes.d.length;\n for (let i = 0; i < len; ++i) {\n const seg = changes.d[i];\n const {type} = seg;\n dstr += pathMap[type];\n switch (type) {\n case 13: // relative horizontal line (h)\n case 12: // absolute horizontal line (H)\n dstr += seg.x + ' ';\n break;\n case 15: // relative vertical line (v)\n case 14: // absolute vertical line (V)\n dstr += seg.y + ' ';\n break;\n case 3: // relative move (m)\n case 5: // relative line (l)\n case 19: // relative smooth quad (t)\n case 2: // absolute move (M)\n case 4: // absolute line (L)\n case 18: // absolute smooth quad (T)\n dstr += seg.x + ',' + seg.y + ' ';\n break;\n case 7: // relative cubic (c)\n case 6: // absolute cubic (C)\n dstr += seg.x1 + ',' + seg.y1 + ' ' + seg.x2 + ',' + seg.y2 + ' ' +\n seg.x + ',' + seg.y + ' ';\n break;\n case 9: // relative quad (q)\n case 8: // absolute quad (Q)\n dstr += seg.x1 + ',' + seg.y1 + ' ' + seg.x + ',' + seg.y + ' ';\n break;\n case 11: // relative elliptical arc (a)\n case 10: // absolute elliptical arc (A)\n dstr += seg.r1 + ',' + seg.r2 + ' ' + seg.angle + ' ' + Number(seg.largeArcFlag) +\n ' ' + Number(seg.sweepFlag) + ' ' + seg.x + ',' + seg.y + ' ';\n break;\n case 17: // relative smooth cubic (s)\n case 16: // absolute smooth cubic (S)\n dstr += seg.x2 + ',' + seg.y2 + ' ' + seg.x + ',' + seg.y + ' ';\n break;\n }\n }\n\n selected.setAttribute('d', dstr);\n break;\n }\n }\n};\n","/* eslint-disable indent, unicorn/no-fn-reference-in-iterator */\n/* globals jQuery, jsPDF */\n/**\n * Numerous tools for working with the editor's \"canvas\".\n * @module svgcanvas\n *\n * @license MIT\n *\n * @copyright 2010 Alexis Deveria, 2010 Pavol Rusnak, 2010 Jeff Schiller\n *\n */\n\n/* Dependencies:\n1. Also expects jQuery UI for `svgCanvasToString` and\n`convertToGroup` use of `:data()` selector\n*/\n\n// Todo: Obtain/adapt latest jsPDF to utilize ES Module for `jsPDF`/avoid global\n\nimport './svgpathseg.js';\nimport jQueryPluginSVG from './jQuery.attr.js'; // Needed for SVG attribute setting and array form with `attr`\nimport jQueryPluginDBox from './dbox.js';\nimport * as draw from './draw.js'; // eslint-disable-line import/no-duplicates\n// eslint-disable-next-line no-duplicate-imports\nimport {\n identifyLayers, createLayer, cloneLayer, deleteCurrentLayer,\n setCurrentLayer, renameCurrentLayer, setCurrentLayerPosition,\n setLayerVisibility, moveSelectedToLayer, mergeLayer, mergeAllLayers,\n leaveContext, setContext\n} from './draw.js'; // eslint-disable-line import/no-duplicates\nimport * as pathModule from './path.js';\nimport {sanitizeSvg} from './sanitize.js';\nimport {getReverseNS, NS} from './namespaces.js';\nimport {importSetGlobal, importScript} from './external/dynamic-import-polyfill/importModule.js';\nimport {\n text2xml, assignAttributes, cleanupElement, getElem, getUrlFromAttr,\n findDefs, getHref, setHref, getRefElem, getRotationAngle, getPathBBox,\n preventClickDefault, snapToGrid, walkTree, walkTreePost,\n getBBoxOfElementAsPath, convertToPath, toXml, encode64, decode64,\n dataURLToObjectURL, createObjectURL,\n getVisibleElements, dropXMLInternalSubset,\n init as utilsInit, getBBox as utilsGetBBox, getStrokedBBoxDefaultVisible,\n isNullish\n} from './utilities.js';\nimport * as hstry from './history.js';\nimport {\n transformPoint, matrixMultiply, hasMatrixTransform, transformListToTransform,\n getMatrix, snapToAngle, isIdentity, rectsIntersect, transformBox\n} from './math.js';\nimport {\n convertToNum, convertAttrs, convertUnit, shortFloat, getTypeMap,\n init as unitsInit\n} from './units.js';\nimport {\n isGecko, isChrome, isIE, isWebkit, supportsNonScalingStroke, supportsGoodTextCharPos\n} from './browser.js'; // , supportsEditableText\nimport {\n getTransformList, resetListMap,\n SVGTransformList as SVGEditTransformList\n} from './svgtransformlist.js';\nimport {\n remapElement,\n init as coordsInit\n} from './coords.js';\nimport {\n recalculateDimensions,\n init as recalculateInit\n} from './recalculate.js';\nimport {\n getSelectorManager,\n Selector,\n init as selectInit\n} from './select.js';\n\nlet $ = jQueryPluginSVG(jQuery);\nconst {\n MoveElementCommand, InsertElementCommand, RemoveElementCommand,\n ChangeElementCommand, BatchCommand, UndoManager, HistoryEventTypes\n} = hstry;\n\nif (!window.console) {\n window.console = {};\n window.console.log = function (str) { /* */ };\n window.console.dir = function (str) { /* */ };\n}\n\nif (window.opera) {\n window.console.log = function (str) { window.opera.postError(str); };\n window.console.dir = function (str) { /* */ };\n}\n\n// Reenable after fixing eslint-plugin-jsdoc to handle\n/**\n* The main SvgCanvas class that manages all SVG-related functions.\n* @memberof module:svgcanvas\n*\n* @borrows module:coords.remapElement as #remapElement\n* @borrows module:recalculate.recalculateDimensions as #recalculateDimensions\n*\n* @borrows module:utilities.cleanupElement as #cleanupElement\n* @borrows module:utilities.getStrokedBBoxDefaultVisible as #getStrokedBBox\n* @borrows module:utilities.getVisibleElements as #getVisibleElements\n* @borrows module:utilities.findDefs as #findDefs\n* @borrows module:utilities.getUrlFromAttr as #getUrlFromAttr\n* @borrows module:utilities.getHref as #getHref\n* @borrows module:utilities.setHref as #setHref\n* @borrows module:utilities.getRotationAngle as #getRotationAngle\n* @borrows module:utilities.getBBox as #getBBox\n* @borrows module:utilities.getElem as #getElem\n* @borrows module:utilities.getRefElem as #getRefElem\n* @borrows module:utilities.assignAttributes as #assignAttributes\n*\n* @borrows module:SVGTransformList.getTransformList as #getTransformList\n* @borrows module:math.matrixMultiply as #matrixMultiply\n* @borrows module:math.hasMatrixTransform as #hasMatrixTransform\n* @borrows module:math.transformListToTransform as #transformListToTransform\n* @borrows module:units.convertToNum as #convertToNum\n* @borrows module:sanitize.sanitizeSvg as #sanitizeSvg\n* @borrows module:path.pathActions.linkControlPoints as #linkControlPoints\n*/\nclass SvgCanvas {\n /**\n * @param {HTMLElement} container - The container HTML element that should hold the SVG root element\n * @param {module:SVGEditor.curConfig} config - An object that contains configuration data\n */\n constructor (container, config) {\n// Alias Namespace constants\n\n// Default configuration options\nconst curConfig = {\n show_outside_canvas: true,\n selectNew: true,\n dimensions: [640, 480]\n};\n\n// Update config with new one if given\nif (config) {\n $.extend(curConfig, config);\n}\n\n// Array with width/height of canvas\nconst {dimensions} = curConfig;\n\nconst canvas = this; // eslint-disable-line consistent-this\n\n// \"document\" element associated with the container (same as window.document using default svg-editor.js)\n// NOTE: This is not actually a SVG document, but an HTML document.\nconst svgdoc = container.ownerDocument;\n\n// This is a container for the document being edited, not the document itself.\n/**\n * @name module:svgcanvas~svgroot\n * @type {SVGSVGElement}\n */\nconst svgroot = svgdoc.importNode(\n text2xml(\n '<svg id=\"svgroot\" xmlns=\"' + NS.SVG + '\" xlinkns=\"' + NS.XLINK + '\" ' +\n 'width=\"' + dimensions[0] + '\" height=\"' + dimensions[1] + '\" x=\"' + dimensions[0] + '\" y=\"' + dimensions[1] + '\" overflow=\"visible\">' +\n '<defs>' +\n '<filter id=\"canvashadow\" filterUnits=\"objectBoundingBox\">' +\n '<feGaussianBlur in=\"SourceAlpha\" stdDeviation=\"4\" result=\"blur\"/>' +\n '<feOffset in=\"blur\" dx=\"5\" dy=\"5\" result=\"offsetBlur\"/>' +\n '<feMerge>' +\n '<feMergeNode in=\"offsetBlur\"/>' +\n '<feMergeNode in=\"SourceGraphic\"/>' +\n '</feMerge>' +\n '</filter>' +\n '</defs>' +\n '</svg>'\n ).documentElement,\n true\n);\ncontainer.append(svgroot);\n\n/**\n * The actual element that represents the final output SVG element.\n * @name module:svgcanvas~svgcontent\n * @type {SVGSVGElement}\n */\nlet svgcontent = svgdoc.createElementNS(NS.SVG, 'svg');\n\n/**\n* This function resets the svgcontent element while keeping it in the DOM.\n* @function module:svgcanvas.SvgCanvas#clearSvgContentElement\n* @returns {void}\n*/\nconst clearSvgContentElement = canvas.clearSvgContentElement = function () {\n $(svgcontent).empty();\n\n // TODO: Clear out all other attributes first?\n $(svgcontent).attr({\n id: 'svgcontent',\n width: dimensions[0],\n height: dimensions[1],\n x: dimensions[0],\n y: dimensions[1],\n overflow: curConfig.show_outside_canvas ? 'visible' : 'hidden',\n xmlns: NS.SVG,\n 'xmlns:se': NS.SE,\n 'xmlns:xlink': NS.XLINK\n }).appendTo(svgroot);\n\n // TODO: make this string optional and set by the client\n const comment = svgdoc.createComment(' Created with SVG-edit - https://github.com/SVG-Edit/svgedit');\n svgcontent.append(comment);\n};\nclearSvgContentElement();\n\n// Prefix string for element IDs\nlet idprefix = 'svg_';\n\n/**\n* Changes the ID prefix to the given value.\n* @function module:svgcanvas.SvgCanvas#setIdPrefix\n* @param {string} p - String with the new prefix\n* @returns {void}\n*/\ncanvas.setIdPrefix = function (p) {\n idprefix = p;\n};\n\n/**\n* Current `draw.Drawing` object.\n* @type {module:draw.Drawing}\n* @name module:svgcanvas.SvgCanvas#current_drawing_\n*/\ncanvas.current_drawing_ = new draw.Drawing(svgcontent, idprefix);\n\n/**\n* Returns the current Drawing.\n* @name module:svgcanvas.SvgCanvas#getCurrentDrawing\n* @type {module:draw.DrawCanvasInit#getCurrentDrawing}\n*/\nconst getCurrentDrawing = canvas.getCurrentDrawing = function () {\n return canvas.current_drawing_;\n};\n\n/**\n* Float displaying the current zoom level (1 = 100%, .5 = 50%, etc.).\n* @type {Float}\n*/\nlet currentZoom = 1;\n\n// pointer to current group (for in-group editing)\nlet currentGroup = null;\n\n// Object containing data for the currently selected styles\nconst allProperties = {\n shape: {\n fill: (curConfig.initFill.color === 'none' ? '' : '#') + curConfig.initFill.color,\n fill_paint: null,\n fill_opacity: curConfig.initFill.opacity,\n stroke: '#' + curConfig.initStroke.color,\n stroke_paint: null,\n stroke_opacity: curConfig.initStroke.opacity,\n stroke_width: curConfig.initStroke.width,\n stroke_dasharray: 'none',\n stroke_linejoin: 'miter',\n stroke_linecap: 'butt',\n opacity: curConfig.initOpacity\n }\n};\n\nallProperties.text = $.extend(true, {}, allProperties.shape);\n$.extend(allProperties.text, {\n fill: '#000000',\n stroke_width: curConfig.text && curConfig.text.stroke_width,\n font_size: curConfig.text && curConfig.text.font_size,\n font_family: curConfig.text && curConfig.text.font_family\n});\n\n// Current shape style properties\nconst curShape = allProperties.shape;\n\n// Array with all the currently selected elements\n// default size of 1 until it needs to grow bigger\nlet selectedElements = [];\n\n/**\n* @typedef {PlainObject} module:svgcanvas.SVGAsJSON\n* @property {string} element\n* @property {PlainObject<string, string>} attr\n* @property {module:svgcanvas.SVGAsJSON[]} children\n*/\n\n/**\n* @function module:svgcanvas.SvgCanvas#getContentElem\n* @param {Text|Element} data\n* @returns {module:svgcanvas.SVGAsJSON}\n*/\nconst getJsonFromSvgElement = this.getJsonFromSvgElement = function (data) {\n // Text node\n if (data.nodeType === 3) return data.nodeValue;\n\n const retval = {\n element: data.tagName,\n // namespace: nsMap[data.namespaceURI],\n attr: {},\n children: []\n };\n\n // Iterate attributes\n for (let i = 0, attr; (attr = data.attributes[i]); i++) {\n retval.attr[attr.name] = attr.value;\n }\n\n // Iterate children\n for (let i = 0, node; (node = data.childNodes[i]); i++) {\n retval.children[i] = getJsonFromSvgElement(node);\n }\n\n return retval;\n};\n\n/**\n* This should really be an intersection implementing all rather than a union.\n* @name module:svgcanvas.SvgCanvas#addSVGElementFromJson\n* @type {module:utilities.EditorContext#addSVGElementFromJson|module:path.EditorContext#addSVGElementFromJson}\n*/\nconst addSVGElementFromJson = this.addSVGElementFromJson = function (data) {\n if (typeof data === 'string') return svgdoc.createTextNode(data);\n\n let shape = getElem(data.attr.id);\n // if shape is a path but we need to create a rect/ellipse, then remove the path\n const currentLayer = getCurrentDrawing().getCurrentLayer();\n if (shape && data.element !== shape.tagName) {\n shape.remove();\n shape = null;\n }\n if (!shape) {\n const ns = data.namespace || NS.SVG;\n shape = svgdoc.createElementNS(ns, data.element);\n if (currentLayer) {\n (currentGroup || currentLayer).append(shape);\n }\n }\n if (data.curStyles) {\n assignAttributes(shape, {\n fill: curShape.fill,\n stroke: curShape.stroke,\n 'stroke-width': curShape.stroke_width,\n 'stroke-dasharray': curShape.stroke_dasharray,\n 'stroke-linejoin': curShape.stroke_linejoin,\n 'stroke-linecap': curShape.stroke_linecap,\n 'stroke-opacity': curShape.stroke_opacity,\n 'fill-opacity': curShape.fill_opacity,\n opacity: curShape.opacity / 2,\n style: 'pointer-events:inherit'\n }, 100);\n }\n assignAttributes(shape, data.attr, 100);\n cleanupElement(shape);\n\n // Children\n if (data.children) {\n data.children.forEach((child) => {\n shape.append(addSVGElementFromJson(child));\n });\n }\n\n return shape;\n};\n\ncanvas.getTransformList = getTransformList;\n\ncanvas.matrixMultiply = matrixMultiply;\ncanvas.hasMatrixTransform = hasMatrixTransform;\ncanvas.transformListToTransform = transformListToTransform;\n\n/**\n* @type {module:utilities.EditorContext#getBaseUnit}\n*/\nconst getBaseUnit = () => { return curConfig.baseUnit; };\n\n/**\n* Initialize from units.js.\n* Send in an object implementing the ElementContainer interface (see units.js).\n*/\nunitsInit(\n /**\n * @implements {module:units.ElementContainer}\n */\n {\n getBaseUnit,\n getElement: getElem,\n getHeight () { return svgcontent.getAttribute('height') / currentZoom; },\n getWidth () { return svgcontent.getAttribute('width') / currentZoom; },\n getRoundDigits () { return saveOptions.round_digits; }\n }\n);\n\ncanvas.convertToNum = convertToNum;\n\n/**\n* This should really be an intersection implementing all rather than a union.\n* @type {module:draw.DrawCanvasInit#getSVGContent|module:utilities.EditorContext#getSVGContent}\n*/\nconst getSVGContent = () => { return svgcontent; };\n\n/**\n* Should really be an intersection with all needing to apply rather than a union.\n* @name module:svgcanvas.SvgCanvas#getSelectedElements\n* @type {module:utilities.EditorContext#getSelectedElements|module:draw.DrawCanvasInit#getSelectedElements|module:path.EditorContext#getSelectedElements}\n*/\nconst getSelectedElements = this.getSelectedElems = function () {\n return selectedElements;\n};\n\nconst {pathActions} = pathModule;\n\n/**\n* This should actually be an intersection as all interfaces should be met.\n* @type {module:utilities.EditorContext#getSVGRoot|module:recalculate.EditorContext#getSVGRoot|module:coords.EditorContext#getSVGRoot|module:path.EditorContext#getSVGRoot}\n*/\nconst getSVGRoot = () => svgroot;\n\nutilsInit(\n /**\n * @implements {module:utilities.EditorContext}\n */\n {\n pathActions, // Ok since not modifying\n getSVGContent,\n addSVGElementFromJson,\n getSelectedElements,\n getDOMDocument () { return svgdoc; },\n getDOMContainer () { return container; },\n getSVGRoot,\n // TODO: replace this mostly with a way to get the current drawing.\n getBaseUnit,\n getSnappingStep () { return curConfig.snappingStep; }\n }\n);\n\ncanvas.findDefs = findDefs;\ncanvas.getUrlFromAttr = getUrlFromAttr;\ncanvas.getHref = getHref;\ncanvas.setHref = setHref;\n/* const getBBox = */ canvas.getBBox = utilsGetBBox;\ncanvas.getRotationAngle = getRotationAngle;\ncanvas.getElem = getElem;\ncanvas.getRefElem = getRefElem;\ncanvas.assignAttributes = assignAttributes;\n\nthis.cleanupElement = cleanupElement;\n\n/**\n* This should actually be an intersection not a union as all should apply.\n* @type {module:coords.EditorContext#getGridSnapping|module:path.EditorContext#getGridSnapping}\n*/\nconst getGridSnapping = () => { return curConfig.gridSnapping; };\n\ncoordsInit(\n /**\n * @implements {module:coords.EditorContext}\n */\n {\n getDrawing () { return getCurrentDrawing(); },\n getSVGRoot,\n getGridSnapping\n }\n);\nthis.remapElement = remapElement;\n\nrecalculateInit(\n /**\n * @implements {module:recalculate.EditorContext}\n */\n {\n getSVGRoot,\n getStartTransform () { return startTransform; },\n setStartTransform (transform) { startTransform = transform; }\n }\n);\nthis.recalculateDimensions = recalculateDimensions;\n\n// import from sanitize.js\nconst nsMap = getReverseNS();\ncanvas.sanitizeSvg = sanitizeSvg;\n\n/**\n* @name undoMgr\n* @memberof module:svgcanvas.SvgCanvas#\n* @type {module:history.HistoryEventHandler}\n*/\nconst undoMgr = canvas.undoMgr = new UndoManager({\n /**\n * @param {string} eventType One of the HistoryEvent types\n * @param {module:history.HistoryCommand} cmd Fulfills the HistoryCommand interface\n * @fires module:svgcanvas.SvgCanvas#event:changed\n * @returns {void}\n */\n handleHistoryEvent (eventType, cmd) {\n const EventTypes = HistoryEventTypes;\n // TODO: handle setBlurOffsets.\n if (eventType === EventTypes.BEFORE_UNAPPLY || eventType === EventTypes.BEFORE_APPLY) {\n canvas.clearSelection();\n } else if (eventType === EventTypes.AFTER_APPLY || eventType === EventTypes.AFTER_UNAPPLY) {\n const elems = cmd.elements();\n canvas.pathActions.clear();\n call('changed', elems);\n const cmdType = cmd.type();\n const isApply = (eventType === EventTypes.AFTER_APPLY);\n if (cmdType === MoveElementCommand.type()) {\n const parent = isApply ? cmd.newParent : cmd.oldParent;\n if (parent === svgcontent) {\n draw.identifyLayers();\n }\n } else if (cmdType === InsertElementCommand.type() ||\n cmdType === RemoveElementCommand.type()) {\n if (cmd.parent === svgcontent) {\n draw.identifyLayers();\n }\n if (cmdType === InsertElementCommand.type()) {\n if (isApply) { restoreRefElems(cmd.elem); }\n } else if (!isApply) {\n restoreRefElems(cmd.elem);\n }\n if (cmd.elem.tagName === 'use') {\n setUseData(cmd.elem);\n }\n } else if (cmdType === ChangeElementCommand.type()) {\n // if we are changing layer names, re-identify all layers\n if (cmd.elem.tagName === 'title' &&\n cmd.elem.parentNode.parentNode === svgcontent\n ) {\n draw.identifyLayers();\n }\n const values = isApply ? cmd.newValues : cmd.oldValues;\n // If stdDeviation was changed, update the blur.\n if (values.stdDeviation) {\n canvas.setBlurOffsets(cmd.elem.parentNode, values.stdDeviation);\n }\n // This is resolved in later versions of webkit, perhaps we should\n // have a featured detection for correct 'use' behavior?\n // ——————————\n // Remove & Re-add hack for Webkit (issue 775)\n // if (cmd.elem.tagName === 'use' && isWebkit()) {\n // const {elem} = cmd;\n // if (!elem.getAttribute('x') && !elem.getAttribute('y')) {\n // const parent = elem.parentNode;\n // const sib = elem.nextSibling;\n // elem.remove();\n // parent.insertBefore(elem, sib);\n // // Ok to replace above with this? `sib.before(elem);`\n // }\n // }\n }\n }\n }\n});\n\n/**\n* This should really be an intersection applying to all types rather than a union.\n* @name module:svgcanvas~addCommandToHistory\n* @type {module:path.EditorContext#addCommandToHistory|module:draw.DrawCanvasInit#addCommandToHistory}\n*/\nconst addCommandToHistory = function (cmd) {\n canvas.undoMgr.addCommandToHistory(cmd);\n};\n\n/**\n* This should really be an intersection applying to all types rather than a union.\n* @name module:svgcanvas.SvgCanvas#getZoom\n* @type {module:path.EditorContext#getCurrentZoom|module:select.SVGFactory#getCurrentZoom}\n*/\nconst getCurrentZoom = this.getZoom = function () { return currentZoom; };\n\n/**\n* This method rounds the incoming value to the nearest value based on the `currentZoom`\n* @name module:svgcanvas.SvgCanvas#round\n* @type {module:path.EditorContext#round}\n*/\nconst round = this.round = function (val) {\n return parseInt(val * currentZoom) / currentZoom;\n};\n\nselectInit(\n curConfig,\n /**\n * Export to select.js.\n * @implements {module:select.SVGFactory}\n */\n {\n createSVGElement (jsonMap) { return canvas.addSVGElementFromJson(jsonMap); },\n svgRoot () { return svgroot; },\n svgContent () { return svgcontent; },\n getCurrentZoom\n }\n);\n/**\n* This object manages selectors for us.\n* @name module:svgcanvas.SvgCanvas#selectorManager\n* @type {module:select.SelectorManager}\n*/\nconst selectorManager = this.selectorManager = getSelectorManager();\n\n/**\n* @name module:svgcanvas.SvgCanvas#getNextId\n* @type {module:path.EditorContext#getNextId}\n*/\nconst getNextId = canvas.getNextId = function () {\n return getCurrentDrawing().getNextId();\n};\n\n/**\n* @name module:svgcanvas.SvgCanvas#getId\n* @type {module:path.EditorContext#getId}\n*/\nconst getId = canvas.getId = function () {\n return getCurrentDrawing().getId();\n};\n\n/**\n* The \"implements\" should really be an intersection applying to all types rather than a union.\n* @name module:svgcanvas.SvgCanvas#call\n* @type {module:draw.DrawCanvasInit#call|module:path.EditorContext#call}\n*/\nconst call = function (ev, arg) {\n if (events[ev]) {\n return events[ev](window, arg);\n }\n return undefined;\n};\n\n/**\n* Clears the selection. The 'selected' handler is then optionally called.\n* This should really be an intersection applying to all types rather than a union.\n* @name module:svgcanvas.SvgCanvas#clearSelection\n* @type {module:draw.DrawCanvasInit#clearSelection|module:path.EditorContext#clearSelection}\n* @fires module:svgcanvas.SvgCanvas#event:selected\n*/\nconst clearSelection = this.clearSelection = function (noCall) {\n selectedElements.forEach((elem) => {\n if (isNullish(elem)) {\n return;\n }\n selectorManager.releaseSelector(elem);\n });\n selectedElements = [];\n\n if (!noCall) { call('selected', selectedElements); }\n};\n\n/**\n* Adds a list of elements to the selection. The 'selected' handler is then called.\n* @name module:svgcanvas.SvgCanvas#addToSelection\n* @type {module:path.EditorContext#addToSelection}\n* @fires module:svgcanvas.SvgCanvas#event:selected\n*/\nconst addToSelection = this.addToSelection = function (elemsToAdd, showGrips) {\n if (!elemsToAdd.length) { return; }\n // find the first null in our selectedElements array\n\n let j = 0;\n while (j < selectedElements.length) {\n if (isNullish(selectedElements[j])) {\n break;\n }\n ++j;\n }\n\n // now add each element consecutively\n let i = elemsToAdd.length;\n while (i--) {\n let elem = elemsToAdd[i];\n if (!elem) { continue; }\n const bbox = utilsGetBBox(elem);\n if (!bbox) { continue; }\n\n if (elem.tagName === 'a' && elem.childNodes.length === 1) {\n // Make \"a\" element's child be the selected element\n elem = elem.firstChild;\n }\n\n // if it's not already there, add it\n if (!selectedElements.includes(elem)) {\n selectedElements[j] = elem;\n\n // only the first selectedBBoxes element is ever used in the codebase these days\n // if (j === 0) selectedBBoxes[0] = utilsGetBBox(elem);\n j++;\n const sel = selectorManager.requestSelector(elem, bbox);\n\n if (selectedElements.length > 1) {\n sel.showGrips(false);\n }\n }\n }\n call('selected', selectedElements);\n\n if (showGrips || selectedElements.length === 1) {\n selectorManager.requestSelector(selectedElements[0]).showGrips(true);\n } else {\n selectorManager.requestSelector(selectedElements[0]).showGrips(false);\n }\n\n // make sure the elements are in the correct order\n // See: https://www.w3.org/TR/DOM-Level-3-Core/core.html#Node3-compareDocumentPosition\n\n selectedElements.sort(function (a, b) {\n if (a && b && a.compareDocumentPosition) {\n return 3 - (b.compareDocumentPosition(a) & 6); // eslint-disable-line no-bitwise\n }\n if (isNullish(a)) {\n return 1;\n }\n return 0;\n });\n\n // Make sure first elements are not null\n while (isNullish(selectedElements[0])) {\n selectedElements.shift(0);\n }\n};\n\n/**\n* @type {module:path.EditorContext#getOpacity}\n*/\nconst getOpacity = function () {\n return curShape.opacity;\n};\n\n/**\n* @name module:svgcanvas.SvgCanvas#getMouseTarget\n* @type {module:path.EditorContext#getMouseTarget}\n*/\nconst getMouseTarget = this.getMouseTarget = function (evt) {\n if (isNullish(evt)) {\n return null;\n }\n let mouseTarget = evt.target;\n\n // if it was a <use>, Opera and WebKit return the SVGElementInstance\n if (mouseTarget.correspondingUseElement) { mouseTarget = mouseTarget.correspondingUseElement; }\n\n // for foreign content, go up until we find the foreignObject\n // WebKit browsers set the mouse target to the svgcanvas div\n if ([NS.MATH, NS.HTML].includes(mouseTarget.namespaceURI) &&\n mouseTarget.id !== 'svgcanvas'\n ) {\n while (mouseTarget.nodeName !== 'foreignObject') {\n mouseTarget = mouseTarget.parentNode;\n if (!mouseTarget) { return svgroot; }\n }\n }\n\n // Get the desired mouseTarget with jQuery selector-fu\n // If it's root-like, select the root\n const currentLayer = getCurrentDrawing().getCurrentLayer();\n if ([svgroot, container, svgcontent, currentLayer].includes(mouseTarget)) {\n return svgroot;\n }\n\n const $target = $(mouseTarget);\n\n // If it's a selection grip, return the grip parent\n if ($target.closest('#selectorParentGroup').length) {\n // While we could instead have just returned mouseTarget,\n // this makes it easier to indentify as being a selector grip\n return selectorManager.selectorParentGroup;\n }\n\n while (mouseTarget.parentNode !== (currentGroup || currentLayer)) {\n mouseTarget = mouseTarget.parentNode;\n }\n\n //\n // // go up until we hit a child of a layer\n // while (mouseTarget.parentNode.parentNode.tagName == 'g') {\n // mouseTarget = mouseTarget.parentNode;\n // }\n // Webkit bubbles the mouse event all the way up to the div, so we\n // set the mouseTarget to the svgroot like the other browsers\n // if (mouseTarget.nodeName.toLowerCase() == 'div') {\n // mouseTarget = svgroot;\n // }\n\n return mouseTarget;\n};\n\n/**\n* @namespace {module:path.pathActions} pathActions\n* @memberof module:svgcanvas.SvgCanvas#\n* @see module:path.pathActions\n*/\ncanvas.pathActions = pathActions;\n/**\n* @type {module:path.EditorContext#resetD}\n*/\nfunction resetD (p) {\n p.setAttribute('d', pathActions.convertPath(p));\n}\npathModule.init(\n /**\n * @implements {module:path.EditorContext}\n */\n {\n selectorManager, // Ok since not changing\n canvas, // Ok since not changing\n call,\n resetD,\n round,\n clearSelection,\n addToSelection,\n addCommandToHistory,\n remapElement,\n addSVGElementFromJson,\n getGridSnapping,\n getOpacity,\n getSelectedElements,\n getContainer () {\n return container;\n },\n setStarted (s) {\n started = s;\n },\n getRubberBox () {\n return rubberBox;\n },\n setRubberBox (rb) {\n rubberBox = rb;\n return rubberBox;\n },\n /**\n * @param {PlainObject} ptsInfo\n * @param {boolean} ptsInfo.closedSubpath\n * @param {SVGCircleElement[]} ptsInfo.grips\n * @fires module:svgcanvas.SvgCanvas#event:pointsAdded\n * @fires module:svgcanvas.SvgCanvas#event:selected\n * @returns {void}\n */\n addPtsToSelection ({closedSubpath, grips}) {\n // TODO: Correct this:\n pathActions.canDeleteNodes = true;\n pathActions.closed_subpath = closedSubpath;\n call('pointsAdded', {closedSubpath, grips});\n call('selected', grips);\n },\n /**\n * @param {PlainObject} changes\n * @param {ChangeElementCommand} changes.cmd\n * @param {SVGPathElement} changes.elem\n * @fires module:svgcanvas.SvgCanvas#event:changed\n * @returns {void}\n */\n endChanges ({cmd, elem}) {\n addCommandToHistory(cmd);\n call('changed', [elem]);\n },\n getCurrentZoom,\n getId,\n getNextId,\n getMouseTarget,\n getCurrentMode () {\n return currentMode;\n },\n setCurrentMode (cm) {\n currentMode = cm;\n return currentMode;\n },\n getDrawnPath () {\n return drawnPath;\n },\n setDrawnPath (dp) {\n drawnPath = dp;\n return drawnPath;\n },\n getSVGRoot\n }\n);\n\n// Interface strings, usually for title elements\nconst uiStrings = {};\n\nconst visElems = 'a,circle,ellipse,foreignObject,g,image,line,path,polygon,polyline,rect,svg,text,tspan,use';\nconst refAttrs = ['clip-path', 'fill', 'filter', 'marker-end', 'marker-mid', 'marker-start', 'mask', 'stroke'];\n\nconst elData = $.data;\n\n// Animation element to change the opacity of any newly created element\nconst opacAni = document.createElementNS(NS.SVG, 'animate');\n$(opacAni).attr({\n attributeName: 'opacity',\n begin: 'indefinite',\n dur: 1,\n fill: 'freeze'\n}).appendTo(svgroot);\n\nconst restoreRefElems = function (elem) {\n // Look for missing reference elements, restore any found\n const attrs = $(elem).attr(refAttrs);\n Object.values(attrs).forEach((val) => {\n if (val && val.startsWith('url(')) {\n const id = getUrlFromAttr(val).substr(1);\n const ref = getElem(id);\n if (!ref) {\n findDefs().append(removedElements[id]);\n delete removedElements[id];\n }\n }\n });\n\n const childs = elem.getElementsByTagName('*');\n\n if (childs.length) {\n for (let i = 0, l = childs.length; i < l; i++) {\n restoreRefElems(childs[i]);\n }\n }\n};\n\n// (function () {\n// TODO For Issue 208: this is a start on a thumbnail\n// const svgthumb = svgdoc.createElementNS(NS.SVG, 'use');\n// svgthumb.setAttribute('width', '100');\n// svgthumb.setAttribute('height', '100');\n// setHref(svgthumb, '#svgcontent');\n// svgroot.append(svgthumb);\n// }());\n\n/**\n * @typedef {PlainObject} module:svgcanvas.SaveOptions\n * @property {boolean} apply\n * @property {\"embed\"} [image]\n * @property {Integer} round_digits\n */\n\n// Object to contain image data for raster images that were found encodable\nconst encodableImages = {},\n\n // Object with save options\n /**\n * @type {module:svgcanvas.SaveOptions}\n */\n saveOptions = {round_digits: 5},\n\n // Object with IDs for imported files, to see if one was already added\n importIds = {},\n\n // Current text style properties\n curText = allProperties.text,\n\n // Object to contain all included extensions\n extensions = {},\n\n // Map of deleted reference elements\n removedElements = {};\n\nlet\n // String with image URL of last loadable image\n lastGoodImgUrl = curConfig.imgPath + 'logo.png',\n\n // Boolean indicating whether or not a draw action has been started\n started = false,\n\n // String with an element's initial transform attribute value\n startTransform = null,\n\n // String indicating the current editor mode\n currentMode = 'select',\n\n // String with the current direction in which an element is being resized\n currentResizeMode = 'none',\n\n // Current general properties\n curProperties = curShape,\n\n // Array with selected elements' Bounding box object\n // selectedBBoxes = new Array(1),\n\n // The DOM element that was just selected\n justSelected = null,\n\n // DOM element for selection rectangle drawn by the user\n rubberBox = null,\n\n // Array of current BBoxes, used in getIntersectionList().\n curBBoxes = [],\n\n // Canvas point for the most recent right click\n lastClickPoint = null;\n\nthis.runExtension = function (name, action, vars) {\n return this.runExtensions(action, vars, false, (n) => n === name);\n};\n/**\n* @typedef {module:svgcanvas.ExtensionMouseDownStatus|module:svgcanvas.ExtensionMouseUpStatus|module:svgcanvas.ExtensionIDsUpdatedStatus|module:locale.ExtensionLocaleData[]|void} module:svgcanvas.ExtensionStatus\n* @tutorial ExtensionDocs\n*/\n/**\n* @callback module:svgcanvas.ExtensionVarBuilder\n* @param {string} name The name of the extension\n* @returns {module:svgcanvas.SvgCanvas#event:ext_addLangData}\n*/\n/**\n* @callback module:svgcanvas.ExtensionNameFilter\n* @param {string} name\n* @returns {boolean}\n*/\n/**\n* @todo Consider: Should this return an array by default, so extension results aren't overwritten?\n* @todo Would be easier to document if passing in object with key of action and vars as value; could then define an interface which tied both together\n* @function module:svgcanvas.SvgCanvas#runExtensions\n* @param {\"mouseDown\"|\"mouseMove\"|\"mouseUp\"|\"zoomChanged\"|\"IDsUpdated\"|\"canvasUpdated\"|\"toolButtonStateUpdate\"|\"selectedChanged\"|\"elementTransition\"|\"elementChanged\"|\"langReady\"|\"langChanged\"|\"addLangData\"|\"onNewDocument\"|\"workareaResized\"} action\n* @param {module:svgcanvas.SvgCanvas#event:ext_mouseDown|module:svgcanvas.SvgCanvas#event:ext_mouseMove|module:svgcanvas.SvgCanvas#event:ext_mouseUp|module:svgcanvas.SvgCanvas#event:ext_zoomChanged|module:svgcanvas.SvgCanvas#event:ext_IDsUpdated|module:svgcanvas.SvgCanvas#event:ext_canvasUpdated|module:svgcanvas.SvgCanvas#event:ext_toolButtonStateUpdate|module:svgcanvas.SvgCanvas#event:ext_selectedChanged|module:svgcanvas.SvgCanvas#event:ext_elementTransition|module:svgcanvas.SvgCanvas#event:ext_elementChanged|module:svgcanvas.SvgCanvas#event:ext_langReady|module:svgcanvas.SvgCanvas#event:ext_langChanged|module:svgcanvas.SvgCanvas#event:ext_addLangData|module:svgcanvas.SvgCanvas#event:ext_onNewDocument|module:svgcanvas.SvgCanvas#event:ext_workareaResized|module:svgcanvas.ExtensionVarBuilder} [vars]\n* @param {boolean} [returnArray]\n* @param {module:svgcanvas.ExtensionNameFilter} nameFilter\n* @returns {GenericArray<module:svgcanvas.ExtensionStatus>|module:svgcanvas.ExtensionStatus|false} See {@tutorial ExtensionDocs} on the ExtensionStatus.\n*/\nconst runExtensions = this.runExtensions = function (action, vars, returnArray, nameFilter) {\n let result = returnArray ? [] : false;\n $.each(extensions, function (name, ext) {\n if (nameFilter && !nameFilter(name)) {\n return;\n }\n if (ext && action in ext) {\n if (typeof vars === 'function') {\n vars = vars(name); // ext, action\n }\n if (returnArray) {\n result.push(ext[action](vars));\n } else {\n result = ext[action](vars);\n }\n }\n });\n return result;\n};\n\n/**\n* @typedef {PlainObject} module:svgcanvas.ExtensionMouseDownStatus\n* @property {boolean} started Indicates that creating/editing has started\n*/\n/**\n* @typedef {PlainObject} module:svgcanvas.ExtensionMouseUpStatus\n* @property {boolean} keep Indicates if the current element should be kept\n* @property {boolean} started Indicates if editing should still be considered as \"started\"\n* @property {Element} element The element being affected\n*/\n/**\n* @typedef {PlainObject} module:svgcanvas.ExtensionIDsUpdatedStatus\n* @property {string[]} remove Contains string IDs (used by `ext-connector.js`)\n*/\n\n/**\n * @interface module:svgcanvas.ExtensionInitResponse\n * @property {module:SVGEditor.ContextTool[]|PlainObject<string, module:SVGEditor.ContextTool>} [context_tools]\n * @property {module:SVGEditor.Button[]|PlainObject<Integer, module:SVGEditor.Button>} [buttons]\n * @property {string} [svgicons] The location of a local SVG or SVGz file\n*/\n/**\n * @function module:svgcanvas.ExtensionInitResponse#mouseDown\n * @param {module:svgcanvas.SvgCanvas#event:ext_mouseDown} arg\n * @returns {void|module:svgcanvas.ExtensionMouseDownStatus}\n */\n/**\n * @function module:svgcanvas.ExtensionInitResponse#mouseMove\n * @param {module:svgcanvas.SvgCanvas#event:ext_mouseMove} arg\n * @returns {void}\n*/\n/**\n * @function module:svgcanvas.ExtensionInitResponse#mouseUp\n * @param {module:svgcanvas.SvgCanvas#event:ext_mouseUp} arg\n * @returns {module:svgcanvas.ExtensionMouseUpStatus}\n */\n/**\n * @function module:svgcanvas.ExtensionInitResponse#zoomChanged\n * @param {module:svgcanvas.SvgCanvas#event:ext_zoomChanged} arg\n * @returns {void}\n*/\n/**\n * @function module:svgcanvas.ExtensionInitResponse#IDsUpdated\n * @param {module:svgcanvas.SvgCanvas#event:ext_IDsUpdated} arg\n * @returns {module:svgcanvas.ExtensionIDsUpdatedStatus}\n */\n/**\n * @function module:svgcanvas.ExtensionInitResponse#canvasUpdated\n * @param {module:svgcanvas.SvgCanvas#event:ext_canvasUpdated} arg\n * @returns {void}\n*/\n/**\n * @function module:svgcanvas.ExtensionInitResponse#toolButtonStateUpdate\n * @param {module:svgcanvas.SvgCanvas#event:ext_toolButtonStateUpdate} arg\n * @returns {void}\n*/\n/**\n * @function module:svgcanvas.ExtensionInitResponse#selectedChanged\n * @param {module:svgcanvas.SvgCanvas#event:ext_selectedChanged} arg\n * @returns {void}\n*/\n/**\n * @function module:svgcanvas.ExtensionInitResponse#elementTransition\n * @param {module:svgcanvas.SvgCanvas#event:ext_elementTransition} arg\n * @returns {void}\n*/\n/**\n * @function module:svgcanvas.ExtensionInitResponse#elementChanged\n * @param {module:svgcanvas.SvgCanvas#event:ext_elementChanged} arg\n * @returns {void}\n*/\n/**\n * @function module:svgcanvas.ExtensionInitResponse#langReady\n * @param {module:svgcanvas.SvgCanvas#event:ext_langReady} arg\n * @returns {void}\n*/\n/**\n * @function module:svgcanvas.ExtensionInitResponse#langChanged\n * @param {module:svgcanvas.SvgCanvas#event:ext_langChanged} arg\n * @returns {void}\n*/\n/**\n * @function module:svgcanvas.ExtensionInitResponse#addLangData\n * @param {module:svgcanvas.SvgCanvas#event:ext_addLangData} arg\n * @returns {Promise<module:locale.ExtensionLocaleData>} Resolves to {@link module:locale.ExtensionLocaleData}\n*/\n/**\n * @function module:svgcanvas.ExtensionInitResponse#onNewDocument\n * @param {module:svgcanvas.SvgCanvas#event:ext_onNewDocument} arg\n * @returns {void}\n*/\n/**\n * @function module:svgcanvas.ExtensionInitResponse#workareaResized\n * @param {module:svgcanvas.SvgCanvas#event:ext_workareaResized} arg\n * @returns {void}\n*/\n/**\n * @function module:svgcanvas.ExtensionInitResponse#callback\n * @this module:SVGEditor\n * @param {module:svgcanvas.SvgCanvas#event:ext_callback} arg\n * @returns {void}\n*/\n\n/**\n* @callback module:svgcanvas.ExtensionInitCallback\n* @this module:SVGEditor\n* @param {module:svgcanvas.ExtensionArgumentObject} arg\n* @returns {Promise<module:svgcanvas.ExtensionInitResponse|void>} Resolves to [ExtensionInitResponse]{@link module:svgcanvas.ExtensionInitResponse} or `undefined`\n*/\n/**\n* @typedef {PlainObject} module:svgcanvas.ExtensionInitArgs\n* @property {external:jQuery} $\n* @property {module:SVGEditor~ImportLocale} importLocale\n*/\n/**\n* Add an extension to the editor.\n* @function module:svgcanvas.SvgCanvas#addExtension\n* @param {string} name - String with the ID of the extension. Used internally; no need for i18n.\n* @param {module:svgcanvas.ExtensionInitCallback} [extInitFunc] - Function supplied by the extension with its data\n* @param {module:svgcanvas.ExtensionInitArgs} initArgs\n* @fires module:svgcanvas.SvgCanvas#event:extension_added\n* @throws {TypeError|Error} `TypeError` if `extInitFunc` is not a function, `Error`\n* if extension of supplied name already exists\n* @returns {Promise<void>} Resolves to `undefined`\n*/\nthis.addExtension = async function (name, extInitFunc, {$: jq, importLocale}) {\n if (typeof extInitFunc !== 'function') {\n throw new TypeError('Function argument expected for `svgcanvas.addExtension`');\n }\n if (name in extensions) {\n throw new Error('Cannot add extension \"' + name + '\", an extension by that name already exists.');\n }\n // Provide private vars/funcs here. Is there a better way to do this?\n /**\n * @typedef {module:svgcanvas.PrivateMethods} module:svgcanvas.ExtensionArgumentObject\n * @property {SVGSVGElement} svgroot See {@link module:svgcanvas~svgroot}\n * @property {SVGSVGElement} svgcontent See {@link module:svgcanvas~svgcontent}\n * @property {!(string|Integer)} nonce See {@link module:draw.Drawing#getNonce}\n * @property {module:select.SelectorManager} selectorManager\n * @property {module:SVGEditor~ImportLocale} importLocale\n */\n /**\n * @type {module:svgcanvas.ExtensionArgumentObject}\n * @see {@link module:svgcanvas.PrivateMethods} source for the other methods/properties\n */\n const argObj = $.extend(canvas.getPrivateMethods(), {\n $: jq,\n importLocale,\n svgroot,\n svgcontent,\n nonce: getCurrentDrawing().getNonce(),\n selectorManager\n });\n const extObj = await extInitFunc(argObj);\n if (extObj) {\n extObj.name = name;\n }\n\n extensions[name] = extObj;\n return call('extension_added', extObj);\n};\n\n/**\n* This method sends back an array or a NodeList full of elements that\n* intersect the multi-select rubber-band-box on the currentLayer only.\n*\n* We brute-force `getIntersectionList` for browsers that do not support it (Firefox).\n*\n* Reference:\n* Firefox does not implement `getIntersectionList()`, see {@link https://bugzilla.mozilla.org/show_bug.cgi?id=501421}.\n* @function module:svgcanvas.SvgCanvas#getIntersectionList\n* @param {SVGRect} rect\n* @returns {Element[]|NodeList} Bbox elements\n*/\nconst getIntersectionList = this.getIntersectionList = function (rect) {\n if (isNullish(rubberBox)) { return null; }\n\n const parent = currentGroup || getCurrentDrawing().getCurrentLayer();\n\n let rubberBBox;\n if (!rect) {\n rubberBBox = rubberBox.getBBox();\n const bb = svgcontent.createSVGRect();\n\n ['x', 'y', 'width', 'height', 'top', 'right', 'bottom', 'left'].forEach((o) => {\n bb[o] = rubberBBox[o] / currentZoom;\n });\n rubberBBox = bb;\n } else {\n rubberBBox = svgcontent.createSVGRect();\n rubberBBox.x = rect.x;\n rubberBBox.y = rect.y;\n rubberBBox.width = rect.width;\n rubberBBox.height = rect.height;\n }\n\n let resultList = null;\n if (!isIE()) {\n if (typeof svgroot.getIntersectionList === 'function') {\n // Offset the bbox of the rubber box by the offset of the svgcontent element.\n rubberBBox.x += parseInt(svgcontent.getAttribute('x'));\n rubberBBox.y += parseInt(svgcontent.getAttribute('y'));\n\n resultList = svgroot.getIntersectionList(rubberBBox, parent);\n }\n }\n\n if (isNullish(resultList) || typeof resultList.item !== 'function') {\n resultList = [];\n\n if (!curBBoxes.length) {\n // Cache all bboxes\n curBBoxes = getVisibleElementsAndBBoxes(parent);\n }\n let i = curBBoxes.length;\n while (i--) {\n if (!rubberBBox.width) { continue; }\n if (rectsIntersect(rubberBBox, curBBoxes[i].bbox)) {\n resultList.push(curBBoxes[i].elem);\n }\n }\n }\n\n // addToSelection expects an array, but it's ok to pass a NodeList\n // because using square-bracket notation is allowed:\n // https://www.w3.org/TR/DOM-Level-2-Core/ecma-script-binding.html\n return resultList;\n};\n\nthis.getStrokedBBox = getStrokedBBoxDefaultVisible;\n\nthis.getVisibleElements = getVisibleElements;\n\n/**\n* @typedef {PlainObject} ElementAndBBox\n* @property {Element} elem - The element\n* @property {module:utilities.BBoxObject} bbox - The element's BBox as retrieved from `getStrokedBBoxDefaultVisible`\n*/\n\n/**\n* Get all elements that have a BBox (excludes `<defs>`, `<title>`, etc).\n* Note that 0-opacity, off-screen etc elements are still considered \"visible\"\n* for this function.\n* @function module:svgcanvas.SvgCanvas#getVisibleElementsAndBBoxes\n* @param {Element} parent - The parent DOM element to search within\n* @returns {ElementAndBBox[]} An array with objects that include:\n*/\nconst getVisibleElementsAndBBoxes = this.getVisibleElementsAndBBoxes = function (parent) {\n if (!parent) {\n parent = $(svgcontent).children(); // Prevent layers from being included\n }\n const contentElems = [];\n $(parent).children().each(function (i, elem) {\n if (elem.getBBox) {\n contentElems.push({elem, bbox: getStrokedBBoxDefaultVisible([elem])});\n }\n });\n return contentElems.reverse();\n};\n\n/**\n* Wrap an SVG element into a group element, mark the group as 'gsvg'.\n* @function module:svgcanvas.SvgCanvas#groupSvgElem\n* @param {Element} elem - SVG element to wrap\n* @returns {void}\n*/\nconst groupSvgElem = this.groupSvgElem = function (elem) {\n const g = document.createElementNS(NS.SVG, 'g');\n elem.replaceWith(g);\n $(g).append(elem).data('gsvg', elem)[0].id = getNextId();\n};\n\n// Set scope for these functions\n\n// Object to contain editor event names and callback functions\nconst events = {};\n\ncanvas.call = call;\n/**\n * Array of what was changed (elements, layers).\n * @event module:svgcanvas.SvgCanvas#event:changed\n * @type {Element[]}\n */\n/**\n * Array of selected elements.\n * @event module:svgcanvas.SvgCanvas#event:selected\n * @type {Element[]}\n */\n/**\n * Array of selected elements.\n * @event module:svgcanvas.SvgCanvas#event:transition\n * @type {Element[]}\n */\n/**\n * The Element is always `SVGGElement`?\n * If not `null`, will be the set current group element.\n * @event module:svgcanvas.SvgCanvas#event:contextset\n * @type {null|Element}\n */\n/**\n * @event module:svgcanvas.SvgCanvas#event:pointsAdded\n * @type {PlainObject}\n * @property {boolean} closedSubpath\n * @property {SVGCircleElement[]} grips Grips elements\n */\n\n/**\n * @event module:svgcanvas.SvgCanvas#event:zoomed\n * @type {PlainObject}\n * @property {Float} x\n * @property {Float} y\n * @property {Float} width\n * @property {Float} height\n * @property {0.5|2} factor\n * @see module:SVGEditor.BBoxObjectWithFactor\n */\n/**\n * @event module:svgcanvas.SvgCanvas#event:updateCanvas\n * @type {PlainObject}\n * @property {false} center\n * @property {module:math.XYObject} newCtr\n */\n/**\n * @typedef {PlainObject} module:svgcanvas.ExtensionInitResponsePlusName\n * @implements {module:svgcanvas.ExtensionInitResponse}\n * @property {string} name The extension's resolved ID (whether explicit or based on file name)\n */\n/**\n * Generalized extension object response of\n * [`init()`]{@link module:svgcanvas.ExtensionInitCallback}\n * along with the name of the extension.\n * @event module:svgcanvas.SvgCanvas#event:extension_added\n * @type {module:svgcanvas.ExtensionInitResponsePlusName|void}\n */\n/**\n * @event module:svgcanvas.SvgCanvas#event:extensions_added\n * @type {void}\n*/\n/**\n * @typedef {PlainObject} module:svgcanvas.Message\n * @property {any} data The data\n * @property {string} origin The origin\n */\n/**\n * @event module:svgcanvas.SvgCanvas#event:message\n * @type {module:svgcanvas.Message}\n */\n/**\n * SVG canvas converted to string.\n * @event module:svgcanvas.SvgCanvas#event:saved\n * @type {string}\n */\n/**\n * @event module:svgcanvas.SvgCanvas#event:setnonce\n * @type {!(string|Integer)}\n */\n/**\n * @event module:svgcanvas.SvgCanvas#event:unsetnonce\n * @type {void}\n */\n/**\n * @event module:svgcanvas.SvgCanvas#event:zoomDone\n * @type {void}\n*/\n/**\n * @event module:svgcanvas.SvgCanvas#event:cleared\n * @type {void}\n*/\n\n/**\n * @event module:svgcanvas.SvgCanvas#event:exported\n * @type {module:svgcanvas.ImageExportedResults}\n */\n/**\n * @event module:svgcanvas.SvgCanvas#event:exportedPDF\n * @type {module:svgcanvas.PDFExportedResults}\n */\n/**\n * Creating a cover-all class until {@link https://github.com/jsdoc3/jsdoc/issues/1545} may be supported.\n * `undefined` may be returned by {@link module:svgcanvas.SvgCanvas#event:extension_added} if the extension's `init` returns `undefined` It is also the type for the following events \"zoomDone\", \"unsetnonce\", \"cleared\", and \"extensions_added\".\n * @event module:svgcanvas.SvgCanvas#event:GenericCanvasEvent\n * @type {module:svgcanvas.SvgCanvas#event:selected|module:svgcanvas.SvgCanvas#event:changed|module:svgcanvas.SvgCanvas#event:contextset|module:svgcanvas.SvgCanvas#event:pointsAdded|module:svgcanvas.SvgCanvas#event:extension_added|module:svgcanvas.SvgCanvas#event:extensions_added|module:svgcanvas.SvgCanvas#event:message|module:svgcanvas.SvgCanvas#event:transition|module:svgcanvas.SvgCanvas#event:zoomed|module:svgcanvas.SvgCanvas#event:updateCanvas|module:svgcanvas.SvgCanvas#event:saved|module:svgcanvas.SvgCanvas#event:exported|module:svgcanvas.SvgCanvas#event:exportedPDF|module:svgcanvas.SvgCanvas#event:setnonce|module:svgcanvas.SvgCanvas#event:unsetnonce|void}\n */\n\n/**\n * The promise return, if present, resolves to `undefined`\n * (`extension_added`, `exported`, `saved`).\n * @typedef {Promise<void>|void} module:svgcanvas.EventHandlerReturn\n*/\n\n/**\n* @callback module:svgcanvas.EventHandler\n* @param {external:Window} win\n* @param {module:svgcanvas.SvgCanvas#event:GenericCanvasEvent} arg\n* @listens module:svgcanvas.SvgCanvas#event:GenericCanvasEvent\n* @returns {module:svgcanvas.EventHandlerReturn}\n*/\n\n/**\n* Attaches a callback function to an event.\n* @function module:svgcanvas.SvgCanvas#bind\n* @param {\"changed\"|\"contextset\"|\"selected\"|\"pointsAdded\"|\"extension_added\"|\"extensions_added\"|\"message\"|\"transition\"|\"zoomed\"|\"updateCanvas\"|\"zoomDone\"|\"saved\"|\"exported\"|\"exportedPDF\"|\"setnonce\"|\"unsetnonce\"|\"cleared\"} ev - String indicating the name of the event\n* @param {module:svgcanvas.EventHandler} f - The callback function to bind to the event\n* @returns {module:svgcanvas.EventHandler} The previous event\n*/\ncanvas.bind = function (ev, f) {\n const old = events[ev];\n events[ev] = f;\n return old;\n};\n\n/**\n* Runs the SVG Document through the sanitizer and then updates its paths.\n* @function module:svgcanvas.SvgCanvas#prepareSvg\n* @param {XMLDocument} newDoc - The SVG DOM document\n* @returns {void}\n*/\nthis.prepareSvg = function (newDoc) {\n this.sanitizeSvg(newDoc.documentElement);\n\n // convert paths into absolute commands\n const paths = [...newDoc.getElementsByTagNameNS(NS.SVG, 'path')];\n paths.forEach((path) => {\n path.setAttribute('d', pathActions.convertPath(path));\n pathActions.fixEnd(path);\n });\n};\n\n/**\n* Hack for Firefox bugs where text element features aren't updated or get\n* messed up. See issue 136 and issue 137.\n* This function clones the element and re-selects it.\n* @function module:svgcanvas~ffClone\n* @todo Test for this bug on load and add it to \"support\" object instead of\n* browser sniffing\n* @param {Element} elem - The (text) DOM element to clone\n* @returns {Element} Cloned element\n*/\nconst ffClone = function (elem) {\n if (!isGecko()) { return elem; }\n const clone = elem.cloneNode(true);\n elem.before(clone);\n elem.remove();\n selectorManager.releaseSelector(elem);\n selectedElements[0] = clone;\n selectorManager.requestSelector(clone).showGrips(true);\n return clone;\n};\n\n// `this.each` is deprecated, if any extension used this it can be recreated by doing this:\n// * @example $(canvas.getRootElem()).children().each(...)\n// * @function module:svgcanvas.SvgCanvas#each\n// this.each = function (cb) {\n// $(svgroot).children().each(cb);\n// };\n\n/**\n* Removes any old rotations if present, prepends a new rotation at the\n* transformed center.\n* @function module:svgcanvas.SvgCanvas#setRotationAngle\n* @param {string|Float} val - The new rotation angle in degrees\n* @param {boolean} preventUndo - Indicates whether the action should be undoable or not\n* @fires module:svgcanvas.SvgCanvas#event:changed\n* @returns {void}\n*/\nthis.setRotationAngle = function (val, preventUndo) {\n // ensure val is the proper type\n val = parseFloat(val);\n const elem = selectedElements[0];\n const oldTransform = elem.getAttribute('transform');\n const bbox = utilsGetBBox(elem);\n const cx = bbox.x + bbox.width / 2, cy = bbox.y + bbox.height / 2;\n const tlist = getTransformList(elem);\n\n // only remove the real rotational transform if present (i.e. at index=0)\n if (tlist.numberOfItems > 0) {\n const xform = tlist.getItem(0);\n if (xform.type === 4) {\n tlist.removeItem(0);\n }\n }\n // find Rnc and insert it\n if (val !== 0) {\n const center = transformPoint(cx, cy, transformListToTransform(tlist).matrix);\n const Rnc = svgroot.createSVGTransform();\n Rnc.setRotate(val, center.x, center.y);\n if (tlist.numberOfItems) {\n tlist.insertItemBefore(Rnc, 0);\n } else {\n tlist.appendItem(Rnc);\n }\n } else if (tlist.numberOfItems === 0) {\n elem.removeAttribute('transform');\n }\n\n if (!preventUndo) {\n // we need to undo it, then redo it so it can be undo-able! :)\n // TODO: figure out how to make changes to transform list undo-able cross-browser?\n const newTransform = elem.getAttribute('transform');\n elem.setAttribute('transform', oldTransform);\n changeSelectedAttribute('transform', newTransform, selectedElements);\n call('changed', selectedElements);\n }\n // const pointGripContainer = getElem('pathpointgrip_container');\n // if (elem.nodeName === 'path' && pointGripContainer) {\n // pathActions.setPointContainerTransform(elem.getAttribute('transform'));\n // }\n const selector = selectorManager.requestSelector(selectedElements[0]);\n selector.resize();\n Selector.updateGripCursors(val);\n};\n\n/**\n* Runs `recalculateDimensions` on the selected elements,\n* adding the changes to a single batch command.\n* @function module:svgcanvas.SvgCanvas#recalculateAllSelectedDimensions\n* @fires module:svgcanvas.SvgCanvas#event:changed\n* @returns {void}\n*/\nconst recalculateAllSelectedDimensions = this.recalculateAllSelectedDimensions = function () {\n const text = (currentResizeMode === 'none' ? 'position' : 'size');\n const batchCmd = new BatchCommand(text);\n\n let i = selectedElements.length;\n while (i--) {\n const elem = selectedElements[i];\n // if (getRotationAngle(elem) && !hasMatrixTransform(getTransformList(elem))) { continue; }\n const cmd = recalculateDimensions(elem);\n if (cmd) {\n batchCmd.addSubCommand(cmd);\n }\n }\n\n if (!batchCmd.isEmpty()) {\n addCommandToHistory(batchCmd);\n call('changed', selectedElements);\n }\n};\n\n/**\n * Debug tool to easily see the current matrix in the browser's console.\n * @function module:svgcanvas~logMatrix\n * @param {SVGMatrix} m The matrix\n * @returns {void}\n */\nconst logMatrix = function (m) {\n console.log([m.a, m.b, m.c, m.d, m.e, m.f]); // eslint-disable-line no-console\n};\n\n// Root Current Transformation Matrix in user units\nlet rootSctm = null;\n\n/**\n* Group: Selection.\n*/\n\n// TODO: do we need to worry about selectedBBoxes here?\n\n/**\n* Selects only the given elements, shortcut for `clearSelection(); addToSelection()`.\n* @function module:svgcanvas.SvgCanvas#selectOnly\n* @param {Element[]} elems - an array of DOM elements to be selected\n* @param {boolean} showGrips - Indicates whether the resize grips should be shown\n* @returns {void}\n*/\nconst selectOnly = this.selectOnly = function (elems, showGrips) {\n clearSelection(true);\n addToSelection(elems, showGrips);\n};\n\n// TODO: could use slice here to make this faster?\n// TODO: should the 'selected' handler\n\n/**\n* Removes elements from the selection.\n* @function module:svgcanvas.SvgCanvas#removeFromSelection\n* @param {Element[]} elemsToRemove - An array of elements to remove from selection\n* @returns {void}\n*/\n/* const removeFromSelection = */ this.removeFromSelection = function (elemsToRemove) {\n if (isNullish(selectedElements[0])) { return; }\n if (!elemsToRemove.length) { return; }\n\n // find every element and remove it from our array copy\n const newSelectedItems = [],\n len = selectedElements.length;\n for (let i = 0; i < len; ++i) {\n const elem = selectedElements[i];\n if (elem) {\n // keep the item\n if (!elemsToRemove.includes(elem)) {\n newSelectedItems.push(elem);\n } else { // remove the item and its selector\n selectorManager.releaseSelector(elem);\n }\n }\n }\n // the copy becomes the master now\n selectedElements = newSelectedItems;\n};\n\n/**\n* Clears the selection, then adds all elements in the current layer to the selection.\n* @function module:svgcanvas.SvgCanvas#selectAllInCurrentLayer\n* @returns {void}\n*/\nthis.selectAllInCurrentLayer = function () {\n const currentLayer = getCurrentDrawing().getCurrentLayer();\n if (currentLayer) {\n currentMode = 'select';\n selectOnly($(currentGroup || currentLayer).children());\n }\n};\n\nlet drawnPath = null;\n\n// Mouse events\n(function () {\nconst freehand = {\n minx: null,\n miny: null,\n maxx: null,\n maxy: null\n};\nconst THRESHOLD_DIST = 0.8,\n STEP_COUNT = 10;\nlet dAttr = null,\n startX = null,\n startY = null,\n rStartX = null,\n rStartY = null,\n initBbox = {},\n sumDistance = 0,\n controllPoint2 = {x: 0, y: 0},\n controllPoint1 = {x: 0, y: 0},\n start = {x: 0, y: 0},\n end = {x: 0, y: 0},\n bSpline = {x: 0, y: 0},\n nextPos = {x: 0, y: 0},\n parameter,\n nextParameter;\n\nconst getBsplinePoint = function (t) {\n const spline = {x: 0, y: 0},\n p0 = controllPoint2,\n p1 = controllPoint1,\n p2 = start,\n p3 = end,\n S = 1.0 / 6.0,\n t2 = t * t,\n t3 = t2 * t;\n\n const m = [\n [-1, 3, -3, 1],\n [3, -6, 3, 0],\n [-3, 0, 3, 0],\n [1, 4, 1, 0]\n ];\n\n spline.x = S * (\n (p0.x * m[0][0] + p1.x * m[0][1] + p2.x * m[0][2] + p3.x * m[0][3]) * t3 +\n (p0.x * m[1][0] + p1.x * m[1][1] + p2.x * m[1][2] + p3.x * m[1][3]) * t2 +\n (p0.x * m[2][0] + p1.x * m[2][1] + p2.x * m[2][2] + p3.x * m[2][3]) * t +\n (p0.x * m[3][0] + p1.x * m[3][1] + p2.x * m[3][2] + p3.x * m[3][3])\n );\n spline.y = S * (\n (p0.y * m[0][0] + p1.y * m[0][1] + p2.y * m[0][2] + p3.y * m[0][3]) * t3 +\n (p0.y * m[1][0] + p1.y * m[1][1] + p2.y * m[1][2] + p3.y * m[1][3]) * t2 +\n (p0.y * m[2][0] + p1.y * m[2][1] + p2.y * m[2][2] + p3.y * m[2][3]) * t +\n (p0.y * m[3][0] + p1.y * m[3][1] + p2.y * m[3][2] + p3.y * m[3][3])\n );\n\n return {\n x: spline.x,\n y: spline.y\n };\n};\n/**\n * Follows these conditions:\n * - When we are in a create mode, the element is added to the canvas but the\n * action is not recorded until mousing up.\n * - When we are in select mode, select the element, remember the position\n * and do nothing else.\n * @param {MouseEvent} evt\n * @fires module:svgcanvas.SvgCanvas#event:ext_mouseDown\n * @returns {void}\n */\nconst mouseDown = function (evt) {\n if (canvas.spaceKey || evt.button === 1) { return; }\n\n const rightClick = evt.button === 2;\n\n if (evt.altKey) { // duplicate when dragging\n canvas.cloneSelectedElements(0, 0);\n }\n\n rootSctm = $('#svgcontent g')[0].getScreenCTM().inverse();\n\n const pt = transformPoint(evt.pageX, evt.pageY, rootSctm),\n mouseX = pt.x * currentZoom,\n mouseY = pt.y * currentZoom;\n\n evt.preventDefault();\n\n if (rightClick) {\n currentMode = 'select';\n lastClickPoint = pt;\n }\n\n // This would seem to be unnecessary...\n // if (!['select', 'resize'].includes(currentMode)) {\n // setGradient();\n // }\n\n let x = mouseX / currentZoom,\n y = mouseY / currentZoom;\n let mouseTarget = getMouseTarget(evt);\n\n if (mouseTarget.tagName === 'a' && mouseTarget.childNodes.length === 1) {\n mouseTarget = mouseTarget.firstChild;\n }\n\n // realX/y ignores grid-snap value\n const realX = x;\n rStartX = startX = x;\n const realY = y;\n rStartY = startY = y;\n\n if (curConfig.gridSnapping) {\n x = snapToGrid(x);\n y = snapToGrid(y);\n startX = snapToGrid(startX);\n startY = snapToGrid(startY);\n }\n\n // if it is a selector grip, then it must be a single element selected,\n // set the mouseTarget to that and update the mode to rotate/resize\n\n if (mouseTarget === selectorManager.selectorParentGroup && !isNullish(selectedElements[0])) {\n const grip = evt.target;\n const griptype = elData(grip, 'type');\n // rotating\n if (griptype === 'rotate') {\n currentMode = 'rotate';\n // resizing\n } else if (griptype === 'resize') {\n currentMode = 'resize';\n currentResizeMode = elData(grip, 'dir');\n }\n mouseTarget = selectedElements[0];\n }\n\n startTransform = mouseTarget.getAttribute('transform');\n\n const tlist = getTransformList(mouseTarget);\n switch (currentMode) {\n case 'select':\n started = true;\n currentResizeMode = 'none';\n if (rightClick) { started = false; }\n\n if (mouseTarget !== svgroot) {\n // if this element is not yet selected, clear selection and select it\n if (!selectedElements.includes(mouseTarget)) {\n // only clear selection if shift is not pressed (otherwise, add\n // element to selection)\n if (!evt.shiftKey) {\n // No need to do the call here as it will be done on addToSelection\n clearSelection(true);\n }\n addToSelection([mouseTarget]);\n justSelected = mouseTarget;\n pathActions.clear();\n }\n // else if it's a path, go into pathedit mode in mouseup\n\n if (!rightClick) {\n // insert a dummy transform so if the element(s) are moved it will have\n // a transform to use for its translate\n for (const selectedElement of selectedElements) {\n if (isNullish(selectedElement)) { continue; }\n const slist = getTransformList(selectedElement);\n if (slist.numberOfItems) {\n slist.insertItemBefore(svgroot.createSVGTransform(), 0);\n } else {\n slist.appendItem(svgroot.createSVGTransform());\n }\n }\n }\n } else if (!rightClick) {\n clearSelection();\n currentMode = 'multiselect';\n if (isNullish(rubberBox)) {\n rubberBox = selectorManager.getRubberBandBox();\n }\n rStartX *= currentZoom;\n rStartY *= currentZoom;\n // console.log('p',[evt.pageX, evt.pageY]);\n // console.log('c',[evt.clientX, evt.clientY]);\n // console.log('o',[evt.offsetX, evt.offsetY]);\n // console.log('s',[startX, startY]);\n\n assignAttributes(rubberBox, {\n x: rStartX,\n y: rStartY,\n width: 0,\n height: 0,\n display: 'inline'\n }, 100);\n }\n break;\n case 'zoom':\n started = true;\n if (isNullish(rubberBox)) {\n rubberBox = selectorManager.getRubberBandBox();\n }\n assignAttributes(rubberBox, {\n x: realX * currentZoom,\n y: realX * currentZoom,\n width: 0,\n height: 0,\n display: 'inline'\n }, 100);\n break;\n case 'resize': {\n started = true;\n startX = x;\n startY = y;\n\n // Getting the BBox from the selection box, since we know we\n // want to orient around it\n initBbox = utilsGetBBox($('#selectedBox0')[0]);\n const bb = {};\n $.each(initBbox, function (key, val) {\n bb[key] = val / currentZoom;\n });\n initBbox = bb;\n\n // append three dummy transforms to the tlist so that\n // we can translate,scale,translate in mousemove\n const pos = getRotationAngle(mouseTarget) ? 1 : 0;\n\n if (hasMatrixTransform(tlist)) {\n tlist.insertItemBefore(svgroot.createSVGTransform(), pos);\n tlist.insertItemBefore(svgroot.createSVGTransform(), pos);\n tlist.insertItemBefore(svgroot.createSVGTransform(), pos);\n } else {\n tlist.appendItem(svgroot.createSVGTransform());\n tlist.appendItem(svgroot.createSVGTransform());\n tlist.appendItem(svgroot.createSVGTransform());\n\n if (supportsNonScalingStroke()) {\n // Handle crash for newer Chrome and Safari 6 (Mobile and Desktop):\n // https://code.google.com/p/svg-edit/issues/detail?id=904\n // Chromium issue: https://code.google.com/p/chromium/issues/detail?id=114625\n // TODO: Remove this workaround once vendor fixes the issue\n const iswebkit = isWebkit();\n\n let delayedStroke;\n if (iswebkit) {\n delayedStroke = function (ele) {\n const stroke_ = ele.getAttribute('stroke');\n ele.removeAttribute('stroke');\n // Re-apply stroke after delay. Anything higher than 1 seems to cause flicker\n if (stroke_ !== null) setTimeout(function () { ele.setAttribute('stroke', stroke_); }, 0);\n };\n }\n mouseTarget.style.vectorEffect = 'non-scaling-stroke';\n if (iswebkit) { delayedStroke(mouseTarget); }\n\n const all = mouseTarget.getElementsByTagName('*'),\n len = all.length;\n for (let i = 0; i < len; i++) {\n if (!all[i].style) { // mathML\n continue;\n }\n all[i].style.vectorEffect = 'non-scaling-stroke';\n if (iswebkit) { delayedStroke(all[i]); }\n }\n }\n }\n break;\n } case 'fhellipse':\n case 'fhrect':\n case 'fhpath':\n start.x = realX;\n start.y = realY;\n started = true;\n dAttr = realX + ',' + realY + ' ';\n // Commented out as doing nothing now:\n // strokeW = parseFloat(curShape.stroke_width) === 0 ? 1 : curShape.stroke_width;\n addSVGElementFromJson({\n element: 'polyline',\n curStyles: true,\n attr: {\n points: dAttr,\n id: getNextId(),\n fill: 'none',\n opacity: curShape.opacity / 2,\n 'stroke-linecap': 'round',\n style: 'pointer-events:none'\n }\n });\n freehand.minx = realX;\n freehand.maxx = realX;\n freehand.miny = realY;\n freehand.maxy = realY;\n break;\n case 'image': {\n started = true;\n const newImage = addSVGElementFromJson({\n element: 'image',\n attr: {\n x,\n y,\n width: 0,\n height: 0,\n id: getNextId(),\n opacity: curShape.opacity / 2,\n style: 'pointer-events:inherit'\n }\n });\n setHref(newImage, lastGoodImgUrl);\n preventClickDefault(newImage);\n break;\n } case 'square':\n // TODO: once we create the rect, we lose information that this was a square\n // (for resizing purposes this could be important)\n // Fallthrough\n case 'rect':\n started = true;\n startX = x;\n startY = y;\n addSVGElementFromJson({\n element: 'rect',\n curStyles: true,\n attr: {\n x,\n y,\n width: 0,\n height: 0,\n id: getNextId(),\n opacity: curShape.opacity / 2\n }\n });\n break;\n case 'line': {\n started = true;\n const strokeW = Number(curShape.stroke_width) === 0 ? 1 : curShape.stroke_width;\n addSVGElementFromJson({\n element: 'line',\n curStyles: true,\n attr: {\n x1: x,\n y1: y,\n x2: x,\n y2: y,\n id: getNextId(),\n stroke: curShape.stroke,\n 'stroke-width': strokeW,\n 'stroke-dasharray': curShape.stroke_dasharray,\n 'stroke-linejoin': curShape.stroke_linejoin,\n 'stroke-linecap': curShape.stroke_linecap,\n 'stroke-opacity': curShape.stroke_opacity,\n fill: 'none',\n opacity: curShape.opacity / 2,\n style: 'pointer-events:none'\n }\n });\n break;\n } case 'circle':\n started = true;\n addSVGElementFromJson({\n element: 'circle',\n curStyles: true,\n attr: {\n cx: x,\n cy: y,\n r: 0,\n id: getNextId(),\n opacity: curShape.opacity / 2\n }\n });\n break;\n case 'ellipse':\n started = true;\n addSVGElementFromJson({\n element: 'ellipse',\n curStyles: true,\n attr: {\n cx: x,\n cy: y,\n rx: 0,\n ry: 0,\n id: getNextId(),\n opacity: curShape.opacity / 2\n }\n });\n break;\n case 'text':\n started = true;\n /* const newText = */ addSVGElementFromJson({\n element: 'text',\n curStyles: true,\n attr: {\n x,\n y,\n id: getNextId(),\n fill: curText.fill,\n 'stroke-width': curText.stroke_width,\n 'font-size': curText.font_size,\n 'font-family': curText.font_family,\n 'text-anchor': 'middle',\n 'xml:space': 'preserve',\n opacity: curShape.opacity\n }\n });\n // newText.textContent = 'text';\n break;\n case 'path':\n // Fall through\n case 'pathedit':\n startX *= currentZoom;\n startY *= currentZoom;\n pathActions.mouseDown(evt, mouseTarget, startX, startY);\n started = true;\n break;\n case 'textedit':\n startX *= currentZoom;\n startY *= currentZoom;\n textActions.mouseDown(evt, mouseTarget, startX, startY);\n started = true;\n break;\n case 'rotate':\n started = true;\n // we are starting an undoable change (a drag-rotation)\n canvas.undoMgr.beginUndoableChange('transform', selectedElements);\n break;\n default:\n // This could occur in an extension\n break;\n }\n\n /**\n * The main (left) mouse button is held down on the canvas area.\n * @event module:svgcanvas.SvgCanvas#event:ext_mouseDown\n * @type {PlainObject}\n * @property {MouseEvent} event The event object\n * @property {Float} start_x x coordinate on canvas\n * @property {Float} start_y y coordinate on canvas\n * @property {Element[]} selectedElements An array of the selected Elements\n */\n const extResult = runExtensions('mouseDown', /** @type {module:svgcanvas.SvgCanvas#event:ext_mouseDown} */ {\n event: evt,\n start_x: startX,\n start_y: startY,\n selectedElements\n }, true);\n\n $.each(extResult, function (i, r) {\n if (r && r.started) {\n started = true;\n }\n });\n};\n\n// in this function we do not record any state changes yet (but we do update\n// any elements that are still being created, moved or resized on the canvas)\n/**\n *\n * @param {MouseEvent} evt\n * @fires module:svgcanvas.SvgCanvas#event:transition\n * @fires module:svgcanvas.SvgCanvas#event:ext_mouseMove\n * @returns {void}\n */\nconst mouseMove = function (evt) {\n if (!started) { return; }\n if (evt.button === 1 || canvas.spaceKey) { return; }\n\n let i, xya, c, cx, cy, dx, dy, len, angle, box,\n selected = selectedElements[0];\n const\n pt = transformPoint(evt.pageX, evt.pageY, rootSctm),\n mouseX = pt.x * currentZoom,\n mouseY = pt.y * currentZoom,\n shape = getElem(getId());\n\n let realX = mouseX / currentZoom;\n let x = realX;\n let realY = mouseY / currentZoom;\n let y = realY;\n\n if (curConfig.gridSnapping) {\n x = snapToGrid(x);\n y = snapToGrid(y);\n }\n\n evt.preventDefault();\n let tlist;\n switch (currentMode) {\n case 'select': {\n // we temporarily use a translate on the element(s) being dragged\n // this transform is removed upon mousing up and the element is\n // relocated to the new location\n if (selectedElements[0] !== null) {\n dx = x - startX;\n dy = y - startY;\n\n if (curConfig.gridSnapping) {\n dx = snapToGrid(dx);\n dy = snapToGrid(dy);\n }\n\n /*\n // Commenting out as currently has no effect\n if (evt.shiftKey) {\n xya = snapToAngle(startX, startY, x, y);\n ({x, y} = xya);\n }\n */\n\n if (dx !== 0 || dy !== 0) {\n len = selectedElements.length;\n for (i = 0; i < len; ++i) {\n selected = selectedElements[i];\n if (isNullish(selected)) { break; }\n // if (i === 0) {\n // const box = utilsGetBBox(selected);\n // selectedBBoxes[i].x = box.x + dx;\n // selectedBBoxes[i].y = box.y + dy;\n // }\n\n // update the dummy transform in our transform list\n // to be a translate\n const xform = svgroot.createSVGTransform();\n tlist = getTransformList(selected);\n // Note that if Webkit and there's no ID for this\n // element, the dummy transform may have gotten lost.\n // This results in unexpected behaviour\n\n xform.setTranslate(dx, dy);\n if (tlist.numberOfItems) {\n tlist.replaceItem(xform, 0);\n } else {\n tlist.appendItem(xform);\n }\n\n // update our internal bbox that we're tracking while dragging\n selectorManager.requestSelector(selected).resize();\n }\n\n call('transition', selectedElements);\n }\n }\n break;\n } case 'multiselect': {\n realX *= currentZoom;\n realY *= currentZoom;\n assignAttributes(rubberBox, {\n x: Math.min(rStartX, realX),\n y: Math.min(rStartY, realY),\n width: Math.abs(realX - rStartX),\n height: Math.abs(realY - rStartY)\n }, 100);\n\n // for each selected:\n // - if newList contains selected, do nothing\n // - if newList doesn't contain selected, remove it from selected\n // - for any newList that was not in selectedElements, add it to selected\n const elemsToRemove = selectedElements.slice(), elemsToAdd = [],\n newList = getIntersectionList();\n\n // For every element in the intersection, add if not present in selectedElements.\n len = newList.length;\n for (i = 0; i < len; ++i) {\n const intElem = newList[i];\n // Found an element that was not selected before, so we should add it.\n if (!selectedElements.includes(intElem)) {\n elemsToAdd.push(intElem);\n }\n // Found an element that was already selected, so we shouldn't remove it.\n const foundInd = elemsToRemove.indexOf(intElem);\n if (foundInd !== -1) {\n elemsToRemove.splice(foundInd, 1);\n }\n }\n\n if (elemsToRemove.length > 0) {\n canvas.removeFromSelection(elemsToRemove);\n }\n\n if (elemsToAdd.length > 0) {\n canvas.addToSelection(elemsToAdd);\n }\n\n break;\n } case 'resize': {\n // we track the resize bounding box and translate/scale the selected element\n // while the mouse is down, when mouse goes up, we use this to recalculate\n // the shape's coordinates\n tlist = getTransformList(selected);\n const hasMatrix = hasMatrixTransform(tlist);\n box = hasMatrix ? initBbox : utilsGetBBox(selected);\n let left = box.x,\n top = box.y,\n {width, height} = box;\n dx = (x - startX);\n dy = (y - startY);\n\n if (curConfig.gridSnapping) {\n dx = snapToGrid(dx);\n dy = snapToGrid(dy);\n height = snapToGrid(height);\n width = snapToGrid(width);\n }\n\n // if rotated, adjust the dx,dy values\n angle = getRotationAngle(selected);\n if (angle) {\n const r = Math.sqrt(dx * dx + dy * dy),\n theta = Math.atan2(dy, dx) - angle * Math.PI / 180.0;\n dx = r * Math.cos(theta);\n dy = r * Math.sin(theta);\n }\n\n // if not stretching in y direction, set dy to 0\n // if not stretching in x direction, set dx to 0\n if (!currentResizeMode.includes('n') && !currentResizeMode.includes('s')) {\n dy = 0;\n }\n if (!currentResizeMode.includes('e') && !currentResizeMode.includes('w')) {\n dx = 0;\n }\n\n let // ts = null,\n tx = 0, ty = 0,\n sy = height ? (height + dy) / height : 1,\n sx = width ? (width + dx) / width : 1;\n // if we are dragging on the north side, then adjust the scale factor and ty\n if (currentResizeMode.includes('n')) {\n sy = height ? (height - dy) / height : 1;\n ty = height;\n }\n\n // if we dragging on the east side, then adjust the scale factor and tx\n if (currentResizeMode.includes('w')) {\n sx = width ? (width - dx) / width : 1;\n tx = width;\n }\n\n // update the transform list with translate,scale,translate\n const translateOrigin = svgroot.createSVGTransform(),\n scale = svgroot.createSVGTransform(),\n translateBack = svgroot.createSVGTransform();\n\n if (curConfig.gridSnapping) {\n left = snapToGrid(left);\n tx = snapToGrid(tx);\n top = snapToGrid(top);\n ty = snapToGrid(ty);\n }\n\n translateOrigin.setTranslate(-(left + tx), -(top + ty));\n if (evt.shiftKey) {\n if (sx === 1) {\n sx = sy;\n } else { sy = sx; }\n }\n scale.setScale(sx, sy);\n\n translateBack.setTranslate(left + tx, top + ty);\n if (hasMatrix) {\n const diff = angle ? 1 : 0;\n tlist.replaceItem(translateOrigin, 2 + diff);\n tlist.replaceItem(scale, 1 + diff);\n tlist.replaceItem(translateBack, Number(diff));\n } else {\n const N = tlist.numberOfItems;\n tlist.replaceItem(translateBack, N - 3);\n tlist.replaceItem(scale, N - 2);\n tlist.replaceItem(translateOrigin, N - 1);\n }\n\n selectorManager.requestSelector(selected).resize();\n\n call('transition', selectedElements);\n\n break;\n } case 'zoom': {\n realX *= currentZoom;\n realY *= currentZoom;\n assignAttributes(rubberBox, {\n x: Math.min(rStartX * currentZoom, realX),\n y: Math.min(rStartY * currentZoom, realY),\n width: Math.abs(realX - rStartX * currentZoom),\n height: Math.abs(realY - rStartY * currentZoom)\n }, 100);\n break;\n } case 'text': {\n assignAttributes(shape, {\n x,\n y\n }, 1000);\n break;\n } case 'line': {\n if (curConfig.gridSnapping) {\n x = snapToGrid(x);\n y = snapToGrid(y);\n }\n\n let x2 = x;\n let y2 = y;\n\n if (evt.shiftKey) {\n xya = snapToAngle(startX, startY, x2, y2);\n x2 = xya.x;\n y2 = xya.y;\n }\n\n shape.setAttribute('x2', x2);\n shape.setAttribute('y2', y2);\n break;\n } case 'foreignObject':\n // fall through\n case 'square':\n // fall through\n case 'rect':\n // fall through\n case 'image': {\n const square = (currentMode === 'square') || evt.shiftKey;\n let\n w = Math.abs(x - startX),\n h = Math.abs(y - startY);\n let newX, newY;\n if (square) {\n w = h = Math.max(w, h);\n newX = startX < x ? startX : startX - w;\n newY = startY < y ? startY : startY - h;\n } else {\n newX = Math.min(startX, x);\n newY = Math.min(startY, y);\n }\n\n if (curConfig.gridSnapping) {\n w = snapToGrid(w);\n h = snapToGrid(h);\n newX = snapToGrid(newX);\n newY = snapToGrid(newY);\n }\n\n assignAttributes(shape, {\n width: w,\n height: h,\n x: newX,\n y: newY\n }, 1000);\n\n break;\n } case 'circle': {\n c = $(shape).attr(['cx', 'cy']);\n ({cx, cy} = c);\n let rad = Math.sqrt((x - cx) * (x - cx) + (y - cy) * (y - cy));\n if (curConfig.gridSnapping) {\n rad = snapToGrid(rad);\n }\n shape.setAttribute('r', rad);\n break;\n } case 'ellipse': {\n c = $(shape).attr(['cx', 'cy']);\n ({cx, cy} = c);\n if (curConfig.gridSnapping) {\n x = snapToGrid(x);\n cx = snapToGrid(cx);\n y = snapToGrid(y);\n cy = snapToGrid(cy);\n }\n shape.setAttribute('rx', Math.abs(x - cx));\n const ry = Math.abs(evt.shiftKey ? (x - cx) : (y - cy));\n shape.setAttribute('ry', ry);\n break;\n }\n case 'fhellipse':\n case 'fhrect': {\n freehand.minx = Math.min(realX, freehand.minx);\n freehand.maxx = Math.max(realX, freehand.maxx);\n freehand.miny = Math.min(realY, freehand.miny);\n freehand.maxy = Math.max(realY, freehand.maxy);\n }\n // Fallthrough\n case 'fhpath': {\n // dAttr += + realX + ',' + realY + ' ';\n // shape.setAttribute('points', dAttr);\n end.x = realX; end.y = realY;\n if (controllPoint2.x && controllPoint2.y) {\n for (i = 0; i < STEP_COUNT - 1; i++) {\n parameter = i / STEP_COUNT;\n nextParameter = (i + 1) / STEP_COUNT;\n bSpline = getBsplinePoint(nextParameter);\n nextPos = bSpline;\n bSpline = getBsplinePoint(parameter);\n sumDistance += Math.sqrt((nextPos.x - bSpline.x) * (nextPos.x - bSpline.x) + (nextPos.y - bSpline.y) * (nextPos.y - bSpline.y));\n if (sumDistance > THRESHOLD_DIST) {\n sumDistance -= THRESHOLD_DIST;\n\n // Faster than completely re-writing the points attribute.\n const point = svgcontent.createSVGPoint();\n point.x = bSpline.x;\n point.y = bSpline.y;\n shape.points.appendItem(point);\n }\n }\n }\n controllPoint2 = {x: controllPoint1.x, y: controllPoint1.y};\n controllPoint1 = {x: start.x, y: start.y};\n start = {x: end.x, y: end.y};\n break;\n // update path stretch line coordinates\n} case 'path':\n // fall through\n case 'pathedit': {\n x *= currentZoom;\n y *= currentZoom;\n\n if (curConfig.gridSnapping) {\n x = snapToGrid(x);\n y = snapToGrid(y);\n startX = snapToGrid(startX);\n startY = snapToGrid(startY);\n }\n if (evt.shiftKey) {\n const {path} = pathModule;\n let x1, y1;\n if (path) {\n x1 = path.dragging ? path.dragging[0] : startX;\n y1 = path.dragging ? path.dragging[1] : startY;\n } else {\n x1 = startX;\n y1 = startY;\n }\n xya = snapToAngle(x1, y1, x, y);\n ({x, y} = xya);\n }\n\n if (rubberBox && rubberBox.getAttribute('display') !== 'none') {\n realX *= currentZoom;\n realY *= currentZoom;\n assignAttributes(rubberBox, {\n x: Math.min(rStartX * currentZoom, realX),\n y: Math.min(rStartY * currentZoom, realY),\n width: Math.abs(realX - rStartX * currentZoom),\n height: Math.abs(realY - rStartY * currentZoom)\n }, 100);\n }\n pathActions.mouseMove(x, y);\n\n break;\n } case 'textedit': {\n x *= currentZoom;\n y *= currentZoom;\n // if (rubberBox && rubberBox.getAttribute('display') !== 'none') {\n // assignAttributes(rubberBox, {\n // x: Math.min(startX, x),\n // y: Math.min(startY, y),\n // width: Math.abs(x - startX),\n // height: Math.abs(y - startY)\n // }, 100);\n // }\n\n textActions.mouseMove(mouseX, mouseY);\n\n break;\n } case 'rotate': {\n box = utilsGetBBox(selected);\n cx = box.x + box.width / 2;\n cy = box.y + box.height / 2;\n const m = getMatrix(selected),\n center = transformPoint(cx, cy, m);\n cx = center.x;\n cy = center.y;\n angle = ((Math.atan2(cy - y, cx - x) * (180 / Math.PI)) - 90) % 360;\n if (curConfig.gridSnapping) {\n angle = snapToGrid(angle);\n }\n if (evt.shiftKey) { // restrict rotations to nice angles (WRS)\n const snap = 45;\n angle = Math.round(angle / snap) * snap;\n }\n\n canvas.setRotationAngle(angle < -180 ? (360 + angle) : angle, true);\n call('transition', selectedElements);\n break;\n } default:\n break;\n }\n\n /**\n * The mouse has moved on the canvas area.\n * @event module:svgcanvas.SvgCanvas#event:ext_mouseMove\n * @type {PlainObject}\n * @property {MouseEvent} event The event object\n * @property {Float} mouse_x x coordinate on canvas\n * @property {Float} mouse_y y coordinate on canvas\n * @property {Element} selected Refers to the first selected element\n */\n runExtensions('mouseMove', /** @type {module:svgcanvas.SvgCanvas#event:ext_mouseMove} */ {\n event: evt,\n mouse_x: mouseX,\n mouse_y: mouseY,\n selected\n });\n}; // mouseMove()\n\n// - in create mode, the element's opacity is set properly, we create an InsertElementCommand\n// and store it on the Undo stack\n// - in move/resize mode, the element's attributes which were affected by the move/resize are\n// identified, a ChangeElementCommand is created and stored on the stack for those attrs\n// this is done in when we recalculate the selected dimensions()\n/**\n *\n * @param {MouseEvent} evt\n * @fires module:svgcanvas.SvgCanvas#event:zoomed\n * @fires module:svgcanvas.SvgCanvas#event:changed\n * @fires module:svgcanvas.SvgCanvas#event:ext_mouseUp\n * @returns {void}\n */\nconst mouseUp = function (evt) {\n if (evt.button === 2) { return; }\n const tempJustSelected = justSelected;\n justSelected = null;\n if (!started) { return; }\n const pt = transformPoint(evt.pageX, evt.pageY, rootSctm),\n mouseX = pt.x * currentZoom,\n mouseY = pt.y * currentZoom,\n x = mouseX / currentZoom,\n y = mouseY / currentZoom;\n\n let element = getElem(getId());\n let keep = false;\n\n const realX = x;\n const realY = y;\n\n // TODO: Make true when in multi-unit mode\n const useUnit = false; // (curConfig.baseUnit !== 'px');\n started = false;\n let attrs, t;\n switch (currentMode) {\n // intentionally fall-through to select here\n case 'resize':\n case 'multiselect':\n if (!isNullish(rubberBox)) {\n rubberBox.setAttribute('display', 'none');\n curBBoxes = [];\n }\n currentMode = 'select';\n // Fallthrough\n case 'select':\n if (!isNullish(selectedElements[0])) {\n // if we only have one selected element\n if (isNullish(selectedElements[1])) {\n // set our current stroke/fill properties to the element's\n const selected = selectedElements[0];\n switch (selected.tagName) {\n case 'g':\n case 'use':\n case 'image':\n case 'foreignObject':\n break;\n default:\n curProperties.fill = selected.getAttribute('fill');\n curProperties.fill_opacity = selected.getAttribute('fill-opacity');\n curProperties.stroke = selected.getAttribute('stroke');\n curProperties.stroke_opacity = selected.getAttribute('stroke-opacity');\n curProperties.stroke_width = selected.getAttribute('stroke-width');\n curProperties.stroke_dasharray = selected.getAttribute('stroke-dasharray');\n curProperties.stroke_linejoin = selected.getAttribute('stroke-linejoin');\n curProperties.stroke_linecap = selected.getAttribute('stroke-linecap');\n }\n\n if (selected.tagName === 'text') {\n curText.font_size = selected.getAttribute('font-size');\n curText.font_family = selected.getAttribute('font-family');\n }\n selectorManager.requestSelector(selected).showGrips(true);\n\n // This shouldn't be necessary as it was done on mouseDown...\n // call('selected', [selected]);\n }\n // always recalculate dimensions to strip off stray identity transforms\n recalculateAllSelectedDimensions();\n // if it was being dragged/resized\n if (realX !== rStartX || realY !== rStartY) {\n const len = selectedElements.length;\n for (let i = 0; i < len; ++i) {\n if (isNullish(selectedElements[i])) { break; }\n if (!selectedElements[i].firstChild) {\n // Not needed for groups (incorrectly resizes elems), possibly not needed at all?\n selectorManager.requestSelector(selectedElements[i]).resize();\n }\n }\n // no change in position/size, so maybe we should move to pathedit\n } else {\n t = evt.target;\n if (selectedElements[0].nodeName === 'path' && isNullish(selectedElements[1])) {\n pathActions.select(selectedElements[0]);\n // if it was a path\n // else, if it was selected and this is a shift-click, remove it from selection\n } else if (evt.shiftKey) {\n if (tempJustSelected !== t) {\n canvas.removeFromSelection([t]);\n }\n }\n } // no change in mouse position\n\n // Remove non-scaling stroke\n if (supportsNonScalingStroke()) {\n const elem = selectedElements[0];\n if (elem) {\n elem.removeAttribute('style');\n walkTree(elem, function (el) {\n el.removeAttribute('style');\n });\n }\n }\n }\n return;\n case 'zoom': {\n if (!isNullish(rubberBox)) {\n rubberBox.setAttribute('display', 'none');\n }\n const factor = evt.shiftKey ? 0.5 : 2;\n call('zoomed', {\n x: Math.min(rStartX, realX),\n y: Math.min(rStartY, realY),\n width: Math.abs(realX - rStartX),\n height: Math.abs(realY - rStartY),\n factor\n });\n return;\n } case 'fhpath': {\n // Check that the path contains at least 2 points; a degenerate one-point path\n // causes problems.\n // Webkit ignores how we set the points attribute with commas and uses space\n // to separate all coordinates, see https://bugs.webkit.org/show_bug.cgi?id=29870\n sumDistance = 0;\n controllPoint2 = {x: 0, y: 0};\n controllPoint1 = {x: 0, y: 0};\n start = {x: 0, y: 0};\n end = {x: 0, y: 0};\n const coords = element.getAttribute('points');\n const commaIndex = coords.indexOf(',');\n if (commaIndex >= 0) {\n keep = coords.includes(',', commaIndex + 1);\n } else {\n keep = coords.includes(' ', coords.indexOf(' ') + 1);\n }\n if (keep) {\n element = pathActions.smoothPolylineIntoPath(element);\n }\n break;\n } case 'line':\n attrs = $(element).attr(['x1', 'x2', 'y1', 'y2']);\n keep = (attrs.x1 !== attrs.x2 || attrs.y1 !== attrs.y2);\n break;\n case 'foreignObject':\n case 'square':\n case 'rect':\n case 'image':\n attrs = $(element).attr(['width', 'height']);\n // Image should be kept regardless of size (use inherit dimensions later)\n keep = (attrs.width || attrs.height) || currentMode === 'image';\n break;\n case 'circle':\n keep = (element.getAttribute('r') !== '0');\n break;\n case 'ellipse':\n attrs = $(element).attr(['rx', 'ry']);\n keep = (attrs.rx || attrs.ry);\n break;\n case 'fhellipse':\n if ((freehand.maxx - freehand.minx) > 0 &&\n (freehand.maxy - freehand.miny) > 0) {\n element = addSVGElementFromJson({\n element: 'ellipse',\n curStyles: true,\n attr: {\n cx: (freehand.minx + freehand.maxx) / 2,\n cy: (freehand.miny + freehand.maxy) / 2,\n rx: (freehand.maxx - freehand.minx) / 2,\n ry: (freehand.maxy - freehand.miny) / 2,\n id: getId()\n }\n });\n call('changed', [element]);\n keep = true;\n }\n break;\n case 'fhrect':\n if ((freehand.maxx - freehand.minx) > 0 &&\n (freehand.maxy - freehand.miny) > 0) {\n element = addSVGElementFromJson({\n element: 'rect',\n curStyles: true,\n attr: {\n x: freehand.minx,\n y: freehand.miny,\n width: (freehand.maxx - freehand.minx),\n height: (freehand.maxy - freehand.miny),\n id: getId()\n }\n });\n call('changed', [element]);\n keep = true;\n }\n break;\n case 'text':\n keep = true;\n selectOnly([element]);\n textActions.start(element);\n break;\n case 'path': {\n // set element to null here so that it is not removed nor finalized\n element = null;\n // continue to be set to true so that mouseMove happens\n started = true;\n\n const res = pathActions.mouseUp(evt, element, mouseX, mouseY);\n ({element} = res);\n ({keep} = res);\n break;\n } case 'pathedit':\n keep = true;\n element = null;\n pathActions.mouseUp(evt);\n break;\n case 'textedit':\n keep = false;\n element = null;\n textActions.mouseUp(evt, mouseX, mouseY);\n break;\n case 'rotate': {\n keep = true;\n element = null;\n currentMode = 'select';\n const batchCmd = canvas.undoMgr.finishUndoableChange();\n if (!batchCmd.isEmpty()) {\n addCommandToHistory(batchCmd);\n }\n // perform recalculation to weed out any stray identity transforms that might get stuck\n recalculateAllSelectedDimensions();\n call('changed', selectedElements);\n break;\n } default:\n // This could occur in an extension\n break;\n }\n\n /**\n * The main (left) mouse button is released (anywhere).\n * @event module:svgcanvas.SvgCanvas#event:ext_mouseUp\n * @type {PlainObject}\n * @property {MouseEvent} event The event object\n * @property {Float} mouse_x x coordinate on canvas\n * @property {Float} mouse_y y coordinate on canvas\n */\n const extResult = runExtensions('mouseUp', /** @type {module:svgcanvas.SvgCanvas#event:ext_mouseUp} */ {\n event: evt,\n mouse_x: mouseX,\n mouse_y: mouseY\n }, true);\n\n $.each(extResult, function (i, r) {\n if (r) {\n keep = r.keep || keep;\n ({element} = r);\n started = r.started || started;\n }\n });\n\n if (!keep && !isNullish(element)) {\n getCurrentDrawing().releaseId(getId());\n element.remove();\n element = null;\n\n t = evt.target;\n\n // if this element is in a group, go up until we reach the top-level group\n // just below the layer groups\n // TODO: once we implement links, we also would have to check for <a> elements\n while (t && t.parentNode && t.parentNode.parentNode && t.parentNode.parentNode.tagName === 'g') {\n t = t.parentNode;\n }\n // if we are not in the middle of creating a path, and we've clicked on some shape,\n // then go to Select mode.\n // WebKit returns <div> when the canvas is clicked, Firefox/Opera return <svg>\n if ((currentMode !== 'path' || !drawnPath) &&\n t && t.parentNode &&\n t.parentNode.id !== 'selectorParentGroup' &&\n t.id !== 'svgcanvas' && t.id !== 'svgroot'\n ) {\n // switch into \"select\" mode if we've clicked on an element\n canvas.setMode('select');\n selectOnly([t], true);\n }\n } else if (!isNullish(element)) {\n /**\n * @name module:svgcanvas.SvgCanvas#addedNew\n * @type {boolean}\n */\n canvas.addedNew = true;\n\n if (useUnit) { convertAttrs(element); }\n\n let aniDur = 0.2;\n let cAni;\n if (opacAni.beginElement && parseFloat(element.getAttribute('opacity')) !== curShape.opacity) {\n cAni = $(opacAni).clone().attr({\n to: curShape.opacity,\n dur: aniDur\n }).appendTo(element);\n try {\n // Fails in FF4 on foreignObject\n cAni[0].beginElement();\n } catch (e) {}\n } else {\n aniDur = 0;\n }\n\n // Ideally this would be done on the endEvent of the animation,\n // but that doesn't seem to be supported in Webkit\n setTimeout(function () {\n if (cAni) { cAni.remove(); }\n element.setAttribute('opacity', curShape.opacity);\n element.setAttribute('style', 'pointer-events:inherit');\n cleanupElement(element);\n if (currentMode === 'path') {\n pathActions.toEditMode(element);\n } else if (curConfig.selectNew) {\n selectOnly([element], true);\n }\n // we create the insert command that is stored on the stack\n // undo means to call cmd.unapply(), redo means to call cmd.apply()\n addCommandToHistory(new InsertElementCommand(element));\n\n call('changed', [element]);\n }, aniDur * 1000);\n }\n\n startTransform = null;\n};\n\nconst dblClick = function (evt) {\n const evtTarget = evt.target;\n const parent = evtTarget.parentNode;\n\n // Do nothing if already in current group\n if (parent === currentGroup) { return; }\n\n let mouseTarget = getMouseTarget(evt);\n const {tagName} = mouseTarget;\n\n if (tagName === 'text' && currentMode !== 'textedit') {\n const pt = transformPoint(evt.pageX, evt.pageY, rootSctm);\n textActions.select(mouseTarget, pt.x, pt.y);\n }\n\n if ((tagName === 'g' || tagName === 'a') &&\n getRotationAngle(mouseTarget)\n ) {\n // TODO: Allow method of in-group editing without having to do\n // this (similar to editing rotated paths)\n\n // Ungroup and regroup\n pushGroupProperties(mouseTarget);\n mouseTarget = selectedElements[0];\n clearSelection(true);\n }\n // Reset context\n if (currentGroup) {\n draw.leaveContext();\n }\n\n if ((parent.tagName !== 'g' && parent.tagName !== 'a') ||\n parent === getCurrentDrawing().getCurrentLayer() ||\n mouseTarget === selectorManager.selectorParentGroup\n ) {\n // Escape from in-group edit\n return;\n }\n draw.setContext(mouseTarget);\n};\n\n// prevent links from being followed in the canvas\nconst handleLinkInCanvas = function (e) {\n e.preventDefault();\n return false;\n};\n\n// Added mouseup to the container here.\n// TODO(codedread): Figure out why after the Closure compiler, the window mouseup is ignored.\n$(container).mousedown(mouseDown).mousemove(mouseMove).click(handleLinkInCanvas).dblclick(dblClick).mouseup(mouseUp);\n// $(window).mouseup(mouseUp);\n\n// TODO(rafaelcastrocouto): User preference for shift key and zoom factor\n$(container).bind(\n 'mousewheel DOMMouseScroll',\n /**\n * @param {Event} e\n * @fires module:svgcanvas.SvgCanvas#event:updateCanvas\n * @fires module:svgcanvas.SvgCanvas#event:zoomDone\n * @returns {void}\n */\n function (e) {\n if (!e.shiftKey) { return; }\n\n e.preventDefault();\n const evt = e.originalEvent;\n\n rootSctm = $('#svgcontent g')[0].getScreenCTM().inverse();\n\n const workarea = $('#workarea');\n const scrbar = 15;\n const rulerwidth = curConfig.showRulers ? 16 : 0;\n\n // mouse relative to content area in content pixels\n const pt = transformPoint(evt.pageX, evt.pageY, rootSctm);\n\n // full work area width in screen pixels\n const editorFullW = workarea.width();\n const editorFullH = workarea.height();\n\n // work area width minus scroll and ruler in screen pixels\n const editorW = editorFullW - scrbar - rulerwidth;\n const editorH = editorFullH - scrbar - rulerwidth;\n\n // work area width in content pixels\n const workareaViewW = editorW * rootSctm.a;\n const workareaViewH = editorH * rootSctm.d;\n\n // content offset from canvas in screen pixels\n const wOffset = workarea.offset();\n const wOffsetLeft = wOffset.left + rulerwidth;\n const wOffsetTop = wOffset.top + rulerwidth;\n\n const delta = (evt.wheelDelta) ? evt.wheelDelta : (evt.detail) ? -evt.detail : 0;\n if (!delta) { return; }\n\n let factor = Math.max(3 / 4, Math.min(4 / 3, (delta)));\n\n let wZoom, hZoom;\n if (factor > 1) {\n wZoom = Math.ceil(editorW / workareaViewW * factor * 100) / 100;\n hZoom = Math.ceil(editorH / workareaViewH * factor * 100) / 100;\n } else {\n wZoom = Math.floor(editorW / workareaViewW * factor * 100) / 100;\n hZoom = Math.floor(editorH / workareaViewH * factor * 100) / 100;\n }\n let zoomlevel = Math.min(wZoom, hZoom);\n zoomlevel = Math.min(10, Math.max(0.01, zoomlevel));\n if (zoomlevel === currentZoom) {\n return;\n }\n factor = zoomlevel / currentZoom;\n\n // top left of workarea in content pixels before zoom\n const topLeftOld = transformPoint(wOffsetLeft, wOffsetTop, rootSctm);\n\n // top left of workarea in content pixels after zoom\n const topLeftNew = {\n x: pt.x - (pt.x - topLeftOld.x) / factor,\n y: pt.y - (pt.y - topLeftOld.y) / factor\n };\n\n // top left of workarea in canvas pixels relative to content after zoom\n const topLeftNewCanvas = {\n x: topLeftNew.x * zoomlevel,\n y: topLeftNew.y * zoomlevel\n };\n\n // new center in canvas pixels\n const newCtr = {\n x: topLeftNewCanvas.x - rulerwidth + editorFullW / 2,\n y: topLeftNewCanvas.y - rulerwidth + editorFullH / 2\n };\n\n canvas.setZoom(zoomlevel);\n $('#zoom').val((zoomlevel * 100).toFixed(1));\n\n call('updateCanvas', {center: false, newCtr});\n call('zoomDone');\n }\n);\n}());\n\n/* eslint-disable jsdoc/require-property */\n/**\n* Group: Text edit functions\n* Functions relating to editing text elements.\n* @namespace {PlainObject} textActions\n* @memberof module:svgcanvas.SvgCanvas#\n*/\nconst textActions = canvas.textActions = (function () {\n/* eslint-enable jsdoc/require-property */\nlet curtext;\nlet textinput;\nlet cursor;\nlet selblock;\nlet blinker;\nlet chardata = [];\nlet textbb; // , transbb;\nlet matrix;\nlet lastX, lastY;\nlet allowDbl;\n\n/**\n *\n * @param {Integer} index\n * @returns {void}\n */\nfunction setCursor (index) {\n const empty = (textinput.value === '');\n $(textinput).focus();\n\n if (!arguments.length) {\n if (empty) {\n index = 0;\n } else {\n if (textinput.selectionEnd !== textinput.selectionStart) { return; }\n index = textinput.selectionEnd;\n }\n }\n\n const charbb = chardata[index];\n if (!empty) {\n textinput.setSelectionRange(index, index);\n }\n cursor = getElem('text_cursor');\n if (!cursor) {\n cursor = document.createElementNS(NS.SVG, 'line');\n assignAttributes(cursor, {\n id: 'text_cursor',\n stroke: '#333',\n 'stroke-width': 1\n });\n cursor = getElem('selectorParentGroup').appendChild(cursor);\n }\n\n if (!blinker) {\n blinker = setInterval(function () {\n const show = (cursor.getAttribute('display') === 'none');\n cursor.setAttribute('display', show ? 'inline' : 'none');\n }, 600);\n }\n\n const startPt = ptToScreen(charbb.x, textbb.y);\n const endPt = ptToScreen(charbb.x, (textbb.y + textbb.height));\n\n assignAttributes(cursor, {\n x1: startPt.x,\n y1: startPt.y,\n x2: endPt.x,\n y2: endPt.y,\n visibility: 'visible',\n display: 'inline'\n });\n\n if (selblock) { selblock.setAttribute('d', ''); }\n}\n\n/**\n *\n * @param {Integer} start\n * @param {Integer} end\n * @param {boolean} skipInput\n * @returns {void}\n */\nfunction setSelection (start, end, skipInput) {\n if (start === end) {\n setCursor(end);\n return;\n }\n\n if (!skipInput) {\n textinput.setSelectionRange(start, end);\n }\n\n selblock = getElem('text_selectblock');\n if (!selblock) {\n selblock = document.createElementNS(NS.SVG, 'path');\n assignAttributes(selblock, {\n id: 'text_selectblock',\n fill: 'green',\n opacity: 0.5,\n style: 'pointer-events:none'\n });\n getElem('selectorParentGroup').append(selblock);\n }\n\n const startbb = chardata[start];\n const endbb = chardata[end];\n\n cursor.setAttribute('visibility', 'hidden');\n\n const tl = ptToScreen(startbb.x, textbb.y),\n tr = ptToScreen(startbb.x + (endbb.x - startbb.x), textbb.y),\n bl = ptToScreen(startbb.x, textbb.y + textbb.height),\n br = ptToScreen(startbb.x + (endbb.x - startbb.x), textbb.y + textbb.height);\n\n const dstr = 'M' + tl.x + ',' + tl.y +\n ' L' + tr.x + ',' + tr.y +\n ' ' + br.x + ',' + br.y +\n ' ' + bl.x + ',' + bl.y + 'z';\n\n assignAttributes(selblock, {\n d: dstr,\n display: 'inline'\n });\n}\n\n/**\n *\n * @param {Float} mouseX\n * @param {Float} mouseY\n * @returns {Integer}\n */\nfunction getIndexFromPoint (mouseX, mouseY) {\n // Position cursor here\n const pt = svgroot.createSVGPoint();\n pt.x = mouseX;\n pt.y = mouseY;\n\n // No content, so return 0\n if (chardata.length === 1) { return 0; }\n // Determine if cursor should be on left or right of character\n let charpos = curtext.getCharNumAtPosition(pt);\n if (charpos < 0) {\n // Out of text range, look at mouse coords\n charpos = chardata.length - 2;\n if (mouseX <= chardata[0].x) {\n charpos = 0;\n }\n } else if (charpos >= chardata.length - 2) {\n charpos = chardata.length - 2;\n }\n const charbb = chardata[charpos];\n const mid = charbb.x + (charbb.width / 2);\n if (mouseX > mid) {\n charpos++;\n }\n return charpos;\n}\n\n/**\n *\n * @param {Float} mouseX\n * @param {Float} mouseY\n * @returns {void}\n */\nfunction setCursorFromPoint (mouseX, mouseY) {\n setCursor(getIndexFromPoint(mouseX, mouseY));\n}\n\n/**\n *\n * @param {Float} x\n * @param {Float} y\n * @param {boolean} apply\n * @returns {void}\n */\nfunction setEndSelectionFromPoint (x, y, apply) {\n const i1 = textinput.selectionStart;\n const i2 = getIndexFromPoint(x, y);\n\n const start = Math.min(i1, i2);\n const end = Math.max(i1, i2);\n setSelection(start, end, !apply);\n}\n\n/**\n *\n * @param {Float} xIn\n * @param {Float} yIn\n * @returns {module:math.XYObject}\n */\nfunction screenToPt (xIn, yIn) {\n const out = {\n x: xIn,\n y: yIn\n };\n\n out.x /= currentZoom;\n out.y /= currentZoom;\n\n if (matrix) {\n const pt = transformPoint(out.x, out.y, matrix.inverse());\n out.x = pt.x;\n out.y = pt.y;\n }\n\n return out;\n}\n\n/**\n *\n * @param {Float} xIn\n * @param {Float} yIn\n * @returns {module:math.XYObject}\n */\nfunction ptToScreen (xIn, yIn) {\n const out = {\n x: xIn,\n y: yIn\n };\n\n if (matrix) {\n const pt = transformPoint(out.x, out.y, matrix);\n out.x = pt.x;\n out.y = pt.y;\n }\n\n out.x *= currentZoom;\n out.y *= currentZoom;\n\n return out;\n}\n\n/*\n// Not currently in use\nfunction hideCursor () {\n if (cursor) {\n cursor.setAttribute('visibility', 'hidden');\n }\n}\n*/\n\n/**\n *\n * @param {Event} evt\n * @returns {void}\n */\nfunction selectAll (evt) {\n setSelection(0, curtext.textContent.length);\n $(this).unbind(evt);\n}\n\n/**\n *\n * @param {Event} evt\n * @returns {void}\n */\nfunction selectWord (evt) {\n if (!allowDbl || !curtext) { return; }\n\n const ept = transformPoint(evt.pageX, evt.pageY, rootSctm),\n mouseX = ept.x * currentZoom,\n mouseY = ept.y * currentZoom;\n const pt = screenToPt(mouseX, mouseY);\n\n const index = getIndexFromPoint(pt.x, pt.y);\n const str = curtext.textContent;\n const first = str.substr(0, index).replace(/[a-z\\d]+$/i, '').length;\n const m = str.substr(index).match(/^[a-z\\d]+/i);\n const last = (m ? m[0].length : 0) + index;\n setSelection(first, last);\n\n // Set tripleclick\n $(evt.target).click(selectAll);\n setTimeout(function () {\n $(evt.target).unbind('click', selectAll);\n }, 300);\n}\n\nreturn /** @lends module:svgcanvas.SvgCanvas#textActions */ {\n /**\n * @param {Element} target\n * @param {Float} x\n * @param {Float} y\n * @returns {void}\n */\n select (target, x, y) {\n curtext = target;\n textActions.toEditMode(x, y);\n },\n /**\n * @param {Element} elem\n * @returns {void}\n */\n start (elem) {\n curtext = elem;\n textActions.toEditMode();\n },\n /**\n * @param {external:MouseEvent} evt\n * @param {Element} mouseTarget\n * @param {Float} startX\n * @param {Float} startY\n * @returns {void}\n */\n mouseDown (evt, mouseTarget, startX, startY) {\n const pt = screenToPt(startX, startY);\n\n textinput.focus();\n setCursorFromPoint(pt.x, pt.y);\n lastX = startX;\n lastY = startY;\n\n // TODO: Find way to block native selection\n },\n /**\n * @param {Float} mouseX\n * @param {Float} mouseY\n * @returns {void}\n */\n mouseMove (mouseX, mouseY) {\n const pt = screenToPt(mouseX, mouseY);\n setEndSelectionFromPoint(pt.x, pt.y);\n },\n /**\n * @param {external:MouseEvent} evt\n * @param {Float} mouseX\n * @param {Float} mouseY\n * @returns {void}\n */\n mouseUp (evt, mouseX, mouseY) {\n const pt = screenToPt(mouseX, mouseY);\n\n setEndSelectionFromPoint(pt.x, pt.y, true);\n\n // TODO: Find a way to make this work: Use transformed BBox instead of evt.target\n // if (lastX === mouseX && lastY === mouseY\n // && !rectsIntersect(transbb, {x: pt.x, y: pt.y, width: 0, height: 0})) {\n // textActions.toSelectMode(true);\n // }\n\n if (\n evt.target !== curtext &&\n mouseX < lastX + 2 &&\n mouseX > lastX - 2 &&\n mouseY < lastY + 2 &&\n mouseY > lastY - 2\n ) {\n textActions.toSelectMode(true);\n }\n },\n /**\n * @function\n * @param {Integer} index\n * @returns {void}\n */\n setCursor,\n /**\n * @param {Float} x\n * @param {Float} y\n * @returns {void}\n */\n toEditMode (x, y) {\n allowDbl = false;\n currentMode = 'textedit';\n selectorManager.requestSelector(curtext).showGrips(false);\n // Make selector group accept clicks\n /* const selector = */ selectorManager.requestSelector(curtext); // Do we need this? Has side effect of setting lock, so keeping for now, but next line wasn't being used\n // const sel = selector.selectorRect;\n\n textActions.init();\n\n $(curtext).css('cursor', 'text');\n\n // if (supportsEditableText()) {\n // curtext.setAttribute('editable', 'simple');\n // return;\n // }\n\n if (!arguments.length) {\n setCursor();\n } else {\n const pt = screenToPt(x, y);\n setCursorFromPoint(pt.x, pt.y);\n }\n\n setTimeout(function () {\n allowDbl = true;\n }, 300);\n },\n /**\n * @param {boolean|Element} selectElem\n * @fires module:svgcanvas.SvgCanvas#event:selected\n * @returns {void}\n */\n toSelectMode (selectElem) {\n currentMode = 'select';\n clearInterval(blinker);\n blinker = null;\n if (selblock) { $(selblock).attr('display', 'none'); }\n if (cursor) { $(cursor).attr('visibility', 'hidden'); }\n $(curtext).css('cursor', 'move');\n\n if (selectElem) {\n clearSelection();\n $(curtext).css('cursor', 'move');\n\n call('selected', [curtext]);\n addToSelection([curtext], true);\n }\n if (curtext && !curtext.textContent.length) {\n // No content, so delete\n canvas.deleteSelectedElements();\n }\n\n $(textinput).blur();\n\n curtext = false;\n\n // if (supportsEditableText()) {\n // curtext.removeAttribute('editable');\n // }\n },\n /**\n * @param {Element} elem\n * @returns {void}\n */\n setInputElem (elem) {\n textinput = elem;\n // $(textinput).blur(hideCursor);\n },\n /**\n * @returns {void}\n */\n clear () {\n if (currentMode === 'textedit') {\n textActions.toSelectMode();\n }\n },\n /**\n * @param {Element} inputElem Not in use\n * @returns {void}\n */\n init (inputElem) {\n if (!curtext) { return; }\n let i, end;\n // if (supportsEditableText()) {\n // curtext.select();\n // return;\n // }\n\n if (!curtext.parentNode) {\n // Result of the ffClone, need to get correct element\n curtext = selectedElements[0];\n selectorManager.requestSelector(curtext).showGrips(false);\n }\n\n const str = curtext.textContent;\n const len = str.length;\n\n const xform = curtext.getAttribute('transform');\n\n textbb = utilsGetBBox(curtext);\n\n matrix = xform ? getMatrix(curtext) : null;\n\n chardata = [];\n chardata.length = len;\n textinput.focus();\n\n $(curtext).unbind('dblclick', selectWord).dblclick(selectWord);\n\n if (!len) {\n end = {x: textbb.x + (textbb.width / 2), width: 0};\n }\n\n for (i = 0; i < len; i++) {\n const start = curtext.getStartPositionOfChar(i);\n end = curtext.getEndPositionOfChar(i);\n\n if (!supportsGoodTextCharPos()) {\n const offset = canvas.contentW * currentZoom;\n start.x -= offset;\n end.x -= offset;\n\n start.x /= currentZoom;\n end.x /= currentZoom;\n }\n\n // Get a \"bbox\" equivalent for each character. Uses the\n // bbox data of the actual text for y, height purposes\n\n // TODO: Decide if y, width and height are actually necessary\n chardata[i] = {\n x: start.x,\n y: textbb.y, // start.y?\n width: end.x - start.x,\n height: textbb.height\n };\n }\n\n // Add a last bbox for cursor at end of text\n chardata.push({\n x: end.x,\n width: 0\n });\n setSelection(textinput.selectionStart, textinput.selectionEnd, true);\n }\n};\n}());\n\n/**\n* Group: Serialization.\n*/\n\n/**\n* Looks at DOM elements inside the `<defs>` to see if they are referred to,\n* removes them from the DOM if they are not.\n* @function module:svgcanvas.SvgCanvas#removeUnusedDefElems\n* @returns {Integer} The number of elements that were removed\n*/\nconst removeUnusedDefElems = this.removeUnusedDefElems = function () {\n const defs = svgcontent.getElementsByTagNameNS(NS.SVG, 'defs');\n if (!defs || !defs.length) { return 0; }\n\n // if (!defs.firstChild) { return; }\n\n const defelemUses = [];\n let numRemoved = 0;\n const attrs = ['fill', 'stroke', 'filter', 'marker-start', 'marker-mid', 'marker-end'];\n const alen = attrs.length;\n\n const allEls = svgcontent.getElementsByTagNameNS(NS.SVG, '*');\n const allLen = allEls.length;\n\n let i, j;\n for (i = 0; i < allLen; i++) {\n const el = allEls[i];\n for (j = 0; j < alen; j++) {\n const ref = getUrlFromAttr(el.getAttribute(attrs[j]));\n if (ref) {\n defelemUses.push(ref.substr(1));\n }\n }\n\n // gradients can refer to other gradients\n const href = getHref(el);\n if (href && href.startsWith('#')) {\n defelemUses.push(href.substr(1));\n }\n }\n\n const defelems = $(defs).find('linearGradient, radialGradient, filter, marker, svg, symbol');\n i = defelems.length;\n while (i--) {\n const defelem = defelems[i];\n const {id} = defelem;\n if (!defelemUses.includes(id)) {\n // Not found, so remove (but remember)\n removedElements[id] = defelem;\n defelem.remove();\n numRemoved++;\n }\n }\n\n return numRemoved;\n};\n\n/**\n* Main function to set up the SVG content for output.\n* @function module:svgcanvas.SvgCanvas#svgCanvasToString\n* @returns {string} The SVG image for output\n*/\nthis.svgCanvasToString = function () {\n // keep calling it until there are none to remove\n while (removeUnusedDefElems() > 0) {} // eslint-disable-line no-empty\n\n pathActions.clear(true);\n\n // Keep SVG-Edit comment on top\n $.each(svgcontent.childNodes, function (i, node) {\n if (i && node.nodeType === 8 && node.data.includes('Created with')) {\n svgcontent.firstChild.before(node);\n }\n });\n\n // Move out of in-group editing mode\n if (currentGroup) {\n draw.leaveContext();\n selectOnly([currentGroup]);\n }\n\n const nakedSvgs = [];\n\n // Unwrap gsvg if it has no special attributes (only id and style)\n $(svgcontent).find('g:data(gsvg)').each(function () {\n const attrs = this.attributes;\n let len = attrs.length;\n for (let i = 0; i < len; i++) {\n if (attrs[i].nodeName === 'id' || attrs[i].nodeName === 'style') {\n len--;\n }\n }\n // No significant attributes, so ungroup\n if (len <= 0) {\n const svg = this.firstChild;\n nakedSvgs.push(svg);\n $(this).replaceWith(svg);\n }\n });\n const output = this.svgToString(svgcontent, 0);\n\n // Rewrap gsvg\n if (nakedSvgs.length) {\n $(nakedSvgs).each(function () {\n groupSvgElem(this);\n });\n }\n\n return output;\n};\n\n/**\n* Sub function ran on each SVG element to convert it to a string as desired.\n* @function module:svgcanvas.SvgCanvas#svgToString\n* @param {Element} elem - The SVG element to convert\n* @param {Integer} indent - Number of spaces to indent this tag\n* @returns {string} The given element as an SVG tag\n*/\nthis.svgToString = function (elem, indent) {\n const out = [];\n const unit = curConfig.baseUnit;\n const unitRe = new RegExp('^-?[\\\\d\\\\.]+' + unit + '$');\n\n if (elem) {\n cleanupElement(elem);\n const attrs = [...elem.attributes];\n const childs = elem.childNodes;\n attrs.sort((a, b) => {\n return a.name > b.name ? -1 : 1;\n });\n\n for (let i = 0; i < indent; i++) { out.push(' '); }\n out.push('<'); out.push(elem.nodeName);\n if (elem.id === 'svgcontent') {\n // Process root element separately\n const res = getResolution();\n\n const vb = '';\n // TODO: Allow this by dividing all values by current baseVal\n // Note that this also means we should properly deal with this on import\n // if (curConfig.baseUnit !== 'px') {\n // const unit = curConfig.baseUnit;\n // const unitM = getTypeMap()[unit];\n // res.w = shortFloat(res.w / unitM);\n // res.h = shortFloat(res.h / unitM);\n // vb = ' viewBox=\"' + [0, 0, res.w, res.h].join(' ') + '\"';\n // res.w += unit;\n // res.h += unit;\n // }\n\n if (unit !== 'px') {\n res.w = convertUnit(res.w, unit) + unit;\n res.h = convertUnit(res.h, unit) + unit;\n }\n\n out.push(' width=\"' + res.w + '\" height=\"' + res.h + '\"' + vb + ' xmlns=\"' + NS.SVG + '\"');\n\n const nsuris = {};\n\n // Check elements for namespaces, add if found\n $(elem).find('*').andSelf().each(function () {\n // const el = this;\n // for some elements have no attribute\n const uri = this.namespaceURI;\n if (uri && !nsuris[uri] && nsMap[uri] && nsMap[uri] !== 'xmlns' && nsMap[uri] !== 'xml') {\n nsuris[uri] = true;\n out.push(' xmlns:' + nsMap[uri] + '=\"' + uri + '\"');\n }\n\n $.each(this.attributes, function (i, attr) {\n const u = attr.namespaceURI;\n if (u && !nsuris[u] && nsMap[u] !== 'xmlns' && nsMap[u] !== 'xml') {\n nsuris[u] = true;\n out.push(' xmlns:' + nsMap[u] + '=\"' + u + '\"');\n }\n });\n });\n\n let i = attrs.length;\n const attrNames = ['width', 'height', 'xmlns', 'x', 'y', 'viewBox', 'id', 'overflow'];\n while (i--) {\n const attr = attrs[i];\n const attrVal = toXml(attr.value);\n\n // Namespaces have already been dealt with, so skip\n if (attr.nodeName.startsWith('xmlns:')) { continue; }\n\n // only serialize attributes we don't use internally\n if (attrVal !== '' && !attrNames.includes(attr.localName)) {\n if (!attr.namespaceURI || nsMap[attr.namespaceURI]) {\n out.push(' ');\n out.push(attr.nodeName); out.push('=\"');\n out.push(attrVal); out.push('\"');\n }\n }\n }\n } else {\n // Skip empty defs\n if (elem.nodeName === 'defs' && !elem.firstChild) { return ''; }\n\n const mozAttrs = ['-moz-math-font-style', '_moz-math-font-style'];\n for (let i = attrs.length - 1; i >= 0; i--) {\n const attr = attrs[i];\n let attrVal = toXml(attr.value);\n // remove bogus attributes added by Gecko\n if (mozAttrs.includes(attr.localName)) { continue; }\n if (attrVal !== '') {\n if (attrVal.startsWith('pointer-events')) { continue; }\n if (attr.localName === 'class' && attrVal.startsWith('se_')) { continue; }\n out.push(' ');\n if (attr.localName === 'd') { attrVal = pathActions.convertPath(elem, true); }\n if (!isNaN(attrVal)) {\n attrVal = shortFloat(attrVal);\n } else if (unitRe.test(attrVal)) {\n attrVal = shortFloat(attrVal) + unit;\n }\n\n // Embed images when saving\n if (saveOptions.apply &&\n elem.nodeName === 'image' &&\n attr.localName === 'href' &&\n saveOptions.images &&\n saveOptions.images === 'embed'\n ) {\n const img = encodableImages[attrVal];\n if (img) { attrVal = img; }\n }\n\n // map various namespaces to our fixed namespace prefixes\n // (the default xmlns attribute itself does not get a prefix)\n if (!attr.namespaceURI || attr.namespaceURI === NS.SVG || nsMap[attr.namespaceURI]) {\n out.push(attr.nodeName); out.push('=\"');\n out.push(attrVal); out.push('\"');\n }\n }\n }\n }\n\n if (elem.hasChildNodes()) {\n out.push('>');\n indent++;\n let bOneLine = false;\n\n for (let i = 0; i < childs.length; i++) {\n const child = childs.item(i);\n switch (child.nodeType) {\n case 1: // element node\n out.push('\\n');\n out.push(this.svgToString(childs.item(i), indent));\n break;\n case 3: { // text node\n const str = child.nodeValue.replace(/^\\s+|\\s+$/g, '');\n if (str !== '') {\n bOneLine = true;\n out.push(String(toXml(str)));\n }\n break;\n } case 4: // cdata node\n out.push('\\n');\n out.push(new Array(indent + 1).join(' '));\n out.push('<![CDATA[');\n out.push(child.nodeValue);\n out.push(']]>');\n break;\n case 8: // comment\n out.push('\\n');\n out.push(new Array(indent + 1).join(' '));\n out.push('<!--');\n out.push(child.data);\n out.push('-->');\n break;\n } // switch on node type\n }\n indent--;\n if (!bOneLine) {\n out.push('\\n');\n for (let i = 0; i < indent; i++) { out.push(' '); }\n }\n out.push('</'); out.push(elem.nodeName); out.push('>');\n } else {\n out.push('/>');\n }\n }\n return out.join('');\n}; // end svgToString()\n\n/**\n * Function to run when image data is found.\n * @callback module:svgcanvas.ImageEmbeddedCallback\n * @param {string|false} result Data URL\n * @returns {void}\n */\n/**\n* Converts a given image file to a data URL when possible, then runs a given callback.\n* @function module:svgcanvas.SvgCanvas#embedImage\n* @param {string} src - The path/URL of the image\n* @returns {Promise<string|false>} Resolves to a Data URL (string|false)\n*/\nthis.embedImage = function (src) {\n // Todo: Remove this Promise in favor of making an async/await `Image.load` utility\n return new Promise(function (resolve, reject) { // eslint-disable-line promise/avoid-new\n // load in the image and once it's loaded, get the dimensions\n $(new Image()).load(function (response, status, xhr) {\n if (status === 'error') {\n reject(new Error('Error loading image: ' + xhr.status + ' ' + xhr.statusText));\n return;\n }\n // create a canvas the same size as the raster image\n const cvs = document.createElement('canvas');\n cvs.width = this.width;\n cvs.height = this.height;\n // load the raster image into the canvas\n cvs.getContext('2d').drawImage(this, 0, 0);\n // retrieve the data: URL\n try {\n let urldata = ';svgedit_url=' + encodeURIComponent(src);\n urldata = cvs.toDataURL().replace(';base64', urldata + ';base64');\n encodableImages[src] = urldata;\n } catch (e) {\n encodableImages[src] = false;\n }\n lastGoodImgUrl = src;\n resolve(encodableImages[src]);\n }).attr('src', src);\n });\n};\n\n/**\n* Sets a given URL to be a \"last good image\" URL.\n* @function module:svgcanvas.SvgCanvas#setGoodImage\n* @param {string} val\n* @returns {void}\n*/\nthis.setGoodImage = function (val) {\n lastGoodImgUrl = val;\n};\n\n/**\n* Does nothing by default, handled by optional widget/extension.\n* @function module:svgcanvas.SvgCanvas#open\n* @returns {void}\n*/\nthis.open = function () {\n /* */\n};\n\n/**\n* Serializes the current drawing into SVG XML text and passes it to the 'saved' handler.\n* This function also includes the XML prolog. Clients of the `SvgCanvas` bind their save\n* function to the 'saved' event.\n* @function module:svgcanvas.SvgCanvas#save\n* @param {module:svgcanvas.SaveOptions} opts\n* @fires module:svgcanvas.SvgCanvas#event:saved\n* @returns {void}\n*/\nthis.save = function (opts) {\n // remove the selected outline before serializing\n clearSelection();\n // Update save options if provided\n if (opts) { $.extend(saveOptions, opts); }\n saveOptions.apply = true;\n\n // no need for doctype, see https://jwatt.org/svg/authoring/#doctype-declaration\n const str = this.svgCanvasToString();\n call('saved', str);\n};\n\n/**\n* @typedef {PlainObject} module:svgcanvas.IssuesAndCodes\n* @property {string[]} issueCodes The locale-independent code names\n* @property {string[]} issues The localized descriptions\n*/\n\n/**\n* Codes only is useful for locale-independent detection.\n* @returns {module:svgcanvas.IssuesAndCodes}\n*/\nfunction getIssues () {\n // remove the selected outline before serializing\n clearSelection();\n\n // Check for known CanVG issues\n const issues = [];\n const issueCodes = [];\n\n // Selector and notice\n const issueList = {\n feGaussianBlur: uiStrings.exportNoBlur,\n foreignObject: uiStrings.exportNoforeignObject,\n '[stroke-dasharray]': uiStrings.exportNoDashArray\n };\n const content = $(svgcontent);\n\n // Add font/text check if Canvas Text API is not implemented\n if (!('font' in $('<canvas>')[0].getContext('2d'))) {\n issueList.text = uiStrings.exportNoText;\n }\n\n $.each(issueList, function (sel, descr) {\n if (content.find(sel).length) {\n issueCodes.push(sel);\n issues.push(descr);\n }\n });\n return {issues, issueCodes};\n}\n\nlet canvg;\n/**\n* @typedef {\"feGaussianBlur\"|\"foreignObject\"|\"[stroke-dasharray]\"|\"text\"} module:svgcanvas.IssueCode\n*/\n/**\n* @typedef {PlainObject} module:svgcanvas.ImageExportedResults\n* @property {string} datauri Contents as a Data URL\n* @property {string} bloburl May be the empty string\n* @property {string} svg The SVG contents as a string\n* @property {string[]} issues The localization messages of `issueCodes`\n* @property {module:svgcanvas.IssueCode[]} issueCodes CanVG issues found with the SVG\n* @property {\"PNG\"|\"JPEG\"|\"BMP\"|\"WEBP\"|\"ICO\"} type The chosen image type\n* @property {\"image/png\"|\"image/jpeg\"|\"image/bmp\"|\"image/webp\"} mimeType The image MIME type\n* @property {Float} quality A decimal between 0 and 1 (for use with JPEG or WEBP)\n* @property {string} exportWindowName A convenience for passing along a `window.name` to target a window on which the export could be added\n*/\n\n/**\n* Generates a PNG (or JPG, BMP, WEBP) Data URL based on the current image,\n* then calls \"exported\" with an object including the string, image\n* information, and any issues found.\n* @function module:svgcanvas.SvgCanvas#rasterExport\n* @param {\"PNG\"|\"JPEG\"|\"BMP\"|\"WEBP\"|\"ICO\"} [imgType=\"PNG\"]\n* @param {Float} [quality] Between 0 and 1\n* @param {string} [exportWindowName]\n* @param {PlainObject} [opts]\n* @param {boolean} [opts.avoidEvent]\n* @fires module:svgcanvas.SvgCanvas#event:exported\n* @todo Confirm/fix ICO type\n* @returns {Promise<module:svgcanvas.ImageExportedResults>} Resolves to {@link module:svgcanvas.ImageExportedResults}\n*/\nthis.rasterExport = async function (imgType, quality, exportWindowName, opts = {}) {\n const type = imgType === 'ICO' ? 'BMP' : (imgType || 'PNG');\n const mimeType = 'image/' + type.toLowerCase();\n const {issues, issueCodes} = getIssues();\n const svg = this.svgCanvasToString();\n\n if (!canvg) {\n ({canvg} = await importSetGlobal(curConfig.canvgPath + 'canvg.js', {\n global: 'canvg'\n }));\n }\n if (!$('#export_canvas').length) {\n $('<canvas>', {id: 'export_canvas'}).hide().appendTo('body');\n }\n const c = $('#export_canvas')[0];\n c.width = canvas.contentW;\n c.height = canvas.contentH;\n\n await canvg(c, svg);\n // Todo: Make async/await utility in place of `toBlob`, so we can remove this constructor\n return new Promise((resolve, reject) => { // eslint-disable-line promise/avoid-new\n const dataURLType = type.toLowerCase();\n const datauri = quality\n ? c.toDataURL('image/' + dataURLType, quality)\n : c.toDataURL('image/' + dataURLType);\n let bloburl;\n /**\n * Called when `bloburl` is available for export.\n * @returns {void}\n */\n function done () {\n const obj = {\n datauri, bloburl, svg, issues, issueCodes, type: imgType,\n mimeType, quality, exportWindowName\n };\n if (!opts.avoidEvent) {\n call('exported', obj);\n }\n resolve(obj);\n }\n if (c.toBlob) {\n c.toBlob((blob) => {\n bloburl = createObjectURL(blob);\n done();\n }, mimeType, quality);\n return;\n }\n bloburl = dataURLToObjectURL(datauri);\n done();\n });\n};\n/**\n * @external jsPDF\n */\n/**\n * @typedef {void|\"save\"|\"arraybuffer\"|\"blob\"|\"datauristring\"|\"dataurlstring\"|\"dataurlnewwindow\"|\"datauri\"|\"dataurl\"} external:jsPDF.OutputType\n * @todo Newer version to add also allows these `outputType` values \"bloburi\"|\"bloburl\" which return strings, so document here and for `outputType` of `module:svgcanvas.PDFExportedResults` below if added\n*/\n/**\n* @typedef {PlainObject} module:svgcanvas.PDFExportedResults\n* @property {string} svg The SVG PDF output\n* @property {string|ArrayBuffer|Blob|window} output The output based on the `outputType`;\n* if `undefined`, \"datauristring\", \"dataurlstring\", \"datauri\",\n* or \"dataurl\", will be a string (`undefined` gives a document, while the others\n* build as Data URLs; \"datauri\" and \"dataurl\" change the location of the current page); if\n* \"arraybuffer\", will return `ArrayBuffer`; if \"blob\", returns a `Blob`;\n* if \"dataurlnewwindow\", will change the current page's location and return a string\n* if in Safari and no window object is found; otherwise opens in, and returns, a new `window`\n* object; if \"save\", will have the same return as \"dataurlnewwindow\" if\n* `navigator.getUserMedia` support is found without `URL.createObjectURL` support; otherwise\n* returns `undefined` but attempts to save\n* @property {external:jsPDF.OutputType} outputType\n* @property {string[]} issues The human-readable localization messages of corresponding `issueCodes`\n* @property {module:svgcanvas.IssueCode[]} issueCodes\n* @property {string} exportWindowName\n*/\n\n/**\n* Generates a PDF based on the current image, then calls \"exportedPDF\" with\n* an object including the string, the data URL, and any issues found.\n* @function module:svgcanvas.SvgCanvas#exportPDF\n* @param {string} [exportWindowName] Will also be used for the download file name here\n* @param {external:jsPDF.OutputType} [outputType=\"dataurlstring\"]\n* @fires module:svgcanvas.SvgCanvas#event:exportedPDF\n* @returns {Promise<module:svgcanvas.PDFExportedResults>} Resolves to {@link module:svgcanvas.PDFExportedResults}\n*/\nthis.exportPDF = async function (\n exportWindowName,\n outputType = isChrome() ? 'save' : undefined\n) {\n if (!window.jsPDF) {\n // Todo: Switch to `import()` when widely supported and available (also allow customization of path)\n await importScript([\n // We do not currently have these paths configurable as they are\n // currently global-only, so not Rolled-up\n 'jspdf/underscore-min.js',\n 'jspdf/jspdf.min.js'\n ]);\n\n const modularVersion = !('svgEditor' in window) ||\n !window.svgEditor ||\n window.svgEditor.modules !== false;\n // Todo: Switch to `import()` when widely supported and available (also allow customization of path)\n await importScript(curConfig.jspdfPath + 'jspdf.plugin.svgToPdf.js', {\n type: modularVersion\n ? 'module'\n : 'text/javascript'\n });\n // await importModule('jspdf/jspdf.plugin.svgToPdf.js');\n }\n\n const res = getResolution();\n const orientation = res.w > res.h ? 'landscape' : 'portrait';\n const unit = 'pt'; // curConfig.baseUnit; // We could use baseUnit, but that is presumably not intended for export purposes\n\n // Todo: Give options to use predefined jsPDF formats like \"a4\", etc. from pull-down (with option to keep customizable)\n const doc = jsPDF({\n orientation,\n unit,\n format: [res.w, res.h]\n // , compressPdf: true\n });\n const docTitle = getDocumentTitle();\n doc.setProperties({\n title: docTitle /* ,\n subject: '',\n author: '',\n keywords: '',\n creator: '' */\n });\n const {issues, issueCodes} = getIssues();\n const svg = this.svgCanvasToString();\n doc.addSVG(svg, 0, 0);\n\n // doc.output('save'); // Works to open in a new\n // window; todo: configure this and other export\n // options to optionally work in this manner as\n // opposed to opening a new tab\n outputType = outputType || 'dataurlstring';\n const obj = {svg, issues, issueCodes, exportWindowName, outputType};\n obj.output = doc.output(outputType, outputType === 'save' ? (exportWindowName || 'svg.pdf') : undefined);\n call('exportedPDF', obj);\n return obj;\n};\n\n/**\n* Returns the current drawing as raw SVG XML text.\n* @function module:svgcanvas.SvgCanvas#getSvgString\n* @returns {string} The current drawing as raw SVG XML text.\n*/\nthis.getSvgString = function () {\n saveOptions.apply = false;\n return this.svgCanvasToString();\n};\n\n/**\n* This function determines whether to use a nonce in the prefix, when\n* generating IDs for future documents in SVG-Edit.\n* If you're controlling SVG-Edit externally, and want randomized IDs, call\n* this BEFORE calling `svgCanvas.setSvgString`.\n* @function module:svgcanvas.SvgCanvas#randomizeIds\n* @param {boolean} [enableRandomization] If true, adds a nonce to the prefix. Thus\n* `svgCanvas.randomizeIds() <==> svgCanvas.randomizeIds(true)`\n* @returns {void}\n*/\nthis.randomizeIds = function (enableRandomization) {\n if (arguments.length > 0 && enableRandomization === false) {\n draw.randomizeIds(false, getCurrentDrawing());\n } else {\n draw.randomizeIds(true, getCurrentDrawing());\n }\n};\n\n/**\n* Ensure each element has a unique ID.\n* @function module:svgcanvas.SvgCanvas#uniquifyElems\n* @param {Element} g - The parent element of the tree to give unique IDs\n* @returns {void}\n*/\nconst uniquifyElems = this.uniquifyElems = function (g) {\n const ids = {};\n // TODO: Handle markers and connectors. These are not yet re-identified properly\n // as their referring elements do not get remapped.\n //\n // <marker id='se_marker_end_svg_7'/>\n // <polyline id='svg_7' se:connector='svg_1 svg_6' marker-end='url(#se_marker_end_svg_7)'/>\n //\n // Problem #1: if svg_1 gets renamed, we do not update the polyline's se:connector attribute\n // Problem #2: if the polyline svg_7 gets renamed, we do not update the marker id nor the polyline's marker-end attribute\n const refElems = ['filter', 'linearGradient', 'pattern', 'radialGradient', 'symbol', 'textPath', 'use'];\n\n walkTree(g, function (n) {\n // if it's an element node\n if (n.nodeType === 1) {\n // and the element has an ID\n if (n.id) {\n // and we haven't tracked this ID yet\n if (!(n.id in ids)) {\n // add this id to our map\n ids[n.id] = {elem: null, attrs: [], hrefs: []};\n }\n ids[n.id].elem = n;\n }\n\n // now search for all attributes on this element that might refer\n // to other elements\n $.each(refAttrs, function (i, attr) {\n const attrnode = n.getAttributeNode(attr);\n if (attrnode) {\n // the incoming file has been sanitized, so we should be able to safely just strip off the leading #\n const url = getUrlFromAttr(attrnode.value),\n refid = url ? url.substr(1) : null;\n if (refid) {\n if (!(refid in ids)) {\n // add this id to our map\n ids[refid] = {elem: null, attrs: [], hrefs: []};\n }\n ids[refid].attrs.push(attrnode);\n }\n }\n });\n\n // check xlink:href now\n const href = getHref(n);\n // TODO: what if an <image> or <a> element refers to an element internally?\n if (href && refElems.includes(n.nodeName)) {\n const refid = href.substr(1);\n if (refid) {\n if (!(refid in ids)) {\n // add this id to our map\n ids[refid] = {elem: null, attrs: [], hrefs: []};\n }\n ids[refid].hrefs.push(n);\n }\n }\n }\n });\n\n // in ids, we now have a map of ids, elements and attributes, let's re-identify\n for (const oldid in ids) {\n if (!oldid) { continue; }\n const {elem} = ids[oldid];\n if (elem) {\n const newid = getNextId();\n\n // assign element its new id\n elem.id = newid;\n\n // remap all url() attributes\n const {attrs} = ids[oldid];\n let j = attrs.length;\n while (j--) {\n const attr = attrs[j];\n attr.ownerElement.setAttribute(attr.name, 'url(#' + newid + ')');\n }\n\n // remap all href attributes\n const hreffers = ids[oldid].hrefs;\n let k = hreffers.length;\n while (k--) {\n const hreffer = hreffers[k];\n setHref(hreffer, '#' + newid);\n }\n }\n }\n};\n\n/**\n* Assigns reference data for each use element.\n* @function module:svgcanvas.SvgCanvas#setUseData\n* @param {Element} parent\n* @returns {void}\n*/\nconst setUseData = this.setUseData = function (parent) {\n let elems = $(parent);\n\n if (parent.tagName !== 'use') {\n elems = elems.find('use');\n }\n\n elems.each(function () {\n const id = getHref(this).substr(1);\n const refElem = getElem(id);\n if (!refElem) { return; }\n $(this).data('ref', refElem);\n if (refElem.tagName === 'symbol' || refElem.tagName === 'svg') {\n $(this).data('symbol', refElem).data('ref', refElem);\n }\n });\n};\n\n/**\n* Converts gradients from userSpaceOnUse to objectBoundingBox.\n* @function module:svgcanvas.SvgCanvas#convertGradients\n* @param {Element} elem\n* @returns {void}\n*/\nconst convertGradients = this.convertGradients = function (elem) {\n let elems = $(elem).find('linearGradient, radialGradient');\n if (!elems.length && isWebkit()) {\n // Bug in webkit prevents regular *Gradient selector search\n elems = $(elem).find('*').filter(function () {\n return (this.tagName.includes('Gradient'));\n });\n }\n\n elems.each(function () {\n const grad = this; // eslint-disable-line consistent-this\n if ($(grad).attr('gradientUnits') === 'userSpaceOnUse') {\n // TODO: Support more than one element with this ref by duplicating parent grad\n const fillStrokeElems = $(svgcontent).find('[fill=\"url(#' + grad.id + ')\"],[stroke=\"url(#' + grad.id + ')\"]');\n if (!fillStrokeElems.length) { return; }\n\n // get object's bounding box\n const bb = utilsGetBBox(fillStrokeElems[0]);\n\n // This will occur if the element is inside a <defs> or a <symbol>,\n // in which we shouldn't need to convert anyway.\n if (!bb) { return; }\n\n if (grad.tagName === 'linearGradient') {\n const gCoords = $(grad).attr(['x1', 'y1', 'x2', 'y2']);\n\n // If has transform, convert\n const tlist = grad.gradientTransform.baseVal;\n if (tlist && tlist.numberOfItems > 0) {\n const m = transformListToTransform(tlist).matrix;\n const pt1 = transformPoint(gCoords.x1, gCoords.y1, m);\n const pt2 = transformPoint(gCoords.x2, gCoords.y2, m);\n\n gCoords.x1 = pt1.x;\n gCoords.y1 = pt1.y;\n gCoords.x2 = pt2.x;\n gCoords.y2 = pt2.y;\n grad.removeAttribute('gradientTransform');\n }\n\n $(grad).attr({\n x1: (gCoords.x1 - bb.x) / bb.width,\n y1: (gCoords.y1 - bb.y) / bb.height,\n x2: (gCoords.x2 - bb.x) / bb.width,\n y2: (gCoords.y2 - bb.y) / bb.height\n });\n grad.removeAttribute('gradientUnits');\n }\n // else {\n // Note: radialGradient elements cannot be easily converted\n // because userSpaceOnUse will keep circular gradients, while\n // objectBoundingBox will x/y scale the gradient according to\n // its bbox.\n //\n // For now we'll do nothing, though we should probably have\n // the gradient be updated as the element is moved, as\n // inkscape/illustrator do.\n //\n // const gCoords = $(grad).attr(['cx', 'cy', 'r']);\n //\n // $(grad).attr({\n // cx: (gCoords.cx - bb.x) / bb.width,\n // cy: (gCoords.cy - bb.y) / bb.height,\n // r: gCoords.r\n // });\n //\n // grad.removeAttribute('gradientUnits');\n // }\n }\n });\n};\n\n/**\n* Converts selected/given `<use>` or child SVG element to a group.\n* @function module:svgcanvas.SvgCanvas#convertToGroup\n* @param {Element} elem\n* @fires module:svgcanvas.SvgCanvas#event:selected\n* @returns {void}\n*/\nconst convertToGroup = this.convertToGroup = function (elem) {\n if (!elem) {\n elem = selectedElements[0];\n }\n const $elem = $(elem);\n const batchCmd = new BatchCommand();\n let ts;\n\n if ($elem.data('gsvg')) {\n // Use the gsvg as the new group\n const svg = elem.firstChild;\n const pt = $(svg).attr(['x', 'y']);\n\n $(elem.firstChild.firstChild).unwrap();\n $(elem).removeData('gsvg');\n\n const tlist = getTransformList(elem);\n const xform = svgroot.createSVGTransform();\n xform.setTranslate(pt.x, pt.y);\n tlist.appendItem(xform);\n recalculateDimensions(elem);\n call('selected', [elem]);\n } else if ($elem.data('symbol')) {\n elem = $elem.data('symbol');\n\n ts = $elem.attr('transform');\n const pos = $elem.attr(['x', 'y']);\n\n const vb = elem.getAttribute('viewBox');\n\n if (vb) {\n const nums = vb.split(' ');\n pos.x -= Number(nums[0]);\n pos.y -= Number(nums[1]);\n }\n\n // Not ideal, but works\n ts += ' translate(' + (pos.x || 0) + ',' + (pos.y || 0) + ')';\n\n const prev = $elem.prev();\n\n // Remove <use> element\n batchCmd.addSubCommand(new RemoveElementCommand($elem[0], $elem[0].nextSibling, $elem[0].parentNode));\n $elem.remove();\n\n // See if other elements reference this symbol\n const hasMore = $(svgcontent).find('use:data(symbol)').length;\n\n const g = svgdoc.createElementNS(NS.SVG, 'g');\n const childs = elem.childNodes;\n\n let i;\n for (i = 0; i < childs.length; i++) {\n g.append(childs[i].cloneNode(true));\n }\n\n // Duplicate the gradients for Gecko, since they weren't included in the <symbol>\n if (isGecko()) {\n const dupeGrads = $(findDefs()).children('linearGradient,radialGradient,pattern').clone();\n $(g).append(dupeGrads);\n }\n\n if (ts) {\n g.setAttribute('transform', ts);\n }\n\n const parent = elem.parentNode;\n\n uniquifyElems(g);\n\n // Put the dupe gradients back into <defs> (after uniquifying them)\n if (isGecko()) {\n $(findDefs()).append($(g).find('linearGradient,radialGradient,pattern'));\n }\n\n // now give the g itself a new id\n g.id = getNextId();\n\n prev.after(g);\n\n if (parent) {\n if (!hasMore) {\n // remove symbol/svg element\n const {nextSibling} = elem;\n elem.remove();\n batchCmd.addSubCommand(new RemoveElementCommand(elem, nextSibling, parent));\n }\n batchCmd.addSubCommand(new InsertElementCommand(g));\n }\n\n setUseData(g);\n\n if (isGecko()) {\n convertGradients(findDefs());\n } else {\n convertGradients(g);\n }\n\n // recalculate dimensions on the top-level children so that unnecessary transforms\n // are removed\n walkTreePost(g, function (n) {\n try {\n recalculateDimensions(n);\n } catch (e) {\n console.log(e); // eslint-disable-line no-console\n }\n });\n\n // Give ID for any visible element missing one\n $(g).find(visElems).each(function () {\n if (!this.id) { this.id = getNextId(); }\n });\n\n selectOnly([g]);\n\n const cm = pushGroupProperties(g, true);\n if (cm) {\n batchCmd.addSubCommand(cm);\n }\n\n addCommandToHistory(batchCmd);\n } else {\n console.log('Unexpected element to ungroup:', elem); // eslint-disable-line no-console\n }\n};\n\n/**\n* This function sets the current drawing as the input SVG XML.\n* @function module:svgcanvas.SvgCanvas#setSvgString\n* @param {string} xmlString - The SVG as XML text.\n* @param {boolean} [preventUndo=false] - Indicates if we want to do the\n* changes without adding them to the undo stack - e.g. for initializing a\n* drawing on page load.\n* @fires module:svgcanvas.SvgCanvas#event:setnonce\n* @fires module:svgcanvas.SvgCanvas#event:unsetnonce\n* @fires module:svgcanvas.SvgCanvas#event:changed\n* @returns {boolean} This function returns `false` if the set was\n* unsuccessful, `true` otherwise.\n*/\nthis.setSvgString = function (xmlString, preventUndo) {\n try {\n // convert string into XML document\n const newDoc = text2xml(xmlString);\n if (newDoc.firstElementChild &&\n newDoc.firstElementChild.namespaceURI !== NS.SVG) {\n return false;\n }\n\n this.prepareSvg(newDoc);\n\n const batchCmd = new BatchCommand('Change Source');\n\n // remove old svg document\n const {nextSibling} = svgcontent;\n const oldzoom = svgroot.removeChild(svgcontent);\n batchCmd.addSubCommand(new RemoveElementCommand(oldzoom, nextSibling, svgroot));\n\n // set new svg document\n // If DOM3 adoptNode() available, use it. Otherwise fall back to DOM2 importNode()\n if (svgdoc.adoptNode) {\n svgcontent = svgdoc.adoptNode(newDoc.documentElement);\n } else {\n svgcontent = svgdoc.importNode(newDoc.documentElement, true);\n }\n\n svgroot.append(svgcontent);\n const content = $(svgcontent);\n\n canvas.current_drawing_ = new draw.Drawing(svgcontent, idprefix);\n\n // retrieve or set the nonce\n const nonce = getCurrentDrawing().getNonce();\n if (nonce) {\n call('setnonce', nonce);\n } else {\n call('unsetnonce');\n }\n\n // change image href vals if possible\n content.find('image').each(function () {\n const image = this; // eslint-disable-line consistent-this\n preventClickDefault(image);\n const val = getHref(this);\n if (val) {\n if (val.startsWith('data:')) {\n // Check if an SVG-edit data URI\n const m = val.match(/svgedit_url=(.*?);/);\n // const m = val.match(/svgedit_url=(?<url>.*?);/);\n if (m) {\n const url = decodeURIComponent(m[1]);\n // const url = decodeURIComponent(m.groups.url);\n $(new Image()).load(function () {\n image.setAttributeNS(NS.XLINK, 'xlink:href', url);\n }).attr('src', url);\n }\n }\n // Add to encodableImages if it loads\n canvas.embedImage(val);\n }\n });\n\n // Wrap child SVGs in group elements\n content.find('svg').each(function () {\n // Skip if it's in a <defs>\n if ($(this).closest('defs').length) { return; }\n\n uniquifyElems(this);\n\n // Check if it already has a gsvg group\n const pa = this.parentNode;\n if (pa.childNodes.length === 1 && pa.nodeName === 'g') {\n $(pa).data('gsvg', this);\n pa.id = pa.id || getNextId();\n } else {\n groupSvgElem(this);\n }\n });\n\n // For Firefox: Put all paint elems in defs\n if (isGecko()) {\n content.find('linearGradient, radialGradient, pattern').appendTo(findDefs());\n }\n\n // Set ref element for <use> elements\n\n // TODO: This should also be done if the object is re-added through \"redo\"\n setUseData(content);\n\n convertGradients(content[0]);\n\n const attrs = {\n id: 'svgcontent',\n overflow: curConfig.show_outside_canvas ? 'visible' : 'hidden'\n };\n\n let percs = false;\n\n // determine proper size\n if (content.attr('viewBox')) {\n const vb = content.attr('viewBox').split(' ');\n attrs.width = vb[2];\n attrs.height = vb[3];\n // handle content that doesn't have a viewBox\n } else {\n $.each(['width', 'height'], function (i, dim) {\n // Set to 100 if not given\n const val = content.attr(dim) || '100%';\n\n if (String(val).substr(-1) === '%') {\n // Use user units if percentage given\n percs = true;\n } else {\n attrs[dim] = convertToNum(dim, val);\n }\n });\n }\n\n // identify layers\n draw.identifyLayers();\n\n // Give ID for any visible layer children missing one\n content.children().find(visElems).each(function () {\n if (!this.id) { this.id = getNextId(); }\n });\n\n // Percentage width/height, so let's base it on visible elements\n if (percs) {\n const bb = getStrokedBBoxDefaultVisible();\n attrs.width = bb.width + bb.x;\n attrs.height = bb.height + bb.y;\n }\n\n // Just in case negative numbers are given or\n // result from the percs calculation\n if (attrs.width <= 0) { attrs.width = 100; }\n if (attrs.height <= 0) { attrs.height = 100; }\n\n content.attr(attrs);\n this.contentW = attrs.width;\n this.contentH = attrs.height;\n\n batchCmd.addSubCommand(new InsertElementCommand(svgcontent));\n // update root to the correct size\n const changes = content.attr(['width', 'height']);\n batchCmd.addSubCommand(new ChangeElementCommand(svgroot, changes));\n\n // reset zoom\n currentZoom = 1;\n\n // reset transform lists\n resetListMap();\n clearSelection();\n pathModule.clearData();\n svgroot.append(selectorManager.selectorParentGroup);\n\n if (!preventUndo) addCommandToHistory(batchCmd);\n call('changed', [svgcontent]);\n } catch (e) {\n console.log(e); // eslint-disable-line no-console\n return false;\n }\n\n return true;\n};\n\n/**\n* This function imports the input SVG XML as a `<symbol>` in the `<defs>`, then adds a\n* `<use>` to the current layer.\n* @function module:svgcanvas.SvgCanvas#importSvgString\n* @param {string} xmlString - The SVG as XML text.\n* @fires module:svgcanvas.SvgCanvas#event:changed\n* @returns {null|Element} This function returns null if the import was unsuccessful, or the element otherwise.\n* @todo\n* - properly handle if namespace is introduced by imported content (must add to svgcontent\n* and update all prefixes in the imported node)\n* - properly handle recalculating dimensions, `recalculateDimensions()` doesn't handle\n* arbitrary transform lists, but makes some assumptions about how the transform list\n* was obtained\n*/\nthis.importSvgString = function (xmlString) {\n let j, ts, useEl;\n try {\n // Get unique ID\n const uid = encode64(xmlString.length + xmlString).substr(0, 32);\n\n let useExisting = false;\n // Look for symbol and make sure symbol exists in image\n if (importIds[uid]) {\n if ($(importIds[uid].symbol).parents('#svgroot').length) {\n useExisting = true;\n }\n }\n\n const batchCmd = new BatchCommand('Import Image');\n let symbol;\n if (useExisting) {\n ({symbol} = importIds[uid]);\n ts = importIds[uid].xform;\n } else {\n // convert string into XML document\n const newDoc = text2xml(xmlString);\n\n this.prepareSvg(newDoc);\n\n // import new svg document into our document\n let svg;\n // If DOM3 adoptNode() available, use it. Otherwise fall back to DOM2 importNode()\n if (svgdoc.adoptNode) {\n svg = svgdoc.adoptNode(newDoc.documentElement);\n } else {\n svg = svgdoc.importNode(newDoc.documentElement, true);\n }\n\n uniquifyElems(svg);\n\n const innerw = convertToNum('width', svg.getAttribute('width')),\n innerh = convertToNum('height', svg.getAttribute('height')),\n innervb = svg.getAttribute('viewBox'),\n // if no explicit viewbox, create one out of the width and height\n vb = innervb ? innervb.split(' ') : [0, 0, innerw, innerh];\n for (j = 0; j < 4; ++j) {\n vb[j] = Number(vb[j]);\n }\n\n // TODO: properly handle preserveAspectRatio\n const // canvasw = +svgcontent.getAttribute('width'),\n canvash = Number(svgcontent.getAttribute('height'));\n // imported content should be 1/3 of the canvas on its largest dimension\n\n if (innerh > innerw) {\n ts = 'scale(' + (canvash / 3) / vb[3] + ')';\n } else {\n ts = 'scale(' + (canvash / 3) / vb[2] + ')';\n }\n\n // Hack to make recalculateDimensions understand how to scale\n ts = 'translate(0) ' + ts + ' translate(0)';\n\n symbol = svgdoc.createElementNS(NS.SVG, 'symbol');\n const defs = findDefs();\n\n if (isGecko()) {\n // Move all gradients into root for Firefox, workaround for this bug:\n // https://bugzilla.mozilla.org/show_bug.cgi?id=353575\n // TODO: Make this properly undo-able.\n $(svg).find('linearGradient, radialGradient, pattern').appendTo(defs);\n }\n\n while (svg.firstChild) {\n const first = svg.firstChild;\n symbol.append(first);\n }\n const attrs = svg.attributes;\n for (const attr of attrs) { // Ok for `NamedNodeMap`\n symbol.setAttribute(attr.nodeName, attr.value);\n }\n symbol.id = getNextId();\n\n // Store data\n importIds[uid] = {\n symbol,\n xform: ts\n };\n\n findDefs().append(symbol);\n batchCmd.addSubCommand(new InsertElementCommand(symbol));\n }\n\n useEl = svgdoc.createElementNS(NS.SVG, 'use');\n useEl.id = getNextId();\n setHref(useEl, '#' + symbol.id);\n\n (currentGroup || getCurrentDrawing().getCurrentLayer()).append(useEl);\n batchCmd.addSubCommand(new InsertElementCommand(useEl));\n clearSelection();\n\n useEl.setAttribute('transform', ts);\n recalculateDimensions(useEl);\n $(useEl).data('symbol', symbol).data('ref', symbol);\n addToSelection([useEl]);\n\n // TODO: Find way to add this in a recalculateDimensions-parsable way\n // if (vb[0] !== 0 || vb[1] !== 0) {\n // ts = 'translate(' + (-vb[0]) + ',' + (-vb[1]) + ') ' + ts;\n // }\n addCommandToHistory(batchCmd);\n call('changed', [svgcontent]);\n } catch (e) {\n console.log(e); // eslint-disable-line no-console\n return null;\n }\n\n // we want to return the element so we can automatically select it\n return useEl;\n};\n\n// Could deprecate, but besides external uses, their usage makes clear that\n// canvas is a dependency for all of these\nconst dr = {\n identifyLayers, createLayer, cloneLayer, deleteCurrentLayer,\n setCurrentLayer, renameCurrentLayer, setCurrentLayerPosition,\n setLayerVisibility, moveSelectedToLayer, mergeLayer, mergeAllLayers,\n leaveContext, setContext\n};\nObject.entries(dr).forEach(([prop, propVal]) => {\n canvas[prop] = propVal;\n});\ndraw.init(\n /**\n * @implements {module:draw.DrawCanvasInit}\n */\n {\n pathActions,\n getCurrentGroup () {\n return currentGroup;\n },\n setCurrentGroup (cg) {\n currentGroup = cg;\n },\n getSelectedElements,\n getSVGContent,\n undoMgr,\n elData,\n getCurrentDrawing,\n clearSelection,\n call,\n addCommandToHistory,\n /**\n * @fires module:svgcanvas.SvgCanvas#event:changed\n * @returns {void}\n */\n changeSVGContent () {\n call('changed', [svgcontent]);\n }\n }\n);\n\n/**\n* Group: Document functions.\n*/\n\n/**\n* Clears the current document. This is not an undoable action.\n* @function module:svgcanvas.SvgCanvas#clear\n* @fires module:svgcanvas.SvgCanvas#event:cleared\n* @returns {void}\n*/\nthis.clear = function () {\n pathActions.clear();\n\n clearSelection();\n\n // clear the svgcontent node\n canvas.clearSvgContentElement();\n\n // create new document\n canvas.current_drawing_ = new draw.Drawing(svgcontent);\n\n // create empty first layer\n canvas.createLayer('Layer 1');\n\n // clear the undo stack\n canvas.undoMgr.resetUndoStack();\n\n // reset the selector manager\n selectorManager.initGroup();\n\n // reset the rubber band box\n rubberBox = selectorManager.getRubberBandBox();\n\n call('cleared');\n};\n\n// Alias function\nthis.linkControlPoints = pathActions.linkControlPoints;\n\n/**\n* @function module:svgcanvas.SvgCanvas#getContentElem\n* @returns {Element} The content DOM element\n*/\nthis.getContentElem = function () { return svgcontent; };\n\n/**\n* @function module:svgcanvas.SvgCanvas#getRootElem\n* @returns {SVGSVGElement} The root DOM element\n*/\nthis.getRootElem = function () { return svgroot; };\n\n/**\n* @typedef {PlainObject} DimensionsAndZoom\n* @property {Float} w Width\n* @property {Float} h Height\n* @property {Float} zoom Zoom\n*/\n\n/**\n* @function module:svgcanvas.SvgCanvas#getResolution\n* @returns {DimensionsAndZoom} The current dimensions and zoom level in an object\n*/\nconst getResolution = this.getResolution = function () {\n// const vb = svgcontent.getAttribute('viewBox').split(' ');\n// return {w:vb[2], h:vb[3], zoom: currentZoom};\n\n const w = svgcontent.getAttribute('width') / currentZoom;\n const h = svgcontent.getAttribute('height') / currentZoom;\n\n return {\n w,\n h,\n zoom: currentZoom\n };\n};\n\n/**\n* @function module:svgcanvas.SvgCanvas#getSnapToGrid\n* @returns {boolean} The current snap to grid setting\n*/\nthis.getSnapToGrid = function () { return curConfig.gridSnapping; };\n\n/**\n* @function module:svgcanvas.SvgCanvas#getVersion\n* @returns {string} A string which describes the revision number of SvgCanvas.\n*/\nthis.getVersion = function () {\n return 'svgcanvas.js ($Rev$)';\n};\n\n/**\n* Update interface strings with given values.\n* @function module:svgcanvas.SvgCanvas#setUiStrings\n* @param {module:path.uiStrings} strs - Object with strings (see the [locales API]{@link module:locale.LocaleStrings} and the [tutorial]{@tutorial LocaleDocs})\n* @returns {void}\n*/\nthis.setUiStrings = function (strs) {\n Object.assign(uiStrings, strs.notification);\n $ = jQueryPluginDBox($, strs.common);\n pathModule.setUiStrings(strs);\n};\n\n/**\n* Update configuration options with given values.\n* @function module:svgcanvas.SvgCanvas#setConfig\n* @param {module:SVGEditor.Config} opts - Object with options\n* @returns {void}\n*/\nthis.setConfig = function (opts) {\n Object.assign(curConfig, opts);\n};\n\n/**\n* @function module:svgcanvas.SvgCanvas#getTitle\n* @param {Element} [elem]\n* @returns {string|void} the current group/SVG's title contents or\n* `undefined` if no element is passed nd there are no selected elements.\n*/\nthis.getTitle = function (elem) {\n elem = elem || selectedElements[0];\n if (!elem) { return undefined; }\n elem = $(elem).data('gsvg') || $(elem).data('symbol') || elem;\n const childs = elem.childNodes;\n for (const child of childs) {\n if (child.nodeName === 'title') {\n return child.textContent;\n }\n }\n return '';\n};\n\n/**\n* Sets the group/SVG's title content.\n* @function module:svgcanvas.SvgCanvas#setGroupTitle\n* @param {string} val\n* @todo Combine this with `setDocumentTitle`\n* @returns {void}\n*/\nthis.setGroupTitle = function (val) {\n let elem = selectedElements[0];\n elem = $(elem).data('gsvg') || elem;\n\n const ts = $(elem).children('title');\n\n const batchCmd = new BatchCommand('Set Label');\n\n let title;\n if (!val.length) {\n // Remove title element\n const tsNextSibling = ts.nextSibling;\n batchCmd.addSubCommand(new RemoveElementCommand(ts[0], tsNextSibling, elem));\n ts.remove();\n } else if (ts.length) {\n // Change title contents\n title = ts[0];\n batchCmd.addSubCommand(new ChangeElementCommand(title, {'#text': title.textContent}));\n title.textContent = val;\n } else {\n // Add title element\n title = svgdoc.createElementNS(NS.SVG, 'title');\n title.textContent = val;\n $(elem).prepend(title);\n batchCmd.addSubCommand(new InsertElementCommand(title));\n }\n\n addCommandToHistory(batchCmd);\n};\n\n/**\n* @function module:svgcanvas.SvgCanvas#getDocumentTitle\n* @returns {string|void} The current document title or an empty string if not found\n*/\nconst getDocumentTitle = this.getDocumentTitle = function () {\n return canvas.getTitle(svgcontent);\n};\n\n/**\n* Adds/updates a title element for the document with the given name.\n* This is an undoable action.\n* @function module:svgcanvas.SvgCanvas#setDocumentTitle\n* @param {string} newTitle - String with the new title\n* @returns {void}\n*/\nthis.setDocumentTitle = function (newTitle) {\n const childs = svgcontent.childNodes;\n let docTitle = false, oldTitle = '';\n\n const batchCmd = new BatchCommand('Change Image Title');\n\n for (const child of childs) {\n if (child.nodeName === 'title') {\n docTitle = child;\n oldTitle = docTitle.textContent;\n break;\n }\n }\n if (!docTitle) {\n docTitle = svgdoc.createElementNS(NS.SVG, 'title');\n svgcontent.insertBefore(docTitle, svgcontent.firstChild);\n // svgcontent.firstChild.before(docTitle); // Ok to replace above with this?\n }\n\n if (newTitle.length) {\n docTitle.textContent = newTitle;\n } else {\n // No title given, so element is not necessary\n docTitle.remove();\n }\n batchCmd.addSubCommand(new ChangeElementCommand(docTitle, {'#text': oldTitle}));\n addCommandToHistory(batchCmd);\n};\n\n/**\n* Returns the editor's namespace URL, optionally adding it to the root element.\n* @function module:svgcanvas.SvgCanvas#getEditorNS\n* @param {boolean} [add] - Indicates whether or not to add the namespace value\n* @returns {string} The editor's namespace URL\n*/\nthis.getEditorNS = function (add) {\n if (add) {\n svgcontent.setAttribute('xmlns:se', NS.SE);\n }\n return NS.SE;\n};\n\n/**\n* Changes the document's dimensions to the given size.\n* @function module:svgcanvas.SvgCanvas#setResolution\n* @param {Float|\"fit\"} x - Number with the width of the new dimensions in user units.\n* Can also be the string \"fit\" to indicate \"fit to content\".\n* @param {Float} y - Number with the height of the new dimensions in user units.\n* @fires module:svgcanvas.SvgCanvas#event:changed\n* @returns {boolean} Indicates if resolution change was successful.\n* It will fail on \"fit to content\" option with no content to fit to.\n*/\nthis.setResolution = function (x, y) {\n const res = getResolution();\n const {w, h} = res;\n let batchCmd;\n\n if (x === 'fit') {\n // Get bounding box\n const bbox = getStrokedBBoxDefaultVisible();\n\n if (bbox) {\n batchCmd = new BatchCommand('Fit Canvas to Content');\n const visEls = getVisibleElements();\n addToSelection(visEls);\n const dx = [], dy = [];\n $.each(visEls, function (i, item) {\n dx.push(bbox.x * -1);\n dy.push(bbox.y * -1);\n });\n\n const cmd = canvas.moveSelectedElements(dx, dy, true);\n batchCmd.addSubCommand(cmd);\n clearSelection();\n\n x = Math.round(bbox.width);\n y = Math.round(bbox.height);\n } else {\n return false;\n }\n }\n if (x !== w || y !== h) {\n if (!batchCmd) {\n batchCmd = new BatchCommand('Change Image Dimensions');\n }\n\n x = convertToNum('width', x);\n y = convertToNum('height', y);\n\n svgcontent.setAttribute('width', x);\n svgcontent.setAttribute('height', y);\n\n this.contentW = x;\n this.contentH = y;\n batchCmd.addSubCommand(new ChangeElementCommand(svgcontent, {width: w, height: h}));\n\n svgcontent.setAttribute('viewBox', [0, 0, x / currentZoom, y / currentZoom].join(' '));\n batchCmd.addSubCommand(new ChangeElementCommand(svgcontent, {viewBox: ['0 0', w, h].join(' ')}));\n\n addCommandToHistory(batchCmd);\n call('changed', [svgcontent]);\n }\n return true;\n};\n\n/**\n* @typedef {module:jQueryAttr.Attributes} module:svgcanvas.ElementPositionInCanvas\n* @property {Float} x\n* @property {Float} y\n*/\n\n/**\n* @function module:svgcanvas.SvgCanvas#getOffset\n* @returns {module:svgcanvas.ElementPositionInCanvas} An object with `x`, `y` values indicating the svgcontent element's\n* position in the editor's canvas.\n*/\nthis.getOffset = function () {\n return $(svgcontent).attr(['x', 'y']);\n};\n\n/**\n * @typedef {PlainObject} module:svgcanvas.ZoomAndBBox\n * @property {Float} zoom\n * @property {module:utilities.BBoxObject} bbox\n */\n/**\n* Sets the zoom level on the canvas-side based on the given value.\n* @function module:svgcanvas.SvgCanvas#setBBoxZoom\n* @param {\"selection\"|\"canvas\"|\"content\"|\"layer\"|module:SVGEditor.BBoxObjectWithFactor} val - Bounding box object to zoom to or string indicating zoom option. Note: the object value type is defined in `svg-editor.js`\n* @param {Integer} editorW - The editor's workarea box's width\n* @param {Integer} editorH - The editor's workarea box's height\n* @returns {module:svgcanvas.ZoomAndBBox|void}\n*/\nthis.setBBoxZoom = function (val, editorW, editorH) {\n let spacer = 0.85;\n let bb;\n const calcZoom = function (bb) { // eslint-disable-line no-shadow\n if (!bb) { return false; }\n const wZoom = Math.round((editorW / bb.width) * 100 * spacer) / 100;\n const hZoom = Math.round((editorH / bb.height) * 100 * spacer) / 100;\n const zoom = Math.min(wZoom, hZoom);\n canvas.setZoom(zoom);\n return {zoom, bbox: bb};\n };\n\n if (typeof val === 'object') {\n bb = val;\n if (bb.width === 0 || bb.height === 0) {\n const newzoom = bb.zoom ? bb.zoom : currentZoom * bb.factor;\n canvas.setZoom(newzoom);\n return {zoom: currentZoom, bbox: bb};\n }\n return calcZoom(bb);\n }\n\n switch (val) {\n case 'selection': {\n if (!selectedElements[0]) { return undefined; }\n const selectedElems = $.map(selectedElements, function (n) {\n if (n) {\n return n;\n }\n return undefined;\n });\n bb = getStrokedBBoxDefaultVisible(selectedElems);\n break;\n } case 'canvas': {\n const res = getResolution();\n spacer = 0.95;\n bb = {width: res.w, height: res.h, x: 0, y: 0};\n break;\n } case 'content':\n bb = getStrokedBBoxDefaultVisible();\n break;\n case 'layer':\n bb = getStrokedBBoxDefaultVisible(getVisibleElements(getCurrentDrawing().getCurrentLayer()));\n break;\n default:\n return undefined;\n }\n return calcZoom(bb);\n};\n\n/**\n* The zoom level has changed. Supplies the new zoom level as a number (not percentage).\n* @event module:svgcanvas.SvgCanvas#event:ext_zoomChanged\n* @type {Float}\n*/\n/**\n* The bottom panel was updated.\n* @event module:svgcanvas.SvgCanvas#event:ext_toolButtonStateUpdate\n* @type {PlainObject}\n* @property {boolean} nofill Indicates fill is disabled\n* @property {boolean} nostroke Indicates stroke is disabled\n*/\n/**\n* The element selection has changed (elements were added/removed from selection).\n* @event module:svgcanvas.SvgCanvas#event:ext_selectedChanged\n* @type {PlainObject}\n* @property {Element[]} elems Array of the newly selected elements\n* @property {Element|null} selectedElement The single selected element\n* @property {boolean} multiselected Indicates whether one or more elements were selected\n*/\n/**\n* Called when part of element is in process of changing, generally on\n* mousemove actions like rotate, move, etc.\n* @event module:svgcanvas.SvgCanvas#event:ext_elementTransition\n* @type {PlainObject}\n* @property {Element[]} elems Array of transitioning elements\n*/\n/**\n* One or more elements were changed.\n* @event module:svgcanvas.SvgCanvas#event:ext_elementChanged\n* @type {PlainObject}\n* @property {Element[]} elems Array of the affected elements\n*/\n/**\n* Invoked as soon as the locale is ready.\n* @event module:svgcanvas.SvgCanvas#event:ext_langReady\n* @type {PlainObject}\n* @property {string} lang The two-letter language code\n* @property {module:SVGEditor.uiStrings} uiStrings\n* @property {module:SVGEditor~ImportLocale} importLocale\n*/\n/**\n* The language was changed. Two-letter code of the new language.\n* @event module:svgcanvas.SvgCanvas#event:ext_langChanged\n* @type {string}\n*/\n/**\n* Means for an extension to add locale data. The two-letter language code.\n* @event module:svgcanvas.SvgCanvas#event:ext_addLangData\n* @type {PlainObject}\n* @property {string} lang\n* @property {module:SVGEditor~ImportLocale} importLocale\n*/\n/**\n * Called when new image is created.\n * @event module:svgcanvas.SvgCanvas#event:ext_onNewDocument\n * @type {void}\n */\n/**\n * Called when sidepanel is resized or toggled.\n * @event module:svgcanvas.SvgCanvas#event:ext_workareaResized\n * @type {void}\n*/\n/**\n * Called upon addition of the extension, or, if svgicons are set,\n * after the icons are ready when extension SVG icons have loaded.\n * @event module:svgcanvas.SvgCanvas#event:ext_callback\n * @type {void}\n*/\n\n/**\n* Sets the zoom to the given level.\n* @function module:svgcanvas.SvgCanvas#setZoom\n* @param {Float} zoomLevel - Float indicating the zoom level to change to\n* @fires module:svgcanvas.SvgCanvas#event:ext_zoomChanged\n* @returns {void}\n*/\nthis.setZoom = function (zoomLevel) {\n const res = getResolution();\n svgcontent.setAttribute('viewBox', '0 0 ' + res.w / zoomLevel + ' ' + res.h / zoomLevel);\n currentZoom = zoomLevel;\n $.each(selectedElements, function (i, elem) {\n if (!elem) { return; }\n selectorManager.requestSelector(elem).resize();\n });\n pathActions.zoomChange();\n runExtensions('zoomChanged', /** @type {module:svgcanvas.SvgCanvas#event:ext_zoomChanged} */ zoomLevel);\n};\n\n/**\n* @function module:svgcanvas.SvgCanvas#getMode\n* @returns {string} The current editor mode string\n*/\nthis.getMode = function () {\n return currentMode;\n};\n\n/**\n* Sets the editor's mode to the given string.\n* @function module:svgcanvas.SvgCanvas#setMode\n* @param {string} name - String with the new mode to change to\n* @returns {void}\n*/\nthis.setMode = function (name) {\n pathActions.clear(true);\n textActions.clear();\n curProperties = (selectedElements[0] && selectedElements[0].nodeName === 'text') ? curText : curShape;\n currentMode = name;\n};\n\n/**\n* Group: Element Styling.\n*/\n\n/**\n* @typedef {PlainObject} module:svgcanvas.PaintOptions\n* @property {\"solidColor\"} type\n*/\n\n/**\n* @function module:svgcanvas.SvgCanvas#getColor\n* @param {string} type\n* @returns {string|module:svgcanvas.PaintOptions|Float|module:jGraduate~Paint} The current fill/stroke option\n*/\nthis.getColor = function (type) {\n return curProperties[type];\n};\n\n/**\n* Change the current stroke/fill color/gradient value.\n* @function module:svgcanvas.SvgCanvas#setColor\n* @param {string} type - String indicating fill or stroke\n* @param {string} val - The value to set the stroke attribute to\n* @param {boolean} preventUndo - Boolean indicating whether or not this should be an undoable option\n* @fires module:svgcanvas.SvgCanvas#event:changed\n* @returns {void}\n*/\nthis.setColor = function (type, val, preventUndo) {\n curShape[type] = val;\n curProperties[type + '_paint'] = {type: 'solidColor'};\n const elems = [];\n /**\n *\n * @param {Element} e\n * @returns {void}\n */\n function addNonG (e) {\n if (e.nodeName !== 'g') {\n elems.push(e);\n }\n }\n let i = selectedElements.length;\n while (i--) {\n const elem = selectedElements[i];\n if (elem) {\n if (elem.tagName === 'g') {\n walkTree(elem, addNonG);\n } else if (type === 'fill') {\n if (elem.tagName !== 'polyline' && elem.tagName !== 'line') {\n elems.push(elem);\n }\n } else {\n elems.push(elem);\n }\n }\n }\n if (elems.length > 0) {\n if (!preventUndo) {\n changeSelectedAttribute(type, val, elems);\n call('changed', elems);\n } else {\n changeSelectedAttributeNoUndo(type, val, elems);\n }\n }\n};\n\n/**\n* Apply the current gradient to selected element's fill or stroke.\n* @function module:svgcanvas.SvgCanvas#setGradient\n* @param {\"fill\"|\"stroke\"} type - String indicating \"fill\" or \"stroke\" to apply to an element\n* @returns {void}\n*/\nconst setGradient = this.setGradient = function (type) {\n if (!curProperties[type + '_paint'] || curProperties[type + '_paint'].type === 'solidColor') { return; }\n let grad = canvas[type + 'Grad'];\n // find out if there is a duplicate gradient already in the defs\n const duplicateGrad = findDuplicateGradient(grad);\n const defs = findDefs();\n // no duplicate found, so import gradient into defs\n if (!duplicateGrad) {\n // const origGrad = grad;\n grad = defs.appendChild(svgdoc.importNode(grad, true));\n // get next id and set it on the grad\n grad.id = getNextId();\n } else { // use existing gradient\n grad = duplicateGrad;\n }\n canvas.setColor(type, 'url(#' + grad.id + ')');\n};\n\n/**\n* Check if exact gradient already exists.\n* @function module:svgcanvas~findDuplicateGradient\n* @param {SVGGradientElement} grad - The gradient DOM element to compare to others\n* @returns {SVGGradientElement} The existing gradient if found, `null` if not\n*/\nconst findDuplicateGradient = function (grad) {\n const defs = findDefs();\n const existingGrads = $(defs).find('linearGradient, radialGradient');\n let i = existingGrads.length;\n const radAttrs = ['r', 'cx', 'cy', 'fx', 'fy'];\n while (i--) {\n const og = existingGrads[i];\n if (grad.tagName === 'linearGradient') {\n if (grad.getAttribute('x1') !== og.getAttribute('x1') ||\n grad.getAttribute('y1') !== og.getAttribute('y1') ||\n grad.getAttribute('x2') !== og.getAttribute('x2') ||\n grad.getAttribute('y2') !== og.getAttribute('y2')\n ) {\n continue;\n }\n } else {\n const gradAttrs = $(grad).attr(radAttrs);\n const ogAttrs = $(og).attr(radAttrs);\n\n let diff = false;\n $.each(radAttrs, function (j, attr) {\n if (gradAttrs[attr] !== ogAttrs[attr]) { diff = true; }\n });\n\n if (diff) { continue; }\n }\n\n // else could be a duplicate, iterate through stops\n const stops = grad.getElementsByTagNameNS(NS.SVG, 'stop');\n const ostops = og.getElementsByTagNameNS(NS.SVG, 'stop');\n\n if (stops.length !== ostops.length) {\n continue;\n }\n\n let j = stops.length;\n while (j--) {\n const stop = stops[j];\n const ostop = ostops[j];\n\n if (stop.getAttribute('offset') !== ostop.getAttribute('offset') ||\n stop.getAttribute('stop-opacity') !== ostop.getAttribute('stop-opacity') ||\n stop.getAttribute('stop-color') !== ostop.getAttribute('stop-color')) {\n break;\n }\n }\n\n if (j === -1) {\n return og;\n }\n } // for each gradient in defs\n\n return null;\n};\n\n/**\n* Set a color/gradient to a fill/stroke.\n* @function module:svgcanvas.SvgCanvas#setPaint\n* @param {\"fill\"|\"stroke\"} type - String with \"fill\" or \"stroke\"\n* @param {module:jGraduate.jGraduatePaintOptions} paint - The jGraduate paint object to apply\n* @returns {void}\n*/\nthis.setPaint = function (type, paint) {\n // make a copy\n const p = new $.jGraduate.Paint(paint);\n this.setPaintOpacity(type, p.alpha / 100, true);\n\n // now set the current paint object\n curProperties[type + '_paint'] = p;\n switch (p.type) {\n case 'solidColor':\n this.setColor(type, p.solidColor !== 'none' ? '#' + p.solidColor : 'none');\n break;\n case 'linearGradient':\n case 'radialGradient':\n canvas[type + 'Grad'] = p[p.type];\n setGradient(type);\n break;\n }\n};\n\n/**\n* @function module:svgcanvas.SvgCanvas#setStrokePaint\n* @param {module:jGraduate~Paint} paint\n* @returns {void}\n*/\nthis.setStrokePaint = function (paint) {\n this.setPaint('stroke', paint);\n};\n\n/**\n* @function module:svgcanvas.SvgCanvas#setFillPaint\n* @param {module:jGraduate~Paint} paint\n* @returns {void}\n*/\nthis.setFillPaint = function (paint) {\n this.setPaint('fill', paint);\n};\n\n/**\n* @function module:svgcanvas.SvgCanvas#getStrokeWidth\n* @returns {Float|string} The current stroke-width value\n*/\nthis.getStrokeWidth = function () {\n return curProperties.stroke_width;\n};\n\n/**\n* Sets the stroke width for the current selected elements.\n* When attempting to set a line's width to 0, this changes it to 1 instead.\n* @function module:svgcanvas.SvgCanvas#setStrokeWidth\n* @param {Float} val - A Float indicating the new stroke width value\n* @fires module:svgcanvas.SvgCanvas#event:changed\n* @returns {void}\n*/\nthis.setStrokeWidth = function (val) {\n if (val === 0 && ['line', 'path'].includes(currentMode)) {\n canvas.setStrokeWidth(1);\n return;\n }\n curProperties.stroke_width = val;\n\n const elems = [];\n /**\n *\n * @param {Element} e\n * @returns {void}\n */\n function addNonG (e) {\n if (e.nodeName !== 'g') {\n elems.push(e);\n }\n }\n let i = selectedElements.length;\n while (i--) {\n const elem = selectedElements[i];\n if (elem) {\n if (elem.tagName === 'g') {\n walkTree(elem, addNonG);\n } else {\n elems.push(elem);\n }\n }\n }\n if (elems.length > 0) {\n changeSelectedAttribute('stroke-width', val, elems);\n call('changed', selectedElements);\n }\n};\n\n/**\n* Set the given stroke-related attribute the given value for selected elements.\n* @function module:svgcanvas.SvgCanvas#setStrokeAttr\n* @param {string} attr - String with the attribute name\n* @param {string|Float} val - String or number with the attribute value\n* @fires module:svgcanvas.SvgCanvas#event:changed\n* @returns {void}\n*/\nthis.setStrokeAttr = function (attr, val) {\n curShape[attr.replace('-', '_')] = val;\n const elems = [];\n\n let i = selectedElements.length;\n while (i--) {\n const elem = selectedElements[i];\n if (elem) {\n if (elem.tagName === 'g') {\n walkTree(elem, function (e) { if (e.nodeName !== 'g') { elems.push(e); } });\n } else {\n elems.push(elem);\n }\n }\n }\n if (elems.length > 0) {\n changeSelectedAttribute(attr, val, elems);\n call('changed', selectedElements);\n }\n};\n\n/**\n* @typedef {PlainObject} module:svgcanvas.StyleOptions\n* @property {string} fill\n* @property {Float} fill_opacity\n* @property {string} stroke\n* @property {Float} stroke_width\n* @property {string} stroke_dasharray\n* @property {string} stroke_linejoin\n* @property {string} stroke_linecap\n* @property {Float} stroke_opacity\n* @property {Float} opacity\n*/\n\n/**\n* @function module:svgcanvas.SvgCanvas#getStyle\n* @returns {module:svgcanvas.StyleOptions} current style options\n*/\nthis.getStyle = function () {\n return curShape;\n};\n\n/**\n* @function module:svgcanvas.SvgCanvas#getOpacity\n* @returns {Float} the current opacity\n*/\nthis.getOpacity = getOpacity;\n\n/**\n* Sets the given opacity on the current selected elements.\n* @function module:svgcanvas.SvgCanvas#setOpacity\n* @param {string} val\n* @returns {void}\n*/\nthis.setOpacity = function (val) {\n curShape.opacity = val;\n changeSelectedAttribute('opacity', val);\n};\n\n/**\n* @function module:svgcanvas.SvgCanvas#getFillOpacity\n* @returns {Float} the current fill opacity\n*/\nthis.getFillOpacity = function () {\n return curShape.fill_opacity;\n};\n\n/**\n* @function module:svgcanvas.SvgCanvas#getStrokeOpacity\n* @returns {string} the current stroke opacity\n*/\nthis.getStrokeOpacity = function () {\n return curShape.stroke_opacity;\n};\n\n/**\n* Sets the current fill/stroke opacity.\n* @function module:svgcanvas.SvgCanvas#setPaintOpacity\n* @param {string} type - String with \"fill\" or \"stroke\"\n* @param {Float} val - Float with the new opacity value\n* @param {boolean} preventUndo - Indicates whether or not this should be an undoable action\n* @returns {void}\n*/\nthis.setPaintOpacity = function (type, val, preventUndo) {\n curShape[type + '_opacity'] = val;\n if (!preventUndo) {\n changeSelectedAttribute(type + '-opacity', val);\n } else {\n changeSelectedAttributeNoUndo(type + '-opacity', val);\n }\n};\n\n/**\n* Gets the current fill/stroke opacity.\n* @function module:svgcanvas.SvgCanvas#getPaintOpacity\n* @param {\"fill\"|\"stroke\"} type - String with \"fill\" or \"stroke\"\n* @returns {Float} Fill/stroke opacity\n*/\nthis.getPaintOpacity = function (type) {\n return type === 'fill' ? this.getFillOpacity() : this.getStrokeOpacity();\n};\n\n/**\n* Gets the `stdDeviation` blur value of the given element.\n* @function module:svgcanvas.SvgCanvas#getBlur\n* @param {Element} elem - The element to check the blur value for\n* @returns {string} stdDeviation blur attribute value\n*/\nthis.getBlur = function (elem) {\n let val = 0;\n // const elem = selectedElements[0];\n\n if (elem) {\n const filterUrl = elem.getAttribute('filter');\n if (filterUrl) {\n const blur = getElem(elem.id + '_blur');\n if (blur) {\n val = blur.firstChild.getAttribute('stdDeviation');\n }\n }\n }\n return val;\n};\n\n(function () {\nlet curCommand = null;\nlet filter = null;\nlet filterHidden = false;\n\n/**\n* Sets the `stdDeviation` blur value on the selected element without being undoable.\n* @function module:svgcanvas.SvgCanvas#setBlurNoUndo\n* @param {Float} val - The new `stdDeviation` value\n* @returns {void}\n*/\ncanvas.setBlurNoUndo = function (val) {\n if (!filter) {\n canvas.setBlur(val);\n return;\n }\n if (val === 0) {\n // Don't change the StdDev, as that will hide the element.\n // Instead, just remove the value for \"filter\"\n changeSelectedAttributeNoUndo('filter', '');\n filterHidden = true;\n } else {\n const elem = selectedElements[0];\n if (filterHidden) {\n changeSelectedAttributeNoUndo('filter', 'url(#' + elem.id + '_blur)');\n }\n if (isWebkit()) {\n // console.log('e', elem); // eslint-disable-line no-console\n elem.removeAttribute('filter');\n elem.setAttribute('filter', 'url(#' + elem.id + '_blur)');\n }\n changeSelectedAttributeNoUndo('stdDeviation', val, [filter.firstChild]);\n canvas.setBlurOffsets(filter, val);\n }\n};\n\n/**\n *\n * @returns {void}\n */\nfunction finishChange () {\n const bCmd = canvas.undoMgr.finishUndoableChange();\n curCommand.addSubCommand(bCmd);\n addCommandToHistory(curCommand);\n curCommand = null;\n filter = null;\n}\n\n/**\n* Sets the `x`, `y`, `width`, `height` values of the filter element in order to\n* make the blur not be clipped. Removes them if not neeeded.\n* @function module:svgcanvas.SvgCanvas#setBlurOffsets\n* @param {Element} filterElem - The filter DOM element to update\n* @param {Float} stdDev - The standard deviation value on which to base the offset size\n* @returns {void}\n*/\ncanvas.setBlurOffsets = function (filterElem, stdDev) {\n if (stdDev > 3) {\n // TODO: Create algorithm here where size is based on expected blur\n assignAttributes(filterElem, {\n x: '-50%',\n y: '-50%',\n width: '200%',\n height: '200%'\n }, 100);\n // Removing these attributes hides text in Chrome (see Issue 579)\n } else if (!isWebkit()) {\n filterElem.removeAttribute('x');\n filterElem.removeAttribute('y');\n filterElem.removeAttribute('width');\n filterElem.removeAttribute('height');\n }\n};\n\n/**\n* Adds/updates the blur filter to the selected element.\n* @function module:svgcanvas.SvgCanvas#setBlur\n* @param {Float} val - Float with the new `stdDeviation` blur value\n* @param {boolean} complete - Whether or not the action should be completed (to add to the undo manager)\n* @returns {void}\n*/\ncanvas.setBlur = function (val, complete) {\n if (curCommand) {\n finishChange();\n return;\n }\n\n // Looks for associated blur, creates one if not found\n const elem = selectedElements[0];\n const elemId = elem.id;\n filter = getElem(elemId + '_blur');\n\n val -= 0;\n\n const batchCmd = new BatchCommand();\n\n // Blur found!\n if (filter) {\n if (val === 0) {\n filter = null;\n }\n } else {\n // Not found, so create\n const newblur = addSVGElementFromJson({element: 'feGaussianBlur',\n attr: {\n in: 'SourceGraphic',\n stdDeviation: val\n }\n });\n\n filter = addSVGElementFromJson({element: 'filter',\n attr: {\n id: elemId + '_blur'\n }\n });\n\n filter.append(newblur);\n findDefs().append(filter);\n\n batchCmd.addSubCommand(new InsertElementCommand(filter));\n }\n\n const changes = {filter: elem.getAttribute('filter')};\n\n if (val === 0) {\n elem.removeAttribute('filter');\n batchCmd.addSubCommand(new ChangeElementCommand(elem, changes));\n return;\n }\n\n changeSelectedAttribute('filter', 'url(#' + elemId + '_blur)');\n batchCmd.addSubCommand(new ChangeElementCommand(elem, changes));\n canvas.setBlurOffsets(filter, val);\n\n curCommand = batchCmd;\n canvas.undoMgr.beginUndoableChange('stdDeviation', [filter ? filter.firstChild : null]);\n if (complete) {\n canvas.setBlurNoUndo(val);\n finishChange();\n }\n};\n}());\n\n/**\n* Check whether selected element is bold or not.\n* @function module:svgcanvas.SvgCanvas#getBold\n* @returns {boolean} Indicates whether or not element is bold\n*/\nthis.getBold = function () {\n // should only have one element selected\n const selected = selectedElements[0];\n if (!isNullish(selected) && selected.tagName === 'text' &&\n isNullish(selectedElements[1])) {\n return (selected.getAttribute('font-weight') === 'bold');\n }\n return false;\n};\n\n/**\n* Make the selected element bold or normal.\n* @function module:svgcanvas.SvgCanvas#setBold\n* @param {boolean} b - Indicates bold (`true`) or normal (`false`)\n* @returns {void}\n*/\nthis.setBold = function (b) {\n const selected = selectedElements[0];\n if (!isNullish(selected) && selected.tagName === 'text' &&\n isNullish(selectedElements[1])) {\n changeSelectedAttribute('font-weight', b ? 'bold' : 'normal');\n }\n if (!selectedElements[0].textContent) {\n textActions.setCursor();\n }\n};\n\n/**\n* Check whether selected element is in italics or not.\n* @function module:svgcanvas.SvgCanvas#getItalic\n* @returns {boolean} Indicates whether or not element is italic\n*/\nthis.getItalic = function () {\n const selected = selectedElements[0];\n if (!isNullish(selected) && selected.tagName === 'text' &&\n isNullish(selectedElements[1])) {\n return (selected.getAttribute('font-style') === 'italic');\n }\n return false;\n};\n\n/**\n* Make the selected element italic or normal.\n* @function module:svgcanvas.SvgCanvas#setItalic\n* @param {boolean} i - Indicates italic (`true`) or normal (`false`)\n* @returns {void}\n*/\nthis.setItalic = function (i) {\n const selected = selectedElements[0];\n if (!isNullish(selected) && selected.tagName === 'text' &&\n isNullish(selectedElements[1])) {\n changeSelectedAttribute('font-style', i ? 'italic' : 'normal');\n }\n if (!selectedElements[0].textContent) {\n textActions.setCursor();\n }\n};\n\n/**\n* @function module:svgcanvas.SvgCanvas#getFontFamily\n* @returns {string} The current font family\n*/\nthis.getFontFamily = function () {\n return curText.font_family;\n};\n\n/**\n* Set the new font family.\n* @function module:svgcanvas.SvgCanvas#setFontFamily\n* @param {string} val - String with the new font family\n* @returns {void}\n*/\nthis.setFontFamily = function (val) {\n curText.font_family = val;\n changeSelectedAttribute('font-family', val);\n if (selectedElements[0] && !selectedElements[0].textContent) {\n textActions.setCursor();\n }\n};\n\n/**\n* Set the new font color.\n* @function module:svgcanvas.SvgCanvas#setFontColor\n* @param {string} val - String with the new font color\n* @returns {void}\n*/\nthis.setFontColor = function (val) {\n curText.fill = val;\n changeSelectedAttribute('fill', val);\n};\n\n/**\n* @function module:svgcanvas.SvgCanvas#getFontColor\n* @returns {string} The current font color\n*/\nthis.getFontColor = function () {\n return curText.fill;\n};\n\n/**\n* @function module:svgcanvas.SvgCanvas#getFontSize\n* @returns {Float} The current font size\n*/\nthis.getFontSize = function () {\n return curText.font_size;\n};\n\n/**\n* Applies the given font size to the selected element.\n* @function module:svgcanvas.SvgCanvas#setFontSize\n* @param {Float} val - Float with the new font size\n* @returns {void}\n*/\nthis.setFontSize = function (val) {\n curText.font_size = val;\n changeSelectedAttribute('font-size', val);\n if (!selectedElements[0].textContent) {\n textActions.setCursor();\n }\n};\n\n/**\n* @function module:svgcanvas.SvgCanvas#getText\n* @returns {string} The current text (`textContent`) of the selected element\n*/\nthis.getText = function () {\n const selected = selectedElements[0];\n if (isNullish(selected)) { return ''; }\n return selected.textContent;\n};\n\n/**\n* Updates the text element with the given string.\n* @function module:svgcanvas.SvgCanvas#setTextContent\n* @param {string} val - String with the new text\n* @returns {void}\n*/\nthis.setTextContent = function (val) {\n changeSelectedAttribute('#text', val);\n textActions.init(val);\n textActions.setCursor();\n};\n\n/**\n* Sets the new image URL for the selected image element. Updates its size if\n* a new URL is given.\n* @function module:svgcanvas.SvgCanvas#setImageURL\n* @param {string} val - String with the image URL/path\n* @fires module:svgcanvas.SvgCanvas#event:changed\n* @returns {void}\n*/\nthis.setImageURL = function (val) {\n const elem = selectedElements[0];\n if (!elem) { return; }\n\n const attrs = $(elem).attr(['width', 'height']);\n const setsize = (!attrs.width || !attrs.height);\n\n const curHref = getHref(elem);\n\n // Do nothing if no URL change or size change\n if (curHref === val && !setsize) {\n return;\n }\n\n const batchCmd = new BatchCommand('Change Image URL');\n\n setHref(elem, val);\n batchCmd.addSubCommand(new ChangeElementCommand(elem, {\n '#href': curHref\n }));\n\n $(new Image()).load(function () {\n const changes = $(elem).attr(['width', 'height']);\n\n $(elem).attr({\n width: this.width,\n height: this.height\n });\n\n selectorManager.requestSelector(elem).resize();\n\n batchCmd.addSubCommand(new ChangeElementCommand(elem, changes));\n addCommandToHistory(batchCmd);\n call('changed', [elem]);\n }).attr('src', val);\n};\n\n/**\n* Sets the new link URL for the selected anchor element.\n* @function module:svgcanvas.SvgCanvas#setLinkURL\n* @param {string} val - String with the link URL/path\n* @returns {void}\n*/\nthis.setLinkURL = function (val) {\n let elem = selectedElements[0];\n if (!elem) { return; }\n if (elem.tagName !== 'a') {\n // See if parent is an anchor\n const parentsA = $(elem).parents('a');\n if (parentsA.length) {\n elem = parentsA[0];\n } else {\n return;\n }\n }\n\n const curHref = getHref(elem);\n\n if (curHref === val) { return; }\n\n const batchCmd = new BatchCommand('Change Link URL');\n\n setHref(elem, val);\n batchCmd.addSubCommand(new ChangeElementCommand(elem, {\n '#href': curHref\n }));\n\n addCommandToHistory(batchCmd);\n};\n\n/**\n* Sets the `rx` and `ry` values to the selected `rect` element\n* to change its corner radius.\n* @function module:svgcanvas.SvgCanvas#setRectRadius\n* @param {string|Float} val - The new radius\n* @fires module:svgcanvas.SvgCanvas#event:changed\n* @returns {void}\n*/\nthis.setRectRadius = function (val) {\n const selected = selectedElements[0];\n if (!isNullish(selected) && selected.tagName === 'rect') {\n const r = selected.getAttribute('rx');\n if (r !== String(val)) {\n selected.setAttribute('rx', val);\n selected.setAttribute('ry', val);\n addCommandToHistory(new ChangeElementCommand(selected, {rx: r, ry: r}, 'Radius'));\n call('changed', [selected]);\n }\n }\n};\n\n/**\n* Wraps the selected element(s) in an anchor element or converts group to one.\n* @function module:svgcanvas.SvgCanvas#makeHyperlink\n* @param {string} url\n* @returns {void}\n*/\nthis.makeHyperlink = function (url) {\n canvas.groupSelectedElements('a', url);\n\n // TODO: If element is a single \"g\", convert to \"a\"\n // if (selectedElements.length > 1 && selectedElements[1]) {\n};\n\n/**\n* @function module:svgcanvas.SvgCanvas#removeHyperlink\n* @returns {void}\n*/\nthis.removeHyperlink = function () {\n canvas.ungroupSelectedElement();\n};\n\n/**\n* Group: Element manipulation.\n*/\n\n/**\n* Sets the new segment type to the selected segment(s).\n* @function module:svgcanvas.SvgCanvas#setSegType\n* @param {Integer} newType - New segment type. See {@link https://www.w3.org/TR/SVG/paths.html#InterfaceSVGPathSeg} for list\n* @returns {void}\n*/\nthis.setSegType = function (newType) {\n pathActions.setSegType(newType);\n};\n\n/**\n* Convert selected element to a path, or get the BBox of an element-as-path.\n* @function module:svgcanvas.SvgCanvas#convertToPath\n* @todo (codedread): Remove the getBBox argument and split this function into two.\n* @param {Element} elem - The DOM element to be converted\n* @param {boolean} getBBox - Boolean on whether or not to only return the path's BBox\n* @returns {void|DOMRect|false|SVGPathElement|null} If the getBBox flag is true, the resulting path's bounding box object.\n* Otherwise the resulting path element is returned.\n*/\nthis.convertToPath = function (elem, getBBox) {\n if (isNullish(elem)) {\n const elems = selectedElements;\n $.each(elems, function (i, el) {\n if (el) { canvas.convertToPath(el); }\n });\n return undefined;\n }\n if (getBBox) {\n return getBBoxOfElementAsPath(elem, addSVGElementFromJson, pathActions);\n }\n // TODO: Why is this applying attributes from curShape, then inside utilities.convertToPath it's pulling addition attributes from elem?\n // TODO: If convertToPath is called with one elem, curShape and elem are probably the same; but calling with multiple is a bug or cool feature.\n const attrs = {\n fill: curShape.fill,\n 'fill-opacity': curShape.fill_opacity,\n stroke: curShape.stroke,\n 'stroke-width': curShape.stroke_width,\n 'stroke-dasharray': curShape.stroke_dasharray,\n 'stroke-linejoin': curShape.stroke_linejoin,\n 'stroke-linecap': curShape.stroke_linecap,\n 'stroke-opacity': curShape.stroke_opacity,\n opacity: curShape.opacity,\n visibility: 'hidden'\n };\n return convertToPath(elem, attrs, addSVGElementFromJson, pathActions, clearSelection, addToSelection, hstry, addCommandToHistory);\n};\n\n/**\n* This function makes the changes to the elements. It does not add the change\n* to the history stack.\n* @param {string} attr - Attribute name\n* @param {string|Float} newValue - String or number with the new attribute value\n* @param {Element[]} elems - The DOM elements to apply the change to\n* @returns {void}\n*/\nconst changeSelectedAttributeNoUndo = function (attr, newValue, elems) {\n if (currentMode === 'pathedit') {\n // Editing node\n pathActions.moveNode(attr, newValue);\n }\n elems = elems || selectedElements;\n let i = elems.length;\n const noXYElems = ['g', 'polyline', 'path'];\n // const goodGAttrs = ['transform', 'opacity', 'filter'];\n\n while (i--) {\n let elem = elems[i];\n if (isNullish(elem)) { continue; }\n\n // Set x,y vals on elements that don't have them\n if ((attr === 'x' || attr === 'y') && noXYElems.includes(elem.tagName)) {\n const bbox = getStrokedBBoxDefaultVisible([elem]);\n const diffX = attr === 'x' ? newValue - bbox.x : 0;\n const diffY = attr === 'y' ? newValue - bbox.y : 0;\n canvas.moveSelectedElements(diffX * currentZoom, diffY * currentZoom, true);\n continue;\n }\n\n // only allow the transform/opacity/filter attribute to change on <g> elements, slightly hacky\n // TODO: Missing statement body\n // if (elem.tagName === 'g' && goodGAttrs.includes(attr)) {}\n let oldval = attr === '#text' ? elem.textContent : elem.getAttribute(attr);\n if (isNullish(oldval)) { oldval = ''; }\n if (oldval !== String(newValue)) {\n if (attr === '#text') {\n // const oldW = utilsGetBBox(elem).width;\n elem.textContent = newValue;\n\n // FF bug occurs on on rotated elements\n if ((/rotate/).test(elem.getAttribute('transform'))) {\n elem = ffClone(elem);\n }\n // Hoped to solve the issue of moving text with text-anchor=\"start\",\n // but this doesn't actually fix it. Hopefully on the right track, though. -Fyrd\n // const box = getBBox(elem), left = box.x, top = box.y, {width, height} = box,\n // dx = width - oldW, dy = 0;\n // const angle = getRotationAngle(elem, true);\n // if (angle) {\n // const r = Math.sqrt(dx * dx + dy * dy);\n // const theta = Math.atan2(dy, dx) - angle;\n // dx = r * Math.cos(theta);\n // dy = r * Math.sin(theta);\n //\n // elem.setAttribute('x', elem.getAttribute('x') - dx);\n // elem.setAttribute('y', elem.getAttribute('y') - dy);\n // }\n } else if (attr === '#href') {\n setHref(elem, newValue);\n } else { elem.setAttribute(attr, newValue); }\n\n // Go into \"select\" mode for text changes\n // NOTE: Important that this happens AFTER elem.setAttribute() or else attributes like\n // font-size can get reset to their old value, ultimately by svgEditor.updateContextPanel(),\n // after calling textActions.toSelectMode() below\n if (currentMode === 'textedit' && attr !== '#text' && elem.textContent.length) {\n textActions.toSelectMode(elem);\n }\n\n // if (i === 0) {\n // selectedBBoxes[0] = utilsGetBBox(elem);\n // }\n\n // Use the Firefox ffClone hack for text elements with gradients or\n // where other text attributes are changed.\n if (isGecko() && elem.nodeName === 'text' && (/rotate/).test(elem.getAttribute('transform'))) {\n if (String(newValue).startsWith('url') || (['font-size', 'font-family', 'x', 'y'].includes(attr) && elem.textContent)) {\n elem = ffClone(elem);\n }\n }\n // Timeout needed for Opera & Firefox\n // codedread: it is now possible for this function to be called with elements\n // that are not in the selectedElements array, we need to only request a\n // selector if the element is in that array\n if (selectedElements.includes(elem)) {\n setTimeout(function () {\n // Due to element replacement, this element may no longer\n // be part of the DOM\n if (!elem.parentNode) { return; }\n selectorManager.requestSelector(elem).resize();\n }, 0);\n }\n // if this element was rotated, and we changed the position of this element\n // we need to update the rotational transform attribute\n const angle = getRotationAngle(elem);\n if (angle !== 0 && attr !== 'transform') {\n const tlist = getTransformList(elem);\n let n = tlist.numberOfItems;\n while (n--) {\n const xform = tlist.getItem(n);\n if (xform.type === 4) {\n // remove old rotate\n tlist.removeItem(n);\n\n const box = utilsGetBBox(elem);\n const center = transformPoint(box.x + box.width / 2, box.y + box.height / 2, transformListToTransform(tlist).matrix);\n const cx = center.x,\n cy = center.y;\n const newrot = svgroot.createSVGTransform();\n newrot.setRotate(angle, cx, cy);\n tlist.insertItemBefore(newrot, n);\n break;\n }\n }\n }\n } // if oldValue != newValue\n } // for each elem\n};\n\n/**\n* Change the given/selected element and add the original value to the history stack.\n* If you want to change all `selectedElements`, ignore the `elems` argument.\n* If you want to change only a subset of `selectedElements`, then send the\n* subset to this function in the `elems` argument.\n* @function module:svgcanvas.SvgCanvas#changeSelectedAttribute\n* @param {string} attr - String with the attribute name\n* @param {string|Float} val - String or number with the new attribute value\n* @param {Element[]} elems - The DOM elements to apply the change to\n* @returns {void}\n*/\nconst changeSelectedAttribute = this.changeSelectedAttribute = function (attr, val, elems) {\n elems = elems || selectedElements;\n canvas.undoMgr.beginUndoableChange(attr, elems);\n // const i = elems.length;\n\n changeSelectedAttributeNoUndo(attr, val, elems);\n\n const batchCmd = canvas.undoMgr.finishUndoableChange();\n if (!batchCmd.isEmpty()) {\n addCommandToHistory(batchCmd);\n }\n};\n\n/**\n* Removes all selected elements from the DOM and adds the change to the\n* history stack.\n* @function module:svgcanvas.SvgCanvas#deleteSelectedElements\n* @fires module:svgcanvas.SvgCanvas#event:changed\n* @returns {void}\n*/\nthis.deleteSelectedElements = function () {\n const batchCmd = new BatchCommand('Delete Elements');\n const len = selectedElements.length;\n const selectedCopy = []; // selectedElements is being deleted\n\n for (let i = 0; i < len; ++i) {\n const selected = selectedElements[i];\n if (isNullish(selected)) { break; }\n\n let parent = selected.parentNode;\n let t = selected;\n\n // this will unselect the element and remove the selectedOutline\n selectorManager.releaseSelector(t);\n\n // Remove the path if present.\n pathModule.removePath_(t.id);\n\n // Get the parent if it's a single-child anchor\n if (parent.tagName === 'a' && parent.childNodes.length === 1) {\n t = parent;\n parent = parent.parentNode;\n }\n\n const {nextSibling} = t;\n const elem = parent.removeChild(t);\n selectedCopy.push(selected); // for the copy\n batchCmd.addSubCommand(new RemoveElementCommand(elem, nextSibling, parent));\n }\n selectedElements = [];\n\n if (!batchCmd.isEmpty()) { addCommandToHistory(batchCmd); }\n call('changed', selectedCopy);\n clearSelection();\n};\n\n/**\n* Removes all selected elements from the DOM and adds the change to the\n* history stack. Remembers removed elements on the clipboard.\n* @function module:svgcanvas.SvgCanvas#cutSelectedElements\n* @returns {void}\n*/\nthis.cutSelectedElements = function () {\n canvas.copySelectedElements();\n canvas.deleteSelectedElements();\n};\n\n/**\n* Remembers the current selected elements on the clipboard.\n* @function module:svgcanvas.SvgCanvas#copySelectedElements\n* @returns {void}\n*/\nthis.copySelectedElements = function () {\n localStorage.setItem('svgedit_clipboard', JSON.stringify(\n selectedElements.map(function (x) { return getJsonFromSvgElement(x); })\n ));\n\n $('#cmenu_canvas').enableContextMenuItems('#paste,#paste_in_place');\n};\n\n/**\n* @function module:svgcanvas.SvgCanvas#pasteElements\n* @param {\"in_place\"|\"point\"|void} type\n* @param {Integer|void} x Expected if type is \"point\"\n* @param {Integer|void} y Expected if type is \"point\"\n* @fires module:svgcanvas.SvgCanvas#event:changed\n* @fires module:svgcanvas.SvgCanvas#event:ext_IDsUpdated\n* @returns {void}\n*/\nthis.pasteElements = function (type, x, y) {\n let clipb = JSON.parse(localStorage.getItem('svgedit_clipboard'));\n let len = clipb.length;\n if (!len) { return; }\n\n const pasted = [];\n const batchCmd = new BatchCommand('Paste elements');\n // const drawing = getCurrentDrawing();\n /**\n * @typedef {PlainObject<string, string>} module:svgcanvas.ChangedIDs\n */\n /**\n * @type {module:svgcanvas.ChangedIDs}\n */\n const changedIDs = {};\n\n // Recursively replace IDs and record the changes\n /**\n *\n * @param {module:svgcanvas.SVGAsJSON} elem\n * @returns {void}\n */\n function checkIDs (elem) {\n if (elem.attr && elem.attr.id) {\n changedIDs[elem.attr.id] = getNextId();\n elem.attr.id = changedIDs[elem.attr.id];\n }\n if (elem.children) elem.children.forEach(checkIDs);\n }\n clipb.forEach(checkIDs);\n\n // Give extensions like the connector extension a chance to reflect new IDs and remove invalid elements\n /**\n * Triggered when `pasteElements` is called from a paste action (context menu or key).\n * @event module:svgcanvas.SvgCanvas#event:ext_IDsUpdated\n * @type {PlainObject}\n * @property {module:svgcanvas.SVGAsJSON[]} elems\n * @property {module:svgcanvas.ChangedIDs} changes Maps past ID (on attribute) to current ID\n */\n runExtensions(\n 'IDsUpdated',\n /** @type {module:svgcanvas.SvgCanvas#event:ext_IDsUpdated} */\n {elems: clipb, changes: changedIDs},\n true\n ).forEach(function (extChanges) {\n if (!extChanges || !('remove' in extChanges)) return;\n\n extChanges.remove.forEach(function (removeID) {\n clipb = clipb.filter(function (clipBoardItem) {\n return clipBoardItem.attr.id !== removeID;\n });\n });\n });\n\n // Move elements to lastClickPoint\n while (len--) {\n const elem = clipb[len];\n if (!elem) { continue; }\n\n const copy = addSVGElementFromJson(elem);\n pasted.push(copy);\n batchCmd.addSubCommand(new InsertElementCommand(copy));\n\n restoreRefElems(copy);\n }\n\n selectOnly(pasted);\n\n if (type !== 'in_place') {\n let ctrX, ctrY;\n\n if (!type) {\n ctrX = lastClickPoint.x;\n ctrY = lastClickPoint.y;\n } else if (type === 'point') {\n ctrX = x;\n ctrY = y;\n }\n\n const bbox = getStrokedBBoxDefaultVisible(pasted);\n const cx = ctrX - (bbox.x + bbox.width / 2),\n cy = ctrY - (bbox.y + bbox.height / 2),\n dx = [],\n dy = [];\n\n $.each(pasted, function (i, item) {\n dx.push(cx);\n dy.push(cy);\n });\n\n const cmd = canvas.moveSelectedElements(dx, dy, false);\n if (cmd) batchCmd.addSubCommand(cmd);\n }\n\n addCommandToHistory(batchCmd);\n call('changed', pasted);\n};\n\n/**\n* Wraps all the selected elements in a group (`g`) element.\n* @function module:svgcanvas.SvgCanvas#groupSelectedElements\n* @param {\"a\"|\"g\"} [type=\"g\"] - type of element to group into, defaults to `<g>`\n* @param {string} [urlArg]\n* @returns {void}\n*/\nthis.groupSelectedElements = function (type, urlArg) {\n if (!type) { type = 'g'; }\n let cmdStr = '';\n let url;\n\n switch (type) {\n case 'a': {\n cmdStr = 'Make hyperlink';\n url = urlArg || '';\n break;\n } default: {\n type = 'g';\n cmdStr = 'Group Elements';\n break;\n }\n }\n\n const batchCmd = new BatchCommand(cmdStr);\n\n // create and insert the group element\n const g = addSVGElementFromJson({\n element: type,\n attr: {\n id: getNextId()\n }\n });\n if (type === 'a') {\n setHref(g, url);\n }\n batchCmd.addSubCommand(new InsertElementCommand(g));\n\n // now move all children into the group\n let i = selectedElements.length;\n while (i--) {\n let elem = selectedElements[i];\n if (isNullish(elem)) { continue; }\n\n if (elem.parentNode.tagName === 'a' && elem.parentNode.childNodes.length === 1) {\n elem = elem.parentNode;\n }\n\n const oldNextSibling = elem.nextSibling;\n const oldParent = elem.parentNode;\n g.append(elem);\n batchCmd.addSubCommand(new MoveElementCommand(elem, oldNextSibling, oldParent));\n }\n if (!batchCmd.isEmpty()) { addCommandToHistory(batchCmd); }\n\n // update selection\n selectOnly([g], true);\n};\n\n/**\n* Pushes all appropriate parent group properties down to its children, then\n* removes them from the group.\n* @function module:svgcanvas.SvgCanvas#pushGroupProperties\n* @param {SVGAElement|SVGGElement} g\n* @param {boolean} undoable\n* @returns {BatchCommand|void}\n*/\nconst pushGroupProperties = this.pushGroupProperties = function (g, undoable) {\n const children = g.childNodes;\n const len = children.length;\n const xform = g.getAttribute('transform');\n\n const glist = getTransformList(g);\n const m = transformListToTransform(glist).matrix;\n\n const batchCmd = new BatchCommand('Push group properties');\n\n // TODO: get all fill/stroke properties from the group that we are about to destroy\n // \"fill\", \"fill-opacity\", \"fill-rule\", \"stroke\", \"stroke-dasharray\", \"stroke-dashoffset\",\n // \"stroke-linecap\", \"stroke-linejoin\", \"stroke-miterlimit\", \"stroke-opacity\",\n // \"stroke-width\"\n // and then for each child, if they do not have the attribute (or the value is 'inherit')\n // then set the child's attribute\n\n const gangle = getRotationAngle(g);\n\n const gattrs = $(g).attr(['filter', 'opacity']);\n let gfilter, gblur, changes;\n const drawing = getCurrentDrawing();\n\n for (let i = 0; i < len; i++) {\n const elem = children[i];\n\n if (elem.nodeType !== 1) { continue; }\n\n if (gattrs.opacity !== null && gattrs.opacity !== 1) {\n // const c_opac = elem.getAttribute('opacity') || 1;\n const newOpac = Math.round((elem.getAttribute('opacity') || 1) * gattrs.opacity * 100) / 100;\n changeSelectedAttribute('opacity', newOpac, [elem]);\n }\n\n if (gattrs.filter) {\n let cblur = this.getBlur(elem);\n const origCblur = cblur;\n if (!gblur) { gblur = this.getBlur(g); }\n if (cblur) {\n // Is this formula correct?\n cblur = Number(gblur) + Number(cblur);\n } else if (cblur === 0) {\n cblur = gblur;\n }\n\n // If child has no current filter, get group's filter or clone it.\n if (!origCblur) {\n // Set group's filter to use first child's ID\n if (!gfilter) {\n gfilter = getRefElem(gattrs.filter);\n } else {\n // Clone the group's filter\n gfilter = drawing.copyElem(gfilter);\n findDefs().append(gfilter);\n }\n } else {\n gfilter = getRefElem(elem.getAttribute('filter'));\n }\n\n // Change this in future for different filters\n const suffix = (gfilter.firstChild.tagName === 'feGaussianBlur') ? 'blur' : 'filter';\n gfilter.id = elem.id + '_' + suffix;\n changeSelectedAttribute('filter', 'url(#' + gfilter.id + ')', [elem]);\n\n // Update blur value\n if (cblur) {\n changeSelectedAttribute('stdDeviation', cblur, [gfilter.firstChild]);\n canvas.setBlurOffsets(gfilter, cblur);\n }\n }\n\n let chtlist = getTransformList(elem);\n\n // Don't process gradient transforms\n if (elem.tagName.includes('Gradient')) { chtlist = null; }\n\n // Hopefully not a problem to add this. Necessary for elements like <desc/>\n if (!chtlist) { continue; }\n\n // Apparently <defs> can get get a transformlist, but we don't want it to have one!\n if (elem.tagName === 'defs') { continue; }\n\n if (glist.numberOfItems) {\n // TODO: if the group's transform is just a rotate, we can always transfer the\n // rotate() down to the children (collapsing consecutive rotates and factoring\n // out any translates)\n if (gangle && glist.numberOfItems === 1) {\n // [Rg] [Rc] [Mc]\n // we want [Tr] [Rc2] [Mc] where:\n // - [Rc2] is at the child's current center but has the\n // sum of the group and child's rotation angles\n // - [Tr] is the equivalent translation that this child\n // undergoes if the group wasn't there\n\n // [Tr] = [Rg] [Rc] [Rc2_inv]\n\n // get group's rotation matrix (Rg)\n const rgm = glist.getItem(0).matrix;\n\n // get child's rotation matrix (Rc)\n let rcm = svgroot.createSVGMatrix();\n const cangle = getRotationAngle(elem);\n if (cangle) {\n rcm = chtlist.getItem(0).matrix;\n }\n\n // get child's old center of rotation\n const cbox = utilsGetBBox(elem);\n const ceqm = transformListToTransform(chtlist).matrix;\n const coldc = transformPoint(cbox.x + cbox.width / 2, cbox.y + cbox.height / 2, ceqm);\n\n // sum group and child's angles\n const sangle = gangle + cangle;\n\n // get child's rotation at the old center (Rc2_inv)\n const r2 = svgroot.createSVGTransform();\n r2.setRotate(sangle, coldc.x, coldc.y);\n\n // calculate equivalent translate\n const trm = matrixMultiply(rgm, rcm, r2.matrix.inverse());\n\n // set up tlist\n if (cangle) {\n chtlist.removeItem(0);\n }\n\n if (sangle) {\n if (chtlist.numberOfItems) {\n chtlist.insertItemBefore(r2, 0);\n } else {\n chtlist.appendItem(r2);\n }\n }\n\n if (trm.e || trm.f) {\n const tr = svgroot.createSVGTransform();\n tr.setTranslate(trm.e, trm.f);\n if (chtlist.numberOfItems) {\n chtlist.insertItemBefore(tr, 0);\n } else {\n chtlist.appendItem(tr);\n }\n }\n } else { // more complicated than just a rotate\n // transfer the group's transform down to each child and then\n // call recalculateDimensions()\n const oldxform = elem.getAttribute('transform');\n changes = {};\n changes.transform = oldxform || '';\n\n const newxform = svgroot.createSVGTransform();\n\n // [ gm ] [ chm ] = [ chm ] [ gm' ]\n // [ gm' ] = [ chmInv ] [ gm ] [ chm ]\n const chm = transformListToTransform(chtlist).matrix,\n chmInv = chm.inverse();\n const gm = matrixMultiply(chmInv, m, chm);\n newxform.setMatrix(gm);\n chtlist.appendItem(newxform);\n }\n const cmd = recalculateDimensions(elem);\n if (cmd) { batchCmd.addSubCommand(cmd); }\n }\n }\n\n // remove transform and make it undo-able\n if (xform) {\n changes = {};\n changes.transform = xform;\n g.setAttribute('transform', '');\n g.removeAttribute('transform');\n batchCmd.addSubCommand(new ChangeElementCommand(g, changes));\n }\n\n if (undoable && !batchCmd.isEmpty()) {\n return batchCmd;\n }\n return undefined;\n};\n\n/**\n* Unwraps all the elements in a selected group (`g`) element. This requires\n* significant recalculations to apply group's transforms, etc. to its children.\n* @function module:svgcanvas.SvgCanvas#ungroupSelectedElement\n* @returns {void}\n*/\nthis.ungroupSelectedElement = function () {\n let g = selectedElements[0];\n if (!g) {\n return;\n }\n if ($(g).data('gsvg') || $(g).data('symbol')) {\n // Is svg, so actually convert to group\n convertToGroup(g);\n return;\n }\n if (g.tagName === 'use') {\n // Somehow doesn't have data set, so retrieve\n const symbol = getElem(getHref(g).substr(1));\n $(g).data('symbol', symbol).data('ref', symbol);\n convertToGroup(g);\n return;\n }\n const parentsA = $(g).parents('a');\n if (parentsA.length) {\n g = parentsA[0];\n }\n\n // Look for parent \"a\"\n if (g.tagName === 'g' || g.tagName === 'a') {\n const batchCmd = new BatchCommand('Ungroup Elements');\n const cmd = pushGroupProperties(g, true);\n if (cmd) { batchCmd.addSubCommand(cmd); }\n\n const parent = g.parentNode;\n const anchor = g.nextSibling;\n const children = new Array(g.childNodes.length);\n\n let i = 0;\n while (g.firstChild) {\n let elem = g.firstChild;\n const oldNextSibling = elem.nextSibling;\n const oldParent = elem.parentNode;\n\n // Remove child title elements\n if (elem.tagName === 'title') {\n const {nextSibling} = elem;\n batchCmd.addSubCommand(new RemoveElementCommand(elem, nextSibling, oldParent));\n elem.remove();\n continue;\n }\n\n children[i++] = elem = anchor.before(elem);\n batchCmd.addSubCommand(new MoveElementCommand(elem, oldNextSibling, oldParent));\n }\n\n // remove the group from the selection\n clearSelection();\n\n // delete the group element (but make undo-able)\n const gNextSibling = g.nextSibling;\n g = parent.removeChild(g);\n batchCmd.addSubCommand(new RemoveElementCommand(g, gNextSibling, parent));\n\n if (!batchCmd.isEmpty()) { addCommandToHistory(batchCmd); }\n\n // update selection\n addToSelection(children);\n }\n};\n\n/**\n* Repositions the selected element to the bottom in the DOM to appear on top of\n* other elements.\n* @function module:svgcanvas.SvgCanvas#moveToTopSelectedElement\n* @fires module:svgcanvas.SvgCanvas#event:changed\n* @returns {void}\n*/\nthis.moveToTopSelectedElement = function () {\n const [selected] = selectedElements;\n if (!isNullish(selected)) {\n let t = selected;\n const oldParent = t.parentNode;\n const oldNextSibling = t.nextSibling;\n t = t.parentNode.appendChild(t);\n // If the element actually moved position, add the command and fire the changed\n // event handler.\n if (oldNextSibling !== t.nextSibling) {\n addCommandToHistory(new MoveElementCommand(t, oldNextSibling, oldParent, 'top'));\n call('changed', [t]);\n }\n }\n};\n\n/**\n* Repositions the selected element to the top in the DOM to appear under\n* other elements.\n* @function module:svgcanvas.SvgCanvas#moveToBottomSelectedElement\n* @fires module:svgcanvas.SvgCanvas#event:changed\n* @returns {void}\n*/\nthis.moveToBottomSelectedElement = function () {\n const [selected] = selectedElements;\n if (!isNullish(selected)) {\n let t = selected;\n const oldParent = t.parentNode;\n const oldNextSibling = t.nextSibling;\n let {firstChild} = t.parentNode;\n if (firstChild.tagName === 'title') {\n firstChild = firstChild.nextSibling;\n }\n // This can probably be removed, as the defs should not ever apppear\n // inside a layer group\n if (firstChild.tagName === 'defs') {\n firstChild = firstChild.nextSibling;\n }\n t = t.parentNode.insertBefore(t, firstChild);\n // If the element actually moved position, add the command and fire the changed\n // event handler.\n if (oldNextSibling !== t.nextSibling) {\n addCommandToHistory(new MoveElementCommand(t, oldNextSibling, oldParent, 'bottom'));\n call('changed', [t]);\n }\n }\n};\n\n/**\n* Moves the select element up or down the stack, based on the visibly\n* intersecting elements.\n* @function module:svgcanvas.SvgCanvas#moveUpDownSelected\n* @param {\"Up\"|\"Down\"} dir - String that's either 'Up' or 'Down'\n* @fires module:svgcanvas.SvgCanvas#event:changed\n* @returns {void}\n*/\nthis.moveUpDownSelected = function (dir) {\n const selected = selectedElements[0];\n if (!selected) { return; }\n\n curBBoxes = [];\n let closest, foundCur;\n // jQuery sorts this list\n const list = $(getIntersectionList(getStrokedBBoxDefaultVisible([selected]))).toArray();\n if (dir === 'Down') { list.reverse(); }\n\n $.each(list, function () {\n if (!foundCur) {\n if (this === selected) {\n foundCur = true;\n }\n return true;\n }\n closest = this; // eslint-disable-line consistent-this\n return false;\n });\n if (!closest) { return; }\n\n const t = selected;\n const oldParent = t.parentNode;\n const oldNextSibling = t.nextSibling;\n $(closest)[dir === 'Down' ? 'before' : 'after'](t);\n // If the element actually moved position, add the command and fire the changed\n // event handler.\n if (oldNextSibling !== t.nextSibling) {\n addCommandToHistory(new MoveElementCommand(t, oldNextSibling, oldParent, 'Move ' + dir));\n call('changed', [t]);\n }\n};\n\n/**\n* Moves selected elements on the X/Y axis.\n* @function module:svgcanvas.SvgCanvas#moveSelectedElements\n* @param {Float} dx - Float with the distance to move on the x-axis\n* @param {Float} dy - Float with the distance to move on the y-axis\n* @param {boolean} undoable - Boolean indicating whether or not the action should be undoable\n* @fires module:svgcanvas.SvgCanvas#event:changed\n* @returns {BatchCommand|void} Batch command for the move\n*/\nthis.moveSelectedElements = function (dx, dy, undoable) {\n // if undoable is not sent, default to true\n // if single values, scale them to the zoom\n if (dx.constructor !== Array) {\n dx /= currentZoom;\n dy /= currentZoom;\n }\n undoable = undoable || true;\n const batchCmd = new BatchCommand('position');\n let i = selectedElements.length;\n while (i--) {\n const selected = selectedElements[i];\n if (!isNullish(selected)) {\n // if (i === 0) {\n // selectedBBoxes[0] = utilsGetBBox(selected);\n // }\n // const b = {};\n // for (const j in selectedBBoxes[i]) b[j] = selectedBBoxes[i][j];\n // selectedBBoxes[i] = b;\n\n const xform = svgroot.createSVGTransform();\n const tlist = getTransformList(selected);\n\n // dx and dy could be arrays\n if (dx.constructor === Array) {\n // if (i === 0) {\n // selectedBBoxes[0].x += dx[0];\n // selectedBBoxes[0].y += dy[0];\n // }\n xform.setTranslate(dx[i], dy[i]);\n } else {\n // if (i === 0) {\n // selectedBBoxes[0].x += dx;\n // selectedBBoxes[0].y += dy;\n // }\n xform.setTranslate(dx, dy);\n }\n\n if (tlist.numberOfItems) {\n tlist.insertItemBefore(xform, 0);\n } else {\n tlist.appendItem(xform);\n }\n\n const cmd = recalculateDimensions(selected);\n if (cmd) {\n batchCmd.addSubCommand(cmd);\n }\n\n selectorManager.requestSelector(selected).resize();\n }\n }\n if (!batchCmd.isEmpty()) {\n if (undoable) {\n addCommandToHistory(batchCmd);\n }\n call('changed', selectedElements);\n return batchCmd;\n }\n return undefined;\n};\n\n/**\n* Create deep DOM copies (clones) of all selected elements and move them slightly\n* from their originals.\n* @function module:svgcanvas.SvgCanvas#cloneSelectedElements\n* @param {Float} x Float with the distance to move on the x-axis\n* @param {Float} y Float with the distance to move on the y-axis\n* @returns {void}\n*/\nthis.cloneSelectedElements = function (x, y) {\n let i, elem;\n const batchCmd = new BatchCommand('Clone Elements');\n // find all the elements selected (stop at first null)\n const len = selectedElements.length;\n /**\n * Sorts an array numerically and ascending.\n * @param {Element} a\n * @param {Element} b\n * @returns {Integer}\n */\n function sortfunction (a, b) {\n return ($(b).index() - $(a).index());\n }\n selectedElements.sort(sortfunction);\n for (i = 0; i < len; ++i) {\n elem = selectedElements[i];\n if (isNullish(elem)) { break; }\n }\n // use slice to quickly get the subset of elements we need\n const copiedElements = selectedElements.slice(0, i);\n this.clearSelection(true);\n // note that we loop in the reverse way because of the way elements are added\n // to the selectedElements array (top-first)\n const drawing = getCurrentDrawing();\n i = copiedElements.length;\n while (i--) {\n // clone each element and replace it within copiedElements\n elem = copiedElements[i] = drawing.copyElem(copiedElements[i]);\n (currentGroup || drawing.getCurrentLayer()).append(elem);\n batchCmd.addSubCommand(new InsertElementCommand(elem));\n }\n\n if (!batchCmd.isEmpty()) {\n addToSelection(copiedElements.reverse()); // Need to reverse for correct selection-adding\n this.moveSelectedElements(x, y, false);\n addCommandToHistory(batchCmd);\n }\n};\n\n/**\n* Aligns selected elements.\n* @function module:svgcanvas.SvgCanvas#alignSelectedElements\n* @param {string} type - String with single character indicating the alignment type\n* @param {\"selected\"|\"largest\"|\"smallest\"|\"page\"} relativeTo\n* @returns {void}\n*/\nthis.alignSelectedElements = function (type, relativeTo) {\n const bboxes = []; // angles = [];\n const len = selectedElements.length;\n if (!len) { return; }\n let minx = Number.MAX_VALUE, maxx = Number.MIN_VALUE,\n miny = Number.MAX_VALUE, maxy = Number.MIN_VALUE;\n let curwidth = Number.MIN_VALUE, curheight = Number.MIN_VALUE;\n for (let i = 0; i < len; ++i) {\n if (isNullish(selectedElements[i])) { break; }\n const elem = selectedElements[i];\n bboxes[i] = getStrokedBBoxDefaultVisible([elem]);\n\n // now bbox is axis-aligned and handles rotation\n switch (relativeTo) {\n case 'smallest':\n if (((type === 'l' || type === 'c' || type === 'r') &&\n (curwidth === Number.MIN_VALUE || curwidth > bboxes[i].width)) ||\n ((type === 't' || type === 'm' || type === 'b') &&\n (curheight === Number.MIN_VALUE || curheight > bboxes[i].height))\n ) {\n minx = bboxes[i].x;\n miny = bboxes[i].y;\n maxx = bboxes[i].x + bboxes[i].width;\n maxy = bboxes[i].y + bboxes[i].height;\n curwidth = bboxes[i].width;\n curheight = bboxes[i].height;\n }\n break;\n case 'largest':\n if (((type === 'l' || type === 'c' || type === 'r') &&\n (curwidth === Number.MIN_VALUE || curwidth < bboxes[i].width)) ||\n ((type === 't' || type === 'm' || type === 'b') &&\n (curheight === Number.MIN_VALUE || curheight < bboxes[i].height))\n ) {\n minx = bboxes[i].x;\n miny = bboxes[i].y;\n maxx = bboxes[i].x + bboxes[i].width;\n maxy = bboxes[i].y + bboxes[i].height;\n curwidth = bboxes[i].width;\n curheight = bboxes[i].height;\n }\n break;\n default: // 'selected'\n if (bboxes[i].x < minx) { minx = bboxes[i].x; }\n if (bboxes[i].y < miny) { miny = bboxes[i].y; }\n if (bboxes[i].x + bboxes[i].width > maxx) { maxx = bboxes[i].x + bboxes[i].width; }\n if (bboxes[i].y + bboxes[i].height > maxy) { maxy = bboxes[i].y + bboxes[i].height; }\n break;\n }\n } // loop for each element to find the bbox and adjust min/max\n\n if (relativeTo === 'page') {\n minx = 0;\n miny = 0;\n maxx = canvas.contentW;\n maxy = canvas.contentH;\n }\n\n const dx = new Array(len);\n const dy = new Array(len);\n for (let i = 0; i < len; ++i) {\n if (isNullish(selectedElements[i])) { break; }\n // const elem = selectedElements[i];\n const bbox = bboxes[i];\n dx[i] = 0;\n dy[i] = 0;\n switch (type) {\n case 'l': // left (horizontal)\n dx[i] = minx - bbox.x;\n break;\n case 'c': // center (horizontal)\n dx[i] = (minx + maxx) / 2 - (bbox.x + bbox.width / 2);\n break;\n case 'r': // right (horizontal)\n dx[i] = maxx - (bbox.x + bbox.width);\n break;\n case 't': // top (vertical)\n dy[i] = miny - bbox.y;\n break;\n case 'm': // middle (vertical)\n dy[i] = (miny + maxy) / 2 - (bbox.y + bbox.height / 2);\n break;\n case 'b': // bottom (vertical)\n dy[i] = maxy - (bbox.y + bbox.height);\n break;\n }\n }\n this.moveSelectedElements(dx, dy);\n};\n\n/**\n* Group: Additional editor tools.\n*/\n\n/**\n* @name module:svgcanvas.SvgCanvas#contentW\n* @type {Float}\n*/\nthis.contentW = getResolution().w;\n/**\n* @name module:svgcanvas.SvgCanvas#contentH\n* @type {Float}\n*/\nthis.contentH = getResolution().h;\n\n/**\n* @typedef {PlainObject} module:svgcanvas.CanvasInfo\n* @property {Float} x - The canvas' new x coordinate\n* @property {Float} y - The canvas' new y coordinate\n* @property {string} oldX - The canvas' old x coordinate\n* @property {string} oldY - The canvas' old y coordinate\n* @property {Float} d_x - The x position difference\n* @property {Float} d_y - The y position difference\n*/\n\n/**\n* Updates the editor canvas width/height/position after a zoom has occurred.\n* @function module:svgcanvas.SvgCanvas#updateCanvas\n* @param {Float} w - Float with the new width\n* @param {Float} h - Float with the new height\n* @fires module:svgcanvas.SvgCanvas#event:ext_canvasUpdated\n* @returns {module:svgcanvas.CanvasInfo}\n*/\nthis.updateCanvas = function (w, h) {\n svgroot.setAttribute('width', w);\n svgroot.setAttribute('height', h);\n const bg = $('#canvasBackground')[0];\n const oldX = svgcontent.getAttribute('x');\n const oldY = svgcontent.getAttribute('y');\n const x = ((w - this.contentW * currentZoom) / 2);\n const y = ((h - this.contentH * currentZoom) / 2);\n\n assignAttributes(svgcontent, {\n width: this.contentW * currentZoom,\n height: this.contentH * currentZoom,\n x,\n y,\n viewBox: '0 0 ' + this.contentW + ' ' + this.contentH\n });\n\n assignAttributes(bg, {\n width: svgcontent.getAttribute('width'),\n height: svgcontent.getAttribute('height'),\n x,\n y\n });\n\n const bgImg = getElem('background_image');\n if (bgImg) {\n assignAttributes(bgImg, {\n width: '100%',\n height: '100%'\n });\n }\n\n selectorManager.selectorParentGroup.setAttribute('transform', 'translate(' + x + ',' + y + ')');\n\n /**\n * Invoked upon updates to the canvas.\n * @event module:svgcanvas.SvgCanvas#event:ext_canvasUpdated\n * @type {PlainObject}\n * @property {Integer} new_x\n * @property {Integer} new_y\n * @property {string} old_x (Of Integer)\n * @property {string} old_y (Of Integer)\n * @property {Integer} d_x\n * @property {Integer} d_y\n */\n runExtensions(\n 'canvasUpdated',\n /**\n * @type {module:svgcanvas.SvgCanvas#event:ext_canvasUpdated}\n */\n {new_x: x, new_y: y, old_x: oldX, old_y: oldY, d_x: x - oldX, d_y: y - oldY}\n );\n return {x, y, old_x: oldX, old_y: oldY, d_x: x - oldX, d_y: y - oldY};\n};\n\n/**\n* Set the background of the editor (NOT the actual document).\n* @function module:svgcanvas.SvgCanvas#setBackground\n* @param {string} color - String with fill color to apply\n* @param {string} url - URL or path to image to use\n* @returns {void}\n*/\nthis.setBackground = function (color, url) {\n const bg = getElem('canvasBackground');\n const border = $(bg).find('rect')[0];\n let bgImg = getElem('background_image');\n border.setAttribute('fill', color);\n if (url) {\n if (!bgImg) {\n bgImg = svgdoc.createElementNS(NS.SVG, 'image');\n assignAttributes(bgImg, {\n id: 'background_image',\n width: '100%',\n height: '100%',\n preserveAspectRatio: 'xMinYMin',\n style: 'pointer-events:none'\n });\n }\n setHref(bgImg, url);\n bg.append(bgImg);\n } else if (bgImg) {\n bgImg.remove();\n }\n};\n\n/**\n* Select the next/previous element within the current layer.\n* @function module:svgcanvas.SvgCanvas#cycleElement\n* @param {boolean} next - true = next and false = previous element\n* @fires module:svgcanvas.SvgCanvas#event:selected\n* @returns {void}\n*/\nthis.cycleElement = function (next) {\n let num;\n const curElem = selectedElements[0];\n let elem = false;\n const allElems = getVisibleElements(currentGroup || getCurrentDrawing().getCurrentLayer());\n if (!allElems.length) { return; }\n if (isNullish(curElem)) {\n num = next ? allElems.length - 1 : 0;\n elem = allElems[num];\n } else {\n let i = allElems.length;\n while (i--) {\n if (allElems[i] === curElem) {\n num = next ? i - 1 : i + 1;\n if (num >= allElems.length) {\n num = 0;\n } else if (num < 0) {\n num = allElems.length - 1;\n }\n elem = allElems[num];\n break;\n }\n }\n }\n selectOnly([elem], true);\n call('selected', selectedElements);\n};\n\nthis.clear();\n\n/**\n* @interface module:svgcanvas.PrivateMethods\n* @type {PlainObject}\n* @property {module:svgcanvas~addCommandToHistory} addCommandToHistory\n* @property {module:history.HistoryCommand} BatchCommand\n* @property {module:history.HistoryCommand} ChangeElementCommand\n* @property {module:utilities.decode64} decode64\n* @property {module:utilities.dropXMLInternalSubset} dropXMLInternalSubset\n* @property {module:utilities.encode64} encode64\n* @property {module:svgcanvas~ffClone} ffClone\n* @property {module:svgcanvas~findDuplicateGradient} findDuplicateGradient\n* @property {module:utilities.getPathBBox} getPathBBox\n* @property {module:units.getTypeMap} getTypeMap\n* @property {module:draw.identifyLayers} identifyLayers\n* @property {module:history.HistoryCommand} InsertElementCommand\n* @property {module:browser.isChrome} isChrome\n* @property {module:math.isIdentity} isIdentity\n* @property {module:browser.isIE} isIE\n* @property {module:svgcanvas~logMatrix} logMatrix\n* @property {module:history.HistoryCommand} MoveElementCommand\n* @property {module:namespaces.NS} NS\n* @property {module:utilities.preventClickDefault} preventClickDefault\n* @property {module:history.HistoryCommand} RemoveElementCommand\n* @property {module:SVGTransformList.SVGEditTransformList} SVGEditTransformList\n* @property {module:utilities.text2xml} text2xml\n* @property {module:math.transformBox} transformBox\n* @property {module:math.transformPoint} transformPoint\n* @property {module:utilities.walkTree} walkTree\n*/\n/**\n* @deprecated getPrivateMethods\n* Since all methods are/should be public somehow, this function should be removed;\n* we might require `import` in place of this in the future once ES6 Modules\n* widespread\n\n* Being able to access private methods publicly seems wrong somehow,\n* but currently appears to be the best way to allow testing and provide\n* access to them to plugins.\n* @function module:svgcanvas.SvgCanvas#getPrivateMethods\n* @returns {module:svgcanvas.PrivateMethods}\n*/\nthis.getPrivateMethods = function () {\n const obj = {\n addCommandToHistory,\n BatchCommand,\n ChangeElementCommand,\n decode64,\n dropXMLInternalSubset,\n encode64,\n ffClone,\n findDefs,\n findDuplicateGradient,\n getElem,\n getPathBBox,\n getTypeMap,\n getUrlFromAttr,\n identifyLayers: draw.identifyLayers,\n InsertElementCommand,\n isChrome,\n isIdentity,\n isIE,\n logMatrix,\n MoveElementCommand,\n NS,\n preventClickDefault,\n RemoveElementCommand,\n SVGEditTransformList,\n text2xml,\n transformBox,\n transformPoint,\n walkTree\n };\n return obj;\n};\n } // End constructor\n} // End class\n\nexport default SvgCanvas;\n","/**\n * @file SVG Icon Loader 2.0\n *\n * jQuery Plugin for loading SVG icons from a single file\n *\n * Adds {@link external:jQuery.svgIcons}, {@link external:jQuery.getSvgIcon}, {@link external:jQuery.resizeSvgIcons}\n *\n * How to use:\n\n1. Create the SVG master file that includes all icons:\n\nThe master SVG icon-containing file is an SVG file that contains\n`<g>` elements. Each `<g>` element should contain the markup of an SVG\nicon. The `<g>` element has an ID that should\ncorrespond with the ID of the HTML element used on the page that should contain\nor optionally be replaced by the icon. Additionally, one empty element should be\nadded at the end with id \"svg_eof\".\n\n2. Optionally create fallback raster images for each SVG icon.\n\n3. Include the jQuery and the SVG Icon Loader scripts on your page.\n\n4. Run `$.svgIcons()` when the document is ready. See its signature\n\n5. To access an icon at a later point without using the callback, use this:\n `$.getSvgIcon(id (string), uniqueClone (boolean))`;\n\nThis will return the icon (as jQuery object) with a given ID.\n\n6. To resize icons at a later point without using the callback, use this:\n `$.resizeSvgIcons(resizeOptions)` (use the same way as the \"resize\" parameter)\n *\n * @module jQuerySVGIcons\n * @license MIT\n * @copyright (c) 2009 Alexis Deveria\n * {@link http://a.deveria.com}\n * @example\n$(function () {\n $.svgIcons('my_icon_set.svg'); // The SVG file that contains all icons\n // No options have been set, so all icons will automatically be inserted\n // into HTML elements that match the same IDs.\n});\n\n* @example\n$(function () {\n // The SVG file that contains all icons\n $.svgIcons('my_icon_set.svg', {\n callback (icons) { // Custom callback function that sets click\n // events for each icon\n $.each(icons, function (id, icon) {\n icon.click(function () {\n alert('You clicked on the icon with id ' + id);\n });\n });\n }\n });\n});\n\n* @example\n$(function () {\n // The SVGZ file that contains all icons\n $.svgIcons('my_icon_set.svgz', {\n w: 32, // All icons will be 32px wide\n h: 32, // All icons will be 32px high\n fallback_path: 'icons/', // All fallback files can be found here\n fallback: {\n '#open_icon': 'open.png', // The \"open.png\" will be appended to the\n // HTML element with ID \"open_icon\"\n '#close_icon': 'close.png',\n '#save_icon': 'save.png'\n },\n placement: {'.open_icon': 'open'}, // The \"open\" icon will be added\n // to all elements with class \"open_icon\"\n resize: {\n '#save_icon .svg_icon': 64 // The \"save\" icon will be resized to 64 x 64px\n },\n\n callback (icons) { // Sets background color for \"close\" icon\n icons.close.css('background', 'red');\n },\n\n svgz: true // Indicates that an SVGZ file is being used\n });\n});\n*/\n\n// Todo: Move to own module (and have it import a modular base64 encoder)\nimport {encode64} from '../utilities.js';\n\nconst isOpera = Boolean(window.opera);\n\nconst fixIDs = function (svgEl, svgNum, force) {\n const defs = svgEl.find('defs');\n if (!defs.length) return svgEl;\n\n let idElems;\n if (isOpera) {\n idElems = defs.find('*').filter(function () {\n return Boolean(this.id);\n });\n } else {\n idElems = defs.find('[id]');\n }\n\n const allElems = svgEl[0].getElementsByTagName('*'),\n len = allElems.length;\n\n idElems.each(function (i) {\n const {id} = this;\n /*\n const noDupes = ($(svgdoc).find('#' + id).length <= 1);\n if (isOpera) noDupes = false; // Opera didn't clone svgEl, so not reliable\n if(!force && noDupes) return;\n */\n const newId = 'x' + id + svgNum + i;\n this.id = newId;\n\n const oldVal = 'url(#' + id + ')';\n const newVal = 'url(#' + newId + ')';\n\n // Selector method, possibly faster but fails in Opera / jQuery 1.4.3\n // svgEl.find('[fill=\"url(#' + id + ')\"]').each(function() {\n // this.setAttribute('fill', 'url(#' + newId + ')');\n // }).end().find('[stroke=\"url(#' + id + ')\"]').each(function() {\n // this.setAttribute('stroke', 'url(#' + newId + ')');\n // }).end().find('use').each(function() {\n // if(this.getAttribute('xlink:href') == '#' + id) {\n // this.setAttributeNS(xlinkns,'href','#' + newId);\n // }\n // }).end().find('[filter=\"url(#' + id + ')\"]').each(function() {\n // this.setAttribute('filter', 'url(#' + newId + ')');\n // });\n\n for (i = 0; i < len; i++) {\n const elem = allElems[i];\n if (elem.getAttribute('fill') === oldVal) {\n elem.setAttribute('fill', newVal);\n }\n if (elem.getAttribute('stroke') === oldVal) {\n elem.setAttribute('stroke', newVal);\n }\n if (elem.getAttribute('filter') === oldVal) {\n elem.setAttribute('filter', newVal);\n }\n }\n });\n return svgEl;\n};\n\n/**\n* @callback module:jQuerySVGIcons.SVGIconsLoadedCallback\n* @param {PlainObject<string, external:jQuery>} svgIcons IDs keyed to jQuery objects of images\n* @returns {void}\n*/\n\n/**\n * @function module:jQuerySVGIcons.jQuerySVGIcons\n * @param {external:jQuery} $ Its keys include all icon IDs and the values, the icon as a jQuery object\n * @returns {external:jQuery} The enhanced jQuery object\n*/\nexport default function jQueryPluginSVGIcons ($) {\n const svgIcons = {};\n\n /**\n * Map of raster images with each key being the SVG icon ID\n * to replace, and the value the image file name.\n * @typedef {PlainObject<string, string>} external:jQuery.svgIcons.Fallback\n */\n /**\n * Map of raster images with each key being the SVG icon ID\n * whose `alt` will be set, and the value being the `alt` text.\n * @typedef {PlainObject<string, string>} external:jQuery.svgIcons.Alts\n */\n /**\n * @function external:jQuery.svgIcons\n * @param {string} file The location of a local SVG or SVGz file\n * @param {PlainObject} [opts]\n * @param {Float} [opts.w] The icon widths\n * @param {Float} [opts.h] The icon heights\n * @param {external:jQuery.svgIcons.Fallback} [opts.fallback]\n * @param {string} [opts.fallback_path] The path to use for all images\n * listed under \"fallback\"\n * @param {boolean} [opts.replace] If set to `true`, HTML elements will\n * be replaced by, rather than include the SVG icon.\n * @param {PlainObject<string, string>} [opts.placement] Map with selectors\n * for keys and SVG icon ids as values. This provides a custom method of\n * adding icons.\n * @param {PlainObject<string, module:jQuerySVGIcons.Size>} [opts.resize] Map\n * with selectors for keys and numbers as values. This allows an easy way to\n * resize specific icons.\n * @param {module:jQuerySVGIcons.SVGIconsLoadedCallback} [opts.callback] A\n * function to call when all icons have been loaded.\n * @param {boolean} [opts.id_match=true] Automatically attempt to match\n * SVG icon ids with corresponding HTML id\n * @param {boolean} [opts.no_img] Prevent attempting to convert the icon\n * into an `<img>` element (may be faster, help for browser consistency)\n * @param {boolean} [opts.svgz] Indicate that the file is an SVGZ file, and\n * thus not to parse as XML. SVGZ files add compression benefits, but\n * getting data from them fails in Firefox 2 and older.\n * @param {jQuery.svgIcons.Alts} [opts.alts] Map of images with each key\n * being the SVG icon ID whose `alt` will be set, and the value being\n * the `alt` text\n * @param {string} [opts.testIconAlt=\"icon\"] Alt text for the injected test image.\n * In case wish to ensure have one for accessibility\n * @returns {void}\n */\n $.svgIcons = function (file, opts = {}) {\n const svgns = 'http://www.w3.org/2000/svg',\n xlinkns = 'http://www.w3.org/1999/xlink',\n iconW = opts.w || 24,\n iconH = opts.h || 24;\n let elems, svgdoc, testImg,\n iconsMade = false,\n dataLoaded = false,\n loadAttempts = 0;\n const // ua = navigator.userAgent,\n // isSafari = (ua.includes('Safari/') && !ua.includes('Chrome/')),\n dataPre = 'data:image/svg+xml;charset=utf-8;base64,';\n\n let dataEl;\n if (opts.svgz) {\n dataEl = $('<object data=\"' + file + '\" type=image/svg+xml>').appendTo('body').hide();\n try {\n svgdoc = dataEl[0].contentDocument;\n dataEl.load(getIcons);\n getIcons(0, true); // Opera will not run \"load\" event if file is already cached\n } catch (err1) {\n useFallback();\n }\n } else {\n const parser = new DOMParser();\n $.ajax({\n url: file,\n dataType: 'string',\n success (data) {\n if (!data) {\n $(useFallback);\n return;\n }\n svgdoc = parser.parseFromString(data, 'text/xml');\n $(function () {\n getIcons('ajax');\n });\n },\n error (err) {\n // TODO: Fix Opera widget icon bug\n if (window.opera) {\n $(function () {\n useFallback();\n });\n } else if (err.responseText) {\n svgdoc = parser.parseFromString(err.responseText, 'text/xml');\n\n if (!svgdoc.childNodes.length) {\n $(useFallback);\n }\n $(function () {\n getIcons('ajax');\n });\n } else {\n $(useFallback);\n }\n }\n });\n }\n\n /**\n *\n * @param {\"ajax\"|0|void} evt\n * @param {boolean} [noWait]\n * @returns {void}\n */\n function getIcons (evt, noWait) {\n if (evt !== 'ajax') {\n if (dataLoaded) return;\n // Webkit sometimes says svgdoc is undefined, other times\n // it fails to load all nodes. Thus we must make sure the \"eof\"\n // element is loaded.\n svgdoc = dataEl[0].contentDocument; // Needed again for Webkit\n const isReady = (svgdoc && svgdoc.getElementById('svg_eof'));\n if (!isReady && !(noWait && isReady)) {\n loadAttempts++;\n if (loadAttempts < 50) {\n setTimeout(getIcons, 20);\n } else {\n useFallback();\n dataLoaded = true;\n }\n return;\n }\n dataLoaded = true;\n }\n\n elems = $(svgdoc.firstChild).children(); // .getElementsByTagName('foreignContent');\n\n if (!opts.no_img) {\n const testSrc = dataPre + 'PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNzUiIGhlaWdodD0iMjc1Ij48L3N2Zz4%3D';\n\n testImg = $(new Image()).attr({\n src: testSrc,\n width: 0,\n height: 0,\n alt: opts.testIconAlt || 'icon'\n }).appendTo('body')\n .load(function () {\n // Safari 4 crashes, Opera and Chrome don't\n makeIcons(true);\n }).error(function () {\n makeIcons();\n });\n } else {\n setTimeout(function () {\n if (!iconsMade) makeIcons();\n }, 500);\n }\n }\n\n /**\n *\n * @param {external:jQuery} target\n * @param {external:jQuery} icon A wrapped `defs` or Image\n * @param {string} id SVG icon ID\n * @param {boolean} setID Whether to set the ID attribute (with `id`)\n * @returns {void}\n */\n function setIcon (target, icon, id, setID) {\n if (isOpera) icon.css('visibility', 'hidden');\n if (opts.replace) {\n if (setID) icon.attr('id', id);\n const cl = target.attr('class');\n if (cl) icon.attr('class', 'svg_icon ' + cl);\n if (!target.alt) {\n let alt = 'icon';\n if (opts.alts) {\n alt = opts.alts[id] || alt;\n }\n icon.attr('alt', alt);\n }\n target.replaceWith(icon);\n } else {\n target.append(icon);\n }\n if (isOpera) {\n setTimeout(function () {\n icon.removeAttr('style');\n }, 1);\n }\n }\n\n let holder;\n /**\n * @param {external:jQuery} icon A wrapped `defs` or Image\n * @param {string} id SVG icon ID\n * @returns {void}\n */\n function addIcon (icon, id) {\n if (opts.id_match === undefined || opts.id_match !== false) {\n setIcon(holder, icon, id, true);\n }\n svgIcons[id] = icon;\n }\n\n /**\n *\n * @param {boolean} [toImage]\n * @param {external:jQuery.svgIcons.Fallback} [fallback=false]\n * @returns {void}\n */\n function makeIcons (toImage = false, fallback = false) {\n if (iconsMade) return;\n if (opts.no_img) toImage = false;\n\n let tempHolder;\n if (toImage) {\n tempHolder = $(document.createElement('div'));\n tempHolder.hide().appendTo('body');\n }\n if (fallback) {\n const path = opts.fallback_path || '';\n $.each(fallback, function (id, imgsrc) {\n holder = $('#' + id);\n let alt = 'icon';\n if (opts.alts) {\n alt = opts.alts[id] || alt;\n }\n const icon = $(new Image())\n .attr({\n class: 'svg_icon',\n src: path + imgsrc,\n width: iconW,\n height: iconH,\n alt\n });\n\n addIcon(icon, id);\n });\n } else {\n const len = elems.length;\n for (let i = 0; i < len; i++) {\n const elem = elems[i];\n const {id} = elem;\n if (id === 'svg_eof') break;\n holder = $('#' + id);\n const svgroot = document.createElementNS(svgns, 'svg');\n // Per https://www.w3.org/TR/xml-names11/#defaulting, the namespace for\n // attributes should have no value.\n svgroot.setAttribute('viewBox', [0, 0, iconW, iconH].join(' '));\n\n let svg = elem.getElementsByTagNameNS(svgns, 'svg')[0];\n\n // Make flexible by converting width/height to viewBox\n const w = svg.getAttribute('width');\n const h = svg.getAttribute('height');\n svg.removeAttribute('width');\n svg.removeAttribute('height');\n\n const vb = svg.getAttribute('viewBox');\n if (!vb) {\n svg.setAttribute('viewBox', [0, 0, w, h].join(' '));\n }\n\n // Not using jQuery to be a bit faster\n svgroot.setAttribute('xmlns', svgns);\n svgroot.setAttribute('width', iconW);\n svgroot.setAttribute('height', iconH);\n svgroot.setAttribute('xmlns:xlink', xlinkns);\n svgroot.setAttribute('class', 'svg_icon');\n\n // Without cloning, Firefox will make another GET request.\n // With cloning, causes issue in Opera/Win/Non-EN\n if (!isOpera) svg = svg.cloneNode(true);\n\n svgroot.append(svg);\n\n let icon;\n if (toImage) {\n tempHolder.empty().append(svgroot);\n const str = dataPre + encode64(unescape(encodeURIComponent(\n new XMLSerializer().serializeToString(svgroot)\n )));\n let alt = 'icon';\n if (opts.alts) {\n alt = opts.alts[id] || alt;\n }\n icon = $(new Image())\n .attr({class: 'svg_icon', src: str, alt});\n } else {\n icon = fixIDs($(svgroot), i);\n }\n addIcon(icon, id);\n }\n }\n\n if (opts.placement) {\n $.each(opts.placement, function (sel, id) {\n if (!svgIcons[id]) return;\n $(sel).each(function (i) {\n let copy = svgIcons[id].clone();\n if (i > 0 && !toImage) copy = fixIDs(copy, i, true);\n setIcon($(this), copy, id);\n });\n });\n }\n if (!fallback) {\n if (toImage) tempHolder.remove();\n if (dataEl) dataEl.remove();\n if (testImg) testImg.remove();\n }\n if (opts.resize) $.resizeSvgIcons(opts.resize);\n iconsMade = true;\n\n if (opts.callback) opts.callback(svgIcons);\n }\n\n /**\n * @returns {void}\n */\n function useFallback () {\n if (file.includes('.svgz')) {\n const regFile = file.replace('.svgz', '.svg');\n if (window.console) {\n console.log('.svgz failed, trying with .svg'); // eslint-disable-line no-console\n }\n $.svgIcons(regFile, opts);\n } else if (opts.fallback) {\n makeIcons(false, opts.fallback);\n }\n }\n };\n\n /**\n * @function external:jQuery.getSvgIcon\n * @param {string} id\n * @param {boolean} uniqueClone Whether to clone\n * @returns {external:jQuery} The icon (optionally cloned)\n */\n $.getSvgIcon = function (id, uniqueClone) {\n let icon = svgIcons[id];\n if (uniqueClone && icon) {\n icon = fixIDs(icon, 0, true).clone(true);\n }\n return icon;\n };\n\n /**\n * @typedef {GenericArray} module:jQuerySVGIcons.Dimensions\n * @property {Integer} length 2\n * @property {Float} 0 Width\n * @property {Float} 1 Height\n */\n\n /**\n * If a Float is used, it will represent width and height. Arrays contain\n * the width and height.\n * @typedef {module:jQuerySVGIcons.Dimensions|Float} module:jQuerySVGIcons.Size\n */\n\n /**\n * @function external:jQuery.resizeSvgIcons\n * @param {PlainObject<string, module:jQuerySVGIcons.Size>} obj Object with\n * selectors as keys. The values are sizes.\n * @returns {void}\n */\n $.resizeSvgIcons = function (obj) {\n // FF2 and older don't detect .svg_icon, so we change it detect svg elems instead\n const changeSel = !$('.svg_icon:first').length;\n $.each(obj, function (sel, size) {\n const arr = Array.isArray(size);\n const w = arr ? size[0] : size,\n h = arr ? size[1] : size;\n if (changeSel) {\n sel = sel.replace(/\\.svg_icon/g, 'svg');\n }\n $(sel).each(function () {\n this.setAttribute('width', w);\n this.setAttribute('height', h);\n if (window.opera && window.widget) {\n this.parentNode.style.width = w + 'px';\n this.parentNode.style.height = h + 'px';\n }\n });\n });\n };\n return $;\n}\n","/**\n * @file jGraduate 0.4\n *\n * jQuery Plugin for a gradient picker\n *\n * @module jGraduate\n * @copyright 2010 Jeff Schiller {@link http://blog.codedread.com/}, 2010 Alexis Deveria {@link http://a.deveria.com/}\n *\n * @license Apache-2.0\n * @example\n * // The Paint object is described below.\n * $.jGraduate.Paint(); // constructs a 'none' color\n * @example $.jGraduate.Paint({copy: o}); // creates a copy of the paint o\n * @example $.jGraduate.Paint({hex: '#rrggbb'}); // creates a solid color paint with hex = \"#rrggbb\"\n * @example $.jGraduate.Paint({linearGradient: o, a: 50}); // creates a linear gradient paint with opacity=0.5\n * @example $.jGraduate.Paint({radialGradient: o, a: 7}); // creates a radial gradient paint with opacity=0.07\n * @example $.jGraduate.Paint({hex: '#rrggbb', linearGradient: o}); // throws an exception?\n*/\n\n/* eslint-disable jsdoc/require-property */\n/**\n * The jQuery namespace.\n * @external jQuery\n*/\n/**\n * The jQuery plugin namespace.\n * @namespace {PlainObject} fn\n * @memberof external:jQuery\n * @see {@link http://learn.jquery.com/plugins/|jQuery Plugins}\n */\n/* eslint-enable jsdoc/require-property */\n\nconst ns = {\n svg: 'http://www.w3.org/2000/svg',\n xlink: 'http://www.w3.org/1999/xlink'\n};\n\nif (!window.console) {\n window.console = {\n log (str) { /* */ },\n dir (str) { /* */ }\n };\n}\n\n/**\n* Adds {@link external:jQuery.jGraduate.Paint},\n* {@link external:jQuery.fn.jGraduateDefaults},\n* {@link external:jQuery.fn.jGraduate}.\n* @function module:jGraduate.jGraduate\n* @param {external:jQuery} $ The jQuery instance to wrap\n* @returns {external:jQuery}\n*/\nexport default function jQueryPluginJGraduate ($) {\n if (!$.loadingStylesheets) {\n $.loadingStylesheets = [];\n }\n const stylesheet = 'jgraduate/css/jGraduate.css';\n if (!$.loadingStylesheets.includes(stylesheet)) {\n $.loadingStylesheets.push(stylesheet);\n }\n\n /**\n * @typedef {PlainObject} module:jGraduate.jGraduatePaintOptions\n * @property {Float} [alpha]\n * @property {module:jGraduate~Paint} [copy] Copy paint object\n * @property {SVGLinearGradientElement} [linearGradient]\n * @property {SVGRadialGradientElement} [radialGradient]\n * @property {string} [solidColor]\n */\n\n /**\n * @memberof module:jGraduate~\n */\n class Paint {\n /**\n * @param {module:jGraduate.jGraduatePaintOptions} [opt]\n */\n constructor (opt) {\n const options = opt || {};\n this.alpha = isNaN(options.alpha) ? 100 : options.alpha;\n // copy paint object\n if (options.copy) {\n /**\n * @name module:jGraduate~Paint#type\n * @type {\"none\"|\"solidColor\"|\"linearGradient\"|\"radialGradient\"}\n */\n this.type = options.copy.type;\n /**\n * Represents opacity (0-100).\n * @name module:jGraduate~Paint#alpha\n * @type {Float}\n */\n this.alpha = options.copy.alpha;\n /**\n * Represents #RRGGBB hex of color.\n * @name module:jGraduate~Paint#solidColor\n * @type {string}\n */\n this.solidColor = null;\n /**\n * @name module:jGraduate~Paint#linearGradient\n * @type {SVGLinearGradientElement}\n */\n this.linearGradient = null;\n /**\n * @name module:jGraduate~Paint#radialGradient\n * @type {SVGRadialGradientElement}\n */\n this.radialGradient = null;\n\n switch (this.type) {\n case 'none':\n break;\n case 'solidColor':\n this.solidColor = options.copy.solidColor;\n break;\n case 'linearGradient':\n this.linearGradient = options.copy.linearGradient.cloneNode(true);\n break;\n case 'radialGradient':\n this.radialGradient = options.copy.radialGradient.cloneNode(true);\n break;\n }\n // create linear gradient paint\n } else if (options.linearGradient) {\n this.type = 'linearGradient';\n this.solidColor = null;\n this.radialGradient = null;\n this.linearGradient = options.linearGradient.cloneNode(true);\n // create linear gradient paint\n } else if (options.radialGradient) {\n this.type = 'radialGradient';\n this.solidColor = null;\n this.linearGradient = null;\n this.radialGradient = options.radialGradient.cloneNode(true);\n // create solid color paint\n } else if (options.solidColor) {\n this.type = 'solidColor';\n this.solidColor = options.solidColor;\n // create empty paint\n } else {\n this.type = 'none';\n this.solidColor = null;\n this.linearGradient = null;\n this.radialGradient = null;\n }\n }\n }\n\n /* eslint-disable jsdoc/require-property */\n /**\n * @namespace {PlainObject} jGraduate\n * @memberof external:jQuery\n */\n $.jGraduate = /** @lends external:jQuery.jGraduate */ {\n /* eslint-enable jsdoc/require-property */\n /**\n * @class external:jQuery.jGraduate.Paint\n * @see module:jGraduate~Paint\n */\n Paint\n };\n\n // JSDoc doesn't show this as belonging to our `module:jGraduate.Options` type,\n // so we use `@see`\n /**\n * @namespace {module:jGraduate.Options} jGraduateDefaults\n * @memberof external:jQuery.fn\n */\n $.fn.jGraduateDefaults = /** @lends external:jQuery.fn.jGraduateDefaults */ {\n /**\n * Creates an object with a 'none' color.\n * @type {external:jQuery.jGraduate.Paint}\n * @see module:jGraduate.Options\n */\n paint: new $.jGraduate.Paint(),\n /**\n * @namespace\n */\n window: {\n /**\n * @type {string}\n * @see module:jGraduate.Options\n */\n pickerTitle: 'Drag markers to pick a paint'\n },\n /**\n * @namespace\n */\n images: {\n /**\n * @type {string}\n * @see module:jGraduate.Options\n */\n clientPath: 'images/'\n },\n /**\n * @type {string}\n * @see module:jGraduate.Options\n */\n newstop: 'inverse' // same, inverse, black, white\n };\n\n const isGecko = navigator.userAgent.includes('Gecko/');\n\n /**\n * @typedef {PlainObject<string, string>} module:jGraduate.Attrs\n */\n /**\n * @param {SVGElement} elem\n * @param {module:jGraduate.Attrs} attrs\n * @returns {void}\n */\n function setAttrs (elem, attrs) {\n if (isGecko) {\n Object.entries(attrs).forEach(([aname, val]) => {\n elem.setAttribute(aname, val);\n });\n } else {\n Object.entries(attrs).forEach(([aname, val]) => {\n const prop = elem[aname];\n if (prop && prop.constructor === 'SVGLength') {\n prop.baseVal.value = val;\n } else {\n elem.setAttribute(aname, val);\n }\n });\n }\n }\n\n /**\n * @param {string} name\n * @param {module:jGraduate.Attrs} attrs\n * @param {Element} newparent\n * @returns {SVGElement}\n */\n function mkElem (name, attrs, newparent) {\n const elem = document.createElementNS(ns.svg, name);\n setAttrs(elem, attrs);\n if (newparent) {\n newparent.append(elem);\n }\n return elem;\n }\n\n /**\n * @typedef {PlainObject} module:jGraduate.ColorOpac Object may have one or both values\n * @property {string} [color] #Hex color\n * @property {Float} [opac] 0-1\n */\n /**\n * @typedef {PlainObject} module:jGraduate.Options\n * @property {module:jGraduate~Paint} [paint] A Paint object object describing the paint to display initially; defaults to a new instance without options (defaults to opaque white)\n * @property {external:Window} [window]\n * @property {string} [window.pickerTitle='Drag markers to pick a paint']\n * @property {PlainObject} [images]\n * @property {string} [images.clientPath='images/']\n * @property {\"same\"|\"inverse\"|\"black\"|\"white\"|module:jGraduate.ColorOpac} [newstop=\"inverse\"]\n */\n\n /**\n * @callback external:jQuery.fn.jGraduate.OkCallback\n * @param {external:jQuery.jGraduate.Paint} paint\n * @returns {void}\n */\n /**\n * @callback external:jQuery.fn.jGraduate.CancelCallback\n * @returns {void}\n */\n\n /**\n * @function external:jQuery.fn.jGraduate\n * @param {module:jGraduate.Options} [options]\n * @param {external:jQuery.fn.jGraduate.OkCallback} [okCallback] Called with a Paint object when Ok is pressed\n * @param {external:jQuery.fn.jGraduate.CancelCallback} [cancelCallback] Called with no arguments when Cancel is pressed\n * @returns {external:jQuery}\n */\n $.fn.jGraduate = function (options, okCallback, cancelCallback) {\n return this.each(function () {\n const $this = $(this),\n $settings = $.extend(true, {}, $.fn.jGraduateDefaults, options || {}),\n id = $this.attr('id'),\n idref = '#' + $this.attr('id') + ' ';\n\n if (!idref) {\n /* await */ $.alert('Container element must have an id attribute to maintain unique id strings for sub-elements.');\n return;\n }\n\n const okClicked = function () {\n switch ($this.paint.type) {\n case 'radialGradient':\n $this.paint.linearGradient = null;\n break;\n case 'linearGradient':\n $this.paint.radialGradient = null;\n break;\n case 'solidColor':\n $this.paint.radialGradient = $this.paint.linearGradient = null;\n break;\n }\n typeof $this.okCallback === 'function' && $this.okCallback($this.paint);\n $this.hide();\n };\n const cancelClicked = function () {\n typeof $this.cancelCallback === 'function' && $this.cancelCallback();\n $this.hide();\n };\n\n $.extend(\n true,\n $this,\n // public properties, methods, and callbacks\n {\n // make a copy of the incoming paint\n paint: new $.jGraduate.Paint({copy: $settings.paint}),\n okCallback: typeof okCallback === 'function' ? okCallback : null,\n cancelCallback: typeof cancelCallback === 'function' ? cancelCallback : null\n }\n );\n\n let // pos = $this.position(),\n color = null;\n const $win = $(window);\n\n if ($this.paint.type === 'none') {\n $this.paint = new $.jGraduate.Paint({solidColor: 'ffffff'});\n }\n\n $this.addClass('jGraduate_Picker');\n $this.html(\n '<ul class=\"jGraduate_tabs\">' +\n '<li class=\"jGraduate_tab_color jGraduate_tab_current\" data-type=\"col\">Solid Color</li>' +\n '<li class=\"jGraduate_tab_lingrad\" data-type=\"lg\">Linear Gradient</li>' +\n '<li class=\"jGraduate_tab_radgrad\" data-type=\"rg\">Radial Gradient</li>' +\n '</ul>' +\n '<div class=\"jGraduate_colPick\"></div>' +\n '<div class=\"jGraduate_gradPick\"></div>' +\n '<div class=\"jGraduate_LightBox\"></div>' +\n '<div id=\"' + id + '_jGraduate_stopPicker\" class=\"jGraduate_stopPicker\"></div>'\n );\n const colPicker = $(idref + '> .jGraduate_colPick');\n const gradPicker = $(idref + '> .jGraduate_gradPick');\n\n gradPicker.html(\n '<div id=\"' + id + '_jGraduate_Swatch\" class=\"jGraduate_Swatch\">' +\n '<h2 class=\"jGraduate_Title\">' + $settings.window.pickerTitle + '</h2>' +\n '<div id=\"' + id + '_jGraduate_GradContainer\" class=\"jGraduate_GradContainer\"></div>' +\n '<div id=\"' + id + '_jGraduate_StopSlider\" class=\"jGraduate_StopSlider\"></div>' +\n '</div>' +\n '<div class=\"jGraduate_Form jGraduate_Points jGraduate_lg_field\">' +\n '<div class=\"jGraduate_StopSection\">' +\n '<label class=\"jGraduate_Form_Heading\">Begin Point</label>' +\n '<div class=\"jGraduate_Form_Section\">' +\n '<label>x:</label>' +\n '<input type=\"text\" id=\"' + id + '_jGraduate_x1\" size=\"3\" title=\"Enter starting x value between 0.0 and 1.0\"/>' +\n '<label>y:</label>' +\n '<input type=\"text\" id=\"' + id + '_jGraduate_y1\" size=\"3\" title=\"Enter starting y value between 0.0 and 1.0\"/>' +\n '</div>' +\n '</div>' +\n '<div class=\"jGraduate_StopSection\">' +\n '<label class=\"jGraduate_Form_Heading\">End Point</label>' +\n '<div class=\"jGraduate_Form_Section\">' +\n '<label>x:</label>' +\n '<input type=\"text\" id=\"' + id + '_jGraduate_x2\" size=\"3\" title=\"Enter ending x value between 0.0 and 1.0\"/>' +\n '<label>y:</label>' +\n '<input type=\"text\" id=\"' + id + '_jGraduate_y2\" size=\"3\" title=\"Enter ending y value between 0.0 and 1.0\"/>' +\n '</div>' +\n '</div>' +\n '</div>' +\n '<div class=\"jGraduate_Form jGraduate_Points jGraduate_rg_field\">' +\n '<div class=\"jGraduate_StopSection\">' +\n '<label class=\"jGraduate_Form_Heading\">Center Point</label>' +\n '<div class=\"jGraduate_Form_Section\">' +\n '<label>x:</label>' +\n '<input type=\"text\" id=\"' + id + '_jGraduate_cx\" size=\"3\" title=\"Enter x value between 0.0 and 1.0\"/>' +\n '<label>y:</label>' +\n '<input type=\"text\" id=\"' + id + '_jGraduate_cy\" size=\"3\" title=\"Enter y value between 0.0 and 1.0\"/>' +\n '</div>' +\n '</div>' +\n '<div class=\"jGraduate_StopSection\">' +\n '<label class=\"jGraduate_Form_Heading\">Focal Point</label>' +\n '<div class=\"jGraduate_Form_Section\">' +\n '<label>Match center: <input type=\"checkbox\" checked=\"checked\" id=\"' + id + '_jGraduate_match_ctr\"/></label><br/>' +\n '<label>x:</label>' +\n '<input type=\"text\" id=\"' + id + '_jGraduate_fx\" size=\"3\" title=\"Enter x value between 0.0 and 1.0\"/>' +\n '<label>y:</label>' +\n '<input type=\"text\" id=\"' + id + '_jGraduate_fy\" size=\"3\" title=\"Enter y value between 0.0 and 1.0\"/>' +\n '</div>' +\n '</div>' +\n '</div>' +\n '<div class=\"jGraduate_StopSection jGraduate_SpreadMethod\">' +\n '<label class=\"jGraduate_Form_Heading\">Spread method</label>' +\n '<div class=\"jGraduate_Form_Section\">' +\n '<select class=\"jGraduate_spreadMethod\">' +\n '<option value=pad selected>Pad</option>' +\n '<option value=reflect>Reflect</option>' +\n '<option value=repeat>Repeat</option>' +\n '</select>' +\n '</div>' +\n '</div>' +\n '<div class=\"jGraduate_Form\">' +\n '<div class=\"jGraduate_Slider jGraduate_RadiusField jGraduate_rg_field\">' +\n '<label class=\"prelabel\">Radius:</label>' +\n '<div id=\"' + id + '_jGraduate_Radius\" class=\"jGraduate_SliderBar jGraduate_Radius\" title=\"Click to set radius\">' +\n '<img id=\"' + id + '_jGraduate_RadiusArrows\" class=\"jGraduate_RadiusArrows\" src=\"' + $settings.images.clientPath + 'rangearrows2.gif\">' +\n '</div>' +\n '<label><input type=\"text\" id=\"' + id + '_jGraduate_RadiusInput\" size=\"3\" value=\"100\"/>%</label>' +\n '</div>' +\n '<div class=\"jGraduate_Slider jGraduate_EllipField jGraduate_rg_field\">' +\n '<label class=\"prelabel\">Ellip:</label>' +\n '<div id=\"' + id + '_jGraduate_Ellip\" class=\"jGraduate_SliderBar jGraduate_Ellip\" title=\"Click to set Ellip\">' +\n '<img id=\"' + id + '_jGraduate_EllipArrows\" class=\"jGraduate_EllipArrows\" src=\"' + $settings.images.clientPath + 'rangearrows2.gif\">' +\n '</div>' +\n '<label><input type=\"text\" id=\"' + id + '_jGraduate_EllipInput\" size=\"3\" value=\"0\"/>%</label>' +\n '</div>' +\n '<div class=\"jGraduate_Slider jGraduate_AngleField jGraduate_rg_field\">' +\n '<label class=\"prelabel\">Angle:</label>' +\n '<div id=\"' + id + '_jGraduate_Angle\" class=\"jGraduate_SliderBar jGraduate_Angle\" title=\"Click to set Angle\">' +\n '<img id=\"' + id + '_jGraduate_AngleArrows\" class=\"jGraduate_AngleArrows\" src=\"' + $settings.images.clientPath + 'rangearrows2.gif\">' +\n '</div>' +\n '<label><input type=\"text\" id=\"' + id + '_jGraduate_AngleInput\" size=\"3\" value=\"0\"/>deg</label>' +\n '</div>' +\n '<div class=\"jGraduate_Slider jGraduate_OpacField\">' +\n '<label class=\"prelabel\">Opac:</label>' +\n '<div id=\"' + id + '_jGraduate_Opac\" class=\"jGraduate_SliderBar jGraduate_Opac\" title=\"Click to set Opac\">' +\n '<img id=\"' + id + '_jGraduate_OpacArrows\" class=\"jGraduate_OpacArrows\" src=\"' + $settings.images.clientPath + 'rangearrows2.gif\">' +\n '</div>' +\n '<label><input type=\"text\" id=\"' + id + '_jGraduate_OpacInput\" size=\"3\" value=\"100\"/>%</label>' +\n '</div>' +\n '</div>' +\n '<div class=\"jGraduate_OkCancel\">' +\n '<input type=\"button\" id=\"' + id + '_jGraduate_Ok\" class=\"jGraduate_Ok\" value=\"OK\"/>' +\n '<input type=\"button\" id=\"' + id + '_jGraduate_Cancel\" class=\"jGraduate_Cancel\" value=\"Cancel\"/>' +\n '</div>'\n );\n\n // --------------\n // Set up all the SVG elements (the gradient, stops and rectangle)\n const MAX = 256,\n MARGINX = 0,\n MARGINY = 0,\n // STOP_RADIUS = 15 / 2,\n SIZEX = MAX - 2 * MARGINX,\n SIZEY = MAX - 2 * MARGINY;\n\n const attrInput = {};\n\n const SLIDERW = 145;\n $('.jGraduate_SliderBar').width(SLIDERW);\n\n const container = $('#' + id + '_jGraduate_GradContainer')[0];\n\n const svg = mkElem('svg', {\n id: id + '_jgraduate_svg',\n width: MAX,\n height: MAX,\n xmlns: ns.svg\n }, container);\n\n // This wasn't working as designed\n // let curType;\n // curType = curType || $this.paint.type;\n\n // if we are sent a gradient, import it\n let curType = $this.paint.type;\n\n let grad = $this.paint[curType];\n let curGradient = grad;\n\n const gradalpha = $this.paint.alpha;\n\n const isSolid = curType === 'solidColor';\n\n // Make any missing gradients\n switch (curType) {\n case 'solidColor':\n // fall through\n case 'linearGradient':\n if (!isSolid) {\n curGradient.id = id + '_lg_jgraduate_grad';\n grad = curGradient = svg.appendChild(curGradient); // .cloneNode(true));\n }\n mkElem('radialGradient', {\n id: id + '_rg_jgraduate_grad'\n }, svg);\n if (curType === 'linearGradient') { break; }\n // fall through\n case 'radialGradient':\n if (!isSolid) {\n curGradient.id = id + '_rg_jgraduate_grad';\n grad = curGradient = svg.appendChild(curGradient); // .cloneNode(true));\n }\n mkElem('linearGradient', {\n id: id + '_lg_jgraduate_grad'\n }, svg);\n }\n\n let stopGroup; // eslint-disable-line prefer-const\n if (isSolid) {\n grad = curGradient = $('#' + id + '_lg_jgraduate_grad')[0];\n color = $this.paint[curType];\n mkStop(0, '#' + color, 1);\n\n const type = typeof $settings.newstop;\n\n if (type === 'string') {\n switch ($settings.newstop) {\n case 'same':\n mkStop(1, '#' + color, 1);\n break;\n\n case 'inverse': {\n // Invert current color for second stop\n let inverted = '';\n for (let i = 0; i < 6; i += 2) {\n // const ch = color.substr(i, 2);\n let inv = (255 - parseInt(color.substr(i, 2), 16)).toString(16);\n if (inv.length < 2) inv = 0 + inv;\n inverted += inv;\n }\n mkStop(1, '#' + inverted, 1);\n break;\n } case 'white':\n mkStop(1, '#ffffff', 1);\n break;\n\n case 'black':\n mkStop(1, '#000000', 1);\n break;\n }\n } else if (type === 'object') {\n const opac = ('opac' in $settings.newstop) ? $settings.newstop.opac : 1;\n mkStop(1, ($settings.newstop.color || '#' + color), opac);\n }\n }\n\n const x1 = parseFloat(grad.getAttribute('x1') || 0.0),\n y1 = parseFloat(grad.getAttribute('y1') || 0.0),\n x2 = parseFloat(grad.getAttribute('x2') || 1.0),\n y2 = parseFloat(grad.getAttribute('y2') || 0.0);\n\n const cx = parseFloat(grad.getAttribute('cx') || 0.5),\n cy = parseFloat(grad.getAttribute('cy') || 0.5),\n fx = parseFloat(grad.getAttribute('fx') || cx),\n fy = parseFloat(grad.getAttribute('fy') || cy);\n\n const previewRect = mkElem('rect', {\n id: id + '_jgraduate_rect',\n x: MARGINX,\n y: MARGINY,\n width: SIZEX,\n height: SIZEY,\n fill: 'url(#' + id + '_jgraduate_grad)',\n 'fill-opacity': gradalpha / 100\n }, svg);\n\n // stop visuals created here\n const beginCoord = $('<div/>').attr({\n class: 'grad_coord jGraduate_lg_field',\n title: 'Begin Stop'\n }).text(1).css({\n top: y1 * MAX,\n left: x1 * MAX\n }).data('coord', 'start').appendTo(container);\n\n const endCoord = beginCoord.clone().text(2).css({\n top: y2 * MAX,\n left: x2 * MAX\n }).attr('title', 'End stop').data('coord', 'end').appendTo(container);\n\n const centerCoord = $('<div/>').attr({\n class: 'grad_coord jGraduate_rg_field',\n title: 'Center stop'\n }).text('C').css({\n top: cy * MAX,\n left: cx * MAX\n }).data('coord', 'center').appendTo(container);\n\n const focusCoord = centerCoord.clone().text('F').css({\n top: fy * MAX,\n left: fx * MAX,\n display: 'none'\n }).attr('title', 'Focus point').data('coord', 'focus').appendTo(container);\n\n focusCoord[0].id = id + '_jGraduate_focusCoord';\n\n // const coords = $(idref + ' .grad_coord');\n\n // $(container).hover(function () {\n // coords.animate({\n // opacity: 1\n // }, 500);\n // }, function () {\n // coords.animate({\n // opacity: .2\n // }, 500);\n // });\n\n let showFocus;\n $.each(['x1', 'y1', 'x2', 'y2', 'cx', 'cy', 'fx', 'fy'], function (i, attr) {\n const isRadial = isNaN(attr[1]);\n\n let attrval = curGradient.getAttribute(attr);\n if (!attrval) {\n // Set defaults\n if (isRadial) {\n // For radial points\n attrval = '0.5';\n } else {\n // Only x2 is 1\n attrval = attr === 'x2' ? '1.0' : '0.0';\n }\n }\n\n attrInput[attr] = $('#' + id + '_jGraduate_' + attr)\n .val(attrval)\n .change(function () {\n // TODO: Support values < 0 and > 1 (zoomable preview?)\n if (isNaN(parseFloat(this.value)) || this.value < 0) {\n this.value = 0.0;\n } else if (this.value > 1) {\n this.value = 1.0;\n }\n\n if (!(attr[0] === 'f' && !showFocus)) {\n if ((isRadial && curType === 'radialGradient') || (!isRadial && curType === 'linearGradient')) {\n curGradient.setAttribute(attr, this.value);\n }\n }\n\n const $elem = isRadial\n ? attr[0] === 'c' ? centerCoord : focusCoord\n : attr[1] === '1' ? beginCoord : endCoord;\n\n const cssName = attr.includes('x') ? 'left' : 'top';\n\n $elem.css(cssName, this.value * MAX);\n }).change();\n });\n\n /**\n *\n * @param {Float} n\n * @param {Float|string} colr\n * @param {Float} opac\n * @param {boolean} [sel]\n * @param {SVGStopElement} [stopElem]\n * @returns {SVGStopElement}\n */\n function mkStop (n, colr, opac, sel, stopElem) {\n const stop = stopElem || mkElem('stop', {\n 'stop-color': colr,\n 'stop-opacity': opac,\n offset: n\n }, curGradient);\n if (stopElem) {\n colr = stopElem.getAttribute('stop-color');\n opac = stopElem.getAttribute('stop-opacity');\n n = stopElem.getAttribute('offset');\n } else {\n curGradient.append(stop);\n }\n if (opac === null) opac = 1;\n\n const pickerD = 'M-6.2,0.9c3.6-4,6.7-4.3,6.7-12.4c-0.2,7.9,3.1,8.8,6.5,12.4c3.5,3.8,2.9,9.6,0,12.3c-3.1,2.8-10.4,2.7-13.2,0C-9.6,9.9-9.4,4.4-6.2,0.9z';\n\n const pathbg = mkElem('path', {\n d: pickerD,\n fill: 'url(#jGraduate_trans)',\n transform: 'translate(' + (10 + n * MAX) + ', 26)'\n }, stopGroup);\n\n const path = mkElem('path', {\n d: pickerD,\n fill: colr,\n 'fill-opacity': opac,\n transform: 'translate(' + (10 + n * MAX) + ', 26)',\n stroke: '#000',\n 'stroke-width': 1.5\n }, stopGroup);\n\n $(path).mousedown(function (e) {\n selectStop(this);\n drag = curStop;\n $win.mousemove(dragColor).mouseup(remDrags);\n stopOffset = stopMakerDiv.offset();\n e.preventDefault();\n return false;\n }).data('stop', stop).data('bg', pathbg).dblclick(function () {\n $('div.jGraduate_LightBox').show();\n const colorhandle = this; // eslint-disable-line consistent-this\n let stopOpacity = Number(stop.getAttribute('stop-opacity')) || 1;\n let stopColor = stop.getAttribute('stop-color') || 1;\n let thisAlpha = (parseFloat(stopOpacity) * 255).toString(16);\n while (thisAlpha.length < 2) { thisAlpha = '0' + thisAlpha; }\n colr = stopColor.substr(1) + thisAlpha;\n $('#' + id + '_jGraduate_stopPicker').css({left: 100, bottom: 15}).jPicker({\n window: {title: 'Pick the start color and opacity for the gradient'},\n images: {clientPath: $settings.images.clientPath},\n color: {active: colr, alphaSupport: true}\n }, function (clr, arg2) {\n stopColor = clr.val('hex') ? ('#' + clr.val('hex')) : 'none';\n stopOpacity = clr.val('a') !== null ? clr.val('a') / 256 : 1;\n colorhandle.setAttribute('fill', stopColor);\n colorhandle.setAttribute('fill-opacity', stopOpacity);\n stop.setAttribute('stop-color', stopColor);\n stop.setAttribute('stop-opacity', stopOpacity);\n $('div.jGraduate_LightBox').hide();\n $('#' + id + '_jGraduate_stopPicker').hide();\n }, null, function () {\n $('div.jGraduate_LightBox').hide();\n $('#' + id + '_jGraduate_stopPicker').hide();\n });\n });\n\n $(curGradient).find('stop').each(function () {\n const curS = $(this);\n if (Number(this.getAttribute('offset')) > n) {\n if (!colr) {\n const newcolor = this.getAttribute('stop-color');\n const newopac = this.getAttribute('stop-opacity');\n stop.setAttribute('stop-color', newcolor);\n path.setAttribute('fill', newcolor);\n stop.setAttribute('stop-opacity', newopac === null ? 1 : newopac);\n path.setAttribute('fill-opacity', newopac === null ? 1 : newopac);\n }\n curS.before(stop);\n return false;\n }\n return true;\n });\n if (sel) selectStop(path);\n return stop;\n }\n\n /**\n *\n * @returns {void}\n */\n function remStop () {\n delStop.setAttribute('display', 'none');\n const path = $(curStop);\n const stop = path.data('stop');\n const bg = path.data('bg');\n $([curStop, stop, bg]).remove();\n }\n\n const stopMakerDiv = $('#' + id + '_jGraduate_StopSlider');\n\n let stops, curStop, drag;\n\n const delStop = mkElem('path', {\n d: 'm9.75,-6l-19.5,19.5m0,-19.5l19.5,19.5',\n fill: 'none',\n stroke: '#D00',\n 'stroke-width': 5,\n display: 'none'\n }, undefined); // stopMakerSVG);\n\n /**\n * @param {Element} item\n * @returns {void}\n */\n function selectStop (item) {\n if (curStop) curStop.setAttribute('stroke', '#000');\n item.setAttribute('stroke', 'blue');\n curStop = item;\n // stops = $('stop');\n // opac_select.val(curStop.attr('fill-opacity') || 1);\n // root.append(delStop);\n }\n\n let stopOffset;\n\n /**\n *\n * @returns {void}\n */\n function remDrags () {\n $win.unbind('mousemove', dragColor);\n if (delStop.getAttribute('display') !== 'none') {\n remStop();\n }\n drag = null;\n }\n\n let scaleX = 1, scaleY = 1, angle = 0;\n\n let cX = cx;\n let cY = cy;\n /**\n *\n * @returns {void}\n */\n function xform () {\n const rot = angle ? 'rotate(' + angle + ',' + cX + ',' + cY + ') ' : '';\n if (scaleX === 1 && scaleY === 1) {\n curGradient.removeAttribute('gradientTransform');\n // $('#ang').addClass('dis');\n } else {\n const x = -cX * (scaleX - 1);\n const y = -cY * (scaleY - 1);\n curGradient.setAttribute('gradientTransform', rot + 'translate(' + x + ',' + y + ') scale(' + scaleX + ',' + scaleY + ')');\n // $('#ang').removeClass('dis');\n }\n }\n\n /**\n * @param {Event} evt\n * @returns {void}\n */\n function dragColor (evt) {\n let x = evt.pageX - stopOffset.left;\n const y = evt.pageY - stopOffset.top;\n x = x < 10\n ? 10\n : x > MAX + 10\n ? MAX + 10\n : x;\n\n const xfStr = 'translate(' + x + ', 26)';\n if (y < -60 || y > 130) {\n delStop.setAttribute('display', 'block');\n delStop.setAttribute('transform', xfStr);\n } else {\n delStop.setAttribute('display', 'none');\n }\n\n drag.setAttribute('transform', xfStr);\n $.data(drag, 'bg').setAttribute('transform', xfStr);\n const stop = $.data(drag, 'stop');\n const sX = (x - 10) / MAX;\n\n stop.setAttribute('offset', sX);\n\n let last = 0;\n $(curGradient).find('stop').each(function (i) {\n const cur = this.getAttribute('offset');\n const t = $(this);\n if (cur < last) {\n t.prev().before(t);\n stops = $(curGradient).find('stop');\n }\n last = cur;\n });\n }\n\n const stopMakerSVG = mkElem('svg', {\n width: '100%',\n height: 45\n }, stopMakerDiv[0]);\n\n const transPattern = mkElem('pattern', {\n width: 16,\n height: 16,\n patternUnits: 'userSpaceOnUse',\n id: 'jGraduate_trans'\n }, stopMakerSVG);\n\n const transImg = mkElem('image', {\n width: 16,\n height: 16\n }, transPattern);\n\n const bgImage = $settings.images.clientPath + 'map-opacity.png';\n\n transImg.setAttributeNS(ns.xlink, 'xlink:href', bgImage);\n\n $(stopMakerSVG).click(function (evt) {\n stopOffset = stopMakerDiv.offset();\n const {target} = evt;\n if (target.tagName === 'path') return;\n let x = evt.pageX - stopOffset.left - 8;\n x = x < 10 ? 10 : x > MAX + 10 ? MAX + 10 : x;\n mkStop(x / MAX, 0, 0, true);\n evt.stopPropagation();\n });\n\n $(stopMakerSVG).mouseover(function () {\n stopMakerSVG.append(delStop);\n });\n\n stopGroup = mkElem('g', {}, stopMakerSVG);\n\n mkElem('line', {\n x1: 10,\n y1: 15,\n x2: MAX + 10,\n y2: 15,\n 'stroke-width': 2,\n stroke: '#000'\n }, stopMakerSVG);\n\n const spreadMethodOpt = gradPicker.find('.jGraduate_spreadMethod').change(function () {\n curGradient.setAttribute('spreadMethod', $(this).val());\n });\n\n // handle dragging the stop around the swatch\n let draggingCoord = null;\n\n const onCoordDrag = function (evt) {\n let x = evt.pageX - offset.left;\n let y = evt.pageY - offset.top;\n\n // clamp stop to the swatch\n x = x < 0 ? 0 : x > MAX ? MAX : x;\n y = y < 0 ? 0 : y > MAX ? MAX : y;\n\n draggingCoord.css('left', x).css('top', y);\n\n // calculate stop offset\n const fracx = x / SIZEX;\n const fracy = y / SIZEY;\n\n const type = draggingCoord.data('coord');\n const grd = curGradient;\n\n switch (type) {\n case 'start':\n attrInput.x1.val(fracx);\n attrInput.y1.val(fracy);\n grd.setAttribute('x1', fracx);\n grd.setAttribute('y1', fracy);\n break;\n case 'end':\n attrInput.x2.val(fracx);\n attrInput.y2.val(fracy);\n grd.setAttribute('x2', fracx);\n grd.setAttribute('y2', fracy);\n break;\n case 'center':\n attrInput.cx.val(fracx);\n attrInput.cy.val(fracy);\n grd.setAttribute('cx', fracx);\n grd.setAttribute('cy', fracy);\n cX = fracx;\n cY = fracy;\n xform();\n break;\n case 'focus':\n attrInput.fx.val(fracx);\n attrInput.fy.val(fracy);\n grd.setAttribute('fx', fracx);\n grd.setAttribute('fy', fracy);\n xform();\n }\n\n evt.preventDefault();\n };\n\n const onCoordUp = function () {\n draggingCoord = null;\n $win.unbind('mousemove', onCoordDrag).unbind('mouseup', onCoordUp);\n };\n\n // Linear gradient\n // (function () {\n\n stops = curGradient.getElementsByTagNameNS(ns.svg, 'stop');\n\n let numstops = stops.length;\n // if there are not at least two stops, then\n if (numstops < 2) {\n while (numstops < 2) {\n curGradient.append(document.createElementNS(ns.svg, 'stop'));\n ++numstops;\n }\n stops = curGradient.getElementsByTagNameNS(ns.svg, 'stop');\n }\n\n for (let i = 0; i < numstops; i++) {\n mkStop(0, 0, 0, 0, stops[i]);\n }\n\n spreadMethodOpt.val(curGradient.getAttribute('spreadMethod') || 'pad');\n\n let offset;\n\n // No match, so show focus point\n showFocus = false;\n\n previewRect.setAttribute('fill-opacity', gradalpha / 100);\n\n $('#' + id + ' div.grad_coord').mousedown(function (evt) {\n evt.preventDefault();\n draggingCoord = $(this);\n // const sPos = draggingCoord.offset();\n offset = draggingCoord.parent().offset();\n $win.mousemove(onCoordDrag).mouseup(onCoordUp);\n });\n\n // bind GUI elements\n $('#' + id + '_jGraduate_Ok').bind('click', function () {\n $this.paint.type = curType;\n $this.paint[curType] = curGradient.cloneNode(true);\n $this.paint.solidColor = null;\n okClicked();\n });\n $('#' + id + '_jGraduate_Cancel').bind('click', function (paint) {\n cancelClicked();\n });\n\n if (curType === 'radialGradient') {\n if (showFocus) {\n focusCoord.show();\n } else {\n focusCoord.hide();\n attrInput.fx.val('');\n attrInput.fy.val('');\n }\n }\n\n $('#' + id + '_jGraduate_match_ctr')[0].checked = !showFocus;\n\n let lastfx, lastfy;\n\n $('#' + id + '_jGraduate_match_ctr').change(function () {\n showFocus = !this.checked;\n focusCoord.toggle(showFocus);\n attrInput.fx.val('');\n attrInput.fy.val('');\n const grd = curGradient;\n if (!showFocus) {\n lastfx = grd.getAttribute('fx');\n lastfy = grd.getAttribute('fy');\n grd.removeAttribute('fx');\n grd.removeAttribute('fy');\n } else {\n const fX = lastfx || 0.5;\n const fY = lastfy || 0.5;\n grd.setAttribute('fx', fX);\n grd.setAttribute('fy', fY);\n attrInput.fx.val(fX);\n attrInput.fy.val(fY);\n }\n });\n\n stops = curGradient.getElementsByTagNameNS(ns.svg, 'stop');\n numstops = stops.length;\n // if there are not at least two stops, then\n if (numstops < 2) {\n while (numstops < 2) {\n curGradient.append(document.createElementNS(ns.svg, 'stop'));\n ++numstops;\n }\n stops = curGradient.getElementsByTagNameNS(ns.svg, 'stop');\n }\n\n let slider;\n\n const setSlider = function (e) {\n const {offset: {left}} = slider;\n const div = slider.parent;\n let x = (e.pageX - left - parseInt(div.css('border-left-width')));\n if (x > SLIDERW) x = SLIDERW;\n if (x <= 0) x = 0;\n const posx = x - 5;\n x /= SLIDERW;\n\n switch (slider.type) {\n case 'radius':\n x = (x * 2) ** 2.5;\n if (x > 0.98 && x < 1.02) x = 1;\n if (x <= 0.01) x = 0.01;\n curGradient.setAttribute('r', x);\n break;\n case 'opacity':\n $this.paint.alpha = parseInt(x * 100);\n previewRect.setAttribute('fill-opacity', x);\n break;\n case 'ellip':\n scaleX = 1;\n scaleY = 1;\n if (x < 0.5) {\n x /= 0.5; // 0.001\n scaleX = x <= 0 ? 0.01 : x;\n } else if (x > 0.5) {\n x /= 0.5; // 2\n x = 2 - x;\n scaleY = x <= 0 ? 0.01 : x;\n }\n xform();\n x -= 1;\n if (scaleY === x + 1) {\n x = Math.abs(x);\n }\n break;\n case 'angle':\n x -= 0.5;\n angle = x *= 180;\n xform();\n x /= 100;\n break;\n }\n slider.elem.css({'margin-left': posx});\n x = Math.round(x * 100);\n slider.input.val(x);\n };\n\n let ellipVal = 0, angleVal = 0;\n\n if (curType === 'radialGradient') {\n const tlist = curGradient.gradientTransform.baseVal;\n if (tlist.numberOfItems === 2) {\n const t = tlist.getItem(0);\n const s = tlist.getItem(1);\n if (t.type === 2 && s.type === 3) {\n const m = s.matrix;\n if (m.a !== 1) {\n ellipVal = Math.round(-(1 - m.a) * 100);\n } else if (m.d !== 1) {\n ellipVal = Math.round((1 - m.d) * 100);\n }\n }\n } else if (tlist.numberOfItems === 3) {\n // Assume [R][T][S]\n const r = tlist.getItem(0);\n const t = tlist.getItem(1);\n const s = tlist.getItem(2);\n\n if (r.type === 4 &&\n t.type === 2 &&\n s.type === 3\n ) {\n angleVal = Math.round(r.angle);\n const m = s.matrix;\n if (m.a !== 1) {\n ellipVal = Math.round(-(1 - m.a) * 100);\n } else if (m.d !== 1) {\n ellipVal = Math.round((1 - m.d) * 100);\n }\n }\n }\n }\n\n const sliders = {\n radius: {\n handle: '#' + id + '_jGraduate_RadiusArrows',\n input: '#' + id + '_jGraduate_RadiusInput',\n val: (curGradient.getAttribute('r') || 0.5) * 100\n },\n opacity: {\n handle: '#' + id + '_jGraduate_OpacArrows',\n input: '#' + id + '_jGraduate_OpacInput',\n val: $this.paint.alpha || 100\n },\n ellip: {\n handle: '#' + id + '_jGraduate_EllipArrows',\n input: '#' + id + '_jGraduate_EllipInput',\n val: ellipVal\n },\n angle: {\n handle: '#' + id + '_jGraduate_AngleArrows',\n input: '#' + id + '_jGraduate_AngleInput',\n val: angleVal\n }\n };\n\n $.each(sliders, function (type, data) {\n const handle = $(data.handle);\n handle.mousedown(function (evt) {\n const parent = handle.parent();\n slider = {\n type,\n elem: handle,\n input: $(data.input),\n parent,\n offset: parent.offset()\n };\n $win.mousemove(dragSlider).mouseup(stopSlider);\n evt.preventDefault();\n });\n\n $(data.input).val(data.val).change(function () {\n const isRad = curType === 'radialGradient';\n let val = Number(this.value);\n let xpos = 0;\n switch (type) {\n case 'radius':\n if (isRad) curGradient.setAttribute('r', val / 100);\n xpos = (((val / 100) ** (1 / 2.5)) / 2) * SLIDERW;\n break;\n\n case 'opacity':\n $this.paint.alpha = val;\n previewRect.setAttribute('fill-opacity', val / 100);\n xpos = val * (SLIDERW / 100);\n break;\n\n case 'ellip':\n scaleX = scaleY = 1;\n if (val === 0) {\n xpos = SLIDERW * 0.5;\n break;\n }\n if (val > 99.5) val = 99.5;\n if (val > 0) {\n scaleY = 1 - (val / 100);\n } else {\n scaleX = -(val / 100) - 1;\n }\n\n xpos = SLIDERW * ((val + 100) / 2) / 100;\n if (isRad) xform();\n break;\n\n case 'angle':\n angle = val;\n xpos = angle / 180;\n xpos += 0.5;\n xpos *= SLIDERW;\n if (isRad) xform();\n }\n if (xpos > SLIDERW) {\n xpos = SLIDERW;\n } else if (xpos < 0) {\n xpos = 0;\n }\n handle.css({'margin-left': xpos - 5});\n }).change();\n });\n\n const dragSlider = function (evt) {\n setSlider(evt);\n evt.preventDefault();\n };\n\n const stopSlider = function (evt) {\n $win.unbind('mousemove', dragSlider).unbind('mouseup', stopSlider);\n slider = null;\n };\n\n // --------------\n let thisAlpha = ($this.paint.alpha * 255 / 100).toString(16);\n while (thisAlpha.length < 2) { thisAlpha = '0' + thisAlpha; }\n thisAlpha = thisAlpha.split('.')[0];\n color = $this.paint.solidColor === 'none' ? '' : $this.paint.solidColor + thisAlpha;\n\n if (!isSolid) {\n color = stops[0].getAttribute('stop-color');\n }\n\n // This should be done somewhere else, probably\n $.extend($.fn.jPicker.defaults.window, {\n alphaSupport: true, effects: {type: 'show', speed: 0}\n });\n\n colPicker.jPicker(\n {\n window: {title: $settings.window.pickerTitle},\n images: {clientPath: $settings.images.clientPath},\n color: {active: color, alphaSupport: true}\n },\n function (clr) {\n $this.paint.type = 'solidColor';\n $this.paint.alpha = clr.val('ahex') ? Math.round((clr.val('a') / 255) * 100) : 100;\n $this.paint.solidColor = clr.val('hex') ? clr.val('hex') : 'none';\n $this.paint.radialGradient = null;\n okClicked();\n },\n null,\n function () { cancelClicked(); }\n );\n\n const tabs = $(idref + ' .jGraduate_tabs li');\n tabs.click(function () {\n tabs.removeClass('jGraduate_tab_current');\n $(this).addClass('jGraduate_tab_current');\n $(idref + ' > div').hide();\n const type = $(this).attr('data-type');\n /* const container = */ $(idref + ' .jGraduate_gradPick').show();\n if (type === 'rg' || type === 'lg') {\n // Show/hide appropriate fields\n $('.jGraduate_' + type + '_field').show();\n $('.jGraduate_' + (type === 'lg' ? 'rg' : 'lg') + '_field').hide();\n\n $('#' + id + '_jgraduate_rect')[0].setAttribute('fill', 'url(#' + id + '_' + type + '_jgraduate_grad)');\n\n // Copy stops\n\n curType = type === 'lg' ? 'linearGradient' : 'radialGradient';\n\n $('#' + id + '_jGraduate_OpacInput').val($this.paint.alpha).change();\n\n const newGrad = $('#' + id + '_' + type + '_jgraduate_grad')[0];\n\n if (curGradient !== newGrad) {\n const curStops = $(curGradient).find('stop');\n $(newGrad).empty().append(curStops);\n curGradient = newGrad;\n const sm = spreadMethodOpt.val();\n curGradient.setAttribute('spreadMethod', sm);\n }\n showFocus = type === 'rg' && curGradient.getAttribute('fx') !== null && !(cx === fx && cy === fy);\n $('#' + id + '_jGraduate_focusCoord').toggle(showFocus);\n if (showFocus) {\n $('#' + id + '_jGraduate_match_ctr')[0].checked = false;\n }\n } else {\n $(idref + ' .jGraduate_gradPick').hide();\n $(idref + ' .jGraduate_colPick').show();\n }\n });\n $(idref + ' > div').hide();\n tabs.removeClass('jGraduate_tab_current');\n let tab;\n switch ($this.paint.type) {\n case 'linearGradient':\n tab = $(idref + ' .jGraduate_tab_lingrad');\n break;\n case 'radialGradient':\n tab = $(idref + ' .jGraduate_tab_radgrad');\n break;\n default:\n tab = $(idref + ' .jGraduate_tab_color');\n break;\n }\n $this.show();\n\n // jPicker will try to show after a 0ms timeout, so need to fire this after that\n setTimeout(() => {\n tab.addClass('jGraduate_tab_current').click();\n }, 10);\n });\n };\n return $;\n}\n","/* eslint-disable no-bitwise */\n/**\n * @file jPicker (Adapted from version 1.1.6)\n *\n * jQuery Plugin for Photoshop style color picker\n *\n * @module jPicker\n * @copyright (c) 2010 Christopher T. Tillman\n * Digital Magic Productions, Inc. ({@link http://www.digitalmagicpro.com/})\n * FREE to use, alter, copy, sell, and especially ENHANCE\n * @license MIT\n *\n * Painstakingly ported from John Dyers' excellent work on his own color picker based on the Prototype framework.\n *\n * John Dyers' website: {@link http://johndyer.name}\n * Color Picker page: {@link http://johndyer.name/photoshop-like-javascript-color-picker/}\n */\n\n/**\n* @external Math\n*/\n/**\n* @memberof external:Math\n* @param {Float} value\n* @param {Float} precision\n* @returns {Float}\n*/\nfunction toFixedNumeric (value, precision) {\n if (precision === undefined) precision = 0;\n return Math.round(value * (10 ** precision)) / (10 ** precision);\n}\n\n/**\n * Whether a value is `null` or `undefined`.\n * @param {any} val\n * @returns {boolean}\n */\nconst isNullish = (val) => {\n return val === null || val === undefined;\n};\n\n/**\n* @function module:jPicker.jPicker\n* @param {external:jQuery} $ The jQuery object to wrap (with {@link external:jQuery.loadingStylesheets}, {@link external:jQuery.fn.$.fn.jPicker}, {@link external:jQuery.fn.$.fn.jPicker.defaults})\n* @returns {external:jQuery}\n*/\nconst jPicker = function ($) {\n if (!$.loadingStylesheets) {\n /**\n * @name loadingStylesheets\n * @type {string[]}\n * @memberof external:jQuery\n */\n $.loadingStylesheets = [];\n }\n const stylesheet = 'jgraduate/css/jPicker.css';\n if (!$.loadingStylesheets.includes(stylesheet)) {\n $.loadingStylesheets.push(stylesheet);\n }\n /**\n * @typedef {PlainObject} module:jPicker.SliderOptions\n * @property {external:jQuery|PlainObject} arrow\n * @property {string} arrow.image Not in use?\n * @property {Float} arrow.width\n * @property {Float} arrow.height\n * @property {PlainObject} map\n * @property {Float} map.width\n * @property {Float} map.height\n */\n\n /**\n * Encapsulate slider functionality for the ColorMap and ColorBar -\n * could be useful to use a jQuery UI draggable for this with certain extensions.\n * @memberof module:jPicker\n * @param {external:jQuery} bar\n * @param {module:jPicker.SliderOptions} options\n * @returns {void}\n */\n class Slider {\n constructor (bar, options) {\n const that = this;\n /**\n * Fire events on the supplied `context`\n * @param {module:jPicker.JPickerInit} context\n * @returns {void}\n */\n function fireChangeEvents (context) {\n changeEvents.forEach((changeEvent) => {\n changeEvent.call(that, that, context);\n });\n }\n\n /**\n * Bind the mousedown to the bar not the arrow for quick snapping to the clicked location.\n * @param {external:jQuery.Event} e\n * @returns {void}\n */\n function mouseDown (e) {\n const off = bar.offset();\n offset = {l: off.left | 0, t: off.top | 0};\n clearTimeout(timeout);\n // using setTimeout for visual updates - once the style is updated the browser will re-render internally allowing the next Javascript to run\n timeout = setTimeout(function () {\n setValuesFromMousePosition.call(that, e);\n }, 0);\n // Bind mousemove and mouseup event to the document so it responds when dragged of of the bar - we will unbind these when on mouseup to save processing\n $(document).bind('mousemove', mouseMove).bind('mouseup', mouseUp);\n e.preventDefault(); // don't try to select anything or drag the image to the desktop\n }\n /**\n * Set the values as the mouse moves.\n * @param {external:jQuery.Event} e\n * @returns {false}\n */\n function mouseMove (e) {\n clearTimeout(timeout);\n timeout = setTimeout(function () {\n setValuesFromMousePosition.call(that, e);\n }, 0);\n e.stopPropagation();\n e.preventDefault();\n return false;\n }\n /**\n * Unbind the document events - they aren't needed when not dragging.\n * @param {external:jQuery.Event} e\n * @returns {false}\n */\n function mouseUp (e) {\n $(document).unbind('mouseup', mouseUp).unbind('mousemove', mouseMove);\n e.stopPropagation();\n e.preventDefault();\n return false;\n }\n\n /**\n * Calculate mouse position and set value within the current range.\n * @param {Event} e\n * @returns {void}\n */\n function setValuesFromMousePosition (e) {\n const barW = bar.w, // local copies for YUI compressor\n barH = bar.h;\n let locX = e.pageX - offset.l,\n locY = e.pageY - offset.t;\n // keep the arrow within the bounds of the bar\n if (locX < 0) locX = 0;\n else if (locX > barW) locX = barW;\n if (locY < 0) locY = 0;\n else if (locY > barH) locY = barH;\n val.call(that, 'xy', {\n x: ((locX / barW) * rangeX) + minX,\n y: ((locY / barH) * rangeY) + minY\n });\n }\n /**\n *\n * @returns {void}\n */\n function draw () {\n const\n barW = bar.w,\n barH = bar.h,\n arrowW = arrow.w,\n arrowH = arrow.h;\n let arrowOffsetX = 0,\n arrowOffsetY = 0;\n setTimeout(function () {\n if (rangeX > 0) { // range is greater than zero\n // constrain to bounds\n if (x === maxX) arrowOffsetX = barW;\n else arrowOffsetX = ((x / rangeX) * barW) | 0;\n }\n if (rangeY > 0) { // range is greater than zero\n // constrain to bounds\n if (y === maxY) arrowOffsetY = barH;\n else arrowOffsetY = ((y / rangeY) * barH) | 0;\n }\n // if arrow width is greater than bar width, center arrow and prevent horizontal dragging\n if (arrowW >= barW) arrowOffsetX = (barW >> 1) - (arrowW >> 1); // number >> 1 - superfast bitwise divide by two and truncate (move bits over one bit discarding lowest)\n else arrowOffsetX -= arrowW >> 1;\n // if arrow height is greater than bar height, center arrow and prevent vertical dragging\n if (arrowH >= barH) arrowOffsetY = (barH >> 1) - (arrowH >> 1);\n else arrowOffsetY -= arrowH >> 1;\n // set the arrow position based on these offsets\n arrow.css({left: arrowOffsetX + 'px', top: arrowOffsetY + 'px'});\n });\n }\n\n /**\n * Get or set a value.\n * @param {?(\"xy\"|\"x\"|\"y\")} name\n * @param {module:math.XYObject} value\n * @param {module:jPicker.Slider} context\n * @returns {module:math.XYObject|Float|void}\n */\n function val (name, value, context) {\n const set = value !== undefined;\n if (!set) {\n if (isNullish(name)) name = 'xy';\n switch (name.toLowerCase()) {\n case 'x': return x;\n case 'y': return y;\n case 'xy':\n default: return {x, y};\n }\n }\n if (!isNullish(context) && context === that) return undefined;\n let changed = false;\n\n let newX, newY;\n if (isNullish(name)) name = 'xy';\n switch (name.toLowerCase()) {\n case 'x':\n newX = (value && ((value.x && value.x | 0) || value | 0)) || 0;\n break;\n case 'y':\n newY = (value && ((value.y && value.y | 0) || value | 0)) || 0;\n break;\n case 'xy':\n default:\n newX = (value && value.x && value.x | 0) || 0;\n newY = (value && value.y && value.y | 0) || 0;\n break;\n }\n if (!isNullish(newX)) {\n if (newX < minX) newX = minX;\n else if (newX > maxX) newX = maxX;\n if (x !== newX) {\n x = newX;\n changed = true;\n }\n }\n if (!isNullish(newY)) {\n if (newY < minY) newY = minY;\n else if (newY > maxY) newY = maxY;\n if (y !== newY) {\n y = newY;\n changed = true;\n }\n }\n changed && fireChangeEvents.call(that, context || that);\n return undefined;\n }\n\n /**\n * @typedef {PlainObject} module:jPicker.MinMaxRangeX\n * @property {Float} minX\n * @property {Float} maxX\n * @property {Float} rangeX\n */\n /**\n * @typedef {PlainObject} module:jPicker.MinMaxRangeY\n * @property {Float} minY\n * @property {Float} maxY\n * @property {Float} rangeY\n */\n /**\n * @typedef {module:jPicker.MinMaxRangeY|module:jPicker.MinMaxRangeX} module:jPicker.MinMaxRangeXY\n */\n\n /**\n *\n * @param {\"minx\"|\"maxx\"|\"rangex\"|\"miny\"|\"maxy\"|\"rangey\"|\"all\"} name\n * @param {module:jPicker.MinMaxRangeXY} value\n * @returns {module:jPicker.MinMaxRangeXY|module:jPicker.MinMaxRangeX|module:jPicker.MinMaxRangeY|void}\n */\n function range (name, value) {\n const set = value !== undefined;\n if (!set) {\n if (isNullish(name)) name = 'all';\n switch (name.toLowerCase()) {\n case 'minx': return minX;\n case 'maxx': return maxX;\n case 'rangex': return {minX, maxX, rangeX};\n case 'miny': return minY;\n case 'maxy': return maxY;\n case 'rangey': return {minY, maxY, rangeY};\n case 'all':\n default: return {minX, maxX, rangeX, minY, maxY, rangeY};\n }\n }\n let // changed = false,\n newMinX,\n newMaxX,\n newMinY,\n newMaxY;\n if (isNullish(name)) name = 'all';\n switch (name.toLowerCase()) {\n case 'minx':\n newMinX = (value && ((value.minX && value.minX | 0) || value | 0)) || 0;\n break;\n case 'maxx':\n newMaxX = (value && ((value.maxX && value.maxX | 0) || value | 0)) || 0;\n break;\n case 'rangex':\n newMinX = (value && value.minX && value.minX | 0) || 0;\n newMaxX = (value && value.maxX && value.maxX | 0) || 0;\n break;\n case 'miny':\n newMinY = (value && ((value.minY && value.minY | 0) || value | 0)) || 0;\n break;\n case 'maxy':\n newMaxY = (value && ((value.maxY && value.maxY | 0) || value | 0)) || 0;\n break;\n case 'rangey':\n newMinY = (value && value.minY && value.minY | 0) || 0;\n newMaxY = (value && value.maxY && value.maxY | 0) || 0;\n break;\n case 'all':\n default:\n newMinX = (value && value.minX && value.minX | 0) || 0;\n newMaxX = (value && value.maxX && value.maxX | 0) || 0;\n newMinY = (value && value.minY && value.minY | 0) || 0;\n newMaxY = (value && value.maxY && value.maxY | 0) || 0;\n break;\n }\n\n if (!isNullish(newMinX) && minX !== newMinX) {\n minX = newMinX;\n rangeX = maxX - minX;\n }\n if (!isNullish(newMaxX) && maxX !== newMaxX) {\n maxX = newMaxX;\n rangeX = maxX - minX;\n }\n if (!isNullish(newMinY) && minY !== newMinY) {\n minY = newMinY;\n rangeY = maxY - minY;\n }\n if (!isNullish(newMaxY) && maxY !== newMaxY) {\n maxY = newMaxY;\n rangeY = maxY - minY;\n }\n return undefined;\n }\n /**\n * @param {GenericCallback} callback\n * @returns {void}\n */\n function bind (callback) { // eslint-disable-line promise/prefer-await-to-callbacks\n if (typeof callback === 'function') changeEvents.push(callback);\n }\n /**\n * @param {GenericCallback} callback\n * @returns {void}\n */\n function unbind (callback) { // eslint-disable-line promise/prefer-await-to-callbacks\n if (typeof callback !== 'function') return;\n let i;\n while ((i = changeEvents.includes(callback))) changeEvents.splice(i, 1);\n }\n /**\n *\n * @returns {void}\n */\n function destroy () {\n // unbind all possible events and null objects\n $(document).unbind('mouseup', mouseUp).unbind('mousemove', mouseMove);\n bar.unbind('mousedown', mouseDown);\n bar = null;\n arrow = null;\n changeEvents = null;\n }\n let offset,\n timeout,\n x = 0,\n y = 0,\n minX = 0,\n maxX = 100,\n rangeX = 100,\n minY = 0,\n maxY = 100,\n rangeY = 100,\n arrow = bar.find('img:first'), // the arrow image to drag\n changeEvents = [];\n\n $.extend(\n true,\n // public properties, methods, and event bindings - these we need\n // to access from other controls\n that,\n {\n val,\n range,\n bind,\n unbind,\n destroy\n }\n );\n // initialize this control\n arrow.src = options.arrow && options.arrow.image;\n arrow.w = (options.arrow && options.arrow.width) || arrow.width();\n arrow.h = (options.arrow && options.arrow.height) || arrow.height();\n bar.w = (options.map && options.map.width) || bar.width();\n bar.h = (options.map && options.map.height) || bar.height();\n // bind mousedown event\n bar.bind('mousedown', mouseDown);\n bind.call(that, draw);\n }\n }\n\n /**\n * Controls for all the input elements for the typing in color values.\n * @param {external:jQuery} picker\n * @param {external:jQuery.jPicker.Color} color\n * @param {external:jQuery.fn.$.fn.jPicker} bindedHex\n * @param {Float} alphaPrecision\n */\n class ColorValuePicker {\n constructor (picker, color, bindedHex, alphaPrecision) {\n const that = this; // private properties and methods\n const inputs = picker.find('td.Text input');\n // input box key down - use arrows to alter color\n /**\n *\n * @param {Event} e\n * @returns {Event|false|void}\n */\n function keyDown (e) {\n if (e.target.value === '' && e.target !== hex.get(0) && ((!isNullish(bindedHex) && e.target !== bindedHex.get(0)) || isNullish(bindedHex))) return undefined;\n if (!validateKey(e)) return e;\n switch (e.target) {\n case red.get(0):\n switch (e.keyCode) {\n case 38:\n red.val(setValueInRange.call(that, (red.val() << 0) + 1, 0, 255));\n color.val('r', red.val(), e.target);\n return false;\n case 40:\n red.val(setValueInRange.call(that, (red.val() << 0) - 1, 0, 255));\n color.val('r', red.val(), e.target);\n return false;\n }\n break;\n case green.get(0):\n switch (e.keyCode) {\n case 38:\n green.val(setValueInRange.call(that, (green.val() << 0) + 1, 0, 255));\n color.val('g', green.val(), e.target);\n return false;\n case 40:\n green.val(setValueInRange.call(that, (green.val() << 0) - 1, 0, 255));\n color.val('g', green.val(), e.target);\n return false;\n }\n break;\n case blue.get(0):\n switch (e.keyCode) {\n case 38:\n blue.val(setValueInRange.call(that, (blue.val() << 0) + 1, 0, 255));\n color.val('b', blue.val(), e.target);\n return false;\n case 40:\n blue.val(setValueInRange.call(that, (blue.val() << 0) - 1, 0, 255));\n color.val('b', blue.val(), e.target);\n return false;\n }\n break;\n case alpha && alpha.get(0):\n switch (e.keyCode) {\n case 38:\n alpha.val(setValueInRange.call(that, parseFloat(alpha.val()) + 1, 0, 100));\n color.val('a', toFixedNumeric((alpha.val() * 255) / 100, alphaPrecision), e.target);\n return false;\n case 40:\n alpha.val(setValueInRange.call(that, parseFloat(alpha.val()) - 1, 0, 100));\n color.val('a', toFixedNumeric((alpha.val() * 255) / 100, alphaPrecision), e.target);\n return false;\n }\n break;\n case hue.get(0):\n switch (e.keyCode) {\n case 38:\n hue.val(setValueInRange.call(that, (hue.val() << 0) + 1, 0, 360));\n color.val('h', hue.val(), e.target);\n return false;\n case 40:\n hue.val(setValueInRange.call(that, (hue.val() << 0) - 1, 0, 360));\n color.val('h', hue.val(), e.target);\n return false;\n }\n break;\n case saturation.get(0):\n switch (e.keyCode) {\n case 38:\n saturation.val(setValueInRange.call(that, (saturation.val() << 0) + 1, 0, 100));\n color.val('s', saturation.val(), e.target);\n return false;\n case 40:\n saturation.val(setValueInRange.call(that, (saturation.val() << 0) - 1, 0, 100));\n color.val('s', saturation.val(), e.target);\n return false;\n }\n break;\n case value.get(0):\n switch (e.keyCode) {\n case 38:\n value.val(setValueInRange.call(that, (value.val() << 0) + 1, 0, 100));\n color.val('v', value.val(), e.target);\n return false;\n case 40:\n value.val(setValueInRange.call(that, (value.val() << 0) - 1, 0, 100));\n color.val('v', value.val(), e.target);\n return false;\n }\n break;\n }\n return undefined;\n }\n // input box key up - validate value and set color\n /**\n * @param {Event} e\n * @returns {Event|void}\n * @todo Why is this returning an event?\n */\n function keyUp (e) {\n if (e.target.value === '' && e.target !== hex.get(0) &&\n ((!isNullish(bindedHex) && e.target !== bindedHex.get(0)) ||\n isNullish(bindedHex))) return undefined;\n if (!validateKey(e)) return e;\n switch (e.target) {\n case red.get(0):\n red.val(setValueInRange.call(that, red.val(), 0, 255));\n color.val('r', red.val(), e.target);\n break;\n case green.get(0):\n green.val(setValueInRange.call(that, green.val(), 0, 255));\n color.val('g', green.val(), e.target);\n break;\n case blue.get(0):\n blue.val(setValueInRange.call(that, blue.val(), 0, 255));\n color.val('b', blue.val(), e.target);\n break;\n case alpha && alpha.get(0):\n alpha.val(setValueInRange.call(that, alpha.val(), 0, 100));\n color.val('a', toFixedNumeric((alpha.val() * 255) / 100, alphaPrecision), e.target);\n break;\n case hue.get(0):\n hue.val(setValueInRange.call(that, hue.val(), 0, 360));\n color.val('h', hue.val(), e.target);\n break;\n case saturation.get(0):\n saturation.val(setValueInRange.call(that, saturation.val(), 0, 100));\n color.val('s', saturation.val(), e.target);\n break;\n case value.get(0):\n value.val(setValueInRange.call(that, value.val(), 0, 100));\n color.val('v', value.val(), e.target);\n break;\n case hex.get(0):\n hex.val(hex.val().replace(/[^a-fA-F\\d]/g, '').toLowerCase().substring(0, 6));\n bindedHex && bindedHex.val(hex.val());\n color.val('hex', hex.val() !== '' ? hex.val() : null, e.target);\n break;\n case bindedHex && bindedHex.get(0):\n bindedHex.val(bindedHex.val().replace(/[^a-fA-F\\d]/g, '').toLowerCase().substring(0, 6));\n hex.val(bindedHex.val());\n color.val('hex', bindedHex.val() !== '' ? bindedHex.val() : null, e.target);\n break;\n case ahex && ahex.get(0):\n ahex.val(ahex.val().replace(/[^a-fA-F\\d]/g, '').toLowerCase().substring(0, 2));\n color.val('a', !isNullish(ahex.val()) ? parseInt(ahex.val(), 16) : null, e.target);\n break;\n }\n return undefined;\n }\n // input box blur - reset to original if value empty\n /**\n * @param {Event} e\n * @returns {void}\n */\n function blur (e) {\n if (!isNullish(color.val())) {\n switch (e.target) {\n case red.get(0): red.val(color.val('r')); break;\n case green.get(0): green.val(color.val('g')); break;\n case blue.get(0): blue.val(color.val('b')); break;\n case alpha && alpha.get(0): alpha.val(toFixedNumeric((color.val('a') * 100) / 255, alphaPrecision)); break;\n case hue.get(0): hue.val(color.val('h')); break;\n case saturation.get(0): saturation.val(color.val('s')); break;\n case value.get(0): value.val(color.val('v')); break;\n case hex.get(0):\n case bindedHex && bindedHex.get(0):\n hex.val(color.val('hex'));\n bindedHex && bindedHex.val(color.val('hex'));\n break;\n case ahex && ahex.get(0): ahex.val(color.val('ahex').substring(6)); break;\n }\n }\n }\n /**\n * @param {Event} e\n * @returns {boolean}\n */\n function validateKey (e) {\n switch (e.keyCode) {\n case 9:\n case 16:\n case 29:\n case 37:\n case 39:\n return false;\n case 'c'.charCodeAt():\n case 'v'.charCodeAt():\n if (e.ctrlKey) return false;\n }\n return true;\n }\n\n /**\n * Constrain value within range.\n * @param {Float|string} value\n * @param {Float} min\n * @param {Float} max\n * @returns {Float|string} Returns a number or numeric string\n */\n function setValueInRange (value, min, max) {\n if (value === '' || isNaN(value)) return min;\n if (value > max) return max;\n if (value < min) return min;\n return value;\n }\n /**\n * @param {external:jQuery} ui\n * @param {Element} context\n * @returns {void}\n */\n function colorChanged (ui, context) {\n const all = ui.val('all');\n if (context !== red.get(0)) red.val(!isNullish(all) ? all.r : '');\n if (context !== green.get(0)) green.val(!isNullish(all) ? all.g : '');\n if (context !== blue.get(0)) blue.val(!isNullish(all) ? all.b : '');\n if (alpha && context !== alpha.get(0)) alpha.val(!isNullish(all) ? toFixedNumeric((all.a * 100) / 255, alphaPrecision) : '');\n if (context !== hue.get(0)) hue.val(!isNullish(all) ? all.h : '');\n if (context !== saturation.get(0)) saturation.val(!isNullish(all) ? all.s : '');\n if (context !== value.get(0)) value.val(!isNullish(all) ? all.v : '');\n if (context !== hex.get(0) && ((bindedHex && context !== bindedHex.get(0)) || !bindedHex)) hex.val(!isNullish(all) ? all.hex : '');\n if (bindedHex && context !== bindedHex.get(0) && context !== hex.get(0)) bindedHex.val(!isNullish(all) ? all.hex : '');\n if (ahex && context !== ahex.get(0)) ahex.val(!isNullish(all) ? all.ahex.substring(6) : '');\n }\n /**\n * Unbind all events and null objects.\n * @returns {void}\n */\n function destroy () {\n red.add(green).add(blue).add(alpha).add(hue).add(saturation).add(value).add(hex).add(bindedHex).add(ahex).unbind('keyup', keyUp).unbind('blur', blur);\n red.add(green).add(blue).add(alpha).add(hue).add(saturation).add(value).unbind('keydown', keyDown);\n color.unbind(colorChanged);\n red = null;\n green = null;\n blue = null;\n alpha = null;\n hue = null;\n saturation = null;\n value = null;\n hex = null;\n ahex = null;\n }\n let\n red = inputs.eq(3),\n green = inputs.eq(4),\n blue = inputs.eq(5),\n alpha = inputs.length > 7 ? inputs.eq(6) : null,\n hue = inputs.eq(0),\n saturation = inputs.eq(1),\n value = inputs.eq(2),\n hex = inputs.eq(inputs.length > 7 ? 7 : 6),\n ahex = inputs.length > 7 ? inputs.eq(8) : null;\n $.extend(true, that, {\n // public properties and methods\n destroy\n });\n red.add(green).add(blue).add(alpha).add(hue).add(saturation).add(value).add(hex).add(bindedHex).add(ahex).bind('keyup', keyUp).bind('blur', blur);\n red.add(green).add(blue).add(alpha).add(hue).add(saturation).add(value).bind('keydown', keyDown);\n color.bind(colorChanged);\n }\n }\n\n /**\n * @typedef {PlainObject} module:jPicker.JPickerInit\n * @property {Integer} [a]\n * @property {Integer} [b]\n * @property {Integer} [g]\n * @property {Integer} [h]\n * @property {Integer} [r]\n * @property {Integer} [s]\n * @property {Integer} [v]\n * @property {string} [hex]\n * @property {string} [ahex]\n */\n\n /* eslint-disable jsdoc/require-property */\n /**\n * @namespace {PlainObject} jPicker\n * @memberof external:jQuery\n */\n $.jPicker = /** @lends external:jQuery.jPicker */ {\n /* eslint-enable jsdoc/require-property */\n /**\n * Array holding references to each active instance of the jPicker control.\n * @type {external:jQuery.fn.$.fn.jPicker[]}\n */\n List: [],\n /**\n * Color object - we will be able to assign by any color space type or\n * retrieve any color space info.\n * We want this public so we can optionally assign new color objects to\n * initial values using inputs other than a string hex value (also supported)\n * Note: JSDoc didn't document when expressed here as an ES6 Class.\n * @namespace\n * @class\n * @memberof external:jQuery.jPicker\n * @param {module:jPicker.JPickerInit} init\n * @returns {external:jQuery.jPicker.Color}\n */\n Color: function (init) { // eslint-disable-line object-shorthand\n const that = this;\n /**\n *\n * @param {module:jPicker.Slider} context\n * @returns {void}\n */\n function fireChangeEvents (context) {\n for (let i = 0; i < changeEvents.length; i++) changeEvents[i].call(that, that, context);\n }\n\n /**\n * @param {string|\"ahex\"|\"hex\"|\"all\"|\"\"|null|void} name String composed of letters \"r\", \"g\", \"b\", \"a\", \"h\", \"s\", and/or \"v\"\n * @param {module:jPicker.RGBA|module:jPicker.JPickerInit|string} [value]\n * @param {external:jQuery.jPicker.Color} context\n * @returns {module:jPicker.JPickerInit|string|null|void}\n */\n function val (name, value, context) {\n // Kind of ugly\n const set = Boolean(value);\n if (set && value.ahex === '') value.ahex = '00000000';\n if (!set) {\n let ret;\n if (isNullish(name) || name === '') name = 'all';\n if (isNullish(r)) return null;\n switch (name.toLowerCase()) {\n case 'ahex': return ColorMethods.rgbaToHex({r, g, b, a});\n case 'hex': return val('ahex').substring(0, 6);\n case 'all': return {\n r, g, b, a, h, s, v,\n hex: val.call(that, 'hex'),\n ahex: val.call(that, 'ahex')\n };\n default: {\n ret = {};\n const nameLength = name.length;\n [...name].forEach((ch) => {\n switch (ch) {\n case 'r':\n if (nameLength === 1) ret = r;\n else ret.r = r;\n break;\n case 'g':\n if (nameLength === 1) ret = g;\n else ret.g = g;\n break;\n case 'b':\n if (nameLength === 1) ret = b;\n else ret.b = b;\n break;\n case 'a':\n if (nameLength === 1) ret = a;\n else ret.a = a;\n break;\n case 'h':\n if (nameLength === 1) ret = h;\n else ret.h = h;\n break;\n case 's':\n if (nameLength === 1) ret = s;\n else ret.s = s;\n break;\n case 'v':\n if (nameLength === 1) ret = v;\n else ret.v = v;\n break;\n }\n });\n }\n }\n return typeof ret === 'object' && !Object.keys(ret).length\n ? val.call(that, 'all')\n : ret;\n }\n if (!isNullish(context) && context === that) return undefined;\n if (isNullish(name)) name = '';\n\n let changed = false;\n if (isNullish(value)) {\n if (!isNullish(r)) {\n r = null;\n changed = true;\n }\n if (!isNullish(g)) {\n g = null;\n changed = true;\n }\n if (!isNullish(b)) {\n b = null;\n changed = true;\n }\n if (!isNullish(a)) {\n a = null;\n changed = true;\n }\n if (!isNullish(h)) {\n h = null;\n changed = true;\n }\n if (!isNullish(s)) {\n s = null;\n changed = true;\n }\n if (!isNullish(v)) {\n v = null;\n changed = true;\n }\n changed && fireChangeEvents.call(that, context || that);\n return undefined;\n }\n switch (name.toLowerCase()) {\n case 'ahex':\n case 'hex': {\n const ret = ColorMethods.hexToRgba((value && (value.ahex || value.hex)) || value || 'none');\n val.call(that, 'rgba', {\n r: ret.r,\n g: ret.g,\n b: ret.b,\n a: name === 'ahex'\n ? ret.a\n : !isNullish(a)\n ? a\n : 255\n }, context);\n break;\n } default: {\n if (value && (!isNullish(value.ahex) || !isNullish(value.hex))) {\n val.call(that, 'ahex', value.ahex || value.hex || '00000000', context);\n return undefined;\n }\n const newV = {};\n let rgb = false, hsv = false;\n if (value.r !== undefined && !name.includes('r')) name += 'r';\n if (value.g !== undefined && !name.includes('g')) name += 'g';\n if (value.b !== undefined && !name.includes('b')) name += 'b';\n if (value.a !== undefined && !name.includes('a')) name += 'a';\n if (value.h !== undefined && !name.includes('h')) name += 'h';\n if (value.s !== undefined && !name.includes('s')) name += 's';\n if (value.v !== undefined && !name.includes('v')) name += 'v';\n [...name].forEach((ch) => {\n switch (ch) {\n case 'r':\n if (hsv) return;\n rgb = true;\n newV.r = (value.r && value.r | 0) || (value | 0) || 0;\n if (newV.r < 0) newV.r = 0;\n else if (newV.r > 255) newV.r = 255;\n if (r !== newV.r) {\n ({r} = newV);\n changed = true;\n }\n break;\n case 'g':\n if (hsv) return;\n rgb = true;\n newV.g = (value && value.g && value.g | 0) || (value && value | 0) || 0;\n if (newV.g < 0) newV.g = 0;\n else if (newV.g > 255) newV.g = 255;\n if (g !== newV.g) {\n ({g} = newV);\n changed = true;\n }\n break;\n case 'b':\n if (hsv) return;\n rgb = true;\n newV.b = (value && value.b && value.b | 0) || (value && value | 0) || 0;\n if (newV.b < 0) newV.b = 0;\n else if (newV.b > 255) newV.b = 255;\n if (b !== newV.b) {\n ({b} = newV);\n changed = true;\n }\n break;\n case 'a':\n newV.a = value && !isNullish(value.a) ? value.a | 0 : value | 0;\n if (newV.a < 0) newV.a = 0;\n else if (newV.a > 255) newV.a = 255;\n if (a !== newV.a) {\n ({a} = newV);\n changed = true;\n }\n break;\n case 'h':\n if (rgb) return;\n hsv = true;\n newV.h = (value && value.h && value.h | 0) || (value && value | 0) || 0;\n if (newV.h < 0) newV.h = 0;\n else if (newV.h > 360) newV.h = 360;\n if (h !== newV.h) {\n ({h} = newV);\n changed = true;\n }\n break;\n case 's':\n if (rgb) return;\n hsv = true;\n newV.s = !isNullish(value.s) ? value.s | 0 : value | 0;\n if (newV.s < 0) newV.s = 0;\n else if (newV.s > 100) newV.s = 100;\n if (s !== newV.s) {\n ({s} = newV);\n changed = true;\n }\n break;\n case 'v':\n if (rgb) return;\n hsv = true;\n newV.v = !isNullish(value.v) ? value.v | 0 : value | 0;\n if (newV.v < 0) newV.v = 0;\n else if (newV.v > 100) newV.v = 100;\n if (v !== newV.v) {\n ({v} = newV);\n changed = true;\n }\n break;\n }\n });\n if (changed) {\n if (rgb) {\n r = r || 0;\n g = g || 0;\n b = b || 0;\n const ret = ColorMethods.rgbToHsv({r, g, b});\n ({h, s, v} = ret);\n } else if (hsv) {\n h = h || 0;\n s = !isNullish(s) ? s : 100;\n v = !isNullish(v) ? v : 100;\n const ret = ColorMethods.hsvToRgb({h, s, v});\n ({r, g, b} = ret);\n }\n a = !isNullish(a) ? a : 255;\n fireChangeEvents.call(that, context || that);\n }\n break;\n }\n }\n return undefined;\n }\n /**\n * @param {GenericCallback} callback\n * @returns {void}\n */\n function bind (callback) { // eslint-disable-line promise/prefer-await-to-callbacks\n if (typeof callback === 'function') changeEvents.push(callback);\n }\n /**\n * @param {GenericCallback} callback\n * @returns {void}\n */\n function unbind (callback) { // eslint-disable-line promise/prefer-await-to-callbacks\n if (typeof callback !== 'function') return;\n let i;\n while ((i = changeEvents.includes(callback))) {\n changeEvents.splice(i, 1);\n }\n }\n /**\n * Unset `changeEvents`\n * @returns {void}\n */\n function destroy () {\n changeEvents = null;\n }\n let r, g, b, a, h, s, v, changeEvents = [];\n\n $.extend(true, that, {\n // public properties and methods\n val,\n bind,\n unbind,\n destroy\n });\n if (init) {\n if (!isNullish(init.ahex)) {\n val('ahex', init);\n } else if (!isNullish(init.hex)) {\n val(\n (!isNullish(init.a) ? 'a' : '') + 'hex',\n !isNullish(init.a)\n ? {ahex: init.hex + ColorMethods.intToHex(init.a)}\n : init\n );\n } else if (!isNullish(init.r) && !isNullish(init.g) && !isNullish(init.b)) {\n val('rgb' + (!isNullish(init.a) ? 'a' : ''), init);\n } else if (!isNullish(init.h) && !isNullish(init.s) && !isNullish(init.v)) {\n val('hsv' + (!isNullish(init.a) ? 'a' : ''), init);\n }\n }\n },\n /**\n * Color conversion methods - make public to give use to external scripts.\n * @namespace\n */\n ColorMethods: {\n /**\n * @typedef {PlainObject} module:jPicker.RGBA\n * @property {Integer} r\n * @property {Integer} g\n * @property {Integer} b\n * @property {Integer} a\n */\n /**\n * @typedef {PlainObject} module:jPicker.RGB\n * @property {Integer} r\n * @property {Integer} g\n * @property {Integer} b\n */\n /**\n * @param {string} hex\n * @returns {module:jPicker.RGBA}\n */\n hexToRgba (hex) {\n if (hex === '' || hex === 'none') return {r: null, g: null, b: null, a: null};\n hex = this.validateHex(hex);\n let r = '00', g = '00', b = '00', a = '255';\n if (hex.length === 6) hex += 'ff';\n if (hex.length > 6) {\n r = hex.substring(0, 2);\n g = hex.substring(2, 4);\n b = hex.substring(4, 6);\n a = hex.substring(6, hex.length);\n } else {\n if (hex.length > 4) {\n r = hex.substring(4, hex.length);\n hex = hex.substring(0, 4);\n }\n if (hex.length > 2) {\n g = hex.substring(2, hex.length);\n hex = hex.substring(0, 2);\n }\n if (hex.length > 0) b = hex.substring(0, hex.length);\n }\n return {\n r: this.hexToInt(r), g: this.hexToInt(g), b: this.hexToInt(b), a: this.hexToInt(a)\n };\n },\n /**\n * @param {string} hex\n * @returns {string}\n */\n validateHex (hex) {\n // if (typeof hex === 'object') return '';\n hex = hex.toLowerCase().replace(/[^a-f\\d]/g, '');\n if (hex.length > 8) hex = hex.substring(0, 8);\n return hex;\n },\n /**\n * @param {module:jPicker.RGBA} rgba\n * @returns {string}\n */\n rgbaToHex (rgba) {\n return this.intToHex(rgba.r) + this.intToHex(rgba.g) + this.intToHex(rgba.b) + this.intToHex(rgba.a);\n },\n /**\n * @param {Integer} dec\n * @returns {string}\n */\n intToHex (dec) {\n let result = (dec | 0).toString(16);\n if (result.length === 1) result = ('0' + result);\n return result.toLowerCase();\n },\n /**\n * @param {string} hex\n * @returns {Integer}\n */\n hexToInt (hex) {\n return parseInt(hex, 16);\n },\n /**\n * @typedef {PlainObject} module:jPicker.HSV\n * @property {Integer} h\n * @property {Integer} s\n * @property {Integer} v\n */\n /**\n * @param {module:jPicker.RGB} rgb\n * @returns {module:jPicker.HSV}\n */\n rgbToHsv (rgb) {\n const r = rgb.r / 255, g = rgb.g / 255, b = rgb.b / 255, hsv = {h: 0, s: 0, v: 0};\n let min = 0, max = 0;\n if (r >= g && r >= b) {\n max = r;\n min = g > b ? b : g;\n } else if (g >= b && g >= r) {\n max = g;\n min = r > b ? b : r;\n } else {\n max = b;\n min = g > r ? r : g;\n }\n hsv.v = max;\n hsv.s = max ? (max - min) / max : 0;\n let delta;\n if (!hsv.s) hsv.h = 0;\n else {\n delta = max - min;\n if (r === max) hsv.h = (g - b) / delta;\n else if (g === max) hsv.h = 2 + (b - r) / delta;\n else hsv.h = 4 + (r - g) / delta;\n hsv.h = parseInt(hsv.h * 60);\n if (hsv.h < 0) hsv.h += 360;\n }\n hsv.s = (hsv.s * 100) | 0;\n hsv.v = (hsv.v * 100) | 0;\n return hsv;\n },\n /**\n * @param {module:jPicker.HSV} hsv\n * @returns {module:jPicker.RGB}\n */\n hsvToRgb (hsv) {\n const rgb = {r: 0, g: 0, b: 0, a: 100};\n let {h, s, v} = hsv;\n if (s === 0) {\n if (v === 0) rgb.r = rgb.g = rgb.b = 0;\n else rgb.r = rgb.g = rgb.b = (v * 255 / 100) | 0;\n } else {\n if (h === 360) h = 0;\n h /= 60;\n s /= 100;\n v /= 100;\n const i = h | 0,\n f = h - i,\n p = v * (1 - s),\n q = v * (1 - (s * f)),\n t = v * (1 - (s * (1 - f)));\n switch (i) {\n case 0:\n rgb.r = v;\n rgb.g = t;\n rgb.b = p;\n break;\n case 1:\n rgb.r = q;\n rgb.g = v;\n rgb.b = p;\n break;\n case 2:\n rgb.r = p;\n rgb.g = v;\n rgb.b = t;\n break;\n case 3:\n rgb.r = p;\n rgb.g = q;\n rgb.b = v;\n break;\n case 4:\n rgb.r = t;\n rgb.g = p;\n rgb.b = v;\n break;\n case 5:\n rgb.r = v;\n rgb.g = p;\n rgb.b = q;\n break;\n }\n rgb.r = (rgb.r * 255) | 0;\n rgb.g = (rgb.g * 255) | 0;\n rgb.b = (rgb.b * 255) | 0;\n }\n return rgb;\n }\n }\n };\n const {Color, List, ColorMethods} = $.jPicker; // local copies for YUI compressor\n /* eslint-disable jsdoc/require-returns */\n /**\n * @function external:jQuery.fn.jPicker\n * @see {@link external:jQuery.fn.$.fn.jPicker}\n */\n /* eslint-enable jsdoc/require-returns */\n\n /**\n * Will be bound to active {@link jQuery.jPicker.Color}.\n * @callback module:jPicker.LiveCallback\n * @param {external:jQuery} ui\n * @param {Element} context\n * @returns {void}\n */\n /**\n * @callback module:jPicker.CommitCallback\n * @param {external:jQuery.jPicker.Color} activeColor\n * @param {external:jQuery} okButton\n * @returns {void} Return value not used.\n */\n /**\n * @callback module:jPicker.CancelCallback\n * @param {external:jQuery.jPicker.Color} activeColor\n * @param {external:jQuery} cancelButton\n * @returns {void} Return value not used.\n */\n /**\n * While it would seem this should specify the name `jPicker` for JSDoc, that doesn't\n * get us treated as a function as well as a namespace (even with `@function name`),\n * so we use an approach to add a redundant `$.fn.` in the name.\n * @namespace\n * @memberof external:jQuery.fn\n * @param {external:jQuery.fn.jPickerOptions} options\n * @param {module:jPicker.CommitCallback} [commitCallback]\n * @param {module:jPicker.LiveCallback} [liveCallback]\n * @param {module:jPicker.CancelCallback} [cancelCallback]\n * @returns {external:jQuery}\n */\n $.fn.jPicker = function (options, commitCallback, liveCallback, cancelCallback) {\n return this.each(function () {\n const that = this,\n settings = $.extend(true, {}, $.fn.jPicker.defaults, options); // local copies for YUI compressor\n if ($(that).get(0).nodeName.toLowerCase() === 'input') { // Add color picker icon if binding to an input element and bind the events to the input\n $.extend(true, settings, {\n window: {\n bindToInput: true,\n expandable: true,\n input: $(that)\n }\n });\n if ($(that).val() === '') {\n settings.color.active = new Color({hex: null});\n settings.color.current = new Color({hex: null});\n } else if (ColorMethods.validateHex($(that).val())) {\n settings.color.active = new Color({hex: $(that).val(), a: settings.color.active.val('a')});\n settings.color.current = new Color({hex: $(that).val(), a: settings.color.active.val('a')});\n }\n }\n if (settings.window.expandable) {\n $(that).after('<span class=\"jPicker\"><span class=\"Icon\"><span class=\"Color\"> </span><span class=\"Alpha\"> </span><span class=\"Image\" title=\"Click To Open Color Picker\"> </span><span class=\"Container\"> </span></span></span>');\n } else {\n settings.window.liveUpdate = false; // Basic control binding for inline use - You will need to override the liveCallback or commitCallback function to retrieve results\n }\n const isLessThanIE7 = parseFloat(navigator.appVersion.split('MSIE')[1]) < 7 && document.body.filters; // needed to run the AlphaImageLoader function for IE6\n // set color mode and update visuals for the new color mode\n /**\n *\n * @param {\"h\"|\"s\"|\"v\"|\"r\"|\"g\"|\"b\"|\"a\"} colorMode\n * @throws {Error} Invalid mode\n * @returns {void}\n */\n function setColorMode (colorMode) {\n const {active} = color, // local copies for YUI compressor\n // {clientPath} = images,\n hex = active.val('hex');\n let rgbMap, rgbBar;\n settings.color.mode = colorMode;\n switch (colorMode) {\n case 'h':\n setTimeout(function () {\n setBG.call(that, colorMapDiv, 'transparent');\n setImgLoc.call(that, colorMapL1, 0);\n setAlpha.call(that, colorMapL1, 100);\n setImgLoc.call(that, colorMapL2, 260);\n setAlpha.call(that, colorMapL2, 100);\n setBG.call(that, colorBarDiv, 'transparent');\n setImgLoc.call(that, colorBarL1, 0);\n setAlpha.call(that, colorBarL1, 100);\n setImgLoc.call(that, colorBarL2, 260);\n setAlpha.call(that, colorBarL2, 100);\n setImgLoc.call(that, colorBarL3, 260);\n setAlpha.call(that, colorBarL3, 100);\n setImgLoc.call(that, colorBarL4, 260);\n setAlpha.call(that, colorBarL4, 100);\n setImgLoc.call(that, colorBarL6, 260);\n setAlpha.call(that, colorBarL6, 100);\n }, 0);\n colorMap.range('all', {minX: 0, maxX: 100, minY: 0, maxY: 100});\n colorBar.range('rangeY', {minY: 0, maxY: 360});\n if (isNullish(active.val('ahex'))) break;\n colorMap.val('xy', {x: active.val('s'), y: 100 - active.val('v')}, colorMap);\n colorBar.val('y', 360 - active.val('h'), colorBar);\n break;\n case 's':\n setTimeout(function () {\n setBG.call(that, colorMapDiv, 'transparent');\n setImgLoc.call(that, colorMapL1, -260);\n setImgLoc.call(that, colorMapL2, -520);\n setImgLoc.call(that, colorBarL1, -260);\n setImgLoc.call(that, colorBarL2, -520);\n setImgLoc.call(that, colorBarL6, 260);\n setAlpha.call(that, colorBarL6, 100);\n }, 0);\n colorMap.range('all', {minX: 0, maxX: 360, minY: 0, maxY: 100});\n colorBar.range('rangeY', {minY: 0, maxY: 100});\n if (isNullish(active.val('ahex'))) break;\n colorMap.val('xy', {x: active.val('h'), y: 100 - active.val('v')}, colorMap);\n colorBar.val('y', 100 - active.val('s'), colorBar);\n break;\n case 'v':\n setTimeout(function () {\n setBG.call(that, colorMapDiv, '000000');\n setImgLoc.call(that, colorMapL1, -780);\n setImgLoc.call(that, colorMapL2, 260);\n setBG.call(that, colorBarDiv, hex);\n setImgLoc.call(that, colorBarL1, -520);\n setImgLoc.call(that, colorBarL2, 260);\n setAlpha.call(that, colorBarL2, 100);\n setImgLoc.call(that, colorBarL6, 260);\n setAlpha.call(that, colorBarL6, 100);\n }, 0);\n colorMap.range('all', {minX: 0, maxX: 360, minY: 0, maxY: 100});\n colorBar.range('rangeY', {minY: 0, maxY: 100});\n if (isNullish(active.val('ahex'))) break;\n colorMap.val('xy', {x: active.val('h'), y: 100 - active.val('s')}, colorMap);\n colorBar.val('y', 100 - active.val('v'), colorBar);\n break;\n case 'r':\n rgbMap = -1040;\n rgbBar = -780;\n colorMap.range('all', {minX: 0, maxX: 255, minY: 0, maxY: 255});\n colorBar.range('rangeY', {minY: 0, maxY: 255});\n if (isNullish(active.val('ahex'))) break;\n colorMap.val('xy', {x: active.val('b'), y: 255 - active.val('g')}, colorMap);\n colorBar.val('y', 255 - active.val('r'), colorBar);\n break;\n case 'g':\n rgbMap = -1560;\n rgbBar = -1820;\n colorMap.range('all', {minX: 0, maxX: 255, minY: 0, maxY: 255});\n colorBar.range('rangeY', {minY: 0, maxY: 255});\n if (isNullish(active.val('ahex'))) break;\n colorMap.val('xy', {x: active.val('b'), y: 255 - active.val('r')}, colorMap);\n colorBar.val('y', 255 - active.val('g'), colorBar);\n break;\n case 'b':\n rgbMap = -2080;\n rgbBar = -2860;\n colorMap.range('all', {minX: 0, maxX: 255, minY: 0, maxY: 255});\n colorBar.range('rangeY', {minY: 0, maxY: 255});\n if (isNullish(active.val('ahex'))) break;\n colorMap.val('xy', {x: active.val('r'), y: 255 - active.val('g')}, colorMap);\n colorBar.val('y', 255 - active.val('b'), colorBar);\n break;\n case 'a':\n setTimeout(function () {\n setBG.call(that, colorMapDiv, 'transparent');\n setImgLoc.call(that, colorMapL1, -260);\n setImgLoc.call(that, colorMapL2, -520);\n setImgLoc.call(that, colorBarL1, 260);\n setImgLoc.call(that, colorBarL2, 260);\n setAlpha.call(that, colorBarL2, 100);\n setImgLoc.call(that, colorBarL6, 0);\n setAlpha.call(that, colorBarL6, 100);\n }, 0);\n colorMap.range('all', {minX: 0, maxX: 360, minY: 0, maxY: 100});\n colorBar.range('rangeY', {minY: 0, maxY: 255});\n if (isNullish(active.val('ahex'))) break;\n colorMap.val('xy', {x: active.val('h'), y: 100 - active.val('v')}, colorMap);\n colorBar.val('y', 255 - active.val('a'), colorBar);\n break;\n default:\n throw new Error('Invalid Mode');\n }\n switch (colorMode) {\n case 'h':\n break;\n case 's':\n case 'v':\n case 'a':\n setTimeout(function () {\n setAlpha.call(that, colorMapL1, 100);\n setAlpha.call(that, colorBarL1, 100);\n setImgLoc.call(that, colorBarL3, 260);\n setAlpha.call(that, colorBarL3, 100);\n setImgLoc.call(that, colorBarL4, 260);\n setAlpha.call(that, colorBarL4, 100);\n }, 0);\n break;\n case 'r':\n case 'g':\n case 'b':\n setTimeout(function () {\n setBG.call(that, colorMapDiv, 'transparent');\n setBG.call(that, colorBarDiv, 'transparent');\n setAlpha.call(that, colorBarL1, 100);\n setAlpha.call(that, colorMapL1, 100);\n setImgLoc.call(that, colorMapL1, rgbMap);\n setImgLoc.call(that, colorMapL2, rgbMap - 260);\n setImgLoc.call(that, colorBarL1, rgbBar - 780);\n setImgLoc.call(that, colorBarL2, rgbBar - 520);\n setImgLoc.call(that, colorBarL3, rgbBar);\n setImgLoc.call(that, colorBarL4, rgbBar - 260);\n setImgLoc.call(that, colorBarL6, 260);\n setAlpha.call(that, colorBarL6, 100);\n }, 0);\n break;\n }\n if (isNullish(active.val('ahex'))) return;\n activeColorChanged.call(that, active);\n }\n /**\n * Update color when user changes text values.\n * @param {external:jQuery} ui\n * @param {?module:jPicker.Slider} context\n * @returns {void}\n */\n function activeColorChanged (ui, context) {\n if (isNullish(context) || (context !== colorBar && context !== colorMap)) positionMapAndBarArrows.call(that, ui, context);\n setTimeout(function () {\n updatePreview.call(that, ui);\n updateMapVisuals.call(that, ui);\n updateBarVisuals.call(that, ui);\n }, 0);\n }\n\n /**\n * User has dragged the ColorMap pointer.\n * @param {external:jQuery} ui\n * @param {?module:jPicker.Slider} context\n * @returns {void}\n */\n function mapValueChanged (ui, context) {\n const {active} = color;\n if (context !== colorMap && isNullish(active.val())) return;\n const xy = ui.val('all');\n switch (settings.color.mode) {\n case 'h':\n active.val('sv', {s: xy.x, v: 100 - xy.y}, context);\n break;\n case 's':\n case 'a':\n active.val('hv', {h: xy.x, v: 100 - xy.y}, context);\n break;\n case 'v':\n active.val('hs', {h: xy.x, s: 100 - xy.y}, context);\n break;\n case 'r':\n active.val('gb', {g: 255 - xy.y, b: xy.x}, context);\n break;\n case 'g':\n active.val('rb', {r: 255 - xy.y, b: xy.x}, context);\n break;\n case 'b':\n active.val('rg', {r: xy.x, g: 255 - xy.y}, context);\n break;\n }\n }\n\n /**\n * User has dragged the ColorBar slider.\n * @param {external:jQuery} ui\n * @param {?module:jPicker.Slider} context\n * @returns {void}\n */\n function colorBarValueChanged (ui, context) {\n const {active} = color;\n if (context !== colorBar && isNullish(active.val())) return;\n switch (settings.color.mode) {\n case 'h':\n active.val('h', {h: 360 - ui.val('y')}, context);\n break;\n case 's':\n active.val('s', {s: 100 - ui.val('y')}, context);\n break;\n case 'v':\n active.val('v', {v: 100 - ui.val('y')}, context);\n break;\n case 'r':\n active.val('r', {r: 255 - ui.val('y')}, context);\n break;\n case 'g':\n active.val('g', {g: 255 - ui.val('y')}, context);\n break;\n case 'b':\n active.val('b', {b: 255 - ui.val('y')}, context);\n break;\n case 'a':\n active.val('a', 255 - ui.val('y'), context);\n break;\n }\n }\n\n /**\n * Position map and bar arrows to match current color.\n * @param {external:jQuery} ui\n * @param {?module:jPicker.Slider} context\n * @returns {void}\n */\n function positionMapAndBarArrows (ui, context) {\n if (context !== colorMap) {\n switch (settings.color.mode) {\n case 'h': {\n const sv = ui.val('sv');\n colorMap.val('xy', {x: !isNullish(sv) ? sv.s : 100, y: 100 - (!isNullish(sv) ? sv.v : 100)}, context);\n break;\n } case 's':\n // Fall through\n case 'a': {\n const hv = ui.val('hv');\n colorMap.val('xy', {x: (hv && hv.h) || 0, y: 100 - (!isNullish(hv) ? hv.v : 100)}, context);\n break;\n } case 'v': {\n const hs = ui.val('hs');\n colorMap.val('xy', {x: (hs && hs.h) || 0, y: 100 - (!isNullish(hs) ? hs.s : 100)}, context);\n break;\n } case 'r': {\n const bg = ui.val('bg');\n colorMap.val('xy', {x: (bg && bg.b) || 0, y: 255 - ((bg && bg.g) || 0)}, context);\n break;\n } case 'g': {\n const br = ui.val('br');\n colorMap.val('xy', {x: (br && br.b) || 0, y: 255 - ((br && br.r) || 0)}, context);\n break;\n } case 'b': {\n const rg = ui.val('rg');\n colorMap.val('xy', {x: (rg && rg.r) || 0, y: 255 - ((rg && rg.g) || 0)}, context);\n break;\n }\n }\n }\n if (context !== colorBar) {\n switch (settings.color.mode) {\n case 'h':\n colorBar.val('y', 360 - (ui.val('h') || 0), context);\n break;\n case 's': {\n const s = ui.val('s');\n colorBar.val('y', 100 - (!isNullish(s) ? s : 100), context);\n break;\n } case 'v': {\n const v = ui.val('v');\n colorBar.val('y', 100 - (!isNullish(v) ? v : 100), context);\n break;\n } case 'r':\n colorBar.val('y', 255 - (ui.val('r') || 0), context);\n break;\n case 'g':\n colorBar.val('y', 255 - (ui.val('g') || 0), context);\n break;\n case 'b':\n colorBar.val('y', 255 - (ui.val('b') || 0), context);\n break;\n case 'a': {\n const a = ui.val('a');\n colorBar.val('y', 255 - (!isNullish(a) ? a : 255), context);\n break;\n }\n }\n }\n }\n /**\n * @param {external:jQuery} ui\n * @returns {void}\n */\n function updatePreview (ui) {\n try {\n const all = ui.val('all');\n activePreview.css({backgroundColor: (all && '#' + all.hex) || 'transparent'});\n setAlpha.call(that, activePreview, (all && toFixedNumeric((all.a * 100) / 255, 4)) || 0);\n } catch (e) { }\n }\n /**\n * @param {external:jQuery} ui\n * @returns {void}\n */\n function updateMapVisuals (ui) {\n switch (settings.color.mode) {\n case 'h':\n setBG.call(that, colorMapDiv, new Color({h: ui.val('h') || 0, s: 100, v: 100}).val('hex'));\n break;\n case 's':\n case 'a': {\n const s = ui.val('s');\n setAlpha.call(that, colorMapL2, 100 - (!isNullish(s) ? s : 100));\n break;\n } case 'v': {\n const v = ui.val('v');\n setAlpha.call(that, colorMapL1, !isNullish(v) ? v : 100);\n break;\n } case 'r':\n setAlpha.call(that, colorMapL2, toFixedNumeric((ui.val('r') || 0) / 255 * 100, 4));\n break;\n case 'g':\n setAlpha.call(that, colorMapL2, toFixedNumeric((ui.val('g') || 0) / 255 * 100, 4));\n break;\n case 'b':\n setAlpha.call(that, colorMapL2, toFixedNumeric((ui.val('b') || 0) / 255 * 100));\n break;\n }\n const a = ui.val('a');\n setAlpha.call(that, colorMapL3, toFixedNumeric(((255 - (a || 0)) * 100) / 255, 4));\n }\n /**\n * @param {external:jQuery} ui\n * @returns {void}\n */\n function updateBarVisuals (ui) {\n switch (settings.color.mode) {\n case 'h': {\n const a = ui.val('a');\n setAlpha.call(that, colorBarL5, toFixedNumeric(((255 - (a || 0)) * 100) / 255, 4));\n break;\n } case 's': {\n const hva = ui.val('hva'),\n saturatedColor = new Color({h: (hva && hva.h) || 0, s: 100, v: !isNullish(hva) ? hva.v : 100});\n setBG.call(that, colorBarDiv, saturatedColor.val('hex'));\n setAlpha.call(that, colorBarL2, 100 - (!isNullish(hva) ? hva.v : 100));\n setAlpha.call(that, colorBarL5, toFixedNumeric(((255 - ((hva && hva.a) || 0)) * 100) / 255, 4));\n break;\n } case 'v': {\n const hsa = ui.val('hsa'),\n valueColor = new Color({h: (hsa && hsa.h) || 0, s: !isNullish(hsa) ? hsa.s : 100, v: 100});\n setBG.call(that, colorBarDiv, valueColor.val('hex'));\n setAlpha.call(that, colorBarL5, toFixedNumeric(((255 - ((hsa && hsa.a) || 0)) * 100) / 255, 4));\n break;\n } case 'r':\n case 'g':\n case 'b': {\n const rgba = ui.val('rgba');\n let hValue = 0, vValue = 0;\n if (settings.color.mode === 'r') {\n hValue = (rgba && rgba.b) || 0;\n vValue = (rgba && rgba.g) || 0;\n } else if (settings.color.mode === 'g') {\n hValue = (rgba && rgba.b) || 0;\n vValue = (rgba && rgba.r) || 0;\n } else if (settings.color.mode === 'b') {\n hValue = (rgba && rgba.r) || 0;\n vValue = (rgba && rgba.g) || 0;\n }\n const middle = vValue > hValue ? hValue : vValue;\n setAlpha.call(that, colorBarL2, hValue > vValue ? toFixedNumeric(((hValue - vValue) / (255 - vValue)) * 100, 4) : 0);\n setAlpha.call(that, colorBarL3, vValue > hValue ? toFixedNumeric(((vValue - hValue) / (255 - hValue)) * 100, 4) : 0);\n setAlpha.call(that, colorBarL4, toFixedNumeric((middle / 255) * 100, 4));\n setAlpha.call(that, colorBarL5, toFixedNumeric(((255 - ((rgba && rgba.a) || 0)) * 100) / 255, 4));\n break;\n } case 'a': {\n const a = ui.val('a');\n setBG.call(that, colorBarDiv, ui.val('hex') || '000000');\n setAlpha.call(that, colorBarL5, !isNullish(a) ? 0 : 100);\n setAlpha.call(that, colorBarL6, !isNullish(a) ? 100 : 0);\n break;\n }\n }\n }\n /**\n * @param {external:jQuery} el\n * @param {string} [c=\"transparent\"]\n * @returns {void}\n */\n function setBG (el, c) {\n el.css({backgroundColor: (c && c.length === 6 && '#' + c) || 'transparent'});\n }\n\n /**\n * @param {external:jQuery} img\n * @param {string} src The image source\n * @returns {void}\n */\n function setImg (img, src) {\n if (isLessThanIE7 && (src.includes('AlphaBar.png') || src.includes('Bars.png') || src.includes('Maps.png'))) {\n img.attr('pngSrc', src);\n img.css({backgroundImage: 'none', filter: 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\\'' + src + '\\', sizingMethod=\\'scale\\')'});\n } else img.css({backgroundImage: 'url(\\'' + src + '\\')'});\n }\n /**\n * @param {external:jQuery} img\n * @param {Float} y\n * @returns {void}\n */\n function setImgLoc (img, y) {\n img.css({top: y + 'px'});\n }\n /**\n * @param {external:jQuery} obj\n * @param {Float} alpha\n * @returns {void}\n */\n function setAlpha (obj, alpha) {\n obj.css({visibility: alpha > 0 ? 'visible' : 'hidden'});\n if (alpha > 0 && alpha < 100) {\n if (isLessThanIE7) {\n const src = obj.attr('pngSrc');\n if (!isNullish(src) && (\n src.includes('AlphaBar.png') || src.includes('Bars.png') || src.includes('Maps.png')\n )) {\n obj.css({\n filter: 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\\'' + src +\n '\\', sizingMethod=\\'scale\\') progid:DXImageTransform.Microsoft.Alpha(opacity=' + alpha + ')'\n });\n } else obj.css({opacity: toFixedNumeric(alpha / 100, 4)});\n } else obj.css({opacity: toFixedNumeric(alpha / 100, 4)});\n } else if (alpha === 0 || alpha === 100) {\n if (isLessThanIE7) {\n const src = obj.attr('pngSrc');\n if (!isNullish(src) && (\n src.includes('AlphaBar.png') || src.includes('Bars.png') || src.includes('Maps.png')\n )) {\n obj.css({\n filter: 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\\'' + src +\n '\\', sizingMethod=\\'scale\\')'\n });\n } else obj.css({opacity: ''});\n } else obj.css({opacity: ''});\n }\n }\n\n /**\n * Revert color to original color when opened.\n * @returns {void}\n */\n function revertColor () {\n color.active.val('ahex', color.current.val('ahex'));\n }\n /**\n * Commit the color changes.\n * @returns {void}\n */\n function commitColor () {\n color.current.val('ahex', color.active.val('ahex'));\n }\n /**\n * @param {Event} e\n * @returns {void}\n */\n function radioClicked (e) {\n $(this).parents('tbody:first').find('input:radio[value!=\"' + e.target.value + '\"]').removeAttr('checked');\n setColorMode.call(that, e.target.value);\n }\n /**\n *\n * @returns {void}\n */\n function currentClicked () {\n revertColor.call(that);\n }\n /**\n *\n * @returns {void}\n */\n function cancelClicked () {\n revertColor.call(that);\n settings.window.expandable && hide.call(that);\n typeof cancelCallback === 'function' && cancelCallback.call(that, color.active, cancelButton);\n }\n /**\n *\n * @returns {void}\n */\n function okClicked () {\n commitColor.call(that);\n settings.window.expandable && hide.call(that);\n typeof commitCallback === 'function' && commitCallback.call(that, color.active, okButton);\n }\n /**\n *\n * @returns {void}\n */\n function iconImageClicked () {\n show.call(that);\n }\n /**\n * @param {external:jQuery} ui\n * @returns {void}\n */\n function currentColorChanged (ui) {\n const hex = ui.val('hex');\n currentPreview.css({backgroundColor: (hex && '#' + hex) || 'transparent'});\n setAlpha.call(that, currentPreview, toFixedNumeric(((ui.val('a') || 0) * 100) / 255, 4));\n }\n /**\n * @param {external:jQuery} ui\n * @returns {void}\n */\n function expandableColorChanged (ui) {\n const hex = ui.val('hex');\n const va = ui.val('va');\n iconColor.css({backgroundColor: (hex && '#' + hex) || 'transparent'});\n setAlpha.call(that, iconAlpha, toFixedNumeric(((255 - ((va && va.a) || 0)) * 100) / 255, 4));\n if (settings.window.bindToInput && settings.window.updateInputColor) {\n settings.window.input.css({\n backgroundColor: (hex && '#' + hex) || 'transparent',\n color: isNullish(va) || va.v > 75 ? '#000000' : '#ffffff'\n });\n }\n }\n /**\n * @param {Event} e\n * @returns {void}\n */\n function moveBarMouseDown (e) {\n // const {element} = settings.window, // local copies for YUI compressor\n // {page} = settings.window;\n elementStartX = parseInt(container.css('left'));\n elementStartY = parseInt(container.css('top'));\n pageStartX = e.pageX;\n pageStartY = e.pageY;\n // bind events to document to move window - we will unbind these on mouseup\n $(document).bind('mousemove', documentMouseMove).bind('mouseup', documentMouseUp);\n e.preventDefault(); // prevent attempted dragging of the column\n }\n /**\n * @param {Event} e\n * @returns {false}\n */\n function documentMouseMove (e) {\n container.css({\n left: elementStartX - (pageStartX - e.pageX) + 'px',\n top: elementStartY - (pageStartY - e.pageY) + 'px'\n });\n if (settings.window.expandable && !$.support.boxModel) {\n container.prev().css({\n left: container.css('left'),\n top: container.css('top')\n });\n }\n e.stopPropagation();\n e.preventDefault();\n return false;\n }\n /**\n * @param {Event} e\n * @returns {false}\n */\n function documentMouseUp (e) {\n $(document).unbind('mousemove', documentMouseMove).unbind('mouseup', documentMouseUp);\n e.stopPropagation();\n e.preventDefault();\n return false;\n }\n /**\n * @param {Event} e\n * @returns {false}\n */\n function quickPickClicked (e) {\n e.preventDefault();\n e.stopPropagation();\n color.active.val('ahex', $(this).attr('title') || null, e.target);\n return false;\n }\n /**\n *\n * @returns {void}\n */\n function show () {\n color.current.val('ahex', color.active.val('ahex'));\n /**\n *\n * @returns {void}\n */\n function attachIFrame () {\n if (!settings.window.expandable || $.support.boxModel) return;\n const table = container.find('table:first');\n container.before('<iframe/>');\n container.prev().css({\n width: table.width(),\n height: container.height(),\n opacity: 0,\n position: 'absolute',\n left: container.css('left'),\n top: container.css('top')\n });\n }\n if (settings.window.expandable) {\n $(document.body).children('div.jPicker.Container').css({zIndex: 10});\n container.css({zIndex: 20});\n }\n switch (settings.window.effects.type) {\n case 'fade':\n container.fadeIn(settings.window.effects.speed.show, attachIFrame);\n break;\n case 'slide':\n container.slideDown(settings.window.effects.speed.show, attachIFrame);\n break;\n case 'show':\n default:\n container.show(settings.window.effects.speed.show, attachIFrame);\n break;\n }\n }\n /**\n *\n * @returns {void}\n */\n function hide () {\n /**\n *\n * @returns {void}\n */\n function removeIFrame () {\n if (settings.window.expandable) container.css({zIndex: 10});\n if (!settings.window.expandable || $.support.boxModel) return;\n container.prev().remove();\n }\n switch (settings.window.effects.type) {\n case 'fade':\n container.fadeOut(settings.window.effects.speed.hide, removeIFrame);\n break;\n case 'slide':\n container.slideUp(settings.window.effects.speed.hide, removeIFrame);\n break;\n case 'show':\n default:\n container.hide(settings.window.effects.speed.hide, removeIFrame);\n break;\n }\n }\n /**\n *\n * @returns {void}\n */\n function initialize () {\n const win = settings.window,\n popup = win.expandable ? $(that).next().find('.Container:first') : null;\n container = win.expandable ? $('<div/>') : $(that);\n container.addClass('jPicker Container');\n if (win.expandable) container.hide();\n container.get(0).onselectstart = function (e) {\n if (e.target.nodeName.toLowerCase() !== 'input') return false;\n return true;\n };\n // inject html source code - we are using a single table for this control - I know tables are considered bad, but it takes care of equal height columns and\n // this control really is tabular data, so I believe it is the right move\n const all = color.active.val('all');\n if (win.alphaPrecision < 0) win.alphaPrecision = 0;\n else if (win.alphaPrecision > 2) win.alphaPrecision = 2;\n const controlHtml = `<table class=\"jPicker\" cellpadding=\"0\" cellspacing=\"0\">\n <tbody>\n ${win.expandable ? '<tr><td class=\"Move\" colspan=\"5\"> </td></tr>' : ''}\n <tr>\n <td rowspan=\"9\"><h2 class=\"Title\">${win.title || localization.text.title}</h2><div class=\"Map\"><span class=\"Map1\"> </span><span class=\"Map2\"> </span><span class=\"Map3\"> </span><img src=\"${images.clientPath + images.colorMap.arrow.file}\" class=\"Arrow\"/></div></td>\n <td rowspan=\"9\"><div class=\"Bar\"><span class=\"Map1\"> </span><span class=\"Map2\"> </span><span class=\"Map3\"> </span><span class=\"Map4\"> </span><span class=\"Map5\"> </span><span class=\"Map6\"> </span><img src=\"${images.clientPath + images.colorBar.arrow.file}\" class=\"Arrow\"/></div></td>\n <td colspan=\"2\" class=\"Preview\">${localization.text.newColor}<div><span class=\"Active\" title=\"${localization.tooltips.colors.newColor}\"> </span><span class=\"Current\" title=\"${localization.tooltips.colors.currentColor}\"> </span></div>${localization.text.currentColor}</td>\n <td rowspan=\"9\" class=\"Button\"><input type=\"button\" class=\"Ok\" value=\"${localization.text.ok}\" title=\"${localization.tooltips.buttons.ok}\"/><input type=\"button\" class=\"Cancel\" value=\"${localization.text.cancel}\" title=\"${localization.tooltips.buttons.cancel}\"/><hr/><div class=\"Grid\"> </div></td>\n </tr>\n <tr class=\"Hue\">\n <td class=\"Radio\"><label title=\"${localization.tooltips.hue.radio}\"><input type=\"radio\" value=\"h\"${settings.color.mode === 'h' ? ' checked=\"checked\"' : ''}/>H:</label></td>\n <td class=\"Text\"><input type=\"text\" maxlength=\"3\" value=\"${!isNullish(all) ? all.h : ''}\" title=\"${localization.tooltips.hue.textbox}\"/> °</td>\n </tr>\n <tr class=\"Saturation\">\n <td class=\"Radio\"><label title=\"${localization.tooltips.saturation.radio}\"><input type=\"radio\" value=\"s\"${settings.color.mode === 's' ? ' checked=\"checked\"' : ''}/>S:</label></td>\n <td class=\"Text\"><input type=\"text\" maxlength=\"3\" value=\"${!isNullish(all) ? all.s : ''}\" title=\"${localization.tooltips.saturation.textbox}\"/> %</td>\n </tr>\n <tr class=\"Value\">\n <td class=\"Radio\"><label title=\"${localization.tooltips.value.radio}\"><input type=\"radio\" value=\"v\"${settings.color.mode === 'v' ? ' checked=\"checked\"' : ''}/>V:</label><br/><br/></td>\n <td class=\"Text\"><input type=\"text\" maxlength=\"3\" value=\"${!isNullish(all) ? all.v : ''}\" title=\"${localization.tooltips.value.textbox}\"/> %<br/><br/></td>\n </tr>\n <tr class=\"Red\">\n <td class=\"Radio\"><label title=\"${localization.tooltips.red.radio}\"><input type=\"radio\" value=\"r\"${settings.color.mode === 'r' ? ' checked=\"checked\"' : ''}/>R:</label></td>\n <td class=\"Text\"><input type=\"text\" maxlength=\"3\" value=\"${!isNullish(all) ? all.r : ''}\" title=\"${localization.tooltips.red.textbox}\"/></td>\n </tr>\n <tr class=\"Green\">\n <td class=\"Radio\"><label title=\"${localization.tooltips.green.radio}\"><input type=\"radio\" value=\"g\"${settings.color.mode === 'g' ? ' checked=\"checked\"' : ''}/>G:</label></td>\n <td class=\"Text\"><input type=\"text\" maxlength=\"3\" value=\"${!isNullish(all) ? all.g : ''}\" title=\"${localization.tooltips.green.textbox}\"/></td>\n </tr>\n <tr class=\"Blue\">\n <td class=\"Radio\"><label title=\"${localization.tooltips.blue.radio}\"><input type=\"radio\" value=\"b\"${settings.color.mode === 'b' ? ' checked=\"checked\"' : ''}/>B:</label></td>\n <td class=\"Text\"><input type=\"text\" maxlength=\"3\" value=\"${!isNullish(all) ? all.b : ''}\" title=\"${localization.tooltips.blue.textbox}\"/></td>\n </tr>\n <tr class=\"Alpha\">\n <td class=\"Radio\">${win.alphaSupport ? `<label title=\"${localization.tooltips.alpha.radio}\"><input type=\"radio\" value=\"a\"${settings.color.mode === 'a' ? ' checked=\"checked\"' : ''}/>A:</label>` : ' '}</td>\n <td class=\"Text\">${win.alphaSupport ? `<input type=\"text\" maxlength=\"${3 + win.alphaPrecision}\" value=\"${!isNullish(all) ? toFixedNumeric((all.a * 100) / 255, win.alphaPrecision) : ''}\" title=\"${localization.tooltips.alpha.textbox}\"/> %` : ' '}</td>\n </tr>\n <tr class=\"Hex\">\n <td colspan=\"2\" class=\"Text\"><label title=\"${localization.tooltips.hex.textbox}\">#:<input type=\"text\" maxlength=\"6\" class=\"Hex\" value=\"${!isNullish(all) ? all.hex : ''}\"/></label>${win.alphaSupport ? `<input type=\"text\" maxlength=\"2\" class=\"AHex\" value=\"${!isNullish(all) ? all.ahex.substring(6) : ''}\" title=\"${localization.tooltips.hex.alpha}\"/></td>` : ' '}\n </tr>\n </tbody></table>`;\n if (win.expandable) {\n container.html(controlHtml);\n if (!$(document.body).children('div.jPicker.Container').length) {\n $(document.body).prepend(container);\n } else {\n $(document.body).children('div.jPicker.Container:last').after(container);\n }\n container.mousedown(\n function () {\n $(document.body).children('div.jPicker.Container').css({zIndex: 10});\n container.css({zIndex: 20});\n }\n );\n container.css( // positions must be set and display set to absolute before source code injection or IE will size the container to fit the window\n {\n left:\n win.position.x === 'left'\n ? (popup.offset().left - 530 - (win.position.y === 'center' ? 25 : 0)) + 'px'\n : win.position.x === 'center'\n ? (popup.offset().left - 260) + 'px'\n : win.position.x === 'right'\n ? (popup.offset().left - 10 + (win.position.y === 'center' ? 25 : 0)) + 'px'\n : win.position.x === 'screenCenter'\n ? (($(document).width() >> 1) - 260) + 'px'\n : (popup.offset().left + parseInt(win.position.x)) + 'px',\n position: 'absolute',\n top: win.position.y === 'top'\n ? (popup.offset().top - 312) + 'px'\n : win.position.y === 'center'\n ? (popup.offset().top - 156) + 'px'\n : win.position.y === 'bottom'\n ? (popup.offset().top + 25) + 'px'\n : (popup.offset().top + parseInt(win.position.y)) + 'px'\n }\n );\n } else {\n container = $(that);\n container.html(controlHtml);\n }\n // initialize the objects to the source code just injected\n const tbody = container.find('tbody:first');\n colorMapDiv = tbody.find('div.Map:first');\n colorBarDiv = tbody.find('div.Bar:first');\n const MapMaps = colorMapDiv.find('span');\n const BarMaps = colorBarDiv.find('span');\n colorMapL1 = MapMaps.filter('.Map1:first');\n colorMapL2 = MapMaps.filter('.Map2:first');\n colorMapL3 = MapMaps.filter('.Map3:first');\n colorBarL1 = BarMaps.filter('.Map1:first');\n colorBarL2 = BarMaps.filter('.Map2:first');\n colorBarL3 = BarMaps.filter('.Map3:first');\n colorBarL4 = BarMaps.filter('.Map4:first');\n colorBarL5 = BarMaps.filter('.Map5:first');\n colorBarL6 = BarMaps.filter('.Map6:first');\n // create color pickers and maps\n colorMap = new Slider(\n colorMapDiv,\n {\n map: {\n width: images.colorMap.width,\n height: images.colorMap.height\n },\n arrow: {\n image: images.clientPath + images.colorMap.arrow.file,\n width: images.colorMap.arrow.width,\n height: images.colorMap.arrow.height\n }\n }\n );\n colorMap.bind(mapValueChanged);\n colorBar = new Slider(\n colorBarDiv,\n {\n map: {\n width: images.colorBar.width,\n height: images.colorBar.height\n },\n arrow: {\n image: images.clientPath + images.colorBar.arrow.file,\n width: images.colorBar.arrow.width,\n height: images.colorBar.arrow.height\n }\n }\n );\n colorBar.bind(colorBarValueChanged);\n colorPicker = new ColorValuePicker(\n tbody,\n color.active,\n win.expandable && win.bindToInput ? win.input : null,\n win.alphaPrecision\n );\n const hex = !isNullish(all) ? all.hex : null,\n preview = tbody.find('.Preview'),\n button = tbody.find('.Button');\n activePreview = preview.find('.Active:first').css({backgroundColor: (hex && '#' + hex) || 'transparent'});\n currentPreview = preview.find('.Current:first').css({backgroundColor: (hex && '#' + hex) || 'transparent'}).bind('click', currentClicked);\n setAlpha.call(that, currentPreview, toFixedNumeric((color.current.val('a') * 100) / 255, 4));\n okButton = button.find('.Ok:first').bind('click', okClicked);\n cancelButton = button.find('.Cancel:first').bind('click', cancelClicked);\n grid = button.find('.Grid:first');\n setTimeout(function () {\n setImg.call(that, colorMapL1, images.clientPath + 'Maps.png');\n setImg.call(that, colorMapL2, images.clientPath + 'Maps.png');\n setImg.call(that, colorMapL3, images.clientPath + 'map-opacity.png');\n setImg.call(that, colorBarL1, images.clientPath + 'Bars.png');\n setImg.call(that, colorBarL2, images.clientPath + 'Bars.png');\n setImg.call(that, colorBarL3, images.clientPath + 'Bars.png');\n setImg.call(that, colorBarL4, images.clientPath + 'Bars.png');\n setImg.call(that, colorBarL5, images.clientPath + 'bar-opacity.png');\n setImg.call(that, colorBarL6, images.clientPath + 'AlphaBar.png');\n setImg.call(that, preview.find('div:first'), images.clientPath + 'preview-opacity.png');\n }, 0);\n tbody.find('td.Radio input').bind('click', radioClicked);\n // initialize quick list\n if (color.quickList && color.quickList.length > 0) {\n let html = '';\n for (let i = 0; i < color.quickList.length; i++) {\n /* if default colors are hex strings, change them to color objects */\n if ((typeof (color.quickList[i])).toString().toLowerCase() === 'string') {\n color.quickList[i] = new Color({hex: color.quickList[i]});\n }\n const alpha = color.quickList[i].val('a');\n let ahex = color.quickList[i].val('ahex');\n if (!win.alphaSupport && ahex) ahex = ahex.substring(0, 6) + 'ff';\n const quickHex = color.quickList[i].val('hex');\n if (!ahex) ahex = '00000000';\n html += '<span class=\"QuickColor\"' + (' title=\"#' + ahex + '\"') + ' style=\"background-color:' + ((quickHex && '#' + quickHex) || '') + ';' + (quickHex ? '' : 'background-image:url(' + images.clientPath + 'NoColor.png)') + (win.alphaSupport && alpha && alpha < 255 ? ';opacity:' + toFixedNumeric(alpha / 255, 4) + ';filter:Alpha(opacity=' + toFixedNumeric(alpha / 2.55, 4) + ')' : '') + '\"> </span>';\n }\n setImg.call(that, grid, images.clientPath + 'bar-opacity.png');\n grid.html(html);\n grid.find('.QuickColor').click(quickPickClicked);\n }\n setColorMode.call(that, settings.color.mode);\n color.active.bind(activeColorChanged);\n typeof liveCallback === 'function' && color.active.bind(liveCallback);\n color.current.bind(currentColorChanged);\n // bind to input\n if (win.expandable) {\n that.icon = popup.parents('.Icon:first');\n iconColor = that.icon.find('.Color:first').css({backgroundColor: (hex && '#' + hex) || 'transparent'});\n iconAlpha = that.icon.find('.Alpha:first');\n setImg.call(that, iconAlpha, images.clientPath + 'bar-opacity.png');\n setAlpha.call(that, iconAlpha, toFixedNumeric(((255 - (!isNullish(all) ? all.a : 0)) * 100) / 255, 4));\n iconImage = that.icon.find('.Image:first').css({\n backgroundImage: 'url(\\'' + images.clientPath + images.picker.file + '\\')'\n }).bind('click', iconImageClicked);\n if (win.bindToInput && win.updateInputColor) {\n win.input.css({\n backgroundColor: (hex && '#' + hex) || 'transparent',\n color: isNullish(all) || all.v > 75 ? '#000000' : '#ffffff'\n });\n }\n moveBar = tbody.find('.Move:first').bind('mousedown', moveBarMouseDown);\n color.active.bind(expandableColorChanged);\n } else show.call(that);\n }\n /**\n *\n * @returns {void}\n */\n function destroy () {\n container.find('td.Radio input').unbind('click', radioClicked);\n currentPreview.unbind('click', currentClicked);\n cancelButton.unbind('click', cancelClicked);\n okButton.unbind('click', okClicked);\n if (settings.window.expandable) {\n iconImage.unbind('click', iconImageClicked);\n moveBar.unbind('mousedown', moveBarMouseDown);\n that.icon = null;\n }\n container.find('.QuickColor').unbind('click', quickPickClicked);\n colorMapDiv = null;\n colorBarDiv = null;\n colorMapL1 = null;\n colorMapL2 = null;\n colorMapL3 = null;\n colorBarL1 = null;\n colorBarL2 = null;\n colorBarL3 = null;\n colorBarL4 = null;\n colorBarL5 = null;\n colorBarL6 = null;\n colorMap.destroy();\n colorMap = null;\n colorBar.destroy();\n colorBar = null;\n colorPicker.destroy();\n colorPicker = null;\n activePreview = null;\n currentPreview = null;\n okButton = null;\n cancelButton = null;\n grid = null;\n commitCallback = null;\n cancelCallback = null;\n liveCallback = null;\n container.html('');\n for (let i = 0; i < List.length; i++) {\n if (List[i] === that) {\n List.splice(i, 1);\n i--; // Decrement to ensure we don't miss next item (lgtm warning)\n }\n }\n }\n const {images, localization} = settings; // local copies for YUI compressor\n const color = {\n active: (typeof settings.color.active).toString().toLowerCase() === 'string'\n ? new Color({ahex: !settings.window.alphaSupport && settings.color.active\n ? settings.color.active.substring(0, 6) + 'ff'\n : settings.color.active\n })\n : new Color({ahex: !settings.window.alphaSupport &&\n settings.color.active.val('ahex')\n ? settings.color.active.val('ahex').substring(0, 6) + 'ff'\n : settings.color.active.val('ahex')\n }),\n current: (typeof settings.color.active).toString().toLowerCase() === 'string'\n ? new Color({ahex: !settings.window.alphaSupport && settings.color.active\n ? settings.color.active.substring(0, 6) + 'ff'\n : settings.color.active})\n : new Color({ahex: !settings.window.alphaSupport &&\n settings.color.active.val('ahex')\n ? settings.color.active.val('ahex').substring(0, 6) + 'ff'\n : settings.color.active.val('ahex')\n }),\n quickList: settings.color.quickList\n };\n\n if (typeof commitCallback !== 'function') {\n commitCallback = null;\n }\n if (typeof liveCallback !== 'function') {\n liveCallback = null;\n }\n if (typeof cancelCallback !== 'function') {\n cancelCallback = null;\n }\n\n let elementStartX = null, // Used to record the starting css positions for dragging the control\n elementStartY = null,\n pageStartX = null, // Used to record the mousedown coordinates for dragging the control\n pageStartY = null,\n container = null,\n colorMapDiv = null,\n colorBarDiv = null,\n colorMapL1 = null, // different layers of colorMap and colorBar\n colorMapL2 = null,\n colorMapL3 = null,\n colorBarL1 = null,\n colorBarL2 = null,\n colorBarL3 = null,\n colorBarL4 = null,\n colorBarL5 = null,\n colorBarL6 = null,\n colorMap = null, // color maps\n colorBar = null,\n colorPicker = null,\n activePreview = null, // color boxes above the radio buttons\n currentPreview = null,\n okButton = null,\n cancelButton = null,\n grid = null, // preset colors grid\n iconColor = null, // iconColor for popup icon\n iconAlpha = null, // iconAlpha for popup icon\n iconImage = null, // iconImage popup icon\n moveBar = null; // drag bar\n\n $.extend(true, that, {\n // public properties, methods, and callbacks\n commitCallback, // commitCallback function can be overridden to return the selected color to a method you specify when the user clicks \"OK\"\n liveCallback, // liveCallback function can be overridden to return the selected color to a method you specify in live mode (continuous update)\n cancelCallback, // cancelCallback function can be overridden to a method you specify when the user clicks \"Cancel\"\n color,\n show,\n hide,\n destroy // destroys this control entirely, removing all events and objects, and removing itself from the List\n });\n List.push(that);\n setTimeout(function () {\n initialize.call(that);\n }, 0);\n });\n };\n /**\n * @typedef {PlainObject} external:jQuery.fn.jPickerOptionsIconInfo\n * @property {string} file Color Map/Color Bar/Color Picker arrow icon\n * @property {Float} width\n * @property {Float} height\n */\n /**\n * @typedef {PlainObject} external:jQuery.fn.jPickerOptionsImagesDimensionsArrow\n * @property {Float} width\n * @property {Float} height\n * @property {external:jQuery.fn.jPickerOptionsIconInfo} arrow\n */\n /**\n * @typedef {PlainObject} external:jQuery.fn.jPickerOptionsRadioTextboxLocale\n * @property {string} radio\n * @property {string} textbox\n */\n /**\n * @typedef {PlainObject} external:jQuery.fn.jPickerOptions\n * @property {PlainObject} window\n * @property {string|null} window.title Any title for the jPicker window itself - displays\n * \"Drag Markers To Pick A Color\" if left null\n * @property {PlainObject} window.effects\n * @property {\"slide\"|\"show\"|\"fade\"} window.effects.type Effect used to show/hide an expandable picker\n * @property {PlainObject} window.effects.speed\n * @property {\"fast\"|\"slow\"|Float} window.effects.speed.show Duration of \"show\" effect. Time in milliseconds.\n * @property {\"fast\"|\"slow\"|Float} window.effects.speed.hide Duration of \"hide\" effect. Time in milliseconds\n * @property {PlainObject} window.position\n * @property {\"left\"|\"center\"|\"right\"|\"screenCenter\"|Float} window.position.x Relative px value\n * @property {\"top\"|\"bottom\"|\"center\"|Float} window.position.y Relative px value\n * @property {boolean} window.expandable Defaults to large static picker - set to `true` to make an expandable\n * picker (small icon with popup) - set automatically when binded to input element\n * @property {boolean} window.liveUpdate Set `false` if you want the user to have to click \"OK\" before the\n * binded input box updates values (always `true` for expandable picker)\n * @property {boolean} window.alphaSupport Set to `true` to enable alpha picking\n * @property {Float} window.alphaPrecision Set decimal precision for alpha percentage display - hex codes do\n * not map directly to percentage integers - range 0-2\n * @property {boolean} window.updateInputColor Set to `false` to prevent binded input colors from changing\n * @property {boolean} [window.bindToInput] Added by `$.fn.jPicker`\n * @property {boolean} [window.expandable] Added by `$.fn.jPicker`\n * @property {external:jQuery} [window.input] Added by `$.fn.jPicker`\n * @property {PlainObject} color\n * @property {\"h\"|\"s\"|\"v\"|\"r\"|\"g\"|\"b\"|\"a\"} color.mode Symbols stand for \"h\" (hue), \"s\" (saturation), \"v\" (value), \"r\" (red), \"g\" (green), \"b\" (blue), \"a\" (alpha)\n * @property {Color|string} color.active Strings are HEX values (e.g. #ffc000) WITH OR WITHOUT the \"#\" prefix\n * @property {Color[]|string[]} color.quickList The quick pick color list\n * Strings are HEX values (e.g. #ffc000) WITH OR WITHOUT the \"#\" prefix\n * @property {PlainObject} images\n * @property {string} images.clientPath Path to image files\n * @property {external:jQuery.fn.jPickerOptionsImagesDimensionsArrow} images.colorMap\n * @property {external:jQuery.fn.jPickerOptionsImagesDimensionsArrow} images.colorBar\n * @property {external:jQuery.fn.jPickerOptionsIconInfo} images.picker\n * @property {PlainObject} localization alter these to change the text presented by the picker (e.g. different language)\n * @property {PlainObject} localization.text\n * @property {string} localization.text.title\n * @property {string} localization.text.newColor\n * @property {string} localization.text.currentColor\n * @property {string} localization.text.ok\n * @property {string} localization.text.cancel\n * @property {PlainObject} localization.tooltips\n * @property {PlainObject} localization.tooltips.colors\n * @property {string} localization.tooltips.colors.newColor\n * @property {string} localization.tooltips.colors.currentColor\n * @property {PlainObject} localization.tooltips.buttons\n * @property {string} localization.tooltips.buttons.ok\n * @property {string} localization.tooltips.buttons.cancel\n * @property {external:jQuery.fn.jPickerOptionsRadioTextboxLocale} localization.tooltips.hue\n * @property {external:jQuery.fn.jPickerOptionsRadioTextboxLocale} localization.tooltips.saturation\n * @property {external:jQuery.fn.jPickerOptionsRadioTextboxLocale} localization.tooltips.value\n * @property {external:jQuery.fn.jPickerOptionsRadioTextboxLocale} localization.tooltips.red\n * @property {external:jQuery.fn.jPickerOptionsRadioTextboxLocale} localization.tooltips.green\n * @property {external:jQuery.fn.jPickerOptionsRadioTextboxLocale} localization.tooltips.blue\n * @property {external:jQuery.fn.jPickerOptionsRadioTextboxLocale} localization.tooltips.alpha\n * @property {PlainObject} localization.tooltips.hex\n * @property {string} localization.tooltips.hex.textbox\n * @property {string} localization.tooltips.hex.alpha\n */\n /**\n * The jPicker defaults - you can change anything in this section (such as the\n * clientPath to your images) without fear of breaking the program.\n * @namespace {external:jQuery.fn.jPickerOptions} defaults\n * @memberof external:jQuery.fn.$.fn.jPicker\n * @borrows external:jQuery.fn.jPickerOptions as external:jQuery.fn.jPicker.defaults\n * @see Source for all of the values\n */\n $.fn.jPicker.defaults = {\n window: {\n title: null,\n effects: {\n type: 'slide',\n speed: {\n show: 'slow',\n hide: 'fast'\n }\n },\n position: {\n x: 'screenCenter',\n y: 'top'\n },\n expandable: false,\n liveUpdate: true,\n alphaSupport: false,\n alphaPrecision: 0,\n updateInputColor: true\n },\n color: {\n mode: 'h',\n active: new Color({ahex: '#ffcc00ff'}),\n quickList: [\n new Color({h: 360, s: 33, v: 100}),\n new Color({h: 360, s: 66, v: 100}),\n new Color({h: 360, s: 100, v: 100}),\n new Color({h: 360, s: 100, v: 75}),\n new Color({h: 360, s: 100, v: 50}),\n new Color({h: 180, s: 0, v: 100}),\n new Color({h: 30, s: 33, v: 100}),\n new Color({h: 30, s: 66, v: 100}),\n new Color({h: 30, s: 100, v: 100}),\n new Color({h: 30, s: 100, v: 75}),\n new Color({h: 30, s: 100, v: 50}),\n new Color({h: 180, s: 0, v: 90}),\n new Color({h: 60, s: 33, v: 100}),\n new Color({h: 60, s: 66, v: 100}),\n new Color({h: 60, s: 100, v: 100}),\n new Color({h: 60, s: 100, v: 75}),\n new Color({h: 60, s: 100, v: 50}),\n new Color({h: 180, s: 0, v: 80}),\n new Color({h: 90, s: 33, v: 100}),\n new Color({h: 90, s: 66, v: 100}),\n new Color({h: 90, s: 100, v: 100}),\n new Color({h: 90, s: 100, v: 75}),\n new Color({h: 90, s: 100, v: 50}),\n new Color({h: 180, s: 0, v: 70}),\n new Color({h: 120, s: 33, v: 100}),\n new Color({h: 120, s: 66, v: 100}),\n new Color({h: 120, s: 100, v: 100}),\n new Color({h: 120, s: 100, v: 75}),\n new Color({h: 120, s: 100, v: 50}),\n new Color({h: 180, s: 0, v: 60}),\n new Color({h: 150, s: 33, v: 100}),\n new Color({h: 150, s: 66, v: 100}),\n new Color({h: 150, s: 100, v: 100}),\n new Color({h: 150, s: 100, v: 75}),\n new Color({h: 150, s: 100, v: 50}),\n new Color({h: 180, s: 0, v: 50}),\n new Color({h: 180, s: 33, v: 100}),\n new Color({h: 180, s: 66, v: 100}),\n new Color({h: 180, s: 100, v: 100}),\n new Color({h: 180, s: 100, v: 75}),\n new Color({h: 180, s: 100, v: 50}),\n new Color({h: 180, s: 0, v: 40}),\n new Color({h: 210, s: 33, v: 100}),\n new Color({h: 210, s: 66, v: 100}),\n new Color({h: 210, s: 100, v: 100}),\n new Color({h: 210, s: 100, v: 75}),\n new Color({h: 210, s: 100, v: 50}),\n new Color({h: 180, s: 0, v: 30}),\n new Color({h: 240, s: 33, v: 100}),\n new Color({h: 240, s: 66, v: 100}),\n new Color({h: 240, s: 100, v: 100}),\n new Color({h: 240, s: 100, v: 75}),\n new Color({h: 240, s: 100, v: 50}),\n new Color({h: 180, s: 0, v: 20}),\n new Color({h: 270, s: 33, v: 100}),\n new Color({h: 270, s: 66, v: 100}),\n new Color({h: 270, s: 100, v: 100}),\n new Color({h: 270, s: 100, v: 75}),\n new Color({h: 270, s: 100, v: 50}),\n new Color({h: 180, s: 0, v: 10}),\n new Color({h: 300, s: 33, v: 100}),\n new Color({h: 300, s: 66, v: 100}),\n new Color({h: 300, s: 100, v: 100}),\n new Color({h: 300, s: 100, v: 75}),\n new Color({h: 300, s: 100, v: 50}),\n new Color({h: 180, s: 0, v: 0}),\n new Color({h: 330, s: 33, v: 100}),\n new Color({h: 330, s: 66, v: 100}),\n new Color({h: 330, s: 100, v: 100}),\n new Color({h: 330, s: 100, v: 75}),\n new Color({h: 330, s: 100, v: 50}),\n new Color()\n ]\n },\n images: {\n clientPath: '/jPicker/images/',\n colorMap: {\n width: 256,\n height: 256,\n arrow: {\n file: 'mappoint.gif',\n width: 15,\n height: 15\n }\n },\n colorBar: {\n width: 20,\n height: 256,\n arrow: {\n file: 'rangearrows.gif',\n width: 20,\n height: 7\n }\n },\n picker: {\n file: 'picker.gif',\n width: 25,\n height: 24\n }\n },\n localization: {\n text: {\n title: 'Drag Markers To Pick A Color',\n newColor: 'new',\n currentColor: 'current',\n ok: 'OK',\n cancel: 'Cancel'\n },\n tooltips: {\n colors: {\n newColor: 'New Color - Press “OK” To Commit',\n currentColor: 'Click To Revert To Original Color'\n },\n buttons: {\n ok: 'Commit To This Color Selection',\n cancel: 'Cancel And Revert To Original Color'\n },\n hue: {\n radio: 'Set To “Hue” Color Mode',\n textbox: 'Enter A “Hue” Value (0-360°)'\n },\n saturation: {\n radio: 'Set To “Saturation” Color Mode',\n textbox: 'Enter A “Saturation” Value (0-100%)'\n },\n value: {\n radio: 'Set To “Value” Color Mode',\n textbox: 'Enter A “Value” Value (0-100%)'\n },\n red: {\n radio: 'Set To “Red” Color Mode',\n textbox: 'Enter A “Red” Value (0-255)'\n },\n green: {\n radio: 'Set To “Green” Color Mode',\n textbox: 'Enter A “Green” Value (0-255)'\n },\n blue: {\n radio: 'Set To “Blue” Color Mode',\n textbox: 'Enter A “Blue” Value (0-255)'\n },\n alpha: {\n radio: 'Set To “Alpha” Color Mode',\n textbox: 'Enter A “Alpha” Value (0-100)'\n },\n hex: {\n textbox: 'Enter A “Hex” Color Value (#000000-#ffffff)',\n alpha: 'Enter A “Alpha” Value (#00-#ff)'\n }\n }\n }\n };\n return $;\n};\n\nexport default jPicker;\n","/* eslint-disable unicorn/no-fn-reference-in-iterator */\n/* globals jQuery */\n/**\n * Localizing script for SVG-edit UI.\n * @module locale\n * @license MIT\n *\n * @copyright 2010 Narendra Sisodya\n * @copyright 2010 Alexis Deveria\n *\n */\n\n/**\n * Used, for example, in the ImageLibs extension, to present libraries\n * (with name/URL/description) in order.\n * @typedef {GenericArray<module:locale.LocaleStrings>} module:locale.LocaleArray\n*/\n/**\n * The string keys of the object are two-letter language codes.\n * @tutorial LocaleDocs\n * @typedef {PlainObject<string, string|module:locale.LocaleStrings|module:locale.LocaleArray>} module:locale.LocaleStrings\n */\n// keyed to an array of objects with \"id\" and \"title\" or \"textContent\" properties\n/**\n * @typedef {PlainObject<string, string>} module:locale.LocaleSelectorValue\n */\n\nimport {importSetGlobalDefault} from '../external/dynamic-import-polyfill/importModule.js';\n\nconst $ = jQuery;\n\nlet langParam;\n\n/**\n * Looks for elements to localize using the supplied `obj` to indicate\n * on which selectors (or IDs if `ids` is set to `true`) to set its\n * strings (with selectors relative to the editor root element). All\n * keys will be translated, but for each selector, only the first item\n * found matching will be modified.\n * If the type is `content`, the selector-identified element's children\n * will be checked, and the first (non-empty) text (placeholder) node\n * found will have its text replaced.\n * If the type is `title`, the element's `title`\n * property will be set.\n * If the type is `aria-label`, the element's `aria-label` attribute\n * will be set (i.e., instructions for screen readers when there is\n * otherwise no visible text to be read for the function of the form\n * control).\n * @param {\"content\"|\"title\"} type\n * @param {module:locale.LocaleSelectorValue} obj Selectors or IDs keyed to strings\n * @param {boolean} ids\n * @returns {void}\n*/\nexport const setStrings = function (type, obj, ids) {\n // Root element to look for element from\n const parent = $('#svg_editor').parent();\n Object.entries(obj).forEach(([sel, val]) => {\n if (!val) {\n console.log(sel); // eslint-disable-line no-console\n }\n\n if (ids) { sel = '#' + sel; }\n const $elem = parent.find(sel);\n if ($elem.length) {\n const elem = $elem[0];\n\n switch (type) {\n case 'aria-label':\n elem.setAttribute('aria-label', val);\n break;\n case 'content':\n [...elem.childNodes].some((node) => {\n if (node.nodeType === 3 /* Node.TEXT_NODE */ &&\n node.textContent.trim()\n ) {\n node.textContent = val;\n return true;\n }\n return false;\n });\n break;\n\n case 'title':\n elem.title = val;\n break;\n }\n } else {\n console.log('Missing element for localization: ' + sel); // eslint-disable-line no-console\n }\n });\n};\n\n/**\n* The \"data\" property is generally set to an an array of objects with\n* \"id\" and \"title\" or \"textContent\" properties.\n* @typedef {PlainObject} module:locale.AddLangExtensionLocaleData\n* @property {module:locale.LocaleStrings[]} data See {@tutorial LocaleDocs}\n*/\n\n/**\n* @interface module:locale.LocaleEditorInit\n*/\n/**\n * @function module:locale.LocaleEditorInit#addLangData\n * @param {string} langParam\n * @returns {module:locale.AddLangExtensionLocaleData}\n*/\n\nlet editor_;\n/**\n * Sets the current editor instance (on which `addLangData`) exists.\n * @function init\n * @memberof module:locale\n * @param {module:locale.LocaleEditorInit} editor\n * @returns {void}\n*/\nexport const init = (editor) => {\n editor_ = editor;\n};\n\n/**\n* @typedef {PlainObject} module:locale.LangAndData\n* @property {string} langParam\n* @property {module:locale.LocaleStrings} langData\n*/\n\n/**\n* @function module:locale.readLang\n* @param {module:locale.LocaleStrings} langData See {@tutorial LocaleDocs}\n* @fires module:svgcanvas.SvgCanvas#event:ext_addLangData\n* @returns {Promise<module:locale.LangAndData>} Resolves to [`LangAndData`]{@link module:locale.LangAndData}\n*/\nexport const readLang = async function (langData) {\n const more = await editor_.addLangData(langParam);\n $.each(more, function (i, m) {\n if (m.data) {\n langData = $.merge(langData, m.data);\n }\n });\n\n // Old locale file, do nothing for now.\n if (!langData.tools) { return undefined; }\n\n const {\n tools,\n // misc,\n properties, config, layers, common, ui\n } = langData;\n\n setStrings('content', {\n // Todo: Add this powered by (probably by default) but with config to remove\n // copyrightLabel: misc.powered_by, // Currently commented out in svg-editor.html\n curve_segments: properties.curve_segments,\n fitToContent: tools.fitToContent,\n fit_to_all: tools.fit_to_all,\n fit_to_canvas: tools.fit_to_canvas,\n fit_to_layer_content: tools.fit_to_layer_content,\n fit_to_sel: tools.fit_to_sel,\n\n icon_large: config.icon_large,\n icon_medium: config.icon_medium,\n icon_small: config.icon_small,\n icon_xlarge: config.icon_xlarge,\n image_opt_embed: config.image_opt_embed,\n image_opt_ref: config.image_opt_ref,\n includedImages: config.included_images,\n\n largest_object: tools.largest_object,\n\n layersLabel: layers.layers,\n page: tools.page,\n relativeToLabel: tools.relativeTo,\n selLayerLabel: layers.move_elems_to,\n selectedPredefined: config.select_predefined,\n\n selected_objects: tools.selected_objects,\n smallest_object: tools.smallest_object,\n straight_segments: properties.straight_segments,\n\n svginfo_bg_url: config.editor_img_url + ':',\n svginfo_bg_note: config.editor_bg_note,\n svginfo_change_background: config.background,\n svginfo_dim: config.doc_dims,\n svginfo_editor_prefs: config.editor_prefs,\n svginfo_height: common.height,\n svginfo_icons: config.icon_size,\n svginfo_image_props: config.image_props,\n svginfo_lang: config.language,\n svginfo_title: config.doc_title,\n svginfo_width: common.width,\n\n tool_docprops_cancel: common.cancel,\n tool_docprops_save: common.ok,\n\n tool_source_cancel: common.cancel,\n tool_source_save: common.ok,\n\n tool_prefs_cancel: common.cancel,\n tool_prefs_save: common.ok,\n\n sidepanel_handle: layers.layers.split('').join(' '),\n\n tool_clear: tools.new_doc,\n tool_docprops: tools.docprops,\n tool_export: tools.export_img,\n tool_import: tools.import_doc,\n tool_open: tools.open_doc,\n tool_save: tools.save_doc,\n tool_editor_prefs: config.editor_prefs,\n tool_editor_homepage: tools.editor_homepage,\n\n svginfo_units_rulers: config.units_and_rulers,\n svginfo_rulers_onoff: config.show_rulers,\n svginfo_unit: config.base_unit,\n\n svginfo_grid_settings: config.grid,\n svginfo_snap_onoff: config.snapping_onoff,\n svginfo_snap_step: config.snapping_stepsize,\n svginfo_grid_color: config.grid_color\n }, true);\n\n // Context menus\n const opts = {};\n [\n 'cut', 'copy', 'paste', 'paste_in_place', 'delete',\n 'group', 'ungroup', 'move_front', 'move_up',\n 'move_down', 'move_back'\n ].forEach((item) => {\n opts['#cmenu_canvas a[href=\"#' + item + '\"]'] = tools[item];\n });\n\n ['dupe', 'merge_down', 'merge_all'].forEach((item) => {\n opts['#cmenu_layers a[href=\"#' + item + '\"]'] = layers[item];\n });\n\n opts['#cmenu_layers a[href=\"#delete\"]'] = layers.del;\n\n setStrings('content', opts);\n\n const ariaLabels = {};\n Object.entries({\n tool_blur: properties.blur,\n tool_position: tools.align_to_page,\n tool_font_family: properties.font_family,\n zoom_panel: ui.zoom_level,\n stroke_linejoin: properties.linejoin_miter,\n stroke_linecap: properties.linecap_butt,\n tool_opacity: properties.opacity\n }).forEach(([id, value]) => {\n ariaLabels['#' + id + ' button'] = value;\n });\n Object.entries({\n group_opacity: properties.opacity,\n zoom: ui.zoom_level\n }).forEach(([id, value]) => {\n ariaLabels['#' + id] = value;\n });\n setStrings('aria-label', ariaLabels);\n\n setStrings('title', {\n align_relative_to: tools.align_relative_to,\n circle_cx: properties.circle_cx,\n circle_cy: properties.circle_cy,\n circle_r: properties.circle_r,\n cornerRadiusLabel: properties.corner_radius,\n ellipse_cx: properties.ellipse_cx,\n ellipse_cy: properties.ellipse_cy,\n ellipse_rx: properties.ellipse_rx,\n ellipse_ry: properties.ellipse_ry,\n fill_color: properties.fill_color,\n font_family: properties.font_family,\n idLabel: properties.id,\n image_height: properties.image_height,\n image_url: properties.image_url,\n image_width: properties.image_width,\n layer_delete: layers.del,\n layer_down: layers.move_down,\n layer_new: layers.new,\n layer_rename: layers.rename,\n layer_moreopts: common.more_opts,\n layer_up: layers.move_up,\n line_x1: properties.line_x1,\n line_x2: properties.line_x2,\n line_y1: properties.line_y1,\n line_y2: properties.line_y2,\n linecap_butt: properties.linecap_butt,\n linecap_round: properties.linecap_round,\n linecap_square: properties.linecap_square,\n linejoin_bevel: properties.linejoin_bevel,\n linejoin_miter: properties.linejoin_miter,\n linejoin_round: properties.linejoin_round,\n main_icon: tools.main_menu,\n palette: ui.palette_info,\n zoom_panel: ui.zoom_level,\n path_node_x: properties.node_x,\n path_node_y: properties.node_y,\n rect_height_tool: properties.rect_height,\n rect_width_tool: properties.rect_width,\n seg_type: properties.seg_type,\n selLayerNames: layers.move_selected,\n selected_x: properties.pos_x,\n selected_y: properties.pos_y,\n stroke_color: properties.stroke_color,\n stroke_style: properties.stroke_style,\n stroke_width: properties.stroke_width,\n svginfo_title: config.doc_title,\n text: properties.text_contents,\n toggle_stroke_tools: ui.toggle_stroke_tools,\n tool_add_subpath: tools.add_subpath,\n tool_alignbottom: tools.align_bottom,\n tool_aligncenter: tools.align_center,\n tool_alignleft: tools.align_left,\n tool_alignmiddle: tools.align_middle,\n tool_alignright: tools.align_right,\n tool_aligntop: tools.align_top,\n tool_angle: properties.angle,\n tool_blur: properties.blur,\n tool_bold: properties.bold,\n tool_circle: tools.mode_circle,\n tool_clone: tools.clone,\n tool_clone_multi: tools.clone,\n tool_delete: tools.del,\n tool_delete_multi: tools.del,\n tool_ellipse: tools.mode_ellipse,\n tool_fhellipse: tools.mode_fhellipse,\n tool_fhpath: tools.mode_fhpath,\n tool_fhrect: tools.mode_fhrect,\n tool_font_size: properties.font_size,\n tool_group_elements: tools.group_elements,\n tool_make_link: tools.make_link,\n tool_link_url: tools.set_link_url,\n tool_image: tools.mode_image,\n tool_italic: properties.italic,\n tool_line: tools.mode_line,\n tool_move_bottom: tools.move_bottom,\n tool_move_top: tools.move_top,\n tool_node_clone: tools.node_clone,\n tool_node_delete: tools.node_delete,\n tool_node_link: tools.node_link,\n tool_opacity: properties.opacity,\n tool_openclose_path: tools.openclose_path,\n tool_path: tools.mode_path,\n tool_position: tools.align_to_page,\n tool_rect: tools.mode_rect,\n tool_redo: tools.redo,\n tool_reorient: tools.reorient_path,\n tool_select: tools.mode_select,\n tool_source: tools.source_save,\n tool_square: tools.mode_square,\n tool_text: tools.mode_text,\n tool_topath: tools.to_path,\n tool_undo: tools.undo,\n tool_ungroup: tools.ungroup,\n tool_wireframe: tools.wireframe_mode,\n tool_zoom: tools.mode_zoom,\n url_notice: tools.no_embed\n\n }, true);\n\n return {langParam, langData};\n};\n\n/**\n *\n * @function module:locale.putLocale\n * @param {string} givenParam\n * @param {string[]} goodLangs\n * @param {{langPath: string}} conf\n * @fires module:svgcanvas.SvgCanvas#event:ext_addLangData\n * @fires module:svgcanvas.SvgCanvas#event:ext_langReady\n * @fires module:svgcanvas.SvgCanvas#event:ext_langChanged\n * @returns {Promise<module:locale.LangAndData>} Resolves to result of {@link module:locale.readLang}\n*/\nexport const putLocale = async function (givenParam, goodLangs, conf) {\n if (givenParam) {\n langParam = givenParam;\n } else if (navigator.userLanguage) { // Explorer\n langParam = navigator.userLanguage;\n } else if (navigator.language) { // FF, Opera, ...\n langParam = navigator.language;\n }\n\n console.log('Lang: ' + langParam); // eslint-disable-line no-console\n\n // Set to English if language is not in list of good langs\n if (!goodLangs.includes(langParam) && langParam !== 'test') {\n langParam = 'en';\n }\n\n const url = conf.langPath + 'lang.' + langParam + '.js';\n return readLang(\n // Todo: Replace this with `return import(url);` when\n // `import()` widely supported\n await importSetGlobalDefault(url, {\n global: 'svgEditorLang_' + langParam.replace(/-/g, '_')\n })\n );\n};\n","function _slicedToArray(arr, i) {\n return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest();\n}\n\nfunction _arrayWithHoles(arr) {\n if (Array.isArray(arr)) return arr;\n}\n\nfunction _iterableToArrayLimit(arr, i) {\n if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === \"[object Arguments]\")) {\n return;\n }\n\n var _arr = [];\n var _n = true;\n var _d = false;\n var _e = undefined;\n\n try {\n for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {\n _arr.push(_s.value);\n\n if (i && _arr.length === i) break;\n }\n } catch (err) {\n _d = true;\n _e = err;\n } finally {\n try {\n if (!_n && _i[\"return\"] != null) _i[\"return\"]();\n } finally {\n if (_d) throw _e;\n }\n }\n\n return _arr;\n}\n\nfunction _nonIterableRest() {\n throw new TypeError(\"Invalid attempt to destructure non-iterable instance\");\n}\n\nfunction loadStylesheets(stylesheets) {\n var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},\n beforeDefault = _ref.before,\n afterDefault = _ref.after,\n faviconDefault = _ref.favicon,\n canvasDefault = _ref.canvas,\n _ref$image = _ref.image,\n imageDefault = _ref$image === void 0 ? true : _ref$image,\n acceptErrors = _ref.acceptErrors;\n\n stylesheets = Array.isArray(stylesheets) ? stylesheets : [stylesheets];\n\n function setupLink(stylesheetURL) {\n var options = {};\n\n if (Array.isArray(stylesheetURL)) {\n var _stylesheetURL = stylesheetURL;\n\n var _stylesheetURL2 = _slicedToArray(_stylesheetURL, 2);\n\n stylesheetURL = _stylesheetURL2[0];\n var _stylesheetURL2$ = _stylesheetURL2[1];\n options = _stylesheetURL2$ === void 0 ? {} : _stylesheetURL2$;\n }\n\n var _options = options,\n _options$favicon = _options.favicon,\n favicon = _options$favicon === void 0 ? faviconDefault : _options$favicon;\n var _options2 = options,\n _options2$before = _options2.before,\n before = _options2$before === void 0 ? beforeDefault : _options2$before,\n _options2$after = _options2.after,\n after = _options2$after === void 0 ? afterDefault : _options2$after,\n _options2$canvas = _options2.canvas,\n canvas = _options2$canvas === void 0 ? canvasDefault : _options2$canvas,\n _options2$image = _options2.image,\n image = _options2$image === void 0 ? imageDefault : _options2$image;\n\n function addLink() {\n if (before) {\n before.before(link);\n } else if (after) {\n after.after(link);\n } else {\n // eslint-disable-next-line unicorn/prefer-node-append\n document.head.appendChild(link);\n }\n }\n\n var link = document.createElement('link'); // eslint-disable-next-line promise/avoid-new\n\n return new Promise(function (resolve, reject) {\n var rej = reject;\n\n if (acceptErrors) {\n rej = typeof acceptErrors === 'function' ? function (error) {\n acceptErrors({\n error: error,\n stylesheetURL: stylesheetURL,\n options: options,\n resolve: resolve,\n reject: reject\n });\n } : resolve;\n }\n\n if (stylesheetURL.endsWith('.css')) {\n favicon = false;\n } else if (stylesheetURL.endsWith('.ico')) {\n favicon = true;\n }\n\n if (favicon) {\n link.rel = 'shortcut icon';\n link.type = 'image/x-icon';\n\n if (image === false) {\n link.href = stylesheetURL;\n addLink();\n resolve(link);\n return;\n }\n\n var cnv = document.createElement('canvas');\n cnv.width = 16;\n cnv.height = 16;\n var context = cnv.getContext('2d');\n var img = document.createElement('img');\n img.addEventListener('error', function (error) {\n reject(error);\n });\n img.addEventListener('load', function () {\n context.drawImage(img, 0, 0);\n link.href = canvas ? cnv.toDataURL('image/x-icon') : stylesheetURL;\n addLink();\n resolve(link);\n });\n img.src = stylesheetURL;\n return;\n }\n\n link.rel = 'stylesheet';\n link.type = 'text/css';\n link.href = stylesheetURL;\n addLink();\n link.addEventListener('error', function (error) {\n rej(error);\n });\n link.addEventListener('load', function () {\n resolve(link);\n });\n });\n }\n\n return Promise.all(stylesheets.map(function (stylesheetURL) {\n return setupLink(stylesheetURL);\n }));\n}\n\nexport default loadStylesheets;\n","/* globals jQuery */\n/**\n* The main module for the visual SVG Editor.\n*\n* @license MIT\n*\n* @copyright 2010 Alexis Deveria\n* 2010 Pavol Rusnak\n* 2010 Jeff Schiller\n* 2010 Narendra Sisodiya\n* 2014 Brett Zamir\n* @exports module:SVGEditor\n* @borrows module:locale.putLocale as putLocale\n* @borrows module:locale.readLang as readLang\n* @borrows module:locale.setStrings as setStrings\n*/\n\nimport './touch.js';\nimport {NS} from './namespaces.js';\nimport {isWebkit, isChrome, isGecko, isIE, isMac, isTouch} from './browser.js';\nimport * as Utils from './utilities.js';\nimport {getTypeMap, convertUnit, isValidUnit} from './units.js';\nimport {\n hasCustomHandler, getCustomHandler, injectExtendedContextMenuItemsIntoDom\n} from './contextmenu.js';\nimport {importSetGlobalDefault} from './external/dynamic-import-polyfill/importModule.js';\nimport deparam from './external/deparam/deparam.esm.js';\n\nimport SvgCanvas from './svgcanvas.js';\nimport Layer from './layer.js';\n\nimport jQueryPluginJSHotkeys from './js-hotkeys/jquery.hotkeys.min.js';\nimport jQueryPluginSVGIcons from './svgicons/jQuery.svgIcons.js';\nimport jQueryPluginJGraduate from './jgraduate/jQuery.jGraduate.js';\nimport jQueryPluginSpinButton from './spinbtn/jQuery.SpinButton.js';\nimport jQueryPluginSVG from './jQuery.attr.js'; // Needed for SVG attribute setting and array form with `attr`\nimport jQueryPluginContextMenu from './contextmenu/jQuery.contextMenu.js';\nimport jQueryPluginJPicker from './jgraduate/jQuery.jPicker.js';\nimport jQueryPluginDBox from './dbox.js';\n\nimport {\n readLang, putLocale,\n setStrings,\n init as localeInit\n} from './locale/locale.js';\nimport loadStylesheets from './external/load-stylesheets/index-es.js';\n\nconst editor = {};\n\nconst $ = [\n jQueryPluginJSHotkeys, jQueryPluginSVGIcons, jQueryPluginJGraduate,\n jQueryPluginSpinButton, jQueryPluginSVG, jQueryPluginContextMenu, jQueryPluginJPicker\n].reduce((jq, func) => func(jq), jQuery);\n\n/*\nif (!$.loadingStylesheets) {\n $.loadingStylesheets = [];\n}\n*/\n\nconst homePage = 'https://github.com/SVG-Edit/svgedit';\n\nconst stylesheet = 'svg-editor.css';\nif (!$.loadingStylesheets.includes(stylesheet)) {\n $.loadingStylesheets.push(stylesheet);\n}\nconst favicon = 'images/logo.png';\nif ($.loadingStylesheets.some((item) => {\n return !Array.isArray(item) || item[0] !== favicon;\n})) {\n $.loadingStylesheets.push([favicon, {favicon: true}]);\n}\n\n// EDITOR PROPERTIES: (defined below)\n// curPrefs, curConfig, canvas, storage, uiStrings\n//\n// STATE MAINTENANCE PROPERTIES\n/**\n* @type {Float}\n*/\neditor.tool_scale = 1; // Dependent on icon size, so any use to making configurable instead? Used by `jQuery.SpinButton.js`\n/**\n* @type {Integer}\n*/\neditor.exportWindowCt = 0;\n/**\n* @type {boolean}\n*/\neditor.langChanged = false;\n/**\n* @type {boolean}\n*/\neditor.showSaveWarning = false;\n/**\n * Will be set to a boolean by `ext-storage.js`\n * @type {\"ignore\"|\"waiting\"|\"closed\"}\n*/\neditor.storagePromptState = 'ignore';\n\nconst callbacks = [],\n /**\n * @typedef {\"s\"|\"m\"|\"l\"|\"xl\"|Float} module:SVGEditor.IconSize\n */\n /**\n * Preferences.\n * @interface module:SVGEditor.Prefs\n * @property {string} [lang=\"en\"] Two-letter language code. The language must exist in the Editor Preferences language list. Defaults to \"en\" if `locale.js` detection does not detect another language.\n * @property {module:SVGEditor.IconSize} [iconsize=\"s\"|\"m\"] Size of the toolbar icons. Will default to 's' if the window height is smaller than the minimum height and 'm' otherwise.\n * @property {string} [bkgd_color=\"#FFF\"] Color hex for canvas background color. Defaults to white.\n * @property {string} [bkgd_url=\"\"] Background raster image URL. This image will fill the background of the document; useful for tracing purposes.\n * @property {\"embed\"|\"ref\"} [img_save=\"embed\"] Defines whether included raster images should be saved as Data URIs when possible, or as URL references. Settable in the Document Properties dialog.\n * @property {boolean} [save_notice_done=false] Used to track alert status\n * @property {boolean} [export_notice_done=false] Used to track alert status\n * @todo `save_notice_done` and `export_notice_done` should be changed to flags rather than preferences\n */\n /**\n * @namespace {module:SVGEditor.Prefs} defaultPrefs\n * @memberof module:SVGEditor~\n * @implements {module:SVGEditor.Prefs}\n */\n // The iteration algorithm for defaultPrefs does not currently support array/objects\n defaultPrefs = /** @lends module:SVGEditor~defaultPrefs */ {\n // EDITOR OPTIONS (DIALOG)\n /**\n * Default to \"en\" if locale.js detection does not detect another language.\n */\n lang: '',\n /**\n * Will default to 's' if the window height is smaller than the minimum\n * height and 'm' otherwise.\n */\n iconsize: '',\n bkgd_color: '#FFF',\n bkgd_url: '',\n // DOCUMENT PROPERTIES (DIALOG)\n img_save: 'embed',\n // ALERT NOTICES\n // Only shows in UI as far as alert notices, but useful to remember, so keeping as pref\n save_notice_done: false,\n export_notice_done: false\n },\n /**\n * @name module:SVGEditor~defaultExtensions\n * @type {string[]}\n */\n defaultExtensions = [\n 'ext-connector.js',\n 'ext-eyedropper.js',\n 'ext-grid.js',\n 'ext-imagelib.js',\n 'ext-markers.js',\n 'ext-overview_window.js',\n 'ext-panning.js',\n 'ext-polygon.js',\n 'ext-shapes.js',\n 'ext-star.js',\n 'ext-storage.js'\n ],\n /**\n * @typedef {\"@default\"|string} module:SVGEditor.Stylesheet `@default` will automatically load all of the default CSS paths for SVGEditor\n */\n /**\n * @typedef {GenericArray} module:SVGEditor.XYDimensions\n * @property {Integer} length 2\n * @property {Float} 0\n * @property {Float} 1\n */\n /**\n * @tutorial ConfigOptions\n * @interface module:SVGEditor.Config\n * @property {string} [canvasName=\"default\"] Used to namespace storage provided via `ext-storage.js`; you can use this if you wish to have multiple independent instances of SVG Edit on the same domain\n * @property {boolean} [no_save_warning=false] If `true`, prevents the warning dialog box from appearing when closing/reloading the page. Mostly useful for testing.\n * @property {string} [imgPath=\"images/\"] The path where the SVG icons are located, with trailing slash. Note that as of version 2.7, this is not configurable by URL for security reasons.\n * @property {string} [langPath=\"locale/\"] The path where the language files are located, with trailing slash. Default will be changed to `../dist/locale/` if this is a modular load. Note that as of version 2.7, this is not configurable by URL for security reasons.\n * @property {string} [extPath=\"extensions/\"] The path used for extension files, with trailing slash. Default will be changed to `../dist/extensions/` if this is a modular load. Note that as of version 2.7, this is not configurable by URL for security reasons.\n * @property {string} [canvgPath=\"canvg/\"] The path used for `canvg` files, with trailing slash. Default will be changed to `../dist/` if this is a modular load.\n * @property {string} [jspdfPath=\"jspdf/\"] The path used for `jsPDF` files, with trailing slash. Default will be changed to `../dist/` if this is a modular load.\n * @property {string} [extIconsPath=\"extensions/\"] The path used for extension icons, with trailing slash.\n * @property {string} [jGraduatePath=\"jgraduate/images/\"] The path where jGraduate images are located. Note that as of version 2.7, this is not configurable by URL for security reasons.\n * @property {boolean} [preventAllURLConfig=false] Set to `true` to override the ability for URLs to set non-content configuration (including extension config). Must be set early, i.e., in `svgedit-config-iife.js`; extension loading is too late!\n * @property {boolean} [preventURLContentLoading=false] Set to `true` to override the ability for URLs to set URL-based SVG content. Must be set early, i.e., in `svgedit-config-iife.js`; extension loading is too late!\n * @property {boolean} [lockExtensions=false] Set to `true` to override the ability for URLs to set their own extensions; disallowed in URL setting. There is no need for this when `preventAllURLConfig` is used. Must be set early, i.e., in `svgedit-config-iife.js`; extension loading is too late!\n * @property {boolean} [noDefaultExtensions=false] If set to `true`, prohibits automatic inclusion of default extensions (though \"extensions\" can still be used to add back any desired default extensions along with any other extensions). This can only be meaningfully used in `svgedit-config-iife.js` or in the URL\n * @property {boolean} [noStorageOnLoad=false] Some interaction with `ext-storage.js`; prevent even the loading of previously saved local storage.\n * @property {boolean} [forceStorage=false] Some interaction with `ext-storage.js`; strongly discouraged from modification as it bypasses user privacy by preventing them from choosing whether to keep local storage or not (and may be required by law in some regions)\n * @property {boolean} [emptyStorageOnDecline=false] Used by `ext-storage.js`; empty any prior storage if the user declines to store\n * @property {boolean} [avoidClientSide=false] DEPRECATED (use `avoidClientSideDownload` instead); Used by `ext-server_opensave.js`; set to `true` if you wish to always save to server and not only as fallback when client support is lacking\n * @property {boolean} [avoidClientSideDownload=false] Used by `ext-server_opensave.js`; set to `true` if you wish to always save to server and not only as fallback when client support is lacking\n * @property {boolean} [avoidClientSideOpen=false] Used by `ext-server_opensave.js`; set to `true` if you wish to always open from the server and not only as fallback when FileReader client support is lacking\n * @property {string[]} [extensions=module:SVGEditor~defaultExtensions] Extensions to load on startup. Use an array in `setConfig` and comma separated file names in the URL. Extension names must begin with \"ext-\". Note that as of version 2.7, paths containing \"/\", \"\\\", or \":\", are disallowed for security reasons. Although previous versions of this list would entirely override the default list, as of version 2.7, the defaults will always be added to this explicit list unless the configuration `noDefaultExtensions` is included.\n * @property {module:SVGEditor.Stylesheet[]} [stylesheets=[\"@default\"]] An array of required stylesheets to load in parallel; include the value `\"@default\"` within this array to ensure all default stylesheets are loaded.\n * @property {string[]} [allowedOrigins=[]] Used by `ext-xdomain-messaging.js` to indicate which origins are permitted for cross-domain messaging (e.g., between the embedded editor and main editor code). Besides explicit domains, one might add '*' to allow all domains (not recommended for privacy/data integrity of your user's content!), `window.location.origin` for allowing the same origin (should be safe if you trust all apps on your domain), 'null' to allow `file:///` URL usage\n * @property {null|PlainObject} [colorPickerCSS=null] Object of CSS properties mapped to values (for jQuery) to apply to the color picker. See {@link http://api.jquery.com/css/#css-properties}. A `null` value (the default) will cause the CSS to default to `left` with a position equal to that of the `fill_color` or `stroke_color` element minus 140, and a `bottom` equal to 40\n * @property {string} [paramurl] This was available via URL only. Allowed an un-encoded URL within the query string (use \"url\" or \"source\" with a data: URI instead)\n * @property {Float} [canvas_expansion=3] The minimum area visible outside the canvas, as a multiple of the image dimensions. The larger the number, the more one can scroll outside the canvas.\n * @property {PlainObject} [initFill] Init fill properties\n * @property {string} [initFill.color=\"FF0000\"] The initial fill color. Must be a hex code string. Defaults to solid red.\n * @property {Float} [initFill.opacity=1] The initial fill opacity. Must be a number between 0 and 1\n * @property {PlainObject} [initStroke] Init stroke properties\n * @property {Float} [initStroke.width=5] The initial stroke width. Must be a positive number.\n * @property {string} [initStroke.color=\"000000\"] The initial stroke color. Must be a hex code. Defaults to solid black.\n * @property {Float} [initStroke.opacity=1] The initial stroke opacity. Must be a number between 0 and 1.\n * @property {PlainObject} text Text style properties\n * @property {Float} [text.stroke_width=0] Text stroke width\n * @property {Float} [text.font_size=24] Text font size\n * @property {string} [text.font_family=\"serif\"] Text font family\n * @property {Float} [initOpacity=1] Initial opacity (multiplied by 100)\n * @property {module:SVGEditor.XYDimensions} [dimensions=[640, 480]] The default width/height of a new document. Use an array in `setConfig` (e.g., `[800, 600]`) and comma separated numbers in the URL.\n * @property {boolean} [gridSnapping=false] Enable snap to grid by default. Set in Editor Options.\n * @property {string} [gridColor=\"#000\"] Accepts hex, e.g., '#000'. Set in Editor Options. Defaults to black.\n * @property {string} [baseUnit=\"px\"] Set in Editor Options.\n * @property {Float} [snappingStep=10] Set the default grid snapping value. Set in Editor Options.\n * @property {boolean} [showRulers=true] Initial state of ruler display (v2.6). Set in Editor Options.\n * @property {string} [initTool=\"select\"] The initially selected tool. Must be either the ID of the button for the tool, or the ID without `tool_` prefix (e.g., \"select\").\n * @property {boolean} [wireframe=false] Start in wireframe mode\n * @property {boolean} [showlayers=false] Open the layers side-panel by default.\n * @property {\"new\"|\"same\"} [exportWindowType=\"new\"] Can be \"new\" or \"same\" to indicate whether new windows will be generated for each export; the `window.name` of the export window is namespaced based on the `canvasName` (and incremented if \"new\" is selected as the type). Introduced 2.8.\n * @property {boolean} [showGrid=false] Set by `ext-grid.js`; determines whether or not to show the grid by default\n * @property {boolean} [show_outside_canvas=true] Defines whether or not elements outside the canvas should be visible. Set and used in `svgcanvas.js`.\n * @property {boolean} [selectNew=true] If true, will replace the selection with the current element and automatically select element objects (when not in \"path\" mode) after they are created, showing their grips (v2.6). Set and used in `svgcanvas.js` (`mouseUp`).\n * @todo Some others could be preferences as well (e.g., preventing URL changing of extensions, defaultExtensions, stylesheets, colorPickerCSS); Change the following to preferences and add pref controls where missing to the UI (e.g., `canvas_expansion`, `initFill`, `initStroke`, `text`, `initOpacity`, `dimensions`, `initTool`, `wireframe`, `showlayers`, `gridSnapping`, `gridColor`, `baseUnit`, `snappingStep`, `showRulers`, `exportWindowType`, `showGrid`, `show_outside_canvas`, `selectNew`)?\n */\n /**\n * @namespace {module:SVGEditor.Config} defaultConfig\n * @memberof module:SVGEditor~\n * @implements {module:SVGEditor.Config}\n */\n defaultConfig = {\n canvasName: 'default',\n canvas_expansion: 3,\n initFill: {\n color: 'FF0000', // solid red\n opacity: 1\n },\n initStroke: {\n width: 5,\n color: '000000', // solid black\n opacity: 1\n },\n text: {\n stroke_width: 0,\n font_size: 24,\n font_family: 'serif'\n },\n initOpacity: 1,\n colorPickerCSS: null, // Defaults to 'left' with a position equal to that of the fill_color or stroke_color element minus 140, and a 'bottom' equal to 40\n initTool: 'select',\n exportWindowType: 'new', // 'same' (todo: also support 'download')\n wireframe: false,\n showlayers: false,\n no_save_warning: false,\n // PATH CONFIGURATION\n // The following path configuration items are disallowed in the URL (as should any future path configurations)\n langPath: 'locale/', // Default will be changed if this is a non-modular load\n extPath: 'extensions/', // Default will be changed if this is a non-modular load\n canvgPath: 'canvg/', // Default will be changed if this is a non-modular load\n jspdfPath: 'jspdf/', // Default will be changed if this is a non-modular load\n imgPath: 'images/',\n jGraduatePath: 'jgraduate/images/',\n extIconsPath: 'extensions/',\n // DOCUMENT PROPERTIES\n // Change the following to a preference (already in the Document Properties dialog)?\n dimensions: [640, 480],\n // EDITOR OPTIONS\n // Change the following to preferences (already in the Editor Options dialog)?\n gridSnapping: false,\n gridColor: '#000',\n baseUnit: 'px',\n snappingStep: 10,\n showRulers: true,\n // URL BEHAVIOR CONFIGURATION\n preventAllURLConfig: false,\n preventURLContentLoading: false,\n // EXTENSION CONFIGURATION (see also preventAllURLConfig)\n lockExtensions: false, // Disallowed in URL setting\n noDefaultExtensions: false, // noDefaultExtensions can only be meaningfully used in `svgedit-config-iife.js` or in the URL\n // EXTENSION-RELATED (GRID)\n showGrid: false, // Set by ext-grid.js\n // EXTENSION-RELATED (STORAGE)\n noStorageOnLoad: false, // Some interaction with ext-storage.js; prevent even the loading of previously saved local storage\n forceStorage: false, // Some interaction with ext-storage.js; strongly discouraged from modification as it bypasses user privacy by preventing them from choosing whether to keep local storage or not\n emptyStorageOnDecline: false, // Used by ext-storage.js; empty any prior storage if the user declines to store\n // EXTENSION (CLIENT VS. SERVER SAVING/OPENING)\n avoidClientSide: false, // Deprecated in favor of `avoidClientSideDownload`\n avoidClientSideDownload: false,\n avoidClientSideOpen: false\n },\n /**\n * LOCALE.\n * @name module:SVGEditor.uiStrings\n * @type {PlainObject}\n */\n uiStrings = editor.uiStrings = {};\n\nlet svgCanvas, urldata = {},\n isReady = false,\n customExportImage = false,\n customExportPDF = false,\n curPrefs = {},\n // Note: The difference between Prefs and Config is that Prefs\n // can be changed in the UI and are stored in the browser,\n // while config cannot\n curConfig = {\n // We do not put on defaultConfig to simplify object copying\n // procedures (we obtain instead from defaultExtensions)\n extensions: [],\n stylesheets: [],\n /**\n * Can use `location.origin` to indicate the current\n * origin. Can contain a '*' to allow all domains or 'null' (as\n * a string) to support all `file:///` URLs. Cannot be set by\n * URL for security reasons (not safe, at least for\n * privacy or data integrity of SVG content).\n * Might have been fairly safe to allow\n * `new URL(location.href).origin` by default but\n * avoiding it ensures some more security that even third\n * party apps on the same domain also cannot communicate\n * with this app by default.\n * For use with `ext-xdomain-messaging.js`\n * @todo We might instead make as a user-facing preference.\n */\n allowedOrigins: []\n };\n\n/**\n *\n * @param {string} str SVG string\n * @param {PlainObject} [opts={}]\n * @param {boolean} [opts.noAlert]\n * @throws {Error} Upon failure to load SVG\n * @returns {Promise<void>} Resolves to undefined upon success (or if `noAlert` is\n * falsey, though only until after the `alert` is closed); rejects if SVG\n * loading fails and `noAlert` is truthy.\n */\nasync function loadSvgString (str, {noAlert} = {}) {\n const success = svgCanvas.setSvgString(str) !== false;\n if (success) {\n return;\n }\n\n if (!noAlert) {\n await $.alert(uiStrings.notification.errorLoadingSVG);\n return;\n }\n throw new Error('Error loading SVG');\n}\n\n/**\n * @function module:SVGEditor~getImportLocale\n * @param {PlainObject} defaults\n * @param {string} defaults.defaultLang\n * @param {string} defaults.defaultName\n * @returns {module:SVGEditor~ImportLocale}\n */\nfunction getImportLocale ({defaultLang, defaultName}) {\n /**\n * @function module:SVGEditor~ImportLocale\n * @param {PlainObject} localeInfo\n * @param {string} [localeInfo.name] Defaults to `defaultName` of {@link module:SVGEditor~getImportLocale}\n * @param {string} [localeInfo.lang=defaultLang] Defaults to `defaultLang` of {@link module:SVGEditor~getImportLocale}\n * @returns {Promise<module:locale.LocaleStrings>} Resolves to {@link module:locale.LocaleStrings}\n */\n return async function importLocaleDefaulting ({name = defaultName, lang = defaultLang} = {}) {\n /**\n *\n * @param {string} language\n * @returns {Promise<module:locale.LocaleStrings>} Resolves to {@link module:locale.LocaleStrings}\n */\n function importLocale (language) {\n const url = `${curConfig.extPath}ext-locale/${name}/${language}.js`;\n return importSetGlobalDefault(url, {\n global: `svgEditorExtensionLocale_${name}_${language.replace(/-/g, '_')}`\n });\n }\n try {\n return await importLocale(lang);\n } catch (err) {\n return importLocale('en');\n }\n };\n}\n\n/**\n* EXPORTS.\n*/\n\n/**\n* Store and retrieve preferences.\n* @param {string} key The preference name to be retrieved or set\n* @param {string} [val] The value. If the value supplied is missing or falsey, no change to the preference will\n* be made unless `mayBeEmpty` is set.\n* @param {boolean} [mayBeEmpty] If value may be falsey.\n* @returns {string|void} If val is missing or falsey and `mayBeEmpty` is not set, the\n* value of the previously stored preference will be returned.\n* @todo Review whether any remaining existing direct references to\n* getting `curPrefs` can be changed to use `svgEditor.pref()` getting to ensure\n* `defaultPrefs` fallback (also for sake of `allowInitialUserOverride`);\n* specifically, `bkgd_color` could be changed so that the pref dialog has a\n* button to auto-calculate background, but otherwise uses `svgEditor.pref()` to\n* be able to get default prefs or overridable settings\n*/\neditor.pref = function (key, val, mayBeEmpty) {\n if (mayBeEmpty || val) {\n curPrefs[key] = val;\n /**\n * @name curPrefs\n * @memberof module:SVGEditor\n * @implements {module:SVGEditor.Prefs}\n */\n editor.curPrefs = curPrefs; // Update exported value\n return undefined;\n }\n return (key in curPrefs) ? curPrefs[key] : defaultPrefs[key];\n};\n\n/*\n* EDITOR PUBLIC METHODS\n// Todo: Sort these methods per invocation order, ideally with init at the end\n// Todo: Prevent execution until init executes if dependent on it?\n*/\neditor.putLocale = putLocale;\neditor.readLang = readLang;\neditor.setStrings = setStrings;\n\n/**\n* Where permitted, sets canvas and/or `defaultPrefs` based on previous\n* storage. This will override URL settings (for security reasons) but\n* not `svgedit-config-iife.js` configuration (unless initial user\n* overriding is explicitly permitted there via `allowInitialUserOverride`).\n* @todo Split `allowInitialUserOverride` into `allowOverrideByURL` and\n* `allowOverrideByUserStorage` so `svgedit-config-iife.js` can disallow some\n* individual items for URL setting but allow for user storage AND/OR\n* change URL setting so that it always uses a different namespace,\n* so it won't affect pre-existing user storage (but then if users saves\n* that, it will then be subject to tampering\n* @returns {void}\n*/\neditor.loadContentAndPrefs = function () {\n if (!curConfig.forceStorage &&\n (curConfig.noStorageOnLoad ||\n !document.cookie.match(/(?:^|;\\s*)svgeditstore=(?:prefsAndContent|prefsOnly)/)\n )\n ) {\n return;\n }\n\n // LOAD CONTENT\n if (editor.storage && // Cookies do not have enough available memory to hold large documents\n (curConfig.forceStorage ||\n (!curConfig.noStorageOnLoad &&\n document.cookie.match(/(?:^|;\\s*)svgeditstore=prefsAndContent/))\n )\n ) {\n const name = 'svgedit-' + curConfig.canvasName;\n const cached = editor.storage.getItem(name);\n if (cached) {\n editor.loadFromString(cached);\n }\n }\n\n // LOAD PREFS\n Object.keys(defaultPrefs).forEach((key) => {\n const storeKey = 'svg-edit-' + key;\n if (editor.storage) {\n const val = editor.storage.getItem(storeKey);\n if (val) {\n defaultPrefs[key] = String(val); // Convert to string for FF (.value fails in Webkit)\n }\n } else if (window.widget) {\n defaultPrefs[key] = window.widget.preferenceForKey(storeKey);\n } else {\n const result = document.cookie.match(new RegExp('(?:^|;\\\\s*)' + Utils.regexEscape(encodeURIComponent(storeKey)) + '=([^;]+)'));\n defaultPrefs[key] = result ? decodeURIComponent(result[1]) : '';\n }\n });\n};\n\n/**\n* Allows setting of preferences or configuration (including extensions).\n* @param {module:SVGEditor.Config|module:SVGEditor.Prefs} opts The preferences or configuration (including extensions). See the tutorial on {@tutorial ConfigOptions} for info on config and preferences.\n* @param {PlainObject} [cfgCfg] Describes configuration which applies to the\n* particular batch of supplied options\n* @param {boolean} [cfgCfg.allowInitialUserOverride=false] Set to true if you wish\n* to allow initial overriding of settings by the user via the URL\n* (if permitted) or previously stored preferences (if permitted);\n* note that it will be too late if you make such calls in extension\n* code because the URL or preference storage settings will\n* have already taken place.\n* @param {boolean} [cfgCfg.overwrite=true] Set to false if you wish to\n* prevent the overwriting of prior-set preferences or configuration\n* (URL settings will always follow this requirement for security\n* reasons, so `svgedit-config-iife.js` settings cannot be overridden unless it\n* explicitly permits via `allowInitialUserOverride` but extension config\n* can be overridden as they will run after URL settings). Should\n* not be needed in `svgedit-config-iife.js`.\n* @returns {void}\n*/\neditor.setConfig = function (opts, cfgCfg) {\n cfgCfg = cfgCfg || {};\n /**\n *\n * @param {module:SVGEditor.Config|module:SVGEditor.Prefs} cfgObj\n * @param {string} key\n * @param {any} val See {@link module:SVGEditor.Config} or {@link module:SVGEditor.Prefs}\n * @returns {void}\n */\n function extendOrAdd (cfgObj, key, val) {\n if (cfgObj[key] && typeof cfgObj[key] === 'object') {\n $.extend(true, cfgObj[key], val);\n } else {\n cfgObj[key] = val;\n }\n }\n Object.entries(opts).forEach(function ([key, val]) {\n // Only allow prefs defined in defaultPrefs or...\n if ({}.hasOwnProperty.call(defaultPrefs, key)) {\n if (cfgCfg.overwrite === false && (\n curConfig.preventAllURLConfig ||\n {}.hasOwnProperty.call(curPrefs, key)\n )) {\n return;\n }\n if (cfgCfg.allowInitialUserOverride === true) {\n defaultPrefs[key] = val;\n } else {\n editor.pref(key, val);\n }\n } else if (['extensions', 'stylesheets', 'allowedOrigins'].includes(key)) {\n if (cfgCfg.overwrite === false &&\n (\n curConfig.preventAllURLConfig ||\n ['allowedOrigins', 'stylesheets'].includes(key) ||\n (key === 'extensions' && curConfig.lockExtensions)\n )\n ) {\n return;\n }\n curConfig[key] = curConfig[key].concat(val); // We will handle any dupes later\n // Only allow other curConfig if defined in defaultConfig\n } else if ({}.hasOwnProperty.call(defaultConfig, key)) {\n if (cfgCfg.overwrite === false && (\n curConfig.preventAllURLConfig ||\n {}.hasOwnProperty.call(curConfig, key)\n )) {\n return;\n }\n // Potentially overwriting of previously set config\n if ({}.hasOwnProperty.call(curConfig, key)) {\n if (cfgCfg.overwrite === false) {\n return;\n }\n extendOrAdd(curConfig, key, val);\n } else if (cfgCfg.allowInitialUserOverride === true) {\n extendOrAdd(defaultConfig, key, val);\n } else if (defaultConfig[key] && typeof defaultConfig[key] === 'object') {\n curConfig[key] = Array.isArray(defaultConfig[key]) ? [] : {};\n $.extend(true, curConfig[key], val); // Merge properties recursively, e.g., on initFill, initStroke objects\n } else {\n curConfig[key] = val;\n }\n }\n });\n /**\n * @name curConfig\n * @memberof module:SVGEditor\n * @implements {module:SVGEditor.Config}\n */\n editor.curConfig = curConfig; // Update exported value\n};\n\n/**\n* All methods are optional.\n* @interface module:SVGEditor.CustomHandler\n* @type {PlainObject}\n*/\n/**\n* Its responsibilities are:\n* - invoke a file chooser dialog in 'open' mode\n* - let user pick a SVG file\n* - calls [svgCanvas.setSvgString()]{@link module:svgcanvas.SvgCanvas#setSvgString} with the string contents of that file.\n* Not passed any parameters.\n* @function module:SVGEditor.CustomHandler#open\n* @returns {void}\n*/\n/**\n* Its responsibilities are:\n* - accept the string contents of the current document\n* - invoke a file chooser dialog in 'save' mode\n* - save the file to location chosen by the user.\n* @function module:SVGEditor.CustomHandler#save\n* @param {external:Window} win\n* @param {module:svgcanvas.SvgCanvas#event:saved} svgStr A string of the SVG\n* @listens module:svgcanvas.SvgCanvas#event:saved\n* @returns {void}\n*/\n/**\n* Its responsibilities (with regard to the object it is supplied in its 2nd argument) are:\n* - inform user of any issues supplied via the \"issues\" property\n* - convert the \"svg\" property SVG string into an image for export;\n* utilize the properties \"type\" (currently 'PNG', 'JPEG', 'BMP',\n* 'WEBP', 'PDF'), \"mimeType\", and \"quality\" (for 'JPEG' and 'WEBP'\n* types) to determine the proper output.\n* @function module:SVGEditor.CustomHandler#exportImage\n* @param {external:Window} win\n* @param {module:svgcanvas.SvgCanvas#event:exported} data\n* @listens module:svgcanvas.SvgCanvas#event:exported\n* @returns {void}\n*/\n/**\n* @function module:SVGEditor.CustomHandler#exportPDF\n* @param {external:Window} win\n* @param {module:svgcanvas.SvgCanvas#event:exportedPDF} data\n* @listens module:svgcanvas.SvgCanvas#event:exportedPDF\n* @returns {void}\n*/\n\n/**\n* Allows one to override default SVGEdit `open`, `save`, and\n* `export` editor behaviors.\n* @param {module:SVGEditor.CustomHandler} opts Extension mechanisms may call `setCustomHandlers` with three functions: `opts.open`, `opts.save`, and `opts.exportImage`\n* @returns {Promise<void>}\n*/\neditor.setCustomHandlers = function (opts) {\n return editor.ready(function () {\n if (opts.open) {\n $('#tool_open > input[type=\"file\"]').remove();\n $('#tool_open').show();\n svgCanvas.open = opts.open;\n }\n if (opts.save) {\n editor.showSaveWarning = false;\n svgCanvas.bind('saved', opts.save);\n }\n if (opts.exportImage) {\n customExportImage = opts.exportImage;\n svgCanvas.bind('exported', customExportImage); // canvg and our RGBColor will be available to the method\n }\n if (opts.exportPDF) {\n customExportPDF = opts.exportPDF;\n svgCanvas.bind('exportedPDF', customExportPDF); // jsPDF and our RGBColor will be available to the method\n }\n });\n};\n\n/**\n* @param {boolean} arg\n* @returns {void}\n*/\neditor.randomizeIds = function (arg) {\n svgCanvas.randomizeIds(arg);\n};\n\n/**\n* Auto-run after a Promise microtask.\n* @returns {void}\n*/\neditor.init = function () {\n const modularVersion = !('svgEditor' in window) ||\n !window.svgEditor ||\n window.svgEditor.modules !== false;\n if (!modularVersion) {\n Object.assign(defaultConfig, {\n langPath: '../dist/locale/',\n extPath: '../dist/extensions/',\n canvgPath: '../dist/',\n jspdfPath: '../dist/'\n });\n }\n\n // const host = location.hostname,\n // onWeb = host && host.includes('.');\n // Some FF versions throw security errors here when directly accessing\n try {\n if ('localStorage' in window) { // && onWeb removed so Webkit works locally\n /**\n * The built-in interface implemented by `localStorage`\n * @external Storage\n */\n /**\n * @name storage\n * @memberof module:SVGEditor\n * @type {external:Storage}\n */\n editor.storage = localStorage;\n }\n } catch (err) {}\n\n // Todo: Avoid const-defined functions and group functions together, etc. where possible\n const goodLangs = [];\n $('#lang_select option').each(function () {\n goodLangs.push(this.value);\n });\n\n /**\n * Sets up current preferences based on defaults.\n * @returns {void}\n */\n function setupCurPrefs () {\n curPrefs = $.extend(true, {}, defaultPrefs, curPrefs); // Now safe to merge with priority for curPrefs in the event any are already set\n // Export updated prefs\n editor.curPrefs = curPrefs;\n }\n\n /**\n * Sets up current config based on defaults.\n * @returns {void}\n */\n function setupCurConfig () {\n curConfig = $.extend(true, {}, defaultConfig, curConfig); // Now safe to merge with priority for curConfig in the event any are already set\n\n // Now deal with extensions and other array config\n if (!curConfig.noDefaultExtensions) {\n curConfig.extensions = curConfig.extensions.concat(defaultExtensions);\n }\n // ...and remove any dupes\n ['extensions', 'stylesheets', 'allowedOrigins'].forEach(function (cfg) {\n curConfig[cfg] = $.grep(curConfig[cfg], function (n, i) { // Supposedly faster than filter per http://amandeep1986.blogspot.hk/2015/02/jquery-grep-vs-js-filter.html\n return i === curConfig[cfg].indexOf(n);\n });\n });\n // Export updated config\n editor.curConfig = curConfig;\n }\n (() => {\n // Load config/data from URL if given\n const {search, searchParams} = new URL(location);\n\n if (search) {\n urldata = deparam(searchParams.toString(), true);\n\n ['initStroke', 'initFill'].forEach((prop) => {\n if (searchParams.has(`${prop}[color]`)) {\n // Restore back to original non-deparamed value to avoid color\n // strings being converted to numbers\n urldata[prop].color = searchParams.get(`${prop}[color]`);\n }\n });\n\n if (searchParams.has('bkgd_color')) {\n urldata.bkgd_color = '#' + searchParams.get('bkgd_color');\n }\n\n if (urldata.dimensions) {\n urldata.dimensions = urldata.dimensions.split(',');\n }\n\n if (urldata.extensions) {\n // For security reasons, disallow cross-domain or cross-folder\n // extensions via URL\n urldata.extensions = urldata.extensions.match(/[:/\\\\]/)\n ? ''\n : urldata.extensions.split(',');\n }\n\n // Disallowing extension paths via URL for\n // security reasons, even for same-domain\n // ones given potential to interact in undesirable\n // ways with other script resources\n [\n 'langPath', 'extPath', 'canvgPath', 'jspdfPath',\n 'imgPath', 'jGraduatePath', 'extIconsPath'\n ].forEach(function (pathConfig) {\n if (urldata[pathConfig]) {\n delete urldata[pathConfig];\n }\n });\n\n // Note: `source` and `url` (as with `storagePrompt` later) are not\n // set on config but are used below\n editor.setConfig(urldata, {overwrite: false});\n setupCurConfig();\n\n if (!curConfig.preventURLContentLoading) {\n let {source} = urldata;\n if (!source) { // urldata.source may have been null if it ended with '='\n const src = searchParams.get('source');\n if (src && src.startsWith('data:')) {\n source = src;\n }\n }\n if (source) {\n if (source.startsWith('data:')) {\n editor.loadFromDataURI(source);\n } else {\n editor.loadFromString(source);\n }\n return;\n }\n if (urldata.url) {\n editor.loadFromURL(urldata.url);\n return;\n }\n }\n if (!urldata.noStorageOnLoad || curConfig.forceStorage) {\n editor.loadContentAndPrefs();\n }\n } else {\n setupCurConfig();\n editor.loadContentAndPrefs();\n }\n })();\n setupCurPrefs();\n\n /**\n * Called internally.\n * @param {string|Element|external:jQuery} elem\n * @param {string|external:jQuery} iconId\n * @param {Float} forcedSize Not in use\n * @returns {void}\n */\n const setIcon = editor.setIcon = function (elem, iconId, forcedSize) {\n const icon = (typeof iconId === 'string') ? $.getSvgIcon(iconId, true) : iconId.clone();\n if (!icon) {\n // Todo: Investigate why this still occurs in some cases\n console.log('NOTE: Icon image missing: ' + iconId); // eslint-disable-line no-console\n return;\n }\n $(elem).empty().append(icon);\n };\n\n /**\n * @fires module:svgcanvas.SvgCanvas#event:ext_addLangData\n * @fires module:svgcanvas.SvgCanvas#event:ext_langReady\n * @fires module:svgcanvas.SvgCanvas#event:ext_langChanged\n * @fires module:svgcanvas.SvgCanvas#event:extensions_added\n * @returns {Promise<module:locale.LangAndData>} Resolves to result of {@link module:locale.readLang}\n */\n const extAndLocaleFunc = async function () {\n // const lang = ('lang' in curPrefs) ? curPrefs.lang : null;\n const {langParam, langData} = await editor.putLocale(\n editor.pref('lang'), goodLangs, curConfig\n );\n await setLang(langParam, langData);\n\n const {ok, cancel} = uiStrings.common;\n jQueryPluginDBox($, {ok, cancel});\n\n setIcons(); // Wait for dbox as needed for i18n\n\n try {\n await Promise.all(\n curConfig.extensions.map(async (extname) => {\n const extName = extname.match(/^ext-(.+)\\.js/);\n // const {extName} = extname.match(/^ext-(?<extName>.+)\\.js/).groups;\n if (!extName) { // Ensure URL cannot specify some other unintended file in the extPath\n return undefined;\n }\n const url = curConfig.extPath + extname;\n // Todo: Replace this with `return import(url);` when\n // `import()` widely supported\n /**\n * @tutorial ExtensionDocs\n * @typedef {PlainObject} module:SVGEditor.ExtensionObject\n * @property {string} [name] Name of the extension. Used internally; no need for i18n. Defaults to extension name without beginning \"ext-\" or ending \".js\".\n * @property {module:svgcanvas.ExtensionInitCallback} [init]\n */\n try {\n /**\n * @type {module:SVGEditor.ExtensionObject}\n */\n const imported = await importSetGlobalDefault(url, {\n global: 'svgEditorExtension_' + extName[1].replace(/-/g, '_')\n // global: 'svgEditorExtension_' + extName.replace(/-/g, '_')\n });\n const {name = extName[1], init} = imported;\n // const {name = extName, init} = imported;\n const importLocale = getImportLocale({defaultLang: langParam, defaultName: name});\n return editor.addExtension(name, (init && init.bind(editor)), {$, importLocale});\n } catch (err) {\n // Todo: Add config to alert any errors\n console.log(err); // eslint-disable-line no-console\n console.error('Extension failed to load: ' + extname + '; ' + err); // eslint-disable-line no-console\n return undefined;\n }\n })\n );\n svgCanvas.bind(\n 'extensions_added',\n /**\n * @param {external:Window} win\n * @param {module:svgcanvas.SvgCanvas#event:extensions_added} data\n * @listens module:svgcanvas.SvgCanvas#event:extensions_added\n * @returns {void}\n */\n (win, data) => {\n extensionsAdded = true;\n Actions.setAll();\n\n $('.flyout_arrow_horiz:empty').each(function () {\n $(this).append($.getSvgIcon('arrow_right', true).width(5).height(5));\n });\n\n if (editor.storagePromptState === 'ignore') {\n updateCanvas(true);\n }\n\n messageQueue.forEach(\n /**\n * @param {module:svgcanvas.SvgCanvas#event:message} messageObj\n * @fires module:svgcanvas.SvgCanvas#event:message\n * @returns {void}\n */\n (messageObj) => {\n svgCanvas.call('message', messageObj);\n }\n );\n }\n );\n svgCanvas.call('extensions_added');\n } catch (err) {\n // Todo: Report errors through the UI\n console.log(err); // eslint-disable-line no-console\n }\n };\n\n const stateObj = {tool_scale: editor.tool_scale};\n\n /**\n *\n * @returns {void}\n */\n const setFlyoutPositions = function () {\n $('.tools_flyout').each(function () {\n const shower = $('#' + this.id + '_show');\n const {left, top} = shower.offset();\n const w = shower.outerWidth();\n $(this).css({left: (left + w) * editor.tool_scale, top});\n });\n };\n\n /**\n * @type {string}\n */\n const uaPrefix = (function () {\n const regex = /^(?:Moz|Webkit|Khtml|O|ms|Icab)(?=[A-Z])/;\n const someScript = document.getElementsByTagName('script')[0];\n for (const prop in someScript.style) {\n if (regex.test(prop)) {\n // test is faster than match, so it's better to perform\n // that on the lot and match only when necessary\n return prop.match(regex)[0];\n }\n }\n // Nothing found so far?\n if ('WebkitOpacity' in someScript.style) { return 'Webkit'; }\n if ('KhtmlOpacity' in someScript.style) { return 'Khtml'; }\n\n return '';\n }());\n\n /**\n * @param {external:jQuery} elems\n * @param {Float} scale\n * @returns {void}\n */\n const scaleElements = function (elems, scale) {\n // const prefix = '-' + uaPrefix.toLowerCase() + '-'; // Currently unused\n const sides = ['top', 'left', 'bottom', 'right'];\n\n elems.each(function () {\n // Handled in CSS\n // this.style[uaPrefix + 'Transform'] = 'scale(' + scale + ')';\n const el = $(this);\n const w = el.outerWidth() * (scale - 1);\n const h = el.outerHeight() * (scale - 1);\n // const margins = {}; // Currently unused\n\n for (let i = 0; i < 4; i++) {\n const s = sides[i];\n let cur = el.data('orig_margin-' + s);\n if (Utils.isNullish(cur)) {\n cur = parseInt(el.css('margin-' + s));\n // Cache the original margin\n el.data('orig_margin-' + s, cur);\n }\n let val = cur * scale;\n if (s === 'right') {\n val += w;\n } else if (s === 'bottom') {\n val += h;\n }\n\n el.css('margin-' + s, val);\n // el.css('outline', '1px solid red');\n }\n });\n };\n\n /**\n * Called internally.\n * @param {module:SVGEditor.IconSize} size\n * @returns {void}\n */\n const setIconSize = editor.setIconSize = function (size) {\n // const elems = $('.tool_button, .push_button, .tool_button_current, .disabled, .icon_label, #url_notice, #tool_open');\n const selToscale = '#tools_top .toolset, #editor_panel > *, #history_panel > *,' +\n ' #main_button, #tools_left > *, #path_node_panel > *, #multiselected_panel > *,' +\n ' #g_panel > *, #tool_font_size > *, .tools_flyout';\n\n const elems = $(selToscale);\n\n let scale = 1;\n if (typeof size === 'number') {\n scale = size;\n } else {\n const iconSizes = {s: 0.75, m: 1, l: 1.25, xl: 1.5};\n scale = iconSizes[size];\n }\n\n stateObj.tool_scale = editor.tool_scale = scale;\n\n setFlyoutPositions();\n // $('.tools_flyout').each(function () {\n // const pos = $(this).position();\n // console.log($(this), pos.left+(34 * scale));\n // $(this).css({left: pos.left+(34 * scale), top: pos.top+(77 * scale)});\n // console.log('l', $(this).css('left'));\n // });\n //\n // const scale = .75;\n\n const hiddenPs = elems.parents(':hidden');\n hiddenPs.css('visibility', 'hidden').show();\n scaleElements(elems, scale);\n hiddenPs.css('visibility', 'visible').hide();\n // return;\n\n editor.pref('iconsize', size);\n $('#iconsize').val(size);\n\n // Change icon size\n // $('.tool_button, .push_button, .tool_button_current, .disabled, .icon_label, #url_notice, #tool_open')\n // .find('> svg, > img').each(function () {\n // this.setAttribute('width',size_num);\n // this.setAttribute('height',size_num);\n // });\n //\n // $.resizeSvgIcons({\n // '.flyout_arrow_horiz > svg, .flyout_arrow_horiz > img': size_num / 5,\n // '#logo > svg, #logo > img': size_num * 1.3,\n // '#tools_bottom .icon_label > *': (size_num === 16 ? 18 : size_num * .75)\n // });\n // if (size != 's') {\n // $.resizeSvgIcons({'#layerbuttons svg, #layerbuttons img': size_num * .6});\n // }\n\n // Note that all rules will be prefixed with '#svg_editor' when parsed\n const cssResizeRules = {\n // '.tool_button,\\\n // .push_button,\\\n // .tool_button_current,\\\n // .push_button_pressed,\\\n // .disabled,\\\n // .icon_label,\\\n // .tools_flyout .tool_button': {\n // width: {s: '16px', l: '32px', xl: '48px'},\n // height: {s: '16px', l: '32px', xl: '48px'},\n // padding: {s: '1px', l: '2px', xl: '3px'}\n // },\n // '.tool_sep': {\n // height: {s: '16px', l: '32px', xl: '48px'},\n // margin: {s: '2px 2px', l: '2px 5px', xl: '2px 8px'}\n // },\n // '#main_icon': {\n // width: {s: '31px', l: '53px', xl: '75px'},\n // height: {s: '22px', l: '42px', xl: '64px'}\n // },\n '#tools_top': {\n left: 50 + $('#main_button').width(),\n height: 72\n },\n '#tools_left': {\n width: 31,\n top: 74\n },\n 'div#workarea': {\n left: 38,\n top: 74\n }\n // '#tools_bottom': {\n // left: {s: '27px', l: '46px', xl: '65px'},\n // height: {s: '58px', l: '98px', xl: '145px'}\n // },\n // '#color_tools': {\n // 'border-spacing': {s: '0 1px'},\n // 'margin-top': {s: '-1px'}\n // },\n // '#color_tools .icon_label': {\n // width: {l:'43px', xl: '60px'}\n // },\n // '.color_tool': {\n // height: {s: '20px'}\n // },\n // '#tool_opacity': {\n // top: {s: '1px'},\n // height: {s: 'auto', l:'auto', xl:'auto'}\n // },\n // '#tools_top input, #tools_bottom input': {\n // 'margin-top': {s: '2px', l: '4px', xl: '5px'},\n // height: {s: 'auto', l: 'auto', xl: 'auto'},\n // border: {s: '1px solid #555', l: 'auto', xl: 'auto'},\n // 'font-size': {s: '.9em', l: '1.2em', xl: '1.4em'}\n // },\n // '#zoom_panel': {\n // 'margin-top': {s: '3px', l: '4px', xl: '5px'}\n // },\n // '#copyright, #tools_bottom .label': {\n // 'font-size': {l: '1.5em', xl: '2em'},\n // 'line-height': {s: '15px'}\n // },\n // '#tools_bottom_2': {\n // width: {l: '295px', xl: '355px'},\n // top: {s: '4px'}\n // },\n // '#tools_top > div, #tools_top': {\n // 'line-height': {s: '17px', l: '34px', xl: '50px'}\n // },\n // '.dropdown button': {\n // height: {s: '18px', l: '34px', xl: '40px'},\n // 'line-height': {s: '18px', l: '34px', xl: '40px'},\n // 'margin-top': {s: '3px'}\n // },\n // '#tools_top label, #tools_bottom label': {\n // 'font-size': {s: '1em', l: '1.5em', xl: '2em'},\n // height: {s: '25px', l: '42px', xl: '64px'}\n // },\n // 'div.toolset': {\n // height: {s: '25px', l: '42px', xl: '64px'}\n // },\n // '#tool_bold, #tool_italic': {\n // 'font-size': {s: '1.5em', l: '3em', xl: '4.5em'}\n // },\n // '#sidepanels': {\n // top: {s: '50px', l: '88px', xl: '125px'},\n // bottom: {s: '51px', l: '68px', xl: '65px'}\n // },\n // '#layerbuttons': {\n // width: {l: '130px', xl: '175px'},\n // height: {l: '24px', xl: '30px'}\n // },\n // '#layerlist': {\n // width: {l: '128px', xl: '150px'}\n // },\n // '.layer_button': {\n // width: {l: '19px', xl: '28px'},\n // height: {l: '19px', xl: '28px'}\n // },\n // 'input.spin-button': {\n // 'background-image': {l: 'url('images/spinbtn_updn_big.png')', xl: 'url('images/spinbtn_updn_big.png')'},\n // 'background-position': {l: '100% -5px', xl: '100% -2px'},\n // 'padding-right': {l: '24px', xl: '24px' }\n // },\n // 'input.spin-button.up': {\n // 'background-position': {l: '100% -45px', xl: '100% -42px'}\n // },\n // 'input.spin-button.down': {\n // 'background-position': {l: '100% -85px', xl: '100% -82px'}\n // },\n // '#position_opts': {\n // width: {all: (size_num*4) +'px'}\n // }\n };\n\n let ruleElem = $('#tool_size_rules');\n if (!ruleElem.length) {\n ruleElem = $('<style id=\"tool_size_rules\"></style>').appendTo('head');\n } else {\n ruleElem.empty();\n }\n\n if (size !== 'm') {\n let styleStr = '';\n $.each(cssResizeRules, function (selector, rules) {\n selector = '#svg_editor ' + selector.replace(/,/g, ', #svg_editor');\n styleStr += selector + '{';\n $.each(rules, function (prop, values) {\n let val;\n if (typeof values === 'number') {\n val = (values * scale) + 'px';\n } else if (values[size] || values.all) {\n val = (values[size] || values.all);\n }\n styleStr += (prop + ':' + val + ';');\n });\n styleStr += '}';\n });\n // this.style[uaPrefix + 'Transform'] = 'scale(' + scale + ')';\n const prefix = '-' + uaPrefix.toLowerCase() + '-';\n styleStr += (selToscale + '{' + prefix + 'transform: scale(' + scale + ');}' +\n ' #svg_editor div.toolset .toolset {' + prefix + 'transform: scale(1); margin: 1px !important;}' + // Hack for markers\n ' #svg_editor .ui-slider {' + prefix + 'transform: scale(' + (1 / scale) + ');}' // Hack for sliders\n );\n ruleElem.text(styleStr);\n }\n\n setFlyoutPositions();\n };\n\n /**\n * Setup SVG icons.\n * @returns {void}\n */\n function setIcons () {\n $.svgIcons(curConfig.imgPath + 'svg_edit_icons.svg', {\n w: 24, h: 24,\n id_match: false,\n no_img: !isWebkit(), // Opera & Firefox 4 gives odd behavior w/images\n fallback_path: curConfig.imgPath,\n // Todo: Set `alts: {}` with keys as the IDs in fallback set to\n // `uiStrings` (localized) values\n fallback: {\n logo: 'logo.png',\n\n select: 'select.png',\n select_node: 'select_node.png',\n\n square: 'square.png',\n rect: 'rect.png',\n fh_rect: 'freehand-square.png',\n circle: 'circle.png',\n ellipse: 'ellipse.png',\n fh_ellipse: 'freehand-circle.png',\n pencil: 'fhpath.png',\n pen: 'line.png',\n text: 'text.png',\n path: 'path.png',\n add_subpath: 'add_subpath.png',\n close_path: 'closepath.png',\n open_path: 'openpath.png',\n\n image: 'image.png',\n zoom: 'zoom.png',\n\n arrow_right: 'flyouth.png',\n arrow_right_big: 'arrow_right_big.png',\n arrow_down: 'dropdown.gif',\n fill: 'fill.png',\n stroke: 'stroke.png',\n opacity: 'opacity.png',\n\n new_image: 'clear.png',\n save: 'save.png',\n export: 'export.png',\n open: 'open.png',\n import: 'import.png',\n docprops: 'document-properties.png',\n source: 'source.png',\n wireframe: 'wireframe.png',\n\n undo: 'undo.png',\n redo: 'redo.png',\n\n clone: 'clone.png',\n delete: 'delete.png',\n go_up: 'go-up.png',\n go_down: 'go-down.png',\n context_menu: 'context_menu.png',\n move_bottom: 'move_bottom.png',\n move_top: 'move_top.png',\n to_path: 'to_path.png',\n link_controls: 'link_controls.png',\n reorient: 'reorient.png',\n group_elements: 'shape_group_elements.png',\n\n ungroup: 'shape_ungroup.png',\n unlink_use: 'unlink_use.png',\n width: 'width.png',\n height: 'height.png',\n c_radius: 'c_radius.png',\n angle: 'angle.png',\n blur: 'blur.png',\n fontsize: 'fontsize.png',\n align: 'align.png',\n\n align_left: 'align-left.png',\n align_center: 'align-center.png',\n align_right: 'align-right.png',\n align_top: 'align-top.png',\n align_middle: 'align-middle.png',\n align_bottom: 'align-bottom.png',\n\n linecap_butt: 'linecap_butt.png',\n linecap_square: 'linecap_square.png',\n linecap_round: 'linecap_round.png',\n linejoin_miter: 'linejoin_miter.png',\n linejoin_bevel: 'linejoin_bevel.png',\n linejoin_round: 'linejoin_round.png',\n eye: 'eye.png',\n no_color: 'no_color.png',\n\n ok: 'save.png',\n cancel: 'cancel.png',\n warning: 'warning.png',\n\n node_delete: 'node_delete.png',\n node_clone: 'node_clone.png',\n\n globe_link: 'globe_link.png',\n config: 'config.png'\n },\n placement: {\n '#logo': 'logo',\n\n '#tool_clear div,#layer_new': 'new_image',\n '#tool_save div': 'save',\n '#tool_export div': 'export',\n '#tool_open div': 'open',\n '#tool_import div': 'import',\n '#tool_source': 'source',\n '#tool_docprops > div': 'docprops',\n '#tool_editor_prefs > div': 'config',\n '#tool_editor_homepage > div': 'globe_link',\n '#tool_wireframe': 'wireframe',\n\n '#tool_undo': 'undo',\n '#tool_redo': 'redo',\n\n '#tool_select': 'select',\n '#tool_fhpath': 'pencil',\n '#tool_line': 'pen',\n '#tool_rect,#tools_rect_show': 'rect',\n '#tool_square': 'square',\n '#tool_fhrect': 'fh_rect',\n '#tool_ellipse,#tools_ellipse_show': 'ellipse',\n '#tool_circle': 'circle',\n '#tool_fhellipse': 'fh_ellipse',\n '#tool_path': 'path',\n '#tool_text,#layer_rename': 'text',\n '#tool_image': 'image',\n '#tool_zoom': 'zoom',\n\n '#tool_clone,#tool_clone_multi': 'clone',\n '#tool_node_clone': 'node_clone',\n '#layer_delete,#tool_delete,#tool_delete_multi': 'delete',\n '#tool_node_delete': 'node_delete',\n '#tool_add_subpath': 'add_subpath',\n '#tool_openclose_path': 'open_path',\n '#tool_move_top': 'move_top',\n '#tool_move_bottom': 'move_bottom',\n '#tool_topath': 'to_path',\n '#tool_node_link': 'link_controls',\n '#tool_reorient': 'reorient',\n '#tool_group_elements': 'group_elements',\n '#tool_ungroup': 'ungroup',\n '#tool_unlink_use': 'unlink_use',\n\n '#tool_alignleft, #tool_posleft': 'align_left',\n '#tool_aligncenter, #tool_poscenter': 'align_center',\n '#tool_alignright, #tool_posright': 'align_right',\n '#tool_aligntop, #tool_postop': 'align_top',\n '#tool_alignmiddle, #tool_posmiddle': 'align_middle',\n '#tool_alignbottom, #tool_posbottom': 'align_bottom',\n '#cur_position': 'align',\n\n '#linecap_butt,#cur_linecap': 'linecap_butt',\n '#linecap_round': 'linecap_round',\n '#linecap_square': 'linecap_square',\n\n '#linejoin_miter,#cur_linejoin': 'linejoin_miter',\n '#linejoin_round': 'linejoin_round',\n '#linejoin_bevel': 'linejoin_bevel',\n\n '#url_notice': 'warning',\n\n '#layer_up': 'go_up',\n '#layer_down': 'go_down',\n '#layer_moreopts': 'context_menu',\n '#layerlist td.layervis': 'eye',\n\n '#tool_source_save,#tool_docprops_save,#tool_prefs_save': 'ok',\n '#tool_source_cancel,#tool_docprops_cancel,#tool_prefs_cancel': 'cancel',\n\n '#rwidthLabel, #iwidthLabel': 'width',\n '#rheightLabel, #iheightLabel': 'height',\n '#cornerRadiusLabel span': 'c_radius',\n '#angleLabel': 'angle',\n '#linkLabel,#tool_make_link,#tool_make_link_multi': 'globe_link',\n '#zoomLabel': 'zoom',\n '#tool_fill label': 'fill',\n '#tool_stroke .icon_label': 'stroke',\n '#group_opacityLabel': 'opacity',\n '#blurLabel': 'blur',\n '#font_sizeLabel': 'fontsize',\n\n '.flyout_arrow_horiz': 'arrow_right',\n '.dropdown button, #main_button .dropdown': 'arrow_down',\n '#palette .palette_item:first, #fill_bg, #stroke_bg': 'no_color'\n },\n resize: {\n '#logo .svg_icon': 28,\n '.flyout_arrow_horiz .svg_icon': 5,\n '.layer_button .svg_icon, #layerlist td.layervis .svg_icon': 14,\n '.dropdown button .svg_icon': 7,\n '#main_button .dropdown .svg_icon': 9,\n '.palette_item:first .svg_icon': 15,\n '#fill_bg .svg_icon, #stroke_bg .svg_icon': 16,\n '.toolbar_button button .svg_icon': 16,\n '.stroke_tool div div .svg_icon': 20,\n '#tools_bottom label .svg_icon': 18\n },\n async callback (icons) {\n $('.toolbar_button button > svg, .toolbar_button button > img').each(function () {\n $(this).parent().prepend(this);\n });\n\n const tleft = $('#tools_left');\n\n let minHeight;\n if (tleft.length) {\n minHeight = tleft.offset().top + tleft.outerHeight();\n }\n\n const size = editor.pref('iconsize');\n editor.setIconSize(size || ($(window).height() < minHeight ? 's' : 'm'));\n\n // Look for any missing flyout icons from plugins\n $('.tools_flyout').each(function () {\n const shower = $('#' + this.id + '_show');\n const sel = shower.attr('data-curopt');\n // Check if there's an icon here\n if (!shower.children('svg, img').length) {\n const clone = $(sel).children().clone();\n if (clone.length) {\n clone[0].removeAttribute('style'); // Needed for Opera\n shower.append(clone);\n }\n }\n });\n\n /**\n * Since stylesheets may be added out of order, we indicate the desired order\n * for defaults and others after them (in an indeterminate order).\n * @param {string} stylesheetFile\n * @returns {Integer|PositiveInfinity}\n */\n function getStylesheetPriority (stylesheetFile) {\n switch (stylesheetFile) {\n case 'jgraduate/css/jPicker.css':\n return 1;\n case 'jgraduate/css/jGraduate.css':\n return 2;\n case 'svg-editor.css':\n return 3;\n case 'spinbtn/jQuery.SpinButton.css':\n return 4;\n default:\n return Infinity;\n }\n }\n let stylesheets = $.loadingStylesheets.sort((a, b) => {\n const priorityA = getStylesheetPriority(a);\n const priorityB = getStylesheetPriority(b);\n if (priorityA === priorityB) {\n return 0;\n }\n return priorityA > priorityB;\n });\n if (curConfig.stylesheets.length) {\n // Ensure a copy with unique items\n stylesheets = [...new Set(curConfig.stylesheets)];\n const idx = stylesheets.indexOf('@default');\n if (idx > -1) {\n stylesheets.splice(idx, 1, ...$.loadingStylesheets);\n }\n }\n await loadStylesheets(stylesheets, {\n acceptErrors ({stylesheetURL, reject, resolve}) {\n if ($.loadingStylesheets.includes(stylesheetURL)) {\n reject(new Error(`Missing expected stylesheet: ${stylesheetURL}`));\n return;\n }\n resolve();\n }\n });\n $('#svg_container')[0].style.visibility = 'visible';\n await editor.runCallbacks();\n }\n });\n }\n /**\n * @name module:SVGEditor.canvas\n * @type {module:svgcanvas.SvgCanvas}\n */\n editor.canvas = svgCanvas = new SvgCanvas(\n document.getElementById('svgcanvas'),\n curConfig\n );\n const palette = [\n // Todo: Make into configuration item?\n '#000000', '#3f3f3f', '#7f7f7f', '#bfbfbf', '#ffffff',\n '#ff0000', '#ff7f00', '#ffff00', '#7fff00',\n '#00ff00', '#00ff7f', '#00ffff', '#007fff',\n '#0000ff', '#7f00ff', '#ff00ff', '#ff007f',\n '#7f0000', '#7f3f00', '#7f7f00', '#3f7f00',\n '#007f00', '#007f3f', '#007f7f', '#003f7f',\n '#00007f', '#3f007f', '#7f007f', '#7f003f',\n '#ffaaaa', '#ffd4aa', '#ffffaa', '#d4ffaa',\n '#aaffaa', '#aaffd4', '#aaffff', '#aad4ff',\n '#aaaaff', '#d4aaff', '#ffaaff', '#ffaad4'\n ],\n modKey = (isMac() ? 'meta+' : 'ctrl+'), // ⌘\n path = svgCanvas.pathActions,\n {undoMgr} = svgCanvas,\n workarea = $('#workarea'),\n canvMenu = $('#cmenu_canvas'),\n // layerMenu = $('#cmenu_layers'), // Unused\n paintBox = {fill: null, stroke: null};\n\n let resizeTimer, curScrollPos;\n let exportWindow = null,\n defaultImageURL = curConfig.imgPath + 'logo.png',\n zoomInIcon = 'crosshair',\n zoomOutIcon = 'crosshair',\n uiContext = 'toolbars';\n\n // For external openers\n (function () {\n // let the opener know SVG Edit is ready (now that config is set up)\n const w = window.opener || window.parent;\n if (w) {\n try {\n /**\n * Triggered on a containing `document` (of `window.opener`\n * or `window.parent`) when the editor is loaded.\n * @event module:SVGEditor#event:svgEditorReadyEvent\n * @type {Event}\n * @property {true} bubbles\n * @property {true} cancelable\n */\n /**\n * @name module:SVGEditor.svgEditorReadyEvent\n * @type {module:SVGEditor#event:svgEditorReadyEvent}\n */\n const svgEditorReadyEvent = new w.CustomEvent('svgEditorReady', {\n bubbles: true,\n cancelable: true\n });\n w.document.documentElement.dispatchEvent(svgEditorReadyEvent);\n } catch (e) {}\n }\n }());\n\n /**\n *\n * @returns {void}\n */\n const setSelectMode = function () {\n const curr = $('.tool_button_current');\n if (curr.length && curr[0].id !== 'tool_select') {\n curr.removeClass('tool_button_current').addClass('tool_button');\n $('#tool_select').addClass('tool_button_current').removeClass('tool_button');\n $('#styleoverrides').text(`\n #svgcanvas svg * {\n cursor: move;\n pointer-events: all;\n }\n #svgcanvas svg {\n cursor: default;\n }\n `);\n }\n svgCanvas.setMode('select');\n workarea.css('cursor', 'auto');\n };\n\n // used to make the flyouts stay on the screen longer the very first time\n // const flyoutspeed = 1250; // Currently unused\n // let textBeingEntered = false; // Currently unused\n const origTitle = $('title:first').text();\n // Make [1,2,5] array\n const rIntervals = [];\n for (let i = 0.1; i < 1E5; i *= 10) {\n rIntervals.push(i);\n rIntervals.push(2 * i);\n rIntervals.push(5 * i);\n }\n\n /**\n * This function highlights the layer passed in (by fading out the other layers).\n * If no layer is passed in, this function restores the other layers.\n * @param {string} [layerNameToHighlight]\n * @returns {void}\n */\n const toggleHighlightLayer = function (layerNameToHighlight) {\n let i;\n const curNames = [], numLayers = svgCanvas.getCurrentDrawing().getNumLayers();\n for (i = 0; i < numLayers; i++) {\n curNames[i] = svgCanvas.getCurrentDrawing().getLayerName(i);\n }\n\n if (layerNameToHighlight) {\n curNames.forEach((curName) => {\n if (curName !== layerNameToHighlight) {\n svgCanvas.getCurrentDrawing().setLayerOpacity(curName, 0.5);\n }\n });\n } else {\n curNames.forEach((curName) => {\n svgCanvas.getCurrentDrawing().setLayerOpacity(curName, 1.0);\n });\n }\n };\n\n /**\n *\n * @returns {void}\n */\n const populateLayers = function () {\n svgCanvas.clearSelection();\n const layerlist = $('#layerlist tbody').empty();\n const selLayerNames = $('#selLayerNames').empty();\n const drawing = svgCanvas.getCurrentDrawing();\n const currentLayerName = drawing.getCurrentLayerName();\n const icon = $.getSvgIcon('eye');\n let layer = svgCanvas.getCurrentDrawing().getNumLayers();\n // we get the layers in the reverse z-order (the layer rendered on top is listed first)\n while (layer--) {\n const name = drawing.getLayerName(layer);\n const layerTr = $('<tr class=\"layer\">').toggleClass('layersel', name === currentLayerName);\n const layerVis = $('<td class=\"layervis\">').toggleClass('layerinvis', !drawing.getLayerVisibility(name));\n const layerName = $('<td class=\"layername\">' + name + '</td>');\n layerlist.append(layerTr.append(layerVis, layerName));\n selLayerNames.append('<option value=\"' + name + '\">' + name + '</option>');\n }\n if (icon !== undefined) {\n const copy = icon.clone();\n $('td.layervis', layerlist).append(copy);\n $.resizeSvgIcons({'td.layervis .svg_icon': 14});\n }\n // handle selection of layer\n $('#layerlist td.layername')\n .mouseup(function (evt) {\n $('#layerlist tr.layer').removeClass('layersel');\n $(this.parentNode).addClass('layersel');\n svgCanvas.setCurrentLayer(this.textContent);\n evt.preventDefault();\n })\n .mouseover(function () {\n toggleHighlightLayer(this.textContent);\n })\n .mouseout(function () {\n toggleHighlightLayer();\n });\n $('#layerlist td.layervis').click(function () {\n const row = $(this.parentNode).prevAll().length;\n const name = $('#layerlist tr.layer:eq(' + row + ') td.layername').text();\n const vis = $(this).hasClass('layerinvis');\n svgCanvas.setLayerVisibility(name, vis);\n $(this).toggleClass('layerinvis');\n });\n\n // if there were too few rows, let's add a few to make it not so lonely\n let num = 5 - $('#layerlist tr.layer').size();\n while (num-- > 0) {\n // TODO: there must a better way to do this\n layerlist.append('<tr><td style=\"color:white\">_</td><td/></tr>');\n }\n };\n\n let editingsource = false;\n let origSource = '';\n\n /**\n * @param {Event} [e] Not used.\n * @param {boolean} forSaving\n * @returns {void}\n */\n const showSourceEditor = function (e, forSaving) {\n if (editingsource) { return; }\n\n editingsource = true;\n origSource = svgCanvas.getSvgString();\n $('#save_output_btns').toggle(Boolean(forSaving));\n $('#tool_source_back').toggle(!forSaving);\n $('#svg_source_textarea').val(origSource);\n $('#svg_source_editor').fadeIn();\n $('#svg_source_textarea').focus();\n };\n\n let selectedElement = null;\n let multiselected = false;\n\n /**\n * @param {boolean} editmode\n * @param {module:svgcanvas.SvgCanvas#event:selected} elems\n * @returns {void}\n */\n const togglePathEditMode = function (editmode, elems) {\n $('#path_node_panel').toggle(editmode);\n $('#tools_bottom_2,#tools_bottom_3').toggle(!editmode);\n if (editmode) {\n // Change select icon\n $('.tool_button_current').removeClass('tool_button_current').addClass('tool_button');\n $('#tool_select').addClass('tool_button_current').removeClass('tool_button');\n setIcon('#tool_select', 'select_node');\n multiselected = false;\n if (elems.length) {\n selectedElement = elems[0];\n }\n } else {\n setTimeout(() => {\n setIcon('#tool_select', 'select');\n }, 1000);\n }\n };\n\n /**\n * @type {module:svgcanvas.EventHandler}\n * @param {external:Window} wind\n * @param {module:svgcanvas.SvgCanvas#event:saved} svg The SVG source\n * @listens module:svgcanvas.SvgCanvas#event:saved\n * @returns {void}\n */\n const saveHandler = function (wind, svg) {\n editor.showSaveWarning = false;\n\n // by default, we add the XML prolog back, systems integrating SVG-edit (wikis, CMSs)\n // can just provide their own custom save handler and might not want the XML prolog\n svg = '<?xml version=\"1.0\"?>\\n' + svg;\n\n // IE9 doesn't allow standalone Data URLs\n // https://connect.microsoft.com/IE/feedback/details/542600/data-uri-images-fail-when-loaded-by-themselves\n if (isIE()) {\n showSourceEditor(0, true);\n return;\n }\n\n // Since saving SVGs by opening a new window was removed in Chrome use artificial link-click\n // https://stackoverflow.com/questions/45603201/window-is-not-allowed-to-navigate-top-frame-navigations-to-data-urls\n const a = document.createElement('a');\n a.href = 'data:image/svg+xml;base64,' + Utils.encode64(svg);\n a.download = 'icon.svg';\n a.style.display = 'none';\n document.body.append(a); // Need to append for Firefox\n\n a.click();\n\n // Alert will only appear the first time saved OR the\n // first time the bug is encountered\n let done = editor.pref('save_notice_done');\n\n if (done !== 'all') {\n let note = uiStrings.notification.saveFromBrowser.replace('%s', 'SVG');\n // Check if FF and has <defs/>\n if (isGecko()) {\n if (svg.includes('<defs')) {\n // warning about Mozilla bug #308590 when applicable (seems to be fixed now in Feb 2013)\n note += '\\n\\n' + uiStrings.notification.defsFailOnSave;\n editor.pref('save_notice_done', 'all');\n done = 'all';\n } else {\n editor.pref('save_notice_done', 'part');\n }\n } else {\n editor.pref('save_notice_done', 'all');\n }\n if (done !== 'part') {\n $.alert(note);\n }\n }\n };\n\n /**\n * @param {external:Window} win\n * @param {module:svgcanvas.SvgCanvas#event:exported} data\n * @listens module:svgcanvas.SvgCanvas#event:exported\n * @returns {void}\n */\n const exportHandler = function (win, data) {\n const {issues, exportWindowName} = data;\n\n exportWindow = window.open(Utils.blankPageObjectURL || '', exportWindowName); // A hack to get the window via JSON-able name without opening a new one\n\n if (!exportWindow || exportWindow.closed) {\n /* await */ $.alert(uiStrings.notification.popupWindowBlocked);\n return;\n }\n\n exportWindow.location.href = data.bloburl || data.datauri;\n const done = editor.pref('export_notice_done');\n if (done !== 'all') {\n let note = uiStrings.notification.saveFromBrowser.replace('%s', data.type);\n\n // Check if there are issues\n if (issues.length) {\n const pre = '\\n \\u2022 ';\n note += ('\\n\\n' + uiStrings.notification.noteTheseIssues + pre + issues.join(pre));\n }\n\n // Note that this will also prevent the notice even though new issues may appear later.\n // May want to find a way to deal with that without annoying the user\n editor.pref('export_notice_done', 'all');\n exportWindow.alert(note);\n }\n };\n\n /**\n *\n * @returns {void}\n */\n const operaRepaint = function () {\n // Repaints canvas in Opera. Needed for stroke-dasharray change as well as fill change\n if (!window.opera) {\n return;\n }\n $('<p/>').hide().appendTo('body').remove();\n };\n\n /**\n *\n * @param {Element} opt\n * @param {boolean} changeElem\n * @returns {void}\n */\n function setStrokeOpt (opt, changeElem) {\n const {id} = opt;\n const bits = id.split('_');\n const [pre, val] = bits;\n\n if (changeElem) {\n svgCanvas.setStrokeAttr('stroke-' + pre, val);\n }\n operaRepaint();\n setIcon('#cur_' + pre, id, 20);\n $(opt).addClass('current').siblings().removeClass('current');\n }\n\n /**\n * This is a common function used when a tool has been clicked (chosen).\n * It does several common things:\n * - Removes the `tool_button_current` class from whatever tool currently has it.\n * - Hides any flyouts.\n * - Adds the `tool_button_current` class to the button passed in.\n * @function module:SVGEDitor.toolButtonClick\n * @param {string|Element} button The DOM element or string selector representing the toolbar button\n * @param {boolean} noHiding Whether not to hide any flyouts\n * @returns {boolean} Whether the button was disabled or not\n */\n const toolButtonClick = editor.toolButtonClick = function (button, noHiding) {\n if ($(button).hasClass('disabled')) { return false; }\n if ($(button).parent().hasClass('tools_flyout')) { return true; }\n const fadeFlyouts = 'normal';\n if (!noHiding) {\n $('.tools_flyout').fadeOut(fadeFlyouts);\n }\n $('#styleoverrides').text('');\n workarea.css('cursor', 'auto');\n $('.tool_button_current').removeClass('tool_button_current').addClass('tool_button');\n $(button).addClass('tool_button_current').removeClass('tool_button');\n return true;\n };\n\n /**\n * Unless the select toolbar button is disabled, sets the button\n * and sets the select mode and cursor styles.\n * @function module:SVGEditor.clickSelect\n * @returns {void}\n */\n const clickSelect = editor.clickSelect = function () {\n if (toolButtonClick('#tool_select')) {\n svgCanvas.setMode('select');\n $('#styleoverrides').text(`\n #svgcanvas svg * {\n cursor: move;\n pointer-events: all;\n }\n #svgcanvas svg {\n cursor: default;\n }\n `);\n }\n };\n\n /**\n * Set a selected image's URL.\n * @function module:SVGEditor.setImageURL\n * @param {string} url\n * @returns {void}\n */\n const setImageURL = editor.setImageURL = function (url) {\n if (!url) {\n url = defaultImageURL;\n }\n svgCanvas.setImageURL(url);\n $('#image_url').val(url);\n\n if (url.startsWith('data:')) {\n // data URI found\n $('#image_url').hide();\n $('#change_image_url').show();\n } else {\n // regular URL\n svgCanvas.embedImage(url, function (dataURI) {\n // Couldn't embed, so show warning\n $('#url_notice').toggle(!dataURI);\n defaultImageURL = url;\n });\n $('#image_url').show();\n $('#change_image_url').hide();\n }\n };\n\n /**\n *\n * @param {string} color\n * @param {string} url\n * @returns {void}\n */\n function setBackground (color, url) {\n // if (color == editor.pref('bkgd_color') && url == editor.pref('bkgd_url')) { return; }\n editor.pref('bkgd_color', color);\n editor.pref('bkgd_url', url, true);\n\n // This should be done in svgcanvas.js for the borderRect fill\n svgCanvas.setBackground(color, url);\n }\n\n /**\n * @param {PlainObject} [opts={}]\n * @param {boolean} [opts.cancelDeletes=false}]\n * @returns {Promise<void>} Resolves to `undefined`\n */\n async function promptImgURL ({cancelDeletes = false} = {}) {\n let curhref = svgCanvas.getHref(selectedElement);\n curhref = curhref.startsWith('data:') ? '' : curhref;\n const url = await $.prompt(uiStrings.notification.enterNewImgURL, curhref);\n if (url) {\n setImageURL(url);\n } else if (cancelDeletes) {\n svgCanvas.deleteSelectedElements();\n }\n }\n\n /**\n * @param {Element} elem\n * @returns {void}\n */\n const setInputWidth = function (elem) {\n const w = Math.min(Math.max(12 + elem.value.length * 6, 50), 300);\n $(elem).width(w);\n };\n\n /**\n *\n * @param {HTMLDivElement} [scanvas]\n * @param {Float} [zoom]\n * @returns {void}\n */\n function updateRulers (scanvas, zoom) {\n if (!zoom) { zoom = svgCanvas.getZoom(); }\n if (!scanvas) { scanvas = $('#svgcanvas'); }\n\n let d, i;\n const limit = 30000;\n const contentElem = svgCanvas.getContentElem();\n const units = getTypeMap();\n const unit = units[curConfig.baseUnit]; // 1 = 1px\n\n // draw x ruler then y ruler\n for (d = 0; d < 2; d++) {\n const isX = (d === 0);\n const dim = isX ? 'x' : 'y';\n const lentype = isX ? 'width' : 'height';\n const contentDim = Number(contentElem.getAttribute(dim));\n\n const $hcanvOrig = $('#ruler_' + dim + ' canvas:first');\n\n // Bit of a hack to fully clear the canvas in Safari & IE9\n const $hcanv = $hcanvOrig.clone();\n $hcanvOrig.replaceWith($hcanv);\n\n const hcanv = $hcanv[0];\n\n // Set the canvas size to the width of the container\n let rulerLen = scanvas[lentype]();\n const totalLen = rulerLen;\n hcanv.parentNode.style[lentype] = totalLen + 'px';\n let ctx = hcanv.getContext('2d');\n let ctxArr, num, ctxArrNum;\n\n ctx.fillStyle = 'rgb(200,0,0)';\n ctx.fillRect(0, 0, hcanv.width, hcanv.height);\n\n // Remove any existing canvasses\n $hcanv.siblings().remove();\n\n // Create multiple canvases when necessary (due to browser limits)\n if (rulerLen >= limit) {\n ctxArrNum = parseInt(rulerLen / limit) + 1;\n ctxArr = [];\n ctxArr[0] = ctx;\n let copy;\n for (i = 1; i < ctxArrNum; i++) {\n hcanv[lentype] = limit;\n copy = hcanv.cloneNode(true);\n hcanv.parentNode.append(copy);\n ctxArr[i] = copy.getContext('2d');\n }\n\n copy[lentype] = rulerLen % limit;\n\n // set copy width to last\n rulerLen = limit;\n }\n\n hcanv[lentype] = rulerLen;\n\n const uMulti = unit * zoom;\n\n // Calculate the main number interval\n const rawM = 50 / uMulti;\n let multi = 1;\n for (i = 0; i < rIntervals.length; i++) {\n num = rIntervals[i];\n multi = num;\n if (rawM <= num) {\n break;\n }\n }\n\n const bigInt = multi * uMulti;\n\n ctx.font = '9px sans-serif';\n\n let rulerD = ((contentDim / uMulti) % multi) * uMulti;\n let labelPos = rulerD - bigInt;\n // draw big intervals\n let ctxNum = 0;\n while (rulerD < totalLen) {\n labelPos += bigInt;\n // const realD = rulerD - contentDim; // Currently unused\n\n const curD = Math.round(rulerD) + 0.5;\n if (isX) {\n ctx.moveTo(curD, 15);\n ctx.lineTo(curD, 0);\n } else {\n ctx.moveTo(15, curD);\n ctx.lineTo(0, curD);\n }\n\n num = (labelPos - contentDim) / uMulti;\n let label;\n if (multi >= 1) {\n label = Math.round(num);\n } else {\n const decs = String(multi).split('.')[1].length;\n label = num.toFixed(decs);\n }\n\n // Change 1000s to Ks\n if (label !== 0 && label !== 1000 && label % 1000 === 0) {\n label = (label / 1000) + 'K';\n }\n\n if (isX) {\n ctx.fillText(label, rulerD + 2, 8);\n } else {\n // draw label vertically\n const str = String(label).split('');\n for (i = 0; i < str.length; i++) {\n ctx.fillText(str[i], 1, (rulerD + 9) + i * 9);\n }\n }\n\n const part = bigInt / 10;\n // draw the small intervals\n for (i = 1; i < 10; i++) {\n let subD = Math.round(rulerD + part * i) + 0.5;\n if (ctxArr && subD > rulerLen) {\n ctxNum++;\n ctx.stroke();\n if (ctxNum >= ctxArrNum) {\n i = 10;\n rulerD = totalLen;\n continue;\n }\n ctx = ctxArr[ctxNum];\n rulerD -= limit;\n subD = Math.round(rulerD + part * i) + 0.5;\n }\n\n // odd lines are slighly longer\n const lineNum = (i % 2) ? 12 : 10;\n if (isX) {\n ctx.moveTo(subD, 15);\n ctx.lineTo(subD, lineNum);\n } else {\n ctx.moveTo(15, subD);\n ctx.lineTo(lineNum, subD);\n }\n }\n rulerD += bigInt;\n }\n ctx.strokeStyle = '#000';\n ctx.stroke();\n }\n }\n\n /**\n * @function module:SVGEditor.updateCanvas\n * @param {boolean} center\n * @param {module:math.XYObject} newCtr\n * @returns {void}\n */\n const updateCanvas = editor.updateCanvas = function (center, newCtr) {\n const zoom = svgCanvas.getZoom();\n const wArea = workarea;\n const cnvs = $('#svgcanvas');\n\n let w = workarea.width(), h = workarea.height();\n const wOrig = w, hOrig = h;\n const oldCtr = {\n x: wArea[0].scrollLeft + wOrig / 2,\n y: wArea[0].scrollTop + hOrig / 2\n };\n const multi = curConfig.canvas_expansion;\n w = Math.max(wOrig, svgCanvas.contentW * zoom * multi);\n h = Math.max(hOrig, svgCanvas.contentH * zoom * multi);\n\n if (w === wOrig && h === hOrig) {\n workarea.css('overflow', 'hidden');\n } else {\n workarea.css('overflow', 'scroll');\n }\n\n const oldCanY = cnvs.height() / 2;\n const oldCanX = cnvs.width() / 2;\n cnvs.width(w).height(h);\n const newCanY = h / 2;\n const newCanX = w / 2;\n const offset = svgCanvas.updateCanvas(w, h);\n\n const ratio = newCanX / oldCanX;\n\n const scrollX = w / 2 - wOrig / 2; // eslint-disable-line no-shadow\n const scrollY = h / 2 - hOrig / 2; // eslint-disable-line no-shadow\n\n if (!newCtr) {\n const oldDistX = oldCtr.x - oldCanX;\n const newX = newCanX + oldDistX * ratio;\n\n const oldDistY = oldCtr.y - oldCanY;\n const newY = newCanY + oldDistY * ratio;\n\n newCtr = {\n x: newX,\n y: newY\n };\n } else {\n newCtr.x += offset.x;\n newCtr.y += offset.y;\n }\n\n if (center) {\n // Go to top-left for larger documents\n if (svgCanvas.contentW > wArea.width()) {\n // Top-left\n workarea[0].scrollLeft = offset.x - 10;\n workarea[0].scrollTop = offset.y - 10;\n } else {\n // Center\n wArea[0].scrollLeft = scrollX;\n wArea[0].scrollTop = scrollY;\n }\n } else {\n wArea[0].scrollLeft = newCtr.x - wOrig / 2;\n wArea[0].scrollTop = newCtr.y - hOrig / 2;\n }\n if (curConfig.showRulers) {\n updateRulers(cnvs, zoom);\n workarea.scroll();\n }\n\n if (urldata.storagePrompt !== true && editor.storagePromptState === 'ignore') {\n $('#dialog_box').hide();\n }\n };\n\n /**\n * @fires module:svgcanvas.SvgCanvas#event:ext_toolButtonStateUpdate\n * @returns {void}\n */\n const updateToolButtonState = function () {\n const bNoFill = (svgCanvas.getColor('fill') === 'none');\n const bNoStroke = (svgCanvas.getColor('stroke') === 'none');\n const buttonsNeedingStroke = ['#tool_fhpath', '#tool_line'];\n const buttonsNeedingFillAndStroke = [\n '#tools_rect .tool_button', '#tools_ellipse .tool_button',\n '#tool_text', '#tool_path'\n ];\n\n if (bNoStroke) {\n buttonsNeedingStroke.forEach((btn) => {\n if ($(btn).hasClass('tool_button_current')) {\n clickSelect();\n }\n $(btn).addClass('disabled');\n });\n } else {\n buttonsNeedingStroke.forEach((btn) => {\n $(btn).removeClass('disabled');\n });\n }\n\n if (bNoStroke && bNoFill) {\n buttonsNeedingFillAndStroke.forEach((btn) => {\n if ($(btn).hasClass('tool_button_current')) {\n clickSelect();\n }\n $(btn).addClass('disabled');\n });\n } else {\n buttonsNeedingFillAndStroke.forEach((btn) => {\n $(btn).removeClass('disabled');\n });\n }\n\n svgCanvas.runExtensions(\n 'toolButtonStateUpdate',\n /** @type {module:svgcanvas.SvgCanvas#event:ext_toolButtonStateUpdate} */ {\n nofill: bNoFill,\n nostroke: bNoStroke\n }\n );\n\n // Disable flyouts if all inside are disabled\n $('.tools_flyout').each(function () {\n const shower = $('#' + this.id + '_show');\n let hasEnabled = false;\n $(this).children().each(function () {\n if (!$(this).hasClass('disabled')) {\n hasEnabled = true;\n }\n });\n shower.toggleClass('disabled', !hasEnabled);\n });\n\n operaRepaint();\n };\n\n /**\n * Updates the toolbar (colors, opacity, etc) based on the selected element.\n * This function also updates the opacity and id elements that are in the\n * context panel.\n * @returns {void}\n */\n const updateToolbar = function () {\n let i, len;\n if (!Utils.isNullish(selectedElement)) {\n switch (selectedElement.tagName) {\n case 'use':\n case 'image':\n case 'foreignObject':\n break;\n case 'g':\n case 'a': {\n // Look for common styles\n const childs = selectedElement.getElementsByTagName('*');\n let gWidth = null;\n for (i = 0, len = childs.length; i < len; i++) {\n const swidth = childs[i].getAttribute('stroke-width');\n\n if (i === 0) {\n gWidth = swidth;\n } else if (gWidth !== swidth) {\n gWidth = null;\n }\n }\n\n $('#stroke_width').val(gWidth === null ? '' : gWidth);\n\n paintBox.fill.update(true);\n paintBox.stroke.update(true);\n\n break;\n } default: {\n paintBox.fill.update(true);\n paintBox.stroke.update(true);\n\n $('#stroke_width').val(selectedElement.getAttribute('stroke-width') || 1);\n $('#stroke_style').val(selectedElement.getAttribute('stroke-dasharray') || 'none');\n\n let attr = selectedElement.getAttribute('stroke-linejoin') || 'miter';\n\n if ($('#linejoin_' + attr).length) {\n setStrokeOpt($('#linejoin_' + attr)[0]);\n }\n\n attr = selectedElement.getAttribute('stroke-linecap') || 'butt';\n\n if ($('#linecap_' + attr).length) {\n setStrokeOpt($('#linecap_' + attr)[0]);\n }\n }\n }\n }\n\n // All elements including image and group have opacity\n if (!Utils.isNullish(selectedElement)) {\n const opacPerc = (selectedElement.getAttribute('opacity') || 1.0) * 100;\n $('#group_opacity').val(opacPerc);\n $('#opac_slider').slider('option', 'value', opacPerc);\n $('#elem_id').val(selectedElement.id);\n $('#elem_class').val(selectedElement.getAttribute('class'));\n }\n\n updateToolButtonState();\n };\n\n /**\n * Updates the context panel tools based on the selected element.\n * @returns {void}\n */\n const updateContextPanel = function () {\n let elem = selectedElement;\n // If element has just been deleted, consider it null\n if (!Utils.isNullish(elem) && !elem.parentNode) { elem = null; }\n const currentLayerName = svgCanvas.getCurrentDrawing().getCurrentLayerName();\n const currentMode = svgCanvas.getMode();\n const unit = curConfig.baseUnit !== 'px' ? curConfig.baseUnit : null;\n\n const isNode = currentMode === 'pathedit'; // elem ? (elem.id && elem.id.startsWith('pathpointgrip')) : false;\n const menuItems = $('#cmenu_canvas li');\n $('#selected_panel, #multiselected_panel, #g_panel, #rect_panel, #circle_panel,' +\n '#ellipse_panel, #line_panel, #text_panel, #image_panel, #container_panel,' +\n ' #use_panel, #a_panel').hide();\n if (!Utils.isNullish(elem)) {\n const elname = elem.nodeName;\n // If this is a link with no transform and one child, pretend\n // its child is selected\n // if (elname === 'a') { // && !$(elem).attr('transform')) {\n // elem = elem.firstChild;\n // }\n\n const angle = svgCanvas.getRotationAngle(elem);\n $('#angle').val(angle);\n\n const blurval = svgCanvas.getBlur(elem);\n $('#blur').val(blurval);\n $('#blur_slider').slider('option', 'value', blurval);\n\n if (svgCanvas.addedNew) {\n if (elname === 'image' && svgCanvas.getMode() === 'image') {\n // Prompt for URL if not a data URL\n if (!svgCanvas.getHref(elem).startsWith('data:')) {\n /* await */ promptImgURL({cancelDeletes: true});\n }\n }\n /* else if (elname == 'text') {\n // TODO: Do something here for new text\n } */\n }\n\n if (!isNode && currentMode !== 'pathedit') {\n $('#selected_panel').show();\n // Elements in this array already have coord fields\n if (['line', 'circle', 'ellipse'].includes(elname)) {\n $('#xy_panel').hide();\n } else {\n let x, y;\n\n // Get BBox vals for g, polyline and path\n if (['g', 'polyline', 'path'].includes(elname)) {\n const bb = svgCanvas.getStrokedBBox([elem]);\n if (bb) {\n ({x, y} = bb);\n }\n } else {\n x = elem.getAttribute('x');\n y = elem.getAttribute('y');\n }\n\n if (unit) {\n x = convertUnit(x);\n y = convertUnit(y);\n }\n\n $('#selected_x').val(x || 0);\n $('#selected_y').val(y || 0);\n $('#xy_panel').show();\n }\n\n // Elements in this array cannot be converted to a path\n const noPath = !['image', 'text', 'path', 'g', 'use'].includes(elname);\n $('#tool_topath').toggle(noPath);\n $('#tool_reorient').toggle(elname === 'path');\n $('#tool_reorient').toggleClass('disabled', angle === 0);\n } else {\n const point = path.getNodePoint();\n $('#tool_add_subpath').removeClass('push_button_pressed').addClass('tool_button');\n $('#tool_node_delete').toggleClass('disabled', !path.canDeleteNodes);\n\n // Show open/close button based on selected point\n setIcon('#tool_openclose_path', path.closed_subpath ? 'open_path' : 'close_path');\n\n if (point) {\n const segType = $('#seg_type');\n if (unit) {\n point.x = convertUnit(point.x);\n point.y = convertUnit(point.y);\n }\n $('#path_node_x').val(point.x);\n $('#path_node_y').val(point.y);\n if (point.type) {\n segType.val(point.type).removeAttr('disabled');\n } else {\n segType.val(4).attr('disabled', 'disabled');\n }\n }\n return;\n }\n\n // update contextual tools here\n const panels = {\n g: [],\n a: [],\n rect: ['rx', 'width', 'height'],\n image: ['width', 'height'],\n circle: ['cx', 'cy', 'r'],\n ellipse: ['cx', 'cy', 'rx', 'ry'],\n line: ['x1', 'y1', 'x2', 'y2'],\n text: [],\n use: []\n };\n\n const {tagName} = elem;\n\n // if ($(elem).data('gsvg')) {\n // $('#g_panel').show();\n // }\n\n let linkHref = null;\n if (tagName === 'a') {\n linkHref = svgCanvas.getHref(elem);\n $('#g_panel').show();\n }\n\n if (elem.parentNode.tagName === 'a') {\n if (!$(elem).siblings().length) {\n $('#a_panel').show();\n linkHref = svgCanvas.getHref(elem.parentNode);\n }\n }\n\n // Hide/show the make_link buttons\n $('#tool_make_link, #tool_make_link').toggle(!linkHref);\n\n if (linkHref) {\n $('#link_url').val(linkHref);\n }\n\n if (panels[tagName]) {\n const curPanel = panels[tagName];\n\n $('#' + tagName + '_panel').show();\n\n $.each(curPanel, function (i, item) {\n let attrVal = elem.getAttribute(item);\n if (curConfig.baseUnit !== 'px' && elem[item]) {\n const bv = elem[item].baseVal.value;\n attrVal = convertUnit(bv);\n }\n $('#' + tagName + '_' + item).val(attrVal || 0);\n });\n\n if (tagName === 'text') {\n $('#text_panel').css('display', 'inline');\n $('#tool_font_size').css('display', 'inline');\n if (svgCanvas.getItalic()) {\n $('#tool_italic').addClass('push_button_pressed').removeClass('tool_button');\n } else {\n $('#tool_italic').removeClass('push_button_pressed').addClass('tool_button');\n }\n if (svgCanvas.getBold()) {\n $('#tool_bold').addClass('push_button_pressed').removeClass('tool_button');\n } else {\n $('#tool_bold').removeClass('push_button_pressed').addClass('tool_button');\n }\n $('#font_family').val(elem.getAttribute('font-family'));\n $('#font_size').val(elem.getAttribute('font-size'));\n $('#text').val(elem.textContent);\n if (svgCanvas.addedNew) {\n // Timeout needed for IE9\n setTimeout(function () {\n $('#text').focus().select();\n }, 100);\n }\n // text\n } else if (tagName === 'image' && svgCanvas.getMode() === 'image') {\n setImageURL(svgCanvas.getHref(elem));\n // image\n } else if (tagName === 'g' || tagName === 'use') {\n $('#container_panel').show();\n const title = svgCanvas.getTitle();\n const label = $('#g_title')[0];\n label.value = title;\n setInputWidth(label);\n $('#g_title').prop('disabled', tagName === 'use');\n }\n }\n menuItems[(tagName === 'g' ? 'en' : 'dis') + 'ableContextMenuItems']('#ungroup');\n menuItems[((tagName === 'g' || !multiselected) ? 'dis' : 'en') + 'ableContextMenuItems']('#group');\n // if (!Utils.isNullish(elem))\n } else if (multiselected) {\n $('#multiselected_panel').show();\n menuItems\n .enableContextMenuItems('#group')\n .disableContextMenuItems('#ungroup');\n } else {\n menuItems.disableContextMenuItems('#delete,#cut,#copy,#group,#ungroup,#move_front,#move_up,#move_down,#move_back');\n }\n\n // update history buttons\n $('#tool_undo').toggleClass('disabled', undoMgr.getUndoStackSize() === 0);\n $('#tool_redo').toggleClass('disabled', undoMgr.getRedoStackSize() === 0);\n\n svgCanvas.addedNew = false;\n\n if ((elem && !isNode) || multiselected) {\n // update the selected elements' layer\n $('#selLayerNames').removeAttr('disabled').val(currentLayerName);\n\n // Enable regular menu options\n canvMenu.enableContextMenuItems(\n '#delete,#cut,#copy,#move_front,#move_up,#move_down,#move_back'\n );\n } else {\n $('#selLayerNames').attr('disabled', 'disabled');\n }\n };\n\n /**\n *\n * @returns {void}\n */\n const updateWireFrame = function () {\n // Test support\n if (supportsNonSS) { return; }\n\n const rule = `\n #workarea.wireframe #svgcontent * {\n stroke-width: ${1 / svgCanvas.getZoom()}px;\n }\n `;\n $('#wireframe_rules').text(workarea.hasClass('wireframe') ? rule : '');\n };\n\n let curContext = '';\n\n /**\n * @param {string} [title=svgCanvas.getDocumentTitle()]\n * @returns {void}\n */\n const updateTitle = function (title) {\n title = title || svgCanvas.getDocumentTitle();\n const newTitle = origTitle + (title ? ': ' + title : '');\n\n // Remove title update with current context info, isn't really necessary\n // if (curContext) {\n // new_title = new_title + curContext;\n // }\n $('title:first').text(newTitle);\n };\n\n // called when we've selected a different element\n /**\n *\n * @param {external:Window} win\n * @param {module:svgcanvas.SvgCanvas#event:selected} elems Array of elements that were selected\n * @listens module:svgcanvas.SvgCanvas#event:selected\n * @fires module:svgcanvas.SvgCanvas#event:ext_selectedChanged\n * @returns {void}\n */\n const selectedChanged = function (win, elems) {\n const mode = svgCanvas.getMode();\n if (mode === 'select') {\n setSelectMode();\n }\n const isNode = mode === 'pathedit';\n // if elems[1] is present, then we have more than one element\n selectedElement = (elems.length === 1 || Utils.isNullish(elems[1]) ? elems[0] : null);\n multiselected = (elems.length >= 2 && !Utils.isNullish(elems[1]));\n if (!Utils.isNullish(selectedElement)) {\n // unless we're already in always set the mode of the editor to select because\n // upon creation of a text element the editor is switched into\n // select mode and this event fires - we need our UI to be in sync\n\n if (!isNode) {\n updateToolbar();\n }\n } // if (!Utils.isNullish(elem))\n\n // Deal with pathedit mode\n togglePathEditMode(isNode, elems);\n updateContextPanel();\n svgCanvas.runExtensions('selectedChanged', /** @type {module:svgcanvas.SvgCanvas#event:ext_selectedChanged} */ {\n elems,\n selectedElement,\n multiselected\n });\n };\n\n // Call when part of element is in process of changing, generally\n // on mousemove actions like rotate, move, etc.\n /**\n * @param {external:Window} win\n * @param {module:svgcanvas.SvgCanvas#event:transition} elems\n * @listens module:svgcanvas.SvgCanvas#event:transition\n * @fires module:svgcanvas.SvgCanvas#event:ext_elementTransition\n * @returns {void}\n */\n const elementTransition = function (win, elems) {\n const mode = svgCanvas.getMode();\n const elem = elems[0];\n\n if (!elem) {\n return;\n }\n\n multiselected = (elems.length >= 2 && !Utils.isNullish(elems[1]));\n // Only updating fields for single elements for now\n if (!multiselected) {\n switch (mode) {\n case 'rotate': {\n const ang = svgCanvas.getRotationAngle(elem);\n $('#angle').val(ang);\n $('#tool_reorient').toggleClass('disabled', ang === 0);\n break;\n\n // TODO: Update values that change on move/resize, etc\n // } case 'select': {\n // } case 'resize': {\n // break;\n // }\n }\n }\n }\n svgCanvas.runExtensions('elementTransition', /** @type {module:svgcanvas.SvgCanvas#event:ext_elementTransition} */ {\n elems\n });\n };\n\n /**\n * Test whether an element is a layer or not.\n * @param {SVGGElement} elem - The SVGGElement to test.\n * @returns {boolean} True if the element is a layer\n */\n function isLayer (elem) {\n return elem && elem.tagName === 'g' && Layer.CLASS_REGEX.test(elem.getAttribute('class'));\n }\n\n // called when any element has changed\n /**\n * @param {external:Window} win\n * @param {module:svgcanvas.SvgCanvas#event:changed} elems\n * @listens module:svgcanvas.SvgCanvas#event:changed\n * @fires module:svgcanvas.SvgCanvas#event:ext_elementChanged\n * @returns {void}\n */\n const elementChanged = function (win, elems) {\n const mode = svgCanvas.getMode();\n if (mode === 'select') {\n setSelectMode();\n }\n\n elems.forEach((elem) => {\n const isSvgElem = (elem && elem.tagName === 'svg');\n if (isSvgElem || isLayer(elem)) {\n populateLayers();\n // if the element changed was the svg, then it could be a resolution change\n if (isSvgElem) {\n updateCanvas();\n }\n // Update selectedElement if element is no longer part of the image.\n // This occurs for the text elements in Firefox\n } else if (elem && selectedElement && Utils.isNullish(selectedElement.parentNode)) {\n // || elem && elem.tagName == \"path\" && !multiselected) { // This was added in r1430, but not sure why\n selectedElement = elem;\n }\n });\n\n editor.showSaveWarning = true;\n\n // we update the contextual panel with potentially new\n // positional/sizing information (we DON'T want to update the\n // toolbar here as that creates an infinite loop)\n // also this updates the history buttons\n\n // we tell it to skip focusing the text control if the\n // text element was previously in focus\n updateContextPanel();\n\n // In the event a gradient was flipped:\n if (selectedElement && mode === 'select') {\n paintBox.fill.update();\n paintBox.stroke.update();\n }\n\n svgCanvas.runExtensions('elementChanged', /** @type {module:svgcanvas.SvgCanvas#event:ext_elementChanged} */ {\n elems\n });\n };\n\n /**\n * @returns {void}\n */\n const zoomDone = function () {\n updateWireFrame();\n // updateCanvas(); // necessary?\n };\n\n /**\n * @typedef {PlainObject} module:SVGEditor.BBoxObjectWithFactor (like `DOMRect`)\n * @property {Float} x\n * @property {Float} y\n * @property {Float} width\n * @property {Float} height\n * @property {Float} [factor] Needed if width or height are 0\n * @property {Float} [zoom]\n * @see module:svgcanvas.SvgCanvas#event:zoomed\n */\n\n /**\n * @function module:svgcanvas.SvgCanvas#zoomChanged\n * @param {external:Window} win\n * @param {module:svgcanvas.SvgCanvas#event:zoomed} bbox\n * @param {boolean} autoCenter\n * @listens module:svgcanvas.SvgCanvas#event:zoomed\n * @returns {void}\n */\n const zoomChanged = svgCanvas.zoomChanged = function (win, bbox, autoCenter) {\n const scrbar = 15,\n // res = svgCanvas.getResolution(), // Currently unused\n wArea = workarea;\n // const canvasPos = $('#svgcanvas').position(); // Currently unused\n const zInfo = svgCanvas.setBBoxZoom(bbox, wArea.width() - scrbar, wArea.height() - scrbar);\n if (!zInfo) { return; }\n const zoomlevel = zInfo.zoom,\n bb = zInfo.bbox;\n\n if (zoomlevel < 0.001) {\n changeZoom({value: 0.1});\n return;\n }\n\n $('#zoom').val((zoomlevel * 100).toFixed(1));\n\n if (autoCenter) {\n updateCanvas();\n } else {\n updateCanvas(false, {x: bb.x * zoomlevel + (bb.width * zoomlevel) / 2, y: bb.y * zoomlevel + (bb.height * zoomlevel) / 2});\n }\n\n if (svgCanvas.getMode() === 'zoom' && bb.width) {\n // Go to select if a zoom box was drawn\n setSelectMode();\n }\n\n zoomDone();\n };\n\n /**\n * @type {module:jQuerySpinButton.ValueCallback}\n */\n const changeZoom = function (ctl) {\n const zoomlevel = ctl.value / 100;\n if (zoomlevel < 0.001) {\n ctl.value = 0.1;\n return;\n }\n const zoom = svgCanvas.getZoom();\n const wArea = workarea;\n\n zoomChanged(window, {\n width: 0,\n height: 0,\n // center pt of scroll position\n x: (wArea[0].scrollLeft + wArea.width() / 2) / zoom,\n y: (wArea[0].scrollTop + wArea.height() / 2) / zoom,\n zoom: zoomlevel\n }, true);\n };\n\n $('#cur_context_panel').delegate('a', 'click', function () {\n const link = $(this);\n if (link.attr('data-root')) {\n svgCanvas.leaveContext();\n } else {\n svgCanvas.setContext(link.text());\n }\n svgCanvas.clearSelection();\n return false;\n });\n\n /**\n * @param {external:Window} win\n * @param {module:svgcanvas.SvgCanvas#event:contextset} context\n * @listens module:svgcanvas.SvgCanvas#event:contextset\n * @returns {void}\n */\n const contextChanged = function (win, context) {\n let linkStr = '';\n if (context) {\n let str = '';\n linkStr = '<a href=\"#\" data-root=\"y\">' + svgCanvas.getCurrentDrawing().getCurrentLayerName() + '</a>';\n\n $(context).parentsUntil('#svgcontent > g').andSelf().each(function () {\n if (this.id) {\n str += ' > ' + this.id;\n if (this !== context) {\n linkStr += ' > <a href=\"#\">' + this.id + '</a>';\n } else {\n linkStr += ' > ' + this.id;\n }\n }\n });\n\n curContext = str;\n } else {\n curContext = null;\n }\n $('#cur_context_panel').toggle(Boolean(context)).html(linkStr);\n\n updateTitle();\n };\n\n /**\n * Makes sure the current selected paint is available to work with.\n * @returns {void}\n */\n const prepPaints = function () {\n paintBox.fill.prep();\n paintBox.stroke.prep();\n };\n\n const flyoutFuncs = {};\n\n /**\n *\n * @returns {void}\n */\n const setFlyoutTitles = function () {\n $('.tools_flyout').each(function () {\n const shower = $('#' + this.id + '_show');\n if (shower.data('isLibrary')) {\n return;\n }\n\n const tooltips = $(this).children().map(function () {\n return this.title;\n }).get();\n shower[0].title = tooltips.join(' / ');\n });\n };\n\n const allHolders = {};\n /**\n * @param {PlainObject<string, module:SVGEditor.ToolButton>} holders Key is a selector\n * @returns {void}\n */\n const setupFlyouts = function (holders) {\n $.each(holders, function (holdSel, btnOpts) {\n if (!allHolders[holdSel]) {\n allHolders[holdSel] = [];\n }\n allHolders[holdSel].push(...btnOpts);\n\n const buttons = $(holdSel).children().not('.tool_button_evt_handled');\n const showSel = holdSel + '_show';\n const shower = $(showSel);\n let def = false;\n buttons.addClass('tool_button tool_button_evt_handled')\n .unbind('click mousedown mouseup') // may not be necessary\n .each(function () {\n // Get this button's options\n const idSel = '#' + this.getAttribute('id');\n const [i, opts] = Object.entries(btnOpts).find(([_, {sel}]) => {\n return sel === idSel;\n });\n\n // Remember the function that goes with this ID\n flyoutFuncs[opts.sel] = opts.fn;\n\n if (opts.isDefault) { def = i; }\n\n /**\n * Clicking the icon in flyout should set this set's icon.\n * @param {Event} ev\n * @returns {boolean}\n */\n const flyoutAction = function (ev) {\n let options = opts;\n // Find the currently selected tool if comes from keystroke\n if (ev.type === 'keydown') {\n const flyoutIsSelected = $(options.parent + '_show').hasClass('tool_button_current');\n const currentOperation = $(options.parent + '_show').attr('data-curopt');\n Object.entries(holders[opts.parent]).some(([j, tool]) => {\n if (tool.sel !== currentOperation) {\n return false;\n }\n if (!ev.shiftKey || !flyoutIsSelected) {\n options = tool;\n } else {\n // If flyout is selected, allow shift key to iterate through subitems\n j = parseInt(j);\n // Use `allHolders` to include both extension `includeWith` and toolbarButtons\n options = allHolders[opts.parent][j + 1] ||\n holders[opts.parent][0];\n }\n return true;\n });\n }\n if ($(this).hasClass('disabled')) { return false; }\n if (toolButtonClick(showSel)) {\n options.fn();\n }\n let icon;\n if (options.icon) {\n icon = $.getSvgIcon(options.icon, true);\n } else {\n icon = $(options.sel).children().eq(0).clone();\n }\n\n icon[0].setAttribute('width', shower.width());\n icon[0].setAttribute('height', shower.height());\n shower.children(':not(.flyout_arrow_horiz)').remove();\n shower.append(icon).attr('data-curopt', options.sel); // This sets the current mode\n return true;\n };\n\n $(this).mouseup(flyoutAction);\n\n if (opts.key) {\n $(document).bind('keydown', opts.key[0] + ' shift+' + opts.key[0], flyoutAction);\n }\n return true;\n });\n\n if (def) {\n shower.attr('data-curopt', btnOpts[def].sel);\n } else if (!shower.attr('data-curopt')) {\n // Set first as default\n shower.attr('data-curopt', btnOpts[0].sel);\n }\n\n let timer;\n const pos = $(showSel).position();\n\n // Clicking the \"show\" icon should set the current mode\n shower.mousedown(function (evt) {\n if (shower.hasClass('disabled')) {\n return false;\n }\n const holder = $(holdSel);\n const l = pos.left + 34;\n const w = holder.width() * -1;\n const time = holder.data('shown_popop') ? 200 : 0;\n timer = setTimeout(function () {\n // Show corresponding menu\n if (!shower.data('isLibrary')) {\n holder.css('left', w).show().animate({\n left: l\n }, 150);\n } else {\n holder.css('left', l).show();\n }\n holder.data('shown_popop', true);\n }, time);\n evt.preventDefault();\n return true;\n }).mouseup(function (evt) {\n clearTimeout(timer);\n const opt = $(this).attr('data-curopt');\n // Is library and popped up, so do nothing\n if (shower.data('isLibrary') && $(showSel.replace('_show', '')).is(':visible')) {\n toolButtonClick(showSel, true);\n return;\n }\n if (toolButtonClick(showSel) && flyoutFuncs[opt]) {\n flyoutFuncs[opt]();\n }\n });\n // $('#tools_rect').mouseleave(function () { $('#tools_rect').fadeOut(); });\n });\n setFlyoutTitles();\n setFlyoutPositions();\n };\n\n /**\n * @param {string} id\n * @param {external:jQuery} child\n * @returns {external:jQuery}\n */\n const makeFlyoutHolder = function (id, child) {\n const div = $('<div>', {\n class: 'tools_flyout',\n id\n }).appendTo('#svg_editor').append(child);\n\n return div;\n };\n\n /**\n * @param {string} elemSel\n * @param {string} listSel\n * @param {external:jQuery.Function} callback\n * @param {PlainObject} opts\n * @param {boolean} opts.dropUp\n * @param {boolean} opts.seticon\n * @param {boolean} opts.multiclick\n * @todo Combine this with `addDropDown` or find other way to optimize.\n * @returns {void}\n */\n const addAltDropDown = function (elemSel, listSel, callback, opts) {\n const button = $(elemSel);\n const {dropUp} = opts;\n const list = $(listSel);\n if (dropUp) {\n $(elemSel).addClass('dropup');\n }\n list.find('li').bind('mouseup', function (...args) {\n if (opts.seticon) {\n setIcon('#cur_' + button[0].id, $(this).children());\n $(this).addClass('current').siblings().removeClass('current');\n }\n callback.apply(this, ...args);\n });\n\n let onButton = false;\n $(window).mouseup(function (evt) {\n if (!onButton) {\n button.removeClass('down');\n list.hide();\n list.css({top: 0, left: 0});\n }\n onButton = false;\n });\n\n // const height = list.height(); // Currently unused\n button.bind('mousedown', function () {\n const off = button.offset();\n if (dropUp) {\n off.top -= list.height();\n off.left += 8;\n } else {\n off.top += button.height();\n }\n list.offset(off);\n\n if (!button.hasClass('down')) {\n list.show();\n onButton = true;\n } else {\n // CSS position must be reset for Webkit\n list.hide();\n list.css({top: 0, left: 0});\n }\n button.toggleClass('down');\n }).hover(function () {\n onButton = true;\n }).mouseout(function () {\n onButton = false;\n });\n\n if (opts.multiclick) {\n list.mousedown(function () {\n onButton = true;\n });\n }\n };\n\n const extsPreLang = [];\n /**\n * @param {external:Window} win\n * @param {module:svgcanvas.SvgCanvas#event:extension_added} ext\n * @listens module:svgcanvas.SvgCanvas#event:extension_added\n * @returns {Promise<void>|void} Resolves to `undefined`\n */\n const extAdded = async function (win, ext) {\n if (!ext) {\n return undefined;\n }\n let cbCalled = false;\n let resizeDone = false;\n\n if (ext.langReady) {\n if (editor.langChanged) { // We check for this since the \"lang\" pref could have been set by storage\n const lang = editor.pref('lang');\n await ext.langReady({\n lang,\n uiStrings,\n importLocale: getImportLocale({defaultLang: lang, defaultName: ext.name})\n });\n loadedExtensionNames.push(ext.name);\n } else {\n extsPreLang.push(ext);\n }\n }\n\n /**\n * Clear resize timer if present and if not previously performed,\n * perform an icon resize.\n * @returns {void}\n */\n function prepResize () {\n if (resizeTimer) {\n clearTimeout(resizeTimer);\n resizeTimer = null;\n }\n if (!resizeDone) {\n resizeTimer = setTimeout(function () {\n resizeDone = true;\n setIconSize(editor.pref('iconsize'));\n }, 50);\n }\n }\n\n /**\n *\n * @returns {void}\n */\n const runCallback = function () {\n if (ext.callback && !cbCalled) {\n cbCalled = true;\n ext.callback.call(editor);\n }\n };\n\n const btnSelects = [];\n\n /**\n * @typedef {PlainObject} module:SVGEditor.ContextTool\n * @property {string} panel The ID of the existing panel to which the tool is being added. Required.\n * @property {string} id The ID of the actual tool element. Required.\n * @property {PlainObject<string, external:jQuery.Function>|PlainObject<\"change\", external:jQuery.Function>} events DOM event names keyed to associated functions. Example: `{change () { alert('Option was changed') } }`. \"change\" event is one specifically handled for the \"button-select\" type. Required.\n * @property {string} title The tooltip text that will appear when the user hovers over the tool. Required.\n * @property {\"tool_button\"|\"select\"|\"button-select\"|\"input\"|string} type The type of tool being added. Expected.\n * @property {PlainObject<string, string>} [options] List of options and their labels for select tools. Example: `{1: 'One', 2: 'Two', all: 'All' }`. Required by \"select\" tools.\n * @property {string} [container_id] The ID to be given to the tool's container element.\n * @property {string} [defval] Default value\n * @property {string|Integer} [colnum] Added as part of the option list class.\n * @property {string} [label] Label associated with the tool, visible in the UI\n * @property {Integer} [size] Value of the \"size\" attribute of the tool input\n * @property {module:jQuerySpinButton.SpinButtonConfig} [spindata] When added to a tool of type \"input\", this tool becomes a \"spinner\" which allows the number to be in/decreased.\n */\n if (ext.context_tools) {\n $.each(ext.context_tools, function (i, tool) {\n // Add select tool\n const contId = tool.container_id ? (' id=\"' + tool.container_id + '\"') : '';\n\n let panel = $('#' + tool.panel);\n // create the panel if it doesn't exist\n if (!panel.length) {\n panel = $('<div>', {id: tool.panel}).appendTo('#tools_top');\n }\n\n let html;\n // TODO: Allow support for other types, or adding to existing tool\n switch (tool.type) {\n case 'tool_button': {\n html = '<div class=\"tool_button\">' + tool.id + '</div>';\n const div = $(html).appendTo(panel);\n if (tool.events) {\n $.each(tool.events, function (evt, func) {\n $(div).bind(evt, func);\n });\n }\n break;\n } case 'select': {\n html = '<label' + contId + '>' +\n '<select id=\"' + tool.id + '\">';\n $.each(tool.options, function (val, text) {\n const sel = (val === tool.defval) ? ' selected' : '';\n html += '<option value=\"' + val + '\"' + sel + '>' + text + '</option>';\n });\n html += '</select></label>';\n // Creates the tool, hides & adds it, returns the select element\n const sel = $(html).appendTo(panel).find('select');\n\n $.each(tool.events, function (evt, func) {\n $(sel).bind(evt, func);\n });\n break;\n } case 'button-select': {\n html = '<div id=\"' + tool.id + '\" class=\"dropdown toolset\" title=\"' + tool.title + '\">' +\n '<div id=\"cur_' + tool.id + '\" class=\"icon_label\"></div><button></button></div>';\n\n const list = $('<ul id=\"' + tool.id + '_opts\"></ul>').appendTo('#option_lists');\n\n if (tool.colnum) {\n list.addClass('optcols' + tool.colnum);\n }\n\n // Creates the tool, hides & adds it, returns the select element\n /* const dropdown = */ $(html).appendTo(panel).children();\n\n btnSelects.push({\n elem: ('#' + tool.id),\n list: ('#' + tool.id + '_opts'),\n title: tool.title,\n callback: tool.events.change,\n cur: ('#cur_' + tool.id)\n });\n\n break;\n } case 'input': {\n html = '<label' + contId + '>' +\n '<span id=\"' + tool.id + '_label\">' +\n tool.label + ':</span>' +\n '<input id=\"' + tool.id + '\" title=\"' + tool.title +\n '\" size=\"' + (tool.size || '4') +\n '\" value=\"' + (tool.defval || '') + '\" type=\"text\"/></label>';\n\n // Creates the tool, hides & adds it, returns the select element\n\n // Add to given tool.panel\n const inp = $(html).appendTo(panel).find('input');\n\n if (tool.spindata) {\n inp.SpinButton(tool.spindata);\n }\n\n if (tool.events) {\n $.each(tool.events, function (evt, func) {\n inp.bind(evt, func);\n });\n }\n break;\n } default:\n break;\n }\n });\n }\n\n const {svgicons} = ext;\n if (ext.buttons) {\n const fallbackObj = {},\n altsObj = {},\n placementObj = {},\n holders = {};\n\n /**\n * @typedef {GenericArray} module:SVGEditor.KeyArray\n * @property {string} 0 The key to bind (on `keydown`)\n * @property {boolean} 1 Whether to `preventDefault` on the `keydown` event\n * @property {boolean} 2 Not apparently in use (NoDisableInInput)\n */\n /**\n * @typedef {string|module:SVGEditor.KeyArray} module:SVGEditor.Key\n */\n /**\n * @typedef {PlainObject} module:SVGEditor.Button\n * @property {string} id A unique identifier for this button. If SVG icons are used, this must match the ID used in the icon file. Required.\n * @property {\"mode_flyout\"|\"mode\"|\"context\"|\"app_menu\"} type Type of button. Required.\n * @property {string} title The tooltip text that will appear when the user hovers over the icon. Required.\n * @property {PlainObject<string, external:jQuery.Function>|PlainObject<\"click\", external:jQuery.Function>} events DOM event names with associated functions. Example: `{click () { alert('Button was clicked') } }`. Click is used with `includeWith` and `type` of \"mode_flyout\" (and \"mode\"); any events may be added if `list` is not present. Expected.\n * @property {string} panel The ID of the context panel to be included, if type is \"context\". Required only if type is \"context\".\n * @property {string} icon The file path to the raster version of the icon image source. Required only if no `svgicons` is supplied from [ExtensionInitResponse]{@link module:svgcanvas.ExtensionInitResponse}.\n * @property {string} [svgicon] If absent, will utilize the button \"id\"; used to set \"placement\" on the `svgIcons` call\n * @property {string} [list] Points to the \"id\" of a `context_tools` item of type \"button-select\" into which the button will be added as a panel list item\n * @property {Integer} [position] The numeric index for placement; defaults to last position (as of the time of extension addition) if not present. For use with {@link http://api.jquery.com/eq/}.\n * @property {boolean} [isDefault] Whether or not the button is the default. Used with `list`.\n * @property {PlainObject} [includeWith] Object with flyout menu data\n * @property {boolean} [includeWith.isDefault] Indicates whether button is default in flyout list or not.\n * @property {string} includeWith.button jQuery selector of the existing button to be joined. Example: '#tool_line'. Required if `includeWith` is used.\n * @property {\"last\"|Integer} [includeWith.position] Position of icon in flyout list; will be added to end if not indicated. Integer is for use with {@link http://api.jquery.com/eq/}.\n * @property {module:SVGEditor.Key} [key] The key to bind to the button\n */\n // Add buttons given by extension\n $.each(ext.buttons, function (i, /** @type {module:SVGEditor.Button} */ btn) {\n let {id} = btn;\n let num = i;\n // Give button a unique ID\n while ($('#' + id).length) {\n id = btn.id + '_' + (++num);\n }\n\n let icon;\n if (!svgicons) {\n icon = $(\n '<img src=\"' + btn.icon +\n (btn.title ? '\" alt=\"' + btn.title : '') +\n '\">'\n );\n } else {\n fallbackObj[id] = btn.icon;\n altsObj[id] = btn.title;\n const svgicon = btn.svgicon || btn.id;\n if (btn.type === 'app_menu') {\n placementObj['#' + id + ' > div'] = svgicon;\n } else {\n placementObj['#' + id] = svgicon;\n }\n }\n\n let cls, parent;\n\n // Set button up according to its type\n switch (btn.type) {\n case 'mode_flyout':\n case 'mode':\n cls = 'tool_button';\n parent = '#tools_left';\n break;\n case 'context':\n cls = 'tool_button';\n parent = '#' + btn.panel;\n // create the panel if it doesn't exist\n if (!$(parent).length) {\n $('<div>', {id: btn.panel}).appendTo('#tools_top');\n }\n break;\n case 'app_menu':\n cls = '';\n parent = '#main_menu ul';\n break;\n }\n let flyoutHolder, showBtn, refData, refBtn;\n const button = $((btn.list || btn.type === 'app_menu') ? '<li/>' : '<div/>')\n .attr('id', id)\n .attr('title', btn.title)\n .addClass(cls);\n if (!btn.includeWith && !btn.list) {\n if ('position' in btn) {\n if ($(parent).children().eq(btn.position).length) {\n $(parent).children().eq(btn.position).before(button);\n } else {\n $(parent).children().last().after(button);\n }\n } else {\n button.appendTo(parent);\n }\n\n if (btn.type === 'mode_flyout') {\n // Add to flyout menu / make flyout menu\n // const opts = btn.includeWith;\n // // opts.button, default, position\n refBtn = $(button);\n\n flyoutHolder = refBtn.parent();\n // Create a flyout menu if there isn't one already\n let tlsId;\n if (!refBtn.parent().hasClass('tools_flyout')) {\n // Create flyout placeholder\n tlsId = refBtn[0].id.replace('tool_', 'tools_');\n showBtn = refBtn.clone()\n .attr('id', tlsId + '_show')\n .append($('<div>', {class: 'flyout_arrow_horiz'}));\n\n refBtn.before(showBtn);\n\n // Create a flyout div\n flyoutHolder = makeFlyoutHolder(tlsId, refBtn);\n flyoutHolder.data('isLibrary', true);\n showBtn.data('isLibrary', true);\n }\n // refData = Actions.getButtonData(opts.button);\n\n placementObj['#' + tlsId + '_show'] = btn.id;\n // TODO: Find way to set the current icon using the iconloader if this is not default\n\n // Include data for extension button as well as ref button\n /* curH = */ holders['#' + flyoutHolder[0].id] = [{\n sel: '#' + id,\n fn: btn.events.click,\n icon: btn.id,\n // key: btn.key,\n isDefault: true\n }]; // , refData\n //\n // // {sel:'#tool_rect', fn: clickRect, evt: 'mouseup', key: 4, parent: '#tools_rect', icon: 'rect'}\n //\n // const pos = ('position' in opts)?opts.position:'last';\n // const len = flyoutHolder.children().length;\n //\n // // Add at given position or end\n // if (!isNaN(pos) && pos >= 0 && pos < len) {\n // flyoutHolder.children().eq(pos).before(button);\n // } else {\n // flyoutHolder.append(button);\n // curH.reverse();\n // }\n } else if (btn.type === 'app_menu') {\n button.append('<div>').append(btn.title);\n }\n } else if (btn.list) {\n // Add button to list\n button.addClass('push_button');\n $('#' + btn.list + '_opts').append(button);\n if (btn.isDefault) {\n $('#cur_' + btn.list).append(button.children().clone());\n const svgicon = btn.svgicon || btn.id;\n placementObj['#cur_' + btn.list] = svgicon;\n }\n } else if (btn.includeWith) {\n // Add to flyout menu / make flyout menu\n const opts = btn.includeWith;\n // opts.button, default, position\n refBtn = $(opts.button);\n\n flyoutHolder = refBtn.parent();\n // Create a flyout menu if there isn't one already\n let tlsId;\n if (!refBtn.parent().hasClass('tools_flyout')) {\n // Create flyout placeholder\n tlsId = refBtn[0].id.replace('tool_', 'tools_');\n showBtn = refBtn.clone()\n .attr('id', tlsId + '_show')\n .append($('<div>', {class: 'flyout_arrow_horiz'}));\n\n refBtn.before(showBtn);\n // Create a flyout div\n flyoutHolder = makeFlyoutHolder(tlsId, refBtn);\n }\n\n refData = Actions.getButtonData(opts.button);\n\n if (opts.isDefault) {\n placementObj['#' + tlsId + '_show'] = btn.id;\n }\n // TODO: Find way to set the current icon using the iconloader if this is not default\n\n // Include data for extension button as well as ref button\n const curH = holders['#' + flyoutHolder[0].id] = [{\n sel: '#' + id,\n fn: btn.events.click,\n icon: btn.id,\n key: btn.key,\n isDefault: Boolean(btn.includeWith && btn.includeWith.isDefault)\n }, refData];\n\n // {sel:'#tool_rect', fn: clickRect, evt: 'mouseup', key: 4, parent: '#tools_rect', icon: 'rect'}\n\n const pos = ('position' in opts) ? opts.position : 'last';\n const len = flyoutHolder.children().length;\n\n // Add at given position or end\n if (!isNaN(pos) && pos >= 0 && pos < len) {\n flyoutHolder.children().eq(pos).before(button);\n } else {\n flyoutHolder.append(button);\n curH.reverse();\n }\n }\n\n if (!svgicons) {\n button.append(icon);\n }\n\n if (!btn.list) {\n // Add given events to button\n $.each(btn.events, function (name, func) {\n if (name === 'click' && btn.type === 'mode') {\n // `touch.js` changes `touchstart` to `mousedown`,\n // so we must map extension click events as well\n if (isTouch() && name === 'click') {\n name = 'mousedown';\n }\n if (btn.includeWith) {\n button.bind(name, func);\n } else {\n button.bind(name, function () {\n if (toolButtonClick(button)) {\n func();\n }\n });\n }\n if (btn.key) {\n $(document).bind('keydown', btn.key, func);\n if (btn.title) {\n button.attr('title', btn.title + ' [' + btn.key + ']');\n }\n }\n } else {\n button.bind(name, func);\n }\n });\n }\n\n setupFlyouts(holders);\n });\n\n $.each(btnSelects, function () {\n addAltDropDown(this.elem, this.list, this.callback, {seticon: true});\n });\n\n if (svgicons) {\n return new Promise((resolve, reject) => { // eslint-disable-line promise/avoid-new\n $.svgIcons(svgicons, {\n w: 24, h: 24,\n id_match: false,\n no_img: (!isWebkit()),\n fallback: fallbackObj,\n placement: placementObj,\n callback (icons) {\n // Non-ideal hack to make the icon match the current size\n // if (curPrefs.iconsize && curPrefs.iconsize !== 'm') {\n if (editor.pref('iconsize') !== 'm') {\n prepResize();\n }\n runCallback();\n resolve();\n }\n });\n });\n }\n }\n return runCallback();\n };\n\n /**\n * @param {string} color\n * @param {Float} opac\n * @param {string} type\n * @returns {module:jGraduate~Paint}\n */\n const getPaint = function (color, opac, type) {\n // update the editor's fill paint\n const opts = {alpha: opac};\n if (color.startsWith('url(#')) {\n let refElem = svgCanvas.getRefElem(color);\n if (refElem) {\n refElem = refElem.cloneNode(true);\n } else {\n refElem = $('#' + type + '_color defs *')[0];\n }\n opts[refElem.tagName] = refElem;\n } else if (color.startsWith('#')) {\n opts.solidColor = color.substr(1);\n } else {\n opts.solidColor = 'none';\n }\n return new $.jGraduate.Paint(opts);\n };\n\n // $('#text').focus(function () { textBeingEntered = true; });\n // $('#text').blur(function () { textBeingEntered = false; });\n\n // bind the selected event to our function that handles updates to the UI\n svgCanvas.bind('selected', selectedChanged);\n svgCanvas.bind('transition', elementTransition);\n svgCanvas.bind('changed', elementChanged);\n svgCanvas.bind('saved', saveHandler);\n svgCanvas.bind('exported', exportHandler);\n svgCanvas.bind('exportedPDF', function (win, data) {\n if (!data.output) { // Ignore Chrome\n return;\n }\n const {exportWindowName} = data;\n if (exportWindowName) {\n exportWindow = window.open('', exportWindowName); // A hack to get the window via JSON-able name without opening a new one\n }\n if (!exportWindow || exportWindow.closed) {\n /* await */ $.alert(uiStrings.notification.popupWindowBlocked);\n return;\n }\n exportWindow.location.href = data.output;\n });\n svgCanvas.bind('zoomed', zoomChanged);\n svgCanvas.bind('zoomDone', zoomDone);\n svgCanvas.bind(\n 'updateCanvas',\n /**\n * @param {external:Window} win\n * @param {PlainObject} centerInfo\n * @param {false} centerInfo.center\n * @param {module:math.XYObject} centerInfo.newCtr\n * @listens module:svgcanvas.SvgCanvas#event:updateCanvas\n * @returns {void}\n */\n function (win, {center, newCtr}) {\n updateCanvas(center, newCtr);\n }\n );\n svgCanvas.bind('contextset', contextChanged);\n svgCanvas.bind('extension_added', extAdded);\n svgCanvas.textActions.setInputElem($('#text')[0]);\n\n let str = '<div class=\"palette_item\" data-rgb=\"none\"></div>';\n $.each(palette, function (i, item) {\n str += '<div class=\"palette_item\" style=\"background-color: ' + item +\n ';\" data-rgb=\"' + item + '\"></div>';\n });\n $('#palette').append(str);\n\n // Set up editor background functionality\n // TODO add checkerboard as \"pattern\"\n const colorBlocks = ['#FFF', '#888', '#000']; // ,'url(data:image/gif;base64,R0lGODlhEAAQAIAAAP%2F%2F%2F9bW1iH5BAAAAAAALAAAAAAQABAAAAIfjG%2Bgq4jM3IFLJgpswNly%2FXkcBpIiVaInlLJr9FZWAQA7)'];\n str = '';\n $.each(colorBlocks, function () {\n str += '<div class=\"color_block\" style=\"background-color:' + this + ';\"></div>';\n });\n $('#bg_blocks').append(str);\n const blocks = $('#bg_blocks div');\n const curBg = 'cur_background';\n blocks.each(function () {\n const blk = $(this);\n blk.click(function () {\n blocks.removeClass(curBg);\n $(this).addClass(curBg);\n });\n });\n\n setBackground(editor.pref('bkgd_color'), editor.pref('bkgd_url'));\n\n $('#image_save_opts input').val([editor.pref('img_save')]);\n\n /**\n * @type {module:jQuerySpinButton.ValueCallback}\n */\n const changeRectRadius = function (ctl) {\n svgCanvas.setRectRadius(ctl.value);\n };\n\n /**\n * @type {module:jQuerySpinButton.ValueCallback}\n */\n const changeFontSize = function (ctl) {\n svgCanvas.setFontSize(ctl.value);\n };\n\n /**\n * @type {module:jQuerySpinButton.ValueCallback}\n */\n const changeStrokeWidth = function (ctl) {\n let val = ctl.value;\n if (val === 0 && selectedElement && ['line', 'polyline'].includes(selectedElement.nodeName)) {\n val = ctl.value = 1;\n }\n svgCanvas.setStrokeWidth(val);\n };\n\n /**\n * @type {module:jQuerySpinButton.ValueCallback}\n */\n const changeRotationAngle = function (ctl) {\n svgCanvas.setRotationAngle(ctl.value);\n $('#tool_reorient').toggleClass('disabled', parseInt(ctl.value) === 0);\n };\n\n /**\n * @param {external:jQuery.fn.SpinButton} ctl Spin Button\n * @param {string} [val=ctl.value]\n * @returns {void}\n */\n const changeOpacity = function (ctl, val) {\n if (Utils.isNullish(val)) { val = ctl.value; }\n $('#group_opacity').val(val);\n if (!ctl || !ctl.handle) {\n $('#opac_slider').slider('option', 'value', val);\n }\n svgCanvas.setOpacity(val / 100);\n };\n\n /**\n * @param {external:jQuery.fn.SpinButton} ctl Spin Button\n * @param {string} [val=ctl.value]\n * @param {boolean} noUndo\n * @returns {void}\n */\n const changeBlur = function (ctl, val, noUndo) {\n if (Utils.isNullish(val)) { val = ctl.value; }\n $('#blur').val(val);\n let complete = false;\n if (!ctl || !ctl.handle) {\n $('#blur_slider').slider('option', 'value', val);\n complete = true;\n }\n if (noUndo) {\n svgCanvas.setBlurNoUndo(val);\n } else {\n svgCanvas.setBlur(val, complete);\n }\n };\n\n $('#stroke_style').change(function () {\n svgCanvas.setStrokeAttr('stroke-dasharray', $(this).val());\n operaRepaint();\n });\n\n $('#stroke_linejoin').change(function () {\n svgCanvas.setStrokeAttr('stroke-linejoin', $(this).val());\n operaRepaint();\n });\n\n // Lose focus for select elements when changed (Allows keyboard shortcuts to work better)\n $('select').change(function () { $(this).blur(); });\n\n // fired when user wants to move elements to another layer\n let promptMoveLayerOnce = false;\n $('#selLayerNames').change(async function () {\n const destLayer = this.options[this.selectedIndex].value;\n const confirmStr = uiStrings.notification.QmoveElemsToLayer.replace('%s', destLayer);\n /**\n * @param {boolean} ok\n * @returns {void}\n */\n const moveToLayer = function (ok) {\n if (!ok) { return; }\n promptMoveLayerOnce = true;\n svgCanvas.moveSelectedToLayer(destLayer);\n svgCanvas.clearSelection();\n populateLayers();\n };\n if (destLayer) {\n if (promptMoveLayerOnce) {\n moveToLayer(true);\n } else {\n const ok = await $.confirm(confirmStr);\n if (!ok) {\n return;\n }\n moveToLayer(true);\n }\n }\n });\n\n $('#font_family').change(function () {\n svgCanvas.setFontFamily(this.value);\n });\n\n $('#seg_type').change(function () {\n svgCanvas.setSegType($(this).val());\n });\n\n $('#text').bind('keyup input', function () {\n svgCanvas.setTextContent(this.value);\n });\n\n $('#image_url').change(function () {\n setImageURL(this.value);\n });\n\n $('#link_url').change(function () {\n if (this.value.length) {\n svgCanvas.setLinkURL(this.value);\n } else {\n svgCanvas.removeHyperlink();\n }\n });\n\n $('#g_title').change(function () {\n svgCanvas.setGroupTitle(this.value);\n });\n\n $('.attr_changer').change(function () {\n const attr = this.getAttribute('data-attr');\n let val = this.value;\n const valid = isValidUnit(attr, val, selectedElement);\n\n if (!valid) {\n this.value = selectedElement.getAttribute(attr);\n /* await */ $.alert(uiStrings.notification.invalidAttrValGiven);\n return false;\n }\n\n if (attr !== 'id' && attr !== 'class') {\n if (isNaN(val)) {\n val = svgCanvas.convertToNum(attr, val);\n } else if (curConfig.baseUnit !== 'px') {\n // Convert unitless value to one with given unit\n\n const unitData = getTypeMap();\n\n if (selectedElement[attr] || svgCanvas.getMode() === 'pathedit' || attr === 'x' || attr === 'y') {\n val *= unitData[curConfig.baseUnit];\n }\n }\n }\n\n // if the user is changing the id, then de-select the element first\n // change the ID, then re-select it with the new ID\n if (attr === 'id') {\n const elem = selectedElement;\n svgCanvas.clearSelection();\n elem.id = val;\n svgCanvas.addToSelection([elem], true);\n } else {\n svgCanvas.changeSelectedAttribute(attr, val);\n }\n this.blur();\n return true;\n });\n\n // Prevent selection of elements when shift-clicking\n $('#palette').mouseover(function () {\n const inp = $('<input type=\"hidden\">');\n $(this).append(inp);\n inp.focus().remove();\n });\n\n $('.palette_item').mousedown(function (evt) {\n // shift key or right click for stroke\n const picker = evt.shiftKey || evt.button === 2 ? 'stroke' : 'fill';\n let color = $(this).data('rgb');\n let paint;\n\n // Webkit-based browsers returned 'initial' here for no stroke\n if (color === 'none' || color === 'transparent' || color === 'initial') {\n color = 'none';\n paint = new $.jGraduate.Paint();\n } else {\n paint = new $.jGraduate.Paint({alpha: 100, solidColor: color.substr(1)});\n }\n\n paintBox[picker].setPaint(paint);\n svgCanvas.setColor(picker, color);\n\n if (color !== 'none' && svgCanvas.getPaintOpacity(picker) !== 1) {\n svgCanvas.setPaintOpacity(picker, 1.0);\n }\n updateToolButtonState();\n }).bind('contextmenu', function (e) { e.preventDefault(); });\n\n $('#toggle_stroke_tools').on('click', function () {\n $('#tools_bottom').toggleClass('expanded');\n });\n\n (function () {\n const wArea = workarea[0];\n\n let lastX = null, lastY = null,\n panning = false, keypan = false;\n\n $('#svgcanvas').bind('mousemove mouseup', function (evt) {\n if (panning === false) { return true; }\n\n wArea.scrollLeft -= (evt.clientX - lastX);\n wArea.scrollTop -= (evt.clientY - lastY);\n\n lastX = evt.clientX;\n lastY = evt.clientY;\n\n if (evt.type === 'mouseup') { panning = false; }\n return false;\n }).mousedown(function (evt) {\n if (evt.button === 1 || keypan === true) {\n panning = true;\n lastX = evt.clientX;\n lastY = evt.clientY;\n return false;\n }\n return true;\n });\n\n $(window).mouseup(function () {\n panning = false;\n });\n\n $(document).bind('keydown', 'space', function (evt) {\n svgCanvas.spaceKey = keypan = true;\n evt.preventDefault();\n }).bind('keyup', 'space', function (evt) {\n evt.preventDefault();\n svgCanvas.spaceKey = keypan = false;\n }).bind('keydown', 'shift', function (evt) {\n if (svgCanvas.getMode() === 'zoom') {\n workarea.css('cursor', zoomOutIcon);\n }\n }).bind('keyup', 'shift', function (evt) {\n if (svgCanvas.getMode() === 'zoom') {\n workarea.css('cursor', zoomInIcon);\n }\n });\n\n /**\n * @param {boolean} active\n * @returns {void}\n */\n editor.setPanning = function (active) {\n svgCanvas.spaceKey = keypan = active;\n };\n }());\n\n (function () {\n const button = $('#main_icon');\n const overlay = $('#main_icon span');\n const list = $('#main_menu');\n\n let onButton = false;\n let height = 0;\n let jsHover = true;\n let setClick = false;\n\n /*\n // Currently unused\n const hideMenu = function () {\n list.fadeOut(200);\n };\n */\n\n $(window).mouseup(function (evt) {\n if (!onButton) {\n button.removeClass('buttondown');\n // do not hide if it was the file input as that input needs to be visible\n // for its change event to fire\n if (evt.target.tagName !== 'INPUT') {\n list.fadeOut(200);\n } else if (!setClick) {\n setClick = true;\n $(evt.target).click(function () {\n list.css('margin-left', '-9999px').show();\n });\n }\n }\n onButton = false;\n }).mousedown(function (evt) {\n // $('.contextMenu').hide();\n const islib = $(evt.target).closest('div.tools_flyout, .contextMenu').length;\n if (!islib) {\n $('.tools_flyout:visible,.contextMenu').fadeOut(250);\n }\n });\n\n overlay.bind('mousedown', function () {\n if (!button.hasClass('buttondown')) {\n // Margin must be reset in case it was changed before;\n list.css('margin-left', 0).show();\n if (!height) {\n height = list.height();\n }\n // Using custom animation as slideDown has annoying 'bounce effect'\n list.css('height', 0).animate({\n height\n }, 200);\n onButton = true;\n } else {\n list.fadeOut(200);\n }\n button.toggleClass('buttondown buttonup');\n }).hover(function () {\n onButton = true;\n }).mouseout(function () {\n onButton = false;\n });\n\n const listItems = $('#main_menu li');\n\n // Check if JS method of hovering needs to be used (Webkit bug)\n listItems.mouseover(function () {\n jsHover = ($(this).css('background-color') === 'rgba(0, 0, 0, 0)');\n\n listItems.unbind('mouseover');\n if (jsHover) {\n listItems.mouseover(function () {\n this.style.backgroundColor = '#FFC';\n }).mouseout(function () {\n this.style.backgroundColor = 'transparent';\n return true;\n });\n }\n });\n }());\n // Made public for UI customization.\n // TODO: Group UI functions into a public editor.ui interface.\n /**\n * See {@link http://api.jquery.com/bind/#bind-eventType-eventData-handler}.\n * @callback module:SVGEditor.DropDownCallback\n * @param {external:jQuery.Event} ev See {@link http://api.jquery.com/Types/#Event}\n * @listens external:jQuery.Event\n * @returns {void|boolean} Calls `preventDefault()` and `stopPropagation()`\n */\n /**\n * @param {Element|string} elem DOM Element or selector\n * @param {module:SVGEditor.DropDownCallback} callback Mouseup callback\n * @param {boolean} dropUp\n * @returns {void}\n */\n editor.addDropDown = function (elem, callback, dropUp) {\n if (!$(elem).length) { return; } // Quit if called on non-existent element\n const button = $(elem).find('button');\n const list = $(elem).find('ul').attr('id', $(elem)[0].id + '-list');\n if (dropUp) {\n $(elem).addClass('dropup');\n } else {\n // Move list to place where it can overflow container\n $('#option_lists').append(list);\n }\n list.find('li').bind('mouseup', callback);\n\n let onButton = false;\n $(window).mouseup(function (evt) {\n if (!onButton) {\n button.removeClass('down');\n list.hide();\n }\n onButton = false;\n });\n\n button.bind('mousedown', function () {\n if (!button.hasClass('down')) {\n if (!dropUp) {\n const pos = $(elem).position();\n list.css({\n top: pos.top + 24,\n left: pos.left - 10\n });\n }\n list.show();\n onButton = true;\n } else {\n list.hide();\n }\n button.toggleClass('down');\n }).hover(function () {\n onButton = true;\n }).mouseout(function () {\n onButton = false;\n });\n };\n\n editor.addDropDown('#font_family_dropdown', function () {\n $('#font_family').val($(this).text()).change();\n });\n\n editor.addDropDown('#opacity_dropdown', function () {\n if ($(this).find('div').length) { return; }\n const perc = parseInt($(this).text().split('%')[0]);\n changeOpacity(false, perc);\n }, true);\n\n // For slider usage, see: http://jqueryui.com/demos/slider/\n $('#opac_slider').slider({\n start () {\n $('#opacity_dropdown li:not(.special)').hide();\n },\n stop () {\n $('#opacity_dropdown li').show();\n $(window).mouseup();\n },\n slide (evt, ui) {\n changeOpacity(ui);\n }\n });\n\n editor.addDropDown('#blur_dropdown', $.noop);\n\n let slideStart = false;\n $('#blur_slider').slider({\n max: 10,\n step: 0.1,\n stop (evt, ui) {\n slideStart = false;\n changeBlur(ui);\n $('#blur_dropdown li').show();\n $(window).mouseup();\n },\n start () {\n slideStart = true;\n },\n slide (evt, ui) {\n changeBlur(ui, null, slideStart);\n }\n });\n\n editor.addDropDown('#zoom_dropdown', function () {\n const item = $(this);\n const val = item.data('val');\n if (val) {\n zoomChanged(window, val);\n } else {\n changeZoom({value: parseFloat(item.text())});\n }\n }, true);\n\n addAltDropDown('#stroke_linecap', '#linecap_opts', function () {\n setStrokeOpt(this, true);\n }, {dropUp: true});\n\n addAltDropDown('#stroke_linejoin', '#linejoin_opts', function () {\n setStrokeOpt(this, true);\n }, {dropUp: true});\n\n addAltDropDown('#tool_position', '#position_opts', function () {\n const letter = this.id.replace('tool_pos', '').charAt(0);\n svgCanvas.alignSelectedElements(letter, 'page');\n }, {multiclick: true});\n\n /*\n\n When a flyout icon is selected\n (if flyout) {\n - Change the icon\n - Make pressing the button run its stuff\n }\n - Run its stuff\n\n When its shortcut key is pressed\n - If not current in list, do as above\n , else:\n - Just run its stuff\n\n */\n\n // Unfocus text input when workarea is mousedowned.\n (function () {\n let inp;\n /**\n *\n * @returns {void}\n */\n const unfocus = function () {\n $(inp).blur();\n };\n\n $('#svg_editor').find('button, select, input:not(#text)').focus(function () {\n inp = this; // eslint-disable-line consistent-this\n uiContext = 'toolbars';\n workarea.mousedown(unfocus);\n }).blur(function () {\n uiContext = 'canvas';\n workarea.unbind('mousedown', unfocus);\n // Go back to selecting text if in textedit mode\n if (svgCanvas.getMode() === 'textedit') {\n $('#text').focus();\n }\n });\n }());\n\n /**\n *\n * @returns {void}\n */\n const clickFHPath = function () {\n if (toolButtonClick('#tool_fhpath')) {\n svgCanvas.setMode('fhpath');\n }\n };\n\n /**\n *\n * @returns {void}\n */\n const clickLine = function () {\n if (toolButtonClick('#tool_line')) {\n svgCanvas.setMode('line');\n }\n };\n\n /**\n *\n * @returns {void}\n */\n const clickSquare = function () {\n if (toolButtonClick('#tool_square')) {\n svgCanvas.setMode('square');\n }\n };\n\n /**\n *\n * @returns {void}\n */\n const clickRect = function () {\n if (toolButtonClick('#tool_rect')) {\n svgCanvas.setMode('rect');\n }\n };\n\n /**\n *\n * @returns {void}\n */\n const clickFHRect = function () {\n if (toolButtonClick('#tool_fhrect')) {\n svgCanvas.setMode('fhrect');\n }\n };\n\n /**\n *\n * @returns {void}\n */\n const clickCircle = function () {\n if (toolButtonClick('#tool_circle')) {\n svgCanvas.setMode('circle');\n }\n };\n\n /**\n *\n * @returns {void}\n */\n const clickEllipse = function () {\n if (toolButtonClick('#tool_ellipse')) {\n svgCanvas.setMode('ellipse');\n }\n };\n\n /**\n *\n * @returns {void}\n */\n const clickFHEllipse = function () {\n if (toolButtonClick('#tool_fhellipse')) {\n svgCanvas.setMode('fhellipse');\n }\n };\n\n /**\n *\n * @returns {void}\n */\n const clickImage = function () {\n if (toolButtonClick('#tool_image')) {\n svgCanvas.setMode('image');\n }\n };\n\n /**\n *\n * @returns {void}\n */\n const clickZoom = function () {\n if (toolButtonClick('#tool_zoom')) {\n svgCanvas.setMode('zoom');\n workarea.css('cursor', zoomInIcon);\n }\n };\n\n /**\n * @param {Float} multiplier\n * @returns {void}\n */\n const zoomImage = function (multiplier) {\n const res = svgCanvas.getResolution();\n multiplier = multiplier ? res.zoom * multiplier : 1;\n // setResolution(res.w * multiplier, res.h * multiplier, true);\n $('#zoom').val(multiplier * 100);\n svgCanvas.setZoom(multiplier);\n zoomDone();\n updateCanvas(true);\n };\n\n /**\n *\n * @returns {void}\n */\n const dblclickZoom = function () {\n if (toolButtonClick('#tool_zoom')) {\n zoomImage();\n setSelectMode();\n }\n };\n\n /**\n *\n * @returns {void}\n */\n const clickText = function () {\n if (toolButtonClick('#tool_text')) {\n svgCanvas.setMode('text');\n }\n };\n\n /**\n *\n * @returns {void}\n */\n const clickPath = function () {\n if (toolButtonClick('#tool_path')) {\n svgCanvas.setMode('path');\n }\n };\n\n /**\n * Delete is a contextual tool that only appears in the ribbon if\n * an element has been selected.\n * @returns {void}\n */\n const deleteSelected = function () {\n if (!Utils.isNullish(selectedElement) || multiselected) {\n svgCanvas.deleteSelectedElements();\n }\n };\n\n /**\n *\n * @returns {void}\n */\n const cutSelected = function () {\n if (!Utils.isNullish(selectedElement) || multiselected) {\n svgCanvas.cutSelectedElements();\n }\n };\n\n /**\n *\n * @returns {void}\n */\n const copySelected = function () {\n if (!Utils.isNullish(selectedElement) || multiselected) {\n svgCanvas.copySelectedElements();\n }\n };\n\n /**\n *\n * @returns {void}\n */\n const pasteInCenter = function () {\n const zoom = svgCanvas.getZoom();\n const x = (workarea[0].scrollLeft + workarea.width() / 2) / zoom - svgCanvas.contentW;\n const y = (workarea[0].scrollTop + workarea.height() / 2) / zoom - svgCanvas.contentH;\n svgCanvas.pasteElements('point', x, y);\n };\n\n /**\n *\n * @returns {void}\n */\n const moveToTopSelected = function () {\n if (!Utils.isNullish(selectedElement)) {\n svgCanvas.moveToTopSelectedElement();\n }\n };\n\n /**\n *\n * @returns {void}\n */\n const moveToBottomSelected = function () {\n if (!Utils.isNullish(selectedElement)) {\n svgCanvas.moveToBottomSelectedElement();\n }\n };\n\n /**\n * @param {\"Up\"|\"Down\"} dir\n * @returns {void}\n */\n const moveUpDownSelected = function (dir) {\n if (!Utils.isNullish(selectedElement)) {\n svgCanvas.moveUpDownSelected(dir);\n }\n };\n\n /**\n *\n * @returns {void}\n */\n const convertToPath = function () {\n if (!Utils.isNullish(selectedElement)) {\n svgCanvas.convertToPath();\n }\n };\n\n /**\n *\n * @returns {void}\n */\n const reorientPath = function () {\n if (!Utils.isNullish(selectedElement)) {\n path.reorient();\n }\n };\n\n /**\n *\n * @returns {Promise<void>} Resolves to `undefined`\n */\n const makeHyperlink = async function () {\n if (!Utils.isNullish(selectedElement) || multiselected) {\n const url = await $.prompt(uiStrings.notification.enterNewLinkURL, 'http://');\n if (url) {\n svgCanvas.makeHyperlink(url);\n }\n }\n };\n\n /**\n * @param {Float} dx\n * @param {Float} dy\n * @returns {void}\n */\n const moveSelected = function (dx, dy) {\n if (!Utils.isNullish(selectedElement) || multiselected) {\n if (curConfig.gridSnapping) {\n // Use grid snap value regardless of zoom level\n const multi = svgCanvas.getZoom() * curConfig.snappingStep;\n dx *= multi;\n dy *= multi;\n }\n svgCanvas.moveSelectedElements(dx, dy);\n }\n };\n\n /**\n *\n * @returns {void}\n */\n const linkControlPoints = function () {\n $('#tool_node_link').toggleClass('push_button_pressed tool_button');\n const linked = $('#tool_node_link').hasClass('push_button_pressed');\n path.linkControlPoints(linked);\n };\n\n /**\n *\n * @returns {void}\n */\n const clonePathNode = function () {\n if (path.getNodePoint()) {\n path.clonePathNode();\n }\n };\n\n /**\n *\n * @returns {void}\n */\n const deletePathNode = function () {\n if (path.getNodePoint()) {\n path.deletePathNode();\n }\n };\n\n /**\n *\n * @returns {void}\n */\n const addSubPath = function () {\n const button = $('#tool_add_subpath');\n const sp = !button.hasClass('push_button_pressed');\n button.toggleClass('push_button_pressed tool_button');\n path.addSubPath(sp);\n };\n\n /**\n *\n * @returns {void}\n */\n const opencloseSubPath = function () {\n path.opencloseSubPath();\n };\n\n /**\n *\n * @returns {void}\n */\n const selectNext = function () {\n svgCanvas.cycleElement(1);\n };\n\n /**\n *\n * @returns {void}\n */\n const selectPrev = function () {\n svgCanvas.cycleElement(0);\n };\n\n /**\n * @param {0|1} cw\n * @param {Integer} step\n * @returns {void}\n */\n const rotateSelected = function (cw, step) {\n if (Utils.isNullish(selectedElement) || multiselected) { return; }\n if (!cw) { step *= -1; }\n const angle = parseFloat($('#angle').val()) + step;\n svgCanvas.setRotationAngle(angle);\n updateContextPanel();\n };\n\n /**\n * @fires module:svgcanvas.SvgCanvas#event:ext_onNewDocument\n * @returns {Promise<void>} Resolves to `undefined`\n */\n const clickClear = async function () {\n const [x, y] = curConfig.dimensions;\n const ok = await $.confirm(uiStrings.notification.QwantToClear);\n if (!ok) {\n return;\n }\n setSelectMode();\n svgCanvas.clear();\n svgCanvas.setResolution(x, y);\n updateCanvas(true);\n zoomImage();\n populateLayers();\n updateContextPanel();\n prepPaints();\n svgCanvas.runExtensions('onNewDocument');\n };\n\n /**\n *\n * @returns {false}\n */\n const clickBold = function () {\n svgCanvas.setBold(!svgCanvas.getBold());\n updateContextPanel();\n return false;\n };\n\n /**\n *\n * @returns {false}\n */\n const clickItalic = function () {\n svgCanvas.setItalic(!svgCanvas.getItalic());\n updateContextPanel();\n return false;\n };\n\n /**\n *\n * @returns {void}\n */\n const clickSave = function () {\n // In the future, more options can be provided here\n const saveOpts = {\n images: editor.pref('img_save'),\n round_digits: 6\n };\n svgCanvas.save(saveOpts);\n };\n\n let loadingURL;\n /**\n *\n * @returns {Promise<void>} Resolves to `undefined`\n */\n const clickExport = async function () {\n const imgType = await $.select('Select an image type for export: ', [\n // See http://kangax.github.io/jstests/toDataUrl_mime_type_test/ for a useful list of MIME types and browser support\n // 'ICO', // Todo: Find a way to preserve transparency in SVG-Edit if not working presently and do full packaging for x-icon; then switch back to position after 'PNG'\n 'PNG',\n 'JPEG', 'BMP', 'WEBP', 'PDF'\n ], function () {\n const sel = $(this);\n if (sel.val() === 'JPEG' || sel.val() === 'WEBP') {\n if (!$('#image-slider').length) {\n $(`<div><label>${uiStrings.ui.quality}\n <input id=\"image-slider\"\n type=\"range\" min=\"1\" max=\"100\" value=\"92\" />\n </label></div>`).appendTo(sel.parent());\n }\n } else {\n $('#image-slider').parent().remove();\n }\n }); // todo: replace hard-coded msg with uiStrings.notification.\n if (!imgType) {\n return;\n }\n // Open placeholder window (prevents popup)\n let exportWindowName;\n\n /**\n *\n * @returns {void}\n */\n function openExportWindow () {\n const {loadingImage} = uiStrings.notification;\n if (curConfig.exportWindowType === 'new') {\n editor.exportWindowCt++;\n }\n exportWindowName = curConfig.canvasName + editor.exportWindowCt;\n let popHTML, popURL;\n if (loadingURL) {\n popURL = loadingURL;\n } else {\n popHTML = `<!DOCTYPE html><html>\n <head>\n <meta charset=\"utf-8\">\n <title>${loadingImage} \n \n ${loadingImage} \n `;\n if (typeof URL !== 'undefined' && URL.createObjectURL) {\n const blob = new Blob([popHTML], {type: 'text/html'});\n popURL = URL.createObjectURL(blob);\n } else {\n popURL = 'data:text/html;base64;charset=utf-8,' + Utils.encode64(popHTML);\n }\n loadingURL = popURL;\n }\n exportWindow = window.open(popURL, exportWindowName);\n }\n const chrome = isChrome();\n if (imgType === 'PDF') {\n if (!customExportPDF && !chrome) {\n openExportWindow();\n }\n svgCanvas.exportPDF(exportWindowName);\n } else {\n if (!customExportImage) {\n openExportWindow();\n }\n const quality = parseInt($('#image-slider').val()) / 100;\n /* const results = */ await svgCanvas.rasterExport(imgType, quality, exportWindowName);\n }\n };\n\n /**\n * By default, svgCanvas.open() is a no-op. It is up to an extension\n * mechanism (opera widget, etc.) to call `setCustomHandlers()` which\n * will make it do something.\n * @returns {void}\n */\n const clickOpen = function () {\n svgCanvas.open();\n };\n\n /**\n *\n * @returns {void}\n */\n const clickImport = function () {\n /* */\n };\n\n /**\n *\n * @returns {void}\n */\n const clickUndo = function () {\n if (undoMgr.getUndoStackSize() > 0) {\n undoMgr.undo();\n populateLayers();\n }\n };\n\n /**\n *\n * @returns {void}\n */\n const clickRedo = function () {\n if (undoMgr.getRedoStackSize() > 0) {\n undoMgr.redo();\n populateLayers();\n }\n };\n\n /**\n *\n * @returns {void}\n */\n const clickGroup = function () {\n // group\n if (multiselected) {\n svgCanvas.groupSelectedElements();\n // ungroup\n } else if (selectedElement) {\n svgCanvas.ungroupSelectedElement();\n }\n };\n\n /**\n *\n * @returns {void}\n */\n const clickClone = function () {\n svgCanvas.cloneSelectedElements(20, 20);\n };\n\n /**\n *\n * @returns {void}\n */\n const clickAlign = function () {\n const letter = this.id.replace('tool_align', '').charAt(0);\n svgCanvas.alignSelectedElements(letter, $('#align_relative_to').val());\n };\n\n /**\n *\n * @returns {void}\n */\n const clickWireframe = function () {\n $('#tool_wireframe').toggleClass('push_button_pressed tool_button');\n workarea.toggleClass('wireframe');\n\n if (supportsNonSS) { return; }\n const wfRules = $('#wireframe_rules');\n if (!wfRules.length) {\n /* wfRules = */ $('').appendTo('head');\n } else {\n wfRules.empty();\n }\n\n updateWireFrame();\n };\n\n $('#svg_docprops_container, #svg_prefs_container').draggable({\n cancel: 'button,fieldset',\n containment: 'window'\n }).css('position', 'absolute');\n\n let docprops = false;\n let preferences = false;\n\n /**\n *\n * @returns {void}\n */\n const showDocProperties = function () {\n if (docprops) { return; }\n docprops = true;\n\n // This selects the correct radio button by using the array notation\n $('#image_save_opts input').val([editor.pref('img_save')]);\n\n // update resolution option with actual resolution\n const res = svgCanvas.getResolution();\n if (curConfig.baseUnit !== 'px') {\n res.w = convertUnit(res.w) + curConfig.baseUnit;\n res.h = convertUnit(res.h) + curConfig.baseUnit;\n }\n\n $('#canvas_width').val(res.w);\n $('#canvas_height').val(res.h);\n $('#canvas_title').val(svgCanvas.getDocumentTitle());\n\n $('#svg_docprops').show();\n };\n\n /**\n *\n * @returns {void}\n */\n const showPreferences = function () {\n if (preferences) { return; }\n preferences = true;\n $('#main_menu').hide();\n\n // Update background color with current one\n const canvasBg = curPrefs.bkgd_color;\n const url = editor.pref('bkgd_url');\n blocks.each(function () {\n const blk = $(this);\n const isBg = blk.css('background-color') === canvasBg;\n blk.toggleClass(curBg, isBg);\n if (isBg) { $('#canvas_bg_url').removeClass(curBg); }\n });\n if (!canvasBg) { blocks.eq(0).addClass(curBg); }\n if (url) {\n $('#canvas_bg_url').val(url);\n }\n $('#grid_snapping_on').prop('checked', curConfig.gridSnapping);\n $('#grid_snapping_step').attr('value', curConfig.snappingStep);\n $('#grid_color').attr('value', curConfig.gridColor);\n\n $('#svg_prefs').show();\n };\n\n /**\n *\n * @returns {void}\n */\n const openHomePage = function () {\n window.open(homePage, '_blank');\n };\n\n /**\n *\n * @returns {void}\n */\n const hideSourceEditor = function () {\n $('#svg_source_editor').hide();\n editingsource = false;\n $('#svg_source_textarea').blur();\n };\n\n /**\n *\n * @returns {Promise} Resolves to `undefined`\n */\n const saveSourceEditor = async function () {\n if (!editingsource) { return; }\n\n const saveChanges = function () {\n svgCanvas.clearSelection();\n hideSourceEditor();\n zoomImage();\n populateLayers();\n updateTitle();\n prepPaints();\n };\n\n if (!svgCanvas.setSvgString($('#svg_source_textarea').val())) {\n const ok = await $.confirm(uiStrings.notification.QerrorsRevertToSource);\n if (!ok) {\n return;\n }\n saveChanges();\n return;\n }\n saveChanges();\n setSelectMode();\n };\n\n /**\n *\n * @returns {void}\n */\n const hideDocProperties = function () {\n $('#svg_docprops').hide();\n $('#canvas_width,#canvas_height').removeAttr('disabled');\n $('#resolution')[0].selectedIndex = 0;\n $('#image_save_opts input').val([editor.pref('img_save')]);\n docprops = false;\n };\n\n /**\n *\n * @returns {void}\n */\n const hidePreferences = function () {\n $('#svg_prefs').hide();\n preferences = false;\n };\n\n /**\n *\n * @returns {boolean} Whether there were problems saving the document properties\n */\n const saveDocProperties = function () {\n // set title\n const newTitle = $('#canvas_title').val();\n updateTitle(newTitle);\n svgCanvas.setDocumentTitle(newTitle);\n\n // update resolution\n const width = $('#canvas_width'), w = width.val();\n const height = $('#canvas_height'), h = height.val();\n\n if (w !== 'fit' && !isValidUnit('width', w)) {\n width.parent().addClass('error');\n /* await */ $.alert(uiStrings.notification.invalidAttrValGiven);\n return false;\n }\n\n width.parent().removeClass('error');\n\n if (h !== 'fit' && !isValidUnit('height', h)) {\n height.parent().addClass('error');\n /* await */ $.alert(uiStrings.notification.invalidAttrValGiven);\n return false;\n }\n\n height.parent().removeClass('error');\n\n if (!svgCanvas.setResolution(w, h)) {\n /* await */ $.alert(uiStrings.notification.noContentToFitTo);\n return false;\n }\n\n // Set image save option\n editor.pref('img_save', $('#image_save_opts :checked').val());\n updateCanvas();\n hideDocProperties();\n return true;\n };\n\n /**\n * Save user preferences based on current values in the UI.\n * @function module:SVGEditor.savePreferences\n * @returns {Promise}\n */\n const savePreferences = editor.savePreferences = async function () {\n // Set background\n const color = $('#bg_blocks div.cur_background').css('background-color') || '#FFF';\n setBackground(color, $('#canvas_bg_url').val());\n\n // set language\n const lang = $('#lang_select').val();\n if (lang && lang !== editor.pref('lang')) {\n const {langParam, langData} = await editor.putLocale(lang, goodLangs, curConfig);\n await setLang(langParam, langData);\n }\n\n // set icon size\n setIconSize($('#iconsize').val());\n\n // set grid setting\n curConfig.gridSnapping = $('#grid_snapping_on')[0].checked;\n curConfig.snappingStep = $('#grid_snapping_step').val();\n curConfig.gridColor = $('#grid_color').val();\n curConfig.showRulers = $('#show_rulers')[0].checked;\n\n $('#rulers').toggle(curConfig.showRulers);\n if (curConfig.showRulers) { updateRulers(); }\n curConfig.baseUnit = $('#base_unit').val();\n\n svgCanvas.setConfig(curConfig);\n\n updateCanvas();\n hidePreferences();\n };\n\n let resetScrollPos = $.noop;\n\n /**\n *\n * @returns {Promise} Resolves to `undefined`\n */\n const cancelOverlays = async function () {\n $('#dialog_box').hide();\n if (!editingsource && !docprops && !preferences) {\n if (curContext) {\n svgCanvas.leaveContext();\n }\n return;\n }\n\n if (editingsource) {\n if (origSource !== $('#svg_source_textarea').val()) {\n const ok = await $.confirm(uiStrings.notification.QignoreSourceChanges);\n if (ok) {\n hideSourceEditor();\n }\n } else {\n hideSourceEditor();\n }\n } else if (docprops) {\n hideDocProperties();\n } else if (preferences) {\n hidePreferences();\n }\n resetScrollPos();\n };\n\n const winWh = {width: $(window).width(), height: $(window).height()};\n\n // Fix for Issue 781: Drawing area jumps to top-left corner on window resize (IE9)\n if (isIE()) {\n resetScrollPos = function () {\n if (workarea[0].scrollLeft === 0 && workarea[0].scrollTop === 0) {\n workarea[0].scrollLeft = curScrollPos.left;\n workarea[0].scrollTop = curScrollPos.top;\n }\n };\n\n curScrollPos = {\n left: workarea[0].scrollLeft,\n top: workarea[0].scrollTop\n };\n\n $(window).resize(resetScrollPos);\n editor.ready(function () {\n // TODO: Find better way to detect when to do this to minimize\n // flickering effect\n return new Promise((resolve, reject) => { // eslint-disable-line promise/avoid-new\n setTimeout(function () {\n resetScrollPos();\n resolve();\n }, 500);\n });\n });\n\n workarea.scroll(function () {\n curScrollPos = {\n left: workarea[0].scrollLeft,\n top: workarea[0].scrollTop\n };\n });\n }\n\n $(window).resize(function (evt) {\n $.each(winWh, function (type, val) {\n const curval = $(window)[type]();\n workarea[0]['scroll' + (type === 'width' ? 'Left' : 'Top')] -= (curval - val) / 2;\n winWh[type] = curval;\n });\n setFlyoutPositions();\n });\n\n workarea.scroll(function () {\n // TODO: jQuery's scrollLeft/Top() wouldn't require a null check\n if ($('#ruler_x').length) {\n $('#ruler_x')[0].scrollLeft = workarea[0].scrollLeft;\n }\n if ($('#ruler_y').length) {\n $('#ruler_y')[0].scrollTop = workarea[0].scrollTop;\n }\n });\n\n $('#url_notice').click(function () {\n /* await */ $.alert(this.title);\n });\n\n $('#change_image_url').click(promptImgURL);\n\n // added these event handlers for all the push buttons so they\n // behave more like buttons being pressed-in and not images\n (function () {\n const toolnames = [\n 'clear', 'open', 'save', 'source', 'delete',\n 'delete_multi', 'paste', 'clone', 'clone_multi',\n 'move_top', 'move_bottom'\n ];\n const curClass = 'tool_button_current';\n\n let allTools = '';\n\n $.each(toolnames, function (i, item) {\n allTools += (i ? ',' : '') + '#tool_' + item;\n });\n\n $(allTools).mousedown(function () {\n $(this).addClass(curClass);\n }).bind('mousedown mouseout', function () {\n $(this).removeClass(curClass);\n });\n\n $('#tool_undo, #tool_redo').mousedown(function () {\n if (!$(this).hasClass('disabled')) { $(this).addClass(curClass); }\n }).bind('mousedown mouseout', function () {\n $(this).removeClass(curClass);\n });\n }());\n\n // switch modifier key in tooltips if mac\n // NOTE: This code is not used yet until I can figure out how to successfully bind ctrl/meta\n // in Opera and Chrome\n if (isMac() && !window.opera) {\n const shortcutButtons = [\n 'tool_clear', 'tool_save', 'tool_source',\n 'tool_undo', 'tool_redo', 'tool_clone'\n ];\n let i = shortcutButtons.length;\n while (i--) {\n const button = document.getElementById(shortcutButtons[i]);\n if (button) {\n const {title} = button;\n const index = title.indexOf('Ctrl+');\n button.title = [\n title.substr(0, index),\n 'Cmd+',\n title.substr(index + 5)\n ].join('');\n }\n }\n }\n\n /**\n * @param {external:jQuery} elem\n * @todo Go back to the color boxes having white background-color and then setting\n * background-image to none.png (otherwise partially transparent gradients look weird)\n * @returns {void}\n */\n const colorPicker = function (elem) {\n const picker = elem.attr('id') === 'stroke_color' ? 'stroke' : 'fill';\n // const opacity = (picker == 'stroke' ? $('#stroke_opacity') : $('#fill_opacity'));\n const title = picker === 'stroke'\n ? uiStrings.ui.pick_stroke_paint_opacity\n : uiStrings.ui.pick_fill_paint_opacity;\n // let wasNone = false; // Currently unused\n const pos = elem.offset();\n let {paint} = paintBox[picker];\n $('#color_picker')\n .draggable({\n cancel: '.jGraduate_tabs, .jGraduate_colPick, .jGraduate_gradPick, .jPicker',\n containment: 'window'\n })\n .css(curConfig.colorPickerCSS || {left: pos.left - 140, bottom: 40})\n .jGraduate(\n {\n paint,\n window: {pickerTitle: title},\n images: {clientPath: curConfig.jGraduatePath},\n newstop: 'inverse'\n },\n function (p) {\n paint = new $.jGraduate.Paint(p);\n paintBox[picker].setPaint(paint);\n svgCanvas.setPaint(picker, paint);\n $('#color_picker').hide();\n },\n function () {\n $('#color_picker').hide();\n }\n );\n };\n\n class PaintBox {\n constructor (container, type) {\n const cur = curConfig[type === 'fill' ? 'initFill' : 'initStroke'];\n // set up gradients to be used for the buttons\n const svgdocbox = new DOMParser().parseFromString(\n `\n \n `,\n 'text/xml'\n );\n\n let docElem = svgdocbox.documentElement;\n docElem = $(container)[0].appendChild(document.importNode(docElem, true));\n docElem.setAttribute('width', 16.5);\n\n this.rect = docElem.firstElementChild;\n this.defs = docElem.getElementsByTagName('defs')[0];\n this.grad = this.defs.firstElementChild;\n this.paint = new $.jGraduate.Paint({solidColor: cur.color});\n this.type = type;\n }\n setPaint (paint, apply) {\n this.paint = paint;\n\n const ptype = paint.type;\n const opac = paint.alpha / 100;\n\n let fillAttr = 'none';\n switch (ptype) {\n case 'solidColor':\n fillAttr = (paint[ptype] !== 'none') ? '#' + paint[ptype] : paint[ptype];\n break;\n case 'linearGradient':\n case 'radialGradient': {\n this.grad.remove();\n this.grad = this.defs.appendChild(paint[ptype]);\n const id = this.grad.id = 'gradbox_' + this.type;\n fillAttr = 'url(#' + id + ')';\n break;\n }\n }\n\n this.rect.setAttribute('fill', fillAttr);\n this.rect.setAttribute('opacity', opac);\n\n if (apply) {\n svgCanvas.setColor(this.type, this._paintColor, true);\n svgCanvas.setPaintOpacity(this.type, this._paintOpacity, true);\n }\n }\n\n update (apply) {\n if (!selectedElement) { return; }\n\n const {type} = this;\n switch (selectedElement.tagName) {\n case 'use':\n case 'image':\n case 'foreignObject':\n // These elements don't have fill or stroke, so don't change\n // the current value\n return;\n case 'g':\n case 'a': {\n const childs = selectedElement.getElementsByTagName('*');\n\n let gPaint = null;\n for (let i = 0, len = childs.length; i < len; i++) {\n const elem = childs[i];\n const p = elem.getAttribute(type);\n if (i === 0) {\n gPaint = p;\n } else if (gPaint !== p) {\n gPaint = null;\n break;\n }\n }\n\n if (gPaint === null) {\n // No common color, don't update anything\n this._paintColor = null;\n return;\n }\n this._paintColor = gPaint;\n this._paintOpacity = 1;\n break;\n } default: {\n this._paintOpacity = parseFloat(selectedElement.getAttribute(type + '-opacity'));\n if (isNaN(this._paintOpacity)) {\n this._paintOpacity = 1.0;\n }\n\n const defColor = type === 'fill' ? 'black' : 'none';\n this._paintColor = selectedElement.getAttribute(type) || defColor;\n }\n }\n\n if (apply) {\n svgCanvas.setColor(type, this._paintColor, true);\n svgCanvas.setPaintOpacity(type, this._paintOpacity, true);\n }\n\n this._paintOpacity *= 100;\n\n const paint = getPaint(this._paintColor, this._paintOpacity, type);\n // update the rect inside #fill_color/#stroke_color\n this.setPaint(paint);\n }\n\n prep () {\n const ptype = this.paint.type;\n\n switch (ptype) {\n case 'linearGradient':\n case 'radialGradient': {\n const paint = new $.jGraduate.Paint({copy: this.paint});\n svgCanvas.setPaint(this.type, paint);\n break;\n }\n }\n }\n }\n PaintBox.ctr = 0;\n\n paintBox.fill = new PaintBox('#fill_color', 'fill');\n paintBox.stroke = new PaintBox('#stroke_color', 'stroke');\n\n $('#stroke_width').val(curConfig.initStroke.width);\n $('#group_opacity').val(curConfig.initOpacity * 100);\n\n // Use this SVG elem to test vectorEffect support\n const testEl = paintBox.fill.rect.cloneNode(false);\n testEl.setAttribute('style', 'vector-effect:non-scaling-stroke');\n const supportsNonSS = (testEl.style.vectorEffect === 'non-scaling-stroke');\n testEl.removeAttribute('style');\n const svgdocbox = paintBox.fill.rect.ownerDocument;\n // Use this to test support for blur element. Seems to work to test support in Webkit\n const blurTest = svgdocbox.createElementNS(NS.SVG, 'feGaussianBlur');\n if (blurTest.stdDeviationX === undefined) {\n $('#tool_blur').hide();\n }\n $(blurTest).remove();\n\n // Test for zoom icon support\n (function () {\n const pre = '-' + uaPrefix.toLowerCase() + '-zoom-';\n const zoom = pre + 'in';\n workarea.css('cursor', zoom);\n if (workarea.css('cursor') === zoom) {\n zoomInIcon = zoom;\n zoomOutIcon = pre + 'out';\n }\n workarea.css('cursor', 'auto');\n }());\n\n // Test for embedImage support (use timeout to not interfere with page load)\n setTimeout(function () {\n svgCanvas.embedImage('images/logo.png', function (datauri) {\n if (!datauri) {\n // Disable option\n $('#image_save_opts [value=embed]').attr('disabled', 'disabled');\n $('#image_save_opts input').val(['ref']);\n editor.pref('img_save', 'ref');\n $('#image_opt_embed').css('color', '#666').attr(\n 'title',\n uiStrings.notification.featNotSupported\n );\n }\n });\n }, 1000);\n\n $('#fill_color, #tool_fill .icon_label').click(function () {\n colorPicker($('#fill_color'));\n updateToolButtonState();\n });\n\n $('#stroke_color, #tool_stroke .icon_label').click(function () {\n colorPicker($('#stroke_color'));\n updateToolButtonState();\n });\n\n $('#group_opacityLabel').click(function () {\n $('#opacity_dropdown button').mousedown();\n $(window).mouseup();\n });\n\n $('#zoomLabel').click(function () {\n $('#zoom_dropdown button').mousedown();\n $(window).mouseup();\n });\n\n $('#tool_move_top').mousedown(function (evt) {\n $('#tools_stacking').show();\n evt.preventDefault();\n });\n\n $('.layer_button').mousedown(function () {\n $(this).addClass('layer_buttonpressed');\n }).mouseout(function () {\n $(this).removeClass('layer_buttonpressed');\n }).mouseup(function () {\n $(this).removeClass('layer_buttonpressed');\n });\n\n $('.push_button').mousedown(function () {\n if (!$(this).hasClass('disabled')) {\n $(this).addClass('push_button_pressed').removeClass('push_button');\n }\n }).mouseout(function () {\n $(this).removeClass('push_button_pressed').addClass('push_button');\n }).mouseup(function () {\n $(this).removeClass('push_button_pressed').addClass('push_button');\n });\n\n // ask for a layer name\n $('#layer_new').click(async function () {\n let uniqName,\n i = svgCanvas.getCurrentDrawing().getNumLayers();\n do {\n uniqName = uiStrings.layers.layer + ' ' + (++i);\n } while (svgCanvas.getCurrentDrawing().hasLayer(uniqName));\n\n const newName = await $.prompt(uiStrings.notification.enterUniqueLayerName, uniqName);\n if (!newName) { return; }\n if (svgCanvas.getCurrentDrawing().hasLayer(newName)) {\n /* await */ $.alert(uiStrings.notification.dupeLayerName);\n return;\n }\n svgCanvas.createLayer(newName);\n updateContextPanel();\n populateLayers();\n });\n\n /**\n *\n * @returns {void}\n */\n function deleteLayer () {\n if (svgCanvas.deleteCurrentLayer()) {\n updateContextPanel();\n populateLayers();\n // This matches what SvgCanvas does\n // TODO: make this behavior less brittle (svg-editor should get which\n // layer is selected from the canvas and then select that one in the UI)\n $('#layerlist tr.layer').removeClass('layersel');\n $('#layerlist tr.layer:first').addClass('layersel');\n }\n }\n\n /**\n *\n * @returns {Promise}\n */\n async function cloneLayer () {\n const name = svgCanvas.getCurrentDrawing().getCurrentLayerName() + ' copy';\n\n const newName = await $.prompt(uiStrings.notification.enterUniqueLayerName, name);\n if (!newName) { return; }\n if (svgCanvas.getCurrentDrawing().hasLayer(newName)) {\n /* await */ $.alert(uiStrings.notification.dupeLayerName);\n return;\n }\n svgCanvas.cloneLayer(newName);\n updateContextPanel();\n populateLayers();\n }\n\n /**\n *\n * @returns {void}\n */\n function mergeLayer () {\n if ($('#layerlist tr.layersel').index() === svgCanvas.getCurrentDrawing().getNumLayers() - 1) {\n return;\n }\n svgCanvas.mergeLayer();\n updateContextPanel();\n populateLayers();\n }\n\n /**\n * @param {Integer} pos\n * @returns {void}\n */\n function moveLayer (pos) {\n const total = svgCanvas.getCurrentDrawing().getNumLayers();\n\n let curIndex = $('#layerlist tr.layersel').index();\n if (curIndex > 0 || curIndex < total - 1) {\n curIndex += pos;\n svgCanvas.setCurrentLayerPosition(total - curIndex - 1);\n populateLayers();\n }\n }\n\n $('#layer_delete').click(deleteLayer);\n\n $('#layer_up').click(() => {\n moveLayer(-1);\n });\n\n $('#layer_down').click(() => {\n moveLayer(1);\n });\n\n $('#layer_rename').click(async function () {\n // const curIndex = $('#layerlist tr.layersel').prevAll().length; // Currently unused\n const oldName = $('#layerlist tr.layersel td.layername').text();\n const newName = await $.prompt(uiStrings.notification.enterNewLayerName, '');\n if (!newName) { return; }\n if (oldName === newName || svgCanvas.getCurrentDrawing().hasLayer(newName)) {\n /* await */ $.alert(uiStrings.notification.layerHasThatName);\n return;\n }\n\n svgCanvas.renameCurrentLayer(newName);\n populateLayers();\n });\n\n const SIDEPANEL_MAXWIDTH = 300;\n const SIDEPANEL_OPENWIDTH = 150;\n let sidedrag = -1, sidedragging = false, allowmove = false;\n\n /**\n * @param {Float} delta\n * @fires module:svgcanvas.SvgCanvas#event:ext_workareaResized\n * @returns {void}\n */\n const changeSidePanelWidth = function (delta) {\n const rulerX = $('#ruler_x');\n $('#sidepanels').width('+=' + delta);\n $('#layerpanel').width('+=' + delta);\n rulerX.css('right', parseInt(rulerX.css('right')) + delta);\n workarea.css('right', parseInt(workarea.css('right')) + delta);\n svgCanvas.runExtensions('workareaResized');\n };\n\n /**\n * @param {Event} evt\n * @returns {void}\n */\n const resizeSidePanel = function (evt) {\n if (!allowmove) { return; }\n if (sidedrag === -1) { return; }\n sidedragging = true;\n let deltaX = sidedrag - evt.pageX;\n const sideWidth = $('#sidepanels').width();\n if (sideWidth + deltaX > SIDEPANEL_MAXWIDTH) {\n deltaX = SIDEPANEL_MAXWIDTH - sideWidth;\n // sideWidth = SIDEPANEL_MAXWIDTH;\n } else if (sideWidth + deltaX < 2) {\n deltaX = 2 - sideWidth;\n // sideWidth = 2;\n }\n if (deltaX === 0) { return; }\n sidedrag -= deltaX;\n changeSidePanelWidth(deltaX);\n };\n\n /**\n * If width is non-zero, then fully close it; otherwise fully open it.\n * @param {boolean} close Forces the side panel closed\n * @returns {void}\n */\n const toggleSidePanel = function (close) {\n const dpr = window.devicePixelRatio || 1;\n const w = $('#sidepanels').width();\n const isOpened = (dpr < 1 ? w : w / dpr) > 2;\n const zoomAdjustedSidepanelWidth = (dpr < 1 ? 1 : dpr) * SIDEPANEL_OPENWIDTH;\n const deltaX = (isOpened || close ? 0 : zoomAdjustedSidepanelWidth) - w;\n changeSidePanelWidth(deltaX);\n };\n\n $('#sidepanel_handle')\n .mousedown(function (evt) {\n sidedrag = evt.pageX;\n $(window).mousemove(resizeSidePanel);\n allowmove = false;\n // Silly hack for Chrome, which always runs mousemove right after mousedown\n setTimeout(function () {\n allowmove = true;\n }, 20);\n })\n .mouseup(function (evt) {\n if (!sidedragging) { toggleSidePanel(); }\n sidedrag = -1;\n sidedragging = false;\n });\n\n $(window).mouseup(function () {\n sidedrag = -1;\n sidedragging = false;\n $('#svg_editor').unbind('mousemove', resizeSidePanel);\n });\n\n populateLayers();\n\n // function changeResolution (x,y) {\n // const {zoom} = svgCanvas.getResolution();\n // setResolution(x * zoom, y * zoom);\n // }\n\n const centerCanvas = () => {\n // this centers the canvas vertically in the workarea (horizontal handled in CSS)\n workarea.css('line-height', workarea.height() + 'px');\n };\n\n $(window).bind('load resize', centerCanvas);\n\n /**\n * @type {module:jQuerySpinButton.StepCallback}\n */\n function stepFontSize (elem, step) {\n const origVal = Number(elem.value);\n const sugVal = origVal + step;\n const increasing = sugVal >= origVal;\n if (step === 0) { return origVal; }\n\n if (origVal >= 24) {\n if (increasing) {\n return Math.round(origVal * 1.1);\n }\n return Math.round(origVal / 1.1);\n }\n if (origVal <= 1) {\n if (increasing) {\n return origVal * 2;\n }\n return origVal / 2;\n }\n return sugVal;\n }\n\n /**\n * @type {module:jQuerySpinButton.StepCallback}\n */\n function stepZoom (elem, step) {\n const origVal = Number(elem.value);\n if (origVal === 0) { return 100; }\n const sugVal = origVal + step;\n if (step === 0) { return origVal; }\n\n if (origVal >= 100) {\n return sugVal;\n }\n if (sugVal >= origVal) {\n return origVal * 2;\n }\n return origVal / 2;\n }\n\n // function setResolution (w, h, center) {\n // updateCanvas();\n // // w -= 0; h -= 0;\n // // $('#svgcanvas').css({width: w, height: h});\n // // $('#canvas_width').val(w);\n // // $('#canvas_height').val(h);\n // //\n // // if (center) {\n // // const wArea = workarea;\n // // const scrollY = h/2 - wArea.height()/2;\n // // const scrollX = w/2 - wArea.width()/2;\n // // wArea[0].scrollTop = scrollY;\n // // wArea[0].scrollLeft = scrollX;\n // // }\n // }\n\n $('#resolution').change(function () {\n const wh = $('#canvas_width,#canvas_height');\n if (!this.selectedIndex) {\n if ($('#canvas_width').val() === 'fit') {\n wh.removeAttr('disabled').val(100);\n }\n } else if (this.value === 'content') {\n wh.val('fit').attr('disabled', 'disabled');\n } else {\n const dims = this.value.split('x');\n $('#canvas_width').val(dims[0]);\n $('#canvas_height').val(dims[1]);\n wh.removeAttr('disabled');\n }\n });\n\n // Prevent browser from erroneously repopulating fields\n $('input,select').attr('autocomplete', 'off');\n\n const dialogSelectors = [\n '#tool_source_cancel', '#tool_docprops_cancel',\n '#tool_prefs_cancel', '.overlay'\n ];\n /* eslint-disable jsdoc/require-property */\n /**\n * Associate all button actions as well as non-button keyboard shortcuts.\n * @namespace {PlainObject} module:SVGEditor~Actions\n */\n const Actions = (function () {\n /* eslint-enable jsdoc/require-property */\n /**\n * @typedef {PlainObject} module:SVGEditor.ToolButton\n * @property {string} sel The CSS selector for the tool\n * @property {external:jQuery.Function} fn A handler to be attached to the `evt`\n * @property {string} evt The event for which the `fn` listener will be added\n * @property {module:SVGEditor.Key} [key] [key, preventDefault, NoDisableInInput]\n * @property {string} [parent] Selector\n * @property {boolean} [hidekey] Whether to show key value in title\n * @property {string} [icon] The button ID\n * @property {boolean} isDefault For flyout holders\n */\n /**\n *\n * @name module:SVGEditor~ToolButtons\n * @type {module:SVGEditor.ToolButton[]}\n */\n const toolButtons = [\n {sel: '#tool_select', fn: clickSelect, evt: 'click', key: ['V', true]},\n {sel: '#tool_fhpath', fn: clickFHPath, evt: 'click', key: ['Q', true]},\n {sel: '#tool_line', fn: clickLine, evt: 'click', key: ['L', true],\n parent: '#tools_line', prepend: true},\n {sel: '#tool_rect', fn: clickRect, evt: 'mouseup',\n key: ['R', true], parent: '#tools_rect', icon: 'rect'},\n {sel: '#tool_square', fn: clickSquare, evt: 'mouseup',\n parent: '#tools_rect', icon: 'square'},\n {sel: '#tool_fhrect', fn: clickFHRect, evt: 'mouseup',\n parent: '#tools_rect', icon: 'fh_rect'},\n {sel: '#tool_ellipse', fn: clickEllipse, evt: 'mouseup',\n key: ['E', true], parent: '#tools_ellipse', icon: 'ellipse'},\n {sel: '#tool_circle', fn: clickCircle, evt: 'mouseup',\n parent: '#tools_ellipse', icon: 'circle'},\n {sel: '#tool_fhellipse', fn: clickFHEllipse, evt: 'mouseup',\n parent: '#tools_ellipse', icon: 'fh_ellipse'},\n {sel: '#tool_path', fn: clickPath, evt: 'click', key: ['P', true]},\n {sel: '#tool_text', fn: clickText, evt: 'click', key: ['T', true]},\n {sel: '#tool_image', fn: clickImage, evt: 'mouseup'},\n {sel: '#tool_zoom', fn: clickZoom, evt: 'mouseup', key: ['Z', true]},\n {sel: '#tool_clear', fn: clickClear, evt: 'mouseup', key: ['N', true]},\n {sel: '#tool_save', fn () {\n if (editingsource) {\n saveSourceEditor();\n } else {\n clickSave();\n }\n }, evt: 'mouseup', key: ['S', true]},\n {sel: '#tool_export', fn: clickExport, evt: 'mouseup'},\n {sel: '#tool_open', fn: clickOpen, evt: 'mouseup', key: ['O', true]},\n {sel: '#tool_import', fn: clickImport, evt: 'mouseup'},\n {sel: '#tool_source', fn: showSourceEditor, evt: 'click', key: ['U', true]},\n {sel: '#tool_wireframe', fn: clickWireframe, evt: 'click', key: ['F', true]},\n {\n key: ['esc', false, false],\n fn () {\n if (dialogSelectors.every((sel) => {\n return $(sel + ':hidden').length;\n })) {\n svgCanvas.clearSelection();\n }\n },\n hidekey: true\n },\n {sel: dialogSelectors.join(','), fn: cancelOverlays, evt: 'click',\n key: ['esc', false, false], hidekey: true},\n {sel: '#tool_source_save', fn: saveSourceEditor, evt: 'click'},\n {sel: '#tool_docprops_save', fn: saveDocProperties, evt: 'click'},\n {sel: '#tool_docprops', fn: showDocProperties, evt: 'click'},\n {sel: '#tool_prefs_save', fn: savePreferences, evt: 'click'},\n {sel: '#tool_editor_prefs', fn: showPreferences, evt: 'click'},\n {sel: '#tool_editor_homepage', fn: openHomePage, evt: 'click'},\n {sel: '#tool_open', fn () { window.dispatchEvent(new CustomEvent('openImage')); }, evt: 'click'},\n {sel: '#tool_import', fn () { window.dispatchEvent(new CustomEvent('importImage')); }, evt: 'click'},\n {sel: '#tool_delete,#tool_delete_multi', fn: deleteSelected,\n evt: 'click', key: ['del/backspace', true]},\n {sel: '#tool_reorient', fn: reorientPath, evt: 'click'},\n {sel: '#tool_node_link', fn: linkControlPoints, evt: 'click'},\n {sel: '#tool_node_clone', fn: clonePathNode, evt: 'click'},\n {sel: '#tool_node_delete', fn: deletePathNode, evt: 'click'},\n {sel: '#tool_openclose_path', fn: opencloseSubPath, evt: 'click'},\n {sel: '#tool_add_subpath', fn: addSubPath, evt: 'click'},\n {sel: '#tool_move_top', fn: moveToTopSelected, evt: 'click', key: 'ctrl+shift+]'},\n {sel: '#tool_move_bottom', fn: moveToBottomSelected, evt: 'click', key: 'ctrl+shift+['},\n {sel: '#tool_topath', fn: convertToPath, evt: 'click'},\n {sel: '#tool_make_link,#tool_make_link_multi', fn: makeHyperlink, evt: 'click'},\n {sel: '#tool_undo', fn: clickUndo, evt: 'click'},\n {sel: '#tool_redo', fn: clickRedo, evt: 'click'},\n {sel: '#tool_clone,#tool_clone_multi', fn: clickClone, evt: 'click', key: ['D', true]},\n {sel: '#tool_group_elements', fn: clickGroup, evt: 'click', key: ['G', true]},\n {sel: '#tool_ungroup', fn: clickGroup, evt: 'click'},\n {sel: '#tool_unlink_use', fn: clickGroup, evt: 'click'},\n {sel: '[id^=tool_align]', fn: clickAlign, evt: 'click'},\n // these two lines are required to make Opera work properly with the flyout mechanism\n // {sel: '#tools_rect_show', fn: clickRect, evt: 'click'},\n // {sel: '#tools_ellipse_show', fn: clickEllipse, evt: 'click'},\n {sel: '#tool_bold', fn: clickBold, evt: 'mousedown'},\n {sel: '#tool_italic', fn: clickItalic, evt: 'mousedown'},\n {sel: '#sidepanel_handle', fn: toggleSidePanel, key: ['X']},\n {sel: '#copy_save_done', fn: cancelOverlays, evt: 'click'},\n\n // Shortcuts not associated with buttons\n\n {key: 'ctrl+left', fn () { rotateSelected(0, 1); }},\n {key: 'ctrl+right', fn () { rotateSelected(1, 1); }},\n {key: 'ctrl+shift+left', fn () { rotateSelected(0, 5); }},\n {key: 'ctrl+shift+right', fn () { rotateSelected(1, 5); }},\n {key: 'shift+O', fn: selectPrev},\n {key: 'shift+P', fn: selectNext},\n {key: [modKey + 'up', true], fn () { zoomImage(2); }},\n {key: [modKey + 'down', true], fn () { zoomImage(0.5); }},\n {key: [modKey + ']', true], fn () { moveUpDownSelected('Up'); }},\n {key: [modKey + '[', true], fn () { moveUpDownSelected('Down'); }},\n {key: ['up', true], fn () { moveSelected(0, -1); }},\n {key: ['down', true], fn () { moveSelected(0, 1); }},\n {key: ['left', true], fn () { moveSelected(-1, 0); }},\n {key: ['right', true], fn () { moveSelected(1, 0); }},\n {key: 'shift+up', fn () { moveSelected(0, -10); }},\n {key: 'shift+down', fn () { moveSelected(0, 10); }},\n {key: 'shift+left', fn () { moveSelected(-10, 0); }},\n {key: 'shift+right', fn () { moveSelected(10, 0); }},\n {key: ['alt+up', true], fn () { svgCanvas.cloneSelectedElements(0, -1); }},\n {key: ['alt+down', true], fn () { svgCanvas.cloneSelectedElements(0, 1); }},\n {key: ['alt+left', true], fn () { svgCanvas.cloneSelectedElements(-1, 0); }},\n {key: ['alt+right', true], fn () { svgCanvas.cloneSelectedElements(1, 0); }},\n {key: ['alt+shift+up', true], fn () { svgCanvas.cloneSelectedElements(0, -10); }},\n {key: ['alt+shift+down', true], fn () { svgCanvas.cloneSelectedElements(0, 10); }},\n {key: ['alt+shift+left', true], fn () { svgCanvas.cloneSelectedElements(-10, 0); }},\n {key: ['alt+shift+right', true], fn () { svgCanvas.cloneSelectedElements(10, 0); }},\n {key: 'a', fn () { svgCanvas.selectAllInCurrentLayer(); }},\n {key: modKey + 'a', fn () { svgCanvas.selectAllInCurrentLayer(); }},\n\n // Standard shortcuts\n {key: modKey + 'z', fn: clickUndo},\n {key: modKey + 'shift+z', fn: clickRedo},\n {key: modKey + 'y', fn: clickRedo},\n\n {key: modKey + 'x', fn: cutSelected},\n {key: modKey + 'c', fn: copySelected},\n {key: modKey + 'v', fn: pasteInCenter}\n ];\n\n // Tooltips not directly associated with a single function\n const keyAssocs = {\n '4/Shift+4': '#tools_rect_show',\n '5/Shift+5': '#tools_ellipse_show'\n };\n\n return {\n /** @lends module:SVGEditor~Actions */\n /**\n * @returns {void}\n */\n setAll () {\n const flyouts = {};\n\n $.each(toolButtons, function (i, opts) {\n // Bind function to button\n let btn;\n if (opts.sel) {\n btn = $(opts.sel);\n if (!btn.length) { return true; } // Skip if markup does not exist\n if (opts.evt) {\n // `touch.js` changes `touchstart` to `mousedown`,\n // so we must map tool button click events as well\n if (isTouch() && opts.evt === 'click') {\n opts.evt = 'mousedown';\n }\n btn[opts.evt](opts.fn);\n }\n\n // Add to parent flyout menu, if able to be displayed\n if (opts.parent && $(opts.parent + '_show').length) {\n let fH = $(opts.parent);\n if (!fH.length) {\n fH = makeFlyoutHolder(opts.parent.substr(1));\n }\n if (opts.prepend) {\n btn[0].style.margin = 'initial';\n }\n fH[opts.prepend ? 'prepend' : 'append'](btn);\n\n if (!Array.isArray(flyouts[opts.parent])) {\n flyouts[opts.parent] = [];\n }\n flyouts[opts.parent].push(opts);\n }\n }\n\n // Bind function to shortcut key\n if (opts.key) {\n // Set shortcut based on options\n let keyval,\n // disInInp = true,\n pd = false;\n if (Array.isArray(opts.key)) {\n keyval = opts.key[0];\n if (opts.key.length > 1) { pd = opts.key[1]; }\n // if (opts.key.length > 2) { disInInp = opts.key[2]; }\n } else {\n keyval = opts.key;\n }\n keyval = String(keyval);\n\n const {fn} = opts;\n $.each(keyval.split('/'), function (j, key) {\n $(document).bind('keydown', key, function (e) {\n fn();\n if (pd) {\n e.preventDefault();\n }\n // Prevent default on ALL keys?\n return false;\n });\n });\n\n // Put shortcut in title\n if (opts.sel && !opts.hidekey && btn.attr('title')) {\n const newTitle = btn.attr('title').split('[')[0] + ' (' + keyval + ')';\n keyAssocs[keyval] = opts.sel;\n // Disregard for menu items\n if (!btn.parents('#main_menu').length) {\n btn.attr('title', newTitle);\n }\n }\n }\n return true;\n });\n\n // Setup flyouts\n setupFlyouts(flyouts);\n\n // Misc additional actions\n\n // Make 'return' keypress trigger the change event\n $('.attr_changer, #image_url').bind(\n 'keydown',\n 'return',\n function (evt) {\n $(this).change();\n evt.preventDefault();\n }\n );\n\n $(window).bind('keydown', 'tab', function (e) {\n if (uiContext === 'canvas') {\n e.preventDefault();\n selectNext();\n }\n }).bind('keydown', 'shift+tab', function (e) {\n if (uiContext === 'canvas') {\n e.preventDefault();\n selectPrev();\n }\n });\n\n $('#tool_zoom').dblclick(dblclickZoom);\n },\n /**\n * @returns {void}\n */\n setTitles () {\n $.each(keyAssocs, function (keyval, sel) {\n const menu = ($(sel).parents('#main_menu').length);\n\n $(sel).each(function () {\n let t;\n if (menu) {\n t = $(this).text().split(' [')[0];\n } else {\n t = this.title.split(' [')[0];\n }\n let keyStr = '';\n // Shift+Up\n $.each(keyval.split('/'), function (i, key) {\n const modBits = key.split('+');\n let mod = '';\n if (modBits.length > 1) {\n mod = modBits[0] + '+';\n key = modBits[1];\n }\n keyStr += (i ? '/' : '') + mod + (uiStrings['key_' + key] || key);\n });\n if (menu) {\n this.lastChild.textContent = t + ' [' + keyStr + ']';\n } else {\n this.title = t + ' [' + keyStr + ']';\n }\n });\n });\n },\n /**\n * @param {string} sel Selector to match\n * @returns {module:SVGEditor.ToolButton}\n */\n getButtonData (sel) {\n return Object.values(toolButtons).find((btn) => {\n return btn.sel === sel;\n });\n }\n };\n }());\n\n // Select given tool\n editor.ready(function () {\n let tool;\n const itool = curConfig.initTool,\n container = $('#tools_left, #svg_editor .tools_flyout'),\n preTool = container.find('#tool_' + itool),\n regTool = container.find('#' + itool);\n if (preTool.length) {\n tool = preTool;\n } else if (regTool.length) {\n tool = regTool;\n } else {\n tool = $('#tool_select');\n }\n tool.click().mouseup();\n\n if (curConfig.wireframe) {\n $('#tool_wireframe').click();\n }\n\n if (curConfig.showlayers) {\n toggleSidePanel();\n }\n\n $('#rulers').toggle(Boolean(curConfig.showRulers));\n\n if (curConfig.showRulers) {\n $('#show_rulers')[0].checked = true;\n }\n\n if (curConfig.baseUnit) {\n $('#base_unit').val(curConfig.baseUnit);\n }\n\n if (curConfig.gridSnapping) {\n $('#grid_snapping_on')[0].checked = true;\n }\n\n if (curConfig.snappingStep) {\n $('#grid_snapping_step').val(curConfig.snappingStep);\n }\n\n if (curConfig.gridColor) {\n $('#grid_color').val(curConfig.gridColor);\n }\n });\n\n // init SpinButtons\n $('#rect_rx').SpinButton({\n min: 0, max: 1000, stateObj, callback: changeRectRadius\n });\n $('#stroke_width').SpinButton({\n min: 0, max: 99, smallStep: 0.1, stateObj, callback: changeStrokeWidth\n });\n $('#angle').SpinButton({\n min: -180, max: 180, step: 5, stateObj, callback: changeRotationAngle\n });\n $('#font_size').SpinButton({\n min: 0.001, stepfunc: stepFontSize, stateObj, callback: changeFontSize\n });\n $('#group_opacity').SpinButton({\n min: 0, max: 100, step: 5, stateObj, callback: changeOpacity\n });\n $('#blur').SpinButton({\n min: 0, max: 10, step: 0.1, stateObj, callback: changeBlur\n });\n $('#zoom').SpinButton({\n min: 0.001, max: 10000, step: 50, stepfunc: stepZoom,\n stateObj, callback: changeZoom\n // Set default zoom\n }).val(\n svgCanvas.getZoom() * 100\n );\n\n $('#workarea').contextMenu(\n {\n menu: 'cmenu_canvas',\n inSpeed: 0\n },\n function (action, el, pos) {\n switch (action) {\n case 'delete':\n deleteSelected();\n break;\n case 'cut':\n cutSelected();\n break;\n case 'copy':\n copySelected();\n break;\n case 'paste':\n svgCanvas.pasteElements();\n break;\n case 'paste_in_place':\n svgCanvas.pasteElements('in_place');\n break;\n case 'group':\n case 'group_elements':\n svgCanvas.groupSelectedElements();\n break;\n case 'ungroup':\n svgCanvas.ungroupSelectedElement();\n break;\n case 'move_front':\n moveToTopSelected();\n break;\n case 'move_up':\n moveUpDownSelected('Up');\n break;\n case 'move_down':\n moveUpDownSelected('Down');\n break;\n case 'move_back':\n moveToBottomSelected();\n break;\n default:\n if (hasCustomHandler(action)) {\n getCustomHandler(action).call();\n }\n break;\n }\n }\n );\n\n /**\n * Implements {@see module:jQueryContextMenu.jQueryContextMenuListener}.\n * @param {\"dupe\"|\"delete\"|\"merge_down\"|\"merge_all\"} action\n * @param {external:jQuery} el\n * @param {{x: Float, y: Float, docX: Float, docY: Float}} pos\n * @returns {void}\n */\n const lmenuFunc = function (action, el, pos) {\n switch (action) {\n case 'dupe':\n /* await */ cloneLayer();\n break;\n case 'delete':\n deleteLayer();\n break;\n case 'merge_down':\n mergeLayer();\n break;\n case 'merge_all':\n svgCanvas.mergeAllLayers();\n updateContextPanel();\n populateLayers();\n break;\n }\n };\n\n $('#layerlist').contextMenu(\n {\n menu: 'cmenu_layers',\n inSpeed: 0\n },\n lmenuFunc\n );\n\n $('#layer_moreopts').contextMenu(\n {\n menu: 'cmenu_layers',\n inSpeed: 0,\n allowLeft: true\n },\n lmenuFunc\n );\n\n $('.contextMenu li').mousedown(function (ev) {\n ev.preventDefault();\n });\n\n $('#cmenu_canvas li').disableContextMenu();\n canvMenu.enableContextMenuItems('#delete,#cut,#copy');\n\n /**\n * @returns {void}\n */\n function enableOrDisableClipboard () {\n let svgeditClipboard;\n try {\n svgeditClipboard = localStorage.getItem('svgedit_clipboard');\n } catch (err) {}\n canvMenu[(svgeditClipboard ? 'en' : 'dis') + 'ableContextMenuItems'](\n '#paste,#paste_in_place'\n );\n }\n enableOrDisableClipboard();\n\n window.addEventListener('storage', function (e) {\n if (e.key !== 'svgedit_clipboard') { return; }\n\n enableOrDisableClipboard();\n });\n\n window.addEventListener('beforeunload', function (e) {\n // Suppress warning if page is empty\n if (undoMgr.getUndoStackSize() === 0) {\n editor.showSaveWarning = false;\n }\n\n // showSaveWarning is set to 'false' when the page is saved.\n if (!curConfig.no_save_warning && editor.showSaveWarning) {\n // Browser already asks question about closing the page\n e.returnValue = uiStrings.notification.unsavedChanges; // Firefox needs this when beforeunload set by addEventListener (even though message is not used)\n return uiStrings.notification.unsavedChanges;\n }\n return true;\n });\n\n /**\n * Expose the `uiStrings`.\n * @function module:SVGEditor.canvas.getUIStrings\n * @returns {module:SVGEditor.uiStrings}\n */\n editor.canvas.getUIStrings = function () {\n return uiStrings;\n };\n\n /**\n * @returns {Promise} Resolves to boolean indicating `true` if there were no changes\n * and `false` after the user confirms.\n */\n editor.openPrep = function () {\n $('#main_menu').hide();\n if (undoMgr.getUndoStackSize() === 0) {\n return true;\n }\n return $.confirm(uiStrings.notification.QwantToOpen);\n };\n\n /**\n *\n * @param {Event} e\n * @returns {void}\n */\n function onDragEnter (e) {\n e.stopPropagation();\n e.preventDefault();\n // and indicator should be displayed here, such as \"drop files here\"\n }\n\n /**\n *\n * @param {Event} e\n * @returns {void}\n */\n function onDragOver (e) {\n e.stopPropagation();\n e.preventDefault();\n }\n\n /**\n *\n * @param {Event} e\n * @returns {void}\n */\n function onDragLeave (e) {\n e.stopPropagation();\n e.preventDefault();\n // hypothetical indicator should be removed here\n }\n // Use HTML5 File API: http://www.w3.org/TR/FileAPI/\n // if browser has HTML5 File API support, then we will show the open menu item\n // and provide a file input to click. When that change event fires, it will\n // get the text contents of the file and send it to the canvas\n if (window.FileReader) {\n /**\n * @param {Event} e\n * @returns {void}\n */\n const importImage = function (e) {\n $.process_cancel(uiStrings.notification.loadingImage);\n e.stopPropagation();\n e.preventDefault();\n $('#workarea').removeAttr('style');\n $('#main_menu').hide();\n const file = (e.type === 'drop') ? e.dataTransfer.files[0] : this.files[0];\n if (!file) {\n $('#dialog_box').hide();\n return;\n }\n /* if (file.type === 'application/pdf') { // Todo: Handle PDF imports\n\n }\n else */\n if (!file.type.includes('image')) {\n return;\n }\n // Detected an image\n // svg handling\n let reader;\n if (file.type.includes('svg')) {\n reader = new FileReader();\n reader.onloadend = function (ev) {\n const newElement = svgCanvas.importSvgString(ev.target.result, true);\n svgCanvas.ungroupSelectedElement();\n svgCanvas.ungroupSelectedElement();\n svgCanvas.groupSelectedElements();\n svgCanvas.alignSelectedElements('m', 'page');\n svgCanvas.alignSelectedElements('c', 'page');\n // highlight imported element, otherwise we get strange empty selectbox\n svgCanvas.selectOnly([newElement]);\n $('#dialog_box').hide();\n };\n reader.readAsText(file);\n } else {\n // bitmap handling\n reader = new FileReader();\n reader.onloadend = function ({target: {result}}) {\n /**\n * Insert the new image until we know its dimensions.\n * @param {Float} width\n * @param {Float} height\n * @returns {void}\n */\n const insertNewImage = function (width, height) {\n const newImage = svgCanvas.addSVGElementFromJson({\n element: 'image',\n attr: {\n x: 0,\n y: 0,\n width,\n height,\n id: svgCanvas.getNextId(),\n style: 'pointer-events:inherit'\n }\n });\n svgCanvas.setHref(newImage, result);\n svgCanvas.selectOnly([newImage]);\n svgCanvas.alignSelectedElements('m', 'page');\n svgCanvas.alignSelectedElements('c', 'page');\n updateContextPanel();\n $('#dialog_box').hide();\n };\n // create dummy img so we know the default dimensions\n let imgWidth = 100;\n let imgHeight = 100;\n const img = new Image();\n img.style.opacity = 0;\n img.addEventListener('load', function () {\n imgWidth = img.offsetWidth || img.naturalWidth || img.width;\n imgHeight = img.offsetHeight || img.naturalHeight || img.height;\n insertNewImage(imgWidth, imgHeight);\n });\n img.src = result;\n };\n reader.readAsDataURL(file);\n }\n };\n\n workarea[0].addEventListener('dragenter', onDragEnter);\n workarea[0].addEventListener('dragover', onDragOver);\n workarea[0].addEventListener('dragleave', onDragLeave);\n workarea[0].addEventListener('drop', importImage);\n\n const open = $('} A Promise which resolves to `undefined`\n */\n const setLang = editor.setLang = async function (lang, allStrings) {\n editor.langChanged = true;\n editor.pref('lang', lang);\n $('#lang_select').val(lang);\n if (!allStrings) {\n return;\n }\n // Todo: Remove `allStrings.lang` property in locale in\n // favor of just `lang`?\n document.documentElement.lang = allStrings.lang; // lang;\n // Todo: Add proper RTL Support!\n // Todo: Use RTL detection instead and take out of locales?\n // document.documentElement.dir = allStrings.dir;\n $.extend(uiStrings, allStrings);\n\n // const notif = allStrings.notification; // Currently unused\n // $.extend will only replace the given strings\n const oldLayerName = $('#layerlist tr.layersel td.layername').text();\n const renameLayer = (oldLayerName === uiStrings.common.layer + ' 1');\n\n svgCanvas.setUiStrings(allStrings);\n Actions.setTitles();\n\n if (renameLayer) {\n svgCanvas.renameCurrentLayer(uiStrings.common.layer + ' 1');\n populateLayers();\n }\n\n // In case extensions loaded before the locale, now we execute a callback on them\n if (extsPreLang.length) {\n await Promise.all(extsPreLang.map((ext) => {\n loadedExtensionNames.push(ext.name);\n return ext.langReady({\n lang,\n uiStrings,\n importLocale: getImportLocale({defaultLang: lang, defaultName: ext.name})\n });\n }));\n extsPreLang.length = 0;\n } else {\n loadedExtensionNames.forEach((loadedExtensionName) => {\n svgCanvas.runExtension(\n loadedExtensionName,\n 'langReady',\n /** @type {module:svgcanvas.SvgCanvas#event:ext_langReady} */ {\n lang, uiStrings, importLocale: getImportLocale({defaultLang: lang, defaultName: loadedExtensionName})\n }\n );\n });\n }\n svgCanvas.runExtensions('langChanged', /** @type {module:svgcanvas.SvgCanvas#event:ext_langChanged} */ lang);\n\n // Update flyout tooltips\n setFlyoutTitles();\n\n // Copy title for certain tool elements\n const elems = {\n '#stroke_color': '#tool_stroke .icon_label, #tool_stroke .color_block',\n '#fill_color': '#tool_fill label, #tool_fill .color_block',\n '#linejoin_miter': '#cur_linejoin',\n '#linecap_butt': '#cur_linecap'\n };\n\n $.each(elems, function (source, dest) {\n $(dest).attr('title', $(source)[0].title);\n });\n\n // Copy alignment titles\n $('#multiselected_panel div[id^=tool_align]').each(function () {\n $('#tool_pos' + this.id.substr(10))[0].title = this.title;\n });\n };\n localeInit(\n /**\n * @implements {module:locale.LocaleEditorInit}\n */\n {\n /**\n * Gets an array of results from extensions with a `addLangData` method,\n * returning an object with a `data` property set to its locales (to be\n * merged with regular locales).\n * @param {string} langParam\n * @fires module:svgcanvas.SvgCanvas#event:ext_addLangData\n * @todo Can we forego this in favor of `langReady` (or forego `langReady`)?\n * @returns {module:locale.AddLangExtensionLocaleData[]}\n */\n addLangData (langParam) {\n return svgCanvas.runExtensions(\n 'addLangData',\n /**\n * @function\n * @type {module:svgcanvas.ExtensionVarBuilder}\n * @param {string} name\n * @returns {module:svgcanvas.SvgCanvas#event:ext_addLangData}\n */\n (name) => { // We pass in a function as we don't know the extension name here when defining this `addLangData` method\n return {\n lang: langParam,\n importLocale: getImportLocale({defaultLang: langParam, defaultName: name})\n };\n },\n true\n );\n },\n curConfig\n }\n );\n // Load extensions\n // Bit of a hack to run extensions in local Opera/IE9\n if (document.location.protocol === 'file:') {\n setTimeout(extAndLocaleFunc, 100);\n } else {\n // Returns a promise (if we wanted to fire 'extensions-loaded' event,\n // potentially useful to hide interface as some extension locales\n // are only available after this)\n extAndLocaleFunc();\n }\n};\n\n/**\n* @callback module:SVGEditor.ReadyCallback\n* @returns {Promise|void}\n*/\n/**\n* Queues a callback to be invoked when the editor is ready (or\n* to be invoked immediately if it is already ready--i.e.,\n* if `runCallbacks` has been run).\n* @param {module:SVGEditor.ReadyCallback} cb Callback to be queued to invoke\n* @returns {Promise} Resolves when all callbacks, including the supplied have resolved\n*/\neditor.ready = function (cb) { // eslint-disable-line promise/prefer-await-to-callbacks\n return new Promise((resolve, reject) => { // eslint-disable-line promise/avoid-new\n if (isReady) {\n resolve(cb()); // eslint-disable-line callback-return, promise/prefer-await-to-callbacks\n return;\n }\n callbacks.push([cb, resolve, reject]);\n });\n};\n\n/**\n* Invokes the callbacks previous set by `svgEditor.ready`\n* @returns {Promise} Resolves to `undefined` if all callbacks succeeded and rejects otherwise\n*/\neditor.runCallbacks = async function () {\n try {\n await Promise.all(callbacks.map(([cb]) => {\n return cb(); // eslint-disable-line promise/prefer-await-to-callbacks\n }));\n } catch (err) {\n callbacks.forEach(([, , reject]) => {\n reject();\n });\n throw err;\n }\n callbacks.forEach(([, resolve]) => {\n resolve();\n });\n isReady = true;\n};\n\n/**\n* @param {string} str The SVG string to load\n* @param {PlainObject} [opts={}]\n* @param {boolean} [opts.noAlert=false] Option to avoid alert to user and instead get rejected promise\n* @returns {Promise}\n*/\neditor.loadFromString = function (str, {noAlert} = {}) {\n return editor.ready(async function () {\n try {\n await loadSvgString(str, {noAlert});\n } catch (err) {\n if (noAlert) {\n throw err;\n }\n }\n });\n};\n\n/**\n* Not presently in use.\n* @param {PlainObject} featList\n* @returns {void}\n*/\neditor.disableUI = function (featList) {\n // $(function () {\n // $('#tool_wireframe, #tool_image, #main_button, #tool_source, #sidepanels').remove();\n // $('#tools_top').css('left', 5);\n // });\n};\n\n/**\n * @callback module:SVGEditor.URLLoadCallback\n * @param {boolean} success\n * @returns {void}\n */\n/**\n* @param {string} url URL from which to load an SVG string via Ajax\n* @param {PlainObject} [opts={}] May contain properties: `cache`, `callback`\n* @param {boolean} [opts.cache]\n* @param {boolean} [opts.noAlert]\n* @returns {Promise} Resolves to `undefined` or rejects upon bad loading of\n* the SVG (or upon failure to parse the loaded string) when `noAlert` is\n* enabled\n*/\neditor.loadFromURL = function (url, {cache, noAlert} = {}) {\n return editor.ready(function () {\n return new Promise((resolve, reject) => { // eslint-disable-line promise/avoid-new\n $.ajax({\n url,\n dataType: 'text',\n cache: Boolean(cache),\n beforeSend () {\n $.process_cancel(uiStrings.notification.loadingImage);\n },\n success (str) {\n resolve(loadSvgString(str, {noAlert}));\n },\n error (xhr, stat, err) {\n if (xhr.status !== 404 && xhr.responseText) {\n resolve(loadSvgString(xhr.responseText, {noAlert}));\n return;\n }\n if (noAlert) {\n reject(new Error('URLLoadFail'));\n return;\n }\n $.alert(uiStrings.notification.URLLoadFail + ': \\n' + err);\n resolve();\n },\n complete () {\n $('#dialog_box').hide();\n }\n });\n });\n });\n};\n\n/**\n* @param {string} str The Data URI to base64-decode (if relevant) and load\n* @param {PlainObject} [opts={}]\n* @param {boolean} [opts.noAlert]\n* @returns {Promise} Resolves to `undefined` and rejects if loading SVG string fails and `noAlert` is enabled\n*/\neditor.loadFromDataURI = function (str, {noAlert} = {}) {\n return editor.ready(function () {\n let base64 = false;\n let pre = str.match(/^data:image\\/svg\\+xml;base64,/);\n if (pre) {\n base64 = true;\n } else {\n pre = str.match(/^data:image\\/svg\\+xml(?:;|;utf8)?,/);\n }\n if (pre) {\n pre = pre[0];\n }\n const src = str.slice(pre.length);\n return loadSvgString(base64 ? Utils.decode64(src) : decodeURIComponent(src), {noAlert});\n });\n};\n\n/**\n * @param {string} name Used internally; no need for i18n.\n * @param {module:svgcanvas.ExtensionInitCallback} init Config to be invoked on this module\n * @param {module:svgcanvas.ExtensionInitArgs} initArgs\n * @throws {Error} If called too early\n * @returns {Promise} Resolves to `undefined`\n*/\neditor.addExtension = function (name, init, initArgs) {\n // Note that we don't want this on editor.ready since some extensions\n // may want to run before then (like server_opensave).\n // $(function () {\n if (!svgCanvas) {\n throw new Error('Extension added too early');\n }\n return svgCanvas.addExtension.call(this, name, init, initArgs);\n // });\n};\n\n// Defer injection to wait out initial menu processing. This probably goes\n// away once all context menu behavior is brought to context menu.\neditor.ready(() => {\n injectExtendedContextMenuItemsIntoDom();\n});\n\nlet extensionsAdded = false;\nconst messageQueue = [];\n/**\n * @param {PlainObject} info\n * @param {any} info.data\n * @param {string} info.origin\n * @fires module:svgcanvas.SvgCanvas#event:message\n * @returns {void}\n */\nconst messageListener = ({data, origin}) => { // eslint-disable-line no-shadow\n // console.log('data, origin, extensionsAdded', data, origin, extensionsAdded);\n const messageObj = {data, origin};\n if (!extensionsAdded) {\n messageQueue.push(messageObj);\n } else {\n // Extensions can handle messages at this stage with their own\n // canvas `message` listeners\n svgCanvas.call('message', messageObj);\n }\n};\nwindow.addEventListener('message', messageListener);\n\n// Run init once DOM is loaded\n// jQuery(editor.init);\n\n(async () => {\ntry {\n // We wait a micro-task to let the svgEditor variable be defined for module checks\n await Promise.resolve();\n editor.init();\n} catch (err) {\n console.error(err); // eslint-disable-line no-console\n}\n})();\n\nexport default editor;\n","// Todo: Update: https://github.com/jeresig/jquery.hotkeys\n/*\n * jQuery Hotkeys Plugin\n * Copyright 2010, John Resig\n * Dual licensed under the MIT or GPL Version 2 licenses.\n *\n * http://github.com/jeresig/jquery.hotkeys\n *\n * Based upon the plugin by Tzury Bar Yochay:\n * http://github.com/tzuryby/hotkeys\n *\n * Original idea by:\n * Binny V A, http://www.openjs.com/scripts/events/keyboard_shortcuts/\n*/\n\n// We *do* want to allow the escape key within textareas (and possibly tab too), so add the condition `n.which !== 27`\n\nexport default function(b){b.hotkeys={version:\"0.8\",specialKeys:{8:\"backspace\",9:\"tab\",13:\"return\",16:\"shift\",17:\"ctrl\",18:\"alt\",19:\"pause\",20:\"capslock\",27:\"esc\",32:\"space\",33:\"pageup\",34:\"pagedown\",35:\"end\",36:\"home\",37:\"left\",38:\"up\",39:\"right\",40:\"down\",45:\"insert\",46:\"del\",96:\"0\",97:\"1\",98:\"2\",99:\"3\",100:\"4\",101:\"5\",102:\"6\",103:\"7\",104:\"8\",105:\"9\",106:\"*\",107:\"+\",109:\"-\",110:\".\",111:\"/\",112:\"f1\",113:\"f2\",114:\"f3\",115:\"f4\",116:\"f5\",117:\"f6\",118:\"f7\",119:\"f8\",120:\"f9\",121:\"f10\",122:\"f11\",123:\"f12\",144:\"numlock\",145:\"scroll\",191:\"/\",224:\"meta\",219:\"[\",221:\"]\"},shiftNums:{\"`\":\"~\",\"1\":\"!\",\"2\":\"@\",\"3\":\"#\",\"4\":\"$\",\"5\":\"%\",\"6\":\"^\",\"7\":\"&\",\"8\":\"*\",\"9\":\"(\",\"0\":\")\",\"-\":\"_\",\"=\":\"+\",\";\":\": \",\"'\":'\"',\",\":\"<\",\".\":\">\",\"/\":\"?\",\"\\\\\":\"|\"}};function a(d){if(typeof d.data!==\"string\"){return}var c=d.handler,e=d.data.toLowerCase().split(\" \");d.handler=function(n){if(this!==n.target&&(n.which !== 27 && (/textarea|select/i.test(n.target.nodeName)||n.target.type===\"text\"))){return}var h=n.type!==\"keypress\"&&b.hotkeys.specialKeys[n.which],o=String.fromCharCode(n.which).toLowerCase(),k,m=\"\",g={};if(n.altKey&&h!==\"alt\"){m+=\"alt+\"}if(n.ctrlKey&&h!==\"ctrl\"){m+=\"ctrl+\"}if(n.metaKey&&!n.ctrlKey&&h!==\"meta\"){m+=\"meta+\"}if(n.shiftKey&&h!==\"shift\"){m+=\"shift+\"}if(h){g[m+h]=true}else{g[m+o]=true;g[m+b.hotkeys.shiftNums[o]]=true;if(m===\"shift+\"){g[b.hotkeys.shiftNums[o]]=true}}for(var j=0,f=e.length;j="0"&&e<="9")&&t!==SVGPathSeg.PATHSEG_CLOSEPATH?t===SVGPathSeg.PATHSEG_MOVETO_ABS?SVGPathSeg.PATHSEG_LINETO_ABS:t===SVGPathSeg.PATHSEG_MOVETO_REL?SVGPathSeg.PATHSEG_LINETO_REL:t:SVGPathSeg.PATHSEG_UNKNOWN}},{key:"initialCommandIsMoveTo",value:function(){if(!this.hasMoreData())return!0;var e=this.peekSegmentType();return e===SVGPathSeg.PATHSEG_MOVETO_ABS||e===SVGPathSeg.PATHSEG_MOVETO_REL}},{key:"_parseNumber",value:function(){var e=0,t=0,n=1,r=0,a=1,i=1,o=this._currentIndex;if(this._skipOptionalSpaces(),this._currentIndex"9")&&"."!==this._string.charAt(this._currentIndex))){for(var s=this._currentIndex;this._currentIndex="0"&&this._string.charAt(this._currentIndex)<="9";)this._currentIndex++;if(this._currentIndex!==s)for(var l=this._currentIndex-1,c=1;l>=s;)t+=c*(this._string.charAt(l--)-"0"),c*=10;if(this._currentIndex=this._endIndex||this._string.charAt(this._currentIndex)<"0"||this._string.charAt(this._currentIndex)>"9")return;for(;this._currentIndex="0"&&this._string.charAt(this._currentIndex)<="9";)n*=10,r+=(this._string.charAt(this._currentIndex)-"0")/n,this._currentIndex+=1}if(this._currentIndex!==o&&this._currentIndex+1=this._endIndex||this._string.charAt(this._currentIndex)<"0"||this._string.charAt(this._currentIndex)>"9")return;for(;this._currentIndex="0"&&this._string.charAt(this._currentIndex)<="9";)e*=10,e+=this._string.charAt(this._currentIndex)-"0",this._currentIndex++}var u=t+r;if(u*=a,e&&(u*=Math.pow(10,i*e)),o!==this._currentIndex)return this._skipOptionalSpacesOrDelimiter(),u}}},{key:"_parseArcFlag",value:function(){if(!(this._currentIndex>=this._endIndex)){var e=!1,t=this._string.charAt(this._currentIndex++);if("0"===t)e=!1;else{if("1"!==t)return;e=!0}return this._skipOptionalSpacesOrDelimiter(),e}}},{key:"parseSegment",value:function(){var e=this._string[this._currentIndex],n=this._pathSegTypeFromChar(e);if(n===SVGPathSeg.PATHSEG_UNKNOWN){if(this._previousCommand===SVGPathSeg.PATHSEG_UNKNOWN)return null;if((n=this._nextCommandHelper(e,this._previousCommand))===SVGPathSeg.PATHSEG_UNKNOWN)return null}else this._currentIndex++;switch(this._previousCommand=n,n){case SVGPathSeg.PATHSEG_MOVETO_REL:return new SVGPathSegMovetoRel(t,this._parseNumber(),this._parseNumber());case SVGPathSeg.PATHSEG_MOVETO_ABS:return new SVGPathSegMovetoAbs(t,this._parseNumber(),this._parseNumber());case SVGPathSeg.PATHSEG_LINETO_REL:return new SVGPathSegLinetoRel(t,this._parseNumber(),this._parseNumber());case SVGPathSeg.PATHSEG_LINETO_ABS:return new SVGPathSegLinetoAbs(t,this._parseNumber(),this._parseNumber());case SVGPathSeg.PATHSEG_LINETO_HORIZONTAL_REL:return new SVGPathSegLinetoHorizontalRel(t,this._parseNumber());case SVGPathSeg.PATHSEG_LINETO_HORIZONTAL_ABS:return new SVGPathSegLinetoHorizontalAbs(t,this._parseNumber());case SVGPathSeg.PATHSEG_LINETO_VERTICAL_REL:return new SVGPathSegLinetoVerticalRel(t,this._parseNumber());case SVGPathSeg.PATHSEG_LINETO_VERTICAL_ABS:return new SVGPathSegLinetoVerticalAbs(t,this._parseNumber());case SVGPathSeg.PATHSEG_CLOSEPATH:return this._skipOptionalSpaces(),new SVGPathSegClosePath(t);case SVGPathSeg.PATHSEG_CURVETO_CUBIC_REL:var r={x1:this._parseNumber(),y1:this._parseNumber(),x2:this._parseNumber(),y2:this._parseNumber(),x:this._parseNumber(),y:this._parseNumber()};return new SVGPathSegCurvetoCubicRel(t,r.x,r.y,r.x1,r.y1,r.x2,r.y2);case SVGPathSeg.PATHSEG_CURVETO_CUBIC_ABS:var a={x1:this._parseNumber(),y1:this._parseNumber(),x2:this._parseNumber(),y2:this._parseNumber(),x:this._parseNumber(),y:this._parseNumber()};return new SVGPathSegCurvetoCubicAbs(t,a.x,a.y,a.x1,a.y1,a.x2,a.y2);case SVGPathSeg.PATHSEG_CURVETO_CUBIC_SMOOTH_REL:var i={x2:this._parseNumber(),y2:this._parseNumber(),x:this._parseNumber(),y:this._parseNumber()};return new SVGPathSegCurvetoCubicSmoothRel(t,i.x,i.y,i.x2,i.y2);case SVGPathSeg.PATHSEG_CURVETO_CUBIC_SMOOTH_ABS:var o={x2:this._parseNumber(),y2:this._parseNumber(),x:this._parseNumber(),y:this._parseNumber()};return new SVGPathSegCurvetoCubicSmoothAbs(t,o.x,o.y,o.x2,o.y2);case SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_REL:var s={x1:this._parseNumber(),y1:this._parseNumber(),x:this._parseNumber(),y:this._parseNumber()};return new SVGPathSegCurvetoQuadraticRel(t,s.x,s.y,s.x1,s.y1);case SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_ABS:var l={x1:this._parseNumber(),y1:this._parseNumber(),x:this._parseNumber(),y:this._parseNumber()};return new SVGPathSegCurvetoQuadraticAbs(t,l.x,l.y,l.x1,l.y1);case SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_SMOOTH_REL:return new SVGPathSegCurvetoQuadraticSmoothRel(t,this._parseNumber(),this._parseNumber());case SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_SMOOTH_ABS:return new SVGPathSegCurvetoQuadraticSmoothAbs(t,this._parseNumber(),this._parseNumber());case SVGPathSeg.PATHSEG_ARC_REL:var c={x1:this._parseNumber(),y1:this._parseNumber(),arcAngle:this._parseNumber(),arcLarge:this._parseArcFlag(),arcSweep:this._parseArcFlag(),x:this._parseNumber(),y:this._parseNumber()};return new SVGPathSegArcRel(t,c.x,c.y,c.x1,c.y1,c.arcAngle,c.arcLarge,c.arcSweep);case SVGPathSeg.PATHSEG_ARC_ABS:var u={x1:this._parseNumber(),y1:this._parseNumber(),arcAngle:this._parseNumber(),arcLarge:this._parseArcFlag(),arcSweep:this._parseArcFlag(),x:this._parseNumber(),y:this._parseNumber()};return new SVGPathSegArcAbs(t,u.x,u.y,u.x1,u.y1,u.arcAngle,u.arcLarge,u.arcSweep);default:throw new Error("Unknown path seg type.")}}}]),e}(),o=new n,s=new a(e);if(!s.initialCommandIsMoveTo())return[];for(;s.hasMoreData();){var l=s.parseSegment();if(!l)return[];o.appendSegment(l)}return o.pathSegList}}],[{key:"_pathSegArrayAsString",value:function(e){var t="",n=!0;return e.forEach((function(e){n?(n=!1,t+=e._asPathString()):t+=" "+e._asPathString()})),t}}]),e}();C.prototype.classname="SVGPathSegList",Object.defineProperty(C.prototype,"numberOfItems",{get:function(){return this._checkPathSynchronizedToList(),this._list.length},enumerable:!0}),Object.defineProperties(SVGPathElement.prototype,{pathSegList:{get:function(){return this._pathSegList||(this._pathSegList=new C(this)),this._pathSegList},enumerable:!0},normalizedPathSegList:{get:function(){return this.pathSegList},enumerable:!0},animatedPathSegList:{get:function(){return this.pathSegList},enumerable:!0},animatedNormalizedPathSegList:{get:function(){return this.pathSegList},enumerable:!0}}),window.SVGPathSegList=C}}();var m,v=jQuery,_=(Boolean(document.createElementNS&&document.createElementNS(p.SVG,"svg").createSVGRect),navigator.userAgent),y=document.createElementNS(p.SVG,"svg"),b=Boolean(window.opera),x=_.includes("AppleWebKit"),w=_.includes("Gecko/"),S=_.includes("MSIE"),k=_.includes("Chrome/"),C=(_.includes("Windows"),_.includes("Macintosh")),A="ontouchstart"in window,E=Boolean(y.querySelector),G=Boolean(document.evaluate),P=function(){var e=document.createElementNS(p.SVG,"path");e.setAttribute("d","M0,0 10,10");var t=e.pathSegList,n=e.createSVGPathSegLinetoAbs(5,5);try{return t.replaceItem(n,1),!0}catch(e){}return!1}(),I=function(){var e=document.createElementNS(p.SVG,"path");e.setAttribute("d","M0,0 10,10");var t=e.pathSegList,n=e.createSVGPathSegLinetoAbs(5,5);try{return t.insertItemBefore(n,1),!0}catch(e){}return!1}(),N=function(){var e=document.createElementNS(p.SVG,"svg"),t=document.createElementNS(p.SVG,"svg");document.documentElement.append(e),t.setAttribute("x",5),e.append(t);var n=document.createElementNS(p.SVG,"text");n.textContent="a",t.append(n);try{return 0===n.getStartPositionOfChar(0).x}catch(e){return!1}finally{e.remove()}}(),T=function(){var e=document.createElementNS(p.SVG,"svg");document.documentElement.append(e);var t=document.createElementNS(p.SVG,"path");t.setAttribute("d","M0,0 C0,0 10,10 10,0"),e.append(t);var n=t.getBBox();return e.remove(),n.height>4&&n.height<5}(),L=function(){var e=document.createElementNS(p.SVG,"svg");document.documentElement.append(e);var t=document.createElementNS(p.SVG,"path");t.setAttribute("d","M0,0 10,0");var n=document.createElementNS(p.SVG,"path");n.setAttribute("d","M5,0 15,0");var r=document.createElementNS(p.SVG,"g");r.append(t,n),e.append(r);var a=r.getBBox();return e.remove(),15===a.width}(),M=(function(){var e=document.createElementNS(p.SVG,"rect");e.setAttribute("x",.1);var t=!e.cloneNode(!1).getAttribute("x").includes(",");t||v.alert('NOTE: This version of Opera is known to contain bugs in SVG-edit.\nPlease upgrade to the latest version in which the problems have been fixed.')}(),(m=document.createElementNS(p.SVG,"rect")).setAttribute("style","vector-effect:non-scaling-stroke"),"non-scaling-stroke"===m.style.vectorEffect),O=function(){var t=document.createElementNS(p.SVG,"rect").transform.baseVal,n=y.createSVGTransform();t.appendItem(n);var r=t.getItem(0),a=function(t){return t&&"object"===e(t)&&"function"==typeof t.setMatrix&&"angle"in t};return a(r)&&a(n)&&r.type===n.type&&r.angle===n.angle&&r.matrix.a===n.matrix.a&&r.matrix.b===n.matrix.b&&r.matrix.c===n.matrix.c&&r.matrix.d===n.matrix.d&&r.matrix.e===n.matrix.e&&r.matrix.f===n.matrix.f}(),j=function(){return b},V=function(){return x},R=function(){return w},B=function(){return S},D=function(){return k},U=function(){return C},F=function(){return A},H=function(){return L},z=function(){return M};
+var p={HTML:"http://www.w3.org/1999/xhtml",MATH:"http://www.w3.org/1998/Math/MathML",SE:"http://svg-edit.googlecode.com",SVG:"http://www.w3.org/2000/svg",XLINK:"http://www.w3.org/1999/xlink",XML:"http://www.w3.org/XML/1998/namespace",XMLNS:"http://www.w3.org/2000/xmlns/"},g=function(){var e={};return Object.entries(p).forEach((function(t){var n=d(t,2),r=n[0],a=n[1];e[a]=r.toLowerCase()})),e};!function(){if(!("SVGPathSeg"in window)){var e=function(){function e(t,n,a){r(this,e),this.pathSegType=t,this.pathSegTypeAsLetter=n,this._owningPathSegList=a}return i(e,[{key:"_segmentChanged",value:function(){this._owningPathSegList&&this._owningPathSegList.segmentChanged(this)}}]),e}();e.prototype.classname="SVGPathSeg",e.PATHSEG_UNKNOWN=0,e.PATHSEG_CLOSEPATH=1,e.PATHSEG_MOVETO_ABS=2,e.PATHSEG_MOVETO_REL=3,e.PATHSEG_LINETO_ABS=4,e.PATHSEG_LINETO_REL=5,e.PATHSEG_CURVETO_CUBIC_ABS=6,e.PATHSEG_CURVETO_CUBIC_REL=7,e.PATHSEG_CURVETO_QUADRATIC_ABS=8,e.PATHSEG_CURVETO_QUADRATIC_REL=9,e.PATHSEG_ARC_ABS=10,e.PATHSEG_ARC_REL=11,e.PATHSEG_LINETO_HORIZONTAL_ABS=12,e.PATHSEG_LINETO_HORIZONTAL_REL=13,e.PATHSEG_LINETO_VERTICAL_ABS=14,e.PATHSEG_LINETO_VERTICAL_REL=15,e.PATHSEG_CURVETO_CUBIC_SMOOTH_ABS=16,e.PATHSEG_CURVETO_CUBIC_SMOOTH_REL=17,e.PATHSEG_CURVETO_QUADRATIC_SMOOTH_ABS=18,e.PATHSEG_CURVETO_QUADRATIC_SMOOTH_REL=19;var t=function(t){function n(t){return r(this,n),u(this,l(n).call(this,e.PATHSEG_CLOSEPATH,"z",t))}return s(n,t),i(n,[{key:"toString",value:function(){return"[object SVGPathSegClosePath]"}},{key:"_asPathString",value:function(){return this.pathSegTypeAsLetter}},{key:"clone",value:function(){return new n(void 0)}}]),n}(e),n=function(t){function n(t,a,i){var o;return r(this,n),(o=u(this,l(n).call(this,e.PATHSEG_MOVETO_ABS,"M",t)))._x=a,o._y=i,o}return s(n,t),i(n,[{key:"toString",value:function(){return"[object SVGPathSegMovetoAbs]"}},{key:"_asPathString",value:function(){return this.pathSegTypeAsLetter+" "+this._x+" "+this._y}},{key:"clone",value:function(){return new n(void 0,this._x,this._y)}}]),n}(e);Object.defineProperties(n.prototype,{x:{get:function(){return this._x},set:function(e){this._x=e,this._segmentChanged()},enumerable:!0},y:{get:function(){return this._y},set:function(e){this._y=e,this._segmentChanged()},enumerable:!0}});var a=function(t){function n(t,a,i){var o;return r(this,n),(o=u(this,l(n).call(this,e.PATHSEG_MOVETO_REL,"m",t)))._x=a,o._y=i,o}return s(n,t),i(n,[{key:"toString",value:function(){return"[object SVGPathSegMovetoRel]"}},{key:"_asPathString",value:function(){return this.pathSegTypeAsLetter+" "+this._x+" "+this._y}},{key:"clone",value:function(){return new n(void 0,this._x,this._y)}}]),n}(e);Object.defineProperties(a.prototype,{x:{get:function(){return this._x},set:function(e){this._x=e,this._segmentChanged()},enumerable:!0},y:{get:function(){return this._y},set:function(e){this._y=e,this._segmentChanged()},enumerable:!0}});var o=function(t){function n(t,a,i){var o;return r(this,n),(o=u(this,l(n).call(this,e.PATHSEG_LINETO_ABS,"L",t)))._x=a,o._y=i,o}return s(n,t),i(n,[{key:"toString",value:function(){return"[object SVGPathSegLinetoAbs]"}},{key:"_asPathString",value:function(){return this.pathSegTypeAsLetter+" "+this._x+" "+this._y}},{key:"clone",value:function(){return new n(void 0,this._x,this._y)}}]),n}(e);Object.defineProperties(o.prototype,{x:{get:function(){return this._x},set:function(e){this._x=e,this._segmentChanged()},enumerable:!0},y:{get:function(){return this._y},set:function(e){this._y=e,this._segmentChanged()},enumerable:!0}});var c=function(t){function n(t,a,i){var o;return r(this,n),(o=u(this,l(n).call(this,e.PATHSEG_LINETO_REL,"l",t)))._x=a,o._y=i,o}return s(n,t),i(n,[{key:"toString",value:function(){return"[object SVGPathSegLinetoRel]"}},{key:"_asPathString",value:function(){return this.pathSegTypeAsLetter+" "+this._x+" "+this._y}},{key:"clone",value:function(){return new n(void 0,this._x,this._y)}}]),n}(e);Object.defineProperties(c.prototype,{x:{get:function(){return this._x},set:function(e){this._x=e,this._segmentChanged()},enumerable:!0},y:{get:function(){return this._y},set:function(e){this._y=e,this._segmentChanged()},enumerable:!0}});var d=function(t){function n(t,a,i,o,s,c,d){var h;return r(this,n),(h=u(this,l(n).call(this,e.PATHSEG_CURVETO_CUBIC_ABS,"C",t)))._x=a,h._y=i,h._x1=o,h._y1=s,h._x2=c,h._y2=d,h}return s(n,t),i(n,[{key:"toString",value:function(){return"[object SVGPathSegCurvetoCubicAbs]"}},{key:"_asPathString",value:function(){return this.pathSegTypeAsLetter+" "+this._x1+" "+this._y1+" "+this._x2+" "+this._y2+" "+this._x+" "+this._y}},{key:"clone",value:function(){return new n(void 0,this._x,this._y,this._x1,this._y1,this._x2,this._y2)}}]),n}(e);Object.defineProperties(d.prototype,{x:{get:function(){return this._x},set:function(e){this._x=e,this._segmentChanged()},enumerable:!0},y:{get:function(){return this._y},set:function(e){this._y=e,this._segmentChanged()},enumerable:!0},x1:{get:function(){return this._x1},set:function(e){this._x1=e,this._segmentChanged()},enumerable:!0},y1:{get:function(){return this._y1},set:function(e){this._y1=e,this._segmentChanged()},enumerable:!0},x2:{get:function(){return this._x2},set:function(e){this._x2=e,this._segmentChanged()},enumerable:!0},y2:{get:function(){return this._y2},set:function(e){this._y2=e,this._segmentChanged()},enumerable:!0}});var h=function(t){function n(t,a,i,o,s,c,d){var h;return r(this,n),(h=u(this,l(n).call(this,e.PATHSEG_CURVETO_CUBIC_REL,"c",t)))._x=a,h._y=i,h._x1=o,h._y1=s,h._x2=c,h._y2=d,h}return s(n,t),i(n,[{key:"toString",value:function(){return"[object SVGPathSegCurvetoCubicRel]"}},{key:"_asPathString",value:function(){return this.pathSegTypeAsLetter+" "+this._x1+" "+this._y1+" "+this._x2+" "+this._y2+" "+this._x+" "+this._y}},{key:"clone",value:function(){return new n(void 0,this._x,this._y,this._x1,this._y1,this._x2,this._y2)}}]),n}(e);Object.defineProperties(h.prototype,{x:{get:function(){return this._x},set:function(e){this._x=e,this._segmentChanged()},enumerable:!0},y:{get:function(){return this._y},set:function(e){this._y=e,this._segmentChanged()},enumerable:!0},x1:{get:function(){return this._x1},set:function(e){this._x1=e,this._segmentChanged()},enumerable:!0},y1:{get:function(){return this._y1},set:function(e){this._y1=e,this._segmentChanged()},enumerable:!0},x2:{get:function(){return this._x2},set:function(e){this._x2=e,this._segmentChanged()},enumerable:!0},y2:{get:function(){return this._y2},set:function(e){this._y2=e,this._segmentChanged()},enumerable:!0}});var f=function(t){function n(t,a,i,o,s){var c;return r(this,n),(c=u(this,l(n).call(this,e.PATHSEG_CURVETO_QUADRATIC_ABS,"Q",t)))._x=a,c._y=i,c._x1=o,c._y1=s,c}return s(n,t),i(n,[{key:"toString",value:function(){return"[object SVGPathSegCurvetoQuadraticAbs]"}},{key:"_asPathString",value:function(){return this.pathSegTypeAsLetter+" "+this._x1+" "+this._y1+" "+this._x+" "+this._y}},{key:"clone",value:function(){return new n(void 0,this._x,this._y,this._x1,this._y1)}}]),n}(e);Object.defineProperties(f.prototype,{x:{get:function(){return this._x},set:function(e){this._x=e,this._segmentChanged()},enumerable:!0},y:{get:function(){return this._y},set:function(e){this._y=e,this._segmentChanged()},enumerable:!0},x1:{get:function(){return this._x1},set:function(e){this._x1=e,this._segmentChanged()},enumerable:!0},y1:{get:function(){return this._y1},set:function(e){this._y1=e,this._segmentChanged()},enumerable:!0}});var p=function(t){function n(t,a,i,o,s){var c;return r(this,n),(c=u(this,l(n).call(this,e.PATHSEG_CURVETO_QUADRATIC_REL,"q",t)))._x=a,c._y=i,c._x1=o,c._y1=s,c}return s(n,t),i(n,[{key:"toString",value:function(){return"[object SVGPathSegCurvetoQuadraticRel]"}},{key:"_asPathString",value:function(){return this.pathSegTypeAsLetter+" "+this._x1+" "+this._y1+" "+this._x+" "+this._y}},{key:"clone",value:function(){return new n(void 0,this._x,this._y,this._x1,this._y1)}}]),n}(e);Object.defineProperties(p.prototype,{x:{get:function(){return this._x},set:function(e){this._x=e,this._segmentChanged()},enumerable:!0},y:{get:function(){return this._y},set:function(e){this._y=e,this._segmentChanged()},enumerable:!0},x1:{get:function(){return this._x1},set:function(e){this._x1=e,this._segmentChanged()},enumerable:!0},y1:{get:function(){return this._y1},set:function(e){this._y1=e,this._segmentChanged()},enumerable:!0}});var g=function(t){function n(t,a,i,o,s,c,d,h){var f;return r(this,n),(f=u(this,l(n).call(this,e.PATHSEG_ARC_ABS,"A",t)))._x=a,f._y=i,f._r1=o,f._r2=s,f._angle=c,f._largeArcFlag=d,f._sweepFlag=h,f}return s(n,t),i(n,[{key:"toString",value:function(){return"[object SVGPathSegArcAbs]"}},{key:"_asPathString",value:function(){return this.pathSegTypeAsLetter+" "+this._r1+" "+this._r2+" "+this._angle+" "+(this._largeArcFlag?"1":"0")+" "+(this._sweepFlag?"1":"0")+" "+this._x+" "+this._y}},{key:"clone",value:function(){return new n(void 0,this._x,this._y,this._r1,this._r2,this._angle,this._largeArcFlag,this._sweepFlag)}}]),n}(e);Object.defineProperties(g.prototype,{x:{get:function(){return this._x},set:function(e){this._x=e,this._segmentChanged()},enumerable:!0},y:{get:function(){return this._y},set:function(e){this._y=e,this._segmentChanged()},enumerable:!0},r1:{get:function(){return this._r1},set:function(e){this._r1=e,this._segmentChanged()},enumerable:!0},r2:{get:function(){return this._r2},set:function(e){this._r2=e,this._segmentChanged()},enumerable:!0},angle:{get:function(){return this._angle},set:function(e){this._angle=e,this._segmentChanged()},enumerable:!0},largeArcFlag:{get:function(){return this._largeArcFlag},set:function(e){this._largeArcFlag=e,this._segmentChanged()},enumerable:!0},sweepFlag:{get:function(){return this._sweepFlag},set:function(e){this._sweepFlag=e,this._segmentChanged()},enumerable:!0}});var m=function(t){function n(t,a,i,o,s,c,d,h){var f;return r(this,n),(f=u(this,l(n).call(this,e.PATHSEG_ARC_REL,"a",t)))._x=a,f._y=i,f._r1=o,f._r2=s,f._angle=c,f._largeArcFlag=d,f._sweepFlag=h,f}return s(n,t),i(n,[{key:"toString",value:function(){return"[object SVGPathSegArcRel]"}},{key:"_asPathString",value:function(){return this.pathSegTypeAsLetter+" "+this._r1+" "+this._r2+" "+this._angle+" "+(this._largeArcFlag?"1":"0")+" "+(this._sweepFlag?"1":"0")+" "+this._x+" "+this._y}},{key:"clone",value:function(){return new n(void 0,this._x,this._y,this._r1,this._r2,this._angle,this._largeArcFlag,this._sweepFlag)}}]),n}(e);Object.defineProperties(m.prototype,{x:{get:function(){return this._x},set:function(e){this._x=e,this._segmentChanged()},enumerable:!0},y:{get:function(){return this._y},set:function(e){this._y=e,this._segmentChanged()},enumerable:!0},r1:{get:function(){return this._r1},set:function(e){this._r1=e,this._segmentChanged()},enumerable:!0},r2:{get:function(){return this._r2},set:function(e){this._r2=e,this._segmentChanged()},enumerable:!0},angle:{get:function(){return this._angle},set:function(e){this._angle=e,this._segmentChanged()},enumerable:!0},largeArcFlag:{get:function(){return this._largeArcFlag},set:function(e){this._largeArcFlag=e,this._segmentChanged()},enumerable:!0},sweepFlag:{get:function(){return this._sweepFlag},set:function(e){this._sweepFlag=e,this._segmentChanged()},enumerable:!0}});var v=function(t){function n(t,a){var i;return r(this,n),(i=u(this,l(n).call(this,e.PATHSEG_LINETO_HORIZONTAL_ABS,"H",t)))._x=a,i}return s(n,t),i(n,[{key:"toString",value:function(){return"[object SVGPathSegLinetoHorizontalAbs]"}},{key:"_asPathString",value:function(){return this.pathSegTypeAsLetter+" "+this._x}},{key:"clone",value:function(){return new n(void 0,this._x)}}]),n}(e);Object.defineProperty(v.prototype,"x",{get:function(){return this._x},set:function(e){this._x=e,this._segmentChanged()},enumerable:!0});var y=function(t){function n(t,a){var i;return r(this,n),(i=u(this,l(n).call(this,e.PATHSEG_LINETO_HORIZONTAL_REL,"h",t)))._x=a,i}return s(n,t),i(n,[{key:"toString",value:function(){return"[object SVGPathSegLinetoHorizontalRel]"}},{key:"_asPathString",value:function(){return this.pathSegTypeAsLetter+" "+this._x}},{key:"clone",value:function(){return new n(void 0,this._x)}}]),n}(e);Object.defineProperty(y.prototype,"x",{get:function(){return this._x},set:function(e){this._x=e,this._segmentChanged()},enumerable:!0});var _=function(t){function n(t,a){var i;return r(this,n),(i=u(this,l(n).call(this,e.PATHSEG_LINETO_VERTICAL_ABS,"V",t)))._y=a,i}return s(n,t),i(n,[{key:"toString",value:function(){return"[object SVGPathSegLinetoVerticalAbs]"}},{key:"_asPathString",value:function(){return this.pathSegTypeAsLetter+" "+this._y}},{key:"clone",value:function(){return new n(void 0,this._y)}}]),n}(e);Object.defineProperty(_.prototype,"y",{get:function(){return this._y},set:function(e){this._y=e,this._segmentChanged()},enumerable:!0});var b=function(t){function n(t,a){var i;return r(this,n),(i=u(this,l(n).call(this,e.PATHSEG_LINETO_VERTICAL_REL,"v",t)))._y=a,i}return s(n,t),i(n,[{key:"toString",value:function(){return"[object SVGPathSegLinetoVerticalRel]"}},{key:"_asPathString",value:function(){return this.pathSegTypeAsLetter+" "+this._y}},{key:"clone",value:function(){return new n(void 0,this._y)}}]),n}(e);Object.defineProperty(b.prototype,"y",{get:function(){return this._y},set:function(e){this._y=e,this._segmentChanged()},enumerable:!0});var x=function(t){function n(t,a,i,o,s){var c;return r(this,n),(c=u(this,l(n).call(this,e.PATHSEG_CURVETO_CUBIC_SMOOTH_ABS,"S",t)))._x=a,c._y=i,c._x2=o,c._y2=s,c}return s(n,t),i(n,[{key:"toString",value:function(){return"[object SVGPathSegCurvetoCubicSmoothAbs]"}},{key:"_asPathString",value:function(){return this.pathSegTypeAsLetter+" "+this._x2+" "+this._y2+" "+this._x+" "+this._y}},{key:"clone",value:function(){return new n(void 0,this._x,this._y,this._x2,this._y2)}}]),n}(e);Object.defineProperties(x.prototype,{x:{get:function(){return this._x},set:function(e){this._x=e,this._segmentChanged()},enumerable:!0},y:{get:function(){return this._y},set:function(e){this._y=e,this._segmentChanged()},enumerable:!0},x2:{get:function(){return this._x2},set:function(e){this._x2=e,this._segmentChanged()},enumerable:!0},y2:{get:function(){return this._y2},set:function(e){this._y2=e,this._segmentChanged()},enumerable:!0}});var w=function(t){function n(t,a,i,o,s){var c;return r(this,n),(c=u(this,l(n).call(this,e.PATHSEG_CURVETO_CUBIC_SMOOTH_REL,"s",t)))._x=a,c._y=i,c._x2=o,c._y2=s,c}return s(n,t),i(n,[{key:"toString",value:function(){return"[object SVGPathSegCurvetoCubicSmoothRel]"}},{key:"_asPathString",value:function(){return this.pathSegTypeAsLetter+" "+this._x2+" "+this._y2+" "+this._x+" "+this._y}},{key:"clone",value:function(){return new n(void 0,this._x,this._y,this._x2,this._y2)}}]),n}(e);Object.defineProperties(w.prototype,{x:{get:function(){return this._x},set:function(e){this._x=e,this._segmentChanged()},enumerable:!0},y:{get:function(){return this._y},set:function(e){this._y=e,this._segmentChanged()},enumerable:!0},x2:{get:function(){return this._x2},set:function(e){this._x2=e,this._segmentChanged()},enumerable:!0},y2:{get:function(){return this._y2},set:function(e){this._y2=e,this._segmentChanged()},enumerable:!0}});var S=function(t){function n(t,a,i){var o;return r(this,n),(o=u(this,l(n).call(this,e.PATHSEG_CURVETO_QUADRATIC_SMOOTH_ABS,"T",t)))._x=a,o._y=i,o}return s(n,t),i(n,[{key:"toString",value:function(){return"[object SVGPathSegCurvetoQuadraticSmoothAbs]"}},{key:"_asPathString",value:function(){return this.pathSegTypeAsLetter+" "+this._x+" "+this._y}},{key:"clone",value:function(){return new n(void 0,this._x,this._y)}}]),n}(e);Object.defineProperties(S.prototype,{x:{get:function(){return this._x},set:function(e){this._x=e,this._segmentChanged()},enumerable:!0},y:{get:function(){return this._y},set:function(e){this._y=e,this._segmentChanged()},enumerable:!0}});var k=function(t){function n(t,a,i){var o;return r(this,n),(o=u(this,l(n).call(this,e.PATHSEG_CURVETO_QUADRATIC_SMOOTH_REL,"t",t)))._x=a,o._y=i,o}return s(n,t),i(n,[{key:"toString",value:function(){return"[object SVGPathSegCurvetoQuadraticSmoothRel]"}},{key:"_asPathString",value:function(){return this.pathSegTypeAsLetter+" "+this._x+" "+this._y}},{key:"clone",value:function(){return new n(void 0,this._x,this._y)}}]),n}(e);Object.defineProperties(k.prototype,{x:{get:function(){return this._x},set:function(e){this._x=e,this._segmentChanged()},enumerable:!0},y:{get:function(){return this._y},set:function(e){this._y=e,this._segmentChanged()},enumerable:!0}}),SVGPathElement.prototype.createSVGPathSegClosePath=function(){return new t(void 0)},SVGPathElement.prototype.createSVGPathSegMovetoAbs=function(e,t){return new n(void 0,e,t)},SVGPathElement.prototype.createSVGPathSegMovetoRel=function(e,t){return new a(void 0,e,t)},SVGPathElement.prototype.createSVGPathSegLinetoAbs=function(e,t){return new o(void 0,e,t)},SVGPathElement.prototype.createSVGPathSegLinetoRel=function(e,t){return new c(void 0,e,t)},SVGPathElement.prototype.createSVGPathSegCurvetoCubicAbs=function(e,t,n,r,a,i){return new d(void 0,e,t,n,r,a,i)},SVGPathElement.prototype.createSVGPathSegCurvetoCubicRel=function(e,t,n,r,a,i){return new h(void 0,e,t,n,r,a,i)},SVGPathElement.prototype.createSVGPathSegCurvetoQuadraticAbs=function(e,t,n,r){return new f(void 0,e,t,n,r)},SVGPathElement.prototype.createSVGPathSegCurvetoQuadraticRel=function(e,t,n,r){return new p(void 0,e,t,n,r)},SVGPathElement.prototype.createSVGPathSegArcAbs=function(e,t,n,r,a,i,o){return new g(void 0,e,t,n,r,a,i,o)},SVGPathElement.prototype.createSVGPathSegArcRel=function(e,t,n,r,a,i,o){return new m(void 0,e,t,n,r,a,i,o)},SVGPathElement.prototype.createSVGPathSegLinetoHorizontalAbs=function(e){return new v(void 0,e)},SVGPathElement.prototype.createSVGPathSegLinetoHorizontalRel=function(e){return new y(void 0,e)},SVGPathElement.prototype.createSVGPathSegLinetoVerticalAbs=function(e){return new _(void 0,e)},SVGPathElement.prototype.createSVGPathSegLinetoVerticalRel=function(e){return new b(void 0,e)},SVGPathElement.prototype.createSVGPathSegCurvetoCubicSmoothAbs=function(e,t,n,r){return new x(void 0,e,t,n,r)},SVGPathElement.prototype.createSVGPathSegCurvetoCubicSmoothRel=function(e,t,n,r){return new w(void 0,e,t,n,r)},SVGPathElement.prototype.createSVGPathSegCurvetoQuadraticSmoothAbs=function(e,t){return new S(void 0,e,t)},SVGPathElement.prototype.createSVGPathSegCurvetoQuadraticSmoothRel=function(e,t){return new k(void 0,e,t)},"getPathSegAtLength"in SVGPathElement.prototype||(SVGPathElement.prototype.getPathSegAtLength=function(e){if(void 0===e||!isFinite(e))throw new Error("Invalid arguments.");var t=document.createElementNS("http://www.w3.org/2000/svg","path");t.setAttribute("d",this.getAttribute("d"));var n=t.pathSegList.numberOfItems-1;if(n<=0)return 0;do{if(t.pathSegList.removeItem(n),e>t.getTotalLength())break;n--}while(n>0);return n}),window.SVGPathSeg=e,window.SVGPathSegClosePath=t,window.SVGPathSegMovetoAbs=n,window.SVGPathSegMovetoRel=a,window.SVGPathSegLinetoAbs=o,window.SVGPathSegLinetoRel=c,window.SVGPathSegCurvetoCubicAbs=d,window.SVGPathSegCurvetoCubicRel=h,window.SVGPathSegCurvetoQuadraticAbs=f,window.SVGPathSegCurvetoQuadraticRel=p,window.SVGPathSegArcAbs=g,window.SVGPathSegArcRel=m,window.SVGPathSegLinetoHorizontalAbs=v,window.SVGPathSegLinetoHorizontalRel=y,window.SVGPathSegLinetoVerticalAbs=_,window.SVGPathSegLinetoVerticalRel=b,window.SVGPathSegCurvetoCubicSmoothAbs=x,window.SVGPathSegCurvetoCubicSmoothRel=w,window.SVGPathSegCurvetoQuadraticSmoothAbs=S,window.SVGPathSegCurvetoQuadraticSmoothRel=k}if(!("SVGPathSegList"in window&&"appendItem"in window.SVGPathSegList.prototype)){var C=function(){function e(t){r(this,e),this._pathElement=t,this._list=this._parsePath(this._pathElement.getAttribute("d")),this._mutationObserverConfig={attributes:!0,attributeFilter:["d"]},this._pathElementMutationObserver=new MutationObserver(this._updateListFromPathMutations.bind(this)),this._pathElementMutationObserver.observe(this._pathElement,this._mutationObserverConfig)}return i(e,[{key:"_checkPathSynchronizedToList",value:function(){this._updateListFromPathMutations(this._pathElementMutationObserver.takeRecords())}},{key:"_updateListFromPathMutations",value:function(e){if(this._pathElement){var t=!1;e.forEach((function(e){"d"===e.attributeName&&(t=!0)})),t&&(this._list=this._parsePath(this._pathElement.getAttribute("d")))}}},{key:"_writeListToPath",value:function(){this._pathElementMutationObserver.disconnect(),this._pathElement.setAttribute("d",e._pathSegArrayAsString(this._list)),this._pathElementMutationObserver.observe(this._pathElement,this._mutationObserverConfig)}},{key:"segmentChanged",value:function(e){this._writeListToPath()}},{key:"clear",value:function(){this._checkPathSynchronizedToList(),this._list.forEach((function(e){e._owningPathSegList=null})),this._list=[],this._writeListToPath()}},{key:"initialize",value:function(e){return this._checkPathSynchronizedToList(),this._list=[e],e._owningPathSegList=this,this._writeListToPath(),e}},{key:"_checkValidIndex",value:function(e){if(isNaN(e)||e<0||e>=this.numberOfItems)throw new Error("INDEX_SIZE_ERR")}},{key:"getItem",value:function(e){return this._checkPathSynchronizedToList(),this._checkValidIndex(e),this._list[e]}},{key:"insertItemBefore",value:function(e,t){return this._checkPathSynchronizedToList(),t>this.numberOfItems&&(t=this.numberOfItems),e._owningPathSegList&&(e=e.clone()),this._list.splice(t,0,e),e._owningPathSegList=this,this._writeListToPath(),e}},{key:"replaceItem",value:function(e,t){return this._checkPathSynchronizedToList(),e._owningPathSegList&&(e=e.clone()),this._checkValidIndex(t),this._list[t]=e,e._owningPathSegList=this,this._writeListToPath(),e}},{key:"removeItem",value:function(e){this._checkPathSynchronizedToList(),this._checkValidIndex(e);var t=this._list[e];return this._list.splice(e,1),this._writeListToPath(),t}},{key:"appendItem",value:function(e){return this._checkPathSynchronizedToList(),e._owningPathSegList&&(e=e.clone()),this._list.push(e),e._owningPathSegList=this,this._writeListToPath(),e}},{key:"_parsePath",value:function(e){if(!e||!e.length)return[];var t=this,n=function(){function e(){r(this,e),this.pathSegList=[]}return i(e,[{key:"appendSegment",value:function(e){this.pathSegList.push(e)}}]),e}(),a=function(){function e(t){r(this,e),this._string=t,this._currentIndex=0,this._endIndex=this._string.length,this._previousCommand=SVGPathSeg.PATHSEG_UNKNOWN,this._skipOptionalSpaces()}return i(e,[{key:"_isCurrentSpace",value:function(){var e=this._string[this._currentIndex];return e<=" "&&(" "===e||"\n"===e||"\t"===e||"\r"===e||"\f"===e)}},{key:"_skipOptionalSpaces",value:function(){for(;this._currentIndex="0"&&e<="9")&&t!==SVGPathSeg.PATHSEG_CLOSEPATH?t===SVGPathSeg.PATHSEG_MOVETO_ABS?SVGPathSeg.PATHSEG_LINETO_ABS:t===SVGPathSeg.PATHSEG_MOVETO_REL?SVGPathSeg.PATHSEG_LINETO_REL:t:SVGPathSeg.PATHSEG_UNKNOWN}},{key:"initialCommandIsMoveTo",value:function(){if(!this.hasMoreData())return!0;var e=this.peekSegmentType();return e===SVGPathSeg.PATHSEG_MOVETO_ABS||e===SVGPathSeg.PATHSEG_MOVETO_REL}},{key:"_parseNumber",value:function(){var e=0,t=0,n=1,r=0,a=1,i=1,o=this._currentIndex;if(this._skipOptionalSpaces(),this._currentIndex"9")&&"."!==this._string.charAt(this._currentIndex))){for(var s=this._currentIndex;this._currentIndex="0"&&this._string.charAt(this._currentIndex)<="9";)this._currentIndex++;if(this._currentIndex!==s)for(var l=this._currentIndex-1,c=1;l>=s;)t+=c*(this._string.charAt(l--)-"0"),c*=10;if(this._currentIndex=this._endIndex||this._string.charAt(this._currentIndex)<"0"||this._string.charAt(this._currentIndex)>"9")return;for(;this._currentIndex="0"&&this._string.charAt(this._currentIndex)<="9";)n*=10,r+=(this._string.charAt(this._currentIndex)-"0")/n,this._currentIndex+=1}if(this._currentIndex!==o&&this._currentIndex+1=this._endIndex||this._string.charAt(this._currentIndex)<"0"||this._string.charAt(this._currentIndex)>"9")return;for(;this._currentIndex="0"&&this._string.charAt(this._currentIndex)<="9";)e*=10,e+=this._string.charAt(this._currentIndex)-"0",this._currentIndex++}var u=t+r;if(u*=a,e&&(u*=Math.pow(10,i*e)),o!==this._currentIndex)return this._skipOptionalSpacesOrDelimiter(),u}}},{key:"_parseArcFlag",value:function(){if(!(this._currentIndex>=this._endIndex)){var e=!1,t=this._string.charAt(this._currentIndex++);if("0"===t)e=!1;else{if("1"!==t)return;e=!0}return this._skipOptionalSpacesOrDelimiter(),e}}},{key:"parseSegment",value:function(){var e=this._string[this._currentIndex],n=this._pathSegTypeFromChar(e);if(n===SVGPathSeg.PATHSEG_UNKNOWN){if(this._previousCommand===SVGPathSeg.PATHSEG_UNKNOWN)return null;if((n=this._nextCommandHelper(e,this._previousCommand))===SVGPathSeg.PATHSEG_UNKNOWN)return null}else this._currentIndex++;switch(this._previousCommand=n,n){case SVGPathSeg.PATHSEG_MOVETO_REL:return new SVGPathSegMovetoRel(t,this._parseNumber(),this._parseNumber());case SVGPathSeg.PATHSEG_MOVETO_ABS:return new SVGPathSegMovetoAbs(t,this._parseNumber(),this._parseNumber());case SVGPathSeg.PATHSEG_LINETO_REL:return new SVGPathSegLinetoRel(t,this._parseNumber(),this._parseNumber());case SVGPathSeg.PATHSEG_LINETO_ABS:return new SVGPathSegLinetoAbs(t,this._parseNumber(),this._parseNumber());case SVGPathSeg.PATHSEG_LINETO_HORIZONTAL_REL:return new SVGPathSegLinetoHorizontalRel(t,this._parseNumber());case SVGPathSeg.PATHSEG_LINETO_HORIZONTAL_ABS:return new SVGPathSegLinetoHorizontalAbs(t,this._parseNumber());case SVGPathSeg.PATHSEG_LINETO_VERTICAL_REL:return new SVGPathSegLinetoVerticalRel(t,this._parseNumber());case SVGPathSeg.PATHSEG_LINETO_VERTICAL_ABS:return new SVGPathSegLinetoVerticalAbs(t,this._parseNumber());case SVGPathSeg.PATHSEG_CLOSEPATH:return this._skipOptionalSpaces(),new SVGPathSegClosePath(t);case SVGPathSeg.PATHSEG_CURVETO_CUBIC_REL:var r={x1:this._parseNumber(),y1:this._parseNumber(),x2:this._parseNumber(),y2:this._parseNumber(),x:this._parseNumber(),y:this._parseNumber()};return new SVGPathSegCurvetoCubicRel(t,r.x,r.y,r.x1,r.y1,r.x2,r.y2);case SVGPathSeg.PATHSEG_CURVETO_CUBIC_ABS:var a={x1:this._parseNumber(),y1:this._parseNumber(),x2:this._parseNumber(),y2:this._parseNumber(),x:this._parseNumber(),y:this._parseNumber()};return new SVGPathSegCurvetoCubicAbs(t,a.x,a.y,a.x1,a.y1,a.x2,a.y2);case SVGPathSeg.PATHSEG_CURVETO_CUBIC_SMOOTH_REL:var i={x2:this._parseNumber(),y2:this._parseNumber(),x:this._parseNumber(),y:this._parseNumber()};return new SVGPathSegCurvetoCubicSmoothRel(t,i.x,i.y,i.x2,i.y2);case SVGPathSeg.PATHSEG_CURVETO_CUBIC_SMOOTH_ABS:var o={x2:this._parseNumber(),y2:this._parseNumber(),x:this._parseNumber(),y:this._parseNumber()};return new SVGPathSegCurvetoCubicSmoothAbs(t,o.x,o.y,o.x2,o.y2);case SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_REL:var s={x1:this._parseNumber(),y1:this._parseNumber(),x:this._parseNumber(),y:this._parseNumber()};return new SVGPathSegCurvetoQuadraticRel(t,s.x,s.y,s.x1,s.y1);case SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_ABS:var l={x1:this._parseNumber(),y1:this._parseNumber(),x:this._parseNumber(),y:this._parseNumber()};return new SVGPathSegCurvetoQuadraticAbs(t,l.x,l.y,l.x1,l.y1);case SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_SMOOTH_REL:return new SVGPathSegCurvetoQuadraticSmoothRel(t,this._parseNumber(),this._parseNumber());case SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_SMOOTH_ABS:return new SVGPathSegCurvetoQuadraticSmoothAbs(t,this._parseNumber(),this._parseNumber());case SVGPathSeg.PATHSEG_ARC_REL:var c={x1:this._parseNumber(),y1:this._parseNumber(),arcAngle:this._parseNumber(),arcLarge:this._parseArcFlag(),arcSweep:this._parseArcFlag(),x:this._parseNumber(),y:this._parseNumber()};return new SVGPathSegArcRel(t,c.x,c.y,c.x1,c.y1,c.arcAngle,c.arcLarge,c.arcSweep);case SVGPathSeg.PATHSEG_ARC_ABS:var u={x1:this._parseNumber(),y1:this._parseNumber(),arcAngle:this._parseNumber(),arcLarge:this._parseArcFlag(),arcSweep:this._parseArcFlag(),x:this._parseNumber(),y:this._parseNumber()};return new SVGPathSegArcAbs(t,u.x,u.y,u.x1,u.y1,u.arcAngle,u.arcLarge,u.arcSweep);default:throw new Error("Unknown path seg type.")}}}]),e}(),o=new n,s=new a(e);if(!s.initialCommandIsMoveTo())return[];for(;s.hasMoreData();){var l=s.parseSegment();if(!l)return[];o.appendSegment(l)}return o.pathSegList}}],[{key:"_pathSegArrayAsString",value:function(e){var t="",n=!0;return e.forEach((function(e){n?(n=!1,t+=e._asPathString()):t+=" "+e._asPathString()})),t}}]),e}();C.prototype.classname="SVGPathSegList",Object.defineProperty(C.prototype,"numberOfItems",{get:function(){return this._checkPathSynchronizedToList(),this._list.length},enumerable:!0}),Object.defineProperties(SVGPathElement.prototype,{pathSegList:{get:function(){return this._pathSegList||(this._pathSegList=new C(this)),this._pathSegList},enumerable:!0},normalizedPathSegList:{get:function(){return this.pathSegList},enumerable:!0},animatedPathSegList:{get:function(){return this.pathSegList},enumerable:!0},animatedNormalizedPathSegList:{get:function(){return this.pathSegList},enumerable:!0}}),window.SVGPathSegList=C}}();var m,v=jQuery,y=(Boolean(document.createElementNS&&document.createElementNS(p.SVG,"svg").createSVGRect),navigator.userAgent),_=document.createElementNS(p.SVG,"svg"),b=Boolean(window.opera),x=y.includes("AppleWebKit"),w=y.includes("Gecko/"),S=y.includes("MSIE"),k=y.includes("Chrome/"),C=(y.includes("Windows"),y.includes("Macintosh")),A="ontouchstart"in window,E=Boolean(_.querySelector),G=Boolean(document.evaluate),P=function(){var e=document.createElementNS(p.SVG,"path");e.setAttribute("d","M0,0 10,10");var t=e.pathSegList,n=e.createSVGPathSegLinetoAbs(5,5);try{return t.replaceItem(n,1),!0}catch(e){}return!1}(),I=function(){var e=document.createElementNS(p.SVG,"path");e.setAttribute("d","M0,0 10,10");var t=e.pathSegList,n=e.createSVGPathSegLinetoAbs(5,5);try{return t.insertItemBefore(n,1),!0}catch(e){}return!1}(),T=function(){var e=document.createElementNS(p.SVG,"svg"),t=document.createElementNS(p.SVG,"svg");document.documentElement.append(e),t.setAttribute("x",5),e.append(t);var n=document.createElementNS(p.SVG,"text");n.textContent="a",t.append(n);try{return 0===n.getStartPositionOfChar(0).x}catch(e){return!1}finally{e.remove()}}(),N=function(){var e=document.createElementNS(p.SVG,"svg");document.documentElement.append(e);var t=document.createElementNS(p.SVG,"path");t.setAttribute("d","M0,0 C0,0 10,10 10,0"),e.append(t);var n=t.getBBox();return e.remove(),n.height>4&&n.height<5}(),L=function(){var e=document.createElementNS(p.SVG,"svg");document.documentElement.append(e);var t=document.createElementNS(p.SVG,"path");t.setAttribute("d","M0,0 10,0");var n=document.createElementNS(p.SVG,"path");n.setAttribute("d","M5,0 15,0");var r=document.createElementNS(p.SVG,"g");r.append(t,n),e.append(r);var a=r.getBBox();return e.remove(),15===a.width}(),M=(function(){var e=document.createElementNS(p.SVG,"rect");e.setAttribute("x",.1);var t=!e.cloneNode(!1).getAttribute("x").includes(",");t||v.alert('NOTE: This version of Opera is known to contain bugs in SVG-edit.\nPlease upgrade to the latest version in which the problems have been fixed.')}(),(m=document.createElementNS(p.SVG,"rect")).setAttribute("style","vector-effect:non-scaling-stroke"),"non-scaling-stroke"===m.style.vectorEffect),O=function(){var t=document.createElementNS(p.SVG,"rect").transform.baseVal,n=_.createSVGTransform();t.appendItem(n);var r=t.getItem(0),a=function(t){return t&&"object"===e(t)&&"function"==typeof t.setMatrix&&"angle"in t};return a(r)&&a(n)&&r.type===n.type&&r.angle===n.angle&&r.matrix.a===n.matrix.a&&r.matrix.b===n.matrix.b&&r.matrix.c===n.matrix.c&&r.matrix.d===n.matrix.d&&r.matrix.e===n.matrix.e&&r.matrix.f===n.matrix.f}(),j=function(){return x},V=function(){return w},R=function(){return S},B=function(){return k},U=function(){return C},F=function(){return A},D=function(){return M};
/**
* A jQuery module to work with SVG attributes.
* @module jQueryAttr
* @license MIT
*/
-function q(t){var n=t.fn.attr;return t.fn.attr=function(t,r){var a=this.length;if(!a)return n.call(this,t,r);for(var i=0;i=0)return this._xforms[e];var t=new Error("DOMException with code=INDEX_SIZE_ERR");throw t.code=1,t}},{key:"insertItemBefore",value:function(e,t){var n=null;if(t>=0)if(t=0&&(this._removeFromOtherLists(e),this._xforms[t]=e,n=e,this._list._update()),n}},{key:"removeItem",value:function(e){if(e=0){var t,n=this._xforms[e],r=new Array(this.numberOfItems-1);for(t=0;t=0;t--)this.stack[t].unapply(e);e&&e.handleHistoryEvent(ce.AFTER_UNAPPLY,this)}},{key:"elements",value:function(){for(var e=[],t=this.stack.length;t--;)for(var n=this.stack[t].elements(),r=n.length;r--;)e.includes(n[r])||e.push(n[r]);return e}},{key:"addSubCommand",value:function(e){this.stack.push(e)}},{key:"isEmpty",value:function(){return!this.stack.length}}]),t}(ue);ge.type=ge.prototype.type;var me,ve,_e,ye,be,xe=function(){function e(t){r(this,e),this.handler_=t||null,this.undoStackPointer=0,this.undoStack=[],this.undoChangeStackPointer=-1,this.undoableChangeStack=[]}return i(e,[{key:"resetUndoStack",value:function(){this.undoStack=[],this.undoStackPointer=0}},{key:"getUndoStackSize",value:function(){return this.undoStackPointer}},{key:"getRedoStackSize",value:function(){return this.undoStack.length-this.undoStackPointer}},{key:"getNextUndoCommandText",value:function(){return this.undoStackPointer>0?this.undoStack[this.undoStackPointer-1].getText():""}},{key:"getNextRedoCommandText",value:function(){return this.undoStackPointer0&&this.undoStack[--this.undoStackPointer].unapply(this.handler_)}},{key:"redo",value:function(){this.undoStackPointer0&&this.undoStack[this.undoStackPointer++].apply(this.handler_)}},{key:"addCommandToHistory",value:function(e){this.undoStackPointer0&&(this.undoStack=this.undoStack.splice(0,this.undoStackPointer)),this.undoStack.push(e),this.undoStackPointer=this.undoStack.length}},{key:"beginUndoableChange",value:function(e,t){for(var n=++this.undoChangeStackPointer,r=t.length,a=new Array(r),i=new Array(r);r--;){var o=t[r];an(o)||(i[r]=o,a[r]=o.getAttribute(e))}this.undoableChangeStack[n]={attrName:e,oldValues:a,elements:i}}},{key:"finishUndoableChange",value:function(){for(var e=this.undoChangeStackPointer--,t=this.undoableChangeStack[e],n=t.attrName,r=new ge("Change "+n),a=t.elements.length;a--;){var i=t.elements[a];if(!an(i)){var o={};o[n]=t.oldValues[a],o[n]!==i.getAttribute(n)&&r.addSubCommand(new pe(i,o,n))}}return this.undoableChangeStack[e]=null,r}}]),e}(),we=Object.freeze({__proto__:null,HistoryEventTypes:ce,MoveElementCommand:de,InsertElementCommand:he,RemoveElementCommand:fe,ChangeElementCommand:pe,BatchCommand:ge,UndoManager:xe}),Se=document.createElementNS(p.SVG,"svg"),ke=function(e,t,n){return{x:n.a*e+n.c*t+n.e,y:n.b*e+n.d*t+n.f}},Ce=function(e){return 1===e.a&&0===e.b&&0===e.c&&1===e.d&&0===e.e&&0===e.f},Ae=function(){for(var e=arguments.length,t=new Array(e),n=0;n(n=parseInt(n))){var r=n;n=t,t=r}for(var a=Se.createSVGMatrix(),i=t;i<=n;++i){var o=i>=0&&ie.x&&t.ye.y},Le=jQuery,Me={2:["x","y"],4:["x","y"],6:["x","y","x1","y1","x2","y2"],8:["x","y","x1","y1"],10:["x","y","r1","r2","angle","largeArcFlag","sweepFlag"],12:["x"],14:["y"],16:["x","y","x2","y2"],18:["x","y"]},Oe={},je=function(e){Object.assign(Oe,e.ui)},Ve=[],Re=!0,Be={},De=null,Ue=null,Fe=function(e){Ue=e,Ve=[0,"ClosePath"];Le.each(["Moveto","Lineto","CurvetoCubic","CurvetoQuadratic","Arc","LinetoHorizontal","LinetoVertical","CurvetoCubicSmooth","CurvetoQuadraticSmooth"],(function(e,t){Ve.push(t+"Abs"),Ve.push(t+"Rel")}))},He=function(e,t,n){var r=e.pathSegList;if(I)r.insertItemBefore(t,n);else{for(var a=r.numberOfItems,i=[],o=0;o0?(f=g element");this.elem=t,this.segs=[],this.selected_pts=[],De=this,this.init()}return i(e,[{key:"init",value:function(){Le(Xe()).find("*").each((function(){Le(this).attr("display","none")}));var e=this.elem.pathSegList,t=e.numberOfItems;this.segs=[],this.selected_pts=[],this.first_seg=null;for(var n=0;n=t?null:i[s+1],u=s-1<0?null:i[s-1];if(2===l.type){if(u&&1!==u.type){var d=i[o];d.next=i[o+1],d.next.prev=d,d.addGrip()}o=s}else if(c&&1===c.type)l.next=i[o+1],l.next.prev=l,l.mate=i[o],l.addGrip(),an(this.first_seg)&&(this.first_seg=l);else if(c)1!==l.type&&(l.addGrip(),c&&2!==c.type&&(l.next=c,l.next.prev=l));else if(1!==l.type){var h=i[o];h.next=i[o+1],h.next.prev=h,h.addGrip(),l.addGrip(),this.first_seg||(this.first_seg=i[o])}}return this}},{key:"eachSeg",value:function(e){for(var t=this.segs.length,n=0;n=0&&n.selected_pts.push(e)})),this.selected_pts.sort();var r=this.selected_pts.length,a=[];for(a.length=r;r--;){var i=this.selected_pts[r],o=this.segs[i];o.select(!0),a[r]=o.ptgrip}var s=e.subpathIsClosed(this.selected_pts[0]);Ue.addPtsToSelection({grips:a,closedSubpath:s})}}],[{key:"subpathIsClosed",value:function(e){var t=!1;return De.eachSeg((function(n){return n<=e||2!==this.type&&(1!==this.type||(t=!0,!1))})),t}}]),e}(),rt=function(e){var t=Be[e.id];return t||(t=Be[e.id]=new nt(e)),t},at=function(e){e in Be&&delete Be[e]},it=function(e,t){var n=e-_e,r=t-ye,a=Math.sqrt(n*n+r*r),i=Math.atan2(r,n)+be;return n=a*Math.cos(i)+_e,r=a*Math.sin(i)+ye,n-=me,r-=ve,a=Math.sqrt(n*n+r*r),i=Math.atan2(r,n)-be,{x:a*Math.cos(i)+me,y:a*Math.sin(i)+ve}},ot=function(){var e=De.elem;if(be=Zt(e,!0)){var t=De.oldbbox;_e=t.x+t.width/2,ye=t.y+t.height/2;var n=Dt(e);me=n.x+n.width/2,ve=n.y+n.height/2;var r=me-_e,a=ve-ye,i=Math.sqrt(r*r+a*a),o=Math.atan2(a,r)+be;me=i*Math.cos(o)+_e,ve=i*Math.sin(o)+ye;for(var s=e.pathSegList,l=s.numberOfItems;l;){l-=1;var c=s.getItem(l),u=c.pathSegType;if(1!==u){var d=it(c.x,c.y),h=[d.x,d.y];if(!an(c.x1)&&!an(c.x2)){var f=it(c.x1,c.y1),p=it(c.x2,c.y2);h.splice(h.length,0,f.x,f.y,p.x,p.y)}$e(u,l,h)}}Dt(e);var g=Ue.getSVGRoot().createSVGTransform(),m=$(e);g.setRotate(180*be/Math.PI,me,ve),m.replaceItem(g,0)}},st=[0,"z","M","m","L","l","C","c","Q","q","A","a","H","h","V","v","S","s","T","t"],lt=function(e,t){for(var n=e.pathSegList,r=n.numberOfItems,a=0,i=0,o="",s=null,l=0;l=C-w&&g<=C+w&&m>=A-w&&m<=A+w){S=!0;break}}a=Ue.getId(),at(a);var E,G,P=Jt(a),I=b.numberOfItems;if(S){if(x<=1&&I>=2){var N=b.getItem(0).x,T=b.getItem(0).y;E=4===(G=v.pathSegList.getItem(1)).pathSegType?y.createSVGPathSegLinetoAbs(N,T):y.createSVGPathSegCurvetoCubicAbs(N,T,G.x1/f,G.y1/f,N,T);var L=y.createSVGPathSegClosePath();b.appendItem(E),b.appendItem(L)}else if(I<3)return!1;if(Le(v).remove(),Ue.setDrawnPath(null),Ue.setStarted(!1),ht){De.matrix&&Ue.remapElement(P,{},De.matrix.inverse());var M=P.getAttribute("d"),O=Le(De.elem).attr("d");return Le(De.elem).attr("d",O+M),Le(P).remove(),De.matrix&&ot(),Fe(),gt.toEditMode(De.elem),De.selectPt(),!1}}else{if(!Le.contains(Ue.getContainer(),Ue.getMouseTarget(e)))return!1;var j=y.pathSegList.numberOfItems,V=y.pathSegList.getItem(j-1),R=V.x,B=V.y;if(e.shiftKey){var D=Ne(R,B,g,m);g=D.x,m=D.y}E=4===(G=v.pathSegList.getItem(1)).pathSegType?y.createSVGPathSegLinetoAbs(Ue.round(g),Ue.round(m)):y.createSVGPathSegCurvetoCubicAbs(Ue.round(g),Ue.round(m),G.x1/f,G.y1/f,G.x2/f,G.y2/f),y.pathSegList.appendItem(E),g*=f,m*=f,v.setAttribute("d",["M",g,m,g,m].join(" ")),_=j,ht&&(_+=De.segs.length),We(_,g,m)}}else{var U="M"+g+","+m+" ";Ue.setDrawnPath(Ue.addSVGElementFromJson({element:"path",curStyles:!0,attr:{d:U,id:Ue.getNextId(),opacity:Ue.getOpacity()/2}})),v.setAttribute("d",["M",d,h,d,h].join(" ")),_=ht?De.segs.length:0,We(_,d,h)}}},mouseMove:function(e,t){var n=Ue.getCurrentZoom();pt=!0;var r=Ue.getDrawnPath();if("path"!==Ue.getCurrentMode())if(De.dragging){var a=Ye({x:De.dragging[0],y:De.dragging[1]},De),i=Ye({x:e,y:t},De),o=i.x-a.x,s=i.y-a.y;De.dragging=[e,t],De.dragctrl?De.moveCtrl(o,s):De.movePts(o,s)}else De.selected_pts=[],De.eachSeg((function(e){if(this.next||this.prev){var t=Ue.getRubberBox().getBBox(),n=qe(this),r={x:n.x,y:n.y,width:0,height:0},a=Te(t,r);this.select(a),a&&De.selected_pts.push(this.index)}}));else{if(!r)return;var l=r.pathSegList,c=l.numberOfItems-1;if(ut){var u=Qe("1c1"),d=Qe("0c2");u.setAttribute("cx",e),u.setAttribute("cy",t),u.setAttribute("display","inline");var h=ut[0],f=ut[1],p=h+(h-e/n),g=f+(f-t/n);d.setAttribute("cx",p*n),d.setAttribute("cy",g*n),d.setAttribute("display","inline");var m=Ke(1);if(en(m,{x1:e,y1:t,x2:p*n,y2:g*n,display:"inline"}),0===c)dt=[e,t];else{var v=l.getItem(c-1),_=v.x,y=v.y;6===v.pathSegType?(_+=_-v.x2,y+=y-v.y2):dt&&(_=dt[0]/n,y=dt[1]/n),$e(6,c,[h,f,_,y,p,g],r)}}else{var b=Jt("path_stretch_line");if(b){var x=l.getItem(c);if(6===x.pathSegType){var w=x.x+(x.x-x.x2),S=x.y+(x.y-x.y2);$e(6,1,[e,t,w*n,S*n,e,t],b)}else dt?$e(6,1,[e,t,dt[0],dt[1],e,t],b):$e(4,1,[e,t],b)}}}},mouseUp:function(e,t,n,r){var a=Ue.getDrawnPath();if("path"===Ue.getCurrentMode())return ut=null,a||(t=Jt(Ue.getId()),Ue.setStarted(!1),dt=null),{keep:!0,element:t};var i=Ue.getRubberBox();if(De.dragging){var o=De.cur_pt;De.dragging=!1,De.dragctrl=!1,De.update(),pt&&De.endChanges("Move path point(s)"),e.shiftKey||pt||De.selectPt(o)}else i&&"none"!==i.getAttribute("display")?(i.setAttribute("display","none"),i.getAttribute("width")<=2&&i.getAttribute("height")<=2&>.toSelectMode(e.target)):gt.toSelectMode(e.target);pt=!1},toEditMode:function(e){De=rt(e),Ue.setCurrentMode("pathedit"),Ue.clearSelection(),De.show(!0).update(),De.oldbbox=Dt(De.elem),ht=!1},toSelectMode:function(e){var t=e===De.elem;Ue.setCurrentMode("select"),De.show(!1),ft=!1,Ue.clearSelection(),De.matrix&&ot(),t&&(Ue.call("selected",[e]),Ue.addToSelection([e],!0))},addSubPath:function(e){e?(Ue.setCurrentMode("path"),ht=!0):(gt.clear(!0),gt.toEditMode(De.elem))},select:function(e){ft===e?(gt.toEditMode(e),Ue.setCurrentMode("pathedit")):ft=e},reorient:function(){var e=Ue.getSelectedElements()[0];if(e&&0!==Zt(e)){var t=new ge("Reorient path"),n={d:e.getAttribute("d"),transform:e.getAttribute("transform")};t.addSubCommand(new pe(e,n)),Ue.clearSelection(),this.resetOrientation(e),Ue.addCommandToHistory(t),rt(e).show(!1).matrix=null,this.clear(),Ue.addToSelection([e],!0),Ue.call("changed",Ue.getSelectedElements())}},clear:function(e){var t=Ue.getDrawnPath();if(ft=null,t){var n=Jt(Ue.getId());Le(Jt("path_stretch_line")).remove(),Le(n).remove(),Le(Jt("pathpointgrip_container")).find("*").attr("display","none"),dt=null,Ue.setDrawnPath(null),Ue.setStarted(!1)}else"pathedit"===Ue.getCurrentMode()&&this.toSelectMode();De&&De.init().show(!1)},resetOrientation:function(e){if(an(e)||"path"!==e.nodeName)return!1;var t=$(e),n=Pe(t).matrix;t.clear(),e.removeAttribute("transform");for(var r=e.pathSegList,a=r.numberOfItems,i=function(t){var a=r.getItem(t),i=a.pathSegType;if(1===i)return"continue";var o=[];Le.each(["",1,2],(function(e,t){var r=a["x"+t],i=a["y"+t];if(void 0!==r&&void 0!==i){var s=ke(r,i,n);o.splice(o.length,0,s.x,s.y)}})),$e(i,t,o,e)},o=0;o0){var s=t.getItem(n-1).pathSegType;if(2===s){r(n-1,1),e();break}if(1===s&&t.numberOfItems-1===n){r(n,1),e();break}}}return!1}(),De.elem.pathSegList.numberOfItems<=1)return gt.toSelectMode(De.elem),void Ue.canvas.deleteSelectedElements();if(De.init(),De.clearSelection(),window.opera){var r=Le(De.elem);r.attr("d",r.attr("d"))}De.endChanges("Delete path node(s)")}},smoothPolylineIntoPath:function(e){var t,n=e.points,r=n.numberOfItems;if(r>=4){var a=n.getItem(0),i=null,o=[];for(o.push(["M",a.x,",",a.y," C"].join("")),t=1;t<=r-4;t+=3){var s=n.getItem(t),l=n.getItem(t+1),c=n.getItem(t+2);if(i){var u=et(i,s,a);if(u&&2===u.length){var d=o[o.length-1].split(",");d[2]=u[0].x,d[3]=u[0].y,o[o.length-1]=d.join(","),s=u[1]}}o.push([s.x,s.y,l.x,l.y,c.x,c.y].join(",")),a=c,i=l}for(o.push("L");t)/,"$1$2")},kt=function(e){return e.replace(/&/g,"&").replace(//g,">").replace(/"/g,""").replace(/'/g,"'")};function Ct(e){if(e=Gt(e),window.btoa)return window.btoa(e);var t=new Array(4*Math.floor((e.length+2)/3)),n=0,r=0;do{var a=e.charCodeAt(n++),i=e.charCodeAt(n++),o=e.charCodeAt(n++),s=a>>2,l=(3&a)<<4|i>>4,c=(15&i)<<2|o>>6,u=63&o;isNaN(i)?(c=64,u=64):isNaN(o)&&(u=64),t[r++]=vt.charAt(s),t[r++]=vt.charAt(l),t[r++]=vt.charAt(c),t[r++]=vt.charAt(u)}while(n>4,l=(15&a)<<4|i>>2,c=(3&i)<<6|o;t+=String.fromCharCode(s),64!==i&&(t+=String.fromCharCode(l)),64!==o&&(t+=String.fromCharCode(c))}while(nSVG-edit "],{type:"text/html"});return It(e)}(),Tt=function(e){var t,n;e.includes("0?t=t[0]:(t=e.ownerDocument.createElementNS(p.SVG,"defs"),e.firstChild?e.insertBefore(t,e.firstChild.nextSibling):e.append(t)),t},Rt=function(e){for(var t=e.pathSegList,n=t.numberOfItems,r=[[],[]],a=t.getItem(0),i=[a.x,a.y],o=function(e,t,n,r){return function(a){return 1-Math.pow(a,3)*i[e]+3-Math.pow(a,2)*a*t[e]+3*(1-a)*Math.pow(a,2)*n[e]+Math.pow(a,3)*r[e]}},s=0;s0&&_<1&&r[h].push(f(_));var y=(-p-Math.sqrt(v))/(2*g);y>0&&y<1&&r[h].push(f(y))}}else{if(0===p)continue;var b=-m/p;b>0&&b<1&&r[h].push(f(b))}}i=d}else r[0].push(l.x),r[1].push(l.y)}var x=Math.min.apply(null,r[0]),w=Math.max.apply(null,r[0])-x,S=Math.min.apply(null,r[1]);return{x:x,y:S,width:w,height:Math.max.apply(null,r[1])-S}};function Bt(e){if(H())try{return e.getBBox()}catch(e){}var t,n,r=mt.data(e,"ref"),a=null;r?(n=mt(r).children().clone().attr("visibility","hidden"),mt(wt).append(n),a=n.filter("line, path")):a=mt(e).find("line, path");var i=!1;if(a.length)if(a.each((function(){var e=this.getBBox();e.width&&e.height||(i=!0)})),i){var o=r?n:mt(e).children();t=Wt(o)}else t=e.getBBox();else t=e.getBBox();return r&&n.remove(),t}var Dt=function(e){var t=e||yt.geSelectedElements()[0];if(1!==e.nodeType)return null;var n,r=t.nodeName,a=null;switch(r){case"text":""===t.textContent?(t.textContent="a",a=t.getBBox(),t.textContent=""):t.getBBox&&(a=t.getBBox());break;case"path":T?t.getBBox&&(a=t.getBBox()):a=Rt(t);break;case"g":case"a":a=Bt(t);break;default:if("use"===r&&(a=Bt(t)),"use"===r||"foreignObject"===r&&V()){if(a||(a=t.getBBox()),!V()){var i=a,o=i.x,s=i.y;a={width:i.width,height:i.height,x:o+parseFloat(t.getAttribute("x")||0),y:s+parseFloat(t.getAttribute("y")||0)}}}else if(_t.includes(r))if(t)try{a=t.getBBox()}catch(e){var l=t.getExtentOfChar(0),c=t.getComputedTextLength();a={x:l.x,y:l.y,width:c,height:l.height}}else{var u=mt(t).closest("foreignObject");u.length&&u[0].getBBox&&(a=u[0].getBBox())}}return a&&(a={x:(n=a).x,y:n.y,width:n.width,height:n.height}),a},Ut=function(e){var t="";return mt.each(e,(function(e,n){var r=d(n,2),a=r[0],i=r[1];t+=a;for(var o=0;o-.001&&n<.001||(n<-89.99||n>89.99))}(i,o)){if(["ellipse","path","line","polyline","polygon"].includes(e.tagName))r=s=zt(e,t,n);else if("rect"===e.tagName){var l=e.getAttribute("rx"),c=e.getAttribute("ry");(l||c)&&(r=s=zt(e,t,n))}}if(!s){var u=Pe(a).matrix;r=Ge(r.x,r.y,r.width,r.height,u).aabox}}return r};function Yt(e){var t=e.getAttribute("stroke-width");return isNaN(t)||"none"===e.getAttribute("stroke")?0:t/2}var Wt=function(e,t,n){if(!e||!e.length)return!1;var r;if(mt.each(e,(function(){r||this.parentNode&&(r=qt(this,t,n))})),void 0===r)return null;var a=r.x+r.width,i=r.y+r.height,o=r.x,s=r.y;if(1===e.length){var l=Yt(e[0]);o-=l,s-=l,a+=l,i+=l}else mt.each(e,(function(e,r){var l=qt(r,t,n);if(l){var c=Yt(r);o=Math.min(o,l.x-c),s=Math.min(s,l.y-c),1===r.nodeType&&(a=Math.max(a,l.x+l.width+c),i=Math.max(i,l.y+l.height+c))}}));return r.x=o,r.y=s,r.width=a-o,r.height=i-s,r},Xt=function(e){e||(e=mt(yt.getSVGContent()).children());var t=[];return mt(e).children().each((function(e,n){n.getBBox&&t.push(n)})),t.reverse()},Qt=function(e){return e||(e=Xt()),Wt(e,yt.addSVGElementFromJson,yt.pathActions)},Kt=function(e,t){if(!e)return 0;for(var n=e.numberOfItems,r=0;r");var t=e.shortcut||"";on("#cmenu_canvas").append(""+e.label+""+t+" =0)return this._xforms[e];var t=new Error("DOMException with code=INDEX_SIZE_ERR");throw t.code=1,t}},{key:"insertItemBefore",value:function(e,t){var n=null;if(t>=0)if(t=0&&(this._removeFromOtherLists(e),this._xforms[t]=e,n=e,this._list._update()),n}},{key:"removeItem",value:function(e){if(e=0){var t,n=this._xforms[e],r=new Array(this.numberOfItems-1);for(t=0;t=0;t--)this.stack[t].unapply(e);e&&e.handleHistoryEvent(se.AFTER_UNAPPLY,this)}},{key:"elements",value:function(){for(var e=[],t=this.stack.length;t--;)for(var n=this.stack[t].elements(),r=n.length;r--;)e.includes(n[r])||e.push(n[r]);return e}},{key:"addSubCommand",value:function(e){this.stack.push(e)}},{key:"isEmpty",value:function(){return!this.stack.length}}]),t}(le);fe.type=fe.prototype.type;var pe,ge,me,ve,ye,_e=function(){function e(t){r(this,e),this.handler_=t||null,this.undoStackPointer=0,this.undoStack=[],this.undoChangeStackPointer=-1,this.undoableChangeStack=[]}return i(e,[{key:"resetUndoStack",value:function(){this.undoStack=[],this.undoStackPointer=0}},{key:"getUndoStackSize",value:function(){return this.undoStackPointer}},{key:"getRedoStackSize",value:function(){return this.undoStack.length-this.undoStackPointer}},{key:"getNextUndoCommandText",value:function(){return this.undoStackPointer>0?this.undoStack[this.undoStackPointer-1].getText():""}},{key:"getNextRedoCommandText",value:function(){return this.undoStackPointer0&&this.undoStack[--this.undoStackPointer].unapply(this.handler_)}},{key:"redo",value:function(){this.undoStackPointer0&&this.undoStack[this.undoStackPointer++].apply(this.handler_)}},{key:"addCommandToHistory",value:function(e){this.undoStackPointer0&&(this.undoStack=this.undoStack.splice(0,this.undoStackPointer)),this.undoStack.push(e),this.undoStackPointer=this.undoStack.length}},{key:"beginUndoableChange",value:function(e,t){for(var n=++this.undoChangeStackPointer,r=t.length,a=new Array(r),i=new Array(r);r--;){var o=t[r];nn(o)||(i[r]=o,a[r]=o.getAttribute(e))}this.undoableChangeStack[n]={attrName:e,oldValues:a,elements:i}}},{key:"finishUndoableChange",value:function(){for(var e=this.undoChangeStackPointer--,t=this.undoableChangeStack[e],n=t.attrName,r=new fe("Change "+n),a=t.elements.length;a--;){var i=t.elements[a];if(!nn(i)){var o={};o[n]=t.oldValues[a],o[n]!==i.getAttribute(n)&&r.addSubCommand(new he(i,o,n))}}return this.undoableChangeStack[e]=null,r}}]),e}(),be=Object.freeze({__proto__:null,HistoryEventTypes:se,MoveElementCommand:ce,InsertElementCommand:ue,RemoveElementCommand:de,ChangeElementCommand:he,BatchCommand:fe,UndoManager:_e}),xe=document.createElementNS(p.SVG,"svg"),we=function(e,t,n){return{x:n.a*e+n.c*t+n.e,y:n.b*e+n.d*t+n.f}},Se=function(e){return 1===e.a&&0===e.b&&0===e.c&&1===e.d&&0===e.e&&0===e.f},ke=function(){for(var e=arguments.length,t=new Array(e),n=0;n(n=parseInt(n))){var r=n;n=t,t=r}for(var a=xe.createSVGMatrix(),i=t;i<=n;++i){var o=i>=0&&ie.x&&t.ye.y},Te=jQuery,Ne={2:["x","y"],4:["x","y"],6:["x","y","x1","y1","x2","y2"],8:["x","y","x1","y1"],10:["x","y","r1","r2","angle","largeArcFlag","sweepFlag"],12:["x"],14:["y"],16:["x","y","x2","y2"],18:["x","y"]},Le={},Me=function(e){Object.assign(Le,e.ui)},Oe=[],je=!0,Ve={},Re=null,Be=null,Ue=function(e){Be=e,Oe=[0,"ClosePath"];Te.each(["Moveto","Lineto","CurvetoCubic","CurvetoQuadratic","Arc","LinetoHorizontal","LinetoVertical","CurvetoCubicSmooth","CurvetoQuadraticSmooth"],(function(e,t){Oe.push(t+"Abs"),Oe.push(t+"Rel")}))},Fe=function(e,t,n){var r=e.pathSegList;if(I)r.insertItemBefore(t,n);else{for(var a=r.numberOfItems,i=[],o=0;o0?(f=g element");this.elem=t,this.segs=[],this.selected_pts=[],Re=this,this.init()}return i(e,[{key:"init",value:function(){Te(Ye()).find("*").each((function(){Te(this).attr("display","none")}));var e=this.elem.pathSegList,t=e.numberOfItems;this.segs=[],this.selected_pts=[],this.first_seg=null;for(var n=0;n=t?null:i[s+1],u=s-1<0?null:i[s-1];if(2===l.type){if(u&&1!==u.type){var d=i[o];d.next=i[o+1],d.next.prev=d,d.addGrip()}o=s}else if(c&&1===c.type)l.next=i[o+1],l.next.prev=l,l.mate=i[o],l.addGrip(),nn(this.first_seg)&&(this.first_seg=l);else if(c)1!==l.type&&(l.addGrip(),c&&2!==c.type&&(l.next=c,l.next.prev=l));else if(1!==l.type){var h=i[o];h.next=i[o+1],h.next.prev=h,h.addGrip(),l.addGrip(),this.first_seg||(this.first_seg=i[o])}}return this}},{key:"eachSeg",value:function(e){for(var t=this.segs.length,n=0;n=0&&n.selected_pts.push(e)})),this.selected_pts.sort();var r=this.selected_pts.length,a=[];for(a.length=r;r--;){var i=this.selected_pts[r],o=this.segs[i];o.select(!0),a[r]=o.ptgrip}var s=e.subpathIsClosed(this.selected_pts[0]);Be.addPtsToSelection({grips:a,closedSubpath:s})}}],[{key:"subpathIsClosed",value:function(e){var t=!1;return Re.eachSeg((function(n){return n<=e||2!==this.type&&(1!==this.type||(t=!0,!1))})),t}}]),e}(),tt=function(e){var t=Ve[e.id];return t||(t=Ve[e.id]=new et(e)),t},nt=function(e){e in Ve&&delete Ve[e]},rt=function(e,t){var n=e-me,r=t-ve,a=Math.sqrt(n*n+r*r),i=Math.atan2(r,n)+ye;return n=a*Math.cos(i)+me,r=a*Math.sin(i)+ve,n-=pe,r-=ge,a=Math.sqrt(n*n+r*r),i=Math.atan2(r,n)-ye,{x:a*Math.cos(i)+pe,y:a*Math.sin(i)+ge}},at=function(){var e=Re.elem;if(ye=Qt(e,!0)){var t=Re.oldbbox;me=t.x+t.width/2,ve=t.y+t.height/2;var n=Rt(e);pe=n.x+n.width/2,ge=n.y+n.height/2;var r=pe-me,a=ge-ve,i=Math.sqrt(r*r+a*a),o=Math.atan2(a,r)+ye;pe=i*Math.cos(o)+me,ge=i*Math.sin(o)+ve;for(var s=e.pathSegList,l=s.numberOfItems;l;){l-=1;var c=s.getItem(l),u=c.pathSegType;if(1!==u){var d=rt(c.x,c.y),h=[d.x,d.y];if(!nn(c.x1)&&!nn(c.x2)){var f=rt(c.x1,c.y1),p=rt(c.x2,c.y2);h.splice(h.length,0,f.x,f.y,p.x,p.y)}Ke(u,l,h)}}Rt(e);var g=Be.getSVGRoot().createSVGTransform(),m=K(e);g.setRotate(180*ye/Math.PI,pe,ge),m.replaceItem(g,0)}},it=[0,"z","M","m","L","l","C","c","Q","q","A","a","H","h","V","v","S","s","T","t"],ot=function(e,t){for(var n=e.pathSegList,r=n.numberOfItems,a=0,i=0,o="",s=null,l=0;l=C-w&&g<=C+w&&m>=A-w&&m<=A+w){S=!0;break}}a=Be.getId(),nt(a);var E,G,P=Zt(a),I=b.numberOfItems;if(S){if(x<=1&&I>=2){var T=b.getItem(0).x,N=b.getItem(0).y;E=4===(G=v.pathSegList.getItem(1)).pathSegType?_.createSVGPathSegLinetoAbs(T,N):_.createSVGPathSegCurvetoCubicAbs(T,N,G.x1/f,G.y1/f,T,N);var L=_.createSVGPathSegClosePath();b.appendItem(E),b.appendItem(L)}else if(I<3)return!1;if(Te(v).remove(),Be.setDrawnPath(null),Be.setStarted(!1),ut){Re.matrix&&Be.remapElement(P,{},Re.matrix.inverse());var M=P.getAttribute("d"),O=Te(Re.elem).attr("d");return Te(Re.elem).attr("d",O+M),Te(P).remove(),Re.matrix&&at(),Ue(),ft.toEditMode(Re.elem),Re.selectPt(),!1}}else{if(!Te.contains(Be.getContainer(),Be.getMouseTarget(e)))return!1;var j=_.pathSegList.numberOfItems,V=_.pathSegList.getItem(j-1),R=V.x,B=V.y;if(e.shiftKey){var U=Pe(R,B,g,m);g=U.x,m=U.y}E=4===(G=v.pathSegList.getItem(1)).pathSegType?_.createSVGPathSegLinetoAbs(Be.round(g),Be.round(m)):_.createSVGPathSegCurvetoCubicAbs(Be.round(g),Be.round(m),G.x1/f,G.y1/f,G.x2/f,G.y2/f),_.pathSegList.appendItem(E),g*=f,m*=f,v.setAttribute("d",["M",g,m,g,m].join(" ")),y=j,ut&&(y+=Re.segs.length),qe(y,g,m)}}else{var F="M"+g+","+m+" ";Be.setDrawnPath(Be.addSVGElementFromJson({element:"path",curStyles:!0,attr:{d:F,id:Be.getNextId(),opacity:Be.getOpacity()/2}})),v.setAttribute("d",["M",d,h,d,h].join(" ")),y=ut?Re.segs.length:0,qe(y,d,h)}}},mouseMove:function(e,t){var n=Be.getCurrentZoom();ht=!0;var r=Be.getDrawnPath();if("path"!==Be.getCurrentMode())if(Re.dragging){var a=ze({x:Re.dragging[0],y:Re.dragging[1]},Re),i=ze({x:e,y:t},Re),o=i.x-a.x,s=i.y-a.y;Re.dragging=[e,t],Re.dragctrl?Re.moveCtrl(o,s):Re.movePts(o,s)}else Re.selected_pts=[],Re.eachSeg((function(e){if(this.next||this.prev){var t=Be.getRubberBox().getBBox(),n=He(this),r={x:n.x,y:n.y,width:0,height:0},a=Ie(t,r);this.select(a),a&&Re.selected_pts.push(this.index)}}));else{if(!r)return;var l=r.pathSegList,c=l.numberOfItems-1;if(lt){var u=Xe("1c1"),d=Xe("0c2");u.setAttribute("cx",e),u.setAttribute("cy",t),u.setAttribute("display","inline");var h=lt[0],f=lt[1],p=h+(h-e/n),g=f+(f-t/n);d.setAttribute("cx",p*n),d.setAttribute("cy",g*n),d.setAttribute("display","inline");var m=We(1);if($t(m,{x1:e,y1:t,x2:p*n,y2:g*n,display:"inline"}),0===c)ct=[e,t];else{var v=l.getItem(c-1),y=v.x,_=v.y;6===v.pathSegType?(y+=y-v.x2,_+=_-v.y2):ct&&(y=ct[0]/n,_=ct[1]/n),Ke(6,c,[h,f,y,_,p,g],r)}}else{var b=Zt("path_stretch_line");if(b){var x=l.getItem(c);if(6===x.pathSegType){var w=x.x+(x.x-x.x2),S=x.y+(x.y-x.y2);Ke(6,1,[e,t,w*n,S*n,e,t],b)}else ct?Ke(6,1,[e,t,ct[0],ct[1],e,t],b):Ke(4,1,[e,t],b)}}}},mouseUp:function(e,t,n,r){var a=Be.getDrawnPath();if("path"===Be.getCurrentMode())return lt=null,a||(t=Zt(Be.getId()),Be.setStarted(!1),ct=null),{keep:!0,element:t};var i=Be.getRubberBox();if(Re.dragging){var o=Re.cur_pt;Re.dragging=!1,Re.dragctrl=!1,Re.update(),ht&&Re.endChanges("Move path point(s)"),e.shiftKey||ht||Re.selectPt(o)}else i&&"none"!==i.getAttribute("display")?(i.setAttribute("display","none"),i.getAttribute("width")<=2&&i.getAttribute("height")<=2&&ft.toSelectMode(e.target)):ft.toSelectMode(e.target);ht=!1},toEditMode:function(e){Re=tt(e),Be.setCurrentMode("pathedit"),Be.clearSelection(),Re.show(!0).update(),Re.oldbbox=Rt(Re.elem),ut=!1},toSelectMode:function(e){var t=e===Re.elem;Be.setCurrentMode("select"),Re.show(!1),dt=!1,Be.clearSelection(),Re.matrix&&at(),t&&(Be.call("selected",[e]),Be.addToSelection([e],!0))},addSubPath:function(e){e?(Be.setCurrentMode("path"),ut=!0):(ft.clear(!0),ft.toEditMode(Re.elem))},select:function(e){dt===e?(ft.toEditMode(e),Be.setCurrentMode("pathedit")):dt=e},reorient:function(){var e=Be.getSelectedElements()[0];if(e&&0!==Qt(e)){var t=new fe("Reorient path"),n={d:e.getAttribute("d"),transform:e.getAttribute("transform")};t.addSubCommand(new he(e,n)),Be.clearSelection(),this.resetOrientation(e),Be.addCommandToHistory(t),tt(e).show(!1).matrix=null,this.clear(),Be.addToSelection([e],!0),Be.call("changed",Be.getSelectedElements())}},clear:function(e){var t=Be.getDrawnPath();if(dt=null,t){var n=Zt(Be.getId());Te(Zt("path_stretch_line")).remove(),Te(n).remove(),Te(Zt("pathpointgrip_container")).find("*").attr("display","none"),ct=null,Be.setDrawnPath(null),Be.setStarted(!1)}else"pathedit"===Be.getCurrentMode()&&this.toSelectMode();Re&&Re.init().show(!1)},resetOrientation:function(e){if(nn(e)||"path"!==e.nodeName)return!1;var t=K(e),n=Ee(t).matrix;t.clear(),e.removeAttribute("transform");for(var r=e.pathSegList,a=r.numberOfItems,i=function(t){var a=r.getItem(t),i=a.pathSegType;if(1===i)return"continue";var o=[];Te.each(["",1,2],(function(e,t){var r=a["x"+t],i=a["y"+t];if(void 0!==r&&void 0!==i){var s=we(r,i,n);o.splice(o.length,0,s.x,s.y)}})),Ke(i,t,o,e)},o=0;o0){var s=t.getItem(n-1).pathSegType;if(2===s){r(n-1,1),e();break}if(1===s&&t.numberOfItems-1===n){r(n,1),e();break}}}return!1}(),Re.elem.pathSegList.numberOfItems<=1)return ft.toSelectMode(Re.elem),void Be.canvas.deleteSelectedElements();if(Re.init(),Re.clearSelection(),window.opera){var r=Te(Re.elem);r.attr("d",r.attr("d"))}Re.endChanges("Delete path node(s)")}},smoothPolylineIntoPath:function(e){var t,n=e.points,r=n.numberOfItems;if(r>=4){var a=n.getItem(0),i=null,o=[];for(o.push(["M",a.x,",",a.y," C"].join("")),t=1;t<=r-4;t+=3){var s=n.getItem(t),l=n.getItem(t+1),c=n.getItem(t+2);if(i){var u=$e(i,s,a);if(u&&2===u.length){var d=o[o.length-1].split(",");d[2]=u[0].x,d[3]=u[0].y,o[o.length-1]=d.join(","),s=u[1]}}o.push([s.x,s.y,l.x,l.y,c.x,c.y].join(",")),a=c,i=l}for(o.push("L");t)/,"$1$2")},wt=function(e){return e.replace(/&/g,"&").replace(//g,">").replace(/"/g,""").replace(/'/g,"'")};function St(e){if(e=At(e),window.btoa)return window.btoa(e);var t=new Array(4*Math.floor((e.length+2)/3)),n=0,r=0;do{var a=e.charCodeAt(n++),i=e.charCodeAt(n++),o=e.charCodeAt(n++),s=a>>2,l=(3&a)<<4|i>>4,c=(15&i)<<2|o>>6,u=63&o;isNaN(i)?(c=64,u=64):isNaN(o)&&(u=64),t[r++]=gt.charAt(s),t[r++]=gt.charAt(l),t[r++]=gt.charAt(c),t[r++]=gt.charAt(u)}while(n>4,l=(15&a)<<4|i>>2,c=(3&i)<<6|o;t+=String.fromCharCode(s),64!==i&&(t+=String.fromCharCode(l)),64!==o&&(t+=String.fromCharCode(c))}while(nSVG-edit "],{type:"text/html"});return Gt(e)}(),It=function(e){var t,n;e.includes("0?t=t[0]:(t=e.ownerDocument.createElementNS(p.SVG,"defs"),e.firstChild?e.insertBefore(t,e.firstChild.nextSibling):e.append(t)),t},jt=function(e){for(var t=e.pathSegList,n=t.numberOfItems,r=[[],[]],a=t.getItem(0),i=[a.x,a.y],o=function(e,t,n,r){return function(a){return 1-Math.pow(a,3)*i[e]+3-Math.pow(a,2)*a*t[e]+3*(1-a)*Math.pow(a,2)*n[e]+Math.pow(a,3)*r[e]}},s=0;s0&&y<1&&r[h].push(f(y));var _=(-p-Math.sqrt(v))/(2*g);_>0&&_<1&&r[h].push(f(_))}}else{if(0===p)continue;var b=-m/p;b>0&&b<1&&r[h].push(f(b))}}i=d}else r[0].push(l.x),r[1].push(l.y)}var x=Math.min.apply(null,r[0]),w=Math.max.apply(null,r[0])-x,S=Math.min.apply(null,r[1]);return{x:x,y:S,width:w,height:Math.max.apply(null,r[1])-S}};function Vt(e){if(L)try{return e.getBBox()}catch(e){}var t,n,r=pt.data(e,"ref"),a=null;r?(n=pt(r).children().clone().attr("visibility","hidden"),pt(bt).append(n),a=n.filter("line, path")):a=pt(e).find("line, path");var i=!1;if(a.length)if(a.each((function(){var e=this.getBBox();e.width&&e.height||(i=!0)})),i){var o=r?n:pt(e).children();t=qt(o)}else t=e.getBBox();else t=e.getBBox();return r&&n.remove(),t}var Rt=function(e){var t=e||vt.geSelectedElements()[0];if(1!==e.nodeType)return null;var n,r=t.nodeName,a=null;switch(r){case"text":""===t.textContent?(t.textContent="a",a=t.getBBox(),t.textContent=""):t.getBBox&&(a=t.getBBox());break;case"path":N?t.getBBox&&(a=t.getBBox()):a=jt(t);break;case"g":case"a":a=Vt(t);break;default:if("use"===r&&(a=Vt(t)),"use"===r||"foreignObject"===r&&j()){if(a||(a=t.getBBox()),!j()){var i=a,o=i.x,s=i.y;a={width:i.width,height:i.height,x:o+parseFloat(t.getAttribute("x")||0),y:s+parseFloat(t.getAttribute("y")||0)}}}else if(mt.includes(r))if(t)try{a=t.getBBox()}catch(e){var l=t.getExtentOfChar(0),c=t.getComputedTextLength();a={x:l.x,y:l.y,width:c,height:l.height}}else{var u=pt(t).closest("foreignObject");u.length&&u[0].getBBox&&(a=u[0].getBBox())}}return a&&(a={x:(n=a).x,y:n.y,width:n.width,height:n.height}),a},Bt=function(e){var t="";return pt.each(e,(function(e,n){var r=d(n,2),a=r[0],i=r[1];t+=a;for(var o=0;o-.001&&n<.001||(n<-89.99||n>89.99))}(i,o)){if(["ellipse","path","line","polyline","polygon"].includes(e.tagName))r=s=Dt(e,t,n);else if("rect"===e.tagName){var l=e.getAttribute("rx"),c=e.getAttribute("ry");(l||c)&&(r=s=Dt(e,t,n))}}if(!s){var u=Ee(a).matrix;r=Ae(r.x,r.y,r.width,r.height,u).aabox}}return r};function zt(e){var t=e.getAttribute("stroke-width");return isNaN(t)||"none"===e.getAttribute("stroke")?0:t/2}var qt=function(e,t,n){if(!e||!e.length)return!1;var r;if(pt.each(e,(function(){r||this.parentNode&&(r=Ht(this,t,n))})),void 0===r)return null;var a=r.x+r.width,i=r.y+r.height,o=r.x,s=r.y;if(1===e.length){var l=zt(e[0]);o-=l,s-=l,a+=l,i+=l}else pt.each(e,(function(e,r){var l=Ht(r,t,n);if(l){var c=zt(r);o=Math.min(o,l.x-c),s=Math.min(s,l.y-c),1===r.nodeType&&(a=Math.max(a,l.x+l.width+c),i=Math.max(i,l.y+l.height+c))}}));return r.x=o,r.y=s,r.width=a-o,r.height=i-s,r},Yt=function(e){e||(e=pt(vt.getSVGContent()).children());var t=[];return pt(e).children().each((function(e,n){n.getBBox&&t.push(n)})),t.reverse()},Xt=function(e){return e||(e=Yt()),qt(e,vt.addSVGElementFromJson,vt.pathActions)},Wt=function(e,t){if(!e)return 0;for(var n=e.numberOfItems,r=0;r");var t=e.shortcut||"";rn("#cmenu_canvas").append(""+e.label+""+t+" "+s.replace(/\n/g,"
")+"
").toggleClass("prompt","prompt"===o),a.empty();var h=t('');if(g=t('
')).appendTo(v),d){var _=t("").text(d.label);(m=t('").append(_))}t.each(c||[],(function(n,r){"object"===e(r)?g.append(t("
").val(r.value).html(r.text)):g.append(t(" ").html(r))})),i.append(v),l&&g.val(l),u&&g.bind("change","return",u),g.bind("keydown","return",(function(){h.click()}))}else"process"===o&&h.hide();r.show(),h.click((function(){r.hide();var e="prompt"!==o&&"select"!==o||g.val();f(m?{response:e,checked:m.prop("checked")}:e)})).focus(),"prompt"!==o&&"select"!==o||g.focus()}))}return t.alert=function(e){return o("alert",e)},t.confirm=function(e){return o("confirm",e)},t.process_cancel=function(e){return o("process",e)},t.prompt=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"";return o("prompt",e,t)},t.select=function(e,t,n,r,a){return o("select",e,r,t,n,a)},t}var vn=jQuery,_n=function(){function e(t,n,a){if(r(this,e),this.name_=t,this.group_=a?null:n,a){var i=a.ownerDocument;this.group_=i.createElementNS(p.SVG,"g");var o=i.createElementNS(p.SVG,"title");o.textContent=t,this.group_.append(o),n?vn(n).after(this.group_):a.append(this.group_)}yn(this.group_),Lt(this.group_,(function(e){e.setAttribute("style","pointer-events:inherit")})),this.group_.setAttribute("style",a?"pointer-events:all":"pointer-events:none")}return i(e,[{key:"getName",value:function(){return this.name_}},{key:"getGroup",value:function(){return this.group_}},{key:"activate",value:function(){this.group_.setAttribute("style","pointer-events:all")}},{key:"deactivate",value:function(){this.group_.setAttribute("style","pointer-events:none")}},{key:"setVisible",value:function(e){var t=void 0===e||e?"inline":"none";this.group_.getAttribute("display")!==t&&this.group_.setAttribute("display",t)}},{key:"isVisible",value:function(){return"none"!==this.group_.getAttribute("display")}},{key:"getOpacity",value:function(){var e=this.group_.getAttribute("opacity");return an(e)?1:parseFloat(e)}},{key:"setOpacity",value:function(e){"number"==typeof e&&e>=0&&e<=1&&this.group_.setAttribute("opacity",e)}},{key:"appendChildren",value:function(e){var t=!0,n=!1,r=void 0;try{for(var a,i=e[Symbol.iterator]();!(t=(a=i.next()).done);t=!0){var o=a.value;this.group_.append(o)}}catch(e){n=!0,r=e}finally{try{t||null==i.return||i.return()}finally{if(n)throw r}}}},{key:"getTitleElement",value:function(){for(var e=this.group_.childNodes.length,t=0;t element");this.svgElem_=t,this.obj_num=0,this.idPrefix=n||"svg_",this.releasedNums=[],this.all_layers=[],this.layer_map={},this.current_layer=null,this.nonce_="";var a=this.svgElem_.getAttributeNS(p.SE,"nonce");a&&kn!==Sn.NEVER_RANDOMIZE?this.nonce_=a:kn===Sn.ALWAYS_RANDOMIZE&&this.setNonce(Math.floor(100001*Math.random()))}return i(e,[{key:"getElem_",value:function(e){return this.svgElem_.querySelector?this.svgElem_.querySelector("#"+e):xn(this.svgElem_).find("[id="+e+"]")[0]}},{key:"getSvgElem",value:function(){return this.svgElem_}},{key:"getNonce",value:function(){return this.nonce_}},{key:"setNonce",value:function(e){this.svgElem_.setAttributeNS(p.XMLNS,"xmlns:se",p.SE),this.svgElem_.setAttributeNS(p.SE,"se:nonce",e),this.nonce_=e}},{key:"clearNonce",value:function(){this.nonce_=""}},{key:"getId",value:function(){return this.nonce_?this.idPrefix+this.nonce_+"_"+this.obj_num:this.idPrefix+this.obj_num}},{key:"getNextId",value:function(){var e=this.obj_num,t=!1;this.releasedNums.length>0?(this.obj_num=this.releasedNums.pop(),t=!0):this.obj_num++;for(var n=this.getId();this.getElem_(n);)t&&(this.obj_num=e,t=!1),this.obj_num++,n=this.getId();return t&&(this.obj_num=e),n}},{key:"releaseId",value:function(e){var t=this.idPrefix+(this.nonce_?this.nonce_+"_":"");if("string"!=typeof e||!e.startsWith(t))return!1;var n=parseInt(e.substr(t.length));return!("number"!=typeof n||n<=0||this.releasedNums.includes(n))&&(this.releasedNums.push(n),!0)}},{key:"getNumLayers",value:function(){return this.all_layers.length}},{key:"hasLayer",value:function(e){return void 0!==this.layer_map[e]}},{key:"getLayerName",value:function(e){return e>=0&&e=n)return null;for(t=0;tt?e0){var s=this.current_layer.getName();this.current_layer=this.all_layers[o-1],this.all_layers.splice(o,1),delete this.layer_map[s]}e.endBatchCommand()}}},{key:"mergeAllLayers",value:function(e){for(this.current_layer=this.all_layers[this.all_layers.length-1],e.startBatchCommand("Merge all Layers");this.all_layers.length>1;)this.mergeLayer(e);e.endBatchCommand()}},{key:"setCurrentLayer",value:function(e){var t=this.layer_map[e];return!!t&&(this.current_layer&&this.current_layer.deactivate(),this.current_layer=t,this.current_layer.activate(),!0)}},{key:"deleteCurrentLayer",value:function(){if(this.current_layer&&this.getNumLayers()>1){var e=this.current_layer.removeGroup();return this.identifyLayers(),e}return null}},{key:"identifyLayers",value:function(){this.all_layers=[],this.layer_map={};for(var e,t=this.svgElem_.childNodes.length,n=[],r=[],a=null,i=!1,o=0;o0||!i?((a=new _n(En(r),null,this.svgElem_)).appendChildren(n),this.all_layers.push(a),this.layer_map[name]=a):a.activate(),this.current_layer=a}},{key:"createLayer",value:function(e,t){this.current_layer&&this.current_layer.deactivate(),(null==e||""===e||this.layer_map[e])&&(e=En(Object.keys(this.layer_map)));var n=new _n(e,null,this.svgElem_);return t&&(t.startBatchCommand("Create Layer"),t.insertElement(n.getGroup()),t.endBatchCommand()),this.all_layers.push(n),this.layer_map[e]=n,this.current_layer=n,n.getGroup()}},{key:"cloneLayer",value:function(e,t){var n=this;if(!this.current_layer)return null;this.current_layer.deactivate(),(null==e||""===e||this.layer_map[e])&&(e=En(Object.keys(this.layer_map)));var r=this.current_layer.getGroup(),a=new _n(e,r,this.svgElem_),i=a.getGroup();h(r.childNodes).forEach((function(e){"title"!==e.localName&&i.append(n.copyElem(e))})),t&&(t.startBatchCommand("Duplicate Layer"),t.insertElement(i),t.endBatchCommand());var o=this.all_layers.indexOf(this.current_layer);return o>=0?this.all_layers.splice(o+1,0,a):this.all_layers.push(a),this.layer_map[e]=a,this.current_layer=a,i}},{key:"getLayerVisibility",value:function(e){var t=this.layer_map[e];return!!t&&t.isVisible()}},{key:"setLayerVisibility",value:function(e,t){if("boolean"!=typeof t)return null;var n=this.layer_map[e];return n?(n.setVisible(t),n.getGroup()):null}},{key:"getLayerOpacity",value:function(e){var t=this.layer_map[e];return t?t.getOpacity():null}},{key:"setLayerOpacity",value:function(e,t){if(!("number"!=typeof t||t<0||t>1)){var n=this.layer_map[e];n&&n.setOpacity(t)}}},{key:"copyElem",value:function(e){var t=this;return function e(t,n){var r=document.createElementNS(t.namespaceURI,t.nodeName);if(mt.each(t.attributes,(function(e,t){"-moz-math-font-style"!==t.localName&&r.setAttributeNS(t.namespaceURI,t.nodeName,t.value)})),r.removeAttribute("id"),r.id=n(),V()&&"path"===t.nodeName){var a=lt(t);r.setAttribute("d",a)}if(mt.each(t.childNodes,(function(t,a){switch(a.nodeType){case 1:r.append(e(a,n));break;case 3:r.textContent=a.nodeValue}})),mt(t).data("gsvg"))mt(r).data("gsvg",r.firstChild);else if(mt(t).data("symbol")){var i=mt(t).data("symbol");mt(r).data("ref",i).data("symbol",i)}else"image"===r.tagName&&rn(r);return r}(e,(function(){return t.getNextId()}))}}]),e}(),In=function(e,t){(kn=!1===e?Sn.NEVER_RANDOMIZE:Sn.ALWAYS_RANDOMIZE)!==Sn.ALWAYS_RANDOMIZE||t.getNonce()?kn===Sn.NEVER_RANDOMIZE&&t.getNonce()&&t.clearNonce():t.setNonce(Math.floor(100001*Math.random()))},Nn=function(){Fn(),Gn.getCurrentDrawing().identifyLayers()},Tn=function(e,t){var n=Gn.getCurrentDrawing().createLayer(e,An(t));Gn.clearSelection(),Gn.call("changed",[n])},Ln=function(e,t){var n=Gn.getCurrentDrawing().cloneLayer(e,An(t));Gn.clearSelection(),Fn(),Gn.call("changed",[n])},Mn=function(){var e=Gn.getCurrentDrawing().getCurrentLayer(),t=e.nextSibling,n=e.parentNode;if(e=Gn.getCurrentDrawing().deleteCurrentLayer()){var r=new ge("Delete Layer");return r.addSubCommand(new fe(e,t,n)),Gn.addCommandToHistory(r),Gn.clearSelection(),Gn.call("changed",[n]),!0}return!1},On=function(e){var t=Gn.getCurrentDrawing().setCurrentLayer(kt(e));return t&&Gn.clearSelection(),t},jn=function(e){var t=Gn.getCurrentDrawing(),n=t.getCurrentLayer();if(n&&t.setCurrentLayerName(e,An()))return Gn.call("changed",[n]),!0;return!1},Vn=function(e){var t=Gn.getCurrentDrawing().setCurrentLayerPosition(e);return!!t&&(Gn.addCommandToHistory(new de(t.currentGroup,t.oldNextSibling,Gn.getSVGContent())),!0)},Rn=function(e,t){var n=Gn.getCurrentDrawing(),r=n.getLayerVisibility(e),a=n.setLayerVisibility(e,t);if(!a)return!1;var i=r?"inline":"none";return Gn.addCommandToHistory(new pe(a,{display:i},"Layer Visibility")),a===n.getCurrentLayer()&&(Gn.clearSelection(),Gn.pathActions.clear()),!0},Bn=function(e){var t=Gn.getCurrentDrawing().getLayerByName(e);if(!t)return!1;for(var n=new ge("Move Elements to Layer"),r=Gn.getSelectedElements(),a=r.length;a--;){var i=r[a];if(i){var o=i.nextSibling,s=i.parentNode;t.append(i),n.addSubCommand(new de(i,o,s))}}return Gn.addCommandToHistory(n),!0},Dn=function(e){Gn.getCurrentDrawing().mergeLayer(An(e)),Gn.clearSelection(),Fn(),Gn.changeSVGContent()},Un=function(e){Gn.getCurrentDrawing().mergeAllLayers(An(e)),Gn.clearSelection(),Fn(),Gn.changeSVGContent()},Fn=function(){var e=Cn.length;if(e){for(var t=0;t0){for(var a=r.numberOfItems,i=a;a--;){var o=r.getItem(a);if(0===o.type)r.removeItem(a);else if(1===o.type){if(Ce(o.matrix)){if(1===i)return t.removeAttribute("transform"),null;r.removeItem(a)}}else 4===o.type&&0===o.angle&&r.removeItem(a)}if(1===r.numberOfItems&&Zt(t))return null}if(!r||0===r.numberOfItems)return t.setAttribute("transform",""),t.removeAttribute("transform"),null;if(r){for(var s=[],l=r.numberOfItems;l--;){var c=r.getItem(l);1===c.type?s.push([c.matrix,l]):s.length&&(s=[])}if(2===s.length){var u=n.createSVGTransformFromMatrix(Ae(s[1][0],s[0][0]));r.removeItem(s[0][1]),r.removeItem(s[1][1]),r.insertItemBefore(u,s[1][1])}if((l=r.numberOfItems)>=2&&1===r.getItem(l-2).type&&2===r.getItem(l-1).type){var d=n.createSVGTransform(),h=Ae(r.getItem(l-2).matrix,r.getItem(l-1).matrix);d.setMatrix(h),r.removeItem(l-2),r.removeItem(l-2),r.appendItem(d)}}switch(t.tagName){case"line":case"polyline":case"polygon":case"path":break;default:if(1===r.numberOfItems&&1===r.getItem(0).type||2===r.numberOfItems&&1===r.getItem(0).type&&4===r.getItem(0).type)return null}var f,g,m=nr(t).data("gsvg"),v=new ge("Transform"),_={},y=null,b=[];switch(t.tagName){case"line":b=["x1","y1","x2","y2"];break;case"circle":b=["cx","cy","r"];break;case"ellipse":b=["cx","cy","rx","ry"];break;case"foreignObject":case"rect":case"image":b=["width","height","x","y"];break;case"use":case"text":case"tspan":b=["x","y"];break;case"polygon":case"polyline":(y={}).points=t.getAttribute("points");var x=t.points,w=x.numberOfItems;_.points=new Array(w);for(var S=0;S1e-10?Math.sin(G)/(1-Math.cos(G)):2/G;for(var P=0;P=3&&3===r.getItem(M-2).type&&2===r.getItem(M-3).type&&2===r.getItem(M-1).type){R=3;for(var B=r.getItem(M-3).matrix,D=r.getItem(M-2).matrix,U=r.getItem(M-1).matrix,F=t.childNodes,H=F.length;H--;){var z=F.item(H);if(O=0,j=0,1===z.nodeType){var q=$(z);if(!q)continue;var Y=Pe(q).matrix,W=Zt(z);if(L=Wn.getStartTransform(),Wn.setStartTransform(z.getAttribute("transform")),W||Ee(q)){var X=n.createSVGTransform();X.setMatrix(Ae(B,D,U,Y)),q.clear(),q.appendItem(X)}else{var Q=Ae(Y.inverse(),U,Y),K=n.createSVGMatrix();K.e=-Q.e,K.f=-Q.f;var Z=Ae(K.inverse(),Y.inverse(),B,D,U,Y,Q.inverse()),J=n.createSVGTransform(),ee=n.createSVGTransform(),te=n.createSVGTransform();J.setTranslate(Q.e,Q.f),ee.setScale(Z.a,Z.d),te.setTranslate(K.e,K.f),q.appendItem(te),q.appendItem(ee),q.appendItem(J)}v.addSubCommand(e(z)),Wn.setStartTransform(L)}}r.removeItem(M-1),r.removeItem(M-2),r.removeItem(M-3)}else if(M>=3&&1===r.getItem(M-1).type){R=3;var ne=Pe(r).matrix,re=n.createSVGTransform();re.setMatrix(ne),r.clear(),r.appendItem(re)}else if((1===M||M>1&&3!==r.getItem(1).type)&&2===r.getItem(0).type){R=2;var ae=Pe(r).matrix;r.removeItem(0);var ie=Pe(r).matrix.inverse(),oe=Ae(ie,ae);if(O=oe.e,j=oe.f,0!==O||0!==j){for(var le=t.childNodes,ce=le.length,ue=[];ce--;){var de=le.item(ce);if(1===de.nodeType){if(de.getAttribute("clip-path")){var he=de.getAttribute("clip-path");ue.includes(he)||(rr(he,O,j),ue.push(he))}L=Wn.getStartTransform(),Wn.setStartTransform(de.getAttribute("transform"));var fe=$(de);if(fe){var me=n.createSVGTransform();me.setTranslate(O,j),fe.numberOfItems?fe.insertItemBefore(me,0):fe.appendItem(me),v.addSubCommand(e(de));for(var ve=t.getElementsByTagNameNS(p.SVG,"use"),_e="#"+de.id,ye=ve.length;ye--;){var be=ve.item(ye);if(_e===Ot(be)){var xe=n.createSVGTransform();xe.setTranslate(-O,-j),$(be).insertItemBefore(xe,0),v.addSubCommand(e(be))}}Wn.setStartTransform(L)}}}Wn.setStartTransform(L)}}else{if(1!==M||1!==r.getItem(0).type||A){if(A){var we=n.createSVGTransform();we.setRotate(A,g.x,g.y),r.numberOfItems?r.insertItemBefore(we,0):r.appendItem(we)}return 0===r.numberOfItems&&t.removeAttribute("transform"),null}R=1;for(var Se=r.getItem(0).matrix,Ge=t.childNodes,Ie=Ge.length;Ie--;){var Ne=Ge.item(Ie);if(1===Ne.nodeType){L=Wn.getStartTransform(),Wn.setStartTransform(Ne.getAttribute("transform"));var Te=$(Ne);if(!Te)continue;var Le=Ae(Se,Pe(Te).matrix),Me=n.createSVGTransform();Me.setMatrix(Le),Te.clear(),Te.appendItem(Me,0),v.addSubCommand(e(Ne)),Wn.setStartTransform(L);var Oe=Ne.getAttribute("stroke-width");if("none"!==Ne.getAttribute("stroke")&&!isNaN(Oe)){var je=(Math.abs(Le.a)+Math.abs(Le.d))/2;Ne.setAttribute("stroke-width",Oe*je)}}}r.clear()}if(2===R){if(A){g={x:f.x+T.e,y:f.y+T.f};var Ve=n.createSVGTransform();Ve.setRotate(A,g.x,g.y),r.numberOfItems?r.insertItemBefore(Ve,0):r.appendItem(Ve)}}else if(3===R){var Re=Pe(r).matrix,Be=n.createSVGTransform();Be.setRotate(A,f.x,f.y);var De=Be.matrix,Ue=n.createSVGTransform();Ue.setRotate(A,g.x,g.y);var Fe=Ue.matrix.inverse(),He=Re.inverse(),ze=Ae(He,Fe,De,Re);if(O=ze.e,j=ze.f,0!==O||0!==j)for(var qe=t.childNodes,Ye=qe.length;Ye--;){var We=qe.item(Ye);if(1===We.nodeType){L=Wn.getStartTransform(),Wn.setStartTransform(We.getAttribute("transform"));var Xe=$(We),Qe=n.createSVGTransform();Qe.setTranslate(O,j),Xe.numberOfItems?Xe.insertItemBefore(Qe,0):Xe.appendItem(Qe),v.addSubCommand(e(We)),Wn.setStartTransform(L)}}A&&(r.numberOfItems?r.insertItemBefore(Ue,0):r.appendItem(Ue))}}else{var Ke,Ze=Dt(t);if(!Ze&&"path"!==t.tagName)return null;var $e=Zt(t);if($e){f={x:Ze.x+Ze.width/2,y:Ze.y+Ze.height/2},g=ke(Ze.x+Ze.width/2,Ze.y+Ze.height/2,Pe(r).matrix);for(var Je=$e*Math.PI/180,et=Math.abs(Je)>1e-10?Math.sin(Je)/(1-Math.cos(Je)):2/Je,tt=0;tt=3&&3===r.getItem(it-2).type&&2===r.getItem(it-3).type&&2===r.getItem(it-1).type)at=3,Ke=Pe(r,it-3,it-1).matrix,r.removeItem(it-1),r.removeItem(it-2),r.removeItem(it-3);else if(4===it&&1===r.getItem(it-1).type){at=3,Ke=Pe(r).matrix;var ht=n.createSVGTransform();ht.setMatrix(Ke),r.clear(),r.appendItem(ht),Ke=n.createSVGMatrix()}else if((1===it||it>1&&3!==r.getItem(1).type)&&2===r.getItem(0).type){at=2;var ft=r.getItem(0).matrix,pt=Pe(r,1).matrix,gt=pt.inverse();Ke=Ae(gt,ft,pt),r.removeItem(0)}else{if(1!==it||1!==r.getItem(0).type||$e){if($e){var mt=n.createSVGTransform();mt.setRotate($e,g.x,g.y),r.numberOfItems?r.insertItemBefore(mt,0):r.appendItem(mt)}return 0===r.numberOfItems&&t.removeAttribute("transform"),null}switch(Ke=Pe(r).matrix,t.tagName){case"line":_=nr(t).attr(["x1","y1","x2","y2"]);case"polyline":case"polygon":if(_.points=t.getAttribute("points"),_.points){var vt=t.points,_t=vt.numberOfItems;_.points=new Array(_t);for(var yt=0;yt<_t;++yt){var bt=vt.getItem(yt);_.points[yt]={x:bt.x,y:bt.y}}}case"path":_.d=t.getAttribute("d"),at=1,r.clear()}}if(1!==at&&2!==at&&3!==at||tr(t,_,Ke),2===at){if($e){Ee(r)||(g={x:f.x+Ke.e,y:f.y+Ke.f});var xt=n.createSVGTransform();xt.setRotate($e,g.x,g.y),r.numberOfItems?r.insertItemBefore(xt,0):r.appendItem(xt)}if("text"===t.tagName)for(var wt=t.childNodes,St=wt.length;St--;){var kt=wt.item(St);if("tspan"===kt.tagName){var Ct={x:nr(kt).attr("x")||0,y:nr(kt).attr("y")||0};tr(kt,Ct,Ke)}}}else if(3===at&&$e){var At=Pe(r).matrix,Et=n.createSVGTransform();Et.setRotate($e,f.x,f.y);var Gt=Et.matrix,Pt=n.createSVGTransform();Pt.setRotate($e,g.x,g.y);var It=Pt.matrix.inverse(),Nt=At.inverse(),Tt=Ae(Nt,It,Gt,At);tr(t,_,Tt),$e&&(r.numberOfItems?r.insertItemBefore(Pt,0):r.appendItem(Pt))}}return 0===r.numberOfItems&&t.removeAttribute("transform"),v.addSubCommand(new pe(t,y)),v},ir=jQuery,or=F()?10:4,sr=function(){function e(t,n,a){r(this,e),this.id=t,this.selectedElement=n,this.locked=!0,this.selectorGroup=Xn.createSVGElement({element:"g",attr:{id:"selectorGroup"+this.id}}),this.selectorRect=this.selectorGroup.appendChild(Xn.createSVGElement({element:"path",attr:{id:"selectedBox"+this.id,fill:"none",stroke:"#22C","stroke-width":"1","stroke-dasharray":"5,5",style:"pointer-events:none"}})),this.gripCoords={nw:null,n:null,ne:null,e:null,se:null,s:null,sw:null,w:null},this.reset(this.selectedElement,a)}return i(e,[{key:"reset",value:function(e,t){this.locked=!0,this.selectedElement=e,this.resize(t),this.selectorGroup.setAttribute("display","inline")}},{key:"showGrips",value:function(t){var n=t?"inline":"none";Kn.selectorGripsGroup.setAttribute("display",n);var r=this.selectedElement;this.hasGrips=t,r&&t&&(this.selectorGroup.append(Kn.selectorGripsGroup),e.updateGripCursors(Zt(r)))}},{key:"resize",value:function(e){var t=this.selectorRect,n=Kn,r=n.selectorGrips,a=this.selectedElement,i=a.getAttribute("stroke-width"),o=Xn.getCurrentZoom(),s=1/o;"none"===a.getAttribute("stroke")||isNaN(i)||(s+=i/2);var l=a.tagName;"text"===l&&(s+=2/o);var c=$(a),u=Pe(c).matrix;if(u.e*=o,u.f*=o,e||(e=Dt(a)),"g"===l&&!ir.data(a,"gsvg")){var h=Wt([a.childNodes]);h&&(e=h)}var f=e.x,p=e.y,g=e.width,m=e.height;s*=o;var v=Ge(f*o,p*o,g*o,m*o,u),_=v.aabox,y=_.x-s,b=_.y-s,x=_.width+2*s,w=_.height+2*s,S=y+x/2,k=b+w/2,C=Zt(a);if(C){var A=Xn.svgRoot().createSVGTransform();A.setRotate(-C,S,k);var E=A.matrix;v.tl=ke(v.tl.x,v.tl.y,E),v.tr=ke(v.tr.x,v.tr.y,E),v.bl=ke(v.bl.x,v.bl.y,E),v.br=ke(v.br.x,v.br.y,E);var G=v.tl,P=G.x,I=G.y,N=G.x,T=G.y,L=Math.min,M=Math.max;y=P=L(P,L(v.tr.x,L(v.bl.x,v.br.x)))-s,b=I=L(I,L(v.tr.y,L(v.bl.y,v.br.y)))-s,x=(N=M(N,M(v.tr.x,M(v.bl.x,v.br.x)))+s)-P,w=(T=M(T,M(v.tr.y,M(v.bl.y,v.br.y)))+s)-I}var O="M"+y+","+b+" L"+(y+x)+","+b+" "+(y+x)+","+(b+w)+" "+y+","+(b+w)+"z";t.setAttribute("d",O);var j=C?"rotate("+[C,S,k].join(",")+")":"";this.selectorGroup.setAttribute("transform",j),this.gripCoords={nw:[y,b],ne:[y+x,b],sw:[y,b+w],se:[y+x,b+w],n:[y+x/2,b],w:[y,b+w/2],e:[y+x,b+w/2],s:[y+x/2,b+w]},Object.entries(this.gripCoords).forEach((function(e){var t=d(e,2),n=t[0],a=t[1];r[n].setAttribute("cx",a[0]),r[n].setAttribute("cy",a[1])})),n.rotateGripConnector.setAttribute("x1",y+x/2),n.rotateGripConnector.setAttribute("y1",b),n.rotateGripConnector.setAttribute("x2",y+x/2),n.rotateGripConnector.setAttribute("y2",b-5*or),n.rotateGrip.setAttribute("cx",y+x/2),n.rotateGrip.setAttribute("cy",b-5*or)}}],[{key:"updateGripCursors",value:function(e){var t=Object.keys(Kn.selectorGrips),n=Math.round(e/45);for(n<0&&(n+=8);n>0;)t.push(t.shift()),n--;Object.values(Kn.selectorGrips).forEach((function(e,n){e.setAttribute("style","cursor:"+t[n]+"-resize")}))}}]),e}(),lr=function(){function t(){r(this,t),this.selectorParentGroup=null,this.rubberBandBox=null,this.selectors=[],this.selectorMap={},this.selectorGrips={nw:null,n:null,ne:null,e:null,se:null,s:null,sw:null,w:null},this.selectorGripsGroup=null,this.rotateGripConnector=null,this.rotateGrip=null,this.initGroup()}return i(t,[{key:"initGroup",value:function(){var e=this;if(this.selectorParentGroup&&this.selectorParentGroup.parentNode&&this.selectorParentGroup.remove(),this.selectorParentGroup=Xn.createSVGElement({element:"g",attr:{id:"selectorParentGroup"}}),this.selectorGripsGroup=Xn.createSVGElement({element:"g",attr:{display:"none"}}),this.selectorParentGroup.append(this.selectorGripsGroup),Xn.svgRoot().append(this.selectorParentGroup),this.selectorMap={},this.selectors=[],this.rubberBandBox=null,Object.keys(this.selectorGrips).forEach((function(t){var n=Xn.createSVGElement({element:"circle",attr:{id:"selectorGrip_resize_"+t,fill:"#22C",r:or,style:"cursor:"+t+"-resize","stroke-width":2,"pointer-events":"all"}});ir.data(n,"dir",t),ir.data(n,"type","resize"),e.selectorGrips[t]=e.selectorGripsGroup.appendChild(n)})),this.rotateGripConnector=this.selectorGripsGroup.appendChild(Xn.createSVGElement({element:"line",attr:{id:"selectorGrip_rotateconnector",stroke:"#22C","stroke-width":"1"}})),this.rotateGrip=this.selectorGripsGroup.appendChild(Xn.createSVGElement({element:"circle",attr:{id:"selectorGrip_rotate",fill:"lime",r:or,stroke:"#22C","stroke-width":2,style:"cursor:url("+Qn.imgPath+"rotate.png) 12 12, auto;"}})),ir.data(this.rotateGrip,"type","rotate"),!ir("#canvasBackground").length){var t=d(Qn.dimensions,2),n=t[0],r=t[1],a=Xn.createSVGElement({element:"svg",attr:{id:"canvasBackground",width:n,height:r,x:0,y:0,overflow:V()?"none":"visible",style:"pointer-events:none"}}),i=Xn.createSVGElement({element:"rect",attr:{width:"100%",height:"100%",x:0,y:0,"stroke-width":1,stroke:"#000",fill:"#FFF",style:"pointer-events:none"}});a.append(i),Xn.svgRoot().insertBefore(a,Xn.svgContent())}}},{key:"requestSelector",value:function(t,n){if(an(t))return null;var r=this.selectors.length;if("object"===e(this.selectorMap[t.id]))return this.selectorMap[t.id].locked=!0,this.selectorMap[t.id];for(var a=0;a1&&o.showGrips(!1)}}}for(Y("selected",w),t||1===w.length?F.requestSelector(w[0]).showGrips(!0):F.requestSelector(w[0]).showGrips(!1),w.sort((function(e,t){return e&&t&&e.compareDocumentPosition?3-(6&t.compareDocumentPosition(e)):an(e)?1:0}));an(w[0]);)w.shift(0)}},J=function(){return x.opacity},ee=this.getMouseTarget=function(e){if(an(e))return null;var t=e.target;if(t.correspondingUseElement&&(t=t.correspondingUseElement),[p.MATH,p.HTML].includes(t.namespaceURI)&&"svgcanvas"!==t.id)for(;"foreignObject"!==t.nodeName;)if(!(t=t.parentNode))return u;var n=v().getCurrentLayer();if([u,a,f,n].includes(t))return u;if(cr(t).closest("#selectorParentGroup").length)return F.selectorParentGroup;for(;t.parentNode!==(y||n);)t=t.parentNode;return t};l.pathActions=P,Fe({selectorManager:F,canvas:l,call:Y,resetD:function(e){e.setAttribute("d",P.convertPath(e))},round:U,clearSelection:W,addToSelection:Z,addCommandToHistory:O,remapElement:tr,addSVGElementFromJson:k,getGridSnapping:T,getOpacity:J,getSelectedElements:G,getContainer:function(){return a},setStarted:function(e){ye=e},getRubberBox:function(){return Oe},setRubberBox:function(e){return Oe=e},addPtsToSelection:function(e){var t=e.closedSubpath,n=e.grips;P.canDeleteNodes=!0,P.closed_subpath=t,Y("pointsAdded",{closedSubpath:t,grips:n}),Y("selected",n)},endChanges:function(e){var t=e.cmd,n=e.elem;O(t),Y("changed",[n])},getCurrentZoom:j,getId:q,getNextId:H,getMouseTarget:ee,getCurrentMode:function(){return xe},setCurrentMode:function(e){return xe=e},getDrawnPath:function(){return pt},setDrawnPath:function(e){return pt=e},getSVGRoot:I});var te={},oe="a,circle,ellipse,foreignObject,g,image,line,path,polygon,polyline,rect,svg,text,tspan,use",le=["clip-path","fill","filter","marker-end","marker-mid","marker-start","mask","stroke"],ce=cr.data,ue=document.createElementNS(p.SVG,"animate");cr(ue).attr({attributeName:"opacity",begin:"indefinite",dur:1,fill:"freeze"}).appendTo(u);var de=function e(t){var n=cr(t).attr(le);Object.values(n).forEach((function(e){if(e&&e.startsWith("url(")){var t=Mt(e).substr(1);Jt(t)||(Vt().append(ve[t]),delete ve[t])}}));var r=t.getElementsByTagName("*");if(r.length)for(var a=0,i=r.length;a0&&(4===s.getItem(0).type&&s.removeItem(0));if(0!==e){var l=ke(i,o,Pe(s).matrix),c=u.createSVGTransform();c.setRotate(e,l.x,l.y),s.numberOfItems?s.insertItemBefore(c,0):s.appendItem(c)}else 0===s.numberOfItems&&n.removeAttribute("transform");if(!t){var d=n.getAttribute("transform");n.setAttribute("transform",r),cn("transform",d,w),Y("changed",w)}F.requestSelector(w[0]).resize(),sr.updateGripCursors(e)};var Xe=this.recalculateAllSelectedDimensions=function(){for(var e=new pr("none"===Se?"position":"size"),t=w.length;t--;){var n=w[t],r=ar(n);r&&e.addSubCommand(r)}e.isEmpty()||(O(e),Y("changed",w))},Qe=function(e){console.log([e.a,e.b,e.c,e.d,e.e,e.f])},Ke=null,Ze=this.selectOnly=function(e,t){W(!0),Z(e,t)};this.removeFromSelection=function(e){if(!an(w[0])&&e.length){for(var t=[],n=w.length,r=0;r0&&l.removeFromSelection(E),G.length>0&&l.addToSelection(G);break;case"resize":p=$(g);var L=Ee(p),M=(h=L?it:Dt(g)).x,O=h.y,j=h,V=j.width,R=j.height;if(i=S-et,s=C-tt,o.gridSnapping&&(i=nn(i),s=nn(s),R=nn(R),V=nn(V)),d=Zt(g)){var B=Math.sqrt(i*i+s*s),D=Math.atan2(s,i)-d*Math.PI/180;i=B*Math.cos(D),s=B*Math.sin(D)}Se.includes("n")||Se.includes("s")||(s=0),Se.includes("e")||Se.includes("w")||(i=0);var U=0,H=0,z=R?(R+s)/R:1,W=V?(V+i)/V:1;Se.includes("n")&&(z=R?(R-s)/R:1,H=R),Se.includes("w")&&(W=V?(V-i)/V:1,U=V);var X=u.createSVGTransform(),Q=u.createSVGTransform(),K=u.createSVGTransform();if(o.gridSnapping&&(M=nn(M),U=nn(U),O=nn(O),H=nn(H)),X.setTranslate(-(M+U),-(O+H)),e.shiftKey&&(1===W?W=z:z=W),Q.setScale(W,z),K.setTranslate(M+U,O+H),L){var Z=d?1:0;p.replaceItem(X,2+Z),p.replaceItem(Q,1+Z),p.replaceItem(K,Number(Z))}else{var J=p.numberOfItems;p.replaceItem(K,J-3),p.replaceItem(Q,J-2),p.replaceItem(X,J-1)}F.requestSelector(g).resize(),Y("transition",w);break;case"zoom":x*=_,k*=_,en(Oe,{x:Math.min(nt*_,x),y:Math.min(rt*_,k),width:Math.abs(x-nt*_),height:Math.abs(k-rt*_)});break;case"text":en(b,{x:S,y:C});break;case"line":o.gridSnapping&&(S=nn(S),C=nn(C));var ee=S,te=C;e.shiftKey&&(ee=(n=Ne(et,tt,ee,te)).x,te=n.y),b.setAttribute("x2",ee),b.setAttribute("y2",te);break;case"foreignObject":case"square":case"rect":case"image":var ne,re,ae="square"===xe||e.shiftKey,ie=Math.abs(S-et),oe=Math.abs(C-tt);ae?(ie=oe=Math.max(ie,oe),ne=et.8){ot-=.8;var de=f.createSVGPoint();de.x=dt.x,de.y=dt.y,b.points.appendItem(de)}st={x:lt.x,y:lt.y},lt={x:ct.x,y:ct.y},ct={x:ut.x,y:ut.y};break;case"path":case"pathedit":if(S*=_,C*=_,o.gridSnapping&&(S=nn(S),C=nn(C),et=nn(et),tt=nn(tt)),e.shiftKey){var he,fe,pe=De;pe?(he=pe.dragging?pe.dragging[0]:et,fe=pe.dragging?pe.dragging[1]:tt):(he=et,fe=tt);var ge=n=Ne(he,fe,S,C);S=ge.x,C=ge.y}Oe&&"none"!==Oe.getAttribute("display")&&(x*=_,k*=_,en(Oe,{x:Math.min(nt*_,x),y:Math.min(rt*_,k),width:Math.abs(x-nt*_),height:Math.abs(k-rt*_)})),P.mouseMove(S,C);break;case"textedit":S*=_,C*=_,_t.mouseMove(v,y);break;case"rotate":r=(h=Dt(g)).x+h.width/2,a=h.y+h.height/2;var me=Ie(g),ve=ke(r,a,me);r=ve.x,a=ve.y,d=(Math.atan2(a-C,r-S)*(180/Math.PI)-90)%360,o.gridSnapping&&(d=nn(d)),e.shiftKey&&(d=45*Math.round(d/45)),l.setRotationAngle(d<-180?360+d:d,!0),Y("transition",w)}Ue("mouseMove",{event:e,mouse_x:v,mouse_y:y,selected:g})}})).click((function(e){return e.preventDefault(),!1})).dblclick((function(e){var t=e.target.parentNode;if(t!==y){var n=ee(e),r=n.tagName;if("text"===r&&"textedit"!==xe){var a=ke(e.pageX,e.pageY,Ke);_t.select(n,a.x,a.y)}"g"!==r&&"a"!==r||!Zt(n)||(un(n),n=w[0],W(!0)),y&&Fn(),"g"!==t.tagName&&"a"!==t.tagName||t===v().getCurrentLayer()||n===F.selectorParentGroup||Hn(n)}})).mouseup((function(e){if(2!==e.button){var t=Me;if(Me=null,ye){var n,r,a=ke(e.pageX,e.pageY,Ke),i=a.x*_,s=a.y*_,c=i/_,u=s/_,d=Jt(q()),h=!1,f=c,p=u;switch(ye=!1,xe){case"resize":case"multiselect":an(Oe)||(Oe.setAttribute("display","none"),Ve=[]),xe="select";case"select":if(!an(w[0])){if(an(w[1])){var g=w[0];switch(g.tagName){case"g":case"use":case"image":case"foreignObject":break;default:Le.fill=g.getAttribute("fill"),Le.fill_opacity=g.getAttribute("fill-opacity"),Le.stroke=g.getAttribute("stroke"),Le.stroke_opacity=g.getAttribute("stroke-opacity"),Le.stroke_width=g.getAttribute("stroke-width"),Le.stroke_dasharray=g.getAttribute("stroke-dasharray"),Le.stroke_linejoin=g.getAttribute("stroke-linejoin"),Le.stroke_linecap=g.getAttribute("stroke-linecap")}"text"===g.tagName&&(ge.font_size=g.getAttribute("font-size"),ge.font_family=g.getAttribute("font-family")),F.requestSelector(g).showGrips(!0)}if(Xe(),f!==nt||p!==rt)for(var m=w.length,y=0;y=0?C.includes(",",A+1):C.includes(" ",C.indexOf(" ")+1))&&(d=P.smoothPolylineIntoPath(d));break;case"line":n=cr(d).attr(["x1","x2","y1","y2"]),h=n.x1!==n.x2||n.y1!==n.y2;break;case"foreignObject":case"square":case"rect":case"image":n=cr(d).attr(["width","height"]),h=n.width||n.height||"image"===xe;break;case"circle":h="0"!==d.getAttribute("r");break;case"ellipse":n=cr(d).attr(["rx","ry"]),h=n.rx||n.ry;break;case"fhellipse":Je.maxx-Je.minx>0&&Je.maxy-Je.miny>0&&(d=k({element:"ellipse",curStyles:!0,attr:{cx:(Je.minx+Je.maxx)/2,cy:(Je.miny+Je.maxy)/2,rx:(Je.maxx-Je.minx)/2,ry:(Je.maxy-Je.miny)/2,id:q()}}),Y("changed",[d]),h=!0);break;case"fhrect":Je.maxx-Je.minx>0&&Je.maxy-Je.miny>0&&(d=k({element:"rect",curStyles:!0,attr:{x:Je.minx,y:Je.miny,width:Je.maxx-Je.minx,height:Je.maxy-Je.miny,id:q()}}),Y("changed",[d]),h=!0);break;case"text":h=!0,Ze([d]),_t.start(d);break;case"path":d=null,ye=!0;var E=P.mouseUp(e,d,i,s);d=E.element,h=E.keep;break;case"pathedit":h=!0,d=null,P.mouseUp(e);break;case"textedit":h=!1,d=null,_t.mouseUp(e,i,s);break;case"rotate":h=!0,d=null,xe="select";var G=l.undoMgr.finishUndoableChange();G.isEmpty()||O(G),Xe(),Y("changed",w)}var I=Ue("mouseUp",{event:e,mouse_x:i,mouse_y:s},!0);if(cr.each(I,(function(e,t){t&&(h=t.keep||h,d=t.element,ye=t.started||ye)})),h||an(d)){if(!an(d)){l.addedNew=!0;var N,T=.2;if(ue.beginElement&&parseFloat(d.getAttribute("opacity"))!==x.opacity){N=cr(ue).clone().attr({to:x.opacity,dur:T}).appendTo(d);try{N[0].beginElement()}catch(e){}}else T=0;setTimeout((function(){N&&N.remove(),d.setAttribute("opacity",x.opacity),d.setAttribute("style","pointer-events:inherit"),tn(d),"path"===xe?P.toEditMode(d):o.selectNew&&Ze([d],!0),O(new dr(d)),Y("changed",[d])}),1e3*T)}}else{for(v().releaseId(q()),d.remove(),d=null,r=e.target;r&&r.parentNode&&r.parentNode.parentNode&&"g"===r.parentNode.parentNode.tagName;)r=r.parentNode;"path"===xe&&pt||!r||!r.parentNode||"selectorParentGroup"===r.parentNode.id||"svgcanvas"===r.id||"svgroot"===r.id||(l.setMode("select"),Ze([r],!0))}be=null}}})),cr(a).bind("mousewheel DOMMouseScroll",(function(e){if(e.shiftKey){e.preventDefault();var t=e.originalEvent;Ke=cr("#svgcontent g")[0].getScreenCTM().inverse();var n=cr("#workarea"),r=o.showRulers?16:0,a=ke(t.pageX,t.pageY,Ke),i=n.width(),s=n.height(),c=i-15-r,u=s-15-r,d=c*Ke.a,h=u*Ke.d,f=n.offset(),p=f.left+r,g=f.top+r,m=t.wheelDelta?t.wheelDelta:t.detail?-t.detail:0;if(m){var v,y,b=Math.max(.75,Math.min(4/3,m));b>1?(v=Math.ceil(c/d*b*100)/100,y=Math.ceil(u/h*b*100)/100):(v=Math.floor(c/d*b*100)/100,y=Math.floor(u/h*b*100)/100);var x=Math.min(v,y);if((x=Math.min(10,Math.max(.01,x)))!==_){b=x/_;var w=ke(p,g,Ke),S={x:(a.x-(a.x-w.x)/b)*x-r+i/2,y:(a.y-(a.y-w.y)/b)*x-r+s/2};l.setZoom(x),cr("#zoom").val((100*x).toFixed(1)),Y("updateCanvas",{center:!1,newCtr:S}),Y("zoomDone")}}}}));var vt,_t=l.textActions=function(){var e,t,n,r,a,i,o,s,c,d,h=[];function f(e){var o=""===t.value;if(cr(t).focus(),!arguments.length)if(o)e=0;else{if(t.selectionEnd!==t.selectionStart)return;e=t.selectionEnd}var s=h[e];o||t.setSelectionRange(e,e),(n=Jt("text_cursor"))||(n=document.createElementNS(p.SVG,"line"),en(n,{id:"text_cursor",stroke:"#333","stroke-width":1}),n=Jt("selectorParentGroup").appendChild(n)),a||(a=setInterval((function(){var e="none"===n.getAttribute("display");n.setAttribute("display",e?"inline":"none")}),600));var l=x(s.x,i.y),c=x(s.x,i.y+i.height);en(n,{x1:l.x,y1:l.y,x2:c.x,y2:c.y,visibility:"visible",display:"inline"}),r&&r.setAttribute("d","")}function g(e,a,o){if(e!==a){o||t.setSelectionRange(e,a),(r=Jt("text_selectblock"))||(r=document.createElementNS(p.SVG,"path"),en(r,{id:"text_selectblock",fill:"green",opacity:.5,style:"pointer-events:none"}),Jt("selectorParentGroup").append(r));var s=h[e],l=h[a];n.setAttribute("visibility","hidden");var c=x(s.x,i.y),u=x(s.x+(l.x-s.x),i.y),d=x(s.x,i.y+i.height),g=x(s.x+(l.x-s.x),i.y+i.height),m="M"+c.x+","+c.y+" L"+u.x+","+u.y+" "+g.x+","+g.y+" "+d.x+","+d.y+"z";en(r,{d:m,display:"inline"})}else f(a)}function m(t,n){var r=u.createSVGPoint();if(r.x=t,r.y=n,1===h.length)return 0;var a=e.getCharNumAtPosition(r);a<0?(a=h.length-2,t<=h[0].x&&(a=0)):a>=h.length-2&&(a=h.length-2);var i=h[a];return t>i.x+i.width/2&&a++,a}function v(e,t){f(m(e,t))}function y(e,n,r){var a=t.selectionStart,i=m(e,n);g(Math.min(a,i),Math.max(a,i),!r)}function b(e,t){var n={x:e,y:t};if(n.x/=_,n.y/=_,o){var r=ke(n.x,n.y,o.inverse());n.x=r.x,n.y=r.y}return n}function x(e,t){var n={x:e,y:t};if(o){var r=ke(n.x,n.y,o);n.x=r.x,n.y=r.y}return n.x*=_,n.y*=_,n}function S(t){g(0,e.textContent.length),cr(this).unbind(t)}function k(t){if(d&&e){var n=ke(t.pageX,t.pageY,Ke),r=b(n.x*_,n.y*_),a=m(r.x,r.y),i=e.textContent,o=i.substr(0,a).replace(/[a-z\d]+$/i,"").length,s=i.substr(a).match(/^[a-z\d]+/i);g(o,(s?s[0].length:0)+a),cr(t.target).click(S),setTimeout((function(){cr(t.target).unbind("click",S)}),300)}}return({select:function(t,n,r){e=t,_t.toEditMode(n,r)},start:function(t){e=t,_t.toEditMode()},mouseDown:function(e,n,r,a){var i=b(r,a);t.focus(),v(i.x,i.y),s=r,c=a},mouseMove:function(e,t){var n=b(e,t);y(n.x,n.y)},mouseUp:function(t,n,r){var a=b(n,r);y(a.x,a.y,!0),t.target!==e&&ns-2&&rc-2&&_t.toSelectMode(!0)},setCursor:f,toEditMode:function(t,n){if(d=!1,xe="textedit",F.requestSelector(e).showGrips(!1),F.requestSelector(e),_t.init(),cr(e).css("cursor","text"),arguments.length){var r=b(t,n);v(r.x,r.y)}else f();setTimeout((function(){d=!0}),300)},toSelectMode:function(i){xe="select",clearInterval(a),a=null,r&&cr(r).attr("display","none"),n&&cr(n).attr("visibility","hidden"),cr(e).css("cursor","move"),i&&(W(),cr(e).css("cursor","move"),Y("selected",[e]),Z([e],!0)),e&&!e.textContent.length&&l.deleteSelectedElements(),cr(t).blur(),e=!1},setInputElem:function(e){t=e},clear:function(){"textedit"===xe&&_t.toSelectMode()},init:function(n){if(e){var r,a;e.parentNode||(e=w[0],F.requestSelector(e).showGrips(!1));var s=e.textContent.length,c=e.getAttribute("transform");for(i=Dt(e),o=c?Ie(e):null,(h=[]).length=s,t.focus(),cr(e).unbind("dblclick",k).dblclick(k),s||(a={x:i.x+i.width/2,width:0}),r=0;r")[0].getContext("2d")||(n.text=te.exportNoText),cr.each(n,(function(n,a){r.find(n).length&&(t.push(n),e.push(a))})),{issues:e,issueCodes:t}}this.svgCanvasToString=function(){for(;Et()>0;);P.clear(!0),cr.each(f.childNodes,(function(e,t){e&&8===t.nodeType&&t.data.includes("Created with")&&f.firstChild.before(t)})),y&&(Fn(),Ze([y]));var e=[];cr(f).find("g:data(gsvg)").each((function(){for(var t=this.attributes,n=t.length,r=0;rt.name?-1:1}));for(var l=0;l=0;_--){var y=i[_],b=kt(y.value);if(!v.includes(y.localName)&&""!==b){if(b.startsWith("pointer-events"))continue;if("class"===y.localName&&b.startsWith("se_"))continue;if(n.push(" "),"d"===y.localName&&(b=P.convertPath(e,!0)),isNaN(b)?a.test(b)&&(b=ae(b)+r):b=ae(b),fe.apply&&"image"===e.nodeName&&"href"===y.localName&&fe.images&&"embed"===fe.images){var x=he[b];x&&(b=x)}y.namespaceURI&&y.namespaceURI!==p.SVG&&!L[y.namespaceURI]||(n.push(y.nodeName),n.push('="'),n.push(b),n.push('"'))}}}if(e.hasChildNodes()){n.push(">"),t++;for(var w=!1,S=0;S");break;case 8:n.push("\n"),n.push(new Array(t+1).join(" ")),n.push("\x3c!--"),n.push(k.data),n.push("--\x3e")}}if(t--,!w){n.push("\n");for(var A=0;A")}else n.push("/>")}return n.join("")},this.embedImage=function(e){return new Promise((function(t,n){cr(new Image).load((function(r,a,i){if("error"!==a){var o=document.createElement("canvas");o.width=this.width,o.height=this.height,o.getContext("2d").drawImage(this,0,0);try{var s=";svgedit_url="+encodeURIComponent(e);s=o.toDataURL().replace(";base64",s+";base64"),he[e]=s}catch(t){he[e]=!1}_e=e,t(he[e])}else n(new Error("Error loading image: "+i.status+" "+i.statusText))})).attr("src",e)}))},this.setGoodImage=function(e){_e=e},this.open=function(){},this.save=function(e){W(),e&&cr.extend(fe,e),fe.apply=!0;var t=this.svgCanvasToString();Y("saved",t)},this.rasterExport=function(){var e=n(regeneratorRuntime.mark((function e(t,n,r){var a,i,s,c,u,d,h,f,p,g=arguments;return regeneratorRuntime.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:if(a=g.length>3&&void 0!==g[3]?g[3]:{},s="image/"+(i="ICO"===t?"BMP":t||"PNG").toLowerCase(),c=Gt(),u=c.issues,d=c.issueCodes,h=this.svgCanvasToString(),vt){e.next=10;break}return e.next=8,dn(o.canvgPath+"canvg.js",{global:"canvg"});case 8:f=e.sent,vt=f.canvg;case 10:return cr("#export_canvas").length||cr("",{id:"export_canvas"}).hide().appendTo("body"),(p=cr("#export_canvas")[0]).width=l.contentW,p.height=l.contentH,e.next=16,vt(p,h);case 16:return e.abrupt("return",new Promise((function(e,o){var l,c=i.toLowerCase(),f=n?p.toDataURL("image/"+c,n):p.toDataURL("image/"+c);function g(){var i={datauri:f,bloburl:l,svg:h,issues:u,issueCodes:d,type:t,mimeType:s,quality:n,exportWindowName:r};a.avoidEvent||Y("exported",i),e(i)}p.toBlob?p.toBlob((function(e){l=It(e),g()}),s,n):(l=Pt(f),g())})));case 17:case"end":return e.stop()}}),e,this)})));return function(t,n,r){return e.apply(this,arguments)}}(),this.exportPDF=function(){var e=n(regeneratorRuntime.mark((function e(t){var n,r,a,i,s,l,c,u,d,h,f,p,g=arguments;return regeneratorRuntime.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:if(n=g.length>1&&void 0!==g[1]?g[1]:D()?"save":void 0,window.jsPDF){e.next=7;break}return e.next=4,fn(["jspdf/underscore-min.js","jspdf/jspdf.min.js"]);case 4:return r=!("svgEditor"in window&&window.svgEditor&&!1===window.svgEditor.modules),e.next=7,fn(o.jspdfPath+"jspdf.plugin.svgToPdf.js",{type:r?"module":"text/javascript"});case 7:return a=Wt(),i=a.w>a.h?"landscape":"portrait",s="pt",l=jsPDF({orientation:i,unit:s,format:[a.w,a.h]}),c=Kt(),l.setProperties({title:c}),u=Gt(),d=u.issues,h=u.issueCodes,f=this.svgCanvasToString(),l.addSVG(f,0,0),(p={svg:f,issues:d,issueCodes:h,exportWindowName:t,outputType:n=n||"dataurlstring"}).output=l.output(n,"save"===n?t||"svg.pdf":void 0),Y("exportedPDF",p),e.abrupt("return",p);case 21:case"end":return e.stop()}}),e,this)})));return function(t){return e.apply(this,arguments)}}(),this.getSvgString=function(){return fe.apply=!1,this.svgCanvasToString()},this.randomizeIds=function(e){arguments.length>0&&!1===e?In(!1,v()):In(!0,v())};var Nt=this.uniquifyElems=function(e){var t={},n=["filter","linearGradient","pattern","radialGradient","symbol","textPath","use"];for(var r in Lt(e,(function(e){if(1===e.nodeType){e.id&&(e.id in t||(t[e.id]={elem:null,attrs:[],hrefs:[]}),t[e.id].elem=e),cr.each(le,(function(n,r){var a=e.getAttributeNode(r);if(a){var i=Mt(a.value),o=i?i.substr(1):null;o&&(o in t||(t[o]={elem:null,attrs:[],hrefs:[]}),t[o].attrs.push(a))}}));var r=Ot(e);if(r&&n.includes(e.nodeName)){var a=r.substr(1);a&&(a in t||(t[a]={elem:null,attrs:[],hrefs:[]}),t[a].hrefs.push(e))}}})),t)if(r){var a=t[r].elem;if(a){var i=H();a.id=i;for(var o=t[r].attrs,s=o.length;s--;){var l=o[s];l.ownerElement.setAttribute(l.name,"url(#"+i+")")}for(var c=t[r].hrefs,u=c.length;u--;){var d=c[u];jt(d,"#"+i)}}}},Bt=this.setUseData=function(e){var t=cr(e);"use"!==e.tagName&&(t=t.find("use")),t.each((function(){var e=Ot(this).substr(1),t=Jt(e);t&&(cr(this).data("ref",t),"symbol"!==t.tagName&&"svg"!==t.tagName||cr(this).data("symbol",t).data("ref",t))}))},Ut=this.convertGradients=function(e){var t=cr(e).find("linearGradient, radialGradient");!t.length&&V()&&(t=cr(e).find("*").filter((function(){return this.tagName.includes("Gradient")}))),t.each((function(){if("userSpaceOnUse"===cr(this).attr("gradientUnits")){var e=cr(f).find('[fill="url(#'+this.id+')"],[stroke="url(#'+this.id+')"]');if(!e.length)return;var t=Dt(e[0]);if(!t)return;if("linearGradient"===this.tagName){var n=cr(this).attr(["x1","y1","x2","y2"]),r=this.gradientTransform.baseVal;if(r&&r.numberOfItems>0){var a=Pe(r).matrix,i=ke(n.x1,n.y1,a),o=ke(n.x2,n.y2,a);n.x1=i.x,n.y1=i.y,n.x2=o.x,n.y2=o.y,this.removeAttribute("gradientTransform")}cr(this).attr({x1:(n.x1-t.x)/t.width,y1:(n.y1-t.y)/t.height,x2:(n.x2-t.x)/t.width,y2:(n.y2-t.y)/t.height}),this.removeAttribute("gradientUnits")}}}))},qt=this.convertToGroup=function(e){e||(e=w[0]);var t,n=cr(e),r=new pr;if(n.data("gsvg")){var a=e.firstChild,i=cr(a).attr(["x","y"]);cr(e.firstChild.firstChild).unwrap(),cr(e).removeData("gsvg");var o=$(e),s=u.createSVGTransform();s.setTranslate(i.x,i.y),o.appendItem(s),ar(e),Y("selected",[e])}else if(n.data("symbol")){e=n.data("symbol"),t=n.attr("transform");var l=n.attr(["x","y"]),d=e.getAttribute("viewBox");if(d){var h=d.split(" ");l.x-=Number(h[0]),l.y-=Number(h[1])}t+=" translate("+(l.x||0)+","+(l.y||0)+")";var g=n.prev();r.addSubCommand(new hr(n[0],n[0].nextSibling,n[0].parentNode)),n.remove();var m,v=cr(f).find("use:data(symbol)").length,_=c.createElementNS(p.SVG,"g"),y=e.childNodes;for(m=0;md?"scale("+_/3/m[3]+")":"scale("+_/3/m[2]+")")+" translate(0)",o=c.createElementNS(p.SVG,"symbol");var b=Vt();for(R()&&cr(l).find("linearGradient, radialGradient, pattern").appendTo(b);l.firstChild;){var x=l.firstChild;o.append(x)}var w=l.attributes,S=!0,k=!1,C=void 0;try{for(var A,E=w[Symbol.iterator]();!(S=(A=E.next()).done);S=!0){var G=A.value;o.setAttribute(G.nodeName,G.value)}}catch(e){k=!0,C=e}finally{try{S||null==E.return||E.return()}finally{if(k)throw C}}o.id=H(),pe[a]={symbol:o,xform:n},Vt().append(o),s.addSubCommand(new dr(o))}(r=c.createElementNS(p.SVG,"use")).id=H(),jt(r,"#"+o.id),(y||v().getCurrentLayer()).append(r),s.addSubCommand(new dr(r)),W(),r.setAttribute("transform",n),ar(r),cr(r).data("symbol",o).data("ref",o),Z([r]),O(s),Y("changed",[f])}catch(e){return console.log(e),null}return r};var Yt={identifyLayers:Nn,createLayer:Tn,cloneLayer:Ln,deleteCurrentLayer:Mn,setCurrentLayer:On,renameCurrentLayer:jn,setCurrentLayerPosition:Vn,setLayerVisibility:Rn,moveSelectedToLayer:Bn,mergeLayer:Dn,mergeAllLayers:Un,leaveContext:Fn,setContext:Hn};Object.entries(Yt).forEach((function(e){var t=d(e,2),n=t[0],r=t[1];l[n]=r})),function(e){Gn=e}({pathActions:P,getCurrentGroup:function(){return y},setCurrentGroup:function(e){y=e},getSelectedElements:G,getSVGContent:E,undoMgr:M,elData:ce,getCurrentDrawing:v,clearSelection:W,call:Y,addCommandToHistory:O,changeSVGContent:function(){Y("changed",[f])}}),this.clear=function(){P.clear(),W(),l.clearSvgContentElement(),l.current_drawing_=new Pn(f),l.createLayer("Layer 1"),l.undoMgr.resetUndoStack(),F.initGroup(),Oe=F.getRubberBandBox(),Y("cleared")},this.linkControlPoints=P.linkControlPoints,this.getContentElem=function(){return f},this.getRootElem=function(){return u};var Wt=this.getResolution=function(){return{w:f.getAttribute("width")/_,h:f.getAttribute("height")/_,zoom:_}};this.getSnapToGrid=function(){return o.gridSnapping},this.getVersion=function(){return"svgcanvas.js ($Rev$)"},this.setUiStrings=function(e){Object.assign(te,e.notification),cr=mn(cr,e.common),je(e)},this.setConfig=function(e){Object.assign(o,e)},this.getTitle=function(e){if(e=e||w[0]){var t=(e=cr(e).data("gsvg")||cr(e).data("symbol")||e).childNodes,n=!0,r=!1,a=void 0;try{for(var i,o=t[Symbol.iterator]();!(n=(i=o.next()).done);n=!0){var s=i.value;if("title"===s.nodeName)return s.textContent}}catch(e){r=!0,a=e}finally{try{n||null==o.return||o.return()}finally{if(r)throw a}}return""}},this.setGroupTitle=function(e){var t=w[0];t=cr(t).data("gsvg")||t;var n,r=cr(t).children("title"),a=new pr("Set Label");if(e.length)r.length?(n=r[0],a.addSubCommand(new fr(n,{"#text":n.textContent})),n.textContent=e):((n=c.createElementNS(p.SVG,"title")).textContent=e,cr(t).prepend(n),a.addSubCommand(new dr(n)));else{var i=r.nextSibling;a.addSubCommand(new hr(r[0],i,t)),r.remove()}O(a)};var Kt=this.getDocumentTitle=function(){return l.getTitle(f)};this.setDocumentTitle=function(e){var t=f.childNodes,n=!1,r="",a=new pr("Change Image Title"),i=!0,o=!1,s=void 0;try{for(var l,u=t[Symbol.iterator]();!(i=(l=u.next()).done);i=!0){var d=l.value;if("title"===d.nodeName){r=(n=d).textContent;break}}}catch(e){o=!0,s=e}finally{try{i||null==u.return||u.return()}finally{if(o)throw s}}n||(n=c.createElementNS(p.SVG,"title"),f.insertBefore(n,f.firstChild)),e.length?n.textContent=e:n.remove(),a.addSubCommand(new fr(n,{"#text":r})),O(a)},this.getEditorNS=function(e){return e&&f.setAttribute("xmlns:se",p.SE),p.SE},this.setResolution=function(e,t){var n,r=Wt(),a=r.w,i=r.h;if("fit"===e){var o=Qt();if(!o)return!1;n=new pr("Fit Canvas to Content");var s=Xt();Z(s);var c=[],u=[];cr.each(s,(function(e,t){c.push(-1*o.x),u.push(-1*o.y)}));var d=l.moveSelectedElements(c,u,!0);n.addSubCommand(d),W(),e=Math.round(o.width),t=Math.round(o.height)}return e===a&&t===i||(n||(n=new pr("Change Image Dimensions")),e=se("width",e),t=se("height",t),f.setAttribute("width",e),f.setAttribute("height",t),this.contentW=e,this.contentH=t,n.addSubCommand(new fr(f,{width:a,height:i})),f.setAttribute("viewBox",[0,0,e/_,t/_].join(" ")),n.addSubCommand(new fr(f,{viewBox:["0 0",a,i].join(" ")})),O(n),Y("changed",[f])),!0},this.getOffset=function(){return cr(f).attr(["x","y"])},this.setBBoxZoom=function(t,n,r){var a,i=.85,o=function(e){if(!e)return!1;var t=Math.round(n/e.width*100*i)/100,a=Math.round(r/e.height*100*i)/100,o=Math.min(t,a);return l.setZoom(o),{zoom:o,bbox:e}};if("object"===e(t)){if(0===(a=t).width||0===a.height){var s=a.zoom?a.zoom:_*a.factor;return l.setZoom(s),{zoom:_,bbox:a}}return o(a)}switch(t){case"selection":if(!w[0])return;var c=cr.map(w,(function(e){if(e)return e}));a=Qt(c);break;case"canvas":var u=Wt();i=.95,a={width:u.w,height:u.h,x:0,y:0};break;case"content":a=Qt();break;case"layer":a=Qt(Xt(v().getCurrentLayer()));break;default:return}return o(a)},this.setZoom=function(e){var t=Wt();f.setAttribute("viewBox","0 0 "+t.w/e+" "+t.h/e),_=e,cr.each(w,(function(e,t){t&&F.requestSelector(t).resize()})),P.zoomChange(),Ue("zoomChanged",e)},this.getMode=function(){return xe},this.setMode=function(e){P.clear(!0),_t.clear(),Le=w[0]&&"text"===w[0].nodeName?ge:x,xe=e},this.getColor=function(e){return Le[e]},this.setColor=function(e,t,n){x[e]=t,Le[e+"_paint"]={type:"solidColor"};var r=[];function a(e){"g"!==e.nodeName&&r.push(e)}for(var i=w.length;i--;){var o=w[i];o&&("g"===o.tagName?Lt(o,a):"fill"===e?"polyline"!==o.tagName&&"line"!==o.tagName&&r.push(o):r.push(o))}r.length>0&&(n?ln(e,t,r):(cn(e,t,r),Y("changed",r)))};var on=this.setGradient=function(e){if(Le[e+"_paint"]&&"solidColor"!==Le[e+"_paint"].type){var t=l[e+"Grad"],n=sn(t),r=Vt();n?t=n:(t=r.appendChild(c.importNode(t,!0))).id=H(),l.setColor(e,"url(#"+t.id+")")}},sn=function(e){for(var t=Vt(),n=cr(t).find("linearGradient, radialGradient"),r=n.length,a=["r","cx","cy","fx","fy"];r--;){var i=n[r];if("linearGradient"===e.tagName){if(e.getAttribute("x1")!==i.getAttribute("x1")||e.getAttribute("y1")!==i.getAttribute("y1")||e.getAttribute("x2")!==i.getAttribute("x2")||e.getAttribute("y2")!==i.getAttribute("y2"))continue}else if("continue"===function(){var t=cr(e).attr(a),n=cr(i).attr(a),r=!1;if(cr.each(a,(function(e,a){t[a]!==n[a]&&(r=!0)})),r)return"continue"}())continue;var o=e.getElementsByTagNameNS(p.SVG,"stop"),s=i.getElementsByTagNameNS(p.SVG,"stop");if(o.length===s.length){for(var l=o.length;l--;){var c=o[l],u=s[l];if(c.getAttribute("offset")!==u.getAttribute("offset")||c.getAttribute("stop-opacity")!==u.getAttribute("stop-opacity")||c.getAttribute("stop-color")!==u.getAttribute("stop-color"))break}if(-1===l)return i}}return null};this.setPaint=function(e,t){var n=new cr.jGraduate.Paint(t);switch(this.setPaintOpacity(e,n.alpha/100,!0),Le[e+"_paint"]=n,n.type){case"solidColor":this.setColor(e,"none"!==n.solidColor?"#"+n.solidColor:"none");break;case"linearGradient":case"radialGradient":l[e+"Grad"]=n[n.type],on(e)}},this.setStrokePaint=function(e){this.setPaint("stroke",e)},this.setFillPaint=function(e){this.setPaint("fill",e)},this.getStrokeWidth=function(){return Le.stroke_width},this.setStrokeWidth=function(e){if(0===e&&["line","path"].includes(xe))l.setStrokeWidth(1);else{Le.stroke_width=e;for(var t=[],n=w.length;n--;){var r=w[n];r&&("g"===r.tagName?Lt(r,a):t.push(r))}t.length>0&&(cn("stroke-width",e,t),Y("changed",w))}function a(e){"g"!==e.nodeName&&t.push(e)}},this.setStrokeAttr=function(e,t){x[e.replace("-","_")]=t;for(var n=[],r=w.length;r--;){var a=w[r];a&&("g"===a.tagName?Lt(a,(function(e){"g"!==e.nodeName&&n.push(e)})):n.push(a))}n.length>0&&(cn(e,t,n),Y("changed",w))},this.getStyle=function(){return x},this.getOpacity=J,this.setOpacity=function(e){x.opacity=e,cn("opacity",e)},this.getFillOpacity=function(){return x.fill_opacity},this.getStrokeOpacity=function(){return x.stroke_opacity},this.setPaintOpacity=function(e,t,n){x[e+"_opacity"]=t,n?ln(e+"-opacity",t):cn(e+"-opacity",t)},this.getPaintOpacity=function(e){return"fill"===e?this.getFillOpacity():this.getStrokeOpacity()},this.getBlur=function(e){var t=0;if(e&&e.getAttribute("filter")){var n=Jt(e.id+"_blur");n&&(t=n.firstChild.getAttribute("stdDeviation"))}return t},function(){var e=null,t=null,n=!1;function r(){var n=l.undoMgr.finishUndoableChange();e.addSubCommand(n),O(e),e=null,t=null}l.setBlurNoUndo=function(e){if(t)if(0===e)ln("filter",""),n=!0;else{var r=w[0];n&&ln("filter","url(#"+r.id+"_blur)"),V()&&(r.removeAttribute("filter"),r.setAttribute("filter","url(#"+r.id+"_blur)")),ln("stdDeviation",e,[t.firstChild]),l.setBlurOffsets(t,e)}else l.setBlur(e)},l.setBlurOffsets=function(e,t){t>3?en(e,{x:"-50%",y:"-50%",width:"200%",height:"200%"}):V()||(e.removeAttribute("x"),e.removeAttribute("y"),e.removeAttribute("width"),e.removeAttribute("height"))},l.setBlur=function(n,a){if(e)r();else{var i=w[0],o=i.id;t=Jt(o+"_blur"),n-=0;var s=new pr;if(t)0===n&&(t=null);else{var c=k({element:"feGaussianBlur",attr:{in:"SourceGraphic",stdDeviation:n}});(t=k({element:"filter",attr:{id:o+"_blur"}})).append(c),Vt().append(t),s.addSubCommand(new dr(t))}var u={filter:i.getAttribute("filter")};if(0===n)return i.removeAttribute("filter"),void s.addSubCommand(new fr(i,u));cn("filter","url(#"+o+"_blur)"),s.addSubCommand(new fr(i,u)),l.setBlurOffsets(t,n),e=s,l.undoMgr.beginUndoableChange("stdDeviation",[t?t.firstChild:null]),a&&(l.setBlurNoUndo(n),r())}}}(),this.getBold=function(){var e=w[0];return!(an(e)||"text"!==e.tagName||!an(w[1]))&&"bold"===e.getAttribute("font-weight")},this.setBold=function(e){var t=w[0];!an(t)&&"text"===t.tagName&&an(w[1])&&cn("font-weight",e?"bold":"normal"),w[0].textContent||_t.setCursor()},this.getItalic=function(){var e=w[0];return!(an(e)||"text"!==e.tagName||!an(w[1]))&&"italic"===e.getAttribute("font-style")},this.setItalic=function(e){var t=w[0];!an(t)&&"text"===t.tagName&&an(w[1])&&cn("font-style",e?"italic":"normal"),w[0].textContent||_t.setCursor()},this.getFontFamily=function(){return ge.font_family},this.setFontFamily=function(e){ge.font_family=e,cn("font-family",e),w[0]&&!w[0].textContent&&_t.setCursor()},this.setFontColor=function(e){ge.fill=e,cn("fill",e)},this.getFontColor=function(){return ge.fill},this.getFontSize=function(){return ge.font_size},this.setFontSize=function(e){ge.font_size=e,cn("font-size",e),w[0].textContent||_t.setCursor()},this.getText=function(){var e=w[0];return an(e)?"":e.textContent},this.setTextContent=function(e){cn("#text",e),_t.init(e),_t.setCursor()},this.setImageURL=function(e){var t=w[0];if(t){var n=cr(t).attr(["width","height"]),r=!n.width||!n.height,a=Ot(t);if(a!==e||r){var i=new pr("Change Image URL");jt(t,e),i.addSubCommand(new fr(t,{"#href":a})),cr(new Image).load((function(){var e=cr(t).attr(["width","height"]);cr(t).attr({width:this.width,height:this.height}),F.requestSelector(t).resize(),i.addSubCommand(new fr(t,e)),O(i),Y("changed",[t])})).attr("src",e)}}},this.setLinkURL=function(e){var t=w[0];if(t){if("a"!==t.tagName){var n=cr(t).parents("a");if(!n.length)return;t=n[0]}var r=Ot(t);if(r!==e){var a=new pr("Change Link URL");jt(t,e),a.addSubCommand(new fr(t,{"#href":r})),O(a)}}},this.setRectRadius=function(e){var t=w[0];if(!an(t)&&"rect"===t.tagName){var n=t.getAttribute("rx");n!==String(e)&&(t.setAttribute("rx",e),t.setAttribute("ry",e),O(new fr(t,{rx:n,ry:n},"Radius")),Y("changed",[t]))}},this.makeHyperlink=function(e){l.groupSelectedElements("a",e)},this.removeHyperlink=function(){l.ungroupSelectedElement()},this.setSegType=function(e){P.setSegType(e)},this.convertToPath=function(e,t){if(!an(e))return t?zt(e,k,P):function(e,t,n,r,a,i,o,s){var l=new o.BatchCommand("Convert element to Path"),c=n({element:"path",attr:t=mt.extend({},t,Ht(e))}),u=e.getAttribute("transform");u&&c.setAttribute("transform",u);var d=e.id,h=e.parentNode;e.nextSibling?e.before(c):h.append(c);var f=Ft(e);if(f){if(c.setAttribute("d",f),u){var p=$(c);Ee(p)&&r.resetOrientation(c)}var g=e.nextSibling;return l.addSubCommand(new o.RemoveElementCommand(e,g,parent)),l.addSubCommand(new o.InsertElementCommand(c)),a(),e.remove(),c.setAttribute("id",d),c.removeAttribute("visibility"),i([c],!0),s(l),c}return c.remove(),null}(e,{fill:x.fill,"fill-opacity":x.fill_opacity,stroke:x.stroke,"stroke-width":x.stroke_width,"stroke-dasharray":x.stroke_dasharray,"stroke-linejoin":x.stroke_linejoin,"stroke-linecap":x.stroke_linecap,"stroke-opacity":x.stroke_opacity,opacity:x.opacity,visibility:"hidden"},k,P,W,Z,we,O);var n=w;cr.each(n,(function(e,t){t&&l.convertToPath(t)}))};var ln=function(e,t,n){"pathedit"===xe&&P.moveNode(e,t);for(var r=(n=n||w).length,a=["g","polyline","path"],i=function(){var i=n[r];if(an(i))return"continue";if(("x"===e||"y"===e)&&a.includes(i.tagName)){var o=Qt([i]),s="x"===e?t-o.x:0,c="y"===e?t-o.y:0;return l.moveSelectedElements(s*_,c*_,!0),"continue"}var d="#text"===e?i.textContent:i.getAttribute(e);if(an(d)&&(d=""),d!==String(t)){"#text"===e?(i.textContent=t,/rotate/.test(i.getAttribute("transform"))&&(i=We(i))):"#href"===e?jt(i,t):i.setAttribute(e,t),"textedit"===xe&&"#text"!==e&&i.textContent.length&&_t.toSelectMode(i),R()&&"text"===i.nodeName&&/rotate/.test(i.getAttribute("transform"))&&(String(t).startsWith("url")||["font-size","font-family","x","y"].includes(e)&&i.textContent)&&(i=We(i)),w.includes(i)&&setTimeout((function(){i.parentNode&&F.requestSelector(i).resize()}),0);var h=Zt(i);if(0!==h&&"transform"!==e)for(var f=$(i),p=f.numberOfItems;p--;){if(4===f.getItem(p).type){f.removeItem(p);var g=Dt(i),m=ke(g.x+g.width/2,g.y+g.height/2,Pe(f).matrix),v=m.x,y=m.y,b=u.createSVGTransform();b.setRotate(h,v,y),f.insertItemBefore(b,p);break}}}};r--;)i()},cn=this.changeSelectedAttribute=function(e,t,n){n=n||w,l.undoMgr.beginUndoableChange(e,n),ln(e,t,n);var r=l.undoMgr.finishUndoableChange();r.isEmpty()||O(r)};this.deleteSelectedElements=function(){for(var e=new pr("Delete Elements"),t=w.length,n=[],r=0;rn[d].width)||("t"===e||"m"===e||"b"===e)&&(u===Number.MIN_VALUE||u>n[d].height))&&(a=n[d].x,o=n[d].y,i=n[d].x+n[d].width,s=n[d].y+n[d].height,c=n[d].width,u=n[d].height);break;case"largest":(("l"===e||"c"===e||"r"===e)&&(c===Number.MIN_VALUE||ci&&(i=n[d].x+n[d].width),n[d].y+n[d].height>s&&(s=n[d].y+n[d].height)}}"page"===t&&(a=0,o=0,i=l.contentW,s=l.contentH);for(var f=new Array(r),p=new Array(r),g=0;g=a.length?t=0:t<0&&(t=a.length-1),r=a[t];break}Ze([r],!0),Y("selected",w)}},this.clear(),this.getPrivateMethods=function(){return{addCommandToHistory:O,BatchCommand:pr,ChangeElementCommand:fr,decode64:At,dropXMLInternalSubset:St,encode64:Ct,ffClone:We,findDefs:Vt,findDuplicateGradient:sn,getElem:Jt,getPathBBox:Rt,getTypeMap:re,getUrlFromAttr:Mt,identifyLayers:Nn,InsertElementCommand:dr,isChrome:D,isIdentity:Ce,isIE:B,logMatrix:Qe,MoveElementCommand:ur,NS:p,preventClickDefault:rn,RemoveElementCommand:hr,SVGEditTransformList:K,text2xml:Tt,transformBox:Ge,transformPoint:ke,walkTree:Lt}}};
+function sn(e){var t=document.createElement("a");return t.setAttribute("href",e),t.cloneNode(!1).href}function ln(e,t){["id","class","type"].forEach((function(n){n in t&&(e[n]=t[n])}))}function cn(e,t){return un(e,o({},t,{returnDefault:!0}))}function un(e,t){return dn.apply(this,arguments)}function dn(){return(dn=n(regeneratorRuntime.mark((function e(t,n){var r,a;return regeneratorRuntime.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:if(r=n.global,a=n.returnDefault,!!("svgEditor"in window&&window.svgEditor&&!1===window.svgEditor.modules)){e.next=4;break}return e.abrupt("return",fn(t,void 0,{returnDefault:a}));case 4:return e.next=6,hn(t);case 6:return e.abrupt("return",window[r]);case 7:case"end":return e.stop()}}),e)})))).apply(this,arguments)}function hn(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return Array.isArray(e)?Promise.all(e.map((function(e){return hn(e,t)}))):new Promise((function(n,r){var a=document.createElement("script");function i(){r(new Error("Failed to import: ".concat(e))),s()}function o(){n(),s()}var s=function(){a.removeEventListener("error",i),a.removeEventListener("load",o),a.remove(),a.src=""};a.defer="defer",ln(a,t),a.addEventListener("error",i),a.addEventListener("load",o),a.src=e,document.head.append(a)}))}function fn(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},r=n.returnDefault,a=void 0!==r&&r;return Array.isArray(e)?Promise.all(e.map((function(e){return fn(e,t)}))):new Promise((function(n,r){var i="$importModule$"+Math.random().toString(32).slice(2),o=document.createElement("script");function s(){r(new Error("Failed to import: ".concat(e))),c()}function l(){n(window[i]),c()}var c=function(){delete window[i],o.removeEventListener("error",s),o.removeEventListener("load",l),o.remove(),URL.revokeObjectURL(o.src),o.src=""};ln(o,t),o.defer="defer",o.type="module",o.addEventListener("error",s),o.addEventListener("load",l);var u=sn(e),d="import * as m from '".concat(u.replace(/'/g,"\\'"),"'; window.").concat(i," = ").concat(a?"m.default || ":"","m;"),h=new Blob([d],{type:"text/javascript"});o.src=URL.createObjectURL(h),document.head.append(o)}))}var pn={true:!0,false:!1,null:null};function gn(t){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{ok:"Ok",cancel:"Cancel"};t("#dialog_container").draggable({cancel:"#dialog_content, #dialog_buttons *",containment:"window"}).css("position","absolute");var r=t("#dialog_box"),a=t("#dialog_buttons"),i=t("#dialog_content");function o(o,s,l,c,u,d){i.html(""+s.replace(/\n/g,"
")+"
").toggleClass("prompt","prompt"===o),a.empty();var h=t('');if(g=t('
')).appendTo(v),d){var y=t("").text(d.label);(m=t('").append(y))}t.each(c||[],(function(n,r){"object"===e(r)?g.append(t("
").val(r.value).html(r.text)):g.append(t(" ").html(r))})),i.append(v),l&&g.val(l),u&&g.bind("change","return",u),g.bind("keydown","return",(function(){h.click()}))}else"process"===o&&h.hide();r.show(),h.click((function(){r.hide();var e="prompt"!==o&&"select"!==o||g.val();f(m?{response:e,checked:m.prop("checked")}:e)})).focus(),"prompt"!==o&&"select"!==o||g.focus()}))}return t.alert=function(e){return o("alert",e)},t.confirm=function(e){return o("confirm",e)},t.process_cancel=function(e){return o("process",e)},t.prompt=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"";return o("prompt",e,t)},t.select=function(e,t,n,r,a){return o("select",e,r,t,n,a)},t}var mn=jQuery,vn=function(){function e(t,n,a){if(r(this,e),this.name_=t,this.group_=a?null:n,a){var i=a.ownerDocument;this.group_=i.createElementNS(p.SVG,"g");var o=i.createElementNS(p.SVG,"title");o.textContent=t,this.group_.append(o),n?mn(n).after(this.group_):a.append(this.group_)}yn(this.group_),Tt(this.group_,(function(e){e.setAttribute("style","pointer-events:inherit")})),this.group_.setAttribute("style",a?"pointer-events:all":"pointer-events:none")}return i(e,[{key:"getName",value:function(){return this.name_}},{key:"getGroup",value:function(){return this.group_}},{key:"activate",value:function(){this.group_.setAttribute("style","pointer-events:all")}},{key:"deactivate",value:function(){this.group_.setAttribute("style","pointer-events:none")}},{key:"setVisible",value:function(e){var t=void 0===e||e?"inline":"none";this.group_.getAttribute("display")!==t&&this.group_.setAttribute("display",t)}},{key:"isVisible",value:function(){return"none"!==this.group_.getAttribute("display")}},{key:"getOpacity",value:function(){var e=this.group_.getAttribute("opacity");return nn(e)?1:parseFloat(e)}},{key:"setOpacity",value:function(e){"number"==typeof e&&e>=0&&e<=1&&this.group_.setAttribute("opacity",e)}},{key:"appendChildren",value:function(e){var t=!0,n=!1,r=void 0;try{for(var a,i=e[Symbol.iterator]();!(t=(a=i.next()).done);t=!0){var o=a.value;this.group_.append(o)}}catch(e){n=!0,r=e}finally{try{t||null==i.return||i.return()}finally{if(n)throw r}}}},{key:"getTitleElement",value:function(){for(var e=this.group_.childNodes.length,t=0;t element");this.svgElem_=t,this.obj_num=0,this.idPrefix=n||"svg_",this.releasedNums=[],this.all_layers=[],this.layer_map={},this.current_layer=null,this.nonce_="";var a=this.svgElem_.getAttributeNS(p.SE,"nonce");a&&kn!==Sn?this.nonce_=a:kn===wn&&this.setNonce(Math.floor(100001*Math.random()))}return i(e,[{key:"getElem_",value:function(e){return this.svgElem_.querySelector?this.svgElem_.querySelector("#"+e):bn(this.svgElem_).find("[id="+e+"]")[0]}},{key:"getSvgElem",value:function(){return this.svgElem_}},{key:"getNonce",value:function(){return this.nonce_}},{key:"setNonce",value:function(e){this.svgElem_.setAttributeNS(p.XMLNS,"xmlns:se",p.SE),this.svgElem_.setAttributeNS(p.SE,"se:nonce",e),this.nonce_=e}},{key:"clearNonce",value:function(){this.nonce_=""}},{key:"getId",value:function(){return this.nonce_?this.idPrefix+this.nonce_+"_"+this.obj_num:this.idPrefix+this.obj_num}},{key:"getNextId",value:function(){var e=this.obj_num,t=!1;this.releasedNums.length>0?(this.obj_num=this.releasedNums.pop(),t=!0):this.obj_num++;for(var n=this.getId();this.getElem_(n);)t&&(this.obj_num=e,t=!1),this.obj_num++,n=this.getId();return t&&(this.obj_num=e),n}},{key:"releaseId",value:function(e){var t=this.idPrefix+(this.nonce_?this.nonce_+"_":"");if("string"!=typeof e||!e.startsWith(t))return!1;var n=parseInt(e.substr(t.length));return!("number"!=typeof n||n<=0||this.releasedNums.includes(n))&&(this.releasedNums.push(n),!0)}},{key:"getNumLayers",value:function(){return this.all_layers.length}},{key:"hasLayer",value:function(e){return void 0!==this.layer_map[e]}},{key:"getLayerName",value:function(e){return e>=0&&e=n)return null;for(t=0;tt?e0){var s=this.current_layer.getName();this.current_layer=this.all_layers[o-1],this.all_layers.splice(o,1),delete this.layer_map[s]}e.endBatchCommand()}}},{key:"mergeAllLayers",value:function(e){for(this.current_layer=this.all_layers[this.all_layers.length-1],e.startBatchCommand("Merge all Layers");this.all_layers.length>1;)this.mergeLayer(e);e.endBatchCommand()}},{key:"setCurrentLayer",value:function(e){var t=this.layer_map[e];return!!t&&(this.current_layer&&this.current_layer.deactivate(),this.current_layer=t,this.current_layer.activate(),!0)}},{key:"deleteCurrentLayer",value:function(){if(this.current_layer&&this.getNumLayers()>1){var e=this.current_layer.removeGroup();return this.identifyLayers(),e}return null}},{key:"identifyLayers",value:function(){this.all_layers=[],this.layer_map={};for(var e=this.svgElem_.childNodes.length,t=[],n=[],r=null,a=!1,i=0;i0||!a?((r=new vn(Gn(n),null,this.svgElem_)).appendChildren(t),this.all_layers.push(r),this.layer_map[name]=r):r.activate(),this.current_layer=r}},{key:"createLayer",value:function(e,t){this.current_layer&&this.current_layer.deactivate(),(null==e||""===e||this.layer_map[e])&&(e=Gn(Object.keys(this.layer_map)));var n=new vn(e,null,this.svgElem_);return t&&(t.startBatchCommand("Create Layer"),t.insertElement(n.getGroup()),t.endBatchCommand()),this.all_layers.push(n),this.layer_map[e]=n,this.current_layer=n,n.getGroup()}},{key:"cloneLayer",value:function(e,t){var n=this;if(!this.current_layer)return null;this.current_layer.deactivate(),(null==e||""===e||this.layer_map[e])&&(e=Gn(Object.keys(this.layer_map)));var r=this.current_layer.getGroup(),a=new vn(e,r,this.svgElem_),i=a.getGroup();h(r.childNodes).forEach((function(e){"title"!==e.localName&&i.append(n.copyElem(e))})),t&&(t.startBatchCommand("Duplicate Layer"),t.insertElement(i),t.endBatchCommand());var o=this.all_layers.indexOf(this.current_layer);return o>=0?this.all_layers.splice(o+1,0,a):this.all_layers.push(a),this.layer_map[e]=a,this.current_layer=a,i}},{key:"getLayerVisibility",value:function(e){var t=this.layer_map[e];return!!t&&t.isVisible()}},{key:"setLayerVisibility",value:function(e,t){if("boolean"!=typeof t)return null;var n=this.layer_map[e];return n?(n.setVisible(t),n.getGroup()):null}},{key:"getLayerOpacity",value:function(e){var t=this.layer_map[e];return t?t.getOpacity():null}},{key:"setLayerOpacity",value:function(e,t){if(!("number"!=typeof t||t<0||t>1)){var n=this.layer_map[e];n&&n.setOpacity(t)}}},{key:"copyElem",value:function(e){var t=this;return function e(t,n){var r=document.createElementNS(t.namespaceURI,t.nodeName);if(pt.each(t.attributes,(function(e,t){"-moz-math-font-style"!==t.localName&&r.setAttributeNS(t.namespaceURI,t.nodeName,t.value)})),r.removeAttribute("id"),r.id=n(),j()&&"path"===t.nodeName){var a=ot(t);r.setAttribute("d",a)}if(pt.each(t.childNodes,(function(t,a){switch(a.nodeType){case 1:r.append(e(a,n));break;case 3:r.textContent=a.nodeValue}})),pt(t).data("gsvg"))pt(r).data("gsvg",r.firstChild);else if(pt(t).data("symbol")){var i=pt(t).data("symbol");pt(r).data("ref",i).data("symbol",i)}else"image"===r.tagName&&tn(r);return r}(e,(function(){return t.getNextId()}))}}]),e}(),Tn=function(e,t){(kn=!1===e?Sn:wn)!==wn||t.getNonce()?kn===Sn&&t.getNonce()&&t.clearNonce():t.setNonce(Math.floor(100001*Math.random()))},Nn=function(){Hn(),Pn.getCurrentDrawing().identifyLayers()},Ln=function(e,t){var n=Pn.getCurrentDrawing().createLayer(e,An(t));Pn.clearSelection(),Pn.call("changed",[n])},Mn=function(e,t){var n=Pn.getCurrentDrawing().cloneLayer(e,An(t));Pn.clearSelection(),Hn(),Pn.call("changed",[n])},On=function(){var e=Pn.getCurrentDrawing().getCurrentLayer(),t=e.nextSibling,n=e.parentNode;if(e=Pn.getCurrentDrawing().deleteCurrentLayer()){var r=new fe("Delete Layer");return r.addSubCommand(new de(e,t,n)),Pn.addCommandToHistory(r),Pn.clearSelection(),Pn.call("changed",[n]),!0}return!1},jn=function(e){var t=Pn.getCurrentDrawing().setCurrentLayer(wt(e));return t&&Pn.clearSelection(),t},Vn=function(e){var t=Pn.getCurrentDrawing(),n=t.getCurrentLayer();if(n&&t.setCurrentLayerName(e,An()))return Pn.call("changed",[n]),!0;return!1},Rn=function(e){var t=Pn.getCurrentDrawing().setCurrentLayerPosition(e);return!!t&&(Pn.addCommandToHistory(new ce(t.currentGroup,t.oldNextSibling,Pn.getSVGContent())),!0)},Bn=function(e,t){var n=Pn.getCurrentDrawing(),r=n.getLayerVisibility(e),a=n.setLayerVisibility(e,t);if(!a)return!1;var i=r?"inline":"none";return Pn.addCommandToHistory(new he(a,{display:i},"Layer Visibility")),a===n.getCurrentLayer()&&(Pn.clearSelection(),Pn.pathActions.clear()),!0},Un=function(e){var t=Pn.getCurrentDrawing().getLayerByName(e);if(!t)return!1;for(var n=new fe("Move Elements to Layer"),r=Pn.getSelectedElements(),a=r.length;a--;){var i=r[a];if(i){var o=i.nextSibling,s=i.parentNode;t.append(i),n.addSubCommand(new ce(i,o,s))}}return Pn.addCommandToHistory(n),!0},Fn=function(e){Pn.getCurrentDrawing().mergeLayer(An(e)),Pn.clearSelection(),Hn(),Pn.changeSVGContent()},Dn=function(e){Pn.getCurrentDrawing().mergeAllLayers(An(e)),Pn.clearSelection(),Hn(),Pn.changeSVGContent()},Hn=function(){var e=Cn.length;if(e){for(var t=0;t0){for(var a=r.numberOfItems,i=a;a--;){var o=r.getItem(a);if(0===o.type)r.removeItem(a);else if(1===o.type){if(Se(o.matrix)){if(1===i)return t.removeAttribute("transform"),null;r.removeItem(a)}}else 4===o.type&&0===o.angle&&r.removeItem(a)}if(1===r.numberOfItems&&Qt(t))return null}if(!r||0===r.numberOfItems)return t.setAttribute("transform",""),t.removeAttribute("transform"),null;if(r){for(var s=[],l=r.numberOfItems;l--;){var c=r.getItem(l);1===c.type?s.push([c.matrix,l]):s.length&&(s=[])}if(2===s.length){var u=n.createSVGTransformFromMatrix(ke(s[1][0],s[0][0]));r.removeItem(s[0][1]),r.removeItem(s[1][1]),r.insertItemBefore(u,s[1][1])}if((l=r.numberOfItems)>=2&&1===r.getItem(l-2).type&&2===r.getItem(l-1).type){var d=n.createSVGTransform(),h=ke(r.getItem(l-2).matrix,r.getItem(l-1).matrix);d.setMatrix(h),r.removeItem(l-2),r.removeItem(l-2),r.appendItem(d)}}switch(t.tagName){case"line":case"polyline":case"polygon":case"path":break;default:if(1===r.numberOfItems&&1===r.getItem(0).type||2===r.numberOfItems&&1===r.getItem(0).type&&4===r.getItem(0).type)return null}var f,g,m=rr(t).data("gsvg"),v=new fe("Transform"),y={},_=null,b=[];switch(t.tagName){case"line":b=["x1","y1","x2","y2"];break;case"circle":b=["cx","cy","r"];break;case"ellipse":b=["cx","cy","rx","ry"];break;case"foreignObject":case"rect":case"image":b=["width","height","x","y"];break;case"use":case"text":case"tspan":b=["x","y"];break;case"polygon":case"polyline":(_={}).points=t.getAttribute("points");var x=t.points,w=x.numberOfItems;y.points=new Array(w);for(var S=0;S1e-10?Math.sin(G)/(1-Math.cos(G)):2/G;for(var P=0;P=3&&3===r.getItem(M-2).type&&2===r.getItem(M-3).type&&2===r.getItem(M-1).type){R=3;for(var B=r.getItem(M-3).matrix,U=r.getItem(M-2).matrix,F=r.getItem(M-1).matrix,D=t.childNodes,H=D.length;H--;){var z=D.item(H);if(O=0,V=0,1===z.nodeType){var q=K(z);if(!q)continue;var Y=Ee(q).matrix,X=Qt(z);if(L=Wn.getStartTransform(),Wn.setStartTransform(z.getAttribute("transform")),X||Ce(q)){var W=n.createSVGTransform();W.setMatrix(ke(B,U,F,Y)),q.clear(),q.appendItem(W)}else{var Q=ke(Y.inverse(),F,Y),Z=n.createSVGMatrix();Z.e=-Q.e,Z.f=-Q.f;var $=ke(Z.inverse(),Y.inverse(),B,U,F,Y,Q.inverse()),J=n.createSVGTransform(),ee=n.createSVGTransform(),te=n.createSVGTransform();J.setTranslate(Q.e,Q.f),ee.setScale($.a,$.d),te.setTranslate(Z.e,Z.f),q.appendItem(te),q.appendItem(ee),q.appendItem(J)}v.addSubCommand(e(z)),Wn.setStartTransform(L)}}r.removeItem(M-1),r.removeItem(M-2),r.removeItem(M-3)}else if(M>=3&&1===r.getItem(M-1).type){R=3;var ne=Ee(r).matrix,re=n.createSVGTransform();re.setMatrix(ne),r.clear(),r.appendItem(re)}else if((1===M||M>1&&3!==r.getItem(1).type)&&2===r.getItem(0).type){R=2;var ae=Ee(r).matrix;r.removeItem(0);var oe=Ee(r).matrix.inverse(),se=ke(oe,ae);if(O=se.e,V=se.f,0!==O||0!==V){for(var le=t.childNodes,ce=le.length,ue=[];ce--;){var de=le.item(ce);if(1===de.nodeType){if(de.getAttribute("clip-path")){var pe=de.getAttribute("clip-path");ue.includes(pe)||(ar(pe,O,V),ue.push(pe))}L=Wn.getStartTransform(),Wn.setStartTransform(de.getAttribute("transform"));var ge=K(de);if(ge){var me=n.createSVGTransform();me.setTranslate(O,V),ge.numberOfItems?ge.insertItemBefore(me,0):ge.appendItem(me),v.addSubCommand(e(de));for(var ve=t.getElementsByTagNameNS(p.SVG,"use"),ye="#"+de.id,_e=ve.length;_e--;){var be=ve.item(_e);if(ye===Lt(be)){var xe=n.createSVGTransform();xe.setTranslate(-O,-V),K(be).insertItemBefore(xe,0),v.addSubCommand(e(be))}}Wn.setStartTransform(L)}}}Wn.setStartTransform(L)}}else{if(1!==M||1!==r.getItem(0).type||A){if(A){var Ae=n.createSVGTransform();Ae.setRotate(A,g.x,g.y),r.numberOfItems?r.insertItemBefore(Ae,0):r.appendItem(Ae)}return 0===r.numberOfItems&&t.removeAttribute("transform"),null}R=1;for(var Ge=r.getItem(0).matrix,Pe=t.childNodes,Ie=Pe.length;Ie--;){var Te=Pe.item(Ie);if(1===Te.nodeType){L=Wn.getStartTransform(),Wn.setStartTransform(Te.getAttribute("transform"));var Ne=K(Te);if(!Ne)continue;var Le=ke(Ge,Ee(Ne).matrix),Me=n.createSVGTransform();Me.setMatrix(Le),Ne.clear(),Ne.appendItem(Me,0),v.addSubCommand(e(Te)),Wn.setStartTransform(L);var Oe=Te.getAttribute("stroke-width");if("none"!==Te.getAttribute("stroke")&&!isNaN(Oe)){var je=(Math.abs(Le.a)+Math.abs(Le.d))/2;Te.setAttribute("stroke-width",Oe*je)}}}r.clear()}if(2===R){if(A){g={x:f.x+N.e,y:f.y+N.f};var Ve=n.createSVGTransform();Ve.setRotate(A,g.x,g.y),r.numberOfItems?r.insertItemBefore(Ve,0):r.appendItem(Ve)}}else if(3===R){var Re=Ee(r).matrix,Be=n.createSVGTransform();Be.setRotate(A,f.x,f.y);var Ue=Be.matrix,Fe=n.createSVGTransform();Fe.setRotate(A,g.x,g.y);var De=Fe.matrix.inverse(),He=Re.inverse(),ze=ke(He,De,Ue,Re);if(O=ze.e,V=ze.f,0!==O||0!==V)for(var qe=t.childNodes,Ye=qe.length;Ye--;){var Xe=qe.item(Ye);if(1===Xe.nodeType){L=Wn.getStartTransform(),Wn.setStartTransform(Xe.getAttribute("transform"));var We=K(Xe),Qe=n.createSVGTransform();Qe.setTranslate(O,V),We.numberOfItems?We.insertItemBefore(Qe,0):We.appendItem(Qe),v.addSubCommand(e(Xe)),Wn.setStartTransform(L)}}A&&(r.numberOfItems?r.insertItemBefore(Fe,0):r.appendItem(Fe))}}else{var Ke,Ze=Rt(t);if(!Ze&&"path"!==t.tagName)return null;var $e=Qt(t);if($e){f={x:Ze.x+Ze.width/2,y:Ze.y+Ze.height/2},g=we(Ze.x+Ze.width/2,Ze.y+Ze.height/2,Ee(r).matrix);for(var Je=$e*Math.PI/180,et=Math.abs(Je)>1e-10?Math.sin(Je)/(1-Math.cos(Je)):2/Je,tt=0;tt=3&&3===r.getItem(it-2).type&&2===r.getItem(it-3).type&&2===r.getItem(it-1).type)at=3,Ke=Ee(r,it-3,it-1).matrix,r.removeItem(it-1),r.removeItem(it-2),r.removeItem(it-3);else if(4===it&&1===r.getItem(it-1).type){at=3,Ke=Ee(r).matrix;var ht=n.createSVGTransform();ht.setMatrix(Ke),r.clear(),r.appendItem(ht),Ke=n.createSVGMatrix()}else if((1===it||it>1&&3!==r.getItem(1).type)&&2===r.getItem(0).type){at=2;var ft=r.getItem(0).matrix,pt=Ee(r,1).matrix,gt=pt.inverse();Ke=ke(gt,ft,pt),r.removeItem(0)}else{if(1!==it||1!==r.getItem(0).type||$e){if($e){var mt=n.createSVGTransform();mt.setRotate($e,g.x,g.y),r.numberOfItems?r.insertItemBefore(mt,0):r.appendItem(mt)}return 0===r.numberOfItems&&t.removeAttribute("transform"),null}switch(Ke=Ee(r).matrix,t.tagName){case"line":y=rr(t).attr(["x1","y1","x2","y2"]);case"polyline":case"polygon":if(y.points=t.getAttribute("points"),y.points){var vt=t.points,yt=vt.numberOfItems;y.points=new Array(yt);for(var _t=0;_t0;)t.push(t.shift()),n--;Object.values(Zn.selectorGrips).forEach((function(e,n){e.setAttribute("style","cursor:"+t[n]+"-resize")}))}}]),e}(),cr=function(){function t(){r(this,t),this.selectorParentGroup=null,this.rubberBandBox=null,this.selectors=[],this.selectorMap={},this.selectorGrips={nw:null,n:null,ne:null,e:null,se:null,s:null,sw:null,w:null},this.selectorGripsGroup=null,this.rotateGripConnector=null,this.rotateGrip=null,this.initGroup()}return i(t,[{key:"initGroup",value:function(){var e=this;if(this.selectorParentGroup&&this.selectorParentGroup.parentNode&&this.selectorParentGroup.remove(),this.selectorParentGroup=Qn.createSVGElement({element:"g",attr:{id:"selectorParentGroup"}}),this.selectorGripsGroup=Qn.createSVGElement({element:"g",attr:{display:"none"}}),this.selectorParentGroup.append(this.selectorGripsGroup),Qn.svgRoot().append(this.selectorParentGroup),this.selectorMap={},this.selectors=[],this.rubberBandBox=null,Object.keys(this.selectorGrips).forEach((function(t){var n=Qn.createSVGElement({element:"circle",attr:{id:"selectorGrip_resize_"+t,fill:"#22C",r:sr,style:"cursor:"+t+"-resize","stroke-width":2,"pointer-events":"all"}});or.data(n,"dir",t),or.data(n,"type","resize"),e.selectorGrips[t]=e.selectorGripsGroup.appendChild(n)})),this.rotateGripConnector=this.selectorGripsGroup.appendChild(Qn.createSVGElement({element:"line",attr:{id:"selectorGrip_rotateconnector",stroke:"#22C","stroke-width":"1"}})),this.rotateGrip=this.selectorGripsGroup.appendChild(Qn.createSVGElement({element:"circle",attr:{id:"selectorGrip_rotate",fill:"lime",r:sr,stroke:"#22C","stroke-width":2,style:"cursor:url("+Kn.imgPath+"rotate.png) 12 12, auto;"}})),or.data(this.rotateGrip,"type","rotate"),!or("#canvasBackground").length){var t=d(Kn.dimensions,2),n=t[0],r=t[1],a=Qn.createSVGElement({element:"svg",attr:{id:"canvasBackground",width:n,height:r,x:0,y:0,overflow:j()?"none":"visible",style:"pointer-events:none"}}),i=Qn.createSVGElement({element:"rect",attr:{width:"100%",height:"100%",x:0,y:0,"stroke-width":1,stroke:"#000",fill:"#FFF",style:"pointer-events:none"}});a.append(i),Qn.svgRoot().insertBefore(a,Qn.svgContent())}}},{key:"requestSelector",value:function(t,n){if(nn(t))return null;var r=this.selectors.length;if("object"===e(this.selectorMap[t.id]))return this.selectorMap[t.id].locked=!0,this.selectorMap[t.id];for(var a=0;a1&&o.showGrips(!1)}}}for(Q("selected",w),t||1===w.length?H.requestSelector(w[0]).showGrips(!0):H.requestSelector(w[0]).showGrips(!1),w.sort((function(e,t){return e&&t&&e.compareDocumentPosition?3-(6&t.compareDocumentPosition(e)):nn(e)?1:0}));nn(w[0]);)w.shift(0)}},J=function(){return x.opacity},ae=this.getMouseTarget=function(e){if(nn(e))return null;var t=e.target;if(t.correspondingUseElement&&(t=t.correspondingUseElement),[p.MATH,p.HTML].includes(t.namespaceURI)&&"svgcanvas"!==t.id)for(;"foreignObject"!==t.nodeName;)if(!(t=t.parentNode))return u;var n=v().getCurrentLayer();if([u,a,f,n].includes(t))return u;if(ur(t).closest("#selectorParentGroup").length)return H.selectorParentGroup;for(;t.parentNode!==(_||n);)t=t.parentNode;return t};l.pathActions=P,Ue({selectorManager:H,canvas:l,call:Q,resetD:function(e){e.setAttribute("d",P.convertPath(e))},round:F,clearSelection:Z,addToSelection:$,addCommandToHistory:O,remapElement:nr,addSVGElementFromJson:k,getGridSnapping:N,getOpacity:J,getSelectedElements:G,getContainer:function(){return a},setStarted:function(e){_e=e},getRubberBox:function(){return je},setRubberBox:function(e){return je=e},addPtsToSelection:function(e){var t=e.closedSubpath,n=e.grips;P.canDeleteNodes=!0,P.closed_subpath=t,Q("pointsAdded",{closedSubpath:t,grips:n}),Q("selected",n)},endChanges:function(e){var t=e.cmd,n=e.elem;O(t),Q("changed",[n])},getCurrentZoom:U,getId:q,getNextId:z,getMouseTarget:ae,getCurrentMode:function(){return Te},setCurrentMode:function(e){return Te=e},getDrawnPath:function(){return mt},setDrawnPath:function(e){return mt=e},getSVGRoot:I});var oe={},se="a,circle,ellipse,foreignObject,g,image,line,path,polygon,polyline,rect,svg,text,tspan,use",le=["clip-path","fill","filter","marker-end","marker-mid","marker-start","mask","stroke"],ce=ur.data,ue=document.createElementNS(p.SVG,"animate");ur(ue).attr({attributeName:"opacity",begin:"indefinite",dur:1,fill:"freeze"}).appendTo(u);var de=function e(t){var n=ur(t).attr(le);Object.values(n).forEach((function(e){if(e&&e.startsWith("url(")){var t=Nt(e).substr(1);Zt(t)||(Ot().append(ve[t]),delete ve[t])}}));var r=t.getElementsByTagName("*");if(r.length)for(var a=0,i=r.length;a0&&(4===s.getItem(0).type&&s.removeItem(0));if(0!==e){var l=we(i,o,Ee(s).matrix),c=u.createSVGTransform();c.setRotate(e,l.x,l.y),s.numberOfItems?s.insertItemBefore(c,0):s.appendItem(c)}else 0===s.numberOfItems&&n.removeAttribute("transform");if(!t){var d=n.getAttribute("transform");n.setAttribute("transform",r),cn("transform",d,w),Q("changed",w)}H.requestSelector(w[0]).resize(),lr.updateGripCursors(e)};var We=this.recalculateAllSelectedDimensions=function(){for(var e=new gr("none"===Ne?"position":"size"),t=w.length;t--;){var n=w[t],r=ir(n);r&&e.addSubCommand(r)}e.isEmpty()||(O(e),Q("changed",w))},Qe=function(e){console.log([e.a,e.b,e.c,e.d,e.e,e.f])},Ke=null,Ze=this.selectOnly=function(e,t){Z(!0),$(e,t)};this.removeFromSelection=function(e){if(!nn(w[0])&&e.length){for(var t=[],n=w.length,r=0;r0&&l.removeFromSelection(E),G.length>0&&l.addToSelection(G);break;case"resize":p=K(g);var L=Ce(p),M=(h=L?it:Rt(g)).x,O=h.y,j=h,V=j.width,R=j.height;if(i=S-et,s=C-tt,o.gridSnapping&&(i=en(i),s=en(s),R=en(R),V=en(V)),d=Qt(g)){var B=Math.sqrt(i*i+s*s),U=Math.atan2(s,i)-d*Math.PI/180;i=B*Math.cos(U),s=B*Math.sin(U)}Ne.includes("n")||Ne.includes("s")||(s=0),Ne.includes("e")||Ne.includes("w")||(i=0);var F=0,D=0,z=R?(R+s)/R:1,Y=V?(V+i)/V:1;Ne.includes("n")&&(z=R?(R-s)/R:1,D=R),Ne.includes("w")&&(Y=V?(V-i)/V:1,F=V);var X=u.createSVGTransform(),W=u.createSVGTransform(),Z=u.createSVGTransform();if(o.gridSnapping&&(M=en(M),F=en(F),O=en(O),D=en(D)),X.setTranslate(-(M+F),-(O+D)),e.shiftKey&&(1===Y?Y=z:z=Y),W.setScale(Y,z),Z.setTranslate(M+F,O+D),L){var $=d?1:0;p.replaceItem(X,2+$),p.replaceItem(W,1+$),p.replaceItem(Z,Number($))}else{var J=p.numberOfItems;p.replaceItem(Z,J-3),p.replaceItem(W,J-2),p.replaceItem(X,J-1)}H.requestSelector(g).resize(),Q("transition",w);break;case"zoom":x*=y,k*=y,$t(je,{x:Math.min(rt*y,x),y:Math.min(at*y,k),width:Math.abs(x-rt*y),height:Math.abs(k-at*y)});break;case"text":$t(b,{x:S,y:C});break;case"line":o.gridSnapping&&(S=en(S),C=en(C));var ee=S,te=C;e.shiftKey&&(ee=(n=Pe(et,tt,ee,te)).x,te=n.y),b.setAttribute("x2",ee),b.setAttribute("y2",te);break;case"foreignObject":case"square":case"rect":case"image":var ne,re,ae="square"===Te||e.shiftKey,ie=Math.abs(S-et),oe=Math.abs(C-tt);ae?(ie=oe=Math.max(ie,oe),ne=et.8){ot-=.8;var de=f.createSVGPoint();de.x=dt.x,de.y=dt.y,b.points.appendItem(de)}st={x:lt.x,y:lt.y},lt={x:ct.x,y:ct.y},ct={x:ut.x,y:ut.y};break;case"path":case"pathedit":if(S*=y,C*=y,o.gridSnapping&&(S=en(S),C=en(C),et=en(et),tt=en(tt)),e.shiftKey){var he,fe,pe=Re;pe?(he=pe.dragging?pe.dragging[0]:et,fe=pe.dragging?pe.dragging[1]:tt):(he=et,fe=tt);var ge=n=Pe(he,fe,S,C);S=ge.x,C=ge.y}je&&"none"!==je.getAttribute("display")&&(x*=y,k*=y,$t(je,{x:Math.min(rt*y,x),y:Math.min(at*y,k),width:Math.abs(x-rt*y),height:Math.abs(k-at*y)})),P.mouseMove(S,C);break;case"textedit":S*=y,C*=y,At.mouseMove(v,_);break;case"rotate":r=(h=Rt(g)).x+h.width/2,a=h.y+h.height/2;var me=Ge(g),ve=we(r,a,me);r=ve.x,a=ve.y,d=(Math.atan2(a-C,r-S)*(180/Math.PI)-90)%360,o.gridSnapping&&(d=en(d)),e.shiftKey&&(d=45*Math.round(d/45)),l.setRotationAngle(d<-180?360+d:d,!0),Q("transition",w)}De("mouseMove",{event:e,mouse_x:v,mouse_y:_,selected:g})}})).click((function(e){return e.preventDefault(),!1})).dblclick((function(e){var t=e.target.parentNode;if(t!==_){var n=ae(e),r=n.tagName;if("text"===r&&"textedit"!==Te){var a=we(e.pageX,e.pageY,Ke);At.select(n,a.x,a.y)}"g"!==r&&"a"!==r||!Qt(n)||(dn(n),n=w[0],Z(!0)),_&&Hn(),"g"!==t.tagName&&"a"!==t.tagName||t===v().getCurrentLayer()||n===H.selectorParentGroup||zn(n)}})).mouseup((function(e){if(2!==e.button){var t=Oe;if(Oe=null,_e){var n,r,a=we(e.pageX,e.pageY,Ke),i=a.x*y,s=a.y*y,c=i/y,u=s/y,d=Zt(q()),h=!1,f=c,p=u;switch(_e=!1,Te){case"resize":case"multiselect":nn(je)||(je.setAttribute("display","none"),Be=[]),Te="select";case"select":if(!nn(w[0])){if(nn(w[1])){var g=w[0];switch(g.tagName){case"g":case"use":case"image":case"foreignObject":break;default:Le.fill=g.getAttribute("fill"),Le.fill_opacity=g.getAttribute("fill-opacity"),Le.stroke=g.getAttribute("stroke"),Le.stroke_opacity=g.getAttribute("stroke-opacity"),Le.stroke_width=g.getAttribute("stroke-width"),Le.stroke_dasharray=g.getAttribute("stroke-dasharray"),Le.stroke_linejoin=g.getAttribute("stroke-linejoin"),Le.stroke_linecap=g.getAttribute("stroke-linecap")}"text"===g.tagName&&(ge.font_size=g.getAttribute("font-size"),ge.font_family=g.getAttribute("font-family")),H.requestSelector(g).showGrips(!0)}if(We(),f!==rt||p!==at)for(var m=w.length,_=0;_=0?C.includes(",",A+1):C.includes(" ",C.indexOf(" ")+1))&&(d=P.smoothPolylineIntoPath(d));break;case"line":n=ur(d).attr(["x1","x2","y1","y2"]),h=n.x1!==n.x2||n.y1!==n.y2;break;case"foreignObject":case"square":case"rect":case"image":n=ur(d).attr(["width","height"]),h=n.width||n.height||"image"===Te;break;case"circle":h="0"!==d.getAttribute("r");break;case"ellipse":n=ur(d).attr(["rx","ry"]),h=n.rx||n.ry;break;case"fhellipse":Je.maxx-Je.minx>0&&Je.maxy-Je.miny>0&&(d=k({element:"ellipse",curStyles:!0,attr:{cx:(Je.minx+Je.maxx)/2,cy:(Je.miny+Je.maxy)/2,rx:(Je.maxx-Je.minx)/2,ry:(Je.maxy-Je.miny)/2,id:q()}}),Q("changed",[d]),h=!0);break;case"fhrect":Je.maxx-Je.minx>0&&Je.maxy-Je.miny>0&&(d=k({element:"rect",curStyles:!0,attr:{x:Je.minx,y:Je.miny,width:Je.maxx-Je.minx,height:Je.maxy-Je.miny,id:q()}}),Q("changed",[d]),h=!0);break;case"text":h=!0,Ze([d]),At.start(d);break;case"path":d=null,_e=!0;var E=P.mouseUp(e,d,i,s);d=E.element,h=E.keep;break;case"pathedit":h=!0,d=null,P.mouseUp(e);break;case"textedit":h=!1,d=null,At.mouseUp(e,i,s);break;case"rotate":h=!0,d=null,Te="select";var G=l.undoMgr.finishUndoableChange();G.isEmpty()||O(G),We(),Q("changed",w)}var I=De("mouseUp",{event:e,mouse_x:i,mouse_y:s},!0);if(ur.each(I,(function(e,t){t&&(h=t.keep||h,d=t.element,_e=t.started||_e)})),h||nn(d)){if(!nn(d)){l.addedNew=!0;var T,N=.2;if(ue.beginElement&&parseFloat(d.getAttribute("opacity"))!==x.opacity){T=ur(ue).clone().attr({to:x.opacity,dur:N}).appendTo(d);try{T[0].beginElement()}catch(e){}}else N=0;setTimeout((function(){T&&T.remove(),d.setAttribute("opacity",x.opacity),d.setAttribute("style","pointer-events:inherit"),Jt(d),"path"===Te?P.toEditMode(d):o.selectNew&&Ze([d],!0),O(new hr(d)),Q("changed",[d])}),1e3*N)}}else{for(v().releaseId(q()),d.remove(),d=null,r=e.target;r&&r.parentNode&&r.parentNode.parentNode&&"g"===r.parentNode.parentNode.tagName;)r=r.parentNode;"path"===Te&&mt||!r||!r.parentNode||"selectorParentGroup"===r.parentNode.id||"svgcanvas"===r.id||"svgroot"===r.id||(l.setMode("select"),Ze([r],!0))}xe=null}}})),ur(a).bind("mousewheel DOMMouseScroll",(function(e){if(e.shiftKey){e.preventDefault();var t=e.originalEvent;Ke=ur("#svgcontent g")[0].getScreenCTM().inverse();var n=ur("#workarea"),r=o.showRulers?16:0,a=we(t.pageX,t.pageY,Ke),i=n.width(),s=n.height(),c=i-15-r,u=s-15-r,d=c*Ke.a,h=u*Ke.d,f=n.offset(),p=f.left+r,g=f.top+r,m=t.wheelDelta?t.wheelDelta:t.detail?-t.detail:0;if(m){var v,_,b=Math.max(.75,Math.min(4/3,m));b>1?(v=Math.ceil(c/d*b*100)/100,_=Math.ceil(u/h*b*100)/100):(v=Math.floor(c/d*b*100)/100,_=Math.floor(u/h*b*100)/100);var x=Math.min(v,_);if((x=Math.min(10,Math.max(.01,x)))!==y){b=x/y;var w=we(p,g,Ke),S={x:(a.x-(a.x-w.x)/b)*x-r+i/2,y:(a.y-(a.y-w.y)/b)*x-r+s/2};l.setZoom(x),ur("#zoom").val((100*x).toFixed(1)),Q("updateCanvas",{center:!1,newCtr:S}),Q("zoomDone")}}}}));var Ct,At=l.textActions=function(){var e,t,n,r,a,i,o,s,c,d,h=[];function f(e){var o=""===t.value;if(ur(t).focus(),!arguments.length)if(o)e=0;else{if(t.selectionEnd!==t.selectionStart)return;e=t.selectionEnd}var s=h[e];o||t.setSelectionRange(e,e),(n=Zt("text_cursor"))||(n=document.createElementNS(p.SVG,"line"),$t(n,{id:"text_cursor",stroke:"#333","stroke-width":1}),n=Zt("selectorParentGroup").appendChild(n)),a||(a=setInterval((function(){var e="none"===n.getAttribute("display");n.setAttribute("display",e?"inline":"none")}),600));var l=x(s.x,i.y),c=x(s.x,i.y+i.height);$t(n,{x1:l.x,y1:l.y,x2:c.x,y2:c.y,visibility:"visible",display:"inline"}),r&&r.setAttribute("d","")}function g(e,a,o){if(e!==a){o||t.setSelectionRange(e,a),(r=Zt("text_selectblock"))||(r=document.createElementNS(p.SVG,"path"),$t(r,{id:"text_selectblock",fill:"green",opacity:.5,style:"pointer-events:none"}),Zt("selectorParentGroup").append(r));var s=h[e],l=h[a];n.setAttribute("visibility","hidden");var c=x(s.x,i.y),u=x(s.x+(l.x-s.x),i.y),d=x(s.x,i.y+i.height),g=x(s.x+(l.x-s.x),i.y+i.height),m="M"+c.x+","+c.y+" L"+u.x+","+u.y+" "+g.x+","+g.y+" "+d.x+","+d.y+"z";$t(r,{d:m,display:"inline"})}else f(a)}function m(t,n){var r=u.createSVGPoint();if(r.x=t,r.y=n,1===h.length)return 0;var a=e.getCharNumAtPosition(r);a<0?(a=h.length-2,t<=h[0].x&&(a=0)):a>=h.length-2&&(a=h.length-2);var i=h[a];return t>i.x+i.width/2&&a++,a}function v(e,t){f(m(e,t))}function _(e,n,r){var a=t.selectionStart,i=m(e,n);g(Math.min(a,i),Math.max(a,i),!r)}function b(e,t){var n={x:e,y:t};if(n.x/=y,n.y/=y,o){var r=we(n.x,n.y,o.inverse());n.x=r.x,n.y=r.y}return n}function x(e,t){var n={x:e,y:t};if(o){var r=we(n.x,n.y,o);n.x=r.x,n.y=r.y}return n.x*=y,n.y*=y,n}function S(t){g(0,e.textContent.length),ur(this).unbind(t)}function k(t){if(d&&e){var n=we(t.pageX,t.pageY,Ke),r=b(n.x*y,n.y*y),a=m(r.x,r.y),i=e.textContent,o=i.substr(0,a).replace(/[a-z\d]+$/i,"").length,s=i.substr(a).match(/^[a-z\d]+/i);g(o,(s?s[0].length:0)+a),ur(t.target).click(S),setTimeout((function(){ur(t.target).unbind("click",S)}),300)}}return({select:function(t,n,r){e=t,At.toEditMode(n,r)},start:function(t){e=t,At.toEditMode()},mouseDown:function(e,n,r,a){var i=b(r,a);t.focus(),v(i.x,i.y),s=r,c=a},mouseMove:function(e,t){var n=b(e,t);_(n.x,n.y)},mouseUp:function(t,n,r){var a=b(n,r);_(a.x,a.y,!0),t.target!==e&&ns-2&&rc-2&&At.toSelectMode(!0)},setCursor:f,toEditMode:function(t,n){if(d=!1,Te="textedit",H.requestSelector(e).showGrips(!1),H.requestSelector(e),At.init(),ur(e).css("cursor","text"),arguments.length){var r=b(t,n);v(r.x,r.y)}else f();setTimeout((function(){d=!0}),300)},toSelectMode:function(i){Te="select",clearInterval(a),a=null,r&&ur(r).attr("display","none"),n&&ur(n).attr("visibility","hidden"),ur(e).css("cursor","move"),i&&(Z(),ur(e).css("cursor","move"),Q("selected",[e]),$([e],!0)),e&&!e.textContent.length&&l.deleteSelectedElements(),ur(t).blur(),e=!1},setInputElem:function(e){t=e},clear:function(){"textedit"===Te&&At.toSelectMode()},init:function(n){if(e){var r,a;e.parentNode||(e=w[0],H.requestSelector(e).showGrips(!1));var s=e.textContent.length,c=e.getAttribute("transform");for(i=Rt(e),o=c?Ge(e):null,(h=[]).length=s,t.focus(),ur(e).unbind("dblclick",k).dblclick(k),s||(a={x:i.x+i.width/2,width:0}),r=0;r")[0].getContext("2d")||(n.text=oe.exportNoText),ur.each(n,(function(n,a){r.find(n).length&&(t.push(n),e.push(a))})),{issues:e,issueCodes:t}}this.svgCanvasToString=function(){for(;Pt()>0;);P.clear(!0),ur.each(f.childNodes,(function(e,t){e&&8===t.nodeType&&t.data.includes("Created with")&&f.firstChild.before(t)})),_&&(Hn(),Ze([_]));var e=[];ur(f).find("g:data(gsvg)").each((function(){for(var t=this.attributes,n=t.length,r=0;rt.name?-1:1}));for(var l=0;l=0;y--){var _=i[y],b=wt(_.value);if(!v.includes(_.localName)&&""!==b){if(b.startsWith("pointer-events"))continue;if("class"===_.localName&&b.startsWith("se_"))continue;if(n.push(" "),"d"===_.localName&&(b=P.convertPath(e,!0)),isNaN(b)?a.test(b)&&(b=ne(b)+r):b=ne(b),fe.apply&&"image"===e.nodeName&&"href"===_.localName&&fe.images&&"embed"===fe.images){var x=he[b];x&&(b=x)}_.namespaceURI&&_.namespaceURI!==p.SVG&&!L[_.namespaceURI]||(n.push(_.nodeName),n.push('="'),n.push(b),n.push('"'))}}}if(e.hasChildNodes()){n.push(">"),t++;for(var w=!1,S=0;S");break;case 8:n.push("\n"),n.push(new Array(t+1).join(" ")),n.push("\x3c!--"),n.push(k.data),n.push("--\x3e")}}if(t--,!w){n.push("\n");for(var A=0;A")}else n.push("/>")}return n.join("")},this.embedImage=function(e){return new Promise((function(t,n){ur(new Image).load((function(r,a,i){if("error"!==a){var o=document.createElement("canvas");o.width=this.width,o.height=this.height,o.getContext("2d").drawImage(this,0,0);try{var s=";svgedit_url="+encodeURIComponent(e);s=o.toDataURL().replace(";base64",s+";base64"),he[e]=s}catch(t){he[e]=!1}ye=e,t(he[e])}else n(new Error("Error loading image: "+i.status+" "+i.statusText))})).attr("src",e)}))},this.setGoodImage=function(e){ye=e},this.open=function(){},this.save=function(e){Z(),e&&ur.extend(fe,e),fe.apply=!0;var t=this.svgCanvasToString();Q("saved",t)},this.rasterExport=function(){var e=n(regeneratorRuntime.mark((function e(t,n,r){var a,i,s,c,u,d,h,f,p,g=arguments;return regeneratorRuntime.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:if(a=g.length>3&&void 0!==g[3]?g[3]:{},s="image/"+(i="ICO"===t?"BMP":t||"PNG").toLowerCase(),c=Vt(),u=c.issues,d=c.issueCodes,h=this.svgCanvasToString(),Ct){e.next=10;break}return e.next=8,un(o.canvgPath+"canvg.js",{global:"canvg"});case 8:f=e.sent,Ct=f.canvg;case 10:return ur("#export_canvas").length||ur("",{id:"export_canvas"}).hide().appendTo("body"),(p=ur("#export_canvas")[0]).width=l.contentW,p.height=l.contentH,e.next=16,Ct(p,h);case 16:return e.abrupt("return",new Promise((function(e,o){var l,c=i.toLowerCase(),f=n?p.toDataURL("image/"+c,n):p.toDataURL("image/"+c);function g(){var i={datauri:f,bloburl:l,svg:h,issues:u,issueCodes:d,type:t,mimeType:s,quality:n,exportWindowName:r};a.avoidEvent||Q("exported",i),e(i)}p.toBlob?p.toBlob((function(e){l=Gt(e),g()}),s,n):(l=Et(f),g())})));case 17:case"end":return e.stop()}}),e,this)})));return function(t,n,r){return e.apply(this,arguments)}}(),this.exportPDF=function(){var e=n(regeneratorRuntime.mark((function e(t){var n,r,a,i,s,l,c,u,d,h,f,p,g=arguments;return regeneratorRuntime.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:if(n=g.length>1&&void 0!==g[1]?g[1]:B()?"save":void 0,window.jsPDF){e.next=7;break}return e.next=4,hn(["jspdf/underscore-min.js","jspdf/jspdf.min.js"]);case 4:return r=!("svgEditor"in window&&window.svgEditor&&!1===window.svgEditor.modules),e.next=7,hn(o.jspdfPath+"jspdf.plugin.svgToPdf.js",{type:r?"module":"text/javascript"});case 7:return a=rn(),i=a.w>a.h?"landscape":"portrait",s="pt",l=jsPDF({orientation:i,unit:s,format:[a.w,a.h]}),c=an(),l.setProperties({title:c}),u=Vt(),d=u.issues,h=u.issueCodes,f=this.svgCanvasToString(),l.addSVG(f,0,0),(p={svg:f,issues:d,issueCodes:h,exportWindowName:t,outputType:n=n||"dataurlstring"}).output=l.output(n,"save"===n?t||"svg.pdf":void 0),Q("exportedPDF",p),e.abrupt("return",p);case 21:case"end":return e.stop()}}),e,this)})));return function(t){return e.apply(this,arguments)}}(),this.getSvgString=function(){return fe.apply=!1,this.svgCanvasToString()},this.randomizeIds=function(e){arguments.length>0&&!1===e?Tn(!1,v()):Tn(!0,v())};var Bt=this.uniquifyElems=function(e){var t={},n=["filter","linearGradient","pattern","radialGradient","symbol","textPath","use"];for(var r in Tt(e,(function(e){if(1===e.nodeType){e.id&&(e.id in t||(t[e.id]={elem:null,attrs:[],hrefs:[]}),t[e.id].elem=e),ur.each(le,(function(n,r){var a=e.getAttributeNode(r);if(a){var i=Nt(a.value),o=i?i.substr(1):null;o&&(o in t||(t[o]={elem:null,attrs:[],hrefs:[]}),t[o].attrs.push(a))}}));var r=Lt(e);if(r&&n.includes(e.nodeName)){var a=r.substr(1);a&&(a in t||(t[a]={elem:null,attrs:[],hrefs:[]}),t[a].hrefs.push(e))}}})),t)if(r){var a=t[r].elem;if(a){var i=z();a.id=i;for(var o=t[r].attrs,s=o.length;s--;){var l=o[s];l.ownerElement.setAttribute(l.name,"url(#"+i+")")}for(var c=t[r].hrefs,u=c.length;u--;){var d=c[u];Mt(d,"#"+i)}}}},Ht=this.setUseData=function(e){var t=ur(e);"use"!==e.tagName&&(t=t.find("use")),t.each((function(){var e=Lt(this).substr(1),t=Zt(e);t&&(ur(this).data("ref",t),"symbol"!==t.tagName&&"svg"!==t.tagName||ur(this).data("symbol",t).data("ref",t))}))},zt=this.convertGradients=function(e){var t=ur(e).find("linearGradient, radialGradient");!t.length&&j()&&(t=ur(e).find("*").filter((function(){return this.tagName.includes("Gradient")}))),t.each((function(){if("userSpaceOnUse"===ur(this).attr("gradientUnits")){var e=ur(f).find('[fill="url(#'+this.id+')"],[stroke="url(#'+this.id+')"]');if(!e.length)return;var t=Rt(e[0]);if(!t)return;if("linearGradient"===this.tagName){var n=ur(this).attr(["x1","y1","x2","y2"]),r=this.gradientTransform.baseVal;if(r&&r.numberOfItems>0){var a=Ee(r).matrix,i=we(n.x1,n.y1,a),o=we(n.x2,n.y2,a);n.x1=i.x,n.y1=i.y,n.x2=o.x,n.y2=o.y,this.removeAttribute("gradientTransform")}ur(this).attr({x1:(n.x1-t.x)/t.width,y1:(n.y1-t.y)/t.height,x2:(n.x2-t.x)/t.width,y2:(n.y2-t.y)/t.height}),this.removeAttribute("gradientUnits")}}}))},qt=this.convertToGroup=function(e){e||(e=w[0]);var t,n=ur(e),r=new gr;if(n.data("gsvg")){var a=e.firstChild,i=ur(a).attr(["x","y"]);ur(e.firstChild.firstChild).unwrap(),ur(e).removeData("gsvg");var o=K(e),s=u.createSVGTransform();s.setTranslate(i.x,i.y),o.appendItem(s),ir(e),Q("selected",[e])}else if(n.data("symbol")){e=n.data("symbol"),t=n.attr("transform");var l=n.attr(["x","y"]),d=e.getAttribute("viewBox");if(d){var h=d.split(" ");l.x-=Number(h[0]),l.y-=Number(h[1])}t+=" translate("+(l.x||0)+","+(l.y||0)+")";var g=n.prev();r.addSubCommand(new fr(n[0],n[0].nextSibling,n[0].parentNode)),n.remove();var m,v=ur(f).find("use:data(symbol)").length,y=c.createElementNS(p.SVG,"g"),_=e.childNodes;for(m=0;m<_.length;m++)y.append(_[m].cloneNode(!0));if(V()){var b=ur(Ot()).children("linearGradient,radialGradient,pattern").clone();ur(y).append(b)}t&&y.setAttribute("transform",t);var x=e.parentNode;if(Bt(y),V()&&ur(Ot()).append(ur(y).find("linearGradient,radialGradient,pattern")),y.id=z(),g.after(y),x){if(!v){var S=e.nextSibling;e.remove(),r.addSubCommand(new fr(e,S,x))}r.addSubCommand(new hr(y))}Ht(y),V()?zt(Ot()):zt(y),function(e,t){if(e&&1===e.nodeType){for(var n=e.childNodes.length;n--;)Tt(e.childNodes.item(n),t);t(e)}}(y,(function(e){try{ir(e)}catch(e){console.log(e)}})),ur(y).find(se).each((function(){this.id||(this.id=z())})),Ze([y]);var k=dn(y,!0);k&&r.addSubCommand(k),O(r)}else console.log("Unexpected element to ungroup:",e)};this.setSvgString=function(e,t){try{var n=It(e);if(n.firstElementChild&&n.firstElementChild.namespaceURI!==p.SVG)return!1;this.prepareSvg(n);var r=new gr("Change Source"),a=f.nextSibling,i=u.removeChild(f);r.addSubCommand(new fr(i,a,u)),f=c.adoptNode?c.adoptNode(n.documentElement):c.importNode(n.documentElement,!0),u.append(f);var s=ur(f);l.current_drawing_=new In(f,m);var d=v().getNonce();d?Q("setnonce",d):Q("unsetnonce"),s.find("image").each((function(){var e=this;tn(e);var t=Lt(this);if(t){if(t.startsWith("data:")){var n=t.match(/svgedit_url=(.*?);/);if(n){var r=decodeURIComponent(n[1]);ur(new Image).load((function(){e.setAttributeNS(p.XLINK,"xlink:href",r)})).attr("src",r)}}l.embedImage(t)}})),s.find("svg").each((function(){if(!ur(this).closest("defs").length){Bt(this);var e=this.parentNode;1===e.childNodes.length&&"g"===e.nodeName?(ur(e).data("gsvg",this),e.id=e.id||z()):qe(this)}})),V()&&s.find("linearGradient, radialGradient, pattern").appendTo(Ot()),Ht(s),zt(s[0]);var h={id:"svgcontent",overflow:o.show_outside_canvas?"visible":"hidden"},g=!1;if(s.attr("viewBox")){var _=s.attr("viewBox").split(" ");h.width=_[2],h.height=_[3]}else ur.each(["width","height"],(function(e,t){var n=s.attr(t)||"100%";"%"===String(n).substr(-1)?g=!0:h[t]=ie(t,n)}));if(Nn(),s.children().find(se).each((function(){this.id||(this.id=z())})),g){var b=Xt();h.width=b.width+b.x,h.height=b.height+b.y}h.width<=0&&(h.width=100),h.height<=0&&(h.height=100),s.attr(h),this.contentW=h.width,this.contentH=h.height,r.addSubCommand(new hr(f));var x=s.attr(["width","height"]);r.addSubCommand(new pr(u,x)),y=1,X={},Z(),Ve={},u.append(H.selectorParentGroup),t||O(r),Q("changed",[f])}catch(e){return console.log(e),!1}return!0},this.importSvgString=function(e){var t,n,r;try{var a=St(e.length+e).substr(0,32),i=!1;pe[a]&&ur(pe[a].symbol).parents("#svgroot").length&&(i=!0);var o,s=new gr("Import Image");if(i)o=pe[a].symbol,n=pe[a].xform;else{var l,u=It(e);this.prepareSvg(u),l=c.adoptNode?c.adoptNode(u.documentElement):c.importNode(u.documentElement,!0),Bt(l);var d=ie("width",l.getAttribute("width")),h=ie("height",l.getAttribute("height")),g=l.getAttribute("viewBox"),m=g?g.split(" "):[0,0,d,h];for(t=0;t<4;++t)m[t]=Number(m[t]);var y=Number(f.getAttribute("height"));n="translate(0) "+(n=h>d?"scale("+y/3/m[3]+")":"scale("+y/3/m[2]+")")+" translate(0)",o=c.createElementNS(p.SVG,"symbol");var b=Ot();for(V()&&ur(l).find("linearGradient, radialGradient, pattern").appendTo(b);l.firstChild;){var x=l.firstChild;o.append(x)}var w=l.attributes,S=!0,k=!1,C=void 0;try{for(var A,E=w[Symbol.iterator]();!(S=(A=E.next()).done);S=!0){var G=A.value;o.setAttribute(G.nodeName,G.value)}}catch(e){k=!0,C=e}finally{try{S||null==E.return||E.return()}finally{if(k)throw C}}o.id=z(),pe[a]={symbol:o,xform:n},Ot().append(o),s.addSubCommand(new hr(o))}(r=c.createElementNS(p.SVG,"use")).id=z(),Mt(r,"#"+o.id),(_||v().getCurrentLayer()).append(r),s.addSubCommand(new hr(r)),Z(),r.setAttribute("transform",n),ir(r),ur(r).data("symbol",o).data("ref",o),$([r]),O(s),Q("changed",[f])}catch(e){return console.log(e),null}return r};var Wt={identifyLayers:Nn,createLayer:Ln,cloneLayer:Mn,deleteCurrentLayer:On,setCurrentLayer:jn,renameCurrentLayer:Vn,setCurrentLayerPosition:Rn,setLayerVisibility:Bn,moveSelectedToLayer:Un,mergeLayer:Fn,mergeAllLayers:Dn,leaveContext:Hn,setContext:zn};Object.entries(Wt).forEach((function(e){var t=d(e,2),n=t[0],r=t[1];l[n]=r})),function(e){Pn=e}({pathActions:P,getCurrentGroup:function(){return _},setCurrentGroup:function(e){_=e},getSelectedElements:G,getSVGContent:E,undoMgr:M,elData:ce,getCurrentDrawing:v,clearSelection:Z,call:Q,addCommandToHistory:O,changeSVGContent:function(){Q("changed",[f])}}),this.clear=function(){P.clear(),Z(),l.clearSvgContentElement(),l.current_drawing_=new In(f),l.createLayer("Layer 1"),l.undoMgr.resetUndoStack(),H.initGroup(),je=H.getRubberBandBox(),Q("cleared")},this.linkControlPoints=P.linkControlPoints,this.getContentElem=function(){return f},this.getRootElem=function(){return u};var rn=this.getResolution=function(){return{w:f.getAttribute("width")/y,h:f.getAttribute("height")/y,zoom:y}};this.getSnapToGrid=function(){return o.gridSnapping},this.getVersion=function(){return"svgcanvas.js ($Rev$)"},this.setUiStrings=function(e){Object.assign(oe,e.notification),ur=gn(ur,e.common),Me(e)},this.setConfig=function(e){Object.assign(o,e)},this.getTitle=function(e){if(e=e||w[0]){var t=(e=ur(e).data("gsvg")||ur(e).data("symbol")||e).childNodes,n=!0,r=!1,a=void 0;try{for(var i,o=t[Symbol.iterator]();!(n=(i=o.next()).done);n=!0){var s=i.value;if("title"===s.nodeName)return s.textContent}}catch(e){r=!0,a=e}finally{try{n||null==o.return||o.return()}finally{if(r)throw a}}return""}},this.setGroupTitle=function(e){var t=w[0];t=ur(t).data("gsvg")||t;var n,r=ur(t).children("title"),a=new gr("Set Label");if(e.length)r.length?(n=r[0],a.addSubCommand(new pr(n,{"#text":n.textContent})),n.textContent=e):((n=c.createElementNS(p.SVG,"title")).textContent=e,ur(t).prepend(n),a.addSubCommand(new hr(n)));else{var i=r.nextSibling;a.addSubCommand(new fr(r[0],i,t)),r.remove()}O(a)};var an=this.getDocumentTitle=function(){return l.getTitle(f)};this.setDocumentTitle=function(e){var t=f.childNodes,n=!1,r="",a=new gr("Change Image Title"),i=!0,o=!1,s=void 0;try{for(var l,u=t[Symbol.iterator]();!(i=(l=u.next()).done);i=!0){var d=l.value;if("title"===d.nodeName){r=(n=d).textContent;break}}}catch(e){o=!0,s=e}finally{try{i||null==u.return||u.return()}finally{if(o)throw s}}n||(n=c.createElementNS(p.SVG,"title"),f.insertBefore(n,f.firstChild)),e.length?n.textContent=e:n.remove(),a.addSubCommand(new pr(n,{"#text":r})),O(a)},this.getEditorNS=function(e){return e&&f.setAttribute("xmlns:se",p.SE),p.SE},this.setResolution=function(e,t){var n,r=rn(),a=r.w,i=r.h;if("fit"===e){var o=Xt();if(!o)return!1;n=new gr("Fit Canvas to Content");var s=Yt();$(s);var c=[],u=[];ur.each(s,(function(e,t){c.push(-1*o.x),u.push(-1*o.y)}));var d=l.moveSelectedElements(c,u,!0);n.addSubCommand(d),Z(),e=Math.round(o.width),t=Math.round(o.height)}return e===a&&t===i||(n||(n=new gr("Change Image Dimensions")),e=ie("width",e),t=ie("height",t),f.setAttribute("width",e),f.setAttribute("height",t),this.contentW=e,this.contentH=t,n.addSubCommand(new pr(f,{width:a,height:i})),f.setAttribute("viewBox",[0,0,e/y,t/y].join(" ")),n.addSubCommand(new pr(f,{viewBox:["0 0",a,i].join(" ")})),O(n),Q("changed",[f])),!0},this.getOffset=function(){return ur(f).attr(["x","y"])},this.setBBoxZoom=function(t,n,r){var a,i=.85,o=function(e){if(!e)return!1;var t=Math.round(n/e.width*100*i)/100,a=Math.round(r/e.height*100*i)/100,o=Math.min(t,a);return l.setZoom(o),{zoom:o,bbox:e}};if("object"===e(t)){if(0===(a=t).width||0===a.height){var s=a.zoom?a.zoom:y*a.factor;return l.setZoom(s),{zoom:y,bbox:a}}return o(a)}switch(t){case"selection":if(!w[0])return;var c=ur.map(w,(function(e){if(e)return e}));a=Xt(c);break;case"canvas":var u=rn();i=.95,a={width:u.w,height:u.h,x:0,y:0};break;case"content":a=Xt();break;case"layer":a=Xt(Yt(v().getCurrentLayer()));break;default:return}return o(a)},this.setZoom=function(e){var t=rn();f.setAttribute("viewBox","0 0 "+t.w/e+" "+t.h/e),y=e,ur.each(w,(function(e,t){t&&H.requestSelector(t).resize()})),P.zoomChange(),De("zoomChanged",e)},this.getMode=function(){return Te},this.setMode=function(e){P.clear(!0),At.clear(),Le=w[0]&&"text"===w[0].nodeName?ge:x,Te=e},this.getColor=function(e){return Le[e]},this.setColor=function(e,t,n){x[e]=t,Le[e+"_paint"]={type:"solidColor"};var r=[];function a(e){"g"!==e.nodeName&&r.push(e)}for(var i=w.length;i--;){var o=w[i];o&&("g"===o.tagName?Tt(o,a):"fill"===e?"polyline"!==o.tagName&&"line"!==o.tagName&&r.push(o):r.push(o))}r.length>0&&(n?ln(e,t,r):(cn(e,t,r),Q("changed",r)))};var on=this.setGradient=function(e){if(Le[e+"_paint"]&&"solidColor"!==Le[e+"_paint"].type){var t=l[e+"Grad"],n=sn(t),r=Ot();n?t=n:(t=r.appendChild(c.importNode(t,!0))).id=z(),l.setColor(e,"url(#"+t.id+")")}},sn=function(e){for(var t=Ot(),n=ur(t).find("linearGradient, radialGradient"),r=n.length,a=["r","cx","cy","fx","fy"];r--;){var i=n[r];if("linearGradient"===e.tagName){if(e.getAttribute("x1")!==i.getAttribute("x1")||e.getAttribute("y1")!==i.getAttribute("y1")||e.getAttribute("x2")!==i.getAttribute("x2")||e.getAttribute("y2")!==i.getAttribute("y2"))continue}else if("continue"===function(){var t=ur(e).attr(a),n=ur(i).attr(a),r=!1;if(ur.each(a,(function(e,a){t[a]!==n[a]&&(r=!0)})),r)return"continue"}())continue;var o=e.getElementsByTagNameNS(p.SVG,"stop"),s=i.getElementsByTagNameNS(p.SVG,"stop");if(o.length===s.length){for(var l=o.length;l--;){var c=o[l],u=s[l];if(c.getAttribute("offset")!==u.getAttribute("offset")||c.getAttribute("stop-opacity")!==u.getAttribute("stop-opacity")||c.getAttribute("stop-color")!==u.getAttribute("stop-color"))break}if(-1===l)return i}}return null};this.setPaint=function(e,t){var n=new ur.jGraduate.Paint(t);switch(this.setPaintOpacity(e,n.alpha/100,!0),Le[e+"_paint"]=n,n.type){case"solidColor":this.setColor(e,"none"!==n.solidColor?"#"+n.solidColor:"none");break;case"linearGradient":case"radialGradient":l[e+"Grad"]=n[n.type],on(e)}},this.setStrokePaint=function(e){this.setPaint("stroke",e)},this.setFillPaint=function(e){this.setPaint("fill",e)},this.getStrokeWidth=function(){return Le.stroke_width},this.setStrokeWidth=function(e){if(0===e&&["line","path"].includes(Te))l.setStrokeWidth(1);else{Le.stroke_width=e;for(var t=[],n=w.length;n--;){var r=w[n];r&&("g"===r.tagName?Tt(r,a):t.push(r))}t.length>0&&(cn("stroke-width",e,t),Q("changed",w))}function a(e){"g"!==e.nodeName&&t.push(e)}},this.setStrokeAttr=function(e,t){x[e.replace("-","_")]=t;for(var n=[],r=w.length;r--;){var a=w[r];a&&("g"===a.tagName?Tt(a,(function(e){"g"!==e.nodeName&&n.push(e)})):n.push(a))}n.length>0&&(cn(e,t,n),Q("changed",w))},this.getStyle=function(){return x},this.getOpacity=J,this.setOpacity=function(e){x.opacity=e,cn("opacity",e)},this.getFillOpacity=function(){return x.fill_opacity},this.getStrokeOpacity=function(){return x.stroke_opacity},this.setPaintOpacity=function(e,t,n){x[e+"_opacity"]=t,n?ln(e+"-opacity",t):cn(e+"-opacity",t)},this.getPaintOpacity=function(e){return"fill"===e?this.getFillOpacity():this.getStrokeOpacity()},this.getBlur=function(e){var t=0;if(e&&e.getAttribute("filter")){var n=Zt(e.id+"_blur");n&&(t=n.firstChild.getAttribute("stdDeviation"))}return t},function(){var e=null,t=null,n=!1;function r(){var n=l.undoMgr.finishUndoableChange();e.addSubCommand(n),O(e),e=null,t=null}l.setBlurNoUndo=function(e){if(t)if(0===e)ln("filter",""),n=!0;else{var r=w[0];n&&ln("filter","url(#"+r.id+"_blur)"),j()&&(r.removeAttribute("filter"),r.setAttribute("filter","url(#"+r.id+"_blur)")),ln("stdDeviation",e,[t.firstChild]),l.setBlurOffsets(t,e)}else l.setBlur(e)},l.setBlurOffsets=function(e,t){t>3?$t(e,{x:"-50%",y:"-50%",width:"200%",height:"200%"}):j()||(e.removeAttribute("x"),e.removeAttribute("y"),e.removeAttribute("width"),e.removeAttribute("height"))},l.setBlur=function(n,a){if(e)r();else{var i=w[0],o=i.id;t=Zt(o+"_blur"),n-=0;var s=new gr;if(t)0===n&&(t=null);else{var c=k({element:"feGaussianBlur",attr:{in:"SourceGraphic",stdDeviation:n}});(t=k({element:"filter",attr:{id:o+"_blur"}})).append(c),Ot().append(t),s.addSubCommand(new hr(t))}var u={filter:i.getAttribute("filter")};if(0===n)return i.removeAttribute("filter"),void s.addSubCommand(new pr(i,u));cn("filter","url(#"+o+"_blur)"),s.addSubCommand(new pr(i,u)),l.setBlurOffsets(t,n),e=s,l.undoMgr.beginUndoableChange("stdDeviation",[t?t.firstChild:null]),a&&(l.setBlurNoUndo(n),r())}}}(),this.getBold=function(){var e=w[0];return!(nn(e)||"text"!==e.tagName||!nn(w[1]))&&"bold"===e.getAttribute("font-weight")},this.setBold=function(e){var t=w[0];!nn(t)&&"text"===t.tagName&&nn(w[1])&&cn("font-weight",e?"bold":"normal"),w[0].textContent||At.setCursor()},this.getItalic=function(){var e=w[0];return!(nn(e)||"text"!==e.tagName||!nn(w[1]))&&"italic"===e.getAttribute("font-style")},this.setItalic=function(e){var t=w[0];!nn(t)&&"text"===t.tagName&&nn(w[1])&&cn("font-style",e?"italic":"normal"),w[0].textContent||At.setCursor()},this.getFontFamily=function(){return ge.font_family},this.setFontFamily=function(e){ge.font_family=e,cn("font-family",e),w[0]&&!w[0].textContent&&At.setCursor()},this.setFontColor=function(e){ge.fill=e,cn("fill",e)},this.getFontColor=function(){return ge.fill},this.getFontSize=function(){return ge.font_size},this.setFontSize=function(e){ge.font_size=e,cn("font-size",e),w[0].textContent||At.setCursor()},this.getText=function(){var e=w[0];return nn(e)?"":e.textContent},this.setTextContent=function(e){cn("#text",e),At.init(e),At.setCursor()},this.setImageURL=function(e){var t=w[0];if(t){var n=ur(t).attr(["width","height"]),r=!n.width||!n.height,a=Lt(t);if(a!==e||r){var i=new gr("Change Image URL");Mt(t,e),i.addSubCommand(new pr(t,{"#href":a})),ur(new Image).load((function(){var e=ur(t).attr(["width","height"]);ur(t).attr({width:this.width,height:this.height}),H.requestSelector(t).resize(),i.addSubCommand(new pr(t,e)),O(i),Q("changed",[t])})).attr("src",e)}}},this.setLinkURL=function(e){var t=w[0];if(t){if("a"!==t.tagName){var n=ur(t).parents("a");if(!n.length)return;t=n[0]}var r=Lt(t);if(r!==e){var a=new gr("Change Link URL");Mt(t,e),a.addSubCommand(new pr(t,{"#href":r})),O(a)}}},this.setRectRadius=function(e){var t=w[0];if(!nn(t)&&"rect"===t.tagName){var n=t.getAttribute("rx");n!==String(e)&&(t.setAttribute("rx",e),t.setAttribute("ry",e),O(new pr(t,{rx:n,ry:n},"Radius")),Q("changed",[t]))}},this.makeHyperlink=function(e){l.groupSelectedElements("a",e)},this.removeHyperlink=function(){l.ungroupSelectedElement()},this.setSegType=function(e){P.setSegType(e)},this.convertToPath=function(e,t){if(!nn(e))return t?Dt(e,k,P):function(e,t,n,r,a,i,o,s){var l=new o.BatchCommand("Convert element to Path"),c=n({element:"path",attr:t=pt.extend({},t,Ft(e))}),u=e.getAttribute("transform");u&&c.setAttribute("transform",u);var d=e.id,h=e.parentNode;e.nextSibling?e.before(c):h.append(c);var f=Ut(e);if(f){if(c.setAttribute("d",f),u){var p=K(c);Ce(p)&&r.resetOrientation(c)}var g=e.nextSibling;return l.addSubCommand(new o.RemoveElementCommand(e,g,parent)),l.addSubCommand(new o.InsertElementCommand(c)),a(),e.remove(),c.setAttribute("id",d),c.removeAttribute("visibility"),i([c],!0),s(l),c}return c.remove(),null}(e,{fill:x.fill,"fill-opacity":x.fill_opacity,stroke:x.stroke,"stroke-width":x.stroke_width,"stroke-dasharray":x.stroke_dasharray,"stroke-linejoin":x.stroke_linejoin,"stroke-linecap":x.stroke_linecap,"stroke-opacity":x.stroke_opacity,opacity:x.opacity,visibility:"hidden"},k,P,Z,$,be,O);var n=w;ur.each(n,(function(e,t){t&&l.convertToPath(t)}))};var ln=function(e,t,n){"pathedit"===Te&&P.moveNode(e,t);for(var r=(n=n||w).length,a=["g","polyline","path"],i=function(){var i=n[r];if(nn(i))return"continue";if(("x"===e||"y"===e)&&a.includes(i.tagName)){var o=Xt([i]),s="x"===e?t-o.x:0,c="y"===e?t-o.y:0;return l.moveSelectedElements(s*y,c*y,!0),"continue"}var d="#text"===e?i.textContent:i.getAttribute(e);if(nn(d)&&(d=""),d!==String(t)){"#text"===e?(i.textContent=t,/rotate/.test(i.getAttribute("transform"))&&(i=Xe(i))):"#href"===e?Mt(i,t):i.setAttribute(e,t),"textedit"===Te&&"#text"!==e&&i.textContent.length&&At.toSelectMode(i),V()&&"text"===i.nodeName&&/rotate/.test(i.getAttribute("transform"))&&(String(t).startsWith("url")||["font-size","font-family","x","y"].includes(e)&&i.textContent)&&(i=Xe(i)),w.includes(i)&&setTimeout((function(){i.parentNode&&H.requestSelector(i).resize()}),0);var h=Qt(i);if(0!==h&&"transform"!==e)for(var f=K(i),p=f.numberOfItems;p--;){if(4===f.getItem(p).type){f.removeItem(p);var g=Rt(i),m=we(g.x+g.width/2,g.y+g.height/2,Ee(f).matrix),v=m.x,_=m.y,b=u.createSVGTransform();b.setRotate(h,v,_),f.insertItemBefore(b,p);break}}}};r--;)i()},cn=this.changeSelectedAttribute=function(e,t,n){n=n||w,l.undoMgr.beginUndoableChange(e,n),ln(e,t,n);var r=l.undoMgr.finishUndoableChange();r.isEmpty()||O(r)};this.deleteSelectedElements=function(){for(var e=new gr("Delete Elements"),t=w.length,n=[],r=0;rn[d].width)||("t"===e||"m"===e||"b"===e)&&(u===Number.MIN_VALUE||u>n[d].height))&&(a=n[d].x,o=n[d].y,i=n[d].x+n[d].width,s=n[d].y+n[d].height,c=n[d].width,u=n[d].height);break;case"largest":(("l"===e||"c"===e||"r"===e)&&(c===Number.MIN_VALUE||ci&&(i=n[d].x+n[d].width),n[d].y+n[d].height>s&&(s=n[d].y+n[d].height)}}"page"===t&&(a=0,o=0,i=l.contentW,s=l.contentH);for(var f=new Array(r),p=new Array(r),g=0;g=a.length?t=0:t<0&&(t=a.length-1),r=a[t];break}Ze([r],!0),Q("selected",w)}},this.clear(),this.getPrivateMethods=function(){return{addCommandToHistory:O,BatchCommand:gr,ChangeElementCommand:pr,decode64:kt,dropXMLInternalSubset:xt,encode64:St,ffClone:Xe,findDefs:Ot,findDuplicateGradient:sn,getElem:Zt,getPathBBox:jt,getTypeMap:te,getUrlFromAttr:Nt,identifyLayers:Nn,InsertElementCommand:hr,isChrome:B,isIdentity:Se,isIE:R,logMatrix:Qe,MoveElementCommand:dr,NS:p,preventClickDefault:tn,RemoveElementCommand:fr,SVGEditTransformList:W,text2xml:It,transformBox:Ae,transformPoint:we,walkTree:Tt}}};
/**
* @file SVG Icon Loader 2.0
*
@@ -102,7 +102,7 @@ function(e){var t=document.createElement("a");return t.setAttribute("href",e),t.
});
});
*/
-var _r=Boolean(window.opera),yr=function(e,t,n){var r,a=e.find("defs");if(!a.length)return e;r=_r?a.find("*").filter((function(){return Boolean(this.id)})):a.find("[id]");var i=e[0].getElementsByTagName("*"),o=i.length;return r.each((function(e){var n=this.id,r="x"+n+t+e;this.id=r;var a="url(#"+n+")",s="url(#"+r+")";for(e=0;e1&&void 0!==arguments[1]?arguments[1]:{},n=t.before,r=t.after,a=t.favicon,i=t.canvas,o=t.image,s=void 0===o||o,l=t.acceptErrors;return e=Array.isArray(e)?e:[e],Promise.all(e.map((function(e){return function(e){var t={};if(Array.isArray(e)){var o=Pr(e,2);e=o[0];var c=o[1];t=void 0===c?{}:c}var u=t.favicon,d=void 0===u?a:u,h=t,f=h.before,p=void 0===f?n:f,g=h.after,m=void 0===g?r:g,v=h.canvas,_=void 0===v?i:v,y=h.image,b=void 0===y?s:y;function x(){p?p.before(w):m?m.after(w):document.head.appendChild(w)}var w=document.createElement("link");return new Promise((function(n,r){var a=r;if(l&&(a="function"==typeof l?function(a){l({error:a,stylesheetURL:e,options:t,resolve:n,reject:r})}:n),e.endsWith(".css")?d=!1:e.endsWith(".ico")&&(d=!0),d){if(w.rel="shortcut icon",w.type="image/x-icon",!1===b)return w.href=e,x(),void n(w);var i=document.createElement("canvas");i.width=16,i.height=16;var o=i.getContext("2d"),s=document.createElement("img");return s.addEventListener("error",(function(e){r(e)})),s.addEventListener("load",(function(){o.drawImage(s,0,0),w.href=_?i.toDataURL("image/x-icon"):e,x(),n(w)})),void(s.src=e)}w.rel="stylesheet",w.type="text/css",w.href=e,x(),w.addEventListener("error",(function(e){a(e)})),w.addEventListener("load",(function(){n(w)}))}))}(e)})))}var Nr={},Tr=[function(e){function t(t){if("string"==typeof t.data){var n=t.handler,r=t.data.toLowerCase().split(" ");t.handler=function(t){if(this===t.target||27===t.which||!/textarea|select/i.test(t.target.nodeName)&&"text"!==t.target.type){var a="keypress"!==t.type&&e.hotkeys.specialKeys[t.which],i=String.fromCharCode(t.which).toLowerCase(),o="",s={};t.altKey&&"alt"!==a&&(o+="alt+"),t.ctrlKey&&"ctrl"!==a&&(o+="ctrl+"),t.metaKey&&!t.ctrlKey&&"meta"!==a&&(o+="meta+"),t.shiftKey&&"shift"!==a&&(o+="shift+"),a?s[o+a]=!0:(s[o+i]=!0,s[o+e.hotkeys.shiftNums[i]]=!0,"shift+"===o&&(s[e.hotkeys.shiftNums[i]]=!0));for(var l=0,c=r.length;l","/":"?","\\":"|"}},e.each(["keydown","keyup","keypress"],(function(){e.event.special[this]={add:t}})),e},function(e){var t={};return e.svgIcons=function(n){var r,a,i,o,s,l=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},c="http://www.w3.org/2000/svg",u="http://www.w3.org/1999/xlink",d=l.w||24,h=l.h||24,f=!1,p=!1,g=0,m="data:image/svg+xml;charset=utf-8;base64,";if(l.svgz){o=e('').appendTo("body").hide();try{a=o[0].contentDocument,o.load(_),_(0,!0)}catch(e){w()}}else{var v=new DOMParser;e.ajax({url:n,dataType:"string",success:function(t){t?(a=v.parseFromString(t,"text/xml"),e((function(){_("ajax")}))):e(w)},error:function(t){window.opera?e((function(){w()})):t.responseText?((a=v.parseFromString(t.responseText,"text/xml")).childNodes.length||e(w),e((function(){_("ajax")}))):e(w)}})}function _(t,n){if("ajax"!==t){if(p)return;var s=(a=o[0].contentDocument)&&a.getElementById("svg_eof");if(!(s||n&&s))return void(++g<50?setTimeout(_,20):(w(),p=!0));p=!0}if(r=e(a.firstChild).children(),l.no_img)setTimeout((function(){f||x()}),500);else{var c=m+"PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNzUiIGhlaWdodD0iMjc1Ij48L3N2Zz4%3D";i=e(new Image).attr({src:c,width:0,height:0,alt:l.testIconAlt||"icon"}).appendTo("body").load((function(){x(!0)})).error((function(){x()}))}}function y(e,t,n,r){if(_r&&t.css("visibility","hidden"),l.replace){r&&t.attr("id",n);var a=e.attr("class");if(a&&t.attr("class","svg_icon "+a),!e.alt){var i="icon";l.alts&&(i=l.alts[n]||i),t.attr("alt",i)}e.replaceWith(t)}else e.append(t);_r&&setTimeout((function(){t.removeAttr("style")}),1)}function b(e,n){void 0!==l.id_match&&!1===l.id_match||y(s,e,n,!0),t[n]=e}function x(){var n=arguments.length>0&&void 0!==arguments[0]&&arguments[0],a=arguments.length>1&&void 0!==arguments[1]&&arguments[1];if(!f){var p;if(l.no_img&&(n=!1),n&&(p=e(document.createElement("div"))).hide().appendTo("body"),a){var g=l.fallback_path||"";e.each(a,(function(t,n){s=e("#"+t);var r="icon";l.alts&&(r=l.alts[t]||r),b(e(new Image).attr({class:"svg_icon",src:g+n,width:d,height:h,alt:r}),t)}))}else for(var v=r.length,_=0;_0&&!n&&(i=yr(i,r)),y(e(this),i,a)}))})),a||(n&&p.remove(),o&&o.remove(),i&&i.remove()),l.resize&&e.resizeSvgIcons(l.resize),f=!0,l.callback&&l.callback(t)}}function w(){if(n.includes(".svgz")){var t=n.replace(".svgz",".svg");window.console&&console.log(".svgz failed, trying with .svg"),e.svgIcons(t,l)}else l.fallback&&x(!1,l.fallback)}},e.getSvgIcon=function(e,n){var r=t[e];return n&&r&&(r=yr(r,0).clone(!0)),r},e.resizeSvgIcons=function(t){var n=!e(".svg_icon:first").length;e.each(t,(function(t,r){var a=Array.isArray(r),i=a?r[0]:r,o=a?r[1]:r;n&&(t=t.replace(/\.svg_icon/g,"svg")),e(t).each((function(){this.setAttribute("width",i),this.setAttribute("height",o),window.opera&&window.widget&&(this.parentNode.style.width=i+"px",this.parentNode.style.height=o+"px")}))}))},e},function(t){t.loadingStylesheets||(t.loadingStylesheets=[]),t.loadingStylesheets.includes("jgraduate/css/jGraduate.css")||t.loadingStylesheets.push("jgraduate/css/jGraduate.css"),t.jGraduate={Paint:function e(t){r(this,e);var n=t||{};if(this.alpha=isNaN(n.alpha)?100:n.alpha,n.copy)switch(this.type=n.copy.type,this.alpha=n.copy.alpha,this.solidColor=null,this.linearGradient=null,this.radialGradient=null,this.type){case"none":break;case"solidColor":this.solidColor=n.copy.solidColor;break;case"linearGradient":this.linearGradient=n.copy.linearGradient.cloneNode(!0);break;case"radialGradient":this.radialGradient=n.copy.radialGradient.cloneNode(!0)}else n.linearGradient?(this.type="linearGradient",this.solidColor=null,this.radialGradient=null,this.linearGradient=n.linearGradient.cloneNode(!0)):n.radialGradient?(this.type="radialGradient",this.solidColor=null,this.linearGradient=null,this.radialGradient=n.radialGradient.cloneNode(!0)):n.solidColor?(this.type="solidColor",this.solidColor=n.solidColor):(this.type="none",this.solidColor=null,this.linearGradient=null,this.radialGradient=null)}},t.fn.jGraduateDefaults={paint:new t.jGraduate.Paint,window:{pickerTitle:"Drag markers to pick a paint"},images:{clientPath:"images/"},newstop:"inverse"};var n=navigator.userAgent.includes("Gecko/");function a(e,t,r){var a=document.createElementNS(br.svg,e);return function(e,t){n?Object.entries(t).forEach((function(t){var n=d(t,2),r=n[0],a=n[1];e.setAttribute(r,a)})):Object.entries(t).forEach((function(t){var n=d(t,2),r=n[0],a=n[1],i=e[r];i&&"SVGLength"===i.constructor?i.baseVal.value=a:e.setAttribute(r,a)}))}(a,t),r&&r.append(a),a}return t.fn.jGraduate=function(n,r,i){return this.each((function(){var o=t(this),s=t.extend(!0,{},t.fn.jGraduateDefaults,n||{}),l=o.attr("id"),c="#"+o.attr("id")+" ";if(c){var u=function(){switch(o.paint.type){case"radialGradient":o.paint.linearGradient=null;break;case"linearGradient":o.paint.radialGradient=null;break;case"solidColor":o.paint.radialGradient=o.paint.linearGradient=null}"function"==typeof o.okCallback&&o.okCallback(o.paint),o.hide()},d=function(){"function"==typeof o.cancelCallback&&o.cancelCallback(),o.hide()};t.extend(!0,o,{paint:new t.jGraduate.Paint({copy:s.paint}),okCallback:"function"==typeof r?r:null,cancelCallback:"function"==typeof i?i:null});var h=null,f=t(window);"none"===o.paint.type&&(o.paint=new t.jGraduate.Paint({solidColor:"ffffff"})),o.addClass("jGraduate_Picker"),o.html('Solid Color Linear Gradient Radial Gradient
');var p=t(c+"> .jGraduate_colPick"),g=t(c+"> .jGraduate_gradPick");g.html('Spread method Pad Reflect Repeat
');var m=256,v=m-0,_=m-0,y={};t(".jGraduate_SliderBar").width(145);var b,x=t("#"+l+"_jGraduate_GradContainer")[0],w=a("svg",{id:l+"_jgraduate_svg",width:m,height:m,xmlns:br.svg},x),S=o.paint.type,k=o.paint[S],C=k,A=o.paint.alpha,E="solidColor"===S;switch(S){case"solidColor":case"linearGradient":if(E||(C.id=l+"_lg_jgraduate_grad",k=C=w.appendChild(C)),a("radialGradient",{id:l+"_rg_jgraduate_grad"},w),"linearGradient"===S)break;case"radialGradient":E||(C.id=l+"_rg_jgraduate_grad",k=C=w.appendChild(C)),a("linearGradient",{id:l+"_lg_jgraduate_grad"},w)}if(E){k=C=t("#"+l+"_lg_jgraduate_grad")[0],Me(0,"#"+(h=o.paint[S]),1);var G=e(s.newstop);if("string"===G)switch(s.newstop){case"same":Me(1,"#"+h,1);break;case"inverse":for(var P="",I=0;I<6;I+=2){var N=(255-parseInt(h.substr(I,2),16)).toString(16);N.length<2&&(N=0+N),P+=N}Me(1,"#"+P,1);break;case"white":Me(1,"#ffffff",1);break;case"black":Me(1,"#000000",1)}else if("object"===G){var T="opac"in s.newstop?s.newstop.opac:1;Me(1,s.newstop.color||"#"+h,T)}}var L,M=parseFloat(k.getAttribute("x1")||0),O=parseFloat(k.getAttribute("y1")||0),j=parseFloat(k.getAttribute("x2")||1),V=parseFloat(k.getAttribute("y2")||0),R=parseFloat(k.getAttribute("cx")||.5),B=parseFloat(k.getAttribute("cy")||.5),D=parseFloat(k.getAttribute("fx")||R),U=parseFloat(k.getAttribute("fy")||B),F=a("rect",{id:l+"_jgraduate_rect",x:0,y:0,width:v,height:_,fill:"url(#"+l+"_jgraduate_grad)","fill-opacity":A/100},w),H=t("
").attr({class:"grad_coord jGraduate_lg_field",title:"Begin Stop"}).text(1).css({top:O*m,left:M*m}).data("coord","start").appendTo(x),z=H.clone().text(2).css({top:V*m,left:j*m}).attr("title","End stop").data("coord","end").appendTo(x),q=t("
").attr({class:"grad_coord jGraduate_rg_field",title:"Center stop"}).text("C").css({top:B*m,left:R*m}).data("coord","center").appendTo(x),Y=q.clone().text("F").css({top:U*m,left:D*m,display:"none"}).attr("title","Focus point").data("coord","focus").appendTo(x);Y[0].id=l+"_jGraduate_focusCoord",t.each(["x1","y1","x2","y2","cx","cy","fx","fy"],(function(e,n){var r=isNaN(n[1]),a=C.getAttribute(n);a||(a=r?"0.5":"x2"===n?"1.0":"0.0"),y[n]=t("#"+l+"_jGraduate_"+n).val(a).change((function(){isNaN(parseFloat(this.value))||this.value<0?this.value=0:this.value>1&&(this.value=1),("f"!==n[0]||L)&&(r&&"radialGradient"===S||!r&&"linearGradient"===S)&&C.setAttribute(n,this.value);var e=r?"c"===n[0]?q:Y:"1"===n[1]?H:z,t=n.includes("x")?"left":"top";e.css(t,this.value*m)})).change()}));var W,X,Q,K,Z=t("#"+l+"_jGraduate_StopSlider"),$=a("path",{d:"m9.75,-6l-19.5,19.5m0,-19.5l19.5,19.5",fill:"none",stroke:"#D00","stroke-width":5,display:"none"},void 0),J=1,ee=1,te=0,ne=R,re=B,ae=a("svg",{width:"100%",height:45},Z[0]),ie=a("pattern",{width:16,height:16,patternUnits:"userSpaceOnUse",id:"jGraduate_trans"},ae),oe=a("image",{width:16,height:16},ie),se=s.images.clientPath+"map-opacity.png";oe.setAttributeNS(br.xlink,"xlink:href",se),t(ae).click((function(e){if(K=Z.offset(),"path"!==e.target.tagName){var t=e.pageX-K.left-8;Me((t=t<10?10:t>m+10?m+10:t)/m,0,0,!0),e.stopPropagation()}})),t(ae).mouseover((function(){ae.append($)})),b=a("g",{},ae),a("line",{x1:10,y1:15,x2:m+10,y2:15,"stroke-width":2,stroke:"#000"},ae);var le,ce,ue,de,he=g.find(".jGraduate_spreadMethod").change((function(){C.setAttribute("spreadMethod",t(this).val())})),fe=null,pe=function(e){var t=e.pageX-le.left,n=e.pageY-le.top;t=t<0?0:t>m?m:t,n=n<0?0:n>m?m:n,fe.css("left",t).css("top",n);var r=t/v,a=n/_,i=fe.data("coord"),o=C;switch(i){case"start":y.x1.val(r),y.y1.val(a),o.setAttribute("x1",r),o.setAttribute("y1",a);break;case"end":y.x2.val(r),y.y2.val(a),o.setAttribute("x2",r),o.setAttribute("y2",a);break;case"center":y.cx.val(r),y.cy.val(a),o.setAttribute("cx",r),o.setAttribute("cy",a),ne=r,re=a,Ve();break;case"focus":y.fx.val(r),y.fy.val(a),o.setAttribute("fx",r),o.setAttribute("fy",a),Ve()}e.preventDefault()},ge=function e(){fe=null,f.unbind("mousemove",pe).unbind("mouseup",e)},me=(W=C.getElementsByTagNameNS(br.svg,"stop")).length;if(me<2){for(;me<2;)C.append(document.createElementNS(br.svg,"stop")),++me;W=C.getElementsByTagNameNS(br.svg,"stop")}for(var ve=0;ve99.5&&(n=99.5),n>0?ee=1-n/100:J=-n/100-1,a=(n+100)/2*145/100,t&&Ve();break;case"angle":a=(te=n)/180,a+=.5,a*=145,t&&Ve()}a>145?a=145:a<0&&(a=0),r.css({"margin-left":a-5})})).change()}));for(var Pe=function(e){!function(e){var t=de.offset.left,n=de.parent,r=e.pageX-t-parseInt(n.css("border-left-width"));r>145&&(r=145),r<=0&&(r=0);var a=r-5;switch(r/=145,de.type){case"radius":(r=Math.pow(2*r,2.5))>.98&&r<1.02&&(r=1),r<=.01&&(r=.01),C.setAttribute("r",r);break;case"opacity":o.paint.alpha=parseInt(100*r),F.setAttribute("fill-opacity",r);break;case"ellip":J=1,ee=1,r<.5?J=(r/=.5)<=0?.01:r:r>.5&&(ee=(r=2-(r/=.5))<=0?.01:r),Ve(),ee===(r-=1)+1&&(r=Math.abs(r));break;case"angle":r-=.5,te=r*=180,Ve(),r/=100}de.elem.css({"margin-left":a}),r=Math.round(100*r),de.input.val(r)}(e),e.preventDefault()},Ie=function e(t){f.unbind("mousemove",Pe).unbind("mouseup",e),de=null},Ne=(255*o.paint.alpha/100).toString(16);Ne.length<2;)Ne="0"+Ne;Ne=Ne.split(".")[0],h="none"===o.paint.solidColor?"":o.paint.solidColor+Ne,E||(h=W[0].getAttribute("stop-color")),t.extend(t.fn.jPicker.defaults.window,{alphaSupport:!0,effects:{type:"show",speed:0}}),p.jPicker({window:{title:s.window.pickerTitle},images:{clientPath:s.images.clientPath},color:{active:h,alphaSupport:!0}},(function(e){o.paint.type="solidColor",o.paint.alpha=e.val("ahex")?Math.round(e.val("a")/255*100):100,o.paint.solidColor=e.val("hex")?e.val("hex"):"none",o.paint.radialGradient=null,u()}),null,(function(){d()}));var Te,Le=t(c+" .jGraduate_tabs li");switch(Le.click((function(){Le.removeClass("jGraduate_tab_current"),t(this).addClass("jGraduate_tab_current"),t(c+" > div").hide();var e=t(this).attr("data-type");if(t(c+" .jGraduate_gradPick").show(),"rg"===e||"lg"===e){t(".jGraduate_"+e+"_field").show(),t(".jGraduate_"+("lg"===e?"rg":"lg")+"_field").hide(),t("#"+l+"_jgraduate_rect")[0].setAttribute("fill","url(#"+l+"_"+e+"_jgraduate_grad)"),S="lg"===e?"linearGradient":"radialGradient",t("#"+l+"_jGraduate_OpacInput").val(o.paint.alpha).change();var n=t("#"+l+"_"+e+"_jgraduate_grad")[0];if(C!==n){var r=t(C).find("stop");t(n).empty().append(r),C=n;var a=he.val();C.setAttribute("spreadMethod",a)}L="rg"===e&&null!==C.getAttribute("fx")&&!(R===D&&B===U),t("#"+l+"_jGraduate_focusCoord").toggle(L),L&&(t("#"+l+"_jGraduate_match_ctr")[0].checked=!1)}else t(c+" .jGraduate_gradPick").hide(),t(c+" .jGraduate_colPick").show()})),t(c+" > div").hide(),Le.removeClass("jGraduate_tab_current"),o.paint.type){case"linearGradient":Te=t(c+" .jGraduate_tab_lingrad");break;case"radialGradient":Te=t(c+" .jGraduate_tab_radgrad");break;default:Te=t(c+" .jGraduate_tab_color")}o.show(),setTimeout((function(){Te.addClass("jGraduate_tab_current").click()}),10)}else t.alert("Container element must have an id attribute to maintain unique id strings for sub-elements.");function Me(e,n,r,i,o){var c=o||a("stop",{"stop-color":n,"stop-opacity":r,offset:e},C);o?(n=o.getAttribute("stop-color"),r=o.getAttribute("stop-opacity"),e=o.getAttribute("offset")):C.append(c),null===r&&(r=1);var u="M-6.2,0.9c3.6-4,6.7-4.3,6.7-12.4c-0.2,7.9,3.1,8.8,6.5,12.4c3.5,3.8,2.9,9.6,0,12.3c-3.1,2.8-10.4,2.7-13.2,0C-9.6,9.9-9.4,4.4-6.2,0.9z",d=a("path",{d:u,fill:"url(#jGraduate_trans)",transform:"translate("+(10+e*m)+", 26)"},b),h=a("path",{d:u,fill:n,"fill-opacity":r,transform:"translate("+(10+e*m)+", 26)",stroke:"#000","stroke-width":1.5},b);return t(h).mousedown((function(e){return Oe(this),Q=X,f.mousemove(Re).mouseup(je),K=Z.offset(),e.preventDefault(),!1})).data("stop",c).data("bg",d).dblclick((function(){t("div.jGraduate_LightBox").show();for(var e=this,r=Number(c.getAttribute("stop-opacity"))||1,a=c.getAttribute("stop-color")||1,i=(255*parseFloat(r)).toString(16);i.length<2;)i="0"+i;n=a.substr(1)+i,t("#"+l+"_jGraduate_stopPicker").css({left:100,bottom:15}).jPicker({window:{title:"Pick the start color and opacity for the gradient"},images:{clientPath:s.images.clientPath},color:{active:n,alphaSupport:!0}},(function(n,i){a=n.val("hex")?"#"+n.val("hex"):"none",r=null!==n.val("a")?n.val("a")/256:1,e.setAttribute("fill",a),e.setAttribute("fill-opacity",r),c.setAttribute("stop-color",a),c.setAttribute("stop-opacity",r),t("div.jGraduate_LightBox").hide(),t("#"+l+"_jGraduate_stopPicker").hide()}),null,(function(){t("div.jGraduate_LightBox").hide(),t("#"+l+"_jGraduate_stopPicker").hide()}))})),t(C).find("stop").each((function(){var r=t(this);if(Number(this.getAttribute("offset"))>e){if(!n){var a=this.getAttribute("stop-color"),i=this.getAttribute("stop-opacity");c.setAttribute("stop-color",a),h.setAttribute("fill",a),c.setAttribute("stop-opacity",null===i?1:i),h.setAttribute("fill-opacity",null===i?1:i)}return r.before(c),!1}return!0})),i&&Oe(h),c}function Oe(e){X&&X.setAttribute("stroke","#000"),e.setAttribute("stroke","blue"),X=e}function je(){f.unbind("mousemove",Re),"none"!==$.getAttribute("display")&&function(){$.setAttribute("display","none");var e=t(X),n=e.data("stop"),r=e.data("bg");t([X,n,r]).remove()}(),Q=null}function Ve(){var e=te?"rotate("+te+","+ne+","+re+") ":"";if(1===J&&1===ee)C.removeAttribute("gradientTransform");else{var t=-ne*(J-1),n=-re*(ee-1);C.setAttribute("gradientTransform",e+"translate("+t+","+n+") scale("+J+","+ee+")")}}function Re(e){var n=e.pageX-K.left,r=e.pageY-K.top,a="translate("+(n=n<10?10:n>m+10?m+10:n)+", 26)";r<-60||r>130?($.setAttribute("display","block"),$.setAttribute("transform",a)):$.setAttribute("display","none"),Q.setAttribute("transform",a),t.data(Q,"bg").setAttribute("transform",a);var i=t.data(Q,"stop"),o=(n-10)/m;i.setAttribute("offset",o);var s=0;t(C).find("stop").each((function(e){var n=this.getAttribute("offset"),r=t(this);nn(o,"offsetLeft")+o.offsetWidth*s-this.spinCfg._btn_width?i=120?this.adjustValue(this.spinCfg.step):e.wheelDelta<=-120&&this.adjustValue(-this.spinCfg.step),e.preventDefault()})).change((function(e){this.adjustValue(0)})),this.addEventListener&&this.addEventListener("DOMMouseScroll",(function(e){e.detail>0?this.adjustValue(-this.spinCfg.step):e.detail<0&&this.adjustValue(this.spinCfg.step),e.preventDefault()}))}))},e}
+function Sr(e,t){return void 0===t&&(t=0),Math.round(e*Math.pow(10,t))/Math.pow(10,t)}window.console||(window.console={log:function(e){},dir:function(e){}});var kr,Cr,Ar=function(e){return null==e},Er=jQuery,Gr=function(e,t,n){var r=Er("#svg_editor").parent();Object.entries(t).forEach((function(t){var a=d(t,2),i=a[0],o=a[1];o||console.log(i),n&&(i="#"+i);var s=r.find(i);if(s.length){var l=s[0];switch(e){case"aria-label":l.setAttribute("aria-label",o);break;case"content":h(l.childNodes).some((function(e){return!(3!==e.nodeType||!e.textContent.trim())&&(e.textContent=o,!0)}));break;case"title":l.title=o}}else console.log("Missing element for localization: "+i)}))},Pr=function(){var e=n(regeneratorRuntime.mark((function e(t){var n,r,a,i,o,s,l,c,u,h;return regeneratorRuntime.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return e.next=2,Cr.addLangData(kr);case 2:if(n=e.sent,Er.each(n,(function(e,n){n.data&&(t=Er.merge(t,n.data))})),t.tools){e.next=6;break}return e.abrupt("return",void 0);case 6:return a=(r=t).tools,i=r.properties,o=r.config,s=r.layers,l=r.common,c=r.ui,Gr("content",{curve_segments:i.curve_segments,fitToContent:a.fitToContent,fit_to_all:a.fit_to_all,fit_to_canvas:a.fit_to_canvas,fit_to_layer_content:a.fit_to_layer_content,fit_to_sel:a.fit_to_sel,icon_large:o.icon_large,icon_medium:o.icon_medium,icon_small:o.icon_small,icon_xlarge:o.icon_xlarge,image_opt_embed:o.image_opt_embed,image_opt_ref:o.image_opt_ref,includedImages:o.included_images,largest_object:a.largest_object,layersLabel:s.layers,page:a.page,relativeToLabel:a.relativeTo,selLayerLabel:s.move_elems_to,selectedPredefined:o.select_predefined,selected_objects:a.selected_objects,smallest_object:a.smallest_object,straight_segments:i.straight_segments,svginfo_bg_url:o.editor_img_url+":",svginfo_bg_note:o.editor_bg_note,svginfo_change_background:o.background,svginfo_dim:o.doc_dims,svginfo_editor_prefs:o.editor_prefs,svginfo_height:l.height,svginfo_icons:o.icon_size,svginfo_image_props:o.image_props,svginfo_lang:o.language,svginfo_title:o.doc_title,svginfo_width:l.width,tool_docprops_cancel:l.cancel,tool_docprops_save:l.ok,tool_source_cancel:l.cancel,tool_source_save:l.ok,tool_prefs_cancel:l.cancel,tool_prefs_save:l.ok,sidepanel_handle:s.layers.split("").join(" "),tool_clear:a.new_doc,tool_docprops:a.docprops,tool_export:a.export_img,tool_import:a.import_doc,tool_open:a.open_doc,tool_save:a.save_doc,tool_editor_prefs:o.editor_prefs,tool_editor_homepage:a.editor_homepage,svginfo_units_rulers:o.units_and_rulers,svginfo_rulers_onoff:o.show_rulers,svginfo_unit:o.base_unit,svginfo_grid_settings:o.grid,svginfo_snap_onoff:o.snapping_onoff,svginfo_snap_step:o.snapping_stepsize,svginfo_grid_color:o.grid_color},!0),u={},["cut","copy","paste","paste_in_place","delete","group","ungroup","move_front","move_up","move_down","move_back"].forEach((function(e){u['#cmenu_canvas a[href="#'+e+'"]']=a[e]})),["dupe","merge_down","merge_all"].forEach((function(e){u['#cmenu_layers a[href="#'+e+'"]']=s[e]})),u['#cmenu_layers a[href="#delete"]']=s.del,Gr("content",u),h={},Object.entries({tool_blur:i.blur,tool_position:a.align_to_page,tool_font_family:i.font_family,zoom_panel:c.zoom_level,stroke_linejoin:i.linejoin_miter,stroke_linecap:i.linecap_butt,tool_opacity:i.opacity}).forEach((function(e){var t=d(e,2),n=t[0],r=t[1];h["#"+n+" button"]=r})),Object.entries({group_opacity:i.opacity,zoom:c.zoom_level}).forEach((function(e){var t=d(e,2),n=t[0],r=t[1];h["#"+n]=r})),Gr("aria-label",h),Gr("title",{align_relative_to:a.align_relative_to,circle_cx:i.circle_cx,circle_cy:i.circle_cy,circle_r:i.circle_r,cornerRadiusLabel:i.corner_radius,ellipse_cx:i.ellipse_cx,ellipse_cy:i.ellipse_cy,ellipse_rx:i.ellipse_rx,ellipse_ry:i.ellipse_ry,fill_color:i.fill_color,font_family:i.font_family,idLabel:i.id,image_height:i.image_height,image_url:i.image_url,image_width:i.image_width,layer_delete:s.del,layer_down:s.move_down,layer_new:s.new,layer_rename:s.rename,layer_moreopts:l.more_opts,layer_up:s.move_up,line_x1:i.line_x1,line_x2:i.line_x2,line_y1:i.line_y1,line_y2:i.line_y2,linecap_butt:i.linecap_butt,linecap_round:i.linecap_round,linecap_square:i.linecap_square,linejoin_bevel:i.linejoin_bevel,linejoin_miter:i.linejoin_miter,linejoin_round:i.linejoin_round,main_icon:a.main_menu,palette:c.palette_info,zoom_panel:c.zoom_level,path_node_x:i.node_x,path_node_y:i.node_y,rect_height_tool:i.rect_height,rect_width_tool:i.rect_width,seg_type:i.seg_type,selLayerNames:s.move_selected,selected_x:i.pos_x,selected_y:i.pos_y,stroke_color:i.stroke_color,stroke_style:i.stroke_style,stroke_width:i.stroke_width,svginfo_title:o.doc_title,text:i.text_contents,toggle_stroke_tools:c.toggle_stroke_tools,tool_add_subpath:a.add_subpath,tool_alignbottom:a.align_bottom,tool_aligncenter:a.align_center,tool_alignleft:a.align_left,tool_alignmiddle:a.align_middle,tool_alignright:a.align_right,tool_aligntop:a.align_top,tool_angle:i.angle,tool_blur:i.blur,tool_bold:i.bold,tool_circle:a.mode_circle,tool_clone:a.clone,tool_clone_multi:a.clone,tool_delete:a.del,tool_delete_multi:a.del,tool_ellipse:a.mode_ellipse,tool_fhellipse:a.mode_fhellipse,tool_fhpath:a.mode_fhpath,tool_fhrect:a.mode_fhrect,tool_font_size:i.font_size,tool_group_elements:a.group_elements,tool_make_link:a.make_link,tool_link_url:a.set_link_url,tool_image:a.mode_image,tool_italic:i.italic,tool_line:a.mode_line,tool_move_bottom:a.move_bottom,tool_move_top:a.move_top,tool_node_clone:a.node_clone,tool_node_delete:a.node_delete,tool_node_link:a.node_link,tool_opacity:i.opacity,tool_openclose_path:a.openclose_path,tool_path:a.mode_path,tool_position:a.align_to_page,tool_rect:a.mode_rect,tool_redo:a.redo,tool_reorient:a.reorient_path,tool_select:a.mode_select,tool_source:a.source_save,tool_square:a.mode_square,tool_text:a.mode_text,tool_topath:a.to_path,tool_undo:a.undo,tool_ungroup:a.ungroup,tool_wireframe:a.wireframe_mode,tool_zoom:a.mode_zoom,url_notice:a.no_embed},!0),e.abrupt("return",{langParam:kr,langData:t});case 19:case"end":return e.stop()}}),e)})));return function(t){return e.apply(this,arguments)}}(),Ir=function(){var e=n(regeneratorRuntime.mark((function e(t,n,r){var a;return regeneratorRuntime.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return t?kr=t:navigator.userLanguage?kr=navigator.userLanguage:navigator.language&&(kr=navigator.language),console.log("Lang: "+kr),n.includes(kr)||"test"===kr||(kr="en"),a=r.langPath+"lang."+kr+".js",e.t0=Pr,e.next=7,cn(a,{global:"svgEditorLang_"+kr.replace(/-/g,"_")});case 7:return e.t1=e.sent,e.abrupt("return",(0,e.t0)(e.t1));case 9:case"end":return e.stop()}}),e)})));return function(t,n,r){return e.apply(this,arguments)}}();function Tr(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){if(!(Symbol.iterator in Object(e)||"[object Arguments]"===Object.prototype.toString.call(e)))return;var n=[],r=!0,a=!1,i=void 0;try{for(var o,s=e[Symbol.iterator]();!(r=(o=s.next()).done)&&(n.push(o.value),!t||n.length!==t);r=!0);}catch(e){a=!0,i=e}finally{try{r||null==s.return||s.return()}finally{if(a)throw i}}return n}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}()}function Nr(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=t.before,r=t.after,a=t.favicon,i=t.canvas,o=t.image,s=void 0===o||o,l=t.acceptErrors;function c(e){var t={};if(Array.isArray(e)){var o=Tr(e,2);e=o[0];var c=o[1];t=void 0===c?{}:c}var u=t.favicon,d=void 0===u?a:u,h=t,f=h.before,p=void 0===f?n:f,g=h.after,m=void 0===g?r:g,v=h.canvas,y=void 0===v?i:v,_=h.image,b=void 0===_?s:_;function x(){p?p.before(w):m?m.after(w):document.head.appendChild(w)}var w=document.createElement("link");return new Promise((function(n,r){var a=r;if(l&&(a="function"==typeof l?function(a){l({error:a,stylesheetURL:e,options:t,resolve:n,reject:r})}:n),e.endsWith(".css")?d=!1:e.endsWith(".ico")&&(d=!0),d){if(w.rel="shortcut icon",w.type="image/x-icon",!1===b)return w.href=e,x(),void n(w);var i=document.createElement("canvas");i.width=16,i.height=16;var o=i.getContext("2d"),s=document.createElement("img");return s.addEventListener("error",(function(e){r(e)})),s.addEventListener("load",(function(){o.drawImage(s,0,0),w.href=y?i.toDataURL("image/x-icon"):e,x(),n(w)})),void(s.src=e)}w.rel="stylesheet",w.type="text/css",w.href=e,x(),w.addEventListener("error",(function(e){a(e)})),w.addEventListener("load",(function(){n(w)}))}))}return e=Array.isArray(e)?e:[e],Promise.all(e.map((function(e){return c(e)})))}var Lr={},Mr=[function(e){function t(t){if("string"==typeof t.data){var n=t.handler,r=t.data.toLowerCase().split(" ");t.handler=function(t){if(this===t.target||27===t.which||!/textarea|select/i.test(t.target.nodeName)&&"text"!==t.target.type){var a="keypress"!==t.type&&e.hotkeys.specialKeys[t.which],i=String.fromCharCode(t.which).toLowerCase(),o="",s={};t.altKey&&"alt"!==a&&(o+="alt+"),t.ctrlKey&&"ctrl"!==a&&(o+="ctrl+"),t.metaKey&&!t.ctrlKey&&"meta"!==a&&(o+="meta+"),t.shiftKey&&"shift"!==a&&(o+="shift+"),a?s[o+a]=!0:(s[o+i]=!0,s[o+e.hotkeys.shiftNums[i]]=!0,"shift+"===o&&(s[e.hotkeys.shiftNums[i]]=!0));for(var l=0,c=r.length;l","/":"?","\\":"|"}},e.each(["keydown","keyup","keypress"],(function(){e.event.special[this]={add:t}})),e},function(e){var t={};return e.svgIcons=function(n){var r,a,i,o,s,l=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},c="http://www.w3.org/2000/svg",u="http://www.w3.org/1999/xlink",d=l.w||24,h=l.h||24,f=!1,p=!1,g=0,m="data:image/svg+xml;charset=utf-8;base64,";if(l.svgz){o=e('').appendTo("body").hide();try{a=o[0].contentDocument,o.load(y),y(0,!0)}catch(e){w()}}else{var v=new DOMParser;e.ajax({url:n,dataType:"string",success:function(t){t?(a=v.parseFromString(t,"text/xml"),e((function(){y("ajax")}))):e(w)},error:function(t){window.opera?e((function(){w()})):t.responseText?((a=v.parseFromString(t.responseText,"text/xml")).childNodes.length||e(w),e((function(){y("ajax")}))):e(w)}})}function y(t,n){if("ajax"!==t){if(p)return;var s=(a=o[0].contentDocument)&&a.getElementById("svg_eof");if(!(s||n&&s))return void(++g<50?setTimeout(y,20):(w(),p=!0));p=!0}if(r=e(a.firstChild).children(),l.no_img)setTimeout((function(){f||x()}),500);else{var c=m+"PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNzUiIGhlaWdodD0iMjc1Ij48L3N2Zz4%3D";i=e(new Image).attr({src:c,width:0,height:0,alt:l.testIconAlt||"icon"}).appendTo("body").load((function(){x(!0)})).error((function(){x()}))}}function _(e,t,n,r){if(_r&&t.css("visibility","hidden"),l.replace){r&&t.attr("id",n);var a=e.attr("class");if(a&&t.attr("class","svg_icon "+a),!e.alt){var i="icon";l.alts&&(i=l.alts[n]||i),t.attr("alt",i)}e.replaceWith(t)}else e.append(t);_r&&setTimeout((function(){t.removeAttr("style")}),1)}function b(e,n){void 0!==l.id_match&&!1===l.id_match||_(s,e,n,!0),t[n]=e}function x(){var n=arguments.length>0&&void 0!==arguments[0]&&arguments[0],a=arguments.length>1&&void 0!==arguments[1]&&arguments[1];if(!f){var p;if(l.no_img&&(n=!1),n&&(p=e(document.createElement("div"))).hide().appendTo("body"),a){var g=l.fallback_path||"";e.each(a,(function(t,n){s=e("#"+t);var r="icon";l.alts&&(r=l.alts[t]||r),b(e(new Image).attr({class:"svg_icon",src:g+n,width:d,height:h,alt:r}),t)}))}else for(var v=r.length,y=0;y0&&!n&&(i=br(i,r)),_(e(this),i,a)}))})),a||(n&&p.remove(),o&&o.remove(),i&&i.remove()),l.resize&&e.resizeSvgIcons(l.resize),f=!0,l.callback&&l.callback(t)}}function w(){if(n.includes(".svgz")){var t=n.replace(".svgz",".svg");window.console&&console.log(".svgz failed, trying with .svg"),e.svgIcons(t,l)}else l.fallback&&x(!1,l.fallback)}},e.getSvgIcon=function(e,n){var r=t[e];return n&&r&&(r=br(r,0).clone(!0)),r},e.resizeSvgIcons=function(t){var n=!e(".svg_icon:first").length;e.each(t,(function(t,r){var a=Array.isArray(r),i=a?r[0]:r,o=a?r[1]:r;n&&(t=t.replace(/\.svg_icon/g,"svg")),e(t).each((function(){this.setAttribute("width",i),this.setAttribute("height",o),window.opera&&window.widget&&(this.parentNode.style.width=i+"px",this.parentNode.style.height=o+"px")}))}))},e},function(t){t.loadingStylesheets||(t.loadingStylesheets=[]),t.loadingStylesheets.includes("jgraduate/css/jGraduate.css")||t.loadingStylesheets.push("jgraduate/css/jGraduate.css"),t.jGraduate={Paint:function e(t){r(this,e);var n=t||{};if(this.alpha=isNaN(n.alpha)?100:n.alpha,n.copy)switch(this.type=n.copy.type,this.alpha=n.copy.alpha,this.solidColor=null,this.linearGradient=null,this.radialGradient=null,this.type){case"none":break;case"solidColor":this.solidColor=n.copy.solidColor;break;case"linearGradient":this.linearGradient=n.copy.linearGradient.cloneNode(!0);break;case"radialGradient":this.radialGradient=n.copy.radialGradient.cloneNode(!0)}else n.linearGradient?(this.type="linearGradient",this.solidColor=null,this.radialGradient=null,this.linearGradient=n.linearGradient.cloneNode(!0)):n.radialGradient?(this.type="radialGradient",this.solidColor=null,this.linearGradient=null,this.radialGradient=n.radialGradient.cloneNode(!0)):n.solidColor?(this.type="solidColor",this.solidColor=n.solidColor):(this.type="none",this.solidColor=null,this.linearGradient=null,this.radialGradient=null)}},t.fn.jGraduateDefaults={paint:new t.jGraduate.Paint,window:{pickerTitle:"Drag markers to pick a paint"},images:{clientPath:"images/"},newstop:"inverse"};var n=navigator.userAgent.includes("Gecko/");function a(e,t,r){var a=document.createElementNS(xr,e);return function(e,t){n?Object.entries(t).forEach((function(t){var n=d(t,2),r=n[0],a=n[1];e.setAttribute(r,a)})):Object.entries(t).forEach((function(t){var n=d(t,2),r=n[0],a=n[1],i=e[r];i&&"SVGLength"===i.constructor?i.baseVal.value=a:e.setAttribute(r,a)}))}(a,t),r&&r.append(a),a}return t.fn.jGraduate=function(n,r,i){return this.each((function(){var o=t(this),s=t.extend(!0,{},t.fn.jGraduateDefaults,n||{}),l=o.attr("id"),c="#"+o.attr("id")+" ";if(c){var u=function(){switch(o.paint.type){case"radialGradient":o.paint.linearGradient=null;break;case"linearGradient":o.paint.radialGradient=null;break;case"solidColor":o.paint.radialGradient=o.paint.linearGradient=null}"function"==typeof o.okCallback&&o.okCallback(o.paint),o.hide()},d=function(){"function"==typeof o.cancelCallback&&o.cancelCallback(),o.hide()};t.extend(!0,o,{paint:new t.jGraduate.Paint({copy:s.paint}),okCallback:"function"==typeof r?r:null,cancelCallback:"function"==typeof i?i:null});var h=null,f=t(window);"none"===o.paint.type&&(o.paint=new t.jGraduate.Paint({solidColor:"ffffff"})),o.addClass("jGraduate_Picker"),o.html('Solid Color Linear Gradient Radial Gradient
');var p=t(c+"> .jGraduate_colPick"),g=t(c+"> .jGraduate_gradPick");g.html('Spread method Pad Reflect Repeat
');var m={};t(".jGraduate_SliderBar").width(145);var v,y=t("#"+l+"_jGraduate_GradContainer")[0],_=a("svg",{id:l+"_jgraduate_svg",width:256,height:256,xmlns:xr},y),b=o.paint.type,x=o.paint[b],w=x,S=o.paint.alpha,k="solidColor"===b;switch(b){case"solidColor":case"linearGradient":if(k||(w.id=l+"_lg_jgraduate_grad",x=w=_.appendChild(w)),a("radialGradient",{id:l+"_rg_jgraduate_grad"},_),"linearGradient"===b)break;case"radialGradient":k||(w.id=l+"_rg_jgraduate_grad",x=w=_.appendChild(w)),a("linearGradient",{id:l+"_lg_jgraduate_grad"},_)}if(k){x=w=t("#"+l+"_lg_jgraduate_grad")[0],Te(0,"#"+(h=o.paint[b]),1);var C=e(s.newstop);if("string"===C)switch(s.newstop){case"same":Te(1,"#"+h,1);break;case"inverse":for(var A="",E=0;E<6;E+=2){var G=(255-parseInt(h.substr(E,2),16)).toString(16);G.length<2&&(G=0+G),A+=G}Te(1,"#"+A,1);break;case"white":Te(1,"#ffffff",1);break;case"black":Te(1,"#000000",1)}else if("object"===C){var P="opac"in s.newstop?s.newstop.opac:1;Te(1,s.newstop.color||"#"+h,P)}}var I,T=parseFloat(x.getAttribute("x1")||0),N=parseFloat(x.getAttribute("y1")||0),L=parseFloat(x.getAttribute("x2")||1),M=parseFloat(x.getAttribute("y2")||0),O=parseFloat(x.getAttribute("cx")||.5),j=parseFloat(x.getAttribute("cy")||.5),V=parseFloat(x.getAttribute("fx")||O),R=parseFloat(x.getAttribute("fy")||j),B=a("rect",{id:l+"_jgraduate_rect",x:0,y:0,width:256,height:256,fill:"url(#"+l+"_jgraduate_grad)","fill-opacity":S/100},_),U=t("
").attr({class:"grad_coord jGraduate_lg_field",title:"Begin Stop"}).text(1).css({top:256*N,left:256*T}).data("coord","start").appendTo(y),F=U.clone().text(2).css({top:256*M,left:256*L}).attr("title","End stop").data("coord","end").appendTo(y),D=t("
").attr({class:"grad_coord jGraduate_rg_field",title:"Center stop"}).text("C").css({top:256*j,left:256*O}).data("coord","center").appendTo(y),H=D.clone().text("F").css({top:256*R,left:256*V,display:"none"}).attr("title","Focus point").data("coord","focus").appendTo(y);H[0].id=l+"_jGraduate_focusCoord",t.each(["x1","y1","x2","y2","cx","cy","fx","fy"],(function(e,n){var r=isNaN(n[1]),a=w.getAttribute(n);a||(a=r?"0.5":"x2"===n?"1.0":"0.0"),m[n]=t("#"+l+"_jGraduate_"+n).val(a).change((function(){isNaN(parseFloat(this.value))||this.value<0?this.value=0:this.value>1&&(this.value=1),("f"!==n[0]||I)&&(r&&"radialGradient"===b||!r&&"linearGradient"===b)&&w.setAttribute(n,this.value);var e=r?"c"===n[0]?D:H:"1"===n[1]?U:F,t=n.includes("x")?"left":"top";e.css(t,256*this.value)})).change()}));var z,q,Y,X,W=t("#"+l+"_jGraduate_StopSlider"),Q=a("path",{d:"m9.75,-6l-19.5,19.5m0,-19.5l19.5,19.5",fill:"none",stroke:"#D00","stroke-width":5,display:"none"},void 0),K=1,Z=1,$=0,J=O,ee=j,te=a("svg",{width:"100%",height:45},W[0]),ne=a("pattern",{width:16,height:16,patternUnits:"userSpaceOnUse",id:"jGraduate_trans"},te),re=a("image",{width:16,height:16},ne),ae=s.images.clientPath+"map-opacity.png";re.setAttributeNS(wr,"xlink:href",ae),t(te).click((function(e){if(X=W.offset(),"path"!==e.target.tagName){var t=e.pageX-X.left-8;Te((t=t<10?10:t>266?266:t)/256,0,0,!0),e.stopPropagation()}})),t(te).mouseover((function(){te.append(Q)})),v=a("g",{},te),a("line",{x1:10,y1:15,x2:266,y2:15,"stroke-width":2,stroke:"#000"},te);var ie,oe,se,le,ce=g.find(".jGraduate_spreadMethod").change((function(){w.setAttribute("spreadMethod",t(this).val())})),ue=null,de=function(e){var t=e.pageX-ie.left,n=e.pageY-ie.top;t=t<0?0:t>256?256:t,n=n<0?0:n>256?256:n,ue.css("left",t).css("top",n);var r=t/256,a=n/256,i=ue.data("coord"),o=w;switch(i){case"start":m.x1.val(r),m.y1.val(a),o.setAttribute("x1",r),o.setAttribute("y1",a);break;case"end":m.x2.val(r),m.y2.val(a),o.setAttribute("x2",r),o.setAttribute("y2",a);break;case"center":m.cx.val(r),m.cy.val(a),o.setAttribute("cx",r),o.setAttribute("cy",a),J=r,ee=a,Me();break;case"focus":m.fx.val(r),m.fy.val(a),o.setAttribute("fx",r),o.setAttribute("fy",a),Me()}e.preventDefault()},he=function e(){ue=null,f.unbind("mousemove",de).unbind("mouseup",e)},fe=(z=w.getElementsByTagNameNS(xr,"stop")).length;if(fe<2){for(;fe<2;)w.append(document.createElementNS(xr,"stop")),++fe;z=w.getElementsByTagNameNS(xr,"stop")}for(var pe=0;pe99.5&&(n=99.5),n>0?Z=1-n/100:K=-n/100-1,a=(n+100)/2*145/100,t&&Me();break;case"angle":a=($=n)/180,a+=.5,a*=145,t&&Me()}a>145?a=145:a<0&&(a=0),r.css({"margin-left":a-5})})).change()}));for(var Ae=function(e){!function(e){var t=le.offset.left,n=le.parent,r=e.pageX-t-parseInt(n.css("border-left-width"));r>145&&(r=145),r<=0&&(r=0);var a=r-5;switch(r/=145,le.type){case"radius":(r=Math.pow(2*r,2.5))>.98&&r<1.02&&(r=1),r<=.01&&(r=.01),w.setAttribute("r",r);break;case"opacity":o.paint.alpha=parseInt(100*r),B.setAttribute("fill-opacity",r);break;case"ellip":K=1,Z=1,r<.5?K=(r/=.5)<=0?.01:r:r>.5&&(Z=(r=2-(r/=.5))<=0?.01:r),Me(),Z===(r-=1)+1&&(r=Math.abs(r));break;case"angle":r-=.5,$=r*=180,Me(),r/=100}le.elem.css({"margin-left":a}),r=Math.round(100*r),le.input.val(r)}(e),e.preventDefault()},Ee=function e(t){f.unbind("mousemove",Ae).unbind("mouseup",e),le=null},Ge=(255*o.paint.alpha/100).toString(16);Ge.length<2;)Ge="0"+Ge;Ge=Ge.split(".")[0],h="none"===o.paint.solidColor?"":o.paint.solidColor+Ge,k||(h=z[0].getAttribute("stop-color")),t.extend(t.fn.jPicker.defaults.window,{alphaSupport:!0,effects:{type:"show",speed:0}}),p.jPicker({window:{title:s.window.pickerTitle},images:{clientPath:s.images.clientPath},color:{active:h,alphaSupport:!0}},(function(e){o.paint.type="solidColor",o.paint.alpha=e.val("ahex")?Math.round(e.val("a")/255*100):100,o.paint.solidColor=e.val("hex")?e.val("hex"):"none",o.paint.radialGradient=null,u()}),null,(function(){d()}));var Pe,Ie=t(c+" .jGraduate_tabs li");switch(Ie.click((function(){Ie.removeClass("jGraduate_tab_current"),t(this).addClass("jGraduate_tab_current"),t(c+" > div").hide();var e=t(this).attr("data-type");if(t(c+" .jGraduate_gradPick").show(),"rg"===e||"lg"===e){t(".jGraduate_"+e+"_field").show(),t(".jGraduate_"+("lg"===e?"rg":"lg")+"_field").hide(),t("#"+l+"_jgraduate_rect")[0].setAttribute("fill","url(#"+l+"_"+e+"_jgraduate_grad)"),b="lg"===e?"linearGradient":"radialGradient",t("#"+l+"_jGraduate_OpacInput").val(o.paint.alpha).change();var n=t("#"+l+"_"+e+"_jgraduate_grad")[0];if(w!==n){var r=t(w).find("stop");t(n).empty().append(r),w=n;var a=ce.val();w.setAttribute("spreadMethod",a)}I="rg"===e&&null!==w.getAttribute("fx")&&!(O===V&&j===R),t("#"+l+"_jGraduate_focusCoord").toggle(I),I&&(t("#"+l+"_jGraduate_match_ctr")[0].checked=!1)}else t(c+" .jGraduate_gradPick").hide(),t(c+" .jGraduate_colPick").show()})),t(c+" > div").hide(),Ie.removeClass("jGraduate_tab_current"),o.paint.type){case"linearGradient":Pe=t(c+" .jGraduate_tab_lingrad");break;case"radialGradient":Pe=t(c+" .jGraduate_tab_radgrad");break;default:Pe=t(c+" .jGraduate_tab_color")}o.show(),setTimeout((function(){Pe.addClass("jGraduate_tab_current").click()}),10)}else t.alert("Container element must have an id attribute to maintain unique id strings for sub-elements.");function Te(e,n,r,i,o){var c=o||a("stop",{"stop-color":n,"stop-opacity":r,offset:e},w);o?(n=o.getAttribute("stop-color"),r=o.getAttribute("stop-opacity"),e=o.getAttribute("offset")):w.append(c),null===r&&(r=1);var u="M-6.2,0.9c3.6-4,6.7-4.3,6.7-12.4c-0.2,7.9,3.1,8.8,6.5,12.4c3.5,3.8,2.9,9.6,0,12.3c-3.1,2.8-10.4,2.7-13.2,0C-9.6,9.9-9.4,4.4-6.2,0.9z",d=a("path",{d:u,fill:"url(#jGraduate_trans)",transform:"translate("+(10+256*e)+", 26)"},v),h=a("path",{d:u,fill:n,"fill-opacity":r,transform:"translate("+(10+256*e)+", 26)",stroke:"#000","stroke-width":1.5},v);return t(h).mousedown((function(e){return Ne(this),Y=q,f.mousemove(Oe).mouseup(Le),X=W.offset(),e.preventDefault(),!1})).data("stop",c).data("bg",d).dblclick((function(){t("div.jGraduate_LightBox").show();for(var e=this,r=Number(c.getAttribute("stop-opacity"))||1,a=c.getAttribute("stop-color")||1,i=(255*parseFloat(r)).toString(16);i.length<2;)i="0"+i;n=a.substr(1)+i,t("#"+l+"_jGraduate_stopPicker").css({left:100,bottom:15}).jPicker({window:{title:"Pick the start color and opacity for the gradient"},images:{clientPath:s.images.clientPath},color:{active:n,alphaSupport:!0}},(function(n,i){a=n.val("hex")?"#"+n.val("hex"):"none",r=null!==n.val("a")?n.val("a")/256:1,e.setAttribute("fill",a),e.setAttribute("fill-opacity",r),c.setAttribute("stop-color",a),c.setAttribute("stop-opacity",r),t("div.jGraduate_LightBox").hide(),t("#"+l+"_jGraduate_stopPicker").hide()}),null,(function(){t("div.jGraduate_LightBox").hide(),t("#"+l+"_jGraduate_stopPicker").hide()}))})),t(w).find("stop").each((function(){var r=t(this);if(Number(this.getAttribute("offset"))>e){if(!n){var a=this.getAttribute("stop-color"),i=this.getAttribute("stop-opacity");c.setAttribute("stop-color",a),h.setAttribute("fill",a),c.setAttribute("stop-opacity",null===i?1:i),h.setAttribute("fill-opacity",null===i?1:i)}return r.before(c),!1}return!0})),i&&Ne(h),c}function Ne(e){q&&q.setAttribute("stroke","#000"),e.setAttribute("stroke","blue"),q=e}function Le(){f.unbind("mousemove",Oe),"none"!==Q.getAttribute("display")&&function(){Q.setAttribute("display","none");var e=t(q),n=e.data("stop"),r=e.data("bg");t([q,n,r]).remove()}(),Y=null}function Me(){var e=$?"rotate("+$+","+J+","+ee+") ":"";if(1===K&&1===Z)w.removeAttribute("gradientTransform");else{var t=-J*(K-1),n=-ee*(Z-1);w.setAttribute("gradientTransform",e+"translate("+t+","+n+") scale("+K+","+Z+")")}}function Oe(e){var n=e.pageX-X.left,r=e.pageY-X.top,a="translate("+(n=n<10?10:n>266?266:n)+", 26)";r<-60||r>130?(Q.setAttribute("display","block"),Q.setAttribute("transform",a)):Q.setAttribute("display","none"),Y.setAttribute("transform",a),t.data(Y,"bg").setAttribute("transform",a);var i=(n-10)/256;t.data(Y,"stop").setAttribute("offset",i);var o=0;t(w).find("stop").each((function(e){var n=this.getAttribute("offset"),r=t(this);nn(o,"offsetLeft")+o.offsetWidth*s-this.spinCfg._btn_width?i=120?this.adjustValue(this.spinCfg.step):e.wheelDelta<=-120&&this.adjustValue(-this.spinCfg.step),e.preventDefault()})).change((function(e){this.adjustValue(0)})),this.addEventListener&&this.addEventListener("DOMMouseScroll",(function(e){e.detail>0?this.adjustValue(-this.spinCfg.step):e.detail<0&&this.adjustValue(this.spinCfg.step),e.preventDefault()}))}))},e}
/**
* @file jQuery Context Menu Plugin
* Cory S.N. LaViska
@@ -156,5 +156,5 @@ function xr(e,t){return void 0===t&&(t=0),Math.round(e*Math.pow(10,t))/Math.pow(
* This plugin is dual-licensed under the GNU General Public License
* and the MIT License and is copyright A Beautiful Site, LLC.
*
- */,q,function(e){var t=e(window),n=e(document);return e.extend(e.fn,{contextMenu:function(r,a){return void 0!==r.menu&&(void 0===r.inSpeed&&(r.inSpeed=150),void 0===r.outSpeed&&(r.outSpeed=75),0===r.inSpeed&&(r.inSpeed=-1),0===r.outSpeed&&(r.outSpeed=-1),e(this).each((function(){var i=e(this),o=e(i).offset(),s=e("#"+r.menu);s.addClass("contextMenu"),e(this).bind("mousedown",(function(l){e(this).mouseup((function(c){var u=e(this);if(u.unbind("mouseup"),2===l.button||r.allowLeft||l.ctrlKey&&U()){if(c.stopPropagation(),e(".contextMenu").hide(),i.hasClass("disabled"))return!1;var d=c.pageX,h=c.pageY,f=t.width()-s.width(),p=t.height()-s.height();d>f-15&&(d=f-15),h>p-30&&(h=p-30),n.unbind("click"),s.css({top:h,left:d}).fadeIn(r.inSpeed),s.find("A").mouseover((function(){s.find("LI.hover").removeClass("hover"),e(this).parent().addClass("hover")})).mouseout((function(){s.find("LI.hover").removeClass("hover")})),n.keypress((function(e){switch(e.keyCode){case 38:s.find("LI.hover").length?(s.find("LI.hover").removeClass("hover").prevAll("LI:not(.disabled)").eq(0).addClass("hover"),s.find("LI.hover").length||s.find("LI:last").addClass("hover")):s.find("LI:last").addClass("hover");break;case 40:s.find("LI.hover").length?(s.find("LI.hover").removeClass("hover").nextAll("LI:not(.disabled)").eq(0).addClass("hover"),s.find("LI.hover").length||s.find("LI:first").addClass("hover")):s.find("LI:first").addClass("hover");break;case 13:s.find("LI.hover A").trigger("click");break;case 27:n.trigger("click")}})),s.find("A").unbind("mouseup"),s.find("LI:not(.disabled) A").mouseup((function(){return n.unbind("click").unbind("keypress"),e(".contextMenu").hide(),a&&a(e(this).attr("href").substr(1),e(u),{x:d-o.left,y:h-o.top,docX:d,docY:h}),!1})),setTimeout((function(){n.click((function(){return n.unbind("click").unbind("keypress"),s.fadeOut(r.outSpeed),!1}))}),0)}}))})),e.browser.mozilla?e("#"+r.menu).each((function(){e(this).css({MozUserSelect:"none"})})):e.browser.msie?e("#"+r.menu).each((function(){e(this).bind("selectstart.disableTextSelect",(function(){return!1}))})):e("#"+r.menu).each((function(){e(this).bind("mousedown.disableTextSelect",(function(){return!1}))})),e(i).add(e("UL.contextMenu")).bind("contextmenu",(function(){return!1}))})),e(this))},disableContextMenuItems:function(t){return void 0===t?(e(this).find("LI").addClass("disabled"),e(this)):(e(this).each((function(){if(void 0!==t){var n=t.split(","),r=!0,a=!1,i=void 0;try{for(var o,s=n[Symbol.iterator]();!(r=(o=s.next()).done);r=!0){var l=o.value;e(this).find('A[href="'+l+'"]').parent().addClass("disabled")}}catch(e){a=!0,i=e}finally{try{r||null==s.return||s.return()}finally{if(a)throw i}}}})),e(this))},enableContextMenuItems:function(t){return void 0===t?(e(this).find("LI.disabled").removeClass("disabled"),e(this)):(e(this).each((function(){if(void 0!==t){var n=t.split(","),r=!0,a=!1,i=void 0;try{for(var o,s=n[Symbol.iterator]();!(r=(o=s.next()).done);r=!0){var l=o.value;e(this).find('A[href="'+l+'"]').parent().removeClass("disabled")}}catch(e){a=!0,i=e}finally{try{r||null==s.return||s.return()}finally{if(a)throw i}}}})),e(this))},disableContextMenu:function(){return e(this).each((function(){e(this).addClass("disabled")})),e(this)},enableContextMenu:function(){return e(this).each((function(){e(this).removeClass("disabled")})),e(this)},destroyContextMenu:function(){return e(this).each((function(){e(this).unbind("mousedown").unbind("mouseup")})),e(this)}}),e},function(t){t.loadingStylesheets||(t.loadingStylesheets=[]);t.loadingStylesheets.includes("jgraduate/css/jPicker.css")||t.loadingStylesheets.push("jgraduate/css/jPicker.css");var n=function e(n,a){r(this,e);var i=this;function o(e){k.forEach((function(t){t.call(i,i,e)}))}function s(e){var r=n.offset();f={l:0|r.left,t:0|r.top},clearTimeout(p),p=setTimeout((function(){u.call(i,e)}),0),t(document).bind("mousemove",l).bind("mouseup",c),e.preventDefault()}function l(e){return clearTimeout(p),p=setTimeout((function(){u.call(i,e)}),0),e.stopPropagation(),e.preventDefault(),!1}function c(e){return t(document).unbind("mouseup",c).unbind("mousemove",l),e.stopPropagation(),e.preventDefault(),!1}function u(e){var t=n.w,r=n.h,a=e.pageX-f.l,o=e.pageY-f.t;a<0?a=0:a>t&&(a=t),o<0?o=0:o>r&&(o=r),d.call(i,"xy",{x:a/t*y+v,y:o/r*w+b})}function d(e,t,n){if(!(void 0!==t))switch(kr(e)&&(e="xy"),e.toLowerCase()){case"x":return g;case"y":return m;case"xy":default:return{x:g,y:m}}if(kr(n)||n!==i){var r,a,s=!1;switch(kr(e)&&(e="xy"),e.toLowerCase()){case"x":r=t&&(t.x&&0|t.x||0|t)||0;break;case"y":a=t&&(t.y&&0|t.y||0|t)||0;break;case"xy":default:r=t&&t.x&&0|t.x||0,a=t&&t.y&&0|t.y||0}kr(r)||(r_&&(r=_),g!==r&&(g=r,s=!0)),kr(a)||(ax&&(a=x),m!==a&&(m=a,s=!0)),s&&o.call(i,n||i)}}function h(e){"function"==typeof e&&k.push(e)}var f,p,g=0,m=0,v=0,_=100,y=100,b=0,x=100,w=100,S=n.find("img:first"),k=[];t.extend(!0,i,{val:d,range:function(e,t){var n,r,a,i;if(!(void 0!==t))switch(kr(e)&&(e="all"),e.toLowerCase()){case"minx":return v;case"maxx":return _;case"rangex":return{minX:v,maxX:_,rangeX:y};case"miny":return b;case"maxy":return x;case"rangey":return{minY:b,maxY:x,rangeY:w};case"all":default:return{minX:v,maxX:_,rangeX:y,minY:b,maxY:x,rangeY:w}}switch(kr(e)&&(e="all"),e.toLowerCase()){case"minx":n=t&&(t.minX&&0|t.minX||0|t)||0;break;case"maxx":r=t&&(t.maxX&&0|t.maxX||0|t)||0;break;case"rangex":n=t&&t.minX&&0|t.minX||0,r=t&&t.maxX&&0|t.maxX||0;break;case"miny":a=t&&(t.minY&&0|t.minY||0|t)||0;break;case"maxy":i=t&&(t.maxY&&0|t.maxY||0|t)||0;break;case"rangey":a=t&&t.minY&&0|t.minY||0,i=t&&t.maxY&&0|t.maxY||0;break;case"all":default:n=t&&t.minX&&0|t.minX||0,r=t&&t.maxX&&0|t.maxX||0,a=t&&t.minY&&0|t.minY||0,i=t&&t.maxY&&0|t.maxY||0}kr(n)||v===n||(y=_-(v=n)),kr(r)||_===r||(y=(_=r)-v),kr(a)||b===a||(w=x-(b=a)),kr(i)||x===i||(w=(x=i)-b)},bind:h,unbind:function(e){if("function"==typeof e)for(var t;t=k.includes(e);)k.splice(t,1)},destroy:function(){t(document).unbind("mouseup",c).unbind("mousemove",l),n.unbind("mousedown",s),n=null,S=null,k=null}}),S.src=a.arrow&&a.arrow.image,S.w=a.arrow&&a.arrow.width||S.width(),S.h=a.arrow&&a.arrow.height||S.height(),n.w=a.map&&a.map.width||n.width(),n.h=a.map&&a.map.height||n.height(),n.bind("mousedown",s),h.call(i,(function(){var e=n.w,t=n.h,r=S.w,a=S.h,i=0,o=0;setTimeout((function(){y>0&&(i=g===_?e:g/y*e|0),w>0&&(o=m===x?t:m/w*t|0),r>=e?i=(e>>1)-(r>>1):i-=r>>1,a>=t?o=(t>>1)-(a>>1):o-=a>>1,S.css({left:i+"px",top:o+"px"})}))}))},a=function e(n,a,i,o){r(this,e);var s=this,l=n.find("td.Text input");function c(e){if(""!==e.target.value||e.target===w.get(0)||(kr(i)||e.target===i.get(0))&&!kr(i)){if(!h(e))return e;switch(e.target){case g.get(0):switch(e.keyCode){case 38:return g.val(f.call(s,1+(g.val()<<0),0,255)),a.val("r",g.val(),e.target),!1;case 40:return g.val(f.call(s,(g.val()<<0)-1,0,255)),a.val("r",g.val(),e.target),!1}break;case m.get(0):switch(e.keyCode){case 38:return m.val(f.call(s,1+(m.val()<<0),0,255)),a.val("g",m.val(),e.target),!1;case 40:return m.val(f.call(s,(m.val()<<0)-1,0,255)),a.val("g",m.val(),e.target),!1}break;case v.get(0):switch(e.keyCode){case 38:return v.val(f.call(s,1+(v.val()<<0),0,255)),a.val("b",v.val(),e.target),!1;case 40:return v.val(f.call(s,(v.val()<<0)-1,0,255)),a.val("b",v.val(),e.target),!1}break;case _&&_.get(0):switch(e.keyCode){case 38:return _.val(f.call(s,parseFloat(_.val())+1,0,100)),a.val("a",xr(255*_.val()/100,o),e.target),!1;case 40:return _.val(f.call(s,parseFloat(_.val())-1,0,100)),a.val("a",xr(255*_.val()/100,o),e.target),!1}break;case y.get(0):switch(e.keyCode){case 38:return y.val(f.call(s,1+(y.val()<<0),0,360)),a.val("h",y.val(),e.target),!1;case 40:return y.val(f.call(s,(y.val()<<0)-1,0,360)),a.val("h",y.val(),e.target),!1}break;case b.get(0):switch(e.keyCode){case 38:return b.val(f.call(s,1+(b.val()<<0),0,100)),a.val("s",b.val(),e.target),!1;case 40:return b.val(f.call(s,(b.val()<<0)-1,0,100)),a.val("s",b.val(),e.target),!1}break;case x.get(0):switch(e.keyCode){case 38:return x.val(f.call(s,1+(x.val()<<0),0,100)),a.val("v",x.val(),e.target),!1;case 40:return x.val(f.call(s,(x.val()<<0)-1,0,100)),a.val("v",x.val(),e.target),!1}}}}function u(e){if(""!==e.target.value||e.target===w.get(0)||(kr(i)||e.target===i.get(0))&&!kr(i)){if(!h(e))return e;switch(e.target){case g.get(0):g.val(f.call(s,g.val(),0,255)),a.val("r",g.val(),e.target);break;case m.get(0):m.val(f.call(s,m.val(),0,255)),a.val("g",m.val(),e.target);break;case v.get(0):v.val(f.call(s,v.val(),0,255)),a.val("b",v.val(),e.target);break;case _&&_.get(0):_.val(f.call(s,_.val(),0,100)),a.val("a",xr(255*_.val()/100,o),e.target);break;case y.get(0):y.val(f.call(s,y.val(),0,360)),a.val("h",y.val(),e.target);break;case b.get(0):b.val(f.call(s,b.val(),0,100)),a.val("s",b.val(),e.target);break;case x.get(0):x.val(f.call(s,x.val(),0,100)),a.val("v",x.val(),e.target);break;case w.get(0):w.val(w.val().replace(/[^a-fA-F\d]/g,"").toLowerCase().substring(0,6)),i&&i.val(w.val()),a.val("hex",""!==w.val()?w.val():null,e.target);break;case i&&i.get(0):i.val(i.val().replace(/[^a-fA-F\d]/g,"").toLowerCase().substring(0,6)),w.val(i.val()),a.val("hex",""!==i.val()?i.val():null,e.target);break;case S&&S.get(0):S.val(S.val().replace(/[^a-fA-F\d]/g,"").toLowerCase().substring(0,2)),a.val("a",kr(S.val())?null:parseInt(S.val(),16),e.target)}}}function d(e){if(!kr(a.val()))switch(e.target){case g.get(0):g.val(a.val("r"));break;case m.get(0):m.val(a.val("g"));break;case v.get(0):v.val(a.val("b"));break;case _&&_.get(0):_.val(xr(100*a.val("a")/255,o));break;case y.get(0):y.val(a.val("h"));break;case b.get(0):b.val(a.val("s"));break;case x.get(0):x.val(a.val("v"));break;case w.get(0):case i&&i.get(0):w.val(a.val("hex")),i&&i.val(a.val("hex"));break;case S&&S.get(0):S.val(a.val("ahex").substring(6))}}function h(e){switch(e.keyCode){case 9:case 16:case 29:case 37:case 39:return!1;case"c".charCodeAt():case"v".charCodeAt():if(e.ctrlKey)return!1}return!0}function f(e,t,n){return""===e||isNaN(e)?t:e>n?n:e7?l.eq(6):null,y=l.eq(0),b=l.eq(1),x=l.eq(2),w=l.eq(l.length>7?7:6),S=l.length>7?l.eq(8):null;t.extend(!0,s,{destroy:function(){g.add(m).add(v).add(_).add(y).add(b).add(x).add(w).add(i).add(S).unbind("keyup",u).unbind("blur",d),g.add(m).add(v).add(_).add(y).add(b).add(x).unbind("keydown",c),a.unbind(p),g=null,m=null,v=null,_=null,y=null,b=null,x=null,w=null,S=null}}),g.add(m).add(v).add(_).add(y).add(b).add(x).add(w).add(i).add(S).bind("keyup",u).bind("blur",d),g.add(m).add(v).add(_).add(y).add(b).add(x).bind("keydown",c),a.bind(p)};t.jPicker={List:[],Color:function(n){var r=this;function a(e){for(var t=0;t255&&(x.r=255),o!==x.r&&(o=x.r,y=!0);break;case"g":if(S)return;w=!0,x.g=n&&n.g&&0|n.g||n&&0|n||0,x.g<0?x.g=0:x.g>255&&(x.g=255),s!==x.g&&(s=x.g,y=!0);break;case"b":if(S)return;w=!0,x.b=n&&n.b&&0|n.b||n&&0|n||0,x.b<0?x.b=0:x.b>255&&(x.b=255),c!==x.b&&(c=x.b,y=!0);break;case"a":x.a=n&&!kr(n.a)?0|n.a:0|n,x.a<0?x.a=0:x.a>255&&(x.a=255),u!==x.a&&(u=x.a,y=!0);break;case"h":if(w)return;S=!0,x.h=n&&n.h&&0|n.h||n&&0|n||0,x.h<0?x.h=0:x.h>360&&(x.h=360),d!==x.h&&(d=x.h,y=!0);break;case"s":if(w)return;S=!0,x.s=kr(n.s)?0|n:0|n.s,x.s<0?x.s=0:x.s>100&&(x.s=100),f!==x.s&&(f=x.s,y=!0);break;case"v":if(w)return;S=!0,x.v=kr(n.v)?0|n:0|n.v,x.v<0?x.v=0:x.v>100&&(x.v=100),p!==x.v&&(p=x.v,y=!0)}})),y){if(w){o=o||0,s=s||0,c=c||0;var k=l.rgbToHsv({r:o,g:s,b:c});d=k.h,f=k.s,p=k.v}else if(S){d=d||0,f=kr(f)?100:f,p=kr(p)?100:p;var C=l.hsvToRgb({h:d,s:f,v:p});o=C.r,s=C.g,c=C.b}u=kr(u)?255:u,a.call(r,g||r)}}}}var o,s,c,u,d,f,p,g=[];t.extend(!0,r,{val:i,bind:function(e){"function"==typeof e&&g.push(e)},unbind:function(e){if("function"==typeof e)for(var t;t=g.includes(e);)g.splice(t,1)},destroy:function(){g=null}}),n&&(kr(n.ahex)?kr(n.hex)?kr(n.r)||kr(n.g)||kr(n.b)?kr(n.h)||kr(n.s)||kr(n.v)||i("hsv"+(kr(n.a)?"":"a"),n):i("rgb"+(kr(n.a)?"":"a"),n):i((kr(n.a)?"":"a")+"hex",kr(n.a)?n:{ahex:n.hex+l.intToHex(n.a)}):i("ahex",n))},ColorMethods:{hexToRgba:function(e){if(""===e||"none"===e)return{r:null,g:null,b:null,a:null};var t="00",n="00",r="00",a="255";return 6===(e=this.validateHex(e)).length&&(e+="ff"),e.length>6?(t=e.substring(0,2),n=e.substring(2,4),r=e.substring(4,6),a=e.substring(6,e.length)):(e.length>4&&(t=e.substring(4,e.length),e=e.substring(0,4)),e.length>2&&(n=e.substring(2,e.length),e=e.substring(0,2)),e.length>0&&(r=e.substring(0,e.length))),{r:this.hexToInt(t),g:this.hexToInt(n),b:this.hexToInt(r),a:this.hexToInt(a)}},validateHex:function(e){return(e=e.toLowerCase().replace(/[^a-f\d]/g,"")).length>8&&(e=e.substring(0,8)),e},rgbaToHex:function(e){return this.intToHex(e.r)+this.intToHex(e.g)+this.intToHex(e.b)+this.intToHex(e.a)},intToHex:function(e){var t=(0|e).toString(16);return 1===t.length&&(t="0"+t),t.toLowerCase()},hexToInt:function(e){return parseInt(e,16)},rgbToHsv:function(e){var t,n=e.r/255,r=e.g/255,a=e.b/255,i={h:0,s:0,v:0},o=0,s=0;return n>=r&&n>=a?(s=n,o=r>a?a:r):r>=a&&r>=n?(s=r,o=n>a?a:n):(s=a,o=r>n?n:r),i.v=s,i.s=s?(s-o)/s:0,i.s?(t=s-o,i.h=n===s?(r-a)/t:r===s?2+(a-n)/t:4+(n-r)/t,i.h=parseInt(60*i.h),i.h<0&&(i.h+=360)):i.h=0,i.s=100*i.s|0,i.v=100*i.v|0,i},hsvToRgb:function(e){var t={r:0,g:0,b:0,a:100},n=e.h,r=e.s,a=e.v;if(0===r)t.r=t.g=t.b=0===a?0:255*a/100|0;else{360===n&&(n=0);var i=0|(n/=60),o=n-i,s=(a/=100)*(1-(r/=100)),l=a*(1-r*o),c=a*(1-r*(1-o));switch(i){case 0:t.r=a,t.g=c,t.b=s;break;case 1:t.r=l,t.g=a,t.b=s;break;case 2:t.r=s,t.g=a,t.b=c;break;case 3:t.r=s,t.g=l,t.b=a;break;case 4:t.r=c,t.g=s,t.b=a;break;case 5:t.r=a,t.g=s,t.b=l}t.r=255*t.r|0,t.g=255*t.g|0,t.b=255*t.b|0}return t}}};var i=t.jPicker,o=i.Color,s=i.List,l=i.ColorMethods;return t.fn.jPicker=function(r,i,c,u){return this.each((function(){var d=this,h=t.extend(!0,{},t.fn.jPicker.defaults,r);"input"===t(d).get(0).nodeName.toLowerCase()&&(t.extend(!0,h,{window:{bindToInput:!0,expandable:!0,input:t(d)}}),""===t(d).val()?(h.color.active=new o({hex:null}),h.color.current=new o({hex:null})):l.validateHex(t(d).val())&&(h.color.active=new o({hex:t(d).val(),a:h.color.active.val("a")}),h.color.current=new o({hex:t(d).val(),a:h.color.active.val("a")}))),h.window.expandable?t(d).after('
"):t(d)).addClass("jPicker Container"),r.expandable&&Q.hide(),Q.get(0).onselectstart=function(e){return"input"===e.target.nodeName.toLowerCase()};var s=z.active.val("all");r.alphaPrecision<0?r.alphaPrecision=0:r.alphaPrecision>2&&(r.alphaPrecision=2);var l='\n \n '.concat(r.expandable?'