in progress

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

@@ -25,12 +25,12 @@ const loadExtensionTranslation = async function (svgEditor) {
 
 export default {
   name,
-  async init(S) {
+  async init() {
     const svgEditor = this;
-    await loadExtensionTranslation(svgEditor);
-    const { ChangeElementCommand } = S;
-    // svgdoc = S.svgroot.parentNode.ownerDocument,
     const { svgCanvas } = svgEditor;
+    await loadExtensionTranslation(svgEditor);
+    const { ChangeElementCommand } = svgCanvas.history;
+    // svgdoc = S.svgroot.parentNode.ownerDocument,
     const addToHistory = function (cmd) { svgCanvas.undoMgr.addCommandToHistory(cmd); };
     const currentStyle = {
       fillPaint: 'red', fillOpacity: 1.0,

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

@@ -29,9 +29,10 @@
 
 export default {
   name: 'markers',
-  async init (S) {
+  async init () {
     const svgEditor = this;
     const { svgCanvas } = svgEditor;
+    const { BatchCommand, RemoveElementCommand, InsertElementCommand } = svgCanvas.history;
     const { $id, addSVGElemensFromJson: addElem } = svgCanvas;
     const mtypes = [ 'start', 'mid', 'end' ];
     const markerElems = [ 'line', 'path', 'polyline', 'polygon' ];
@@ -182,16 +183,16 @@ export default {
         if (m) { pline.setAttribute(nam, elem.getAttribute(nam)); }
       });
 
-      const batchCmd = new S.BatchCommand();
-      batchCmd.addSubCommand(new S.RemoveElementCommand(elem, elem.parentNode));
-      batchCmd.addSubCommand(new S.InsertElementCommand(pline));
+      const batchCmd = new BatchCommand();
+      batchCmd.addSubCommand(new RemoveElementCommand(elem, elem.parentNode));
+      batchCmd.addSubCommand(new InsertElementCommand(pline));
 
       elem.insertAdjacentElement('afterend', pline);
       elem.remove();
       svgCanvas.clearSelection();
       pline.id = id;
       svgCanvas.addToSelection([ pline ]);
-      S.addCommandToHistory(batchCmd);
+      svgCanvas.addCommandToHistory(batchCmd);
       return pline;
     };
 

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

@@ -25,11 +25,11 @@ const loadExtensionTranslation = async function (svgEditor) {
 
 export default {
   name,
-  async init(_S) {
+  async init() {
     const svgEditor = this;
-    const { ChangeElementCommand } = _S; // , svgcontent,
-    const addToHistory = function (cmd) { svgCanvas.undoMgr.addCommandToHistory(cmd); };
     const { svgCanvas } = svgEditor;
+    const { ChangeElementCommand } = svgCanvas.history;
+    const addToHistory = function (cmd) { svgCanvas.undoMgr.addCommandToHistory(cmd); };
     const { $id } = svgCanvas;
     let selElems;
     let started;

src/svgcanvas/blur-event.js

@@ -4,11 +4,6 @@
  * @license MIT
  * @copyright 2011 Jeff Schiller
  */
-import * as hstry from './history.js';
-
-const {
-  InsertElementCommand, ChangeElementCommand, BatchCommand
-} = hstry;
 
 let svgCanvas = null;
 
@@ -99,6 +94,10 @@ export const setBlurOffsets = function (filterElem, stdDev) {
 * @returns {void}
 */
 export const setBlur = function (val, complete) {
+  const {
+    InsertElementCommand, ChangeElementCommand, BatchCommand
+  } = svgCanvas.history;
+
   const selectedElements = svgCanvas.getSelectedElements();
   if (svgCanvas.getCurCommand()) {
     finishChange();
@@ -147,7 +146,7 @@ export const setBlur = function (val, complete) {
     return;
   }
 
-  svgCanvas.changeSelectedAttributeMethod('filter', 'url(#' + elemId + '_blur)');
+  svgCanvas.changeSelectedAttribute('filter', 'url(#' + elemId + '_blur)');
   batchCmd.addSubCommand(new ChangeElementCommand(elem, changes));
   svgCanvas.setBlurOffsets(svgCanvas.getFilter(), val);
   const filter = svgCanvas.getFilter();

src/svgcanvas/draw.js

@@ -15,9 +15,6 @@ import {
 import {
   copyElem as utilCopyElem
 } from './copy-elem.js';
-import {
-  BatchCommand, RemoveElementCommand, MoveElementCommand, ChangeElementCommand
-} from './history.js';
 import { getParentsUntil } from '../editor/components/jgraduate/Util.js';
 
 const visElems = 'a,circle,ellipse,foreignObject,g,image,line,path,polygon,polyline,rect,svg,text,tspan,use'.split(',');
@@ -817,6 +814,7 @@ export const cloneLayer = function (name, hrService) {
 * @returns {boolean} `true` if an old layer group was found to delete
 */
 export const deleteCurrentLayer = function () {
+  const { BatchCommand, RemoveElementCommand } = svgCanvas.history;
   let currentLayer = svgCanvas.getCurrentDrawing().getCurrentLayer();
   const { nextSibling } = currentLayer;
   const parent = currentLayer.parentNode;
@@ -880,6 +878,7 @@ export const renameCurrentLayer = function (newName) {
 * @returns {boolean} `true` if the current layer position was changed, `false` otherwise.
 */
 export const setCurrentLayerPosition = function (newPos) {
+  const { MoveElementCommand } = svgCanvas.history;
   const drawing = svgCanvas.getCurrentDrawing();
   const result = drawing.setCurrentLayerPosition(newPos);
   if (result) {
@@ -898,6 +897,7 @@ export const setCurrentLayerPosition = function (newPos) {
 * @returns {boolean} true if the layer's visibility was set, false otherwise
 */
 export const setLayerVisibility = function (layerName, bVisible) {
+  const { ChangeElementCommand } = svgCanvas.history;
   const drawing = svgCanvas.getCurrentDrawing();
   const prevVisibility = drawing.getLayerVisibility(layerName);
   const layer = drawing.setLayerVisibility(layerName, bVisible);
@@ -924,6 +924,7 @@ export const setLayerVisibility = function (layerName, bVisible) {
 * @returns {boolean} Whether the selected elements were moved to the layer.
 */
 export const moveSelectedToLayer = function (layerName) {
+  const { BatchCommand, MoveElementCommand } = svgCanvas.history;
   // find the layer
   const drawing = svgCanvas.getCurrentDrawing();
   const layer = drawing.getLayerByName(layerName);

src/svgcanvas/elem-get-set.js

@@ -5,7 +5,6 @@
  */
 
 import { jGraduate } from '../editor/components/jgraduate/jQuery.jGraduate.js';
-import * as hstry from './history.js';
 import { NS } from './namespaces.js';
 import {
   getVisibleElements, getStrokedBBoxDefaultVisible, findDefs,
@@ -16,11 +15,6 @@ import {
 } from '../common/units.js';
 import { getParents } from '../editor/components/jgraduate/Util.js';
 
-const {
-  InsertElementCommand, RemoveElementCommand,
-  ChangeElementCommand, BatchCommand
-} = hstry;
-
 let svgCanvas = null;
 
 /**
@@ -81,6 +75,10 @@ export const getTitleMethod = function (elem) {
 * @returns {void}
 */
 export const setGroupTitleMethod = function (val) {
+  const {
+    InsertElementCommand, RemoveElementCommand,
+    ChangeElementCommand, BatchCommand
+  } = svgCanvas.history;
   const selectedElements = svgCanvas.getSelectedElements();
   const dataStorage = svgCanvas.getDataStorage();
   let elem = selectedElements[0];
@@ -122,6 +120,7 @@ export const setGroupTitleMethod = function (val) {
 * @returns {void}
 */
 export const setDocumentTitleMethod = function (newTitle) {
+  const { ChangeElementCommand, BatchCommand } = svgCanvas.history;
   const childs = svgCanvas.getSvgContent().childNodes;
   let docTitle = false; let oldTitle = '';
 
@@ -161,6 +160,7 @@ export const setDocumentTitleMethod = function (newTitle) {
 * It will fail on "fit to content" option with no content to fit to.
 */
 export const setResolutionMethod = function (x, y) {
+  const { ChangeElementCommand, BatchCommand } = svgCanvas.history;
   const zoom = svgCanvas.getZoom();
   const res = svgCanvas.getResolution();
   const { w, h } = res;
@@ -740,6 +740,7 @@ export const setTextContentMethod = function (val) {
 * @returns {void}
 */
 export const setImageURLMethod = function (val) {
+  const { ChangeElementCommand, BatchCommand } = svgCanvas.history;
   const selectedElements = svgCanvas.getSelectedElements();
   const elem = selectedElements[0];
   if (!elem) { return; }
@@ -788,6 +789,7 @@ export const setImageURLMethod = function (val) {
 * @returns {void}
 */
 export const setLinkURLMethod = function (val) {
+  const { ChangeElementCommand, BatchCommand } = svgCanvas.history;
   const selectedElements = svgCanvas.getSelectedElements();
   let elem = selectedElements[0];
   if (!elem) { return; }
@@ -824,6 +826,7 @@ export const setLinkURLMethod = function (val) {
 * @returns {void}
 */
 export const setRectRadiusMethod = function (val) {
+  const { ChangeElementCommand } = svgCanvas.history;
   const selectedElements = svgCanvas.getSelectedElements();
   const selected = selectedElements[0];
   if (!isNullish(selected) && selected.tagName === 'rect') {

src/svgcanvas/path.js

@@ -48,7 +48,7 @@ const uiStrings = {};
 * @param {module:path.uiStrings} strs
 * @returns {void}
 */
-export const setUiStrings = function (strs) {
+export const setUiStrings = (strs) => {
   Object.assign(uiStrings, strs.ui);
 };
 
@@ -65,7 +65,7 @@ let pathData = {};
 * @param {boolean} lcp
 * @returns {void}
 */
-export const setLinkControlPoints = function (lcp) {
+export const setLinkControlPoints = (lcp) => {
   linkControlPts = lcp;
 };
 
@@ -228,7 +228,7 @@ export let path = null;
 * @param {module:path.EditorContext} editorContext
 * @returns {void}
 */
-export const init = function (canvas) {
+export const init = (canvas) => {
   svgCanvas = canvas;
   svgCanvas.replacePathSeg = replacePathSegMethod;
   svgCanvas.addPointGrip = addPointGripMethod;
@@ -236,8 +236,10 @@ export const init = function (canvas) {
   svgCanvas.getPath_ = getPath_;
   svgCanvas.addCtrlGrip = addCtrlGripMethod;
   svgCanvas.getCtrlLine = getCtrlLineMethod;
+  svgCanvas.getGripPt = getGripPt;
   svgCanvas.getPointFromGrip = getPointFromGripMethod;
   svgCanvas.setLinkControlPoints = setLinkControlPoints;
+  svgCanvas.reorientGrads = reorientGrads;
   svgCanvas.getSegData = () => { return segData; };
   svgCanvas.getUIStrings= () => { return uiStrings; };
   svgCanvas.getPathObj = () => { return path; };
@@ -249,7 +251,7 @@ export const init = function (canvas) {
     'Moveto', 'Lineto', 'CurvetoCubic', 'CurvetoQuadratic', 'Arc',
     'LinetoHorizontal', 'LinetoVertical', 'CurvetoCubicSmooth', 'CurvetoQuadraticSmooth'
   ];
-  pathFuncsStrs.forEach(function(s){
+  pathFuncsStrs.forEach((s) => {
     pathFuncs.push(s + 'Abs');
     pathFuncs.push(s + 'Rel');
   });
@@ -366,7 +368,7 @@ export const getSegSelector = getSegSelectorMethod;
 * @param {Point} pt - Object with x and y values (third point)
 * @returns {Point[]} Array of two "smoothed" point objects
 */
-export const smoothControlPoints = function (ct1, ct2, pt) {
+export const smoothControlPoints = (ct1, ct2, pt) => {
   // each point must not be the origin
   const x1 = ct1.x - pt.x;
   const y1 = ct1.y - pt.y;
@@ -412,7 +414,7 @@ export const smoothControlPoints = function (ct1, ct2, pt) {
 * @param {SVGPathElement} elem
 * @returns {module:path.Path}
 */
-export const getPath_ = function (elem) {
+export const getPath_ = (elem) => {
   let p = pathData[elem.id];
   if (!p) {
     p = pathData[elem.id] = new Path(elem);
@@ -425,13 +427,13 @@ export const getPath_ = function (elem) {
 * @param {string} id
 * @returns {void}
 */
-export const removePath_ = function (id) {
+export const removePath_ = (id) => {
   if (id in pathData) { delete pathData[id]; }
 };
 
 let newcx; let newcy; let oldcx; let oldcy; let angle;
 
-const getRotVals = function (x, y) {
+const getRotVals = (x, y) => {
   let dx = x - oldcx;
   let dy = y - oldcy;
 
@@ -466,7 +468,7 @@ const getRotVals = function (x, y) {
 * be optimized or even taken care of by `recalculateDimensions`
 * @returns {void}
 */
-export const recalcRotatedPath = function () {
+export const recalcRotatedPath = () => {
   const currentPath = path.elem;
   angle = getRotationAngle(currentPath, true);
   if (!angle) { return; }
@@ -524,7 +526,7 @@ export const recalcRotatedPath = function () {
 * @function module:path.clearData
 * @returns {void}
 */
-export const clearData = function () {
+export const clearData = () => {
   pathData = {};
 };
 
@@ -535,7 +537,7 @@ export const clearData = function () {
 * @param {SVGMatrix} m
 * @returns {void}
 */
-export const reorientGrads = function (elem, m) {
+export const reorientGrads = (elem, m) => {
   const bb = utilsGetBBox(elem);
   for (let i = 0; i < 2; i++) {
     const type = i === 0 ? 'fill' : 'stroke';
@@ -596,7 +598,7 @@ const pathMap = [
  * @param {boolean} toRel - true of convert to relative
  * @returns {string}
  */
-export const convertPath = function (pth, toRel) {
+export const convertPath = (pth, toRel) => {
   const { pathSegList } = pth;
   const len = pathSegList.numberOfItems;
   let curx = 0; let cury = 0;
@@ -760,8 +762,8 @@ export const convertPath = function (pth, toRel) {
  * @param {Integer[]} [lastPoint] - x,y point
  * @returns {string}
  */
-function pathDSegment (letter, points, morePoints, lastPoint) {
-  points.forEach(function(pnt, i){
+const pathDSegment = (letter, points, morePoints, lastPoint) => {
+  points.forEach((pnt, i) => {
     points[i] = shortFloat(pnt);
   });
   let segment = letter + points.join(' ');
@@ -772,7 +774,7 @@ function pathDSegment (letter, points, morePoints, lastPoint) {
     segment += ' ' + shortFloat(lastPoint);
   }
   return segment;
-}
+};
 
 /**
 * Group: Path edit functions.

src/svgcanvas/select.js

@@ -363,7 +363,7 @@ export class SelectorManager {
           r: gripRadius,
           stroke: '#22C',
           'stroke-width': 2,
-          style: `cursor:url(${this.curConfig.imgPath}/rotate.svg) 12 12, auto;`
+          style: `cursor:url(${svgCanvas.curConfig.imgPath}/rotate.svg) 12 12, auto;`
         }
       });
     this.selectorGripsGroup.append(this.rotateGrip);
@@ -371,7 +371,7 @@ export class SelectorManager {
 
     if (document.getElementById('canvasBackground')) { return; }
 
-    const [ width, height ] = this.curConfig.dimensions;
+    const [ width, height ] = svgCanvas.curConfig.dimensions;
     const canvasbg = svgCanvas.createSVGElement({
       element: 'svg',
       attr: {

src/svgcanvas/svgcanvas.js

@@ -12,14 +12,14 @@ import { Canvg as canvg } from 'canvg';
 import 'pathseg'; // SVGPathSeg Polyfill (see https://github.com/progers/pathseg)
 
 import * as pathModule from './path.js';
-import * as hstry from './history.js';
+import * as history from './history.js';
 import * as draw from './draw.js';
 import {
   init as pasteInit, pasteElementsMethod
 } from './paste-elem.js';
 import { svgRootElement } from './svgroot.js';
 import {
-  init as undoInit, getUndoManager, changeSelectedAttributeNoUndoMethod,
+  init as undoInit, changeSelectedAttributeNoUndoMethod,
   changeSelectedAttributeMethod
 } from './undo.js';
 import {
@@ -806,7 +806,7 @@ class SvgCanvas {
     };
     return convertToPath(
       elem, attrs, this.addSVGElemensFromJson, this.pathActions,
-      this.clearSelection, this.addToSelection, hstry, this.addCommandToHistory
+      this.clearSelection, this.addToSelection, history, this.addCommandToHistory
     );
   }
   /**
@@ -824,7 +824,6 @@ class SvgCanvas {
     this.addSVGElemensFromJson = addSVGElementsFromJson;
     this.clearSvgContentElement = clearSvgContentElementInit;
     this.textActions = textActionsMethod;
-    this.undoMgr = getUndoManager();
     this.getIntersectionList = getIntersectionListMethod;
     this.getStrokedBBox = getStrokedBBoxDefaultVisible;
     this.getVisibleElements = getVisibleElements;
@@ -936,6 +935,7 @@ class SvgCanvas {
     this.setBlur = setBlur; // Adds/updates the blur filter to the selected element.
     this.smoothControlPoints = pathModule.smoothControlPoints;
     this.getTypeMap = getTypeMap;
+    this.history = history; // object with all histor methods
     this.NS = NS;
     this.$id = $id;
     this.$qq = $qq;

src/svgcanvas/undo.js

@@ -29,9 +29,10 @@ let svgCanvas = null;
 */
 export const init = function (canvas) {
   svgCanvas = canvas;
+  canvas.undoMgr = getUndoManager();
 };
 
-export const getUndoManager = function () {
+export const getUndoManager = () => {
   return new UndoManager({
     /**
      * @param {string} eventType One of the HistoryEvent types