Merge pull request #602 from SVG-Edit/issues/326

#326 unpositioned extension button in wrong place

src/editor/extensions/ext-connector/ext-connector.js

@@ -360,13 +360,11 @@ export default {
       name: svgEditor.i18next.t(`${name}:name`),
       callback() {
         const btitle = svgEditor.i18next.t(`${name}:langListTitle`);
-        // Add the button and its handler(s)
-        const buttonTemplate = document.createElement("template");
         // eslint-disable-next-line no-unsanitized/property
-        buttonTemplate.innerHTML = `
+        const buttonTemplate = `
         <se-button id="mode_connect" title="${btitle}" src="./images/conn.svg"></se-button>
         `;
-        $id('tools_left').append(buttonTemplate.content.cloneNode(true));
+        svgCanvas.insertChildAtIndex($id('tools_left'), buttonTemplate, 13);
         $id('mode_connect').addEventListener("click", () => {
           svgCanvas.setMode('connector');
         });

src/editor/extensions/ext-eyedropper/ext-eyedropper.js

@@ -82,14 +82,13 @@ export default {
       name: svgEditor.i18next.t(`${name}:name`),
       callback() {
         // Add the button and its handler(s)
-        const buttonTemplate = document.createElement("template");
         const title = svgEditor.i18next.t(`${name}:buttons.0.title`);
         const key = svgEditor.i18next.t(`${name}:buttons.0.key`);
         // eslint-disable-next-line no-unsanitized/property
-        buttonTemplate.innerHTML = `
+        const buttonTemplate = `
         <se-button id="tool_eyedropper" title="${title}" src="./images/eye_dropper.svg" shortcut=${key}></se-button>
         `;
-        $id('tools_left').append(buttonTemplate.content.cloneNode(true));
+        svgCanvas.insertChildAtIndex($id('tools_left'), buttonTemplate, 12);
         $id('tool_eyedropper').addEventListener("click", () => {
           svgCanvas.setMode('eyedropper');
         });

src/editor/extensions/ext-polystar/ext-polystar.js

@@ -79,9 +79,8 @@ export default {
         const fbtitle = svgEditor.i18next.t(`${name}:title`);
         const title_star = svgEditor.i18next.t(`${name}:buttons.0.title`);
         const title_polygon = svgEditor.i18next.t(`${name}:buttons.1.title`);
-        const buttonTemplate = document.createElement("template");
         // eslint-disable-next-line no-unsanitized/property
-        buttonTemplate.innerHTML = `
+        const buttonTemplate = `
             <se-flyingbutton id="tools_polygon" title="${fbtitle}">
               <se-button id="tool_star" title="${title_star}" src="./images/star.svg">
               </se-button>
@@ -89,7 +88,7 @@ export default {
               </se-button>
             </se-flyingbutton>
           `;
-        $id("tools_left").append(buttonTemplate.content.cloneNode(true));
+        svgCanvas.insertChildAtIndex($id('tools_left'), buttonTemplate, 10);
         // handler
         $id("tool_star").addEventListener("click", () => {
           if (this.leftPanel.updateLeftPanel("tool_star")) {

src/editor/extensions/ext-shapes/ext-shapes.js

@@ -43,13 +43,12 @@ export default {
     return {
       callback () {
         if ($id('tool_shapelib') === null) {
-          const buttonTemplate = document.createElement("template");
           // eslint-disable-next-line no-unsanitized/property
-          buttonTemplate.innerHTML = `
+          const buttonTemplate = `
           <se-explorerbutton id="tool_shapelib" title="${svgEditor.i18next.t(`${name}:buttons.0.title`)}" lib="./extensions/ext-shapes/shapelib/"
           src="./images/shapelib.svg"></se-explorerbutton>
           `;
-          $id('tools_left').append(buttonTemplate.content.cloneNode(true));
+          canv.insertChildAtIndex($id('tools_left'), buttonTemplate, 9);
           $id('tool_shapelib').addEventListener("click", () => {
             canv.setMode(modeId);
           });

src/editor/panels/LeftPanel.js

@@ -1,4 +1,5 @@
 import SvgCanvas from "../../svgcanvas/svgcanvas.js";
+import { insertChildAtIndex } from '../../svgcanvas/utilities.js';
 
 const { $id, $qa } = SvgCanvas;
 
@@ -196,30 +197,60 @@ class LeftPanel {
   init() {
     const { i18next } = this.editor;
     // add Left panel
+    const leftMenu = [
+      {
+        menu: `<se-button id="tool_select" title="${i18next.t('tools.mode_select')}" src="./images/select.svg"></se-button>`,
+        position: 1
+      },
+      {
+        menu: `<se-button id="tool_zoom" title="${i18next.t('tools.mode_zoom')}" src="./images/zoom.svg" shortcut="Z"></se-button>`,
+        position: 2
+      },
+      {
+        menu: `<se-button id="tool_fhpath" title="${i18next.t('tools.mode_fhpath')}" src="./images/pencil.svg" shortcut="Q"></se-button>`,
+        position: 3
+      },
+      {
+        menu: `<se-button id="tool_line" title="${i18next.t('tools.mode_line')}" src="./images/pen.svg" shortcut="L"></se-button>`,
+        position: 4
+      },
+      {
+        menu: `<se-button id="tool_path" title="${i18next.t('tools.mode_path')}" src="./images/path.svg" shortcut="P"></se-button>`,
+        position: 5
+      },
+      {
+        menu: `<se-flyingbutton id="tools_rect" title="${i18next.t('tools.square_rect_tool')}">
+        <se-button id="tool_rect" title="${i18next.t('tools.mode_rect')}" src="./images/rect.svg" shortcut="R"></se-button>
+        <se-button id="tool_square" title="${i18next.t('tools.mode_square')}" src="./images/square.svg"></se-button>
+        <se-button id="tool_fhrect" title="${i18next.t('tools.mode_fhrect')}" src="./images/fh_rect.svg"></se-button>
+      </se-flyingbutton>`,
+        position: 6
+      },
+      {
+        menu: `<se-flyingbutton id="tools_ellipse" title="${i18next.t('tools.ellipse_circle_tool')}">
+          <se-button id="tool_ellipse" title="${i18next.t('tools.mode_ellipse')}" src="./images/ellipse.svg" shortcut="E"></se-button>
+          <se-button id="tool_circle" title="${i18next.t('tools.mode_circle')}" src="./images/circle.svg"></se-button>
+          <se-button id="tool_fhellipse" title="${i18next.t('tools.mode_fhellipse')}" src="./images/fh_ellipse.svg"></se-button>
+        </se-flyingbutton>`,
+        position: 7
+      },
+      {
+        menu: `<se-button id="tool_text" title="${i18next.t('tools.mode_text')}" src="./images/text.svg" shortcut="T"></se-button>`,
+        position: 8
+      },
+      {
+        menu: `<se-button id="tool_image" title="${i18next.t('tools.mode_image')}" src="./images/image.svg"></se-button>`,
+        position: 11
+      }
+    ];
     const template = document.createElement("template");
-    // eslint-disable-next-line no-unsanitized/property
+    template.innerHTML = `<div id="tools_left"></div> <!-- tools_left -->`;
-    template.innerHTML = `
-    <div id="tools_left">
-     <se-button id="tool_select" title="${i18next.t('tools.mode_select')}" src="./images/select.svg"></se-button>
-     <se-button id="tool_zoom" title="${i18next.t('tools.mode_zoom')}" src="./images/zoom.svg" shortcut="Z"></se-button>
-     <se-button id="tool_fhpath" title="${i18next.t('tools.mode_fhpath')}" src="./images/pencil.svg" shortcut="Q"></se-button>
-     <se-button id="tool_line" title="${i18next.t('tools.mode_line')}" src="./images/pen.svg" shortcut="L"></se-button>
-     <se-button id="tool_path" title="${i18next.t('tools.mode_path')}" src="./images/path.svg" shortcut="P"></se-button>
-     <se-flyingbutton id="tools_rect" title="${i18next.t('tools.square_rect_tool')}">
-       <se-button id="tool_rect" title="${i18next.t('tools.mode_rect')}" src="./images/rect.svg" shortcut="R"></se-button>
-       <se-button id="tool_square" title="${i18next.t('tools.mode_square')}" src="./images/square.svg"></se-button>
-       <se-button id="tool_fhrect" title="${i18next.t('tools.mode_fhrect')}" src="./images/fh_rect.svg"></se-button>
-     </se-flyingbutton>
-     <se-flyingbutton id="tools_ellipse" title="${i18next.t('tools.ellipse_circle_tool')}">
-       <se-button id="tool_ellipse" title="${i18next.t('tools.mode_ellipse')}" src="./images/ellipse.svg" shortcut="E"></se-button>
-       <se-button id="tool_circle" title="${i18next.t('tools.mode_circle')}" src="./images/circle.svg"></se-button>
-       <se-button id="tool_fhellipse" title="${i18next.t('tools.mode_fhellipse')}" src="./images/fh_ellipse.svg"></se-button>
-     </se-flyingbutton>
-     <se-button id="tool_text" title="${i18next.t('tools.mode_text')}" src="./images/text.svg" shortcut="T"></se-button>
-     <se-button id="tool_image" title="${i18next.t('tools.mode_image')}" src="./images/image.svg"></se-button>
-    </div> <!-- tools_left -->
-     `;
     this.editor.$svgEditor.append(template.content.cloneNode(true));
+    const leftMenuSort = leftMenu.sort((a, b) => (a.position > b.position) ? 1 : ((b.position > a.position) ? -1 : 0));
+    const parent = $id("tools_left");
+    leftMenuSort.forEach(function (value) {
+      insertChildAtIndex(parent, value.menu, value.position);
+    });
     // register actions for left panel
     $id("tool_select").addEventListener("click", this.clickSelect.bind(this));
     $id("tool_fhpath").addEventListener("click", this.clickFHPath.bind(this));

src/svgcanvas/svgcanvas.js

@@ -70,7 +70,7 @@ import {
   preventClickDefault, walkTree, getBBoxOfElementAsPath, convertToPath, encode64, decode64,
   getVisibleElements, dropXMLInternalSubset, init as utilsInit,
   getBBox as utilsGetBBox, getStrokedBBoxDefaultVisible, isNullish, blankPageObjectURL,
-  $id, $qa, $qq, getFeGaussianBlur
+  $id, $qa, $qq, getFeGaussianBlur, stringToHTML, insertChildAtIndex
 } from './utilities.js';
 import {
   transformPoint, matrixMultiply, hasMatrixTransform, transformListToTransform,
@@ -188,6 +188,8 @@ class SvgCanvas {
     this.$id = $id;
     this.$qq = $qq;
     this.$qa = $qa;
+    this.stringToHTML = stringToHTML;
+    this.insertChildAtIndex = insertChildAtIndex;
     this.getClosest = getClosest;
     this.getParents = getParents;
     /** A storage solution aimed at replacing jQuerys data function.

src/svgcanvas/utilities.js

@@ -1375,6 +1375,22 @@ export const mock = ({
   getRotationAngle = getRotationAngleUser;
 };
 
+export const stringToHTML = (str) => {
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(str, 'text/html');
+  return doc.body.firstChild;
+};
+
+export const insertChildAtIndex = function(parent, child, index) {
+  const doc = stringToHTML(child);
+  if (!index) index = 0;
+  if (index >= parent.children.length) {
+    parent.appendChild(doc);
+  } else {
+    parent.insertBefore(doc, parent.children[index]);
+  }
+};
+
 // shortcuts to common DOM functions
 export const $id = (id) => document.getElementById(id);
 export const $qq = (sel) => document.querySelector(sel);