diff --git a/src/editor/MainMenu.js b/src/editor/MainMenu.js index d1317059..336c06e5 100644 --- a/src/editor/MainMenu.js +++ b/src/editor/MainMenu.js @@ -292,9 +292,6 @@ class MainMenu { /** * Associate all button actions as well as non-button keyboard shortcuts. */ - [ "main_button", "tool_import", "tool_export", "tool_docprops", "tool_editor_prefs", "tool_editor_homepage" ].forEach((attrId) => - $id(attrId).init(this.editor) - ); $id("tool_import").addEventListener("click", () => { this.clickImport(); window.dispatchEvent(new CustomEvent("importImages")); diff --git a/src/editor/components/seButton.js b/src/editor/components/seButton.js index 21b1951a..72d5f1f5 100644 --- a/src/editor/components/seButton.js +++ b/src/editor/components/seButton.js @@ -1,3 +1,4 @@ +/* globals svgEditor */ import { t } from '../locale.js'; const template = document.createElement('template'); // eslint-disable-next-line no-unsanitized/property @@ -55,18 +56,7 @@ export class ToolButton extends HTMLElement { // locate the component this.$div = this._shadowRoot.querySelector('div'); this.$img = this._shadowRoot.querySelector('img'); - this.editor = null; - } - /** - * @function init - * @param {any} name - * @returns {void} - */ - init (editor) { - this.editor = editor; - if (this.hasAttribute("src")) { - this.setAttribute('src', this.getAttribute("src")); - } + this.imgPath = svgEditor.configObj.curConfig.imgPath; } /** * @function observedAttributes @@ -83,7 +73,7 @@ export class ToolButton extends HTMLElement { * @returns {void} */ attributeChangedCallback (name, oldValue, newValue) { - if (oldValue === newValue && name !== 'src') return; + if (oldValue === newValue) return; switch (name) { case 'title': { @@ -97,9 +87,8 @@ export class ToolButton extends HTMLElement { case 'src': if (newValue.indexOf("data:") !== -1) { this.$img.setAttribute('src', newValue); - } else if(this.editor !== null) { - const { imgPath } = this.editor.configObj.curConfig; - this.$img.setAttribute('src', imgPath + "/" + newValue); + } else { + this.$img.setAttribute('src', this.imgPath + "/" + newValue); } break; case 'pressed': diff --git a/src/editor/components/seColorPicker.js b/src/editor/components/seColorPicker.js index 3f35c21e..5c88d8e4 100644 --- a/src/editor/components/seColorPicker.js +++ b/src/editor/components/seColorPicker.js @@ -1,3 +1,4 @@ +/* globals svgEditor */ /* eslint-disable max-len */ import { jGraduate, jGraduateMethod } from './jgraduate/jQuery.jGraduate.js'; import PaintBox from './PaintBox.js'; @@ -666,20 +667,16 @@ export class SeColorPicker extends HTMLElement { this.i18next = null; this.$picker = this._shadowRoot.getElementById('picker'); this.$color_picker = this._shadowRoot.getElementById('color_picker'); - this.editor = null; + this.imgPath = svgEditor.configObj.curConfig.imgPath; } /** * @function init * @param {any} name * @returns {void} */ - init (i18next, editor) { + init (i18next) { this.i18next = i18next; this.setAttribute('config-change_xxx_color', t('config.change_xxx_color')); - this.editor = editor; - if (this.hasAttribute("src")) { - this.setAttribute('src', this.getAttribute("src")); - } } /** * @function observedAttributes @@ -696,13 +693,10 @@ export class SeColorPicker extends HTMLElement { * @returns {void} */ attributeChangedCallback (name, oldValue, newValue) { - if (oldValue === newValue && name !== 'src') return; + if (oldValue === newValue) return; switch (name) { case 'src': - if(this.editor !== null) { - const { imgPath } = this.editor.configObj.curConfig; - this.$logo.setAttribute('src', imgPath + '/' + newValue); - } + this.$logo.setAttribute('src', this.imgPath + '/' + newValue); break; case 'label': this.setAttribute('title', t(newValue)); diff --git a/src/editor/components/seExplorerButton.js b/src/editor/components/seExplorerButton.js index 18abf2f8..8434f94e 100644 --- a/src/editor/components/seExplorerButton.js +++ b/src/editor/components/seExplorerButton.js @@ -1,3 +1,4 @@ +/* globals svgEditor */ /* eslint-disable no-unsanitized/property */ const template = document.createElement('template'); template.innerHTML = ` @@ -119,18 +120,7 @@ export class ExplorerButton extends HTMLElement { this.$lib = this._shadowRoot.querySelector('.image-lib'); this.files = []; this.request = new XMLHttpRequest(); - this.editor = null; - } - /** - * @function init - * @param {any} name - * @returns {void} - */ - init (editor) { - this.editor = editor; - if (this.hasAttribute("src")) { - this.setAttribute('src', this.getAttribute("src")); - } + this.imgPath = svgEditor.configObj.curConfig.imgPath; } /** * @function observedAttributes @@ -147,7 +137,7 @@ export class ExplorerButton extends HTMLElement { * @returns {void} */ async attributeChangedCallback (name, oldValue, newValue) { - if (oldValue === newValue && name !== 'src') return; + if (oldValue === newValue) return; switch (name) { case 'title': { @@ -184,10 +174,7 @@ export class ExplorerButton extends HTMLElement { } break; case 'src': - if(this.editor !== null) { - const { imgPath } = this.editor.configObj.curConfig; - this.$img.setAttribute('src', imgPath + '/' + newValue); - } + this.$img.setAttribute('src', this.imgPath + '/' + newValue); break; default: // eslint-disable-next-line no-console diff --git a/src/editor/components/seFlyingButton.js b/src/editor/components/seFlyingButton.js index 4e38c9cc..6de46c88 100644 --- a/src/editor/components/seFlyingButton.js +++ b/src/editor/components/seFlyingButton.js @@ -1,3 +1,4 @@ +/* globals svgEditor */ import { t } from '../locale.js'; const template = document.createElement('template'); template.innerHTML = ` @@ -100,18 +101,7 @@ export class FlyingButton extends HTMLElement { // the last element of the div is the slot // we retrieve all elements added in the slot (i.e. se-buttons) this.$elements = this.$menu.lastElementChild.assignedElements(); - this.editor = null; - } - /** - * @function init - * @param {any} name - * @returns {void} - */ - init (editor) { - this.editor = editor; - // initialize currentAction with the first slot of the list - const { imgPath } = this.editor.configObj.curConfig; - this.$img.setAttribute('src', imgPath + '/' + this.activeSlot.getAttribute('src')); + this.imgPath = svgEditor.configObj.curConfig.imgPath; } /** * @function observedAttributes @@ -246,10 +236,10 @@ export class FlyingButton extends HTMLElement { */ connectedCallback () { this.activeSlot = this.shadowRoot.querySelector('slot').assignedElements()[0]; + this.$img.setAttribute('src', this.imgPath + '/' + this.activeSlot.getAttribute('src')); // capture click event on the button to manage the logic const onClickHandler = (ev) => { ev.stopPropagation(); - const { imgPath } = this.editor.configObj.curConfig; switch (ev.target.nodeName) { case 'SE-FLYINGBUTTON': if (this.pressed) { @@ -262,7 +252,7 @@ export class FlyingButton extends HTMLElement { break; case 'SE-BUTTON': // change to the current action - this.$img.setAttribute('src', imgPath + '/' + ev.target.getAttribute('src')); + this.$img.setAttribute('src', this.imgPath + '/' + ev.target.getAttribute('src')); this.activeSlot = ev.target; this.setAttribute('pressed', 'pressed'); // and close the menu diff --git a/src/editor/components/seList.js b/src/editor/components/seList.js index d6b6ba48..db63e9a2 100644 --- a/src/editor/components/seList.js +++ b/src/editor/components/seList.js @@ -1,3 +1,4 @@ +/* globals svgEditor */ import 'elix/define/DropdownList.js'; import { t } from '../locale.js'; @@ -46,6 +47,7 @@ export class SeList extends HTMLElement { this.$label = this._shadowRoot.querySelector('label'); this.$selction = this.$dropdown.shadowRoot.querySelector('#source').querySelector('#value'); this.items = this.querySelectorAll("se-list-item"); + this.imgPath = svgEditor.configObj.curConfig.imgPath; } /** * @function observedAttributes @@ -85,7 +87,7 @@ export class SeList extends HTMLElement { while(currentObj.$selction.firstChild) currentObj.$selction.removeChild(currentObj.$selction.firstChild); const img = document.createElement('img'); - img.src = './images/' + element.getAttribute("src"); + img.src = currentObj.imgPath + '/' + element.getAttribute("src"); img.style.height = element.getAttribute("img-height"); img.setAttribute('title', t(element.getAttribute("title"))); currentObj.$selction.append(img); diff --git a/src/editor/components/seListItem.js b/src/editor/components/seListItem.js index 0208ebc5..3ab0763c 100644 --- a/src/editor/components/seListItem.js +++ b/src/editor/components/seListItem.js @@ -1,3 +1,4 @@ +/* globals svgEditor */ import 'elix/define/Option.js'; import { t } from '../locale.js'; @@ -34,18 +35,7 @@ export class SeListItem extends HTMLElement { this.$svg.setAttribute('style', 'display: none;'); this.$img = this._shadowRoot.querySelector('img'); this.$img.setAttribute('style', 'display: none;'); - this.editor = null; - } - /** - * @function init - * @param {any} name - * @returns {void} - */ - init (editor) { - this.editor = editor; - if (this.hasAttribute("src")) { - this.setAttribute('src', this.getAttribute("src")); - } + this.imgPath = svgEditor.configObj.curConfig.imgPath; } /** * @function observedAttributes @@ -63,18 +53,15 @@ export class SeListItem extends HTMLElement { * @returns {void} */ attributeChangedCallback (name, oldValue, newValue) { - if (oldValue === newValue && name !== 'src') return; + if (oldValue === newValue) return; switch (name) { case 'option': this.$menuitem.setAttribute('option', newValue); this.$menuitem.textContent = t(newValue); break; case 'src': - if(this.editor !== null) { - const { imgPath } = this.editor.configObj.curConfig; - this.$img.setAttribute('style', 'display: block;'); - this.$img.setAttribute('src', imgPath + '/' + newValue); - } + this.$img.setAttribute('style', 'display: block;'); + this.$img.setAttribute('src', this.imgPath + '/' + newValue); break; case 'title': this.$img.setAttribute('title', t(newValue)); diff --git a/src/editor/components/seMenu.js b/src/editor/components/seMenu.js index 8c5af28c..3c1fe7dc 100644 --- a/src/editor/components/seMenu.js +++ b/src/editor/components/seMenu.js @@ -1,3 +1,4 @@ +/* globals svgEditor */ import 'elix/define/MenuItem.js'; import './sePlainMenuButton.js'; @@ -43,18 +44,7 @@ export class SeMenu extends HTMLElement { this._shadowRoot.append(template.content.cloneNode(true)); this.$menu = this._shadowRoot.querySelector('elix-menu-button'); this.$label = this.$menu.shadowRoot.querySelector('#popupToggle').shadowRoot; - this.editor = null; - } - /** - * @function init - * @param {any} name - * @returns {void} - */ - init (editor) { - this.editor = editor; - if (this.hasAttribute("src")) { - this.setAttribute('src', this.getAttribute("src")); - } + this.imgPath = svgEditor.configObj.curConfig.imgPath; } /** * @function observedAttributes @@ -73,16 +63,13 @@ export class SeMenu extends HTMLElement { */ attributeChangedCallback (name, oldValue, newValue) { const image = new Image(); - if (oldValue === newValue && name !== 'src') return; + if (oldValue === newValue) return; switch (name) { case 'src': - if (this.editor !== null) { - const { imgPath } = this.editor.configObj.curConfig; - image.src = imgPath + '/' + newValue; - image.width = 24; - image.height = 24; - this.$label.prepend(image); - } + image.src = this.imgPath + '/' + newValue; + image.width = 24; + image.height = 24; + this.$label.prepend(image); break; case 'label': this.$label.prepend(newValue); diff --git a/src/editor/components/seMenuItem.js b/src/editor/components/seMenuItem.js index 7297bdf9..cfdcd9b6 100644 --- a/src/editor/components/seMenuItem.js +++ b/src/editor/components/seMenuItem.js @@ -1,3 +1,4 @@ +/* globals svgEditor */ import 'elix/define/Menu.js'; import 'elix/define/MenuItem.js'; import { t } from '../locale.js'; @@ -29,18 +30,7 @@ export class SeMenuItem extends HTMLElement { this.$menuitem = this._shadowRoot.querySelector('elix-menu-item'); this.$svg = this.$menuitem.shadowRoot.querySelector('#checkmark'); this.$svg.setAttribute('style', 'display: none;'); - this.editor = null; - } - /** - * @function init - * @param {any} name - * @returns {void} - */ - init (editor) { - this.editor = editor; - if (this.hasAttribute("src")) { - this.setAttribute('src', this.getAttribute("src")); - } + this.imgPath = svgEditor.configObj.curConfig.imgPath; } /** * @function observedAttributes @@ -58,14 +48,11 @@ export class SeMenuItem extends HTMLElement { */ attributeChangedCallback (name, oldValue, newValue) { let shortcut = ''; - if (oldValue === newValue && name !== 'src') return; + if (oldValue === newValue) return; switch (name) { case 'src': - if(this.editor !== null) { - const { imgPath } = this.editor.configObj.curConfig; - this.$img.style.display = 'inline-block'; - this.$img.setAttribute('src', imgPath + '/' + newValue); - } + this.$img.style.display = 'inline-block'; + this.$img.setAttribute('src', this.imgPath + '/' + newValue); break; case 'label': shortcut = this.getAttribute('shortcut'); diff --git a/src/editor/components/seSpinInput.js b/src/editor/components/seSpinInput.js index fb6a2502..107b0046 100644 --- a/src/editor/components/seSpinInput.js +++ b/src/editor/components/seSpinInput.js @@ -1,3 +1,4 @@ +/* globals svgEditor */ import '../dialogs/se-elix/define/NumberSpinBox.js'; import { t } from '../locale.js'; @@ -68,6 +69,7 @@ export class SESpinInput extends HTMLElement { this.$label = this.shadowRoot.getElementById('label'); this.$event = new CustomEvent('change'); this.$input = this._shadowRoot.querySelector('elix-number-spin-box'); + this.imgPath = svgEditor.configObj.curConfig.imgPath; } /** * @function observedAttributes @@ -93,7 +95,7 @@ export class SESpinInput extends HTMLElement { } break; case 'src': - this.$img.setAttribute('src', './images/' + newValue); + this.$img.setAttribute('src', this.imgPath + '/' + newValue); this.$label.remove(); this.$div.classList.add('imginside'); break; diff --git a/src/editor/components/seZoom.js b/src/editor/components/seZoom.js index 267bb8d6..49006e42 100644 --- a/src/editor/components/seZoom.js +++ b/src/editor/components/seZoom.js @@ -1,3 +1,4 @@ +/* globals svgEditor */ import ListComboBox from 'elix/define/ListComboBox.js'; import * as internal from 'elix/src/base/internal.js'; import { templateFrom, fragmentFrom } from 'elix/src/core/htmlLiterals.js'; @@ -59,17 +60,6 @@ class Zoom extends ListComboBox { ); return result; } - /** - * @function init - * @param {any} name - * @returns {void} - */ - init (editor) { - this.editor = editor; - if (this.hasAttribute("src")) { - this.setAttribute('src', this.getAttribute("src")); - } - } /** * @function observedAttributes * @returns {any} observed @@ -91,8 +81,8 @@ class Zoom extends ListComboBox { // this.$span.setAttribute('title', `${newValue} ${shortcut ? `[${shortcut}]` : ''}`); break; case 'src': - if (this.editor !== null && this.editor !== undefined) { - const { imgPath } = this.editor.configObj.curConfig; + { + const { imgPath } = svgEditor.configObj.curConfig; this.src = imgPath + '/' + newValue; } break; diff --git a/src/editor/extensions/ext-connector/ext-connector.js b/src/editor/extensions/ext-connector/ext-connector.js index 86131c31..ad8fabfb 100644 --- a/src/editor/extensions/ext-connector/ext-connector.js +++ b/src/editor/extensions/ext-connector/ext-connector.js @@ -364,7 +364,6 @@ export default { svgCanvas.setMode('connector'); } }); - $id('mode_connect').init(svgEditor); }, /* async */ addLangData({ _lang }) { // , importLocale: importLoc return { diff --git a/src/editor/extensions/ext-eyedropper/ext-eyedropper.js b/src/editor/extensions/ext-eyedropper/ext-eyedropper.js index dc94e4e1..c81b9073 100644 --- a/src/editor/extensions/ext-eyedropper/ext-eyedropper.js +++ b/src/editor/extensions/ext-eyedropper/ext-eyedropper.js @@ -94,7 +94,6 @@ export default { svgCanvas.setMode('eyedropper'); } }); - $id('tool_eyedropper').init(svgEditor); }, // if we have selected an element, grab its paint and enable the eye dropper button selectedChanged: getStyle, diff --git a/src/editor/extensions/ext-grid/ext-grid.js b/src/editor/extensions/ext-grid/ext-grid.js index c135bbe5..5154272b 100644 --- a/src/editor/extensions/ext-grid/ext-grid.js +++ b/src/editor/extensions/ext-grid/ext-grid.js @@ -174,7 +174,6 @@ export default { svgEditor.configObj.curConfig.showGrid = showGrid = !showGrid; gridUpdate(); }); - $id('view_grid').init(svgEditor); if (showGrid) { gridUpdate(); } diff --git a/src/editor/extensions/ext-imagelib/ext-imagelib.js b/src/editor/extensions/ext-imagelib/ext-imagelib.js index 9b64956b..e9cc44f3 100644 --- a/src/editor/extensions/ext-imagelib/ext-imagelib.js +++ b/src/editor/extensions/ext-imagelib/ext-imagelib.js @@ -530,7 +530,6 @@ export default { $id('tool_imagelib').addEventListener("click", () => { showBrowser(); }); - $id('tool_imagelib').init(svgEditor); const style = document.createElement('style'); style.textContent = '#imgbrowse_holder {' + diff --git a/src/editor/extensions/ext-opensave/ext-opensave.js b/src/editor/extensions/ext-opensave/ext-opensave.js index 904f4066..d042d56a 100644 --- a/src/editor/extensions/ext-opensave/ext-opensave.js +++ b/src/editor/extensions/ext-opensave/ext-opensave.js @@ -174,9 +174,6 @@ export default { $id("tool_open").addEventListener("click", clickOpen.bind(this)); $id("tool_save").addEventListener("click", clickSave.bind(this, "save")); $id("tool_save_as").addEventListener("click", clickSave.bind(this, "saveas")); - [ "tool_clear", "tool_open", "tool_save", "tool_save_as" ].forEach((attrId) => - $id(attrId).init(svgEditor) - ); } }; } diff --git a/src/editor/extensions/ext-panning/ext-panning.js b/src/editor/extensions/ext-panning/ext-panning.js index c9708112..aa9a4555 100644 --- a/src/editor/extensions/ext-panning/ext-panning.js +++ b/src/editor/extensions/ext-panning/ext-panning.js @@ -57,7 +57,6 @@ export default { svgCanvas.setMode('ext-panning'); } }); - $id('ext-panning').init(svgEditor); }, mouseDown() { if (svgCanvas.getMode() === 'ext-panning') { diff --git a/src/editor/extensions/ext-polystar/ext-polystar.js b/src/editor/extensions/ext-polystar/ext-polystar.js index 39a5e1e0..b93f909e 100644 --- a/src/editor/extensions/ext-polystar/ext-polystar.js +++ b/src/editor/extensions/ext-polystar/ext-polystar.js @@ -108,10 +108,6 @@ export default { showPanel(false, "star"); } }); - $id("tool_star").init(svgEditor); - $id("tool_polygon").init(svgEditor); - $id("tools_polygon").init(svgEditor); - const label0 = `${name}:contextTools.0.label`; const title0 = `${name}:contextTools.0.title`; const label1 = `${name}:contextTools.1.label`; diff --git a/src/editor/extensions/ext-shapes/ext-shapes.js b/src/editor/extensions/ext-shapes/ext-shapes.js index d335f32a..5153264c 100644 --- a/src/editor/extensions/ext-shapes/ext-shapes.js +++ b/src/editor/extensions/ext-shapes/ext-shapes.js @@ -54,7 +54,6 @@ export default { canv.setMode(modeId); } }); - $id('tool_shapelib').init(svgEditor); } }, mouseDown (opts) { diff --git a/src/editor/panels/BottomPanel.js b/src/editor/panels/BottomPanel.js index 941cc275..d6b63844 100644 --- a/src/editor/panels/BottomPanel.js +++ b/src/editor/panels/BottomPanel.js @@ -216,13 +216,8 @@ class BottomPanel { $id('stroke_linejoin').addEventListener('change', (evt) => this.handleStrokeAttr.bind(this)('stroke-linejoin', evt)); $id('stroke_linecap').addEventListener('change', (evt) => this.handleStrokeAttr.bind(this)('stroke-linecap', evt)); $id('opacity').addEventListener('change', this.handleOpacity.bind(this)); - $id('fill_color').init(i18next, this.editor); - $id('stroke_color').init(i18next, this.editor); - $id('zoom').init(this.editor); - // eslint-disable-next-line max-len - [ "linejoin_miter", "linejoin_round", "linejoin_bevel", "linecap_butt", "linecap_square", "linecap_round" ].forEach((attrId) => { - $id(attrId).init(this.editor); - }); + $id('fill_color').init(i18next); + $id('stroke_color').init(i18next); } /** * @type {module} diff --git a/src/editor/panels/LayersPanel.js b/src/editor/panels/LayersPanel.js index 6365dba3..c12a2edf 100644 --- a/src/editor/panels/LayersPanel.js +++ b/src/editor/panels/LayersPanel.js @@ -97,12 +97,6 @@ class LayersPanel { $id("se-cmenu-layers-more").addEventListener("change", this.lmenuFunc.bind(this)); $id("se-cmenu-layers-list").addEventListener("change", (e) => { this.lmenuFunc(e); }); $id("sidepanel_handle").addEventListener("click", () => this.toggleSidePanel()); - $id("layer_new").init(this.editor); - $id("layer_delete").init(this.editor); - $id("layer_up").init(this.editor); - $id("layer_down").init(this.editor); - $id("layer_rename").init(this.editor); - $id("layer_moreopts").init(this.editor); this.toggleSidePanel(this.editor.configObj.curConfig.showlayers); } toggleSidePanel(displayFlag) { diff --git a/src/editor/panels/LeftPanel.js b/src/editor/panels/LeftPanel.js index 8a6cb8bb..6e311771 100644 --- a/src/editor/panels/LeftPanel.js +++ b/src/editor/panels/LeftPanel.js @@ -268,11 +268,6 @@ class LeftPanel { $id("tool_ellipse").addEventListener("click", this.clickEllipse.bind(this)); $id("tool_circle").addEventListener("click", this.clickCircle.bind(this)); $id("tool_fhellipse").addEventListener("click", this.clickFHEllipse.bind(this)); - - // eslint-disable-next-line max-len - [ "tool_rect", "tool_square", "tool_fhrect", "tool_ellipse", "tool_circle", "tool_fhellipse", "tool_select", "tool_fhpath", "tool_text", "tool_image", "tool_zoom", "tool_path", "tool_line", "tools_rect", "tools_ellipse" ].forEach((attrId) => - $id(attrId).init(this.editor) - ); } } diff --git a/src/editor/panels/TopPanel.js b/src/editor/panels/TopPanel.js index ae55d50e..788b88c3 100644 --- a/src/editor/panels/TopPanel.js +++ b/src/editor/panels/TopPanel.js @@ -1040,11 +1040,6 @@ class TopPanel { $id("tool_unlink_use").addEventListener("click", this.clickGroup.bind(this)); $id('image_url').addEventListener('change', (evt) => { this.setImageURL(evt.currentTarget.value);}); - // eslint-disable-next-line max-len - [ "tool_add_subpath", "tool_openclose_path", "tool_node_delete", "tool_node_clone", "tool_node_link", "tool_ungroup", "tool_unlink_use", "tool_text_anchor_start", "tool_text_anchor_middle", "tool_text_anchor_end", "tool_bold", "tool_italic", "tool_align_bottom", "tool_align_middle", "tool_align_top", "tool_align_left", "tool_align_center", "tool_align_right", "tool_make_link_multi", "tool_group_elements", "tool_delete_multi", "tool_make_link", "tool_reorient", "tool_topath", "tool_move_bottom", "tool_move_top", "tool_delete", "tool_clone", "tool_redo", "tool_undo", "tool_wireframe", "tool_source", "tool_clone_multi", "tool_posleft", "tool_poscenter", "tool_posright", "tool_postop", "tool_posmiddle", "tool_posbottom" ].forEach((attrId) => - $id(attrId).init(this.editor) - ); - // all top panel attributes [ "elem_id",