refactor to class step 1

src/editor/Rulers.js

@@ -0,0 +1,192 @@
+/* globals $ */
+import {getTypeMap} from '../common/units.js';
+
+/**
+ *
+ */
+class Rulers {
+  /**
+   * @type {Module}
+  */
+  constructor (editor) {
+    // Make [1,2,5] array
+    this.rulerIntervals = [];
+    for (let i = 0.1; i < 1e5; i *= 10) {
+      this.rulerIntervals.push(i);
+      this.rulerIntervals.push(2 * i);
+      this.rulerIntervals.push(5 * i);
+    }
+    this.svgCanvas = editor.svgCanvas;
+    this.curConfig = editor.configObj;
+    this.editor = editor;
+  }
+  /**
+   * @type {Module}
+  */
+  manageScroll () {
+    const rulerX = document.getElementById('ruler_x');
+    const rulerY = document.getElementById('ruler_x');
+
+    if (rulerX) rulerX.scrollLeft = this.editor.workarea.scrollLeft;
+    if (rulerY) rulerY.scrollTop = this.editor.workarea.scrollTop;
+  }
+
+  /**
+   *
+   * @param {HTMLDivElement} [scanvas]
+   * @param {Float} [zoom]
+   * @returns {void}
+   */
+  updateRulers (scanvas, zoom) {
+    if (!zoom) { zoom = this.svgCanvas.getZoom(); }
+    if (!scanvas) { scanvas = $('#svgcanvas'); }
+
+    let d, i;
+    const limit = 30000;
+    const contentElem = this.svgCanvas.getContentElem();
+    const units = getTypeMap();
+    const unit = units[this.curConfig.baseUnit]; // 1 = 1px
+
+    // draw x ruler then y ruler
+    for (d = 0; d < 2; d++) {
+      const isX = (d === 0);
+      const dim = isX ? 'x' : 'y';
+      const lentype = isX ? 'width' : 'height';
+      const contentDim = Number(contentElem.getAttribute(dim));
+
+      const $hcanvOrig = $('#ruler_' + dim + ' canvas:first');
+
+      // Bit of a hack to fully clear the canvas in Safari & IE9
+      const $hcanv = $hcanvOrig.clone();
+      $hcanvOrig.replaceWith($hcanv);
+
+      const hcanv = $hcanv[0];
+
+      // Set the canvas size to the width of the container
+      let rulerLen = scanvas[lentype]();
+      const totalLen = rulerLen;
+      hcanv.parentNode.style[lentype] = totalLen + 'px';
+      let ctx = hcanv.getContext('2d');
+      let ctxArr, num, ctxArrNum;
+
+      ctx.fillStyle = 'rgb(200,0,0)';
+      ctx.fillRect(0, 0, hcanv.width, hcanv.height);
+
+      // Remove any existing canvasses
+      $hcanv.siblings().remove();
+
+      // Create multiple canvases when necessary (due to browser limits)
+      if (rulerLen >= limit) {
+        ctxArrNum = Number.parseInt(rulerLen / limit) + 1;
+        ctxArr = [];
+        ctxArr[0] = ctx;
+        let copy;
+        for (i = 1; i < ctxArrNum; i++) {
+          hcanv[lentype] = limit;
+          copy = hcanv.cloneNode(true);
+          hcanv.parentNode.append(copy);
+          ctxArr[i] = copy.getContext('2d');
+        }
+
+        copy[lentype] = rulerLen % limit;
+
+        // set copy width to last
+        rulerLen = limit;
+      }
+
+      hcanv[lentype] = rulerLen;
+
+      const uMulti = unit * zoom;
+
+      // Calculate the main number interval
+      const rawM = 50 / uMulti;
+      let multi = 1;
+      for (i = 0; i < this.rulerIntervals.length; i++) {
+        num = this.rulerIntervals[i];
+        multi = num;
+        if (rawM <= num) {
+          break;
+        }
+      }
+
+      const bigInt = multi * uMulti;
+
+      ctx.font = '9px sans-serif';
+
+      let rulerD = ((contentDim / uMulti) % multi) * uMulti;
+      let labelPos = rulerD - bigInt;
+      // draw big intervals
+      let ctxNum = 0;
+      while (rulerD < totalLen) {
+        labelPos += bigInt;
+        // const realD = rulerD - contentDim; // Currently unused
+
+        const curD = Math.round(rulerD) + 0.5;
+        if (isX) {
+          ctx.moveTo(curD, 15);
+          ctx.lineTo(curD, 0);
+        } else {
+          ctx.moveTo(15, curD);
+          ctx.lineTo(0, curD);
+        }
+
+        num = (labelPos - contentDim) / uMulti;
+        let label;
+        if (multi >= 1) {
+          label = Math.round(num);
+        } else {
+          const decs = String(multi).split('.')[1].length;
+          label = num.toFixed(decs);
+        }
+
+        // Change 1000s to Ks
+        if (label !== 0 && label !== 1000 && label % 1000 === 0) {
+          label = (label / 1000) + 'K';
+        }
+
+        if (isX) {
+          ctx.fillText(label, rulerD + 2, 8);
+        } else {
+          // draw label vertically
+          const str = String(label).split('');
+          for (i = 0; i < str.length; i++) {
+            ctx.fillText(str[i], 1, (rulerD + 9) + i * 9);
+          }
+        }
+
+        const part = bigInt / 10;
+        // draw the small intervals
+        for (i = 1; i < 10; i++) {
+          let subD = Math.round(rulerD + part * i) + 0.5;
+          if (ctxArr && subD > rulerLen) {
+            ctxNum++;
+            ctx.stroke();
+            if (ctxNum >= ctxArrNum) {
+              i = 10;
+              rulerD = totalLen;
+              continue;
+            }
+            ctx = ctxArr[ctxNum];
+            rulerD -= limit;
+            subD = Math.round(rulerD + part * i) + 0.5;
+          }
+
+          // odd lines are slighly longer
+          const lineNum = (i % 2) ? 12 : 10;
+          if (isX) {
+            ctx.moveTo(subD, 15);
+            ctx.lineTo(subD, lineNum);
+          } else {
+            ctx.moveTo(15, subD);
+            ctx.lineTo(lineNum, subD);
+          }
+        }
+        rulerD += bigInt;
+      }
+      ctx.strokeStyle = '#000';
+      ctx.stroke();
+    }
+  }
+}
+
+export default Rulers;

src/editor/embedapi.js

@@ -362,7 +362,7 @@ class EmbeddedSVGEdit {
         let sameOriginWithGlobal = false;
         try {
           sameOriginWithGlobal = window.location.origin === that.frame.contentWindow.location.origin &&
-            that.frame.contentWindow.svgEditor.canvas;
+            that.frame.contentWindow.svgEditor.svgCanvas;
         } catch (err) {}
 
         if (sameOriginWithGlobal) {

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

@@ -24,7 +24,7 @@ export default {
   async init (S) {
     const svgEditor = this;
     const strings = await loadExtensionTranslation(svgEditor.pref('lang'));
-    const svgCanvas = svgEditor.canvas;
+    const {svgCanvas} = svgEditor;
     const
       addElem = svgCanvas.addSVGElementFromJson,
       {nonce, $} = S,

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

@@ -23,7 +23,7 @@ export default {
   name: 'connector',
   async init (S) {
     const svgEditor = this;
-    const svgCanvas = svgEditor.canvas;
+    const {svgCanvas} = svgEditor;
     const {getElem} = svgCanvas;
     const {$, svgroot} = S,
       addElem = svgCanvas.addSVGElementFromJson,
@@ -374,7 +374,7 @@ export default {
         startX = opts.start_x;
         startY = opts.start_y;
         const mode = svgCanvas.getMode();
-        const {curConfig: {initStroke}} = svgEditor;
+        const {curConfig: {initStroke}} = svgEditor.configObj;
 
         if (mode === 'connector') {
           if (started) { return undefined; }

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

@@ -26,7 +26,7 @@ export default {
     const strings = await loadExtensionTranslation(svgEditor.pref('lang'));
     const {$, ChangeElementCommand} = S, // , svgcontent,
       // svgdoc = S.svgroot.parentNode.ownerDocument,
-      svgCanvas = svgEditor.canvas,
+      {svgCanvas} = svgEditor,
       addToHistory = function (cmd) { svgCanvas.undoMgr.addCommandToHistory(cmd); },
       currentStyle = {
         fillPaint: 'red', fillOpacity: 1.0,

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

@@ -24,7 +24,7 @@ export default {
   async init (S) {
     const svgEditor = this;
     const {$, text2xml, NS} = S;
-    const svgCanvas = svgEditor.canvas;
+    const {svgCanvas} = svgEditor;
     const
       // {svgcontent} = S,
       // addElem = svgCanvas.addSVGElementFromJson,

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

@@ -24,14 +24,14 @@ export default {
   async init ({$, NS, getTypeMap}) {
     const svgEditor = this;
     const strings = await loadExtensionTranslation(svgEditor.pref('lang'));
-    const svgCanvas = svgEditor.canvas;
+    const {svgCanvas} = svgEditor;
     const svgdoc = document.getElementById('svgcanvas').ownerDocument,
       {assignAttributes} = svgCanvas,
       hcanvas = document.createElement('canvas'),
       canvBG = $('#canvasBackground'),
       units = getTypeMap(), // Assumes prior `init()` call on `units.js` module
       intervals = [0.01, 0.1, 1, 10, 100, 1000];
-    let showGrid = svgEditor.curConfig.showGrid || false;
+    let showGrid = svgEditor.configObj.curConfig.showGrid || false;
 
     $(hcanvas).hide().appendTo('body');
 
@@ -90,7 +90,7 @@ export default {
      */
     function updateGrid (zoom) {
       // TODO: Try this with <line> elements, then compare performance difference
-      const unit = units[svgEditor.curConfig.baseUnit]; // 1 = 1px
+      const unit = units[svgEditor.configObj.curConfig.baseUnit]; // 1 = 1px
       const uMulti = unit * zoom;
       // Calculate the main number interval
       const rawM = 100 / uMulti;
@@ -109,7 +109,7 @@ export default {
       const part = bigInt / 10;
 
       ctx.globalAlpha = 0.2;
-      ctx.strokeStyle = svgEditor.curConfig.gridColor;
+      ctx.strokeStyle = svgEditor.configObj.curConfig.gridColor;
       for (let i = 1; i < 10; i++) {
         const subD = Math.round(part * i) + 0.5;
         // const lineNum = (i % 2)?12:10;
@@ -161,7 +161,7 @@ export default {
       events: {
         id: 'view_grid',
         click () {
-          svgEditor.curConfig.showGrid = showGrid = !showGrid;
+          svgEditor.configObj.curConfig.showGrid = showGrid = !showGrid;
           gridUpdate();
         }
       }

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

@@ -30,7 +30,7 @@ export default {
   async init ({$, importLocale}) {
     const svgEditor = this;
     const strings = await loadExtensionTranslation(svgEditor.pref('lang'));
-    const svgCanvas = svgEditor.canvas;
+    const {svgCanvas} = svgEditor;
     return {
       name: strings.name,
       events: [{

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

@@ -47,7 +47,7 @@ export default {
     const svgEditor = this;
     const strings = await loadExtensionTranslation(svgEditor.pref('lang'));
     const {$} = S;
-    const svgCanvas = svgEditor.canvas;
+    const {svgCanvas} = svgEditor;
     const // {svgcontent} = S,
       addElem = svgCanvas.addSVGElementFromJson;
     const mtypes = ['start', 'mid', 'end'];

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

@@ -25,7 +25,7 @@ export default {
   async init ({$}) {
     const svgEditor = this;
     const strings = await loadExtensionTranslation(svgEditor.pref('lang'));
-    const svgCanvas = svgEditor.canvas;
+    const {svgCanvas} = svgEditor;
 
     // Configuration of the MathJax extention.
 

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

@@ -27,7 +27,7 @@ export default {
   async init ({importLocale}) {
     const svgEditor = this;
     const strings = await loadExtensionTranslation(svgEditor.pref('lang'));
-    const svgCanvas = svgEditor.canvas;
+    const {svgCanvas} = svgEditor;
     const buttons = [{
       id: 'ext-panning',
       icon: 'panning.png',

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

@@ -22,7 +22,7 @@ export default {
   name: 'placemark',
   async init (S) {
     const svgEditor = this;
-    const svgCanvas = svgEditor.canvas;
+    const {svgCanvas} = svgEditor;
     const addElem = svgCanvas.addSVGElementFromJson;
     const {$} = S; // {svgcontent},
     let

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

@@ -22,7 +22,7 @@ export default {
   name: 'polygon',
   async init (S) {
     const svgEditor = this;
-    const svgCanvas = svgEditor.canvas;
+    const {svgCanvas} = svgEditor;
     const {$} = S, // {svgcontent}
       // addElem = svgCanvas.addSVGElementFromJson,
       editingitex = false;

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

@@ -26,7 +26,7 @@ export default {
   async init ({$, encode64, importLocale}) {
     const svgEditor = this;
     const strings = await loadExtensionTranslation(svgEditor.pref('lang'));
-    const svgCanvas = svgEditor.canvas;
+    const {svgCanvas} = svgEditor;
     const saveSvgAction = '/+modify';
 
     // Create upload target (hidden iframe)

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

@@ -11,7 +11,7 @@ export default {
   name: 'shapes',
   init ({$}) {
     const svgEditor = this;
-    const canv = svgEditor.canvas;
+    const canv = svgEditor.svgCanvas;
     const svgroot = canv.getRootElem();
     let lastBBox = {};
 

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

@@ -22,7 +22,7 @@ export default {
   name: 'star',
   async init (S) {
     const svgEditor = this;
-    const svgCanvas = svgEditor.canvas;
+    const {svgCanvas} = svgEditor;
 
     const {$} = S; // {svgcontent},
     let

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

@@ -36,7 +36,7 @@ export default {
   name: 'storage',
   init ({$}) {
     const svgEditor = this;
-    const svgCanvas = svgEditor.canvas;
+    const {svgCanvas} = svgEditor;
 
     // We could empty any already-set data for users when they decline storage,
     //  but it would be a risk for users who wanted to store but accidentally
@@ -56,7 +56,7 @@ export default {
       // the "noStorageOnLoad" config setting to true in svgedit-config-*.js.
       noStorageOnLoad,
       forceStorage
-    } = svgEditor.curConfig;
+    } = svgEditor.configObj.curConfig;
     const {storage, updateCanvas} = svgEditor;
 
     /**
@@ -90,7 +90,7 @@ export default {
      */
     function setSVGContentStorage (val) {
       if (storage) {
-        const name = 'svgedit-' + svgEditor.curConfig.canvasName;
+        const name = 'svgedit-' + svgEditor.configObj.curConfig.canvasName;
         if (!val) {
           storage.removeItem(name);
         } else {

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

@@ -99,7 +99,7 @@ export default {
               webappfind: {
                 type: saveMessage,
                 pathID,
-                content: svgEditor.canvas.getSvgString()
+                content: svgEditor.svgCanvas.getSvgString()
               }
             }, window.location.origin === 'null'
               // Avoid "null" string error for `file:` protocol (even

src/editor/extensions/ext-xdomain-messaging/ext-xdomain-messaging.js

@@ -8,7 +8,7 @@ export default {
   name: 'xdomain-messaging',
   init () {
     const svgEditor = this;
-    const svgCanvas = svgEditor.canvas;
+    const {svgCanvas} = svgEditor;
     try {
       window.addEventListener('message', function (e) {
         // We accept and post strings for the sake of IE9 support
@@ -22,7 +22,7 @@ export default {
         // The default is not to allow any origins, including even the same domain or
         //  if run on a `file:///` URL. See `svgedit-config-es.js` for an example of how
         //  to configure
-        const {allowedOrigins} = svgEditor.curConfig;
+        const {allowedOrigins} = svgEditor.configObj.curConfig;
         if (!allowedOrigins.includes('*') && !allowedOrigins.includes(e.origin)) {
           console.log(`Origin ${e.origin} not whitelisted for posting to ${window.origin}`); // eslint-disable-line no-console
           return;

src/editor/panels/BottomPanelHandlers.js

@@ -15,7 +15,7 @@ class BottomPanelHandlers {
   */
   constructor (editor) {
     this.editor = editor;
-    this.svgCanvas = editor.canvas;
+    this.svgCanvas = editor.svgCanvas;
   }
   /**
    * @type {module}
@@ -178,7 +178,7 @@ class BottomPanelHandlers {
    */
   init () {
     // register actions for bottom panel
-    $id('zoom').addEventListener('change', (e) => this.changeZoom(e.detail.value).bind(this));
+    $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));

src/editor/panels/LayersPanel.js

@@ -14,7 +14,7 @@ class LayersPanel {
    * @param {PlainObject} editor
    */
   constructor (editor) {
-    this.svgCanvas = editor.canvas;
+    this.svgCanvas = editor.svgCanvas;
     this.uiStrings = editor.uiStrings;
     this.updateContextPanel = editor.topPanelHandlers.updateContextPanel;
     this.sidedrag = -1;
@@ -120,7 +120,7 @@ class LayersPanel {
       this.lmenuFunc.bind(this)(e?.detail?.trigger, e?.detail?.source);
     });
     $id('sidepanel_handle').addEventListener('click', this.toggleSidePanel.bind(this));
-    if (this.editor.curConfig.showlayers) {
+    if (this.editor.configObj.curConfig.showlayers) {
       this.toggleSidePanel();
     }
     $id('sidepanel_handle').addEventListener('mousedown', (evt) => {

src/editor/panels/LeftPanelHandlers.js

@@ -14,7 +14,7 @@ class LeftPanelHandlers {
   */
   constructor (editor) {
     this.editor = editor;
-    this.svgCanvas = editor.canvas;
+    this.svgCanvas = editor.svgCanvas;
   }
   /**
   * This is a common function used when a tool has been clicked (chosen).

src/editor/panels/TopPanelHandlers.js

@@ -16,7 +16,7 @@ class TopPanelHandlers {
   */
   constructor (editor) {
     this.editor = editor;
-    this.svgCanvas = editor.canvas;
+    this.svgCanvas = editor.svgCanvas;
     this.uiStrings = editor.uiStrings;
   }
   /**
@@ -198,7 +198,7 @@ class TopPanelHandlers {
 
         curPanel.forEach((item) => {
           let attrVal = elem.getAttribute(item);
-          if (this.editor.curConfig.baseUnit !== 'px' && elem[item]) {
+          if (this.editor.configObj.curConfig.baseUnit !== 'px' && elem[item]) {
             const bv = elem[item].baseVal.value;
             attrVal = convertUnit(bv);
           }
@@ -265,8 +265,8 @@ class TopPanelHandlers {
     }
 
     // update history buttons
-    $id('tool_undo').disabled = (this.editor.canvas.undoMgr.getUndoStackSize() === 0);
-    $id('tool_redo').disabled = (this.editor.canvas.undoMgr.getRedoStackSize() === 0);
+    $id('tool_undo').disabled = (this.svgCanvas.undoMgr.getUndoStackSize() === 0);
+    $id('tool_redo').disabled = (this.svgCanvas.undoMgr.getRedoStackSize() === 0);
 
     this.svgCanvas.addedNew = false;