@joint/core 4.1.2 → 4.2.0-alpha.0

package/src/V/create.mjs

@@ -0,0 +1,51 @@
+import * as ns from './namespace.mjs';
+
+/**
+ * @constant {boolean}
+ * @description Indicates the environment supports SVG.
+ */
+export const isSVGSupported = typeof window === 'object' && !!window.SVGAngle;
+
+/**
+ * @constant {string}
+ * @description The version of the SVG document.
+ */
+export const SVG_VERSION = '1.1';
+
+/**
+ * @constant {SVGSVGElement}
+ * @description The detached SVG document for various internal purposes.
+ * e.g. SVGMatrix has no constructor, so the only way to create it is
+ * to create an SVG document and then call `createSVGMatrix()`.
+ */
+export const internalSVGDocument = isSVGSupported
+    ? createSVGDocument()
+    : null;
+
+/**
+ * @constant {SVGGElement}
+ * @description The detached SVG group element for various internal purposes.
+ */
+export const internalSVGGroup = isSVGSupported
+    ? createSVGElement('g')
+    : null;
+
+/**
+ * @returns {SVGSVGElement}
+ * @description Creates an SVG document.
+ */
+export function createSVGDocument() {
+    const svg = createSVGElement('svg');
+    svg.setAttributeNS(ns.xmlns, 'xmlns:xlink', ns.xlink);
+    svg.setAttribute('version', SVG_VERSION);
+    return svg;
+}
+
+/**
+ * @param {string} name
+ * @returns {SVGElement}
+ * @description Creates an SVG element with the given name.
+ */
+export function createSVGElement(name) {
+    return document.createElementNS(ns.svg, name);
+}

package/src/V/index.mjs

@@ -5,13 +5,20 @@
 // The only Vectorizer dependency is the Geometry library.
 
 import * as g from '../g/index.mjs';
+import * as ns from './namespace.mjs';
+import { isSVGSupported, internalSVGDocument, SVG_VERSION, createSVGDocument, createSVGElement } from './create.mjs';
+import {
+    createIdentityMatrix, createMatrix, getNodeMatrix, isSVGMatrix,
+    getRelativeTransformation, getRelativeTransformationSafe,
+    matrixToTransformString, createMatrixFromTransformString,
+    transformNode, replaceTransformNode,
+} from './transform.mjs';
+import { getCommonAncestor } from './traverse.mjs';
 
 const V = (function() {
 
-    var hasSvg = typeof window === 'object' && !!window.SVGAngle;
-
     // SVG support is required.
-    if (!hasSvg) {
+    if (!isSVGSupported) {
 
         // Return a function that throws an error when it is used.
         return function() {
@@ -19,17 +26,6 @@ const V = (function() {
         };
     }
 
-    // XML namespaces.
-    var ns = {
-        svg: 'http://www.w3.org/2000/svg',
-        xmlns: 'http://www.w3.org/2000/xmlns/',
-        xml: 'http://www.w3.org/XML/1998/namespace',
-        xlink: 'http://www.w3.org/1999/xlink',
-        xhtml: 'http://www.w3.org/1999/xhtml'
-    };
-
-    var SVGVersion = '1.1';
-
     // Declare shorthands to the most used math functions.
     var math = Math;
     var PI = math.PI;
@@ -92,7 +88,7 @@ const V = (function() {
 
             } else {
 
-                el = document.createElementNS(ns.svg, el);
+                el = createSVGElement(el);
             }
 
             V.ensureId(el);
@@ -125,37 +121,42 @@ const V = (function() {
      * @param {SVGGElement} toElem
      * @returns {SVGMatrix}
      */
-    VPrototype.getTransformToElement = function(target) {
-        var node = this.node;
-        if (V.isSVGGraphicsElement(target) && V.isSVGGraphicsElement(node)) {
-            var targetCTM = V.toNode(target).getScreenCTM();
-            var nodeCTM = node.getScreenCTM();
-            if (targetCTM && nodeCTM) {
-                return targetCTM.inverse().multiply(nodeCTM);
+    VPrototype.getTransformToElement = function(target, opt) {
+        const node = this.node;
+        const targetNode = V.toNode(target);
+        let m;
+        if (V.isSVGGraphicsElement(targetNode) && V.isSVGGraphicsElement(node)) {
+            if (opt && opt.safe) {
+                // Use the traversal method to get the transformation matrix.
+                m = getRelativeTransformationSafe(node, targetNode);
+            } else {
+                m = getRelativeTransformation(node, targetNode);
             }
         }
-        // Could not get actual transformation matrix
-        return V.createSVGMatrix();
+        return m || createIdentityMatrix();
     };
 
+
     /**
      * @param {SVGMatrix} matrix
      * @param {Object=} opt
      * @returns {Vectorizer|SVGMatrix} Setter / Getter
      */
     VPrototype.transform = function(matrix, opt) {
+        const node = this.node;
 
-        var node = this.node;
+        // Getter
         if (V.isUndefined(matrix)) {
-            return V.transformStringToMatrix(this.attr('transform'));
+            return getNodeMatrix(node) || createIdentityMatrix();
         }
 
+        // Setter
         if (opt && opt.absolute) {
-            return this.attr('transform', V.matrixToTransformString(matrix));
+            replaceTransformNode(node, matrix);
+        } else {
+            transformNode(node, matrix);
         }
 
-        var svgTransform = V.createSVGTransform(matrix);
-        node.transform.baseVal.appendItem(svgTransform);
         return this;
     };
 
@@ -250,7 +251,7 @@ const V = (function() {
 
             box = node.getBBox();
 
-        } catch (e) {
+        } catch {
 
             // Fallback for IE.
             box = {
@@ -303,7 +304,7 @@ const V = (function() {
         if (!options.recursive) {
             try {
                 outputBBox = node.getBBox();
-            } catch (e) {
+            } catch {
                 // Fallback for IE.
                 outputBBox = {
                     x: node.clientLeft,
@@ -924,9 +925,9 @@ const V = (function() {
             var globalPoint = p.matrixTransform(svg.getScreenCTM().inverse());
             var globalToLocalMatrix = this.getTransformToElement(svg).inverse();
 
-        } catch (e) {
+        } catch {
             // IE9 throws an exception in odd cases. (`Unexpected call to method or property access`)
-            // We have to make do with the original coordianates.
+            // We have to make do with the original coordinates.
             return p;
         }
 
@@ -986,7 +987,7 @@ const V = (function() {
                     translateToOrigin.matrix.multiply(
                         ctm.scale(scale.sx, scale.sy)))));
 
-        this.attr('transform', V.matrixToTransformString(transform.matrix));
+        this.attr('transform', matrixToTransformString(transform.matrix));
 
         return this;
     };
@@ -1004,7 +1005,7 @@ const V = (function() {
         this.append(animateMotion);
         try {
             animateMotion.node.beginElement();
-        } catch (e) {
+        } catch {
             // Fallback for IE 9.
             // Run the animation programmatically if FakeSmile (`http://leunen.me/fakesmile/`) present
             if (document.documentElement.getAttribute('smiling') === 'fake') {
@@ -1287,15 +1288,12 @@ const V = (function() {
     V.createSvgDocument = function(content) {
 
         if (content) {
-            const XMLString = `<svg xmlns="${ns.svg}" xmlns:xlink="${ns.xlink}" version="${SVGVersion}">${content}</svg>`;
+            const XMLString = `<svg xmlns="${ns.svg}" xmlns:xlink="${ns.xlink}" version="${SVG_VERSION}">${content}</svg>`;
             const { documentElement } = V.parseXML(XMLString, { async: false });
             return documentElement;
         }
 
-        const svg = document.createElementNS(ns.svg, 'svg');
-        svg.setAttributeNS(ns.xmlns, 'xmlns:xlink', ns.xlink);
-        svg.setAttribute('version', SVGVersion);
-        return svg;
+        return createSVGDocument();
     };
 
     V.createSVGStyle = function(stylesheet) {
@@ -1370,7 +1368,7 @@ const V = (function() {
             }
 
             xml = parser.parseFromString(data, 'text/xml');
-        } catch (error) {
+        } catch {
             xml = undefined;
         }
 
@@ -1389,6 +1387,7 @@ const V = (function() {
     // List of attributes for which not to split camel case words.
     // It contains known SVG attribute names and may be extended with user-defined attribute names.
     [
+        'attributeName',
         'baseFrequency',
         'baseProfile',
         'clipPathUnits',
@@ -1426,6 +1425,7 @@ const V = (function() {
         'refY',
         'requiredExtensions',
         'requiredFeatures',
+        'repeatCount',
         'specularConstant',
         'specularExponent',
         'spreadMethod',
@@ -1442,7 +1442,7 @@ const V = (function() {
         'viewTarget', // deprecated
         'xChannelSelector',
         'yChannelSelector',
-        'zoomAndPan' // deprecated
+        'zoomAndPan', // deprecated
     ].forEach((name) => _attributeNames[name] = name);
 
     _attributeNames['xlinkShow'] = 'xlink:show';
@@ -1511,108 +1511,22 @@ const V = (function() {
     // ReDoS mitigation: Use an anchor at the beginning of the match
     // ReDoS mitigation: Avoid backtracking (uses `[^()]+` instead of `.*?`)
     // ReDoS mitigation: Don't match initial `(` inside repeated part
-    // The following regex needs to use /g (= cannot use capturing groups)
-    V.transformRegex = /\b\w+\([^()]+\)/g;
     // The following regexes need to use capturing groups (= cannot use /g)
     V.transformFunctionRegex = /\b(\w+)\(([^()]+)\)/;
     V.transformTranslateRegex = /\btranslate\(([^()]+)\)/;
     V.transformRotateRegex = /\brotate\(([^()]+)\)/;
     V.transformScaleRegex = /\bscale\(([^()]+)\)/;
 
-    V.transformStringToMatrix = function(transform) {
-
-        // Initialize result matrix as identity matrix
-        let transformationMatrix = V.createSVGMatrix();
-
-        // Note: Multiple transform functions are allowed in `transform` string
-        // `match()` returns `null` if none found
-        const transformMatches = transform && transform.match(V.transformRegex);
-        if (!transformMatches) {
-            // Return identity matrix
-            return transformationMatrix;
-        }
-
-        const numMatches = transformMatches.length;
-        for (let i = 0; i < numMatches; i++) {
-
-            const transformMatch = transformMatches[i];
-            // Use same regex as above, but with capturing groups
-            // `match()` returns values of capturing groups as `[1]`, `[2]`
-            const transformFunctionMatch = transformMatch.match(V.transformFunctionRegex);
-            if (transformFunctionMatch) {
-
-                let sx, sy, tx, ty, angle;
-                let ctm = V.createSVGMatrix();
-                const transformFunction = transformFunctionMatch[1].toLowerCase();
-                const args = transformFunctionMatch[2].split(V.transformSeparatorRegex);
-                switch (transformFunction) {
-
-                    case 'scale':
-                        sx = parseFloat(args[0]);
-                        sy = (args[1] === undefined) ? sx : parseFloat(args[1]);
-                        ctm = ctm.scaleNonUniform(sx, sy);
-                        break;
-
-                    case 'translate':
-                        tx = parseFloat(args[0]);
-                        ty = parseFloat(args[1]);
-                        ctm = ctm.translate(tx, ty);
-                        break;
-
-                    case 'rotate':
-                        angle = parseFloat(args[0]);
-                        tx = parseFloat(args[1]) || 0;
-                        ty = parseFloat(args[2]) || 0;
-                        if (tx !== 0 || ty !== 0) {
-                            ctm = ctm.translate(tx, ty).rotate(angle).translate(-tx, -ty);
-                        } else {
-                            ctm = ctm.rotate(angle);
-                        }
-                        break;
-
-                    case 'skewx':
-                        angle = parseFloat(args[0]);
-                        ctm = ctm.skewX(angle);
-                        break;
-
-                    case 'skewy':
-                        angle = parseFloat(args[0]);
-                        ctm = ctm.skewY(angle);
-                        break;
-
-                    case 'matrix':
-                        ctm.a = parseFloat(args[0]);
-                        ctm.b = parseFloat(args[1]);
-                        ctm.c = parseFloat(args[2]);
-                        ctm.d = parseFloat(args[3]);
-                        ctm.e = parseFloat(args[4]);
-                        ctm.f = parseFloat(args[5]);
-                        break;
-
-                    default:
-                        continue;
-                }
-
-                // Multiply current transformation into result matrix
-                transformationMatrix = transformationMatrix.multiply(ctm);
-            }
 
+    V.transformStringToMatrix = function(transform) {
+        let matrix;
+        if (V.isString(transform)) {
+            matrix = createMatrixFromTransformString(transform);
         }
-        return transformationMatrix;
+        return matrix || createIdentityMatrix();
     };
 
-    V.matrixToTransformString = function(matrix) {
-        matrix || (matrix = true);
-
-        return 'matrix(' +
-            (matrix.a !== undefined ? matrix.a : 1) + ',' +
-            (matrix.b !== undefined ? matrix.b : 0) + ',' +
-            (matrix.c !== undefined ? matrix.c : 0) + ',' +
-            (matrix.d !== undefined ? matrix.d : 1) + ',' +
-            (matrix.e !== undefined ? matrix.e : 0) + ',' +
-            (matrix.f !== undefined ? matrix.f : 0) +
-            ')';
-    };
+    V.matrixToTransformString = matrixToTransformString;
 
     V.parseTransformString = function(transform) {
 
@@ -1780,35 +1694,25 @@ const V = (function() {
         return node instanceof SVGElement && typeof node.getScreenCTM === 'function';
     };
 
-    var svgDocument = V('svg').node;
-
-    V.createSVGMatrix = function(matrix) {
-
-        var svgMatrix = svgDocument.createSVGMatrix();
-        for (var component in matrix) {
-            svgMatrix[component] = matrix[component];
-        }
-
-        return svgMatrix;
-    };
+    V.createSVGMatrix = createMatrix;
 
     V.createSVGTransform = function(matrix) {
 
         if (!V.isUndefined(matrix)) {
 
-            if (!(matrix instanceof SVGMatrix)) {
-                matrix = V.createSVGMatrix(matrix);
+            if (!isSVGMatrix(matrix)) {
+                matrix = createMatrix(matrix);
             }
 
-            return svgDocument.createSVGTransformFromMatrix(matrix);
+            return internalSVGDocument.createSVGTransformFromMatrix(matrix);
         }
 
-        return svgDocument.createSVGTransform();
+        return internalSVGDocument.createSVGTransform();
     };
 
     V.createSVGPoint = function(x, y) {
 
-        var p = svgDocument.createSVGPoint();
+        var p = internalSVGDocument.createSVGPoint();
         p.x = x;
         p.y = y;
         return p;
@@ -1816,7 +1720,7 @@ const V = (function() {
 
     V.transformRect = function(r, matrix) {
 
-        var p = svgDocument.createSVGPoint();
+        var p = internalSVGDocument.createSVGPoint();
 
         p.x = r.x;
         p.y = r.y;
@@ -2083,8 +1987,8 @@ const V = (function() {
 
         line = V(line);
         var d = [
-            'M', line.attr('x1'), line.attr('y1'),
-            'L', line.attr('x2'), line.attr('y2')
+            'M', line.attr('x1') || '0', line.attr('y1') || '0',
+            'L', line.attr('x2') || '0', line.attr('y2') || '0'
         ].join(' ');
         return d;
     };
@@ -2635,7 +2539,18 @@ const V = (function() {
         };
     })();
 
-    V.namespace = ns;
+    /**
+     *
+     * @param {SVGElement|V} node1
+     * @param {SVGElement|V} node2
+     * @returns {SVGElement|null}
+     */
+    V.getCommonAncestor = function(node1, node2) {
+        if (!node1 || !node2) return null;
+        return getCommonAncestor(V.toNode(node1), V.toNode(node2));
+    };
+
+    V.namespace = { ...ns };
 
     V.g = g;
 

package/src/V/namespace.mjs

@@ -0,0 +1,9 @@
+export const svg = 'http://www.w3.org/2000/svg';
+
+export const xmlns = 'http://www.w3.org/2000/xmlns/';
+
+export const xml = 'http://www.w3.org/XML/1998/namespace';
+
+export const xlink = 'http://www.w3.org/1999/xlink';
+
+export const xhtml = 'http://www.w3.org/1999/xhtml';

package/src/V/transform.mjs

@@ -0,0 +1,183 @@
+import { internalSVGDocument, internalSVGGroup } from './create.mjs';
+import { getCommonAncestor } from './traverse.mjs';
+
+/**
+ * @returns {SVGMatrix}
+ * @description Creates an identity matrix.
+ */
+export function createIdentityMatrix() {
+    return internalSVGDocument.createSVGMatrix();
+}
+
+/**
+ * @param {Partial<SVGMatrix>} matrixInit
+ * @returns {SVGMatrix}
+ * @description Creates a new SVGMatrix object.
+ * If no matrix is provided, it returns the identity matrix.
+ * If a matrix like object is provided, it sets the matrix values.
+ */
+export function createMatrix(matrixInit = {}) {
+    const matrix = internalSVGDocument.createSVGMatrix();
+    if (!matrixInit) return matrix;
+    if ('a' in matrixInit) matrix.a = matrixInit.a;
+    if ('b' in matrixInit) matrix.b = matrixInit.b;
+    if ('c' in matrixInit) matrix.c = matrixInit.c;
+    if ('d' in matrixInit) matrix.d = matrixInit.d;
+    if ('e' in matrixInit) matrix.e = matrixInit.e;
+    if ('f' in matrixInit) matrix.f = matrixInit.f;
+    return matrix;
+}
+
+/**
+ * @returns {SVGTransform}
+ * @description Creates a new SVGTransform object.
+ */
+export function createSVGTransform() {
+    return internalSVGDocument.createSVGTransform();
+}
+
+/**
+ * @param {SVGElement} node
+ * @returns {SVGMatrix|null}
+ * @description Returns the transformation matrix of the given node.
+ * If the node has no transformation, it returns null.
+ */
+export function getNodeMatrix(node) {
+    const consolidatedTransformation = node.transform.baseVal.consolidate();
+    return consolidatedTransformation ? consolidatedTransformation.matrix : null;
+}
+
+/**
+ * @param {string} transformString
+ * @returns {SVGMatrix}
+ * @description Creates a matrix from the given transform string.
+ */
+export function createMatrixFromTransformString(transformString) {
+    internalSVGGroup.setAttribute('transform', transformString);
+    return getNodeMatrix(internalSVGGroup);
+}
+
+/**
+ * @param {SVGElement} node
+ * @param {Partial<SVGMatrix>} matrixInit
+ * @param {boolean} override
+ * @description Sets the transformation matrix of the given node.
+ * We don't use `node.transform.baseVal` here (@see `transformNode`)
+ * for the following reasons:
+ * - Performance: while Chrome performs slightly better, Firefox
+ *   and Safari are significantly slower
+ *   https://www.measurethat.net/Benchmarks/Show/34447/1/overriding-svg-transform-attribute
+ * - Limited support: JSDOM does not support `node.transform.baseVal`
+ */
+export function replaceTransformNode(node, matrixInit) {
+    node.setAttribute('transform', matrixToTransformString(matrixInit));
+}
+
+/**
+ * @param {SVGElement} node
+ * @param {Partial<SVGMatrix>} matrixInit
+ * @description Applies a transformation matrix to the given node.
+ * If the node already has a transformation, it appends the new transformation.
+ * If the node has no transformation, it creates a new one.
+ */
+export function transformNode(node, matrixInit) {
+    const transform = createSVGTransform();
+    const matrix = isSVGMatrix(matrixInit) ? matrixInit : createMatrix(matrixInit);
+    transform.setMatrix(matrix);
+    node.transform.baseVal.appendItem(transform);
+}
+
+const MATRIX_TYPE = '[object SVGMatrix]';
+
+/**
+ * @param {any} obj
+ * @returns {boolean}
+ * @description Checks if the given object is an SVGMatrix.
+ */
+export function isSVGMatrix(obj) {
+    return Object.prototype.toString.call(obj) === MATRIX_TYPE;
+}
+
+/**
+ * @param {Partial<SVGMatrix>} matrixInit
+ * @returns {string}
+ * @description Converts a matrix to a transform string.
+ * If no matrix is provided, it returns the identity matrix string.
+ */
+export function matrixToTransformString(matrixInit = {}) {
+    const { a = 1, b = 0, c = 0, d = 1, e = 0, f = 0 } = matrixInit;
+    return `matrix(${a},${b},${c},${d},${e},${f})`;
+}
+
+/**
+ *
+ * @param {SVGElement} a
+ * @param {SVGElement} b
+ * @returns {SVGMatrix|null}
+ * @description Finds the transformation matrix from `a` to `b`.
+ * It requires that both elements to be visible (in the render tree)
+ * in order to calculate the correct transformation matrix.
+ */
+export function getRelativeTransformation(a, b) {
+    // Different SVG elements, no transformation possible
+    // Note: SVGSVGElement has no `ownerSVGElement`
+    if ((a.ownerSVGElement || a) !== (b.ownerSVGElement || b)) return null;
+    // Get the transformation matrix from `a` to `b`.
+    const am = b.getScreenCTM();
+    if (!am) return null;
+    const bm = a.getScreenCTM();
+    if (!bm) return null;
+    return am.inverse().multiply(bm);
+}
+
+/**
+ * @param {SVGElement} a
+ * @param {SVGElement} b
+ * @returns {SVGMatrix|null}
+ * @description Finds the transformation matrix from `a` to `b`.
+ * A safe way to calculate the transformation matrix between two elements.
+ * It does not require the elements to be visible (in the render tree).
+ */
+export function getRelativeTransformationSafe(a, b) {
+    if (a === b) {
+        // No transformation needed
+        return createIdentityMatrix();
+    }
+    const position = a.compareDocumentPosition(b);
+    if (position & Node.DOCUMENT_POSITION_CONTAINED_BY) {
+        // `b` is a descendant of `a`
+        return getLinealTransformation(a, b).inverse();
+    } else if (position & Node.DOCUMENT_POSITION_CONTAINS) {
+        // `a` is a descendant of `b`
+        return getLinealTransformation(b, a);
+    }
+
+    const c = getCommonAncestor(a, b);
+    if (!c) {
+        // No common ancestor
+        return null;
+    }
+
+    const mca = getLinealTransformation(c, a);
+    const mcb = getLinealTransformation(c, b);
+    return mcb.inverse().multiply(mca);
+}
+
+/**
+ * @param {SVGElement} descendant
+ * @param {SVGElement} ancestor
+ * @returns {SVGMatrix}
+ * @description Finds the transformation matrix between the `ancestor` and `descendant`.
+ */
+function getLinealTransformation(ancestor, descendant) {
+    const transformations = [];
+    let n = descendant;
+    while (n && n.nodeType === Node.ELEMENT_NODE && n !== ancestor) {
+        const nm = getNodeMatrix(n);
+        if (nm) {
+            transformations.unshift(nm);
+        }
+        n = n.parentNode;
+    }
+    return transformations.reduce((m, t) => m.multiply(t), createIdentityMatrix());
+}

package/src/V/traverse.mjs

@@ -0,0 +1,16 @@
+/**
+ * @param {SVGElement} node1
+ * @param {SVGElement} node2
+ * @returns {SVGElement|null}
+ * @description Finds the common ancestor node of two nodes.
+ */
+export function getCommonAncestor(node1, node2) {
+    // Find the common ancestor node of two nodes.
+    let parent = node1;
+    do {
+        if (parent.contains(node2)) return parent;
+        parent = parent.parentNode;
+    } while (parent);
+    return null;
+}
+