From 57e7fe316b04236adffbc6044a14d8fd24928bf2 Mon Sep 17 00:00:00 2001
From: JFH <20402845+jfhenon@users.noreply.github.com>
Date: Sun, 14 Mar 2021 21:16:35 +0100
Subject: [PATCH] refactor with Panel classes

---
 cypress/integration/unit/test1.js             |    4 +-
 nyc.config.js                                 |    5 +-
 package-lock.json                             |  115 +-
 package.json                                  |    9 +-
 src/editor/{svgedit.js => Editor.js}          |  664 +---------
 src/editor/EditorStartup.js                   |   21 +-
 src/editor/dragmove/dragmove.js               |   97 ++
 .../ext-overview_window.js                    |    6 +-
 src/editor/index.html                         |  323 +----
 src/editor/index.js                           |    5 +-
 src/editor/panels/BottomPanel.js              |  244 ++++
 src/editor/panels/BottomPanelHandlers.js      |  197 ---
 src/editor/panels/LayersPanel.js              |  357 ++++--
 src/editor/panels/LeftPanel.js                |  253 ++++
 src/editor/panels/LeftPanelHandlers.js        |  216 ----
 src/editor/panels/TopPanel.js                 | 1131 +++++++++++++++++
 src/editor/panels/TopPanelHandlers.js         |  645 ----------
 17 files changed, 2061 insertions(+), 2231 deletions(-)
 rename src/editor/{svgedit.js => Editor.js} (65%)
 create mode 100644 src/editor/dragmove/dragmove.js
 create mode 100644 src/editor/panels/BottomPanel.js
 delete mode 100644 src/editor/panels/BottomPanelHandlers.js
 create mode 100644 src/editor/panels/LeftPanel.js
 delete mode 100644 src/editor/panels/LeftPanelHandlers.js
 create mode 100644 src/editor/panels/TopPanel.js
 delete mode 100644 src/editor/panels/TopPanelHandlers.js

diff --git a/cypress/integration/unit/test1.js b/cypress/integration/unit/test1.js
index ab608278..6ff57bd3 100644
--- a/cypress/integration/unit/test1.js
+++ b/cypress/integration/unit/test1.js
@@ -34,9 +34,7 @@ describe('Basic Module', function () {
     workarea.append(svgcanvas);
     const toolsLeft = document.createElement('div');
     toolsLeft.id = 'tools_left';
-    const toolsFlyout = document.createElement('div');
-    toolsFlyout.id = 'tools_flyout';
-
+ 
     svgEditor.append(workarea, toolsLeft, toolsFlyout);
     document.body.append(svgEditor);
 
diff --git a/nyc.config.js b/nyc.config.js
index 1ac0a362..88e2f0c3 100644
--- a/nyc.config.js
+++ b/nyc.config.js
@@ -6,10 +6,7 @@ module.exports = {
   "functions": 45,
   exclude: [
     'editor/jquery.min.js',
-    'editor/jgraduate/**',
-    'editor/svgicons/**',
-    'editor/dragmove/**',
-    'editor/spinbtn'
+    'editor/jgraduate/**'
   ],
   "reporter": [
     "json-summary",
diff --git a/package-lock.json b/package-lock.json
index 8ac25911..3df44669 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,6 @@
       "license": "(MIT AND Apache-2.0 AND ISC AND LGPL-3.0-or-later AND X11)",
       "dependencies": {
         "@babel/polyfill": "7.12.1",
-        "@knadh/dragmove": "^0.1.2",
         "@web/dev-server-rollup": "0.3.2",
         "canvg": "3.0.7",
         "core-js": "3.9.1",
@@ -17,7 +16,7 @@
         "jspdf": "2.3.1",
         "pathseg": "1.2.0",
         "regenerator-runtime": "0.13.7",
-        "rollup-plugin-polyfill-node": "^0.6.1",
+        "rollup-plugin-polyfill-node": "^0.6.2",
         "svg2pdf.js": "2.1.0"
       },
       "devDependencies": {
@@ -49,7 +48,7 @@
         "cypress-multi-reporters": "1.4.0",
         "cypress-plugin-snapshots": "1.4.4",
         "deparam": "git+https://github.com/brettz9/deparam.git#updates",
-        "eslint": "^7.21.0",
+        "eslint": "^7.22.0",
         "eslint-config-standard": "16.0.2",
         "eslint-plugin-array-func": "3.1.7",
         "eslint-plugin-chai-expect": "2.2.0",
@@ -74,7 +73,7 @@
         "imageoptim-cli": "3.0.2",
         "jamilih": "0.54.0",
         "jsdoc": "3.6.6",
-        "mocha": "8.3.1",
+        "mocha": "8.3.2",
         "mocha-badge-generator": "0.9.0",
         "mochawesome": "6.2.2",
         "mochawesome-merge": "4.2.0",
@@ -90,7 +89,7 @@
         "remark-lint-ordered-list-marker-value": "2.0.1",
         "requirejs": "2.3.6",
         "rimraf": "3.0.2",
-        "rollup": "2.41.0",
+        "rollup": "2.41.2",
         "rollup-plugin-copy": "3.4.0",
         "rollup-plugin-filesize": "9.1.1",
         "rollup-plugin-node-polyfills": "0.2.1",
@@ -3245,11 +3244,6 @@
         "regenerator-runtime": "^0.13.3"
       }
     },
-    "node_modules/@knadh/dragmove": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/@knadh/dragmove/-/dragmove-0.1.2.tgz",
-      "integrity": "sha512-OxfFFHqrpenz9oVxi8AngzrF7+aoGZCvNOGOVlxu+6UlG0dW68hJJeNt7RvVlg3dNK6uaHsju+bH+/NXaRUMTQ=="
-    },
     "node_modules/@mdn/browser-compat-data": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/@mdn/browser-compat-data/-/browser-compat-data-2.0.7.tgz",
@@ -9861,9 +9855,9 @@
       }
     },
     "node_modules/eslint": {
-      "version": "7.21.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-7.21.0.tgz",
-      "integrity": "sha512-W2aJbXpMNofUp0ztQaF40fveSsJBjlSCSWpy//gzfTvwC+USs/nceBrKmlJOiM8r1bLwP2EuYkCqArn/6QTIgg==",
+      "version": "7.22.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-7.22.0.tgz",
+      "integrity": "sha512-3VawOtjSJUQiiqac8MQc+w457iGLfuNGLFn8JmF051tTKbh5/x/0vlcEj8OgDCaw7Ysa2Jn8paGshV7x2abKXg==",
       "dev": true,
       "dependencies": {
         "@babel/code-frame": "7.12.11",
@@ -9883,7 +9877,7 @@
         "file-entry-cache": "^6.0.1",
         "functional-red-black-tree": "^1.0.1",
         "glob-parent": "^5.0.0",
-        "globals": "^12.1.0",
+        "globals": "^13.6.0",
         "ignore": "^4.0.6",
         "import-fresh": "^3.0.0",
         "imurmurhash": "^0.1.4",
@@ -9891,7 +9885,7 @@
         "js-yaml": "^3.13.1",
         "json-stable-stringify-without-jsonify": "^1.0.1",
         "levn": "^0.4.1",
-        "lodash": "^4.17.20",
+        "lodash": "^4.17.21",
         "minimatch": "^3.0.4",
         "natural-compare": "^1.4.0",
         "optionator": "^0.9.1",
@@ -9909,6 +9903,9 @@
       },
       "engines": {
         "node": "^10.12.0 || >=12.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
       }
     },
     "node_modules/eslint-config-standard": {
@@ -10978,15 +10975,18 @@
       }
     },
     "node_modules/eslint/node_modules/globals": {
-      "version": "12.4.0",
-      "resolved": "https://registry.npmjs.org/globals/-/globals-12.4.0.tgz",
-      "integrity": "sha512-BWICuzzDvDoH54NHKCseDanAhE3CeDorgDL5MT6LMXXj2WCnd9UC2szdk4AWLfjdgNBCXLUanXYcpBBKOSWGwg==",
+      "version": "13.6.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-13.6.0.tgz",
+      "integrity": "sha512-YFKCX0SiPg7l5oKYCJ2zZGxcXprVXHcSnVuvzrT3oSENQonVLqM5pf9fN5dLGZGyCjhw8TN8Btwe/jKnZ0pjvQ==",
       "dev": true,
       "dependencies": {
-        "type-fest": "^0.8.1"
+        "type-fest": "^0.20.2"
       },
       "engines": {
         "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/eslint/node_modules/has-flag": {
@@ -11149,6 +11149,18 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/eslint/node_modules/type-fest": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
+      "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/eslint/node_modules/yallist": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
@@ -16045,9 +16057,9 @@
       }
     },
     "node_modules/mocha": {
-      "version": "8.3.1",
-      "resolved": "https://registry.npmjs.org/mocha/-/mocha-8.3.1.tgz",
-      "integrity": "sha512-5SBMxANWqOv5bw3Hx+HVgaWlcWcFEQDUdaUAr1AUU+qwtx6cowhn7gEDT/DwQP7uYxnvShdUOVLbTYAHOEGfDQ==",
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/mocha/-/mocha-8.3.2.tgz",
+      "integrity": "sha512-UdmISwr/5w+uXLPKspgoV7/RXZwKRTiTjJ2/AC5ZiEztIoOYdfKb19+9jNmEInzx5pBsCyJQzarAxqIGBNYJhg==",
       "dev": true,
       "dependencies": {
         "@ungap/promise-all-settled": "1.1.2",
@@ -19845,9 +19857,9 @@
       }
     },
     "node_modules/rollup": {
-      "version": "2.41.0",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.41.0.tgz",
-      "integrity": "sha512-Gk76XHTggulWPH95q8V62bw6uqDH6UGvbD6LOa3QUyhuMF3eOuaeDHR7SLm1T9faitkpNrqzUAVYx47klcMnlA==",
+      "version": "2.41.2",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.41.2.tgz",
+      "integrity": "sha512-6u8fJJXJx6fmvKrAC9DHYZgONvSkz8S9b/VFBjoQ6dkKdHyPpPbpqiNl2Bao9XBzDHpq672X6sGZ9G1ZBqAHMg==",
       "bin": {
         "rollup": "dist/bin/rollup"
       },
@@ -20122,9 +20134,9 @@
       }
     },
     "node_modules/rollup-plugin-polyfill-node": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/rollup-plugin-polyfill-node/-/rollup-plugin-polyfill-node-0.6.1.tgz",
-      "integrity": "sha512-r+A3VUWVMm5tiWoQPpe9BOPycN+G+XgXQGmOyDn6REPaZNvNz16rOQ/3X9U6xE7kQAlXQCnec9L5i0fFytNYCQ==",
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/rollup-plugin-polyfill-node/-/rollup-plugin-polyfill-node-0.6.2.tgz",
+      "integrity": "sha512-gMCVuR0zsKq0jdBn8pSXN1Ejsc458k2QsFFvQdbHoM0Pot5hEnck+pBP/FDwFS6uAi77pD3rDTytsaUStsOMlA==",
       "dependencies": {
         "@rollup/plugin-inject": "^4.0.0"
       }
@@ -26632,11 +26644,6 @@
         "regenerator-runtime": "^0.13.3"
       }
     },
-    "@knadh/dragmove": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/@knadh/dragmove/-/dragmove-0.1.2.tgz",
-      "integrity": "sha512-OxfFFHqrpenz9oVxi8AngzrF7+aoGZCvNOGOVlxu+6UlG0dW68hJJeNt7RvVlg3dNK6uaHsju+bH+/NXaRUMTQ=="
-    },
     "@mdn/browser-compat-data": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/@mdn/browser-compat-data/-/browser-compat-data-2.0.7.tgz",
@@ -32351,9 +32358,9 @@
       }
     },
     "eslint": {
-      "version": "7.21.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-7.21.0.tgz",
-      "integrity": "sha512-W2aJbXpMNofUp0ztQaF40fveSsJBjlSCSWpy//gzfTvwC+USs/nceBrKmlJOiM8r1bLwP2EuYkCqArn/6QTIgg==",
+      "version": "7.22.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-7.22.0.tgz",
+      "integrity": "sha512-3VawOtjSJUQiiqac8MQc+w457iGLfuNGLFn8JmF051tTKbh5/x/0vlcEj8OgDCaw7Ysa2Jn8paGshV7x2abKXg==",
       "dev": true,
       "requires": {
         "@babel/code-frame": "7.12.11",
@@ -32373,7 +32380,7 @@
         "file-entry-cache": "^6.0.1",
         "functional-red-black-tree": "^1.0.1",
         "glob-parent": "^5.0.0",
-        "globals": "^12.1.0",
+        "globals": "^13.6.0",
         "ignore": "^4.0.6",
         "import-fresh": "^3.0.0",
         "imurmurhash": "^0.1.4",
@@ -32381,7 +32388,7 @@
         "js-yaml": "^3.13.1",
         "json-stable-stringify-without-jsonify": "^1.0.1",
         "levn": "^0.4.1",
-        "lodash": "^4.17.20",
+        "lodash": "^4.17.21",
         "minimatch": "^3.0.4",
         "natural-compare": "^1.4.0",
         "optionator": "^0.9.1",
@@ -32549,12 +32556,12 @@
           }
         },
         "globals": {
-          "version": "12.4.0",
-          "resolved": "https://registry.npmjs.org/globals/-/globals-12.4.0.tgz",
-          "integrity": "sha512-BWICuzzDvDoH54NHKCseDanAhE3CeDorgDL5MT6LMXXj2WCnd9UC2szdk4AWLfjdgNBCXLUanXYcpBBKOSWGwg==",
+          "version": "13.6.0",
+          "resolved": "https://registry.npmjs.org/globals/-/globals-13.6.0.tgz",
+          "integrity": "sha512-YFKCX0SiPg7l5oKYCJ2zZGxcXprVXHcSnVuvzrT3oSENQonVLqM5pf9fN5dLGZGyCjhw8TN8Btwe/jKnZ0pjvQ==",
           "dev": true,
           "requires": {
-            "type-fest": "^0.8.1"
+            "type-fest": "^0.20.2"
           }
         },
         "has-flag": {
@@ -32675,6 +32682,12 @@
             "prelude-ls": "^1.2.1"
           }
         },
+        "type-fest": {
+          "version": "0.20.2",
+          "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
+          "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
+          "dev": true
+        },
         "yallist": {
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
@@ -37425,9 +37438,9 @@
       }
     },
     "mocha": {
-      "version": "8.3.1",
-      "resolved": "https://registry.npmjs.org/mocha/-/mocha-8.3.1.tgz",
-      "integrity": "sha512-5SBMxANWqOv5bw3Hx+HVgaWlcWcFEQDUdaUAr1AUU+qwtx6cowhn7gEDT/DwQP7uYxnvShdUOVLbTYAHOEGfDQ==",
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/mocha/-/mocha-8.3.2.tgz",
+      "integrity": "sha512-UdmISwr/5w+uXLPKspgoV7/RXZwKRTiTjJ2/AC5ZiEztIoOYdfKb19+9jNmEInzx5pBsCyJQzarAxqIGBNYJhg==",
       "dev": true,
       "requires": {
         "@ungap/promise-all-settled": "1.1.2",
@@ -40497,9 +40510,9 @@
       }
     },
     "rollup": {
-      "version": "2.41.0",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.41.0.tgz",
-      "integrity": "sha512-Gk76XHTggulWPH95q8V62bw6uqDH6UGvbD6LOa3QUyhuMF3eOuaeDHR7SLm1T9faitkpNrqzUAVYx47klcMnlA==",
+      "version": "2.41.2",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.41.2.tgz",
+      "integrity": "sha512-6u8fJJXJx6fmvKrAC9DHYZgONvSkz8S9b/VFBjoQ6dkKdHyPpPbpqiNl2Bao9XBzDHpq672X6sGZ9G1ZBqAHMg==",
       "requires": {
         "fsevents": "~2.3.1"
       },
@@ -40716,9 +40729,9 @@
       }
     },
     "rollup-plugin-polyfill-node": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/rollup-plugin-polyfill-node/-/rollup-plugin-polyfill-node-0.6.1.tgz",
-      "integrity": "sha512-r+A3VUWVMm5tiWoQPpe9BOPycN+G+XgXQGmOyDn6REPaZNvNz16rOQ/3X9U6xE7kQAlXQCnec9L5i0fFytNYCQ==",
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/rollup-plugin-polyfill-node/-/rollup-plugin-polyfill-node-0.6.2.tgz",
+      "integrity": "sha512-gMCVuR0zsKq0jdBn8pSXN1Ejsc458k2QsFFvQdbHoM0Pot5hEnck+pBP/FDwFS6uAi77pD3rDTytsaUStsOMlA==",
       "requires": {
         "@rollup/plugin-inject": "^4.0.0"
       }
diff --git a/package.json b/package.json
index d63bf958..33cfada5 100644
--- a/package.json
+++ b/package.json
@@ -107,7 +107,6 @@
   ],
   "dependencies": {
     "@babel/polyfill": "7.12.1",
-    "@knadh/dragmove": "^0.1.2",
     "@web/dev-server-rollup": "0.3.2",
     "canvg": "3.0.7",
     "core-js": "3.9.1",
@@ -115,7 +114,7 @@
     "jspdf": "2.3.1",
     "pathseg": "1.2.0",
     "regenerator-runtime": "0.13.7",
-    "rollup-plugin-polyfill-node": "^0.6.1",
+    "rollup-plugin-polyfill-node": "^0.6.2",
     "svg2pdf.js": "2.1.0"
   },
   "devDependencies": {
@@ -147,7 +146,7 @@
     "cypress-multi-reporters": "1.4.0",
     "cypress-plugin-snapshots": "1.4.4",
     "deparam": "git+https://github.com/brettz9/deparam.git#updates",
-    "eslint": "^7.21.0",
+    "eslint": "^7.22.0",
     "eslint-config-standard": "16.0.2",
     "eslint-plugin-array-func": "3.1.7",
     "eslint-plugin-chai-expect": "2.2.0",
@@ -172,7 +171,7 @@
     "imageoptim-cli": "3.0.2",
     "jamilih": "0.54.0",
     "jsdoc": "3.6.6",
-    "mocha": "8.3.1",
+    "mocha": "8.3.2",
     "mocha-badge-generator": "0.9.0",
     "mochawesome": "6.2.2",
     "mochawesome-merge": "4.2.0",
@@ -188,7 +187,7 @@
     "remark-lint-ordered-list-marker-value": "2.0.1",
     "requirejs": "2.3.6",
     "rimraf": "3.0.2",
-    "rollup": "2.41.0",
+    "rollup": "2.41.2",
     "rollup-plugin-copy": "3.4.0",
     "rollup-plugin-filesize": "9.1.1",
     "rollup-plugin-node-polyfills": "0.2.1",
diff --git a/src/editor/svgedit.js b/src/editor/Editor.js
similarity index 65%
rename from src/editor/svgedit.js
rename to src/editor/Editor.js
index 9c4bdc74..f59bc5bb 100644
--- a/src/editor/svgedit.js
+++ b/src/editor/Editor.js
@@ -30,6 +30,10 @@ import {
 } from './locale.js';
 
 import EditorStartup from './EditorStartup.js';
+import LeftPanel from './panels/LeftPanel.js';
+import TopPanel from './panels/TopPanel.js';
+import BottomPanel from './panels/BottomPanel.js';
+import LayersPanel from './panels/LayersPanel.js';
 
 const {$id, $qa, isNullish, encode64, decode64, blankPageObjectURL} = SvgCanvas;
 
@@ -131,6 +135,10 @@ class Editor extends EditorStartup {
       {key: modKey + 'c', fn () { curObj.copySelected(); }},
       {key: modKey + 'v', fn () { curObj.pasteInCenter(); }}
     ];
+    this.leftPanel = new LeftPanel(this);
+    this.bottomPanel = new BottomPanel(this);
+    this.topPanel = new TopPanel(this);
+    this.layersPanel = new LayersPanel(this);
   }
   /**
    *
@@ -391,23 +399,6 @@ class Editor extends EditorStartup {
     }
   }
 
-  /**
-   *
-   * @param {Element} opt
-   * @param {boolean} changeElem
-   * @returns {void}
-   */
-  setStrokeOpt (opt, changeElem) {
-    const {id} = opt;
-    const bits = id.split('_');
-    const [pre, val] = bits;
-
-    if (changeElem) {
-      this.svgCanvas.setStrokeAttr('stroke-' + pre, val);
-    }
-    $(opt).addClass('current').siblings().removeClass('current');
-  }
-
   /**
   * Set a selected image's URL.
   * @function module:SVGthis.setImageURL
@@ -532,71 +523,6 @@ class Editor extends EditorStartup {
     }
   }
 
-  /**
-  * Updates the toolbar (colors, opacity, etc) based on the selected element.
-  * This function also updates the opacity and id elements that are in the
-  * context panel.
-  * @returns {void}
-  */
-  updateToolbar () {
-    let i, len;
-    if (!isNullish(this.selectedElement)) {
-      switch (this.selectedElement.tagName) {
-      case 'use':
-      case 'image':
-      case 'foreignObject':
-        break;
-      case 'g':
-      case 'a': {
-        // Look for common styles
-        const childs = this.selectedElement.getElementsByTagName('*');
-        let gWidth = null;
-        for (i = 0, len = childs.length; i < len; i++) {
-          const swidth = childs[i].getAttribute('stroke-width');
-
-          if (i === 0) {
-            gWidth = swidth;
-          } else if (gWidth !== swidth) {
-            gWidth = null;
-          }
-        }
-
-        $('#stroke_width').val(gWidth === null ? '' : gWidth);
-        this.bottomPanelHandlers.updateColorpickers(true);
-        break;
-      } default: {
-        this.bottomPanelHandlers.updateColorpickers(true);
-
-        $('#stroke_width').val(this.selectedElement.getAttribute('stroke-width') || 1);
-        $('#stroke_style').val(this.selectedElement.getAttribute('stroke-dasharray') || 'none');
-
-        let attr = this.selectedElement.getAttribute('stroke-linejoin') || 'miter';
-
-        if ($('#linejoin_' + attr).length) {
-          this.setStrokeOpt($('#linejoin_' + attr)[0]);
-        }
-
-        attr = this.selectedElement.getAttribute('stroke-linecap') || 'butt';
-
-        if ($('#linecap_' + attr).length) {
-          this.setStrokeOpt($('#linecap_' + attr)[0]);
-        }
-      }
-      }
-    }
-
-    // All elements including image and group have opacity
-    if (!isNullish(this.selectedElement)) {
-      const opacPerc = (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') : '';
-    }
-
-    this.bottomPanelHandlers.updateToolButtonState();
-  }
-
   /**
   *
   * @returns {void}
@@ -639,19 +565,19 @@ class Editor extends EditorStartup {
   selectedChanged (win, elems) {
     const mode = this.svgCanvas.getMode();
     if (mode === 'select') {
-      this.leftPanelHandlers.clickSelect();
+      this.leftPanel.clickSelect();
     }
     const isNode = mode === 'pathedit';
     // if this.elems[1] is present, then we have more than one element
     this.selectedElement = (elems.length === 1 || isNullish(elems[1]) ? elems[0] : null);
     this.multiselected = (elems.length >= 2 && !isNullish(elems[1]));
     if (!isNullish(this.selectedElement) && !isNode) {
-      this.updateToolbar();
+      this.topPanel.update();
     } // if (!isNullish(elem))
 
     // Deal with pathedit mode
     this.togglePathEditMode(isNode, elems);
-    this.topPanelHandlers.updateContextPanel();
+    this.topPanel.updateContextPanel();
     this.svgCanvas.runExtensions('selectedChanged', /** @type {module:svgcanvas.SvgCanvas#event:ext_selectedChanged} */ {
       elems,
       selectedElement: this.selectedElement,
@@ -704,7 +630,7 @@ class Editor extends EditorStartup {
   elementChanged (win, elems) {
     const mode = this.svgCanvas.getMode();
     if (mode === 'select') {
-      this.leftPanelHandlers.clickSelect();
+      this.leftPanel.clickSelect();
     }
 
     elems.forEach((elem) => {
@@ -732,11 +658,11 @@ class Editor extends EditorStartup {
 
     // we tell it to skip focusing the text control if the
     // text element was previously in focus
-    this.topPanelHandlers.updateContextPanel();
+    this.topPanel.updateContextPanel();
 
     // In the event a gradient was flipped:
     if (this.selectedElement && mode === 'select') {
-      this.bottomPanelHandlers.updateColorpickers();
+      this.bottomPanel.updateColorpickers();
     }
 
     this.svgCanvas.runExtensions('elementChanged', /** @type {module:svgcanvas.SvgCanvas#event:ext_elementChanged} */ {
@@ -798,7 +724,7 @@ class Editor extends EditorStartup {
 
     if (this.svgCanvas.getMode() === 'zoom' && bb.width) {
       // Go to select if a zoom box was drawn
-      this.leftPanelHandlers.clickSelect();
+      this.leftPanel.clickSelect();
     }
 
     this.zoomDone();
@@ -832,183 +758,6 @@ class Editor extends EditorStartup {
     this.updateTitle();
   }
 
-  /**
-  * Makes sure the current selected paint is available to work with.
-  * @returns {void}
-  */
-  /* prepPaints () {
-    paintBox.fill.prep();
-    paintBox.stroke.prep();
-  } */
-
-  /**
-  *
-  * @returns {void}
-  */
-  // eslint-disable-next-line class-methods-use-this
-  setFlyoutPositions () {
-    $('.tools_flyout').each(function () {
-      const shower = $('#' + this.id + '_show');
-      const {left, top} = shower.offset();
-      const w = shower.outerWidth();
-      this.css({left: (left + w) * editor.tool_scale, top});
-    });
-  }
-
-  /**
-  *
-  * @returns {void}
-  */
-  // eslint-disable-next-line class-methods-use-this
-  setFlyoutTitles () {
-    $('.tools_flyout').each(function () {
-      const shower = $('#' + this.id + '_show');
-      if (shower.data('isLibrary')) {
-        return;
-      }
-      const tooltips = this.children().map(function () {
-        return this.title;
-      }).get();
-      shower[0].title = tooltips.join(' / ');
-    });
-  }
-
-  /**
-   * @param {PlainObject<string, module:SVGEditor.ToolButton>} holders Key is a selector
-   * @returns {void}
-   */
-  setupFlyouts (holders) {
-    const allHolders = {};
-    const currentObj = this;
-    $.each(holders, function (holdSel, btnOpts) {
-      if (!allHolders[holdSel]) {
-        allHolders[holdSel] = [];
-      }
-      allHolders[holdSel].push(...btnOpts);
-
-      const buttons = $(holdSel).children().not('.tool_button_evt_handled');
-      const showSel = holdSel + '_show';
-      const shower = $(showSel);
-      let def = false;
-      buttons.addClass('tool_button tool_button_evt_handled')
-        .unbind('click mousedown mouseup') // may not be necessary
-        .each(function () {
-          // Get this button's options
-          const idSel = '#' + this.getAttribute('id');
-          const [i, opts] = Object.entries(btnOpts).find(([_, {sel}]) => {
-            return sel === idSel;
-          });
-
-          // Remember the function that goes with this ID
-          currentObj.flyoutFuncs[opts.sel] = opts.fn;
-
-          if (opts.isDefault) { def = i; }
-
-          const flyoutAction = function (ev) {
-            let options = opts;
-            // Find the currently selected tool if comes from keystroke
-            if (ev.type === 'keydown') {
-              const flyoutIsSelected = $(options.parent + '_show').hasClass('tool_button_current');
-              const currentOperation = $(options.parent + '_show').attr('data-curopt');
-              Object.entries(holders[opts.parent]).some(([j, tool]) => {
-                if (tool.sel !== currentOperation) {
-                  return false;
-                }
-                if (!ev.shiftKey || !flyoutIsSelected) {
-                  options = tool;
-                } else {
-                  // If flyout is selected, allow shift key to iterate through subitems
-                  j = Number.parseInt(j);
-                  // Use `allHolders` to include both extension `includeWith` and toolbarButtons
-                  options = allHolders[opts.parent][j + 1] ||
-                    holders[opts.parent][0];
-                }
-                return true;
-              });
-            }
-            if ($(this).hasClass('disabled')) { return false; }
-            /* if (toolButtonClick(showSel)) {
-              options.fn();
-            } */
-            const icon = (options.icon) ? $.getSvgIcon(options.icon, true) : $(options.sel).children().eq(0).clone();
-            icon[0].setAttribute('width', shower.width());
-            icon[0].setAttribute('height', shower.height());
-            shower.children(':not(.flyout_arrow_horiz)').remove();
-            shower.append(icon).attr('data-curopt', options.sel); // This sets the current mode
-            return true;
-          };
-
-          $(this).mouseup(flyoutAction);
-          // TODO: currently not trigger here
-          /* if (opts.key) {
-            $(document).bind('keydown', opts.key[0] + ' shift+' + opts.key[0], flyoutAction);
-          } */
-          return true;
-        });
-
-      if (def) {
-        shower.attr('data-curopt', btnOpts[def].sel);
-      } else if (!shower.attr('data-curopt')) {
-        // Set first as default
-        shower.attr('data-curopt', btnOpts[0].sel);
-      }
-
-      let timer;
-
-      // Clicking the "show" icon should set the current mode
-      shower.mousedown(function (evt) {
-        if (shower.hasClass('disabled')) {
-          return false;
-        }
-        const holder = $(holdSel);
-        const pos = $(showSel).position();
-        const l = pos.left + 34;
-        const w = holder.width() * -1;
-        const time = holder.data('shown_popop') ? 200 : 0;
-        timer = setTimeout(function () {
-          // Show corresponding menu
-          if (!shower.data('isLibrary')) {
-            holder.css('left', w).show().animate({
-              left: l
-            }, 150);
-          } else {
-            holder.css('left', l).show();
-          }
-          holder.data('shown_popop', true);
-        }, time);
-        evt.preventDefault();
-        return true;
-      }).mouseup(function (evt) {
-        clearTimeout(timer);
-        /* const opt = $(this).attr('data-curopt');
-        // Is library and popped up, so do nothing
-        if (shower.data('isLibrary') && $(showSel.replace('_show', '')).is(':visible')) {
-          toolButtonClick(showSel, true);
-          return;
-        }
-        if (toolButtonClick(showSel) && this.flyoutFuncs[opt]) {
-          this.flyoutFuncs[opt]();
-        } */
-      });
-      // $('#tools_rect').mouseleave(function () { $('#tools_rect').fadeOut(); });
-    });
-    this.setFlyoutTitles();
-    // this.setFlyoutPositions();
-  }
-
-  /**
-  * @param {string} id
-  * @param {external:jQuery} child
-  * @returns {external:jQuery}
-  */
-  // eslint-disable-next-line class-methods-use-this
-  makeFlyoutHolder (id, child) {
-    return $('<div>', {
-      class: 'tools_flyout',
-      id
-    }).appendTo('#svg_editor').append(child);
-  }
-
   /**
   * @function module:SVGEditor.setIcon
   * @param {string|Element|external:jQuery} elem
@@ -1123,378 +872,12 @@ class Editor extends EditorStartup {
     const runCallback = () => {
       if (ext.callback && !cbCalled) {
         cbCalled = true;
-        ext.callback.call(editor);
+        ext.callback.call(this);
       }
     };
 
-    /**
-    * @typedef {PlainObject} module:SVGthis.ContextTool
-    * @property {string} panel The ID of the existing panel to which the tool is being added. Required.
-    * @property {string} id The ID of the actual tool element. Required.
-    * @property {PlainObject<string, external:jQuery.Function>|PlainObject<"change", external:jQuery.Function>} events DOM event names keyed to associated functions. Example: `{change () { seAlert('Option was changed') } }`. "change" event is one specifically handled for the "button-select" type. Required.
-    * @property {string} title The tooltip text that will appear when the user hovers over the tool. Required.
-    * @property {"tool_button"|"select"|"button-select"|"input"|string} type The type of tool being added. Expected.
-    * @property {PlainObject<string, string>} [options] List of options and their labels for select tools. Example: `{1: 'One', 2: 'Two', all: 'All' }`. Required by "select" tools.
-    * @property {string} [container_id] The ID to be given to the tool's container element.
-    * @property {string} [defval] Default value
-    * @property {string|Integer} [colnum] Added as part of the option list class.
-    * @property {string} [label] Label associated with the tool, visible in the UI
-    * @property {Integer} [size] Value of the "size" attribute of the tool input
-    */
-    if (ext.context_tools) {
-      $.each(ext.context_tools, function (i, tool) {
-        // Add select tool
-        const contId = tool.container_id ? (' id="' + tool.container_id + '"') : '';
-
-        let panel = $('#' + tool.panel);
-        // create the panel if it doesn't exist
-        if (!panel.length) {
-          panel = $('<div>', {id: tool.panel}).appendTo('#tools_top');
-        }
-
-        let html;
-        // TODO: Allow support for other types, or adding to existing tool
-        switch (tool.type) {
-        case 'tool_button': {
-          html = '<div class="tool_button">' + tool.id + '</div>';
-          const div = $(html).appendTo(panel);
-          if (tool.events) {
-            $.each(tool.events, function (evt, func) {
-              $(div).bind(evt, func);
-            });
-          }
-          break;
-        } case 'select': {
-          html = '<label' + contId + '>' +
-            '<select id="' + tool.id + '">';
-          $.each(tool.options, function (val, text) {
-            const sel = (val === tool.defval) ? ' selected' : '';
-            html += '<option value="' + val + '"' + sel + '>' + text + '</option>';
-          });
-          html += '</select></label>';
-          // Creates the tool, hides & adds it, returns the select element
-          const sel = $(html).appendTo(panel).find('select');
-
-          $.each(tool.events, function (evt, func) {
-            $(sel).bind(evt, func);
-          });
-          break;
-        } case 'button-select': {
-          html = '<div id="' + tool.id + '" class="dropdown toolset" title="' + tool.title + '">' +
-            '<div id="cur_' + tool.id + '" class="icon_label"></div>' +
-            '<button><img class="svg_icon" src="./images/arrow_down.svg" alt="icon" width="7" height="7"></button>' +
-            '</div>';
-
-          const list = $('<ul id="' + tool.id + '_opts"></ul>').appendTo('#option_lists');
-
-          if (tool.colnum) {
-            list.addClass('optcols' + tool.colnum);
-          }
-
-          // Creates the tool, hides & adds it, returns the select element
-          /* const dropdown = */ $(html).appendTo(panel).children();
-          btnSelects.push({
-            elem: ('#' + tool.id),
-            list: ('#' + tool.id + '_opts'),
-            title: tool.title,
-            callback: tool.events.change,
-            cur: ('#cur_' + tool.id)
-          });
-          break;
-        } case 'input': {
-          html = '<label' + contId + '>' +
-            '<span id="' + tool.id + '_label">' +
-            tool.label + ':</span>' +
-            '<input id="' + tool.id + '" title="' + tool.title +
-            '" size="' + (tool.size || '4') +
-            '" value="' + (tool.defval || '') + '" type="text"/></label>';
-
-          // Creates the tool, hides & adds it, returns the select element
-
-          // Add to given tool.panel
-          const inp = $(html).appendTo(panel).find('input');
-
-          if (tool.events) {
-            $.each(tool.events, function (evt, func) {
-              inp.bind(evt, func);
-            });
-          }
-          break;
-        } default:
-          break;
-        }
-      });
-    }
-    const {svgicons} = ext;
-    if (ext.buttons) {
-      const fallbackObj = {},
-        altsObj = {},
-        placementObj = {},
-        holders = {};
-
-      /**
-      * @typedef {GenericArray} module:SVGEditor.KeyArray
-      * @property {string} 0 The key to bind (on `keydown`)
-      * @property {boolean} 1 Whether to `preventDefault` on the `keydown` event
-      * @property {boolean} 2 Not apparently in use (NoDisableInInput)
-      */
-      /**
-       * @typedef {string|module:SVGEditor.KeyArray} module:SVGEditor.Key
-       */
-      /**
-      * @typedef {PlainObject} module:SVGEditor.Button
-      * @property {string} id A unique identifier for this button. If SVG icons are used, this must match the ID used in the icon file. Required.
-      * @property {"mode_flyout"|"mode"|"context"|"app_menu"} type Type of button. Required.
-      * @property {string} title The tooltip text that will appear when the user hovers over the icon. Required.
-      * @property {PlainObject<string, external:jQuery.Function>|PlainObject<"click", external:jQuery.Function>} events DOM event names with associated functions. Example: `{click () { alert('Button was clicked') } }`. Click is used with `includeWith` and `type` of "mode_flyout" (and "mode"); any events may be added if `list` is not present. Expected.
-      * @property {string} panel The ID of the context panel to be included, if type is "context". Required only if type is "context".
-      * @property {string} icon The file path to the raster version of the icon image source. Required only if no `svgicons` is supplied from [ExtensionInitResponse]{@link module:svgcanvas.ExtensionInitResponse}.
-      * @property {string} [svgicon] If absent, will utilize the button "id"; used to set "placement" on the `svgIcons` call
-      * @property {string} [list] Points to the "id" of a `context_tools` item of type "button-select" into which the button will be added as a panel list item
-      * @property {Integer} [position] The numeric index for placement; defaults to last position (as of the time of extension addition) if not present. For use with {@link http://api.jquery.com/eq/}.
-      * @property {boolean} [isDefault] Whether or not the button is the default. Used with `list`.
-      * @property {PlainObject} [includeWith] Object with flyout menu data
-      * @property {boolean} [includeWith.isDefault] Indicates whether button is default in flyout list or not.
-      * @property {string} includeWith.button jQuery selector of the existing button to be joined. Example: '#tool_line'. Required if `includeWith` is used.
-      * @property {"last"|Integer} [includeWith.position] Position of icon in flyout list; will be added to end if not indicated. Integer is for use with {@link http://api.jquery.com/eq/}.
-      * @property {module:SVGEditor.Key} [key] The key to bind to the button
-      */
-      // Add buttons given by extension
-      $.each(ext.buttons, function (i, /** @type {module:SVGEditor.Button} */ btn) {
-        let {id} = btn;
-        let num = i;
-        // Give button a unique ID
-        while ($('#' + id).length) {
-          id = btn.id + '_' + (++num);
-        }
-
-        let icon;
-        if (!svgicons) {
-          icon = $(
-            '<img src="' + self.configObj.curConfig.imgPath + btn.icon +
-              (btn.title ? '" alt="' + btn.title : '') +
-              '">'
-          );
-        } else {
-          fallbackObj[id] = btn.icon;
-          altsObj[id] = btn.title;
-          const svgicon = btn.svgicon || btn.id;
-          if (btn.type === 'app_menu') {
-            placementObj['#' + id + ' > div'] = svgicon;
-          } else {
-            placementObj['#' + id] = svgicon;
-          }
-        }
-        let cls, parent;
-
-        // Set button up according to its type
-        switch (btn.type) {
-        case 'mode_flyout':
-        case 'mode':
-          cls = 'tool_button';
-          parent = '#tools_left';
-          break;
-        case 'context':
-          cls = 'tool_button';
-          parent = '#' + btn.panel;
-          // create the panel if it doesn't exist
-          if (!$(parent).length) {
-            $('<div>', {id: btn.panel}).appendTo('#tools_top');
-          }
-          break;
-        case 'app_menu':
-          cls = '';
-          parent = '#main_menu ul';
-          break;
-        }
-        // refData
-        let flyoutHolder, showBtn, refBtn;
-        const button = $((btn.list || btn.type === 'app_menu') ? '<li/>' : '<div/>')
-          .attr('id', id)
-          .attr('title', btn.title)
-          .addClass(cls);
-        if (!btn.includeWith && !btn.list) {
-          if ('position' in btn) {
-            if ($(parent).children().eq(btn.position).length) {
-              $(parent).children().eq(btn.position).before(button);
-            } else {
-              $(parent).children().last().after(button);
-            }
-          } else {
-            button.appendTo(parent);
-          }
-
-          if (btn.type === 'mode_flyout') {
-          // Add to flyout menu / make flyout menu
-            // const opts = btn.includeWith;
-            // // opts.button, default, position
-            refBtn = $(button);
-
-            flyoutHolder = refBtn.parent();
-            // Create a flyout menu if there isn't one already
-            let tlsId;
-            if (!refBtn.parent().hasClass('tools_flyout')) {
-              // Create flyout placeholder
-              tlsId = refBtn[0].id.replace('tool_', 'tools_');
-              showBtn = refBtn.clone()
-                .attr('id', tlsId + '_show')
-                .append($('<div>', {class: 'flyout_arrow_horiz'}));
-
-              refBtn.before(showBtn);
-
-              // Create a flyout div
-              flyoutHolder = self.makeFlyoutHolder(tlsId, refBtn);
-              flyoutHolder.data('isLibrary', true);
-              showBtn.data('isLibrary', true);
-            }
-            // refData = Actions.getButtonData(opts.button);
-
-            placementObj['#' + tlsId + '_show'] = btn.id;
-            // TODO: Find way to set the current icon using the iconloader if this is not default
-
-            // Include data for extension button as well as ref button
-            /* curH = */ holders['#' + flyoutHolder[0].id] = [{
-              sel: '#' + id,
-              fn: btn.events.click,
-              icon: btn.id,
-              // key: btn.key,
-              isDefault: true
-            }]; // , refData
-            //
-            // // {sel:'#tool_rect', fn: clickRect, evt: 'mouseup', key: 4, parent: '#tools_rect', icon: 'rect'}
-            //
-            // const pos = ('position' in opts)?opts.position:'last';
-            // const len = flyoutHolder.children().length;
-            //
-            // // Add at given position or end
-            // if (!isNaN(pos) && pos >= 0 && pos < len) {
-            //   flyoutHolder.children().eq(pos).before(button);
-            // } else {
-            //   flyoutHolder.append(button);
-            //   curH.reverse();
-            // }
-          } else if (btn.type === 'app_menu') {
-            button.append('<div>').append(btn.title);
-          }
-        } else if (btn.list) {
-          // Add button to list
-          button.addClass('push_button');
-          $('#' + btn.list + '_opts').append(button);
-          if (btn.isDefault) {
-            $('#cur_' + btn.list).append(button.children().clone());
-            const svgicon = btn.svgicon || btn.id;
-            placementObj['#cur_' + btn.list] = svgicon;
-          }
-        } else if (btn.includeWith) {
-          // Add to flyout menu / make flyout menu
-          const opts = btn.includeWith;
-          // opts.button, default, position
-          refBtn = $(opts.button);
-
-          flyoutHolder = refBtn.parent();
-          // Create a flyout menu if there isn't one already
-          let tlsId;
-          if (!refBtn.parent().hasClass('tools_flyout')) {
-            // Create flyout placeholder
-            tlsId = refBtn[0].id.replace('tool_', 'tools_');
-            showBtn = refBtn.clone()
-              .attr('id', tlsId + '_show')
-              .append($('<div>', {class: 'flyout_arrow_horiz'}));
-
-            refBtn.before(showBtn);
-            // Create a flyout div
-            flyoutHolder = self.makeFlyoutHolder(tlsId, refBtn);
-          }
-
-          // refData = Actions.getButtonData(opts.button);
-
-          if (opts.isDefault) {
-            placementObj['#' + tlsId + '_show'] = btn.id;
-          }
-          // TODO: Find way to set the current icon using the iconloader if this is not default
-
-          // Include data for extension button as well as ref button
-          /* const curH = */ holders['#' + flyoutHolder[0].id] = [{
-            sel: '#' + id,
-            fn: btn.events.click,
-            icon: btn.id,
-            key: btn.key,
-            isDefault: Boolean(btn.includeWith && btn.includeWith.isDefault)
-          }]; // , refData
-          // {sel:'#tool_rect', fn: clickRect, evt: 'mouseup', key: 4, parent: '#tools_rect', icon: 'rect'}
-
-          const pos = ('position' in opts) ? opts.position : 'last';
-          const len = flyoutHolder.children().length;
-
-          // Add at given position or end
-          if (!isNaN(pos) && pos >= 0 && pos < len) {
-            flyoutHolder.children().eq(pos).before(button);
-          } else {
-            flyoutHolder.append(button);
-            // curH.reverse();
-          }
-        }
-        if (!svgicons) {
-          button.append(icon);
-        }
-        if (!btn.list) {
-          // Add given events to button
-          $.each(btn.events, function (name, func) {
-            if (name === 'click' && btn.type === 'mode') {
-              // `touch.js` changes `touchstart` to `mousedown`,
-              //   so we must map extension click events as well
-              if (isTouch() && name === 'click') {
-                name = 'mousedown';
-              }
-              if (btn.includeWith) {
-                button.bind(name, func);
-              } else {
-                button.bind(name, function () {
-                  /* if (toolButtonClick(button)) {
-                    func();
-                  } */
-                });
-              }
-              if (btn.key) {
-                // TODO: currently not trigger here
-                // $(document).bind('keydown', btn.key, func);
-                if (btn.title) {
-                  button.attr('title', btn.title + ' [' + btn.key + ']');
-                }
-              }
-            } else {
-              button.bind(name, func);
-            }
-          });
-        }
-        self.setupFlyouts(holders);
-      });
-      $.each(btnSelects, function () {
-        self.addAltDropDown(this.elem, this.list, this.callback, {seticon: true});
-      });
-      /* if (svgicons) {
-        return new Promise((resolve, reject) => {
-          $.svgIcons(`${this.configObj.curConfig.imgPath}${svgicons}`, {
-            w: 24, h: 24,
-            id_match: false,
-            no_img: (!isWebkit()),
-            fallback: fallbackObj,
-            placement: placementObj,
-            callback (icons) {
-              // Non-ideal hack to make the icon match the current size
-              // if (curPrefs.iconsize && curPrefs.iconsize !== 'm') {
-              if (editor.pref('iconsize') !== 'm') {
-                // prepResize();
-              }
-              runCallback();
-              resolve();
-            }
-          });
-        });
-      } */
-    }
     if (ext.events) {
-      this.leftPanelHandlers.add(ext.events.id, ext.events.click);
+      this.leftPanel.add(ext.events.id, ext.events.click);
     }
     return runCallback();
   }
@@ -1602,7 +985,7 @@ class Editor extends EditorStartup {
     if (!cw) { step *= -1; }
     const angle = Number.parseFloat($('#angle').val()) + step;
     this.svgCanvas.setRotationAngle(angle);
-    this.topPanelHandlers.updateContextPanel();
+    this.topPanel.updateContextPanel();
   }
 
   /**
@@ -1615,13 +998,13 @@ class Editor extends EditorStartup {
     if (ok === 'Cancel') {
       return;
     }
-    this.leftPanelHandlers.clickSelect();
+    this.leftPanel.clickSelect();
     this.svgCanvas.clear();
     this.svgCanvas.setResolution(x, y);
     this.updateCanvas(true);
     this.zoomImage();
     this.layersPanel.populateLayers();
-    this.topPanelHandlers.updateContextPanel();
+    this.topPanel.updateContextPanel();
     this.svgCanvas.runExtensions('onNewDocument');
   }
 
@@ -1803,7 +1186,7 @@ class Editor extends EditorStartup {
       return;
     }
     saveChanges();
-    this.leftPanelHandlers.clickSelect();
+    this.leftPanel.clickSelect();
   }
 
   /**
@@ -2184,7 +1567,4 @@ class Editor extends EditorStartup {
   }
 }
 
-const editor = new Editor();
-editor.init();
-
-export default editor;
+export default Editor;
diff --git a/src/editor/EditorStartup.js b/src/editor/EditorStartup.js
index 6fede19b..8846f281 100644
--- a/src/editor/EditorStartup.js
+++ b/src/editor/EditorStartup.js
@@ -6,10 +6,6 @@ import {
 } from './contextmenu.js';
 import editorTemplate from './templates/editorTemplate.js';
 import SvgCanvas from '../svgcanvas/svgcanvas.js';
-import LayersPanel from './panels/LayersPanel.js';
-import LeftPanelHandlers from './panels/LeftPanelHandlers.js';
-import BottomPanelHandlers from './panels/BottomPanelHandlers.js';
-import TopPanelHandlers from './panels/TopPanelHandlers.js';
 import Rulers from './Rulers.js';
 
 /**
@@ -54,6 +50,7 @@ class EditorStartup {
   constructor () {
     this.extensionsAdded = false;
     this.messageQueue = [];
+    this.$svgEditor = $id('svg_editor')
   }
   /**
   * Auto-run after a Promise microtask.
@@ -62,7 +59,7 @@ class EditorStartup {
   */
   async init () {
     // allow to prepare the dom without display
-    $id('svg_editor').style.visibility = 'hidden';
+    this.$svgEditor.style.visibility = 'hidden';
     try {
       // add editor components to the DOM
       document.body.append(editorTemplate.content.cloneNode(true));
@@ -109,10 +106,10 @@ class EditorStartup {
       this.configObj.curConfig
     );
 
-    this.leftPanelHandlers = new LeftPanelHandlers(this);
-    this.bottomPanelHandlers = new BottomPanelHandlers(this);
-    this.topPanelHandlers = new TopPanelHandlers(this);
-    this.layersPanel = new LayersPanel(this);
+    this.leftPanel.init();
+    this.bottomPanel.init();
+    this.topPanel.init();
+    this.layersPanel.init();
 
     const {undoMgr} = this.svgCanvas;
     this.workarea = document.getElementById('workarea');
@@ -461,10 +458,6 @@ class EditorStartup {
     /**
     * Associate all button actions as well as non-button keyboard shortcuts.
     */
-    this.leftPanelHandlers.init();
-    this.bottomPanelHandlers.init();
-    this.topPanelHandlers.init();
-    this.layersPanel.init();
 
     $id('tool_clear').addEventListener('click', this.clickClear.bind(this));
     $id('tool_open').addEventListener('click', (e) => {
@@ -748,7 +741,7 @@ class EditorStartup {
     const {langParam, langData} = await this.putLocale(this.configObj.pref('lang'), this.goodLangs);
     await this.setLang(langParam, langData);
 
-    $id('svg_editor').style.visibility = 'visible';
+    this.$svgEditor.style.visibility = 'visible';
 
     try {
       // load standard extensions
diff --git a/src/editor/dragmove/dragmove.js b/src/editor/dragmove/dragmove.js
new file mode 100644
index 00000000..065d4730
--- /dev/null
+++ b/src/editor/dragmove/dragmove.js
@@ -0,0 +1,97 @@
+// https://github.com/knadh/dragmove.js
+// Kailash Nadh (c) 2020.
+// MIT License.
+// can't use npm version as the dragmove is different.
+
+let _loaded = false;
+let _callbacks = [];
+const _isTouch = window.ontouchstart !== undefined;
+
+export const dragmove = function(target, handler, parent, onStart, onEnd, onDrag) {
+  // Register a global event to capture mouse moves (once).
+  if (!_loaded) {
+    document.addEventListener(_isTouch ? "touchmove" : "mousemove", function(e) {
+      let c = e;
+      if (e.touches) {
+        c = e.touches[0];
+      }
+
+      // On mouse move, dispatch the coords to all registered callbacks.
+      for (var i = 0; i < _callbacks.length; i++) {
+        _callbacks[i](c.clientX, c.clientY);
+      }
+    });
+  }
+
+  _loaded = true;
+  let isMoving = false, hasStarted = false;
+  let startX = 0, startY = 0, lastX = 0, lastY = 0;
+
+  // On the first click and hold, record the offset of the pointer in relation
+  // to the point of click inside the element.
+  handler.addEventListener(_isTouch ? "touchstart" : "mousedown", function(e) {
+    e.stopPropagation();
+    e.preventDefault();
+    if (target.dataset.dragEnabled === "false") {
+      return;
+    }
+
+    let c = e;
+    if (e.touches) {
+      c = e.touches[0];
+    }
+
+    isMoving = true;
+    startX = target.offsetLeft - c.clientX;
+    startY = target.offsetTop - c.clientY;
+  });
+
+  // On leaving click, stop moving.
+  document.addEventListener(_isTouch ? "touchend" : "mouseup", function(e) {   
+    if (onEnd && hasStarted) {
+      onEnd(target, parent, parseInt(target.style.left), parseInt(target.style.top));
+    }
+
+    isMoving = false;
+    hasStarted = false;
+  });
+
+  // On leaving click, stop moving.
+  document.addEventListener(_isTouch ? "touchmove" : "mousemove", function(e) {   
+    if (onDrag && hasStarted) {
+      onDrag(target, parseInt(target.style.left), parseInt(target.style.top));
+    }
+  });  
+
+  // Register mouse-move callback to move the element.
+  _callbacks.push(function move(x, y) {
+    if (!isMoving) {
+      return;
+    }
+
+    if (!hasStarted) {
+      hasStarted = true;
+      if (onStart) {
+        onStart(target, lastX, lastY);
+      }
+    }
+
+    lastX = x + startX;
+    lastY = y + startY;
+
+    // If boundary checking is on, don't let the element cross the viewport.
+    if (target.dataset.dragBoundary === "true") {
+      if (lastX < 1 || lastX >= window.innerWidth - target.offsetWidth) {
+        return;
+      }
+      if (lastY < 1 || lastY >= window.innerHeight - target.offsetHeight) {
+        return;
+      }
+    }
+
+    target.style.left = lastX + "px";
+    target.style.top = lastY + "px";
+  });
+}
+
+export { dragmove as default }; 
\ No newline at end of file
diff --git a/src/editor/extensions/ext-overview_window/ext-overview_window.js b/src/editor/extensions/ext-overview_window/ext-overview_window.js
index f455ec1f..2795b536 100644
--- a/src/editor/extensions/ext-overview_window/ext-overview_window.js
+++ b/src/editor/extensions/ext-overview_window/ext-overview_window.js
@@ -6,7 +6,7 @@
  * @copyright 2013 James Sacksteder
  *
  */
-import { dragmove } from '@knadh/dragmove';
+import { dragmove } from '../../../editor/dragmove/dragmove.js';
 export default {
   name: 'overview_window',
   init ({$, isChrome}) {
@@ -105,11 +105,11 @@ export default {
       document.getElementById('workarea').scrollLeft = portX;
       document.getElementById('workarea').scrollTop = portY;
     };
-    const onStart = function () {
+    const onStart = () => {
       overviewWindowGlobals.viewBoxDragging = true;
       updateViewPortFromViewBox();
     };
-    const onEnd = function (el, parent, x, y) {
+    const onEnd = (el, parent, x, y) => {
       if((el.offsetLeft + el.offsetWidth) > $(parent).attr('width')){
         el.style.left = ($(parent).attr('width') - el.offsetWidth) + 'px';
       } else if(el.offsetLeft  < 0){
diff --git a/src/editor/index.html b/src/editor/index.html
index 20404bfa..2091ad59 100644
--- a/src/editor/index.html
+++ b/src/editor/index.html
@@ -29,32 +29,6 @@
 
 <body>
   <div id="svg_editor" role="main">
-    <div id="sidepanels">
-      <div id="layerpanel">
-        <h3 id="layersLabel">Layers</h3>
-        <fieldset id="layerbuttons">
-          <se-button id="layer_new" title="New Layer" size="small" src="./images/new.svg"></se-button>
-          <se-button id="layer_delete" title="Delete Layer" size="small" src="./images/delete.svg"></se-button>
-          <se-button id="layer_rename" title="Rename Layer" size="small" src="./images/text.svg"></se-button>
-          <se-button id="layer_up" title="Move Layer Up" size="small" src="./images/go_up.svg"></se-button>
-          <se-button id="layer_down" title="Move Layer Down" size="small" src="./images/go_down.svg"></se-button>
-          <se-button id="layer_moreopts" title="More Options" size="small" src="./images/context_menu.svg">
-          </se-button>
-        </fieldset>
-        <table id="layerlist">
-          <tr class="layer">
-            <td class="layervis"></td>
-            <td class="layername">Layer 1</td>
-          </tr>
-        </table>
-        <span id="selLayerLabel">Move elements to:</span>
-        <select id="selLayerNames" title="Move selected elements to a different layer" disabled="disabled">
-          <option selected="selected" value="layer1">Layer 1</option>
-        </select>
-      </div>
-      <div id="sidepanel_handle" title="Drag left/right to resize side panel [X]">L a y e r s
-      </div>
-    </div>
     <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="New Image" shortcut="N" src="./images/new.svg"></se-menu-item>
@@ -69,301 +43,8 @@
       <se-menu-item id="tool_editor_homepage" label="SVG-Edit Home Page" src="./images/logo.svg">
       </se-menu-item>
     </se-menu>
-    <div id="tools_top">
-      <div id="editor_panel">
-        <div class="tool_sep"></div>
-        <se-button id="tool_source" title="Edit Source" shortcut="U" src="./images/source.svg"></se-button>
-        <se-button id="tool_wireframe" title="Wireframe Mode" shortcut="F" src="./images/wireframe.svg"></se-button>
-        <se-button id="view_grid" title="Show grid" src="./images/grid.svg"></se-button>
-      </div> <!-- editor_panel -->
-      <div id="history_panel">
-        <div class="tool_sep"></div>
-        <se-button id="tool_undo" title="Undo" shortcut="Z" src="./images/undo.svg" disabled></se-button>
-        <se-button id="tool_redo" title="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="Duplicate Element" shortcut="D" src="./images/clone.svg"></se-button>
-          <se-button id="tool_delete" title="Delete Element" shortcut="Backspace" src="./images/delete.svg">
-          </se-button>
-        </div>
-        <div class="toolset">
-          <div class="tool_sep"></div>
-          <se-button id="tool_move_top" title="Bring to Front" shortcut="Ctrl+Shift+]" src="./images/move_top.svg">
-          </se-button>
-          <se-button id="tool_move_bottom" title="Send to Back" shortcut="Ctrl+Shift+[" src="./images/move_bottom.svg">
-          </se-button>
-        </div>
-        <div class="toolset">
-          <se-button id="tool_topath" title="Convert to Path" src="./images/to_path.svg"></se-button>
-          <se-button id="tool_reorient" title="Reorient path" src="./images/reorient.svg"></se-button>
-          <se-button id="tool_make_link" title="Make (hyper)link" src="./images/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="Identify the element"></se-input>
-        </div>
-        <div class="toolset">
-          <se-input id="elem_class" data-attr="class" size="10" label="class" title="Element class"></se-input>
-        </div>
-        <se-spin-input size="3" id="angle" min=-180 max=180 step=5 src="./images/angle.svg"
-          title="Change rotation angle"></se-spin-input>
-        <se-spin-input size="2" id="blur" min=0 max=100 step=5 src="./images/blur.svg"
-          title="Change gaussian blur value"></se-spin-input>
-        <se-list id="tool_position" title="Align Element to Page" label="" width="22px" height="24px">
-          <se-list-item id="tool_posleft" value="l">
-            <img title="align left" src="./images/align_left.svg" height="22px">
-          </se-list-item>
-          <se-list-item id="tool_poscenter" value="c">
-            <img title="align center" src="./images/align_center.svg" height="22px">
-          </se-list-item>
-          <se-list-item id="tool_posright" value="r">
-            <img title="align right" src="./images/align_right.svg" height="22px">
-          </se-list-item>
-          <se-list-item id="tool_postop" value="t">
-            <img title="align top" src="./images/align_top.svg" height="22px">
-          </se-list-item>
-          <se-list-item id="tool_posmiddle" value="m">
-            <img title="align middle" src="./images/align_middle.svg" height="22px">
-          </se-list-item>
-          <se-list-item id="tool_posbottom" value="b">
-            <img title="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="Change X coordinate">
-          </se-spin-input>
-          <se-spin-input id="selected_y" data-attr="y" size="4" type="text" label="y" title="Change Y coordinate">
-          </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="Clone Elements" shortcut="C" src="./images/clone.svg"></se-button>
-        <se-button id="tool_delete_multi" title="Delete Selected Elements" shortcut="Delete/Backspace"
-          src="./images/delete.svg"></se-button>
-        <div class="tool_sep"></div>
-        <se-button id="tool_group_elements" title="Group Elements" shortcut="G" src="./images/group_elements.svg">
-        </se-button>
-        <se-button id="tool_make_link_multi" title="Make (hyper)link" src="./images/globe_link.svg"></se-button>
-        <se-button id="tool_align_left" title="Align Left" src="./images/align_left.svg"></se-button>
-        <se-button id="tool_align_center" title="Align Center" src="./images/align_center.svg"></se-button>
-        <se-button id="tool_align_right" title="Align Right" src="./images/align_right.svg"></se-button>
-        <se-button id="tool_align_top" title="Align Top" src="./images/align_top.svg"></se-button>
-        <se-button id="tool_align_middle" title="Align Middle" src="./images/align_middle.svg"></se-button>
-        <se-button id="tool_align_bottom" title="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">selected objects</se-list-item>
-          <se-list-item id="largest_object" value="largest">largest object</se-list-item>
-          <se-list-item id="smallest_object" value="smallest">smallest object</se-list-item>
-          <se-list-item id="page" value="page">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="Change rectangle width"></se-spin-input>
-          <se-spin-input id="rect_height" data-attr="height" size="4" label="h"
-            title="Change rectangle height"></se-spin-input>
-        </div>
-        <se-spin-input id="rect_rx" min=0 max=1000 step=1 size="3" title="Change Rectangle 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="Change image width"></se-spin-input>
-          <se-spin-input id="image_height" data-attr="height" size="4" type="text" label="h"
-            title="Change image height"></se-spin-input>
-        </div>
-        <div class="toolset">
-          <label id="tool_image_url">url:
-            <input id="image_url" type="text" title="Change 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="NOTE: This image cannot be embedded. It will depend on this path to be displayed"></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="Change ellipse's cx coordinate" label="cx">
-          </se-spin-input>
-          <se-spin-input id="ellipse_cy" data-attr="cy" size="4" title="Change ellipse's cy coordinate" label="cy">
-          </se-spin-input>
-        </div>
-        <div class="toolset">
-          <se-spin-input id="ellipse_rx" data-attr="rx" size="4" title="Change ellipse's x radius" label="rx">
-          </se-spin-input>
-          <se-spin-input id="ellipse_ry" data-attr="ry" size="4" title="Change ellipse's y radius" 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="Change line's starting x coordinate" label="x1">
-          </se-spin-input>
-          <se-spin-input id="line_y1" data-attr="y1" size="4" title="Change line's starting y coordinate" label="y1">
-          </se-spin-input>
-          <se-spin-input id="line_x2" data-attr="x2" size="4" title="Change line's ending x coordinate" label="x2">
-          </se-spin-input>
-          <se-spin-input id="line_y2" data-attr="y2" size="4" title="Change line's ending y coordinate" label="y2">
-          </se-spin-input>
-        </div>
-      </div> <!-- line_panel -->
-      <div id="text_panel">
-        <div class="toolset">
-          <se-button id="tool_bold" title="Bold Text [B]" src="./images/bold.svg" shortcut="B"></se-button>
-          <se-button id="tool_italic" title="Italic Text [I]" src="./images/italic.svg" shortcut="I"></se-button>
-          <se-button id="tool_text_anchor_start" title="Align the text from start" src="./images/anchor_start.svg">
-          </se-button>
-          <se-button id="tool_text_anchor_middle" title="Align the text from middle" src="./images/anchor_middle.svg">
-          </se-button>
-          <se-button id="tool_text_anchor_end" title="Align the text from end" src="./images/anchor_end.svg">
-          </se-button>
-        </div>
-        <se-list id="tool_font_family" label="Font:">
-          <se-list-item value="Serif" style="font-family:serif;"> Serif</se-list-item>
-          <se-list-item value="Sans-serif" style="font-family:sans-serif;"> Sans-serif</se-list-item>
-          <se-list-item value="Cursive" style="font-family:cursive;"> Cursive</se-list-item>
-          <se-list-item value="Fantasy" style="font-family:fantasy;"> Fantasy</se-list-item>
-          <se-list-item value="Monospace" style="font-family:monospace;"> Monospace</se-list-item>
-          <se-list-item value="Courier" style="font-family:courier;"> Courier</se-list-item>
-          <se-list-item value="Helvetica" style="font-family:helvetica;">Helvetica</se-list-item>
-          <se-list-item value="Times" style="font-family:times;">Times</se-list-item>
-        </se-list>
-        <se-spin-input size="2" id="font_size" min=1 max=1000 step=1 title="Change Font Size"
-          src="./images/fontsize.svg"></se-spin-input>
-        <!-- 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="Group identification 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="Break link to reference element (make unique)" src="./images/unlink_use.svg">
-        </se-button>        
-      </div> <!-- use_panel -->
-      <div id="g_panel">
-        <se-button id="tool_ungroup" title="Ungroup Elements [G]" src="./images/ungroup.svg">
-        </se-button>
-      </div> <!-- g_panel -->
-      <!-- For anchor elements -->
-      <div id="a_panel">
-        <label id="tool_link_url" title="Set link URL (leave empty to remove)">
-          <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="Link Control Points" 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="Change node's x coordinate" label="x:">
-        </se-spin-input>
-        <se-spin-input id="path_node_y" data-attr="y" size="4" title="Change node's y coordinate" label="y:">
-        </se-spin-input>
-        <select id="seg_type" title="Change Segment type">
-          <option id="straight_segments" selected="selected" value="4">Straight</option>
-          <option id="curve_segments" value="6">Curve</option>
-        </select>
-        <se-button id="tool_node_clone" title="Clone Node" src="./images/tool_node_clone.svg"></se-button>
-        <se-button id="tool_node_delete" title="Delete Node" src="./images/tool_node_delete.svg"></se-button>
-        <se-button id="tool_openclose_path" title="Open/close sub-path" src="./images/tool_openclose_path.svg">
-        </se-button>
-        <se-button id="tool_add_subpath" title="Add sub-path" src="./images/tool_add_subpath.svg"></se-button>
-      </div> <!-- path_node_panel -->
-      <div id="cur_context_panel"></div>
-    </div> <!-- tools_top -->
-    <div id="tools_left">
-      <se-button id="tool_select" title="Select Tool" src="./images/select.svg"></se-button>
-      <se-button id="tool_zoom" title="Zoom Tool" src="./images/zoom.svg" shortcut="Z"></se-button>
-        <se-button id="ext-panning" title="Panning" src="./images/panning.svg"></se-button>
-        <se-button id="tool_fhpath" title="Pencil Tool" src="./images/pencil.svg" shortcut="Q"></se-button>
-        <se-button id="tool_line" title="Line Tool" src="./images/pen.svg" shortcut="L"></se-button>
-        <se-button id="tool_path" title="Path Tool" src="./images/path.svg" shortcut="P"></se-button>
-        <se-flyingbutton id="tools_rect" title="Square/Rect Tool">
-        <se-button id="tool_rect" title="Rectangle" src="./images/rect.svg" shortcut="R"></se-button>
-        <se-button id="tool_square" title="Square" src="./images/square.svg"></se-button>
-        <se-button id="tool_fhrect" title="Free-Hand Rectangle" src="./images/fh_rect.svg"></se-button>
-      </se-flyingbutton>
-      <se-flyingbutton id="tools_ellipse" title="Ellipse/Circle Tool">
-        <se-button id="tool_ellipse" title="Rectangle" src="./images/ellipse.svg" shortcut="E"></se-button>
-        <se-button id="tool_circle" title="Square" src="./images/circle.svg"></se-button>
-        <se-button id="tool_fhellipse" title="Free-Hand Rectangle" src="./images/fh_ellipse.svg"></se-button>
-      </se-flyingbutton>
-      <se-flyingbutton id="tools_polygon" title="Polygone/Star Tool">
-        <se-button id="tool_polygon" title="Polygon Tool" src="./images/polygon.svg"></se-button>
-        <se-button id="tool_star" title="Star Tool" src="./images/star.svg"></se-button>
-      </se-flyingbutton>
-      <se-button id="mode_connect" title="Connect two objects" src="./images/conn.svg"></se-button>
-      <se-button id="tool_text" title="Text Tool" src="./images/text.svg" shortcut="T"></se-button>
-      <se-button id="tool_image" title="Image Tool" src="./images/image.svg"></se-button>
-      <se-button id="tool_eyedropper" title="Eye Dropper Tool" src="./images/eye_dropper.svg" shortcut="I"></se-button>
-      <se-explorerbutton id="tool_shapelib" title="Shape library" lib="./extensions/ext-shapes/shapelib/"
-                           src="./images/shapelib.svg"></se-explorerbutton>
-      </div> <!-- tools_left -->
-      <div id="tools_bottom">
-        <!-- Zoom buttons -->
-        <se-zoom id="zoom" src="./images/zoom.svg" title="Change zoom level" inputsize="40px">
-          <div value="1000">1000</div>
-          <div value="400">400</div>
-          <div value="200">200</div>
-          <div value="100">100</div>
-          <div value="50">50</div>
-          <div value="25">25</div>
-          <div value="canvas">Fit to canvas</div>
-          <div value="selection">Fit to selection</div>
-          <div value="layer">Fit to layer content</div>
-          <div value="content">Fit to all content</div>
-        </se-zoom>
-        <se-colorpicker id="fill_color" src="./images/fill.svg" title="Change fill color" type="fill"></se-colorpicker>
-        <se-colorpicker id="stroke_color" src="./images/stroke.svg" title="Change stroke color" type="stroke"></se-colorpicker>
-        <se-spin-input id="stroke_width" min=0 max=99 step=1 title="Change stroke width" label=""></se-spin-input>
-        <se-list id="stroke_style" title="Change stroke dash style" label="" width="22px" height="24px">
-            <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="Linejoin: Miter" label="" width="22px" height="24px">
-          <se-list-item id="linejoin_miter" value="miter"><img title="Linejoin: Miter" src="./images/linejoin_miter.svg" height="22px"></img></se-list-item>
-          <se-list-item id="linejoin_round" value="round"><img title="Linejoin: Round" src="./images/linejoin_round.svg" height="22px"></img></se-list-item>
-          <se-list-item id="linejoin_bevel" value="bevel"><img title="Linejoin: Bevel" src="./images/linejoin_bevel.svg" height="22px"></img></se-list-item>
-        </se-list>
-        <se-list id="stroke_linecap" title="Linecap: Butt" label="" width="22px" height="24px">
-          <se-list-item id="linecap_butt" value="butt"><img title="Linecap: Butt" src="./images/linecap_butt.svg" height="22px"></img></se-list-item>
-          <se-list-item id="linecap_square" value="square"><img title="Linecap: Square" src="./images/linecap_square.svg" height="22px"></img></se-list-item>
-          <se-list-item id="linecap_round" value="round"><img title="Linecap: Round" src="./images/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="Change selected item opacity" src="./images/opacity.svg"></se-spin-input>
-        <se-palette id="palette"></se-palette>
-      </div> <!-- tools_bottom -->
-      <div id="option_lists" class="dropdown"></div>
+    <div id="option_lists" class="dropdown"></div>
   </div>
 </body>
 
-</html>
+</html>
\ No newline at end of file
diff --git a/src/editor/index.js b/src/editor/index.js
index 378b801b..88734661 100644
--- a/src/editor/index.js
+++ b/src/editor/index.js
@@ -7,7 +7,10 @@ For default config and extensions (and available options) available to
 import './jquery.min.js';
 import './components/index.js';
 import './dialogs/index.js';
-import svgEditor from './svgedit.js';
+import Editor from './Editor.js';
+
+const svgEditor = new Editor();
+svgEditor.init();
 
 // URL OVERRIDE CONFIG
 svgEditor.setConfig({
diff --git a/src/editor/panels/BottomPanel.js b/src/editor/panels/BottomPanel.js
new file mode 100644
index 00000000..65d8ebd7
--- /dev/null
+++ b/src/editor/panels/BottomPanel.js
@@ -0,0 +1,244 @@
+import SvgCanvas from '../../svgcanvas/svgcanvas.js';
+import {jGraduate} from '../components/jgraduate/jQuery.jGraduate.js';
+
+const {$id, $qa} = SvgCanvas;
+
+/*
+ * register actions for left panel
+ */
+/**
+  * @type {module}
+*/
+class BottomPanel {
+  /**
+   * @param {PlainObject} editor svgedit handler
+  */
+  constructor (editor) {
+    this.editor = editor;
+  }
+    /**
+   * @type {module}
+   */
+     get selectedElement () {
+      return this.editor.selectedElement;
+    }
+    /**
+     * @type {module}
+     */
+    get multiselected () {
+      return this.editor.multiselected;
+    }
+  
+    /**
+    * @type {module}
+    */
+    changeStrokeWidth (e) {
+      let val = e.target.value;
+      if (val === 0 && this.editor.selectedElement && ['line', 'polyline'].includes(this.editor.selectedElement.nodeName)) {
+        val = 1;
+      }
+      this.editor.svgCanvas.setStrokeWidth(val);
+    }
+  
+    /**
+    * @type {module}
+    */
+    changeZoom (value) {
+      switch (value) {
+      case 'canvas':
+      case 'selection':
+      case 'layer':
+      case 'content':
+        this.editor.zoomChanged(window, value);
+        break;
+      default:
+      {
+        const zoomlevel = Number(value) / 100;
+        if (zoomlevel < 0.001) {
+          value = 0.1;
+          return;
+        }
+        const zoom = this.editor.svgCanvas.getZoom();
+        const wArea = this.editor.workarea;
+  
+        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,
+          zoom: zoomlevel
+        }, true);
+      }
+      }
+    }
+    /**
+     * @fires module:svgcanvas.SvgCanvas#event:ext_toolButtonStateUpdate
+     * @returns {void}
+     */
+    updateToolButtonState () {
+      const bNoFill = (this.editor.svgCanvas.getColor('fill') === 'none');
+      const bNoStroke = (this.editor.svgCanvas.getColor('stroke') === 'none');
+      const buttonsNeedingStroke = ['tool_fhpath', 'tool_line'];
+      const buttonsNeedingFillAndStroke = [
+        'tools_rect', 'tools_ellipse',
+        'tool_text', 'tool_path'
+      ];
+  
+      if (bNoStroke) {
+        buttonsNeedingStroke.forEach((btn) => {
+          // if btn is pressed, change to select button
+          if ($id(btn).pressed) {
+            this.editor.leftPanelHandlers.clickSelect();
+          }
+          $(btn).disabled = true;
+        });
+      } else {
+        buttonsNeedingStroke.forEach((btn) => {
+          $id(btn).disabled = false;
+        });
+      }
+  
+      if (bNoStroke && bNoFill) {
+        buttonsNeedingFillAndStroke.forEach((btn) => {
+          // if btn is pressed, change to select button
+          if ($id(btn).pressed) {
+            this.editor.leftPanelHandlers.clickSelect();
+          }
+          $(btn).disabled = true;
+        });
+      } else {
+        buttonsNeedingFillAndStroke.forEach((btn) => {
+          $id(btn).disabled = false;
+        });
+      }
+  
+      this.editor.svgCanvas.runExtensions(
+        'toolButtonStateUpdate',
+        /** @type {module:svgcanvas.SvgCanvas#event:ext_toolButtonStateUpdate} */ {
+          nofill: bNoFill,
+          nostroke: bNoStroke
+        }
+      );
+    }
+  
+    /**
+    * @type {module}
+    */
+    handleColorPicker (type, evt) {
+      const {paint} = evt.detail;
+      this.editor.svgCanvas.setPaint(type, paint);
+      this.updateToolButtonState();
+    }
+    /**
+    * @type {module}
+    */
+    handleStrokeAttr (type, evt) {
+      this.editor.svgCanvas.setStrokeAttr(type, evt.detail.value);
+    }
+    /**
+    * @type {module}
+    */
+    handleOpacity (evt) {
+      // if ($(this).find('div').length) { return; }
+      const val = Number.parseInt(evt.currentTarget.value.split('%')[0]);
+      this.editor.svgCanvas.setOpacity(val / 100);
+    }
+  /**
+  * @type {module}
+  */
+   handlePalette (e) {
+    e.preventDefault();
+    // shift key or right click for stroke
+    const {picker, color} = e.detail;
+    // Webkit-based browsers returned 'initial' here for no stroke
+    const paint = color === 'none' ? new jGraduate.Paint() : new jGraduate.Paint({alpha: 100, solidColor: color.substr(1)});
+    if (picker === 'fill') {
+      $id('fill_color').setPaint(paint);
+    } else {
+      $id('stroke_color').setPaint(paint);
+    }
+    this.editor.svgCanvas.setColor(picker, color);
+    if (color !== 'none' && this.editor.svgCanvas.getPaintOpacity(picker) !== 1) {
+      this.editor.svgCanvas.setPaintOpacity(picker, 1.0);
+    }
+    this.updateToolButtonState();
+  }
+  
+  /**
+  * @type {module}
+  */
+  init () {
+    // register actions for Bottom panel
+    const template = document.createElement('template');
+    template.innerHTML = `
+      <div id="tools_bottom">
+        <!-- Zoom buttons -->
+        <se-zoom id="zoom" src="./images/zoom.svg" title="Change zoom level" inputsize="40px">
+          <div value="1000">1000</div>
+          <div value="400">400</div>
+          <div value="200">200</div>
+          <div value="100">100</div>
+          <div value="50">50</div>
+          <div value="25">25</div>
+          <div value="canvas">Fit to canvas</div>
+          <div value="selection">Fit to selection</div>
+          <div value="layer">Fit to layer content</div>
+          <div value="content">Fit to all content</div>
+        </se-zoom>
+        <se-colorpicker id="fill_color" src="./images/fill.svg" title="Change fill color" type="fill"></se-colorpicker>
+        <se-colorpicker id="stroke_color" src="./images/stroke.svg" title="Change stroke color" type="stroke">
+        </se-colorpicker>
+        <se-spin-input id="stroke_width" min=0 max=99 step=1 title="Change stroke width" label=""></se-spin-input>
+        <se-list id="stroke_style" title="Change stroke dash style" label="" width="22px" height="24px">
+          <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="Linejoin: Miter" label="" width="22px" height="24px">
+          <se-list-item id="linejoin_miter" value="miter"><img title="Linejoin: Miter" src="./images/linejoin_miter.svg"
+              height="22px"></img></se-list-item>
+          <se-list-item id="linejoin_round" value="round"><img title="Linejoin: Round" src="./images/linejoin_round.svg"
+              height="22px"></img></se-list-item>
+          <se-list-item id="linejoin_bevel" value="bevel"><img title="Linejoin: Bevel" src="./images/linejoin_bevel.svg"
+              height="22px"></img></se-list-item>
+        </se-list>
+        <se-list id="stroke_linecap" title="Linecap: Butt" label="" width="22px" height="24px">
+          <se-list-item id="linecap_butt" value="butt"><img title="Linecap: Butt" src="./images/linecap_butt.svg"
+              height="22px"></img></se-list-item>
+          <se-list-item id="linecap_square" value="square"><img title="Linecap: Square" src="./images/linecap_square.svg"
+              height="22px"></img></se-list-item>
+          <se-list-item id="linecap_round" value="round"><img title="Linecap: Round" src="./images/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="Change selected item opacity"
+          src="./images/opacity.svg"></se-spin-input>
+        <se-palette id="palette"></se-palette>
+      </div> <!-- tools_bottom -->
+    `
+    this.editor.$svgEditor.append(template.content.cloneNode(true));
+    $id('palette').addEventListener('change', this.handlePalette.bind(this));
+    const {curConfig} = this.editor.configObj;
+    $id('fill_color').setPaint(new jGraduate.Paint({alpha: 100, solidColor: curConfig.initFill.color}));
+    $id('stroke_color').setPaint(new jGraduate.Paint({alpha: 100, solidColor: curConfig.initStroke.color}));
+    $id('zoom').addEventListener('change', (e) => this.changeZoom.bind(this)(e.detail.value));
+    $id('stroke_color').addEventListener('change', (evt) => this.handleColorPicker.bind(this)('stroke', evt));
+    $id('fill_color').addEventListener('change', (evt) => this.handleColorPicker.bind(this)('fill', evt));
+    $id('stroke_width').addEventListener('change', this.changeStrokeWidth.bind(this));
+    $id('stroke_style').addEventListener('change', (evt) => this.handleStrokeAttr.bind(this)('stroke-dasharray', evt));
+    $id('stroke_linejoin').addEventListener('change', (evt) => this.handleStrokeAttr.bind(this)('stroke-linejoin', evt));
+    $id('stroke_linecap').addEventListener('change', (evt) => this.handleStrokeAttr.bind(this)('stroke-linecap', evt));
+    $id('opacity').addEventListener('change', this.handleOpacity.bind(this));
+  }
+  /**
+  * @type {module}
+  */
+   updateColorpickers (apply) {
+    $id('fill_color').update(this.editor.svgCanvas, this.editor.selectedElement, apply);
+    $id('stroke_color').update(this.editor.svgCanvas, this.editor.selectedElement, apply);
+  }
+}
+
+export default BottomPanel;
diff --git a/src/editor/panels/BottomPanelHandlers.js b/src/editor/panels/BottomPanelHandlers.js
deleted file mode 100644
index 9179741b..00000000
--- a/src/editor/panels/BottomPanelHandlers.js
+++ /dev/null
@@ -1,197 +0,0 @@
-/* globals $ */
-import {jGraduate} from '../components/jgraduate/jQuery.jGraduate.js';
-import SvgCanvas from '../../svgcanvas/svgcanvas.js';
-
-const {$id} = SvgCanvas;
-
-/*
- * register actions for left panel
- */
-/**
- *
- */
-class BottomPanelHandlers {
-  /**
-   * @param {PlainObject} editor svgedit handler
-  */
-  constructor (editor) {
-    this.editor = editor;
-    this.svgCanvas = editor.svgCanvas;
-  }
-  /**
-   * @type {module}
-   */
-  get selectedElement () {
-    return this.editor.selectedElement;
-  }
-  /**
-   * @type {module}
-   */
-  get multiselected () {
-    return this.editor.multiselected;
-  }
-
-  /**
-  * @type {module}
-  */
-  changeStrokeWidth (e) {
-    let val = e.target.value;
-    if (val === 0 && this.selectedElement && ['line', 'polyline'].includes(this.selectedElement.nodeName)) {
-      val = 1;
-    }
-    this.svgCanvas.setStrokeWidth(val);
-  }
-
-  /**
-  * @type {module}
-  */
-  changeZoom (value) {
-    switch (value) {
-    case 'canvas':
-    case 'selection':
-    case 'layer':
-    case 'content':
-      this.editor.zoomChanged(window, value);
-      break;
-    default:
-    {
-      const zoomlevel = Number(value) / 100;
-      if (zoomlevel < 0.001) {
-        value = 0.1;
-        return;
-      }
-      const zoom = this.svgCanvas.getZoom();
-      const wArea = this.editor.workarea;
-
-      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,
-        zoom: zoomlevel
-      }, true);
-    }
-    }
-  }
-  /**
-   * @fires module:svgcanvas.SvgCanvas#event:ext_toolButtonStateUpdate
-   * @returns {void}
-   */
-  updateToolButtonState () {
-    const bNoFill = (this.svgCanvas.getColor('fill') === 'none');
-    const bNoStroke = (this.svgCanvas.getColor('stroke') === 'none');
-    const buttonsNeedingStroke = ['tool_fhpath', 'tool_line'];
-    const buttonsNeedingFillAndStroke = [
-      'tools_rect', 'tools_ellipse',
-      'tool_text', 'tool_path'
-    ];
-
-    if (bNoStroke) {
-      buttonsNeedingStroke.forEach((btn) => {
-        // if btn is pressed, change to select button
-        if ($id(btn).pressed) {
-          this.editor.leftPanelHandlers.clickSelect();
-        }
-        $(btn).disabled = true;
-      });
-    } else {
-      buttonsNeedingStroke.forEach((btn) => {
-        $id(btn).disabled = false;
-      });
-    }
-
-    if (bNoStroke && bNoFill) {
-      buttonsNeedingFillAndStroke.forEach((btn) => {
-        // if btn is pressed, change to select button
-        if ($id(btn).pressed) {
-          this.editor.leftPanelHandlers.clickSelect();
-        }
-        $(btn).disabled = true;
-      });
-    } else {
-      buttonsNeedingFillAndStroke.forEach((btn) => {
-        $id(btn).disabled = false;
-      });
-    }
-
-    this.svgCanvas.runExtensions(
-      'toolButtonStateUpdate',
-      /** @type {module:svgcanvas.SvgCanvas#event:ext_toolButtonStateUpdate} */ {
-        nofill: bNoFill,
-        nostroke: bNoStroke
-      }
-    );
-  }
-  /**
-  * @type {module}
-  */
-  updateColorpickers (apply) {
-    $id('fill_color').update(this.svgCanvas, this.selectedElement, apply);
-    $id('stroke_color').update(this.svgCanvas, this.selectedElement, apply);
-  }
-
-  /**
-  * @type {module}
-  */
-  handleColorPicker (type, evt) {
-    const {paint} = evt.detail;
-    this.svgCanvas.setPaint(type, paint);
-    this.updateToolButtonState();
-  }
-  /**
-  * @type {module}
-  */
-  handleStrokeAttr (type, evt) {
-    this.svgCanvas.setStrokeAttr(type, evt.detail.value);
-  }
-  /**
-  * @type {module}
-  */
-  handleOpacity (evt) {
-    // if ($(this).find('div').length) { return; }
-    const val = Number.parseInt(evt.currentTarget.value.split('%')[0]);
-    this.svgCanvas.setOpacity(val / 100);
-  }
-  /**
-  * @type {module}
-  */
-  handlePalette (e) {
-    e.preventDefault();
-    // shift key or right click for stroke
-    const {picker, color} = e.detail;
-    // Webkit-based browsers returned 'initial' here for no stroke
-    const paint = color === 'none' ? new jGraduate.Paint() : new jGraduate.Paint({alpha: 100, solidColor: color.substr(1)});
-    if (picker === 'fill') {
-      $id('fill_color').setPaint(paint);
-    } else {
-      $id('stroke_color').setPaint(paint);
-    }
-    this.svgCanvas.setColor(picker, color);
-    if (color !== 'none' && this.svgCanvas.getPaintOpacity(picker) !== 1) {
-      this.svgCanvas.setPaintOpacity(picker, 1.0);
-    }
-    this.updateToolButtonState();
-  }
-
-  /**
-   * @type {module}
-   */
-  init () {
-    // register actions for bottom panel
-    $id('zoom').addEventListener('change', (e) => this.changeZoom.bind(this)(e.detail.value));
-    $id('stroke_color').addEventListener('change', (evt) => this.handleColorPicker.bind(this)('stroke', evt));
-    $id('fill_color').addEventListener('change', (evt) => this.handleColorPicker.bind(this)('fill', evt));
-    $id('stroke_width').addEventListener('change', this.changeStrokeWidth.bind(this));
-    $id('stroke_style').addEventListener('change', (evt) => this.handleStrokeAttr.bind(this)('stroke-dasharray', evt));
-    $id('stroke_linejoin').addEventListener('change', (evt) => this.handleStrokeAttr.bind(this)('stroke-linejoin', evt));
-    $id('stroke_linecap').addEventListener('change', (evt) => this.handleStrokeAttr.bind(this)('stroke-linecap', evt));
-    $id('opacity').addEventListener('change', this.handleOpacity.bind(this));
-    $id('palette').addEventListener('change', this.handlePalette.bind(this));
-    const {curConfig} = this.editor.configObj;
-    $id('fill_color').setPaint(new jGraduate.Paint({alpha: 100, solidColor: curConfig.initFill.color}));
-    $id('stroke_color').setPaint(new jGraduate.Paint({alpha: 100, solidColor: curConfig.initStroke.color}));
-  }
-}
-
-export default BottomPanelHandlers;
diff --git a/src/editor/panels/LayersPanel.js b/src/editor/panels/LayersPanel.js
index 18505549..5ebd8cff 100644
--- a/src/editor/panels/LayersPanel.js
+++ b/src/editor/panels/LayersPanel.js
@@ -1,11 +1,11 @@
 /* eslint-disable max-len */
 /* eslint-disable no-alert */
 /* globals $ */
-import SvgCanvas from '../../svgcanvas/svgcanvas.js';
+import SvgCanvas from "../../svgcanvas/svgcanvas.js";
 
 const SIDEPANEL_MAXWIDTH = 300;
 const SIDEPANEL_OPENWIDTH = 150;
-const {$id} = SvgCanvas;
+const { $id } = SvgCanvas;
 
 /**
  *
@@ -14,10 +14,9 @@ class LayersPanel {
   /**
    * @param {PlainObject} editor
    */
-  constructor (editor) {
-    this.svgCanvas = editor.svgCanvas;
+  constructor(editor) {
     this.uiStrings = editor.uiStrings;
-    this.updateContextPanel = editor.topPanelHandlers.updateContextPanel;
+    this.updateContextPanel = editor.topPanel.updateContextPanel;
     this.sidedrag = -1;
     this.sidedragging = false;
     this.allowmove = false;
@@ -29,25 +28,37 @@ class LayersPanel {
    * @fires module:svgcanvas.SvgCanvas#event:ext_workareaResized
    * @returns {void}
    */
-  changeSidePanelWidth (delta) {
-    const rulerX = document.querySelector('#ruler_x');
-    $('#sidepanels').width('+=' + delta);
-    $('#layerpanel').width('+=' + delta);
-    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.svgCanvas.runExtensions('workareaResized');
+  changeSidePanelWidth(delta) {
+    const rulerX = document.querySelector("#ruler_x");
+    $("#sidepanels").width("+=" + delta);
+    $("#layerpanel").width("+=" + delta);
+    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; }
+   * @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 = $('#sidepanels').width();
+    const sideWidth = $("#sidepanels").width();
     if (sideWidth + deltaX > SIDEPANEL_MAXWIDTH) {
       deltaX = SIDEPANEL_MAXWIDTH - sideWidth;
       // sideWidth = SIDEPANEL_MAXWIDTH;
@@ -55,7 +66,9 @@ class LayersPanel {
       deltaX = 2 - sideWidth;
       // sideWidth = 2;
     }
-    if (deltaX === 0) { return; }
+    if (deltaX === 0) {
+      return;
+    }
     this.sidedrag -= deltaX;
     this.changeSidePanelWidth(deltaX);
   }
@@ -65,11 +78,12 @@ class LayersPanel {
    * @param {boolean} close Forces the side panel closed
    * @returns {void}
    */
-  toggleSidePanel (close) {
+  toggleSidePanel(close) {
     const dpr = window.devicePixelRatio || 1;
-    const w = $('#sidepanels').width();
+    const w = $("#sidepanels").width();
     const isOpened = (dpr < 1 ? w : w / dpr) > 2;
-    const zoomAdjustedSidepanelWidth = (dpr < 1 ? 1 : dpr) * SIDEPANEL_OPENWIDTH;
+    const zoomAdjustedSidepanelWidth =
+      (dpr < 1 ? 1 : dpr) * SIDEPANEL_OPENWIDTH;
     const deltaX = (isOpened || close ? 0 : zoomAdjustedSidepanelWidth) - w;
     this.changeSidePanelWidth(deltaX);
   }
@@ -77,90 +91,147 @@ class LayersPanel {
    * @param {PlainObject} e event
    * @returns {void}
    */
-  lmenuFunc (e) {
+  lmenuFunc(e) {
     const action = e?.detail?.trigger;
     switch (action) {
-    case 'dupe':
-      this.cloneLayer();
-      break;
-    case 'delete':
-      this.deleteLayer();
-      break;
-    case 'merge_down':
-      this.mergeLayer();
-      break;
-    case 'merge_all':
-      this.svgCanvas.mergeAllLayers();
-      this.updateContextPanel();
-      this.populateLayers();
-      break;
+      case "dupe":
+        this.cloneLayer();
+        break;
+      case "delete":
+        this.deleteLayer();
+        break;
+      case "merge_down":
+        this.mergeLayer();
+        break;
+      case "merge_all":
+        this.editor.svgCanvas.mergeAllLayers();
+        this.updateContextPanel();
+        this.populateLayers();
+        break;
     }
   }
   /**
    * @returns {void}
    */
-  init () {
+  init() {
+    const template = document.createElement("template");
+    template.innerHTML = `
+    <div id="sidepanels">
+    <div id="layerpanel">
+      <h3 id="layersLabel">Layers</h3>
+      <fieldset id="layerbuttons">
+        <se-button id="layer_new" title="New Layer" size="small" src="./images/new.svg"></se-button>
+        <se-button id="layer_delete" title="Delete Layer" size="small" src="./images/delete.svg"></se-button>
+        <se-button id="layer_rename" title="Rename Layer" size="small" src="./images/text.svg"></se-button>
+        <se-button id="layer_up" title="Move Layer Up" size="small" src="./images/go_up.svg"></se-button>
+        <se-button id="layer_down" title="Move Layer Down" size="small" src="./images/go_down.svg"></se-button>
+        <se-button id="layer_moreopts" title="More Options" size="small" src="./images/context_menu.svg">
+        </se-button>
+      </fieldset>
+      <table id="layerlist">
+        <tr class="layer">
+          <td class="layervis"></td>
+          <td class="layername">Layer 1</td>
+        </tr>
+      </table>
+      <span id="selLayerLabel">Move elements to:</span>
+      <select id="selLayerNames" title="Move selected elements to a different layer" disabled="disabled">
+        <option selected="selected" value="layer1">Layer 1</option>
+      </select>
+    </div>
+    <div id="sidepanel_handle" title="Drag left/right to resize side panel [X]">L a y e r s
+    </div>
+  </div>
+    `;
+    this.editor.$svgEditor.append(template.content.cloneNode(true));
+    this.editor.svgCanvas = this.editor.svgCanvas;
     // layer menu added to DOM
-    const menuMore = document.createElement('se-cmenu-layers');
-    menuMore.setAttribute('id', 'se-cmenu-layers-more');
-    menuMore.value = 'layer_moreopts';
-    menuMore.setAttribute('leftclick', true);
+    const menuMore = document.createElement("se-cmenu-layers");
+    menuMore.setAttribute("id", "se-cmenu-layers-more");
+    menuMore.value = "layer_moreopts";
+    menuMore.setAttribute("leftclick", true);
     document.body.append(menuMore);
-    const menuLayerBox = document.createElement('se-cmenu-layers');
-    menuLayerBox.setAttribute('id', 'se-cmenu-layers-list');
-    menuLayerBox.value = 'layerlist';
-    menuLayerBox.setAttribute('leftclick', false);
+    const menuLayerBox = document.createElement("se-cmenu-layers");
+    menuLayerBox.setAttribute("id", "se-cmenu-layers-list");
+    menuLayerBox.value = "layerlist";
+    menuLayerBox.setAttribute("leftclick", false);
     document.body.append(menuLayerBox);
-    document.getElementById('layer_new').addEventListener('click', this.newLayer.bind(this));
-    document.getElementById('layer_delete').addEventListener('click', this.deleteLayer.bind(this));
-    document.getElementById('layer_up').addEventListener('click', () => this.moveLayer.bind(this)(-1));
-    document.getElementById('layer_down').addEventListener('click', () => this.moveLayer.bind(this)(1));
-    document.getElementById('layer_rename').addEventListener('click', this.layerRename.bind(this));
-    $id('se-cmenu-layers-more').addEventListener('change', this.lmenuFunc.bind(this));
-    $id('se-cmenu-layers-list').addEventListener('change', (e) => {
+    document
+      .getElementById("layer_new")
+      .addEventListener("click", this.newLayer.bind(this));
+    document
+      .getElementById("layer_delete")
+      .addEventListener("click", this.deleteLayer.bind(this));
+    document
+      .getElementById("layer_up")
+      .addEventListener("click", () => this.moveLayer.bind(this)(-1));
+    document
+      .getElementById("layer_down")
+      .addEventListener("click", () => this.moveLayer.bind(this)(1));
+    document
+      .getElementById("layer_rename")
+      .addEventListener("click", this.layerRename.bind(this));
+    $id("se-cmenu-layers-more").addEventListener(
+      "change",
+      this.lmenuFunc.bind(this)
+    );
+    $id("se-cmenu-layers-list").addEventListener("change", e => {
       this.lmenuFunc.bind(this)(e?.detail?.trigger, e?.detail?.source);
     });
-    $id('sidepanel_handle').addEventListener('click', this.toggleSidePanel.bind(this));
+    $id("sidepanel_handle").addEventListener(
+      "click",
+      this.toggleSidePanel.bind(this)
+    );
     if (this.editor.configObj.curConfig.showlayers) {
       this.toggleSidePanel();
     }
-    $id('sidepanel_handle').addEventListener('mousedown', (evt) => {
+    $id("sidepanel_handle").addEventListener("mousedown", evt => {
       this.sidedrag = evt.pageX;
-      window.addEventListener('mousemove', this.resizeSidePanel.bind(this));
+      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(); }
+    $id("sidepanel_handle").addEventListener("mouseup", evt => {
+      if (!this.sidedragging) {
+        this.toggleSidePanel();
+      }
       this.sidedrag = -1;
       this.sidedragging = false;
     });
-    window.addEventListener('mouseup', (evt) => {
+    window.addEventListener("mouseup", evt => {
       this.sidedrag = -1;
       this.sidedragging = false;
-      $id('svg_editor').removeEventListener('mousemove', this.resizeSidePanel.bind(this));
+      $id("svg_editor").removeEventListener(
+        "mousemove",
+        this.resizeSidePanel.bind(this)
+      );
     });
   }
   /**
    * @returns {void}
    */
-  newLayer () {
+  newLayer() {
     let uniqName;
-    let i = this.svgCanvas.getCurrentDrawing().getNumLayers();
+    let i = this.editor.svgCanvas.getCurrentDrawing().getNumLayers();
     do {
-      uniqName = this.uiStrings.layers.layer + ' ' + (++i);
-    } while (this.svgCanvas.getCurrentDrawing().hasLayer(uniqName));
+      uniqName = this.uiStrings.layers.layer + " " + ++i;
+    } while (this.editor.svgCanvas.getCurrentDrawing().hasLayer(uniqName));
 
-    const newName = prompt(this.uiStrings.notification.enterUniqueLayerName, uniqName);
-    if (!newName) { return; }
-    if (this.svgCanvas.getCurrentDrawing().hasLayer(newName)) {
+    const newName = prompt(
+      this.uiStrings.notification.enterUniqueLayerName,
+      uniqName
+    );
+    if (!newName) {
+      return;
+    }
+    if (this.editor.svgCanvas.getCurrentDrawing().hasLayer(newName)) {
       alert(this.uiStrings.notification.dupeLayerName);
       return;
     }
-    this.svgCanvas.createLayer(newName);
+    this.editor.svgCanvas.createLayer(newName);
     this.updateContextPanel();
     this.populateLayers();
   }
@@ -169,15 +240,15 @@ class LayersPanel {
    *
    * @returns {void}
    */
-  deleteLayer () {
-    if (this.svgCanvas.deleteCurrentLayer()) {
+  deleteLayer() {
+    if (this.editor.svgCanvas.deleteCurrentLayer()) {
       this.updateContextPanel();
       this.populateLayers();
-      // This matches what this.svgCanvas does
+      // This matches what this.editor.svgCanvas does
       // TODO: make this behavior less brittle (svg-editor should get which
       // layer is selected from the canvas and then select that one in the UI)
-      $('#layerlist tr.layer').removeClass('layersel');
-      $('#layerlist tr.layer:first').addClass('layersel');
+      $("#layerlist tr.layer").removeClass("layersel");
+      $("#layerlist tr.layer:first").addClass("layersel");
     }
   }
 
@@ -185,16 +256,22 @@ class LayersPanel {
    *
    * @returns {void}
    */
-  cloneLayer () {
-    const name = this.svgCanvas.getCurrentDrawing().getCurrentLayerName() + ' copy';
+  cloneLayer() {
+    const name =
+      this.editor.svgCanvas.getCurrentDrawing().getCurrentLayerName() + " copy";
 
-    const newName = prompt(this.uiStrings.notification.enterUniqueLayerName, name);
-    if (!newName) { return; }
-    if (this.svgCanvas.getCurrentDrawing().hasLayer(newName)) {
+    const newName = prompt(
+      this.uiStrings.notification.enterUniqueLayerName,
+      name
+    );
+    if (!newName) {
+      return;
+    }
+    if (this.editor.svgCanvas.getCurrentDrawing().hasLayer(newName)) {
       alert(this.uiStrings.notification.dupeLayerName);
       return;
     }
-    this.svgCanvas.cloneLayer(newName);
+    this.editor.svgCanvas.cloneLayer(newName);
     this.updateContextPanel();
     this.populateLayers();
   }
@@ -203,11 +280,14 @@ class LayersPanel {
    *
    * @returns {void}
    */
-  mergeLayer () {
-    if ($('#layerlist tr.layersel').index() === this.svgCanvas.getCurrentDrawing().getNumLayers() - 1) {
+  mergeLayer() {
+    if (
+      $("#layerlist tr.layersel").index() ===
+      this.editor.svgCanvas.getCurrentDrawing().getNumLayers() - 1
+    ) {
       return;
     }
-    this.svgCanvas.mergeLayer();
+    this.editor.svgCanvas.mergeLayer();
     this.updateContextPanel();
     this.populateLayers();
   }
@@ -216,13 +296,13 @@ class LayersPanel {
    * @param {Integer} pos
    * @returns {void}
    */
-  moveLayer (pos) {
-    const total = this.svgCanvas.getCurrentDrawing().getNumLayers();
+  moveLayer(pos) {
+    const total = this.editor.svgCanvas.getCurrentDrawing().getNumLayers();
 
-    let curIndex = $('#layerlist tr.layersel').index();
+    let curIndex = $("#layerlist tr.layersel").index();
     if (curIndex > 0 || curIndex < total - 1) {
       curIndex += pos;
-      this.svgCanvas.setCurrentLayerPosition(total - curIndex - 1);
+      this.editor.svgCanvas.setCurrentLayerPosition(total - curIndex - 1);
       this.populateLayers();
     }
   }
@@ -230,16 +310,21 @@ class LayersPanel {
   /**
    * @returns {void}
    */
-  layerRename () {
-  // const curIndex = $('#layerlist tr.layersel').prevAll().length; // Currently unused
-    const oldName = $('#layerlist tr.layersel td.layername').text();
-    const newName = prompt(this.uiStrings.notification.enterNewLayerName, '');
-    if (!newName) { return; }
-    if (oldName === newName || this.svgCanvas.getCurrentDrawing().hasLayer(newName)) {
+  layerRename() {
+    // const curIndex = $('#layerlist tr.layersel').prevAll().length; // Currently unused
+    const oldName = $("#layerlist tr.layersel td.layername").text();
+    const newName = prompt(this.uiStrings.notification.enterNewLayerName, "");
+    if (!newName) {
+      return;
+    }
+    if (
+      oldName === newName ||
+      this.editor.svgCanvas.getCurrentDrawing().hasLayer(newName)
+    ) {
       alert(this.uiStrings.notification.layerHasThatName);
       return;
     }
-    this.svgCanvas.renameCurrentLayer(newName);
+    this.editor.svgCanvas.renameCurrentLayer(newName);
     this.populateLayers();
   }
 
@@ -248,72 +333,86 @@ class LayersPanel {
    * If no layer is passed in, this function restores the other layers.
    * @param {string} [layerNameToHighlight]
    * @returns {void}
-  */
-  toggleHighlightLayer (layerNameToHighlight) {
+   */
+  toggleHighlightLayer(layerNameToHighlight) {
     let i;
-    const curNames = [], numLayers = this.svgCanvas.getCurrentDrawing().getNumLayers();
+    const curNames = [],
+      numLayers = this.editor.svgCanvas.getCurrentDrawing().getNumLayers();
     for (i = 0; i < numLayers; i++) {
-      curNames[i] = this.svgCanvas.getCurrentDrawing().getLayerName(i);
+      curNames[i] = this.editor.svgCanvas.getCurrentDrawing().getLayerName(i);
     }
 
     if (layerNameToHighlight) {
-      curNames.forEach((curName) => {
+      curNames.forEach(curName => {
         if (curName !== layerNameToHighlight) {
-          this.svgCanvas.getCurrentDrawing().setLayerOpacity(curName, 0.5);
+          this.editor.svgCanvas
+            .getCurrentDrawing()
+            .setLayerOpacity(curName, 0.5);
         }
       });
     } else {
-      curNames.forEach((curName) => {
-        this.svgCanvas.getCurrentDrawing().setLayerOpacity(curName, 1.0);
+      curNames.forEach(curName => {
+        this.editor.svgCanvas.getCurrentDrawing().setLayerOpacity(curName, 1.0);
       });
     }
   }
 
   /**
-  * @returns {void}
-  */
-  populateLayers () {
-    this.svgCanvas.clearSelection();
-    const layerlist = $('#layerlist tbody').empty();
-    const selLayerNames = $('#selLayerNames').empty();
-    const drawing = this.svgCanvas.getCurrentDrawing();
+   * @returns {void}
+   */
+  populateLayers() {
+    this.editor.svgCanvas.clearSelection();
+    const layerlist = $("#layerlist tbody").empty();
+    const selLayerNames = $("#selLayerNames").empty();
+    const drawing = this.editor.svgCanvas.getCurrentDrawing();
     const currentLayerName = drawing.getCurrentLayerName();
-    let layer = this.svgCanvas.getCurrentDrawing().getNumLayers();
+    let layer = this.editor.svgCanvas.getCurrentDrawing().getNumLayers();
     // we get the layers in the reverse z-order (the layer rendered on top is listed first)
     while (layer--) {
       const name = drawing.getLayerName(layer);
-      const layerTr = $('<tr class="layer">').toggleClass('layersel', name === currentLayerName);
-      const layerVis = $('<td class="layervis">').toggleClass('layerinvis', !drawing.getLayerVisibility(name));
-      const layerName = $('<td class="layername">' + name + '</td>');
+      const layerTr = $('<tr class="layer">').toggleClass(
+        "layersel",
+        name === currentLayerName
+      );
+      const layerVis = $('<td class="layervis">').toggleClass(
+        "layerinvis",
+        !drawing.getLayerVisibility(name)
+      );
+      const layerName = $('<td class="layername">' + name + "</td>");
       layerlist.append(layerTr.append(layerVis, layerName));
-      selLayerNames.append('<option value="' + name + '">' + name + '</option>');
+      selLayerNames.append(
+        '<option value="' + name + '">' + name + "</option>"
+      );
     }
     // handle selection of layer
-    $('#layerlist td.layername')
-      .mouseup((evt) => {
-        $('#layerlist tr.layer').removeClass('layersel');
-        $(evt.currentTarget.parentNode).addClass('layersel');
-        this.svgCanvas.setCurrentLayer(evt.currentTarget.textContent);
+    $("#layerlist td.layername")
+      .mouseup(evt => {
+        $("#layerlist tr.layer").removeClass("layersel");
+        $(evt.currentTarget.parentNode).addClass("layersel");
+        this.editor.svgCanvas.setCurrentLayer(evt.currentTarget.textContent);
         evt.preventDefault();
       })
-      .mouseover((evt) => {
-        this.toggleHighlightLayer(this.svgCanvas, evt.currentTarget.textContent);
+      .mouseover(evt => {
+        this.toggleHighlightLayer(
+          this.editor.svgCanvas,
+          evt.currentTarget.textContent
+        );
       })
       .mouseout(() => {
-        this.toggleHighlightLayer(this.svgCanvas);
+        this.toggleHighlightLayer(this.editor.svgCanvas);
       });
-    $('#layerlist td.layervis').click((evt) => {
+    $("#layerlist td.layervis").click(evt => {
       const row = $(evt.currentTarget.parentNode).prevAll().length;
-      const name = $('#layerlist tr.layer:eq(' + row + ') td.layername').text();
-      const vis = $(evt.currentTarget).hasClass('layerinvis');
-      this.svgCanvas.setLayerVisibility(name, vis);
-      $(evt.currentTarget).toggleClass('layerinvis');
+      const name = $("#layerlist tr.layer:eq(" + row + ") td.layername").text();
+      const vis = $(evt.currentTarget).hasClass("layerinvis");
+      this.editor.svgCanvas.setLayerVisibility(name, vis);
+      $(evt.currentTarget).toggleClass("layerinvis");
     });
 
     // if there were too few rows, let's add a few to make it not so lonely
-    let num = 5 - $('#layerlist tr.layer').size();
+    let num = 5 - $("#layerlist tr.layer").size();
     while (num-- > 0) {
-    // TODO: there must a better way to do this
+      // TODO: there must a better way to do this
       layerlist.append('<tr><td style="color:white">_</td><td/></tr>');
     }
   }
diff --git a/src/editor/panels/LeftPanel.js b/src/editor/panels/LeftPanel.js
new file mode 100644
index 00000000..00ca5fe3
--- /dev/null
+++ b/src/editor/panels/LeftPanel.js
@@ -0,0 +1,253 @@
+import SvgCanvas from "../../svgcanvas/svgcanvas.js";
+
+const { $id, $qa } = SvgCanvas;
+
+/*
+ * register actions for left panel
+ */
+/**
+ * @type {module}
+ */
+class LeftPanel {
+  /**
+   * @param {PlainObject} editor svgedit handler
+   */
+  constructor(editor) {
+    this.editor = editor;
+  }
+  /**
+   * This is a common function used when a tool has been clicked (chosen).
+   * It does several common things:
+   * - Removes the pressed button from whatever tool currently has it.
+   * - Adds the the pressed button  to the button passed in.
+   * @function this.updateLeftPanel
+   * @param {string|Element} button The DOM element or string selector representing the toolbar button
+   * @returns {boolean} Whether the button was disabled or not
+   */
+  // eslint-disable-next-line class-methods-use-this
+  updateLeftPanel(button) {
+    if (button.disabled) return false;
+    // remove the pressed state on other(s) button(s)
+    $qa("#tools_left *[pressed]").forEach(b => {
+      b.pressed = false;
+    });
+    // pressed state for the clicked button
+    $id(button).pressed = true;
+    return true;
+  }
+
+  /**
+   * Unless the select toolbar button is disabled, sets the button
+   * and sets the select mode and cursor styles.
+   * @function module:SVGEditor.clickSelect
+   * @returns {void}
+   */
+  clickSelect() {
+    if (this.updateLeftPanel("tool_select")) {
+      this.editor.workarea.style.cursor = "auto";
+      this.editor.svgCanvas.setMode("select");
+    }
+  }
+
+  /**
+   *
+   * @returns {void}
+   */
+  clickFHPath() {
+    if (this.updateLeftPanel("tool_fhpath")) {
+      this.editor.svgCanvas.setMode("fhpath");
+    }
+  }
+
+  /**
+   *
+   * @returns {void}
+   */
+  clickLine() {
+    if (this.updateLeftPanel("tool_line")) {
+      this.editor.svgCanvas.setMode("line");
+    }
+  }
+
+  /**
+   *
+   * @returns {void}
+   */
+  clickSquare() {
+    if (this.updateLeftPanel("tool_square")) {
+      this.editor.svgCanvas.setMode("square");
+    }
+  }
+
+  /**
+   *
+   * @returns {void}
+   */
+  clickRect() {
+    if (this.updateLeftPanel("tool_rect")) {
+      this.editor.svgCanvas.setMode("rect");
+    }
+  }
+
+  /**
+   *
+   * @returns {void}
+   */
+  clickFHRect() {
+    if (this.updateLeftPanel("tool_fhrect")) {
+      this.editor.svgCanvas.setMode("fhrect");
+    }
+  }
+
+  /**
+   *
+   * @returns {void}
+   */
+  clickCircle() {
+    if (this.updateLeftPanel("tool_circle")) {
+      this.editor.svgCanvas.setMode("circle");
+    }
+  }
+
+  /**
+   *
+   * @returns {void}
+   */
+  clickEllipse() {
+    if (this.updateLeftPanel("tool_ellipse")) {
+      this.editor.svgCanvas.setMode("ellipse");
+    }
+  }
+
+  /**
+   *
+   * @returns {void}
+   */
+  clickFHEllipse() {
+    if (this.updateLeftPanel("tool_fhellipse")) {
+      this.editor.svgCanvas.setMode("fhellipse");
+    }
+  }
+
+  /**
+   *
+   * @returns {void}
+   */
+  clickImage() {
+    if (this.updateLeftPanel("tool_image")) {
+      this.editor.svgCanvas.setMode("image");
+    }
+  }
+
+  /**
+   *
+   * @returns {void}
+   */
+  clickZoom() {
+    if (this.updateLeftPanel("tool_zoom")) {
+      this.editor.svgCanvas.setMode("zoom");
+      this.editor.workarea.style.cursor = this.editor.zoomInIcon;
+    }
+  }
+
+  /**
+   *
+   * @returns {void}
+   */
+  dblclickZoom() {
+    if (this.updateLeftPanel("tool_zoom")) {
+      this.editor.zoomImage();
+      this.clickSelect();
+    }
+  }
+
+  /**
+   *
+   * @returns {void}
+   */
+  clickText() {
+    if (this.updateLeftPanel("tool_text")) {
+      this.editor.svgCanvas.setMode("text");
+    }
+  }
+
+  /**
+   *
+   * @returns {void}
+   */
+  clickPath() {
+    if (this.updateLeftPanel("tool_path")) {
+      this.editor.svgCanvas.setMode("path");
+    }
+  }
+  /**
+   * @type {module}
+   */
+  add(id, handler) {
+    $id(id).addEventListener("click", () => {
+      if (this.updateLeftPanel(id)) {
+        handler();
+      }
+    });
+  }
+  /**
+   * @type {module}
+   */
+  init() {
+    // add Left panel
+    const template = document.createElement("template");
+    template.innerHTML = `
+    <div id="tools_left">
+     <se-button id="tool_select" title="Select Tool" src="./images/select.svg"></se-button>
+     <se-button id="tool_zoom" title="Zoom Tool" src="./images/zoom.svg" shortcut="Z"></se-button>
+     <se-button id="ext-panning" title="Panning" src="./images/panning.svg"></se-button>
+     <se-button id="tool_fhpath" title="Pencil Tool" src="./images/pencil.svg" shortcut="Q"></se-button>
+     <se-button id="tool_line" title="Line Tool" src="./images/pen.svg" shortcut="L"></se-button>
+     <se-button id="tool_path" title="Path Tool" src="./images/path.svg" shortcut="P"></se-button>
+     <se-flyingbutton id="tools_rect" title="Square/Rect Tool">
+       <se-button id="tool_rect" title="Rectangle" src="./images/rect.svg" shortcut="R"></se-button>
+       <se-button id="tool_square" title="Square" src="./images/square.svg"></se-button>
+       <se-button id="tool_fhrect" title="Free-Hand Rectangle" src="./images/fh_rect.svg"></se-button>
+     </se-flyingbutton>
+     <se-flyingbutton id="tools_ellipse" title="Ellipse/Circle Tool">
+       <se-button id="tool_ellipse" title="Rectangle" src="./images/ellipse.svg" shortcut="E"></se-button>
+       <se-button id="tool_circle" title="Square" src="./images/circle.svg"></se-button>
+       <se-button id="tool_fhellipse" title="Free-Hand Rectangle" src="./images/fh_ellipse.svg"></se-button>
+     </se-flyingbutton>
+     <se-flyingbutton id="tools_polygon" title="Polygone/Star Tool">
+       <se-button id="tool_polygon" title="Polygon Tool" src="./images/polygon.svg"></se-button>
+       <se-button id="tool_star" title="Star Tool" src="./images/star.svg"></se-button>
+     </se-flyingbutton>
+     <se-button id="mode_connect" title="Connect two objects" src="./images/conn.svg"></se-button>
+     <se-button id="tool_text" title="Text Tool" src="./images/text.svg" shortcut="T"></se-button>
+     <se-button id="tool_image" title="Image Tool" src="./images/image.svg"></se-button>
+     <se-button id="tool_eyedropper" title="Eye Dropper Tool" src="./images/eye_dropper.svg" shortcut="I"></se-button>
+     <se-explorerbutton id="tool_shapelib" title="Shape library" lib="./extensions/ext-shapes/shapelib/"
+       src="./images/shapelib.svg"></se-explorerbutton>
+    </div> <!-- tools_left -->
+     `;
+    this.editor.$svgEditor.append(template.content.cloneNode(true));
+    // register actions for left panel
+    $id("tool_select").addEventListener("click", this.clickSelect.bind(this));
+    $id("tool_fhpath").addEventListener("click", this.clickFHPath.bind(this));
+    $id("tool_text").addEventListener("click", this.clickText.bind(this));
+    $id("tool_image").addEventListener("click", this.clickImage.bind(this));
+    $id("tool_zoom").addEventListener("click", this.clickZoom.bind(this));
+    $id("tool_zoom").addEventListener("dblclick", this.dblclickZoom.bind(this));
+    $id("tool_path").addEventListener("click", this.clickPath.bind(this));
+    $id("tool_line").addEventListener("click", this.clickLine.bind(this));
+
+    // flyout
+    $id("tool_rect").addEventListener("click", this.clickRect.bind(this));
+    $id("tool_square").addEventListener("click", this.clickSquare.bind(this));
+    $id("tool_fhrect").addEventListener("click", this.clickFHRect.bind(this));
+    $id("tool_ellipse").addEventListener("click", this.clickEllipse.bind(this));
+    $id("tool_circle").addEventListener("click", this.clickCircle.bind(this));
+    $id("tool_fhellipse").addEventListener(
+      "click",
+      this.clickFHEllipse.bind(this)
+    );
+  }
+}
+
+export default LeftPanel;
diff --git a/src/editor/panels/LeftPanelHandlers.js b/src/editor/panels/LeftPanelHandlers.js
deleted file mode 100644
index 9d95b01c..00000000
--- a/src/editor/panels/LeftPanelHandlers.js
+++ /dev/null
@@ -1,216 +0,0 @@
-import SvgCanvas from '../../svgcanvas/svgcanvas.js';
-
-const {$id, $qa} = SvgCanvas;
-
-/*
- * register actions for left panel
- */
-/**
-  * @type {module}
-*/
-class LeftPanelHandlers {
-  /**
-   * @param {PlainObject} editor svgedit handler
-  */
-  constructor (editor) {
-    this.editor = editor;
-    this.svgCanvas = editor.svgCanvas;
-  }
-  /**
-  * This is a common function used when a tool has been clicked (chosen).
-  * It does several common things:
-  * - Removes the pressed button from whatever tool currently has it.
-  * - Adds the the pressed button  to the button passed in.
-  * @function this.updateLeftPanel
-  * @param {string|Element} button The DOM element or string selector representing the toolbar button
-  * @returns {boolean} Whether the button was disabled or not
-  */
-  // eslint-disable-next-line class-methods-use-this
-  updateLeftPanel (button) {
-    if (button.disabled) return false;
-    // remove the pressed state on other(s) button(s)
-    $qa('#tools_left *[pressed]').forEach((b) => { b.pressed = false; });
-    // pressed state for the clicked button
-    $id(button).pressed = true;
-    return true;
-  }
-
-  /**
-  * Unless the select toolbar button is disabled, sets the button
-  * and sets the select mode and cursor styles.
-  * @function module:SVGEditor.clickSelect
-  * @returns {void}
-  */
-  clickSelect () {
-    if (this.updateLeftPanel('tool_select')) {
-      this.editor.workarea.style.cursor = "auto";
-      this.svgCanvas.setMode('select');
-    }
-  }
-
-  /**
-  *
-  * @returns {void}
-  */
-  clickFHPath () {
-    if (this.updateLeftPanel('tool_fhpath')) {
-      this.svgCanvas.setMode('fhpath');
-    }
-  }
-
-  /**
-  *
-  * @returns {void}
-  */
-  clickLine () {
-    if (this.updateLeftPanel('tool_line')) {
-      this.svgCanvas.setMode('line');
-    }
-  }
-
-  /**
-  *
-  * @returns {void}
-  */
-  clickSquare () {
-    if (this.updateLeftPanel('tool_square')) {
-      this.svgCanvas.setMode('square');
-    }
-  }
-
-  /**
-  *
-  * @returns {void}
-  */
-  clickRect () {
-    if (this.updateLeftPanel('tool_rect')) {
-      this.svgCanvas.setMode('rect');
-    }
-  }
-
-  /**
-  *
-  * @returns {void}
-  */
-  clickFHRect () {
-    if (this.updateLeftPanel('tool_fhrect')) {
-      this.svgCanvas.setMode('fhrect');
-    }
-  }
-
-  /**
-  *
-  * @returns {void}
-  */
-  clickCircle () {
-    if (this.updateLeftPanel('tool_circle')) {
-      this.svgCanvas.setMode('circle');
-    }
-  }
-
-  /**
-  *
-  * @returns {void}
-  */
-  clickEllipse () {
-    if (this.updateLeftPanel('tool_ellipse')) {
-      this.svgCanvas.setMode('ellipse');
-    }
-  }
-
-  /**
-  *
-  * @returns {void}
-  */
-  clickFHEllipse () {
-    if (this.updateLeftPanel('tool_fhellipse')) {
-      this.svgCanvas.setMode('fhellipse');
-    }
-  }
-
-  /**
-  *
-  * @returns {void}
-  */
-  clickImage () {
-    if (this.updateLeftPanel('tool_image')) {
-      this.svgCanvas.setMode('image');
-    }
-  }
-
-  /**
-  *
-  * @returns {void}
-  */
-  clickZoom () {
-    if (this.updateLeftPanel('tool_zoom')) {
-      this.svgCanvas.setMode('zoom');
-      this.editor.workarea.style.cursor = this.editor.zoomInIcon;
-    }
-  }
-
-  /**
-  *
-  * @returns {void}
-  */
-  dblclickZoom () {
-    if (this.updateLeftPanel('tool_zoom')) {
-      this.editor.zoomImage();
-      this.clickSelect();
-    }
-  }
-
-  /**
-  *
-  * @returns {void}
-  */
-  clickText () {
-    if (this.updateLeftPanel('tool_text')) {
-      this.svgCanvas.setMode('text');
-    }
-  }
-
-  /**
-  *
-  * @returns {void}
-  */
-  clickPath () {
-    if (this.updateLeftPanel('tool_path')) {
-      this.svgCanvas.setMode('path');
-    }
-  }
-  /**
-  * @type {module}
-  */
-  add (id, handler) {
-    $id(id).addEventListener('click', () => {
-      if (this.updateLeftPanel(id)) {
-        handler();
-      }
-    });
-  }
-  /**
-  * @type {module}
-  */
-  init () {
-    // register actions for left panel
-    $id('tool_select').addEventListener('click', this.clickSelect.bind(this));
-    $id('tool_fhpath').addEventListener('click', this.clickFHPath.bind(this));
-    $id('tool_text').addEventListener('click', this.clickText.bind(this));
-    $id('tool_image').addEventListener('click', this.clickImage.bind(this));
-    $id('tool_zoom').addEventListener('click', this.clickZoom.bind(this));
-    $id('tool_zoom').addEventListener('dblclick', this.dblclickZoom.bind(this));
-    $id('tool_path').addEventListener('click', this.clickPath.bind(this));
-    $id('tool_line').addEventListener('click', this.clickLine.bind(this));
-
-    // flyout
-    $id('tool_rect').addEventListener('click', this.clickRect.bind(this));
-    $id('tool_square').addEventListener('click', this.clickSquare.bind(this));
-    $id('tool_fhrect').addEventListener('click', this.clickFHRect.bind(this));
-    $id('tool_ellipse').addEventListener('click', this.clickEllipse.bind(this));
-    $id('tool_circle').addEventListener('click', this.clickCircle.bind(this));
-    $id('tool_fhellipse').addEventListener('click', this.clickFHEllipse.bind(this));
-  }
-}
-
-export default LeftPanelHandlers;
diff --git a/src/editor/panels/TopPanel.js b/src/editor/panels/TopPanel.js
new file mode 100644
index 00000000..cc2d5d8b
--- /dev/null
+++ b/src/editor/panels/TopPanel.js
@@ -0,0 +1,1131 @@
+/* globals $ */
+import SvgCanvas from "../../svgcanvas/svgcanvas.js";
+import { isValidUnit, getTypeMap, convertUnit } from "../../common/units.js";
+
+const { $id, isNullish } = SvgCanvas;
+
+/*
+ * register actions for left panel
+ */
+/**
+ *
+ */
+class TopPanel {
+  /**
+   * @param {PlainObject} editor svgedit handler
+   */
+  constructor(editor) {
+    this.editor = editor;
+    this.uiStrings = editor.uiStrings;
+  }
+  /**
+   * @type {module}
+   */
+  get selectedElement() {
+    return this.editor.selectedElement;
+  }
+  /**
+   * @type {module}
+   */
+  get multiselected() {
+    return this.editor.multiselected;
+  }
+  /**
+   * @type {module}
+   */
+  get path() {
+    return this.editor.svgCanvas.pathActions;
+  }
+
+  /**
+   *
+   * @param {Element} opt
+   * @param {boolean} changeElem
+   * @returns {void}
+   */
+  setStrokeOpt(opt, changeElem) {
+    const { id } = opt;
+    const bits = id.split('_');
+    const [pre, val] = bits;
+
+    if (changeElem) {
+      this.svgCanvas.setStrokeAttr('stroke-' + pre, val);
+    }
+    $(opt).addClass('current').siblings().removeClass('current');
+  }
+
+  /**
+   * Updates the toolbar (colors, opacity, etc) based on the selected element.
+   * This function also updates the opacity and id elements that are in the
+   * context panel.
+   * @returns {void}
+   */
+  update() {
+    let i, len;
+    if (!isNullish(this.selectedElement)) {
+      switch (this.selectedElement.tagName) {
+        case "use":
+        case "image":
+        case "foreignObject":
+          break;
+        case "g":
+        case "a": {
+          // Look for common styles
+          const childs = this.selectedElement.getElementsByTagName("*");
+          let gWidth = null;
+          for (i = 0, len = childs.length; i < len; i++) {
+            const swidth = childs[i].getAttribute("stroke-width");
+
+            if (i === 0) {
+              gWidth = swidth;
+            } else if (gWidth !== swidth) {
+              gWidth = null;
+            }
+          }
+
+          $("#stroke_width").val(gWidth === null ? "" : gWidth);
+          this.editor.bottomPanel.updateColorpickers(true);
+          break;
+        }
+        default: {
+          this.editor.bottomPanel.updateColorpickers(true);
+
+          $("#stroke_width").val(
+            this.selectedElement.getAttribute("stroke-width") || 1
+          );
+          $("#stroke_style").val(
+            this.selectedElement.getAttribute("stroke-dasharray") || "none"
+          );
+
+          let attr =
+            this.selectedElement.getAttribute("stroke-linejoin") || "miter";
+
+          if ($("#linejoin_" + attr).length) {
+            this.setStrokeOpt($("#linejoin_" + attr)[0]);
+          }
+
+          attr = this.selectedElement.getAttribute("stroke-linecap") || "butt";
+
+          if ($("#linecap_" + attr).length) {
+            this.setStrokeOpt($("#linecap_" + attr)[0]);
+          }
+        }
+      }
+    }
+
+    // All elements including image and group have opacity
+    if (!isNullish(this.selectedElement)) {
+      const opacPerc =
+        (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")
+          : "";
+    }
+
+    this.editor.bottomPanel.updateToolButtonState();
+  }
+  /**
+   * @param {PlainObject} [opts={}]
+   * @param {boolean} [opts.cancelDeletes=false]
+   * @returns {void} Resolves to `undefined`
+   */
+  promptImgURL({ cancelDeletes = false } = {}) {
+    let curhref = this.editor.svgCanvas.getHref(this.editor.selectedElement);
+    curhref = curhref.startsWith("data:") ? "" : curhref;
+    // eslint-disable-next-line no-alert
+    const url = prompt(
+      this.editor.uiStrings.notification.enterNewImgURL,
+      curhref
+    );
+    if (url) {
+      this.editor.setImageURL(url);
+    } else if (cancelDeletes) {
+      this.editor.svgCanvas.deleteSelectedElements();
+    }
+  }
+  /**
+   * Updates the context panel tools based on the selected element.
+   * @returns {void}
+   */
+  updateContextPanel() {
+    const setInputWidth = elem => {
+      const w = Math.min(Math.max(12 + elem.value.length * 6, 50), 300);
+      $(elem).width(w);
+    };
+
+    let elem = this.editor.selectedElement;
+    // If element has just been deleted, consider it null
+    if (!isNullish(elem) && !elem.parentNode) {
+      elem = null;
+    }
+    const currentLayerName = this.editor.svgCanvas
+      .getCurrentDrawing()
+      .getCurrentLayerName();
+    const currentMode = this.editor.svgCanvas.getMode();
+    const unit =
+      this.editor.configObj.curConfig.baseUnit !== "px"
+        ? this.editor.configObj.curConfig.baseUnit
+        : null;
+
+    const isNode = currentMode === "pathedit"; // elem ? (elem.id && elem.id.startsWith('pathpointgrip')) : false;
+    const menuItems = document.getElementById("se-cmenu_canvas");
+    $(
+      "#selected_panel, #multiselected_panel, #g_panel, #rect_panel, #circle_panel," +
+      "#ellipse_panel, #line_panel, #text_panel, #image_panel, #container_panel," +
+      " #use_panel, #a_panel"
+    ).hide();
+    if (!isNullish(elem)) {
+      const elname = elem.nodeName;
+      // If this is a link with no transform and one child, pretend
+      // its child is selected
+      // if (elname === 'a') { // && !$(elem).attr('transform')) {
+      //   elem = elem.firstChild;
+      // }
+
+      const angle = this.editor.svgCanvas.getRotationAngle(elem);
+      $("#angle").val(angle);
+
+      const blurval = this.editor.svgCanvas.getBlur(elem) * 10;
+      $id("blur").value = blurval;
+
+      if (
+        this.editor.svgCanvas.addedNew &&
+        elname === "image" &&
+        this.editor.svgCanvas.getMode() === "image" &&
+        !this.editor.svgCanvas.getHref(elem).startsWith("data:")
+      ) {
+        /* await */ this.promptImgURL({ cancelDeletes: true });
+      }
+
+      if (!isNode && currentMode !== "pathedit") {
+        $("#selected_panel").show();
+        // Elements in this array already have coord fields
+        if (["line", "circle", "ellipse"].includes(elname)) {
+          $("#xy_panel").hide();
+        } else {
+          let x, y;
+
+          // Get BBox vals for g, polyline and path
+          if (["g", "polyline", "path"].includes(elname)) {
+            const bb = this.editor.svgCanvas.getStrokedBBox([elem]);
+            if (bb) {
+              ({ x, y } = bb);
+            }
+          } else {
+            x = elem.getAttribute("x");
+            y = elem.getAttribute("y");
+          }
+
+          if (unit) {
+            x = convertUnit(x);
+            y = convertUnit(y);
+          }
+
+          $("#selected_x").val(x || 0);
+          $("#selected_y").val(y || 0);
+          $("#xy_panel").show();
+        }
+
+        // Elements in this array cannot be converted to a path
+        $id("tool_topath").style.display = [
+          "image",
+          "text",
+          "path",
+          "g",
+          "use"
+        ].includes(elname)
+          ? "none"
+          : "block";
+        $id("tool_reorient").style.display =
+          elname === "path" ? "block" : "none";
+        $id("tool_reorient").disabled = angle === 0;
+      } else {
+        const point = this.path.getNodePoint();
+        $("#tool_add_subpath").pressed = false;
+        $("#tool_node_delete").toggleClass(
+          "disabled",
+          !this.path.canDeleteNodes
+        );
+
+        // Show open/close button based on selected point
+        // setIcon('#tool_openclose_path', path.closed_subpath ? 'open_path' : 'close_path');
+
+        if (point) {
+          const segType = $("#seg_type");
+          if (unit) {
+            point.x = convertUnit(point.x);
+            point.y = convertUnit(point.y);
+          }
+          $("#path_node_x").val(point.x);
+          $("#path_node_y").val(point.y);
+          if (point.type) {
+            segType.val(point.type).removeAttr("disabled");
+          } else {
+            segType.val(4).attr("disabled", "disabled");
+          }
+        }
+        return;
+      }
+
+      // update contextual tools here
+      const panels = {
+        g: [],
+        a: [],
+        rect: ["rx", "width", "height"],
+        image: ["width", "height"],
+        circle: ["cx", "cy", "r"],
+        ellipse: ["cx", "cy", "rx", "ry"],
+        line: ["x1", "y1", "x2", "y2"],
+        text: [],
+        use: []
+      };
+
+      const { tagName } = elem;
+
+      // if ($(elem).data('gsvg')) {
+      //   $('#g_panel').show();
+      // }
+
+      let linkHref = null;
+      if (tagName === "a") {
+        linkHref = this.editor.svgCanvas.getHref(elem);
+        $("#g_panel").show();
+      }
+
+      if (elem.parentNode.tagName === "a" && !$(elem).siblings().length) {
+        $("#a_panel").show();
+        linkHref = this.editor.svgCanvas.getHref(elem.parentNode);
+      }
+
+      // Hide/show the make_link buttons
+      $("#tool_make_link, #tool_make_link_multi").toggle(!linkHref);
+
+      if (linkHref) {
+        $("#link_url").val(linkHref);
+      }
+
+      if (panels[tagName]) {
+        const curPanel = panels[tagName];
+
+        $("#" + tagName + "_panel").show();
+
+        curPanel.forEach(item => {
+          let attrVal = elem.getAttribute(item);
+          if (this.editor.configObj.curConfig.baseUnit !== "px" && elem[item]) {
+            const bv = elem[item].baseVal.value;
+            attrVal = convertUnit(bv);
+          }
+          $id(`${tagName}_${item}`).value = attrVal || 0;
+        });
+
+        if (tagName === "text") {
+          $("#text_panel").css("display", "inline-block");
+          $("#tool_font_size").css("display", "inline");
+          $id("tool_italic").pressed = this.editor.svgCanvas.getItalic();
+          $id("tool_bold").pressed = this.editor.svgCanvas.getBold();
+          $("#tool_font_family").val(elem.getAttribute("font-family"));
+          $("#font_size").val(elem.getAttribute("font-size"));
+          $("#text").val(elem.textContent);
+          const textAnchorStart = $id("tool_text_anchor_start");
+          const textAnchorMiddle = $id("tool_text_anchor_middle");
+          const textAnchorEnd = $id("tool_text_anchor_end");
+          switch (elem.getAttribute("text-anchor")) {
+            case "start":
+              textAnchorStart.pressed = true;
+              textAnchorMiddle.pressed = false;
+              textAnchorEnd.pressed = false;
+              break;
+            case "middle":
+              textAnchorStart.pressed = false;
+              textAnchorMiddle.pressed = true;
+              textAnchorEnd.pressed = false;
+              break;
+            case "end":
+              textAnchorStart.pressed = false;
+              textAnchorMiddle.pressed = false;
+              textAnchorEnd.pressed = true;
+              break;
+          }
+          if (this.editor.svgCanvas.addedNew) {
+            // Timeout needed for IE9
+            setTimeout(() => {
+              $("#text")
+                .focus()
+                .select();
+            }, 100);
+          }
+          // text
+        } else if (
+          tagName === "image" &&
+          this.editor.svgCanvas.getMode() === "image"
+        ) {
+          this.editor.svgCanvas.setImageURL(
+            this.editor.svgCanvas.getHref(elem)
+          );
+          // image
+        } else if (tagName === "g" || tagName === "use") {
+          $("#container_panel").show();
+          const title = this.editor.svgCanvas.getTitle();
+          const label = $("#g_title")[0];
+          label.value = title;
+          setInputWidth(label);
+          $("#g_title").prop("disabled", tagName === "use");
+        }
+      }
+      menuItems.setAttribute(
+        (tagName === "g" ? "en" : "dis") + "ablemenuitems",
+        "#ungroup"
+      );
+      menuItems.setAttribute(
+        (tagName === "g" || !this.multiselected ? "dis" : "en") +
+        "ablemenuitems",
+        "#group"
+      );
+
+      // if (!isNullish(elem))
+    } else if (this.multiselected) {
+      $("#multiselected_panel").show();
+      menuItems.setAttribute("enablemenuitems", "#group");
+      menuItems.setAttribute("disablemenuitems", "#ungroup");
+    } else {
+      menuItems.setAttribute(
+        "disablemenuitems",
+        "#delete,#cut,#copy,#group,#ungroup,#move_front,#move_up,#move_down,#move_back"
+      );
+    }
+
+    // update history buttons
+    $id("tool_undo").disabled =
+      this.editor.svgCanvas.undoMgr.getUndoStackSize() === 0;
+    $id("tool_redo").disabled =
+      this.editor.svgCanvas.undoMgr.getRedoStackSize() === 0;
+
+    this.editor.svgCanvas.addedNew = false;
+
+    if ((elem && !isNode) || this.multiselected) {
+      // update the selected elements' layer
+      $("#selLayerNames")
+        .removeAttr("disabled")
+        .val(currentLayerName);
+
+      // Enable regular menu options
+      const canCMenu = document.getElementById("se-cmenu_canvas");
+      canCMenu.setAttribute(
+        "enablemenuitems",
+        "#delete,#cut,#copy,#move_front,#move_up,#move_down,#move_back"
+      );
+    } else {
+      $("#selLayerNames").attr("disabled", "disabled");
+    }
+  }
+  /**
+   * @param {Event} [e] Not used.
+   * @param {boolean} forSaving
+   * @returns {void}
+   */
+  showSourceEditor(e, forSaving) {
+    const $editorDialog = document.getElementById("se-svg-editor-dialog");
+    if ($editorDialog.getAttribute("dialog") === "open") return;
+    const origSource = this.editor.svgCanvas.getSvgString();
+    $editorDialog.setAttribute("dialog", "open");
+    $editorDialog.setAttribute("value", origSource);
+    $editorDialog.setAttribute("copysec", Boolean(forSaving));
+    $editorDialog.setAttribute("applysec", !forSaving);
+  }
+  /**
+   *
+   * @returns {void}
+   */
+  clickWireframe() {
+    $id("tool_wireframe").pressed = !$id("tool_wireframe").pressed;
+    this.editor.workarea.classList.toggle("wireframe");
+
+    const wfRules = $("#wireframe_rules");
+    if (!wfRules.length) {
+      /* wfRules = */ $('<style id="wireframe_rules"></style>').appendTo(
+      "head"
+    );
+    } else {
+      wfRules.empty();
+    }
+    this.editor.updateWireFrame();
+  }
+  /**
+   *
+   * @returns {void}
+   */
+  clickUndo() {
+    const { undoMgr } = this.editor.svgCanvas;
+    if (undoMgr.getUndoStackSize() > 0) {
+      undoMgr.undo();
+      this.editor.layersPanel.populateLayers();
+    }
+  }
+
+  /**
+   *
+   * @returns {void}
+   */
+  clickRedo() {
+    const { undoMgr } = this.editor.svgCanvas;
+    if (undoMgr.getRedoStackSize() > 0) {
+      undoMgr.redo();
+      this.editor.layersPanel.populateLayers();
+    }
+  }
+  /**
+   * @type {module}
+   */
+  changeRectRadius(e) {
+    this.editor.svgCanvas.setRectRadius(e.target.value);
+  }
+
+  /**
+   * @type {module}
+   */
+  changeFontSize(e) {
+    this.editor.svgCanvas.setFontSize(e.target.value);
+  }
+
+  /**
+   * @type {module}
+   */
+  changeRotationAngle(e) {
+    this.editor.svgCanvas.setRotationAngle(e.target.value);
+    $("#tool_reorient").toggleClass(
+      "disabled",
+      Number.parseInt(e.target.value) === 0
+    );
+  }
+
+  /**
+   * @param {PlainObject} e
+   * @returns {void}
+   */
+  changeBlur(e) {
+    this.editor.svgCanvas.setBlur(e.target.value / 10, true);
+  }
+  /**
+   *
+   * @returns {void}
+   */
+  clickGroup() {
+    // group
+    if (this.editor.multiselected) {
+      this.editor.svgCanvas.groupSelectedElements();
+      // ungroup
+    } else if (this.editor.selectedElement) {
+      this.editor.svgCanvas.ungroupSelectedElement();
+    }
+  }
+
+  /**
+   *
+   * @returns {void}
+   */
+  clickClone() {
+    this.editor.svgCanvas.cloneSelectedElements(20, 20);
+  }
+
+  /**
+   * @param {PlainObject} evt
+   * @returns {void}
+   */
+  clickAlignEle(evt) {
+    this.editor.svgCanvas.alignSelectedElements(evt.detail.value, "page");
+  }
+
+  /**
+   * @param {string} pos indicate the alignment relative to top, bottom, middle etc..
+   * @returns {void}
+   */
+  clickAlign(pos) {
+    let value = $("#tool_align_relative").val();
+    if (value === "") {
+      value = "selected";
+    }
+    this.editor.svgCanvas.alignSelectedElements(pos, value);
+  }
+  /**
+   *
+   * @type {module}
+   */
+  attrChanger(e) {
+    const attr = e.target.getAttribute("data-attr");
+    let val = e.target.value;
+    const valid = isValidUnit(attr, val, this.editor.selectedElement);
+
+    if (!valid) {
+      e.target.value = this.editor.selectedElement().getAttribute(attr);
+      // eslint-disable-next-line no-alert
+      alert(this.uiStrings.notification.invalidAttrValGiven);
+      return false;
+    }
+
+    if (attr !== "id" && attr !== "class") {
+      if (isNaN(val)) {
+        val = this.editor.svgCanvas.convertToNum(attr, val);
+      } else if (this.editor.configObj.curConfig.baseUnit !== "px") {
+        // Convert unitless value to one with given unit
+
+        const unitData = getTypeMap();
+
+        if (
+          this.editor.selectedElement[attr] ||
+          this.editor.svgCanvas.getMode() === "pathedit" ||
+          attr === "x" ||
+          attr === "y"
+        ) {
+          val *= unitData[this.editor.configObj.curConfig.baseUnit];
+        }
+      }
+    }
+
+    // if the user is changing the id, then de-select the element first
+    // change the ID, then re-select it with the new ID
+    if (attr === "id") {
+      const elem = this.editor.selectedElement;
+      this.editor.svgCanvas.clearSelection();
+      elem.id = val;
+      this.editor.svgCanvas.addToSelection([elem], true);
+    } else {
+      this.editor.svgCanvas.changeSelectedAttribute(attr, val);
+    }
+    return true;
+  }
+  /**
+   *
+   * @returns {void}
+   */
+  convertToPath() {
+    if (!isNullish(this.editor.selectedElement)) {
+      this.editor.svgCanvas.convertToPath();
+    }
+  }
+  /**
+   *
+   * @returns {void}
+   */
+  reorientPath() {
+    if (!isNullish(this.editor.selectedElement)) {
+      this.path.reorient();
+    }
+  }
+  /**
+   *
+   * @returns {void} Resolves to `undefined`
+   */
+  makeHyperlink() {
+    if (!isNullish(this.editor.selectedElement) || this.multiselected) {
+      // eslint-disable-next-line no-alert
+      const url = prompt(
+        this.uiStrings.notification.enterNewLinkURL,
+        "http://"
+      );
+      if (url) {
+        this.editor.svgCanvas.makeHyperlink(url);
+      }
+    }
+  }
+  /**
+   *
+   * @returns {void}
+   */
+  linkControlPoints() {
+    const linked = $id("tool_node_link").pressed;
+    $id("tool_node_link").pressed = !linked;
+    this.path.linkControlPoints(linked);
+  }
+
+  /**
+   *
+   * @returns {void}
+   */
+  clonePathNode() {
+    if (this.path.getNodePoint()) {
+      this.path.clonePathNode();
+    }
+  }
+
+  /**
+   *
+   * @returns {void}
+   */
+  deletePathNode() {
+    if (this.path.getNodePoint()) {
+      this.path.deletePathNode();
+    }
+  }
+
+  /**
+   *
+   * @returns {void}
+   */
+  addSubPath() {
+    const button = $("#tool_add_subpath");
+    const sp = !button.hasClass("pressed");
+    button.pressed = sp;
+    // button.toggleClass('push_button_pressed tool_button');
+    this.path.addSubPath(sp);
+  }
+
+  /**
+   *
+   * @returns {void}
+   */
+  opencloseSubPath() {
+    this.path.opencloseSubPath();
+  }
+  /**
+   * Delete is a contextual tool that only appears in the ribbon if
+   * an element has been selected.
+   * @returns {void}
+   */
+  deleteSelected() {
+    if (!isNullish(this.editor.selectedElement) || this.multiselected) {
+      this.editor.svgCanvas.deleteSelectedElements();
+    }
+  }
+  /**
+   *
+   * @returns {void}
+   */
+  moveToTopSelected() {
+    if (!isNullish(this.editor.selectedElement)) {
+      this.editor.svgCanvas.moveToTopSelectedElement();
+    }
+  }
+
+  /**
+   *
+   * @returns {void}
+   */
+  moveToBottomSelected() {
+    if (!isNullish(this.editor.selectedElement)) {
+      this.editor.svgCanvas.moveToBottomSelectedElement();
+    }
+  }
+  /**
+   *
+   * @returns {false}
+   */
+  clickBold() {
+    this.editor.svgCanvas.setBold(!this.editor.svgCanvas.getBold());
+    this.updateContextPanel();
+    return false;
+  }
+
+  /**
+   *
+   * @returns {false}
+   */
+  clickItalic() {
+    this.editor.svgCanvas.setItalic(!this.editor.svgCanvas.getItalic());
+    this.updateContextPanel();
+    return false;
+  }
+
+  /**
+   *
+   * @param {string} value "start","end" or "middle"
+   * @returns {false}
+   */
+  clickTextAnchor(value) {
+    this.editor.svgCanvas.setTextAnchor(value);
+    this.updateContextPanel();
+    return false;
+  }
+
+  /**
+   * @type {module}
+   */
+  init() {
+    // add Top panel
+    const template = document.createElement("template");
+    template.innerHTML = `
+       <div id="tools_top">
+       <div id="editor_panel">
+         <div class="tool_sep"></div>
+         <se-button id="tool_source" title="Edit Source" shortcut="U" src="./images/source.svg"></se-button>
+         <se-button id="tool_wireframe" title="Wireframe Mode" shortcut="F" src="./images/wireframe.svg"></se-button>
+         <se-button id="view_grid" title="Show grid" src="./images/grid.svg"></se-button>
+       </div> <!-- editor_panel -->
+       <div id="history_panel">
+         <div class="tool_sep"></div>
+         <se-button id="tool_undo" title="Undo" shortcut="Z" src="./images/undo.svg" disabled></se-button>
+         <se-button id="tool_redo" title="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="Duplicate Element" shortcut="D" src="./images/clone.svg"></se-button>
+           <se-button id="tool_delete" title="Delete Element" shortcut="Backspace" src="./images/delete.svg">
+           </se-button>
+         </div>
+         <div class="toolset">
+           <div class="tool_sep"></div>
+           <se-button id="tool_move_top" title="Bring to Front" shortcut="Ctrl+Shift+]" src="./images/move_top.svg">
+           </se-button>
+           <se-button id="tool_move_bottom" title="Send to Back" shortcut="Ctrl+Shift+[" src="./images/move_bottom.svg">
+           </se-button>
+         </div>
+         <div class="toolset">
+           <se-button id="tool_topath" title="Convert to Path" src="./images/to_path.svg"></se-button>
+           <se-button id="tool_reorient" title="Reorient path" src="./images/reorient.svg"></se-button>
+           <se-button id="tool_make_link" title="Make (hyper)link" src="./images/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="Identify the element"></se-input>
+         </div>
+         <div class="toolset">
+           <se-input id="elem_class" data-attr="class" size="10" label="class" title="Element class"></se-input>
+         </div>
+         <se-spin-input size="3" id="angle" min=-180 max=180 step=5 src="./images/angle.svg"
+           title="Change rotation angle"></se-spin-input>
+         <se-spin-input size="2" id="blur" min=0 max=100 step=5 src="./images/blur.svg"
+           title="Change gaussian blur value"></se-spin-input>
+         <se-list id="tool_position" title="Align Element to Page" label="" width="22px" height="24px">
+           <se-list-item id="tool_posleft" value="l">
+             <img title="align left" src="./images/align_left.svg" height="22px">
+           </se-list-item>
+           <se-list-item id="tool_poscenter" value="c">
+             <img title="align center" src="./images/align_center.svg" height="22px">
+           </se-list-item>
+           <se-list-item id="tool_posright" value="r">
+             <img title="align right" src="./images/align_right.svg" height="22px">
+           </se-list-item>
+           <se-list-item id="tool_postop" value="t">
+             <img title="align top" src="./images/align_top.svg" height="22px">
+           </se-list-item>
+           <se-list-item id="tool_posmiddle" value="m">
+             <img title="align middle" src="./images/align_middle.svg" height="22px">
+           </se-list-item>
+           <se-list-item id="tool_posbottom" value="b">
+             <img title="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="Change X coordinate">
+           </se-spin-input>
+           <se-spin-input id="selected_y" data-attr="y" size="4" type="text" label="y" title="Change Y coordinate">
+           </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="Clone Elements" shortcut="C" src="./images/clone.svg"></se-button>
+         <se-button id="tool_delete_multi" title="Delete Selected Elements" shortcut="Delete/Backspace"
+           src="./images/delete.svg"></se-button>
+         <div class="tool_sep"></div>
+         <se-button id="tool_group_elements" title="Group Elements" shortcut="G" src="./images/group_elements.svg">
+         </se-button>
+         <se-button id="tool_make_link_multi" title="Make (hyper)link" src="./images/globe_link.svg"></se-button>
+         <se-button id="tool_align_left" title="Align Left" src="./images/align_left.svg"></se-button>
+         <se-button id="tool_align_center" title="Align Center" src="./images/align_center.svg"></se-button>
+         <se-button id="tool_align_right" title="Align Right" src="./images/align_right.svg"></se-button>
+         <se-button id="tool_align_top" title="Align Top" src="./images/align_top.svg"></se-button>
+         <se-button id="tool_align_middle" title="Align Middle" src="./images/align_middle.svg"></se-button>
+         <se-button id="tool_align_bottom" title="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">selected objects</se-list-item>
+           <se-list-item id="largest_object" value="largest">largest object</se-list-item>
+           <se-list-item id="smallest_object" value="smallest">smallest object</se-list-item>
+           <se-list-item id="page" value="page">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="Change rectangle width">
+           </se-spin-input>
+           <se-spin-input id="rect_height" data-attr="height" size="4" label="h" title="Change rectangle height">
+           </se-spin-input>
+         </div>
+         <se-spin-input id="rect_rx" min=0 max=1000 step=1 size="3" title="Change Rectangle 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="Change image width">
+           </se-spin-input>
+           <se-spin-input id="image_height" data-attr="height" size="4" type="text" label="h"
+             title="Change image height"></se-spin-input>
+         </div>
+         <div class="toolset">
+           <label id="tool_image_url">url:
+             <input id="image_url" type="text" title="Change 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="NOTE: This image cannot be embedded. It will depend on this path to be displayed"></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="Change ellipse's cx coordinate" label="cx">
+           </se-spin-input>
+           <se-spin-input id="ellipse_cy" data-attr="cy" size="4" title="Change ellipse's cy coordinate" label="cy">
+           </se-spin-input>
+         </div>
+         <div class="toolset">
+           <se-spin-input id="ellipse_rx" data-attr="rx" size="4" title="Change ellipse's x radius" label="rx">
+           </se-spin-input>
+           <se-spin-input id="ellipse_ry" data-attr="ry" size="4" title="Change ellipse's y radius" 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="Change line's starting x coordinate" label="x1">
+           </se-spin-input>
+           <se-spin-input id="line_y1" data-attr="y1" size="4" title="Change line's starting y coordinate" label="y1">
+           </se-spin-input>
+           <se-spin-input id="line_x2" data-attr="x2" size="4" title="Change line's ending x coordinate" label="x2">
+           </se-spin-input>
+           <se-spin-input id="line_y2" data-attr="y2" size="4" title="Change line's ending y coordinate" label="y2">
+           </se-spin-input>
+         </div>
+       </div> <!-- line_panel -->
+       <div id="text_panel">
+         <div class="toolset">
+           <se-button id="tool_bold" title="Bold Text [B]" src="./images/bold.svg" shortcut="B"></se-button>
+           <se-button id="tool_italic" title="Italic Text [I]" src="./images/italic.svg" shortcut="I"></se-button>
+           <se-button id="tool_text_anchor_start" title="Align the text from start" src="./images/anchor_start.svg">
+           </se-button>
+           <se-button id="tool_text_anchor_middle" title="Align the text from middle" src="./images/anchor_middle.svg">
+           </se-button>
+           <se-button id="tool_text_anchor_end" title="Align the text from end" src="./images/anchor_end.svg">
+           </se-button>
+         </div>
+         <se-list id="tool_font_family" label="Font:">
+           <se-list-item value="Serif" style="font-family:serif;"> Serif</se-list-item>
+           <se-list-item value="Sans-serif" style="font-family:sans-serif;"> Sans-serif</se-list-item>
+           <se-list-item value="Cursive" style="font-family:cursive;"> Cursive</se-list-item>
+           <se-list-item value="Fantasy" style="font-family:fantasy;"> Fantasy</se-list-item>
+           <se-list-item value="Monospace" style="font-family:monospace;"> Monospace</se-list-item>
+           <se-list-item value="Courier" style="font-family:courier;"> Courier</se-list-item>
+           <se-list-item value="Helvetica" style="font-family:helvetica;">Helvetica</se-list-item>
+           <se-list-item value="Times" style="font-family:times;">Times</se-list-item>
+         </se-list>
+         <se-spin-input size="2" id="font_size" min=1 max=1000 step=1 title="Change Font Size"
+           src="./images/fontsize.svg"></se-spin-input>
+         <!-- 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="Group identification 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="Break link to reference element (make unique)"
+           src="./images/unlink_use.svg">
+         </se-button>
+       </div> <!-- use_panel -->
+       <div id="g_panel">
+         <se-button id="tool_ungroup" title="Ungroup Elements [G]" src="./images/ungroup.svg">
+         </se-button>
+       </div> <!-- g_panel -->
+       <!-- For anchor elements -->
+       <div id="a_panel">
+         <label id="tool_link_url" title="Set link URL (leave empty to remove)">
+           <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="Link Control Points" 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="Change node's x coordinate" label="x:">
+         </se-spin-input>
+         <se-spin-input id="path_node_y" data-attr="y" size="4" title="Change node's y coordinate" label="y:">
+         </se-spin-input>
+         <select id="seg_type" title="Change Segment type">
+           <option id="straight_segments" selected="selected" value="4">Straight</option>
+           <option id="curve_segments" value="6">Curve</option>
+         </select>
+         <se-button id="tool_node_clone" title="Clone Node" src="./images/tool_node_clone.svg"></se-button>
+         <se-button id="tool_node_delete" title="Delete Node" src="./images/tool_node_delete.svg"></se-button>
+         <se-button id="tool_openclose_path" title="Open/close sub-path" src="./images/tool_openclose_path.svg">
+         </se-button>
+         <se-button id="tool_add_subpath" title="Add sub-path" src="./images/tool_add_subpath.svg"></se-button>
+       </div> <!-- path_node_panel -->
+       <div id="cur_context_panel"></div>
+     </div> <!-- tools_top -->
+       `;
+    this.editor.$svgEditor.append(template.content.cloneNode(true));
+    // svg editor source dialoag added to DOM
+    const newSeEditorDialog = document.createElement(
+      "se-svg-source-editor-dialog"
+    );
+    newSeEditorDialog.setAttribute("id", "se-svg-editor-dialog");
+    document.body.append(newSeEditorDialog);
+    // register action to top panel buttons
+    $id("tool_source").addEventListener(
+      "click",
+      this.showSourceEditor.bind(this)
+    );
+    $id("tool_wireframe").addEventListener(
+      "click",
+      this.clickWireframe.bind(this)
+    );
+    $id("tool_undo").addEventListener("click", this.clickUndo.bind(this));
+    $id("tool_redo").addEventListener("click", this.clickRedo.bind(this));
+    $id("tool_clone").addEventListener("click", this.clickClone.bind(this));
+    $id("tool_clone_multi").addEventListener(
+      "click",
+      this.clickClone.bind(this)
+    );
+    $id("tool_delete").addEventListener(
+      "click",
+      this.deleteSelected.bind(this)
+    );
+    $id("tool_delete_multi").addEventListener(
+      "click",
+      this.deleteSelected.bind(this)
+    );
+    $id("tool_move_top").addEventListener(
+      "click",
+      this.moveToTopSelected.bind(this)
+    );
+    $id("tool_move_bottom").addEventListener(
+      "click",
+      this.moveToBottomSelected.bind(this)
+    );
+    $id("tool_topath").addEventListener("click", this.convertToPath.bind(this));
+    $id("tool_make_link").addEventListener(
+      "click",
+      this.makeHyperlink.bind(this)
+    );
+    $id("tool_make_link_multi").addEventListener(
+      "click",
+      this.makeHyperlink.bind(this)
+    );
+    $id("tool_reorient").addEventListener(
+      "click",
+      this.reorientPath.bind(this)
+    );
+    $id("tool_group_elements").addEventListener(
+      "click",
+      this.clickGroup.bind(this)
+    );
+    $id("tool_position").addEventListener("change", evt =>
+      this.clickAlignEle.bind(this)(evt)
+    );
+    $id("tool_align_left").addEventListener("click", () =>
+      this.clickAlign.bind(this)("left")
+    );
+    $id("tool_align_right").addEventListener("click", () =>
+      this.clickAlign.bind(this)("right")
+    );
+    $id("tool_align_center").addEventListener("click", () =>
+      this.clickAlign.bind(this)("center")
+    );
+    $id("tool_align_top").addEventListener("click", () =>
+      this.clickAlign.bind(this)("top")
+    );
+    $id("tool_align_bottom").addEventListener("click", () =>
+      this.clickAlign.bind(this)("bottom")
+    );
+    $id("tool_align_middle").addEventListener("click", () =>
+      this.clickAlign.bind(this)("middle")
+    );
+    $id("tool_node_clone").addEventListener(
+      "click",
+      this.clonePathNode.bind(this)
+    );
+    $id("tool_node_delete").addEventListener(
+      "click",
+      this.deletePathNode.bind(this)
+    );
+    $id("tool_openclose_path").addEventListener(
+      "click",
+      this.opencloseSubPath.bind(this)
+    );
+    $id("tool_add_subpath").addEventListener(
+      "click",
+      this.addSubPath.bind(this)
+    );
+    $id("tool_node_link").addEventListener(
+      "click",
+      this.linkControlPoints.bind(this)
+    );
+    $id("angle").addEventListener(
+      "change",
+      this.changeRotationAngle.bind(this)
+    );
+    $id("blur").addEventListener("change", this.changeBlur.bind(this));
+    $id("rect_rx").addEventListener("change", this.changeRectRadius.bind(this));
+    $id("font_size").addEventListener("change", this.changeFontSize.bind(this));
+    $id("tool_ungroup").addEventListener("click", this.clickGroup.bind(this));
+    $id("tool_bold").addEventListener("click", this.clickBold.bind(this));
+    $id("tool_italic").addEventListener("click", this.clickItalic.bind(this));
+    $id("tool_text_anchor_start").addEventListener("click", () =>
+      this.clickTextAnchor.bind(this)("start")
+    );
+    $id("tool_text_anchor_middle").addEventListener("click", () =>
+      this.clickTextAnchor.bind(this)("middle")
+    );
+    $id("tool_text_anchor_end").addEventListener("click", () =>
+      this.clickTextAnchor.bind(this)("end")
+    );
+    $id("tool_unlink_use").addEventListener(
+      "click",
+      this.clickGroup.bind(this)
+    );
+    $id("change_image_url").addEventListener(
+      "click",
+      this.promptImgURL.bind(this)
+    );
+    // all top panel attributes
+    [
+      "elem_id",
+      "elem_class",
+      "circle_cx",
+      "circle_cy",
+      "circle_r",
+      "ellipse_cx",
+      "ellipse_cy",
+      "ellipse_rx",
+      "ellipse_ry",
+      "selected_x",
+      "selected_y",
+      "rect_width",
+      "rect_height",
+      "line_x1",
+      "line_x2",
+      "line_y2",
+      "image_width",
+      "image_height",
+      "path_node_x",
+      "path_node_y"
+    ].forEach(attrId =>
+      $id(attrId).addEventListener("change", this.attrChanger.bind(this))
+    );
+  }
+}
+
+export default TopPanel;
diff --git a/src/editor/panels/TopPanelHandlers.js b/src/editor/panels/TopPanelHandlers.js
deleted file mode 100644
index 7c936bf8..00000000
--- a/src/editor/panels/TopPanelHandlers.js
+++ /dev/null
@@ -1,645 +0,0 @@
-/* globals $ */
-import SvgCanvas from '../../svgcanvas/svgcanvas.js';
-import {isValidUnit, getTypeMap, convertUnit} from '../../common/units.js';
-
-const {$id, isNullish} = SvgCanvas;
-
-/*
- * register actions for left panel
- */
-/**
- *
- */
-class TopPanelHandlers {
-  /**
-   * @param {PlainObject} editor svgedit handler
-  */
-  constructor (editor) {
-    this.editor = editor;
-    this.svgCanvas = editor.svgCanvas;
-    this.uiStrings = editor.uiStrings;
-  }
-  /**
-   * @type {module}
-   */
-  get selectedElement () {
-    return this.editor.selectedElement;
-  }
-  /**
-   * @type {module}
-   */
-  get multiselected () {
-    return this.editor.multiselected;
-  }
-  /**
-   * @type {module}
-   */
-  get path () {
-    return this.svgCanvas.pathActions;
-  }
-  /**
-   * @param {PlainObject} [opts={}]
-   * @param {boolean} [opts.cancelDeletes=false]
-   * @returns {void} Resolves to `undefined`
-   */
-  promptImgURL ({cancelDeletes = false} = {}) {
-    let curhref = this.svgCanvas.getHref(this.selectedElement);
-    curhref = curhref.startsWith('data:') ? '' : curhref;
-    // eslint-disable-next-line no-alert
-    const url = prompt(this.editor.uiStrings.notification.enterNewImgURL, curhref);
-    if (url) {
-      this.editor.setImageURL(url);
-    } else if (cancelDeletes) {
-      this.svgCanvas.deleteSelectedElements();
-    }
-  }
-  /**
-  * Updates the context panel tools based on the selected element.
-  * @returns {void}
-  */
-  updateContextPanel () {
-    const setInputWidth = (elem) => {
-      const w = Math.min(Math.max(12 + elem.value.length * 6, 50), 300);
-      $(elem).width(w);
-    };
-
-    let elem = this.selectedElement;
-    // If element has just been deleted, consider it null
-    if (!isNullish(elem) && !elem.parentNode) { elem = null; }
-    const currentLayerName = this.svgCanvas.getCurrentDrawing().getCurrentLayerName();
-    const currentMode = this.svgCanvas.getMode();
-    const unit = this.editor.configObj.curConfig.baseUnit !== 'px' ? this.editor.configObj.curConfig.baseUnit : null;
-
-    const isNode = currentMode === 'pathedit'; // elem ? (elem.id && elem.id.startsWith('pathpointgrip')) : false;
-    const menuItems = document.getElementById('se-cmenu_canvas');
-    $('#selected_panel, #multiselected_panel, #g_panel, #rect_panel, #circle_panel,' +
-  '#ellipse_panel, #line_panel, #text_panel, #image_panel, #container_panel,' +
-  ' #use_panel, #a_panel').hide();
-    if (!isNullish(elem)) {
-      const elname = elem.nodeName;
-      // If this is a link with no transform and one child, pretend
-      // its child is selected
-      // if (elname === 'a') { // && !$(elem).attr('transform')) {
-      //   elem = elem.firstChild;
-      // }
-
-      const angle = this.svgCanvas.getRotationAngle(elem);
-      $('#angle').val(angle);
-
-      const blurval = this.svgCanvas.getBlur(elem) * 10;
-      $id('blur').value = blurval;
-
-      if (this.svgCanvas.addedNew &&
-      elname === 'image' &&
-      this.svgCanvas.getMode() === 'image' &&
-      !this.svgCanvas.getHref(elem).startsWith('data:')) {
-      /* await */ this.promptImgURL({cancelDeletes: true});
-      }
-
-      if (!isNode && currentMode !== 'pathedit') {
-        $('#selected_panel').show();
-        // Elements in this array already have coord fields
-        if (['line', 'circle', 'ellipse'].includes(elname)) {
-          $('#xy_panel').hide();
-        } else {
-          let x, y;
-
-          // Get BBox vals for g, polyline and path
-          if (['g', 'polyline', 'path'].includes(elname)) {
-            const bb = this.svgCanvas.getStrokedBBox([elem]);
-            if (bb) {
-              ({x, y} = bb);
-            }
-          } else {
-            x = elem.getAttribute('x');
-            y = elem.getAttribute('y');
-          }
-
-          if (unit) {
-            x = convertUnit(x);
-            y = convertUnit(y);
-          }
-
-          $('#selected_x').val(x || 0);
-          $('#selected_y').val(y || 0);
-          $('#xy_panel').show();
-        }
-
-        // Elements in this array cannot be converted to a path
-        $id('tool_topath').style.display = ['image', 'text', 'path', 'g', 'use'].includes(elname) ? 'none' : 'block';
-        $id('tool_reorient').style.display = (elname === 'path') ? 'block' : 'none';
-        $id('tool_reorient').disabled = (angle === 0);
-      } else {
-        const point = this.path.getNodePoint();
-        $('#tool_add_subpath').pressed = false;
-        $('#tool_node_delete').toggleClass('disabled', !this.path.canDeleteNodes);
-
-        // Show open/close button based on selected point
-        // setIcon('#tool_openclose_path', path.closed_subpath ? 'open_path' : 'close_path');
-
-        if (point) {
-          const segType = $('#seg_type');
-          if (unit) {
-            point.x = convertUnit(point.x);
-            point.y = convertUnit(point.y);
-          }
-          $('#path_node_x').val(point.x);
-          $('#path_node_y').val(point.y);
-          if (point.type) {
-            segType.val(point.type).removeAttr('disabled');
-          } else {
-            segType.val(4).attr('disabled', 'disabled');
-          }
-        }
-        return;
-      }
-
-      // update contextual tools here
-      const panels = {
-        g: [],
-        a: [],
-        rect: ['rx', 'width', 'height'],
-        image: ['width', 'height'],
-        circle: ['cx', 'cy', 'r'],
-        ellipse: ['cx', 'cy', 'rx', 'ry'],
-        line: ['x1', 'y1', 'x2', 'y2'],
-        text: [],
-        use: []
-      };
-
-      const {tagName} = elem;
-
-      // if ($(elem).data('gsvg')) {
-      //   $('#g_panel').show();
-      // }
-
-      let linkHref = null;
-      if (tagName === 'a') {
-        linkHref = this.svgCanvas.getHref(elem);
-        $('#g_panel').show();
-      }
-
-      if (elem.parentNode.tagName === 'a' && !$(elem).siblings().length) {
-        $('#a_panel').show();
-        linkHref = this.svgCanvas.getHref(elem.parentNode);
-      }
-
-      // Hide/show the make_link buttons
-      $('#tool_make_link, #tool_make_link_multi').toggle(!linkHref);
-
-      if (linkHref) {
-        $('#link_url').val(linkHref);
-      }
-
-      if (panels[tagName]) {
-        const curPanel = panels[tagName];
-
-        $('#' + tagName + '_panel').show();
-
-        curPanel.forEach((item) => {
-          let attrVal = elem.getAttribute(item);
-          if (this.editor.configObj.curConfig.baseUnit !== 'px' && elem[item]) {
-            const bv = elem[item].baseVal.value;
-            attrVal = convertUnit(bv);
-          }
-          $id(`${tagName}_${item}`).value = attrVal || 0;
-        });
-
-        if (tagName === 'text') {
-          $('#text_panel').css('display', 'inline-block');
-          $('#tool_font_size').css('display', 'inline');
-          $id('tool_italic').pressed = this.svgCanvas.getItalic();
-          $id('tool_bold').pressed = this.svgCanvas.getBold();
-          $('#tool_font_family').val(elem.getAttribute('font-family'));
-          $('#font_size').val(elem.getAttribute('font-size'));
-          $('#text').val(elem.textContent);
-          const textAnchorStart = $id('tool_text_anchor_start');
-          const textAnchorMiddle = $id('tool_text_anchor_middle');
-          const textAnchorEnd = $id('tool_text_anchor_end');
-          switch (elem.getAttribute('text-anchor')) {
-          case 'start':
-            textAnchorStart.pressed = true;
-            textAnchorMiddle.pressed = false;
-            textAnchorEnd.pressed = false;
-            break;
-          case 'middle':
-            textAnchorStart.pressed = false;
-            textAnchorMiddle.pressed = true;
-            textAnchorEnd.pressed = false;
-            break;
-          case 'end':
-            textAnchorStart.pressed = false;
-            textAnchorMiddle.pressed = false;
-            textAnchorEnd.pressed = true;
-            break;
-          }
-          if (this.svgCanvas.addedNew) {
-            // Timeout needed for IE9
-            setTimeout(() => {
-              $('#text').focus().select();
-            }, 100);
-          }
-        // text
-        } else if (tagName === 'image' && this.svgCanvas.getMode() === 'image') {
-          this.svgCanvas.setImageURL(this.svgCanvas.getHref(elem));
-        // image
-        } else if (tagName === 'g' || tagName === 'use') {
-          $('#container_panel').show();
-          const title = this.svgCanvas.getTitle();
-          const label = $('#g_title')[0];
-          label.value = title;
-          setInputWidth(label);
-          $('#g_title').prop('disabled', tagName === 'use');
-        }
-      }
-      menuItems.setAttribute((tagName === 'g' ? 'en' : 'dis') + 'ablemenuitems', '#ungroup');
-      menuItems.setAttribute(((tagName === 'g' || !this.multiselected) ? 'dis' : 'en') + 'ablemenuitems', '#group');
-
-    // if (!isNullish(elem))
-    } else if (this.multiselected) {
-      $('#multiselected_panel').show();
-      menuItems.setAttribute('enablemenuitems', '#group');
-      menuItems.setAttribute('disablemenuitems', '#ungroup');
-    } else {
-      menuItems.setAttribute('disablemenuitems', '#delete,#cut,#copy,#group,#ungroup,#move_front,#move_up,#move_down,#move_back');
-    }
-
-    // update history buttons
-    $id('tool_undo').disabled = (this.svgCanvas.undoMgr.getUndoStackSize() === 0);
-    $id('tool_redo').disabled = (this.svgCanvas.undoMgr.getRedoStackSize() === 0);
-
-    this.svgCanvas.addedNew = false;
-
-    if ((elem && !isNode) || this.multiselected) {
-      // update the selected elements' layer
-      $('#selLayerNames').removeAttr('disabled').val(currentLayerName);
-
-      // Enable regular menu options
-      const canCMenu = document.getElementById('se-cmenu_canvas');
-      canCMenu.setAttribute('enablemenuitems', '#delete,#cut,#copy,#move_front,#move_up,#move_down,#move_back');
-    } else {
-      $('#selLayerNames').attr('disabled', 'disabled');
-    }
-  }
-  /**
-  * @param {Event} [e] Not used.
-  * @param {boolean} forSaving
-  * @returns {void}
-  */
-  showSourceEditor (e, forSaving) {
-    const $editorDialog = document.getElementById('se-svg-editor-dialog');
-    if ($editorDialog.getAttribute('dialog') === 'open') return;
-    const origSource = this.svgCanvas.getSvgString();
-    $editorDialog.setAttribute('dialog', 'open');
-    $editorDialog.setAttribute('value', origSource);
-    $editorDialog.setAttribute('copysec', Boolean(forSaving));
-    $editorDialog.setAttribute('applysec', !forSaving);
-  }
-  /**
-  *
-  * @returns {void}
-  */
-  clickWireframe () {
-    $id('tool_wireframe').pressed = !$id('tool_wireframe').pressed;
-    this.editor.workarea.classList.toggle('wireframe');
-
-    const wfRules = $('#wireframe_rules');
-    if (!wfRules.length) {
-    /* wfRules = */ $('<style id="wireframe_rules"></style>').appendTo('head');
-    } else {
-      wfRules.empty();
-    }
-    this.editor.updateWireFrame();
-  }
-  /**
-  *
-  * @returns {void}
-  */
-  clickUndo () {
-    const {undoMgr} = this.editor.svgCanvas;
-    if (undoMgr.getUndoStackSize() > 0) {
-      undoMgr.undo();
-      this.editor.layersPanel.populateLayers();
-    }
-  }
-
-  /**
-  *
-  * @returns {void}
-  */
-  clickRedo () {
-    const {undoMgr} = this.editor.svgCanvas;
-    if (undoMgr.getRedoStackSize() > 0) {
-      undoMgr.redo();
-      this.editor.layersPanel.populateLayers();
-    }
-  }
-  /**
-  * @type {module}
-  */
-  changeRectRadius (e) {
-    this.svgCanvas.setRectRadius(e.target.value);
-  }
-
-  /**
-* @type {module}
-*/
-  changeFontSize (e) {
-    this.svgCanvas.setFontSize(e.target.value);
-  }
-
-  /**
-* @type {module}
-*/
-  changeRotationAngle (e) {
-    this.svgCanvas.setRotationAngle(e.target.value);
-    $('#tool_reorient').toggleClass('disabled', Number.parseInt(e.target.value) === 0);
-  }
-
-  /**
-* @param {PlainObject} e
-* @returns {void}
-*/
-  changeBlur (e) {
-    this.svgCanvas.setBlur(e.target.value / 10, true);
-  }
-  /**
-  *
-  * @returns {void}
-  */
-  clickGroup () {
-  // group
-    if (this.editor.multiselected) {
-      this.svgCanvas.groupSelectedElements();
-      // ungroup
-    } else if (this.editor.selectedElement) {
-      this.svgCanvas.ungroupSelectedElement();
-    }
-  }
-
-  /**
-*
-* @returns {void}
-*/
-  clickClone () {
-    this.svgCanvas.cloneSelectedElements(20, 20);
-  }
-
-  /**
-* @param {PlainObject} evt
-* @returns {void}
-*/
-  clickAlignEle (evt) {
-    this.svgCanvas.alignSelectedElements(evt.detail.value, 'page');
-  }
-
-  /**
-* @param {string} pos indicate the alignment relative to top, bottom, middle etc..
-* @returns {void}
-*/
-  clickAlign (pos) {
-    let value = $('#tool_align_relative').val();
-    if(value === ''){
-      value = 'selected';
-    }
-    this.svgCanvas.alignSelectedElements(pos, value);
-  }
-  /**
-*
-* @type {module}
-*/
-  attrChanger (e) {
-    const attr = e.target.getAttribute('data-attr');
-    let val = e.target.value;
-    const valid = isValidUnit(attr, val, this.selectedElement);
-
-    if (!valid) {
-      e.target.value = this.selectedElement().getAttribute(attr);
-      // eslint-disable-next-line no-alert
-      alert(this.uiStrings.notification.invalidAttrValGiven);
-      return false;
-    }
-
-    if (attr !== 'id' && attr !== 'class') {
-      if (isNaN(val)) {
-        val = this.svgCanvas.convertToNum(attr, val);
-      } else if (this.editor.configObj.curConfig.baseUnit !== 'px') {
-        // Convert unitless value to one with given unit
-
-        const unitData = getTypeMap();
-
-        if (this.selectedElement[attr] || this.svgCanvas.getMode() === 'pathedit' || attr === 'x' || attr === 'y') {
-          val *= unitData[this.editor.configObj.curConfig.baseUnit];
-        }
-      }
-    }
-
-    // if the user is changing the id, then de-select the element first
-    // change the ID, then re-select it with the new ID
-    if (attr === 'id') {
-      const elem = this.selectedElement;
-      this.svgCanvas.clearSelection();
-      elem.id = val;
-      this.svgCanvas.addToSelection([elem], true);
-    } else {
-      this.svgCanvas.changeSelectedAttribute(attr, val);
-    }
-    return true;
-  }
-  /**
-  *
-  * @returns {void}
-  */
-  convertToPath () {
-    if (!isNullish(this.selectedElement)) {
-      this.svgCanvas.convertToPath();
-    }
-  }
-  /**
-  *
-  * @returns {void}
-  */
-  reorientPath () {
-    if (!isNullish(this.selectedElement)) {
-      this.path.reorient();
-    }
-  }
-  /**
-  *
-  * @returns {void} Resolves to `undefined`
-  */
-  makeHyperlink () {
-    if (!isNullish(this.selectedElement) || this.multiselected) {
-      // eslint-disable-next-line no-alert
-      const url = prompt(this.uiStrings.notification.enterNewLinkURL, 'http://');
-      if (url) {
-        this.svgCanvas.makeHyperlink(url);
-      }
-    }
-  }
-  /**
-  *
-  * @returns {void}
-  */
-  linkControlPoints () {
-    const linked = $id('tool_node_link').pressed;
-    $id('tool_node_link').pressed = !linked;
-    this.path.linkControlPoints(linked);
-  }
-
-  /**
-*
-* @returns {void}
-*/
-  clonePathNode () {
-    if (this.path.getNodePoint()) {
-      this.path.clonePathNode();
-    }
-  }
-
-  /**
-*
-* @returns {void}
-*/
-  deletePathNode () {
-    if (this.path.getNodePoint()) {
-      this.path.deletePathNode();
-    }
-  }
-
-  /**
-*
-* @returns {void}
-*/
-  addSubPath () {
-    const button = $('#tool_add_subpath');
-    const sp = !button.hasClass('pressed');
-    button.pressed = sp;
-    // button.toggleClass('push_button_pressed tool_button');
-    this.path.addSubPath(sp);
-  }
-
-  /**
-*
-* @returns {void}
-*/
-  opencloseSubPath () {
-    this.path.opencloseSubPath();
-  }
-  /**
-  * Delete is a contextual tool that only appears in the ribbon if
-  * an element has been selected.
-  * @returns {void}
-  */
-  deleteSelected () {
-    if (!isNullish(this.selectedElement) || this.multiselected) {
-      this.svgCanvas.deleteSelectedElements();
-    }
-  }
-  /**
-  *
-  * @returns {void}
-  */
-  moveToTopSelected () {
-    if (!isNullish(this.selectedElement)) {
-      this.svgCanvas.moveToTopSelectedElement();
-    }
-  }
-
-  /**
-*
-* @returns {void}
-*/
-  moveToBottomSelected () {
-    if (!isNullish(this.selectedElement)) {
-      this.svgCanvas.moveToBottomSelectedElement();
-    }
-  }
-  /**
-  *
-  * @returns {false}
-  */
-  clickBold () {
-    this.svgCanvas.setBold(!this.svgCanvas.getBold());
-    this.updateContextPanel();
-    return false;
-  }
-
-  /**
-*
-* @returns {false}
-*/
-  clickItalic () {
-    this.svgCanvas.setItalic(!this.svgCanvas.getItalic());
-    this.updateContextPanel();
-    return false;
-  }
-
-  /**
- *
- * @param {string} value "start","end" or "middle"
- * @returns {false}
- */
-  clickTextAnchor (value) {
-    this.svgCanvas.setTextAnchor(value);
-    this.updateContextPanel();
-    return false;
-  }
-
-  /**
-   * @type {module}
-   */
-  init () {
-    // svg editor source dialoag added to DOM
-    const newSeEditorDialog = document.createElement('se-svg-source-editor-dialog');
-    newSeEditorDialog.setAttribute('id', 'se-svg-editor-dialog');
-    document.body.append(newSeEditorDialog);
-    // register action to top panel buttons
-    $id('tool_source').addEventListener('click', this.showSourceEditor.bind(this));
-    $id('tool_wireframe').addEventListener('click', this.clickWireframe.bind(this));
-    $id('tool_undo').addEventListener('click', this.clickUndo.bind(this));
-    $id('tool_redo').addEventListener('click', this.clickRedo.bind(this));
-    $id('tool_clone').addEventListener('click', this.clickClone.bind(this));
-    $id('tool_clone_multi').addEventListener('click', this.clickClone.bind(this));
-    $id('tool_delete').addEventListener('click', this.deleteSelected.bind(this));
-    $id('tool_delete_multi').addEventListener('click', this.deleteSelected.bind(this));
-    $id('tool_move_top').addEventListener('click', this.moveToTopSelected.bind(this));
-    $id('tool_move_bottom').addEventListener('click', this.moveToBottomSelected.bind(this));
-    $id('tool_topath').addEventListener('click', this.convertToPath.bind(this));
-    $id('tool_make_link').addEventListener('click', this.makeHyperlink.bind(this));
-    $id('tool_make_link_multi').addEventListener('click', this.makeHyperlink.bind(this));
-    $id('tool_reorient').addEventListener('click', this.reorientPath.bind(this));
-    $id('tool_group_elements').addEventListener('click', this.clickGroup.bind(this));
-    $id('tool_position').addEventListener('change', (evt) => this.clickAlignEle.bind(this)(evt));
-    $id('tool_align_left').addEventListener('click', () => this.clickAlign.bind(this)('left'));
-    $id('tool_align_right').addEventListener('click', () => this.clickAlign.bind(this)('right'));
-    $id('tool_align_center').addEventListener('click', () => this.clickAlign.bind(this)('center'));
-    $id('tool_align_top').addEventListener('click', () => this.clickAlign.bind(this)('top'));
-    $id('tool_align_bottom').addEventListener('click', () => this.clickAlign.bind(this)('bottom'));
-    $id('tool_align_middle').addEventListener('click', () => this.clickAlign.bind(this)('middle'));
-    $id('tool_node_clone').addEventListener('click', this.clonePathNode.bind(this));
-    $id('tool_node_delete').addEventListener('click', this.deletePathNode.bind(this));
-    $id('tool_openclose_path').addEventListener('click', this.opencloseSubPath.bind(this));
-    $id('tool_add_subpath').addEventListener('click', this.addSubPath.bind(this));
-    $id('tool_node_link').addEventListener('click', this.linkControlPoints.bind(this));
-    $id('angle').addEventListener('change', this.changeRotationAngle.bind(this));
-    $id('blur').addEventListener('change', this.changeBlur.bind(this));
-    $id('rect_rx').addEventListener('change', this.changeRectRadius.bind(this));
-    $id('font_size').addEventListener('change', this.changeFontSize.bind(this));
-    $id('tool_ungroup').addEventListener('click', this.clickGroup.bind(this));
-    $id('tool_bold').addEventListener('click', this.clickBold.bind(this));
-    $id('tool_italic').addEventListener('click', this.clickItalic.bind(this));
-    $id('tool_text_anchor_start').addEventListener('click', () => this.clickTextAnchor.bind(this)('start'));
-    $id('tool_text_anchor_middle').addEventListener('click', () => this.clickTextAnchor.bind(this)('middle'));
-    $id('tool_text_anchor_end').addEventListener('click', () => this.clickTextAnchor.bind(this)('end'));
-    $id('tool_unlink_use').addEventListener('click', this.clickGroup.bind(this));
-    $id('change_image_url').addEventListener('click', this.promptImgURL.bind(this));
-    // all top panel attributes
-    ['elem_id', 'elem_class', 'circle_cx', 'circle_cy', 'circle_r', 'ellipse_cx',
-      'ellipse_cy', 'ellipse_rx', 'ellipse_ry', 'selected_x', 'selected_y', 'rect_width',
-      'rect_height', 'line_x1', 'line_x2', 'line_y2', 'image_width', 'image_height', 'path_node_x',
-      'path_node_y'].forEach((attrId) => $id(attrId).addEventListener('change', this.attrChanger.bind(this)));
-  }
-}
-
-export default TopPanelHandlers;