From 704588889dc7f0e7e6e0006ffca8a349b13d894b Mon Sep 17 00:00:00 2001 From: agriyadev5 Date: Mon, 30 Aug 2021 17:49:57 +0530 Subject: [PATCH 01/19] #631 web component i18n implement new approach --- src/editor/MainMenu.js | 13 ++++++------- src/editor/components/seMenuItem.js | 4 ++-- .../extensions/ext-imagelib/ext-imagelib.js | 3 ++- .../extensions/ext-opensave/ext-opensave.js | 8 ++++---- src/editor/locale.js | 4 ++++ src/editor/locale/lang.en.js | 16 ++++++++-------- 6 files changed, 26 insertions(+), 22 deletions(-) diff --git a/src/editor/MainMenu.js b/src/editor/MainMenu.js index bac71306..66fb573c 100644 --- a/src/editor/MainMenu.js +++ b/src/editor/MainMenu.js @@ -120,7 +120,7 @@ class MainMenu { this.editor.configObj.curConfig.snappingStep = gridsnappingstep; this.editor.configObj.curConfig.gridColor = gridcolor; this.editor.configObj.curConfig.showRulers = showrulers; - $id('rulers').style.display = (this.editor.configObj.curConfig.showRulers) ? 'block' : 'none'; + // $id("rulers").style.display = (this.editor.configObj.curConfig.showRulers) ? 'block' : 'none'; if (this.editor.configObj.curConfig.showRulers) { this.editor.rulers.updateRulers(); } @@ -278,16 +278,15 @@ class MainMenu { init() { // add Top panel const template = document.createElement("template"); - const { i18next } = this.editor; const { imgPath } = this.editor.configObj.curConfig; // eslint-disable-next-line no-unsanitized/property template.innerHTML = ` - - - - - + + + + + `; $id('tools_top').prepend(template.content.cloneNode(true)); diff --git a/src/editor/components/seMenuItem.js b/src/editor/components/seMenuItem.js index d005fb8e..ebb7ce3f 100644 --- a/src/editor/components/seMenuItem.js +++ b/src/editor/components/seMenuItem.js @@ -1,6 +1,6 @@ import 'elix/define/Menu.js'; import 'elix/define/MenuItem.js'; - +import { t } from '../locale.js'; const template = document.createElement('template'); template.innerHTML = ` + icon `; @@ -30,13 +32,15 @@ export class SeListItem extends HTMLElement { this.$menuitem = this._shadowRoot.querySelector('elix-option'); this.$svg = this.$menuitem.shadowRoot.querySelector('#checkmark'); this.$svg.setAttribute('style', 'display: none;'); + this.$img = this._shadowRoot.querySelector('img'); + this.$img.setAttribute('style', 'display: none;'); } /** * @function observedAttributes * @returns {any} observed */ static get observedAttributes () { - return [ 'option' ]; + return [ 'option', 'src', 'title', 'img-height' ]; } /** @@ -51,6 +55,17 @@ export class SeListItem extends HTMLElement { switch (name) { case 'option': this.$menuitem.setAttribute('option', newValue); + this.$menuitem.textContent = t(newValue); + break; + case 'src': + this.$img.setAttribute('style', 'display: block;'); + this.$img.setAttribute('src', './images/' + newValue); + break; + case 'title': + this.$img.setAttribute('title', t(newValue)); + break; + case 'img-height': + this.$img.setAttribute('height', newValue); break; default: // eslint-disable-next-line no-console @@ -73,6 +88,51 @@ export class SeListItem extends HTMLElement { set option (value) { this.setAttribute('option', value); } + /** + * @function get + * @returns {any} + */ + get title () { + return this.getAttribute('title'); + } + + /** + * @function set + * @returns {void} + */ + set title (value) { + this.setAttribute('title', value); + } + /** + * @function get + * @returns {any} + */ + get imgHeight () { + return this.getAttribute('img-height'); + } + + /** + * @function set + * @returns {void} + */ + set imgHeight (value) { + this.setAttribute('img-height', value); + } + /** + * @function get + * @returns {any} + */ + get src () { + return this.getAttribute('src'); + } + + /** + * @function set + * @returns {void} + */ + set src (value) { + this.setAttribute('src', value); + } } // Register diff --git a/src/editor/panels/BottomPanel.js b/src/editor/panels/BottomPanel.js index 1ca506f9..79c9c6b7 100644 --- a/src/editor/panels/BottomPanel.js +++ b/src/editor/panels/BottomPanel.js @@ -164,7 +164,6 @@ class BottomPanel { // register actions for Bottom panel const template = document.createElement('template'); const { i18next } = this.editor; - const { imgPath } = this.editor.configObj.curConfig; // eslint-disable-next-line no-unsanitized/property template.innerHTML = ` @@ -187,27 +186,21 @@ class BottomPanel { - — - ... - - - - - . - - .. + — + ... + - - + - . + - .. - - - + + + - - - + + + diff --git a/src/editor/panels/TopPanel.js b/src/editor/panels/TopPanel.js index 5ede530b..c67af4c4 100644 --- a/src/editor/panels/TopPanel.js +++ b/src/editor/panels/TopPanel.js @@ -111,18 +111,20 @@ class TopPanel { $id("stroke_width").value = this.selectedElement.getAttribute("stroke-width") || 1; $id("stroke_style").value = this.selectedElement.getAttribute("stroke-dasharray") || "none"; + $id("stroke_style").setAttribute("value", $id("stroke_style").value); let attr = this.selectedElement.getAttribute("stroke-linejoin") || "miter"; - if ($id("linejoin_" + attr).length) { + if ($id("linejoin_" + attr)) { this.setStrokeOpt($id("linejoin_" + attr)); + $id("stroke_linejoin").setAttribute("value", attr); } attr = this.selectedElement.getAttribute("stroke-linecap") || "butt"; - - if ($id("linecap_" + attr).length) { + if ($id("linecap_" + attr)) { this.setStrokeOpt($id("linecap_" + attr)); + $id("stroke_linecap").setAttribute("value", attr); } } } @@ -343,7 +345,7 @@ class TopPanel { this.displayTool("text_panel"); $id("tool_italic").pressed = this.editor.svgCanvas.getItalic(); $id("tool_bold").pressed = this.editor.svgCanvas.getBold(); - $id("tool_font_family").value = elem.getAttribute("font-family"); + $id("tool_font_family").setAttribute("value", elem.getAttribute("font-family")); $id("font_size").value = elem.getAttribute("font-size"); $id("text").value = elem.textContent; const textAnchorStart = $id("tool_text_anchor_start"); @@ -824,24 +826,13 @@ class TopPanel { // add Top panel const template = document.createElement("template"); const { i18next } = this.editor; - const { imgPath } = this.editor.configObj.curConfig; // eslint-disable-next-line no-unsanitized/property template.innerHTML = `
- - + +
@@ -870,29 +861,15 @@ class TopPanel {
- - + + - - - - - - - - - - - - - - - - - - + + + + + +
@@ -905,8 +882,7 @@ class TopPanel {
- +
@@ -920,78 +896,64 @@ class TopPanel { - ${i18next.t('tools.selected_objects')} - ${i18next.t('tools.largest_object')} - ${i18next.t('tools.smallest_object')} - ${i18next.t('tools.page')} + + + +
- - - - - + + +
- - - + +
- +
- - + +
- +
- - - - + +
- - - - + +
- - - - - - - - + + + +
- ${i18next.t('properties.serif')} - ${i18next.t('properties.sans_serif')} - ${i18next.t('properties.cursive')} - ${i18next.t('properties.fantasy')} - ${i18next.t('properties.monospace')} - ${i18next.t('properties.courier')} - ${i18next.t('properties.helvetica')} - ${i18next.t('properties.times')} + + + + + + + + - +
- - - + + +
@@ -1000,13 +962,10 @@ class TopPanel {
- - +
- - +
@@ -1017,21 +976,17 @@ class TopPanel {
- - +
- - - - + + - - +
From 648e9cd26c564241820f907cbddd58fb7235552b Mon Sep 17 00:00:00 2001 From: agriyadev5 Date: Mon, 20 Sep 2021 20:21:18 +0530 Subject: [PATCH 09/19] #631 list item label removed --- src/editor/panels/BottomPanel.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/editor/panels/BottomPanel.js b/src/editor/panels/BottomPanel.js index 79c9c6b7..b5b0915d 100644 --- a/src/editor/panels/BottomPanel.js +++ b/src/editor/panels/BottomPanel.js @@ -186,11 +186,11 @@ class BottomPanel { - — - ... - - - - - . - - .. + + + + + From 4bacd1fd664d0a4a6293759d4514a728ac0cf717 Mon Sep 17 00:00:00 2001 From: agriyadev5 Date: Tue, 21 Sep 2021 13:25:07 +0530 Subject: [PATCH 10/19] #631 seButton web component image path load from config --- src/editor/components/seButton.js | 21 ++- .../extensions/ext-connector/ext-connector.js | 1 + .../ext-eyedropper/ext-eyedropper.js | 1 + src/editor/extensions/ext-grid/ext-grid.js | 1 + .../extensions/ext-panning/ext-panning.js | 1 + .../extensions/ext-polystar/ext-polystar.js | 2 + src/editor/panels/LayersPanel.js | 39 ++--- src/editor/panels/LeftPanel.js | 8 +- src/editor/panels/TopPanel.js | 137 +++++------------- 9 files changed, 77 insertions(+), 134 deletions(-) diff --git a/src/editor/components/seButton.js b/src/editor/components/seButton.js index d86adf20..4195bbbe 100644 --- a/src/editor/components/seButton.js +++ b/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) { diff --git a/src/editor/extensions/ext-connector/ext-connector.js b/src/editor/extensions/ext-connector/ext-connector.js index ad8fabfb..86131c31 100644 --- a/src/editor/extensions/ext-connector/ext-connector.js +++ b/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 { diff --git a/src/editor/extensions/ext-eyedropper/ext-eyedropper.js b/src/editor/extensions/ext-eyedropper/ext-eyedropper.js index c81b9073..dc94e4e1 100644 --- a/src/editor/extensions/ext-eyedropper/ext-eyedropper.js +++ b/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, diff --git a/src/editor/extensions/ext-grid/ext-grid.js b/src/editor/extensions/ext-grid/ext-grid.js index 5154272b..c135bbe5 100644 --- a/src/editor/extensions/ext-grid/ext-grid.js +++ b/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(); } diff --git a/src/editor/extensions/ext-panning/ext-panning.js b/src/editor/extensions/ext-panning/ext-panning.js index aa9a4555..c9708112 100644 --- a/src/editor/extensions/ext-panning/ext-panning.js +++ b/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') { diff --git a/src/editor/extensions/ext-polystar/ext-polystar.js b/src/editor/extensions/ext-polystar/ext-polystar.js index 32364b7c..45908dc5 100644 --- a/src/editor/extensions/ext-polystar/ext-polystar.js +++ b/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`; diff --git a/src/editor/panels/LayersPanel.js b/src/editor/panels/LayersPanel.js index 0c329142..326b58d7 100644 --- a/src/editor/panels/LayersPanel.js +++ b/src/editor/panels/LayersPanel.js @@ -89,31 +89,20 @@ class LayersPanel { menuLayerBox.setAttribute("leftclick", false); this.editor.$container.append(menuLayerBox); menuLayerBox.init(i18next); - document - .getElementById("layer_new") - .addEventListener("click", this.newLayer.bind(this)); - document - .getElementById("layer_delete") - .addEventListener("click", this.deleteLayer.bind(this)); - document - .getElementById("layer_up") - .addEventListener("click", () => this.moveLayer.bind(this)(-1)); - document - .getElementById("layer_down") - .addEventListener("click", () => this.moveLayer.bind(this)(1)); - document - .getElementById("layer_rename") - .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() - ); + $id("layer_new").addEventListener("click", this.newLayer.bind(this)); + $id("layer_delete").addEventListener("click", this.deleteLayer.bind(this)); + $id("layer_up").addEventListener("click", () => this.moveLayer.bind(this)(-1)); + $id("layer_down").addEventListener("click", () => this.moveLayer.bind(this)(1)); + $id("layer_rename").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()); + $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) { diff --git a/src/editor/panels/LeftPanel.js b/src/editor/panels/LeftPanel.js index 2ab85eff..48ff115e 100644 --- a/src/editor/panels/LeftPanel.js +++ b/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( - "click", - this.clickFHEllipse.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" ].forEach((attrId) => + $id(attrId).init(this.editor) ); } } diff --git a/src/editor/panels/TopPanel.js b/src/editor/panels/TopPanel.js index c67af4c4..d5d0aa08 100644 --- a/src/editor/panels/TopPanel.js +++ b/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( - "click", - this.showSourceEditor.bind(this) - ); - $id("tool_wireframe").addEventListener( - "click", - this.clickWireframe.bind(this) - ); + $id("tool_source").addEventListener("click", 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( - "click", - this.clickClone.bind(this) - ); - $id("tool_delete").addEventListener( - "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_clone_multi").addEventListener("click", this.clickClone.bind(this)); + $id("tool_delete").addEventListener("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( - "click", - this.makeHyperlink.bind(this) - ); - $id("tool_make_link_multi").addEventListener( - "click", - 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_position").addEventListener("change", (evt) => - 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("tool_make_link").addEventListener("click", this.makeHyperlink.bind(this)); + $id("tool_make_link_multi").addEventListener("click", 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_position").addEventListener("change", (evt) => 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", () => - this.clickTextAnchor.bind(this)("start") + $id("tool_text_anchor_start").addEventListener("click", () => 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 [ From 57bf5df3b774c3f6e9169ff589014f6a5222b99a Mon Sep 17 00:00:00 2001 From: agriyadev5 Date: Tue, 21 Sep 2021 14:06:21 +0530 Subject: [PATCH 11/19] #631 selistitem image path load from editor changes --- src/editor/components/seListItem.js | 20 +++++++++++++++++--- src/editor/panels/BottomPanel.js | 4 ++++ src/editor/panels/TopPanel.js | 2 +- 3 files changed, 22 insertions(+), 4 deletions(-) diff --git a/src/editor/components/seListItem.js b/src/editor/components/seListItem.js index 7ad6e5de..20d32eff 100644 --- a/src/editor/components/seListItem.js +++ b/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;'); - this.$img.setAttribute('src', './images/' + newValue); + if(this.editor !== null) { + 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)); diff --git a/src/editor/panels/BottomPanel.js b/src/editor/panels/BottomPanel.js index b5b0915d..9fad023f 100644 --- a/src/editor/panels/BottomPanel.js +++ b/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} diff --git a/src/editor/panels/TopPanel.js b/src/editor/panels/TopPanel.js index d5d0aa08..8f8e882b 100644 --- a/src/editor/panels/TopPanel.js +++ b/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) ); From f5cf062f2156e509d61af41fdecfafd7e4f9941f Mon Sep 17 00:00:00 2001 From: agriyadev5 Date: Tue, 21 Sep 2021 15:32:18 +0530 Subject: [PATCH 12/19] #631 editor variable init changes --- src/editor/components/seListItem.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/editor/components/seListItem.js b/src/editor/components/seListItem.js index 20d32eff..0208ebc5 100644 --- a/src/editor/components/seListItem.js +++ b/src/editor/components/seListItem.js @@ -34,6 +34,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; } /** * @function init From 2f75dcb3e3de9717994e090207a21438add0a42d Mon Sep 17 00:00:00 2001 From: agriyadev5 Date: Tue, 21 Sep 2021 15:50:08 +0530 Subject: [PATCH 13/19] #631 main menu image path update changes --- src/editor/MainMenu.js | 4 +++- src/editor/components/seMenuItem.js | 21 ++++++++++++++++--- .../extensions/ext-imagelib/ext-imagelib.js | 1 + .../extensions/ext-opensave/ext-opensave.js | 3 +++ 4 files changed, 25 insertions(+), 4 deletions(-) diff --git a/src/editor/MainMenu.js b/src/editor/MainMenu.js index 6d4891bb..0b680f5f 100644 --- a/src/editor/MainMenu.js +++ b/src/editor/MainMenu.js @@ -293,7 +293,9 @@ class MainMenu { /** * 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) => + $id(attrId).init(this.editor) + ); $id("tool_import").addEventListener("click", () => { this.clickImport(); window.dispatchEvent(new CustomEvent("importImages")); diff --git a/src/editor/components/seMenuItem.js b/src/editor/components/seMenuItem.js index 3ab19d2c..7297bdf9 100644 --- a/src/editor/components/seMenuItem.js +++ b/src/editor/components/seMenuItem.js @@ -29,6 +29,18 @@ 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; + } + /** + * @function init + * @param {any} name + * @returns {void} + */ + init (editor) { + this.editor = editor; + if (this.hasAttribute("src")) { + this.setAttribute('src', this.getAttribute("src")); + } } /** * @function observedAttributes @@ -46,11 +58,14 @@ export class SeMenuItem extends HTMLElement { */ attributeChangedCallback (name, oldValue, newValue) { let shortcut = ''; - if (oldValue === newValue) return; + if (oldValue === newValue && name !== 'src') return; switch (name) { case 'src': - this.$img.setAttribute('src', './images/'+newValue); - this.$img.style.display = 'inline-block'; + if(this.editor !== null) { + const { imgPath } = this.editor.configObj.curConfig; + this.$img.style.display = 'inline-block'; + this.$img.setAttribute('src', imgPath + '/' + newValue); + } break; case 'label': shortcut = this.getAttribute('shortcut'); diff --git a/src/editor/extensions/ext-imagelib/ext-imagelib.js b/src/editor/extensions/ext-imagelib/ext-imagelib.js index e9cc44f3..9b64956b 100644 --- a/src/editor/extensions/ext-imagelib/ext-imagelib.js +++ b/src/editor/extensions/ext-imagelib/ext-imagelib.js @@ -530,6 +530,7 @@ export default { $id('tool_imagelib').addEventListener("click", () => { showBrowser(); }); + $id('tool_imagelib').init(svgEditor); const style = document.createElement('style'); style.textContent = '#imgbrowse_holder {' + diff --git a/src/editor/extensions/ext-opensave/ext-opensave.js b/src/editor/extensions/ext-opensave/ext-opensave.js index d042d56a..904f4066 100644 --- a/src/editor/extensions/ext-opensave/ext-opensave.js +++ b/src/editor/extensions/ext-opensave/ext-opensave.js @@ -174,6 +174,9 @@ 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) + ); } }; } From 36ff98c499edb7c770244110592918224a319373 Mon Sep 17 00:00:00 2001 From: agriyadev5 Date: Tue, 21 Sep 2021 16:05:26 +0530 Subject: [PATCH 14/19] #631 color picker image path changes --- src/editor/components/seColorPicker.js | 14 +++++++++++--- src/editor/panels/BottomPanel.js | 7 +++---- 2 files changed, 14 insertions(+), 7 deletions(-) diff --git a/src/editor/components/seColorPicker.js b/src/editor/components/seColorPicker.js index 85a32670..3f35c21e 100644 --- a/src/editor/components/seColorPicker.js +++ b/src/editor/components/seColorPicker.js @@ -666,15 +666,20 @@ 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; } /** * @function init * @param {any} name * @returns {void} */ - init (i18next) { + init (i18next, editor) { 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 @@ -691,10 +696,13 @@ export class SeColorPicker extends HTMLElement { * @returns {void} */ attributeChangedCallback (name, oldValue, newValue) { - if (oldValue === newValue) return; + if (oldValue === newValue && name !== 'src') return; switch (name) { case 'src': - this.$logo.setAttribute('src', './images/' + newValue); + if(this.editor !== null) { + const { imgPath } = this.editor.configObj.curConfig; + this.$logo.setAttribute('src', imgPath + '/' + newValue); + } break; case 'label': this.setAttribute('title', t(newValue)); diff --git a/src/editor/panels/BottomPanel.js b/src/editor/panels/BottomPanel.js index 3627680b..d44ad638 100644 --- a/src/editor/panels/BottomPanel.js +++ b/src/editor/panels/BottomPanel.js @@ -182,8 +182,7 @@ class BottomPanel {
${i18next.t('tools.fit_to_all')}
- - + 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); - $id('stroke_color').init(i18next); + $id('fill_color').init(i18next, this.editor); + $id('stroke_color').init(i18next, 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) From 5ed960cb1a8799009e87517d9b7be056d59a53ca Mon Sep 17 00:00:00 2001 From: agriyadev5 Date: Tue, 21 Sep 2021 17:41:06 +0530 Subject: [PATCH 15/19] #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) ); } From 542d1775c332e2fd76f8d73374aab26d31468ccc Mon Sep 17 00:00:00 2001 From: agriyadev5 Date: Tue, 21 Sep 2021 18:13:38 +0530 Subject: [PATCH 16/19] #631 zoom web componenet image path modified --- src/editor/components/seZoom.js | 18 ++++++++++++++++-- src/editor/panels/BottomPanel.js | 7 ++++--- 2 files changed, 20 insertions(+), 5 deletions(-) diff --git a/src/editor/components/seZoom.js b/src/editor/components/seZoom.js index c875374b..267bb8d6 100644 --- a/src/editor/components/seZoom.js +++ b/src/editor/components/seZoom.js @@ -59,6 +59,17 @@ 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 @@ -74,13 +85,16 @@ class Zoom extends ListComboBox { * @returns {void} */ attributeChangedCallback (name, oldValue, newValue) { - if (oldValue === newValue) return; + if (oldValue === newValue && name !== "src") return; switch (name) { case 'title': // this.$span.setAttribute('title', `${newValue} ${shortcut ? `[${shortcut}]` : ''}`); break; case 'src': - this.src = './images/' + newValue; + if (this.editor !== null && this.editor !== undefined) { + const { imgPath } = this.editor.configObj.curConfig; + this.src = imgPath + '/' + newValue; + } break; case 'inputsize': this.inputsize = newValue; diff --git a/src/editor/panels/BottomPanel.js b/src/editor/panels/BottomPanel.js index d44ad638..941cc275 100644 --- a/src/editor/panels/BottomPanel.js +++ b/src/editor/panels/BottomPanel.js @@ -218,10 +218,11 @@ class BottomPanel { $id('opacity').addEventListener('change', this.handleOpacity.bind(this)); $id('fill_color').init(i18next, this.editor); $id('stroke_color').init(i18next, this.editor); + $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) - ); + [ "linejoin_miter", "linejoin_round", "linejoin_bevel", "linecap_butt", "linecap_square", "linecap_round" ].forEach((attrId) => { + $id(attrId).init(this.editor); + }); } /** * @type {module} From 8df8efedf035b60dac44c641b9824c31436cd7c3 Mon Sep 17 00:00:00 2001 From: agriyadev5 Date: Tue, 21 Sep 2021 19:44:33 +0530 Subject: [PATCH 17/19] #631 context menu display issue fixed --- src/editor/dialogs/cmenuLayersDialog.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/editor/dialogs/cmenuLayersDialog.js b/src/editor/dialogs/cmenuLayersDialog.js index 95c02782..b50d6d9c 100644 --- a/src/editor/dialogs/cmenuLayersDialog.js +++ b/src/editor/dialogs/cmenuLayersDialog.js @@ -182,7 +182,7 @@ export class SeCMenuLayerDialog extends HTMLElement { const onMenuOpenHandler = (e) => { e.preventDefault(); current.$dialog.style.top = e.pageY + 'px'; - current.$dialog.style.left = e.pageX + 'px'; + current.$dialog.style.left = e.pageX - 126 + 'px'; current.$dialog.style.display = 'block'; }; const onMenuCloseHandler = (e) => { From b958009e164a80855cc8a3d080c8187a7b2e7a9c Mon Sep 17 00:00:00 2001 From: agriyadev5 Date: Wed, 22 Sep 2021 12:17:21 +0530 Subject: [PATCH 18/19] #631 globals svgEditor to get imgpath and set changes --- src/editor/MainMenu.js | 3 --- src/editor/components/seButton.js | 21 ++++----------- src/editor/components/seColorPicker.js | 16 ++++------- src/editor/components/seExplorerButton.js | 21 +++------------ src/editor/components/seFlyingButton.js | 18 +++---------- src/editor/components/seList.js | 4 ++- src/editor/components/seListItem.js | 23 ++++------------ src/editor/components/seMenu.js | 27 +++++-------------- src/editor/components/seMenuItem.js | 23 ++++------------ src/editor/components/seSpinInput.js | 4 ++- src/editor/components/seZoom.js | 16 +++-------- .../extensions/ext-connector/ext-connector.js | 1 - .../ext-eyedropper/ext-eyedropper.js | 1 - src/editor/extensions/ext-grid/ext-grid.js | 1 - .../extensions/ext-imagelib/ext-imagelib.js | 1 - .../extensions/ext-opensave/ext-opensave.js | 3 --- .../extensions/ext-panning/ext-panning.js | 1 - .../extensions/ext-polystar/ext-polystar.js | 4 --- .../extensions/ext-shapes/ext-shapes.js | 1 - src/editor/panels/BottomPanel.js | 9 ++----- src/editor/panels/LayersPanel.js | 6 ----- src/editor/panels/LeftPanel.js | 5 ---- src/editor/panels/TopPanel.js | 5 ---- 23 files changed, 46 insertions(+), 168 deletions(-) diff --git a/src/editor/MainMenu.js b/src/editor/MainMenu.js index d1317059..336c06e5 100644 --- a/src/editor/MainMenu.js +++ b/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")); diff --git a/src/editor/components/seButton.js b/src/editor/components/seButton.js index 21b1951a..72d5f1f5 100644 --- a/src/editor/components/seButton.js +++ b/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; - } - /** - * @function init - * @param {any} name - * @returns {void} - */ - init (editor) { - this.editor = editor; - if (this.hasAttribute("src")) { - this.setAttribute('src', this.getAttribute("src")); - } + this.imgPath = svgEditor.configObj.curConfig.imgPath; } /** * @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) { - const { imgPath } = this.editor.configObj.curConfig; - this.$img.setAttribute('src', imgPath + "/" + newValue); + } else { + this.$img.setAttribute('src', this.imgPath + "/" + newValue); } break; case 'pressed': diff --git a/src/editor/components/seColorPicker.js b/src/editor/components/seColorPicker.js index 3f35c21e..5c88d8e4 100644 --- a/src/editor/components/seColorPicker.js +++ b/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) { - const { imgPath } = this.editor.configObj.curConfig; - this.$logo.setAttribute('src', imgPath + '/' + newValue); - } + this.$logo.setAttribute('src', this.imgPath + '/' + newValue); break; case 'label': this.setAttribute('title', t(newValue)); diff --git a/src/editor/components/seExplorerButton.js b/src/editor/components/seExplorerButton.js index 18abf2f8..8434f94e 100644 --- a/src/editor/components/seExplorerButton.js +++ b/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; - } - /** - * @function init - * @param {any} name - * @returns {void} - */ - init (editor) { - this.editor = editor; - if (this.hasAttribute("src")) { - this.setAttribute('src', this.getAttribute("src")); - } + this.imgPath = svgEditor.configObj.curConfig.imgPath; } /** * @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) { - const { imgPath } = this.editor.configObj.curConfig; - this.$img.setAttribute('src', imgPath + '/' + newValue); - } + this.$img.setAttribute('src', this.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 4e38c9cc..6de46c88 100644 --- a/src/editor/components/seFlyingButton.js +++ b/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; - } - /** - * @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')); + this.imgPath = svgEditor.configObj.curConfig.imgPath; } /** * @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 diff --git a/src/editor/components/seList.js b/src/editor/components/seList.js index d6b6ba48..db63e9a2 100644 --- a/src/editor/components/seList.js +++ b/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); diff --git a/src/editor/components/seListItem.js b/src/editor/components/seListItem.js index 0208ebc5..3ab0763c 100644 --- a/src/editor/components/seListItem.js +++ b/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; - } - /** - * @function init - * @param {any} name - * @returns {void} - */ - init (editor) { - this.editor = editor; - if (this.hasAttribute("src")) { - this.setAttribute('src', this.getAttribute("src")); - } + this.imgPath = svgEditor.configObj.curConfig.imgPath; } /** * @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) { - const { imgPath } = this.editor.configObj.curConfig; - this.$img.setAttribute('style', 'display: block;'); - this.$img.setAttribute('src', imgPath + '/' + newValue); - } + this.$img.setAttribute('style', 'display: block;'); + this.$img.setAttribute('src', this.imgPath + '/' + newValue); break; case 'title': this.$img.setAttribute('title', t(newValue)); diff --git a/src/editor/components/seMenu.js b/src/editor/components/seMenu.js index 8c5af28c..3c1fe7dc 100644 --- a/src/editor/components/seMenu.js +++ b/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; - } - /** - * @function init - * @param {any} name - * @returns {void} - */ - init (editor) { - this.editor = editor; - if (this.hasAttribute("src")) { - this.setAttribute('src', this.getAttribute("src")); - } + this.imgPath = svgEditor.configObj.curConfig.imgPath; } /** * @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) { - const { imgPath } = this.editor.configObj.curConfig; - image.src = imgPath + '/' + newValue; - image.width = 24; - image.height = 24; - this.$label.prepend(image); - } + image.src = this.imgPath + '/' + newValue; + image.width = 24; + image.height = 24; + this.$label.prepend(image); break; case 'label': this.$label.prepend(newValue); diff --git a/src/editor/components/seMenuItem.js b/src/editor/components/seMenuItem.js index 7297bdf9..cfdcd9b6 100644 --- a/src/editor/components/seMenuItem.js +++ b/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; - } - /** - * @function init - * @param {any} name - * @returns {void} - */ - init (editor) { - this.editor = editor; - if (this.hasAttribute("src")) { - this.setAttribute('src', this.getAttribute("src")); - } + this.imgPath = svgEditor.configObj.curConfig.imgPath; } /** * @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) { - const { imgPath } = this.editor.configObj.curConfig; - this.$img.style.display = 'inline-block'; - this.$img.setAttribute('src', imgPath + '/' + newValue); - } + this.$img.style.display = 'inline-block'; + this.$img.setAttribute('src', this.imgPath + '/' + newValue); break; case 'label': shortcut = this.getAttribute('shortcut'); diff --git a/src/editor/components/seSpinInput.js b/src/editor/components/seSpinInput.js index fb6a2502..107b0046 100644 --- a/src/editor/components/seSpinInput.js +++ b/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; diff --git a/src/editor/components/seZoom.js b/src/editor/components/seZoom.js index 267bb8d6..49006e42 100644 --- a/src/editor/components/seZoom.js +++ b/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; diff --git a/src/editor/extensions/ext-connector/ext-connector.js b/src/editor/extensions/ext-connector/ext-connector.js index 86131c31..ad8fabfb 100644 --- a/src/editor/extensions/ext-connector/ext-connector.js +++ b/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 { diff --git a/src/editor/extensions/ext-eyedropper/ext-eyedropper.js b/src/editor/extensions/ext-eyedropper/ext-eyedropper.js index dc94e4e1..c81b9073 100644 --- a/src/editor/extensions/ext-eyedropper/ext-eyedropper.js +++ b/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, diff --git a/src/editor/extensions/ext-grid/ext-grid.js b/src/editor/extensions/ext-grid/ext-grid.js index c135bbe5..5154272b 100644 --- a/src/editor/extensions/ext-grid/ext-grid.js +++ b/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(); } diff --git a/src/editor/extensions/ext-imagelib/ext-imagelib.js b/src/editor/extensions/ext-imagelib/ext-imagelib.js index 9b64956b..e9cc44f3 100644 --- a/src/editor/extensions/ext-imagelib/ext-imagelib.js +++ b/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 {' + diff --git a/src/editor/extensions/ext-opensave/ext-opensave.js b/src/editor/extensions/ext-opensave/ext-opensave.js index 904f4066..d042d56a 100644 --- a/src/editor/extensions/ext-opensave/ext-opensave.js +++ b/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) - ); } }; } diff --git a/src/editor/extensions/ext-panning/ext-panning.js b/src/editor/extensions/ext-panning/ext-panning.js index c9708112..aa9a4555 100644 --- a/src/editor/extensions/ext-panning/ext-panning.js +++ b/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') { diff --git a/src/editor/extensions/ext-polystar/ext-polystar.js b/src/editor/extensions/ext-polystar/ext-polystar.js index 39a5e1e0..b93f909e 100644 --- a/src/editor/extensions/ext-polystar/ext-polystar.js +++ b/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`; diff --git a/src/editor/extensions/ext-shapes/ext-shapes.js b/src/editor/extensions/ext-shapes/ext-shapes.js index d335f32a..5153264c 100644 --- a/src/editor/extensions/ext-shapes/ext-shapes.js +++ b/src/editor/extensions/ext-shapes/ext-shapes.js @@ -54,7 +54,6 @@ export default { canv.setMode(modeId); } }); - $id('tool_shapelib').init(svgEditor); } }, mouseDown (opts) { diff --git a/src/editor/panels/BottomPanel.js b/src/editor/panels/BottomPanel.js index 941cc275..d6b63844 100644 --- a/src/editor/panels/BottomPanel.js +++ b/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('stroke_color').init(i18next, this.editor); - $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); - }); + $id('fill_color').init(i18next); + $id('stroke_color').init(i18next); } /** * @type {module} diff --git a/src/editor/panels/LayersPanel.js b/src/editor/panels/LayersPanel.js index 6365dba3..c12a2edf 100644 --- a/src/editor/panels/LayersPanel.js +++ b/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) { diff --git a/src/editor/panels/LeftPanel.js b/src/editor/panels/LeftPanel.js index 8a6cb8bb..6e311771 100644 --- a/src/editor/panels/LeftPanel.js +++ b/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) - ); } } diff --git a/src/editor/panels/TopPanel.js b/src/editor/panels/TopPanel.js index ae55d50e..788b88c3 100644 --- a/src/editor/panels/TopPanel.js +++ b/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", From e7373064faca07cb9b337194c581dfe1991cc532 Mon Sep 17 00:00:00 2001 From: agriyadev5 Date: Wed, 22 Sep 2021 18:17:15 +0530 Subject: [PATCH 19/19] =?UTF-8?q?#631=20
=20${i18next.t(=E2=80=98tools?= =?UTF-8?q?.fit=5Fto=5Flayer=5Fcontent=E2=80=99)}=20
=20would=20becom?= =?UTF-8?q?e=20?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/editor/components/index.js | 3 +- src/editor/components/seText.js | 97 ++++++++++++++++++++++++++++++++ src/editor/panels/BottomPanel.js | 20 +++---- 3 files changed, 109 insertions(+), 11 deletions(-) create mode 100644 src/editor/components/seText.js diff --git a/src/editor/components/index.js b/src/editor/components/index.js index e59f23c2..01644416 100644 --- a/src/editor/components/index.js +++ b/src/editor/components/index.js @@ -10,5 +10,6 @@ import './seMenuItem.js'; import './seList.js'; import './seListItem.js'; import './seColorPicker.js'; -import './seSelect'; +import './seSelect.js'; +import './seText.js'; diff --git a/src/editor/components/seText.js b/src/editor/components/seText.js new file mode 100644 index 00000000..179a4763 --- /dev/null +++ b/src/editor/components/seText.js @@ -0,0 +1,97 @@ +import { t } from '../locale.js'; +const template = document.createElement('template'); +// eslint-disable-next-line no-unsanitized/property +template.innerHTML = ` + +
+`; +/** + * @class SeText + */ +export class SeText extends HTMLElement { + /** + * @function constructor + */ + constructor () { + super(); + // create the shadowDom and insert the template + this._shadowRoot = this.attachShadow({ mode: 'open' }); + this._shadowRoot.append(template.content.cloneNode(true)); + // locate the component + this.$div = this._shadowRoot.querySelector('div'); + } + /** + * @function observedAttributes + * @returns {any} observed + */ + static get observedAttributes () { + return [ 'text', 'value', 'style' ]; + } + /** + * @function attributeChangedCallback + * @param {string} name + * @param {string} oldValue + * @param {string} newValue + * @returns {void} + */ + attributeChangedCallback (name, oldValue, newValue) { + if (oldValue === newValue) return; + switch (name) { + case 'text': + this.$div.setAttribute('title', t(newValue)); + break; + case 'style': + this.$div.style = newValue; + break; + case 'value': + this.$div.value = newValue; + break; + default: + // eslint-disable-next-line no-console + console.error(`unknown attribute: ${name}`); + break; + } + } + /** + * @function get + * @returns {any} + */ + get text () { + return this.getAttribute('text'); + } + + /** + * @function set + * @returns {void} + */ + set text (value) { + this.setAttribute('text', value); + } + /** + * @function get + * @returns {any} + */ + get value () { + return this.value; + } + + /** + * @function set + * @returns {void} + */ + set value (value) { + this.value = value; + } + + /** + * @function connectedCallback + * @returns {void} + */ + connectedCallback () { + // capture shortcuts + } +} + +// Register +customElements.define('se-text', SeText); diff --git a/src/editor/panels/BottomPanel.js b/src/editor/panels/BottomPanel.js index d6b63844..07790e55 100644 --- a/src/editor/panels/BottomPanel.js +++ b/src/editor/panels/BottomPanel.js @@ -170,16 +170,16 @@ class BottomPanel {
-
1000
-
400
-
200
-
100
-
50
-
25
-
${i18next.t('tools.fit_to_canvas')}
-
${i18next.t('tools.fit_to_sel')}
-
${i18next.t('tools.fit_to_layer_content')}
-
${i18next.t('tools.fit_to_all')}
+ + + + + + + + + " +