#cmenu_canvas cmenu_layers convert as separate web component

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';