#cmenu_canvas cmenu_layers convert as separate web component

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}

src/editor/dialogs/cmenuLayersDialog.js

@@ -0,0 +1,193 @@
+const template = document.createElement('template');
+template.innerHTML = `
+  <style>
+  .contextMenu {
+    position: absolute;
+    z-index: 99999;
+    border: solid 1px rgba(0,0,0,.33);
+    background: rgba(255,255,255,.95);
+    padding: 5px 0;
+    margin: 0px;
+    display: none;
+    font: 12px/15px Lucida Sans, Helvetica, Verdana, sans-serif;
+    border-radius: 5px;
+    -moz-border-radius: 5px;
+    -moz-box-shadow: 2px 5px 10px rgba(0,0,0,.3);
+    -webkit-box-shadow: 2px 5px 10px rgba(0,0,0,.3);
+    box-shadow: 2px 5px 10px rgba(0,0,0,.3);
+  }
+  
+  .contextMenu li {
+    list-style: none;
+    padding: 0px;
+    margin: 0px;
+  }
+  
+  .contextMenu .shortcut {
+    width: 115px;
+    text-align:right;
+    float:right;
+  }
+  
+  .contextMenu a {
+    -moz-user-select: none;
+    -webkit-user-select: none;
+    color: #222;
+    text-decoration: none;
+    display: block;
+    line-height: 20px;
+    height: 20px;
+    background-position: 6px center;
+    background-repeat: no-repeat;
+    outline: none;
+    padding: 0px 15px 1px 20px;
+  }
+  
+  .contextMenu li.hover a {
+    background-color: #2e5dea;
+    color: white;
+    cursor: default;
+  }
+  
+  .contextMenu li.disabled a {
+    color: #999;
+  }
+  
+  .contextMenu li.hover.disabled a {
+    background-color: transparent;
+  }
+  
+  .contextMenu li.separator {
+    border-top: solid 1px #E3E3E3;
+    padding-top: 5px;
+    margin-top: 5px;
+  }  
+  </style>
+  <ul id="cmenu_layers" class="contextMenu">
+    <li><a href="#dupe" id="se-dupe">Duplicate Layer...</a></li>
+    <li><a href="#delete" id="se-layer-delete">Delete Layer</a></li>
+    <li><a href="#merge_down" id="se-merge-down">Merge Down</a></li>
+    <li><a href="#merge_all" id="se-merge-all">Merge All</a></li>
+  </ul>
+`;
+/**
+ * @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);

src/editor/dialogs/index.js

@@ -2,3 +2,4 @@ import './imagePropertiesDialog.js';
 import './editorPreferencesDialog.js';
 import './svgSourceDialog.js';
 import './cmenuDialog.js';
+import './cmenuLayersDialog.js';

src/editor/index.html

@@ -420,13 +420,6 @@
         <div id="dialog_buttons"></div>
       </div>
     </div>
-    <ul id="cmenu_layers" class="contextMenu">
-      <li><a href="#dupe">Duplicate Layer...</a></li>
-      <li><a href="#delete">Delete Layer</a></li>
-      <li><a href="#merge_down">Merge Down</a></li>
-      <li><a href="#merge_all">Merge All</a></li>
-    </ul>
-
   </div>
 </body>
 

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