svgedit

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>JSDoc: Source: editor/dialogs/editorPreferencesDialog.js</title> <script src="scripts/prettify/prettify.js"> </script> <script src="scripts/prettify/lang-css.js"> </script>  <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css"> <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css"> </head> <body> <div id="main"> <h1 class="page-title">Source: editor/dialogs/editorPreferencesDialog.js</h1> <section> <article> <pre class="prettyprint source linenums"><code>const template = document.createElement('template'); // eslint-disable-next-line no-unsanitized/property template.innerHTML = ` <style> :not(:defined) { display: none; } /* Force the scroll bar to appear so we see it hide when overlay opens. */ body::-webkit-scrollbar { background: lightgray; } body::-webkit-scrollbar-thumb { background: darkgray; } .toolbar_button button { border:1px solid #dedede; line-height:130%; float: left; background: #E8E8E8 none; padding:5px 10px 5px 7px; /* Firefox */ line-height:17px; /* Safari */ margin: 5px 20px 0 0; border: 1px var(--border-color) solid; border-top-color: #FFF; border-left-color: #FFF; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; cursor: pointer; } .toolbar_button button:hover { border: 1px #e0a874 solid; border-top-color: #fcd9ba; border-left-color: #fcd9ba; background-color: #FFC; } .toolbar_button button:active { background-color: #F4E284; border-left: 1px solid #663300; border-top: 1px solid #663300; } .toolbar_button button .svg_icon { margin: 0 3px -3px 0 !important; padding: 0; border: none; width: 16px; height: 16px; } .color_block { top: 0; left: 0; } .color_block svg { display: block; } #bg_blocks { overflow: auto; margin-left: 30px; } #bg_blocks .color_block { position: static; } #svginfo_bg_note { font-size: .9em; font-style: italic; color: #444; } #svg_prefs #svg_prefs_container { padding: 10px; background-color: #5a6162; color: #c5c5c5; border: 1px outset #777; opacity: 1.0; font-family: Verdana, Helvetica, sans-serif; font-size: .8em; z-index: 20001; } #tool_prefs_back { margin-left: 1em; overflow: auto; } #tool_prefs_save { width: 30%; background-color: #c79605; margin-left: 20%; } #tool_prefs_cancel { width: 30%; background-color: #c8c8c8; } #svg_prefs #svg_docprops_prefs { float: left; width: 221px; margin: 5px .7em; overflow: hidden; } #svg_prefs_container fieldset + fieldset { float: right; } #svg_prefs legend { max-width: 195px; } #svg_prefs_container > fieldset > legend { font-weight: bold; font-size: 1.1em; } #svg_prefs fieldset { padding: 5px; margin: 5px; border: 1px solid #DDD; } #svg_prefs_container label { display: block; margin: .5em; } #svg_prefs_container div.color_block { float: left; margin: 2px; padding: 20px; border: 1px solid #6f6f6f; } #change_background div.cur_background { border: 2px solid blue; padding: 19px; } #canvas_bg_url { display: block; width: 96%; } #svg_prefs button { margin-top: 0; margin-bottom: 5px; } </style> <elix-dialog id="svg_prefs" aria-label="Editor Preferences" closed> <div id="svg_prefs_container"> <div id="tool_prefs_back" class="toolbar_button"> <button id="tool_prefs_save"></button> <button id="tool_prefs_cancel"></button> </div> <fieldset> <legend id="svginfo_editor_prefs"></legend> <label> <span id="svginfo_lang"></span>  <select id="lang_select"> <option id="lang_ar" value="ar">العربية</option> <option id="lang_cs" value="cs">Čeština</option> <option id="lang_de" value="de">Deutsch</option> <option id="lang_en" value="en" selected="selected">English</option> <option id="lang_es" value="es">Español</option> <option id="lang_fa" value="fa">فارسی</option> <option id="lang_fr" value="fr">Français</option> <option id="lang_fy" value="fy">Frysk</option> <option id="lang_hi" value="hi">हिन्दी, हिंदी</option> <option id="lang_it" value="it">Italiano</option> <option id="lang_ja" value="ja">日本語</option> <option id="lang_nl" value="nl">Nederlands</option> <option id="lang_pl" value="pl">Polski</option> <option id="lang_pt-BR" value="pt-BR">Português (BR)</option> <option id="lang_ro" value="ro">Română</option> <option id="lang_ru" value="ru">Русский</option> <option id="lang_sk" value="sk">Slovenčina</option> <option id="lang_sl" value="sl">Slovenščina</option> <option id="lang_zh-CN" value="zh-CN">简体中文</option> <option id="lang_zh-TW" value="zh-TW">繁體中文</option> </select> </label> <fieldset id="change_background"> <legend id="svginfo_change_background"></legend> <div id="bg_blocks"></div> <label> <span id="svginfo_bg_url"></span> <input type="text" id="canvas_bg_url" /> </label> <p id="svginfo_bg_note"></p> </fieldset> <fieldset id="change_grid"> <legend id="svginfo_grid_settings"></legend> <label for="svginfo_snap_onoff"> <span id="svginfo_snap_onoff"></span> <input type="checkbox" value="snapping_on" id="grid_snapping_on" /> </label> <label for="grid_snapping_step"> <span id="svginfo_snap_step"></span> <input type="text" id="grid_snapping_step" size="3" value="10" /> </label> <label> <span id="svginfo_grid_color"></span> <input type="text" id="grid_color" size="3" value="#000" /> </label> </fieldset> <fieldset id="units_rulers"> <legend id="svginfo_units_rulers"></legend> <label> <span id="svginfo_rulers_onoff"></span> <input id="show_rulers" type="checkbox" value="show_rulers" checked="checked" /> </label> <label> <span id="svginfo_unit"></span> <select id="base_unit"> <option value="px">Pixels</option> <option value="cm">Centimeters</option> <option value="mm">Millimeters</option> <option value="in">Inches</option> <option value="pt">Points</option> <option value="pc">Picas</option> <option value="em">Ems</option> <option value="ex">Exs</option> </select> </label> </fieldset> </fieldset> </div> </elix-dialog> `; /** * @class SeEditPrefsDialog */ export class SeEditPrefsDialog extends HTMLElement { /** * @function constructor */ constructor () { super(); // create the shadowDom and insert the template this.colorBlocks = [ '#FFF', '#888', '#000', 'chessboard' ]; this._shadowRoot = this.attachShadow({ mode: 'open' }); this._shadowRoot.append(template.content.cloneNode(true)); this.$dialog = this._shadowRoot.querySelector('#svg_prefs'); this.$saveBtn = this._shadowRoot.querySelector('#tool_prefs_save'); this.$cancelBtn = this._shadowRoot.querySelector('#tool_prefs_cancel'); this.$langSelect = this._shadowRoot.querySelector('#lang_select'); this.$bgBlocks = this._shadowRoot.querySelector('#bg_blocks'); this.$bgURL = this._shadowRoot.querySelector('#canvas_bg_url'); this.$gridSnappingOn = this._shadowRoot.querySelector('#grid_snapping_on'); this.$gridSnappingStep = this._shadowRoot.querySelector('#grid_snapping_step'); this.$gridColor = this._shadowRoot.querySelector('#grid_color'); this.$showRulers = this._shadowRoot.querySelector('#show_rulers'); this.$baseUnit = this._shadowRoot.querySelector('#base_unit'); } /** * @function init * @param {any} name * @returns {void} */ init (i18next) { this.setAttribute('common-ok', i18next.t('common.ok')); this.setAttribute('common-cancel', i18next.t('common.cancel')); this.setAttribute('config-editor_prefs', i18next.t('config.editor_prefs')); this.setAttribute('config-language', i18next.t('config.language')); this.setAttribute('config-background', i18next.t('config.background')); this.setAttribute('common-url', i18next.t('common.url')); this.setAttribute('config-editor_bg_note', i18next.t('config.editor_bg_note')); this.setAttribute('config-grid', i18next.t('config.grid')); this.setAttribute('config-snapping_onoff', i18next.t('config.snapping_onoff')); this.setAttribute('config-snapping_stepsize', i18next.t('config.snapping_stepsize')); this.setAttribute('config-grid_color', i18next.t('config.grid_color')); this.setAttribute('config-units_and_rulers', i18next.t('config.units_and_rulers')); this.setAttribute('config-show_rulers', i18next.t('config.show_rulers')); this.setAttribute('config-base_unit', i18next.t('config.base_unit')); } /** * @function observedAttributes * @returns {any} observed */ static get observedAttributes () { // eslint-disable-next-line max-len return [ 'dialog', 'lang', 'canvasbg', 'bgurl', 'gridsnappingon', 'gridsnappingstep', 'gridcolor', 'showrulers', 'baseunit', 'common-ok', 'common-cancel', 'config-editor_prefs', 'config-language', 'config-background', 'common-url', 'config-editor_bg_note', 'config-grid', 'config-snapping_onoff', 'config-snapping_stepsize', 'config-grid_color', 'config-units_and_rulers', 'config-show_rulers', 'config-base_unit' ]; } /** * @function attributeChangedCallback * @param {string} name * @param {string} oldValue * @param {string} newValue * @returns {void} */ attributeChangedCallback (name, oldValue, newValue) { if (oldValue === newValue) return; const blocks = this.$bgBlocks.querySelectorAll('div'); const curBg = 'cur_background'; let node; switch (name) { case 'dialog': if (newValue === 'open') { this.$dialog.open(); } else { this.$dialog.close(); } break; case 'lang': this.$langSelect.value = newValue; break; case 'canvasbg': if (!newValue) { if (blocks.length > 0) { blocks[0].classList.add(curBg); } } else { blocks.forEach(function (blk) { const isBg = blk.dataset.bgColor === newValue; if (isBg) { blk.classList.add(curBg); } else { blk.classList.remove(curBg); } }); } break; case 'bgurl': this.$bgURL.value = newValue; break; case 'gridsnappingon': if (newValue === 'true') { this.$gridSnappingOn.checked = true; } else if (newValue === 'false') { this.$gridSnappingOn.checked = false; } break; case 'gridsnappingstep': this.$gridSnappingStep.value = newValue; break; case 'gridcolor': this.$gridColor.value = newValue; break; case 'showrulers': if (newValue === 'true') { this.$showRulers.checked = true; } else if (newValue === 'false') { this.$showRulers.checked = false; } break; case 'baseunit': this.$baseUnit.value = newValue; break; case 'common-ok': this.$saveBtn.textContent = newValue; break; case 'common-cancel': this.$cancelBtn.textContent = newValue; break; case 'config-editor_prefs': node = this._shadowRoot.querySelector('#svginfo_editor_prefs'); node.textContent = newValue; break; case 'config-language': node = this._shadowRoot.querySelector('#svginfo_lang'); node.textContent = newValue; break; case 'config-background': node = this._shadowRoot.querySelector('#svginfo_change_background'); node.textContent = newValue; break; case 'common-url': node = this._shadowRoot.querySelector('#svginfo_bg_url'); node.textContent = newValue; break; case 'config-editor_bg_note': node = this._shadowRoot.querySelector('#svginfo_bg_note'); node.textContent = newValue; break; case 'config-grid': node = this._shadowRoot.querySelector('#svginfo_grid_settings'); node.textContent = newValue; break; case 'config-snapping_onoff': node = this._shadowRoot.querySelector('#svginfo_snap_onoff'); node.textContent = newValue; break; case 'config-snapping_stepsize': node = this._shadowRoot.querySelector('#svginfo_snap_step'); node.textContent = newValue; break; case 'config-grid_color': node = this._shadowRoot.querySelector('#svginfo_grid_color'); node.textContent = newValue; break; case 'config-units_and_rulers': node = this._shadowRoot.querySelector('#svginfo_units_rulers'); node.textContent = newValue; break; case 'config-show_rulers': node = this._shadowRoot.querySelector('#svginfo_rulers_onoff'); node.textContent = newValue; break; case 'config-base_unit': node = this._shadowRoot.querySelector('#svginfo_unit'); node.textContent = newValue; break; default: super.attributeChangedCallback(name, oldValue, newValue); break; } } /** * @function get * @returns {any} */ get lang () { return this.getAttribute('lang'); } /** * @function set * @returns {void} */ set lang (value) { this.setAttribute('lang', value); } /** * @function get * @returns {any} */ get canvasbg () { return this.getAttribute('canvasbg'); } /** * @function set * @returns {void} */ set canvasbg (value) { this.setAttribute('canvasbg', value); } /** * @function get * @returns {any} */ get bgurl () { return this.getAttribute('bgurl'); } /** * @function set * @returns {void} */ set bgurl (value) { this.setAttribute('bgurl', value); } /** * @function get * @returns {any} */ get dialog () { return this.getAttribute('dialog'); } /** * @function set * @returns {void} */ set dialog (value) { this.setAttribute('dialog', value); } /** * @function get * @returns {any} */ get gridsnappingon () { return this.getAttribute('gridsnappingon'); } /** * @function set * @returns {void} */ set gridsnappingon (value) { this.setAttribute('gridsnappingon', value); } /** * @function get * @returns {any} */ get gridsnappingstep () { return this.getAttribute('gridsnappingstep'); } /** * @function set * @returns {void} */ set gridsnappingstep (value) { this.setAttribute('gridsnappingstep', value); } /** * @function get * @returns {any} */ get gridcolor () { return this.getAttribute('gridcolor'); } /** * @function set * @returns {void} */ set gridcolor (value) { this.setAttribute('gridcolor', value); } /** * @function get * @returns {any} */ get showrulers () { return this.getAttribute('showrulers'); } /** * @function set * @returns {void} */ set showrulers (value) { this.setAttribute('showrulers', value); } /** * @function get * @returns {any} */ get baseunit () { return this.getAttribute('baseunit'); } /** * @function set * @returns {void} */ set baseunit (value) { this.setAttribute('baseunit', value); } /** * @function connectedCallback * @returns {void} */ connectedCallback () { const onCancelHandler = () => { const closeEvent = new CustomEvent('change', { detail: { dialog: 'closed' } }); this.dispatchEvent(closeEvent); }; const onSaveHandler = () => { const color = this.$bgBlocks.querySelector('.cur_background').dataset.bgColor || '#FFF'; const closeEvent = new CustomEvent('change', { detail: { lang: this.$langSelect.value, dialog: 'close', bgcolor: color, bgurl: this.$bgURL.value, gridsnappingon: this.$gridSnappingOn.checked, gridsnappingstep: this.$gridSnappingStep.value, showrulers: this.$showRulers.checked, baseunit: this.$baseUnit.value } }); this.dispatchEvent(closeEvent); }; // Set up editor background functionality const currentObj = this; this.colorBlocks.forEach(function (e) { const newdiv = document.createElement('div'); if (e === 'chessboard') { newdiv.dataset.bgColor = e; // eslint-disable-next-line max-len newdiv.style.backgroundImage = 'url(data:image/gif;base64,R0lGODlhEAAQAIAAAP///9bW1iH5BAAAAAAALAAAAAAQABAAAAIfjG+gq4jM3IFLJgpswNly/XkcBpIiVaInlLJr9FZWAQA7)'; newdiv.classList.add('color_block'); } else { newdiv.dataset.bgColor = e; // setAttribute('data-bgcolor', e); newdiv.style.backgroundColor = e; newdiv.classList.add('color_block'); } currentObj.$bgBlocks.append(newdiv); }); const blocks = this.$bgBlocks.querySelectorAll('div'); const curBg = 'cur_background'; blocks.forEach(function (blk) { blk.addEventListener('click', function () { blocks.forEach((el) => el.classList.remove(curBg)); blk.classList.add(curBg); }); }); this.$saveBtn.addEventListener('click', onSaveHandler); this.$cancelBtn.addEventListener('click', onCancelHandler); this.$dialog.addEventListener('close', onCancelHandler); } } // Register customElements.define('se-edit-prefs-dialog', SeEditPrefsDialog); </code></pre> </article> </section> </div> <nav> <h2><a href="index.html">Home</a></h2><h3>Modules</h3><ul><li><a href="module-blur.html">blur</a></li><li><a href="module-browser.html">browser</a></li><li><a href="module-clear.html">clear</a></li><li><a href="module-contextmenu.html">contextmenu</a></li><li><a href="module-coords.html">coords</a></li><li><a href="module-draw.html">draw</a></li><li><a href="module-elem-get-set%2520get%2520and%2520set%2520methods..html">elem-get-set get and set methods.</a></li><li><a href="module-event.html">event</a></li><li><a href="module-history.html">history</a></li><li><a href="module-jGraduate.html">jGraduate</a></li><li><a href="module-jPicker.html">jPicker</a></li><li><a href="module-jQueryAttr.html">jQueryAttr</a></li><li><a href="module-layer.html">layer</a></li><li><a href="module-locale.html">locale</a></li><li><a href="module-math.html">math</a></li><li><a href="module-namespaces.html">namespaces</a></li><li><a href="module-path.html">path</a></li><li><a href="module-recalculate.html">recalculate</a></li><li><a href="module-sanitize.html">sanitize</a></li><li><a href="module-select.html">select</a></li><li><a href="module-selected-elem.html">selected-elem</a></li><li><a href="module-selection.html">selection</a></li><li><a href="module-svg.html">svg</a></li><li><a href="module-svgcanvas.html">svgcanvas</a></li><li><a href="module-SVGEditor.html">SVGEditor</a></li><li><a href="module-text-actions%2520Tools%2520for%2520Text%2520edit%2520functions.html">text-actions Tools for Text edit functions</a></li><li><a href="module-undo.html">undo</a></li><li><a href="module-units.html">units</a></li><li><a href="module-utilities.html">utilities</a></li></ul><h3>Externals</h3><ul><li><a href="external-JamilihArray.html">JamilihArray</a></li><li><a href="external-jQuery.html">jQuery</a></li><li><a href="external-Math.html">Math</a></li><li><a href="external-MouseEvent.html">MouseEvent</a></li><li><a href="external-Window.html">Window</a></li></ul><h3>Namespaces</h3><ul><li><a href="external-jQuery.fn.html">fn</a></li><li><a href="external-jQuery.fn.$.fn.jPicker.defaults.html">defaults</a></li><li><a href="external-jQuery.fn.exports.jPickerMethod.html">exports.jPickerMethod</a></li><li><a href="external-jQuery.fn.jGraduateDefaults.html">jGraduateDefaults</a></li><li><a href="external-jQuery.fn.jGraduateDefaults.images.html">images</a></li><li><a href="external-jQuery.fn.jGraduateDefaults.window.html">window</a></li><li><a href="external-jQuery.jGraduate.html">jGraduate</a></li><li><a href="external-jQuery.jPicker.html">jPicker</a></li><li><a href="external-jQuery.jPicker.ColorMethods.html">ColorMethods</a></li><li><a href="module-path.html#.pathActions">pathActions</a></li><li><a href="module-svgcanvas.SvgCanvas_pathActions.html">pathActions</a></li><li><a href="module-svgcanvas.SvgCanvas_textActions.html">textActions</a></li></ul><h3>Classes</h3><ul><li><a href="BottomPanel.html">BottomPanel</a></li><li><a href="configObj.html">configObj</a></li><li><a href="Dropdown.html">Dropdown</a></li><li><a href="EditorStartup.html">EditorStartup</a></li><li><a href="ElixMenuButton.html">ElixMenuButton</a></li><li><a href="ElixNumberSpinBox.html">ElixNumberSpinBox</a></li><li><a href="ExplorerButton.html">ExplorerButton</a></li><li><a href="external-jQuery.jGraduate.Paint.html">Paint</a></li><li><a href="external-jQuery.jPicker.Color.html">Color</a></li><li><a href="FlyingButton.html">FlyingButton</a></li><li><a href="LayersPanel.html">LayersPanel</a></li><li><a href="LeftPanel.html">LeftPanel</a></li><li><a href="MainMenu.html">MainMenu</a></li><li><a href="module.exports.html">exports</a></li><li><a href="module.exports_module.exports.html">exports</a></li><li><a href="module-draw.Drawing.html">Drawing</a></li><li><a href="module-draw.Layer.html">Layer</a></li><li><a href="module-history.BatchCommand.html">BatchCommand</a></li><li><a href="module-history.ChangeElementCommand.html">ChangeElementCommand</a></li><li><a href="module-history.Command.html">Command</a></li><li><a href="module-history.HistoryRecordingService.html">HistoryRecordingService</a></li><li><a href="module-history.InsertElementCommand.html">InsertElementCommand</a></li><li><a href="module-history.MoveElementCommand.html">MoveElementCommand</a></li><li><a href="module-history.RemoveElementCommand.html">RemoveElementCommand</a></li><li><a href="module-history.UndoManager.html">UndoManager</a></li><li><a href="module-jPicker.module.exports.html">module.exports</a></li><li><a href="module-layer.Layer.html">Layer</a></li><li><a href="module-path.Path.html">Path</a></li><li><a href="module-path.Segment.html">Segment</a></li><li><a href="module-select.Selector.html">Selector</a></li><li><a href="module-select.SelectorManager.html">SelectorManager</a></li><li><a href="module-svgcanvas.SvgCanvas.html">SvgCanvas</a></li><li><a href="module-SVGEditor-Editor.html">Editor</a></li><li><a href="NumberSpinBox.html">NumberSpinBox</a></li><li><a href="PaintBox.html">PaintBox</a></li><li><a href="PlainNumberSpinBox.html">PlainNumberSpinBox</a></li><li><a href="Rulers.html">Rulers</a></li><li><a href="SeCMenuDialog.html">SeCMenuDialog</a></li><li><a href="SeCMenuLayerDialog.html">SeCMenuLayerDialog</a></li><li><a href="SeColorPicker.html">SeColorPicker</a></li><li><a href="SeEditPrefsDialog.html">SeEditPrefsDialog</a></li><li><a href="SeExportDialog.html">SeExportDialog</a></li><li><a href="SeImgPropDialog.html">SeImgPropDialog</a></li><li><a href="SEInput.html">SEInput</a></li><li><a href="SeList.html">SeList</a></li><li><a href="SeMenu.html">SeMenu</a></li><li><a href="SeMenuItem.html">SeMenuItem</a></li><li><a href="SEPalette.html">SEPalette</a></li><li><a href="SePlainAlertDialog.html">SePlainAlertDialog</a></li><li><a href="SePlainBorderButton.html">SePlainBorderButton</a></li><li><a href="SePromptDialog.html">SePromptDialog</a></li><li><a href="SESpinInput.html">SESpinInput</a></li><li><a href="SeStorageDialog.html">SeStorageDialog</a></li><li><a href="SeSvgSourceEditorDialog.html">SeSvgSourceEditorDialog</a></li><li><a href="SeText.html">SeText</a></li><li><a href="ToolButton.html">ToolButton</a></li><li><a href="TopPanel.html">TopPanel</a></li></ul><h3>Interfaces</h3><ul><li><a href="module-coords.EditorContext.html">EditorContext</a></li><li><a href="module-draw.DrawCanvasInit.html">DrawCanvasInit</a></li><li><a href="module-history.HistoryCommand.html">HistoryCommand</a></li><li><a href="module-history.HistoryEventHandler.html">HistoryEventHandler</a></li><li><a href="module-locale.LocaleEditorInit.html">LocaleEditorInit</a></li><li><a href="module-path.EditorContext.html">EditorContext</a></li><li><a href="module-recalculate.EditorContext.html">EditorContext</a></li><li><a href="module-select.SVGFactory.html">SVGFactory</a></li><li><a href="module-svgcanvas.PrivateMethods.html">PrivateMethods</a></li><li><a href="module-SVGEditor.Config.html">Config</a></li><li><a href="module-SVGEditor.Prefs.html">Prefs</a></li><li><a href="module-SVGthis.CustomHandler.html">CustomHandler</a></li><li><a href="module-units.ElementContainer.html">ElementContainer</a></li><li><a href="module-utilities.EditorContext.html">EditorContext</a></li></ul><h3>Events</h3><ul><li><a href="module-history-Command.html#event:event:history">history</a></li><li><a href="module-svgcanvas.SvgCanvas.html#event:event:changed">changed</a></li><li><a href="module-svgcanvas.SvgCanvas.html#event:event:cleared">cleared</a></li><li><a href="module-svgcanvas.SvgCanvas.html#event:event:contextset">contextset</a></li><li><a href="module-svgcanvas.SvgCanvas.html#event:event:exported">exported</a></li><li><a href="module-svgcanvas.SvgCanvas.html#event:event:exportedPDF">exportedPDF</a></li><li><a href="module-svgcanvas.SvgCanvas.html#event:event:ext_addLangData">ext_addLangData</a></li><li><a href="module-svgcanvas.SvgCanvas.html#event:event:ext_callback">ext_callback</a></li><li><a href="module-svgcanvas.SvgCanvas.html#event:event:ext_canvasUpdated">ext_canvasUpdated</a></li><li><a href="module-svgcanvas.SvgCanvas.html#event:event:ext_elementChanged">ext_elementChanged</a></li><li><a href="module-svgcanvas.SvgCanvas.html#event:event:ext_elementTransition">ext_elementTransition</a></li><li><a href="module-svgcanvas.SvgCanvas.html#event:event:ext_IDsUpdated">ext_IDsUpdated</a></li><li><a href="module-svgcanvas.SvgCanvas.html#event:event:ext_langChanged">ext_langChanged</a></li><li><a href="module-svgcanvas.SvgCanvas.html#event:event:ext_langReady">ext_langReady</a></li><li><a href="module-svgcanvas.SvgCanvas.html#event:event:ext_mouseDown">ext_mouseDown</a></li><li><a href="module-svgcanvas.SvgCanvas.html#event:event:ext_mouseMove">ext_mouseMove</a></li><li><a href="module-svgcanvas.SvgCanvas.html#event:event:ext_mouseUp">ext_mouseUp</a></li><li><a href="module-svgcanvas.SvgCanvas.html#event:event:ext_onNewDocument">ext_onNewDocument</a></li><li><a href="module-svgcanvas.SvgCanvas.html#event:event:ext_selectedChanged">ext_selectedChanged</a></li><li><a href="module-svgcanvas.SvgCanvas.html#event:event:ext_toolButtonStateUpdate">ext_toolButtonStateUpdate</a></li><li><a href="module-svgcanvas.SvgCanvas.html#event:event:ext_workareaResized">ext_workareaResized</a></li><li><a href="module-svgcanvas.SvgCanvas.html#event:event:ext_zoomChanged">ext_zoomChanged</a></li><li><a href="module-svgcanvas.SvgCanvas.html#event:event:extension_added">extension_added</a></li><li><a href="module-svgcanvas.SvgCanvas.html#event:event:extensions_added">extensions_added</a></li><li><a href="module-svgcanvas.SvgCanvas.html#event:event:GenericCanvasEvent">GenericCanvasEvent</a></li><li><a href="module-svgcanvas.SvgCanvas.html#event:event:message">message</a></li><li><a href="module-svgcanvas.SvgCanvas.html#event:event:pointsAdded">pointsAdded</a></li><li><a href="module-svgcanvas.SvgCanvas.html#event:event:saved">saved</a></li><li><a href="module-svgcanvas.SvgCanvas.html#event:event:selected">selected</a></li><li><a href="module-svgcanvas.SvgCanvas.html#event:event:setnonce">setnonce</a></li><li><a href="module-svgcanvas.SvgCanvas.html#event:event:transition">transition</a></li><li><a href="module-svgcanvas.SvgCanvas.html#event:event:unsetnonce">unsetnonce</a></li><li><a href="module-svgcanvas.SvgCanvas.html#event:event:updateCanvas">updateCanvas</a></li><li><a href="module-svgcanvas.SvgCanvas.html#event:event:zoomDone">zoomDone</a></li><li><a href="module-svgcanvas.SvgCanvas.html#event:event:zoomed">zoomed</a></li><li><a href="module-SVGEditor.html#event:event:svgEditorReadyEvent">svgEditorReadyEvent</a></li></ul><h3>Tutorials</h3><ul><li><a href="tutorial-CanvasAPI.html">CanvasAPI</a></li><li><a href="tutorial-Editor.html">Editor</a></li><li><a href="tutorial-EditorAPI.html">EditorAPI</a></li><li><a href="tutorial-Events.html">Events</a></li><li><a href="tutorial-FrequentlyAskedQuestions.html">Frequently Asked Questions (FAQ)</a></li></ul><h3>Global</h3><ul><li><a href="global.html#attributeChangedCallback">attributeChangedCallback</a></li><li><a href="global.html#connectedCallback">connectedCallback</a></li><li><a href="global.html#constructor">constructor</a></li><li><a href="global.html#expireCookie">expireCookie</a></li><li><a href="global.html#findPos">findPos</a></li><li><a href="global.html#formatValueFormatthenumericvalueasastring.Thisisusedafterincrementing/decrementingthevaluetoreformatthevalueasastring.">formatValue Format the numeric value as a string. This is used after incrementing/decrementing the value to reformat the value as a string.</a></li><li><a href="global.html#get">get</a></li><li><a href="global.html#getClosest">getClosest</a></li><li><a href="global.html#getParents">getParents</a></li><li><a href="global.html#init">init</a></li><li><a href="global.html#inputsize">inputsize</a></li><li><a href="global.html#isNullish">isNullish</a></li><li><a href="global.html#loadloadConfig">load load Config</a></li><li><a href="global.html#loadFromURLLoadconfig/datafromURLifgiven">loadFromURL Load config/data from URL if given</a></li><li><a href="global.html#name">name</a></li><li><a href="global.html#observedAttributes">observedAttributes</a></li><li><a href="global.html#parseValue">parseValue</a></li><li><a href="global.html#pref">pref</a></li><li><a href="global.html#processResults">processResults</a></li><li><a href="global.html#readySignal">readySignal</a></li><li><a href="global.html#regexEscape">regexEscape</a></li><li><a href="global.html#removeStoragePrefCookie">removeStoragePrefCookie</a></li><li><a href="global.html#replaceStoragePrompt">replaceStoragePrompt</a></li><li><a href="global.html#set">set</a></li><li><a href="global.html#setupCurConfig">setupCurConfig</a></li><li><a href="global.html#setupCurPrefs">setupCurPrefs</a></li><li><a href="global.html#src">src</a></li><li><a href="global.html#stateEffects">stateEffects</a></li><li><a href="global.html#stepDown">stepDown</a></li><li><a href="global.html#stepUp">stepUp</a></li><li><a href="global.html#touchHandler">touchHandler</a></li><li><a href="global.html#updateLib">updateLib</a></li><li><a href="global.html#value">value</a></li></ul> </nav> <br class="clear"> <footer> Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.7</a> on Mon Nov 08 2021 09:47:00 GMT+0100 (Central European Standard Time) </footer> <script> prettyPrint(); </script> <script src="scripts/linenumber.js"> </script> </body> </html>