register the key event with the button

src/common/utilities.js

@@ -1358,5 +1358,6 @@ export const mock = ({
   getRotationAngle = getRotationAngleUser;
 };
 
+export const $id = (id) => document.getElementById(id);
 export const $q = (sel) => document.querySelector(sel);
 export const $qq = (sel) => [...document.querySelectorAll(sel)];

src/editor/components/ToolButton.js

@@ -1,3 +1,6 @@
+// import {isMac} from '../../common/browser.js';
+// if (isMac() && !window.opera) 'Ctrl+' 'Cmd+'
+
 const template = document.createElement('template');
 template.innerHTML = `
   <style>
@@ -5,7 +8,7 @@ template.innerHTML = `
   {
     background-color: #ffc;
   }
-  :host
+  div
   {
     height: 24px;
     width: 24px;
@@ -16,7 +19,7 @@ template.innerHTML = `
     cursor: pointer;
     border-radius: 3px;
   }
-  .svg_icon {
+  img {
     border: none;
     width: 24px;
     height: 24px;
@@ -61,7 +64,10 @@ export class ToolButton extends HTMLElement {
     if (oldValue === newValue) return;
     switch (name) {
     case 'title':
-      this.$div.setAttribute('title', newValue);
+      {
+        const shortcut = this.getAttribute('shortcut');
+        this.$div.setAttribute('title', `${newValue} [${shortcut}]`);
+      }
       break;
     case 'src':
       this.$img.setAttribute('src', newValue);
@@ -71,7 +77,6 @@ export class ToolButton extends HTMLElement {
       console.error(`unknown attribute: ${name}`);
       break;
     }
-    console.log(name, oldValue, newValue);
   }
   /**
    * @function get
@@ -103,6 +108,27 @@ export class ToolButton extends HTMLElement {
   set src (value) {
     this.setAttribute('src', value);
   }
+
+  /**
+   * @function connectedCallback
+   * @returns {void}
+   */
+  connectedCallback () {
+    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
+        this.click();
+        e.preventDefault();
+      });
+    }
+  }
 }
 
 // Register

src/editor/svgedit.js

@@ -46,7 +46,7 @@ import {
   setStrings
 } from './locale.js';
 
-const {$q} = Utils;
+const {$q, $id} = Utils;
 
 const editor = {};
 
@@ -4778,29 +4778,6 @@ editor.init = () => {
     });
   }());
 
-  // switch modifier key in tooltips if mac
-  // NOTE: This code is not used yet until I can figure out how to successfully bind ctrl/meta
-  // in Opera and Chrome
-  if (isMac() && !window.opera) {
-    const shortcutButtons = [
-      'tool_clear', 'tool_save', 'tool_source',
-      'tool_undo', 'tool_redo', 'tool_clone'
-    ];
-    let i = shortcutButtons.length;
-    while (i--) {
-      const button = document.getElementById(shortcutButtons[i]);
-      if (button) {
-        const {title} = button;
-        const index = title.indexOf('Ctrl+');
-        button.setAttribute('title', [
-          title.substr(0, index),
-          'Cmd+',
-          title.substr(index + 5)
-        ].join(''));
-      }
-    }
-  }
-
   /**
   * @param {external:jQuery} elem
   * @todo Go back to the color boxes having white background-color and then setting
@@ -5377,6 +5354,8 @@ editor.init = () => {
      * @name module:SVGEditor~ToolButtons
      * @type {module:SVGEditor.ToolButton[]}
      */
+    // register action to buttons
+    $id('tool_source').addEventListener('click', showSourceEditor);
     const toolButtons = [
       {sel: '#tool_select', fn: clickSelect, evt: 'click', key: ['V', true]},
       {sel: '#tool_fhpath', fn: clickFHPath, evt: 'click', key: ['Q', true]},
@@ -5409,7 +5388,7 @@ editor.init = () => {
       {sel: '#tool_export', fn: clickExport, evt: 'mouseup'},
       {sel: '#tool_open', fn: clickOpen, evt: 'mouseup', key: ['O', true]},
       {sel: '#tool_import', fn: clickImport, evt: 'mouseup'},
-      {sel: '#tool_source', fn: showSourceEditor, evt: 'click', key: ['U', true]},
+      // {sel: '#tool_source', fn: showSourceEditor, evt: 'click', key: ['U', true]},
       {sel: '#tool_wireframe', fn: clickWireframe, evt: 'click', key: ['F', true]},
       {
         key: ['esc', false, false],