#631 selistitem image path load from editor changes

src/editor/components/seListItem.js

@@ -35,6 +35,17 @@ export class SeListItem extends HTMLElement {
     this.$img = this._shadowRoot.querySelector('img');
     this.$img.setAttribute('style', 'display: none;');
   }
+  /**
+   * @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
@@ -51,15 +62,18 @@ export class SeListItem extends HTMLElement {
    * @returns {void}
    */
   attributeChangedCallback (name, oldValue, newValue) {
-    if (oldValue === newValue) return;
+    if (oldValue === newValue && name !== 'src') return;
     switch (name) {
     case 'option':
       this.$menuitem.setAttribute('option', newValue);
       this.$menuitem.textContent = t(newValue);
       break;
     case 'src':
-      this.$img.setAttribute('style', 'display: block;');
+      if(this.editor !== null) {
-      this.$img.setAttribute('src', './images/' + newValue);
+        const { imgPath } = this.editor.configObj.curConfig;
+        this.$img.setAttribute('style', 'display: block;');
+        this.$img.setAttribute('src', imgPath + '/' + newValue);
+      }
       break;
     case 'title':
       this.$img.setAttribute('title', t(newValue));

src/editor/panels/BottomPanel.js

@@ -222,6 +222,10 @@ class BottomPanel {
     $id('opacity').addEventListener('change', this.handleOpacity.bind(this));
     $id('fill_color').init(i18next);
     $id('stroke_color').init(i18next);
+    // 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/TopPanel.js

@@ -1042,7 +1042,7 @@ class TopPanel {
     $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) =>
+    [ "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)
     );