#631 menu, explorer and flybutton image path update

src/editor/MainMenu.js

@@ -285,15 +285,14 @@ class MainMenu {
         <se-menu-item id="tool_docprops" label="tools.docprops" shortcut="D" src="docprop.svg"></se-menu-item>
         <se-menu-item id="tool_editor_prefs" label="config.editor_prefs" src="editPref.svg"></se-menu-item>
         <se-menu-item id="tool_editor_homepage" label="tools.editor_homepage" src="logo.svg"></se-menu-item>
-    </se-menu>
-       `;
+    </se-menu>`;
     this.editor.$svgEditor.append(template.content.cloneNode(true));
 
     // register action to main menu entries
     /**
      * Associate all button actions as well as non-button keyboard shortcuts.
      */
-    [ "tool_import", "tool_export", "tool_docprops", "tool_editor_prefs", "tool_editor_homepage"  ].forEach((attrId) =>
+    [ "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", () => {

src/editor/components/seExplorerButton.js

@@ -119,6 +119,18 @@ 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"));
+    }
   }
   /**
    * @function observedAttributes
@@ -135,7 +147,7 @@ export class ExplorerButton extends HTMLElement {
    * @returns {void}
    */
   async attributeChangedCallback (name, oldValue, newValue) {
-    if (oldValue === newValue) return;
+    if (oldValue === newValue && name !== 'src') return;
     switch (name) {
     case 'title':
       {
@@ -172,7 +184,10 @@ export class ExplorerButton extends HTMLElement {
       }
       break;
     case 'src':
-      this.$img.setAttribute('src', './images/' + newValue);
+      if(this.editor !== null) {
+        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

@@ -100,6 +100,18 @@ 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'));
   }
   /**
    * @function observedAttributes
@@ -233,12 +245,11 @@ export class FlyingButton extends HTMLElement {
    * @returns {void}
    */
   connectedCallback () {
-    // initialize currentAction with the first slot of the list
     this.activeSlot = this.shadowRoot.querySelector('slot').assignedElements()[0];
-    this.$img.setAttribute('src', './images/' + 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) {
@@ -251,7 +262,7 @@ export class FlyingButton extends HTMLElement {
         break;
       case 'SE-BUTTON':
         // change to the current action
-        this.$img.setAttribute('src', './images/' + ev.target.getAttribute('src'));
+        this.$img.setAttribute('src', imgPath + '/' + ev.target.getAttribute('src'));
         this.activeSlot = ev.target;
         this.setAttribute('pressed', 'pressed');
         // and close the menu

src/editor/components/seMenu.js

@@ -43,6 +43,18 @@ 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"));
+    }
   }
   /**
    * @function observedAttributes
@@ -61,13 +73,16 @@ export class SeMenu extends HTMLElement {
    */
   attributeChangedCallback (name, oldValue, newValue) {
     const image = new Image();
-    if (oldValue === newValue) return;
+    if (oldValue === newValue && name !== 'src') return;
     switch (name) {
     case 'src':
-      image.src = './images/' + newValue;
+      if (this.editor !== null) {
+        const { imgPath } = this.editor.configObj.curConfig;
+        image.src = imgPath + '/' + newValue;
         image.width = 24;
         image.height = 24;
         this.$label.prepend(image);
+      }
       break;
     case 'label':
       this.$label.prepend(newValue);

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

@@ -110,6 +110,7 @@ export default {
         });
         $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`;

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

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

src/editor/panels/LeftPanel.js

@@ -270,7 +270,7 @@ class LeftPanel {
     $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" ].forEach((attrId) =>
+    [ "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)
     );
   }