V7 preview 2 (#463)

* commit toward svgcanvas/svgedit isolation

* jquery removal, isolate svgcavas from svgedit, tests

* refactor(panels)

* fix update of colorpickers

* update cypress

* #tool_imagelib image library menu missing in main menu

* #tool_imagelib lint issue fixed

* #seConfirmDialog confirm change to elix alertdialog

* #seConfirmDialog alert change to elix alert dialog

* #seConfirmDialog remove super.attributeChangedCallback

* #process_cancel prompt changes to alertDialog and seConfirmDialog

* refactor to class step 1

* make load faster

* #storageDialog dialog separate moved dialog

* #process_cancel alert and process_cancel changes

* #process_cancel lint issue fixed

* add seList component

* merge

* fixes

* storagedialog

* move all storage related code to ext-storage

* fix ruler

* Update ConfigObj.js

* fix resize

* Update ext-storage.js

* picker starts withthe right color

* fix prefs

* fix initial content load

* npm update and fix some tests

* npm run build

src/svgcanvas/clear.js

@@ -5,7 +5,7 @@
  * @license MIT
  * @copyright 2011 Jeff Schiller
  */
-import jQueryPluginSVG from '../common/jQuery.attr.js';
+import jQueryPluginSVG from './jQuery.attr.js';
 import {NS} from '../common/namespaces.js';
 
 const $ = jQueryPluginSVG(jQuery);

src/svgcanvas/coords.js

@@ -7,11 +7,11 @@
 
 import {
   snapToGrid, assignAttributes, getBBox, getRefElem, findDefs
-} from '../common/utilities.js';
+} from './utilities.js';
 import {
   transformPoint, transformListToTransform, matrixMultiply, transformBox
-} from '../common/math.js';
-import {getTransformList} from '../common/svgtransformlist.js';
+} from './math.js';
+import {getTransformList} from './svgtransformlist.js';
 
 const $ = jQuery;
 

src/svgcanvas/copy-elem.js

@@ -1,9 +1,9 @@
 /* globals jQuery */
 
-import jQueryPluginSVG from '../common/jQuery.attr.js'; // Needed for SVG attribute setting and array form with `attr`
+import jQueryPluginSVG from './jQuery.attr.js'; // Needed for SVG attribute setting and array form with `attr`
 import {isWebkit} from '../common/browser.js';
 import {convertPath} from './path.js';
-import {preventClickDefault} from '../common/utilities.js';
+import {preventClickDefault} from './utilities.js';
 
 // Constants
 const $ = jQueryPluginSVG(jQuery);

src/svgcanvas/dbox.js

@@ -1,178 +0,0 @@
-/**
- * @module jQueryPluginDBox
- */
-/**
-* @param {external:jQuery} $
-* @param {PlainObject} [strings]
-* @param {PlainObject} [strings.ok]
-* @param {PlainObject} [strings.cancel]
-* @returns {external:jQuery}
-*/
-export default function jQueryPluginDBox ($, {
-  ok: okString = 'Ok',
-  cancel: cancelString = 'Cancel'
-} = {}) {
-  // This sets up alternative dialog boxes. They mostly work the same way as
-  // their UI counterparts, expect instead of returning the result, a callback
-  // needs to be included that returns the result as its first parameter.
-  // In the future we may want to add additional types of dialog boxes, since
-  // they should be easy to handle this way.
-  $('#dialog_container').draggable({
-    cancel: '#dialog_content, #dialog_buttons *',
-    containment: 'window'
-  }).css('position', 'absolute');
-
-  const box = $('#dialog_box'),
-    btnHolder = $('#dialog_buttons'),
-    dialogContent = $('#dialog_content');
-
-  /**
-  * @typedef {PlainObject} module:jQueryPluginDBox.PromiseResultObject
-  * @property {string|true} response
-  * @property {boolean} checked
-  */
-
-  /**
-  * Resolves to `false` (if cancelled), for prompts and selects
-  * without checkboxes, it resolves to the value of the form control. For other
-  * types without checkboxes, it resolves to `true`. For checkboxes, it resolves
-  * to an object with the `response` key containing the same value as the previous
-  * mentioned (string or `true`) and a `checked` (boolean) property.
-  * @typedef {Promise<boolean|string|module:jQueryPluginDBox.PromiseResultObject>} module:jQueryPluginDBox.ResultPromise
-  */
-  /**
-  * @typedef {PlainObject} module:jQueryPluginDBox.SelectOption
-  * @property {string} text
-  * @property {string} value
-  */
-  /**
-  * @typedef {PlainObject} module:jQueryPluginDBox.CheckboxInfo
-  * @property {string} label Label for the checkbox
-  * @property {string} value Value of the checkbox
-  * @property {string} tooltip Tooltip on the checkbox label
-  * @property {boolean} checked Whether the checkbox is checked by default
-  */
-  /**
-   * Triggered upon a change of value for the select pull-down.
-   * @callback module:jQueryPluginDBox.SelectChangeListener
-   * @returns {void}
-   */
-  /**
-   * Creates a dialog of the specified type with a given message
-   *  and any defaults and type-specific metadata. Returns a `Promise`
-   *  which resolves differently depending on whether the dialog
-   *  was cancelled or okayed (with the response and any checked state).
-   * @param {"alert"|"prompt"|"select"|"process"} type
-   * @param {string} msg
-   * @param {string} [defaultVal]
-   * @param {module:jQueryPluginDBox.SelectOption[]} [opts]
-   * @param {module:jQueryPluginDBox.SelectChangeListener} [changeListener]
-   * @param {module:jQueryPluginDBox.CheckboxInfo} [checkbox]
-   * @returns {jQueryPluginDBox.ResultPromise}
-  */
-  function dbox (type, msg, defaultVal, opts, changeListener, checkbox) {
-    dialogContent.html('<p>' + msg.replace(/\n/g, '</p><p>') + '</p>')
-      .toggleClass('prompt', (type === 'prompt'));
-    btnHolder.empty();
-
-    const ok = $('<input type="button" data-ok="" value="' + okString + '">').appendTo(btnHolder);
-
-    return new Promise((resolve, reject) => { // eslint-disable-line promise/avoid-new
-      if (type !== 'alert') {
-        $('<input type="button" value="' + cancelString + '">')
-          .appendTo(btnHolder)
-          .click(function () {
-            box.hide();
-            resolve(false);
-          });
-      }
-
-      let ctrl, chkbx;
-      if (type === 'prompt') {
-        ctrl = $('<input type="text">').prependTo(btnHolder);
-        ctrl.val(defaultVal || '');
-        ctrl.bind('keydown', 'return', function () { ok.click(); });
-      } else if (type === 'select') {
-        const div = $('<div style="text-align:center;">');
-        ctrl = $(`<select aria-label="${msg}">`).appendTo(div);
-        if (checkbox) {
-          const label = $('<label>').text(checkbox.label);
-          chkbx = $('<input type="checkbox">').appendTo(label);
-          chkbx.val(checkbox.value);
-          if (checkbox.tooltip) {
-            label.attr('title', checkbox.tooltip);
-          }
-          chkbx.prop('checked', Boolean(checkbox.checked));
-          div.append($('<div>').append(label));
-        }
-        $.each(opts || [], function (opt, val) {
-          if (typeof val === 'object') {
-            ctrl.append($('<option>').val(val.value).html(val.text));
-          } else {
-            ctrl.append($('<option>').html(val));
-          }
-        });
-        dialogContent.append(div);
-        if (defaultVal) {
-          ctrl.val(defaultVal);
-        }
-        if (changeListener) {
-          ctrl.bind('change', 'return', changeListener);
-        }
-        ctrl.bind('keydown', 'return', function () { ok.click(); });
-      } else if (type === 'process') {
-        ok.hide();
-      }
-
-      box.show();
-
-      ok.click(function () {
-        box.hide();
-        const response = (type === 'prompt' || type === 'select') ? ctrl.val() : true;
-        if (chkbx) {
-          resolve({response, checked: chkbx.prop('checked')});
-          return;
-        }
-        resolve(response);
-      }).focus();
-
-      if (type === 'prompt' || type === 'select') {
-        ctrl.focus();
-      }
-    });
-  }
-
-  /**
-  * @param {string} msg Message to alert
-  * @returns {jQueryPluginDBox.ResultPromise}
-  */
-  $.alert = function (msg) {
-    return dbox('alert', msg);
-  };
-  /**
-  * @param {string} msg Message for which to ask confirmation
-  * @returns {jQueryPluginDBox.ResultPromise}
-  */
-  $.confirm = function (msg) {
-    return dbox('confirm', msg);
-  };
-  /**
-  * @param {string} msg Message to indicate upon cancelable indicator
-  * @returns {jQueryPluginDBox.ResultPromise}
-  */
-  $.process_cancel = function (msg) {
-    return dbox('process', msg);
-  };
-  /**
-  * @param {string} msg Message to accompany the prompt
-  * @param {string} [defaultText=""] The default text to show for the prompt
-  * @returns {jQueryPluginDBox.ResultPromise}
-  */
-  $.prompt = function (msg, defaultText = '') {
-    return dbox('prompt', msg, defaultText);
-  };
-  $.select = function (msg, opts, changeListener, txt, checkbox) {
-    return dbox('select', msg, txt, opts, changeListener, checkbox);
-  };
-  return $;
-}

src/svgcanvas/draw.js

@@ -13,7 +13,7 @@ import {NS} from '../common/namespaces.js';
 import {isOpera} from '../common/browser.js';
 import {
   toXml, getElem
-} from '../common/utilities.js';
+} from './utilities.js';
 import {
   copyElem as utilCopyElem
 } from './copy-elem.js';

src/svgcanvas/elem-get-set.js

@@ -6,12 +6,12 @@
  */
 
 import * as hstry from './history.js';
-import jQueryPluginSVG from '../common/jQuery.attr.js';
+import jQueryPluginSVG from './jQuery.attr.js';
 import {NS} from '../common/namespaces.js';
 import {
   getVisibleElements, getStrokedBBoxDefaultVisible, findDefs,
   walkTree, isNullish, getHref, setHref, getElem
-} from '../common/utilities.js';
+} from './utilities.js';
 import {
   convertToNum
 } from '../common/units.js';

src/svgcanvas/event.js

@@ -5,20 +5,20 @@
  * @license MIT
  * @copyright 2011 Jeff Schiller
  */
-import jQueryPluginSVG from '../common/jQuery.attr.js'; // Needed for SVG attribute
+import jQueryPluginSVG from './jQuery.attr.js'; // Needed for SVG attribute
 import {
   assignAttributes, cleanupElement, getElem, getRotationAngle, snapToGrid, walkTree,
   getBBox as utilsGetBBox, isNullish, preventClickDefault, setHref
-} from '../common/utilities.js';
+} from './utilities.js';
 import {
   convertAttrs
 } from '../common/units.js';
 import {
   transformPoint, hasMatrixTransform, getMatrix, snapToAngle
-} from '../common/math.js';
+} from './math.js';
 import {
   getTransformList
-} from '../common/svgtransformlist.js';
+} from './svgtransformlist.js';
 import {
   supportsNonScalingStroke, isWebkit
 } from '../common/browser.js';

src/svgcanvas/history.js

@@ -6,8 +6,8 @@
  * @copyright 2010 Jeff Schiller
  */
 
-import {getHref, setHref, getRotationAngle, isNullish} from '../common/utilities.js';
-import {removeElementFromListMap} from '../common/svgtransformlist.js';
+import {getHref, setHref, getRotationAngle, isNullish} from './utilities.js';
+import {removeElementFromListMap} from './svgtransformlist.js';
 
 /**
 * Group: Undo/Redo history management.

src/svgcanvas/jQuery.attr.js

@@ -0,0 +1,79 @@
+/**
+ * A jQuery module to work with SVG attributes.
+ * @module jQueryAttr
+ * @license MIT
+ */
+
+/**
+* This fixes `$(...).attr()` to work as expected with SVG elements.
+* Does not currently use `*AttributeNS()` since we rarely need that.
+* Adds {@link external:jQuery.fn.attr}.
+* See {@link https://api.jquery.com/attr/} for basic documentation of `.attr()`.
+*
+* Additional functionality:
+* - When getting attributes, a string that's a number is returned as type number.
+* - If an array is supplied as the first parameter, multiple values are returned
+*    as an object with values for each given attribute.
+* @function module:jQueryAttr.jQueryAttr
+* @param {external:jQuery} $ The jQuery object to which to add the plug-in
+* @returns {external:jQuery}
+*/
+export default function jQueryPluginSVG ($) {
+  const proxied = $.fn.attr,
+    svgns = 'http://www.w3.org/2000/svg';
+  /**
+  * @typedef {PlainObject<string, string|Float>} module:jQueryAttr.Attributes
+  */
+  /**
+  * @function external:jQuery.fn.attr
+  * @param {string|string[]|PlainObject<string, string>} key
+  * @param {string} value
+  * @returns {external:jQuery|module:jQueryAttr.Attributes}
+  */
+  $.fn.attr = function (key, value) {
+    const len = this.length;
+    if (!len) { return proxied.call(this, key, value); }
+    for (let i = 0; i < len; ++i) {
+      const elem = this[i];
+      // set/get SVG attribute
+      if (elem.namespaceURI === svgns) {
+        // Setting attribute
+        if (value !== undefined) {
+          elem.setAttribute(key, value);
+        } else if (Array.isArray(key)) {
+          // Getting attributes from array
+          const obj = {};
+          let j = key.length;
+
+          while (j--) {
+            const aname = key[j];
+            let attr = elem.getAttribute(aname);
+            // This returns a number when appropriate
+            if (attr || attr === '0') {
+              attr = isNaN(attr) ? attr : (attr - 0);
+            }
+            obj[aname] = attr;
+          }
+          return obj;
+        }
+        if (typeof key === 'object') {
+          // Setting attributes from object
+          for (const [name, val] of Object.entries(key)) {
+            elem.setAttribute(name, val);
+          }
+        // Getting attribute
+        } else {
+          let attr = elem.getAttribute(key);
+          if (attr || attr === '0') {
+            attr = isNaN(attr) ? attr : (attr - 0);
+          }
+          return attr;
+        }
+      } else {
+        return proxied.call(this, key, value);
+      }
+    }
+    return this;
+  };
+  return $;
+}

src/svgcanvas/json.js

@@ -5,7 +5,7 @@
  *
  * @copyright 2010 Alexis Deveria, 2010 Jeff Schiller
  */
-import {getElem, assignAttributes, cleanupElement} from '../common/utilities.js';
+import {getElem, assignAttributes, cleanupElement} from './utilities.js';
 import {NS} from '../common/namespaces.js';
 
 let jsonContext_ = null;

src/svgcanvas/layer.js

@@ -8,7 +8,7 @@
  */
 
 import {NS} from '../common/namespaces.js';
-import {toXml, walkTree, isNullish} from '../common/utilities.js';
+import {toXml, walkTree, isNullish} from './utilities.js';
 
 const $ = jQuery;
 

src/svgcanvas/math.js

@@ -0,0 +1,222 @@
+/**
+ * Mathematical utilities.
+ * @module math
+ * @license MIT
+ *
+ * @copyright 2010 Alexis Deveria, 2010 Jeff Schiller
+ */
+
+/**
+* @typedef {PlainObject} module:math.AngleCoord45
+* @property {Float} x - The angle-snapped x value
+* @property {Float} y - The angle-snapped y value
+* @property {Integer} a - The angle at which to snap
+*/
+
+/**
+* @typedef {PlainObject} module:math.XYObject
+* @property {Float} x
+* @property {Float} y
+*/
+
+import {NS} from '../common/namespaces.js';
+import {getTransformList} from './svgtransformlist.js';
+
+// Constants
+const NEAR_ZERO = 1e-14;
+
+// Throw away SVGSVGElement used for creating matrices/transforms.
+const svg = document.createElementNS(NS.SVG, 'svg');
+
+/**
+ * A (hopefully) quicker function to transform a point by a matrix
+ * (this function avoids any DOM calls and just does the math).
+ * @function module:math.transformPoint
+ * @param {Float} x - Float representing the x coordinate
+ * @param {Float} y - Float representing the y coordinate
+ * @param {SVGMatrix} m - Matrix object to transform the point with
+ * @returns {module:math.XYObject} An x, y object representing the transformed point
+*/
+export const transformPoint = function (x, y, m) {
+  return {x: m.a * x + m.c * y + m.e, y: m.b * x + m.d * y + m.f};
+};
+
+/**
+ * Helper function to check if the matrix performs no actual transform
+ * (i.e. exists for identity purposes).
+ * @function module:math.isIdentity
+ * @param {SVGMatrix} m - The matrix object to check
+ * @returns {boolean} Indicates whether or not the matrix is 1,0,0,1,0,0
+*/
+export const isIdentity = function (m) {
+  return (m.a === 1 && m.b === 0 && m.c === 0 && m.d === 1 && m.e === 0 && m.f === 0);
+};
+
+/**
+ * This function tries to return a `SVGMatrix` that is the multiplication `m1 * m2`.
+ * We also round to zero when it's near zero.
+ * @function module:math.matrixMultiply
+ * @param {...SVGMatrix} args - Matrix objects to multiply
+ * @returns {SVGMatrix} The matrix object resulting from the calculation
+*/
+export const matrixMultiply = function (...args) {
+  const m = args.reduceRight((prev, m1) => {
+    return m1.multiply(prev);
+  });
+
+  if (Math.abs(m.a) < NEAR_ZERO) { m.a = 0; }
+  if (Math.abs(m.b) < NEAR_ZERO) { m.b = 0; }
+  if (Math.abs(m.c) < NEAR_ZERO) { m.c = 0; }
+  if (Math.abs(m.d) < NEAR_ZERO) { m.d = 0; }
+  if (Math.abs(m.e) < NEAR_ZERO) { m.e = 0; }
+  if (Math.abs(m.f) < NEAR_ZERO) { m.f = 0; }
+
+  return m;
+};
+
+/**
+ * See if the given transformlist includes a non-indentity matrix transform.
+ * @function module:math.hasMatrixTransform
+ * @param {SVGTransformList} [tlist] - The transformlist to check
+ * @returns {boolean} Whether or not a matrix transform was found
+*/
+export const hasMatrixTransform = function (tlist) {
+  if (!tlist) { return false; }
+  let num = tlist.numberOfItems;
+  while (num--) {
+    const xform = tlist.getItem(num);
+    if (xform.type === 1 && !isIdentity(xform.matrix)) { return true; }
+  }
+  return false;
+};
+
+/**
+* @typedef {PlainObject} module:math.TransformedBox An object with the following values
+* @property {module:math.XYObject} tl - The top left coordinate
+* @property {module:math.XYObject} tr - The top right coordinate
+* @property {module:math.XYObject} bl - The bottom left coordinate
+* @property {module:math.XYObject} br - The bottom right coordinate
+* @property {PlainObject} aabox - Object with the following values:
+* @property {Float} aabox.x - Float with the axis-aligned x coordinate
+* @property {Float} aabox.y - Float with the axis-aligned y coordinate
+* @property {Float} aabox.width - Float with the axis-aligned width coordinate
+* @property {Float} aabox.height - Float with the axis-aligned height coordinate
+*/
+
+/**
+ * Transforms a rectangle based on the given matrix.
+ * @function module:math.transformBox
+ * @param {Float} l - Float with the box's left coordinate
+ * @param {Float} t - Float with the box's top coordinate
+ * @param {Float} w - Float with the box width
+ * @param {Float} h - Float with the box height
+ * @param {SVGMatrix} m - Matrix object to transform the box by
+ * @returns {module:math.TransformedBox}
+*/
+export const transformBox = function (l, t, w, h, m) {
+  const tl = transformPoint(l, t, m),
+    tr = transformPoint((l + w), t, m),
+    bl = transformPoint(l, (t + h), m),
+    br = transformPoint((l + w), (t + h), m),
+
+    minx = Math.min(tl.x, tr.x, bl.x, br.x),
+    maxx = Math.max(tl.x, tr.x, bl.x, br.x),
+    miny = Math.min(tl.y, tr.y, bl.y, br.y),
+    maxy = Math.max(tl.y, tr.y, bl.y, br.y);
+
+  return {
+    tl,
+    tr,
+    bl,
+    br,
+    aabox: {
+      x: minx,
+      y: miny,
+      width: (maxx - minx),
+      height: (maxy - miny)
+    }
+  };
+};
+
+/**
+ * This returns a single matrix Transform for a given Transform List
+ * (this is the equivalent of `SVGTransformList.consolidate()` but unlike
+ * that method, this one does not modify the actual `SVGTransformList`).
+ * This function is very liberal with its `min`, `max` arguments.
+ * @function module:math.transformListToTransform
+ * @param {SVGTransformList} tlist - The transformlist object
+ * @param {Integer} [min=0] - Optional integer indicating start transform position
+ * @param {Integer} [max] - Optional integer indicating end transform position;
+ *   defaults to one less than the tlist's `numberOfItems`
+ * @returns {SVGTransform} A single matrix transform object
+*/
+export const transformListToTransform = function (tlist, min, max) {
+  if (!tlist) {
+    // Or should tlist = null have been prevented before this?
+    return svg.createSVGTransformFromMatrix(svg.createSVGMatrix());
+  }
+  min = min || 0;
+  max = max || (tlist.numberOfItems - 1);
+  min = Number.parseInt(min);
+  max = Number.parseInt(max);
+  if (min > max) { const temp = max; max = min; min = temp; }
+  let m = svg.createSVGMatrix();
+  for (let i = min; i <= max; ++i) {
+    // if our indices are out of range, just use a harmless identity matrix
+    const mtom = (i >= 0 && i < tlist.numberOfItems
+      ? tlist.getItem(i).matrix
+      : svg.createSVGMatrix());
+    m = matrixMultiply(m, mtom);
+  }
+  return svg.createSVGTransformFromMatrix(m);
+};
+
+/**
+ * Get the matrix object for a given element.
+ * @function module:math.getMatrix
+ * @param {Element} elem - The DOM element to check
+ * @returns {SVGMatrix} The matrix object associated with the element's transformlist
+*/
+export const getMatrix = function (elem) {
+  const tlist = getTransformList(elem);
+  return transformListToTransform(tlist).matrix;
+};
+
+/**
+ * Returns a 45 degree angle coordinate associated with the two given
+ * coordinates.
+ * @function module:math.snapToAngle
+ * @param {Integer} x1 - First coordinate's x value
+ * @param {Integer} y1 - First coordinate's y value
+ * @param {Integer} x2 - Second coordinate's x value
+ * @param {Integer} y2 - Second coordinate's y value
+ * @returns {module:math.AngleCoord45}
+*/
+export const snapToAngle = function (x1, y1, x2, y2) {
+  const snap = Math.PI / 4; // 45 degrees
+  const dx = x2 - x1;
+  const dy = y2 - y1;
+  const angle = Math.atan2(dy, dx);
+  const dist = Math.sqrt(dx * dx + dy * dy);
+  const snapangle = Math.round(angle / snap) * snap;
+
+  return {
+    x: x1 + dist * Math.cos(snapangle),
+    y: y1 + dist * Math.sin(snapangle),
+    a: snapangle
+  };
+};
+
+/**
+ * Check if two rectangles (BBoxes objects) intersect each other.
+ * @function module:math.rectsIntersect
+ * @param {SVGRect} r1 - The first BBox-like object
+ * @param {SVGRect} r2 - The second BBox-like object
+ * @returns {boolean} True if rectangles intersect
+ */
+export const rectsIntersect = function (r1, r2) {
+  return r2.x < (r1.x + r1.width) &&
+    (r2.x + r2.width) > r1.x &&
+    r2.y < (r1.y + r1.height) &&
+    (r2.y + r2.height) > r1.y;
+};

src/svgcanvas/paste-elem.js

@@ -1,9 +1,9 @@
 /* globals jQuery */
 
-import jQueryPluginSVG from '../common/jQuery.attr.js'; // Needed for SVG attribute setting and array form with `attr`
+import jQueryPluginSVG from './jQuery.attr.js'; // Needed for SVG attribute setting and array form with `attr`
 import {
   getStrokedBBoxDefaultVisible
-} from '../common/utilities.js';
+} from './utilities.js';
 import * as hstry from './history.js';
 // Constants
 const $ = jQueryPluginSVG(jQuery);

src/svgcanvas/path-actions.js

@@ -9,16 +9,16 @@
 
 import {NS} from '../common/namespaces.js';
 import {shortFloat} from '../common/units.js';
-import {getTransformList} from '../common/svgtransformlist.js';
+import {getTransformList} from './svgtransformlist.js';
 import {ChangeElementCommand, BatchCommand} from './history.js';
 import {
   transformPoint, snapToAngle, rectsIntersect,
   transformListToTransform
-} from '../common/math.js';
+} from './math.js';
 import {
   assignAttributes, getElem, getRotationAngle, snapToGrid, isNullish,
   getBBox as utilsGetBBox
-} from '../common/utilities.js';
+} from './utilities.js';
 import {
   isWebkit
 } from '../common/browser.js';

src/svgcanvas/path-method.js

@@ -11,11 +11,11 @@ import {NS} from '../common/namespaces.js';
 import {ChangeElementCommand} from './history.js';
 import {
   transformPoint, getMatrix
-} from '../common/math.js';
+} from './math.js';
 import {
   assignAttributes, getRotationAngle, isNullish,
   getElem
-} from '../common/utilities.js';
+} from './utilities.js';
 import {
   supportsPathInsertItemBefore, supportsPathReplaceItem, isWebkit
 } from '../common/browser.js';

src/svgcanvas/path.js

@@ -7,14 +7,14 @@
  * @copyright 2011 Alexis Deveria, 2011 Jeff Schiller
  */
 
-import {getTransformList} from '../common/svgtransformlist.js';
+import {getTransformList} from './svgtransformlist.js';
 import {shortFloat} from '../common/units.js';
-import {transformPoint} from '../common/math.js';
+import {transformPoint} from './math.js';
 import {
   getRotationAngle, getBBox,
   getRefElem, findDefs, isNullish,
   getBBox as utilsGetBBox
-} from '../common/utilities.js';
+} from './utilities.js';
 import {
   init as pathMethodInit, insertItemBeforeMethod, ptObjToArrMethod, getGripPtMethod,
   getPointFromGripMethod, addPointGripMethod, getGripContainerMethod, addCtrlGripMethod,

src/svgcanvas/recalculate.js

@@ -5,18 +5,18 @@
  * @license MIT
  */
 
-import jQueryPluginSVG from '../common/jQuery.attr.js'; // Needed for SVG attribute setting and array form with `attr`
+import jQueryPluginSVG from './jQuery.attr.js'; // Needed for SVG attribute setting and array form with `attr`
 import {NS} from '../common/namespaces.js';
 import {convertToNum} from '../common/units.js';
 import {isWebkit} from '../common/browser.js';
-import {getTransformList} from '../common/svgtransformlist.js';
-import {getRotationAngle, getHref, getBBox, getRefElem, isNullish} from '../common/utilities.js';
+import {getTransformList} from './svgtransformlist.js';
+import {getRotationAngle, getHref, getBBox, getRefElem, isNullish} from './utilities.js';
 import {BatchCommand, ChangeElementCommand} from './history.js';
 import {remapElement} from './coords.js';
 import {
   isIdentity, matrixMultiply, transformPoint, transformListToTransform,
   hasMatrixTransform
-} from '../common/math.js';
+} from './math.js';
 
 const $ = jQueryPluginSVG(jQuery);
 

src/svgcanvas/sanitize.js

@@ -8,7 +8,7 @@
 
 import {getReverseNS, NS} from '../common/namespaces.js';
 import {isGecko} from '../common/browser.js';
-import {getHref, setHref, getUrlFromAttr} from '../common/utilities.js';
+import {getHref, setHref, getUrlFromAttr} from './utilities.js';
 
 const REVERSE_NS = getReverseNS();
 

src/svgcanvas/select.js

@@ -8,9 +8,9 @@
  */
 
 import {isTouch, isWebkit} from '../common/browser.js'; // , isOpera
-import {getRotationAngle, getBBox, getStrokedBBox, isNullish} from '../common/utilities.js';
-import {transformListToTransform, transformBox, transformPoint} from '../common/math.js';
-import {getTransformList} from '../common/svgtransformlist.js';
+import {getRotationAngle, getBBox, getStrokedBBox, isNullish} from './utilities.js';
+import {transformListToTransform, transformBox, transformPoint} from './math.js';
+import {getTransformList} from './svgtransformlist.js';
 
 const $ = jQuery;
 

src/svgcanvas/selected-elem.js

@@ -6,20 +6,20 @@
  *
  * @copyright 2010 Alexis Deveria, 2010 Jeff Schiller
  */
-import jQueryPluginSVG from '../common/jQuery.attr.js'; // Needed for SVG attribute
+import jQueryPluginSVG from './jQuery.attr.js'; // Needed for SVG attribute
 import {NS} from '../common/namespaces.js';
 import * as hstry from './history.js';
 import * as pathModule from './path.js';
 import {
   isNullish, getStrokedBBoxDefaultVisible, setHref, getElem, getHref, getVisibleElements,
   findDefs, getRotationAngle, getRefElem, getBBox as utilsGetBBox, walkTreePost, assignAttributes
-} from '../common/utilities.js';
+} from './utilities.js';
 import {
   transformPoint, matrixMultiply, transformListToTransform
-} from '../common/math.js';
+} from './math.js';
 import {
   getTransformList
-} from '../common/svgtransformlist.js';
+} from './svgtransformlist.js';
 import {
   recalculateDimensions
 } from './recalculate.js';

src/svgcanvas/selection.js

@@ -9,12 +9,12 @@
 import {NS} from '../common/namespaces.js';
 import {
   isNullish, getBBox as utilsGetBBox, getStrokedBBoxDefaultVisible
-} from '../common/utilities.js';
-import {transformPoint, transformListToTransform, rectsIntersect} from '../common/math.js';
-import jQueryPluginSVG from '../common/jQuery.attr.js';
+} from './utilities.js';
+import {transformPoint, transformListToTransform, rectsIntersect} from './math.js';
+import jQueryPluginSVG from './jQuery.attr.js';
 import {
   getTransformList
-} from '../common/svgtransformlist.js';
+} from './svgtransformlist.js';
 import * as hstry from './history.js';
 
 const {BatchCommand} = hstry;

src/svgcanvas/svg-exec.js

@@ -8,17 +8,17 @@
 
 import {jsPDF} from 'jspdf/dist/jspdf.es.min.js';
 import 'svg2pdf.js/dist/svg2pdf.es.js';
-import jQueryPluginSVG from '../common/jQuery.attr.js';
+import jQueryPluginSVG from './jQuery.attr.js';
 import * as hstry from './history.js';
 import {
   text2xml, cleanupElement, findDefs, getHref, preventClickDefault,
   toXml, getStrokedBBoxDefaultVisible, encode64, createObjectURL,
   dataURLToObjectURL, walkTree, getBBox as utilsGetBBox
-} from '../common/utilities.js';
+} from './utilities.js';
 import {
   transformPoint, transformListToTransform
-} from '../common/math.js';
-import {resetListMap} from '../common/svgtransformlist.js';
+} from './math.js';
+import {resetListMap} from './svgtransformlist.js';
 import {
   convertUnit, shortFloat, convertToNum
 } from '../common/units.js';

src/svgcanvas/svgcanvas.js

@@ -17,8 +17,7 @@
 import {Canvg as canvg} from 'canvg';
 import 'pathseg';
 
-import jQueryPluginSVG from '../common/jQuery.attr.js'; // Needed for SVG attribute setting and array form with `attr`
-import jQueryPluginDBox from './dbox.js';
+import jQueryPluginSVG from './jQuery.attr.js'; // Needed for SVG attribute setting and array form with `attr`
 
 import * as pathModule from './path.js';
 import * as hstry from './history.js';
@@ -78,12 +77,13 @@ import {
   findDefs, getHref, setHref, getRefElem, getRotationAngle, getPathBBox,
   preventClickDefault, walkTree, getBBoxOfElementAsPath, convertToPath, encode64, decode64,
   getVisibleElements, dropXMLInternalSubset, init as utilsInit,
-  getBBox as utilsGetBBox, getStrokedBBoxDefaultVisible, isNullish
-} from '../common/utilities.js';
+  getBBox as utilsGetBBox, getStrokedBBoxDefaultVisible, isNullish, blankPageObjectURL,
+  $id, $qa, $qq
+} from './utilities.js';
 import {
   transformPoint, matrixMultiply, hasMatrixTransform, transformListToTransform,
   isIdentity, transformBox
-} from '../common/math.js';
+} from './math.js';
 import {
   convertToNum, getTypeMap, init as unitsInit
 } from '../common/units.js';
@@ -97,7 +97,7 @@ import {
 } from '../common/browser.js'; // , supportsEditableText
 import {
   getTransformList, SVGTransformList as SVGEditTransformList
-} from '../common/svgtransformlist.js';
+} from './svgtransformlist.js';
 import {
   remapElement,
   init as coordsInit
@@ -116,7 +116,7 @@ import {
   init as clearInit
 } from './clear.js';
 
-let $ = jQueryPluginSVG(jQuery);
+const $ = jQueryPluginSVG(jQuery);
 const {
   MoveElementCommand, InsertElementCommand, RemoveElementCommand,
   ChangeElementCommand, BatchCommand
@@ -168,7 +168,7 @@ if (window.opera) {
 class SvgCanvas {
   /**
   * @param {HTMLElement} container - The container HTML element that should hold the SVG root element
-  * @param {module:SVGEditor.curConfig} config - An object that contains configuration data
+  * @param {module:SVGeditor.configObj.curConfig} config - An object that contains configuration data
   */
   constructor (container, config) {
   // Alias Namespace constants
@@ -1740,7 +1740,6 @@ class SvgCanvas {
 */
     this.setUiStrings = function (strs) {
       Object.assign(uiStrings, strs.notification);
-      $ = jQueryPluginDBox($, strs.common);
       pathModule.setUiStrings(strs);
     };
 
@@ -2743,4 +2742,14 @@ class SvgCanvas {
   } // End constructor
 } // End class
 
+// attach utilities function to the class that are used by SvgEdit so
+// we can avoid using the whole utilities.js file in svgEdit.js
+SvgCanvas.isNullish = isNullish;
+SvgCanvas.encode64 = encode64;
+SvgCanvas.decode64 = decode64;
+SvgCanvas.$id = $id;
+SvgCanvas.$qq = $qq;
+SvgCanvas.$qa = $qa;
+SvgCanvas.blankPageObjectURL = blankPageObjectURL;
+
 export default SvgCanvas;

src/svgcanvas/svgroot.js

@@ -6,7 +6,7 @@
  * @copyright 2010 Alexis Deveria, 2010 Jeff Schiller
  */
 import {NS} from '../common/namespaces.js';
-import {text2xml} from '../common/utilities.js';
+import {text2xml} from './utilities.js';
 
 /**
 * @function module:svgcanvas.svgRootElement svgRootElement the svg node and its children.

src/svgcanvas/svgtransformlist.js

@@ -0,0 +1,393 @@
+/**
+ * Partial polyfill of `SVGTransformList`
+ * @module SVGTransformList
+ *
+ * @license MIT
+ *
+ * @copyright 2010 Alexis Deveria, 2010 Jeff Schiller
+ */
+
+import {NS} from '../common/namespaces.js';
+import {supportsNativeTransformLists} from '../common/browser.js';
+
+const svgroot = document.createElementNS(NS.SVG, 'svg');
+
+/**
+ * Helper function to convert `SVGTransform` to a string.
+ * @param {SVGTransform} xform
+ * @returns {string}
+ */
+function transformToString (xform) {
+  const m = xform.matrix;
+  let text = '';
+  switch (xform.type) {
+  case 1: // MATRIX
+    text = 'matrix(' + [m.a, m.b, m.c, m.d, m.e, m.f].join(',') + ')';
+    break;
+  case 2: // TRANSLATE
+    text = 'translate(' + m.e + ',' + m.f + ')';
+    break;
+  case 3: // SCALE
+    text = (m.a === m.d) ? `scale(${m.a})` : `scale(${m.a},${m.d})`;
+    break;
+  case 4: { // ROTATE
+    let cx = 0;
+    let cy = 0;
+    // this prevents divide by zero
+    if (xform.angle !== 0) {
+      const K = 1 - m.a;
+      cy = (K * m.f + m.b * m.e) / (K * K + m.b * m.b);
+      cx = (m.e - m.b * cy) / K;
+    }
+    text = 'rotate(' + xform.angle + ' ' + cx + ',' + cy + ')';
+    break;
+  }
+  }
+  return text;
+}
+
+/**
+ * Map of SVGTransformList objects.
+ */
+let listMap_ = {};
+
+/**
+* @interface module:SVGTransformList.SVGEditTransformList
+* @property {Integer} numberOfItems unsigned long
+*/
+/**
+* @function module:SVGTransformList.SVGEditTransformList#clear
+* @returns {void}
+*/
+/**
+* @function module:SVGTransformList.SVGEditTransformList#initialize
+* @param {SVGTransform} newItem
+* @returns {SVGTransform}
+*/
+/**
+* DOES NOT THROW DOMException, INDEX_SIZE_ERR.
+* @function module:SVGTransformList.SVGEditTransformList#getItem
+* @param {Integer} index unsigned long
+* @returns {SVGTransform}
+*/
+/**
+* DOES NOT THROW DOMException, INDEX_SIZE_ERR.
+* @function module:SVGTransformList.SVGEditTransformList#insertItemBefore
+* @param {SVGTransform} newItem
+* @param {Integer} index unsigned long
+* @returns {SVGTransform}
+*/
+/**
+* DOES NOT THROW DOMException, INDEX_SIZE_ERR.
+* @function module:SVGTransformList.SVGEditTransformList#replaceItem
+* @param {SVGTransform} newItem
+* @param {Integer} index unsigned long
+* @returns {SVGTransform}
+*/
+/**
+* DOES NOT THROW DOMException, INDEX_SIZE_ERR.
+* @function module:SVGTransformList.SVGEditTransformList#removeItem
+* @param {Integer} index unsigned long
+* @returns {SVGTransform}
+*/
+/**
+* @function module:SVGTransformList.SVGEditTransformList#appendItem
+* @param {SVGTransform} newItem
+* @returns {SVGTransform}
+*/
+/**
+* NOT IMPLEMENTED.
+* @ignore
+* @function module:SVGTransformList.SVGEditTransformList#createSVGTransformFromMatrix
+* @param {SVGMatrix} matrix
+* @returns {SVGTransform}
+*/
+/**
+* NOT IMPLEMENTED.
+* @ignore
+* @function module:SVGTransformList.SVGEditTransformList#consolidate
+* @returns {SVGTransform}
+*/
+
+/**
+* SVGTransformList implementation for Webkit.
+* These methods do not currently raise any exceptions.
+* These methods also do not check that transforms are being inserted.  This is basically
+* implementing as much of SVGTransformList that we need to get the job done.
+* @implements {module:SVGTransformList.SVGEditTransformList}
+*/
+export class SVGTransformList { // eslint-disable-line no-shadow
+  /**
+  * @param {Element} elem
+  * @returns {SVGTransformList}
+  */
+  constructor (elem) {
+    this._elem = elem || null;
+    this._xforms = [];
+    // TODO: how do we capture the undo-ability in the changed transform list?
+    this._update = function () {
+      let tstr = '';
+      // /* const concatMatrix = */ svgroot.createSVGMatrix();
+      for (let i = 0; i < this.numberOfItems; ++i) {
+        const xform = this._list.getItem(i);
+        tstr += transformToString(xform) + ' ';
+      }
+      this._elem.setAttribute('transform', tstr);
+    };
+    this._list = this;
+    this._init = function () {
+      // Transform attribute parser
+      let str = this._elem.getAttribute('transform');
+      if (!str) { return; }
+
+      // TODO: Add skew support in future
+      const re = /\s*((scale|matrix|rotate|translate)\s*\(.*?\))\s*,?\s*/;
+      // const re = /\s*(?<xform>(?:scale|matrix|rotate|translate)\s*\(.*?\))\s*,?\s*/;
+      let m = true;
+      while (m) {
+        m = str.match(re);
+        str = str.replace(re, '');
+        if (m && m[1]) {
+          const x = m[1];
+          const bits = x.split(/\s*\(/);
+          const name = bits[0];
+          const valBits = bits[1].match(/\s*(.*?)\s*\)/);
+          valBits[1] = valBits[1].replace(/(\d)-/g, '$1 -');
+          const valArr = valBits[1].split(/[, ]+/);
+          const letters = 'abcdef'.split('');
+          /*
+        if (m && m.groups.xform) {
+          const x = m.groups.xform;
+          const [name, bits] = x.split(/\s*\(/);
+          const valBits = bits.match(/\s*(?<nonWhitespace>.*?)\s*\)/);
+          valBits.groups.nonWhitespace = valBits.groups.nonWhitespace.replace(
+            /(?<digit>\d)-/g, '$<digit> -'
+          );
+          const valArr = valBits.groups.nonWhitespace.split(/[, ]+/);
+          const letters = [...'abcdef'];
+          */
+          const mtx = svgroot.createSVGMatrix();
+          Object.values(valArr).forEach(function (item, i) {
+            valArr[i] = Number.parseFloat(item);
+            if (name === 'matrix') {
+              mtx[letters[i]] = valArr[i];
+            }
+          });
+          const xform = svgroot.createSVGTransform();
+          const fname = 'set' + name.charAt(0).toUpperCase() + name.slice(1);
+          const values = name === 'matrix' ? [mtx] : valArr;
+
+          if (name === 'scale' && values.length === 1) {
+            values.push(values[0]);
+          } else if (name === 'translate' && values.length === 1) {
+            values.push(0);
+          } else if (name === 'rotate' && values.length === 1) {
+            values.push(0, 0);
+          }
+          xform[fname](...values);
+          this._list.appendItem(xform);
+        }
+      }
+    };
+    this._removeFromOtherLists = function (item) {
+      if (item) {
+        // Check if this transform is already in a transformlist, and
+        // remove it if so.
+        Object.values(listMap_).some((tl) => {
+          for (let i = 0, len = tl._xforms.length; i < len; ++i) {
+            if (tl._xforms[i] === item) {
+              tl.removeItem(i);
+              return true;
+            }
+          }
+          return false;
+        });
+      }
+    };
+
+    this.numberOfItems = 0;
+  }
+  /**
+  * @returns {void}
+  */
+  clear () {
+    this.numberOfItems = 0;
+    this._xforms = [];
+  }
+
+  /**
+  * @param {SVGTransform} newItem
+  * @returns {void}
+  */
+  initialize (newItem) {
+    this.numberOfItems = 1;
+    this._removeFromOtherLists(newItem);
+    this._xforms = [newItem];
+  }
+
+  /**
+  * @param {Integer} index unsigned long
+  * @throws {Error}
+  * @returns {SVGTransform}
+  */
+  getItem (index) {
+    if (index < this.numberOfItems && index >= 0) {
+      return this._xforms[index];
+    }
+    const err = new Error('DOMException with code=INDEX_SIZE_ERR');
+    err.code = 1;
+    throw err;
+  }
+
+  /**
+  * @param {SVGTransform} newItem
+  * @param {Integer} index unsigned long
+  * @returns {SVGTransform}
+  */
+  insertItemBefore (newItem, index) {
+    let retValue = null;
+    if (index >= 0) {
+      if (index < this.numberOfItems) {
+        this._removeFromOtherLists(newItem);
+        const newxforms = new Array(this.numberOfItems + 1);
+        // TODO: use array copying and slicing
+        let i;
+        for (i = 0; i < index; ++i) {
+          newxforms[i] = this._xforms[i];
+        }
+        newxforms[i] = newItem;
+        for (let j = i + 1; i < this.numberOfItems; ++j, ++i) {
+          newxforms[j] = this._xforms[i];
+        }
+        this.numberOfItems++;
+        this._xforms = newxforms;
+        retValue = newItem;
+        this._list._update();
+      } else {
+        retValue = this._list.appendItem(newItem);
+      }
+    }
+    return retValue;
+  }
+
+  /**
+  * @param {SVGTransform} newItem
+  * @param {Integer} index unsigned long
+  * @returns {SVGTransform}
+  */
+  replaceItem (newItem, index) {
+    let retValue = null;
+    if (index < this.numberOfItems && index >= 0) {
+      this._removeFromOtherLists(newItem);
+      this._xforms[index] = newItem;
+      retValue = newItem;
+      this._list._update();
+    }
+    return retValue;
+  }
+
+  /**
+  * @param {Integer} index unsigned long
+  * @throws {Error}
+  * @returns {SVGTransform}
+  */
+  removeItem (index) {
+    if (index < this.numberOfItems && index >= 0) {
+      const retValue = this._xforms[index];
+      const newxforms = new Array(this.numberOfItems - 1);
+      let i;
+      for (i = 0; i < index; ++i) {
+        newxforms[i] = this._xforms[i];
+      }
+      for (let j = i; j < this.numberOfItems - 1; ++j, ++i) {
+        newxforms[j] = this._xforms[i + 1];
+      }
+      this.numberOfItems--;
+      this._xforms = newxforms;
+      this._list._update();
+      return retValue;
+    }
+    const err = new Error('DOMException with code=INDEX_SIZE_ERR');
+    err.code = 1;
+    throw err;
+  }
+
+  /**
+  * @param {SVGTransform} newItem
+  * @returns {SVGTransform}
+  */
+  appendItem (newItem) {
+    this._removeFromOtherLists(newItem);
+    this._xforms.push(newItem);
+    this.numberOfItems++;
+    this._list._update();
+    return newItem;
+  }
+}
+
+/**
+* @function module:SVGTransformList.resetListMap
+* @returns {void}
+*/
+export const resetListMap = function () {
+  listMap_ = {};
+};
+
+/**
+ * Removes transforms of the given element from the map.
+ * @function module:SVGTransformList.removeElementFromListMap
+ * @param {Element} elem - a DOM Element
+ * @returns {void}
+ */
+export let removeElementFromListMap = function (elem) { // eslint-disable-line import/no-mutable-exports
+  if (elem.id && listMap_[elem.id]) {
+    delete listMap_[elem.id];
+  }
+};
+
+/**
+* Returns an object that behaves like a `SVGTransformList` for the given DOM element.
+* @function module:SVGTransformList.getTransformList
+* @param {Element} elem - DOM element to get a transformlist from
+* @todo The polyfill should have `SVGAnimatedTransformList` and this should use it
+* @returns {SVGAnimatedTransformList|SVGTransformList}
+*/
+export const getTransformList = function (elem) {
+  if (!supportsNativeTransformLists()) {
+    const id = elem.id || 'temp';
+    let t = listMap_[id];
+    if (!t || id === 'temp') {
+      listMap_[id] = new SVGTransformList(elem);
+      listMap_[id]._init();
+      t = listMap_[id];
+    }
+    return t;
+  }
+  if (elem.transform) {
+    return elem.transform.baseVal;
+  }
+  if (elem.gradientTransform) {
+    return elem.gradientTransform.baseVal;
+  }
+  if (elem.patternTransform) {
+    return elem.patternTransform.baseVal;
+  }
+
+  return null;
+};
+
+/**
+* @callback module:SVGTransformList.removeElementFromListMap
+* @param {Element} elem
+* @returns {void}
+*/
+/**
+* Replace `removeElementFromListMap` for unit-testing.
+* @function module:SVGTransformList.changeRemoveElementFromListMap
+* @param {module:SVGTransformList.removeElementFromListMap} cb Passed a single argument `elem`
+* @returns {void}
+*/
+
+export const changeRemoveElementFromListMap = function (cb) { // eslint-disable-line promise/prefer-await-to-callbacks
+  removeElementFromListMap = cb;
+};

src/svgcanvas/text-actions.js

@@ -6,14 +6,14 @@
  * @copyright 2010 Alexis Deveria, 2010 Jeff Schiller
  */
 
-import jQueryPluginSVG from '../common/jQuery.attr.js';
+import jQueryPluginSVG from './jQuery.attr.js';
 import {NS} from '../common/namespaces.js';
 import {
   transformPoint, getMatrix
-} from '../common/math.js';
+} from './math.js';
 import {
   assignAttributes, getElem, getBBox as utilsGetBBox
-} from '../common/utilities.js';
+} from './utilities.js';
 import {
   supportsGoodTextCharPos
 } from '../common/browser.js';
@@ -263,15 +263,6 @@ export const textActionsMethod = (function () {
     return out;
   }
 
-  /*
-// Not currently in use
-function hideCursor () {
-if (cursor) {
-cursor.setAttribute('visibility', 'hidden');
-}
-}
-*/
-
   /**
 *
 * @param {Event} evt

src/svgcanvas/undo.js

@@ -8,16 +8,16 @@ import * as draw from './draw.js';
 import * as hstry from './history.js';
 import {
   getRotationAngle, getBBox as utilsGetBBox, isNullish, setHref, getStrokedBBoxDefaultVisible
-} from '../common/utilities.js';
+} from './utilities.js';
 import {
   isGecko
 } from '../common/browser.js';
 import {
   transformPoint, transformListToTransform
-} from '../common/math.js';
+} from './math.js';
 import {
   getTransformList
-} from '../common/svgtransformlist.js';
+} from './svgtransformlist.js';
 
 const {
   UndoManager, HistoryEventTypes