From c7d816155ccac31a639deb6f0cde5a4733160d77 Mon Sep 17 00:00:00 2001
From: jfh <dev@optimistik.fr>
Date: Sun, 25 Oct 2020 20:00:12 +0100
Subject: [PATCH] move layout buttons to web components

---
 src/editor/components/seButton.js    | 39 +++++++++++++++++++---
 src/editor/images/context_menu.svg   |  9 +++++
 src/editor/images/go_down.svg        |  9 +++++
 src/editor/images/go_up.svg          |  9 +++++
 src/editor/images/new.svg            | 10 ++++++
 src/editor/images/svg_edit_icons.svg | 49 ----------------------------
 src/editor/index.html                | 16 ++++-----
 src/editor/svgedit.css               | 31 ++----------------
 src/editor/svgedit.js                | 49 +++++++++-------------------
 9 files changed, 98 insertions(+), 123 deletions(-)
 create mode 100644 src/editor/images/context_menu.svg
 create mode 100644 src/editor/images/go_down.svg
 create mode 100644 src/editor/images/go_up.svg
 create mode 100644 src/editor/images/new.svg

diff --git a/src/editor/components/seButton.js b/src/editor/components/seButton.js
index 7f73214f..abcbcea1 100644
--- a/src/editor/components/seButton.js
+++ b/src/editor/components/seButton.js
@@ -19,11 +19,17 @@ template.innerHTML = `
     cursor: pointer;
     border-radius: 3px;
   }
+  .small {
+    width: 14px;
+    height: 14px;
+    padding: 1px;
+    border-radius: 1px;
+  }
   img {
     border: none;
-    width: 24px;
-    height: 24px;
     overflow: none;
+    width: 100%;
+    height: 100%;
   }
   .pressed {
     background-color: #F4E284 !important;
@@ -35,7 +41,7 @@ template.innerHTML = `
   }
   </style>
   <div title="title">
-    <img class="svg_icon" src="./images/logo.svg" alt="icon">
+    <img src="./images/logo.svg" alt="icon">
   </div>
 `;
 /**
@@ -59,7 +65,7 @@ export class ToolButton extends HTMLElement {
    * @returns {any} observed
    */
   static get observedAttributes () {
-    return ['title', 'src', 'pressed', 'disabled'];
+    return ['title', 'src', 'pressed', 'disabled', 'size'];
   }
   /**
    * @function attributeChangedCallback
@@ -74,7 +80,7 @@ export class ToolButton extends HTMLElement {
     case 'title':
       {
         const shortcut = this.getAttribute('shortcut');
-        this.$div.setAttribute('title', `${newValue} [${shortcut}]`);
+        this.$div.setAttribute('title', `${newValue} ${shortcut ? `[${shortcut}]` : ''}`);
       }
       break;
     case 'src':
@@ -87,6 +93,13 @@ export class ToolButton extends HTMLElement {
         this.$div.classList.remove('pressed');
       }
       break;
+    case 'size':
+      if (newValue === 'small') {
+        this.$div.classList.add('small');
+      } else {
+        this.$div.classList.remove('small');
+      }
+      break;
     case 'disabled':
       if (newValue) {
         this.$div.classList.add('disabled');
@@ -171,6 +184,22 @@ export class ToolButton extends HTMLElement {
     this.setAttribute('src', value);
   }
 
+  /**
+   * @function get
+   * @returns {any}
+   */
+  get size () {
+    return this.getAttribute('size');
+  }
+
+  /**
+   * @function set
+   * @returns {void}
+   */
+  set size (value) {
+    this.setAttribute('size', value);
+  }
+
   /**
    * @function connectedCallback
    * @returns {void}
diff --git a/src/editor/images/context_menu.svg b/src/editor/images/context_menu.svg
new file mode 100644
index 00000000..4bc94a31
--- /dev/null
+++ b/src/editor/images/context_menu.svg
@@ -0,0 +1,9 @@
+<svg width="120" height="120" xmlns="http://www.w3.org/2000/svg">
+    <path stroke-width="0" id="svg_11" d="m4.5,46.5l52,0l-26,38l-26,-38z" stroke="#000" fill="#000"/>
+    <g id="svg_16">
+     <line stroke-width="10" id="svg_12" y2="27.5" x2="117.5" y1="27.5" x1="59.5" stroke="#000" fill="#000"/>
+     <line id="svg_13" stroke-width="10" y2="51.5" x2="117.5" y1="51.5" x1="59.5" stroke="#000" fill="#000"/>
+     <line id="svg_14" stroke-width="10" y2="73.5" x2="117.5" y1="73.5" x1="59.5" stroke="#000" fill="#000"/>
+     <line id="svg_15" stroke-width="10" y2="97.5" x2="117.5" y1="97.5" x1="59.5" stroke="#000" fill="#000"/>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/editor/images/go_down.svg b/src/editor/images/go_down.svg
new file mode 100644
index 00000000..504a2d46
--- /dev/null
+++ b/src/editor/images/go_down.svg
@@ -0,0 +1,9 @@
+<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
+ <defs>
+  <linearGradient y2="0" x2="0.7" y1="0" x1="0" id="svg_75">
+   <stop stop-opacity="1" stop-color="#afe853" offset="0"/>
+   <stop stop-opacity="1" stop-color="#52a310" offset="1"/>
+  </linearGradient>
+ </defs>
+  <path stroke="#008000" fill="url(#svg_75)" id="svg_33" d="m5.3015,1.69202l6.93483,0l0,5.07323l4.07045,0l-7.53786,9.84803l-7.53786,-9.84803l4.07045,0l0,-5.07323z"/>
+ </svg>
\ No newline at end of file
diff --git a/src/editor/images/go_up.svg b/src/editor/images/go_up.svg
new file mode 100644
index 00000000..b8cbbf9f
--- /dev/null
+++ b/src/editor/images/go_up.svg
@@ -0,0 +1,9 @@
+<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
+   <defs>
+    <linearGradient y2="0" x2="0.7" y1="0" x1="0" id="svg_74">
+     <stop stop-opacity="1" stop-color="#afe853" offset="0"/>
+     <stop stop-opacity="1" stop-color="#52a310" offset="1"/>
+    </linearGradient>
+   </defs>
+    <path stroke="#008000" fill="url(#svg_74)" id="svg_33" d="m5.38492,16.77043l7.07692,0l0,-5.23077l4.15385,0l-7.69231,-10.15385l-7.69231,10.15385l4.15385,0l0,5.23077z"/>
+</svg>
\ No newline at end of file
diff --git a/src/editor/images/new.svg b/src/editor/images/new.svg
new file mode 100644
index 00000000..e4e250e8
--- /dev/null
+++ b/src/editor/images/new.svg
@@ -0,0 +1,10 @@
+<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <rect x="2.42792" y="1.6692" width="18" height="21" id="svg_55" fill="#eaeaea" stroke="#606060"/>
+  <circle stroke="none" fill="url(#svg_9)" id="svg_65" r="6.300781" cy="7.529969" cx="17.761984"/>
+ <defs>
+  <radialGradient id="svg_9" cx="0.5" cy="0.5" r="0.5">
+   <stop offset="0.1" stop-color="#ffe500" stop-opacity="1"/>
+   <stop offset="1" stop-color="#ffff00" stop-opacity="0"/>
+  </radialGradient>
+ </defs>
+</svg>
\ No newline at end of file
diff --git a/src/editor/images/svg_edit_icons.svg b/src/editor/images/svg_edit_icons.svg
index ffae5896..79194ec9 100644
--- a/src/editor/images/svg_edit_icons.svg
+++ b/src/editor/images/svg_edit_icons.svg
@@ -257,19 +257,6 @@
  </svg>
 </g>
 
-<g id="new_image">
-<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-  <rect x="2.42792" y="1.6692" width="18" height="21" id="svg_55" fill="#eaeaea" stroke="#606060"/>
-  <circle stroke="none" fill="url(#svg_9)" id="svg_65" r="6.300781" cy="7.529969" cx="17.761984"/>
- <defs>
-  <radialGradient id="svg_9" cx="0.5" cy="0.5" r="0.5">
-   <stop offset="0.1" stop-color="#ffe500" stop-opacity="1"/>
-   <stop offset="1" stop-color="#ffff00" stop-opacity="0"/>
-  </radialGradient>
- </defs>
-</svg>
-</g>
-
 <g id="save">
   <svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <defs>
@@ -360,42 +347,6 @@
   </svg>
 </g>
 
-<g id="go_up">
-  <svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
-   <defs>
-    <linearGradient y2="0" x2="0.7" y1="0" x1="0" id="svg_74">
-     <stop stop-opacity="1" stop-color="#afe853" offset="0"/>
-     <stop stop-opacity="1" stop-color="#52a310" offset="1"/>
-    </linearGradient>
-   </defs>
-    <path stroke="#008000" fill="url(#svg_74)" id="svg_33" d="m5.38492,16.77043l7.07692,0l0,-5.23077l4.15385,0l-7.69231,-10.15385l-7.69231,10.15385l4.15385,0l0,5.23077z"/>
-  </svg>
-</g>
-
-<g id="go_down">
-<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
- <defs>
-  <linearGradient y2="0" x2="0.7" y1="0" x1="0" id="svg_75">
-   <stop stop-opacity="1" stop-color="#afe853" offset="0"/>
-   <stop stop-opacity="1" stop-color="#52a310" offset="1"/>
-  </linearGradient>
- </defs>
-  <path stroke="#008000" fill="url(#svg_75)" id="svg_33" d="m5.3015,1.69202l6.93483,0l0,5.07323l4.07045,0l-7.53786,9.84803l-7.53786,-9.84803l4.07045,0l0,-5.07323z"/>
- </svg>
-</g>
-
-<g id="context_menu">
-  <svg width="120" height="120" xmlns="http://www.w3.org/2000/svg">
-    <path stroke-width="0" id="svg_11" d="m4.5,46.5l52,0l-26,38l-26,-38z" stroke="#000" fill="#000"/>
-    <g id="svg_16">
-     <line stroke-width="10" id="svg_12" y2="27.5" x2="117.5" y1="27.5" x1="59.5" stroke="#000" fill="#000"/>
-     <line id="svg_13" stroke-width="10" y2="51.5" x2="117.5" y1="51.5" x1="59.5" stroke="#000" fill="#000"/>
-     <line id="svg_14" stroke-width="10" y2="73.5" x2="117.5" y1="73.5" x1="59.5" stroke="#000" fill="#000"/>
-     <line id="svg_15" stroke-width="10" y2="97.5" x2="117.5" y1="97.5" x1="59.5" stroke="#000" fill="#000"/>
-    </g>
-  </svg>
-</g>
-
 <g id="link_controls">
 <svg viewBox="0 0 24 24" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
   <path stroke-width="2" id="svg_102" d="m9.875,23c-2,-4.25 -1.6875,-7.375 1.6875,-10.5c3.375,-3.125 7.5625,-2.75 11.0625,2" stroke="#8dd35f" fill="none"/>
diff --git a/src/editor/index.html b/src/editor/index.html
index c72d604d..c106cf8b 100644
--- a/src/editor/index.html
+++ b/src/editor/index.html
@@ -52,12 +52,12 @@
         <div id="layerpanel">
           <h3 id="layersLabel">Layers</h3>
           <fieldset id="layerbuttons">
-            <div id="layer_new" class="layer_button" title="New Layer"></div>
-            <div id="layer_delete" class="layer_button" title="Delete Layer"></div>
-            <div id="layer_rename" class="layer_button" title="Rename Layer"></div>
-            <div id="layer_up" class="layer_button" title="Move Layer Up"></div>
-            <div id="layer_down" class="layer_button" title="Move Layer Down"></div>
-            <div id="layer_moreopts" class="layer_button" title="More Options"></div>
+            <se-button id="layer_new" title="New Layer" size="small" src="./images/new.svg"></se-button>
+            <se-button id="layer_delete" title="Delete Layer" size="small" src="./images/delete.svg"></se-button>
+            <se-button id="layer_rename" title="Rename Layer" size="small" src="./images/text.svg"></se-button>
+            <se-button id="layer_up" title="Move Layer Up" size="small" src="./images/go_up.svg"></se-button>
+            <se-button id="layer_down" title="Move Layer Down" size="small" src="./images/go_down.svg"></se-button>
+            <se-button id="layer_moreopts" title="More Options" size="small" src="./images/context_menu.svg"></se-button>
           </fieldset>
           <table id="layerlist">
             <tr class="layer">
@@ -140,7 +140,7 @@
             <se-button id="tool_move_bottom" title="Send to Back" shortcut="Ctrl+Shift+[" src="./images/move_bottom.png"></se-button>
             <se-button id="tool_topath" title="Convert to Path" src="./images/to_path.svg"></se-button>
             <se-button id="tool_reorient" title="Reorient path" src="./images/reorient.svg"></se-button>
-            <se-button id="tool_make_link" title="Make (hyper)link" src="./images/make_link.svg"></se-button>
+            <se-button id="tool_make_link" title="Make (hyper)link" src="./images/globe_link.png"></se-button>
             <div class="tool_sep"></div>
             <label id="idLabel" title="Identify the element">
               <span>id:</span>
@@ -189,7 +189,7 @@
           <se-button id="tool_delete_multi" title="Delete Selected Elements" shortcut="Delete/Backspace" src="./images/delete.svg"></se-button>
           <div class="tool_sep"></div>
           <se-button id="tool_group_elements" title="Group Elements" shortcut="G" src="./images/group_elements.svg"></se-button>
-          <se-button id="tool_make_link_multi" title="Make (hyper)link" src="./images/make_link.svg"></se-button>
+          <se-button id="tool_make_link_multi" title="Make (hyper)link" src="./images/globe_link.png"></se-button>
           <se-button id="tool_align_left" title="Align Left" src="./images/align_left.svg"></se-button>
           <se-button id="tool_align_center" title="Align Center" src="./images/align_center.svg"></se-button>
           <se-button id="tool_align_right" title="Align Right" src="./images/align_right.svg"></se-button>
diff --git a/src/editor/svgedit.css b/src/editor/svgedit.css
index d47c06b4..3cfa229e 100644
--- a/src/editor/svgedit.css
+++ b/src/editor/svgedit.css
@@ -243,34 +243,9 @@ select {
   border-left: 1px solid #808080;
   border-top: 1px solid #808080;
   overflow: hidden;
-}
-
-.layer_button {
-  width: 14px;
-  height: 14px;
-  padding: 1px;
-  border-left: 1px solid #FFFFFF;
-  border-top: 1px solid #FFFFFF;
-  border-right: 1px solid #808080;
-  border-bottom: 1px solid #808080;
-  cursor: pointer;
-  float: left;
-  margin-right: 3px;
-}
-
-.layer_button:last-child {
-  margin-right: 0;
-}
-
-.layer_buttonpressed {
-  width: 14px;
-  height: 14px;
-  padding: 1px;
-  border-right: 1px solid #FFFFFF;
-  border-bottom: 1px solid #FFFFFF;
-  border-left: 1px solid #808080;
-  border-top: 1px solid #808080;
-  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;  
 }
 
 #layerlist {
diff --git a/src/editor/svgedit.js b/src/editor/svgedit.js
index 8fab4eb1..7bd27b79 100644
--- a/src/editor/svgedit.js
+++ b/src/editor/svgedit.js
@@ -1062,7 +1062,7 @@ editor.init = () => {
       placement: {
         '#logo': 'logo',
 
-        '#tool_clear div,#layer_new': 'new_image',
+        '#tool_clear div': 'new_image',
         '#tool_save div': 'save',
         '#tool_export div': 'export',
         '#tool_open div': 'open',
@@ -1078,12 +1078,10 @@ editor.init = () => {
         '#tool_ellipse,#tools_ellipse_show': 'ellipse',
         '#tool_circle': 'circle',
         '#tool_fhellipse': 'fh_ellipse',
-        '#layer_rename': 'text',
         '#tool_image': 'image',
         '#tool_zoom': 'zoom',
 
         '#tool_node_clone': 'node_clone',
-        '#layer_delete': 'delete',
         '#tool_node_delete': 'node_delete',
         '#tool_add_subpath': 'add_subpath',
         '#tool_openclose_path': 'open_path',
@@ -1110,10 +1108,6 @@ editor.init = () => {
         '#linejoin_bevel': 'linejoin_bevel',
 
         '#url_notice': 'warning',
-
-        '#layer_up': 'go_up',
-        '#layer_down': 'go_down',
-        '#layer_moreopts': 'context_menu',
         '#layerlist td.layervis': 'eye',
 
         '#tool_source_save,#tool_docprops_save,#tool_prefs_save': 'ok',
@@ -1138,7 +1132,7 @@ editor.init = () => {
       resize: {
         '#logo .svg_icon': 28,
         '.flyout_arrow_horiz .svg_icon': 5,
-        '.layer_button .svg_icon, #layerlist td.layervis .svg_icon': 14,
+        '.svg_icon, #layerlist td.layervis .svg_icon': 14,
         '.dropdown button .svg_icon': 7,
         '#main_button .dropdown .svg_icon': 9,
         '.palette_item:first .svg_icon': 15,
@@ -4928,14 +4922,6 @@ editor.init = () => {
     $(window).mouseup();
   });
 
-  $('.layer_button').mousedown(function () {
-    $(this).addClass('layer_buttonpressed');
-  }).mouseout(function () {
-    $(this).removeClass('layer_buttonpressed');
-  }).mouseup(function () {
-    $(this).removeClass('layer_buttonpressed');
-  });
-
   $('.push_button').mousedown(function () {
     if (!$(this).hasClass('disabled')) {
       $(this).addClass('push_button_pressed').removeClass('push_button');
@@ -4947,7 +4933,7 @@ editor.init = () => {
   });
 
   // ask for a layer name
-  $('#layer_new').click(async function () {
+  const newLayer = async () => {
     let uniqName,
       i = svgCanvas.getCurrentDrawing().getNumLayers();
     do {
@@ -4963,7 +4949,7 @@ editor.init = () => {
     svgCanvas.createLayer(newName);
     updateContextPanel();
     populateLayers();
-  });
+  };
 
   /**
    *
@@ -5016,7 +5002,7 @@ editor.init = () => {
    * @param {Integer} pos
    * @returns {void}
    */
-  function moveLayer (pos) {
+  const moveLayer = (pos) => {
     const total = svgCanvas.getCurrentDrawing().getNumLayers();
 
     let curIndex = $('#layerlist tr.layersel').index();
@@ -5025,19 +5011,9 @@ editor.init = () => {
       svgCanvas.setCurrentLayerPosition(total - curIndex - 1);
       populateLayers();
     }
-  }
+  };
 
-  $('#layer_delete').click(deleteLayer);
-
-  $('#layer_up').click(() => {
-    moveLayer(-1);
-  });
-
-  $('#layer_down').click(() => {
-    moveLayer(1);
-  });
-
-  $('#layer_rename').click(async function () {
+  const layerRename = async () => {
     // const curIndex = $('#layerlist tr.layersel').prevAll().length; // Currently unused
     const oldName = $('#layerlist tr.layersel td.layername').text();
     const newName = await $.prompt(uiStrings.notification.enterNewLayerName, '');
@@ -5049,7 +5025,7 @@ editor.init = () => {
 
     svgCanvas.renameCurrentLayer(newName);
     populateLayers();
-  });
+  };
 
   const SIDEPANEL_MAXWIDTH = 300;
   const SIDEPANEL_OPENWIDTH = 150;
@@ -5268,7 +5244,7 @@ editor.init = () => {
     $id('tool_align_bottom').addEventListener('click', () => clickAlign('bottom'));
     $id('tool_align_middle').addEventListener('click', () => clickAlign('middle'));
 
-    // left panel
+    // register actions for left panel
     $id('tool_select').addEventListener('click', clickSelect);
     $id('tool_fhpath').addEventListener('click', clickFHPath);
     $id('tool_text').addEventListener('click', clickText);
@@ -5277,6 +5253,13 @@ editor.init = () => {
     $id('tool_path').addEventListener('click', clickPath);
     // $id('tool_').addEventListener('click', clickP);
 
+    // register actions for layer toolbar
+    $id('layer_new').addEventListener('click', newLayer);
+    $id('layer_delete').addEventListener('click', deleteLayer);
+    $id('layer_up').addEventListener('click', () => moveLayer(-1));
+    $id('layer_down').addEventListener('click', () => moveLayer(1));
+    $id('layer_rename').addEventListener('click', layerRename);
+
     const toolButtons = [
       {sel: '#tool_line', fn: clickLine, evt: 'click', key: ['L', true],
         parent: '#tools_line', prepend: true},