@joint/core 4.0.1 → 4.0.3

package/dist/joint.nowrap.js

@@ -1,4 +1,4 @@
-/*! JointJS v4.0.1 (2024-02-02) - JavaScript diagramming library
+/*! JointJS v4.0.3 (2024-05-14) - JavaScript diagramming library
 
 
 This Source Code Form is subject to the terms of the Mozilla Public
@@ -13759,6 +13759,10 @@ var joint = (function (exports) {
 	                var ry2 = ry * ry;
 
 	                var k = ((large_arc_flag == sweep_flag) ? -1 : 1) * sqrt(abs(((rx2 * ry2) - (rx2 * y * y) - (ry2 * x * x)) / ((rx2 * y * y) + (ry2 * x * x))));
+	                if (!Number.isFinite(k)) {
+	                    // Arc is a single point
+	                    return [x1, y1, x2, y2, x2, y2];
+	                }
 
 	                var cx = ((k * rx * y) / ry) + ((x1 + x2) / 2);
 	                var cy = ((k * -ry * x) / rx) + ((y1 + y2) / 2);
@@ -17519,12 +17523,16 @@ var joint = (function (exports) {
 	            if (text === undefined) { text = attrs.text; }
 	            if (text !== undefined) {
 	                var breakTextFn = value.breakText || breakText;
+	                var computedStyles = getComputedStyle(node);
+
 	                wrappedText = breakTextFn('' + text, size, {
-	                    'font-weight': attrs['font-weight'],
-	                    'font-size': attrs['font-size'],
-	                    'font-family': attrs['font-family'],
+	                    'font-weight': computedStyles.fontWeight,
+	                    'font-family': computedStyles.fontFamily,
+	                    'text-transform': computedStyles.textTransform,
+	                    'font-size': computedStyles.fontSize,
+	                    'letter-spacing': computedStyles.letterSpacing,
+	                    // The `line-height` attribute in SVG is JoinJS specific.
 	                    'lineHeight': attrs['line-height'],
-	                    'letter-spacing': attrs['letter-spacing']
 	                }, {
 	                    // Provide an existing SVG Document here
 	                    // instead of creating a temporary one over again.
@@ -20333,6 +20341,13 @@ var joint = (function (exports) {
 	            'port-group': port.group
 	        });
 
+	        // If the port ID is a number, we need to add
+	        // extra information to the port element to distinguish
+	        // between ports with the same ID but different types.
+	        if (isNumber(port.id)) {
+	            portElement.attr('port-id-type', 'number');
+	        }
+
 	        var labelMarkupDef = this._getPortLabelMarkup(port.label);
 	        if (Array.isArray(labelMarkupDef)) {
 	            // JSON Markup
@@ -23855,23 +23870,25 @@ var joint = (function (exports) {
 	        return this;
 	    },
 
-	    findAttribute: function(attributeName, node) {
-
+	    findAttributeNode: function(attributeName, node) {
 	        var currentNode = node;
-
 	        while (currentNode && currentNode.nodeType === 1) {
-	            var attributeValue = currentNode.getAttribute(attributeName);
 	            // attribute found
-	            if (attributeValue) { return attributeValue; }
+	            // (empty value does not count as attribute found)
+	            if (currentNode.getAttribute(attributeName)) { return currentNode; }
 	            // do not climb up the DOM
 	            if (currentNode === this.el) { return null; }
 	            // try parent node
 	            currentNode = currentNode.parentNode;
 	        }
-
 	        return null;
 	    },
 
+	    findAttribute: function(attributeName, node) {
+	        var matchedNode = this.findAttributeNode(attributeName, node);
+	        return matchedNode && matchedNode.getAttribute(attributeName);
+	    },
+
 	    // Override the mvc ViewBase `_ensureElement()` method in order to create an
 	    // svg element (e.g., `<g>`) node that wraps all the nodes of the Cell view.
 	    // Expose class name setter as a separate method.
@@ -27319,8 +27336,14 @@ var joint = (function (exports) {
 	    var ty = target.y0;
 
 	    if (tx === ax && ty < sy0) { return Directions$2.BOTTOM; }
-	    if (tx < ax && ty < smy0) { return Directions$2.RIGHT; }
-	    if (tx > ax && ty < smy0) { return Directions$2.LEFT; }
+	    if (tx < ax && ty < smy0) {
+	        if (nextInLine.point.x === ax) { return Directions$2.BOTTOM; }
+	        return Directions$2.RIGHT;
+	    }
+	    if (tx > ax && ty < smy0) {
+	        if (nextInLine.point.x === ax) { return Directions$2.BOTTOM; }
+	        return Directions$2.LEFT;
+	    }
 	    if (tx < smx0 && ty >= sy0) { return Directions$2.TOP; }
 	    if (tx > smx1 && ty >= sy0) { return Directions$2.TOP; }
 	    if (tx >= smx0 && tx <= ax && ty > sy1) {
@@ -27359,8 +27382,14 @@ var joint = (function (exports) {
 	    var ty = target.y0;
 
 	    if (tx === ax && ty > sy1) { return Directions$2.TOP; }
-	    if (tx < ax && ty > smy1) { return Directions$2.RIGHT; }
-	    if (tx > ax && ty > smy1) { return Directions$2.LEFT; }
+	    if (tx < ax && ty > smy1) {
+	        if (nextInLine.point.x === ax) { return Directions$2.TOP; }
+	        return Directions$2.RIGHT;
+	    }
+	    if (tx > ax && ty > smy1) {
+	        if (nextInLine.point.x === ax) { return Directions$2.TOP; }
+	        return Directions$2.LEFT;
+	    }
 	    if (tx < smx0 && ty <= sy1) { return Directions$2.BOTTOM; }
 	    if (tx > smx1 && ty <= sy1) { return Directions$2.BOTTOM; }
 	    if (tx >= smx0 && tx <= ax && ty < sy0) {
@@ -27571,11 +27600,12 @@ var joint = (function (exports) {
 	    return outsidePoint;
 	}
 
-	function routeBetweenPoints(source, target) {
+	function routeBetweenPoints(source, target, opt) {
+	    if ( opt === void 0 ) opt = {};
+
 	    var sourcePoint = source.point;
 	    var sx0 = source.x0;
 	    var sy0 = source.y0;
-	    var sourceView = source.view;
 	    var sourceWidth = source.width;
 	    var sourceHeight = source.height;
 	    var sourceMargin = source.margin;
@@ -27585,14 +27615,13 @@ var joint = (function (exports) {
 	    var targetWidth = target.width;
 	    var targetHeight = target.height;
 	    var targetMargin = target.margin;
+	    var targetInSourceBBox = opt.targetInSourceBBox; if ( targetInSourceBBox === void 0 ) targetInSourceBBox = false;
 
 	    var tx1 = tx0 + targetWidth;
 	    var ty1 = ty0 + targetHeight;
 	    var sx1 = sx0 + sourceWidth;
 	    var sy1 = sy0 + sourceHeight;
 
-	    var isSourceEl = sourceView && sourceView.model.isElement();
-
 	    // Key coordinates including the margin
 	    var smx0 = sx0 - sourceMargin;
 	    var smx1 = sx1 + sourceMargin;
@@ -27622,10 +27651,15 @@ var joint = (function (exports) {
 	    var middleOfVerticalSides = (scx < tcx ? (sx1 + tx0) : (tx1 + sx0)) / 2;
 	    var middleOfHorizontalSides = (scy < tcy ? (sy1 + ty0) : (ty1 + sy0)) / 2;
 
+	    var sourceBBox = new Rect(sx0, sy0, sourceWidth, sourceHeight);
+	    var targetBBox = new Rect(tx0, ty0, targetWidth, targetHeight);
+	    var inflatedSourceBBox = sourceBBox.clone().inflate(sourceMargin);
+	    var inflatedTargetBBox = targetBBox.clone().inflate(targetMargin);
+
 	    if (sourceSide === 'left' && targetSide === 'right') {
 	        if (smx0 <= tmx1) {
 	            var y = middleOfHorizontalSides;
-	            if (sx1 <= tx0) {
+	            if (sox <= tmx0) {
 	                if (ty1 >= smy0 && toy < soy) {
 	                    y = Math.min(tmy0, smy0);
 	                } else if (ty0 <= smy1 && toy >= soy) {
@@ -27646,7 +27680,7 @@ var joint = (function (exports) {
 	            { x: x, y: toy }
 	        ];
 	    } else if (sourceSide === 'right' && targetSide === 'left') {
-	        if (smx1 >= tmx0) {
+	        if (sox >= tmx0) {
 	            var y$1 = middleOfHorizontalSides;
 	            if (sox > tx1) {
 	                if (ty1 >= smy0 && toy < soy) {
@@ -27670,16 +27704,20 @@ var joint = (function (exports) {
 	            { x: x$1, y: toy }
 	        ];
 	    } else if (sourceSide === 'top' && targetSide === 'bottom') {
+	        var isPointInsideSource = intersection.rectWithRect(inflatedSourceBBox, targetBBox);
+
 	        if (soy < toy) {
 	            var x$2 = middleOfVerticalSides;
 	            var y$2 = soy;
 
-	            if (soy < ty0) {
-	                if (tx1 >= smx0 && tox < sox) {
-	                    x$2 = Math.min(tmx0, smx0);
-	                } else if (tx0 <= smx1 && tox >= sox) {
-	                    x$2 = Math.max(tmx1, smx1);
-	                }
+	            if (isPointInsideSource) {
+	                y$2 = Math.min(y$2, tmy0);
+	            }
+
+	            if (tx1 >= smx0 && tox < sox) {
+	                x$2 = Math.min(tmx0, smx0);
+	            } else if (tx0 <= smx1 && tox >= sox) {
+	                x$2 = Math.max(tmx1, smx1);
 	            }
 
 	            return [
@@ -27695,16 +27733,20 @@ var joint = (function (exports) {
 	            { x: tox, y: y$3 }
 	        ];
 	    } else if (sourceSide === 'bottom' && targetSide === 'top') {
-	        if (soy - sourceMargin > toy) {
+	        var isPointInsideSource$1 = intersection.rectWithRect(inflatedSourceBBox, targetBBox);
+
+	        if (soy > toy) {
 	            var x$3 = middleOfVerticalSides;
 	            var y$4 = soy;
 
-	            if (soy > ty1) {
-	                if (tx1 >= smx0 && tox < sox) {
-	                    x$3 = Math.min(tmx0, smx0);
-	                } else if (tx0 <= smx1 && tox >= sox) {
-	                    x$3 = Math.max(tmx1, smx1);
-	                }
+	            if (isPointInsideSource$1) {
+	                y$4 = Math.max(y$4, tmy1);
+	            }
+
+	            if (tx1 >= smx0 && tox < sox) {
+	                x$3 = Math.min(tmx0, smx0);
+	            } else if (tx0 <= smx1 && tox >= sox) {
+	                x$3 = Math.max(tmx1, smx1);
 	            }
 
 	            return [
@@ -27720,28 +27762,31 @@ var joint = (function (exports) {
 	            { x: tox, y: y$5 }
 	        ];
 	    } else if (sourceSide === 'top' && targetSide === 'top') {
+	        var useUShapeConnection =
+	            targetInSourceBBox ||
+	            intersection.rectWithRect(inflatedSourceBBox, targetBBox) ||
+	            (soy <= ty0 && (inflatedSourceBBox.bottomRight().x <= tox || inflatedSourceBBox.bottomLeft().x >= tox)) ||
+	            (soy >= ty0 && (inflatedTargetBBox.bottomRight().x <= sox || inflatedTargetBBox.bottomLeft().x >= sox));
+
+	        if (useUShapeConnection) {
+	            return [
+	                { x: sox, y: Math.min(soy, toy) },
+	                { x: tox, y: Math.min(soy, toy) }
+	            ];
+	        }
+
 	        var x$4;
 	        var y1 = Math.min((sy1 + ty0) / 2, toy);
 	        var y2 = Math.min((sy0 + ty1) / 2, soy);
 
 	        if (toy < soy) {
-	            if (sox >= tmx1 || sox <= tmx0) {
-	                return [
-	                    { x: sox, y: Math.min(soy, toy) },
-	                    { x: tox, y: Math.min(soy, toy) }
-	                ];
-	            } else if (tox > sox) {
+	            if (tox > sox) {
 	                x$4 = Math.min(sox, tmx0);
 	            } else {
 	                x$4 = Math.max(sox, tmx1);
 	            }
 	        } else {
-	            if (tox >= smx1 || tox <= smx0) {
-	                return [
-	                    { x: sox, y: Math.min(soy, toy) },
-	                    { x: tox, y: Math.min(soy, toy) }
-	                ];
-	            } else if (tox >= sox) {
+	            if (tox >= sox) {
 	                x$4 = Math.max(tox, smx1);
 	            } else {
 	                x$4 = Math.min(tox, smx0);
@@ -27755,28 +27800,31 @@ var joint = (function (exports) {
 	            { x: tox, y: y1 }
 	        ];
 	    } else if (sourceSide === 'bottom' && targetSide === 'bottom') {
+	        var useUShapeConnection$1 =
+	            targetInSourceBBox ||
+	            intersection.rectWithRect(inflatedSourceBBox, targetBBox) ||
+	            (soy >= toy && (inflatedSourceBBox.topRight().x <= tox || inflatedSourceBBox.topLeft().x >= tox)) ||
+	            (soy <= toy && (inflatedTargetBBox.topRight().x <= sox || inflatedTargetBBox.topLeft().x >= sox));
+
+	        if (useUShapeConnection$1) {
+	            return [
+	                { x: sox, y: Math.max(soy, toy) },
+	                { x: tox, y: Math.max(soy, toy) }
+	            ];
+	        }
+
 	        var x$5;
 	        var y1$1 = Math.max((sy0 + ty1) / 2, toy);
 	        var y2$1 = Math.max((sy1 + ty0) / 2, soy);
 
 	        if (toy > soy) {
-	            if (sox >= tmx1 || sox <= tmx0) {
-	                return [
-	                    { x: sox, y: Math.max(soy, toy) },
-	                    { x: tox, y: Math.max(soy, toy) }
-	                ];
-	            } else if (tox > sox) {
+	            if (tox > sox) {
 	                x$5 = Math.min(sox, tmx0);
 	            } else {
 	                x$5 = Math.max(sox, tmx1);
 	            }
 	        } else {
-	            if (tox >= smx1 || tox <= smx0) {
-	                return [
-	                    { x: sox, y: Math.max(soy, toy) },
-	                    { x: tox, y: Math.max(soy, toy) }
-	                ];
-	            } else if (tox >= sox) {
+	            if (tox >= sox) {
 	                x$5 = Math.max(tox, smx1);
 	            } else {
 	                x$5 = Math.min(tox, smx0);
@@ -27790,6 +27838,19 @@ var joint = (function (exports) {
 	            { x: tox, y: y1$1 }
 	        ];
 	    } else if (sourceSide === 'left' && targetSide === 'left') {
+	        var useUShapeConnection$2 = 
+	            targetInSourceBBox ||
+	            intersection.rectWithRect(inflatedSourceBBox, targetBBox) ||
+	            (sox <= tox && (inflatedSourceBBox.bottomRight().y <= toy || inflatedSourceBBox.topRight().y >= toy)) ||
+	            (sox >= tox && (inflatedTargetBBox.bottomRight().y <= soy || inflatedTargetBBox.topRight().y >= soy));
+
+	        if (useUShapeConnection$2) {
+	            return [
+	                { x: Math.min(sox, tox), y: soy },
+	                { x: Math.min(sox, tox), y: toy }
+	            ];
+	        }
+
 	        var y$6;
 	        var x1 = Math.min((sx1 + tx0) / 2, tox);
 	        var x2 = Math.min((sx0 + tx1) / 2, sox);
@@ -27815,11 +27876,24 @@ var joint = (function (exports) {
 	            { x: x1, y: toy }
 	        ];
 	    } else if (sourceSide === 'right' && targetSide === 'right') {
+	        var useUShapeConnection$3 =
+	            targetInSourceBBox ||
+	            intersection.rectWithRect(inflatedSourceBBox, targetBBox) ||
+	            (sox >= tox && (inflatedSourceBBox.bottomLeft().y <= toy || inflatedSourceBBox.topLeft().y >= toy)) ||
+	            (sox <= tox && (inflatedTargetBBox.bottomLeft().y <= soy || inflatedTargetBBox.topLeft().y >= soy));
+
+	        if (useUShapeConnection$3) {
+	            return [
+	                { x: Math.max(sox, tox), y: soy },
+	                { x: Math.max(sox, tox), y: toy }
+	            ];
+	        }
+
 	        var y$7;
 	        var x1$1 = Math.max((sx0 + tx1) / 2, tox);
 	        var x2$1 = Math.max((sx1 + tx0) / 2, sox);
 
-	        if (tox < sox) {
+	        if (tox <= sox) {
 	            if (toy <= soy) {
 	                y$7 = Math.min(smy0, toy);
 	            } else {
@@ -27840,16 +27914,44 @@ var joint = (function (exports) {
 	            { x: x1$1, y: toy }
 	        ];
 	    } else if (sourceSide === 'top' && targetSide === 'right') {
-	        if (soy > toy) {
+	        var isPointInsideSource$2 = inflatedSourceBBox.containsPoint(targetPoint);
+
+	        // The target point is inside the source element
+	        if (isPointInsideSource$2) {
+	            if (sox <= tmx1) {
+	                var x$6 = Math.max(sox + sourceMargin, tox);
+	                var y$8 = Math.min(smy0, tmy0);
+
+	                // Target anchor is on the right side of the source anchor
+	                return [
+	                    { x: sox, y: y$8 },
+	                    { x: x$6, y: y$8 },
+	                    { x: x$6, y: toy }
+	                ];
+	            }
+
+	            // Target anchor is on the left side of the source anchor
+	            // Subtract the `sourceMargin` since the source anchor is on the right side of the target anchor
+	            var anchorMiddleX = (sox - sourceMargin + tox) / 2;
+
+	            return [
+	                { x: sox, y: soy },
+	                { x: anchorMiddleX, y: soy },
+	                { x: anchorMiddleX, y: toy }
+	            ];
+	        }
+
+	        if (smy0 > toy) {
 	            if (sox < tox) {
-	                var y$8 = middleOfHorizontalSides;
+	                var y$9 = tmy0;
 
-	                if ((y$8 > tcy || !isSourceEl) && y$8 < tmy1 && sox < tx0) {
-	                    y$8 = tmy0;
+	                if (tmy1 <= smy0 && tmx1 >= sox) {
+	                    y$9 = middleOfHorizontalSides;
 	                }
+
 	                return [
-	                    { x: sox, y: y$8 },
-	                    { x: tox, y: y$8 },
+	                    { x: sox, y: y$9 },
+	                    { x: tox, y: y$9 },
 	                    { x: tox, y: toy }
 	                ];
 	            }
@@ -27857,273 +27959,523 @@ var joint = (function (exports) {
 	            return [{ x: sox, y: toy }];
 	        }
 
-	        var x$6 = Math.max(middleOfVerticalSides, tmx1);
+	        var x$7 = Math.max(middleOfVerticalSides, tmx1);
 
-	        if (tox < sox && toy > sy0 && toy < sy1) {
+	        if (sox > tox && sy1 >= toy) {
 	            return [
 	                { x: sox, y: soy },
-	                { x: x$6, y: soy },
-	                { x: x$6, y: toy }
+	                { x: x$7, y: soy },
+	                { x: x$7, y: toy }
 	            ];
 	        }
 
-	        if ((x$6 > smx0 && toy > sy0) || tx0 > sx1) {
-	            var y$9 = Math.min(sy0 - sourceMargin, ty0 - targetMargin);
-	            var x$7 = Math.max(sx1 + sourceMargin, tx1 + targetMargin);
+	        if (x$7 > smx0 && soy < ty1) {
+	            var y$10 = Math.min(smy0, tmy0);
+	            var x$8 = Math.max(smx1, tmx1);
 	            return [
-	                { x: sox, y: y$9 },
-	                { x: x$7, y: y$9 },
-	                { x: x$7, y: toy }
+	                { x: sox, y: y$10 },
+	                { x: x$8, y: y$10 },
+	                { x: x$8, y: toy }
 	            ];
 	        }
 
 	        return [
 	            { x: sox, y: soy },
-	            { x: Math.max(x$6, tox), y: soy },
-	            { x: Math.max(x$6, tox), y: toy }
+	            { x: x$7, y: soy },
+	            { x: x$7, y: toy }
 	        ];
 	    } else if (sourceSide === 'top' && targetSide === 'left') {
-	        if (soy > toy) {
+	        var isPointInsideSource$3 = inflatedSourceBBox.containsPoint(targetPoint);
+
+	        // The target point is inside the source element
+	        if (isPointInsideSource$3) {
+	            if (sox >= tmx0) {
+	                var x$9 = Math.min(sox - sourceMargin, tox);
+	                var y$11 = Math.min(smy0, tmy0);
+
+	                // Target anchor is on the left side of the source anchor
+	                return [
+	                    { x: sox, y: y$11 },
+	                    { x: x$9, y: y$11 },
+	                    { x: x$9, y: toy }
+	                ];
+	            }
+
+	            // Target anchor is on the right side of the source anchor
+	            // Add the `sourceMargin` since the source anchor is on the left side of the target anchor
+	            var anchorMiddleX$1 = (sox + sourceMargin + tox) / 2;
+
+	            return [
+	                { x: sox, y: soy },
+	                { x: anchorMiddleX$1, y: soy },
+	                { x: anchorMiddleX$1, y: toy }
+	            ];
+	        }
+
+	        if (smy0 > toy) {
 	            if (sox > tox) {
-	                var y$10 = middleOfHorizontalSides;
+	                var y$12 = tmy0;
 
-	                if ((y$10 > tcy || !isSourceEl) && y$10 < tmy1 && sox > tx1) {
-	                    y$10 = tmy0;
+	                if (tmy1 <= smy0 && tmx0 <= sox) {
+	                    y$12 = middleOfHorizontalSides;
 	                }
+
 	                return [
-	                    { x: sox, y: y$10 },
-	                    { x: tox, y: y$10 },
+	                    { x: sox, y: y$12 },
+	                    { x: tox, y: y$12 },
 	                    { x: tox, y: toy }
 	                ];
 	            }
+
 	            return [{ x: sox, y: toy }];
 	        }
 
-	        var x$8 = Math.min(tmx0, middleOfVerticalSides);
+	        var x$10 = Math.min(tmx0, middleOfVerticalSides);
 
 	        if (sox < tox && sy1 >= toy) {
 	            return [
 	                { x: sox, y: soy },
-	                { x: x$8, y: soy },
-	                { x: x$8, y: toy }];
+	                { x: x$10, y: soy },
+	                { x: x$10, y: toy }];
 	        }
 
-	        if (x$8 < smx1 && soy < ty1) {
-	            var y$11 = Math.min(smy0, tmy0);
-	            var x$9 = Math.min(smx0, tmx0);
+	        if (x$10 < smx1 && soy < ty1) {
+	            var y$13 = Math.min(smy0, tmy0);
+	            var x$11 = Math.min(smx0, tmx0);
 	            return [
-	                { x: sox, y: y$11 },
-	                { x: x$9, y: y$11 },
-	                { x: x$9, y: toy }
+	                { x: sox, y: y$13 },
+	                { x: x$11, y: y$13 },
+	                { x: x$11, y: toy }
 	            ];
 	        }
+
 	        return [
 	            { x: sox, y: soy },
-	            { x: x$8, y: soy },
-	            { x: x$8, y: toy }
+	            { x: x$10, y: soy },
+	            { x: x$10, y: toy }
 	        ];
 	    } else if (sourceSide === 'bottom' && targetSide === 'right') {
-	        if (soy < toy) {
+	        var isPointInsideSource$4 = inflatedSourceBBox.containsPoint(targetPoint);
+
+	        // The target point is inside the source element
+	        if (isPointInsideSource$4) {
+	            if (sox <= tmx1) {
+	                var x$12 = Math.max(sox + sourceMargin, tox);
+	                var y$14 = Math.max(smy1, tmy1);
+
+	                // Target anchor is on the right side of the source anchor
+	                return [
+	                    { x: sox, y: y$14 },
+	                    { x: x$12, y: y$14 },
+	                    { x: x$12, y: toy }
+	                ];
+	            }
+
+	            // Target anchor is on the left side of the source anchor
+	            // Subtract the `sourceMargin` since the source anchor is on the right side of the target anchor
+	            var anchorMiddleX$2 = (sox - sourceMargin + tox) / 2;
+
+	            return [
+	                { x: sox, y: soy },
+	                { x: anchorMiddleX$2, y: soy },
+	                { x: anchorMiddleX$2, y: toy }
+	            ];
+	        }
+
+	        if (smy1 < toy) {
 	            if (sox < tox) {
-	                var y$12 = middleOfHorizontalSides;
+	                var y$15 = tmy1;
 
-	                if ((y$12 < tcy || !isSourceEl) && y$12 > tmy0 && sox < tx0) {
-	                    y$12 = tmy1;
+	                if (tmy0 >= smy1 && tmx1 >= sox) {
+	                    y$15 = middleOfHorizontalSides;
 	                }
+
 	                return [
-	                    { x: sox, y: y$12 },
-	                    { x: tox, y: y$12 },
+	                    { x: sox, y: y$15 },
+	                    { x: tox, y: y$15 },
 	                    { x: tox, y: toy }
 	                ];
 	            }
+
 	            return [{ x: sox, y: toy }];
-	        } else {
-	            if (sx0 < tox) {
-	                var y$13 = Math.max(smy1, tmy1);
-	                var x$10 = Math.max(smx1, tmx1);
-	                return [
-	                    { x: sox, y: y$13 },
-	                    { x: x$10, y: y$13 },
-	                    { x: x$10, y: toy }
-	                ];
-	            }
 	        }
 
-	        var x$11 = middleOfVerticalSides;
+	        var x$13 = Math.max(middleOfVerticalSides, tmx1);
+
+	        if (sox > tox && sy0 <= toy) {
+	            return [
+	                { x: sox, y: soy },
+	                { x: x$13, y: soy },
+	                { x: x$13, y: toy }
+	            ];
+	        }
+
+	        if (x$13 > smx0 && soy > ty0) {
+	            var y$16 = Math.max(smy1, tmy1);
+	            var x$14 = Math.max(smx1, tmx1);
+	            return [
+	                { x: sox, y: y$16 },
+	                { x: x$14, y: y$16 },
+	                { x: x$14, y: toy }
+	            ];
+	        }
 
 	        return [
 	            { x: sox, y: soy },
-	            { x: x$11, y: soy },
-	            { x: x$11, y: toy }
+	            { x: x$13, y: soy },
+	            { x: x$13, y: toy }
 	        ];
 	    } else if (sourceSide === 'bottom' && targetSide === 'left') {
-	        if (soy < toy) {
+	        var isPointInsideSource$5 = inflatedSourceBBox.containsPoint(targetPoint);
+
+	        // The target point is inside the source element
+	        if (isPointInsideSource$5) {
+	            if (sox >= tmx0) {
+	                var x$15 = Math.min(sox - sourceMargin, tox);
+	                var y$17 = Math.max(smy1, tmy1);
+
+	                // Target anchor is on the left side of the source anchor
+	                return [
+	                    { x: sox, y: y$17 },
+	                    { x: x$15, y: y$17 },
+	                    { x: x$15, y: toy }
+	                ];
+	            }
+
+	            // Target anchor is on the right side of the source anchor
+	            // Add the `sourceMargin` since the source anchor is on the left side of the target anchor
+	            var anchorMiddleX$3 = (sox + sourceMargin + tox) / 2;
+
+	            return [
+	                { x: sox, y: soy },
+	                { x: anchorMiddleX$3, y: soy },
+	                { x: anchorMiddleX$3, y: toy }
+	            ];
+	        }
+
+	        if (smy1 < toy) {
 	            if (sox > tox) {
-	                var y$14 = middleOfHorizontalSides;
+	                var y$18 = tmy1;
 
-	                if ((y$14 < tcy || !isSourceEl) && y$14 > tmy0 && sox > tx1) {
-	                    y$14 = tmy1;
+	                if (tmy0 >= smy1 && tmx0 <= sox) {
+	                    y$18 = middleOfHorizontalSides;
 	                }
+
 	                return [
-	                    { x: sox, y: y$14 },
-	                    { x: tox, y: y$14 },
+	                    { x: sox, y: y$18 },
+	                    { x: tox, y: y$18 },
 	                    { x: tox, y: toy }
 	                ];
 	            }
+
 	            return [{ x: sox, y: toy }];
-	        } else {
-	            if (sx1 > tox) {
-	                var y$15 = Math.max(smy1, tmy1);
-	                var x$12 = Math.min(smx0, tmx0);
-	                return [
-	                    { x: sox, y: y$15 },
-	                    { x: x$12, y: y$15 },
-	                    { x: x$12, y: toy }
-	                ];
-	            }
 	        }
 
-	        var x$13 = middleOfVerticalSides;
+	        var x$16 = Math.min(tmx0, middleOfVerticalSides);
+
+	        if (sox < tox && sy0 <= toy) {
+	            return [
+	                { x: sox, y: soy },
+	                { x: x$16, y: soy },
+	                { x: x$16, y: toy }
+	            ];
+	        }
+
+	        if (x$16 < smx1 && soy > ty0) {
+	            var y$19 = Math.max(smy1, tmy1);
+	            var x$17 = Math.min(smx0, tmx0);
+	            return [
+	                { x: sox, y: y$19 },
+	                { x: x$17, y: y$19 },
+	                { x: x$17, y: toy }
+	            ];
+	        }
 
 	        return [
 	            { x: sox, y: soy },
-	            { x: x$13, y: soy },
-	            { x: x$13, y: toy }
+	            { x: x$16, y: soy },
+	            { x: x$16, y: toy }
 	        ];
-	    }
-	    else if (sourceSide === 'left' && targetSide === 'bottom') {
-	        if (sox >= tox && soy >= tmy1) {
-	            return [{ x: tox, y: soy }];
-	        }
+	    } else if (sourceSide === 'left' && targetSide === 'bottom') {
+	        var isPointInsideSource$6 = inflatedSourceBBox.containsPoint(targetPoint);
 
-	        if (sox >= tx1 && soy < toy) {
-	            var x$14 = middleOfVerticalSides;
+	        // The target point is inside the source element
+	        if (isPointInsideSource$6) {
+	            if (soy <= tmy1) {
+	                var x$18 = Math.min(smx0, tmx0);
+	                var y$20 = Math.max(soy + sourceMargin, toy);
+
+	                return [
+	                    { x: x$18, y: soy },
+	                    { x: x$18, y: y$20 },
+	                    { x: tox, y: y$20 }
+	                ];
+	            }
+
+	            // Target anchor is above the source anchor
+	            var anchorMiddleY = (soy - sourceMargin + toy) / 2;
 
 	            return [
-	                { x: x$14, y: soy },
-	                { x: x$14, y: toy },
-	                { x: tox, y: toy }
+	                { x: sox, y: soy },
+	                { x: sox, y: anchorMiddleY },
+	                { x: tox, y: anchorMiddleY }
 	            ];
 	        }
 
-	        if (tox < sx1 && ty1 <= sy0) {
-	            var y$16 = middleOfHorizontalSides;
+	        if (smx0 > tox) {
+	            if (soy < toy) {
+	                var x$19 = tmx0;
+
+	                if (tmx1 <= smx0 && tmy1 >= soy) {
+	                    x$19 = middleOfVerticalSides;
+	                }
+
+	                return [
+	                    { x: x$19, y: soy },
+	                    { x: x$19, y: toy },
+	                    { x: tox, y: toy }
+	                ];
+	            }
+
+	            return [{ x: tox, y: soy }];
+	        }
+
+	        var y$21 = Math.max(tmy1, middleOfHorizontalSides);
 
+	        if (soy > toy && sx1 >= tox) {
 	            return [
 	                { x: sox, y: soy },
-	                { x: sox, y: y$16 },
-	                { x: tox, y: y$16 }
+	                { x: sox, y: y$21 },
+	                { x: tox, y: y$21 }
 	            ];
 	        }
 
-	        var x$15 = Math.min(tmx0, sox);
-	        var y$17 = Math.max(smy1, tmy1);
+	        if (y$21 > smy0 && sox < tx1) {
+	            var x$20 = Math.min(smx0, tmx0);
+	            var y$22 = Math.max(smy1, tmy1);
+
+	            return [
+	                { x: x$20, y: soy },
+	                { x: x$20, y: y$22 },
+	                { x: tox, y: y$22 }
+	            ];
+	        }
 
 	        return [
-	            { x: x$15, y: soy },
-	            { x: x$15, y: y$17 },
-	            { x: tox, y: y$17 }
+	            { x: sox, y: soy },
+	            { x: sox, y: y$21 },
+	            { x: tox, y: y$21 }
 	        ];
 	    } else if (sourceSide === 'left' && targetSide === 'top') {
-	        if (sox > tox && soy < tmy0) {
-	            return [{ x: tox, y: soy }];
+	        var isPointInsideSource$7 = inflatedSourceBBox.containsPoint(targetPoint);
+
+	        // The target point is inside the source element
+	        if (isPointInsideSource$7) {
+	            if (soy >= tmy0) {
+	                var y$23 = Math.min(soy - sourceMargin, toy);
+	                var x$21 = Math.min(smx0, tmx0);
+
+	                // Target anchor is on the top side of the source anchor
+	                return [
+	                    { x: x$21, y: soy },
+	                    { x: x$21, y: y$23 },
+	                    { x: tox, y: y$23 }
+	                ];
+	            }
+
+	            // Target anchor is below the source anchor
+	            // Add the `sourceMargin` since the source anchor is above the target anchor
+	            var anchorMiddleY$1 = (soy + sourceMargin + toy) / 2;
+
+	            return [
+	                { x: sox, y: soy },
+	                { x: sox, y: anchorMiddleY$1 },
+	                { x: tox, y: anchorMiddleY$1 }
+	            ];
 	        }
 
-	        if (sox >= tx1) {
+	        if (smx0 > tox) {
 	            if (soy > toy) {
-	                var x$16 = middleOfVerticalSides;
+	                var x$22 = tmx0;
+
+	                if (tmx1 <= smx0 && tmy0 <= soy) {
+	                    x$22 = middleOfVerticalSides;
+	                }
 
 	                return [
-	                    { x: x$16, y: soy },
-	                    { x: x$16, y: toy },
+	                    { x: x$22, y: soy },
+	                    { x: x$22, y: toy },
 	                    { x: tox, y: toy }
 	                ];
 	            }
+
+	            return [{ x: tox, y: soy }];
 	        }
 
-	        if (tox <= sx1 && toy > soy) {
-	            var y$18 = middleOfHorizontalSides;
+	        var y$24 = Math.min(tmy0, middleOfHorizontalSides);
 
+	        if (soy < toy && sx1 >= tox) {
 	            return [
 	                { x: sox, y: soy },
-	                { x: sox, y: y$18 },
-	                { x: tox, y: y$18 } ];
+	                { x: sox, y: y$24 },
+	                { x: tox, y: y$24 }];
 	        }
 
-	        var x$17 = toy < soy ? Math.min(smx0, tmx0) : smx0;
-	        var y$19 = Math.min(smy0, tmy0);
+	        if (y$24 < smy1 && sox < tx1) {
+	            var x$23 = Math.min(smx0, tmx0);
+	            var y$25 = Math.min(smy0, tmy0);
+	            return [
+	                { x: x$23, y: soy },
+	                { x: x$23, y: y$25 },
+	                { x: tox, y: y$25 }
+	            ];
+	        }
 
 	        return [
-	            { x: x$17, y: soy },
-	            { x: x$17, y: y$19 },
-	            { x: tox, y: y$19 }
+	            { x: sox, y: soy },
+	            { x: sox, y: y$24 },
+	            { x: tox, y: y$24 }
 	        ];
-
 	    } else if (sourceSide === 'right' && targetSide === 'top') {
-	        if (sox <= tox && soy < tmy0) {
-	            return [{ x: tox, y: soy }];
-	        }
+	        var isPointInsideSource$8 = inflatedSourceBBox.containsPoint(targetPoint);
+
+	        // The target point is inside the source element
+	        if (isPointInsideSource$8) {
+	            if (soy >= tmy0) {
+	                var x$24 = Math.max(smx1, tmx1);
+	                var y$26 = Math.min(soy - sourceMargin, toy);
+
+	                // Target anchor is on the top side of the source anchor
+	                return [
+	                    { x: x$24, y: soy },
+	                    { x: x$24, y: y$26 }, // Path adjustment for right side start
+	                    { x: tox, y: y$26 }
+	                ];
+	            }
 
-	        if (sx1 < tx0 && soy > toy) {
-	            var x$18 = middleOfVerticalSides;
+	            // Target anchor is below the source anchor
+	            // Adjust sourceMargin calculation since the source anchor is now on the right
+	            var anchorMiddleY$2 = (soy + sourceMargin + toy) / 2;
 
 	            return [
-	                { x: x$18, y: soy },
-	                { x: x$18, y: toy },
-	                { x: tox, y: toy }
+	                { x: sox, y: soy },
+	                { x: sox, y: anchorMiddleY$2 },
+	                { x: tox, y: anchorMiddleY$2 }
 	            ];
 	        }
 
-	        if (tox < sox && ty0 > sy1) {
-	            var y$20 = middleOfHorizontalSides;
+	        if (smx1 < tox) {
+	            if (soy > toy) {
+	                var x$25 = tmx1;
 
+	                if (tmx0 >= smx1 && tmy0 <= soy) {
+	                    x$25 = middleOfVerticalSides;
+	                }
+
+	                return [
+	                    { x: x$25, y: soy },
+	                    { x: x$25, y: toy },
+	                    { x: tox, y: toy }
+	                ];
+	            }
+
+	            return [{ x: tox, y: soy }];
+	        }
+
+	        var y$27 = Math.min(tmy0, middleOfHorizontalSides);
+
+	        if (soy < toy && sx0 <= tox) {
 	            return [
 	                { x: sox, y: soy },
-	                { x: sox, y: y$20 },
-	                { x: tox, y: y$20 }
-	            ];
+	                { x: sox, y: y$27 },
+	                { x: tox, y: y$27 }];
 	        }
 
-	        var x$19 = Math.max(smx1, tmx1);
-	        var y$21 = Math.min(smy0, tmy0);
+	        if (y$27 < smy1 && sox > tx0) {
+	            var x$26 = Math.max(smx1, tmx1);
+	            var y$28 = Math.min(smy0, tmy0);
+
+	            return [
+	                { x: x$26, y: soy },
+	                { x: x$26, y: y$28 },
+	                { x: tox, y: y$28 }
+	            ];
+	        }
 
 	        return [
-	            { x: x$19, y: soy },
-	            { x: x$19, y: y$21 },
-	            { x: tox, y: y$21 }
+	            { x: sox, y: soy },
+	            { x: sox, y: y$27 },
+	            { x: tox, y: y$27 }
 	        ];
 	    } else if (sourceSide === 'right' && targetSide === 'bottom') {
-	        if (sox <= tox && soy >= tmy1) {
-	            return [{ x: tox, y: soy }];
-	        }
+	        var isPointInsideSource$9 = inflatedSourceBBox.containsPoint(targetPoint);
 
-	        if (sox <= tmx0 && soy < toy) {
-	            var x$20 = middleOfVerticalSides;
+	        // The target point is inside the source element
+	        if (isPointInsideSource$9) {
+	            if (soy <= tmy1) {
+	                var x$27 = Math.max(smx1, tmx1);
+	                var y$29 = Math.max(soy + sourceMargin, toy);
+
+	                return [
+	                    { x: x$27, y: soy },
+	                    { x: x$27, y: y$29 },
+	                    { x: tox, y: y$29 }
+	                ];
+	            }
+
+	            // Target anchor is above the source anchor
+	            var anchorMiddleY$3 = (soy - sourceMargin + toy) / 2;
 
 	            return [
-	                { x: x$20, y: soy },
-	                { x: x$20, y: toy },
-	                { x: tox, y: toy }
+	                { x: sox, y: soy },
+	                { x: sox, y: anchorMiddleY$3 },
+	                { x: tox, y: anchorMiddleY$3 }
 	            ];
 	        }
 
-	        if (tox > sx0 && ty1 < sy0) {
-	            var y$22 = middleOfHorizontalSides;
+	        if (smx1 < tox) {
+	            if (soy < toy) {
+	                var x$28 = tmx1;
+
+	                if (tmx0 >= smx1 && tmy1 >= soy) {
+	                    x$28 = middleOfVerticalSides;
+	                }
+
+	                return [
+	                    { x: x$28, y: soy },
+	                    { x: x$28, y: toy },
+	                    { x: tox, y: toy }
+	                ];
+	            }
+
+	            return [{ x: tox, y: soy }];
+	        }
+
+	        var y$30 = Math.max(tmy1, middleOfHorizontalSides);
 
+	        if (soy > toy && sx0 <= tox) {
 	            return [
 	                { x: sox, y: soy },
-	                { x: sox, y: y$22 },
-	                { x: tox, y: y$22 }
+	                { x: sox, y: y$30 },
+	                { x: tox, y: y$30 }
 	            ];
 	        }
 
-	        var x$21 = Math.max(tmx1, sox);
-	        var y$23 = Math.max(smy1, tmy1);
+	        if (y$30 > smy0 && sox > tx0) {
+	            var x$29 = Math.max(smx1, tmx1);
+	            var y$31 = Math.max(smy1, tmy1);
+
+	            return [
+	                { x: x$29, y: soy },
+	                { x: x$29, y: y$31 },
+	                { x: tox, y: y$31 }
+	            ];
+	        }
 
 	        return [
-	            { x: x$21, y: soy },
-	            { x: x$21, y: y$23 },
-	            { x: tox, y: y$23 }
+	            { x: sox, y: soy },
+	            { x: sox, y: y$30 },
+	            { x: tox, y: y$30 }
 	        ];
 	    }
 	}
@@ -28159,7 +28511,7 @@ var joint = (function (exports) {
 	        dummySource.direction = fromDirection;
 	        firstVertex.direction = toDirection;
 
-	        resultVertices.push.apply(resultVertices, routeBetweenPoints(dummySource, firstVertex).concat( [firstVertex.point] ));
+	        resultVertices.push.apply(resultVertices, routeBetweenPoints(dummySource, firstVertex, { targetInSourceBBox: true }).concat( [firstVertex.point] ));
 	    } else {
 	        // The first point responsible for the initial direction of the route
 	        var next = verticesData[1] || targetPoint;
@@ -30260,13 +30612,18 @@ var joint = (function (exports) {
 
 	        var model = this.model;
 	        var id = model.id;
-	        var port = this.findAttribute('port', magnet);
+	        // Find a node with the `port` attribute set on it.
+	        var portNode = this.findAttributeNode('port', magnet);
 	        // Find a unique `selector` of the element under pointer that is a magnet.
 	        var selector = magnet.getAttribute('joint-selector');
 
 	        var end = { id: id };
 	        if (selector != null) { end.magnet = selector; }
-	        if (port != null) {
+	        if (portNode != null) {
+	            var port = portNode.getAttribute('port');
+	            if (portNode.getAttribute('port-id-type') === 'number') {
+	                port = parseInt(port, 10);
+	            }
 	            end.port = port;
 	            if (!model.hasPort(port) && !selector) {
 	                // port created via the `port` attribute (not API)
@@ -34321,6 +34678,8 @@ var joint = (function (exports) {
 	    },
 
 	    renderGrid: function renderGrid() {
+	        var this$1 = this;
+
 
 	        var ref = this;
 	        var paper = ref.options.paper;
@@ -34340,7 +34699,7 @@ var joint = (function (exports) {
 
 	        gridSettings.forEach(function (gridLayerSetting, index) {
 
-	            var id = 'pattern_' + index;
+	            var id = this$1._getPatternId(index);
 	            var options = merge({}, gridLayerSetting);
 	            var scaleFactor = options.scaleFactor; if ( scaleFactor === void 0 ) scaleFactor = 1;
 	            options.width = gridSize * scaleFactor || 1;
@@ -34368,6 +34727,8 @@ var joint = (function (exports) {
 	    },
 
 	    updateGrid: function updateGrid() {
+	        var this$1 = this;
+
 
 	        var ref = this;
 	        var grid = ref._gridCache;
@@ -34388,12 +34749,16 @@ var joint = (function (exports) {
 	        }
 	        gridSettings.forEach(function (options, index) {
 	            if (isFunction(options.update)) {
-	                var vPattern = patterns['pattern_' + index];
+	                var vPattern = patterns[this$1._getPatternId(index)];
 	                options.update(vPattern.node.firstChild, options, paper);
 	            }
 	        });
 	    },
 
+	    _getPatternId: function _getPatternId(index) {
+	        return ("pattern_" + (this.options.paper.cid) + "_" + index);
+	    },
+
 	    _getGridRefs: function _getGridRefs() {
 	        var ref = this;
 	        var grid = ref._gridCache;
@@ -34823,6 +35188,8 @@ var joint = (function (exports) {
 	    },
 
 	    _resetUpdates: function() {
+	        if (this._updates && this._updates.id) { cancelFrame(this._updates.id); }
+
 	        return this._updates = {
 	            id: null,
 	            priorities: [{}, {}, {}],
@@ -38616,12 +38983,14 @@ var joint = (function (exports) {
 	        evt.stopPropagation();
 	        evt.preventDefault();
 	        var relatedView = this.relatedView;
+	        var paper = relatedView.paper;
 	        relatedView.model.startBatch('arrowhead-move', { ui: true, tool: this.cid });
 	        relatedView.startArrowheadMove(this.arrowheadType);
 	        this.delegateDocumentEvents();
-	        relatedView.paper.undelegateEvents();
+	        paper.undelegateEvents();
 	        this.focus();
 	        this.el.style.pointerEvents = 'none';
+	        relatedView.notifyPointerdown.apply(relatedView, paper.getPointerArgs(evt));
 	    },
 	    onPointerMove: function(evt) {
 	        var normalizedEvent = normalizeEvent(evt);
@@ -39576,7 +39945,7 @@ var joint = (function (exports) {
 		Control: Control
 	});
 
-	var version = "4.0.1";
+	var version = "4.0.3";
 
 	var Vectorizer = V;
 	var layout = { PortLabel: PortLabel, Port: Port };