From c280ba34f7f93a5a50c385dba21c7c7a3c0c9947 Mon Sep 17 00:00:00 2001 From: Agriya Dev5 Date: Thu, 24 Dec 2020 20:48:56 +0530 Subject: [PATCH] #cmenu_canvas cmenu_layers convert as separate web component --- src/editor/LayersPanel.js | 36 ----- src/editor/dialogs/cmenuLayersDialog.js | 193 ++++++++++++++++++++++++ src/editor/dialogs/index.js | 1 + src/editor/index.html | 7 - src/editor/svgedit.js | 38 ++++- 5 files changed, 231 insertions(+), 44 deletions(-) create mode 100644 src/editor/dialogs/cmenuLayersDialog.js diff --git a/src/editor/LayersPanel.js b/src/editor/LayersPanel.js index e82569bd..fb0e7a6b 100644 --- a/src/editor/LayersPanel.js +++ b/src/editor/LayersPanel.js @@ -23,42 +23,6 @@ class LayersPanel { 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)); - - const lmenuFunc = (action, el, pos) => { - switch (action) { - case 'dupe': - /* await */ this.cloneLayer(); - break; - case 'delete': - this.deleteLayer(); - break; - case 'merge_down': - this.mergeLayer(); - break; - case 'merge_all': - this.svgCanvas.mergeAllLayers(); - this.updateContextPanel(); - this.populateLayers(); - break; - } - }; - - $('#layer_moreopts').contextMenu( - { - menu: 'cmenu_layers', - inSpeed: 0, - allowLeft: true - }, - lmenuFunc - ); - - $('#layerlist').contextMenu( - { - menu: 'cmenu_layers', - inSpeed: 0 - }, - lmenuFunc - ); } /** * @returns {void} diff --git a/src/editor/dialogs/cmenuLayersDialog.js b/src/editor/dialogs/cmenuLayersDialog.js new file mode 100644 index 00000000..94707834 --- /dev/null +++ b/src/editor/dialogs/cmenuLayersDialog.js @@ -0,0 +1,193 @@ +const template = document.createElement('template'); +template.innerHTML = ` + + +`; +/** + * @class SeCMenuLayerDialog + */ +export class SeCMenuLayerDialog extends HTMLElement { + /** + * @function constructor + */ + constructor () { + super(); + // create the shadowDom and insert the template + this._shadowRoot = this.attachShadow({mode: 'open'}); + this._shadowRoot.appendChild(template.content.cloneNode(true)); + this.source = ''; + this._workarea = undefined; + this.$sidePanels = document.getElementById('sidepanels'); + this.$dialog = this._shadowRoot.querySelector('#cmenu_layers'); + this.$duplicateLink = this._shadowRoot.querySelector('#se-dupe'); + this.$deleteLink = this._shadowRoot.querySelector('#se-layer-delete'); + this.$mergeDownLink = this._shadowRoot.querySelector('#se-merge-down'); + this.$mergeAllLink = this._shadowRoot.querySelector('#se-merge-all'); + } + /** + * @function observedAttributes + * @returns {any} observed + */ + static get observedAttributes () { + return ['value', 'leftclick']; + } + /** + * @function attributeChangedCallback + * @param {string} name + * @param {string} oldValue + * @param {string} newValue + * @returns {void} + */ + attributeChangedCallback (name, oldValue, newValue) { + if (oldValue === newValue) return; + switch (name) { + case 'value': + this.source = newValue; + if (newValue !== '' && newValue !== undefined) { + this._workarea = document.getElementById(this.source); + } + break; + default: + super.attributeChangedCallback(name, oldValue, newValue); + break; + } + } + /** + * @function get + * @returns {any} + */ + get value () { + return this.getAttribute('value'); + } + + /** + * @function set + * @returns {void} + */ + set value (value) { + this.setAttribute('value', value); + } + /** + * @function get + * @returns {any} + */ + get leftclick () { + return this.getAttribute('leftclick'); + } + + /** + * @function set + * @returns {void} + */ + set leftclick (value) { + this.setAttribute('leftclick', value); + } + /** + * @function connectedCallback + * @returns {void} + */ + connectedCallback () { + const current = this; + const onMenuOpenHandler = (e) => { + e.preventDefault(); + current.$dialog.style.top = e.pageY + 'px'; + current.$dialog.style.left = e.pageX + 'px'; + current.$dialog.style.display = 'block'; + }; + const onMenuCloseHandler = (e) => { + if (e.button !== 2) { + current.$dialog.style.display = 'none'; + } + }; + const onMenuClickHandler = (e, action, id) => { + const triggerEvent = new CustomEvent('change', {detail: { + trigger: action, + source: id + }}); + this.dispatchEvent(triggerEvent); + current.$dialog.style.display = 'none'; + }; + if (this._workarea !== undefined) { + this._workarea.addEventListener('contextmenu', onMenuOpenHandler); + if (this.getAttribute('leftclick') === 'true') { + this._workarea.addEventListener('click', onMenuOpenHandler); + } + this._workarea.addEventListener('mousedown', onMenuCloseHandler); + this.$sidePanels.addEventListener('mousedown', onMenuCloseHandler); + } + this.$duplicateLink.addEventListener('click', (evt) => onMenuClickHandler(evt, 'dupe', this.source)); + this.$deleteLink.addEventListener('click', (evt) => onMenuClickHandler(evt, 'delete', this.source)); + this.$mergeDownLink.addEventListener('click', (evt) => onMenuClickHandler(evt, 'merge_down', this.source)); + this.$mergeAllLink.addEventListener('click', (evt) => onMenuClickHandler(evt, 'merge_all', this.source)); + } +} + +// Register +customElements.define('se-cmenu-layers', SeCMenuLayerDialog); diff --git a/src/editor/dialogs/index.js b/src/editor/dialogs/index.js index c2aa4348..faa5f538 100644 --- a/src/editor/dialogs/index.js +++ b/src/editor/dialogs/index.js @@ -2,3 +2,4 @@ import './imagePropertiesDialog.js'; import './editorPreferencesDialog.js'; import './svgSourceDialog.js'; import './cmenuDialog.js'; +import './cmenuLayersDialog.js'; diff --git a/src/editor/index.html b/src/editor/index.html index b03aceb5..050ec65d 100644 --- a/src/editor/index.html +++ b/src/editor/index.html @@ -420,13 +420,6 @@
- - diff --git a/src/editor/svgedit.js b/src/editor/svgedit.js index 8648d663..4663ac90 100644 --- a/src/editor/svgedit.js +++ b/src/editor/svgedit.js @@ -238,10 +238,21 @@ editor.init = () => { const newSeEditorDialog = document.createElement('se-svg-source-editor-dialog'); newSeEditorDialog.setAttribute('id', 'se-svg-editor-dialog'); document.body.append(newSeEditorDialog); - // dialog_box added to DOM + // canvas menu added to DOM const dialogBox = document.createElement('se-cmenu_canvas-dialog'); dialogBox.setAttribute('id', 'se-cmenu_canvas'); document.body.append(dialogBox); + // layer menu added to DOM + const menuMore = document.createElement('se-cmenu-layers'); + menuMore.setAttribute('id', 'se-cmenu-layers-more'); + menuMore.value = 'layer_moreopts'; + menuMore.setAttribute('leftclick', true); + document.body.append(menuMore); + const menuLayerBox = document.createElement('se-cmenu-layers'); + menuLayerBox.setAttribute('id', 'se-cmenu-layers-list'); + menuLayerBox.value = 'layerlist'; + menuLayerBox.setAttribute('leftclick', false); + document.body.append(menuLayerBox); } catch (err) {} configObj.load(); @@ -3289,6 +3300,25 @@ editor.init = () => { changeSidePanelWidth(deltaX); }; + const lmenuFunc = (action, el) => { + switch (action) { + case 'dupe': + /* await */ layersPanel.cloneLayer(); + break; + case 'delete': + layersPanel.deleteLayer(); + break; + case 'merge_down': + layersPanel.mergeLayer(); + break; + case 'merge_all': + layersPanel.svgCanvas.mergeAllLayers(); + layersPanel.updateContextPanel(); + layersPanel.populateLayers(); + break; + } + }; + /** * If width is non-zero, then fully close it; otherwise fully open it. * @param {boolean} close Forces the side panel closed @@ -3546,6 +3576,12 @@ editor.init = () => { break; } }); + $id('se-cmenu-layers-more').addEventListener('change', function (e) { + lmenuFunc(e?.detail?.trigger, e?.detail?.source); + }); + $id('se-cmenu-layers-list').addEventListener('change', function (e) { + lmenuFunc(e?.detail?.trigger, e?.detail?.source); + }); layersPanel.addEvents(); const toolButtons = [ // Shortcuts not associated with buttons