#path-node-panel-se-button node clone,delete, suppath button change to se-button

dist/editor/embedapi.js

@@ -102,7 +102,7 @@ function getMessageListener (t) {
 * - Have an iframe somewhere pointing to a version of svg-edit > r1000.
 * @example
 // Initialize the magic with:
-svgCanvas = new EmbeddedSVGEdit(window.frames.svgedit);
+const svgCanvas = new EmbeddedSVGEdit(window.frames.svgedit);
 
 // Pass functions in this format:
 svgCanvas.setSvgString('string');
@@ -130,7 +130,7 @@ svgCanvas.setSvgString('string')(function (data, error) {
 
 // The only other difference is when handling returns:
 // the callback notation is used instead.
-blah = new EmbeddedSVGEdit(window.frames.svgedit);
+const blah = new EmbeddedSVGEdit(window.frames.svgedit);
 blah.clearSelection('woot', 'blah', 1337, [1, 2, 3, 4, 5, 'moo'], -42, {
      a: 'tree', b: 6, c: 9
 })(function () { console.log('GET DATA', args); });

dist/editor/images/tool_add_subpath.svg

@@ -0,0 +1,16 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" xmlns:xlink="http://www.w3.org/1999/xlink" class="svg_icon"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 124 124">
+ <defs>
+  <linearGradient id="svg_4" x1="0.33594" y1="0.28125" x2="1" y2="1">
+   <stop offset="0" stop-color="#ffffff" stop-opacity="1"/>
+   <stop offset="1" stop-color="#33a533" stop-opacity="1"/>
+  </linearGradient>
+ </defs>
+ <g>
+  <path d="m6,103l55,-87c85,33.64 -26,37.12 55,87l-110,0z" id="svg_1" fill="url(#svg_4)" stroke="#000000" stroke-width="4" stroke-dasharray="null"/>
+  <g id="svg_7">
+   <circle stroke-dasharray="null" stroke-width="5" stroke="#000000" fill="#ffffff" id="svg_6" r="22.63281" cy="88.5" cx="45.5"/>
+   <line stroke-dasharray="null" stroke-width="7" stroke="#000000" id="svg_2" y2="104.03768" x2="45.5" y1="72.96232" x1="45.5"/>
+   <line stroke-dasharray="null" stroke-width="7" stroke="#000000" id="svg_3" y2="88.5" x2="61.03768" y1="88.5" x1="29.96232"/>
+  </g>
+ </g>
+ </svg></svg>

dist/editor/images/tool_node_clone.svg

@@ -0,0 +1,8 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" xmlns:xlink="http://www.w3.org/1999/xlink" class="svg_icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path stroke-width="2" id="svg_102" d="m4.1953,19.42128c15.49391,-15.53349 -0.21065,0.1581 15.61084,-15.57944" stroke="#8dd35f" fill="none"/>
+  <circle stroke-width="0.5" id="svg_121" stroke="#0000ff" fill="#00ffff" r="2.26172" cy="4" cx="19.75"/>
+  <circle id="svg_123" stroke-width="0.5" stroke="#0000ff" fill="#00ffff" r="2.26172" cy="19.40299" cx="4.0653"/>
+  <circle id="svg_7" stroke-width="0.5" stroke="#0000ff" fill="#00ffff" r="2.26172" cy="11.625" cx="11.9375"/>
+  <line stroke-linecap="round" id="svg_5" y2="14.46579" x2="9.66571" y1="4.02238" x1="9.7824" stroke-dasharray="null" stroke-width="2" stroke="#0000ff" fill="#0000ff"/>
+  <line stroke-linecap="round" id="svg_4" y2="9.45264" x2="15.14996" y1="9.3943" x1="4.47318" stroke-dasharray="null" stroke-width="2" stroke="#0000ff" fill="#0000ff"/>
+</svg></svg>

dist/editor/images/tool_node_delete.svg

@@ -0,0 +1,10 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" xmlns:xlink="http://www.w3.org/1999/xlink" class="svg_icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path stroke-width="2" id="svg_102" d="m4.1953,19.42128c15.49391,-15.53349 -0.21065,0.1581 15.61084,-15.57944" stroke="#8dd35f" fill="none"/>
+  <circle stroke-width="0.5" id="svg_121" stroke="#0000ff" fill="#00ffff" r="2.26172" cy="4" cx="19.75"/>
+  <circle id="svg_123" stroke-width="0.5" stroke="#0000ff" fill="#00ffff" r="2.26172" cy="19.40299" cx="4.0653"/>
+  <circle id="svg_7" stroke-width="0.5" stroke="#0000ff" fill="#00ffff" r="2.26172" cy="11.625" cx="11.9375"/>
+  <g transform="rotate(-45.291072845458984 9.81157112121582,9.244086265563965) " id="svg_6">
+   <line stroke-linecap="round" id="svg_4" y2="9.45264" x2="15.14996" y1="9.3943" x1="4.47318" stroke-dasharray="null" stroke-width="2" stroke="#ff0000" fill="none"/>
+   <line stroke-linecap="round" id="svg_5" y2="14.46579" x2="9.66571" y1="4.02238" x1="9.7824" stroke-dasharray="null" stroke-width="2" stroke="#ff0000" fill="none"/>
+  </g>
+</svg></svg>

dist/editor/images/tool_openclose_path.svg

@@ -0,0 +1,17 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" xmlns:xlink="http://www.w3.org/1999/xlink" class="svg_icon"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 300 300">
+ <g>
+  <path stroke="#000" stroke-width="15" fill="#ffc8c8" d="m123.5,38l-84,106l27,115l166,2l29,-111"/>
+  <line x1="276.5" y1="153" x2="108.5" y2="24" stroke="#000" stroke-width="10" fill="none"/>
+  <g stroke-width="15" stroke="#00f" fill="#0ff">
+   <circle r="30" cy="41" cx="123"/>
+   <circle r="30" cy="146" cx="40"/>
+   <circle r="30" cy="260" cx="69"/>
+   <circle r="30" cy="260" cx="228"/>
+   <circle r="30" cy="148" cx="260"/>
+  </g>
+  <g stroke="#A00" stroke-width="15" fill="none">
+   <line x1="168" y1="24" x2="210" y2="150"/>
+   <line x1="210" y1="24" x2="168" y2="150"/>
+  </g>
+ </g>
+</svg></svg>

dist/editor/index.html

@@ -374,10 +374,10 @@
             <option id="straight_segments" selected="selected" value="4">Straight</option>
             <option id="curve_segments" value="6">Curve</option>
           </select>
-          <div class="tool_button" id="tool_node_clone" title="Clone Node"></div>
+          <se-button id="tool_node_clone" title="Clone Node" src="./images/tool_node_clone.svg"></se-button>
-          <div class="tool_button" id="tool_node_delete" title="Delete Node"></div>
+          <se-button id="tool_node_delete" title="Delete Node" src="./images/tool_node_delete.svg"></se-button>
-          <div class="tool_button" id="tool_openclose_path" title="Open/close sub-path"></div>
+          <se-button id="tool_openclose_path" title="Open/close sub-path" src="./images/tool_openclose_path.svg"></se-button>
-          <div class="tool_button" id="tool_add_subpath" title="Add sub-path"></div>
+          <se-button id="tool_add_subpath" title="Add sub-path" src="./images/tool_add_subpath.svg"></se-button>
         </div>
       </div> <!-- tools_top -->
       <div id="cur_context_panel">
@@ -400,7 +400,7 @@
           <se-button id="tool_fhellipse" title="Free-Hand Rectangle" src="./images/fh_ellipse.svg"></se-button>                 
         </se-flyingbutton>
         <se-button id="tool_path" title="Path Tool" src="./images/path.svg" shortcut="P"></se-button>
-        <se-explorerbutton id="tool_shapelib_show" title="Shape library" lib="./extensions/ext-shapes/shapelib/"></se-explorerbutton>
+        <se-explorerbutton id="tool_shapelib_show" title="Shape library" lib="./extensions/ext-shapes/shapelib/" src="./images/shapelib.svg"></se-explorerbutton>
         <se-button id="tool_text" title="Text Tool" src="./images/text.svg" shortcut="T"></se-button>
         <se-button id="tool_image" title="Image Tool" src="./images/image.svg"></se-button>
         <se-button id="tool_zoom" title="Zoom Tool" src="./images/zoom.svg" shortcut="Z"></se-button>

dist/editor/spinbtn/jQuery.SpinButton.js

@@ -53,7 +53,7 @@
  * @module jQuerySpinButton
  * @example
   // Create group of settings to initialise spinbutton(s). (Optional)
-  myOptions = {
+  const myOptions = {
      min: 0, // Set lower limit.
      max: 100, // Set upper limit.
      step: 1, // Set increment size.

dist/editor/system/embedapi.js

@@ -102,7 +102,7 @@ function getMessageListener (t) {
 * - Have an iframe somewhere pointing to a version of svg-edit > r1000.
 * @example
 // Initialize the magic with:
-svgCanvas = new EmbeddedSVGEdit(window.frames.svgedit);
+const svgCanvas = new EmbeddedSVGEdit(window.frames.svgedit);
 
 // Pass functions in this format:
 svgCanvas.setSvgString('string');
@@ -130,7 +130,7 @@ svgCanvas.setSvgString('string')(function (data, error) {
 
 // The only other difference is when handling returns:
 // the callback notation is used instead.
-blah = new EmbeddedSVGEdit(window.frames.svgedit);
+const blah = new EmbeddedSVGEdit(window.frames.svgedit);
 blah.clearSelection('woot', 'blah', 1337, [1, 2, 3, 4, 5, 'moo'], -42, {
      a: 'tree', b: 6, c: 9
 })(function () { console.log('GET DATA', args); });

dist/editor/system/images/tool_add_subpath.svg

@@ -0,0 +1,16 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" xmlns:xlink="http://www.w3.org/1999/xlink" class="svg_icon"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 124 124">
+ <defs>
+  <linearGradient id="svg_4" x1="0.33594" y1="0.28125" x2="1" y2="1">
+   <stop offset="0" stop-color="#ffffff" stop-opacity="1"/>
+   <stop offset="1" stop-color="#33a533" stop-opacity="1"/>
+  </linearGradient>
+ </defs>
+ <g>
+  <path d="m6,103l55,-87c85,33.64 -26,37.12 55,87l-110,0z" id="svg_1" fill="url(#svg_4)" stroke="#000000" stroke-width="4" stroke-dasharray="null"/>
+  <g id="svg_7">
+   <circle stroke-dasharray="null" stroke-width="5" stroke="#000000" fill="#ffffff" id="svg_6" r="22.63281" cy="88.5" cx="45.5"/>
+   <line stroke-dasharray="null" stroke-width="7" stroke="#000000" id="svg_2" y2="104.03768" x2="45.5" y1="72.96232" x1="45.5"/>
+   <line stroke-dasharray="null" stroke-width="7" stroke="#000000" id="svg_3" y2="88.5" x2="61.03768" y1="88.5" x1="29.96232"/>
+  </g>
+ </g>
+ </svg></svg>

dist/editor/system/images/tool_node_clone.svg

@@ -0,0 +1,8 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" xmlns:xlink="http://www.w3.org/1999/xlink" class="svg_icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path stroke-width="2" id="svg_102" d="m4.1953,19.42128c15.49391,-15.53349 -0.21065,0.1581 15.61084,-15.57944" stroke="#8dd35f" fill="none"/>
+  <circle stroke-width="0.5" id="svg_121" stroke="#0000ff" fill="#00ffff" r="2.26172" cy="4" cx="19.75"/>
+  <circle id="svg_123" stroke-width="0.5" stroke="#0000ff" fill="#00ffff" r="2.26172" cy="19.40299" cx="4.0653"/>
+  <circle id="svg_7" stroke-width="0.5" stroke="#0000ff" fill="#00ffff" r="2.26172" cy="11.625" cx="11.9375"/>
+  <line stroke-linecap="round" id="svg_5" y2="14.46579" x2="9.66571" y1="4.02238" x1="9.7824" stroke-dasharray="null" stroke-width="2" stroke="#0000ff" fill="#0000ff"/>
+  <line stroke-linecap="round" id="svg_4" y2="9.45264" x2="15.14996" y1="9.3943" x1="4.47318" stroke-dasharray="null" stroke-width="2" stroke="#0000ff" fill="#0000ff"/>
+</svg></svg>

dist/editor/system/images/tool_node_delete.svg

@@ -0,0 +1,10 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" xmlns:xlink="http://www.w3.org/1999/xlink" class="svg_icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path stroke-width="2" id="svg_102" d="m4.1953,19.42128c15.49391,-15.53349 -0.21065,0.1581 15.61084,-15.57944" stroke="#8dd35f" fill="none"/>
+  <circle stroke-width="0.5" id="svg_121" stroke="#0000ff" fill="#00ffff" r="2.26172" cy="4" cx="19.75"/>
+  <circle id="svg_123" stroke-width="0.5" stroke="#0000ff" fill="#00ffff" r="2.26172" cy="19.40299" cx="4.0653"/>
+  <circle id="svg_7" stroke-width="0.5" stroke="#0000ff" fill="#00ffff" r="2.26172" cy="11.625" cx="11.9375"/>
+  <g transform="rotate(-45.291072845458984 9.81157112121582,9.244086265563965) " id="svg_6">
+   <line stroke-linecap="round" id="svg_4" y2="9.45264" x2="15.14996" y1="9.3943" x1="4.47318" stroke-dasharray="null" stroke-width="2" stroke="#ff0000" fill="none"/>
+   <line stroke-linecap="round" id="svg_5" y2="14.46579" x2="9.66571" y1="4.02238" x1="9.7824" stroke-dasharray="null" stroke-width="2" stroke="#ff0000" fill="none"/>
+  </g>
+</svg></svg>

dist/editor/system/images/tool_openclose_path.svg

@@ -0,0 +1,17 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" xmlns:xlink="http://www.w3.org/1999/xlink" class="svg_icon"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 300 300">
+ <g>
+  <path stroke="#000" stroke-width="15" fill="#ffc8c8" d="m123.5,38l-84,106l27,115l166,2l29,-111"/>
+  <line x1="276.5" y1="153" x2="108.5" y2="24" stroke="#000" stroke-width="10" fill="none"/>
+  <g stroke-width="15" stroke="#00f" fill="#0ff">
+   <circle r="30" cy="41" cx="123"/>
+   <circle r="30" cy="146" cx="40"/>
+   <circle r="30" cy="260" cx="69"/>
+   <circle r="30" cy="260" cx="228"/>
+   <circle r="30" cy="148" cx="260"/>
+  </g>
+  <g stroke="#A00" stroke-width="15" fill="none">
+   <line x1="168" y1="24" x2="210" y2="150"/>
+   <line x1="210" y1="24" x2="168" y2="150"/>
+  </g>
+ </g>
+</svg></svg>

dist/editor/system/index.html

@@ -381,10 +381,10 @@
             <option id="straight_segments" selected="selected" value="4">Straight</option>
             <option id="curve_segments" value="6">Curve</option>
           </select>
-          <div class="tool_button" id="tool_node_clone" title="Clone Node"></div>
+          <se-button id="tool_node_clone" title="Clone Node" src="./images/tool_node_clone.svg"></se-button>
-          <div class="tool_button" id="tool_node_delete" title="Delete Node"></div>
+          <se-button id="tool_node_delete" title="Delete Node" src="./images/tool_node_delete.svg"></se-button>
-          <div class="tool_button" id="tool_openclose_path" title="Open/close sub-path"></div>
+          <se-button id="tool_openclose_path" title="Open/close sub-path" src="./images/tool_openclose_path.svg"></se-button>
-          <div class="tool_button" id="tool_add_subpath" title="Add sub-path"></div>
+          <se-button id="tool_add_subpath" title="Add sub-path" src="./images/tool_add_subpath.svg"></se-button>
         </div>
       </div> <!-- tools_top -->
       <div id="cur_context_panel">
@@ -407,7 +407,7 @@
           <se-button id="tool_fhellipse" title="Free-Hand Rectangle" src="./images/fh_ellipse.svg"></se-button>                 
         </se-flyingbutton>
         <se-button id="tool_path" title="Path Tool" src="./images/path.svg" shortcut="P"></se-button>
-        <se-explorerbutton id="tool_shapelib_show" title="Shape library" lib="./extensions/ext-shapes/shapelib/"></se-explorerbutton>
+        <se-explorerbutton id="tool_shapelib_show" title="Shape library" lib="./extensions/ext-shapes/shapelib/" src="./images/shapelib.svg"></se-explorerbutton>
         <se-button id="tool_text" title="Text Tool" src="./images/text.svg" shortcut="T"></se-button>
         <se-button id="tool_image" title="Image Tool" src="./images/image.svg"></se-button>
         <se-button id="tool_zoom" title="Zoom Tool" src="./images/zoom.svg" shortcut="Z"></se-button>

dist/editor/system/spinbtn/jQuery.SpinButton.js

@@ -53,7 +53,7 @@
  * @module jQuerySpinButton
  * @example
   // Create group of settings to initialise spinbutton(s). (Optional)
-  myOptions = {
+  const myOptions = {
      min: 0, // Set lower limit.
      max: 100, // Set upper limit.
      step: 1, // Set increment size.

dist/editor/xdomain-index.html

@@ -374,10 +374,10 @@
             <option id="straight_segments" selected="selected" value="4">Straight</option>
             <option id="curve_segments" value="6">Curve</option>
           </select>
-          <div class="tool_button" id="tool_node_clone" title="Clone Node"></div>
+          <se-button id="tool_node_clone" title="Clone Node" src="./images/tool_node_clone.svg"></se-button>
-          <div class="tool_button" id="tool_node_delete" title="Delete Node"></div>
+          <se-button id="tool_node_delete" title="Delete Node" src="./images/tool_node_delete.svg"></se-button>
-          <div class="tool_button" id="tool_openclose_path" title="Open/close sub-path"></div>
+          <se-button id="tool_openclose_path" title="Open/close sub-path" src="./images/tool_openclose_path.svg"></se-button>
-          <div class="tool_button" id="tool_add_subpath" title="Add sub-path"></div>
+          <se-button id="tool_add_subpath" title="Add sub-path" src="./images/tool_add_subpath.svg"></se-button>
         </div>
       </div> <!-- tools_top -->
       <div id="cur_context_panel">
@@ -400,7 +400,7 @@
           <se-button id="tool_fhellipse" title="Free-Hand Rectangle" src="./images/fh_ellipse.svg"></se-button>                 
         </se-flyingbutton>
         <se-button id="tool_path" title="Path Tool" src="./images/path.svg" shortcut="P"></se-button>
-        <se-explorerbutton id="tool_shapelib_show" title="Shape library" lib="./extensions/ext-shapes/shapelib/"></se-explorerbutton>
+        <se-explorerbutton id="tool_shapelib_show" title="Shape library" lib="./extensions/ext-shapes/shapelib/" src="./images/shapelib.svg"></se-explorerbutton>
         <se-button id="tool_text" title="Text Tool" src="./images/text.svg" shortcut="T"></se-button>
         <se-button id="tool_image" title="Image Tool" src="./images/image.svg"></se-button>
         <se-button id="tool_zoom" title="Zoom Tool" src="./images/zoom.svg" shortcut="Z"></se-button>

src/editor/images/tool_add_subpath.svg

@@ -0,0 +1,16 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" xmlns:xlink="http://www.w3.org/1999/xlink" class="svg_icon"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 124 124">
+ <defs>
+  <linearGradient id="svg_4" x1="0.33594" y1="0.28125" x2="1" y2="1">
+   <stop offset="0" stop-color="#ffffff" stop-opacity="1"/>
+   <stop offset="1" stop-color="#33a533" stop-opacity="1"/>
+  </linearGradient>
+ </defs>
+ <g>
+  <path d="m6,103l55,-87c85,33.64 -26,37.12 55,87l-110,0z" id="svg_1" fill="url(#svg_4)" stroke="#000000" stroke-width="4" stroke-dasharray="null"/>
+  <g id="svg_7">
+   <circle stroke-dasharray="null" stroke-width="5" stroke="#000000" fill="#ffffff" id="svg_6" r="22.63281" cy="88.5" cx="45.5"/>
+   <line stroke-dasharray="null" stroke-width="7" stroke="#000000" id="svg_2" y2="104.03768" x2="45.5" y1="72.96232" x1="45.5"/>
+   <line stroke-dasharray="null" stroke-width="7" stroke="#000000" id="svg_3" y2="88.5" x2="61.03768" y1="88.5" x1="29.96232"/>
+  </g>
+ </g>
+ </svg></svg>

src/editor/images/tool_node_clone.svg

@@ -0,0 +1,8 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" xmlns:xlink="http://www.w3.org/1999/xlink" class="svg_icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path stroke-width="2" id="svg_102" d="m4.1953,19.42128c15.49391,-15.53349 -0.21065,0.1581 15.61084,-15.57944" stroke="#8dd35f" fill="none"/>
+  <circle stroke-width="0.5" id="svg_121" stroke="#0000ff" fill="#00ffff" r="2.26172" cy="4" cx="19.75"/>
+  <circle id="svg_123" stroke-width="0.5" stroke="#0000ff" fill="#00ffff" r="2.26172" cy="19.40299" cx="4.0653"/>
+  <circle id="svg_7" stroke-width="0.5" stroke="#0000ff" fill="#00ffff" r="2.26172" cy="11.625" cx="11.9375"/>
+  <line stroke-linecap="round" id="svg_5" y2="14.46579" x2="9.66571" y1="4.02238" x1="9.7824" stroke-dasharray="null" stroke-width="2" stroke="#0000ff" fill="#0000ff"/>
+  <line stroke-linecap="round" id="svg_4" y2="9.45264" x2="15.14996" y1="9.3943" x1="4.47318" stroke-dasharray="null" stroke-width="2" stroke="#0000ff" fill="#0000ff"/>
+</svg></svg>

src/editor/images/tool_node_delete.svg

@@ -0,0 +1,10 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" xmlns:xlink="http://www.w3.org/1999/xlink" class="svg_icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path stroke-width="2" id="svg_102" d="m4.1953,19.42128c15.49391,-15.53349 -0.21065,0.1581 15.61084,-15.57944" stroke="#8dd35f" fill="none"/>
+  <circle stroke-width="0.5" id="svg_121" stroke="#0000ff" fill="#00ffff" r="2.26172" cy="4" cx="19.75"/>
+  <circle id="svg_123" stroke-width="0.5" stroke="#0000ff" fill="#00ffff" r="2.26172" cy="19.40299" cx="4.0653"/>
+  <circle id="svg_7" stroke-width="0.5" stroke="#0000ff" fill="#00ffff" r="2.26172" cy="11.625" cx="11.9375"/>
+  <g transform="rotate(-45.291072845458984 9.81157112121582,9.244086265563965) " id="svg_6">
+   <line stroke-linecap="round" id="svg_4" y2="9.45264" x2="15.14996" y1="9.3943" x1="4.47318" stroke-dasharray="null" stroke-width="2" stroke="#ff0000" fill="none"/>
+   <line stroke-linecap="round" id="svg_5" y2="14.46579" x2="9.66571" y1="4.02238" x1="9.7824" stroke-dasharray="null" stroke-width="2" stroke="#ff0000" fill="none"/>
+  </g>
+</svg></svg>

src/editor/images/tool_openclose_path.svg

@@ -0,0 +1,17 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" xmlns:xlink="http://www.w3.org/1999/xlink" class="svg_icon"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 300 300">
+ <g>
+  <path stroke="#000" stroke-width="15" fill="#ffc8c8" d="m123.5,38l-84,106l27,115l166,2l29,-111"/>
+  <line x1="276.5" y1="153" x2="108.5" y2="24" stroke="#000" stroke-width="10" fill="none"/>
+  <g stroke-width="15" stroke="#00f" fill="#0ff">
+   <circle r="30" cy="41" cx="123"/>
+   <circle r="30" cy="146" cx="40"/>
+   <circle r="30" cy="260" cx="69"/>
+   <circle r="30" cy="260" cx="228"/>
+   <circle r="30" cy="148" cx="260"/>
+  </g>
+  <g stroke="#A00" stroke-width="15" fill="none">
+   <line x1="168" y1="24" x2="210" y2="150"/>
+   <line x1="210" y1="24" x2="168" y2="150"/>
+  </g>
+ </g>
+</svg></svg>

src/editor/index.html

@@ -374,10 +374,10 @@
             <option id="straight_segments" selected="selected" value="4">Straight</option>
             <option id="curve_segments" value="6">Curve</option>
           </select>
-          <div class="tool_button" id="tool_node_clone" title="Clone Node"></div>
+          <se-button id="tool_node_clone" title="Clone Node" src="./images/tool_node_clone.svg"></se-button>
-          <div class="tool_button" id="tool_node_delete" title="Delete Node"></div>
+          <se-button id="tool_node_delete" title="Delete Node" src="./images/tool_node_delete.svg"></se-button>
-          <div class="tool_button" id="tool_openclose_path" title="Open/close sub-path"></div>
+          <se-button id="tool_openclose_path" title="Open/close sub-path" src="./images/tool_openclose_path.svg"></se-button>
-          <div class="tool_button" id="tool_add_subpath" title="Add sub-path"></div>
+          <se-button id="tool_add_subpath" title="Add sub-path" src="./images/tool_add_subpath.svg"></se-button>
         </div>
       </div> <!-- tools_top -->
       <div id="cur_context_panel">

src/editor/svgedit.js

@@ -1303,8 +1303,8 @@ editor.init = () => {
   * @returns {void}
   */
   const togglePathEditMode = function (editmode, elems) {
-    // $('#path_node_panel').toggle(editmode);
+    $('#path_node_panel').toggle(editmode);
-    // $('#tools_bottom_2,#tools_bottom_3').toggle(!editmode);
+    $('#tools_bottom_2,#tools_bottom_3').toggle(!editmode);
     if (editmode) {
       // Change select icon
       $('.tool_button_current').removeClass('tool_button_current').addClass('tool_button');
@@ -1978,7 +1978,7 @@ editor.init = () => {
         $('#tool_reorient').toggleClass('disabled', angle === 0);
       } else {
         const point = path.getNodePoint();
-        $('#tool_add_subpath').removeClass('push_button_pressed').addClass('tool_button');
+        $('#tool_add_subpath').pressed = false;
         $('#tool_node_delete').toggleClass('disabled', !path.canDeleteNodes);
 
         // Show open/close button based on selected point
@@ -3724,8 +3724,9 @@ editor.init = () => {
   */
   const addSubPath = function () {
     const button = $('#tool_add_subpath');
-    const sp = !button.hasClass('push_button_pressed');
+    const sp = !button.hasClass('pressed');
-    button.toggleClass('push_button_pressed tool_button');
+    button.pressed = sp;
+    // button.toggleClass('push_button_pressed tool_button');
     path.addSubPath(sp);
   };
 
@@ -4880,6 +4881,10 @@ editor.init = () => {
     $id('tool_align_top').addEventListener('click', () => clickAlign('top'));
     $id('tool_align_bottom').addEventListener('click', () => clickAlign('bottom'));
     $id('tool_align_middle').addEventListener('click', () => clickAlign('middle'));
+    $id('tool_node_clone').addEventListener('click', clonePathNode);
+    $id('tool_node_delete').addEventListener('click', deletePathNode);
+    $id('tool_openclose_path').addEventListener('click', opencloseSubPath);
+    $id('tool_add_subpath').addEventListener('click', addSubPath);
 
     // register actions for left panel
     $id('tool_select').addEventListener('click', clickSelect);
@@ -4939,10 +4944,6 @@ editor.init = () => {
       {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_node_clone', fn: clonePathNode, evt: 'click'},
-      {sel: '#tool_node_delete', fn: deletePathNode, evt: 'click'},
-      {sel: '#tool_openclose_path', fn: opencloseSubPath, evt: 'click'},
-      {sel: '#tool_add_subpath', fn: addSubPath, evt: 'click'},
       {sel: '#tool_ungroup', fn: clickGroup, evt: 'click'},
       {sel: '#tool_unlink_use', fn: clickGroup, evt: 'click'},
       {sel: '#tool_bold', fn: clickBold, evt: 'mousedown'},