From 5ed960cb1a8799009e87517d9b7be056d59a53ca Mon Sep 17 00:00:00 2001 From: agriyadev5 Date: Tue, 21 Sep 2021 17:41:06 +0530 Subject: [PATCH] #631 menu, explorer and flybutton image path update --- src/editor/MainMenu.js | 5 ++-- src/editor/components/seExplorerButton.js | 19 ++++++++++++-- src/editor/components/seFlyingButton.js | 17 ++++++++++--- src/editor/components/seMenu.js | 25 +++++++++++++++---- .../extensions/ext-polystar/ext-polystar.js | 1 + .../extensions/ext-shapes/ext-shapes.js | 1 + src/editor/panels/LeftPanel.js | 2 +- 7 files changed, 56 insertions(+), 14 deletions(-) diff --git a/src/editor/MainMenu.js b/src/editor/MainMenu.js index 0b680f5f..d1317059 100644 --- a/src/editor/MainMenu.js +++ b/src/editor/MainMenu.js @@ -285,15 +285,14 @@ class MainMenu { - - `; + `; 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", () => { diff --git a/src/editor/components/seExplorerButton.js b/src/editor/components/seExplorerButton.js index ab03f6df..18abf2f8 100644 --- a/src/editor/components/seExplorerButton.js +++ b/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 diff --git a/src/editor/components/seFlyingButton.js b/src/editor/components/seFlyingButton.js index 073ab0c5..4e38c9cc 100644 --- a/src/editor/components/seFlyingButton.js +++ b/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 diff --git a/src/editor/components/seMenu.js b/src/editor/components/seMenu.js index 279cf096..8c5af28c 100644 --- a/src/editor/components/seMenu.js +++ b/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; - image.width = 24; - image.height = 24; - this.$label.prepend(image); + 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); diff --git a/src/editor/extensions/ext-polystar/ext-polystar.js b/src/editor/extensions/ext-polystar/ext-polystar.js index 45908dc5..39a5e1e0 100644 --- a/src/editor/extensions/ext-polystar/ext-polystar.js +++ b/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`; diff --git a/src/editor/extensions/ext-shapes/ext-shapes.js b/src/editor/extensions/ext-shapes/ext-shapes.js index 5153264c..d335f32a 100644 --- a/src/editor/extensions/ext-shapes/ext-shapes.js +++ b/src/editor/extensions/ext-shapes/ext-shapes.js @@ -54,6 +54,7 @@ export default { canv.setMode(modeId); } }); + $id('tool_shapelib').init(svgEditor); } }, mouseDown (opts) { diff --git a/src/editor/panels/LeftPanel.js b/src/editor/panels/LeftPanel.js index 48ff115e..8a6cb8bb 100644 --- a/src/editor/panels/LeftPanel.js +++ b/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) ); }