in progress

src/editor/Rulers.js

@@ -1,5 +1,6 @@
 import { getTypeMap } from '../common/units.js';
 import rulersTemplate from './templates/rulersTemplate.html';
+import SvgCanvas from '../svgcanvas/svgcanvas.js';
 /**
  *
  */
@@ -22,7 +23,7 @@ class Rulers {
     // eslint-disable-next-line no-unsanitized/property
     template.innerHTML = rulersTemplate;
     this.editor.$svgEditor.append(template.content.cloneNode(true));
-    const { $id } = this.svgCanvas;
+    const { $id } = SvgCanvas;
     this.rulerX = $id('ruler_x');
     this.rulerY = $id('ruler_y');
     this.rulerCorner = $id('ruler_corner');
@@ -68,7 +69,7 @@ class Rulers {
       const dim = isX ? 'x' : 'y';
       const lentype = isX ? 'width' : 'height';
       const contentDim = Number(contentElem.getAttribute(dim));
-      const { $id } = this.svgCanvas;
+      const { $id } = SvgCanvas;
       const $hcanvOrig = $id('ruler_' + dim).querySelector('canvas');
 
       // Bit of a hack to fully clear the canvas in Safari & IE9

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

@@ -24,16 +24,16 @@ const loadExtensionTranslation = async function (svgEditor) {
 
 export default {
   name,
-  async init ({ NS, getTypeMap }) {
+  async init () {
     const svgEditor = this;
     await loadExtensionTranslation(svgEditor);
     const { svgCanvas } = svgEditor;
-    const { $id } = svgCanvas;
+    const { $id, NS } = svgCanvas;
     const svgdoc = $id('svgcanvas').ownerDocument;
     const { assignAttributes } = svgCanvas;
     const hcanvas = document.createElement('canvas');
     const canvBG = $id('canvasBackground');
-    const units = getTypeMap(); // Assumes prior `init()` call on `units.js` module
+    const units = svgCanvas.getTypeMap(); // Assumes prior `init()` call on `units.js` module
     const intervals = [ 0.01, 0.1, 1, 10, 100, 1000 ];
     let showGrid = svgEditor.configObj.curConfig.showGrid || false;
 

src/svgcanvas/dataStorage.js

@@ -0,0 +1,28 @@
+/** A storage solution aimed at replacing jQuerys data function.
+* Implementation Note: Elements are stored in a (WeakMap)[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakMap].
+* This makes sure the data is garbage collected when the node is removed.
+*/
+const dataStorage = {
+  _storage: new WeakMap(),
+  put: function (element, key, obj) {
+    if (!this._storage.has(element)) {
+      this._storage.set(element, new Map());
+    }
+    this._storage.get(element).set(key, obj);
+  },
+  get: function (element, key) {
+    return this._storage.get(element)?.get(key);
+  },
+  has: function (element, key) {
+    return this._storage.has(element) && this._storage.get(element).has(key);
+  },
+  remove: function (element, key) {
+    const ret = this._storage.get(element).delete(key);
+    if (!this._storage.get(element).size === 0) {
+      this._storage.delete(element);
+    }
+    return ret;
+  }
+};
+
+export default dataStorage;

src/svgcanvas/event.js

@@ -1284,7 +1284,6 @@ export const mouseDownEvent = (evt) => {
  * @returns {void}
  */
 export const DOMMouseScrollEvent = (e) => {
-  const svgCanvas = this; // svgCanvas was bound to the handler
   const zoom = svgCanvas.getZoom();
   const { $id } = svgCanvas;
   if (!e.shiftKey) { return; }

src/svgcanvas/path-method.js

@@ -61,7 +61,6 @@ export const getGripPtMethod = function (seg, altPt) {
     const pt = transformPoint(out.x, out.y, pth.matrix);
     out = pt;
   }
-  svgCanvas = svgCanvas.getEditorContext();
   const zoom = svgCanvas.getZoom();
   out.x *= zoom;
   out.y *= zoom;
@@ -85,7 +84,6 @@ export const getPointFromGripMethod = function (pt, pth) {
     out.x = pt.x;
     out.y = pt.y;
   }
-  svgCanvas = svgCanvas.getEditorContext();
   const zoom = svgCanvas.getZoom();
   out.x /= zoom;
   out.y /= zoom;

src/svgcanvas/path.js

@@ -230,6 +230,20 @@ export let path = null;
 */
 export const init = function (canvas) {
   svgCanvas = canvas;
+  svgCanvas.replacePathSeg = replacePathSegMethod;
+  svgCanvas.addPointGrip = addPointGripMethod;
+  svgCanvas.removePath_ = removePath_;
+  svgCanvas.getPath_ = getPath_;
+  svgCanvas.addCtrlGrip = addCtrlGripMethod;
+  svgCanvas.getCtrlLine = getCtrlLineMethod;
+  svgCanvas.getPointFromGrip = getPointFromGripMethod;
+  svgCanvas.setLinkControlPoints = setLinkControlPoints;
+  svgCanvas.getSegData = () => { return segData; };
+  svgCanvas.getUIStrings= () => { return uiStrings; };
+  svgCanvas.getPathObj = () => { return path; };
+  svgCanvas.setPathObj = (obj) => { path = obj; };
+  svgCanvas.getPathFuncs = () => { return pathFuncs; };
+  svgCanvas.getLinkControlPts = () => { return linkControlPts; };
   pathFuncs = [ 0, 'ClosePath' ];
   const pathFuncsStrs = [
     'Moveto', 'Lineto', 'CurvetoCubic', 'CurvetoQuadratic', 'Arc',
@@ -240,20 +254,8 @@ export const init = function (canvas) {
     pathFuncs.push(s + 'Rel');
   });
   pathActionsInit(svgCanvas);
+  pathMethodInit(svgCanvas);
 
-  pathMethodInit(
-  /**
-* @implements {module:path-method.pathMethodsContext}
-*/
-    {
-      getSegData () { return segData; },
-      getUIStrings () { return uiStrings; },
-      getPathObj () { return path; },
-      setPathObj (obj) { path = obj; },
-      getPathFuncs () { return pathFuncs; },
-      getLinkControlPts () { return linkControlPts; }
-    }
-  );
 };
 
 /* eslint-disable max-len */

src/svgcanvas/recalculate.js

@@ -361,28 +361,8 @@ export const recalculateDimensions = function (selected) {
             childTlist.appendItem(translateBack);
             childTlist.appendItem(scale);
             childTlist.appendItem(translateOrigin);
-            // childxforms.push(translateBack);
-            // childxforms.push(scale);
-            // childxforms.push(translateOrigin);
-            // logMatrix(translateBack.matrix);
-            // logMatrix(scale.matrix);
           } // not rotated
           batchCmd.addSubCommand(recalculateDimensions(child));
-          // TODO: If any <use> have this group as a parent and are
-          // referencing this child, then we need to impose a reverse
-          // scale on it so that when it won't get double-translated
-          // const uses = selected.getElementsByTagNameNS(NS.SVG, 'use');
-          // const href = '#' + child.id;
-          // let u = uses.length;
-          // while (u--) {
-          //   const useElem = uses.item(u);
-          //   if (href == getHref(useElem)) {
-          //     const usexlate = svgroot.createSVGTransform();
-          //     usexlate.setTranslate(-tx,-ty);
-          //     useElem.transform.baseVal.insertItemBefore(usexlate,0);
-          //     batchCmd.addSubCommand( recalculateDimensions(useElem) );
-          //   }
-          // }
           svgCanvas.setStartTransform(oldStartTransform);
         } // element
       } // for each child

src/svgcanvas/selection.js

@@ -49,7 +49,7 @@ export const clearSelectionMethod = function (noCall) {
   svgCanvas?.setEmptySelectedElements();
 
   if (!noCall) {
-    svgCanvas.call("selected", selectionContext_.getSelectedElements());
+    svgCanvas.call("selected", svgCanvas.getSelectedElements());
   }
 };
 

src/svgcanvas/utilities.js

@@ -721,10 +721,10 @@ export const getBBoxOfElementAsPath = function (elem, addSVGElemensFromJson, pat
 * @param {module:path.EditorContext#addCommandToHistory|module:draw.DrawCanvasInit#addCommandToHistory} addCommandToHistory - see [canvas.addCommandToHistory]{@link module:svgcanvas~addCommandToHistory}
 * @returns {SVGPathElement|null} The converted path element or null if the DOM element was not recognized.
 */
-export const convertToPath = function (
+export const convertToPath = (
   elem, attrs, addSVGElemensFromJson, pathActions,
   clearSelection, addToSelection, hstry, addCommandToHistory
-) {
+) => {
   const batchCmd = new hstry.BatchCommand('Convert element to Path');
 
   // Any attribute on the element not covered by the passed-in attributes