@joint/core 4.1.2 → 4.2.0-alpha.0

package/src/anchors/index.mjs

@@ -2,20 +2,112 @@ import * as util from '../util/index.mjs';
 import { toRad } from '../g/index.mjs';
 import { resolveRef } from '../linkAnchors/index.mjs';
 
+const Side = {
+    LEFT: 'left',
+    RIGHT: 'right',
+    TOP: 'top',
+    BOTTOM: 'bottom',
+};
+
+const SideMode = {
+    PREFER_HORIZONTAL: 'prefer-horizontal',
+    PREFER_VERTICAL: 'prefer-vertical',
+    HORIZONTAL: 'horizontal',
+    VERTICAL: 'vertical',
+    AUTO: 'auto',
+};
+
+function getModelBBoxFromConnectedLink(element, link, endType, rotate) {
+
+    const portId = link.get(endType).port;
+    if (element.hasPort(portId)) {
+        return element.getPortBBox(portId, { rotate });
+    }
+
+    return element.getBBox({ rotate });
+}
+
+function getMiddleSide(rect, point, opt) {
+
+    const { preferenceThreshold = 0, mode } = opt;
+    const { x, y } = point;
+    const { x: left , y: top, width, height } = rect;
+
+    switch (mode) {
+
+        case SideMode.PREFER_VERTICAL: {
+            const {
+                top: topThreshold,
+                bottom: bottomThreshold
+            } = util.normalizeSides(preferenceThreshold);
+            const bottom = top + height;
+            if (y > top - topThreshold && y < bottom + bottomThreshold) {
+                const cx = left + width / 2;
+                return (x < cx) ? Side.LEFT : Side.RIGHT;
+            }
+        }
+        // eslint-disable-next-line no-fallthrough
+        case SideMode.VERTICAL: {
+            const cy = top + height / 2;
+            return (y < cy) ? Side.TOP : Side.BOTTOM;
+        }
+
+        case SideMode.PREFER_HORIZONTAL: {
+            const {
+                left: leftThreshold,
+                right: rightThreshold
+            } = util.normalizeSides(preferenceThreshold);
+            const right = left + width;
+            if (x > left - leftThreshold && x < right + rightThreshold) {
+                const cy = top + height / 2;
+                return (y < cy) ? Side.TOP : Side.BOTTOM;
+            }
+        }
+        // eslint-disable-next-line no-fallthrough
+        case SideMode.HORIZONTAL: {
+            const cx = left + width / 2;
+            return (x < cx) ? Side.LEFT : Side.RIGHT;
+        }
+
+        case SideMode.AUTO:
+        default: {
+            return rect.sideNearestToPoint(point);
+        }
+    }
+}
+
 function bboxWrapper(method) {
 
-    return function(view, magnet, ref, opt) {
+    return function(elementView, magnet, ref, opt, endType, linkView) {
+
+        const rotate = !!opt.rotate;
+        const element = elementView.model;
+        const link = linkView.model;
+        const angle = element.angle();
+
+        let bbox, center;
+        if (opt.useModelGeometry) {
+            bbox = getModelBBoxFromConnectedLink(element, link, endType, !rotate);
+            center = bbox.center();
+        } else {
+            center = element.getCenter();
+            bbox = (rotate) ? elementView.getNodeUnrotatedBBox(magnet) : elementView.getNodeBBox(magnet);
+        }
 
-        var rotate = !!opt.rotate;
-        var bbox = (rotate) ? view.getNodeUnrotatedBBox(magnet) : view.getNodeBBox(magnet);
-        var anchor = bbox[method]();
+        const anchor = bbox[method]();
 
-        var dx = opt.dx;
+        let dx = opt.dx;
         if (dx) {
-            var dxPercentage = util.isPercentage(dx);
-            dx = parseFloat(dx);
+            const isDxPercentage = util.isPercentage(dx);
+            if (!isDxPercentage && util.isCalcExpression(dx)) {
+                // calc expression
+                dx = Number(util.evalCalcExpression(dx, bbox));
+            } else {
+                // percentage or a number
+                dx = parseFloat(dx);
+            }
             if (isFinite(dx)) {
-                if (dxPercentage) {
+                if (isDxPercentage) {
                     dx /= 100;
                     dx *= bbox.width;
                 }
@@ -23,12 +115,18 @@ function bboxWrapper(method) {
             }
         }
 
-        var dy = opt.dy;
+        let dy = opt.dy;
         if (dy) {
-            var dyPercentage = util.isPercentage(dy);
-            dy = parseFloat(dy);
+            const isDyPercentage = util.isPercentage(dy);
+            if (!isDyPercentage && util.isCalcExpression(dy)) {
+                // calc expression
+                dy = Number(util.evalCalcExpression(dy, bbox));
+            } else {
+                // percentage or a number
+                dy = parseFloat(dy);
+            }
             if (isFinite(dy)) {
-                if (dyPercentage) {
+                if (isDyPercentage) {
                     dy /= 100;
                     dy *= bbox.height;
                 }
@@ -36,19 +134,27 @@ function bboxWrapper(method) {
             }
         }
 
-        return (rotate) ? anchor.rotate(view.model.getBBox().center(), -view.model.angle()) : anchor;
+        return (rotate) ? anchor.rotate(center, -angle) : anchor;
     };
 }
 
-function _perpendicular(view, magnet, refPoint, opt) {
+function _perpendicular(elementView, magnet, refPoint, opt, endType, linkView) {
 
-    var angle = view.model.angle();
-    var bbox = view.getNodeBBox(magnet);
-    var anchor = bbox.center();
-    var topLeft = bbox.origin();
-    var bottomRight = bbox.corner();
+    const element = elementView.model;
+    const angle = element.angle();
 
-    var padding = opt.padding;
+    let bbox;
+    if (opt.useModelGeometry) {
+        bbox = getModelBBoxFromConnectedLink(element, linkView.model, endType, true);
+    } else {
+        bbox = elementView.getNodeBBox(magnet);
+    }
+
+    const anchor = bbox.center();
+    const topLeft = bbox.origin();
+    const bottomRight = bbox.corner();
+
+    let padding = opt.padding;
     if (!isFinite(padding)) padding = 0;
 
     if ((topLeft.y + padding) <= refPoint.y && refPoint.y <= (bottomRight.y - padding)) {
@@ -64,16 +170,17 @@ function _perpendicular(view, magnet, refPoint, opt) {
     return anchor;
 }
 
-function _midSide(view, magnet, refPoint, opt) {
-
+function _midSide(view, magnet, refPoint, opt, endType, linkView) {
     var rotate = !!opt.rotate;
-    var bbox, angle, center;
-    if (rotate) {
-        bbox = view.getNodeUnrotatedBBox(magnet);
-        center = view.model.getBBox().center();
-        angle = view.model.angle();
+    var angle = view.model.angle();
+    var center = view.model.getCenter();
+
+    var bbox;
+    if (opt.useModelGeometry) {
+        bbox = getModelBBoxFromConnectedLink(view.model, linkView.model, endType, !rotate);
+        center = bbox.center();
     } else {
-        bbox = view.getNodeBBox(magnet);
+        bbox =  rotate ? view.getNodeUnrotatedBBox(magnet) : view.getNodeBBox(magnet);
     }
 
     var padding = opt.padding;
@@ -81,19 +188,19 @@ function _midSide(view, magnet, refPoint, opt) {
 
     if (rotate) refPoint.rotate(center, angle);
 
-    var side = bbox.sideNearestToPoint(refPoint);
+    var side = getMiddleSide(bbox, refPoint, opt);
     var anchor;
     switch (side) {
-        case 'left':
+        case Side.LEFT:
             anchor = bbox.leftMiddle();
             break;
-        case 'right':
+        case Side.RIGHT:
             anchor = bbox.rightMiddle();
             break;
-        case 'top':
+        case Side.TOP:
             anchor = bbox.topMiddle();
             break;
-        case 'bottom':
+        case Side.BOTTOM:
             anchor = bbox.bottomMiddle();
             break;
     }

package/src/cellTools/Boundary.mjs

@@ -35,7 +35,7 @@ export const Boundary = ToolView.extend({
             var angle = model.angle();
             if (angle) {
                 if (rotate) {
-                    var origin = model.getBBox().center();
+                    var origin = model.getCenter();
                     vel.rotate(angle, origin.x, origin.y, { absolute: true });
                 } else {
                     bbox = bbox.bbox(angle);

package/src/cellTools/Control.mjs

@@ -103,7 +103,7 @@ export const Control = ToolView.extend({
         const model = relatedView.model;
         const angle = model.angle();
         const center = bbox.center();
-        if (angle) center.rotate(model.getBBox().center(), -angle);
+        if (angle) center.rotate(model.getCenter(), -angle);
         bbox.inflate(padding);
         extrasNode.setAttribute('x', -bbox.width / 2);
         extrasNode.setAttribute('y', -bbox.height / 2);

package/src/connectionPoints/index.mjs

@@ -78,10 +78,12 @@ function anchorConnectionPoint(line, _view, _magnet, opt) {
 
 function bboxIntersection(line, view, magnet, opt) {
 
-    var bbox = view.getNodeBBox(magnet);
+    const bbox = (opt.useModelGeometry)
+        ? getNodeModelBBox(view, magnet, true)
+        : view.getNodeBBox(magnet);
     if (opt.stroke) bbox.inflate(stroke(magnet) / 2);
-    var intersections = line.intersect(bbox);
-    var cp = (intersections)
+    const intersections = line.intersect(bbox);
+    const cp = (intersections)
         ? line.start.chooseClosest(intersections)
         : line.end;
     return offsetPoint(cp, line.start, opt.offset);
@@ -89,22 +91,35 @@ function bboxIntersection(line, view, magnet, opt) {
 
 function rectangleIntersection(line, view, magnet, opt) {
 
-    var angle = view.model.angle();
+    const angle = view.model.angle();
     if (angle === 0) {
         return bboxIntersection(line, view, magnet, opt);
     }
 
-    var bboxWORotation = view.getNodeUnrotatedBBox(magnet);
+    const bboxWORotation = (opt.useModelGeometry)
+        ? getNodeModelBBox(view, magnet, false)
+        : view.getNodeUnrotatedBBox(magnet);
     if (opt.stroke) bboxWORotation.inflate(stroke(magnet) / 2);
-    var center = bboxWORotation.center();
-    var lineWORotation = line.clone().rotate(center, angle);
-    var intersections = lineWORotation.setLength(1e6).intersect(bboxWORotation);
-    var cp = (intersections)
+    const center = bboxWORotation.center();
+    const lineWORotation = line.clone().rotate(center, angle);
+    const intersections = lineWORotation.setLength(1e6).intersect(bboxWORotation);
+    const cp = (intersections)
         ? lineWORotation.start.chooseClosest(intersections).rotate(center, -angle)
         : line.end;
     return offsetPoint(cp, line.start, opt.offset);
 }
 
+function getNodeModelBBox(elementView, magnet, rotate) {
+    const element = elementView.model;
+
+    const portId = elementView.findAttribute('port', magnet);
+    if (element.hasPort(portId)) {
+        return element.getPortBBox(portId, { rotate });
+    }
+
+    return element.getBBox({ rotate });
+}
+
 function findShapeNode(magnet) {
     if (!magnet) return null;
     var node = magnet;

package/src/connectionStrategies/index.mjs

@@ -21,7 +21,7 @@ function pinnedElementEnd(relative, end, view, magnet, coords) {
 
     var angle = view.model.angle();
     var bbox = view.getNodeUnrotatedBBox(magnet);
-    var origin = view.model.getBBox().center();
+    var origin = view.model.getCenter();
     coords.rotate(origin, angle);
     var dx = coords.x - bbox.x;
     var dy = coords.y - bbox.y;

package/src/connectors/jumpover.mjs

@@ -337,7 +337,7 @@ function buildRoundedSegment(offset, path, curr, prev, next) {
  * @property {number} size optional size of a jump arc
  * @return {string} created `D` attribute of SVG path
  */
-export const jumpover = function(sourcePoint, targetPoint, route, opt) { // eslint-disable-line max-params
+export const jumpover = function(sourcePoint, targetPoint, route, opt) {
 
     setupUpdating(this);
 

package/src/dia/Cell.mjs

@@ -39,7 +39,7 @@ import * as g from '../g/index.mjs';
 
 const attributesMerger = function(a, b) {
     if (Array.isArray(a)) {
-        return b;
+        return cloneDeep(b);
     }
 };
 
@@ -921,9 +921,13 @@ export const Cell = Model.extend({
         return new g.Rect(0, 0, 0, 0);
     },
 
+    getCenter: function() {
+        return this.getBBox().center();
+    },
+
     getPointRotatedAroundCenter(angle, x, y) {
         const point = new g.Point(x, y);
-        if (angle) point.rotate(this.getBBox().center(), angle);
+        if (angle) point.rotate(this.getCenter(), angle);
         return point;
     },
 

package/src/dia/CellView.mjs

@@ -795,7 +795,15 @@ export const CellView = View.extend({
     getNodeBoundingRect: function(magnet) {
 
         var metrics = this.nodeCache(magnet);
-        if (metrics.boundingRect === undefined) metrics.boundingRect = V(magnet).getBBox();
+        if (metrics.boundingRect === undefined) {
+            const { measureNode } = this.paper.options;
+            if (typeof measureNode === 'function') {
+                // Measure the node bounding box using the paper's measureNode method.
+                metrics.boundingRect = measureNode(magnet, this);
+            } else {
+                metrics.boundingRect = V(magnet).getBBox();
+            }
+        }
         return new Rect(metrics.boundingRect);
     },
 
@@ -810,7 +818,12 @@ export const CellView = View.extend({
             } else {
                 target = el;
             }
-            metrics.magnetMatrix = V(magnet).getTransformToElement(target);
+            metrics.magnetMatrix = V(magnet).getTransformToElement(target, {
+                // We use `safe` mode if the magnet is not visible (not in the DOM render tree).
+                // The browser would not be able to calculate the transformation matrix
+                // using `getScreenCTM()` method.
+                safe: !magnet.checkVisibility()
+            });
         }
         return V.createSVGMatrix(metrics.magnetMatrix);
     },
@@ -994,33 +1007,38 @@ export const CellView = View.extend({
             const refNodeId = refNode ? V.ensureId(refNode) : '';
             let refBBox = bboxCache[refNodeId];
             if (!refBBox) {
-                // Get the bounding box of the reference element using to the common ancestor
-                // transformation space.
-                //
-                // @example 1
-                // <g transform="translate(11, 13)">
-                //     <rect @selector="b" x="1" y="2" width="3" height="4"/>
-                //     <rect @selector="a"/>
-                // </g>
-                //
-                // In this case, the reference bounding box can not be affected
-                // by the `transform` attribute of the `<g>` element,
-                // because the exact transformation will be applied to the `a` element
-                // as well as to the `b` element.
-                //
-                // @example 2
-                // <g transform="translate(11, 13)">
-                //     <rect @selector="b" x="1" y="2" width="3" height="4"/>
-                // </g>
-                // <rect @selector="a"/>
-                //
-                // In this case, the reference bounding box have to be affected by the
-                // `transform` attribute of the `<g>` element, because the `a` element
-                // is not descendant of the `<g>` element and will not be affected
-                // by the transformation.
-                refBBox = bboxCache[refNodeId] = (refNode)
-                    ? V(refNode).getBBox({ target: getCommonAncestorNode(node, refNode) })
-                    : opt.rootBBox;
+                if (refNode) {
+                    // Get the bounding box of the reference element using to the common ancestor
+                    // transformation space.
+                    //
+                    // @example 1
+                    // <g transform="translate(11, 13)">
+                    //     <rect @selector="b" x="1" y="2" width="3" height="4"/>
+                    //     <rect @selector="a"/>
+                    // </g>
+                    //
+                    // In this case, the reference bounding box can not be affected
+                    // by the `transform` attribute of the `<g>` element,
+                    // because the exact transformation will be applied to the `a` element
+                    // as well as to the `b` element.
+                    //
+                    // @example 2
+                    // <g transform="translate(11, 13)">
+                    //     <rect @selector="b" x="1" y="2" width="3" height="4"/>
+                    // </g>
+                    // <rect @selector="a"/>
+                    //
+                    // In this case, the reference bounding box have to be affected by the
+                    // `transform` attribute of the `<g>` element, because the `a` element
+                    // is not descendant of the `<g>` element and will not be affected
+                    // by the transformation.
+                    const refRect = this.getNodeBoundingRect(refNode);
+                    const refTMatrix = V(refNode).getTransformToElement(V.getCommonAncestor(node, refNode));
+                    refBBox = V.transformRect(refRect, refTMatrix);
+                } else {
+                    refBBox = opt.rootBBox;
+                }
+                bboxCache[refNodeId] = refBBox;
             }
 
             if (roAttrs) {
@@ -1375,14 +1393,4 @@ Object.defineProperty(CellView.prototype, 'useCSSSelectors', {
     }
 });
 
-// TODO: Move to Vectorizer library.
-function getCommonAncestorNode(node1, node2) {
-    let parent = node1;
-    do {
-        if (parent.contains(node2)) return parent;
-        parent = parent.parentNode;
-    } while (parent);
-    return null;
-}
-