allow to give a div other than the default one (with id=svg_editor)

package-lock.json

@@ -1,11 +1,11 @@
 {
   "name": "svgedit",
-  "version": "7.0.0-beta.1",
+  "version": "7.0.0-beta.2",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
-      "version": "7.0.0-beta.1",
+      "version": "7.0.0-beta.2",
       "license": "(MIT AND Apache-2.0 AND ISC AND LGPL-3.0-or-later AND X11)",
       "dependencies": {
         "@babel/polyfill": "7.12.1",

src/editor/ConfigObj.js

@@ -183,7 +183,6 @@ export default class ConfigObj {
       'ext-polystar',
       'ext-storage',
       'ext-opensave'
-      // 'ext-helloworld',
     ];
     this.curConfig = {
       // We do not put on defaultConfig to simplify object copying

src/editor/Editor.js

@@ -40,8 +40,8 @@ class Editor extends EditorStartup {
   /**
    *
    */
-  constructor() {
+  constructor(div = null) {
-    super();
+    super(div);
     /**
     * @type {boolean}
     */

src/editor/EditorStartup.js

@@ -50,10 +50,10 @@ class EditorStartup {
   /**
    *
    */
-  constructor () {
+  constructor (div) {
     this.extensionsAdded = false;
     this.messageQueue = [];
-    this.$svgEditor = $id('svg_editor');
+    this.$svgEditor = div??$id('svg_editor');
   }
   /**
   * Auto-run after a Promise microtask.
@@ -365,7 +365,7 @@ class EditorStartup {
       inp.blur();
     };
 
-    const liElems = document.getElementById('svg_editor').querySelectorAll('button, select, input:not(#text)');
+    const liElems = this.$svgEditor.querySelectorAll('button, select, input:not(#text)');
     Array.prototype.forEach.call(liElems, function(el){
       el.addEventListener("focus", (e) => {
         inp = e.currentTarget;

src/editor/panels/LayersPanel.js

@@ -205,7 +205,7 @@ class LayersPanel {
     window.addEventListener("mouseup", (_evt) => {
       this.sidedrag = -1;
       this.sidedragging = false;
-      $id("svg_editor").removeEventListener(
+      this.editor.$svgEditor.removeEventListener(
         "mousemove",
         this.resizeSidePanel.bind(this)
       );

src/editor/svgedit.css

@@ -15,23 +15,14 @@ body {
 }
 
 html, body, div{
-  -webkit-user-select: text;
-  -khtml-user-select: text;
-  -moz-user-select: text;
-  -o-user-select: text;
   user-select: text;
-  /* this will work for QtWebKit in future */
-  -webkit-user-drag: text;
 }
 
-#svg_editor * {
+.svg_editor * {
   transform-origin: 0 0;
-  -moz-transform-origin: 0 0;
-  -o-transform-origin: 0 0;
-  -webkit-transform-origin: 0 0;
 }
 
-#svg_editor {
+.svg_editor {
   font-size: 8pt;
   font-family: Verdana, Helvetica, Arial;
   color: var(--text-color);
@@ -76,8 +67,7 @@ hr {
   width: 0;
   overflow: hidden;
   margin: 0;
-  -moz-user-select: none;
+  user-select: none;
-  -webkit-user-select: none;
 }
 
 /*
@@ -98,16 +88,12 @@ hr {
   margin-left: 6px;
   cursor: pointer;
   border-radius: 5px;
-  -moz-border-radius: 5px;
+  user-select: none;
-  -webkit-border-radius: 5px;
-  -moz-user-select: none;
-  -webkit-user-select: none;
 }
 
 #sidepanel_handle * {
   cursor: pointer;
-  -moz-user-select: none;
+  user-select: none;
-  -webkit-user-select: none;
 }
 #layerbuttons {
   margin: 0;