orcasvn-react-diagrams 0.2.11 → 0.2.13

package/dist/esm/index.js

@@ -1879,21 +1879,20 @@ var TextLayoutService = /** @class */ (function () {
         return ids;
     };
     TextLayoutService.prototype.shouldTrackOwnerBoundLayout = function (text) {
-        var _a;
         if (!text.layout)
             return false;
-        var boundsMode = (_a = text.layout.boundsMode) !== null && _a !== void 0 ? _a : (text.ownerId ? 'owner-width' : undefined);
+        var boundsMode = this.resolveDefaultBoundsMode(text);
         return boundsMode === 'owner-width' || boundsMode === 'owner-box';
     };
     TextLayoutService.prototype.resolveTextLayoutBounds = function (text, padding) {
-        var _a, _b, _c;
+        var _a, _b;
         var layout = text.layout;
         if (!layout)
             return {};
-        var boundsMode = (_a = layout.boundsMode) !== null && _a !== void 0 ? _a : (text.ownerId ? 'owner-width' : undefined);
+        var boundsMode = this.resolveDefaultBoundsMode(text);
         if (boundsMode === 'fixed') {
-            var width = (_b = layout.fixedSize) === null || _b === void 0 ? void 0 : _b.width;
-            var height = (_c = layout.fixedSize) === null || _c === void 0 ? void 0 : _c.height;
+            var width = (_a = layout.fixedSize) === null || _a === void 0 ? void 0 : _a.width;
+            var height = (_b = layout.fixedSize) === null || _b === void 0 ? void 0 : _b.height;
             return {
                 width: typeof width === 'number' ? Math.max(0, width - padding * 2) : undefined,
                 height: typeof height === 'number' ? Math.max(0, height - padding * 2) : undefined,
@@ -1913,6 +1912,14 @@ var TextLayoutService = /** @class */ (function () {
         }
         return {};
     };
+    TextLayoutService.prototype.resolveDefaultBoundsMode = function (text) {
+        var _a;
+        if ((_a = text.layout) === null || _a === void 0 ? void 0 : _a.boundsMode)
+            return text.layout.boundsMode;
+        if (!text.ownerId)
+            return undefined;
+        return this.model.getElement(text.ownerId) ? 'owner-width' : undefined;
+    };
     TextLayoutService.prototype.wrapText = function (content, maxWidth, mode, text) {
         var _this = this;
         if (maxWidth === undefined || !Number.isFinite(maxWidth)) {
@@ -4128,8 +4135,15 @@ var DiagramEngine = /** @class */ (function () {
         var _this = this;
         var _a;
         var existing = this.model.getElement(id);
-        var parentId = (_a = existing === null || existing === void 0 ? void 0 : existing.parentId) !== null && _a !== void 0 ? _a : null;
+        if (!existing)
+            return;
+        var parentId = (_a = existing.parentId) !== null && _a !== void 0 ? _a : null;
         var before = this.model.toState();
+        var root = { entity: 'element', id: id };
+        var plannedRemoval = this.planRemoval(before, root);
+        if (!plannedRemoval || this.emitDeletionLifecycleEvents(plannedRemoval.removed, root, 'direct')) {
+            return;
+        }
         this.commandQueue.run(createRemoveElementCommand(id), this.model);
         var removal = this.computeRemovalDiff(before);
         var allPatches = this.mutationPipeline.run({
@@ -4137,9 +4151,6 @@ var DiagramEngine = /** @class */ (function () {
             layoutSteps: [function () { return _this.applyLayoutCascade(parentId); }],
         });
         this.emitChange(allPatches);
-        if (existing) {
-            this.events.emit('elementDeleted', { elementId: id });
-        }
         this.emitEntityDeletionEvents(removal.removed);
     };
     DiagramEngine.prototype.addPortToElement = function (elementId, port) {
@@ -4154,6 +4165,24 @@ var DiagramEngine = /** @class */ (function () {
         var patches = this.commandQueue.run(createAddPortCommand(nextPort), this.model);
         this.emitChange(patches);
     };
+    DiagramEngine.prototype.normalizePortDraftForElement = function (elementId, draft) {
+        var _a;
+        var element = this.model.getElement(elementId);
+        if (!element)
+            return null;
+        var nextDraft = __assign(__assign({}, draft), { position: __assign({}, draft.position), size: draft.size ? __assign({}, draft.size) : undefined, style: draft.style ? __assign({}, draft.style) : undefined, textIds: draft.textIds ? __spreadArray([], draft.textIds, true) : undefined, placementPoint: draft.placementPoint ? __assign({}, draft.placementPoint) : undefined, linkAttachPoint: draft.linkAttachPoint ? __assign({}, draft.linkAttachPoint) : undefined, externalLinkAttachPoint: draft.externalLinkAttachPoint ? __assign({}, draft.externalLinkAttachPoint) : undefined, internalLinkAttachPoint: draft.internalLinkAttachPoint ? __assign({}, draft.internalLinkAttachPoint) : undefined, rotationPivot: draft.rotationPivot ? __assign({}, draft.rotationPivot) : undefined });
+        var constrained = this.resolveConstrainedPortRelativePosition({
+            position: nextDraft.position,
+            size: nextDraft.size,
+            style: nextDraft.style,
+            moveMode: nextDraft.moveMode,
+            anchorCenter: nextDraft.anchorCenter,
+            currentAnchorId: nextDraft.currentAnchorId,
+        }, element, nextDraft.position);
+        nextDraft.position = constrained.position;
+        nextDraft.currentAnchorId = (_a = constrained.currentAnchorId) !== null && _a !== void 0 ? _a : undefined;
+        return nextDraft;
+    };
     DiagramEngine.prototype.movePortTo = function (id, x, y) {
         var snapped = this.snapper.snap({ x: x, y: y });
         var port = this.model.getPort(id);
@@ -4202,7 +4231,14 @@ var DiagramEngine = /** @class */ (function () {
         }
     };
     DiagramEngine.prototype.removePort = function (id) {
+        if (!this.model.getPort(id))
+            return;
         var before = this.model.toState();
+        var root = { entity: 'port', id: id };
+        var plannedRemoval = this.planRemoval(before, root);
+        if (!plannedRemoval || this.emitDeletionLifecycleEvents(plannedRemoval.removed, root, 'direct')) {
+            return;
+        }
         this.commandQueue.run(createRemovePortCommand(id), this.model);
         var removal = this.computeRemovalDiff(before);
         this.emitChange(removal.patches);
@@ -4296,7 +4332,14 @@ var DiagramEngine = /** @class */ (function () {
         }
     };
     DiagramEngine.prototype.removeLink = function (id) {
+        if (!this.model.getLink(id))
+            return;
         var before = this.model.toState();
+        var root = { entity: 'link', id: id };
+        var plannedRemoval = this.planRemoval(before, root);
+        if (!plannedRemoval || this.emitDeletionLifecycleEvents(plannedRemoval.removed, root, 'direct')) {
+            return;
+        }
         this.commandQueue.run(createRemoveLinkCommand(id), this.model);
         var removal = this.computeRemovalDiff(before);
         this.emitChange(removal.patches);
@@ -4381,7 +4424,14 @@ var DiagramEngine = /** @class */ (function () {
         this.emitChange(patches);
     };
     DiagramEngine.prototype.removeText = function (id) {
+        if (!this.model.getText(id))
+            return;
         var before = this.model.toState();
+        var root = { entity: 'text', id: id };
+        var plannedRemoval = this.planRemoval(before, root);
+        if (!plannedRemoval || this.emitDeletionLifecycleEvents(plannedRemoval.removed, root, 'direct')) {
+            return;
+        }
         this.commandQueue.run(createRemoveTextCommand(id), this.model);
         var removal = this.computeRemovalDiff(before);
         this.emitChange(removal.patches);
@@ -4576,40 +4626,22 @@ var DiagramEngine = /** @class */ (function () {
         if (selected.length === 0)
             return;
         var before = this.model.toState();
-        var elementIds = [];
-        selected.forEach(function (id) {
-            if (_this.model.getElement(id))
-                elementIds.push(id);
-            else if (_this.model.getPort(id))
-                ;
-            else if (_this.model.getLink(id))
-                ;
-            else if (_this.model.getText(id))
-                ;
-        });
         selected.forEach(function (id) {
-            if (_this.model.getElement(id)) {
-                _this.commandQueue.run(createRemoveElementCommand(id), _this.model);
+            var root = _this.resolveDeletionRoot(id);
+            if (!root)
                 return;
-            }
-            if (_this.model.getPort(id)) {
-                _this.commandQueue.run(createRemovePortCommand(id), _this.model);
+            var currentState = _this.model.toState();
+            var plannedRemoval = _this.planRemoval(currentState, root);
+            if (!plannedRemoval || _this.emitDeletionLifecycleEvents(plannedRemoval.removed, root, 'selection')) {
                 return;
             }
-            if (_this.model.getLink(id)) {
-                _this.commandQueue.run(createRemoveLinkCommand(id), _this.model);
-                return;
-            }
-            if (_this.model.getText(id)) {
-                _this.commandQueue.run(createRemoveTextCommand(id), _this.model);
-            }
+            _this.applyRemovalCommand(root);
         });
         var removal = this.computeRemovalDiff(before);
+        if (removal.patches.length === 0)
+            return;
         this.emitChange(removal.patches);
         this.emitEntityDeletionEvents(removal.removed);
-        elementIds.forEach(function (elementId) { return _this.events.emit('elementDeleted', { elementId: elementId }); });
-        this.selection.clear();
-        this.emitSelection();
     };
     DiagramEngine.prototype.setViewport = function (pan, zoom) {
         var hasPanChange = this.viewport.pan.x !== pan.x || this.viewport.pan.y !== pan.y;
@@ -4662,6 +4694,9 @@ var DiagramEngine = /** @class */ (function () {
     DiagramEngine.prototype.emitElementClick = function (elementId, pointer, isMulti) {
         this.events.emit('elementClick', { elementId: elementId, pointer: pointer, isMulti: isMulti });
     };
+    DiagramEngine.prototype.emitElementDoubleClick = function (elementId, pointer, isMulti) {
+        this.events.emit('elementDoubleClick', { elementId: elementId, pointer: pointer, isMulti: isMulti });
+    };
     DiagramEngine.prototype.emitElementLinkStarted = function (event) {
         this.events.emit('elementLinkStarted', event);
     };
@@ -5305,8 +5340,8 @@ var DiagramEngine = /** @class */ (function () {
         });
         return { patches: normalizedPatches, movedPortIds: Array.from(movedPortIds) };
     };
-    DiagramEngine.prototype.computeRemovalDiff = function (before) {
-        var after = this.model.toState();
+    DiagramEngine.prototype.computeRemovalDiff = function (before, after) {
+        if (after === void 0) { after = this.model.toState(); }
         var removedPatches = [];
         var beforeElements = new Set(before.elements.map(function (element) { return element.id; }));
         var beforePorts = new Set(before.ports.map(function (port) { return port.id; }));
@@ -5316,9 +5351,13 @@ var DiagramEngine = /** @class */ (function () {
         var afterPorts = new Set(after.ports.map(function (port) { return port.id; }));
         var afterLinks = new Set(after.links.map(function (link) { return link.id; }));
         var afterTexts = new Set(after.texts.map(function (text) { return text.id; }));
+        var removedElements = [];
         beforeElements.forEach(function (id) {
             if (!afterElements.has(id))
                 removedPatches.push(patchRemove('element', id));
+            var removedElement = before.elements.find(function (element) { return element.id === id; });
+            if (!afterElements.has(id) && removedElement)
+                removedElements.push(removedElement);
         });
         var removedPorts = [];
         beforePorts.forEach(function (id) {
@@ -5349,11 +5388,144 @@ var DiagramEngine = /** @class */ (function () {
         });
         return {
             patches: removedPatches,
-            removed: { ports: removedPorts, links: removedLinks, texts: removedTexts },
+            removed: { elements: removedElements, ports: removedPorts, links: removedLinks, texts: removedTexts },
         };
     };
+    DiagramEngine.prototype.resolveDeletionRoot = function (id) {
+        if (this.model.getElement(id))
+            return { entity: 'element', id: id };
+        if (this.model.getPort(id))
+            return { entity: 'port', id: id };
+        if (this.model.getLink(id))
+            return { entity: 'link', id: id };
+        if (this.model.getText(id))
+            return { entity: 'text', id: id };
+        return null;
+    };
+    DiagramEngine.prototype.applyRemovalCommand = function (root) {
+        if (root.entity === 'element') {
+            this.commandQueue.run(createRemoveElementCommand(root.id), this.model);
+            return;
+        }
+        if (root.entity === 'port') {
+            this.commandQueue.run(createRemovePortCommand(root.id), this.model);
+            return;
+        }
+        if (root.entity === 'link') {
+            this.commandQueue.run(createRemoveLinkCommand(root.id), this.model);
+            return;
+        }
+        this.commandQueue.run(createRemoveTextCommand(root.id), this.model);
+    };
+    DiagramEngine.prototype.planRemoval = function (before, root) {
+        var tempModel = new DiagramModel();
+        tempModel.load(before);
+        if (root.entity === 'element') {
+            tempModel.removeElement(root.id);
+        }
+        else if (root.entity === 'port') {
+            tempModel.removePort(root.id);
+        }
+        else if (root.entity === 'link') {
+            tempModel.removeLink(root.id);
+        }
+        else {
+            tempModel.removeText(root.id);
+        }
+        return this.computeRemovalDiff(before, tempModel.toState());
+    };
+    DiagramEngine.prototype.emitDeletionLifecycleEvents = function (removed, root, rootTrigger) {
+        for (var _i = 0, _a = removed.elements; _i < _a.length; _i++) {
+            var element = _a[_i];
+            var trigger = root.entity === 'element' && element.id === root.id ? rootTrigger : 'cascade';
+            if (this.emitElementDeleting({
+                elementId: element.id,
+                trigger: trigger,
+                root: root,
+            })) {
+                return true;
+            }
+        }
+        for (var _b = 0, _c = removed.ports; _b < _c.length; _b++) {
+            var port = _c[_b];
+            var trigger = root.entity === 'port' && port.id === root.id ? rootTrigger : 'cascade';
+            if (this.emitPortDeleting({
+                portId: port.id,
+                elementId: port.elementId,
+                trigger: trigger,
+                root: root,
+            })) {
+                return true;
+            }
+        }
+        for (var _d = 0, _e = removed.links; _d < _e.length; _d++) {
+            var link = _e[_d];
+            var trigger = root.entity === 'link' && link.id === root.id ? rootTrigger : 'cascade';
+            if (this.emitLinkDeleting({
+                linkId: link.id,
+                sourcePortId: link.sourcePortId,
+                targetPortId: link.targetPortId,
+                trigger: trigger,
+                root: root,
+            })) {
+                return true;
+            }
+        }
+        for (var _f = 0, _g = removed.texts; _f < _g.length; _f++) {
+            var text = _g[_f];
+            var trigger = root.entity === 'text' && text.id === root.id ? rootTrigger : 'cascade';
+            if (this.emitTextDeleting({
+                textId: text.id,
+                ownerId: text.ownerId,
+                trigger: trigger,
+                root: root,
+            })) {
+                return true;
+            }
+        }
+        return false;
+    };
+    DiagramEngine.prototype.emitElementDeleting = function (event) {
+        var cancelled = false;
+        var payload = __assign(__assign({}, event), { cancelled: false, cancel: function () {
+                cancelled = true;
+                payload.cancelled = true;
+            } });
+        this.events.emit('elementDeleting', payload);
+        return cancelled || payload.cancelled;
+    };
+    DiagramEngine.prototype.emitPortDeleting = function (event) {
+        var cancelled = false;
+        var payload = __assign(__assign({}, event), { cancelled: false, cancel: function () {
+                cancelled = true;
+                payload.cancelled = true;
+            } });
+        this.events.emit('portDeleting', payload);
+        return cancelled || payload.cancelled;
+    };
+    DiagramEngine.prototype.emitLinkDeleting = function (event) {
+        var cancelled = false;
+        var payload = __assign(__assign({}, event), { cancelled: false, cancel: function () {
+                cancelled = true;
+                payload.cancelled = true;
+            } });
+        this.events.emit('linkDeleting', payload);
+        return cancelled || payload.cancelled;
+    };
+    DiagramEngine.prototype.emitTextDeleting = function (event) {
+        var cancelled = false;
+        var payload = __assign(__assign({}, event), { cancelled: false, cancel: function () {
+                cancelled = true;
+                payload.cancelled = true;
+            } });
+        this.events.emit('textDeleting', payload);
+        return cancelled || payload.cancelled;
+    };
     DiagramEngine.prototype.emitEntityDeletionEvents = function (removed) {
         var _this = this;
+        removed.elements.forEach(function (element) {
+            _this.events.emit('elementDeleted', { elementId: element.id });
+        });
         removed.ports.forEach(function (port) {
             _this.events.emit('portDeleted', { portId: port.id, elementId: port.elementId });
         });
@@ -6549,6 +6721,7 @@ var KonvaInteraction = /** @class */ (function () {
         this.shapeHoverControls = this.normalizeShapeHoverControls(config.shapeHoverControls);
         this.onShapeHoverControlInteracted = config.onShapeHoverControlInteracted;
         this.onShapeHoverControlActivated = config.onShapeHoverControlActivated;
+        this.onCreateLinkTargetPort = config.onCreateLinkTargetPort;
     }
     KonvaInteraction.prototype.setShapeHoverControls = function (controls) {
         this.shapeHoverControls = this.normalizeShapeHoverControls(controls);
@@ -6565,6 +6738,9 @@ var KonvaInteraction = /** @class */ (function () {
         var sourceElementId = this.engine.getPortElementId(sourcePortId);
         if (!sourceElementId)
             return;
+        var sourcePort = this.getPortById(sourcePortId);
+        if (!sourcePort)
+            return;
         var sourcePoint = (_a = this.engine.getPortLinkWorldPosition(sourcePortId)) !== null && _a !== void 0 ? _a : this.engine.getPortWorldPosition(sourcePortId);
         if (!sourcePoint)
             return;
@@ -6581,6 +6757,7 @@ var KonvaInteraction = /** @class */ (function () {
             this.programmaticLinkSession = {
                 sourcePortId: sourcePortId,
                 sourceElementId: sourceElementId,
+                sourcePort: this.clonePortData(sourcePort),
                 start: start,
                 current: start,
             };
@@ -6590,6 +6767,7 @@ var KonvaInteraction = /** @class */ (function () {
                 mode: 'link-drag',
                 sourcePortId: sourcePortId,
                 sourceElementId: sourceElementId,
+                sourcePort: this.clonePortData(sourcePort),
                 start: start,
                 current: start,
                 isMulti: false,
@@ -6605,7 +6783,7 @@ var KonvaInteraction = /** @class */ (function () {
         }
     };
     KonvaInteraction.prototype.updateLinkPreview = function (pointer) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
         if (this.programmaticLinkSession) {
             this.programmaticLinkSession.current = __assign({}, pointer);
         }
@@ -6617,28 +6795,29 @@ var KonvaInteraction = /** @class */ (function () {
             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);
+        var sourceElementId = (_f = (_e = this.programmaticLinkSession) === null || _e === void 0 ? void 0 : _e.sourceElementId) !== null && _f !== void 0 ? _f : (((_g = this.dragState) === null || _g === void 0 ? void 0 : _g.mode) === 'link-drag' ? this.dragState.sourceElementId : 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]);
+            (_h = this.renderer) === null || _h === void 0 ? void 0 : _h.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 ((hit === null || hit === void 0 ? void 0 : hit.type) === 'element' && sourceElementId) {
+            var placeholder = this.createPlaceholderPort(hit.id, pointer, sourcePortId, sourceElementId);
             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 });
+                    var hostWorld = (_j = this.engine.getElementWorldPosition(hit.id)) !== null && _j !== void 0 ? _j : hostElement.position;
+                    (_l = (_k = this.renderer) === null || _k === void 0 ? void 0 : _k.renderPortPlaceholder) === null || _l === void 0 ? void 0 : _l.call(_k, 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);
+                    (_o = (_m = this.renderer) === null || _m === void 0 ? void 0 : _m.renderPortPlaceholder) === null || _o === void 0 ? void 0 : _o.call(_m, placeholder);
                 }
             }
             return;
         }
-        (_m = (_l = this.renderer) === null || _l === void 0 ? void 0 : _l.clearPortPlaceholder) === null || _m === void 0 ? void 0 : _m.call(_l);
+        (_q = (_p = this.renderer) === null || _p === void 0 ? void 0 : _p.clearPortPlaceholder) === null || _q === void 0 ? void 0 : _q.call(_p);
     };
     KonvaInteraction.prototype.completeLinkToPort = function (targetPortId) {
         var _a, _b;
@@ -6800,10 +6979,14 @@ var KonvaInteraction = /** @class */ (function () {
                     }
                 }
                 else {
+                    var sourcePort = _this.getPortById(hit.id);
+                    if (!sourcePort)
+                        return;
                     _this.dragState = {
                         mode: 'link-drag',
                         sourcePortId: hit.id,
                         sourceElementId: elementId,
+                        sourcePort: _this.clonePortData(sourcePort),
                         start: point,
                         current: point,
                         isMulti: isMulti,
@@ -6985,7 +7168,7 @@ var KonvaInteraction = /** @class */ (function () {
                         }
                     }
                     else if ((hit === null || hit === void 0 ? void 0 : hit.type) === 'element') {
-                        var placeholder = _this.createPlaceholderPort(hit.id, point, _this.dragState.sourcePortId);
+                        var placeholder = _this.createPlaceholderPort(hit.id, point, _this.dragState.sourcePortId, _this.dragState.sourceElementId);
                         if (placeholder) {
                             var hostElement = _this.getElementById(hit.id);
                             if (hostElement) {
@@ -7227,15 +7410,29 @@ var KonvaInteraction = /** @class */ (function () {
         this.stage.on(upEvents, pointerUp);
         this.handlers.push([upEvents, pointerUp]);
         var doubleClick = function () {
+            var args = [];
+            for (var _i = 0; _i < arguments.length; _i++) {
+                args[_i] = arguments[_i];
+            }
+            var event = args[0];
+            var nativeEvent = event === null || event === void 0 ? void 0 : event.evt;
             var point = _this.getPointerPosition();
             if (!point)
                 return;
             var hit = _this.resolveHit(point);
-            if (!hit || hit.type !== 'text')
+            if (!hit)
                 return;
-            if (!_this.isTextEditable(hit.id))
+            if (hit.type === 'text') {
+                if (!_this.isTextEditable(hit.id))
+                    return;
+                _this.startTextEdit(hit.id);
                 return;
-            _this.startTextEdit(hit.id);
+            }
+            if (hit.type !== 'element')
+                return;
+            var isMulti = Boolean(nativeEvent && (nativeEvent.ctrlKey || nativeEvent.metaKey || nativeEvent.shiftKey));
+            var pointerInfo = _this.buildPointerInfo(point, nativeEvent);
+            _this.engine.emitElementDoubleClick(hit.id, pointerInfo, isMulti);
         };
         this.stage.on('dblclick dbltap', doubleClick);
         this.handlers.push(['dblclick dbltap', doubleClick]);
@@ -8660,7 +8857,8 @@ 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);
+        var _a, _b;
+        var targetPort = this.createPortForLink(targetElementId, worldPoint, sourcePortId, sourceElementId);
         if (!targetPort) {
             return { createdLinkId: null, targetPortId: null, targetElementId: null };
         }
@@ -8676,7 +8874,10 @@ var KonvaInteraction = /** @class */ (function () {
             return { createdLinkId: null, targetPortId: targetPort.id, targetElementId: targetElementId };
         }
         this.engine.addPortToElement(targetElementId, targetPort);
-        this.engine.movePortTo(targetPort.id, worldPoint.x, worldPoint.y);
+        var targetElementWorld = (_a = this.engine.getElementWorldPosition(targetElementId)) !== null && _a !== void 0 ? _a : (_b = this.getElementById(targetElementId)) === null || _b === void 0 ? void 0 : _b.position;
+        if (targetElementWorld) {
+            this.engine.movePortTo(targetPort.id, targetElementWorld.x + targetPort.position.x, targetElementWorld.y + targetPort.position.y);
+        }
         var createdLinkId = createId();
         this.engine.addLink({
             id: createdLinkId,
@@ -8686,61 +8887,139 @@ var KonvaInteraction = /** @class */ (function () {
         });
         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);
-        if (!element)
+    KonvaInteraction.prototype.createPortForLink = function (elementId, worldPoint, sourcePortId, sourceElementId) {
+        var resolved = this.resolveLinkTargetPortDraft(elementId, worldPoint, sourcePortId, sourceElementId, 'commit');
+        if (!resolved)
             return null;
-        var elementPosition = (_a = this.engine.getElementWorldPosition(elementId)) !== null && _a !== void 0 ? _a : element.position;
-        var relative = {
-            x: worldPoint.x - elementPosition.x,
-            y: worldPoint.y - elementPosition.y,
-        };
-        var sourcePort = this.getPortById(sourcePortId);
-        var destinationMoveMode = ((_b = element.portMovement) === null || _b === void 0 ? void 0 : _b.moveMode) && element.portMovement.moveMode !== 'anchors'
-            ? element.portMovement.moveMode
-            : undefined;
         return {
             id: createId(),
             elementId: elementId,
-            position: relative,
-            shapeId: sourcePort === null || sourcePort === void 0 ? void 0 : sourcePort.shapeId,
-            size: (sourcePort === null || sourcePort === void 0 ? void 0 : sourcePort.size) ? __assign({}, sourcePort.size) : undefined,
-            style: (sourcePort === null || sourcePort === void 0 ? void 0 : sourcePort.style) ? __assign({}, sourcePort.style) : undefined,
-            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,
-            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,
+            position: __assign({}, resolved.draft.position),
+            shapeId: resolved.draft.shapeId,
+            size: resolved.draft.size ? __assign({}, resolved.draft.size) : undefined,
+            style: resolved.draft.style ? __assign({}, resolved.draft.style) : undefined,
+            textIds: resolved.draft.textIds ? __spreadArray([], resolved.draft.textIds, true) : undefined,
+            moveMode: resolved.draft.moveMode,
+            anchorCenter: resolved.draft.anchorCenter,
+            orientToHostBorder: resolved.draft.orientToHostBorder,
+            placementPoint: resolved.draft.placementPoint ? __assign({}, resolved.draft.placementPoint) : undefined,
+            linkAttachPoint: resolved.draft.linkAttachPoint ? __assign({}, resolved.draft.linkAttachPoint) : undefined,
+            externalLinkAttachPoint: resolved.draft.externalLinkAttachPoint ? __assign({}, resolved.draft.externalLinkAttachPoint) : undefined,
+            internalLinkAttachPoint: resolved.draft.internalLinkAttachPoint ? __assign({}, resolved.draft.internalLinkAttachPoint) : undefined,
+            rotationPivot: resolved.draft.rotationPivot ? __assign({}, resolved.draft.rotationPivot) : undefined,
+            currentAnchorId: resolved.draft.currentAnchorId,
         };
     };
-    KonvaInteraction.prototype.createPlaceholderPort = function (elementId, worldPoint, sourcePortId) {
-        var _a, _b, _c;
-        var element = this.getElementById(elementId);
-        var sourcePort = this.getPortById(sourcePortId);
-        var destinationMoveMode = ((_a = element === null || element === void 0 ? void 0 : element.portMovement) === null || _a === void 0 ? void 0 : _a.moveMode) && element.portMovement.moveMode !== 'anchors'
-            ? element.portMovement.moveMode
-            : undefined;
+    KonvaInteraction.prototype.createPlaceholderPort = function (elementId, worldPoint, sourcePortId, sourceElementId) {
+        var _a;
+        var resolved = this.resolveLinkTargetPortDraft(elementId, worldPoint, sourcePortId, sourceElementId, 'preview');
+        if (!resolved)
+            return null;
+        var hostWorld = (_a = this.engine.getElementWorldPosition(elementId)) !== null && _a !== void 0 ? _a : resolved.targetElement.position;
         return {
             id: "port-placeholder:".concat(sourcePortId),
             elementId: elementId,
-            position: { x: worldPoint.x, y: worldPoint.y },
-            shapeId: sourcePort === null || sourcePort === void 0 ? void 0 : sourcePort.shapeId,
-            size: (sourcePort === null || sourcePort === void 0 ? void 0 : sourcePort.size) ? __assign({}, sourcePort.size) : undefined,
-            style: (sourcePort === null || sourcePort === void 0 ? void 0 : sourcePort.style) ? __assign({}, sourcePort.style) : undefined,
-            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,
+            position: {
+                x: hostWorld.x + resolved.draft.position.x,
+                y: hostWorld.y + resolved.draft.position.y,
+            },
+            shapeId: resolved.draft.shapeId,
+            size: resolved.draft.size ? __assign({}, resolved.draft.size) : undefined,
+            style: resolved.draft.style ? __assign({}, resolved.draft.style) : undefined,
+            textIds: resolved.draft.textIds ? __spreadArray([], resolved.draft.textIds, true) : undefined,
+            moveMode: resolved.draft.moveMode,
+            anchorCenter: resolved.draft.anchorCenter,
+            orientToHostBorder: resolved.draft.orientToHostBorder,
+            placementPoint: resolved.draft.placementPoint ? __assign({}, resolved.draft.placementPoint) : undefined,
+            linkAttachPoint: resolved.draft.linkAttachPoint ? __assign({}, resolved.draft.linkAttachPoint) : undefined,
+            externalLinkAttachPoint: resolved.draft.externalLinkAttachPoint ? __assign({}, resolved.draft.externalLinkAttachPoint) : undefined,
+            internalLinkAttachPoint: resolved.draft.internalLinkAttachPoint ? __assign({}, resolved.draft.internalLinkAttachPoint) : undefined,
+            rotationPivot: resolved.draft.rotationPivot ? __assign({}, resolved.draft.rotationPivot) : undefined,
+            currentAnchorId: resolved.draft.currentAnchorId,
+        };
+    };
+    KonvaInteraction.prototype.resolveLinkTargetPortDraft = function (elementId, worldPoint, sourcePortId, sourceElementId, phase) {
+        var _a;
+        var targetElement = this.getElementById(elementId);
+        var sourcePort = this.resolveLinkSourcePort(sourcePortId);
+        if (!targetElement || !sourcePort)
+            return null;
+        var defaultDraft = this.buildDefaultLinkTargetPortDraft(targetElement, worldPoint, sourcePort);
+        var override = (_a = this.onCreateLinkTargetPort) === null || _a === void 0 ? void 0 : _a.call(this, {
+            phase: phase,
+            pointer: __assign({}, worldPoint),
+            sourcePortId: sourcePortId,
+            sourceElementId: sourceElementId,
+            targetElementId: elementId,
+            sourcePort: this.clonePortData(sourcePort),
+            targetElement: this.cloneElementData(targetElement),
+            defaultPort: this.cloneLinkTargetPortDraft(defaultDraft),
+        });
+        var mergedDraft = this.mergeLinkTargetPortDraft(defaultDraft, override);
+        var normalizedDraft = this.engine.normalizePortDraftForElement(elementId, mergedDraft);
+        if (!normalizedDraft)
+            return null;
+        return {
+            draft: normalizedDraft,
+            targetElement: this.cloneElementData(targetElement),
+        };
+    };
+    KonvaInteraction.prototype.buildDefaultLinkTargetPortDraft = function (element, worldPoint, sourcePort) {
+        var _a, _b, _c, _d;
+        var elementPosition = (_a = this.engine.getElementWorldPosition(element.id)) !== null && _a !== void 0 ? _a : element.position;
+        var destinationMoveMode = ((_b = element.portMovement) === null || _b === void 0 ? void 0 : _b.moveMode) && element.portMovement.moveMode !== 'anchors'
+            ? element.portMovement.moveMode
+            : undefined;
+        return {
+            position: {
+                x: worldPoint.x - elementPosition.x,
+                y: worldPoint.y - elementPosition.y,
+            },
+            shapeId: sourcePort.shapeId,
+            size: sourcePort.size ? __assign({}, sourcePort.size) : undefined,
+            style: sourcePort.style ? __assign({}, sourcePort.style) : undefined,
+            moveMode: destinationMoveMode !== null && destinationMoveMode !== void 0 ? destinationMoveMode : sourcePort.moveMode,
+            anchorCenter: (_c = sourcePort.anchorCenter) !== null && _c !== void 0 ? _c : true,
+            orientToHostBorder: (_d = sourcePort.orientToHostBorder) !== null && _d !== void 0 ? _d : true,
+            placementPoint: sourcePort.placementPoint ? __assign({}, sourcePort.placementPoint) : undefined,
+            linkAttachPoint: sourcePort.linkAttachPoint ? __assign({}, sourcePort.linkAttachPoint) : undefined,
+            externalLinkAttachPoint: sourcePort.externalLinkAttachPoint ? __assign({}, sourcePort.externalLinkAttachPoint) : undefined,
+            internalLinkAttachPoint: sourcePort.internalLinkAttachPoint ? __assign({}, sourcePort.internalLinkAttachPoint) : undefined,
+            rotationPivot: sourcePort.rotationPivot ? __assign({}, sourcePort.rotationPivot) : undefined,
         };
     };
+    KonvaInteraction.prototype.mergeLinkTargetPortDraft = function (defaultDraft, override) {
+        return this.cloneLinkTargetPortDraft(__assign(__assign({}, defaultDraft), (override !== null && override !== void 0 ? override : {})));
+    };
+    KonvaInteraction.prototype.resolveLinkSourcePort = function (sourcePortId) {
+        var _a, _b;
+        if (((_a = this.programmaticLinkSession) === null || _a === void 0 ? void 0 : _a.sourcePortId) === sourcePortId) {
+            return this.clonePortData(this.programmaticLinkSession.sourcePort);
+        }
+        if (((_b = this.dragState) === null || _b === void 0 ? void 0 : _b.mode) === 'link-drag' && this.dragState.sourcePortId === sourcePortId) {
+            return this.clonePortData(this.dragState.sourcePort);
+        }
+        var sourcePort = this.getPortById(sourcePortId);
+        return sourcePort ? this.clonePortData(sourcePort) : null;
+    };
+    KonvaInteraction.prototype.clonePortData = function (port) {
+        return __assign(__assign({}, port), { position: __assign({}, port.position), size: port.size ? __assign({}, port.size) : undefined, style: port.style ? __assign({}, port.style) : undefined, textIds: port.textIds ? __spreadArray([], port.textIds, true) : undefined, placementPoint: port.placementPoint ? __assign({}, port.placementPoint) : undefined, linkAttachPoint: port.linkAttachPoint ? __assign({}, port.linkAttachPoint) : undefined, externalLinkAttachPoint: port.externalLinkAttachPoint ? __assign({}, port.externalLinkAttachPoint) : undefined, internalLinkAttachPoint: port.internalLinkAttachPoint ? __assign({}, port.internalLinkAttachPoint) : undefined, rotationPivot: port.rotationPivot ? __assign({}, port.rotationPivot) : undefined });
+    };
+    KonvaInteraction.prototype.cloneLinkTargetPortDraft = function (draft) {
+        return __assign(__assign({}, draft), { position: __assign({}, draft.position), size: draft.size ? __assign({}, draft.size) : undefined, style: draft.style ? __assign({}, draft.style) : undefined, textIds: draft.textIds ? __spreadArray([], draft.textIds, true) : undefined, placementPoint: draft.placementPoint ? __assign({}, draft.placementPoint) : undefined, linkAttachPoint: draft.linkAttachPoint ? __assign({}, draft.linkAttachPoint) : undefined, externalLinkAttachPoint: draft.externalLinkAttachPoint ? __assign({}, draft.externalLinkAttachPoint) : undefined, internalLinkAttachPoint: draft.internalLinkAttachPoint ? __assign({}, draft.internalLinkAttachPoint) : undefined, rotationPivot: draft.rotationPivot ? __assign({}, draft.rotationPivot) : undefined });
+    };
+    KonvaInteraction.prototype.cloneElementData = function (element) {
+        return __assign(__assign({}, element), { position: __assign({}, element.position), size: __assign({}, element.size), style: element.style ? __assign({}, element.style) : undefined, portIds: element.portIds ? __spreadArray([], element.portIds, true) : undefined, textIds: element.textIds ? __spreadArray([], element.textIds, true) : undefined, layout: element.layout ? __assign({}, element.layout) : undefined, childElementInteraction: element.childElementInteraction ? __assign({}, element.childElementInteraction) : undefined, portMovement: element.portMovement
+                ? __assign(__assign({}, element.portMovement), { anchorConstraint: element.portMovement.anchorConstraint
+                        ? __assign({}, element.portMovement.anchorConstraint) : undefined, positionLimits: element.portMovement.positionLimits
+                        ? {
+                            x: element.portMovement.positionLimits.x
+                                ? __assign({}, element.portMovement.positionLimits.x) : undefined,
+                            y: element.portMovement.positionLimits.y
+                                ? __assign({}, element.portMovement.positionLimits.y) : undefined,
+                        }
+                        : undefined }) : undefined });
+    };
     KonvaInteraction.prototype.getElementById = function (id) {
         return this.engine.getState().elements.find(function (element) { return element.id === id; });
     };
@@ -9671,6 +9950,29 @@ var resolveViewportFitTransform = function (state, viewportSize, options) {
     };
     return { pan: pan, zoom: zoom };
 };
+var resolveFocusElementTransform = function (state, elementId, viewportSize, currentZoom, options) {
+    var elementsById = new Map(state.elements.map(function (element) { return [element.id, element]; }));
+    var element = elementsById.get(elementId);
+    if (!element)
+        return null;
+    var position = resolveElementWorldPositionInState(elementId, elementsById);
+    if (!position)
+        return null;
+    var safeWidth = Math.max(1, viewportSize.width);
+    var safeHeight = Math.max(1, viewportSize.height);
+    var requestedZoom = options === null || options === void 0 ? void 0 : options.zoom;
+    var zoom = typeof requestedZoom === 'number' && Number.isFinite(requestedZoom)
+        ? clamp(requestedZoom, DEFAULT_VIEWPORT_FIT_MIN_ZOOM, DEFAULT_VIEWPORT_FIT_MAX_ZOOM)
+        : currentZoom;
+    var safeZoom = zoom === 0 ? 1 : zoom;
+    var centerX = position.x + element.size.width / 2;
+    var centerY = position.y + element.size.height / 2;
+    var pan = {
+        x: safeWidth / 2 - centerX * safeZoom,
+        y: safeHeight / 2 - centerY * safeZoom,
+    };
+    return { pan: pan, zoom: zoom };
+};
 var resolveFitToContentPadding = function (fitToContent) {
     if (typeof fitToContent === 'object' && typeof fitToContent.padding === 'number') {
         return Math.max(0, fitToContent.padding);
@@ -9857,6 +10159,7 @@ var createDiagramEditor = function (config) {
         shapeHoverControls: config.elementShapeHoverControls,
         onShapeHoverControlInteracted: config.onElementShapeHoverControlInteraction,
         onShapeHoverControlActivated: config.onElementShapeHoverControlActivated,
+        onCreateLinkTargetPort: config.onCreateLinkTargetPort,
     });
     interaction.bind();
     if (config.initialState) {
@@ -9904,6 +10207,12 @@ var createDiagramEditor = function (config) {
                 return;
             engine.setViewport(transform.pan, transform.zoom);
         },
+        focusElement: function (elementId, options) {
+            var transform = resolveFocusElementTransform(engine.getState(), elementId, { width: stageWidth, height: stageHeight }, engine.getViewport().zoom, options);
+            if (!transform)
+                return;
+            engine.setViewport(transform.pan, transform.zoom);
+        },
         exportImage: function (options) {
             engine.render();
             if (typeof stage.toDataURL !== 'function') {