add disabled attribute for undo/redo button

src/editor/components/ToolButton.js

@@ -4,7 +4,7 @@
 const template = document.createElement('template');
 template.innerHTML = `
   <style>
-  :host :hover
+  :host :hover :not(.disabled)
   {
     background-color: #ffc;
   }
@@ -29,6 +29,10 @@ template.innerHTML = `
     background-color: #F4E284 !important;
     box-shadow: inset 1px 1px 2px rgba(0,0,0,0.4), 1px 1px  0 white  !important;
   }
+  .disabled {
+    opacity: 0.3;
+    cursor: default;
+  }
   </style>
   <div title="title">
     <img class="svg_icon" src="./images/logo.svg" alt="icon">
@@ -55,7 +59,7 @@ export class ToolButton extends HTMLElement {
    * @returns {any} observed
    */
   static get observedAttributes () {
-    return ['title', 'src', 'pressed'];
+    return ['title', 'src', 'pressed', 'disabled'];
   }
   /**
    * @function attributeChangedCallback
@@ -83,6 +87,13 @@ export class ToolButton extends HTMLElement {
         this.$div.classList.remove('pressed');
       }
       break;
+    case 'disabled':
+      if (newValue) {
+        this.$div.classList.add('disabled');
+      } else {
+        this.$div.classList.remove('disabled');
+      }
+      break;
     default:
       // eslint-disable-next-line no-console
       console.error(`unknown attribute: ${name}`);
@@ -124,6 +135,26 @@ export class ToolButton extends HTMLElement {
       this.removeAttribute('pressed', '');
     }
   }
+  /**
+   * @function get
+   * @returns {any}
+   */
+  get disabled () {
+    return this.hasAttribute('disabled');
+  }
+
+  /**
+   * @function set
+   * @returns {void}
+   */
+  set disabled (value) {
+    // boolean value => existence = true
+    if (value) {
+      this.setAttribute('disabled', 'true');
+    } else {
+      this.removeAttribute('disabled', '');
+    }
+  }
   /**
    * @function get
    * @returns {any}
@@ -145,6 +176,7 @@ export class ToolButton extends HTMLElement {
    * @returns {void}
    */
   connectedCallback () {
+    // capture shortcuts
     const shortcut = this.getAttribute('shortcut');
     if (shortcut) {
       // register the keydown event

src/editor/images/redo.svg

@@ -0,0 +1,9 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <defs>
+  <linearGradient y2="1" x2="1" y1="0" x1="1" id="svg_71">
+   <stop stop-opacity="1" stop-color="#98fc46" offset="0"/>
+   <stop stop-opacity="1" stop-color="#56aa25" offset="1"/>
+  </linearGradient>
+ </defs>
+  <path transform="rotate(-90, 12.7299, 11.5526)" d="m9.11294,12.43144l6.54089,6.84566l6.6439,-6.95624l-3.78628,-0.03064l0,-2.61259c-0.04248,-2.62946 -2.75924,-5.5951 -7.79561,-5.77807c-5.17464,0 -7.10734,3.60294 -7.47697,7.11967c0.61604,-1.60771 3.14238,-3.63109 5.36009,-3.53053c2.71053,-0.10056 4.40555,0.59221 4.40555,2.40076l0,2.54198l-3.89159,0z" id="svg_45" fill="url(#svg_71)" stroke="#44aa00"/>
+</svg>

src/editor/images/svg_edit_icons.svg

@@ -442,30 +442,6 @@
   </svg>
 </g>
 
-<g id="undo">
-<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
- <defs>
-  <linearGradient id="svg_66" x1="0.04297" y1="0.00391" x2="0.21484" y2="0.875">
-   <stop offset="0" stop-color="#f7f963" stop-opacity="1"/>
-   <stop offset="1" stop-color="#d3c310" stop-opacity="1"/>
-  </linearGradient>
- </defs>
-  <path transform="rotate(-90, 10.3017, 11.5526)" d="m6.70188,10.72562l6.55493,-7.13388l6.65817,7.24912l-3.79441,0.03193l0,2.72259c-0.04257,2.74017 -2.76516,5.83068 -7.81235,6.02135c-5.18575,0 -7.1226,-3.75464 -7.49302,-7.41944c0.61736,1.6754 3.14913,3.78397 5.3716,3.67918c2.71635,0.1048 4.41501,-0.61714 4.41501,-2.50184l0,-2.64901l-3.89995,0z" id="svg_45" fill="url(#svg_66)" stroke="#b7a800"/>
- </svg>
-</g>
-
-<g id="redo">
-<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
- <defs>
-  <linearGradient y2="1" x2="1" y1="0" x1="1" id="svg_71">
-   <stop stop-opacity="1" stop-color="#98fc46" offset="0"/>
-   <stop stop-opacity="1" stop-color="#56aa25" offset="1"/>
-  </linearGradient>
- </defs>
-  <path transform="rotate(-90, 12.7299, 11.5526)" d="m9.11294,12.43144l6.54089,6.84566l6.6439,-6.95624l-3.78628,-0.03064l0,-2.61259c-0.04248,-2.62946 -2.75924,-5.5951 -7.79561,-5.77807c-5.17464,0 -7.10734,3.60294 -7.47697,7.11967c0.61604,-1.60771 3.14238,-3.63109 5.36009,-3.53053c2.71053,-0.10056 4.40555,0.59221 4.40555,2.40076l0,2.54198l-3.89159,0z" id="svg_45" fill="url(#svg_71)" stroke="#44aa00"/>
- </svg>
-</g>
-
 <g id="clone">
 <svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
  <defs>

src/editor/images/undo.svg

@@ -0,0 +1,9 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <defs>
+  <linearGradient id="svg_66" x1="0.04297" y1="0.00391" x2="0.21484" y2="0.875">
+   <stop offset="0" stop-color="#f7f963" stop-opacity="1"/>
+   <stop offset="1" stop-color="#d3c310" stop-opacity="1"/>
+  </linearGradient>
+ </defs>
+  <path transform="rotate(-90, 10.3017, 11.5526)" d="m6.70188,10.72562l6.55493,-7.13388l6.65817,7.24912l-3.79441,0.03193l0,2.72259c-0.04257,2.74017 -2.76516,5.83068 -7.81235,6.02135c-5.18575,0 -7.1226,-3.75464 -7.49302,-7.41944c0.61736,1.6754 3.14913,3.78397 5.3716,3.67918c2.71635,0.1048 4.41501,-0.61714 4.41501,-2.50184l0,-2.64901l-3.89995,0z" id="svg_45" fill="url(#svg_66)" stroke="#b7a800"/>
+</svg>

src/editor/index.html

@@ -126,8 +126,8 @@
         <!-- History buttons -->
         <div id="history_panel">
           <div class="tool_sep"></div>
-          <div class="push_button tool_button_disabled" id="tool_undo" title="Undo [Z]"></div>
+          <tool-button id="tool_undo" title="Undo" shortcut="Z" src="./images/undo.svg" disabled></tool-button>
-          <div class="push_button tool_button_disabled" id="tool_redo" title="Redo [Y]"></div>
+          <tool-button id="tool_redo" title="Redo" shortcut="Y" src="./images/redo.svg" disabled></tool-button>
         </div>
         <!-- Buttons when a single element is selected -->
         <div id="selected_panel">

src/editor/svgedit.js

@@ -1060,9 +1060,6 @@ editor.init = () => {
         import: 'import.png',
         docprops: 'document-properties.png',
 
-        undo: 'undo.png',
-        redo: 'redo.png',
-
         clone: 'clone.png',
         delete: 'delete.png',
         go_up: 'go-up.png',
@@ -1123,9 +1120,6 @@ editor.init = () => {
         '#tool_editor_prefs > div': 'config',
         '#tool_editor_homepage > div': 'globe_link',
 
-        '#tool_undo': 'undo',
-        '#tool_redo': 'redo',
-
         '#tool_select': 'select',
         '#tool_fhpath': 'pencil',
         '#tool_line': 'pen',
@@ -2277,8 +2271,8 @@ editor.init = () => {
     }
 
     // update history buttons
-    $('#tool_undo').toggleClass('disabled', undoMgr.getUndoStackSize() === 0);
+    $id('tool_undo').disabled = (undoMgr.getUndoStackSize() === 0);
-    $('#tool_redo').toggleClass('disabled', undoMgr.getRedoStackSize() === 0);
+    $id('tool_redo').disabled = (undoMgr.getRedoStackSize() === 0);
 
     svgCanvas.addedNew = false;
 
@@ -4434,7 +4428,6 @@ editor.init = () => {
   * @returns {void}
   */
   const clickWireframe = function () {
-    console.log($id('tool_wireframe').pressed);
     $id('tool_wireframe').pressed = !$id('tool_wireframe').pressed;
     workarea.toggleClass('wireframe');
 
@@ -4769,12 +4762,6 @@ editor.init = () => {
     }).bind('mousedown mouseout', function () {
       $(this).removeClass(curClass);
     });
-
-    $('#tool_undo, #tool_redo').mousedown(function () {
-      if (!$(this).hasClass('disabled')) { $(this).addClass(curClass); }
-    }).bind('mousedown mouseout', function () {
-      $(this).removeClass(curClass);
-    });
   }());
 
   /**
@@ -5356,6 +5343,9 @@ editor.init = () => {
     // register action to buttons
     $id('tool_source').addEventListener('click', showSourceEditor);
     $id('tool_wireframe').addEventListener('click', clickWireframe);
+    $id('tool_undo').addEventListener('click', clickUndo);
+    $id('tool_redo').addEventListener('click', clickRedo);
+
     const toolButtons = [
       {sel: '#tool_select', fn: clickSelect, evt: 'click', key: ['V', true]},
       {sel: '#tool_fhpath', fn: clickFHPath, evt: 'click', key: ['Q', true]},
@@ -5388,8 +5378,6 @@ 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_wireframe', fn: clickWireframe, evt: 'click', key: ['F', true]},
       {
         key: ['esc', false, false],
         fn () {
@@ -5423,16 +5411,11 @@ editor.init = () => {
       {sel: '#tool_move_bottom', fn: moveToBottomSelected, evt: 'click', key: 'ctrl+shift+['},
       {sel: '#tool_topath', fn: convertToPath, evt: 'click'},
       {sel: '#tool_make_link,#tool_make_link_multi', fn: makeHyperlink, evt: 'click'},
-      {sel: '#tool_undo', fn: clickUndo, evt: 'click'},
-      {sel: '#tool_redo', fn: clickRedo, evt: 'click'},
       {sel: '#tool_clone,#tool_clone_multi', fn: clickClone, evt: 'click', key: ['D', true]},
       {sel: '#tool_group_elements', fn: clickGroup, evt: 'click', key: ['G', true]},
       {sel: '#tool_ungroup', fn: clickGroup, evt: 'click'},
       {sel: '#tool_unlink_use', fn: clickGroup, evt: 'click'},
       {sel: '[id^=tool_align]', fn: clickAlign, evt: 'click'},
-      // these two lines are required to make Opera work properly with the flyout mechanism
-      // {sel: '#tools_rect_show', fn: clickRect, evt: 'click'},
-      // {sel: '#tools_ellipse_show', fn: clickEllipse, evt: 'click'},
       {sel: '#tool_bold', fn: clickBold, evt: 'mousedown'},
       {sel: '#tool_italic', fn: clickItalic, evt: 'mousedown'},
       {sel: '#sidepanel_handle', fn: toggleSidePanel, key: ['X']},