orcasvn-react-diagrams 0.2.2 → 0.2.3

package/dist/esm/index.js

@@ -215,6 +215,11 @@ var PortModel = /** @class */ (function () {
         this.moveMode = data.moveMode;
         this.anchorCenter = (_a = data.anchorCenter) !== null && _a !== void 0 ? _a : true;
         this.orientToHostBorder = (_b = data.orientToHostBorder) !== null && _b !== void 0 ? _b : true;
+        this.placementPoint = data.placementPoint ? __assign({}, data.placementPoint) : undefined;
+        this.linkAttachPoint = data.linkAttachPoint ? __assign({}, data.linkAttachPoint) : undefined;
+        this.externalLinkAttachPoint = data.externalLinkAttachPoint ? __assign({}, data.externalLinkAttachPoint) : undefined;
+        this.internalLinkAttachPoint = data.internalLinkAttachPoint ? __assign({}, data.internalLinkAttachPoint) : undefined;
+        this.rotationPivot = data.rotationPivot ? __assign({}, data.rotationPivot) : undefined;
         this.currentAnchorId = data.currentAnchorId;
     }
     PortModel.prototype.setPosition = function (position) {
@@ -243,6 +248,11 @@ var PortModel = /** @class */ (function () {
             moveMode: this.moveMode,
             anchorCenter: this.anchorCenter,
             orientToHostBorder: this.orientToHostBorder,
+            placementPoint: this.placementPoint ? __assign({}, this.placementPoint) : undefined,
+            linkAttachPoint: this.linkAttachPoint ? __assign({}, this.linkAttachPoint) : undefined,
+            externalLinkAttachPoint: this.externalLinkAttachPoint ? __assign({}, this.externalLinkAttachPoint) : undefined,
+            internalLinkAttachPoint: this.internalLinkAttachPoint ? __assign({}, this.internalLinkAttachPoint) : undefined,
+            rotationPivot: this.rotationPivot ? __assign({}, this.rotationPivot) : undefined,
             currentAnchorId: this.currentAnchorId,
         };
     };
@@ -1925,6 +1935,7 @@ var AutoLayoutService = /** @class */ (function () {
         var childFitCrossAxis = (_e = layout.childFitCrossAxis) !== null && _e !== void 0 ? _e : 'none';
         var childFitMinSize = layout.childFitMinSize;
         var childFitMaxSize = layout.childFitMaxSize;
+        var labelReservedTopLane = this.resolveLabelReservedTopLane(parentId, layout);
         var sorted = __spreadArray([], children, true).sort(function (a, b) {
             var aPos = axis === 'horizontal' ? a.position.x : a.position.y;
             var bPos = axis === 'horizontal' ? b.position.x : b.position.y;
@@ -1935,7 +1946,7 @@ var AutoLayoutService = /** @class */ (function () {
         var gapCount = Math.max(0, sorted.length - 1);
         var calculateFittedSizes = function (parentWidth, parentHeight) {
             var availableWidth = Math.max(0, parentWidth - padding.x * 2);
-            var availableHeight = Math.max(0, parentHeight - padding.y * 2);
+            var availableHeight = Math.max(0, parentHeight - padding.y * 2 - labelReservedTopLane);
             var availableMain = axis === 'horizontal'
                 ? Math.max(0, availableWidth - gap * gapCount)
                 : Math.max(0, availableHeight - gap * gapCount);
@@ -1980,12 +1991,12 @@ var AutoLayoutService = /** @class */ (function () {
             if (axis === 'horizontal') {
                 return {
                     width: Math.max(parent.size.width, padding.x * 2 + totalWidth + gap * gapCount),
-                    height: Math.max(parent.size.height, padding.y * 2 + maxHeight),
+                    height: Math.max(parent.size.height, padding.y * 2 + labelReservedTopLane + maxHeight),
                 };
             }
             return {
                 width: Math.max(parent.size.width, padding.x * 2 + maxWidth),
-                height: Math.max(parent.size.height, padding.y * 2 + totalHeight + gap * gapCount),
+                height: Math.max(parent.size.height, padding.y * 2 + labelReservedTopLane + totalHeight + gap * gapCount),
             };
         };
         var fittedSizes = calculateFittedSizes(parent.size.width, parent.size.height);
@@ -1993,9 +2004,9 @@ var AutoLayoutService = /** @class */ (function () {
         fittedSizes = calculateFittedSizes(newParentWidth, newParentHeight);
         (_a = resolveParentSize(fittedSizes), newParentWidth = _a.width, newParentHeight = _a.height);
         var availableWidth = Math.max(0, newParentWidth - padding.x * 2);
-        var availableHeight = Math.max(0, newParentHeight - padding.y * 2);
+        var availableHeight = Math.max(0, newParentHeight - padding.y * 2 - labelReservedTopLane);
         var cursorX = padding.x;
-        var cursorY = padding.y;
+        var cursorY = padding.y + labelReservedTopLane;
         var desiredPositions = new Map();
         var desiredSizes = new Map();
         sorted.forEach(function (child, index) {
@@ -2003,10 +2014,10 @@ var AutoLayoutService = /** @class */ (function () {
             desiredSizes.set(child.id, fittedSize);
             if (axis === 'horizontal') {
                 var y = align === 'start'
-                    ? padding.y
+                    ? padding.y + labelReservedTopLane
                     : align === 'end'
                         ? newParentHeight - padding.y - fittedSize.height
-                        : padding.y + Math.max(0, (availableHeight - fittedSize.height) / 2);
+                        : padding.y + labelReservedTopLane + Math.max(0, (availableHeight - fittedSize.height) / 2);
                 desiredPositions.set(child.id, { x: cursorX, y: y });
                 cursorX += fittedSize.width + (index < sorted.length - 1 ? gap : 0);
             }
@@ -2099,6 +2110,45 @@ var AutoLayoutService = /** @class */ (function () {
             y: (_c = padding.y) !== null && _c !== void 0 ? _c : 12,
         };
     };
+    AutoLayoutService.prototype.resolveLabelReservedTopLane = function (parentId, layout) {
+        var _a, _b, _c, _d;
+        var policy = layout === null || layout === void 0 ? void 0 : layout.labelReservedSpace;
+        if (!policy)
+            return 0;
+        var mode = (_a = policy.mode) !== null && _a !== void 0 ? _a : 'none';
+        if (mode === 'none')
+            return 0;
+        if (((_b = policy.placement) !== null && _b !== void 0 ? _b : 'top') !== 'top')
+            return 0;
+        var minSize = Math.max(0, (_c = policy.minSize) !== null && _c !== void 0 ? _c : 0);
+        var maxSize = typeof policy.maxSize === 'number' && Number.isFinite(policy.maxSize)
+            ? Math.max(minSize, policy.maxSize)
+            : Number.POSITIVE_INFINITY;
+        var resolved = 0;
+        if (mode === 'fixed') {
+            resolved = Math.max(0, (_d = policy.size) !== null && _d !== void 0 ? _d : 0);
+        }
+        else {
+            resolved = this.resolveFlexibleLabelLaneFromText(parentId);
+        }
+        return this.clampLayoutSize(resolved, minSize, maxSize);
+    };
+    AutoLayoutService.prototype.resolveFlexibleLabelLaneFromText = function (parentId) {
+        var lane = 0;
+        this.model.texts.forEach(function (text) {
+            var _a, _b, _c;
+            if (text.ownerId !== parentId)
+                return;
+            var offset = (_a = text.displayOffset) !== null && _a !== void 0 ? _a : { x: 0, y: 0 };
+            var size = (_b = text.displayClipSize) !== null && _b !== void 0 ? _b : text.size;
+            var height = (_c = size === null || size === void 0 ? void 0 : size.height) !== null && _c !== void 0 ? _c : 0;
+            var bottom = text.position.y + offset.y + height;
+            if (bottom > lane) {
+                lane = bottom;
+            }
+        });
+        return Math.max(0, lane);
+    };
     AutoLayoutService.prototype.clampLayoutSize = function (value, min, max) {
         var minValue = min !== null && min !== void 0 ? min : 0;
         var maxValue = max !== null && max !== void 0 ? max : Number.POSITIVE_INFINITY;
@@ -2167,6 +2217,104 @@ var AutoLayoutService = /** @class */ (function () {
     return AutoLayoutService;
 }());
 
+var ZERO_POINT = { x: 0, y: 0 };
+var clonePoint = function (point) { return ({ x: point.x, y: point.y }); };
+var borderSideToNormal = function (side) {
+    if (side === 'left')
+        return { x: -1, y: 0 };
+    if (side === 'right')
+        return { x: 1, y: 0 };
+    if (side === 'top')
+        return { x: 0, y: -1 };
+    return { x: 0, y: 1 };
+};
+var resolvePortGeometryPoints = function (port, attachMode) {
+    var _a, _b, _c, _d, _e;
+    var placementPoint = clonePoint((_a = port.placementPoint) !== null && _a !== void 0 ? _a : ZERO_POINT);
+    var sharedLinkAttachPoint = clonePoint((_b = port.linkAttachPoint) !== null && _b !== void 0 ? _b : placementPoint);
+    var effectiveLinkAttachPoint = clonePoint(attachMode === 'internal'
+        ? (_c = port.internalLinkAttachPoint) !== null && _c !== void 0 ? _c : sharedLinkAttachPoint
+        : (_d = port.externalLinkAttachPoint) !== null && _d !== void 0 ? _d : sharedLinkAttachPoint);
+    var rotationPivot = clonePoint((_e = port.rotationPivot) !== null && _e !== void 0 ? _e : placementPoint);
+    return {
+        placementPoint: placementPoint,
+        sharedLinkAttachPoint: sharedLinkAttachPoint,
+        effectiveLinkAttachPoint: effectiveLinkAttachPoint,
+        rotationPivot: rotationPivot,
+    };
+};
+var resolvePortOrientationContext = function (options) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+    var port = options.port, worldPlacement = options.worldPlacement, host = options.host, shapeRegistry = options.shapeRegistry, attachMode = options.attachMode;
+    var portShape = port.shapeId ? shapeRegistry.get(port.shapeId) : undefined;
+    var localRotation = ((_a = portShape === null || portShape === void 0 ? void 0 : portShape.baseRotation) !== null && _a !== void 0 ? _a : 0) +
+        (typeof ((_b = port.style) === null || _b === void 0 ? void 0 : _b.rotation) === 'number' ? port.style.rotation : 0);
+    var nodeAnchorPoint = port.anchorCenter && (portShape === null || portShape === void 0 ? void 0 : portShape.svgPath)
+        ? {
+            x: ((_f = (_d = (_c = portShape.svgSize) === null || _c === void 0 ? void 0 : _c.width) !== null && _d !== void 0 ? _d : (_e = port.size) === null || _e === void 0 ? void 0 : _e.width) !== null && _f !== void 0 ? _f : 0) / 2,
+            y: ((_k = (_h = (_g = portShape.svgSize) === null || _g === void 0 ? void 0 : _g.height) !== null && _h !== void 0 ? _h : (_j = port.size) === null || _j === void 0 ? void 0 : _j.height) !== null && _k !== void 0 ? _k : 0) / 2,
+        }
+        : __assign({}, ZERO_POINT);
+    if (port.moveMode !== 'border' || port.orientToHostBorder === false || !host) {
+        return { localRotation: localRotation, rotation: 0, offset: __assign({}, ZERO_POINT), nodeAnchorPoint: nodeAnchorPoint };
+    }
+    var hostRect = {
+        x: host.position.x,
+        y: host.position.y,
+        width: host.size.width,
+        height: host.size.height,
+    };
+    var shape = shapeRegistry.get(host.shapeId);
+    var side = (shape === null || shape === void 0 ? void 0 : shape.resolveBorderSide)
+        ? shape.resolveBorderSide(worldPlacement, hostRect)
+        : resolveBoundarySide(worldPlacement, hostRect, 'rect');
+    var normal = (shape === null || shape === void 0 ? void 0 : shape.resolveBorderNormal)
+        ? shape.resolveBorderNormal(worldPlacement, hostRect)
+        : borderSideToNormal(side);
+    var geometry = resolvePortGeometryPoints(port, attachMode);
+    var hookContext = {
+        side: side,
+        normal: normal,
+        hostRect: hostRect,
+        attachMode: attachMode,
+        effectiveLinkAttachPoint: geometry.effectiveLinkAttachPoint,
+        placementPoint: geometry.placementPoint,
+        rotationPivot: geometry.rotationPivot,
+        portSize: port.size,
+    };
+    var hookResult = (_l = shape === null || shape === void 0 ? void 0 : shape.resolvePortBorderTransform) === null || _l === void 0 ? void 0 : _l.call(shape, hookContext);
+    return {
+        localRotation: localRotation,
+        nodeAnchorPoint: nodeAnchorPoint,
+        side: side,
+        normal: normal,
+        rotation: borderSideToInwardRotation(side) + ((_m = hookResult === null || hookResult === void 0 ? void 0 : hookResult.rotation) !== null && _m !== void 0 ? _m : 0),
+        offset: (hookResult === null || hookResult === void 0 ? void 0 : hookResult.offset) ? clonePoint(hookResult.offset) : __assign({}, ZERO_POINT),
+    };
+};
+var resolvePortWorldTransform = function (options) {
+    var port = options.port, worldPlacement = options.worldPlacement, attachMode = options.attachMode, orientation = options.orientation;
+    var geometry = resolvePortGeometryPoints(port, attachMode);
+    var totalRotation = orientation.localRotation + orientation.rotation;
+    var rotatedPlacement = rotatePoint({
+        x: geometry.placementPoint.x - orientation.nodeAnchorPoint.x,
+        y: geometry.placementPoint.y - orientation.nodeAnchorPoint.y,
+    }, ZERO_POINT, totalRotation);
+    var rotatedAttach = rotatePoint({
+        x: geometry.effectiveLinkAttachPoint.x - orientation.nodeAnchorPoint.x,
+        y: geometry.effectiveLinkAttachPoint.y - orientation.nodeAnchorPoint.y,
+    }, ZERO_POINT, totalRotation);
+    var nodePosition = {
+        x: worldPlacement.x - rotatedPlacement.x + orientation.offset.x,
+        y: worldPlacement.y - rotatedPlacement.y + orientation.offset.y,
+    };
+    var linkAttachWorld = {
+        x: nodePosition.x + rotatedAttach.x,
+        y: nodePosition.y + rotatedAttach.y,
+    };
+    return { nodePosition: nodePosition, linkAttachWorld: linkAttachWorld };
+};
+
 var EDGE_TOLERANCE = 0.5;
 var LinkRoutingService = /** @class */ (function () {
     function LinkRoutingService(config) {
@@ -2191,8 +2339,9 @@ var LinkRoutingService = /** @class */ (function () {
             }
             if (updatedLinks.has(link.id))
                 return;
-            var source = _this.model.getPortWorldPosition(link.sourcePortId);
-            var target = _this.model.getPortWorldPosition(link.targetPortId);
+            var endpoints = _this.resolveLinkEndpoints(link);
+            var source = endpoints.source;
+            var target = endpoints.target;
             if (!source || !target)
                 return;
             var points = _this.resolveLinkPointsForUpdate(link, source, target);
@@ -2209,8 +2358,9 @@ var LinkRoutingService = /** @class */ (function () {
             var _a;
             if (link.points.length > 0)
                 return;
-            var source = _this.model.getPortWorldPosition(link.sourcePortId);
-            var target = _this.model.getPortWorldPosition(link.targetPortId);
+            var endpoints = _this.resolveLinkEndpoints(link);
+            var source = endpoints.source;
+            var target = endpoints.target;
             if (!source || !target)
                 return;
             var points = ((_a = link.routing) !== null && _a !== void 0 ? _a : 'auto') === 'manual'
@@ -2221,6 +2371,31 @@ var LinkRoutingService = /** @class */ (function () {
         });
         return patches;
     };
+    LinkRoutingService.prototype.getPortLinkWorldPosition = function (portId, options) {
+        var _a;
+        var port = this.model.getPort(portId);
+        if (!port)
+            return null;
+        var worldPlacement = this.model.getPortWorldPosition(portId);
+        if (!worldPlacement)
+            return null;
+        var host = this.resolveHostForPort(portId);
+        var attachMode = (_a = options === null || options === void 0 ? void 0 : options.attachMode) !== null && _a !== void 0 ? _a : this.resolveAttachModeForPorts(portId, options === null || options === void 0 ? void 0 : options.oppositePortId);
+        var orientation = resolvePortOrientationContext({
+            port: port.toData(),
+            worldPlacement: worldPlacement,
+            host: host,
+            shapeRegistry: this.shapeRegistry,
+            attachMode: attachMode,
+        });
+        var transformed = resolvePortWorldTransform({
+            port: port.toData(),
+            worldPlacement: worldPlacement,
+            attachMode: attachMode,
+            orientation: orientation,
+        });
+        return transformed.linkAttachWorld;
+    };
     LinkRoutingService.prototype.computeAutoRoute = function (link, source, target) {
         var routed = this.router.route(source, target, this.buildRouteContext(link));
         if (!routed || routed.length < 2) {
@@ -2239,6 +2414,12 @@ var LinkRoutingService = /** @class */ (function () {
         }
         return this.computeAutoRoute(link, source, target);
     };
+    LinkRoutingService.prototype.resolveLinkEndpoints = function (link) {
+        return {
+            source: this.getPortLinkWorldPosition(link.sourcePortId, { oppositePortId: link.targetPortId }),
+            target: this.getPortLinkWorldPosition(link.targetPortId, { oppositePortId: link.sourcePortId }),
+        };
+    };
     LinkRoutingService.prototype.updateManualRoute = function (points, source, target) {
         if (points.length < 2) {
             return [__assign({}, source), __assign({}, target)];
@@ -2258,8 +2439,9 @@ var LinkRoutingService = /** @class */ (function () {
         var targetPort = this.model.getPort(link.targetPortId);
         var sourceElementId = sourcePort === null || sourcePort === void 0 ? void 0 : sourcePort.elementId;
         var targetElementId = targetPort === null || targetPort === void 0 ? void 0 : targetPort.elementId;
-        var sourcePosition = this.model.getPortWorldPosition(link.sourcePortId);
-        var targetPosition = this.model.getPortWorldPosition(link.targetPortId);
+        var endpoints = this.resolveLinkEndpoints(link);
+        var sourcePosition = endpoints.source;
+        var targetPosition = endpoints.target;
         var sourceRect = sourceElementId ? this.getElementRect(sourceElementId) : null;
         var targetRect = targetElementId ? this.getElementRect(targetElementId) : null;
         var sourceEndpointGeometry = sourcePosition && sourceRect
@@ -2389,6 +2571,40 @@ var LinkRoutingService = /** @class */ (function () {
             height: element.size.height,
         };
     };
+    LinkRoutingService.prototype.resolveHostForPort = function (portId) {
+        var _a;
+        var port = this.model.getPort(portId);
+        if (!port)
+            return null;
+        var element = this.model.getElement(port.elementId);
+        if (!element)
+            return null;
+        return {
+            id: element.id,
+            position: (_a = this.model.getElementWorldPosition(element.id)) !== null && _a !== void 0 ? _a : element.position,
+            size: element.size,
+            shapeId: element.shapeId,
+        };
+    };
+    LinkRoutingService.prototype.resolveAttachModeForPorts = function (portId, oppositePortId) {
+        var _a, _b;
+        if (!oppositePortId)
+            return 'external';
+        var elementId = (_a = this.model.getPort(portId)) === null || _a === void 0 ? void 0 : _a.elementId;
+        var oppositeElementId = (_b = this.model.getPort(oppositePortId)) === null || _b === void 0 ? void 0 : _b.elementId;
+        if (!elementId || !oppositeElementId)
+            return 'external';
+        return this.hasAncestorRelation(elementId, oppositeElementId) ? 'internal' : 'external';
+    };
+    LinkRoutingService.prototype.hasAncestorRelation = function (sourceElementId, targetElementId) {
+        if (sourceElementId === targetElementId)
+            return false;
+        var sourceChain = this.getAncestorChain(sourceElementId);
+        if (sourceChain.includes(targetElementId))
+            return true;
+        var targetChain = this.getAncestorChain(targetElementId);
+        return targetChain.includes(sourceElementId);
+    };
     LinkRoutingService.prototype.getAncestorChain = function (elementId) {
         var _a;
         var chain = [];
@@ -2766,8 +2982,12 @@ var DiagramEngine = /** @class */ (function () {
     };
     DiagramEngine.prototype.addLink = function (link) {
         var _a;
-        var source = this.model.getPortWorldPosition(link.sourcePortId);
-        var target = this.model.getPortWorldPosition(link.targetPortId);
+        var source = this.linkRoutingService.getPortLinkWorldPosition(link.sourcePortId, {
+            oppositePortId: link.targetPortId,
+        });
+        var target = this.linkRoutingService.getPortLinkWorldPosition(link.targetPortId, {
+            oppositePortId: link.sourcePortId,
+        });
         var routing = (_a = link.routing) !== null && _a !== void 0 ? _a : 'auto';
         var points = link.points;
         if (source && target) {
@@ -2791,8 +3011,12 @@ var DiagramEngine = /** @class */ (function () {
             return;
         var update = { routing: mode };
         if (mode === 'auto') {
-            var source = this.model.getPortWorldPosition(link.sourcePortId);
-            var target = this.model.getPortWorldPosition(link.targetPortId);
+            var source = this.linkRoutingService.getPortLinkWorldPosition(link.sourcePortId, {
+                oppositePortId: link.targetPortId,
+            });
+            var target = this.linkRoutingService.getPortLinkWorldPosition(link.targetPortId, {
+                oppositePortId: link.sourcePortId,
+            });
             if (source && target) {
                 update.points = this.computeAutoRoute(link, source, target);
             }
@@ -2826,8 +3050,12 @@ var DiagramEngine = /** @class */ (function () {
             var routing = (_a = link.routing) !== null && _a !== void 0 ? _a : 'auto';
             if (routing === 'manual' && !includeManual)
                 return;
-            var source = _this.model.getPortWorldPosition(link.sourcePortId);
-            var target = _this.model.getPortWorldPosition(link.targetPortId);
+            var source = _this.linkRoutingService.getPortLinkWorldPosition(link.sourcePortId, {
+                oppositePortId: link.targetPortId,
+            });
+            var target = _this.linkRoutingService.getPortLinkWorldPosition(link.targetPortId, {
+                oppositePortId: link.sourcePortId,
+            });
             if (!source || !target)
                 return;
             var points = _this.computeAutoRoute(link, source, target);
@@ -2851,8 +3079,10 @@ var DiagramEngine = /** @class */ (function () {
         this.emitChange(patches);
     };
     DiagramEngine.prototype.updateText = function (id, content) {
+        var _this = this;
         var patches = this.commandQueue.run(createUpdateTextCommand(id, content), this.model);
         var text = this.model.getText(id);
+        var layoutOwnerId = (text === null || text === void 0 ? void 0 : text.ownerId) && this.hasFlexibleLabelReservedSpace(text.ownerId) ? text.ownerId : null;
         if (text) {
             var resolved = this.resolveTextPresentation(text.toData());
             text.setSize(resolved.size);
@@ -2873,7 +3103,18 @@ var DiagramEngine = /** @class */ (function () {
                 reason: 'content',
             });
         }
-        this.emitChange(patches);
+        if (!layoutOwnerId) {
+            this.emitChange(patches);
+            return;
+        }
+        var allPatches = this.mutationPipeline.run({
+            basePatches: patches,
+            layoutSteps: [
+                function () { return _this.applyLayoutForParent(layoutOwnerId); },
+                function () { var _a, _b; return _this.applyLayoutCascade((_b = (_a = _this.model.getElement(layoutOwnerId)) === null || _a === void 0 ? void 0 : _a.parentId) !== null && _b !== void 0 ? _b : null); },
+            ],
+        });
+        this.emitChange(allPatches);
     };
     DiagramEngine.prototype.moveTextTo = function (id, x, y) {
         var text = this.model.getText(id);
@@ -2976,6 +3217,9 @@ var DiagramEngine = /** @class */ (function () {
     DiagramEngine.prototype.getPortWorldPosition = function (id) {
         return this.model.getPortWorldPosition(id);
     };
+    DiagramEngine.prototype.getPortLinkWorldPosition = function (id, options) {
+        return this.linkRoutingService.getPortLinkWorldPosition(id, options);
+    };
     DiagramEngine.prototype.getTextWorldPosition = function (id) {
         return this.model.getTextWorldPosition(id);
     };
@@ -3384,6 +3628,12 @@ var DiagramEngine = /** @class */ (function () {
     DiagramEngine.prototype.applyAllLayouts = function () {
         return this.autoLayoutService.applyAllLayouts();
     };
+    DiagramEngine.prototype.hasFlexibleLabelReservedSpace = function (elementId) {
+        var _a, _b, _c;
+        var element = this.model.getElement(elementId);
+        var mode = (_c = (_b = (_a = element === null || element === void 0 ? void 0 : element.layout) === null || _a === void 0 ? void 0 : _a.labelReservedSpace) === null || _b === void 0 ? void 0 : _b.mode) !== null && _c !== void 0 ? _c : 'none';
+        return mode === 'flexible';
+    };
     DiagramEngine.prototype.updateLinksForPorts = function (portIds) {
         return this.linkRoutingService.updateLinksForPorts(portIds);
     };
@@ -3760,7 +4010,8 @@ var KonvaNodeFactory = /** @class */ (function () {
     KonvaNodeFactory.prototype.createDrawNode = function (model, shape, config) {
         var _a, _b;
         var style = model.style;
-        var attrs = __assign(__assign({ id: model.id, x: model.position.x, y: model.position.y, name: config.name }, (style !== null && style !== void 0 ? style : {})), { __shapeDraw: true, __model: model, sceneFunc: function (ctx, node) {
+        var _c = this.resolveShapeRotation(shape, style), resolvedStyle = _c.style, rotation = _c.rotation;
+        var attrs = __assign(__assign({ id: model.id, x: model.position.x, y: model.position.y, name: config.name }, (resolvedStyle !== null && resolvedStyle !== void 0 ? resolvedStyle : {})), { __shapeDraw: true, __model: model, rotation: rotation, sceneFunc: function (ctx, node) {
                 var _a, _b, _c;
                 var resolvedModel = (_b = (node.getAttr ? node.getAttr('__model') : (_a = node.attrs) === null || _a === void 0 ? void 0 : _a.__model)) !== null && _b !== void 0 ? _b : model;
                 (_c = shape.draw) === null || _c === void 0 ? void 0 : _c.call(shape, { ctx: ctx, model: resolvedModel });
@@ -3776,6 +4027,7 @@ var KonvaNodeFactory = /** @class */ (function () {
     KonvaNodeFactory.prototype.createSvgPathNode = function (model, shape, config) {
         var _a, _b, _c, _d, _e, _f, _g;
         var style = model.style;
+        var _h = this.resolveShapeRotation(shape, style), resolvedStyle = _h.style, rotation = _h.rotation;
         var sizeUpdater = function (_a) {
             var _b, _c;
             var nextSize = _a.size, anchorCenter = _a.anchorCenter, updateOffsetX = _a.updateOffsetX, updateOffsetY = _a.updateOffsetY, getNodeAttr = _a.getNodeAttr;
@@ -3797,7 +4049,7 @@ var KonvaNodeFactory = /** @class */ (function () {
             return attrs;
         };
         var size = (_a = config.size) !== null && _a !== void 0 ? _a : { width: 0, height: 0 };
-        var node = new this.konva.Path(__assign(__assign({ id: model.id, x: model.position.x, y: model.position.y, data: shape.svgPath, name: config.name }, (style !== null && style !== void 0 ? style : {})), { shapeKind: 'svg-path', __autoOffsetX: true, __autoOffsetY: true }));
+        var node = new this.konva.Path(__assign(__assign({ id: model.id, x: model.position.x, y: model.position.y, rotation: rotation, data: shape.svgPath, name: config.name }, (resolvedStyle !== null && resolvedStyle !== void 0 ? resolvedStyle : {})), { shapeKind: 'svg-path', __autoOffsetX: true, __autoOffsetY: true }));
         var rect = node.getClientRect ? node.getClientRect({ skipTransform: true }) : null;
         var baseWidth = (_d = (_c = (_b = shape.svgSize) === null || _b === void 0 ? void 0 : _b.width) !== null && _c !== void 0 ? _c : rect === null || rect === void 0 ? void 0 : rect.width) !== null && _d !== void 0 ? _d : size.width;
         var baseHeight = (_g = (_f = (_e = shape.svgSize) === null || _e === void 0 ? void 0 : _e.height) !== null && _f !== void 0 ? _f : rect === null || rect === void 0 ? void 0 : rect.height) !== null && _g !== void 0 ? _g : size.height;
@@ -3814,6 +4066,20 @@ var KonvaNodeFactory = /** @class */ (function () {
         }
         return node;
     };
+    KonvaNodeFactory.prototype.resolveShapeRotation = function (shape, style) {
+        var _a, _b;
+        if (!style) {
+            return {
+                style: undefined,
+                rotation: (_a = shape.baseRotation) !== null && _a !== void 0 ? _a : 0,
+            };
+        }
+        var rotation = style.rotation, rest = __rest(style, ["rotation"]);
+        return {
+            style: rest,
+            rotation: ((_b = shape.baseRotation) !== null && _b !== void 0 ? _b : 0) + (typeof rotation === 'number' ? rotation : 0),
+        };
+    };
     KonvaNodeFactory.prototype.applyShapeBehaviorAttrs = function (node, shape) {
         if (!node.setAttrs || !shape.sizeUpdater)
             return;
@@ -4014,7 +4280,7 @@ var KonvaRenderer = /** @class */ (function () {
         this.drawOverlays();
     };
     KonvaRenderer.prototype.renderPortPlaceholder = function (port, hostElement) {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e, _f;
         var shapeId = port.shapeId;
         if (!this.tempPortNode || this.tempPortShapeId !== shapeId) {
             (_b = (_a = this.tempPortNode) === null || _a === void 0 ? void 0 : _a.destroy) === null || _b === void 0 ? void 0 : _b.call(_a);
@@ -4033,6 +4299,9 @@ var KonvaRenderer = /** @class */ (function () {
             }
         }
         if (this.tempPortNode) {
+            this.updateSize(this.tempPortNode, (_e = port.size) !== null && _e !== void 0 ? _e : { width: 8, height: 8 }, {
+                anchorCenter: (_f = port.anchorCenter) !== null && _f !== void 0 ? _f : true,
+            });
             this.applyPortOrientation(this.tempPortNode, port, port.position, undefined, hostElement);
         }
         this.drawOverlays();
@@ -4292,7 +4561,7 @@ var KonvaRenderer = /** @class */ (function () {
         var _this = this;
         var ports = Array.from(model.ports.values());
         ports.forEach(function (port) {
-            var _a, _b, _c;
+            var _a, _b, _c, _d, _e;
             var data = port.toData();
             var node = _this.portNodes.get(port.id);
             if (!node) {
@@ -4304,6 +4573,7 @@ var KonvaRenderer = /** @class */ (function () {
                 node.setAttrs({ __model: data });
             }
             var position = (_c = model.getPortWorldPosition(port.id)) !== null && _c !== void 0 ? _c : port.position;
+            _this.updateSize(node, (_d = data.size) !== null && _d !== void 0 ? _d : { width: 8, height: 8 }, { anchorCenter: (_e = data.anchorCenter) !== null && _e !== void 0 ? _e : true });
             _this.updatePosition(node, position);
             _this.applyPortOrientation(node, data, position, model);
         });
@@ -4398,27 +4668,22 @@ var KonvaRenderer = /** @class */ (function () {
         if (this.getNodeAttr(node, '__baseRotation') === undefined) {
             node.setAttrs({ __baseRotation: baseRotation });
         }
-        var orientedRotation = this.resolvePortBorderRotation(port, worldPosition, model, hostElementOverride);
-        node.setAttrs({ rotation: baseRotation + (orientedRotation !== null && orientedRotation !== void 0 ? orientedRotation : 0) });
-    };
-    KonvaRenderer.prototype.resolvePortBorderRotation = function (port, worldPosition, model, hostElementOverride) {
-        if (port.moveMode !== 'border' || port.orientToHostBorder === false) {
-            return null;
-        }
         var host = hostElementOverride !== null && hostElementOverride !== void 0 ? hostElementOverride : this.resolveHostElement(port.elementId, model);
-        if (!host)
-            return null;
-        var hostRect = {
-            x: host.position.x,
-            y: host.position.y,
-            width: host.size.width,
-            height: host.size.height,
-        };
-        var shape = this.shapeRegistry.get(host.shapeId);
-        var side = (shape === null || shape === void 0 ? void 0 : shape.resolveBorderSide)
-            ? shape.resolveBorderSide(worldPosition, hostRect)
-            : resolveBoundarySide(worldPosition, hostRect, 'rect');
-        return borderSideToInwardRotation(side);
+        var orientation = resolvePortOrientationContext({
+            port: port,
+            worldPlacement: worldPosition,
+            host: host,
+            shapeRegistry: this.shapeRegistry,
+            attachMode: 'external',
+        });
+        var transform = resolvePortWorldTransform({
+            port: port,
+            worldPlacement: worldPosition,
+            attachMode: 'external',
+            orientation: orientation,
+        });
+        this.updatePosition(node, transform.nodePosition);
+        node.setAttrs({ rotation: baseRotation + orientation.rotation });
     };
     KonvaRenderer.prototype.resolveHostElement = function (elementId, model) {
         var _a;
@@ -4520,6 +4785,7 @@ var KonvaInteraction = /** @class */ (function () {
         if (config === void 0) { config = {}; }
         var _a, _b;
         this.linkDragContext = null;
+        this.programmaticLinkSession = null;
         this.bound = false;
         this.handlers = [];
         this.windowHandlers = [];
@@ -4534,6 +4800,8 @@ var KonvaInteraction = /** @class */ (function () {
         this.textEditor = null;
         this.dragThreshold = 4;
         this.panSpeed = 0.5;
+        this.occupiedVertexTolerance = 2;
+        this.emittingElementLinkEnded = false;
         this.engine = engine;
         this.stage = config.stage;
         this.hitTester = (_a = config.hitTester) !== null && _a !== void 0 ? _a : new KonvaHitTester();
@@ -4554,6 +4822,121 @@ var KonvaInteraction = /** @class */ (function () {
             this.updateShapeHoverControl(this.lastPointerPosition);
         }
     };
+    KonvaInteraction.prototype.startLinkFromPort = function (sourcePortId, pointer) {
+        var _a, _b, _c;
+        var sourceElementId = this.engine.getPortElementId(sourcePortId);
+        if (!sourceElementId)
+            return;
+        var sourcePoint = (_a = this.engine.getPortLinkWorldPosition(sourcePortId)) !== null && _a !== void 0 ? _a : this.engine.getPortWorldPosition(sourcePortId);
+        if (!sourcePoint)
+            return;
+        if (((_b = this.dragState) === null || _b === void 0 ? void 0 : _b.mode) === 'link-drag' || this.programmaticLinkSession) {
+            this.cancelLink();
+        }
+        if (this.dragState &&
+            this.dragState.mode !== 'shape-control-drag' &&
+            this.dragState.mode !== 'link-drag') {
+            return;
+        }
+        var start = __assign({}, sourcePoint);
+        if (((_c = this.dragState) === null || _c === void 0 ? void 0 : _c.mode) === 'shape-control-drag') {
+            this.programmaticLinkSession = {
+                sourcePortId: sourcePortId,
+                sourceElementId: sourceElementId,
+                start: start,
+                current: start,
+            };
+        }
+        else {
+            this.dragState = {
+                mode: 'link-drag',
+                sourcePortId: sourcePortId,
+                sourceElementId: sourceElementId,
+                start: start,
+                current: start,
+                isMulti: false,
+                hasMoved: false,
+                completionBehavior: 'explicit',
+            };
+        }
+        this.linkDragContext = { sourcePortId: sourcePortId, sourceElementId: sourceElementId };
+        this.engine.emitElementLinkStarted({ sourcePortId: sourcePortId, sourceElementId: sourceElementId, startWorld: __assign({}, start) });
+        this.setCursor('crosshair');
+        if (pointer) {
+            this.updateLinkPreview(pointer);
+        }
+    };
+    KonvaInteraction.prototype.updateLinkPreview = function (pointer) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+        if (this.programmaticLinkSession) {
+            this.programmaticLinkSession.current = __assign({}, pointer);
+        }
+        else if (((_a = this.dragState) === null || _a === void 0 ? void 0 : _a.mode) === 'link-drag') {
+            this.dragState.current = __assign({}, pointer);
+            this.dragState.hasMoved = true;
+        }
+        else {
+            return;
+        }
+        var sourcePortId = (_c = (_b = this.programmaticLinkSession) === null || _b === void 0 ? void 0 : _b.sourcePortId) !== null && _c !== void 0 ? _c : (((_d = this.dragState) === null || _d === void 0 ? void 0 : _d.mode) === 'link-drag' ? this.dragState.sourcePortId : null);
+        if (!sourcePortId)
+            return;
+        var source = this.resolveLinkPreviewSource(sourcePortId, pointer);
+        if (source) {
+            (_e = this.renderer) === null || _e === void 0 ? void 0 : _e.renderTempLink([source, pointer]);
+        }
+        var hit = this.resolveHit(pointer);
+        if ((hit === null || hit === void 0 ? void 0 : hit.type) === 'element') {
+            var placeholder = this.createPlaceholderPort(hit.id, pointer, sourcePortId);
+            if (placeholder) {
+                var hostElement = this.getElementById(hit.id);
+                if (hostElement) {
+                    var hostWorld = (_f = this.engine.getElementWorldPosition(hit.id)) !== null && _f !== void 0 ? _f : hostElement.position;
+                    (_h = (_g = this.renderer) === null || _g === void 0 ? void 0 : _g.renderPortPlaceholder) === null || _h === void 0 ? void 0 : _h.call(_g, placeholder, { id: hostElement.id, position: hostWorld, size: hostElement.size, shapeId: hostElement.shapeId });
+                }
+                else {
+                    (_k = (_j = this.renderer) === null || _j === void 0 ? void 0 : _j.renderPortPlaceholder) === null || _k === void 0 ? void 0 : _k.call(_j, placeholder);
+                }
+            }
+            return;
+        }
+        (_m = (_l = this.renderer) === null || _l === void 0 ? void 0 : _l.clearPortPlaceholder) === null || _m === void 0 ? void 0 : _m.call(_l);
+    };
+    KonvaInteraction.prototype.completeLinkToPort = function (targetPortId) {
+        var _a, _b;
+        var session = this.resolveActiveLinkSession();
+        if (!session)
+            return;
+        var completion = this.tryCreateLinkToPort(session.sourcePortId, session.sourceElementId, targetPortId);
+        this.finishLinkDragSession({
+            sourcePortId: session.sourcePortId,
+            sourceElementId: session.sourceElementId,
+            createdLinkId: (_a = completion.createdLinkId) !== null && _a !== void 0 ? _a : undefined,
+            targetPortId: completion.targetPortId,
+            targetElementId: (_b = completion.targetElementId) !== null && _b !== void 0 ? _b : undefined,
+            cancelled: completion.createdLinkId === null,
+            fromProgrammatic: session.fromProgrammatic,
+        });
+    };
+    KonvaInteraction.prototype.completeLinkToElement = function (targetElementId, pointer) {
+        var _a, _b, _c;
+        var session = this.resolveActiveLinkSession();
+        if (!session)
+            return;
+        var completion = this.tryCreateLinkToElement(session.sourcePortId, session.sourceElementId, targetElementId, pointer);
+        this.finishLinkDragSession({
+            sourcePortId: session.sourcePortId,
+            sourceElementId: session.sourceElementId,
+            createdLinkId: (_a = completion.createdLinkId) !== null && _a !== void 0 ? _a : undefined,
+            targetPortId: (_b = completion.targetPortId) !== null && _b !== void 0 ? _b : undefined,
+            targetElementId: (_c = completion.targetElementId) !== null && _c !== void 0 ? _c : undefined,
+            cancelled: completion.createdLinkId === null,
+            fromProgrammatic: session.fromProgrammatic,
+        });
+    };
+    KonvaInteraction.prototype.cancelLink = function () {
+        this.cancelLinkDrag();
+    };
     KonvaInteraction.prototype.buildPointerInfo = function (world, nativeEvent) {
         var evt = nativeEvent !== null && nativeEvent !== void 0 ? nativeEvent : undefined;
         var client = evt ? { x: evt.clientX, y: evt.clientY } : { x: world.x, y: world.y };
@@ -4681,6 +5064,7 @@ var KonvaInteraction = /** @class */ (function () {
                         current: point,
                         isMulti: isMulti,
                         hasMoved: false,
+                        completionBehavior: 'hover-or-release',
                     };
                     _this.linkDragContext = { sourcePortId: hit.id, sourceElementId: elementId };
                     _this.engine.emitElementLinkStarted({ sourcePortId: hit.id, sourceElementId: elementId, startWorld: __assign({}, point) });
@@ -4755,22 +5139,29 @@ var KonvaInteraction = /** @class */ (function () {
             }
             _this.clearActiveShapeHoverControl();
             if (_this.dragState.mode === 'shape-control-drag') {
-                var delta = { x: point.x - _this.dragState.start.x, y: point.y - _this.dragState.start.y };
+                var dragState = _this.dragState;
+                var delta = { x: point.x - dragState.start.x, y: point.y - dragState.start.y };
                 var moved = Math.hypot(delta.x, delta.y) >= _this.dragThreshold;
-                if (!_this.dragState.hasMoved && moved) {
-                    _this.dragState.hasMoved = true;
-                    _this.emitShapeHoverControlInteraction('drag-start', _this.dragState.control, point, nativeEvent, {
-                        sessionId: _this.dragState.sessionId,
-                        startPointer: _this.dragState.startPointer,
+                if (!dragState.hasMoved && moved) {
+                    dragState.hasMoved = true;
+                    _this.emitShapeHoverControlInteraction('drag-start', dragState.control, point, nativeEvent, {
+                        sessionId: dragState.sessionId,
+                        startPointer: dragState.startPointer,
                         delta: delta,
                     });
+                    if (_this.dragState !== dragState) {
+                        return;
+                    }
                 }
-                if (_this.dragState.hasMoved) {
-                    _this.emitShapeHoverControlInteraction('drag-move', _this.dragState.control, point, nativeEvent, {
-                        sessionId: _this.dragState.sessionId,
-                        startPointer: _this.dragState.startPointer,
+                if (dragState.hasMoved) {
+                    _this.emitShapeHoverControlInteraction('drag-move', dragState.control, point, nativeEvent, {
+                        sessionId: dragState.sessionId,
+                        startPointer: dragState.startPointer,
                         delta: delta,
                     });
+                    if (_this.dragState !== dragState) {
+                        return;
+                    }
                 }
             }
             else if (_this.dragState.mode === 'move') {
@@ -4808,12 +5199,14 @@ var KonvaInteraction = /** @class */ (function () {
                 _this.dragState.hasMoved = _this.dragState.hasMoved || moved;
                 _this.dragState.current = point;
                 if (_this.dragState.hasMoved) {
-                    var source = _this.engine.getPortWorldPosition(_this.dragState.sourcePortId);
+                    var hit = _this.resolveHit(point);
+                    var source = _this.resolveLinkPreviewSource(_this.dragState.sourcePortId, point, hit);
                     if (source) {
                         (_b = _this.renderer) === null || _b === void 0 ? void 0 : _b.renderTempLink([source, point]);
                     }
-                    var hit = _this.resolveHit(point);
-                    if ((hit === null || hit === void 0 ? void 0 : hit.type) === 'port' && hit.id !== linkDrag.sourcePortId) {
+                    if (linkDrag.completionBehavior === 'hover-or-release' &&
+                        (hit === null || hit === void 0 ? void 0 : hit.type) === 'port' &&
+                        hit.id !== linkDrag.sourcePortId) {
                         var completion = _this.tryCreateLinkToPort(linkDrag.sourcePortId, linkDrag.sourceElementId, hit.id);
                         if (completion.createdLinkId) {
                             var pointerInfo = _this.buildPointerInfo(point, nativeEvent);
@@ -4822,7 +5215,9 @@ var KonvaInteraction = /** @class */ (function () {
                                 elementId: linkDrag.sourceElementId,
                                 pointer: pointerInfo,
                             });
-                            _this.engine.emitElementLinkEnded({
+                            _this.dragState = null;
+                            _this.linkDragContext = null;
+                            _this.emitElementLinkEndedSafely({
                                 sourcePortId: linkDrag.sourcePortId,
                                 sourceElementId: linkDrag.sourceElementId,
                                 linkId: completion.createdLinkId,
@@ -4832,8 +5227,6 @@ var KonvaInteraction = /** @class */ (function () {
                             });
                             (_d = _this.renderer) === null || _d === void 0 ? void 0 : _d.clearTempLink();
                             (_f = (_e = _this.renderer) === null || _e === void 0 ? void 0 : _e.clearPortPlaceholder) === null || _f === void 0 ? void 0 : _f.call(_e);
-                            _this.dragState = null;
-                            _this.linkDragContext = null;
                             _this.setCursor('default');
                             return;
                         }
@@ -4924,6 +5317,7 @@ var KonvaInteraction = /** @class */ (function () {
             var pointerPoint = _this.getPointerPosition();
             if (((_a = _this.dragState) === null || _a === void 0 ? void 0 : _a.mode) === 'shape-control-drag') {
                 var dragState = _this.dragState;
+                _this.dragState = null;
                 var point = pointerPoint !== null && pointerPoint !== void 0 ? pointerPoint : dragState.start;
                 var delta = { x: point.x - dragState.start.x, y: point.y - dragState.start.y };
                 var dragContext = {
@@ -4938,7 +5332,6 @@ var KonvaInteraction = /** @class */ (function () {
                     _this.emitShapeHoverControlInteraction('click', dragState.control, point, nativeEvent);
                     _this.emitLegacyShapeHoverControlActivation(dragState.control, point, nativeEvent);
                 }
-                _this.dragState = null;
                 if (pointerPoint) {
                     _this.lastPointerPosition = __assign({}, pointerPoint);
                     _this.updateShapeHoverControl(pointerPoint);
@@ -4951,46 +5344,45 @@ var KonvaInteraction = /** @class */ (function () {
                 return;
             }
             if (((_b = _this.dragState) === null || _b === void 0 ? void 0 : _b.mode) === 'link-drag') {
+                var linkState = _this.dragState;
                 var point = pointerPoint;
-                var pointerInfo = _this.buildPointerInfo(point !== null && point !== void 0 ? point : _this.dragState.start, nativeEvent);
+                var pointerInfo = _this.buildPointerInfo(point !== null && point !== void 0 ? point : linkState.start, nativeEvent);
                 var sourcePortPayload = {
-                    portId: _this.dragState.sourcePortId,
-                    elementId: _this.dragState.sourceElementId,
+                    portId: linkState.sourcePortId,
+                    elementId: linkState.sourceElementId,
                     pointer: pointerInfo,
                 };
                 _this.engine.emitPortMouseUp(sourcePortPayload);
                 var createdLinkId = null;
                 var targetPortId = null;
                 var targetElementId = null;
-                if (!_this.dragState.hasMoved) {
-                    _this.handleSelection({ id: _this.dragState.sourcePortId, type: 'port' }, _this.dragState.isMulti);
+                if (!linkState.hasMoved) {
+                    _this.handleSelection({ id: linkState.sourcePortId, type: 'port' }, linkState.isMulti);
                 }
                 else {
                     var hit = point ? _this.resolveHit(point) : null;
-                    if (hit && hit.type === 'port' && hit.id !== _this.dragState.sourcePortId) {
-                        var completion = _this.tryCreateLinkToPort(_this.dragState.sourcePortId, _this.dragState.sourceElementId, hit.id);
+                    if (linkState.completionBehavior === 'hover-or-release' &&
+                        hit &&
+                        hit.type === 'port' &&
+                        hit.id !== linkState.sourcePortId) {
+                        var completion = _this.tryCreateLinkToPort(linkState.sourcePortId, linkState.sourceElementId, hit.id);
                         createdLinkId = completion.createdLinkId;
                         targetPortId = completion.targetPortId;
                         targetElementId = completion.targetElementId;
                     }
-                    else if (hit && hit.type === 'element' && point) {
+                    else if (linkState.completionBehavior === 'hover-or-release' && hit && hit.type === 'element' && point) {
                         targetElementId = hit.id;
-                        var createdPortId = _this.createPortForLink(hit.id, point, _this.dragState.sourcePortId);
-                        if (createdPortId) {
-                            targetPortId = createdPortId;
-                            createdLinkId = createId();
-                            _this.engine.addLink({
-                                id: createdLinkId,
-                                sourcePortId: _this.dragState.sourcePortId,
-                                targetPortId: createdPortId,
-                                points: [],
-                            });
-                        }
+                        var completion = _this.tryCreateLinkToElement(linkState.sourcePortId, linkState.sourceElementId, hit.id, point);
+                        targetPortId = completion.targetPortId;
+                        createdLinkId = completion.createdLinkId;
+                        targetElementId = completion.targetElementId;
                     }
                 }
-                _this.engine.emitElementLinkEnded({
-                    sourcePortId: _this.dragState.sourcePortId,
-                    sourceElementId: _this.dragState.sourceElementId,
+                _this.dragState = null;
+                _this.linkDragContext = null;
+                _this.emitElementLinkEndedSafely({
+                    sourcePortId: linkState.sourcePortId,
+                    sourceElementId: linkState.sourceElementId,
                     linkId: createdLinkId !== null && createdLinkId !== void 0 ? createdLinkId : undefined,
                     targetPortId: targetPortId !== null && targetPortId !== void 0 ? targetPortId : undefined,
                     targetElementId: targetElementId !== null && targetElementId !== void 0 ? targetElementId : undefined,
@@ -5224,7 +5616,7 @@ var KonvaInteraction = /** @class */ (function () {
         addHit(this.findElementHit(point));
         if (hits.length === 0)
             return null;
-        var priority = ['resize-handle', 'link-handle', 'shape-hover-control', 'port', 'link', 'text', 'element'];
+        var priority = ['resize-handle', 'link-handle', 'port', 'shape-hover-control', 'link', 'text', 'element'];
         var _loop_1 = function (i) {
             var candidates = hits.filter(function (hit) { return hit.type === priority[i]; });
             if (candidates.length === 0)
@@ -5670,10 +6062,10 @@ var KonvaInteraction = /** @class */ (function () {
         for (var index = 0; index < controls.length; index += 1) {
             var control = controls[index];
             var targetHoverCandidate = control.visibilityTriggers.includes('target-hover')
-                ? this.resolveTargetHoverCandidate(point, transformed, ellipseMidPoints, control)
+                ? this.resolveTargetHoverCandidate(point, transformed, ellipseMidPoints, control, elementId)
                 : null;
             var elementHoverCandidate = control.visibilityTriggers.includes('element-hover')
-                ? this.resolveElementHoverCandidate(point, transformed, ellipseMidPoints, control)
+                ? this.resolveElementHoverCandidate(point, transformed, ellipseMidPoints, control, elementId)
                 : null;
             var candidate = targetHoverCandidate !== null && targetHoverCandidate !== void 0 ? targetHoverCandidate : elementHoverCandidate;
             if (!candidate)
@@ -5689,7 +6081,7 @@ var KonvaInteraction = /** @class */ (function () {
         }
         return null;
     };
-    KonvaInteraction.prototype.resolveTargetHoverCandidate = function (point, geometry, ellipseMidPoints, control) {
+    KonvaInteraction.prototype.resolveTargetHoverCandidate = function (point, geometry, ellipseMidPoints, control, elementId) {
         if (control.targetKind === 'ellipse-midpoint') {
             var targets = this.resolveEligibleEllipseMidPoints(control, ellipseMidPoints);
             if (!targets.length || control.tolerance <= 0)
@@ -5710,7 +6102,7 @@ var KonvaInteraction = /** @class */ (function () {
         }
         if (!geometry)
             return null;
-        var indices = this.resolveEligibleTargetIndices(control, geometry);
+        var indices = this.resolveEligibleTargetIndices(control, geometry, elementId);
         if (!indices.length || control.tolerance <= 0)
             return null;
         if (control.targetKind === 'vertex') {
@@ -5760,7 +6152,7 @@ var KonvaInteraction = /** @class */ (function () {
         }
         return best ? { targetIndex: best.targetIndex, target: best.target } : null;
     };
-    KonvaInteraction.prototype.resolveElementHoverCandidate = function (point, geometry, ellipseMidPoints, control) {
+    KonvaInteraction.prototype.resolveElementHoverCandidate = function (point, geometry, ellipseMidPoints, control, elementId) {
         if (control.targetKind === 'ellipse-midpoint') {
             var targets = this.resolveEligibleEllipseMidPoints(control, ellipseMidPoints);
             if (!targets.length)
@@ -5779,7 +6171,7 @@ var KonvaInteraction = /** @class */ (function () {
         }
         if (!geometry)
             return null;
-        var indices = this.resolveEligibleTargetIndices(control, geometry);
+        var indices = this.resolveEligibleTargetIndices(control, geometry, elementId);
         if (!indices.length)
             return null;
         if (control.targetKind === 'vertex') {
@@ -5823,17 +6215,46 @@ var KonvaInteraction = /** @class */ (function () {
         }
         return best ? { targetIndex: best.targetIndex, target: best.target } : null;
     };
-    KonvaInteraction.prototype.resolveEligibleTargetIndices = function (control, geometry) {
+    KonvaInteraction.prototype.resolveEligibleTargetIndices = function (control, geometry, elementId) {
         var _a;
         var source = control.targetKind === 'vertex' ? geometry.vertices : geometry.edges;
         if (!source.length)
             return [];
+        var occupiedVertexIndices = this.resolveOccupiedVertexIndices(elementId, geometry);
         if (control.allowAllTargets === true) {
-            return Array.from({ length: source.length }, function (_, index) { return index; });
+            return Array.from({ length: source.length }, function (_, index) { return index; }).filter(function (index) {
+                return control.targetKind === 'vertex' ? !occupiedVertexIndices.has(index) : true;
+            });
         }
         if (!((_a = control.targetIndices) === null || _a === void 0 ? void 0 : _a.length))
             return [];
-        return control.targetIndices.filter(function (targetIndex) { return targetIndex >= 0 && targetIndex < source.length; });
+        return control.targetIndices.filter(function (targetIndex) {
+            return targetIndex >= 0 &&
+                targetIndex < source.length &&
+                (control.targetKind !== 'vertex' || !occupiedVertexIndices.has(targetIndex));
+        });
+    };
+    KonvaInteraction.prototype.resolveOccupiedVertexIndices = function (elementId, geometry) {
+        var _this = this;
+        if (!geometry.vertices.length)
+            return new Set();
+        var ports = this.engine.getState().ports.filter(function (port) { return port.elementId === elementId; });
+        if (!ports.length)
+            return new Set();
+        var tolerance = this.occupiedVertexTolerance;
+        var occupied = new Set();
+        ports.forEach(function (port) {
+            var world = _this.engine.getPortWorldPosition(port.id);
+            if (!world)
+                return;
+            geometry.vertices.forEach(function (vertex, index) {
+                if (Math.abs(vertex.position.x - world.x) <= tolerance &&
+                    Math.abs(vertex.position.y - world.y) <= tolerance) {
+                    occupied.add(index);
+                }
+            });
+        });
+        return occupied;
     };
     KonvaInteraction.prototype.resolveEligibleEllipseMidPoints = function (control, targets) {
         var _a;
@@ -6277,6 +6698,64 @@ var KonvaInteraction = /** @class */ (function () {
         }
         return { x: elementPos.x + constrained.x, y: elementPos.y + constrained.y };
     };
+    KonvaInteraction.prototype.resolveLinkPreviewSource = function (sourcePortId, pointer, hit) {
+        var resolvedHit = hit !== null && hit !== void 0 ? hit : this.resolveHit(pointer);
+        if ((resolvedHit === null || resolvedHit === void 0 ? void 0 : resolvedHit.type) === 'port' && resolvedHit.id !== sourcePortId) {
+            return this.engine.getPortLinkWorldPosition(sourcePortId, { oppositePortId: resolvedHit.id });
+        }
+        return this.engine.getPortLinkWorldPosition(sourcePortId);
+    };
+    KonvaInteraction.prototype.resolveActiveLinkSession = function () {
+        var _a;
+        if (this.programmaticLinkSession) {
+            return {
+                sourcePortId: this.programmaticLinkSession.sourcePortId,
+                sourceElementId: this.programmaticLinkSession.sourceElementId,
+                fromProgrammatic: true,
+            };
+        }
+        if (((_a = this.dragState) === null || _a === void 0 ? void 0 : _a.mode) === 'link-drag') {
+            return {
+                sourcePortId: this.dragState.sourcePortId,
+                sourceElementId: this.dragState.sourceElementId,
+                fromProgrammatic: false,
+            };
+        }
+        return null;
+    };
+    KonvaInteraction.prototype.finishLinkDragSession = function (result) {
+        var _a, _b, _c, _d;
+        this.linkDragContext = null;
+        if (result.fromProgrammatic) {
+            this.programmaticLinkSession = null;
+        }
+        else if (((_a = this.dragState) === null || _a === void 0 ? void 0 : _a.mode) === 'link-drag') {
+            this.dragState = null;
+        }
+        (_b = this.renderer) === null || _b === void 0 ? void 0 : _b.clearTempLink();
+        (_d = (_c = this.renderer) === null || _c === void 0 ? void 0 : _c.clearPortPlaceholder) === null || _d === void 0 ? void 0 : _d.call(_c);
+        this.clearActiveShapeHoverControl();
+        this.setCursor('default');
+        this.emitElementLinkEndedSafely({
+            sourcePortId: result.sourcePortId,
+            sourceElementId: result.sourceElementId,
+            linkId: result.createdLinkId,
+            targetPortId: result.targetPortId,
+            targetElementId: result.targetElementId,
+            cancelled: result.cancelled,
+        });
+    };
+    KonvaInteraction.prototype.emitElementLinkEndedSafely = function (event) {
+        if (this.emittingElementLinkEnded)
+            return;
+        this.emittingElementLinkEnded = true;
+        try {
+            this.engine.emitElementLinkEnded(event);
+        }
+        finally {
+            this.emittingElementLinkEnded = false;
+        }
+    };
     KonvaInteraction.prototype.tryCreateLinkToPort = function (sourcePortId, sourceElementId, targetPortId) {
         var targetElementId = this.engine.getPortElementId(targetPortId);
         var cancelledByHost = targetElementId !== null &&
@@ -6300,6 +6779,33 @@ var KonvaInteraction = /** @class */ (function () {
         });
         return { createdLinkId: createdLinkId, targetPortId: targetPortId, targetElementId: targetElementId };
     };
+    KonvaInteraction.prototype.tryCreateLinkToElement = function (sourcePortId, sourceElementId, targetElementId, worldPoint) {
+        var targetPort = this.createPortForLink(targetElementId, worldPoint, sourcePortId);
+        if (!targetPort) {
+            return { createdLinkId: null, targetPortId: null, targetElementId: null };
+        }
+        var cancelledByHost = this.engine.emitElementLinkConnecting({
+            sourcePortId: sourcePortId,
+            sourceElementId: sourceElementId,
+            targetPortId: targetPort.id,
+            targetElementId: targetElementId,
+            cancel: function () { },
+            cancelled: false,
+        });
+        if (cancelledByHost) {
+            return { createdLinkId: null, targetPortId: targetPort.id, targetElementId: targetElementId };
+        }
+        this.engine.addPortToElement(targetElementId, targetPort);
+        this.engine.movePortTo(targetPort.id, worldPoint.x, worldPoint.y);
+        var createdLinkId = createId();
+        this.engine.addLink({
+            id: createdLinkId,
+            sourcePortId: sourcePortId,
+            targetPortId: targetPort.id,
+            points: [],
+        });
+        return { createdLinkId: createdLinkId, targetPortId: targetPort.id, targetElementId: targetElementId };
+    };
     KonvaInteraction.prototype.createPortForLink = function (elementId, worldPoint, sourcePortId) {
         var _a, _b, _c, _d;
         var element = this.getElementById(elementId);
@@ -6314,9 +6820,8 @@ var KonvaInteraction = /** @class */ (function () {
         var destinationMoveMode = ((_b = element.portMovement) === null || _b === void 0 ? void 0 : _b.moveMode) && element.portMovement.moveMode !== 'anchors'
             ? element.portMovement.moveMode
             : undefined;
-        var portId = createId();
-        this.engine.addPortToElement(elementId, {
-            id: portId,
+        return {
+            id: createId(),
             elementId: elementId,
             position: relative,
             shapeId: sourcePort === null || sourcePort === void 0 ? void 0 : sourcePort.shapeId,
@@ -6325,9 +6830,12 @@ var KonvaInteraction = /** @class */ (function () {
             moveMode: destinationMoveMode !== null && destinationMoveMode !== void 0 ? destinationMoveMode : sourcePort === null || sourcePort === void 0 ? void 0 : sourcePort.moveMode,
             anchorCenter: (_c = sourcePort === null || sourcePort === void 0 ? void 0 : sourcePort.anchorCenter) !== null && _c !== void 0 ? _c : true,
             orientToHostBorder: (_d = sourcePort === null || sourcePort === void 0 ? void 0 : sourcePort.orientToHostBorder) !== null && _d !== void 0 ? _d : true,
-        });
-        this.engine.movePortTo(portId, worldPoint.x, worldPoint.y);
-        return portId;
+            placementPoint: (sourcePort === null || sourcePort === void 0 ? void 0 : sourcePort.placementPoint) ? __assign({}, sourcePort.placementPoint) : undefined,
+            linkAttachPoint: (sourcePort === null || sourcePort === void 0 ? void 0 : sourcePort.linkAttachPoint) ? __assign({}, sourcePort.linkAttachPoint) : undefined,
+            externalLinkAttachPoint: (sourcePort === null || sourcePort === void 0 ? void 0 : sourcePort.externalLinkAttachPoint) ? __assign({}, sourcePort.externalLinkAttachPoint) : undefined,
+            internalLinkAttachPoint: (sourcePort === null || sourcePort === void 0 ? void 0 : sourcePort.internalLinkAttachPoint) ? __assign({}, sourcePort.internalLinkAttachPoint) : undefined,
+            rotationPivot: (sourcePort === null || sourcePort === void 0 ? void 0 : sourcePort.rotationPivot) ? __assign({}, sourcePort.rotationPivot) : undefined,
+        };
     };
     KonvaInteraction.prototype.createPlaceholderPort = function (elementId, worldPoint, sourcePortId) {
         var _a, _b, _c;
@@ -6346,6 +6854,11 @@ var KonvaInteraction = /** @class */ (function () {
             moveMode: destinationMoveMode !== null && destinationMoveMode !== void 0 ? destinationMoveMode : sourcePort === null || sourcePort === void 0 ? void 0 : sourcePort.moveMode,
             anchorCenter: (_b = sourcePort === null || sourcePort === void 0 ? void 0 : sourcePort.anchorCenter) !== null && _b !== void 0 ? _b : true,
             orientToHostBorder: (_c = sourcePort === null || sourcePort === void 0 ? void 0 : sourcePort.orientToHostBorder) !== null && _c !== void 0 ? _c : true,
+            placementPoint: (sourcePort === null || sourcePort === void 0 ? void 0 : sourcePort.placementPoint) ? __assign({}, sourcePort.placementPoint) : undefined,
+            linkAttachPoint: (sourcePort === null || sourcePort === void 0 ? void 0 : sourcePort.linkAttachPoint) ? __assign({}, sourcePort.linkAttachPoint) : undefined,
+            externalLinkAttachPoint: (sourcePort === null || sourcePort === void 0 ? void 0 : sourcePort.externalLinkAttachPoint) ? __assign({}, sourcePort.externalLinkAttachPoint) : undefined,
+            internalLinkAttachPoint: (sourcePort === null || sourcePort === void 0 ? void 0 : sourcePort.internalLinkAttachPoint) ? __assign({}, sourcePort.internalLinkAttachPoint) : undefined,
+            rotationPivot: (sourcePort === null || sourcePort === void 0 ? void 0 : sourcePort.rotationPivot) ? __assign({}, sourcePort.rotationPivot) : undefined,
         };
     };
     KonvaInteraction.prototype.getElementById = function (id) {
@@ -6389,47 +6902,77 @@ var KonvaInteraction = /** @class */ (function () {
         (_b = stageAny === null || stageAny === void 0 ? void 0 : stageAny.position) === null || _b === void 0 ? void 0 : _b.call(stageAny, this.pan);
     };
     KonvaInteraction.prototype.cancelLinkDrag = function () {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
         if (((_a = this.dragState) === null || _a === void 0 ? void 0 : _a.mode) === 'shape-control-drag') {
-            var point_1 = (_b = this.lastPointerPosition) !== null && _b !== void 0 ? _b : this.dragState.start;
-            if (this.dragState.hasMoved) {
-                this.emitShapeHoverControlInteraction('drag-end', this.dragState.control, point_1, undefined, {
-                    sessionId: this.dragState.sessionId,
-                    startPointer: this.dragState.startPointer,
+            var dragState = this.dragState;
+            var point_1 = (_b = this.lastPointerPosition) !== null && _b !== void 0 ? _b : dragState.start;
+            this.dragState = null;
+            if (dragState.hasMoved) {
+                this.emitShapeHoverControlInteraction('drag-end', dragState.control, point_1, undefined, {
+                    sessionId: dragState.sessionId,
+                    startPointer: dragState.startPointer,
                     delta: {
-                        x: point_1.x - this.dragState.start.x,
-                        y: point_1.y - this.dragState.start.y,
+                        x: point_1.x - dragState.start.x,
+                        y: point_1.y - dragState.start.y,
                     },
                 });
             }
-            this.dragState = null;
+            if (this.programmaticLinkSession) {
+                var session = this.programmaticLinkSession;
+                this.programmaticLinkSession = null;
+                this.linkDragContext = null;
+                (_c = this.renderer) === null || _c === void 0 ? void 0 : _c.clearTempLink();
+                (_e = (_d = this.renderer) === null || _d === void 0 ? void 0 : _d.clearPortPlaceholder) === null || _e === void 0 ? void 0 : _e.call(_d);
+                this.emitElementLinkEndedSafely({
+                    sourcePortId: session.sourcePortId,
+                    sourceElementId: session.sourceElementId,
+                    cancelled: true,
+                });
+            }
+            this.clearActiveShapeHoverControl();
+            this.setCursor('default');
+            return;
+        }
+        if (this.programmaticLinkSession) {
+            var session = this.programmaticLinkSession;
+            this.programmaticLinkSession = null;
+            this.linkDragContext = null;
+            (_f = this.renderer) === null || _f === void 0 ? void 0 : _f.clearTempLink();
+            (_h = (_g = this.renderer) === null || _g === void 0 ? void 0 : _g.clearPortPlaceholder) === null || _h === void 0 ? void 0 : _h.call(_g);
+            this.emitElementLinkEndedSafely({
+                sourcePortId: session.sourcePortId,
+                sourceElementId: session.sourceElementId,
+                cancelled: true,
+            });
             this.clearActiveShapeHoverControl();
             this.setCursor('default');
             return;
         }
         if (!this.dragState || this.dragState.mode !== 'link-drag') {
             if (this.linkDragContext) {
-                this.engine.emitElementLinkEnded(__assign(__assign({}, this.linkDragContext), { cancelled: true }));
+                var context = this.linkDragContext;
                 this.linkDragContext = null;
+                this.emitElementLinkEndedSafely(__assign(__assign({}, context), { cancelled: true }));
             }
             return;
         }
-        var point = (_c = this.dragState.current) !== null && _c !== void 0 ? _c : this.dragState.start;
+        var linkState = this.dragState;
+        var point = (_j = linkState.current) !== null && _j !== void 0 ? _j : linkState.start;
         var pointerInfo = this.buildPointerInfo(point, null);
         this.engine.emitPortMouseUp({
-            portId: this.dragState.sourcePortId,
-            elementId: this.dragState.sourceElementId,
+            portId: linkState.sourcePortId,
+            elementId: linkState.sourceElementId,
             pointer: pointerInfo,
         });
-        this.engine.emitElementLinkEnded({
-            sourcePortId: this.dragState.sourcePortId,
-            sourceElementId: this.dragState.sourceElementId,
+        this.dragState = null;
+        this.linkDragContext = null;
+        (_k = this.renderer) === null || _k === void 0 ? void 0 : _k.clearTempLink();
+        (_m = (_l = this.renderer) === null || _l === void 0 ? void 0 : _l.clearPortPlaceholder) === null || _m === void 0 ? void 0 : _m.call(_l);
+        this.emitElementLinkEndedSafely({
+            sourcePortId: linkState.sourcePortId,
+            sourceElementId: linkState.sourceElementId,
             cancelled: true,
         });
-        this.linkDragContext = null;
-        (_d = this.renderer) === null || _d === void 0 ? void 0 : _d.clearTempLink();
-        (_f = (_e = this.renderer) === null || _e === void 0 ? void 0 : _e.clearPortPlaceholder) === null || _f === void 0 ? void 0 : _f.call(_e);
-        this.dragState = null;
         this.clearActiveShapeHoverControl();
         this.setCursor('default');
     };
@@ -6653,6 +7196,15 @@ var normalizeVector = function (vector) {
         return { x: 0, y: -1 };
     return { x: vector.x / length, y: vector.y / length };
 };
+var sideToNormal = function (side) {
+    if (side === 'left')
+        return { x: -1, y: 0 };
+    if (side === 'right')
+        return { x: 1, y: 0 };
+    if (side === 'top')
+        return { x: 0, y: -1 };
+    return { x: 0, y: 1 };
+};
 var resolveCardinalAnchors = function (rect) {
     var cx = rect.x + rect.width / 2;
     var cy = rect.y + rect.height / 2;
@@ -6732,9 +7284,15 @@ var BuiltInShape = /** @class */ (function () {
     BuiltInShape.prototype.resolveBorderSide = function (point, rect) {
         return resolveBoundarySide(point, rect, 'rect');
     };
+    BuiltInShape.prototype.resolveBorderNormal = function (point, rect) {
+        return sideToNormal(this.resolveBorderSide(point, rect));
+    };
     BuiltInShape.prototype.resolvePortAnchors = function (_rect, _options) {
         return [];
     };
+    BuiltInShape.prototype.resolvePortBorderTransform = function (_context) {
+        return undefined;
+    };
     BuiltInShape.prototype.resolveHoverGeometry = function (_rect) {
         return undefined;
     };
@@ -6964,6 +7522,78 @@ var getKonva = function () {
     var module = require('konva');
     return (_a = module.default) !== null && _a !== void 0 ? _a : module;
 };
+var createBounds = function () { return ({
+    minX: Number.POSITIVE_INFINITY,
+    minY: Number.POSITIVE_INFINITY,
+    maxX: Number.NEGATIVE_INFINITY,
+    maxY: Number.NEGATIVE_INFINITY,
+}); };
+var expandBounds = function (bounds, x, y) {
+    if (x < bounds.minX)
+        bounds.minX = x;
+    if (y < bounds.minY)
+        bounds.minY = y;
+    if (x > bounds.maxX)
+        bounds.maxX = x;
+    if (y > bounds.maxY)
+        bounds.maxY = y;
+};
+var includeRect = function (bounds, x, y, width, height) {
+    var safeWidth = Math.max(0, width);
+    var safeHeight = Math.max(0, height);
+    expandBounds(bounds, x, y);
+    expandBounds(bounds, x + safeWidth, y + safeHeight);
+};
+var hasBounds = function (bounds) {
+    return Number.isFinite(bounds.minX) &&
+        Number.isFinite(bounds.minY) &&
+        Number.isFinite(bounds.maxX) &&
+        Number.isFinite(bounds.maxY) &&
+        bounds.maxX >= bounds.minX &&
+        bounds.maxY >= bounds.minY;
+};
+var resolveStateWorldBounds = function (state) {
+    var bounds = createBounds();
+    state.elements.forEach(function (element) {
+        includeRect(bounds, element.position.x, element.position.y, element.size.width, element.size.height);
+    });
+    state.ports.forEach(function (port) {
+        var _a;
+        var size = port.size;
+        if (!size) {
+            expandBounds(bounds, port.position.x, port.position.y);
+            return;
+        }
+        var anchorCenter = (_a = port.anchorCenter) !== null && _a !== void 0 ? _a : true;
+        var x = anchorCenter ? port.position.x - size.width / 2 : port.position.x;
+        var y = anchorCenter ? port.position.y - size.height / 2 : port.position.y;
+        includeRect(bounds, x, y, size.width, size.height);
+    });
+    state.links.forEach(function (link) {
+        link.points.forEach(function (point) {
+            expandBounds(bounds, point.x, point.y);
+        });
+    });
+    state.texts.forEach(function (text) {
+        var _a;
+        var offset = (_a = text.displayOffset) !== null && _a !== void 0 ? _a : { x: 0, y: 0 };
+        var position = { x: text.position.x + offset.x, y: text.position.y + offset.y };
+        var clipSize = text.displayClipSize;
+        var size = clipSize !== null && clipSize !== void 0 ? clipSize : text.size;
+        if (size) {
+            includeRect(bounds, position.x, position.y, size.width, size.height);
+            return;
+        }
+        expandBounds(bounds, position.x, position.y);
+    });
+    return hasBounds(bounds) ? bounds : null;
+};
+var resolveFitToContentPadding = function (fitToContent) {
+    if (typeof fitToContent === 'object' && typeof fitToContent.padding === 'number') {
+        return Math.max(0, fitToContent.padding);
+    }
+    return 0;
+};
 var getNodeAttr = function (node, key) {
     if (node.getAttr) {
         return node.getAttr(key);
@@ -7002,7 +7632,13 @@ var registerSimpleShapes = function (registry, shapes, isPort) {
                 : undefined,
             projectToBorder: function (point, rect) { return behavior.projectToBorder(point, rect); },
             resolveBorderSide: function (point, rect) { return behavior.resolveBorderSide(point, rect); },
+            resolveBorderNormal: behavior.resolveBorderNormal
+                ? function (point, rect) { return behavior.resolveBorderNormal(point, rect); }
+                : undefined,
             resolvePortAnchors: function (rect, options) { return behavior.resolvePortAnchors(rect, options); },
+            resolvePortBorderTransform: behavior.resolvePortBorderTransform
+                ? function (context) { return behavior.resolvePortBorderTransform(context); }
+                : undefined,
             resolveHoverGeometry: function (rect) { return behavior.resolveHoverGeometry(rect); },
             resolveEllipseMidPoints: function (rect) { return behavior.resolveEllipseMidPoints(rect); },
             createNode: function (model) {
@@ -7076,7 +7712,7 @@ var createDiagramEditor = function (config) {
             .filter(function (hit) { return Boolean(hit); });
         if (hits.length === 0)
             return { id: '', type: 'none' };
-        var priority = ['resize-handle', 'link-handle', 'shape-hover-control', 'port', 'link', 'text', 'element'];
+        var priority = ['resize-handle', 'link-handle', 'port', 'shape-hover-control', 'link', 'text', 'element'];
         var _loop_1 = function (i) {
             var candidates = hits.filter(function (hit) { return hit.type === priority[i]; });
             if (candidates.length === 0)
@@ -7167,6 +7803,36 @@ var createDiagramEditor = function (config) {
         setSnapping: function (snapper) { return engine.setSnapping(snapper); },
         registerShape: function (shape) { return engine.registerShape(shape); },
         render: function () { return engine.render(); },
+        startLinkFromPort: function (sourcePortId, pointer) { return interaction.startLinkFromPort(sourcePortId, pointer); },
+        updateLinkPreview: function (pointer) { return interaction.updateLinkPreview(pointer); },
+        completeLinkToPort: function (targetPortId) { return interaction.completeLinkToPort(targetPortId); },
+        completeLinkToElement: function (targetElementId, pointer) { return interaction.completeLinkToElement(targetElementId, pointer); },
+        cancelLink: function () { return interaction.cancelLink(); },
+        exportImage: function (options) {
+            engine.render();
+            if (typeof stage.toDataURL !== 'function') {
+                throw new Error('Diagram image export is not available on the current stage.');
+            }
+            if (!options) {
+                return stage.toDataURL();
+            }
+            var fitToContent = options.fitToContent, baseOptions = __rest(options, ["fitToContent"]);
+            if (!fitToContent) {
+                return stage.toDataURL(baseOptions);
+            }
+            var padding = resolveFitToContentPadding(fitToContent);
+            var worldBounds = resolveStateWorldBounds(engine.getState());
+            if (!worldBounds) {
+                return stage.toDataURL(baseOptions);
+            }
+            var viewport = engine.getViewport();
+            var safeZoom = viewport.zoom === 0 ? 1 : viewport.zoom;
+            var cropX = worldBounds.minX * safeZoom + viewport.pan.x - padding;
+            var cropY = worldBounds.minY * safeZoom + viewport.pan.y - padding;
+            var cropWidth = Math.max(1, (worldBounds.maxX - worldBounds.minX) * safeZoom + padding * 2);
+            var cropHeight = Math.max(1, (worldBounds.maxY - worldBounds.minY) * safeZoom + padding * 2);
+            return stage.toDataURL(__assign(__assign({}, baseOptions), { x: cropX, y: cropY, width: cropWidth, height: cropHeight }));
+        },
         resize: function (width, height) {
             stage.width(width);
             stage.height(height);