orcasvn-react-diagrams 0.2.11 → 0.2.13

package/dist/cjs/examples.js

@@ -2,17 +2,6 @@
 
 var React = require('react');
 
-var fallbackId = function () {
-    return "id-".concat(Math.random().toString(36).slice(2, 10), "-").concat(Date.now().toString(36));
-};
-var createId = function () {
-    var cryptoApi = globalThis.crypto;
-    if (cryptoApi === null || cryptoApi === void 0 ? void 0 : cryptoApi.randomUUID) {
-        return cryptoApi.randomUUID();
-    }
-    return fallbackId();
-};
-
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
 
@@ -82,6 +71,17 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
+var fallbackId = function () {
+    return "id-".concat(Math.random().toString(36).slice(2, 10), "-").concat(Date.now().toString(36));
+};
+var createId = function () {
+    var cryptoApi = globalThis.crypto;
+    if (cryptoApi === null || cryptoApi === void 0 ? void 0 : cryptoApi.randomUUID) {
+        return cryptoApi.randomUUID();
+    }
+    return fallbackId();
+};
+
 var DEFAULT_PADDING = 12;
 var DEFAULT_TOLERANCE = 0.5;
 var DEFAULT_STUB_LENGTH = 12;
@@ -848,7 +848,7 @@ var createLinkPortCreationState = function () { return ({
 var linkPortCreationDemoConfig = ({
     id: 'link-port-creation',
     title: 'Link Creates Port',
-    description: 'Drag from a port to an element to auto-create a target port.',
+    description: 'Drag from a port to an element to auto-create a target port, then compare default and host-customized target-port creation.',
     createState: createLinkPortCreationState,
     elementShapes: baseElementShapes,
     portShapes: basePortShapes,
@@ -3634,6 +3634,163 @@ var linkColorPoolDemoConfig = {
     ],
 };
 
+var linkLabelDemoSourceId = 'link-label-source';
+var linkLabelDemoTargetId = 'link-label-target';
+var linkLabelDemoLinkId = 'link-label-link';
+var linkLabelDemoTextId = 'link-label-text';
+var resolveLinkMidpoint = function (points) {
+    if (points.length === 0)
+        return { x: 0, y: 0 };
+    if (points.length === 1)
+        return __assign({}, points[0]);
+    var total = 0;
+    for (var index = 1; index < points.length; index += 1) {
+        total += Math.hypot(points[index].x - points[index - 1].x, points[index].y - points[index - 1].y);
+    }
+    var halfway = total / 2;
+    var travelled = 0;
+    for (var index = 1; index < points.length; index += 1) {
+        var segment = Math.hypot(points[index].x - points[index - 1].x, points[index].y - points[index - 1].y);
+        if (travelled + segment >= halfway) {
+            var ratio = segment === 0 ? 0 : (halfway - travelled) / segment;
+            return {
+                x: points[index - 1].x + (points[index].x - points[index - 1].x) * ratio,
+                y: points[index - 1].y + (points[index].y - points[index - 1].y) * ratio,
+            };
+        }
+        travelled += segment;
+    }
+    return __assign({}, points[points.length - 1]);
+};
+var nudgeLinkLabel = function (editor, state) {
+    var link = state.links.find(function (item) { return item.id === linkLabelDemoLinkId; });
+    var label = state.texts.find(function (item) { return item.id === linkLabelDemoTextId; });
+    if (!link || !label)
+        return;
+    var midpoint = resolveLinkMidpoint(link.points);
+    editor.moveTextTo(linkLabelDemoTextId, midpoint.x + 72, midpoint.y - 24);
+};
+var createLinkLabelsState = function () { return ({
+    elements: [
+        {
+            id: linkLabelDemoSourceId,
+            position: { x: 120, y: 180 },
+            size: { width: 220, height: 120 },
+            shapeId: 'default',
+        },
+        {
+            id: linkLabelDemoTargetId,
+            position: { x: 500, y: 220 },
+            size: { width: 220, height: 140 },
+            shapeId: 'panel',
+        },
+    ],
+    ports: [
+        {
+            id: 'link-label-source-port',
+            elementId: linkLabelDemoSourceId,
+            position: { x: 220, y: 60 },
+            shapeId: 'port-circle',
+            moveMode: 'border',
+            anchorCenter: true,
+        },
+        {
+            id: 'link-label-target-port',
+            elementId: linkLabelDemoTargetId,
+            position: { x: 0, y: 70 },
+            shapeId: 'port-circle',
+            moveMode: 'border',
+            anchorCenter: true,
+        },
+    ],
+    links: [
+        {
+            id: linkLabelDemoLinkId,
+            sourcePortId: 'link-label-source-port',
+            targetPortId: 'link-label-target-port',
+            points: [],
+        },
+    ],
+    texts: [
+        {
+            id: "".concat(linkLabelDemoSourceId, "-label"),
+            content: 'Source node',
+            position: { x: 12, y: -14 },
+            ownerId: linkLabelDemoSourceId,
+        },
+        {
+            id: "".concat(linkLabelDemoTargetId, "-label"),
+            content: 'Move me, reroute me',
+            position: { x: 12, y: -14 },
+            ownerId: linkLabelDemoTargetId,
+        },
+        {
+            id: linkLabelDemoTextId,
+            content: 'I am just owned text',
+            position: { x: 0, y: -24 },
+            ownerId: linkLabelDemoLinkId,
+            layout: {
+                boundsMode: 'fixed',
+                fixedSize: { width: 160, height: 24 },
+                wrap: 'none',
+                overflow: 'ellipsis-end',
+            },
+            style: {
+                fill: '#1f2937',
+                backgroundFill: '#fef3c7',
+                padding: 4,
+            },
+        },
+        {
+            id: 'link-label-tip',
+            content: 'This label is TextData owned by the link. Drag or edit it, reroute the link, then delete the link to confirm the label follows and cascades away.',
+            position: { x: 120, y: 110 },
+            layout: {
+                boundsMode: 'fixed',
+                fixedSize: { width: 620, height: 44 },
+                wrap: 'word',
+                overflow: 'clip',
+                padding: 0,
+            },
+            style: {
+                fill: '#475569',
+            },
+        },
+    ],
+}); };
+var linkLabelsDemoConfig = {
+    id: 'link-labels',
+    title: 'Link Labels',
+    description: 'Link-owned text stays anchored to the route midpoint. Drag or edit the label, reroute the link, then delete the link to watch the owned text disappear with it.',
+    createState: createLinkLabelsState,
+    elementShapes: baseElementShapes,
+    portShapes: basePortShapes,
+    defaultElementShapeId: 'default',
+    defaultPortShapeId: 'port-circle',
+    actions: [
+        {
+            id: 'link-label-offset',
+            label: 'Offset label via API',
+            run: function (editor, state) { return nudgeLinkLabel(editor, state); },
+        },
+        {
+            id: 'link-label-reroute',
+            label: 'Move target + reroute',
+            run: function (editor) {
+                editor.moveElementTo(linkLabelDemoTargetId, 660, 320);
+                editor.rerouteAllLinks();
+            },
+        },
+        {
+            id: 'link-label-delete',
+            label: 'Delete labeled link',
+            run: function (editor) {
+                editor.removeLink(linkLabelDemoLinkId);
+            },
+        },
+    ],
+};
+
 var createGridOverlayState = function () { return ({
     elements: [
         {
@@ -4229,7 +4386,7 @@ var createDeletionEventsState = function () { return ({
 var deletionEventsDemoConfig = {
     id: 'deletion-events',
     title: 'Deletion Events',
-    description: 'Inspect elementDeleted, portDeleted, linkDeleted, and textDeleted payloads for direct and cascade removals.',
+    description: 'Inspect cancellable delete lifecycle events, post-delete payloads, and element double click in one integration-focused scenario.',
     createState: createDeletionEventsState,
     elementShapes: baseElementShapes,
     portShapes: basePortShapes,
@@ -6150,21 +6307,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,
@@ -6184,6 +6340,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)) {
@@ -8399,8 +8563,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({
@@ -8408,9 +8579,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) {
@@ -8425,6 +8593,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);
@@ -8473,7 +8659,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);
@@ -8567,7 +8760,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);
@@ -8652,7 +8852,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);
@@ -8847,40 +9054,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);
-                return;
-            }
-            if (_this.model.getPort(id)) {
-                _this.commandQueue.run(createRemovePortCommand(id), _this.model);
+            var root = _this.resolveDeletionRoot(id);
+            if (!root)
                 return;
-            }
-            if (_this.model.getLink(id)) {
-                _this.commandQueue.run(createRemoveLinkCommand(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.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;
@@ -8933,6 +9122,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);
     };
@@ -9576,8 +9768,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; }));
@@ -9587,9 +9779,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) {
@@ -9620,11 +9816,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 });
         });
@@ -10774,6 +11103,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);
@@ -10790,6 +11120,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;
@@ -10806,6 +11139,7 @@ var KonvaInteraction = /** @class */ (function () {
             this.programmaticLinkSession = {
                 sourcePortId: sourcePortId,
                 sourceElementId: sourceElementId,
+                sourcePort: this.clonePortData(sourcePort),
                 start: start,
                 current: start,
             };
@@ -10815,6 +11149,7 @@ var KonvaInteraction = /** @class */ (function () {
                 mode: 'link-drag',
                 sourcePortId: sourcePortId,
                 sourceElementId: sourceElementId,
+                sourcePort: this.clonePortData(sourcePort),
                 start: start,
                 current: start,
                 isMulti: false,
@@ -10830,7 +11165,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);
         }
@@ -10842,28 +11177,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;
@@ -11025,10 +11361,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,
@@ -11210,7 +11550,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) {
@@ -11452,15 +11792,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]);
@@ -12885,7 +13239,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 };
         }
@@ -12901,7 +13256,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,
@@ -12911,61 +13269,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; });
     };
@@ -13896,6 +14332,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);
@@ -14082,6 +14541,7 @@ var createDiagramEditor = function (config) {
         shapeHoverControls: config.elementShapeHoverControls,
         onShapeHoverControlInteracted: config.onElementShapeHoverControlInteraction,
         onShapeHoverControlActivated: config.onElementShapeHoverControlActivated,
+        onCreateLinkTargetPort: config.onCreateLinkTargetPort,
     });
     interaction.bind();
     if (config.initialState) {
@@ -14129,6 +14589,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') {
@@ -14181,7 +14647,7 @@ var useDisplayBoxMetricsUpdater = function () {
 };
 
 var useDemoEditor = function (_a) {
-    var createState = _a.createState, elementShapes = _a.elementShapes, portShapes = _a.portShapes, router = _a.router, snapDefault = _a.snapDefault, linkRouteRefreshPolicy = _a.linkRouteRefreshPolicy, linkColorPoolPolicy = _a.linkColorPoolPolicy, elementShapeHoverControls = _a.elementShapeHoverControls, onElementShapeHoverControlInteraction = _a.onElementShapeHoverControlInteraction, onElementShapeHoverControlActivated = _a.onElementShapeHoverControlActivated;
+    var createState = _a.createState, elementShapes = _a.elementShapes, portShapes = _a.portShapes, router = _a.router, snapDefault = _a.snapDefault, linkRouteRefreshPolicy = _a.linkRouteRefreshPolicy, linkColorPoolPolicy = _a.linkColorPoolPolicy, elementShapeHoverControls = _a.elementShapeHoverControls, onElementShapeHoverControlInteraction = _a.onElementShapeHoverControlInteraction, onElementShapeHoverControlActivated = _a.onElementShapeHoverControlActivated, onCreateLinkTargetPort = _a.onCreateLinkTargetPort;
     var containerRef = React.useRef(null);
     var editorRef = React.useRef(null);
     var _b = React.useState(null), diagramState = _b[0], setDiagramState = _b[1];
@@ -14228,6 +14694,7 @@ var useDemoEditor = function (_a) {
             elementShapeHoverControls: elementShapeHoverControls,
             onElementShapeHoverControlInteraction: onElementShapeHoverControlInteraction,
             onElementShapeHoverControlActivated: onElementShapeHoverControlActivated,
+            onCreateLinkTargetPort: onCreateLinkTargetPort,
             onChange: function (event) {
                 setDiagramState(event.state);
                 var viewportPatch = event.patches.find(function (patch) { return patch.entity === 'viewport'; });
@@ -14275,6 +14742,7 @@ var useDemoEditor = function (_a) {
         elementShapeHoverControls,
         onElementShapeHoverControlInteraction,
         onElementShapeHoverControlActivated,
+        onCreateLinkTargetPort,
     ]);
     return {
         containerRef: containerRef,
@@ -14622,6 +15090,66 @@ var LinkCancelDemo = function () {
         React.createElement(DisplayBoxStage, { containerRef: containerRef })));
 };
 
+var LinkPortCreationDemo = function () {
+    var _a = React.useState(false), useHostTargetPort = _a[0], setUseHostTargetPort = _a[1];
+    var onCreateLinkTargetPort = React.useMemo(function () {
+        if (!useHostTargetPort)
+            return undefined;
+        return function (_a) {
+            var defaultPort = _a.defaultPort;
+            return ({
+                shapeId: 'port-dark',
+                size: { width: 16, height: 16 },
+                style: {
+                    fill: '#f97316',
+                    stroke: '#9a3412',
+                    strokeWidth: 2,
+                    name: 'port',
+                },
+                position: {
+                    x: defaultPort.position.x,
+                    y: 24,
+                },
+                orientToHostBorder: false,
+            });
+        };
+    }, [useHostTargetPort]);
+    var _b = useDemoEditor({
+        createState: linkPortCreationDemoConfig.createState,
+        elementShapes: linkPortCreationDemoConfig.elementShapes,
+        portShapes: linkPortCreationDemoConfig.portShapes,
+        router: linkPortCreationDemoConfig.router,
+        snapDefault: linkPortCreationDemoConfig.snapDefault,
+        linkRouteRefreshPolicy: linkPortCreationDemoConfig.linkRouteRefreshPolicy,
+        linkColorPoolPolicy: linkPortCreationDemoConfig.linkColorPoolPolicy,
+        onCreateLinkTargetPort: onCreateLinkTargetPort,
+    }), containerRef = _b.containerRef, editorRef = _b.editorRef, diagramState = _b.diagramState, selection = _b.selection, snapEnabled = _b.snapEnabled, setSnapEnabled = _b.setSnapEnabled;
+    var nextOffset = useOffsetSequence();
+    var actionHelpers = React.useMemo(function () { return ({ nextOffset: nextOffset }); }, [nextOffset]);
+    var controls = useDemoControls({
+        demo: linkPortCreationDemoConfig,
+        editorRef: editorRef,
+        diagramState: diagramState,
+        selection: selection,
+        snapEnabled: snapEnabled,
+        setSnapEnabled: setSnapEnabled,
+        actionHelpers: actionHelpers,
+    });
+    return (React.createElement("section", null,
+        React.createElement("div", { style: { marginBottom: 12 } },
+            React.createElement("h2", { style: { marginTop: 0, marginBottom: 4 } }, linkPortCreationDemoConfig.title),
+            React.createElement("p", { style: { marginTop: 0, marginBottom: 8 } }, linkPortCreationDemoConfig.description),
+            React.createElement("label", { style: { display: 'inline-flex', alignItems: 'center', gap: 8, fontWeight: 600 } },
+                React.createElement("input", { type: "checkbox", checked: useHostTargetPort, onChange: function (event) { return setUseHostTargetPort(event.target.checked); } }),
+                "Customize target port via onCreateLinkTargetPort"),
+            React.createElement("p", { style: { marginTop: 8, marginBottom: 0, color: '#5c4a2c' } },
+                "Default mode clones the source port. Custom mode reshapes the target-port preview and commit together; host cancellation still belongs to ",
+                React.createElement("code", null, "elementLinkConnecting"),
+                ".")),
+        React.createElement(DisplayBoxControls, { actions: linkPortCreationDemoConfig.actions, snapEnabled: controls.snapEnabled, selectedLinkRouting: controls.selectedLinkRouting, canToggleLinkRouting: controls.canToggleLinkRouting, onReload: controls.handleReload, onZoomIn: controls.handleZoomIn, onZoomOut: controls.handleZoomOut, onResetViewport: controls.handleResetViewport, onToggleSnap: controls.handleToggleSnap, onManualRender: controls.handleManualRender, onToggleLinkRouting: controls.handleToggleLinkRouting, onAction: controls.handleAction, onExportImage: controls.handleExportImage, onClearExportPreview: controls.handleClearExportPreview, exportPreviewDataUrl: controls.exportPreviewDataUrl, exportError: controls.exportError }),
+        React.createElement(DisplayBoxStage, { containerRef: containerRef, stageStyle: linkPortCreationDemoConfig.stageStyle })));
+};
+
 var parentOptions = [
     { id: 'layout-row', label: 'Horizontal layout' },
     { id: 'layout-column', label: 'Vertical layout' },
@@ -16096,10 +16624,21 @@ var ZoomToFitElementsDemo = function () { return (React.createElement(SimpleDemo
             React.createElement("li", null, "Use `Run Zoom-To-Fit (Padding 48)` to confirm optional padding keeps extra breathing room around content.")))) })); };
 
 var initialPayloads = {
+    elementDeleting: null,
     elementDeleted: null,
+    portDeleting: null,
     portDeleted: null,
+    linkDeleting: null,
     linkDeleted: null,
+    textDeleting: null,
     textDeleted: null,
+    elementDoubleClick: null,
+};
+var initialCancelFlags = {
+    element: false,
+    port: false,
+    link: false,
+    text: false,
 };
 var eventBoxStyle = {
     width: '100%',
@@ -16132,21 +16671,77 @@ var DeletionEventsDemo = function () {
         actionHelpers: actionHelpers,
     });
     var _f = React.useState(initialPayloads), payloads = _f[0], setPayloads = _f[1];
+    var _g = React.useState(initialCancelFlags), cancelFlags = _g[0], setCancelFlags = _g[1];
+    var _h = React.useState([]), eventLog = _h[0], setEventLog = _h[1];
+    var appendLog = React.useCallback(function (eventName, payload) {
+        setEventLog(function (prev) { return __spreadArray([
+            "".concat(eventName, ": ").concat(JSON.stringify(payload))
+        ], prev, true).slice(0, 18); });
+    }, []);
     React.useEffect(function () {
         var editor = editorRef.current;
         if (!editor)
             return undefined;
         setPayloads(initialPayloads);
+        setEventLog([]);
         var unsubs = [
-            editor.on('elementDeleted', function (payload) { return setPayloads(function (prev) { return (__assign(__assign({}, prev), { elementDeleted: payload })); }); }),
-            editor.on('portDeleted', function (payload) { return setPayloads(function (prev) { return (__assign(__assign({}, prev), { portDeleted: payload })); }); }),
-            editor.on('linkDeleted', function (payload) { return setPayloads(function (prev) { return (__assign(__assign({}, prev), { linkDeleted: payload })); }); }),
-            editor.on('textDeleted', function (payload) { return setPayloads(function (prev) { return (__assign(__assign({}, prev), { textDeleted: payload })); }); }),
+            editor.on('elementDeleting', function (payload) {
+                if (cancelFlags.element) {
+                    payload.cancel();
+                }
+                setPayloads(function (prev) { return (__assign(__assign({}, prev), { elementDeleting: payload })); });
+                appendLog('elementDeleting', payload);
+            }),
+            editor.on('elementDeleted', function (payload) {
+                setPayloads(function (prev) { return (__assign(__assign({}, prev), { elementDeleted: payload })); });
+                appendLog('elementDeleted', payload);
+            }),
+            editor.on('portDeleting', function (payload) {
+                if (cancelFlags.port) {
+                    payload.cancel();
+                }
+                setPayloads(function (prev) { return (__assign(__assign({}, prev), { portDeleting: payload })); });
+                appendLog('portDeleting', payload);
+            }),
+            editor.on('portDeleted', function (payload) {
+                setPayloads(function (prev) { return (__assign(__assign({}, prev), { portDeleted: payload })); });
+                appendLog('portDeleted', payload);
+            }),
+            editor.on('linkDeleting', function (payload) {
+                if (cancelFlags.link) {
+                    payload.cancel();
+                }
+                setPayloads(function (prev) { return (__assign(__assign({}, prev), { linkDeleting: payload })); });
+                appendLog('linkDeleting', payload);
+            }),
+            editor.on('linkDeleted', function (payload) {
+                setPayloads(function (prev) { return (__assign(__assign({}, prev), { linkDeleted: payload })); });
+                appendLog('linkDeleted', payload);
+            }),
+            editor.on('textDeleting', function (payload) {
+                if (cancelFlags.text) {
+                    payload.cancel();
+                }
+                setPayloads(function (prev) { return (__assign(__assign({}, prev), { textDeleting: payload })); });
+                appendLog('textDeleting', payload);
+            }),
+            editor.on('textDeleted', function (payload) {
+                setPayloads(function (prev) { return (__assign(__assign({}, prev), { textDeleted: payload })); });
+                appendLog('textDeleted', payload);
+            }),
+            editor.on('elementDoubleClick', function (payload) {
+                setPayloads(function (prev) { return (__assign(__assign({}, prev), { elementDoubleClick: payload })); });
+                appendLog('elementDoubleClick', payload);
+            }),
         ];
         return function () {
-            unsubs.forEach(function (unsub) { return unsub(); });
+            unsubs.forEach(function (unsub) {
+                if (typeof unsub === 'function') {
+                    unsub();
+                }
+            });
         };
-    }, [editorRef]);
+    }, [appendLog, cancelFlags, editorRef]);
     var hasPort = ((_a = diagramState === null || diagramState === void 0 ? void 0 : diagramState.ports) !== null && _a !== void 0 ? _a : []).some(function (port) { return port.id === 'delete-source-free-port'; });
     var hasLink = ((_b = diagramState === null || diagramState === void 0 ? void 0 : diagramState.links) !== null && _b !== void 0 ? _b : []).some(function (link) { return link.id === 'delete-link'; });
     var hasText = ((_c = diagramState === null || diagramState === void 0 ? void 0 : diagramState.texts) !== null && _c !== void 0 ? _c : []).some(function (text) { return text.id === 'delete-free-text'; });
@@ -16155,29 +16750,67 @@ var DeletionEventsDemo = function () {
         React.createElement("div", { style: { marginBottom: 12 } },
             React.createElement("h2", { style: { marginTop: 0, marginBottom: 4 } }, demo.title),
             React.createElement("p", { style: { marginTop: 0 } },
-                "Use direct delete buttons for port/link/text, then delete ",
+                "Use the direct delete buttons for port/link/text, then delete ",
                 React.createElement("code", null, "delete-source"),
-                " to trigger cascade removals. Latest payloads are shown below for integration debugging.")),
+                " to trigger cascades. Turn cancellation toggles on to veto deletes before commit, double click an element body to log",
+                React.createElement("code", null, " elementDoubleClick"),
+                ", and use the batch-selection helper before pressing Delete to verify partial success.")),
         React.createElement(DisplayBoxControls, { actions: demo.actions, snapEnabled: controls.snapEnabled, selectedLinkRouting: controls.selectedLinkRouting, canToggleLinkRouting: controls.canToggleLinkRouting, onReload: controls.handleReload, onZoomIn: controls.handleZoomIn, onZoomOut: controls.handleZoomOut, onResetViewport: controls.handleResetViewport, onToggleSnap: controls.handleToggleSnap, onManualRender: controls.handleManualRender, onToggleLinkRouting: controls.handleToggleLinkRouting, onAction: controls.handleAction, onExportImage: controls.handleExportImage, onClearExportPreview: controls.handleClearExportPreview, exportPreviewDataUrl: controls.exportPreviewDataUrl, exportError: controls.exportError }),
         React.createElement("div", { style: { display: 'grid', gap: 12, marginBottom: 12 } },
             React.createElement("div", { style: { display: 'flex', flexWrap: 'wrap', gap: 8 } },
                 React.createElement("button", { type: "button", onClick: function () { var _a; return (_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.removePort('delete-source-free-port'); }, disabled: !hasPort }, "Delete Port"),
                 React.createElement("button", { type: "button", onClick: function () { var _a; return (_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.removeLink('delete-link'); }, disabled: !hasLink }, "Delete Link"),
                 React.createElement("button", { type: "button", onClick: function () { var _a; return (_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.removeText('delete-free-text'); }, disabled: !hasText }, "Delete Text"),
-                React.createElement("button", { type: "button", onClick: function () { var _a; return (_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.removeElement('delete-source'); }, disabled: !hasCascadeElement }, "Delete Element (Cascade)")),
-            React.createElement("div", { style: { display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 1fr))', gap: 12 } },
+                React.createElement("button", { type: "button", onClick: function () { var _a; return (_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.removeElement('delete-source'); }, disabled: !hasCascadeElement }, "Delete Element (Cascade)"),
+                React.createElement("button", { type: "button", onClick: function () { var _a; return (_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.setSelection(['delete-free-text', 'delete-target']); }, disabled: !hasText }, "Prepare Batch Delete Selection")),
+            React.createElement("div", { style: { display: 'flex', flexWrap: 'wrap', gap: 12 } },
+                React.createElement("label", null,
+                    React.createElement("input", { type: "checkbox", checked: cancelFlags.element, onChange: function (event) { return setCancelFlags(function (prev) { return (__assign(__assign({}, prev), { element: event.target.checked })); }); } }),
+                    ' ',
+                    "Cancel elementDeleting"),
+                React.createElement("label", null,
+                    React.createElement("input", { type: "checkbox", checked: cancelFlags.port, onChange: function (event) { return setCancelFlags(function (prev) { return (__assign(__assign({}, prev), { port: event.target.checked })); }); } }),
+                    ' ',
+                    "Cancel portDeleting"),
+                React.createElement("label", null,
+                    React.createElement("input", { type: "checkbox", checked: cancelFlags.link, onChange: function (event) { return setCancelFlags(function (prev) { return (__assign(__assign({}, prev), { link: event.target.checked })); }); } }),
+                    ' ',
+                    "Cancel linkDeleting"),
+                React.createElement("label", null,
+                    React.createElement("input", { type: "checkbox", checked: cancelFlags.text, onChange: function (event) { return setCancelFlags(function (prev) { return (__assign(__assign({}, prev), { text: event.target.checked })); }); } }),
+                    ' ',
+                    "Cancel textDeleting")),
+            React.createElement("div", { style: { display: 'grid', gridTemplateColumns: 'repeat(3, minmax(0, 1fr))', gap: 12 } },
+                React.createElement("div", null,
+                    React.createElement("label", { style: { display: 'block', fontWeight: 600, marginBottom: 6 } }, "elementDeleting"),
+                    React.createElement("textarea", { readOnly: true, value: payloads.elementDeleting ? JSON.stringify(payloads.elementDeleting, null, 2) : '', style: eventBoxStyle })),
                 React.createElement("div", null,
                     React.createElement("label", { style: { display: 'block', fontWeight: 600, marginBottom: 6 } }, "elementDeleted"),
                     React.createElement("textarea", { readOnly: true, value: payloads.elementDeleted ? JSON.stringify(payloads.elementDeleted, null, 2) : '', style: eventBoxStyle })),
+                React.createElement("div", null,
+                    React.createElement("label", { style: { display: 'block', fontWeight: 600, marginBottom: 6 } }, "portDeleting"),
+                    React.createElement("textarea", { readOnly: true, value: payloads.portDeleting ? JSON.stringify(payloads.portDeleting, null, 2) : '', style: eventBoxStyle })),
                 React.createElement("div", null,
                     React.createElement("label", { style: { display: 'block', fontWeight: 600, marginBottom: 6 } }, "portDeleted"),
                     React.createElement("textarea", { readOnly: true, value: payloads.portDeleted ? JSON.stringify(payloads.portDeleted, null, 2) : '', style: eventBoxStyle })),
+                React.createElement("div", null,
+                    React.createElement("label", { style: { display: 'block', fontWeight: 600, marginBottom: 6 } }, "linkDeleting"),
+                    React.createElement("textarea", { readOnly: true, value: payloads.linkDeleting ? JSON.stringify(payloads.linkDeleting, null, 2) : '', style: eventBoxStyle })),
                 React.createElement("div", null,
                     React.createElement("label", { style: { display: 'block', fontWeight: 600, marginBottom: 6 } }, "linkDeleted"),
                     React.createElement("textarea", { readOnly: true, value: payloads.linkDeleted ? JSON.stringify(payloads.linkDeleted, null, 2) : '', style: eventBoxStyle })),
+                React.createElement("div", null,
+                    React.createElement("label", { style: { display: 'block', fontWeight: 600, marginBottom: 6 } }, "textDeleting"),
+                    React.createElement("textarea", { readOnly: true, value: payloads.textDeleting ? JSON.stringify(payloads.textDeleting, null, 2) : '', style: eventBoxStyle })),
                 React.createElement("div", null,
                     React.createElement("label", { style: { display: 'block', fontWeight: 600, marginBottom: 6 } }, "textDeleted"),
-                    React.createElement("textarea", { readOnly: true, value: payloads.textDeleted ? JSON.stringify(payloads.textDeleted, null, 2) : '', style: eventBoxStyle })))),
+                    React.createElement("textarea", { readOnly: true, value: payloads.textDeleted ? JSON.stringify(payloads.textDeleted, null, 2) : '', style: eventBoxStyle })),
+                React.createElement("div", null,
+                    React.createElement("label", { style: { display: 'block', fontWeight: 600, marginBottom: 6 } }, "elementDoubleClick"),
+                    React.createElement("textarea", { readOnly: true, value: payloads.elementDoubleClick ? JSON.stringify(payloads.elementDoubleClick, null, 2) : '', style: eventBoxStyle }))),
+            React.createElement("div", null,
+                React.createElement("label", { style: { display: 'block', fontWeight: 600, marginBottom: 6 } }, "Event Log"),
+                React.createElement("textarea", { readOnly: true, value: eventLog.join('\n'), style: __assign(__assign({}, eventBoxStyle), { minHeight: 180 }) }))),
         React.createElement(DisplayBoxStage, { containerRef: containerRef })));
 };
 
@@ -16986,219 +17619,171 @@ var VertexControlLinkSessionDemo = function () {
         React.createElement(DisplayBoxStage, { containerRef: containerRef, stageStyle: gridStageStyle })));
 };
 
-var wrapSimpleDemo = function (demo) { return function () { return React.createElement(SimpleDemo, { demo: demo }); }; };
-var demoTabs = [
-    {
-        id: basicDemoConfig.id,
-        title: basicDemoConfig.title,
-        description: basicDemoConfig.description,
-        Component: wrapSimpleDemo(basicDemoConfig),
-    },
-    {
-        id: linkPortCreationDemoConfig.id,
-        title: linkPortCreationDemoConfig.title,
-        description: linkPortCreationDemoConfig.description,
-        Component: wrapSimpleDemo(linkPortCreationDemoConfig),
-    },
-    {
-        id: nestedDemoConfig.id,
-        title: nestedDemoConfig.title,
-        description: nestedDemoConfig.description,
-        Component: wrapSimpleDemo(nestedDemoConfig),
-    },
-    {
-        id: customDemoConfig.id,
-        title: customDemoConfig.title,
-        description: customDemoConfig.description,
-        Component: wrapSimpleDemo(customDemoConfig),
-    },
-    {
-        id: textDemoConfig.id,
-        title: textDemoConfig.title,
-        description: textDemoConfig.description,
-        Component: TextLayoutDemo,
-    },
-    {
-        id: selectionDemoConfig.id,
-        title: selectionDemoConfig.title,
-        description: selectionDemoConfig.description,
-        Component: wrapSimpleDemo(selectionDemoConfig),
-    },
-    {
-        id: elementVisibilitySelectionDemoConfig.id,
-        title: elementVisibilitySelectionDemoConfig.title,
-        description: elementVisibilitySelectionDemoConfig.description,
-        Component: wrapSimpleDemo(elementVisibilitySelectionDemoConfig),
-    },
-    {
-        id: eventHandlersDemoConfig.id,
-        title: eventHandlersDemoConfig.title,
-        description: eventHandlersDemoConfig.description,
-        Component: EventHandlersDemo,
-    },
-    {
-        id: engineEventsDemoConfig.id,
-        title: engineEventsDemoConfig.title,
-        description: engineEventsDemoConfig.description,
-        Component: EngineEventsDemo,
-    },
-    {
-        id: deletionEventsDemoConfig.id,
-        title: deletionEventsDemoConfig.title,
-        description: deletionEventsDemoConfig.description,
-        Component: DeletionEventsDemo,
-    },
-    {
-        id: autoLayoutDemoConfig.id,
-        title: autoLayoutDemoConfig.title,
-        description: autoLayoutDemoConfig.description,
-        Component: AutoLayoutDemo,
-    },
-    {
-        id: linkCancelDemoConfig.id,
-        title: linkCancelDemoConfig.title,
-        description: linkCancelDemoConfig.description,
-        Component: LinkCancelDemo,
-    },
-    {
-        id: externalDragDropDemoConfig.id,
-        title: externalDragDropDemoConfig.title,
-        description: externalDragDropDemoConfig.description,
-        Component: ExternalDragDropDemo,
-    },
-    {
-        id: shapeGalleryDemoConfig.id,
-        title: shapeGalleryDemoConfig.title,
-        description: shapeGalleryDemoConfig.description,
-        Component: wrapSimpleDemo(shapeGalleryDemoConfig),
-    },
-    {
-        id: roundedRectRadiusDemoConfig.id,
-        title: roundedRectRadiusDemoConfig.title,
-        description: roundedRectRadiusDemoConfig.description,
-        Component: wrapSimpleDemo(roundedRectRadiusDemoConfig),
-    },
-    {
-        id: rotatedCreationDemoConfig.id,
-        title: rotatedCreationDemoConfig.title,
-        description: rotatedCreationDemoConfig.description,
-        Component: wrapSimpleDemo(rotatedCreationDemoConfig),
-    },
-    {
-        id: svgPathDemoConfig.id,
-        title: svgPathDemoConfig.title,
-        description: svgPathDemoConfig.description,
-        Component: SvgPathDemo,
-    },
-    {
-        id: asymmetricPortMultiAnchorDemoConfig.id,
-        title: asymmetricPortMultiAnchorDemoConfig.title,
-        description: asymmetricPortMultiAnchorDemoConfig.description,
-        Component: AsymmetricPortMultiAnchorDemo,
-    },
-    {
-        id: multiLevelTreeDemoConfig.id,
-        title: multiLevelTreeDemoConfig.title,
-        description: multiLevelTreeDemoConfig.description,
-        Component: wrapSimpleDemo(multiLevelTreeDemoConfig),
-    },
-    {
-        id: multipleElementsDemoConfig.id,
-        title: multipleElementsDemoConfig.title,
-        description: multipleElementsDemoConfig.description,
-        Component: wrapSimpleDemo(multipleElementsDemoConfig),
-    },
-    {
-        id: portConstraintsDemoConfig.id,
-        title: portConstraintsDemoConfig.title,
-        description: portConstraintsDemoConfig.description,
-        Component: wrapSimpleDemo(portConstraintsDemoConfig),
-    },
-    {
-        id: portPositionLimitsDemoConfig.id,
-        title: portPositionLimitsDemoConfig.title,
-        description: portPositionLimitsDemoConfig.description,
-        Component: wrapSimpleDemo(portPositionLimitsDemoConfig),
-    },
-    {
-        id: labelStyleDemoConfig.id,
-        title: labelStyleDemoConfig.title,
-        description: labelStyleDemoConfig.description,
-        Component: wrapSimpleDemo(labelStyleDemoConfig),
-    },
-    {
-        id: linkColorPoolDemoConfig.id,
-        title: linkColorPoolDemoConfig.title,
-        description: linkColorPoolDemoConfig.description,
-        Component: LinkColorPoolDemo,
-    },
-    {
-        id: portBorderDemoConfig.id,
-        title: portBorderDemoConfig.title,
-        description: portBorderDemoConfig.description,
-        Component: wrapSimpleDemo(portBorderDemoConfig),
-    },
-    {
-        id: shapeBorderMovementDemoConfig.id,
-        title: shapeBorderMovementDemoConfig.title,
-        description: shapeBorderMovementDemoConfig.description,
-        Component: wrapSimpleDemo(shapeBorderMovementDemoConfig),
-    },
-    {
-        id: shapeHoverControlsDemoConfig.id,
-        title: shapeHoverControlsDemoConfig.title,
-        description: shapeHoverControlsDemoConfig.description,
-        Component: ShapeHoverControlsDemo,
-    },
-    {
-        id: vertexControlLinkSessionDemoConfig.id,
-        title: vertexControlLinkSessionDemoConfig.title,
-        description: vertexControlLinkSessionDemoConfig.description,
-        Component: VertexControlLinkSessionDemo,
-    },
-    {
-        id: childConstraintsDemoConfig.id,
-        title: childConstraintsDemoConfig.title,
-        description: childConstraintsDemoConfig.description,
-        Component: wrapSimpleDemo(childConstraintsDemoConfig),
-    },
-    {
-        id: gridOverlayDemoConfig.id,
-        title: gridOverlayDemoConfig.title,
-        description: gridOverlayDemoConfig.description,
-        Component: wrapSimpleDemo(gridOverlayDemoConfig),
-    },
-    {
-        id: routingDemoConfig.id,
-        title: routingDemoConfig.title,
-        description: routingDemoConfig.description,
-        Component: wrapSimpleDemo(routingDemoConfig),
-    },
-    {
-        id: obstacleRoutingDemoConfig.id,
-        title: obstacleRoutingDemoConfig.title,
-        description: obstacleRoutingDemoConfig.description,
-        Component: ObstacleRoutingDemo,
+var createFocusElementState = function () { return ({
+    elements: [
+        {
+            id: 'focus-left',
+            position: { x: 40, y: 80 },
+            size: { width: 140, height: 90 },
+            shapeId: 'default',
+            style: { fill: '#e0f2fe', stroke: '#0369a1', strokeWidth: 2 },
+        },
+        {
+            id: 'focus-right',
+            position: { x: 820, y: 120 },
+            size: { width: 180, height: 110 },
+            shapeId: 'panel',
+            style: { fill: '#fef3c7', stroke: '#b45309', strokeWidth: 2 },
+        },
+        {
+            id: 'focus-parent',
+            position: { x: 520, y: 420 },
+            size: { width: 220, height: 160 },
+            shapeId: 'default',
+            style: { fill: '#ecfccb', stroke: '#4d7c0f', strokeWidth: 2 },
+        },
+        {
+            id: 'focus-child',
+            parentId: 'focus-parent',
+            position: { x: 110, y: 60 },
+            size: { width: 70, height: 50 },
+            shapeId: 'default',
+            anchorCenter: true,
+            style: { fill: '#dcfce7', stroke: '#15803d', strokeWidth: 2 },
+        },
+    ],
+    ports: [],
+    links: [],
+    texts: [
+        {
+            id: 'focus-copy',
+            content: 'Compare explicit element focus against zoom-to-fit.',
+            position: { x: 40, y: 26 },
+        },
+    ],
+}); };
+var focusLeftAction = {
+    id: 'focus-left-default',
+    label: 'Focus Left (Keep Zoom)',
+    run: function (editor) {
+        editor.focusElement('focus-left');
     },
-    {
-        id: offsetAnchorAvoidanceDemoConfig.id,
-        title: offsetAnchorAvoidanceDemoConfig.title,
-        description: offsetAnchorAvoidanceDemoConfig.description,
-        Component: OffsetAnchorAvoidanceDemo,
+};
+var focusRightZoomAction = {
+    id: 'focus-right-zoom',
+    label: 'Focus Right (Zoom 2.2)',
+    run: function (editor) {
+        editor.focusElement('focus-right', { zoom: 2.2 });
     },
-    {
-        id: zoomToFitElementsDemoConfig.id,
-        title: zoomToFitElementsDemoConfig.title,
-        description: zoomToFitElementsDemoConfig.description,
-        Component: ZoomToFitElementsDemo,
+};
+var focusChildZoomAction = {
+    id: 'focus-child-zoom',
+    label: 'Focus Nested Child (Zoom 1.8)',
+    run: function (editor) {
+        editor.focusElement('focus-child', { zoom: 1.8 });
     },
-    {
-        id: linkBendHandlesDemoConfig.id,
-        title: linkBendHandlesDemoConfig.title,
-        description: linkBendHandlesDemoConfig.description,
-        Component: wrapSimpleDemo(linkBendHandlesDemoConfig),
+};
+var fitAllAction = {
+    id: 'focus-fit-all',
+    label: 'Zoom-To-Fit For Comparison',
+    run: function (editor) {
+        editor.zoomToFitElements({ padding: 40 });
     },
-];
+};
+var focusElementDemoConfig = {
+    id: 'focus-element',
+    title: 'Focus Element',
+    description: 'Centers one explicit element, optionally with a chosen zoom, unlike zoom-to-fit which frames the whole scene.',
+    createState: createFocusElementState,
+    elementShapes: baseElementShapes,
+    portShapes: basePortShapes,
+    defaultElementShapeId: 'default',
+    defaultPortShapeId: 'port-circle',
+    actions: [focusLeftAction, focusRightZoomAction, focusChildZoomAction, fitAllAction],
+};
+
+var wrapSimpleDemo = function (demo) { return function () { return React.createElement(SimpleDemo, { demo: demo }); }; };
+var menuGroupOrder = {
+    basics: 1,
+    layoutText: 2,
+    shapes: 3,
+    portsAnchors: 4,
+    linksRouting: 5,
+    eventsIntegration: 6,
+};
+var registerDemo = function (demo, Component, menuGroup, menuOrder) { return ({
+    demo: demo,
+    Component: Component,
+    menuGroup: menuGroup,
+    menuOrder: menuOrder,
+}); };
+var toDemoDefinition = function (_a) {
+    var demo = _a.demo, Component = _a.Component, menuGroup = _a.menuGroup, menuOrder = _a.menuOrder;
+    return ({
+        id: demo.id,
+        title: demo.title,
+        description: demo.description,
+        Component: Component,
+        menuGroup: menuGroup,
+        menuOrder: menuOrder,
+    });
+};
+var compareDemoDefinitions = function (left, right) {
+    return menuGroupOrder[left.menuGroup] - menuGroupOrder[right.menuGroup]
+        || left.menuOrder - right.menuOrder
+        || left.title.localeCompare(right.title);
+};
+var basics = [
+    registerDemo(basicDemoConfig, wrapSimpleDemo(basicDemoConfig), 'basics', 1),
+    registerDemo(multipleElementsDemoConfig, wrapSimpleDemo(multipleElementsDemoConfig), 'basics', 2),
+    registerDemo(nestedDemoConfig, wrapSimpleDemo(nestedDemoConfig), 'basics', 3),
+    registerDemo(selectionDemoConfig, wrapSimpleDemo(selectionDemoConfig), 'basics', 4),
+    registerDemo(elementVisibilitySelectionDemoConfig, wrapSimpleDemo(elementVisibilitySelectionDemoConfig), 'basics', 5),
+    registerDemo(zoomToFitElementsDemoConfig, ZoomToFitElementsDemo, 'basics', 6),
+    registerDemo(focusElementDemoConfig, wrapSimpleDemo(focusElementDemoConfig), 'basics', 7),
+];
+var layoutAndText = [
+    registerDemo(textDemoConfig, TextLayoutDemo, 'layoutText', 1),
+    registerDemo(labelStyleDemoConfig, wrapSimpleDemo(labelStyleDemoConfig), 'layoutText', 2),
+    registerDemo(autoLayoutDemoConfig, AutoLayoutDemo, 'layoutText', 3),
+    registerDemo(multiLevelTreeDemoConfig, wrapSimpleDemo(multiLevelTreeDemoConfig), 'layoutText', 4),
+    registerDemo(childConstraintsDemoConfig, wrapSimpleDemo(childConstraintsDemoConfig), 'layoutText', 5),
+    registerDemo(gridOverlayDemoConfig, wrapSimpleDemo(gridOverlayDemoConfig), 'layoutText', 6),
+];
+var shapes = [
+    registerDemo(customDemoConfig, wrapSimpleDemo(customDemoConfig), 'shapes', 1),
+    registerDemo(shapeGalleryDemoConfig, wrapSimpleDemo(shapeGalleryDemoConfig), 'shapes', 2),
+    registerDemo(roundedRectRadiusDemoConfig, wrapSimpleDemo(roundedRectRadiusDemoConfig), 'shapes', 3),
+    registerDemo(rotatedCreationDemoConfig, wrapSimpleDemo(rotatedCreationDemoConfig), 'shapes', 4),
+    registerDemo(svgPathDemoConfig, SvgPathDemo, 'shapes', 5),
+    registerDemo(shapeBorderMovementDemoConfig, wrapSimpleDemo(shapeBorderMovementDemoConfig), 'shapes', 6),
+    registerDemo(shapeHoverControlsDemoConfig, ShapeHoverControlsDemo, 'shapes', 7),
+];
+var portsAndAnchors = [
+    registerDemo(linkPortCreationDemoConfig, LinkPortCreationDemo, 'portsAnchors', 1),
+    registerDemo(portConstraintsDemoConfig, wrapSimpleDemo(portConstraintsDemoConfig), 'portsAnchors', 2),
+    registerDemo(portPositionLimitsDemoConfig, wrapSimpleDemo(portPositionLimitsDemoConfig), 'portsAnchors', 3),
+    registerDemo(portBorderDemoConfig, wrapSimpleDemo(portBorderDemoConfig), 'portsAnchors', 4),
+    registerDemo(asymmetricPortMultiAnchorDemoConfig, AsymmetricPortMultiAnchorDemo, 'portsAnchors', 5),
+];
+var linksAndRouting = [
+    registerDemo(linkCancelDemoConfig, LinkCancelDemo, 'linksRouting', 1),
+    registerDemo(linkBendHandlesDemoConfig, wrapSimpleDemo(linkBendHandlesDemoConfig), 'linksRouting', 2),
+    registerDemo(linkLabelsDemoConfig, wrapSimpleDemo(linkLabelsDemoConfig), 'linksRouting', 3),
+    registerDemo(linkColorPoolDemoConfig, LinkColorPoolDemo, 'linksRouting', 4),
+    registerDemo(routingDemoConfig, wrapSimpleDemo(routingDemoConfig), 'linksRouting', 5),
+    registerDemo(obstacleRoutingDemoConfig, ObstacleRoutingDemo, 'linksRouting', 6),
+    registerDemo(offsetAnchorAvoidanceDemoConfig, OffsetAnchorAvoidanceDemo, 'linksRouting', 7),
+    registerDemo(vertexControlLinkSessionDemoConfig, VertexControlLinkSessionDemo, 'linksRouting', 8),
+];
+var eventsAndIntegration = [
+    registerDemo(eventHandlersDemoConfig, EventHandlersDemo, 'eventsIntegration', 1),
+    registerDemo(engineEventsDemoConfig, EngineEventsDemo, 'eventsIntegration', 2),
+    registerDemo(deletionEventsDemoConfig, DeletionEventsDemo, 'eventsIntegration', 3),
+    registerDemo(externalDragDropDemoConfig, ExternalDragDropDemo, 'eventsIntegration', 4),
+];
+var demoTabs = __spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray([], basics, true), layoutAndText, true), shapes, true), portsAndAnchors, true), linksAndRouting, true), eventsAndIntegration, true).map(toDemoDefinition)
+    .sort(compareDemoDefinitions);
 
 exports.baseElementShapes = baseElementShapes;
 exports.basePortShapes = basePortShapes;