#se-menu menu item click functionality handled

src/editor/components/seMenu.js

@@ -9,10 +9,12 @@ template.innerHTML = `
   :host {
     padding: 0px;
   }
+  elix-menu-button::part(menu) {
+    background-color: #eee !important;
+  }
   </style>
   
   <elix-menu-button id="sampleMenuButton" aria-label="Sample Menu">
-    welcome
     <slot></slot>
   </elix-menu-button>
   
@@ -41,9 +43,11 @@ export class SeMenu extends HTMLElement {
     console.log("connectedCallback");
     this.$menu.addEventListener('openedchange', (e) => {
       e.preventDefault();
-      console.log("came");
+      const selectedItem = e?.detail?.closeResult;
+      if (selectedItem !== undefined && selectedItem?.id !== undefined) {
+        document.getElementById(selectedItem.id).click();
+      }
     });
-    //this.dispatchEvent(this.$event);
   }
 }
 

src/editor/components/seMenuItem.js

@@ -6,9 +6,12 @@ const template = document.createElement('template');
 template.innerHTML = `
   <style>
   </style>  
-  
-  <elix-menu-item>New</elix-menu-item>
-  
+  <elix-menu-item>
+    <div>
+      <img src="" alt="icon" style="display:none;" /> 
+      <span></span>
+    </div>
+  </elix-menu-item>  
 `;
 /**
  * @class SeMenuItem
@@ -22,7 +25,95 @@ export class SeMenuItem extends HTMLElement {
     // create the shadowDom and insert the template
     this._shadowRoot = this.attachShadow({mode: 'open'});
     this._shadowRoot.appendChild(template.content.cloneNode(true));
-    // this.$menu = this._shadowRoot.querySelector('elix-menu');
+    this.$img = this._shadowRoot.querySelector('img');
+    this.$label = this._shadowRoot.querySelector('span');
+    this.$menuitem = this._shadowRoot.querySelector('elix-menu-item');
+  }
+  /**
+   * @function observedAttributes
+   * @returns {any} observed
+   */
+  static get observedAttributes () {
+    return ['label', 'src'];
+  }
+  /**
+   * @function attributeChangedCallback
+   * @param {string} name
+   * @param {string} oldValue
+   * @param {string} newValue
+   * @returns {void}
+   */
+  attributeChangedCallback (name, oldValue, newValue) {
+    if (oldValue === newValue) return;
+    switch (name) {
+    case 'src':
+      this.$img.setAttribute('src', newValue);
+      this.$img.style.display = 'block';
+      break;
+    case 'label':
+      const shortcut = this.getAttribute('shortcut');
+      this.$label.textContent = `${newValue} ${shortcut ? `(${shortcut})` : ''}`;
+      this.$img.remove();
+      break;
+    default:
+      // eslint-disable-next-line no-console
+      console.error(`unknown attribute: ${name}`);
+      break;
+    }
+  }
+  /**
+   * @function get
+   * @returns {any}
+   */
+  get label () {
+    return this.getAttribute('label');
+  }
+
+  /**
+   * @function set
+   * @returns {void}
+   */
+  set label (value) {
+    this.setAttribute('label', value);
+  }
+  /**
+   * @function get
+   * @returns {any}
+   */
+  get src () {
+    return this.getAttribute('src');
+  }
+
+  /**
+   * @function set
+   * @returns {void}
+   */
+  set src (value) {
+    this.setAttribute('src', value);
+  }
+
+  /**
+   * @function connectedCallback
+   * @returns {void}
+   */
+  connectedCallback () {
+    // capture shortcuts
+    const shortcut = this.getAttribute('shortcut');
+    if (shortcut) {
+      // register the keydown event
+      document.addEventListener('keydown', (e) => {
+        // only track keyboard shortcuts for the body containing the SVG-Editor
+        if (e.target.nodeName !== 'BODY') return;
+        // normalize key
+        const key = `${(e.metaKey) ? 'meta+' : ''}${(e.ctrlKey) ? 'ctrl+' : ''}${e.key.toUpperCase()}`;
+        if (shortcut !== key) return;
+        // launch the click event
+        if (this.id) {
+          document.getElementById(this.id).click();
+        }
+        e.preventDefault();
+      });
+    }
   }
 }
 

src/editor/index.html

@@ -125,11 +125,15 @@
           </ul>
         </div> <!-- main_menu -->
       </div> <!-- main_button -->
-      <se-menu>
-        <se-menu-item>new</se-menu-item>
-        <se-menu-item>new1</se-menu-item>
-        <se-menu-item>new2</se-menu-item>
-        <se-menu-item>new3</se-menu-item>
+      <se-menu id="mainmenu1">
+        <se-menu-item id="tool_clear" label="New Image" shortcut="N"></se-menu-item>
+        <se-menu-item id="tool_open" label="Open SVG"></se-menu-item>
+        <se-menu-item id="tool_import" label="Import Image"></se-menu-item>
+        <se-menu-item id="tool_save" label="Save Image" shortcut="S"></se-menu-item>
+        <se-menu-item id="tool_export" label="Export"></se-menu-item>
+        <se-menu-item id="tool_docprops" label="Document Properties" shortcut="D"></se-menu-item>
+        <se-menu-item id="tool_editor_prefs" label="Editor Preferences"></se-menu-item>
+        <se-menu-item id="tool_editor_homepage" label="SVG-Edit Home Page"></se-menu-item>
       </se-menu>
       <div id="tools_top">
         <div id="editor_panel">

src/editor/svgedit.css

@@ -281,6 +281,13 @@ hr {
   z-index: 5;
 }
 
+#mainmenu1 {
+  position: absolute;
+  top: 4px;
+  left: 355px;
+  z-index: 5;
+}
+
 #main_icon {
   position: relative;
   top: -2px;

src/editor/svgedit.js

@@ -4680,18 +4680,28 @@ editor.init = () => {
     $id('tool_italic').addEventListener('click', clickItalic);
     $id('palette').addEventListener('change', handlePalette);
 
-    const toolButtons = [
-      {sel: '#tool_clear', fn: clickClear, evt: 'mouseup', key: ['N', true]},
-      {sel: '#tool_save', fn () {
+    $id('tool_clear').addEventListener('click', clickClear);
+    $id('tool_open').addEventListener('click', function (e) {
+      clickOpen();
+      window.dispatchEvent(new CustomEvent('openImage'));
+    });
+    $id('tool_import').addEventListener('click', function (e) {
+      clickImport();
+      window.dispatchEvent(new CustomEvent('importImage'));
+    });
+    $id('tool_save').addEventListener('click', function (e) {
       if (editingsource) {
         saveSourceEditor();
       } else {
         clickSave();
       }
-      }, evt: 'mouseup', key: ['S', true]},
-      {sel: '#tool_export', fn: clickExport, evt: 'mouseup'},
-      {sel: '#tool_open', fn: clickOpen, evt: 'mouseup', key: ['O', true]},
-      {sel: '#tool_import', fn: clickImport, evt: 'mouseup'},
+    });
+    $id('tool_export').addEventListener('click', clickExport);
+    $id('tool_docprops').addEventListener('click', showDocProperties);
+    $id('tool_editor_prefs').addEventListener('click', showPreferences);
+    $id('tool_editor_homepage').addEventListener('click', openHomePage);
+
+    const toolButtons = [
       {
         key: ['esc', false, false],
         fn () {
@@ -4707,12 +4717,7 @@ editor.init = () => {
         key: ['esc', false, false], hidekey: true},
       {sel: '#tool_source_save', fn: saveSourceEditor, evt: 'click'},
       {sel: '#tool_docprops_save', fn: saveDocProperties, evt: 'click'},
-      {sel: '#tool_docprops', fn: showDocProperties, evt: 'click'},
       {sel: '#tool_prefs_save', fn: savePreferences, evt: 'click'},
-      {sel: '#tool_editor_prefs', fn: showPreferences, evt: 'click'},
-      {sel: '#tool_editor_homepage', fn: openHomePage, evt: 'click'},
-      {sel: '#tool_open', fn () { window.dispatchEvent(new CustomEvent('openImage')); }, evt: 'click'},
-      {sel: '#tool_import', fn () { window.dispatchEvent(new CustomEvent('importImage')); }, evt: 'click'},
       {sel: '#tool_node_link', fn: linkControlPoints, evt: 'click'},
       {sel: '#tool_ungroup', fn: clickGroup, evt: 'click'},
       {sel: '#tool_unlink_use', fn: clickGroup, evt: 'click'},