Merge pull request #608 from SVG-Edit/css

implement Grid Css and less intrusive DOM change.
2021-08-15 02:08:16 +02:00
parent b048afb72e ddf3269bd0
commit 330670b5e4
104 changed files with 3482 additions and 2616 deletions
--- a/cypress/integration/ui/snapshots/scenario.js.snap
+++ b/cypress/integration/ui/snapshots/scenario.js.snap
@@ -88,7 +88,7 @@ exports[`use various parts of svg-edit > check tool_text #0`] = `
      stroke="#000000"
      stroke-width="0"
      x="116"
-      y="87"
+      y="87.125"
      id="svg_1"
      font-size="24"
      font-family="Serif"
@@ -134,7 +134,7 @@ exports[`use various parts of svg-edit > check tool_clone #0`] = `
      stroke="#000000"
      stroke-width="0"
      x="116"
-      y="87"
+      y="87.125"
      id="svg_1"
      font-size="24"
      font-family="Serif"
@@ -150,7 +150,7 @@ exports[`use various parts of svg-edit > check tool_clone #0`] = `
      stroke="#000000"
      stroke-width="0"
      x="136"
-      y="107"
+      y="107.125"
      font-size="24"
      font-family="Serif"
      text-anchor="middle"
@@ -196,7 +196,7 @@ exports[`use various parts of svg-edit > check tool_italic #0`] = `
      stroke="#000000"
      stroke-width="0"
      x="116"
-      y="87"
+      y="87.125"
      id="svg_1"
      font-size="24"
      font-family="Serif"
@@ -213,7 +213,7 @@ exports[`use various parts of svg-edit > check tool_italic #0`] = `
      stroke="#000000"
      stroke-width="0"
      x="136"
-      y="107"
+      y="107.125"
      font-size="24"
      font-family="Serif"
      text-anchor="middle"
@@ -259,7 +259,7 @@ exports[`use various parts of svg-edit > check tool_bold #0`] = `
      stroke="#000000"
      stroke-width="0"
      x="116"
-      y="87"
+      y="87.125"
      id="svg_1"
      font-size="24"
      font-family="Serif"
@@ -277,7 +277,7 @@ exports[`use various parts of svg-edit > check tool_bold #0`] = `
      stroke="#000000"
      stroke-width="0"
      x="136"
-      y="107"
+      y="107.125"
      font-size="24"
      font-family="Serif"
      text-anchor="middle"
@@ -323,7 +323,7 @@ exports[`use various parts of svg-edit > check change color #0`] = `
      stroke="#000000"
      stroke-width="0"
      x="116"
-      y="87"
+      y="87.125"
      id="svg_1"
      font-size="24"
      font-family="Serif"
@@ -341,7 +341,7 @@ exports[`use various parts of svg-edit > check change color #0`] = `
      stroke="#000000"
      stroke-width="0"
      x="136"
-      y="107"
+      y="107.125"
      font-size="24"
      font-family="Serif"
      text-anchor="middle"
@@ -387,7 +387,7 @@ exports[`use various parts of svg-edit > check tool_text_anchor_start #0`] = `
      stroke="#000000"
      stroke-width="0"
      x="116"
-      y="87"
+      y="87.125"
      id="svg_1"
      font-size="24"
      font-family="Serif"
@@ -405,7 +405,7 @@ exports[`use various parts of svg-edit > check tool_text_anchor_start #0`] = `
      stroke="#000000"
      stroke-width="0"
      x="136"
-      y="107"
+      y="107.125"
      font-size="24"
      font-family="Serif"
      text-anchor="middle"
@@ -451,7 +451,7 @@ exports[`use various parts of svg-edit > check tool_text_anchor_middle #0`] = `
      stroke="#000000"
      stroke-width="0"
      x="116"
-      y="87"
+      y="87.125"
      id="svg_1"
      font-size="24"
      font-family="Serif"
@@ -469,7 +469,7 @@ exports[`use various parts of svg-edit > check tool_text_anchor_middle #0`] = `
      stroke="#000000"
      stroke-width="0"
      x="136"
-      y="107"
+      y="107.125"
      font-size="24"
      font-family="Serif"
      text-anchor="middle"
@@ -515,7 +515,7 @@ exports[`use various parts of svg-edit > check tool_text_anchor_end #0`] = `
      stroke="#000000"
      stroke-width="0"
      x="116"
-      y="87"
+      y="87.125"
      id="svg_1"
      font-size="24"
      font-family="Serif"
@@ -533,7 +533,7 @@ exports[`use various parts of svg-edit > check tool_text_anchor_end #0`] = `
      stroke="#000000"
      stroke-width="0"
      x="136"
-      y="107"
+      y="107.125"
      font-size="24"
      font-family="Serif"
      text-anchor="middle"
@@ -579,7 +579,7 @@ exports[`use various parts of svg-edit > check tool_star #0`] = `
      stroke="#000000"
      stroke-width="0"
      x="116"
-      y="87"
+      y="87.125"
      id="svg_1"
      font-size="24"
      font-family="Serif"
@@ -597,7 +597,7 @@ exports[`use various parts of svg-edit > check tool_star #0`] = `
      stroke="#000000"
      stroke-width="0"
      x="136"
-      y="107"
+      y="107.125"
      font-size="24"
      font-family="Serif"
      text-anchor="middle"
@@ -610,7 +610,7 @@ exports[`use various parts of svg-edit > check tool_star #0`] = `
    </text>
    <polygon
      cx="370"
-      cy="202"
+      cy="202.125"
      id="svg_3"
      shape="star"
      point="5"
@@ -622,7 +622,7 @@ exports[`use various parts of svg-edit > check tool_star #0`] = `
      strokecolor="#000000"
      strokewidth="0"
      starradiusmultiplier="3"
-      points="370,135.33333333333331 383.0618944953883,184.02184456944562 433.40376775301024,181.39886704167017 391.13458925100343,208.86704431944327 409.18568348616486,255.93446629166317 370,224.22222222222223 330.81431651383514,255.93446629166317 348.86541074899657,208.86704431944327 306.59623224698976,181.39886704167017 356.9381055046117,184.02184456944562 370,135.33333333333331 383.0618944953883,184.02184456944562 "
+      points="370,135.45833333333331 383.0618944953883,184.14684456944562 433.40376775301024,181.52386704167017 391.13458925100343,208.99204431944327 409.18568348616486,256.05946629166317 370,224.34722222222223 330.81431651383514,256.05946629166317 348.86541074899657,208.99204431944327 306.59623224698976,181.52386704167017 356.9381055046117,184.14684456944562 370,135.45833333333331 383.0618944953883,184.14684456944562 "
      stroke="#000000"
      stroke-width="0"
    >
@@ -669,7 +669,7 @@ exports[`use various parts of svg-edit > check tool_polygon #0`] = `
      stroke="#000000"
      stroke-width="0"
      x="116"
-      y="87"
+      y="87.125"
      id="svg_1"
      font-size="24"
      font-family="Serif"
@@ -687,7 +687,7 @@ exports[`use various parts of svg-edit > check tool_polygon #0`] = `
      stroke="#000000"
      stroke-width="0"
      x="136"
-      y="107"
+      y="107.125"
      font-size="24"
      font-family="Serif"
      text-anchor="middle"
@@ -700,7 +700,7 @@ exports[`use various parts of svg-edit > check tool_polygon #0`] = `
    </text>
    <polygon
      cx="370"
-      cy="202"
+      cy="202.125"
      id="svg_3"
      shape="star"
      point="5"
@@ -712,7 +712,7 @@ exports[`use various parts of svg-edit > check tool_polygon #0`] = `
      strokecolor="#000000"
      strokewidth="0"
      starradiusmultiplier="3"
-      points="370,135.33333333333331 383.0618944953883,184.02184456944562 433.40376775301024,181.39886704167017 391.13458925100343,208.86704431944327 409.18568348616486,255.93446629166317 370,224.22222222222223 330.81431651383514,255.93446629166317 348.86541074899657,208.86704431944327 306.59623224698976,181.39886704167017 356.9381055046117,184.02184456944562 370,135.33333333333331 383.0618944953883,184.02184456944562 "
+      points="370,135.45833333333331 383.0618944953883,184.14684456944562 433.40376775301024,181.52386704167017 391.13458925100343,208.99204431944327 409.18568348616486,256.05946629166317 370,224.34722222222223 330.81431651383514,256.05946629166317 348.86541074899657,208.99204431944327 306.59623224698976,181.52386704167017 356.9381055046117,184.14684456944562 370,135.45833333333331 383.0618944953883,184.14684456944562 "
      stroke="#000000"
      stroke-width="0"
      fill-opacity="1"
@@ -720,7 +720,7 @@ exports[`use various parts of svg-edit > check tool_polygon #0`] = `
    ></polygon>
    <polygon
      cx="420"
-      cy="302"
+      cy="302.125"
      id="svg_4"
      shape="regularPoly"
      sides="5"
@@ -729,7 +729,7 @@ exports[`use various parts of svg-edit > check tool_polygon #0`] = `
      fill="#ffff00"
      strokecolor="#000000"
      strokewidth="5"
-      points="488.0520646681632,302 441.02924448476534,366.7213595499958 364.94472318115305,342 364.94472318115305,262 441.02924448476534,237.27864045000422 488.0520646681632,302 "
+      points="488.0520646681632,302.125 441.02924448476534,366.8463595499958 364.94472318115305,342.125 364.94472318115305,262.125 441.02924448476534,237.40364045000422 488.0520646681632,302.125 "
      stroke="#000000"
      stroke-width="5"
    >
--- a/cypress/integration/unit/test1.js
+++ b/cypress/integration/unit/test1.js
@@ -50,7 +50,7 @@ describe('Basic Module', function () {
          opacity: 1
        },
        initOpacity: 1,
-        imgPath: '../editor/images/',
+        imgPath: '../editor/images',
        langPath: 'locale/',
        extPath: 'extensions/',
        extensions: [ 'ext-arrows.js', 'ext-connector.js', 'ext-eyedropper.js' ],
--- a/cypress/integration/unit/utilities-performance.js
+++ b/cypress/integration/unit/utilities-performance.js
@@ -28,7 +28,7 @@ describe('utilities performance', function () {
      <div id="workarea" style="cursor: auto; overflow: scroll; line-height: 12px; right: 100px;">

        <!-- Must include this thumbnail view to see some of the performance issues -->
-        <svg id="overviewMiniView" width="150" height="112.5" x="0" y="0" viewBox="100 100 1000 1000" style="float: right;"
+        <svg id="overviewMiniView" width="132" height="112.5" x="0" y="0" viewBox="100 100 1000 1000" style="float: right;"
             xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
          <use x="0" y="0" xlink:href="#svgroot"></use>
        </svg>
--- a/demos/canvas.html
+++ b/demos/canvas.html
@@ -37,7 +37,7 @@ const config = {
  initStroke: { color: '000000', opacity: 1, width: 1 },
  text: { stroke_width: 0, font_size: 24, font_family: 'serif' },
  initOpacity: 1,
-  imgPath: '../src/editor/images/',
+  imgPath: '../src/editor/images',
  dimensions: [ width, height ],
  baseUnit: 'px'
 };
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "svgedit",
-  "version": "7.0.0-beta.2",
+  "version": "7.0.0-beta.4",
  "description": "Powerful SVG-Editor for your browser ",
  "main": "dist/Editor.js",
  "module": "dist/Editor.js",
@@ -34,9 +34,8 @@
    "build-docs": "run-s -c build-docs-remove build-docs-create",
    "build-and-open-docs-no-start": "run-s build-docs open-docs-no-start",
    "build-and-open-docs": "run-s build-docs open-docs",
-    "compress-images": "imageoptim \"src/editor/extensions/*.png\" \"src/editor/spinbtn/*.png\" \"src/editor/jgraduate/images/*.{png,gif}\" \"src/editor/images/*.png\"",
    "remark": "remark -q -f .",
-    "prepublishOnly": "run-s build-docs"
+    "prepublishOnly": "run-s build-docs build"
  },
  "repository": {
    "type": "git",
@@ -81,17 +80,17 @@
    "canvg": "3.0.7",
    "core-js": "3.16.0",
    "elix": "15.0.0",
-    "html2canvas": "1.1.4",
+    "html2canvas": "1.2.1",
    "i18next": "20.3.5",
    "jspdf": "2.3.1",
-    "pathseg": "1.2.0",
+    "pathseg": "1.2.1",
    "regenerator-runtime": "0.13.9",
    "rollup-plugin-polyfill-node": "0.7.0",
    "svg2pdf.js": "2.1.0"
  },
  "devDependencies": {
-    "@babel/core": "7.14.8",
-    "@babel/preset-env": "7.14.9",
+    "@babel/core": "7.15.0",
+    "@babel/preset-env": "7.15.0",
    "@babel/register": "7.14.5",
    "@babel/runtime-corejs3": "7.14.9",
    "@cypress/code-coverage": "3.9.10",
@@ -132,8 +131,6 @@
    "eslint-plugin-node": "11.1.0",
    "eslint-plugin-promise": "5.1.0",
    "eslint-plugin-standard": "4.1.0",
-    "eslint-plugin-unicorn": "34.0.1",
-    "imageoptim-cli": "3.0.2",
    "jamilih": "0.54.0",
    "jsdoc": "3.6.7",
    "node-static": "0.7.11",
@@ -143,10 +140,10 @@
    "promise-fs": "2.1.1",
    "qr-manipulation": "0.7.0",
    "query-result": "1.0.5",
-    "remark-cli": "9.0.0",
+    "remark-cli": "10.0.0",
    "remark-lint-ordered-list-marker-value": "2.0.1",
    "rimraf": "3.0.2",
-    "rollup": "2.55.1",
+    "rollup": "2.56.0",
    "rollup-plugin-copy": "3.4.0",
    "rollup-plugin-filesize": "9.1.1",
    "rollup-plugin-node-polyfills": "0.2.1",
--- a/src/editor/ConfigObj.js
+++ b/src/editor/ConfigObj.js
@@ -132,7 +132,7 @@ export default class ConfigObj {
      no_save_warning: false,
      // PATH CONFIGURATION
      // The following path configuration items are disallowed in the URL (as should any future path configurations)
-      imgPath: './images/',
+      imgPath: './images',
      // DOCUMENT PROPERTIES
      // Change the following to a preference (already in the Document Properties dialog)?
      dimensions: [ 640, 480 ],
--- a/src/editor/Editor.js
+++ b/src/editor/Editor.js
@@ -342,20 +342,25 @@ class Editor extends EditorStartup {
  * @param {module:svgcanvas.SvgCanvas#event:selected} elems
  * @returns {void}
  */
-  togglePathEditMode(editmode, elems) {
-    $id('path_node_panel').style.display = (editmode) ? 'block' : 'none';
-    if (editmode) {
+  togglePathEditMode(editMode, elems) {
+    const { imgPath } = this.configObj.curConfig;
+    if (editMode) {
+      $id('path_node_panel').style.removeProperty('display');
+    } else {
+      $id('path_node_panel').style.display = 'none';
+    }
+    if (editMode) {
      // Change select icon
      $id('tool_path').pressed = false;
      $id('tool_select').pressed = true;
-      $id('tool_select').setAttribute('src', './images/select_node.svg');
+      $id('tool_select').setAttribute('src', `${imgPath}/select_node.svg`);
      this.multiselected = false;
      if (elems.length) {
        this.selectedElement = elems[0];
      }
    } else {
      setTimeout(() => {
-        $id('tool_select').setAttribute('src', './images/select.svg');
+        $id('tool_select').setAttribute('src', `${imgPath}/select.svg`);
      }, 1000);
    }
  }
@@ -394,46 +399,6 @@ class Editor extends EditorStartup {
    }
  }

-  /**
-  * Set a selected image's URL.
-  * @function module:SVGthis.setImageURL
-  * @param {string} url
-  * @returns {void}
-  */
-  setImageURL(url) {
-    if (!url) {
-      url = this.defaultImageURL;
-    }
-    this.svgCanvas.setImageURL(url);
-    $id("image_url").value = url;
-
-    if (url.startsWith('data:')) {
-      // data URI found
-      $id("image_url").style.display = 'none';
-      $id("change_image_url").style.display = 'block';
-    } else {
-      // regular URL
-      const self = this;
-      const promised = this.svgCanvas.embedImage(url);
-      // eslint-disable-next-line promise/catch-or-return
-      promised
-        .then( function (dataURI) {
-          // eslint-disable-next-line promise/always-return
-          $id('url_notice').style.display = (!dataURI) ? 'block' : 'none';
-          // switch into "select" mode if we've clicked on an element
-          self.svgCanvas.setMode('select');
-          self.svgCanvas.selectOnly(self.svgCanvas.getSelectedElems(), true);
-        }, function (error) {
-          // eslint-disable-next-line no-console
-          console.log("error =", error);
-          seAlert(self.i18next.t('tools.no_embed'));
-          self.svgCanvas.deleteSelectedElements();
-        });
-      $id("image_url").style.display = 'block';
-      $id("change_image_url").style.display = 'none';
-    }
-  }
-
  /**
   *
   * @param {string} color
@@ -457,23 +422,23 @@ class Editor extends EditorStartup {
  */
  updateCanvas(center, newCtr) {
    const zoom = this.svgCanvas.getZoom();
-    const wArea = this.workarea;
+    const { workarea } = this;
    const cnvs = $id("svgcanvas");

-    let w = parseFloat(getComputedStyle(this.workarea, null).width.replace("px", "")); let h = parseFloat(getComputedStyle(this.workarea, null).height.replace("px", ""));
+    let w = parseFloat(getComputedStyle(workarea, null).width.replace("px", "")); let h = parseFloat(getComputedStyle(workarea, null).height.replace("px", ""));
    const wOrig = w; const hOrig = h;
    const oldCtr = {
-      x: wArea.scrollLeft + wOrig / 2,
-      y: wArea.scrollTop + hOrig / 2
+      x: workarea.scrollLeft + wOrig / 2,
+      y: workarea.scrollTop + hOrig / 2
    };
    const multi = this.configObj.curConfig.canvas_expansion;
    w = Math.max(wOrig, this.svgCanvas.contentW * zoom * multi);
    h = Math.max(hOrig, this.svgCanvas.contentH * zoom * multi);

    if (w === wOrig && h === hOrig) {
-      this.workarea.style.overflow = 'hidden';
+      workarea.style.overflow = 'hidden';
    } else {
-      this.workarea.style.overflow = 'scroll';
+      workarea.style.overflow = 'scroll';
    }

    const oldCanY = parseFloat(getComputedStyle(cnvs, null).height.replace("px", "")) / 2;
@@ -508,22 +473,22 @@ class Editor extends EditorStartup {

    if (center) {
      // Go to top-left for larger documents
-      if (this.svgCanvas.contentW > parseFloat(getComputedStyle(wArea, null).width.replace("px", ""))) {
+      if (this.svgCanvas.contentW > parseFloat(getComputedStyle(workarea, null).width.replace("px", ""))) {
        // Top-left
-        this.workarea.scrollLeft = offset.x - 10;
-        this.workarea.scrollTop = offset.y - 10;
+        workarea.scrollLeft = offset.x - 10;
+        workarea.scrollTop = offset.y - 10;
      } else {
        // Center
-        wArea.scrollLeft = scrollX;
-        wArea.scrollTop = scrollY;
+        workarea.scrollLeft = scrollX;
+        workarea.scrollTop = scrollY;
      }
    } else {
-      wArea.scrollLeft = newCtr.x - wOrig / 2;
-      wArea.scrollTop = newCtr.y - hOrig / 2;
+      workarea.scrollLeft = newCtr.x - wOrig / 2;
+      workarea.scrollTop = newCtr.y - hOrig / 2;
    }
    if (this.configObj.curConfig.showRulers) {
      this.rulers.updateRulers(cnvs, zoom);
-      this.workarea.scroll();
+      workarea.scroll();
    }

    if (this.configObj.urldata.storagePrompt !== true && this.storagePromptState === 'ignore') {
@@ -706,8 +671,7 @@ class Editor extends EditorStartup {
  */
  zoomChanged(win, bbox, autoCenter) {
    const scrbar = 15;
-    const wArea = this.workarea;
-    const zInfo = this.svgCanvas.setBBoxZoom(bbox, parseFloat(getComputedStyle(wArea, null).width.replace("px", "")) - scrbar, parseFloat(getComputedStyle(wArea, null).height.replace("px", "")) - scrbar);
+    const zInfo = this.svgCanvas.setBBoxZoom(bbox, parseFloat(getComputedStyle(this.workarea, null).width.replace("px", "")) - scrbar, parseFloat(getComputedStyle(this.workarea, null).height.replace("px", "")) - scrbar);
    if (!zInfo) { return; }
    const zoomlevel = zInfo.zoom;
    const bb = zInfo.bbox;
@@ -857,9 +821,10 @@ class Editor extends EditorStartup {
  * @returns {void}
  */
  pasteInCenter() {
+    const { workarea } = this;
    const zoom = this.svgCanvas.getZoom();
-    const x = (this.workarea.scrollLeft + parseFloat(getComputedStyle(this.workarea, null).width.replace("px", "")) / 2) / zoom - this.svgCanvas.contentW;
-    const y = (this.workarea.scrollTop + parseFloat(getComputedStyle(this.workarea, null).height.replace("px", "")) / 2) / zoom - this.svgCanvas.contentH;
+    const x = (workarea.scrollLeft + parseFloat(getComputedStyle(workarea, null).width.replace("px", "")) / 2) / zoom - this.svgCanvas.contentW;
+    const y = (workarea.scrollTop + parseFloat(getComputedStyle(workarea, null).height.replace("px", "")) / 2) / zoom - this.svgCanvas.contentH;
    this.svgCanvas.pasteElements('point', x, y);
  }

@@ -925,7 +890,7 @@ class Editor extends EditorStartup {
  */
  // eslint-disable-next-line class-methods-use-this
  hideSourceEditor() {
-    const $editorDialog = document.getElementById('se-svg-editor-dialog');
+    const $editorDialog = $id('se-svg-editor-dialog');
    $editorDialog.setAttribute('dialog', 'closed');
  }

@@ -934,7 +899,7 @@ class Editor extends EditorStartup {
  * @returns {void} Resolves to `undefined`
  */
  async saveSourceEditor(e) {
-    const $editorDialog = document.getElementById('se-svg-editor-dialog');
+    const $editorDialog = $id('se-svg-editor-dialog');
    if ($editorDialog.getAttribute('dialog') !== 'open') return;
    const saveChanges = () => {
      this.svgCanvas.clearSelection();
@@ -962,7 +927,7 @@ class Editor extends EditorStartup {
  */
  cancelOverlays(e) {
    if ($id("dialog_box") != null) $id("dialog_box").style.display = 'none';
-    const $editorDialog = document.getElementById('se-svg-editor-dialog');
+    const $editorDialog = $id('se-svg-editor-dialog');
    const editingsource = $editorDialog.getAttribute('dialog') === 'open';
    if (!editingsource && !this.docprops && !this.configObj.preferences) {
      if (this.curContext) {
@@ -1053,7 +1018,7 @@ class Editor extends EditorStartup {
  setLang(lang) {
    this.langChanged = true;
    this.configObj.pref('lang', lang);
-    const $editDialog = document.getElementById('se-edit-prefs');
+    const $editDialog = $id('se-edit-prefs');
    $editDialog.setAttribute('lang', lang);
    const oldLayerName = ($id('#layerlist')) ? $id('#layerlist').querySelector('tr.layersel td.layername').textContent : "";
    const renameLayer = (oldLayerName === this.i18next.t('notification.common.layer') + ' 1');
--- a/src/editor/EditorStartup.js
+++ b/src/editor/EditorStartup.js
@@ -41,7 +41,7 @@ const readySignal = () => {
  }
 };

-const { $id } = SvgCanvas;
+const { $id, $qq } = SvgCanvas;

 /**
 *
@@ -53,7 +53,7 @@ class EditorStartup {
  constructor (div) {
    this.extensionsAdded = false;
    this.messageQueue = [];
-    this.$svgEditor = div??$id('svg_editor');
+    this.$container = div??$id('svg_editor');
  }
  /**
  * Auto-run after a Promise microtask.
@@ -65,43 +65,44 @@ class EditorStartup {
      this.storage = window.localStorage;
    }
    this.configObj.load();
-    const self = this;
    const { i18next } = await putLocale(this.configObj.pref('lang'), this.goodLangs);
    this.i18next = i18next;
    await import(`./components/index.js`);
    await import(`./dialogs/index.js`);
-    // allow to prepare the dom without display
-    this.$svgEditor.style.visibility = 'hidden';
    try {
      // add editor components to the DOM
-      this.$svgEditor.append(editorTemplate.content.cloneNode(true));
+      this.$container.append(editorTemplate.content.cloneNode(true));
+      this.$svgEditor = $qq('.svg_editor');
+      // allow to prepare the dom without display
+      this.$svgEditor.style.visibility = 'hidden';
+      this.workarea = $id('workarea');
      // Image props dialog added to DOM
      const newSeImgPropDialog = document.createElement('se-img-prop-dialog');
      newSeImgPropDialog.setAttribute('id', 'se-img-prop');
-      this.$svgEditor.append(newSeImgPropDialog);
+      this.$container.append(newSeImgPropDialog);
      newSeImgPropDialog.init(this.i18next);
      // editor prefences dialoag added to DOM
      const newSeEditPrefsDialog = document.createElement('se-edit-prefs-dialog');
      newSeEditPrefsDialog.setAttribute('id', 'se-edit-prefs');
-      this.$svgEditor.append(newSeEditPrefsDialog);
+      this.$container.append(newSeEditPrefsDialog);
      newSeEditPrefsDialog.init(this.i18next);
      // canvas menu added to DOM
      const dialogBox = document.createElement('se-cmenu_canvas-dialog');
      dialogBox.setAttribute('id', 'se-cmenu_canvas');
-      this.$svgEditor.append(dialogBox);
+      this.$container.append(dialogBox);
      dialogBox.init(this.i18next);
      // alertDialog added to DOM
      const alertBox = document.createElement('se-alert-dialog');
      alertBox.setAttribute('id', 'se-alert-dialog');
-      this.$svgEditor.append(alertBox);
+      this.$container.append(alertBox);
      // promptDialog added to DOM
      const promptBox = document.createElement('se-prompt-dialog');
      promptBox.setAttribute('id', 'se-prompt-dialog');
-      this.$svgEditor.append(promptBox);
+      this.$container.append(promptBox);
      // Export dialog added to DOM
      const exportDialog = document.createElement('se-export-dialog');
      exportDialog.setAttribute('id', 'se-export-dialog');
-      this.$svgEditor.append(exportDialog);
+      this.$container.append(exportDialog);
      exportDialog.init(this.i18next);
    } catch (err) {
      console.error(err);
@@ -123,10 +124,9 @@ class EditorStartup {
    this.mainMenu.init();

    const { undoMgr } = this.svgCanvas;
-    this.workarea = document.getElementById('workarea');
-    this.canvMenu = document.getElementById('se-cmenu_canvas');
+    this.canvMenu = $id('se-cmenu_canvas');
    this.exportWindow = null;
-    this.defaultImageURL = this.configObj.curConfig.imgPath + 'logo.svg';
+    this.defaultImageURL = `${this.configObj.curConfig.imgPath}/logo.svg`;
    const zoomInIcon = 'crosshair';
    const zoomOutIcon = 'crosshair';
    this.uiContext = 'toolbars';
@@ -218,9 +218,9 @@ class EditorStartup {

    // fired when user wants to move elements to another layer
    let promptMoveLayerOnce = false;
-    $id('selLayerNames').addEventListener('change', function(evt) {
+    $id('selLayerNames').addEventListener('change', (evt) => {
      const destLayer = evt.currentTarget.options[evt.currentTarget.selectedIndex].value;
-      const confirmStr = self.i18next.t('notification.QmoveElemsToLayer').replace('%s', destLayer);
+      const confirmStr = this.i18next.t('notification.QmoveElemsToLayer').replace('%s', destLayer);
      /**
    * @param {boolean} ok
    * @returns {void}
@@ -228,9 +228,9 @@ class EditorStartup {
      const moveToLayer = (ok) => {
        if (!ok) { return; }
        promptMoveLayerOnce = true;
-        self.svgCanvas.moveSelectedToLayer(destLayer);
-        self.svgCanvas.clearSelection();
-        self.layersPanel.populateLayers();
+        this.svgCanvas.moveSelectedToLayer(destLayer);
+        this.svgCanvas.clearSelection();
+        this.layersPanel.populateLayers();
      };
      if (destLayer) {
        if (promptMoveLayerOnce) {
@@ -244,12 +244,12 @@ class EditorStartup {
        }
      }
    });
-    $id('tool_font_family').addEventListener('change', function(evt) {
-      self.svgCanvas.setFontFamily(evt.detail.value);
+    $id('tool_font_family').addEventListener('change', (evt) => {
+      this.svgCanvas.setFontFamily(evt.detail.value);
    });

-    $id('seg_type').addEventListener('change', function(evt) {
-      self.svgCanvas.setSegType(evt.currentTarget.value);
+    $id('seg_type').addEventListener('change', (evt) => {
+      this.svgCanvas.setSegType(evt.currentTarget.value);
    });

    function addListenerMulti(element, eventNames, listener) {
@@ -259,35 +259,30 @@ class EditorStartup {
      }
    }

-    addListenerMulti($id('text'), 'keyup input', function(evt){
-      self.svgCanvas.setTextContent(evt.currentTarget.value);
-    });
-    $id('image_url').addEventListener('change', function(evt) {
-      self.setImageURL(evt.currentTarget.value);
+    addListenerMulti($id('text'), 'keyup input', (evt) => {
+      this.svgCanvas.setTextContent(evt.currentTarget.value);
    });

-    $id('link_url').addEventListener('change', function(evt) {
+    $id('link_url').addEventListener('change', (evt) => {
      if (evt.currentTarget.value.length) {
-        self.svgCanvas.setLinkURL(evt.currentTarget.value);
+        this.svgCanvas.setLinkURL(evt.currentTarget.value);
      } else {
-        self.svgCanvas.removeHyperlink();
+        this.svgCanvas.removeHyperlink();
      }
    });

-    $id('g_title').addEventListener('change', function(evt) {
-      self.svgCanvas.setGroupTitle(evt.currentTarget.value);
+    $id('g_title').addEventListener('change', (evt) => {
+      this.svgCanvas.setGroupTitle(evt.currentTarget.value);
    });

-    const wArea = this.workarea;
-
    let lastX = null; let lastY = null;
    let panning = false; let keypan = false;

-    $id('svgcanvas').addEventListener('mouseup', function(evt) {
+    $id('svgcanvas').addEventListener('mouseup', (evt) => {
      if (panning === false) { return true; }

-      wArea.scrollLeft -= (evt.clientX - lastX);
-      wArea.scrollTop -= (evt.clientY - lastY);
+      this.workarea.scrollLeft -= (evt.clientX - lastX);
+      this.workarea.scrollTop -= (evt.clientY - lastY);

      lastX = evt.clientX;
      lastY = evt.clientY;
@@ -295,11 +290,11 @@ class EditorStartup {
      if (evt.type === 'mouseup') { panning = false; }
      return false;
    });
-    $id('svgcanvas').addEventListener('mousemove', function(evt) {
+    $id('svgcanvas').addEventListener('mousemove', (evt) => {
      if (panning === false) { return true; }

-      wArea.scrollLeft -= (evt.clientX - lastX);
-      wArea.scrollTop -= (evt.clientY - lastY);
+      this.workarea.scrollLeft -= (evt.clientX - lastX);
+      this.workarea.scrollTop -= (evt.clientY - lastY);

      lastX = evt.clientX;
      lastY = evt.clientY;
@@ -307,7 +302,7 @@ class EditorStartup {
      if (evt.type === 'mouseup') { panning = false; }
      return false;
    });
-    $id('svgcanvas').addEventListener('mousedown', function(evt) {
+    $id('svgcanvas').addEventListener('mousedown', (evt) => {
      if (evt.button === 1 || keypan === true) {
        panning = true;
        lastX = evt.clientX;
@@ -317,7 +312,7 @@ class EditorStartup {
      return true;
    });

-    window.addEventListener('mouseup', function() {
+    window.addEventListener('mouseup', () => {
      panning = false;
    });

@@ -415,14 +410,9 @@ class EditorStartup {
    });

    this.workarea.addEventListener('scroll', () => {
-    // TODO: jQuery's scrollLeft/Top() wouldn't require a null check
      this.rulers.manageScroll();
    });

-    $id('url_notice').addEventListener('click', () => {
-      seAlert(this.title);
-    });
-
    $id('stroke_width').value = this.configObj.curConfig.initStroke.width;
    $id('opacity').value = this.configObj.curConfig.initOpacity * 100;
    const elements = document.getElementsByClassName("push_button");
@@ -535,7 +525,11 @@ class EditorStartup {
        $id('tool_wireframe').click();
      }

-      $id('rulers').style.display = (this.configObj.curConfig.showRulers) ?  'block' : 'none';
+      if (this.configObj.curConfig.showRulers) {
+        this.rulers.display(true);
+      } else {
+        this.rulers.display(false);
+      }

      if (this.configObj.curConfig.showRulers) {
        $editDialog.setAttribute('showrulers', true);
@@ -597,12 +591,12 @@ class EditorStartup {
    */
      const editorObj = this;
      const importImage = function (e) {
-        document.getElementById('se-prompt-dialog').title = editorObj.i18next.t('notification.loadingImage');
+        $id('se-prompt-dialog').title = editorObj.i18next.t('notification.loadingImage');
        e.stopPropagation();
        e.preventDefault();
        const file = (e.type === 'drop') ? e.dataTransfer.files[0] : this.files[0];
        if (!file) {
-          document.getElementById('se-prompt-dialog').setAttribute('close', true);
+          $id('se-prompt-dialog').setAttribute('close', true);
          return;
        }

@@ -623,7 +617,7 @@ class EditorStartup {
            editorObj.svgCanvas.alignSelectedElements('c', 'page');
            // highlight imported element, otherwise we get strange empty selectbox
            editorObj.svgCanvas.selectOnly([ newElement ]);
-            document.getElementById('se-prompt-dialog').setAttribute('close', true);
+            $id('se-prompt-dialog').setAttribute('close', true);
          };
          reader.readAsText(file);
        } else {
@@ -653,7 +647,7 @@ class EditorStartup {
              editorObj.svgCanvas.alignSelectedElements('m', 'page');
              editorObj.svgCanvas.alignSelectedElements('c', 'page');
              editorObj.topPanel.updateContextPanel();
-              document.getElementById('se-prompt-dialog').setAttribute('close', true);
+              $id('se-prompt-dialog').setAttribute('close', true);
            };
            // create dummy img so we know the default dimensions
            let imgWidth = 100;
--- a/src/editor/MainMenu.js
+++ b/src/editor/MainMenu.js
@@ -45,7 +45,7 @@ class MainMenu {
   * @returns {void}
   */
  hideDocProperties() {
-    const $imgDialog = document.getElementById("se-img-prop");
+    const $imgDialog = $id("se-img-prop");
    $imgDialog.setAttribute("dialog", "close");
    $imgDialog.setAttribute("save", this.editor.configObj.pref("img_save"));
    this.editor.docprops = false;
@@ -56,7 +56,7 @@ class MainMenu {
   * @returns {void}
   */
  hidePreferences() {
-    const $editDialog = document.getElementById("se-edit-prefs");
+    const $editDialog = $id("se-edit-prefs");
    $editDialog.setAttribute("dialog", "close");
    this.editor.configObj.preferences = false;
  }
@@ -238,7 +238,7 @@ class MainMenu {
      return;
    }
    this.editor.docprops = true;
-    const $imgDialog = document.getElementById("se-img-prop");
+    const $imgDialog = $id("se-img-prop");

    // update resolution option with actual resolution
    const resolution = this.editor.svgCanvas.getResolution();
@@ -264,7 +264,7 @@ class MainMenu {
      return;
    }
    this.editor.configObj.preferences = true;
-    const $editDialog = document.getElementById("se-edit-prefs");
+    const $editDialog = $id("se-edit-prefs");
    // Update background color with current one
    const canvasBg = this.editor.configObj.curPrefs.bkgd_color;
    const url = this.editor.configObj.pref("bkgd_url");
@@ -303,27 +303,21 @@ class MainMenu {
    // add Top panel
    const template = document.createElement("template");
    const { i18next } = this.editor;
+    const { imgPath } = this.editor.configObj.curConfig;
    // eslint-disable-next-line no-unsanitized/property
    template.innerHTML = `
-    <se-menu id="main_button" label="SVG-Edit" src="./images/logo.svg" alt="logo">
-        <!-- File-like buttons: New, Save, Source -->
-        <se-menu-item id="tool_clear" label="${i18next.t('tools.new_doc')}" shortcut="N" src="./images/new.svg">
-        </se-menu-item>
-        <se-menu-item id="tool_open" label="${i18next.t('tools.open_doc')}" src="./images/open.svg">
-        </se-menu-item>
-        <se-menu-item id="tool_save" label="${i18next.t('tools.save_doc')}" shortcut="S" src="./images/saveImg.svg">
-        </se-menu-item>
-        <se-menu-item id="tool_import" label="${i18next.t('tools.import_doc')}" src="./images/importImg.svg"></se-menu-item>
-        <se-menu-item id="tool_export" label="${i18next.t('tools.export_img')}" src="./images/export.svg"></se-menu-item>
-        <se-menu-item id="tool_docprops" label="${i18next.t('tools.docprops')}" shortcut="D" src="./images/docprop.svg">
-        </se-menu-item>
-        <se-menu-item id="tool_editor_prefs" label="${i18next.t('config.editor_prefs')}" src="./images/editPref.svg">
-        </se-menu-item>
-        <se-menu-item id="tool_editor_homepage" label="${i18next.t('tools.editor_homepage')}" src="./images/logo.svg">
-        </se-menu-item>
+    <se-menu id="main_button" label="SVG-Edit" src="${imgPath}/logo.svg" alt="logo">
+        <se-menu-item id="tool_clear" label="${i18next.t('tools.new_doc')}" shortcut="N" src="${imgPath}/new.svg"></se-menu-item>
+        <se-menu-item id="tool_open" label="${i18next.t('tools.open_doc')}" src="${imgPath}/open.svg"></se-menu-item>
+        <se-menu-item id="tool_save" label="${i18next.t('tools.save_doc')}" shortcut="S" src="${imgPath}/saveImg.svg"></se-menu-item>
+        <se-menu-item id="tool_import" label="${i18next.t('tools.import_doc')}" src="${imgPath}/importImg.svg"></se-menu-item>
+        <se-menu-item id="tool_export" label="${i18next.t('tools.export_img')}" src="${imgPath}/export.svg"></se-menu-item>
+        <se-menu-item id="tool_docprops" label="${i18next.t('tools.docprops')}" shortcut="D" src="${imgPath}/docprop.svg"></se-menu-item>
+        <se-menu-item id="tool_editor_prefs" label="${i18next.t('config.editor_prefs')}" src="${imgPath}/editPref.svg"></se-menu-item>
+        <se-menu-item id="tool_editor_homepage" label="${i18next.t('tools.editor_homepage')}" src="${imgPath}/logo.svg"></se-menu-item>
    </se-menu>
       `;
-    this.editor.$svgEditor.append(template.content.cloneNode(true));
+    $id('tools_top').prepend(template.content.cloneNode(true));

    // register action to main menu entries
    /**
@@ -343,7 +337,7 @@ class MainMenu {
    $id("tool_save").addEventListener(
      "click",
      function() {
-        const $editorDialog = document.getElementById("se-svg-editor-dialog");
+        const $editorDialog = $id("se-svg-editor-dialog");
        const editingsource = $editorDialog.getAttribute("dialog") === "open";
        if (editingsource) {
          this.saveSourceEditor();
--- a/src/editor/Rulers.js
+++ b/src/editor/Rulers.js
@@ -19,15 +19,28 @@ class Rulers {
    this.editor = editor;
    // add rulers component to the DOM
    this.editor.$svgEditor.append(rulersTemplate.content.cloneNode(true));
+    const { $id } = this.svgCanvas;
+    this.rulerX = $id('ruler_x');
+    this.rulerY = $id('ruler_y');
+    this.rulerCorner = $id('ruler_corner');
+  }
+  display (on) {
+    if (on) {
+      this.rulerX.style.removeProperty('display');
+      this.rulerY.style.removeProperty('display');
+      this.rulerCorner.style.removeProperty('display');
+    } else {
+      this.rulerX.style.display = 'none';
+      this.rulerY.style.display = 'none';
+      this.rulerCorner.style.display = 'none';
+    }
  }
  /**
   * @type {Module}
  */
  manageScroll () {
-    const rulerX = document.getElementById('ruler_x');
-    const rulerY = document.getElementById('ruler_y');
-    if (rulerX) rulerX.scrollLeft = this.editor.workarea.scrollLeft;
-    if (rulerY) rulerY.scrollTop = this.editor.workarea.scrollTop;
+    if (this.rulerX) this.rulerX.scrollLeft = this.editor.workarea.scrollLeft;
+    if (this.rulerY) this.rulerY.scrollTop = this.editor.workarea.scrollTop;
  }

  /**
--- a/src/editor/components/seButton.js
+++ b/src/editor/components/seButton.js
@@ -1,7 +1,5 @@
-// import {isMac} from '../../common/browser.js';
-// if (isMac() && !window.opera) 'Ctrl+' 'Cmd+'
-
 const template = document.createElement('template');
+// eslint-disable-next-line no-unsanitized/property
 template.innerHTML = `
  <style>
  :host(:hover) :not(.disabled)
@@ -38,7 +36,7 @@ template.innerHTML = `
  }
  </style>
  <div title="title">
-    <img src="./images/logo.svg" alt="icon">
+    <img alt="icon">
  </div>
 `;
 /**
--- a/src/editor/components/seColorPicker.js
+++ b/src/editor/components/seColorPicker.js
@@ -404,9 +404,6 @@ div.jGraduate_StopSection {
  text-align: center;
 }

-
-
-
 input.jGraduate_Ok, input.jGraduate_Cancel {
  display: block;
  width: 100px;
@@ -421,7 +418,7 @@ input.jGraduate_Ok {
  float: left;
  height: 16px;
  width: 16px;
-  border: 1px solid #808080;
+  border: 1px solid var(--border-color);
  cursor: pointer;
  margin: 4px 4px 4px 30px;
 }
@@ -637,11 +634,11 @@ div.jGraduate_Slider img {
  }
  #color_picker {
    z-index: 1000;
-    top: -350px;
+    top: 60%;
  }
  </style>
  <div id="picker">
-      <img src="./images/logo.svg" alt="icon" id="logo">
+      <img src="logo.svg" alt="icon" id="logo">
      <label for="color" title="" id="label"></label>
      <div id="block">
      </div>
--- a/src/editor/components/seDropdown.js
+++ b/src/editor/components/seDropdown.js
@@ -15,7 +15,7 @@ class Dropdown extends ListComboBox {
  get [defaultState] () {
    return Object.assign(super[defaultState], {
      inputPartType: NumberSpinBox,
-      src: './images/logo.svg',
+      src: "logo.svg",
      inputsize: '100%'
    });
  }
@@ -28,7 +28,7 @@ class Dropdown extends ListComboBox {
    const source = result.content.getElementById('source');
    // add a icon before our dropdown
    source.prepend(fragmentFrom.html`
-      <img src="./images/logo.svg" alt="icon" width="18" height="18"></img>
+      <img src="dropdown.svg" alt="icon" width="18" height="18"></img>
      `.cloneNode(true));
    // change the style so it fits in our toolbar
    result.content.append(
--- a/src/editor/components/seExplorerButton.js
+++ b/src/editor/components/seExplorerButton.js
@@ -85,7 +85,7 @@ template.innerHTML = `

  <div class="overall">
    <div class="menu-button">
-      <img class="button-icon" src="./images/logo.svg" alt="icon">
+      <img class="button-icon" src="explorer.svg" alt="icon">
      <div class="handle"></div>
    </div>
    <div class="image-lib"">
--- a/src/editor/components/seFlyingButton.js
+++ b/src/editor/components/seFlyingButton.js
@@ -71,7 +71,7 @@ template.innerHTML = `
  <slot></slot>
 </div>
    <div class="menu-button">
-      <img class="button-icon" src="./images/logo.svg" alt="icon">
+      <img class="button-icon" src="logo.svg" alt="icon">
      <div class="handle"></div>
    </div>
   
--- a/src/editor/components/seInput.js
+++ b/src/editor/components/seInput.js
@@ -3,6 +3,11 @@ import 'elix/define/Input.js';
 const template = document.createElement('template');
 template.innerHTML = `
  <style>
+  div {
+    height: 24px;
+    margin: 5px 1px;
+    padding: 3px;
+  }
  img {
    top: 2px;
    left: 4px;
@@ -20,9 +25,11 @@ template.innerHTML = `
    border-radius: 3px;
  }
  </style>
-  <img src="./images/logo.svg" alt="icon" width="12" height="12" />
+  <div>
+  <img alt="icon" width="12" height="12" />
  <span id="label">label</span>
  <elix-input></elix-input>
+  </div>
 `;

 /**
--- a/src/editor/components/seList.js
+++ b/src/editor/components/seList.js
@@ -4,7 +4,7 @@ const template = document.createElement('template');
 template.innerHTML = `
 <style>
 elix-dropdown-list {
-  margin: 1px;
+  margin-top: 10px;
 }

 elix-dropdown-list:hover {
--- a/src/editor/components/seMenuItem.js
+++ b/src/editor/components/seMenuItem.js
@@ -7,7 +7,7 @@ template.innerHTML = `
  </style>
  <elix-menu-item>
    <div style="display:flex; align-items: center;">
-      <img src="./images/logo.svg" alt="icon" style="display:none;" width="24"/>
+      <img src="logo.svg" alt="icon" style="display:none;" width="24"/>
      <span style="margin-left: 7px;"></span>
    </div>
  </elix-menu-item>
--- a/src/editor/components/sePalette.js
+++ b/src/editor/components/sePalette.js
@@ -24,10 +24,7 @@ template.innerHTML = `
  }
  #palette_holder {
    overflow: hidden;
-    padding: 5px;
-    position: absolute;
-    right: 15px;
-    height: 16px;
+    padding: 4px;
    background: #f0f0f0;
    border-radius: 3px;
    z-index: 2;
@@ -48,33 +45,7 @@ template.innerHTML = `
  div.palette_item:first-child {
    background: white;
  }
-  @media screen and (max-width:1100px) {
-    #palette_holder {
-      left: 410px;
-      overflow-x: scroll;
-      padding: 0 5px;
-      margin-top: 2px;
-      height: 22px;
-    }
-  } 
-  @media screen and (max-width:1250px) {
-    #palette_holder {
-      left: 560px;
-      overflow-x: scroll;
-      padding: 0 5px;
-      margin-top: 2px;
-      height: 22px;
-    }
-  }
-  @media screen and (max-width:540px) {
-    #palette_holder {
-      left: 0px;
-      overflow-x: scroll;
-      padding: 0 5px;
-      margin-top: 32px;
-      height: 22px;
-    }
-  }   
+  
  </style>
  <div id="palette_holder" title="">
    <div id="js-se-palette">
--- a/src/editor/components/sePlainBorderButton.js
+++ b/src/editor/components/sePlainBorderButton.js
@@ -18,7 +18,7 @@ class SePlainBorderButton extends PlainButton {
      fragmentFrom.html`
        <style>
          [part~="button"] {
-            background: #72797A;
+            background: var(--main-bg-color);
            border: 1px solid #ccc;
          }
        </style>
--- a/src/editor/components/seSpinInput.js
+++ b/src/editor/components/seSpinInput.js
@@ -3,18 +3,22 @@ import '../dialogs/se-elix/define/NumberSpinBox.js';
 const template = document.createElement('template');
 template.innerHTML = `
  <style>
+  div {
+    height: 24px;
+    margin: 5px 1px;
+    padding: 3px;
+  }
  img {
    position: relative;
    right: -4px;
  }
  span {
-    bottom: -3px;
+    bottom: -0.5em;
    right: -4px;
    position: relative;
-    margin-left: 4px;
-    margin-right: 4px;
+    margin-left: -4px;
+    margin-right: 1px;
    color: #fff;
-    vertical-align: ;
  }
  elix-number-spin-box {
    background-color: var(--input-color);
@@ -34,9 +38,11 @@ template.innerHTML = `
    height: 24px;
  }
  </style>
-  <img src="./images/logo.svg" alt="icon" width="24" height="24" aria-labelledby="label" />
+  <div>
+  <img alt="icon" width="24" height="24" aria-labelledby="label" />
  <span id="label">label</span>
  <elix-number-spin-box min="1" step="1"></elix-number-spin-box>
+  </div>
 `;

 /**
--- a/src/editor/components/seZoom.js
+++ b/src/editor/components/seZoom.js
@@ -14,7 +14,7 @@ class Zoom extends ListComboBox {
  get [internal.defaultState] () {
    return Object.assign(super[internal.defaultState], {
      inputPartType: NumberSpinBox,
-      src: './images/logo.svg',
+      src: 'logo.svg',
      inputsize: '100%'
    });
  }
@@ -27,7 +27,8 @@ class Zoom extends ListComboBox {
    const source = result.content.getElementById('source');
    // add a icon before our dropdown
    source.prepend(fragmentFrom.html`
-      <img src="./images/logo.svg" alt="icon" width="18" height="18"></img>
+      <img src="zoom" alt="icon" width="18" height="18">
+      </img>
      `.cloneNode(true));
    // change the style so it fits in our toolbar
    result.content.append(
@@ -39,9 +40,6 @@ class Zoom extends ListComboBox {
        ::slotted(*) {
          padding: 4px;
          width: 100%;
-          background-color: var(--icon-bg-color);
-          color: #fff;
-        }
        }
        [part~="popup"] {
          width: 150%;
@@ -167,22 +165,3 @@ class Zoom extends ListComboBox {

 // Register
 customElements.define('se-zoom', Zoom);
-
-/*
-{TODO
-    min: 0.001, max: 10000, step: 50, stepfunc: stepZoom,
-  function stepZoom (elem, step) {
-    const origVal = Number(elem.value);
-    if (origVal === 0) { return 100; }
-    const sugVal = origVal + step;
-    if (step === 0) { return origVal; }
-
-    if (origVal >= 100) {
-      return sugVal;
-    }
-    if (sugVal >= origVal) {
-      return origVal * 2;
-    }
-    return origVal / 2;
-  }
-*/
--- a/src/editor/dialogs/editorPreferencesDialog.js
+++ b/src/editor/dialogs/editorPreferencesDialog.js
@@ -21,7 +21,7 @@ template.innerHTML = `
    padding:5px 10px 5px 7px; /* Firefox */
    line-height:17px; /* Safari */
    margin: 5px 20px 0 0;
-    border: 1px #808080 solid;
+    border: 1px var(--border-color) solid;
    border-top-color: #FFF;
    border-left-color: #FFF;
    border-radius: 5px;
--- a/src/editor/extensions/ext-connector/ext-connector.js
+++ b/src/editor/extensions/ext-connector/ext-connector.js
@@ -31,6 +31,7 @@ export default {
    const { svgCanvas } = svgEditor;
    const { getElem, $id, mergeDeep } = svgCanvas;
    const { svgroot } = S;
+    const { imgPath } = svgEditor.configObj.curConfig;
    const addElem = svgCanvas.addSVGElementFromJson;
    const selManager = S.selectorManager;
    await loadExtensionTranslation(svgEditor);
@@ -216,7 +217,7 @@ export default {
            );
            dataStorage.put(ethis, 'c_' + pos, part.id);
            dataStorage.put(ethis, pos + '_bb', svgCanvas.getStrokedBBox([ part ]));
-          } else part = document.getElementById(part);
+          } else part = $id(part);
          parts.push(part);
        }, ethis);

@@ -355,14 +356,12 @@ export default {
    };

    return {
-      /** @todo JFH special flag */
-      newUI: true,
      name: svgEditor.i18next.t(`${name}:name`),
      callback() {
        const btitle = svgEditor.i18next.t(`${name}:langListTitle`);
        // eslint-disable-next-line no-unsanitized/property
        const buttonTemplate = `
-        <se-button id="mode_connect" title="${btitle}" src="./images/conn.svg"></se-button>
+        <se-button id="mode_connect" title="${btitle}" src="${imgPath}/conn.svg"></se-button>
        `;
        svgCanvas.insertChildAtIndex($id('tools_left'), buttonTemplate, 13);
        $id('mode_connect').addEventListener("click", () => {
--- a/src/editor/extensions/ext-eyedropper/ext-eyedropper.js
+++ b/src/editor/extensions/ext-eyedropper/ext-eyedropper.js
@@ -29,6 +29,7 @@ export default {
  name,
  async init(S) {
    const svgEditor = this;
+    const { imgPath } = svgEditor.configObj.curConfig;
    await loadExtensionTranslation(svgEditor);
    const { ChangeElementCommand } = S; // , svgcontent,
    // svgdoc = S.svgroot.parentNode.ownerDocument,
@@ -86,7 +87,7 @@ export default {
        const key = svgEditor.i18next.t(`${name}:buttons.0.key`);
        // eslint-disable-next-line no-unsanitized/property
        const buttonTemplate = `
-        <se-button id="tool_eyedropper" title="${title}" src="./images/eye_dropper.svg" shortcut=${key}></se-button>
+        <se-button id="tool_eyedropper" title="${title}" src="${imgPath}/eye_dropper.svg" shortcut=${key}></se-button>
        `;
        svgCanvas.insertChildAtIndex($id('tools_left'), buttonTemplate, 12);
        $id('tool_eyedropper').addEventListener("click", () => {
--- a/src/editor/extensions/ext-grid/ext-grid.js
+++ b/src/editor/extensions/ext-grid/ext-grid.js
@@ -28,10 +28,11 @@ export default {
  name,
  async init ({ NS, getTypeMap }) {
    const svgEditor = this;
+    const { imgPath } = svgEditor.configObj.curConfig;
    await loadExtensionTranslation(svgEditor);
    const { svgCanvas } = svgEditor;
    const { $id } = svgCanvas;
-    const svgdoc = document.getElementById('svgcanvas').ownerDocument;
+    const svgdoc = $id('svgcanvas').ownerDocument;
    const { assignAttributes } = svgCanvas;
    const hcanvas = document.createElement('canvas');
    const canvBG = $id('canvasBackground');
@@ -153,7 +154,7 @@ export default {
        updateGrid(svgCanvas.getZoom());
      }
      $id('canvasGrid').style.display = (showGrid) ? 'block' : 'none';
-      document.getElementById('view_grid').pressed = showGrid;
+      $id('view_grid').pressed = showGrid;
    };
    return {
      name: svgEditor.i18next.t(`${name}:name`),
@@ -167,14 +168,13 @@ export default {

        // eslint-disable-next-line no-unsanitized/property
        buttonTemplate.innerHTML = `
-          <se-button id="view_grid" title="${title}" src="./images/grid.svg"></se-button>
+          <se-button id="view_grid" title="${title}" src="${imgPath}/grid.svg"></se-button>
        `;
        $id('editor_panel').append(buttonTemplate.content.cloneNode(true));
        $id('view_grid').addEventListener("click", () => {
          svgEditor.configObj.curConfig.showGrid = showGrid = !showGrid;
          gridUpdate();
        });
-
        if (showGrid) {
          gridUpdate();
        }
--- a/src/editor/extensions/ext-helloworld/ext-helloworld.js
+++ b/src/editor/extensions/ext-helloworld/ext-helloworld.js
@@ -34,6 +34,7 @@ export default {
  name,
  async init ({ _importLocale }) {
    const svgEditor = this;
+    const { imgPath } = svgEditor.configObj.curConfig;
    await loadExtensionTranslation(svgEditor);
    const { svgCanvas } = svgEditor;
    const { $id } = svgCanvas;
@@ -45,7 +46,7 @@ export default {
        const title = svgEditor.i18next.t(`${name}:buttons.0.title`);
        // eslint-disable-next-line no-unsanitized/property
        buttonTemplate.innerHTML = `
-        <se-button id="hello_world" title="${title}" src="./images/hello_world.svg"></se-button>
+        <se-button id="hello_world" title="${title}" src="${imgPath}/hello_world.svg"></se-button>
        `;
        $id('tools_left').append(buttonTemplate.content.cloneNode(true));
        $id('hello_world').addEventListener("click", () => {
--- a/src/editor/extensions/ext-imagelib/ext-imagelib.js
+++ b/src/editor/extensions/ext-imagelib/ext-imagelib.js
@@ -31,6 +31,9 @@ export default {
  async init({ decode64, dropXMLInternalSubset }) {
    const svgEditor = this;
    const { $id } = svgEditor.svgCanvas;
+    const { $svgEditor } = svgEditor;
+    const { imgPath } = svgEditor.configObj.curConfig;
+
    await loadExtensionTranslation(svgEditor);

    const { svgCanvas } = svgEditor;
@@ -405,7 +408,7 @@ export default {
        const div = document.createElement('div');
        div.id = 'imgbrowse_holder';
        div.innerHTML = '<div id=imgbrowse class=toolbar_button></div>';
-        insertAfter($id('svg_editor'), div);
+        insertAfter($svgEditor, div);
        browser = $id('imgbrowse');

        const allLibs = svgEditor.i18next.t(`${name}:select_lib`);
@@ -446,7 +449,7 @@ export default {
        const back = document.createElement('button');
        back.style.visibility = "hidden";
        // eslint-disable-next-line max-len
-        back.innerHTML = '<img class="svg_icon" src="./images/library.svg" alt="icon" width="16" height="16" />' + svgEditor.i18next.t(`${name}:show_list`);
+        back.innerHTML = `<img class="svg_icon" src="${imgPath}/library.svg" alt="icon" width="16" height="16" />` + svgEditor.i18next.t(`${name}:show_list`);
        leftBlock.appendChild(back);
        back.addEventListener('click', function () {
          frame.setAttribute('src', 'about:blank');
@@ -520,7 +523,7 @@ export default {
        // Add the button and its handler(s)
        const buttonTemplate = document.createElement("template");
        buttonTemplate.innerHTML = `
-        <se-menu-item id="tool_imagelib" label="Image library" src="./images/library.svg"></se-menu-item>
+        <se-menu-item id="tool_imagelib" label="Image library" src="${imgPath}/library.svg"></se-menu-item>
        `;
        insertAfter($id('tool_export'), buttonTemplate.content.cloneNode(true));
        $id('tool_imagelib').addEventListener("click", () => {
--- a/src/editor/extensions/ext-imagelib/index.html
+++ b/src/editor/extensions/ext-imagelib/index.html
@@ -1,22 +1,22 @@
 <!DOCTYPE html>
 <html>
+
 <head>
    <meta charset="utf-8" />
    <title>-</title>
    <link rel="icon" type="image/png" href="../../images/logo.svg" />
-
-    <!-- Lacking browser support -->
-    <script nomodule="" src="../../redirect-on-no-module-support.js"></script>
-    <script type="module" src="../../redirect-on-lacking-support.js"></script>
-
    <script type="module" src="index.js"></script>
 </head>
+
 <body>
-
-<h1>Select an image:</h1>
-<a href="smiley.svg">smiley.svg</a>
-<br/>
-<a href="../../images/logo.svg">logo.svg</a>
-
+    <h1>Select an image:</h1>
+    <a href="smiley.svg">
+        <img src="smiley.svg" width="48" height="48" alt="smiley.svg" />
+    </a>
+    <br />
+    <a href="../../images/logo.svg">
+        <img src="../../images/logo.svg" width="48" height="48" alt="logo.svg" />
+    </a>
 </body>
-</html>
+
+</html>
--- a/src/editor/extensions/ext-overview_window/ext-overview_window.js
+++ b/src/editor/extensions/ext-overview_window/ext-overview_window.js
@@ -11,29 +11,20 @@ import { dragmove } from './dragmove/dragmove.js';

 export default {
  name: 'overview_window',
-  init ({ _$, isChrome }) {
+  init ({ _$ }) {
    const svgEditor = this;
    const { $id } = svgEditor.svgCanvas;
    const overviewWindowGlobals = {};
-    // Disabled in Chrome 48-, see https://github.com/SVG-Edit/svgedit/issues/26 and
-    // https://code.google.com/p/chromium/issues/detail?id=565120.
-    if (isChrome()) {
-      const verIndex = navigator.userAgent.indexOf('Chrome/') + 7;
-      const chromeVersion = Number.parseInt(navigator.userAgent.substring(verIndex));
-      if (chromeVersion < 49) {
-        return undefined;
-      }
-    }

    // Define and insert the base html element.
    const propsWindowHtml =
      '<div id="overview_window_content_pane" style="width:100%; ' +
        'word-wrap:break-word;  display:inline-block; margin-top:20px;">' +
        '<div id="overview_window_content" style="position:relative; ' +
-          'left:12px; top:0px;">' +
+          'left:15px; top:0px;">' +
          '<div style="background-color:#A0A0A0; display:inline-block; ' +
            'overflow:visible;">' +
-            '<svg id="overviewMiniView" width="150" height="100" x="0" ' +
+            '<svg id="overviewMiniView" width="132" height="100" x="0" ' +
              'y="0" viewBox="0 0 4800 3600" ' +
                'xmlns="http://www.w3.org/2000/svg" ' +
                'xmlns:xlink="http://www.w3.org/1999/xlink">' +
@@ -47,15 +38,15 @@ export default {
        '</div>' +
      '</div>';
    // eslint-disable-next-line no-unsanitized/method
-    $id("sidepanels").insertAdjacentHTML( 'beforeend', propsWindowHtml );
+    $id("sidepanel_content").insertAdjacentHTML( 'beforeend', propsWindowHtml );

    // Define dynamic animation of the view box.
    const updateViewBox = function () {
-      const warea = document.getElementById('workarea');
-      const portHeight = parseFloat(getComputedStyle(warea, null).height.replace("px", ""));
-      const portWidth = parseFloat(getComputedStyle(warea, null).width.replace("px", ""));
-      const portX = warea.scrollLeft;
-      const portY = warea.scrollTop;
+      const { workarea } = svgEditor;
+      const portHeight = parseFloat(getComputedStyle(workarea, null).height.replace("px", ""));
+      const portWidth = parseFloat(getComputedStyle(workarea, null).width.replace("px", ""));
+      const portX = workarea.scrollLeft;
+      const portY = workarea.scrollTop;
      const windowWidth = parseFloat(getComputedStyle($id("svgcanvas"), null).width.replace("px", ""));
      const windowHeight = parseFloat(getComputedStyle($id("svgcanvas"), null).height.replace("px", ""));
      const overviewWidth = parseFloat(getComputedStyle($id("overviewMiniView"), null).width.replace("px", ""));
@@ -71,12 +62,12 @@ export default {
      $id("overview_window_view_box").style.top = viewBoxY + 'px';
      $id("overview_window_view_box").style.left = viewBoxX + 'px';
    };
-    document.getElementById('workarea').addEventListener('scroll', () => {
+    $id('workarea').addEventListener('scroll', () => {
      if (!(overviewWindowGlobals.viewBoxDragging)) {
        updateViewBox();
      }
    });
-    document.getElementById('workarea').addEventListener('resize', updateViewBox);
+    $id('workarea').addEventListener('resize', updateViewBox);
    updateViewBox();

    // Compensate for changes in zoom and canvas size.
--- a/src/editor/extensions/ext-panning/ext-panning.js
+++ b/src/editor/extensions/ext-panning/ext-panning.js
@@ -31,6 +31,8 @@ export default {
  name,
  async init() {
    const svgEditor = this;
+    const { imgPath } = svgEditor.configObj.curConfig;
+
    await loadExtensionTranslation(svgEditor);
    const {
      svgCanvas
@@ -42,7 +44,6 @@ export default {
      referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
    };
    return {
-      newUI: true,
      name: svgEditor.i18next.t(`${name}:name`),
      callback() {
        const btitle = svgEditor.i18next.t(`${name}:buttons.0.title`);
@@ -50,7 +51,7 @@ export default {
        const buttonTemplate = document.createElement("template");
        // eslint-disable-next-line no-unsanitized/property
        buttonTemplate.innerHTML = `
-        <se-button id="ext-panning" title="${btitle}" src="./images/panning.svg"></se-button>
+        <se-button id="ext-panning" title="${btitle}" src="${imgPath}/panning.svg"></se-button>
        `;
        insertAfter($id('tool_zoom'), buttonTemplate.content.cloneNode(true));
        $id('ext-panning').addEventListener("click", () => {
--- a/src/editor/extensions/ext-polystar/ext-polystar.js
+++ b/src/editor/extensions/ext-polystar/ext-polystar.js
@@ -29,6 +29,7 @@ export default {
  name,
  async init(_S) {
    const svgEditor = this;
+    const { imgPath } = svgEditor.configObj.curConfig;
    const { ChangeElementCommand } = _S; // , svgcontent,
    const addToHistory = function (cmd) { svgCanvas.undoMgr.addCommandToHistory(cmd); };
    const { svgCanvas } = svgEditor;
@@ -44,7 +45,11 @@ export default {
     * @returns {void}
     */
    const showPanel = (on, tool) => {
-      $id(`${tool}_panel`).style.display = on ? "block" : "none";
+      if (on) {
+        $id(`${tool}_panel`).style.removeProperty('display');
+      } else {
+        $id(`${tool}_panel`).style.display = 'none';
+      }
    };

    /**
@@ -82,9 +87,9 @@ export default {
        // eslint-disable-next-line no-unsanitized/property
        const buttonTemplate = `
            <se-flyingbutton id="tools_polygon" title="${fbtitle}">
-              <se-button id="tool_star" title="${title_star}" src="./images/star.svg">
+              <se-button id="tool_star" title="${title_star}" src="${imgPath}/star.svg">
              </se-button>
-              <se-button id="tool_polygon" title="${title_polygon}" src="./images/polygon.svg">
+              <se-button id="tool_polygon" title="${title_polygon}" src="${imgPath}/polygon.svg">
              </se-button>
            </se-flyingbutton>
          `;
@@ -253,9 +258,9 @@ export default {
              cy: opts.start_y,
              id: svgCanvas.getNextId(),
              shape: "star",
-              point: document.getElementById("starNumPoints").value,
+              point: $id("starNumPoints").value,
              r: 0,
-              radialshift: document.getElementById("radialShift").value,
+              radialshift: $id("radialShift").value,
              r2: 0,
              orient: "point",
              fill: rgb,
@@ -282,7 +287,7 @@ export default {
              cy: opts.start_y,
              id: svgCanvas.getNextId(),
              shape: "regularPoly",
-              sides: document.getElementById("polySides").value,
+              sides: $id("polySides").value,
              orient: "x",
              edge: 0,
              fill: rgb,
--- a/src/editor/extensions/ext-shapes/ext-shapes.js
+++ b/src/editor/extensions/ext-shapes/ext-shapes.js
@@ -27,6 +27,7 @@ export default {
  name,
  async init () {
    const svgEditor = this;
+    const { imgPath } = svgEditor.configObj.curConfig;
    const canv = svgEditor.svgCanvas;
    const { $id } = canv;
    const svgroot = canv.getRootElem();
@@ -46,7 +47,7 @@ export default {
          // eslint-disable-next-line no-unsanitized/property
          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>
+          src="${imgPath}/shapelib.svg"></se-explorerbutton>
          `;
          canv.insertChildAtIndex($id('tools_left'), buttonTemplate, 9);
          $id('tool_shapelib').addEventListener("click", () => {
--- a/src/editor/extensions/ext-storage/ext-storage.js
+++ b/src/editor/extensions/ext-storage/ext-storage.js
@@ -82,7 +82,7 @@ export default {
    // storageDialog added to DOM
    const storageBox = document.createElement('se-storage-dialog');
    storageBox.setAttribute('id', 'se-storage-dialog');
-    svgEditor.$svgEditor.append(storageBox);
+    svgEditor.$container.append(storageBox);
    storageBox.init(svgEditor.i18next);

    // manage the change in the storageDialog
--- a/src/editor/index.html
+++ b/src/editor/index.html
@@ -25,7 +25,7 @@
  <script type="module">
    /* for available options see the file `docs/tutorials/ConfigOptions.md */
    import Editor from './Editor.js';
-    const svgEditor = new Editor(document.getElementsByClassName('svg_editor')[0]);
+    const svgEditor = new Editor(document.getElementById('container'));
    svgEditor.init();
    svgEditor.setConfig({
      allowInitialUserOverride: true,
@@ -51,7 +51,9 @@
 </head>

 <body>
-  <div class="svg_editor" role="main"></div>
+  <h1>SVGEdit</h1>
+  <div id="container" style="width:100%;height:550px"></div>
+  <h1>End</h1>
 </body>

 </html>
--- a/src/editor/locale/lang.af.js
+++ b/src/editor/locale/lang.af.js
@@ -20,7 +20,7 @@ export default {
    toggle_stroke_tools: 'Show/hide more stroke tools',
    palette_info: 'Klik om te verander vul kleur, verskuiwing klik om &#39;n beroerte kleur verander',
    zoom_level: 'Change zoom vlak',
-    panel_drag: 'Drag left/right to resize side panel',
+    panel_action: 'Click to open side panel',
    quality: 'Quality:',
    pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
    pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
--- a/src/editor/locale/lang.ar.js
+++ b/src/editor/locale/lang.ar.js
@@ -20,7 +20,7 @@ export default {
    toggle_stroke_tools: 'Show/hide more stroke tools',
    palette_info: 'انقر لتغيير لون التعبئة ، تحولا مزدوجا فوق لتغيير لون السكتة الدماغية',
    zoom_level: 'تغيير مستوى التكبير',
-    panel_drag: 'Drag left/right to resize side panel',
+    panel_action: 'Click to open side panel',
    quality: 'Quality:',
    pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
    pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
--- a/src/editor/locale/lang.az.js
+++ b/src/editor/locale/lang.az.js
@@ -20,7 +20,7 @@ export default {
    toggle_stroke_tools: 'Show/hide more stroke tools',
    palette_info: 'Click to change fill color, shift-click to change stroke color',
    zoom_level: 'Change zoom level',
-    panel_drag: 'Drag left/right to resize side panel',
+    panel_action: 'Click to open side panel',
    quality: 'Quality:',
    pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
    pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
--- a/src/editor/locale/lang.be.js
+++ b/src/editor/locale/lang.be.js
@@ -20,7 +20,7 @@ export default {
    toggle_stroke_tools: 'Show/hide more stroke tools',
    palette_info: 'Націсніце для змены колеру залівання, Shift-Click змяніць обводка',
    zoom_level: 'Змяненне маштабу',
-    panel_drag: 'Drag left/right to resize side panel',
+    panel_action: 'Click to open side panel',
    quality: 'Quality:',
    pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
    pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
--- a/src/editor/locale/lang.bg.js
+++ b/src/editor/locale/lang.bg.js
@@ -20,7 +20,7 @@ export default {
    toggle_stroke_tools: 'Show/hide more stroke tools',
    palette_info: 'Кликнете, за да промени попълнете цвят, на смени, кликнете да променят цвета си удар',
    zoom_level: 'Промяна на ниво на мащабиране',
-    panel_drag: 'Drag left/right to resize side panel',
+    panel_action: 'Click to open side panel',
    quality: 'Quality:',
    pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
    pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
--- a/src/editor/locale/lang.ca.js
+++ b/src/editor/locale/lang.ca.js
@@ -20,7 +20,7 @@ export default {
    toggle_stroke_tools: 'Show/hide more stroke tools',
    palette_info: 'Feu clic per canviar el color de farciment, shift-clic per canviar el color del traç',
    zoom_level: 'Canviar el nivell de zoom',
-    panel_drag: 'Drag left/right to resize side panel',
+    panel_action: 'Click to open side panel',
    quality: 'Quality:',
    pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
    pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
--- a/src/editor/locale/lang.cs.js
+++ b/src/editor/locale/lang.cs.js
@@ -20,7 +20,7 @@ export default {
    toggle_stroke_tools: 'Zobrazit/schovat více možností',
    palette_info: 'Kliknutím změníte barvu výplně, kliknutím současně s klávesou shift změníte barvu čáry',
    zoom_level: 'Změna přiblížení',
-    panel_drag: 'Drag left/right to resize side panel',
+    panel_action: 'Click to open side panel',
    quality: 'Quality:',
    pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
    pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
--- a/src/editor/locale/lang.cy.js
+++ b/src/editor/locale/lang.cy.js
@@ -20,7 +20,7 @@ export default {
    toggle_stroke_tools: 'Show/hide more stroke tools',
    palette_info: 'Cliciwch yma i lenwi newid lliw, sifft-cliciwch i newid lliw strôc',
    zoom_level: 'Newid lefel chwyddo',
-    panel_drag: 'Drag left/right to resize side panel',
+    panel_action: 'Click to open side panel',
    quality: 'Quality:',
    pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
    pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
--- a/src/editor/locale/lang.da.js
+++ b/src/editor/locale/lang.da.js
@@ -20,7 +20,7 @@ export default {
    toggle_stroke_tools: 'Show/hide more stroke tools',
    palette_info: 'Klik for at ændre fyldfarve, shift-klik for at ændre stregfarve',
    zoom_level: 'Skift zoomniveau',
-    panel_drag: 'Drag left/right to resize side panel',
+    panel_action: 'Click to open side panel',
    quality: 'Quality:',
    pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
    pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
--- a/src/editor/locale/lang.de.js
+++ b/src/editor/locale/lang.de.js
@@ -20,7 +20,7 @@ export default {
    toggle_stroke_tools: 'Zeige/Verberge weitere Linien-Werkzeuge',
    palette_info: 'Klick zum Ändern der Füllfarbe, Shift-Klick zum Ändern der Linienfarbe',
    zoom_level: 'vergrößern',
-    panel_drag: 'Nach links/rechts ziehen, um die Größe vom Seitenpanel zu ändern',
+    panel_action: 'Click to open side panel',
    quality: 'Quality:',
    pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
    pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
--- a/src/editor/locale/lang.el.js
+++ b/src/editor/locale/lang.el.js
@@ -20,7 +20,7 @@ export default {
    toggle_stroke_tools: 'Show/hide more stroke tools',
    palette_info: 'Κάντε κλικ για να συμπληρώσετε την αλλαγή χρώματος, στροφή κλικ για να αλλάξετε το χρώμα εγκεφαλικό',
    zoom_level: 'Αλλαγή επίπεδο μεγέθυνσης',
-    panel_drag: 'Drag left/right to resize side panel',
+    panel_action: 'Click to open side panel',
    quality: 'Quality:',
    pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
    pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
--- a/src/editor/locale/lang.en.js
+++ b/src/editor/locale/lang.en.js
@@ -20,7 +20,8 @@ export default {
    toggle_stroke_tools: 'Show/hide more stroke tools',
    palette_info: 'Click to change fill color, shift-click to change stroke color',
    zoom_level: 'Change zoom level',
-    panel_drag: 'Drag left/right to resize side panel',
+    panel: 'Panel',
+    panel_action: 'Click to open side panel',
    quality: 'Quality:',
    pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
    pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
--- a/src/editor/locale/lang.es.js
+++ b/src/editor/locale/lang.es.js
@@ -20,7 +20,7 @@ export default {
    toggle_stroke_tools: 'Mostrar/ocultar herramientas de trazo adicionales',
    palette_info: 'Haga clic para cambiar el color de relleno. Pulse Mayús y haga clic para cambiar el color del contorno.',
    zoom_level: 'Cambiar el nivel de zoom',
-    panel_drag: 'Drag left/right to resize side panel',
+    panel_action: 'Click to open side panel',
    quality: 'Quality:',
    pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
    pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
--- a/src/editor/locale/lang.et.js
+++ b/src/editor/locale/lang.et.js
@@ -20,7 +20,7 @@ export default {
    toggle_stroke_tools: 'Show/hide more stroke tools',
    palette_info: 'Click muuta täitke värvi, Shift-nuppu, et muuta insult värvi',
    zoom_level: 'Muuda suumi taset',
-    panel_drag: 'Drag left/right to resize side panel',
+    panel_action: 'Click to open side panel',
    quality: 'Quality:',
    pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
    pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
--- a/src/editor/locale/lang.fa.js
+++ b/src/editor/locale/lang.fa.js
@@ -20,7 +20,7 @@ export default {
    toggle_stroke_tools: 'Show/hide more stroke tools',
    palette_info: '‫برای تغییر رنگ، کلیک کنید. برای تغییر رنگ لبه، کلید تبدیل (shift) را فشرده و کلیک کنید‬',
    zoom_level: '‫تغییر بزرگ نمایی‬',
-    panel_drag: 'Drag left/right to resize side panel',
+    panel_action: 'Click to open side panel',
    quality: 'Quality:',
    pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
    pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
--- a/src/editor/locale/lang.fi.js
+++ b/src/editor/locale/lang.fi.js
@@ -20,7 +20,7 @@ export default {
    toggle_stroke_tools: 'Show/hide more stroke tools',
    palette_info: 'Klikkaa muuttaa täyttöväri, Shift-click vaihtaa aivohalvauksen väriä',
    zoom_level: 'Muuta suurennustaso',
-    panel_drag: 'Drag left/right to resize side panel',
+    panel_action: 'Click to open side panel',
    quality: 'Quality:',
    pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
    pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
--- a/src/editor/locale/lang.fr.js
+++ b/src/editor/locale/lang.fr.js
@@ -20,7 +20,7 @@ export default {
    toggle_stroke_tools: "Montrer/cacher plus d'outils de contour",
    palette_info: 'Cliquer pour changer la couleur de remplissage, Maj+clic pour changer la couleur de contour',
    zoom_level: 'Changer le niveau de zoom',
-    panel_drag: 'Tirer vers la gauche/droite pour redimensionner le panneau',
+    panel_action: 'Cliquer pour ouvrir le panel de côté',
    quality: 'Quality:',
    pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
    pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
--- a/src/editor/locale/lang.fy.js
+++ b/src/editor/locale/lang.fy.js
@@ -20,7 +20,7 @@ export default {
    toggle_stroke_tools: 'Show/hide more stroke tools',
    palette_info: 'Klik om de folkleur te feroarjen, shift-klik om de linekleur te feroarjen.',
    zoom_level: 'Yn-/útzoome',
-    panel_drag: 'Drag left/right to resize side panel',
+    panel_action: 'Click to open side panel',
    quality: 'Quality:',
    pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
    pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
--- a/src/editor/locale/lang.ga.js
+++ b/src/editor/locale/lang.ga.js
@@ -20,7 +20,7 @@ export default {
    toggle_stroke_tools: 'Show/hide more stroke tools',
    palette_info: 'Cliceáil chun athrú a líonadh dath, aistriú-cliceáil chun dath a athrú stróc',
    zoom_level: 'Athraigh súmáil leibhéal',
-    panel_drag: 'Drag left/right to resize side panel',
+    panel_action: 'Click to open side panel',
    quality: 'Quality:',
    pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
    pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
--- a/src/editor/locale/lang.gl.js
+++ b/src/editor/locale/lang.gl.js
@@ -20,7 +20,7 @@ export default {
    toggle_stroke_tools: 'Show/hide more stroke tools',
    palette_info: 'Preme aquí para cambiar a cor de recheo, Shift-clic para cambiar a cor do curso',
    zoom_level: 'Cambiar o nivel de zoom',
-    panel_drag: 'Drag left/right to resize side panel',
+    panel_action: 'Click to open side panel',
    quality: 'Quality:',
    pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
    pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
--- a/src/editor/locale/lang.he.js
+++ b/src/editor/locale/lang.he.js
@@ -20,7 +20,7 @@ export default {
    toggle_stroke_tools: 'Show/hide more stroke tools',
    palette_info: 'לחץ כדי לשנות צבע מילוי, לחץ על Shift-לשנות צבע שבץ',
    zoom_level: 'שינוי גודל תצוגה',
-    panel_drag: 'Drag left/right to resize side panel',
+    panel_action: 'Click to open side panel',
    quality: 'Quality:',
    pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
    pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
--- a/src/editor/locale/lang.hi.js
+++ b/src/editor/locale/lang.hi.js
@@ -20,7 +20,7 @@ export default {
    toggle_stroke_tools: 'Show/hide more stroke tools',
    palette_info: 'रंग बदलने पर क्लिक करें, बदलाव भरने के क्लिक करने के लिए स्ट्रोक का रंग बदलने के लिए',
    zoom_level: 'बदलें स्तर ज़ूम',
-    panel_drag: 'Drag left/right to resize side panel',
+    panel_action: 'Click to open side panel',
    quality: 'Quality:',
    pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
    pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
--- a/src/editor/locale/lang.hr.js
+++ b/src/editor/locale/lang.hr.js
@@ -20,7 +20,7 @@ export default {
    toggle_stroke_tools: 'Show/hide more stroke tools',
    palette_info: 'Kliknite promijeniti boju ispune, shift-click to promijeniti boju moždanog udara',
    zoom_level: 'Promjena razine zumiranja',
-    panel_drag: 'Drag left/right to resize side panel',
+    panel_action: 'Click to open side panel',
    quality: 'Quality:',
    pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
    pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
--- a/src/editor/locale/lang.hu.js
+++ b/src/editor/locale/lang.hu.js
@@ -20,7 +20,7 @@ export default {
    toggle_stroke_tools: 'Show/hide more stroke tools',
    palette_info: 'Kattints ide a változások töltse szín, shift-click változtatni stroke color',
    zoom_level: 'Change nagyítási',
-    panel_drag: 'Drag left/right to resize side panel',
+    panel_action: 'Click to open side panel',
    quality: 'Quality:',
    pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
    pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
--- a/src/editor/locale/lang.hy.js
+++ b/src/editor/locale/lang.hy.js
@@ -20,7 +20,7 @@ export default {
    toggle_stroke_tools: 'Show/hide more stroke tools',
    palette_info: 'Click to change fill color, shift-click to change stroke color',
    zoom_level: 'Change zoom level',
-    panel_drag: 'Drag left/right to resize side panel',
+    panel_action: 'Click to open side panel',
    quality: 'Quality:',
    pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
    pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
--- a/src/editor/locale/lang.id.js
+++ b/src/editor/locale/lang.id.js
@@ -20,7 +20,7 @@ export default {
    toggle_stroke_tools: 'Show/hide more stroke tools',
    palette_info: 'Klik untuk mengubah warna mengisi, shift-klik untuk mengubah warna stroke',
    zoom_level: 'Mengubah tingkat pembesaran',
-    panel_drag: 'Drag left/right to resize side panel',
+    panel_action: 'Click to open side panel',
    quality: 'Quality:',
    pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
    pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
--- a/src/editor/locale/lang.is.js
+++ b/src/editor/locale/lang.is.js
@@ -20,7 +20,7 @@ export default {
    toggle_stroke_tools: 'Show/hide more stroke tools',
    palette_info: 'Smelltu hér til að breyta fylla lit, Shift-smelltu til að breyta högg lit',
    zoom_level: 'Breyta Stækkunarstig',
-    panel_drag: 'Drag left/right to resize side panel',
+    panel_action: 'Click to open side panel',
    quality: 'Quality:',
    pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
    pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
--- a/src/editor/locale/lang.it.js
+++ b/src/editor/locale/lang.it.js
@@ -20,7 +20,7 @@ export default {
    toggle_stroke_tools: 'Mostra/nascondi strumenti per il tratto',
    palette_info: 'Fare clic per cambiare il colore di riempimento, shift-click per cambiare colore del tratto',
    zoom_level: 'Cambia il livello di zoom',
-    panel_drag: 'Drag left/right to resize side panel',
+    panel_action: 'Click to open side panel',
    quality: 'Quality:',
    pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
    pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
--- a/src/editor/locale/lang.ja.js
+++ b/src/editor/locale/lang.ja.js
@@ -20,7 +20,7 @@ export default {
    toggle_stroke_tools: 'Show/hide more stroke tools',
    palette_info: 'クリックで塗りの色を選択、Shift+クリックで線の色を選択',
    zoom_level: 'ズーム倍率の変更',
-    panel_drag: 'Drag left/right to resize side panel',
+    panel_action: 'Click to open side panel',
    quality: 'Quality:',
    pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
    pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
--- a/src/editor/locale/lang.ko.js
+++ b/src/editor/locale/lang.ko.js
@@ -20,7 +20,7 @@ export default {
    toggle_stroke_tools: 'Show/hide more stroke tools',
    palette_info: '색상을 클릭, 근무 시간 채우기 스트로크 색상을 변경하려면 변경하려면',
    zoom_level: '변경 수준으로 확대',
-    panel_drag: 'Drag left/right to resize side panel',
+    panel_action: 'Click to open side panel',
    quality: 'Quality:',
    pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
    pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
--- a/src/editor/locale/lang.lt.js
+++ b/src/editor/locale/lang.lt.js
@@ -20,7 +20,7 @@ export default {
    toggle_stroke_tools: 'Show/hide more stroke tools',
    palette_info: 'Spustelėkite norėdami keisti užpildo spalvą, perėjimo spustelėkite pakeisti insultas spalva',
    zoom_level: 'Keisti mastelį',
-    panel_drag: 'Drag left/right to resize side panel',
+    panel_action: 'Click to open side panel',
    quality: 'Quality:',
    pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
    pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
--- a/src/editor/locale/lang.lv.js
+++ b/src/editor/locale/lang.lv.js
@@ -20,7 +20,7 @@ export default {
    toggle_stroke_tools: 'Show/hide more stroke tools',
    palette_info: 'Noklikšķiniet, lai mainītu aizpildījuma krāsu, shift-click to mainīt stroke krāsa',
    zoom_level: 'Pārmaiņu mērogu',
-    panel_drag: 'Drag left/right to resize side panel',
+    panel_action: 'Click to open side panel',
    quality: 'Quality:',
    pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
    pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
--- a/src/editor/locale/lang.mk.js
+++ b/src/editor/locale/lang.mk.js
@@ -20,7 +20,7 @@ export default {
    toggle_stroke_tools: 'Show/hide more stroke tools',
    palette_info: 'Кликни за да внесете промени бојата, промена клик да се промени бојата удар',
    zoom_level: 'Промена зум ниво',
-    panel_drag: 'Drag left/right to resize side panel',
+    panel_action: 'Click to open side panel',
    quality: 'Quality:',
    pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
    pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
--- a/src/editor/locale/lang.ms.js
+++ b/src/editor/locale/lang.ms.js
@@ -20,7 +20,7 @@ export default {
    toggle_stroke_tools: 'Show/hide more stroke tools',
    palette_info: 'Klik untuk menukar warna mengisi, shift-klik untuk menukar warna stroke',
    zoom_level: 'Mengubah peringkat pembesaran',
-    panel_drag: 'Drag left/right to resize side panel',
+    panel_action: 'Click to open side panel',
    quality: 'Quality:',
    pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
    pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
--- a/src/editor/locale/lang.mt.js
+++ b/src/editor/locale/lang.mt.js
@@ -20,7 +20,7 @@ export default {
    toggle_stroke_tools: 'Show/hide more stroke tools',
    palette_info: 'Ikklikkja biex timla l-bidla fil-kulur, ikklikkja-bidla għall-bidla color stroke',
    zoom_level: 'Bidla zoom livell',
-    panel_drag: 'Drag left/right to resize side panel',
+    panel_action: 'Click to open side panel',
    quality: 'Quality:',
    pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
    pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
--- a/src/editor/locale/lang.nl.js
+++ b/src/editor/locale/lang.nl.js
@@ -20,7 +20,7 @@ export default {
    toggle_stroke_tools: 'Toon/verberg meer lijn gereedschap',
    palette_info: 'Klik om de vul kleur te veranderen, shift-klik om de lijn kleur te veranderen',
    zoom_level: 'In-/uitzoomen',
-    panel_drag: 'Drag left/right to resize side panel',
+    panel_action: 'Click to open side panel',
    quality: 'Quality:',
    pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
    pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
--- a/src/editor/locale/lang.no.js
+++ b/src/editor/locale/lang.no.js
@@ -20,7 +20,7 @@ export default {
    toggle_stroke_tools: 'Show/hide more stroke tools',
    palette_info: 'Click å endre fyllfarge, shift-klikke for å endre slag farge',
    zoom_level: 'Endre zoomnivå',
-    panel_drag: 'Drag left/right to resize side panel',
+    panel_action: 'Click to open side panel',
    quality: 'Quality:',
    pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
    pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
--- a/src/editor/locale/lang.pl.js
+++ b/src/editor/locale/lang.pl.js
@@ -21,7 +21,7 @@ export default {
    toggle_stroke_tools: 'Pokaż/ukryj więcej opcji obramowania',
    palette_info: 'Kliknij aby zmienić kolor wypełnienia, przytrzymaj shift aby zmienić kolor obramowania',
    zoom_level: 'Zmiana powiększenia',
-    panel_drag: 'Przeciągnij w lewo/prawo aby zmienić szerokość panelu',
+    panel_action: 'Click to open side panel',
    quality: 'Quality:',
    pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
    pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
--- a/src/editor/locale/lang.pt-BR.js
+++ b/src/editor/locale/lang.pt-BR.js
@@ -20,7 +20,7 @@ export default {
    toggle_stroke_tools: 'Mais opções de traço',
    palette_info: 'Click para mudar a cor de preenchimento, shift-click para mudar a cor do traço',
    zoom_level: 'Mudar zoom',
-    panel_drag: 'Arraste para redimensionar o painel',
+    panel_action: 'Click to open side panel',
    quality: 'Quality:',
    pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
    pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
--- a/src/editor/locale/lang.pt-PT.js
+++ b/src/editor/locale/lang.pt-PT.js
@@ -20,7 +20,7 @@ export default {
    toggle_stroke_tools: 'Show/hide more stroke tools',
    palette_info: 'Clique para mudar a cor de preenchimento, shift-clique para mudar a cor do curso',
    zoom_level: 'Alterar o nível de zoom',
-    panel_drag: 'Drag left/right to resize side panel',
+    panel_action: 'Click to open side panel',
    quality: 'Quality:',
    pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
    pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
--- a/src/editor/locale/lang.ro.js
+++ b/src/editor/locale/lang.ro.js
@@ -20,7 +20,7 @@ export default {
    toggle_stroke_tools: 'Arătaţi/ascundeţi mai multe unelte de contur',
    palette_info: 'Faceţi clic pentru a schimba culoarea de umplere, Shift-clic pentru a schimba culoarea de contur',
    zoom_level: 'Schimbarea nivelului de zoom',
-    panel_drag: 'Trageţi la stanga/dreapta pentru redimensionare panou lateral',
+    panel_action: 'Click to open side panel',
    quality: 'Quality:',
    pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
    pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
--- a/src/editor/locale/lang.ru.js
+++ b/src/editor/locale/lang.ru.js
@@ -20,7 +20,7 @@ export default {
    toggle_stroke_tools: 'Показать/скрыть инструменты обводки',
    palette_info: 'Нажмите для изменения цвета заливки, Shift-Click изменить цвета обводки',
    zoom_level: 'Изменить масштаб',
-    panel_drag: 'Drag left/right to resize side panel',
+    panel_action: 'Click to open side panel',
    quality: 'Качество:',
    pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
    pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
--- a/src/editor/locale/lang.sk.js
+++ b/src/editor/locale/lang.sk.js
@@ -20,7 +20,7 @@ export default {
    toggle_stroke_tools: 'Skryť/ukázať viac nástrojov pre krivku',
    palette_info: 'Kliknutím zmeníte farbu výplne, so Shiftom zmeníte farbu obrysu',
    zoom_level: 'Zmena priblíženia',
-    panel_drag: 'Potiahnutie vľavo/vpravo na zmenu veľkosti bočného panela',
+    panel_action: 'Click to open side panel',
    quality: 'Quality:',
    pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
    pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
--- a/src/editor/locale/lang.sl.js
+++ b/src/editor/locale/lang.sl.js
@@ -20,7 +20,7 @@ export default {
    toggle_stroke_tools: 'Pokaži/skrij več orodij za oris',
    palette_info: 'Kliknite, če želite spremeniti barvo polnila, kliknite+Shift, če želite spremeniti barvo orisa',
    zoom_level: 'Povečava',
-    panel_drag: 'Povlecite levo/desno za ogled stranske vrstice',
+    panel_action: 'Click to open side panel',
    quality: 'Quality:',
    pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
    pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
--- a/src/editor/locale/lang.sq.js
+++ b/src/editor/locale/lang.sq.js
@@ -20,7 +20,7 @@ export default {
    toggle_stroke_tools: 'Show/hide more stroke tools',
    palette_info: 'Klikoni për të ndryshuar mbushur me ngjyra, shift-klikoni për të ndryshuar ngjyrën pash',
    zoom_level: 'Ndryshimi zoom nivel',
-    panel_drag: 'Drag left/right to resize side panel',
+    panel_action: 'Click to open side panel',
    quality: 'Quality:',
    pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
    pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
--- a/src/editor/locale/lang.sr.js
+++ b/src/editor/locale/lang.sr.js
@@ -20,7 +20,7 @@ export default {
    toggle_stroke_tools: 'Show/hide more stroke tools',
    palette_info: 'Кликните да бисте променили боју попуне, Схифт-кликните да промените боју удар',
    zoom_level: 'Промените ниво зумирања',
-    panel_drag: 'Drag left/right to resize side panel',
+    panel_action: 'Click to open side panel',
    quality: 'Quality:',
    pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
    pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
--- a/src/editor/locale/lang.sv.js
+++ b/src/editor/locale/lang.sv.js
@@ -20,7 +20,7 @@ export default {
    toggle_stroke_tools: 'Show/hide more stroke tools',
    palette_info: 'Klicka för att ändra fyllningsfärg, shift-klicka för att ändra färgar',
    zoom_level: 'Ändra zoomnivå',
-    panel_drag: 'Drag left/right to resize side panel',
+    panel_action: 'Click to open side panel',
    quality: 'Quality:',
    pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
    pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
--- a/src/editor/locale/lang.sw.js
+++ b/src/editor/locale/lang.sw.js
@@ -20,7 +20,7 @@ export default {
    toggle_stroke_tools: 'Show/hide more stroke tools',
    palette_info: 'Click kubadili kujaza color, skiftarbete-click kubadili kiharusi color',
    zoom_level: 'Change zoom ngazi',
-    panel_drag: 'Drag left/right to resize side panel',
+    panel_action: 'Click to open side panel',
    quality: 'Quality:',
    pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
    pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
--- a/src/editor/locale/lang.test.js
+++ b/src/editor/locale/lang.test.js
@@ -20,7 +20,7 @@ export default {
    toggle_stroke_tools: 'Show/hide more stroke tools',
    palette_info: 'Click to change fill color, shift-click to change stroke color',
    zoom_level: 'Change zoom level',
-    panel_drag: 'Drag left/right to resize side panel',
+    panel_action: 'Click to open side panel',
    quality: 'Quality:',
    pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
    pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
--- a/src/editor/locale/lang.th.js
+++ b/src/editor/locale/lang.th.js
@@ -20,7 +20,7 @@ export default {
    toggle_stroke_tools: 'Show/hide more stroke tools',
    palette_info: 'คลิกเพื่อเปลี่ยนใส่สีกะคลิกเปลี่ยนสีจังหวะ',
    zoom_level: 'เปลี่ยนระดับการซูม',
-    panel_drag: 'Drag left/right to resize side panel',
+    panel_action: 'Click to open side panel',
    quality: 'Quality:',
    pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
    pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
--- a/src/editor/locale/lang.tl.js
+++ b/src/editor/locale/lang.tl.js
@@ -20,7 +20,7 @@ export default {
    toggle_stroke_tools: 'Show/hide more stroke tools',
    palette_info: 'I-click upang baguhin ang punan ang kulay, paglilipat-click upang baguhin ang paghampas ng kulay',
    zoom_level: 'Baguhin ang antas ng zoom',
-    panel_drag: 'Drag left/right to resize side panel',
+    panel_action: 'Click to open side panel',
    quality: 'Quality:',
    pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
    pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
--- a/src/editor/locale/lang.tr.js
+++ b/src/editor/locale/lang.tr.js
@@ -20,7 +20,7 @@ export default {
    toggle_stroke_tools: 'Show/hide more stroke tools',
    palette_info: 'Tıklatın renk, vardiya dolgu zamanlı rengini değiştirmek için tıklayın değiştirmek için',
    zoom_level: 'Yakınlaştırma düzeyini değiştirebilirsiniz',
-    panel_drag: 'Drag left/right to resize side panel',
+    panel_action: 'Click to open side panel',
    quality: 'Quality:',
    pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
    pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
--- a/src/editor/locale/lang.uk.js
+++ b/src/editor/locale/lang.uk.js
@@ -20,7 +20,7 @@ export default {
    toggle_stroke_tools: 'Show/hide more stroke tools',
    palette_info: 'Натисніть для зміни кольору заливки, Shift-Click змінити обвід',
    zoom_level: 'Зміна масштабу',
-    panel_drag: 'Drag left/right to resize side panel',
+    panel_action: 'Click to open side panel',
    quality: 'Quality:',
    pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
    pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
--- a/src/editor/locale/lang.vi.js
+++ b/src/editor/locale/lang.vi.js
@@ -20,7 +20,7 @@ export default {
    toggle_stroke_tools: 'Show/hide more stroke tools',
    palette_info: 'Nhấn vào đây để thay đổi đầy màu sắc, thay đổi nhấp chuột để thay đổi màu sắc đột quỵ',
    zoom_level: 'Thay đổi mức độ phóng',
-    panel_drag: 'Drag left/right to resize side panel',
+    panel_action: 'Click to open side panel',
    quality: 'Quality:',
    pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
    pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
--- a/src/editor/locale/lang.yi.js
+++ b/src/editor/locale/lang.yi.js
@@ -20,7 +20,7 @@ export default {
    toggle_stroke_tools: 'Show/hide more stroke tools',
    palette_info: 'גיט צו ענדערן אָנעסן קאָליר, יבעררוק-גיט צו טוישן מאַך קאָליר',
    zoom_level: 'ענדערן פארגרעסער הייך',
-    panel_drag: 'Drag left/right to resize side panel',
+    panel_action: 'Click to open side panel',
    quality: 'Quality:',
    pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
    pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
--- a/src/editor/locale/lang.zh-CN.js
+++ b/src/editor/locale/lang.zh-CN.js
@@ -20,7 +20,7 @@ export default {
    toggle_stroke_tools: '显示/隐藏更式边线工具',
    palette_info: '点击更改填充颜色，按住Shift键单击更改线条颜色',
    zoom_level: '更改缩放级别',
-    panel_drag: '左右拖拽调整面板大小',
+    panel_action: 'Click to open side panel',
    quality: 'Quality:',
    pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
    pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
--- a/src/editor/locale/lang.zh-HK.js
+++ b/src/editor/locale/lang.zh-HK.js
@@ -20,7 +20,7 @@ export default {
    toggle_stroke_tools: 'Show/hide more stroke tools',
    palette_info: '点击更改填充颜色，按住Shift键单击更改颜色中风',
    zoom_level: '更改缩放级别',
-    panel_drag: 'Drag left/right to resize side panel',
+    panel_action: 'Click to open side panel',
    quality: 'Quality:',
    pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
    pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
--- a/src/editor/locale/lang.zh-TW.js
+++ b/src/editor/locale/lang.zh-TW.js
@@ -20,7 +20,7 @@ export default {
    toggle_stroke_tools: 'Show/hide more stroke tools',
    palette_info: '點擊更改填充顏色，按住Shift鍵單擊更改線條顏色',
    zoom_level: '更改縮放級別',
-    panel_drag: 'Drag left/right to resize side panel',
+    panel_action: 'Click to open side panel',
    quality: 'Quality:',
    pathNodeTooltip: 'Drag node to move it. Double-click node to change segment type',
    pathCtrlPtTooltip: 'Drag control point to adjust curve properties',
--- a/src/editor/panels/BottomPanel.js
+++ b/src/editor/panels/BottomPanel.js
@@ -57,13 +57,13 @@ class BottomPanel {
        return;
      }
      const zoom = this.editor.svgCanvas.getZoom();
-      const wArea = this.editor.workarea;
+      const { workarea } = this.editor;
      this.editor.zoomChanged(window, {
        width: 0,
        height: 0,
        // center pt of scroll position
-        x: (wArea.scrollLeft + parseFloat(getComputedStyle(wArea, null).width.replace("px", "")) / 2) / zoom,
-        y: (wArea.scrollTop + parseFloat(getComputedStyle(wArea, null).height.replace("px", "")) / 2) / zoom,
+        x: (workarea.scrollLeft + parseFloat(getComputedStyle(workarea, null).width.replace("px", "")) / 2) / zoom,
+        y: (workarea.scrollTop + parseFloat(getComputedStyle(workarea, null).height.replace("px", "")) / 2) / zoom,
        zoom: zoomlevel
      }, true);
    }
@@ -164,11 +164,13 @@ class BottomPanel {
    // register actions for Bottom panel
    const template = document.createElement('template');
    const { i18next } = this.editor;
+    const { imgPath } = this.editor.configObj.curConfig;
+
    // eslint-disable-next-line no-unsanitized/property
    template.innerHTML = `
      <div id="tools_bottom">
        <!-- Zoom buttons -->
-        <se-zoom id="zoom" src="./images/zoom.svg" title="Change zoom level" inputsize="40px">
+        <se-zoom id="zoom" src="${imgPath}/zoom.svg" title="Change zoom level" inputsize="40px">
          <div value="1000">1000</div>
          <div value="400">400</div>
          <div value="200">200</div>
@@ -180,37 +182,37 @@ class BottomPanel {
          <div value="layer">${i18next.t('tools.fit_to_layer_content')}</div>
          <div value="content">${i18next.t('tools.fit_to_all')}</div>
        </se-zoom>
-        <se-colorpicker id="fill_color" src="./images/fill.svg" title="${i18next.t('properties.fill_color')}" type="fill"></se-colorpicker>
-        <se-colorpicker id="stroke_color" src="./images/stroke.svg" title="${i18next.t('properties.stroke_color')}" type="stroke">
+        <se-colorpicker id="fill_color" src="${imgPath}/fill.svg" title="${i18next.t('properties.fill_color')}" type="fill"></se-colorpicker>
+        <se-colorpicker id="stroke_color" src="${imgPath}/stroke.svg" title="${i18next.t('properties.stroke_color')}" type="stroke">
        </se-colorpicker>
        <se-spin-input id="stroke_width" min=0 max=99 step=1 title="${i18next.t('properties.stroke_width')}" label=""></se-spin-input>
-        <se-list id="stroke_style" title="${i18next.t('properties.stroke_style')}" label="" width="22px" height="24px">
+        <se-list id="stroke_style" title="${i18next.t('properties.stroke_style')}" label="" width="22px" height="22px">
          <se-list-item value="none">&#8212;</se-list-item>
          <se-list-item value="2,2">...</se-list-item>
          <se-list-item value="5,5">- -</se-list-item>
          <se-list-item value="5,2,2,2">- .</se-list-item>
          <se-list-item value="5,2,2,2,2,2">- ..</se-list-item>
        </se-list>
-        <se-list id="stroke_linejoin" title="${i18next.t('properties.linejoin_miter')}" label="" width="22px" height="24px">
-          <se-list-item id="linejoin_miter" value="miter"><img title="${i18next.t('properties.linejoin_miter')}" src="./images/linejoin_miter.svg"
+        <se-list id="stroke_linejoin" title="${i18next.t('properties.linejoin_miter')}" label="" width="22px" height="22px">
+          <se-list-item id="linejoin_miter" value="miter"><img title="${i18next.t('properties.linejoin_miter')}" src="${imgPath}/linejoin_miter.svg"
              height="22px"></img></se-list-item>
-          <se-list-item id="linejoin_round" value="round"><img title="${i18next.t('properties.linejoin_round')}" src="./images/linejoin_round.svg"
+          <se-list-item id="linejoin_round" value="round"><img title="${i18next.t('properties.linejoin_round')}" src="${imgPath}/linejoin_round.svg"
              height="22px"></img></se-list-item>
-          <se-list-item id="linejoin_bevel" value="bevel"><img title="${i18next.t('properties.linejoin_bevel')}" src="./images/linejoin_bevel.svg"
+          <se-list-item id="linejoin_bevel" value="bevel"><img title="${i18next.t('properties.linejoin_bevel')}" src="${imgPath}/linejoin_bevel.svg"
              height="22px"></img></se-list-item>
        </se-list>
-        <se-list id="stroke_linecap" title="${i18next.t('properties.linecap_butt')}" label="" width="22px" height="24px">
-          <se-list-item id="linecap_butt" value="butt"><img title="${i18next.t('properties.linecap_butt')}" src="./images/linecap_butt.svg"
+        <se-list id="stroke_linecap" title="${i18next.t('properties.linecap_butt')}" label="" width="22px" height="22px">
+          <se-list-item id="linecap_butt" value="butt"><img title="${i18next.t('properties.linecap_butt')}" src="${imgPath}/linecap_butt.svg"
              height="22px"></img></se-list-item>
-          <se-list-item id="linecap_square" value="square"><img title="${i18next.t('properties.linecap_square')}" src="./images/linecap_square.svg"
+          <se-list-item id="linecap_square" value="square"><img title="${i18next.t('properties.linecap_square')}" src="${imgPath}/linecap_square.svg"
              height="22px"></img></se-list-item>
-          <se-list-item id="linecap_round" value="round"><img title="${i18next.t('properties.linecap_round')}" src="./images/linecap_round.svg"
+          <se-list-item id="linecap_round" value="round"><img title="${i18next.t('properties.linecap_round')}" src="${imgPath}/linecap_round.svg"
              height="22px"></img></se-list-item>
        </se-list>
        <se-spin-input size="3" id="opacity" min=0 max=100 step=5 title="${i18next.t('properties.opacity')}"
-          src="./images/opacity.svg"></se-spin-input>
+          src="${imgPath}/opacity.svg"></se-spin-input>
        <se-palette id="palette"></se-palette>
-      </div> <!-- tools_bottom -->
+      </div>
    `;
    this.editor.$svgEditor.append(template.content.cloneNode(true));
    $id('palette').addEventListener('change', this.handlePalette.bind(this));
--- a/src/editor/panels/LayersPanel.js
+++ b/src/editor/panels/LayersPanel.js
@@ -1,9 +1,6 @@
-/* eslint-disable max-len */
 /* eslint-disable no-alert */
 import SvgCanvas from "../../svgcanvas/svgcanvas.js";

-const SIDEPANEL_MAXWIDTH = 300;
-const SIDEPANEL_OPENWIDTH = 150;
 const { $id } = SvgCanvas;

 /**
@@ -15,76 +12,9 @@ class LayersPanel {
   */
  constructor(editor) {
    this.updateContextPanel = editor.topPanel.updateContextPanel;
-    this.sidedrag = -1;
-    this.sidedragging = false;
-    this.allowmove = false;
    this.editor = editor;
  }

-  /**
-   * @param {Float} delta
-   * @fires module:svgcanvas.SvgCanvas#event:ext_workareaResized
-   * @returns {void}
-   */
-  changeSidePanelWidth(delta) {
-    const rulerX = document.querySelector("#ruler_x");
-    $id("sidepanels").style.width = (parseFloat(getComputedStyle($id("sidepanels"), null).width.replace("px", "")) + delta) + "px";
-    $id("layerpanel").style.width = (parseFloat(getComputedStyle($id("layerpanel"), null).width.replace("px", "")) + delta) + "px";
-    rulerX.style.right =
-      parseFloat(getComputedStyle(rulerX, null).right.replace("px", "")) +
-      delta +
-      "px";
-    this.editor.workarea.style.right =
-      parseFloat(
-        getComputedStyle(this.editor.workarea, null).right.replace("px", "")
-      ) +
-      delta +
-      "px";
-    this.editor.svgCanvas.runExtensions("workareaResized");
-  }
-
-  /**
-   * @param {Event} evt
-   * @returns {void}
-   */
-  resizeSidePanel(evt) {
-    if (!this.allowmove) {
-      return;
-    }
-    if (this.sidedrag === -1) {
-      return;
-    }
-    this.sidedragging = true;
-    let deltaX = this.sidedrag - evt.pageX;
-    const sideWidth = parseFloat(getComputedStyle($id("sidepanels"), null).width.replace("px", ""));
-    if (sideWidth + deltaX > SIDEPANEL_MAXWIDTH) {
-      deltaX = SIDEPANEL_MAXWIDTH - sideWidth;
-      // sideWidth = SIDEPANEL_MAXWIDTH;
-    } else if (sideWidth + deltaX < 2) {
-      deltaX = 2 - sideWidth;
-      // sideWidth = 2;
-    }
-    if (deltaX === 0) {
-      return;
-    }
-    this.sidedrag -= deltaX;
-    this.changeSidePanelWidth(deltaX);
-  }
-
-  /**
-   * If width is non-zero, then fully close it; otherwise fully open it.
-   * @param {boolean} close Forces the side panel closed
-   * @returns {void}
-   */
-  toggleSidePanel(close) {
-    const dpr = window.devicePixelRatio || 1;
-    const w = parseFloat(getComputedStyle($id("sidepanels"), null).width.replace("px", ""));
-    const isOpened = (dpr < 1 ? w : w / dpr) > 2;
-    const zoomAdjustedSidepanelWidth =
-      (dpr < 1 ? 1 : dpr) * SIDEPANEL_OPENWIDTH;
-    const deltaX = (isOpened || close ? 0 : zoomAdjustedSidepanelWidth) - w;
-    this.changeSidePanelWidth(deltaX);
-  }
  /**
   * @param {PlainObject} e event
   * @returns {void}
@@ -114,33 +44,36 @@ class LayersPanel {
  init() {
    const template = document.createElement("template");
    const { i18next } = this.editor;
+    const { imgPath } = this.editor.configObj.curConfig;
+
    // eslint-disable-next-line no-unsanitized/property
    template.innerHTML = `
    <div id="sidepanels">
-    <div id="layerpanel">
-      <h3 id="layersLabel">${i18next.t('layers.layers')}</h3>
-      <fieldset id="layerbuttons">
-        <se-button id="layer_new" title="${i18next.t('layers.new')}" size="small" src="./images/new.svg"></se-button>
-        <se-button id="layer_delete" title="${i18next.t('layers.del')}" size="small" src="./images/delete.svg"></se-button>
-        <se-button id="layer_rename" title="${i18next.t('layers.rename')}" size="small" src="./images/text.svg"></se-button>
-        <se-button id="layer_up" title="${i18next.t('layers.move_up')}" size="small" src="./images/go_up.svg"></se-button>
-        <se-button id="layer_down" title="${i18next.t('layers.move_down')}" size="small" src="./images/go_down.svg"></se-button>
-        <se-button id="layer_moreopts" title="${i18next.t('common.more_opts')}" size="small" src="./images/context_menu.svg">
-        </se-button>
-      </fieldset>
-      <table id="layerlist">
-        <tr class="layer">
-          <td class="layervis"></td>
-          <td class="layername">Layer 1</td>
-        </tr>
-      </table>
-      <span id="selLayerLabel">${i18next.t('layers.move_elems_to')}</span>
-      <select id="selLayerNames" title="${i18next.t('layers.move_selected')}" disabled="disabled">
-        <option selected="selected" value="layer1">Layer 1</option>
-      </select>
-    </div>
-    <div id="sidepanel_handle" title="${i18next.t('ui.panel_drag')}">L a y e r s
-    </div>
+      <div id="sidepanel_handle" title="${i18next.t('ui.panel_action')}">${i18next.t('ui.panel')}</div>
+      <div id="sidepanel_content">
+        <div id="layerpanel">
+          <h3 id="layersLabel">${i18next.t('layers.layers')}</h3>
+          <fieldset id="layerbuttons">
+            <se-button id="layer_new" title="${i18next.t('layers.new')}" size="small" src="${imgPath}/new.svg"></se-button>
+            <se-button id="layer_delete" title="${i18next.t('layers.del')}" size="small" src="${imgPath}/delete.svg"></se-button>
+            <se-button id="layer_rename" title="${i18next.t('layers.rename')}" size="small" src="${imgPath}/text.svg"></se-button>
+            <se-button id="layer_up" title="${i18next.t('layers.move_up')}" size="small" src="${imgPath}/go_up.svg"></se-button>
+            <se-button id="layer_down" title="${i18next.t('layers.move_down')}" size="small" src="${imgPath}/go_down.svg"></se-button>
+            <se-button id="layer_moreopts" title="${i18next.t('common.more_opts')}" size="small" src="${imgPath}/context_menu.svg">
+            </se-button>
+          </fieldset>
+          <table id="layerlist">
+            <tr class="layer">
+              <td class="layervis"></td>
+              <td class="layername">Layer 1</td>
+            </tr>
+          </table>
+          <span id="selLayerLabel">${i18next.t('layers.move_elems_to')}</span>
+          <select id="selLayerNames" title="${i18next.t('layers.move_selected')}" disabled="disabled">
+            <option selected="selected" value="layer1">Layer 1</option>
+          </select>
+        </div>
+     </div>
  </div>
    `;
    this.editor.$svgEditor.append(template.content.cloneNode(true));
@@ -149,13 +82,13 @@ class LayersPanel {
    menuMore.setAttribute("id", "se-cmenu-layers-more");
    menuMore.value = "layer_moreopts";
    menuMore.setAttribute("leftclick", true);
-    this.editor.$svgEditor.append(menuMore);
+    this.editor.$container.append(menuMore);
    menuMore.init(i18next);
    const menuLayerBox = document.createElement("se-cmenu-layers");
    menuLayerBox.setAttribute("id", "se-cmenu-layers-list");
    menuLayerBox.value = "layerlist";
    menuLayerBox.setAttribute("leftclick", false);
-    this.editor.$svgEditor.append(menuLayerBox);
+    this.editor.$container.append(menuLayerBox);
    menuLayerBox.init(i18next);
    document
      .getElementById("layer_new")
@@ -180,36 +113,18 @@ class LayersPanel {
      this.lmenuFunc(e);
    });
    $id("sidepanel_handle").addEventListener(
-      "click",
-      this.toggleSidePanel.bind(this)
+      "click", () => this.toggleSidePanel()
    );
-    if (this.editor.configObj.curConfig.showlayers) {
-      this.toggleSidePanel();
+    this.toggleSidePanel(this.editor.configObj.curConfig.showlayers);
+  }
+  toggleSidePanel(displayFlag) {
+    if (displayFlag === undefined) {
+      this.editor.$svgEditor.classList.toggle('open');
+    } else if (displayFlag) {
+      this.editor.$svgEditor.classList.add('open');
+    } else {
+      this.editor.$svgEditor.classList.remove('open');
    }
-    $id("sidepanel_handle").addEventListener("mousedown", (evt) => {
-      this.sidedrag = evt.pageX;
-      window.addEventListener("mousemove", this.resizeSidePanel.bind(this));
-      this.allowmove = false;
-      // Silly hack for Chrome, which always runs mousemove right after mousedown
-      setTimeout(() => {
-        this.allowmove = true;
-      }, 20);
-    });
-    $id("sidepanel_handle").addEventListener("mouseup", (_evt) => {
-      if (!this.sidedragging) {
-        this.toggleSidePanel();
-      }
-      this.sidedrag = -1;
-      this.sidedragging = false;
-    });
-    window.addEventListener("mouseup", (_evt) => {
-      this.sidedrag = -1;
-      this.sidedragging = false;
-      this.editor.$svgEditor.removeEventListener(
-        "mousemove",
-        this.resizeSidePanel.bind(this)
-      );
-    });
  }
  /**
   * @returns {void}
--- a/src/editor/panels/LeftPanel.js
+++ b/src/editor/panels/LeftPanel.js
@@ -196,55 +196,57 @@ class LeftPanel {
   */
  init() {
    const { i18next } = this.editor;
+    const { imgPath } = this.editor.configObj.curConfig;
+
    // add Left panel
    const leftMenu = [
      {
-        menu: `<se-button id="tool_select" title="${i18next.t('tools.mode_select')}" src="./images/select.svg"></se-button>`,
+        menu: `<se-button id="tool_select" title="${i18next.t('tools.mode_select')}" src="${imgPath}/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>`,
+        menu: `<se-button id="tool_zoom" title="${i18next.t('tools.mode_zoom')}" src="${imgPath}/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>`,
+        menu: `<se-button id="tool_fhpath" title="${i18next.t('tools.mode_fhpath')}" src="${imgPath}/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>`,
+        menu: `<se-button id="tool_line" title="${i18next.t('tools.mode_line')}" src="${imgPath}/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>`,
+        menu: `<se-button id="tool_path" title="${i18next.t('tools.mode_path')}" src="${imgPath}/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-button id="tool_rect" title="${i18next.t('tools.mode_rect')}" src="${imgPath}/rect.svg" shortcut="R"></se-button>
+        <se-button id="tool_square" title="${i18next.t('tools.mode_square')}" src="${imgPath}/square.svg"></se-button>
+        <se-button id="tool_fhrect" title="${i18next.t('tools.mode_fhrect')}" src="${imgPath}/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-button id="tool_ellipse" title="${i18next.t('tools.mode_ellipse')}" src="${imgPath}/ellipse.svg" shortcut="E"></se-button>
+          <se-button id="tool_circle" title="${i18next.t('tools.mode_circle')}" src="${imgPath}/circle.svg"></se-button>
+          <se-button id="tool_fhellipse" title="${i18next.t('tools.mode_fhellipse')}" src="${imgPath}/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>`,
+        menu: `<se-button id="tool_text" title="${i18next.t('tools.mode_text')}" src="${imgPath}/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>`,
+        menu: `<se-button id="tool_image" title="${i18next.t('tools.mode_image')}" src="${imgPath}/image.svg"></se-button>`,
        position: 11
      }
    ];
    const template = document.createElement("template");
-    template.innerHTML = `<div id="tools_left"></div> <!-- tools_left -->`;
+    template.innerHTML = `<div id="tools_left"></div>`;
    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");
--- a/src/editor/panels/TopPanel.js
+++ b/src/editor/panels/TopPanel.js
@@ -1,3 +1,5 @@
+/* globals seAlert */
+
 import SvgCanvas from "../../svgcanvas/svgcanvas.js";
 import { isValidUnit, getTypeMap, convertUnit } from "../../common/units.js";

@@ -16,6 +18,19 @@ class TopPanel {
  constructor(editor) {
    this.editor = editor;
  }
+  /**
+   * @type {module}
+   */
+  displayTool(id) {
+    // default display is 'none' so removing the property will make the panel visible
+    $id(id).style.removeProperty('display');
+  }
+  /**
+   * @type {module}
+   */
+  hideTool(id) {
+    $id(id).style.display = 'none';
+  }
  /**
   * @type {module}
   */
@@ -50,10 +65,10 @@ class TopPanel {
      this.svgCanvas.setStrokeAttr('stroke-' + pre, val);
    }
    opt.classList.add('current');
-    const elements = Array.prototype.filter.call(opt.parentNode.children, function(child){
+    const elements = Array.prototype.filter.call(opt.parentNode.children, function (child) {
      return child !== opt;
    });
-    Array.from(elements).forEach(function(element) {
+    Array.from(elements).forEach(function (element) {
      element.classList.remove('current');
    });
  }
@@ -119,10 +134,7 @@ class TopPanel {
        (this.selectedElement.getAttribute("opacity") || 1.0) * 100;
      $id("opacity").value = opacPerc;
      $id("elem_id").value = this.selectedElement.id;
-      $id("elem_class").value =
-        this.selectedElement.getAttribute("class") !== null
-          ? this.selectedElement.getAttribute("class")
-          : "";
+      $id("elem_class").value = this.selectedElement.getAttribute("class") ?? "";
    }

    this.editor.bottomPanel.updateToolButtonState();
@@ -141,7 +153,7 @@ class TopPanel {
      curhref
    );
    if (url) {
-      this.editor.setImageURL(url);
+      this.setImageURL(url);
    } else if (cancelDeletes) {
      this.editor.svgCanvas.deleteSelectedElements();
    }
@@ -151,11 +163,6 @@ class TopPanel {
   * @returns {void}
   */
  updateContextPanel() {
-    const setInputWidth = (elem) => {
-      const w = Math.min(Math.max(12 + elem.value.length * 6, 50), 300);
-      elem.style.width = w + 'px';
-    };
-
    let elem = this.editor.selectedElement;
    // If element has just been deleted, consider it null
    if (!isNullish(elem) && !elem.parentNode) {
@@ -172,19 +179,19 @@ class TopPanel {

    const isNode = currentMode === "pathedit"; // elem ? (elem.id && elem.id.startsWith('pathpointgrip')) : false;
    const menuItems = document.getElementById("se-cmenu_canvas");
-    $id("selected_panel").style.display = 'none';
-    $id("multiselected_panel").style.display = 'none';
-    $id("g_panel").style.display = 'none';
-    $id("rect_panel").style.display = 'none';
-    $id("circle_panel").style.display = 'none';
-    $id("ellipse_panel").style.display = 'none';
-    $id("line_panel").style.display = 'none';
-    $id("text_panel").style.display = 'none';
-    $id("image_panel").style.display = 'none';
-    $id("container_panel").style.display = 'none';
-    $id("use_panel").style.display = 'none';
-    $id("a_panel").style.display = 'none';
-    if (!isNullish(elem)) {
+    this.hideTool("selected_panel");
+    this.hideTool("multiselected_panel");
+    this.hideTool("g_panel");
+    this.hideTool("rect_panel");
+    this.hideTool("circle_panel");
+    this.hideTool("ellipse_panel");
+    this.hideTool("line_panel");
+    this.hideTool("text_panel");
+    this.hideTool("image_panel");
+    this.hideTool("container_panel");
+    this.hideTool("use_panel");
+    this.hideTool("a_panel");
+    if (elem) {
      const elname = elem.nodeName;

      const angle = this.editor.svgCanvas.getRotationAngle(elem);
@@ -203,10 +210,10 @@ class TopPanel {
      }

      if (!isNode && currentMode !== "pathedit") {
-        $id("selected_panel").style.display = 'block';
+        this.displayTool("selected_panel");
        // Elements in this array already have coord fields
        if ([ "line", "circle", "ellipse" ].includes(elname)) {
-          $id("xy_panel").style.display = 'none';
+          this.hideTool("xy_panel");
        } else {
          let x; let y;

@@ -228,20 +235,26 @@ class TopPanel {

          $id("selected_x").value = (x || 0);
          $id("selected_y").value = (y || 0);
-          $id("xy_panel").style.display = 'block';
+          this.displayTool("xy_panel");
        }

        // Elements in this array cannot be converted to a path
-        $id("tool_topath").style.display = [
+        if ([
          "image",
          "text",
          "path",
          "g",
          "use"
-        ].includes(elname)
-          ? "none"
-          : "block";
-        $id("tool_reorient").style.display = (elname === "path") ? "block" : "none";
+        ].includes(elname)) {
+          this.hideTool("tool_topath");
+        } else {
+          this.displayTool("tool_topath");
+        }
+        if (elname === "path") {
+          this.displayTool("tool_reorient");
+        } else {
+          this.hideTool("tool_reorient");
+        }
        $id("tool_reorient").disabled = (angle === 0);
      } else {
        const point = this.path.getNodePoint();
@@ -289,30 +302,32 @@ class TopPanel {
      let linkHref = null;
      if (tagName === "a") {
        linkHref = this.editor.svgCanvas.getHref(elem);
-        $id("g_panel").style.display = 'block';
+        this.displayTool("g_panel");
      }
      // siblings
      if (elem.parentNode) {
-        const selements = Array.prototype.filter.call(elem.parentNode.children, function(child){
+        const selements = Array.prototype.filter.call(elem.parentNode.children, function (child) {
          return child !== elem;
        });
        if (elem.parentNode.tagName === "a" && !selements.length) {
-          $id("a_panel").style.display = 'block';
+          this.displayTool("a_panel");
          linkHref = this.editor.svgCanvas.getHref(elem.parentNode);
        }
      }

      // Hide/show the make_link buttons
-      $id('tool_make_link').style.display = (!linkHref) ? 'block' : 'none';
-      $id('tool_make_link_multi').style.display = (!linkHref) ? 'block' : 'none';
-
      if (linkHref) {
+        this.displayTool('tool_make_link');
+        this.displayTool('tool_make_link_multi');
        $id("link_url").value = linkHref;
+      } else {
+        this.hideTool('tool_make_link');
+        this.hideTool('tool_make_link_multi');
      }

      if (panels[tagName]) {
        const curPanel = panels[tagName];
-        $id(tagName + "_panel").style.display = 'block';
+        this.displayTool(tagName + "_panel");

        curPanel.forEach((item) => {
          let attrVal = elem.getAttribute(item);
@@ -324,7 +339,7 @@ class TopPanel {
        });

        if (tagName === "text") {
-          $id("text_panel").style.display = 'block';
+          this.displayTool("text_panel");
          $id("tool_italic").pressed = this.editor.svgCanvas.getItalic();
          $id("tool_bold").pressed = this.editor.svgCanvas.getBold();
          $id("tool_font_family").value = elem.getAttribute("font-family");
@@ -367,11 +382,10 @@ class TopPanel {
          );
          // image
        } else if (tagName === "g" || tagName === "use") {
-          $id("container_panel").style.display = 'block';
+          this.displayTool("container_panel");
          const title = this.editor.svgCanvas.getTitle();
          const label = $id("g_title");
          label.value = title;
-          setInputWidth(label);
          $id("g_title").disabled = (tagName === "use");
        }
      }
@@ -387,7 +401,7 @@ class TopPanel {

      // if (!isNullish(elem))
    } else if (this.multiselected) {
-      $id("multiselected_panel").style.display = 'block';
+      this.displayTool("multiselected_panel");
      menuItems.setAttribute("enablemenuitems", "#group");
      menuItems.setAttribute("disablemenuitems", "#ungroup");
    } else {
@@ -448,7 +462,7 @@ class TopPanel {
      fcRules.setAttribute('id', 'wireframe_rules');
      document.getElementsByTagName("head")[0].appendChild(fcRules);
    } else {
-      while(wfRules.firstChild)
+      while (wfRules.firstChild)
        wfRules.removeChild(wfRules.firstChild);
    }
    this.editor.updateWireFrame();
@@ -462,7 +476,7 @@ class TopPanel {
    if (undoMgr.getUndoStackSize() > 0) {
      undoMgr.undo();
      this.editor.layersPanel.populateLayers();
-      if(this.editor.svgCanvas.getMode() === 'textedit') {
+      if (this.editor.svgCanvas.getMode() === 'textedit') {
        textActions.clear();
      }
    }
@@ -739,6 +753,42 @@ class TopPanel {
    this.updateContextPanel();
    return false;
  }
+  /**
+  * Set a selected image's URL.
+  * @function module:SVGthis.setImageURL
+  * @param {string} url
+  * @returns {void}
+  */
+  setImageURL(url) {
+    const { editor } = this;
+    if (!url) {
+      url = editor.defaultImageURL;
+    }
+    editor.svgCanvas.setImageURL(url);
+    $id("image_url").value = url;
+
+    if (url.startsWith('data:')) {
+      // data URI found
+      this.hideTool("image_url");
+    } else {
+      // regular URL
+      const promised = editor.svgCanvas.embedImage(url);
+      // eslint-disable-next-line promise/catch-or-return
+      promised
+        // eslint-disable-next-line promise/always-return
+        .then(() => {
+          // switch into "select" mode if we've clicked on an element
+          editor.svgCanvas.setMode('select');
+          editor.svgCanvas.selectOnly(editor.svgCanvas.getSelectedElems(), true);
+        }, (error) => {
+          // eslint-disable-next-line no-console
+          console.log("error =", error);
+          seAlert(editor.i18next.t('tools.no_embed'));
+          editor.svgCanvas.deleteSelectedElements();
+        });
+      this.displayTool("image_url");
+    }
+  }

  /**
   * @type {module}
@@ -747,248 +797,234 @@ class TopPanel {
    // add Top panel
    const template = document.createElement("template");
    const { i18next } = this.editor;
+    const { imgPath } = this.editor.configObj.curConfig;
    // eslint-disable-next-line no-unsanitized/property
    template.innerHTML = `
-       <div id="tools_top">
-       <div id="editor_panel">
-         <div class="tool_sep"></div>
-         <se-button
-          id="tool_source"
-          title="${i18next.t('tools.tool_source')}"
-          shortcut="U"
-          src="./images/source.svg"
-         ></se-button>
-         <se-button
-          id="tool_wireframe"
-          title="${i18next.t('tools.wireframe_mode')}"
-          shortcut="F"
-          src="./images/wireframe.svg"
-        ></se-button>
-       </div> <!-- editor_panel -->
-       <div id="history_panel">
-         <div class="tool_sep"></div>
-         <se-button id="tool_undo" title="${i18next.t('tools.undo')}" shortcut="Z" src="./images/undo.svg" disabled></se-button>
-         <se-button id="tool_redo" title="${i18next.t('tools.redo')}" shortcut="Y" src="./images/redo.svg" disabled></se-button>
-       </div> <!-- history_panel -->
-       <!-- Buttons when a single element is selected -->
-       <div id="selected_panel">
-         <div class="toolset">
-           <div class="tool_sep"></div>
-           <se-button id="tool_clone" title="${i18next.t('tools.clone')}" shortcut="D" src="./images/clone.svg"></se-button>
-           <se-button id="tool_delete" title="${i18next.t('tools.del')}" shortcut="Delete/Backspace" src="./images/delete.svg">
-           </se-button>
-         </div>
-         <div class="toolset">
-           <div class="tool_sep"></div>
-           <se-button id="tool_move_top" title="${i18next.t('tools.move_top')}" shortcut="Ctrl+Shift+]" src="./images/move_top.svg">
-           </se-button>
-           <se-button id="tool_move_bottom" title="${i18next.t('tools.move_bottom')}" shortcut="Ctrl+Shift+[" src="./images/move_bottom.svg">
-           </se-button>
-         </div>
-         <div class="toolset">
-           <se-button id="tool_topath" title="${i18next.t('tools.to_path')}" src="./images/to_path.svg"></se-button>
-           <se-button id="tool_reorient" title="${i18next.t('tools.reorient_path')}" src="./images/reorient.svg"></se-button>
-           <se-button id="tool_make_link" title="${i18next.t('tools.make_link')}" src="./images/globe_link.svg"></se-button>
-         </div>
-         <div class="toolset">
-           <div class="tool_sep"></div>
-           <se-input id="elem_id" data-attr="id" size="10" label="id" title="${i18next.t('properties.id')}"></se-input>
-         </div>
-         <div class="toolset">
-           <se-input id="elem_class" data-attr="class" size="10" label="class" title="${i18next.t('properties.class')}"></se-input>
-         </div>
-         <se-spin-input size="3" id="angle" min=-180 max=180 step=5 src="./images/angle.svg"
-           title="${i18next.t('properties.angle')}"></se-spin-input>
-         <se-spin-input size="2" id="blur" min=0 max=100 step=5 src="./images/blur.svg"
-           title="${i18next.t('properties.blur')}"></se-spin-input>
-         <se-list id="tool_position" title="${i18next.t('tools.align_to_page')}" label="" width="22px" height="24px">
-           <se-list-item id="tool_posleft" value="l">
-             <img title="${i18next.t('tools.align_left')}" src="./images/align_left.svg" height="22px">
-           </se-list-item>
-           <se-list-item id="tool_poscenter" value="c">
-             <img title="${i18next.t('tools.align_center')}" src="./images/align_center.svg" height="22px">
-           </se-list-item>
-           <se-list-item id="tool_posright" value="r">
-             <img title="${i18next.t('tools.align_right')}" src="./images/align_right.svg" height="22px">
-           </se-list-item>
-           <se-list-item id="tool_postop" value="t">
-             <img title="${i18next.t('tools.align_top')}" src="./images/align_top.svg" height="22px">
-           </se-list-item>
-           <se-list-item id="tool_posmiddle" value="m">
-             <img title="${i18next.t('tools.align_middle')}" src="./images/align_middle.svg" height="22px">
-           </se-list-item>
-           <se-list-item id="tool_posbottom" value="b">
-             <img title="${i18next.t('tools.align_bottom')}" src="./images/align_bottom.svg" height="22px">
-           </se-list-item>
-         </se-list>
-         <div id="xy_panel" class="toolset">
-           <se-spin-input id="selected_x" data-attr="x" size="4" type="text" label="x" title="${i18next.t('properties.pos_x')}">
-           </se-spin-input>
-           <se-spin-input id="selected_y" data-attr="y" size="4" type="text" label="y" title="${i18next.t('properties.pos_y')}">
-           </se-spin-input>
-         </div>
-       </div> <!-- selected_panel -->
-       <!-- Buttons when multiple elements are selected -->
-       <div id="multiselected_panel">
-         <div class="tool_sep"></div>
-         <se-button id="tool_clone_multi" title="${i18next.t('tools.clone')}" shortcut="C" src="./images/clone.svg"></se-button>
-         <se-button id="tool_delete_multi" title="${i18next.t('tools.del')}" shortcut="Delete/Backspace"
-           src="./images/delete.svg"></se-button>
-         <div class="tool_sep"></div>
-         <se-button id="tool_group_elements" title="${i18next.t('tools.group_elements')}" shortcut="G" src="./images/group_elements.svg">
-         </se-button>
-         <se-button id="tool_make_link_multi" title="${i18next.t('tools.make_link')}" src="./images/globe_link.svg"></se-button>
-         <se-button id="tool_align_left" title="${i18next.t('tools.align_left')}" src="./images/align_left.svg"></se-button>
-         <se-button id="tool_align_center" title="${i18next.t('tools.align_center')}" src="./images/align_center.svg"></se-button>
-         <se-button id="tool_align_right" title="${i18next.t('tools.align_right')}" src="./images/align_right.svg"></se-button>
-         <se-button id="tool_align_top" title="${i18next.t('tools.align_top')}" src="./images/align_top.svg"></se-button>
-         <se-button id="tool_align_middle" title="${i18next.t('tools.align_middle')}" src="./images/align_middle.svg"></se-button>
-         <se-button id="tool_align_bottom" title="${i18next.t('tools.align_bottom')}" src="./images/align_bottom.svg"></se-button>
-         <se-list id="tool_align_relative" label="relative to:">
-           <se-list-item id="selected_objects" value="selected">${i18next.t('tools.selected_objects')}</se-list-item>
-           <se-list-item id="largest_object" value="largest">${i18next.t('tools.largest_object')}</se-list-item>
-           <se-list-item id="smallest_object" value="smallest">${i18next.t('tools.smallest_object')}</se-list-item>
-           <se-list-item id="page" value="page">${i18next.t('tools.page')}</se-list-item>
-         </se-list>
-         <div class="tool_sep"></div>
-       </div> <!-- multiselected_panel -->
-       <div id="rect_panel">
-         <div class="toolset">
-           <se-spin-input id="rect_width" data-attr="width" size="4" label="w" title="${i18next.t('properties.rect_width')}">
-           </se-spin-input>
-           <se-spin-input id="rect_height" data-attr="height" size="4" label="h" title="${i18next.t('properties.rect_height')}">
-           </se-spin-input>
-         </div>
-         <se-spin-input id="rect_rx" min=0 max=1000 step=1 size="3" title="${i18next.t('properties.corner_radius')}"
-           data-attr="Corner Radius" src="./images/c_radius.svg"></se-spin-input>
-       </div> <!-- rect_panel -->
-       <div id="image_panel">
-         <div class="toolset">
-           <se-spin-input id="image_width" data-attr="width" size="4" type="text" label="w" title="${i18next.t('properties.image_width')}">
-           </se-spin-input>
-           <se-spin-input id="image_height" data-attr="height" size="4" type="text" label="h"
-             title="${i18next.t('properties.image_height')}"></se-spin-input>
-         </div>
-         <div class="toolset">
-           <label id="tool_image_url">url:
-             <input id="image_url" type="text" title="${i18next.t('properties.image_url')}" size="35" />
-           </label>
-           <label id="tool_change_image">
-             <button id="change_image_url" style="display: none;">Change Image</button>
-             <span id="url_notice"
-               title="${i18next.t('tools.no_embed')}"></span>
-           </label>
-         </div>
-       </div> <!-- image_panel -->
-       <div id="circle_panel">
-         <div class="toolset">
-           <se-spin-input id="circle_cx" data-attr="cx" size="4" label="cx"></se-spin-input>
-           <se-spin-input id="circle_cy" data-attr="cy" size="4" label="cy"></se-spin-input>
-         </div>
-         <div class="toolset">
-           <se-spin-input id="circle_r" data-attr="r" size="4" label="r"></se-spin-input>
-         </div>
-       </div> <!-- circle_panel -->
-       <div id="ellipse_panel">
-         <div class="toolset">
-           <se-spin-input id="ellipse_cx" data-attr="cx" size="4" title="${i18next.t('properties.ellipse_cx')}" label="cx">
-           </se-spin-input>
-           <se-spin-input id="ellipse_cy" data-attr="cy" size="4" title="${i18next.t('properties.ellipse_cy')}" label="cy">
-           </se-spin-input>
-         </div>
-         <div class="toolset">
-           <se-spin-input id="ellipse_rx" data-attr="rx" size="4" title="${i18next.t('properties.ellipse_rx')}" label="rx">
-           </se-spin-input>
-           <se-spin-input id="ellipse_ry" data-attr="ry" size="4" title="${i18next.t('properties.ellipse_ry')}" label="ry">
-           </se-spin-input>
-         </div>
-       </div> <!-- ellipse_panel -->
-       <div id="line_panel">
-         <div class="toolset">
-           <se-spin-input id="line_x1" data-attr="x1" size="4" title="${i18next.t('properties.line_x1')}" label="x1">
-           </se-spin-input>
-           <se-spin-input id="line_y1" data-attr="y1" size="4" title="${i18next.t('properties.line_y1')}" label="y1">
-           </se-spin-input>
-           <se-spin-input id="line_x2" data-attr="x2" size="4" title="${i18next.t('properties.line_x2')}" label="x2">
-           </se-spin-input>
-           <se-spin-input id="line_y2" data-attr="y2" size="4" title="${i18next.t('properties.line_y2')}" label="y2">
-           </se-spin-input>
-         </div>
-       </div> <!-- line_panel -->
-       <div id="text_panel">
+      <div id="tools_top">
+        <div id="editor_panel">
+          <div class="tool_sep"></div>
+          <se-button
+            id="tool_source"
+            title="${i18next.t('tools.tool_source')}"
+            shortcut="U"
+            src="${imgPath}/source.svg"
+          ></se-button>
+          <se-button
+            id="tool_wireframe"
+            title="${i18next.t('tools.wireframe_mode')}"
+            shortcut="F"
+            src="${imgPath}/wireframe.svg"
+          ></se-button>
+        </div> <!-- editor_panel -->
+        <div id="history_panel">
+          <div class="tool_sep"></div>
+          <se-button id="tool_undo" title="${i18next.t('tools.undo')}" shortcut="Z" src="${imgPath}/undo.svg" disabled></se-button>
+          <se-button id="tool_redo" title="${i18next.t('tools.redo')}" shortcut="Y" src="${imgPath}/redo.svg" disabled></se-button>
+        </div> <!-- history_panel -->
+        <!-- Buttons when a single element is selected -->
+        <div id="selected_panel">
          <div class="toolset">
-           <se-button id="tool_bold" title="${i18next.t('properties.bold')}" src="./images/bold.svg" shortcut="B"></se-button>
-           <se-button id="tool_italic" title="${i18next.t('properties.italic')}" src="./images/italic.svg" shortcut="I"></se-button>
+            <div class="tool_sep"></div>
+            <se-button id="tool_clone" title="${i18next.t('tools.clone')}" shortcut="D" src="${imgPath}/clone.svg"></se-button>
+            <se-button id="tool_delete" title="${i18next.t('tools.del')}" shortcut="Delete/Backspace" src="${imgPath}/delete.svg">
+            </se-button>
          </div>
          <div class="toolset">
-           <se-button id="tool_text_anchor_start" title="${i18next.t('properties.text_anchor_start')}" src="./images/anchor_start.svg">
-           </se-button>
-           <se-button id="tool_text_anchor_middle" title="${i18next.t('properties.text_anchor_middle')}" src="./images/anchor_middle.svg">
-           </se-button>
-           <se-button id="tool_text_anchor_end" title="${i18next.t('properties.text_anchor_end')}" src="./images/anchor_end.svg">
-           </se-button>
+            <div class="tool_sep"></div>
+            <se-button id="tool_move_top" title="${i18next.t('tools.move_top')}" shortcut="Ctrl+Shift+]" src="${imgPath}/move_top.svg">
+            </se-button>
+            <se-button id="tool_move_bottom" title="${i18next.t('tools.move_bottom')}" shortcut="Ctrl+Shift+[" src="${imgPath}/move_bottom.svg">
+            </se-button>
          </div>
-          <se-list id="tool_font_family" label="Font:">
-           <se-list-item value="Serif" style="font-family:serif;">${i18next.t('properties.serif')}</se-list-item>
-           <se-list-item value="Sans-serif" style="font-family:sans-serif;">${i18next.t('properties.sans_serif')}</se-list-item>
-           <se-list-item value="Cursive" style="font-family:cursive;">${i18next.t('properties.cursive')}</se-list-item>
-           <se-list-item value="Fantasy" style="font-family:fantasy;">${i18next.t('properties.fantasy')}</se-list-item>
-           <se-list-item value="Monospace" style="font-family:monospace;">${i18next.t('properties.monospace')}</se-list-item>
-           <se-list-item value="Courier" style="font-family:courier;">${i18next.t('properties.courier')} </se-list-item>
-           <se-list-item value="Helvetica" style="font-family:helvetica;">${i18next.t('properties.helvetica')}</se-list-item>
-           <se-list-item value="Times" style="font-family:times;">${i18next.t('properties.times')}</se-list-item>
+          <div class="toolset">
+            <se-button id="tool_topath" title="${i18next.t('tools.to_path')}" src="${imgPath}/to_path.svg"></se-button>
+            <se-button id="tool_reorient" title="${i18next.t('tools.reorient_path')}" src="${imgPath}/reorient.svg"></se-button>
+            <se-button id="tool_make_link" title="${i18next.t('tools.make_link')}" src="${imgPath}/globe_link.svg"></se-button>
+          </div>
+          <div class="toolset">
+            <div class="tool_sep"></div>
+            <se-input id="elem_id" data-attr="id" size="10" label="id" title="${i18next.t('properties.id')}"></se-input>
+          </div>
+          <div class="toolset">
+            <se-input id="elem_class" data-attr="class" size="10" label="class" title="${i18next.t('properties.class')}"></se-input>
+            <se-spin-input size="3" id="angle" min=-180 max=180 step=5 src="${imgPath}/angle.svg"
+            title="${i18next.t('properties.angle')}"></se-spin-input>
+          <se-spin-input size="2" id="blur" min=0 max=100 step=5 src="${imgPath}/blur.svg"
+            title="${i18next.t('properties.blur')}"></se-spin-input>
+          <se-list id="tool_position" title="${i18next.t('tools.align_to_page')}" label="" width="22px" height="22px">
+            <se-list-item id="tool_posleft" value="l">
+              <img title="${i18next.t('tools.align_left')}" src="${imgPath}/align_left.svg" height="22px">
+            </se-list-item>
+            <se-list-item id="tool_poscenter" value="c">
+              <img title="${i18next.t('tools.align_center')}" src="${imgPath}/align_center.svg" height="22px">
+            </se-list-item>
+            <se-list-item id="tool_posright" value="r">
+              <img title="${i18next.t('tools.align_right')}" src="${imgPath}/align_right.svg" height="22px">
+            </se-list-item>
+            <se-list-item id="tool_postop" value="t">
+              <img title="${i18next.t('tools.align_top')}" src="${imgPath}/align_top.svg" height="22px">
+            </se-list-item>
+            <se-list-item id="tool_posmiddle" value="m">
+              <img title="${i18next.t('tools.align_middle')}" src="${imgPath}/align_middle.svg" height="22px">
+            </se-list-item>
+            <se-list-item id="tool_posbottom" value="b">
+              <img title="${i18next.t('tools.align_bottom')}" src="${imgPath}/align_bottom.svg" height="22px">
+            </se-list-item>
          </se-list>
-          <se-spin-input size="2" id="font_size" min=1 max=1000 step=1 title="${i18next.t('properties.font_size')}"
-           src="./images/fontsize.svg"></se-spin-input>
+   
+          </div>
+        <div id="xy_panel" class="toolset">
+            <se-spin-input id="selected_x" data-attr="x" size="4" type="text" label="x" title="${i18next.t('properties.pos_x')}">
+            </se-spin-input>
+            <se-spin-input id="selected_y" data-attr="y" size="4" type="text" label="y" title="${i18next.t('properties.pos_y')}">
+            </se-spin-input>
+          </div>
+        </div> <!-- selected_panel -->
+        <!-- Buttons when multiple elements are selected -->
+        <div id="multiselected_panel">
+          <div class="tool_sep"></div>
+          <se-button id="tool_clone_multi" title="${i18next.t('tools.clone')}" shortcut="C" src="${imgPath}/clone.svg"></se-button>
+          <se-button id="tool_delete_multi" title="${i18next.t('tools.del')}" shortcut="Delete/Backspace"
+            src="${imgPath}/delete.svg"></se-button>
+          <div class="tool_sep"></div>
+          <se-button id="tool_group_elements" title="${i18next.t('tools.group_elements')}" shortcut="G" src="${imgPath}/group_elements.svg">
+          </se-button>
+          <se-button id="tool_make_link_multi" title="${i18next.t('tools.make_link')}" src="${imgPath}/globe_link.svg"></se-button>
+          <se-button id="tool_align_left" title="${i18next.t('tools.align_left')}" src="${imgPath}/align_left.svg"></se-button>
+          <se-button id="tool_align_center" title="${i18next.t('tools.align_center')}" src="${imgPath}/align_center.svg"></se-button>
+          <se-button id="tool_align_right" title="${i18next.t('tools.align_right')}" src="${imgPath}/align_right.svg"></se-button>
+          <se-button id="tool_align_top" title="${i18next.t('tools.align_top')}" src="${imgPath}/align_top.svg"></se-button>
+          <se-button id="tool_align_middle" title="${i18next.t('tools.align_middle')}" src="${imgPath}/align_middle.svg"></se-button>
+          <se-button id="tool_align_bottom" title="${i18next.t('tools.align_bottom')}" src="${imgPath}/align_bottom.svg"></se-button>
+          <se-list id="tool_align_relative" label="relative to:">
+            <se-list-item id="selected_objects" value="selected">${i18next.t('tools.selected_objects')}</se-list-item>
+            <se-list-item id="largest_object" value="largest">${i18next.t('tools.largest_object')}</se-list-item>
+            <se-list-item id="smallest_object" value="smallest">${i18next.t('tools.smallest_object')}</se-list-item>
+            <se-list-item id="page" value="page">${i18next.t('tools.page')}</se-list-item>
+          </se-list>
+          <div class="tool_sep"></div>
+        </div> <!-- multiselected_panel -->
+        <div id="rect_panel">
+          <div class="toolset">
+            <se-spin-input id="rect_width" data-attr="width" size="4" label="w" title="${i18next.t('properties.rect_width')}">
+            </se-spin-input>
+            <se-spin-input id="rect_height" data-attr="height" size="4" label="h" title="${i18next.t('properties.rect_height')}">
+            </se-spin-input>
+          </div>
+          <se-spin-input id="rect_rx" min=0 max=1000 step=1 size="3" title="${i18next.t('properties.corner_radius')}"
+            data-attr="Corner Radius" src="${imgPath}/c_radius.svg"></se-spin-input>
+        </div> <!-- rect_panel -->
+        <div id="image_panel">
+          <div class="toolset">
+            <se-spin-input id="image_width" data-attr="width" size="4" type="text" label="w" title="${i18next.t('properties.image_width')}">
+            </se-spin-input>
+            <se-spin-input id="image_height" data-attr="height" size="4" type="text" label="h"
+              title="${i18next.t('properties.image_height')}"></se-spin-input>
+          </div>
+          <div class="toolset">
+            <se-input id="image_url" data-attr="image_url" size="15" label="${i18next.t('properties.image_url')}"></se-input> 
+          </div>
+        </div> <!-- image_panel -->
+        <div id="circle_panel">
+          <div class="toolset">
+            <se-spin-input id="circle_cx" data-attr="cx" size="4" label="cx"></se-spin-input>
+            <se-spin-input id="circle_cy" data-attr="cy" size="4" label="cy"></se-spin-input>
+          </div>
+          <div class="toolset">
+            <se-spin-input id="circle_r" data-attr="r" size="4" label="r"></se-spin-input>
+          </div>
+        </div> <!-- circle_panel -->
+        <div id="ellipse_panel">
+          <div class="toolset">
+            <se-spin-input id="ellipse_cx" data-attr="cx" size="4" title="${i18next.t('properties.ellipse_cx')}" label="cx">
+            </se-spin-input>
+            <se-spin-input id="ellipse_cy" data-attr="cy" size="4" title="${i18next.t('properties.ellipse_cy')}" label="cy">
+            </se-spin-input>
+          </div>
+          <div class="toolset">
+            <se-spin-input id="ellipse_rx" data-attr="rx" size="4" title="${i18next.t('properties.ellipse_rx')}" label="rx">
+            </se-spin-input>
+            <se-spin-input id="ellipse_ry" data-attr="ry" size="4" title="${i18next.t('properties.ellipse_ry')}" label="ry">
+            </se-spin-input>
+          </div>
+        </div> <!-- ellipse_panel -->
+        <div id="line_panel">
+          <div class="toolset">
+            <se-spin-input id="line_x1" data-attr="x1" size="4" title="${i18next.t('properties.line_x1')}" label="x1">
+            </se-spin-input>
+            <se-spin-input id="line_y1" data-attr="y1" size="4" title="${i18next.t('properties.line_y1')}" label="y1">
+            </se-spin-input>
+            <se-spin-input id="line_x2" data-attr="x2" size="4" title="${i18next.t('properties.line_x2')}" label="x2">
+            </se-spin-input>
+            <se-spin-input id="line_y2" data-attr="y2" size="4" title="${i18next.t('properties.line_y2')}" label="y2">
+            </se-spin-input>
+          </div>
+        </div> <!-- line_panel -->
+        <div id="text_panel">
+          <div class="toolset">
+            <se-button id="tool_bold" title="${i18next.t('properties.bold')}" src="${imgPath}/bold.svg" shortcut="B"></se-button>
+            <se-button id="tool_italic" title="${i18next.t('properties.italic')}" src="${imgPath}/italic.svg" shortcut="I"></se-button>
+            <se-button id="tool_text_anchor_start" title="${i18next.t('properties.text_anchor_start')}" src="${imgPath}/anchor_start.svg"></se-button>
+            <se-button id="tool_text_anchor_middle" title="${i18next.t('properties.text_anchor_middle')}" src="${imgPath}/anchor_middle.svg"></se-button>
+            <se-button id="tool_text_anchor_end" title="${i18next.t('properties.text_anchor_end')}" src="${imgPath}/anchor_end.svg"></se-button>
+            <se-list id="tool_font_family" label="Font:">
+              <se-list-item value="Serif" style="font-family:serif;">${i18next.t('properties.serif')}</se-list-item>
+              <se-list-item value="Sans-serif" style="font-family:sans-serif;">${i18next.t('properties.sans_serif')}</se-list-item>
+              <se-list-item value="Cursive" style="font-family:cursive;">${i18next.t('properties.cursive')}</se-list-item>
+              <se-list-item value="Fantasy" style="font-family:fantasy;">${i18next.t('properties.fantasy')}</se-list-item>
+              <se-list-item value="Monospace" style="font-family:monospace;">${i18next.t('properties.monospace')}</se-list-item>
+              <se-list-item value="Courier" style="font-family:courier;">${i18next.t('properties.courier')} </se-list-item>
+              <se-list-item value="Helvetica" style="font-family:helvetica;">${i18next.t('properties.helvetica')}</se-list-item>
+              <se-list-item value="Times" style="font-family:times;">${i18next.t('properties.times')}</se-list-item>
+            </se-list>
+            <se-spin-input size="2" id="font_size" min=1 max=1000 step=1 title="${i18next.t('properties.font_size')}"
+              src="${imgPath}/fontsize.svg"></se-spin-input>
+          </div>
          <!-- Not visible, but still used -->
          <input id="text" type="text" size="35" />
        </div> <!-- text_panel -->
-       <!-- formerly gsvg_panel -->
-       <div id="container_panel">
-         <div class="tool_sep"></div>
-         <!-- Add viewBox field here? -->
-         <label id="group_title" title="${i18next.t('ui.group_identify_label')}">
-           <span>label</span>
-           <input id="g_title" data-attr="title" size="10" type="text" />
-         </label>
-       </div> <!-- container_panel -->
-       <div id="use_panel">
-         <se-button id="tool_unlink_use" title="${i18next.t('tools.tool_unlink_use')}"
-           src="./images/unlink_use.svg">
-         </se-button>
-       </div> <!-- use_panel -->
-       <div id="g_panel">
-         <se-button id="tool_ungroup" title="${i18next.t('tools.ungroup')}" src="./images/ungroup.svg">
-         </se-button>
-       </div> <!-- g_panel -->
-       <!-- For anchor elements -->
-       <div id="a_panel">
-         <label id="tool_link_url" title="${i18next.t('tools.set_link_url')}">
-           <span id="linkLabel" class="icon_label"></span>
-           <input id="link_url" type="text" size="35" />
-         </label>
-       </div> <!-- a_panel -->
-       <div id="path_node_panel">
-         <div class="tool_sep"></div>
-        <se-button id="tool_node_link" title="${i18next.t('tools.node_link')}" src="./images/tool_node_link.svg" pressed>
-         </se-button>
-         <div class="tool_sep"></div>
-         <se-spin-input id="path_node_x" data-attr="x" size="4" title="${i18next.t('properties.node_x')}" label="x:">
-         </se-spin-input>
-         <se-spin-input id="path_node_y" data-attr="y" size="4" title="${i18next.t('properties.node_y')}" label="y:">
-         </se-spin-input>
-         <select id="seg_type" title="${i18next.t('tools.seg_type')}">
-           <option id="straight_segments" selected="selected" value="4">${i18next.t('properties.straight_segments')}</option>
-           <option id="curve_segments" value="6">${i18next.t('properties.curve_segments')}</option>
-         </select>
-         <se-button id="tool_node_clone" title="${i18next.t('tools.node_clone')}" src="./images/tool_node_clone.svg"></se-button>
-         <se-button id="tool_node_delete" title="${i18next.t('tools.node_delete')}" src="./images/tool_node_delete.svg"></se-button>
-         <se-button id="tool_openclose_path" title="${i18next.t('tools.openclose_path')}" src="./images/tool_openclose_path.svg">
-         </se-button>
-         <se-button id="tool_add_subpath" title="${i18next.t('tools.add_subpath')}" src="./images/tool_add_subpath.svg"></se-button>
-       </div> <!-- path_node_panel -->
-       <div id="cur_context_panel"></div>
-     </div> <!-- tools_top -->
+        <!-- formerly gsvg_panel -->
+        <div id="container_panel">
+          <div class="tool_sep"></div>
+          <se-input id="g_title" data-attr="title" size="8" label="${i18next.t('label')}"></se-input> 
+        </div> <!-- container_panel -->
+        <div id="use_panel">
+          <se-button id="tool_unlink_use" title="${i18next.t('tools.tool_unlink_use')}"
+            src="${imgPath}/unlink_use.svg">
+          </se-button>
+        </div> <!-- use_panel -->
+        <div id="g_panel">
+          <se-button id="tool_ungroup" title="${i18next.t('tools.ungroup')}" src="${imgPath}/ungroup.svg">
+          </se-button>
+        </div> <!-- g_panel -->
+        <!-- For anchor elements -->
+        <div id="a_panel">
+          <label id="tool_link_url" title="${i18next.t('tools.set_link_url')}">
+            <span id="linkLabel" class="icon_label"></span>
+            <input id="link_url" type="text" size="35" />
+          </label>
+        </div> <!-- a_panel -->
+        <div id="path_node_panel">
+          <div class="tool_sep"></div>
+          <se-button id="tool_node_link" title="${i18next.t('tools.node_link')}" src="${imgPath}/tool_node_link.svg" pressed>
+          </se-button>
+          <div class="tool_sep"></div>
+          <se-spin-input id="path_node_x" data-attr="x" size="4" title="${i18next.t('properties.node_x')}" label="x:">
+          </se-spin-input>
+          <se-spin-input id="path_node_y" data-attr="y" size="4" title="${i18next.t('properties.node_y')}" label="y:">
+          </se-spin-input>
+          <select id="seg_type" title="${i18next.t('tools.seg_type')}">
+            <option id="straight_segments" selected="selected" value="4">${i18next.t('properties.straight_segments')}</option>
+            <option id="curve_segments" value="6">${i18next.t('properties.curve_segments')}</option>
+          </select>
+          <se-button id="tool_node_clone" title="${i18next.t('tools.node_clone')}" src="${imgPath}/tool_node_clone.svg"></se-button>
+          <se-button id="tool_node_delete" title="${i18next.t('tools.node_delete')}" src="${imgPath}/tool_node_delete.svg"></se-button>
+          <se-button id="tool_openclose_path" title="${i18next.t('tools.openclose_path')}" src="${imgPath}/tool_openclose_path.svg">
+          </se-button>
+          <se-button id="tool_add_subpath" title="${i18next.t('tools.add_subpath')}" src="${imgPath}/tool_add_subpath.svg"></se-button>
+        </div> <!-- path_node_panel -->
+        <div id="cur_context_panel"></div>
+     </div>
       `;
    this.editor.$svgEditor.append(template.content.cloneNode(true));
    // svg editor source dialoag added to DOM
@@ -996,7 +1032,7 @@ class TopPanel {
      "se-svg-source-editor-dialog"
    );
    newSeEditorDialog.setAttribute("id", "se-svg-editor-dialog");
-    this.editor.$svgEditor.append(newSeEditorDialog);
+    this.editor.$container.append(newSeEditorDialog);
    newSeEditorDialog.init(i18next);
    // register action to top panel buttons
    $id("tool_source").addEventListener(
@@ -1111,10 +1147,10 @@ class TopPanel {
      "click",
      this.clickGroup.bind(this)
    );
-    $id("change_image_url").addEventListener(
-      "click",
-      this.promptImgURL.bind(this)
-    );
+    $id('image_url').addEventListener('change', (evt) => {
+      this.setImageURL(evt.currentTarget.value);
+    });
+
    // all top panel attributes
    [
      "elem_id",
--- a/src/editor/svgedit.css
+++ b/src/editor/svgedit.css
@@ -1,4 +1,4 @@
-:root{
+:root {
  --main-bg-color: #72797A;
  --text-color: #000000;
  --border-color: #808080;
@@ -10,26 +10,83 @@
  --input-color: #B2B2B2;
 }

-body {
-  background: var(--main-bg-color);
-}
-
-html, body, div{
-  user-select: text;
-}
-
 .svg_editor * {
  transform-origin: 0 0;
 }

 .svg_editor {
+  display: grid;
+  grid-template-rows: auto 15px 1fr 40px;
+  grid-template-columns: 34px 15px 1fr 15px;
+  grid-template-areas: 
+    "top   top    top    top"
+    "left  corner rulerX side"
+    "left  rulerY workarea side"
+    "left  bottom bottom bottom";
  font-size: 8pt;
+  background: var(--main-bg-color);
  font-family: Verdana, Helvetica, Arial;
  color: var(--text-color);
+  user-select: text;
+  width: 100%;
+  height: 100%;
+}
+
+.svg_editor.open {
+  grid-template-columns: 34px 15px 1fr 150px;
+}
+
+/* on smaller screen, allow 2 lines for the toolbar */
+
+@media screen and (max-width:1250px) {
+  .svg_editor {
+    grid-template-rows: minmax(80px, auto) 15px 1fr 40px;
+  }
+}
+
+#svgroot {
+  user-select: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+#workarea {
+  grid-area: workarea;
+  background-color: #A0A0A0;
+  border: 1px solid var(--border-color);
+  overflow: auto;
+  text-align: center;
+}
+
+#svgcanvas {
+  line-height: normal;
+  display: inline-block;
+  background: var(--canvas-bg-color);
+  text-align: center;
+  vertical-align: middle;
+  position: relative;
+}
+
+#sidepanels {
+  grid-area: side;
+}
+
+#sidepanel_handle {
+  writing-mode: vertical-rl;
+  text-orientation: upright;
+  color: white;
+  position: absolute;
+  cursor: pointer;
+  top:50%;
+}
+
+.svg_editor:not(.open) #sidepanel_content {
+  display: none;
 }

 a {
-  color:var(--link-color);
+  color: var(--link-color);
 }

 hr {
@@ -37,64 +94,20 @@ hr {
  border-bottom: 1px solid var(--border-color);
 }

-#linkLabel > svg {
+#linkLabel>svg {
  height: 20px;
  padding-top: 4px;
 }

-#sidepanels {
-  display: inline-block;
-  position:absolute;
-  top: 40px;
-  bottom: 40px;
-  right: 0;
-  width: 2px;
-  padding: 10px;
-  border-color: var(--border-color);
-  border-style: solid;
-  border-width: 1px;
-  border-left: none;
-  overflow-x:hidden;
-  overflow-y:visible;
+#layersLabel {
+  color: white;
 }

 #layerpanel {
-  display: inline-block;
-  position:relative;
-  top: 0px;
-  bottom: 0;
-  left: 12px;
-  width: 0;
-  overflow: hidden;
-  margin: 0;
  user-select: none;
+  padding-left: 15px;
 }

-/*
-  border-style: solid;
-  border-color: #666;
-  border-width: 0px 0px 0px 1px;
-*/
-#sidepanel_handle {
-  display: inline-block;
-  position: absolute;
-  background-color: --main-bg-color;
-  color: #fff;
-  font-weight: 100;
-  left: 0;
-  top: 40%;
-  width: 1em;
-  padding: 5px 5px 5px 5px;
-  margin-left: 6px;
-  cursor: pointer;
-  border-radius: 5px;
-  user-select: none;
-}
-
-#sidepanel_handle * {
-  cursor: pointer;
-  user-select: none;
-}
 #layerbuttons {
  margin: 0;
  padding: 0;
@@ -102,10 +115,7 @@ hr {
  padding-right: 2px;
  width: 125px;
  height: 20px;
-  border-right: 1px solid #FFFFFF;
-  border-bottom: 1px solid #FFFFFF;
-  border-left: 1px solid var(--border-color);
-  border-top: 1px solid var(--border-color);
+  border: 0px;
  overflow: hidden;
  display: flex;
  justify-content: center;
@@ -115,7 +125,7 @@ hr {
 #layerlist {
  margin: 1px;
  padding: 0;
-  width: 127px;
+  width: 132px;
  border-collapse: collapse;
  border: 1px solid var(--border-color);
  background-color: #FFFFFF;
@@ -175,17 +185,11 @@ hr {
 —————————————————————————————*/

 #main_button {
-  position: absolute;
-  top: 4px;
-  left: 5px;
-  z-index: 5;
  color: #fff;
  border-radius: 3px;
-}
-
-#main_button:hover {
-  background-color: var(--icon-bg-color-hover);
-  color: #fff;
+  padding-block: 2px;
+  padding-left: 3px;
+  height: 34px;
 }

 #main_icon {
@@ -218,7 +222,7 @@ hr {
  height: 28px;
 }

-#main_icon > div {
+#main_icon>div {
  float: left;
 }

@@ -258,15 +262,14 @@ hr {
  top: -9px;
 }

-#main_menu ul,
-#main_menu li {
+#main_menu ul, #main_menu li {
  list-style: none;
  margin: 0;
  padding: 0;
 }

 #main_menu li {
-/*  height: 35px;*/
+  /*  height: 35px;*/
  line-height: 22px;
  padding-top: 7px;
  padding-left: 7px;
@@ -279,7 +282,7 @@ hr {
  background: #FFC;
 }

-#main_menu li > div {
+#main_menu li>div {
  float: left;
  padding-right: 5px;
 }
@@ -291,76 +294,42 @@ hr {
 /*—————————————————————————————*/

 #tools_top {
-  position: absolute;
-  left: 96px;
-  top: 2px;
-  min-height: 40px;
-  border-bottom: none;
-  overflow: visible;
-  right:1px;
-}
-
-#tools_top .tool_sep {
-  margin-top: 5px;
-}
-
-#tools_top > div > * {
-  float: left;
-}
-#tools_top se-input {
-  margin-top: 5px;
-  height: 34px;
-}
-#tools_top se-spin-input, #tools_top se-list {
-  margin-top: 0;
-  height: 34px;
+  grid-area: top;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  /* leave space for the main menu */
  position: relative;
-  top: 5px;
+  background-color: var(--main-bg-color);
 }

-#tools_top se-dropdown-list {
-  margin-top: 5px;
-  height: 34px;
+#tools_top>* {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  background-color: var(--main-bg-color);
 }

 /*—————————————————————————————*/

 #tools_bottom {
-  position: absolute;
-  left: 40px;
-  right: 0;
-  bottom: 0;
-  height: 33px;
-  overflow: visible;
-}
-
-#tools_bottom * {
-  float: left;
-  margin-right: 2px;
-}
-
-#tools_bottom se-spin-input {
-  float: left;
-  vertical-align: middle;
-  display:flex;
+  grid-area: bottom;
+  overflow: scroll;
+  display: flex;
  align-items: center;
 }
-#tools_bottom elix-dropdown-list{
-  width:22px;
+
+#tools_bottom se-list {
+  margin-bottom: 8px;
 }

+
 /*—————————————————————————————*/

 #tools_left {
-  position: absolute;
+  grid-area: left;
  border-right: none;
-  width: 32px;
-  top: 40px;
-  left: 1px;
-  margin-top: -2px;
-  padding-left: 2px;
-  background: --main-bg-color;
-  z-index: 4;
+  overflow-y: scroll;
 }

 /*—————————————————————————————*/
@@ -381,7 +350,7 @@ hr {
  stroke: none;
 }

-#workarea.wireframe #canvasBackground > rect {
+#workarea.wireframe #canvasBackground>rect {
  fill: #FFF !important;
 }

@@ -394,7 +363,6 @@ hr {
  vertical-align: 12px;
 }

-/*TODO: Adjust position of rulers are not visible*/
 #cur_context_panel {
  position: absolute;
  top: 57px;
@@ -418,22 +386,11 @@ hr {
  text-decoration: underline;
 }

-div.toolset, div.toolset > * {
-  float: left;
+.toolset {
+  display: flex;
+  flex-direction: row;
 }

-div.toolset {
-  height: 34px;
-}
-
-div.toolset label span {
-/*  outline: 1px solid red;*/
-  padding-top: 3px;
-  display: inline-block;
-}
-
-
-
 input[type=text] {
  padding: 2px;
 }
@@ -509,7 +466,7 @@ input[type=text] {
  margin-right: 0;
 }

- #main_menu li#tool_open,  #main_menu li#tool_import {
+#main_menu li#tool_open, #main_menu li#tool_import {
  position: relative;
  overflow: hidden;
 }
@@ -518,16 +475,15 @@ input[type=text] {
  overflow: hidden;
 }

-#tool_open input,
-#tool_import input,
-#tool_image input {
+#tool_open input, #tool_import input, #tool_image input {
  position: absolute;
  opacity: 0;
  font-size: 10em;
  top: -5px;
  right: -5px;
  margin: 0;
-  cursor: pointer; /* Sadly doesn't appear to have an effect */
+  cursor: pointer;
+  /* Sadly doesn't appear to have an effect */
 }

 .disabled {
@@ -536,12 +492,9 @@ input[type=text] {
 }

 .tool_sep {
-  width: 1px;
-  background: #888;
  border-left: 1px outset #EEE;
-  margin: 2px 3px;
-  padding: 0;
-  height: 24px;
+  margin: 5px 1px;
+  height: 30px;
 }

 .width_label {
@@ -553,18 +506,12 @@ input[type=text] {
  left: -9999px;
 }

-#url_notice {
-  padding-top: 4px;
-  display: none;
-}
-
 .bottom-icon {
  width: 22px;
 }

-
 #palette {
-  float: right;
+  margin-left: auto;
 }

 #stroke_expand {
@@ -598,7 +545,9 @@ input[type=text] {
  background: white;
 }

-#tool_opacity { right: 0;}
+#tool_opacity {
+  right: 0;
+}

 #tool_opacity {
  overflow: visible;
@@ -608,7 +557,7 @@ ul li.current {
  background-color: #F4E284;
 }

- #copyright {
+#copyright {
  text-align: right;
  padding-right: .3em;
 }
@@ -643,47 +592,4 @@ ul li.current {

 .dropdown li.tool_button {
  width: 24px;
-}
-
-@media screen and (max-width:1250px) {
-  .expanded #palette_holder {
-    left: 560px;
-    overflow-x: scroll;
-    padding: 0 5px;
-    margin-top: 2px;
-    height: 30px;
-  }
-  #tools_top {
-    height: 71px;
-    overflow-x: scroll;
-  }
-  #workarea, #sidepanels {
-    top: 70px !important;
-  }
-  #rulers #ruler_corner,
-  #rulers #ruler_x, #tools_left {
-    top: 71px;
-  }
-
-  #rulers #ruler_y {
-    top: 86px;
-  }
-
-  #cur_context_panel {
-    top: 87px;
-  }
-
-  #selected_panel {
-    clear: right;
-  }
-}
-
-@media screen and (max-width:1100px) {
-  #tools_bottom:not(.expanded) #palette_holder {
-    left: 410px;
-    overflow-x: scroll;
-    padding: 0 5px;
-    margin-top: 2px;
-    height: 30px;
-  }
 }
--- a/src/editor/templates/editorTemplate.js
+++ b/src/editor/templates/editorTemplate.js
@@ -1,46 +1,11 @@
 const editorTemplate = document.createElement('template');

 editorTemplate.innerHTML = `
-  <style>
-  #svgroot {
-    -moz-user-select: none;
-    -webkit-user-select: none;
-    position: absolute;
-    top: 0;
-    left: 0;
-  }
-  #workarea {
-    display: inline-table-cell;
-    position:absolute;
-    top: 40px;
-    left: 40px;
-    bottom: 40px;
-    right: 14px;
-    background-color: #A0A0A0;
-    border: 1px solid var(--border-color);
-    overflow: auto;
-    text-align: center;
-  }
-  
-  #svgcanvas {
-    line-height: normal;
-    display: inline-block;
-    background: var(--canvas-bg-color);
-    text-align: center;
-    vertical-align: middle;
-    width: 640px;
-    height: 480px;
-    /* for widget regions that shouldn't react to dragging */
-    -apple-dashboard-region:dashboard-region(control rectangle 0px 0px 0px 0px);
-    position: relative;
-  }
-  
-  </style>
-</div>
-<div id="workarea">
- <div id="svgcanvas" style="position: relative;">
- </div>
-</div>
+  <div class="svg_editor">
+    <div id="workarea">
+      <div id="svgcanvas"></div>
+    </div>
+  </div>
 `;

 export default editorTemplate;
--- a/Show More
+++ b/Show More