addd boolean attribute to implement wireframe

src/editor/components/ToolButton.js

@@ -25,6 +25,10 @@ template.innerHTML = `
     height: 24px;
     overflow: none;
   }
+  .pressed {
+    background-color: #F4E284 !important;
+    box-shadow: inset 1px 1px 2px rgba(0,0,0,0.4), 1px 1px  0 white  !important;
+  }
   </style>
   <div title="title">
     <img class="svg_icon" src="./images/logo.svg" alt="icon">
@@ -51,7 +55,7 @@ export class ToolButton extends HTMLElement {
    * @returns {any} observed
    */
   static get observedAttributes () {
-    return ['title', 'src'];
+    return ['title', 'src', 'pressed'];
   }
   /**
    * @function attributeChangedCallback
@@ -72,6 +76,13 @@ export class ToolButton extends HTMLElement {
     case 'src':
       this.$img.setAttribute('src', newValue);
       break;
+    case 'pressed':
+      if (newValue) {
+        this.$div.classList.add('pressed');
+      } else {
+        this.$div.classList.remove('pressed');
+      }
+      break;
     default:
       // eslint-disable-next-line no-console
       console.error(`unknown attribute: ${name}`);
@@ -93,6 +104,26 @@ export class ToolButton extends HTMLElement {
   set title (value) {
     this.setAttribute('title', value);
   }
+  /**
+   * @function get
+   * @returns {any}
+   */
+  get pressed () {
+    return this.hasAttribute('pressed');
+  }
+
+  /**
+   * @function set
+   * @returns {void}
+   */
+  set pressed (value) {
+    // boolean value => existence = true
+    if (value) {
+      this.setAttribute('pressed', 'true');
+    } else {
+      this.removeAttribute('pressed', '');
+    }
+  }
   /**
    * @function get
    * @returns {any}

src/editor/images/svg_edit_icons.svg

@@ -442,25 +442,6 @@
   </svg>
 </g>
 
-<g id="source">
-<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 55 52">
-  <text xml:space="preserve" text-anchor="middle" font-family="monospace" font-size="24" stroke="none" fill="#019191" id="svg_40" y="15" x="28.23" font-weight="bold">s</text>
-  <text xml:space="preserve" text-anchor="middle" font-family="monospace" font-size="24" stroke="none" fill="#019191" id="svg_47" y="30" x="28.23" font-weight="bold">v</text>
-  <text xml:space="preserve" text-anchor="middle" font-family="monospace" font-size="24" stroke="none" fill="#019191" id="svg_48" y="44" x="28.23" font-weight="bold">g</text>
-  <line stroke-width="3" fill="none" stroke="#aa0000" id="svg_51" y2="43" x2="16" y1="25" x1="5"/>
-  <line id="svg_62" stroke-width="3" fill="none" stroke="#aa0000" y2="8" x2="16" y1="26" x1="5"/>
-  <line id="svg_63" stroke-width="3" fill="none" stroke="#aa0000" y2="43" x2="39" y1="25" x1="50"/>
-  <line id="svg_64" stroke-width="3" fill="none" stroke="#aa0000" y2="8" x2="39" y1="26" x1="51"/>
- </svg>
-</g>
-
-<g id="wireframe">
- <svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-  <circle stroke="#000000" fill="none" id="svg_49" r="8" cy="9.5" cx="9.5"/>
-  <rect stroke="#000000" fill="none" id="svg_52" height="14" width="14" y="8.5" x="8.5"/>
- </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>

src/editor/images/wireframe.svg

@@ -0,0 +1,4 @@
+<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <circle stroke="#000000" fill="none" id="svg_49" r="8" cy="9.5" cx="9.5"/>
+  <rect stroke="#000000" fill="none" id="svg_52" height="14" width="14" y="8.5" x="8.5"/>
+</svg>

src/editor/index.html

@@ -121,7 +121,7 @@
         <div id="editor_panel">
           <div class="tool_sep"></div>
           <tool-button id="tool_source" title="Edit Source" shortcut="U" src="./images/source.svg"></tool-button>
-          <div class="tool_button" id="tool_wireframe" title="Wireframe Mode [F]"></div>
+          <tool-button id="tool_wireframe" title="Wireframe Mode" shortcut="F" src="./images/wireframe.svg"></tool-button>
         </div>
         <!-- History buttons -->
         <div id="history_panel">

src/editor/locale/lang.en.js

@@ -116,7 +116,7 @@ export default {
     undo: 'Undo [Z]',
     redo: 'Redo [Y]',
     tool_source: 'Edit Source [U]',
-    wireframe_mode: 'Wireframe Mode [F]',
+    wireframe_mode: 'Wireframe Mode',
     clone: 'Duplicate Element(s) [D]',
     del: 'Delete Element(s) [Delete/Backspace]',
     group_elements: 'Group Elements [G]',

src/editor/svgedit.js

@@ -1059,7 +1059,6 @@ editor.init = () => {
         open: 'open.png',
         import: 'import.png',
         docprops: 'document-properties.png',
-        wireframe: 'wireframe.png',
 
         undo: 'undo.png',
         redo: 'redo.png',
@@ -1123,7 +1122,6 @@ editor.init = () => {
         '#tool_docprops > div': 'docprops',
         '#tool_editor_prefs > div': 'config',
         '#tool_editor_homepage > div': 'globe_link',
-        '#tool_wireframe': 'wireframe',
 
         '#tool_undo': 'undo',
         '#tool_redo': 'redo',
@@ -4436,7 +4434,8 @@ editor.init = () => {
   * @returns {void}
   */
   const clickWireframe = function () {
-    $('#tool_wireframe').toggleClass('push_button_pressed tool_button');
+    console.log($id('tool_wireframe').pressed);
+    $id('tool_wireframe').pressed = !$id('tool_wireframe').pressed;
     workarea.toggleClass('wireframe');
 
     if (supportsNonSS) { return; }
@@ -5356,6 +5355,7 @@ editor.init = () => {
      */
     // register action to buttons
     $id('tool_source').addEventListener('click', showSourceEditor);
+    $id('tool_wireframe').addEventListener('click', clickWireframe);
     const toolButtons = [
       {sel: '#tool_select', fn: clickSelect, evt: 'click', key: ['V', true]},
       {sel: '#tool_fhpath', fn: clickFHPath, evt: 'click', key: ['Q', true]},
@@ -5389,7 +5389,7 @@ editor.init = () => {
       {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]},
+      // {sel: '#tool_wireframe', fn: clickWireframe, evt: 'click', key: ['F', true]},
       {
         key: ['esc', false, false],
         fn () {
@@ -6150,19 +6150,6 @@ editor.loadFromString = function (str, {noAlert} = {}) {
   });
 };
 
-/**
-* Not presently in use.
-* @function module:SVGEditor.disableUI
-* @param {PlainObject} featList
-* @returns {void}
-*/
-editor.disableUI = function (featList) {
-  // $(function () {
-  //   $('#tool_wireframe, #tool_image, #main_button, #tool_source, #sidepanels').remove();
-  //   $('#tools_top').css('left', 5);
-  // });
-};
-
 /**
  * @callback module:SVGEditor.URLLoadCallback
  * @param {boolean} success