#631 globals svgEditor to get imgpath and set changes

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"));

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;
+    this.imgPath = svgEditor.configObj.curConfig.imgPath;
-  }
-  /**
-   * @function init
-   * @param {any} name
-   * @returns {void}
-   */
-  init (editor) {
-    this.editor = editor;
-    if (this.hasAttribute("src")) {
-      this.setAttribute('src', this.getAttribute("src"));
-    }
   }
   /**
    * @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) {
+      } else {
-        const { imgPath } = this.editor.configObj.curConfig;
+        this.$img.setAttribute('src', this.imgPath + "/" + newValue);
-        this.$img.setAttribute('src', imgPath + "/" + newValue);
       }
       break;
     case 'pressed':

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) {
+      this.$logo.setAttribute('src', this.imgPath + '/' + newValue);
-        const { imgPath } = this.editor.configObj.curConfig;
-        this.$logo.setAttribute('src', imgPath + '/' + newValue);
-      }
       break;
     case 'label':
       this.setAttribute('title', t(newValue));

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;
+    this.imgPath = svgEditor.configObj.curConfig.imgPath;
-  }
-  /**
-   * @function init
-   * @param {any} name
-   * @returns {void}
-   */
-  init (editor) {
-    this.editor = editor;
-    if (this.hasAttribute("src")) {
-      this.setAttribute('src', this.getAttribute("src"));
-    }
   }
   /**
    * @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) {
+      this.$img.setAttribute('src', this.imgPath + '/' + newValue);
-        const { imgPath } = this.editor.configObj.curConfig;
-        this.$img.setAttribute('src', imgPath + '/' + newValue);
-      }
       break;
     default:
       // eslint-disable-next-line no-console

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;
+    this.imgPath = svgEditor.configObj.curConfig.imgPath;
-  }
-  /**
-   * @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'));
   }
   /**
    * @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

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);

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;
+    this.imgPath = svgEditor.configObj.curConfig.imgPath;
-  }
-  /**
-   * @function init
-   * @param {any} name
-   * @returns {void}
-   */
-  init (editor) {
-    this.editor = editor;
-    if (this.hasAttribute("src")) {
-      this.setAttribute('src', this.getAttribute("src"));
-    }
   }
   /**
    * @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) {
+      this.$img.setAttribute('style', 'display: block;');
-        const { imgPath } = this.editor.configObj.curConfig;
+      this.$img.setAttribute('src', this.imgPath + '/' + newValue);
-        this.$img.setAttribute('style', 'display: block;');
-        this.$img.setAttribute('src', imgPath + '/' + newValue);
-      }
       break;
     case 'title':
       this.$img.setAttribute('title', t(newValue));

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;
+    this.imgPath = svgEditor.configObj.curConfig.imgPath;
-  }
-  /**
-   * @function init
-   * @param {any} name
-   * @returns {void}
-   */
-  init (editor) {
-    this.editor = editor;
-    if (this.hasAttribute("src")) {
-      this.setAttribute('src', this.getAttribute("src"));
-    }
   }
   /**
    * @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) {
+      image.src = this.imgPath + '/' + newValue;
-        const { imgPath } = this.editor.configObj.curConfig;
+      image.width = 24;
-        image.src = imgPath + '/' + newValue;
+      image.height = 24;
-        image.width = 24;
+      this.$label.prepend(image);
-        image.height = 24;
-        this.$label.prepend(image);
-      }
       break;
     case 'label':
       this.$label.prepend(newValue);

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;
+    this.imgPath = svgEditor.configObj.curConfig.imgPath;
-  }
-  /**
-   * @function init
-   * @param {any} name
-   * @returns {void}
-   */
-  init (editor) {
-    this.editor = editor;
-    if (this.hasAttribute("src")) {
-      this.setAttribute('src', this.getAttribute("src"));
-    }
   }
   /**
    * @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) {
+      this.$img.style.display = 'inline-block';
-        const { imgPath } = this.editor.configObj.curConfig;
+      this.$img.setAttribute('src', this.imgPath + '/' + newValue);
-        this.$img.style.display = 'inline-block';
-        this.$img.setAttribute('src', imgPath + '/' + newValue);
-      }
       break;
     case 'label':
       shortcut = this.getAttribute('shortcut');

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;

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;

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 {

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,

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();
         }

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 {' +

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)
-        );
       }
     };
   }

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') {

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`;

src/editor/extensions/ext-shapes/ext-shapes.js

@@ -54,7 +54,6 @@ export default {
               canv.setMode(modeId);
             }
           });
-          $id('tool_shapelib').init(svgEditor);
         }
       },
       mouseDown (opts) {

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('fill_color').init(i18next);
-    $id('stroke_color').init(i18next, this.editor);
+    $id('stroke_color').init(i18next);
-    $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);
-    });
   }
   /**
   * @type {module}

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) {

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)
-    );
   }
 }
 

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",