#631 seButton web component image path load from config

src/editor/components/seButton.js

@@ -55,6 +55,18 @@ 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"));
+    }
   }
   /**
    * @function observedAttributes
@@ -71,7 +83,7 @@ export class ToolButton extends HTMLElement {
    * @returns {void}
    */
   attributeChangedCallback (name, oldValue, newValue) {
-    if (oldValue === newValue) return;
+    if (oldValue === newValue && name !== 'src') return;
     switch (name) {
     case 'title':
       {
@@ -83,7 +95,12 @@ export class ToolButton extends HTMLElement {
       this.$div.style = newValue;
       break;
     case 'src':
-      this.$img.setAttribute('src', (newValue.indexOf("data:") === -1) ? './images/' + newValue : newValue);
+      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);
+      }
       break;
     case 'pressed':
       if (newValue === null) {

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

@@ -364,6 +364,7 @@ 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,6 +94,7 @@ 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,6 +174,7 @@ export default {
           svgEditor.configObj.curConfig.showGrid = showGrid = !showGrid;
           gridUpdate();
         });
+        $id('view_grid').init(svgEditor);
         if (showGrid) {
           gridUpdate();
         }

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

@@ -57,6 +57,7 @@ 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,6 +108,8 @@ export default {
             showPanel(false, "star");
           }
         });
+        $id("tool_star").init(svgEditor);
+        $id("tool_polygon").init(svgEditor);
 
         const label0 = `${name}:contextTools.0.label`;
         const title0 = `${name}:contextTools.0.title`;

src/editor/panels/LayersPanel.js

@@ -89,31 +89,20 @@ class LayersPanel {
     menuLayerBox.setAttribute("leftclick", false);
     this.editor.$container.append(menuLayerBox);
     menuLayerBox.init(i18next);
-    document
+    $id("layer_new").addEventListener("click", this.newLayer.bind(this));
-      .getElementById("layer_new")
+    $id("layer_delete").addEventListener("click", this.deleteLayer.bind(this));
-      .addEventListener("click", this.newLayer.bind(this));
+    $id("layer_up").addEventListener("click", () => this.moveLayer.bind(this)(-1));
-    document
+    $id("layer_down").addEventListener("click", () => this.moveLayer.bind(this)(1));
-      .getElementById("layer_delete")
+    $id("layer_rename").addEventListener("click", this.layerRename.bind(this));
-      .addEventListener("click", this.deleteLayer.bind(this));
+    $id("se-cmenu-layers-more").addEventListener("change", this.lmenuFunc.bind(this));
-    document
+    $id("se-cmenu-layers-list").addEventListener("change", (e) => { this.lmenuFunc(e); });
-      .getElementById("layer_up")
+    $id("sidepanel_handle").addEventListener("click", () => this.toggleSidePanel());
-      .addEventListener("click", () => this.moveLayer.bind(this)(-1));
+    $id("layer_new").init(this.editor);
-    document
+    $id("layer_delete").init(this.editor);
-      .getElementById("layer_down")
+    $id("layer_up").init(this.editor);
-      .addEventListener("click", () => this.moveLayer.bind(this)(1));
+    $id("layer_down").init(this.editor);
-    document
+    $id("layer_rename").init(this.editor);
-      .getElementById("layer_rename")
+    $id("layer_moreopts").init(this.editor);
-      .addEventListener("click", this.layerRename.bind(this));
-    $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()
-    );
     this.toggleSidePanel(this.editor.configObj.curConfig.showlayers);
   }
   toggleSidePanel(displayFlag) {

src/editor/panels/LeftPanel.js

@@ -267,9 +267,11 @@ class LeftPanel {
     $id("tool_fhrect").addEventListener("click", this.clickFHRect.bind(this));
     $id("tool_ellipse").addEventListener("click", this.clickEllipse.bind(this));
     $id("tool_circle").addEventListener("click", this.clickCircle.bind(this));
-    $id("tool_fhellipse").addEventListener(
+    $id("tool_fhellipse").addEventListener("click", this.clickFHEllipse.bind(this));
-      "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" ].forEach((attrId) =>
+      $id(attrId).init(this.editor)
     );
   }
 }

src/editor/panels/TopPanel.js

@@ -1001,121 +1001,50 @@ class TopPanel {
     this.editor.$container.append(newSeEditorDialog);
     newSeEditorDialog.init(i18next);
     // register action to top panel buttons
-    $id("tool_source").addEventListener(
+    $id("tool_source").addEventListener("click", this.showSourceEditor.bind(this));
-      "click",
+    $id("tool_wireframe").addEventListener("click", this.clickWireframe.bind(this));
-      this.showSourceEditor.bind(this)
-    );
-    $id("tool_wireframe").addEventListener(
-      "click",
-      this.clickWireframe.bind(this)
-    );
     $id("tool_undo").addEventListener("click", this.clickUndo.bind(this));
     $id("tool_redo").addEventListener("click", this.clickRedo.bind(this));
     $id("tool_clone").addEventListener("click", this.clickClone.bind(this));
-    $id("tool_clone_multi").addEventListener(
+    $id("tool_clone_multi").addEventListener("click", this.clickClone.bind(this));
-      "click",
+    $id("tool_delete").addEventListener("click", this.deleteSelected.bind(this));
-      this.clickClone.bind(this)
+    $id("tool_delete_multi").addEventListener("click", this.deleteSelected.bind(this));
-    );
+    $id("tool_move_top").addEventListener("click", this.moveToTopSelected.bind(this));
-    $id("tool_delete").addEventListener(
+    $id("tool_move_bottom").addEventListener("click", this.moveToBottomSelected.bind(this));
-      "click",
-      this.deleteSelected.bind(this)
-    );
-    $id("tool_delete_multi").addEventListener(
-      "click",
-      this.deleteSelected.bind(this)
-    );
-    $id("tool_move_top").addEventListener(
-      "click",
-      this.moveToTopSelected.bind(this)
-    );
-    $id("tool_move_bottom").addEventListener(
-      "click",
-      this.moveToBottomSelected.bind(this)
-    );
     $id("tool_topath").addEventListener("click", this.convertToPath.bind(this));
-    $id("tool_make_link").addEventListener(
+    $id("tool_make_link").addEventListener("click", this.makeHyperlink.bind(this));
-      "click",
+    $id("tool_make_link_multi").addEventListener("click", this.makeHyperlink.bind(this));
-      this.makeHyperlink.bind(this)
+    $id("tool_reorient").addEventListener("click", this.reorientPath.bind(this));
-    );
+    $id("tool_group_elements").addEventListener("click", this.clickGroup.bind(this));
-    $id("tool_make_link_multi").addEventListener(
+    $id("tool_position").addEventListener("change", (evt) => this.clickAlignEle.bind(this)(evt));
-      "click",
+    $id("tool_align_left").addEventListener("click", () => this.clickAlign.bind(this)("left"));
-      this.makeHyperlink.bind(this)
+    $id("tool_align_right").addEventListener("click", () => this.clickAlign.bind(this)("right"));
-    );
+    $id("tool_align_center").addEventListener("click", () => this.clickAlign.bind(this)("center"));
-    $id("tool_reorient").addEventListener(
+    $id("tool_align_top").addEventListener("click", () => this.clickAlign.bind(this)("top"));
-      "click",
+    $id("tool_align_bottom").addEventListener("click", () => this.clickAlign.bind(this)("bottom"));
-      this.reorientPath.bind(this)
+    $id("tool_align_middle").addEventListener("click", () => this.clickAlign.bind(this)("middle"));
-    );
+    $id("tool_node_clone").addEventListener("click", this.clonePathNode.bind(this));
-    $id("tool_group_elements").addEventListener(
+    $id("tool_node_delete").addEventListener("click", this.deletePathNode.bind(this));
-      "click",
+    $id("tool_openclose_path").addEventListener("click", this.opencloseSubPath.bind(this));
-      this.clickGroup.bind(this)
+    $id("tool_add_subpath").addEventListener("click", this.addSubPath.bind(this));
-    );
+    $id("tool_node_link").addEventListener("click", this.linkControlPoints.bind(this));
-    $id("tool_position").addEventListener("change", (evt) =>
+    $id("angle").addEventListener("change", this.changeRotationAngle.bind(this));
-      this.clickAlignEle.bind(this)(evt)
-    );
-    $id("tool_align_left").addEventListener("click", () =>
-      this.clickAlign.bind(this)("left")
-    );
-    $id("tool_align_right").addEventListener("click", () =>
-      this.clickAlign.bind(this)("right")
-    );
-    $id("tool_align_center").addEventListener("click", () =>
-      this.clickAlign.bind(this)("center")
-    );
-    $id("tool_align_top").addEventListener("click", () =>
-      this.clickAlign.bind(this)("top")
-    );
-    $id("tool_align_bottom").addEventListener("click", () =>
-      this.clickAlign.bind(this)("bottom")
-    );
-    $id("tool_align_middle").addEventListener("click", () =>
-      this.clickAlign.bind(this)("middle")
-    );
-    $id("tool_node_clone").addEventListener(
-      "click",
-      this.clonePathNode.bind(this)
-    );
-    $id("tool_node_delete").addEventListener(
-      "click",
-      this.deletePathNode.bind(this)
-    );
-    $id("tool_openclose_path").addEventListener(
-      "click",
-      this.opencloseSubPath.bind(this)
-    );
-    $id("tool_add_subpath").addEventListener(
-      "click",
-      this.addSubPath.bind(this)
-    );
-    $id("tool_node_link").addEventListener(
-      "click",
-      this.linkControlPoints.bind(this)
-    );
-    $id("angle").addEventListener(
-      "change",
-      this.changeRotationAngle.bind(this)
-    );
     $id("blur").addEventListener("change", this.changeBlur.bind(this));
     $id("rect_rx").addEventListener("change", this.changeRectRadius.bind(this));
     $id("font_size").addEventListener("change", this.changeFontSize.bind(this));
     $id("tool_ungroup").addEventListener("click", this.clickGroup.bind(this));
     $id("tool_bold").addEventListener("click", this.clickBold.bind(this));
     $id("tool_italic").addEventListener("click", this.clickItalic.bind(this));
-    $id("tool_text_anchor_start").addEventListener("click", () =>
+    $id("tool_text_anchor_start").addEventListener("click", () => this.clickTextAnchor.bind(this)("start"));
-      this.clickTextAnchor.bind(this)("start")
+    $id("tool_text_anchor_middle").addEventListener("click", () => this.clickTextAnchor.bind(this)("middle"));
+    $id("tool_text_anchor_end").addEventListener("click", () => this.clickTextAnchor.bind(this)("end"));
+    $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" ].forEach((attrId) =>
+      $id(attrId).init(this.editor)
     );
-    $id("tool_text_anchor_middle").addEventListener("click", () =>
-      this.clickTextAnchor.bind(this)("middle")
-    );
-    $id("tool_text_anchor_end").addEventListener("click", () =>
-      this.clickTextAnchor.bind(this)("end")
-    );
-    $id("tool_unlink_use").addEventListener(
-      "click",
-      this.clickGroup.bind(this)
-    );
-    $id('image_url').addEventListener('change', (evt) => {
-      this.setImageURL(evt.currentTarget.value);
-    });
 
     // all top panel attributes
     [