orcasvn-react-diagrams 0.2.11 → 0.2.12

package/dist/cjs/index.js

@@ -1881,21 +1881,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,
@@ -1915,6 +1914,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)) {
@@ -4156,6 +4163,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);
@@ -6551,6 +6576,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);
@@ -6567,6 +6593,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;
@@ -6583,6 +6612,7 @@ var KonvaInteraction = /** @class */ (function () {
             this.programmaticLinkSession = {
                 sourcePortId: sourcePortId,
                 sourceElementId: sourceElementId,
+                sourcePort: this.clonePortData(sourcePort),
                 start: start,
                 current: start,
             };
@@ -6592,6 +6622,7 @@ var KonvaInteraction = /** @class */ (function () {
                 mode: 'link-drag',
                 sourcePortId: sourcePortId,
                 sourceElementId: sourceElementId,
+                sourcePort: this.clonePortData(sourcePort),
                 start: start,
                 current: start,
                 isMulti: false,
@@ -6607,7 +6638,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);
         }
@@ -6619,28 +6650,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;
@@ -6802,10 +6834,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,
@@ -6987,7 +7023,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) {
@@ -8662,7 +8698,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 };
         }
@@ -8678,7 +8715,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,
@@ -8688,61 +8728,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; });
     };
@@ -9859,6 +9977,7 @@ var createDiagramEditor = function (config) {
         shapeHoverControls: config.elementShapeHoverControls,
         onShapeHoverControlInteracted: config.onElementShapeHoverControlInteraction,
         onShapeHoverControlActivated: config.onElementShapeHoverControlActivated,
+        onCreateLinkTargetPort: config.onCreateLinkTargetPort,
     });
     interaction.bind();
     if (config.initialState) {

package/dist/cjs/types/api/createDiagramEditor.d.ts

@@ -1,4 +1,4 @@
-import { DiagramEngineHandle, Point, DiagramState, ElementShapeHoverControlActivationEvent, ElementShapeHoverControlInteractionEvent, ElementShapeHoverControls, EngineChangeEvent, EngineSelectionEvent, LinkColorPoolPolicy, LinkRouteRefreshPolicy, ViewportFitOptions } from './types';
+import { DiagramEngineHandle, Point, DiagramState, ElementShapeHoverControlActivationEvent, ElementShapeHoverControlInteractionEvent, ElementShapeHoverControls, EngineChangeEvent, EngineSelectionEvent, LinkTargetPortCreationHandler, LinkColorPoolPolicy, LinkRouteRefreshPolicy, ViewportFitOptions } from './types';
 import { type BuiltInShapeKind } from '../shapes';
 export type SimpleShape = {
     id: string;
@@ -16,6 +16,7 @@ export type DiagramEditorConfig = {
     elementShapeHoverControls?: ElementShapeHoverControls;
     onElementShapeHoverControlInteraction?: (event: ElementShapeHoverControlInteractionEvent) => void;
     onElementShapeHoverControlActivated?: (event: ElementShapeHoverControlActivationEvent) => void;
+    onCreateLinkTargetPort?: LinkTargetPortCreationHandler;
     onChange?: (event: EngineChangeEvent) => void;
     onSelection?: (event: EngineSelectionEvent) => void;
     linkRouteRefreshPolicy?: LinkRouteRefreshPolicy;

package/dist/cjs/types/api/types.d.ts

@@ -297,6 +297,20 @@ export type PortData = {
     rotationPivot?: Point;
     currentAnchorId?: string;
 };
+export type LinkTargetPortCreationPhase = 'preview' | 'commit';
+export type LinkTargetPortDraft = Omit<PortData, 'id' | 'elementId'>;
+export type LinkTargetPortCreationContext = {
+    phase: LinkTargetPortCreationPhase;
+    pointer: Point;
+    sourcePortId: string;
+    sourceElementId: string;
+    targetElementId: string;
+    sourcePort: PortData;
+    targetElement: ElementData;
+    defaultPort: LinkTargetPortDraft;
+};
+export type LinkTargetPortCreationResult = Partial<LinkTargetPortDraft> | void;
+export type LinkTargetPortCreationHandler = (context: LinkTargetPortCreationContext) => LinkTargetPortCreationResult;
 export type ShapeDrawContext = {
     ctx: CanvasRenderingContext2D;
     model: ElementData | PortData;

package/dist/cjs/types/displaybox/demos/LinkPortCreationDemoTab.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const LinkPortCreationDemo: () => React.JSX.Element;
+export default LinkPortCreationDemo;

package/dist/cjs/types/displaybox/demos/linkLabelsDemo.d.ts

@@ -0,0 +1,4 @@
+import type { DiagramState } from '../../api';
+import type { DemoConfig } from '../types';
+export declare const createLinkLabelsState: () => DiagramState;
+export declare const linkLabelsDemoConfig: DemoConfig;

package/dist/cjs/types/displaybox/types.d.ts

@@ -25,11 +25,14 @@ export type DemoConfig = {
     stageStyle?: CSSProperties;
     actions: DemoAction[];
 };
+export type DemoMenuGroup = 'basics' | 'layoutText' | 'shapes' | 'portsAnchors' | 'linksRouting' | 'eventsIntegration';
 export type DemoDefinition = {
     id: string;
     title: string;
     description: string;
     Component: React.ComponentType;
+    menuGroup: DemoMenuGroup;
+    menuOrder: number;
 };
 export type ToolboxItem = {
     id: string;

package/dist/cjs/types/displaybox/useDemoEditor.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { DiagramEditorHandle, DiagramState, ElementShapeHoverControlActivationEvent, ElementShapeHoverControlInteractionEvent, ElementShapeHoverControls, LinkColorPoolPolicy, LinkRouteRefreshPolicy, SimpleShape } from '../api';
+import type { DiagramEditorHandle, DiagramState, ElementShapeHoverControlActivationEvent, ElementShapeHoverControlInteractionEvent, ElementShapeHoverControls, LinkColorPoolPolicy, LinkTargetPortCreationHandler, LinkRouteRefreshPolicy, SimpleShape } from '../api';
 import type { RouterStrategy } from '../strategies/RouterStrategy';
 import type { ViewportSnapshot } from './types';
 type DemoEditorConfig = {
@@ -13,8 +13,9 @@ type DemoEditorConfig = {
     elementShapeHoverControls?: ElementShapeHoverControls;
     onElementShapeHoverControlInteraction?: (event: ElementShapeHoverControlInteractionEvent) => void;
     onElementShapeHoverControlActivated?: (event: ElementShapeHoverControlActivationEvent) => void;
+    onCreateLinkTargetPort?: LinkTargetPortCreationHandler;
 };
-declare const useDemoEditor: ({ createState, elementShapes, portShapes, router, snapDefault, linkRouteRefreshPolicy, linkColorPoolPolicy, elementShapeHoverControls, onElementShapeHoverControlInteraction, onElementShapeHoverControlActivated, }: DemoEditorConfig) => {
+declare const useDemoEditor: ({ createState, elementShapes, portShapes, router, snapDefault, linkRouteRefreshPolicy, linkColorPoolPolicy, elementShapeHoverControls, onElementShapeHoverControlInteraction, onElementShapeHoverControlActivated, onCreateLinkTargetPort, }: DemoEditorConfig) => {
     containerRef: import("react").MutableRefObject<HTMLDivElement | null>;
     editorRef: import("react").MutableRefObject<DiagramEditorHandle | null>;
     diagramState: DiagramState | null;

package/dist/cjs/types/engine/DiagramEngine.d.ts

@@ -1,4 +1,4 @@
-import { DiagramEngineHandle, DiagramState, ElementData, EngineEventMap, ElementDropEvent, EnginePointerInfo, LinkData, LinkColorPoolPolicy, ElementLinkConnectingEvent, LinkRoutingMode, LinkRouteRefreshPolicy, OverlayShapeConfig, OverlayShapeHandle, Point, PortData, RerouteLinksOptions, TextData, PortMouseEvent } from '../api/types';
+import { DiagramEngineHandle, DiagramState, ElementData, EngineEventMap, ElementDropEvent, EnginePointerInfo, LinkData, LinkColorPoolPolicy, ElementLinkConnectingEvent, LinkRoutingMode, LinkRouteRefreshPolicy, LinkTargetPortDraft, OverlayShapeConfig, OverlayShapeHandle, Point, PortData, RerouteLinksOptions, TextData, PortMouseEvent } from '../api/types';
 import { Renderer } from '../renderer/Renderer';
 import RenderScheduler from '../renderer/RenderScheduler';
 import { RouterStrategy } from '../strategies/RouterStrategy';
@@ -61,6 +61,7 @@ export default class DiagramEngine {
     setElementLayout(id: string, layout: ElementData['layout']): void;
     removeElement(id: string): void;
     addPortToElement(elementId: string, port: PortData): void;
+    normalizePortDraftForElement(elementId: string, draft: LinkTargetPortDraft): LinkTargetPortDraft | null;
     movePortTo(id: string, x: number, y: number): void;
     removePort(id: string): void;
     addLink(link: LinkData): void;

package/dist/cjs/types/engine/TextLayoutService.d.ts

@@ -29,6 +29,7 @@ export default class TextLayoutService {
     private collectResizedElementIds;
     private shouldTrackOwnerBoundLayout;
     private resolveTextLayoutBounds;
+    private resolveDefaultBoundsMode;
     private wrapText;
     private wrapByWord;
     private wrapByChar;

package/dist/cjs/types/examples/index.d.ts

@@ -1,2 +1,2 @@
 export { demoTabs, baseElementShapes, basePortShapes, customGalleryShapes, defaultGhostSize, defaultSvgPath, defaultSvgPathSize, externalToolboxItems, } from '../displaybox/demos';
-export type { DemoAction, DemoActionHelpers, DemoConfig, DemoDefinition, ToolboxItem, DiagramCounts, ViewportSnapshot, DisplayBoxMetrics, } from '../displaybox/types';
+export type { DemoAction, DemoActionHelpers, DemoConfig, DemoDefinition, DemoMenuGroup, ToolboxItem, DiagramCounts, ViewportSnapshot, DisplayBoxMetrics, } from '../displaybox/types';

package/dist/cjs/types/renderer/konva/KonvaInteraction.d.ts

@@ -1,4 +1,4 @@
-import { ElementShapeHoverControlActivationEvent, ElementShapeHoverControlInteractionEvent, ElementShapeHoverControls, Point, PortData } from '../../api/types';
+import { ElementShapeHoverControlActivationEvent, ElementShapeHoverControlInteractionEvent, ElementShapeHoverControls, LinkTargetPortCreationHandler, Point, PortData } from '../../api/types';
 import DiagramEngine from '../../engine/DiagramEngine';
 import KonvaHitTester from './KonvaHitTester';
 import { KonvaStageLike, ShapeHoverControlRenderConfig } from './KonvaRenderer';
@@ -11,6 +11,7 @@ export type InteractionConfig = {
     shapeHoverControls?: ElementShapeHoverControls;
     onShapeHoverControlInteracted?: (event: ElementShapeHoverControlInteractionEvent) => void;
     onShapeHoverControlActivated?: (event: ElementShapeHoverControlActivationEvent) => void;
+    onCreateLinkTargetPort?: LinkTargetPortCreationHandler;
     renderer?: {
         renderResizeHandles: (elementId: string, position: Point, size: {
             width: number;
@@ -55,6 +56,7 @@ export default class KonvaInteraction {
     private shapeHoverControls?;
     private onShapeHoverControlInteracted?;
     private onShapeHoverControlActivated?;
+    private onCreateLinkTargetPort?;
     private linkDragContext;
     private programmaticLinkSession;
     private bound;
@@ -142,6 +144,13 @@ export default class KonvaInteraction {
     private tryCreateLinkToElement;
     private createPortForLink;
     private createPlaceholderPort;
+    private resolveLinkTargetPortDraft;
+    private buildDefaultLinkTargetPortDraft;
+    private mergeLinkTargetPortDraft;
+    private resolveLinkSourcePort;
+    private clonePortData;
+    private cloneLinkTargetPortDraft;
+    private cloneElementData;
     private getElementById;
     private getPortById;
     private getTextById;