orcasvn-react-diagrams 0.2.11 → 0.2.12

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: [
         {
@@ -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)) {
@@ -8425,6 +8589,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);
@@ -10774,6 +10956,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 +10973,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 +10992,7 @@ var KonvaInteraction = /** @class */ (function () {
             this.programmaticLinkSession = {
                 sourcePortId: sourcePortId,
                 sourceElementId: sourceElementId,
+                sourcePort: this.clonePortData(sourcePort),
                 start: start,
                 current: start,
             };
@@ -10815,6 +11002,7 @@ var KonvaInteraction = /** @class */ (function () {
                 mode: 'link-drag',
                 sourcePortId: sourcePortId,
                 sourceElementId: sourceElementId,
+                sourcePort: this.clonePortData(sourcePort),
                 start: start,
                 current: start,
                 isMulti: false,
@@ -10830,7 +11018,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 +11030,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 +11214,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 +11403,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) {
@@ -12885,7 +13078,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 +13095,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 +13108,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; });
     };
@@ -14082,6 +14357,7 @@ var createDiagramEditor = function (config) {
         shapeHoverControls: config.elementShapeHoverControls,
         onShapeHoverControlInteracted: config.onElementShapeHoverControlInteraction,
         onShapeHoverControlActivated: config.onElementShapeHoverControlActivated,
+        onCreateLinkTargetPort: config.onCreateLinkTargetPort,
     });
     interaction.bind();
     if (config.initialState) {
@@ -14181,7 +14457,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 +14504,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 +14552,7 @@ var useDemoEditor = function (_a) {
         elementShapeHoverControls,
         onElementShapeHoverControlInteraction,
         onElementShapeHoverControlActivated,
+        onCreateLinkTargetPort,
     ]);
     return {
         containerRef: containerRef,
@@ -14622,6 +14900,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' },
@@ -16987,218 +17325,86 @@ var VertexControlLinkSessionDemo = function () {
 };
 
 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,
-    },
-    {
-        id: offsetAnchorAvoidanceDemoConfig.id,
-        title: offsetAnchorAvoidanceDemoConfig.title,
-        description: offsetAnchorAvoidanceDemoConfig.description,
-        Component: OffsetAnchorAvoidanceDemo,
-    },
-    {
-        id: zoomToFitElementsDemoConfig.id,
-        title: zoomToFitElementsDemoConfig.title,
-        description: zoomToFitElementsDemoConfig.description,
-        Component: ZoomToFitElementsDemo,
-    },
-    {
-        id: linkBendHandlesDemoConfig.id,
-        title: linkBendHandlesDemoConfig.title,
-        description: linkBendHandlesDemoConfig.description,
-        Component: wrapSimpleDemo(linkBendHandlesDemoConfig),
-    },
-];
+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),
+];
+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;