orcasvn-react-diagrams 0.2.3 → 0.2.4

package/dist/esm/examples.js

@@ -1971,6 +1971,213 @@ var portConstraintsDemoConfig = ({
     ],
 });
 
+var createPortPositionLimitsState = function () { return ({
+    elements: [
+        {
+            id: 'limit-left-host',
+            position: { x: 60, y: 120 },
+            size: { width: 220, height: 140 },
+            shapeId: 'panel',
+            portMovement: {
+                moveMode: 'inside',
+                positionLimits: {
+                    x: { max: 70 },
+                },
+            },
+        },
+        {
+            id: 'limit-right-host',
+            position: { x: 330, y: 120 },
+            size: { width: 220, height: 140 },
+            shapeId: 'panel',
+            portMovement: {
+                moveMode: 'inside',
+                positionLimits: {
+                    x: { min: 150 },
+                },
+            },
+        },
+        {
+            id: 'limit-top-host',
+            position: { x: 600, y: 120 },
+            size: { width: 220, height: 140 },
+            shapeId: 'panel',
+            portMovement: {
+                moveMode: 'inside',
+                positionLimits: {
+                    y: { max: 45 },
+                },
+            },
+        },
+        {
+            id: 'limit-bottom-host',
+            position: { x: 870, y: 120 },
+            size: { width: 220, height: 140 },
+            shapeId: 'panel',
+            portMovement: {
+                moveMode: 'inside',
+                positionLimits: {
+                    y: { min: 90 },
+                },
+            },
+        },
+        {
+            id: 'border-left-host',
+            position: { x: 200, y: 350 },
+            size: { width: 220, height: 140 },
+            shapeId: 'panel',
+            portMovement: {
+                moveMode: 'border',
+                positionLimits: {
+                    x: { max: 80 },
+                },
+            },
+        },
+        {
+            id: 'border-right-host',
+            position: { x: 500, y: 350 },
+            size: { width: 220, height: 140 },
+            shapeId: 'panel',
+            portMovement: {
+                moveMode: 'border',
+                positionLimits: {
+                    x: { min: 140 },
+                },
+            },
+        },
+        {
+            id: 'default-normalize-host',
+            position: { x: 800, y: 350 },
+            size: { width: 220, height: 140 },
+            shapeId: 'panel',
+            portMovement: {
+                moveMode: 'inside',
+                positionLimits: {
+                    x: { max: 60 },
+                    y: { max: 60 },
+                },
+            },
+        },
+    ],
+    ports: [
+        { id: 'limit-left-port', elementId: 'limit-left-host', position: { x: 40, y: 70 }, shapeId: 'port-circle', anchorCenter: true },
+        { id: 'limit-right-port', elementId: 'limit-right-host', position: { x: 180, y: 70 }, shapeId: 'port-circle', anchorCenter: true },
+        { id: 'limit-top-port', elementId: 'limit-top-host', position: { x: 110, y: 30 }, shapeId: 'port-circle', anchorCenter: true },
+        { id: 'limit-bottom-port', elementId: 'limit-bottom-host', position: { x: 110, y: 110 }, shapeId: 'port-circle', anchorCenter: true },
+        { id: 'border-left-port', elementId: 'border-left-host', position: { x: 80, y: 0 }, shapeId: 'port-circle', anchorCenter: true },
+        { id: 'border-right-port', elementId: 'border-right-host', position: { x: 140, y: 140 }, shapeId: 'port-circle', anchorCenter: true },
+        { id: 'reload-default-port', elementId: 'default-normalize-host', position: { x: 190, y: 130 }, shapeId: 'port-circle', anchorCenter: true },
+    ],
+    links: [],
+    texts: [
+        {
+            id: 'limit-intro',
+            content: 'Top row: threshold/limit hosts. Bottom row: border+limits hosts and default-position normalization checks for add/load flows.',
+            position: { x: 60, y: 40 },
+        },
+        { id: 'limit-group-title', content: 'Threshold/limit-focused hosts', position: { x: 60, y: 85 } },
+        { id: 'border-group-title', content: 'Border+limits + default-position normalization', position: { x: 200, y: 315 } },
+        { id: 'limit-left-title', content: 'x.max = 70 (left of X)', position: { x: 8, y: -20 }, ownerId: 'limit-left-host' },
+        { id: 'limit-right-title', content: 'x.min = 150 (right of X)', position: { x: 8, y: -20 }, ownerId: 'limit-right-host' },
+        { id: 'limit-top-title', content: 'y.max = 45 (above Y)', position: { x: 8, y: -20 }, ownerId: 'limit-top-host' },
+        { id: 'limit-bottom-title', content: 'y.min = 90 (below Y)', position: { x: 8, y: -20 }, ownerId: 'limit-bottom-host' },
+        { id: 'border-left-title', content: 'moveMode=border + x.max = 80', position: { x: 8, y: -20 }, ownerId: 'border-left-host' },
+        { id: 'border-right-title', content: 'moveMode=border + x.min = 140', position: { x: 8, y: -20 }, ownerId: 'border-right-host' },
+        { id: 'default-normalize-title', content: 'default normalization host x/y.max = 60', position: { x: 8, y: -20 }, ownerId: 'default-normalize-host' },
+        { id: 'limit-left-status', content: 'local: x=40, y=70', position: { x: 8, y: 110 }, ownerId: 'limit-left-host' },
+        { id: 'limit-right-status', content: 'local: x=180, y=70', position: { x: 8, y: 110 }, ownerId: 'limit-right-host' },
+        { id: 'limit-top-status', content: 'local: x=110, y=30', position: { x: 8, y: 110 }, ownerId: 'limit-top-host' },
+        { id: 'limit-bottom-status', content: 'local: x=110, y=110', position: { x: 8, y: 110 }, ownerId: 'limit-bottom-host' },
+        { id: 'border-left-status', content: 'local: x=80, y=0', position: { x: 8, y: 110 }, ownerId: 'border-left-host' },
+        { id: 'border-right-status', content: 'local: x=140, y=140', position: { x: 8, y: 110 }, ownerId: 'border-right-host' },
+        {
+            id: 'add-default-status',
+            content: 'add invalid default: not executed',
+            position: { x: 8, y: 88 },
+            ownerId: 'default-normalize-host',
+        },
+        {
+            id: 'reload-default-status',
+            content: 'reload invalid default: click "Read reload-normalized port"',
+            position: { x: 8, y: 106 },
+            ownerId: 'default-normalize-host',
+        },
+    ],
+}); };
+var portPositionLimitsDemoConfig = {
+    id: 'port-position-limits',
+    title: 'Port Position Limits',
+    description: 'Unified restriction demo: threshold limits, border+limits, and add/load default-position normalization.',
+    createState: createPortPositionLimitsState,
+    elementShapes: baseElementShapes,
+    portShapes: basePortShapes,
+    defaultElementShapeId: 'default',
+    defaultPortShapeId: 'port-circle',
+    actions: [
+        {
+            id: 'force-limit-clamp',
+            label: 'Force out-of-range moves',
+            run: function (editor) {
+                editor.movePortTo('limit-left-port', 1000, 1000);
+                editor.movePortTo('limit-right-port', -1000, 1000);
+                editor.movePortTo('limit-top-port', 1000, 1000);
+                editor.movePortTo('limit-bottom-port', 1000, -1000);
+                editor.movePortTo('border-left-port', 1000, 1000);
+                editor.movePortTo('border-right-port', -1000, -1000);
+                var state = editor.getState();
+                var left = state.ports.find(function (item) { return item.id === 'limit-left-port'; });
+                var right = state.ports.find(function (item) { return item.id === 'limit-right-port'; });
+                var top = state.ports.find(function (item) { return item.id === 'limit-top-port'; });
+                var bottom = state.ports.find(function (item) { return item.id === 'limit-bottom-port'; });
+                var borderLeft = state.ports.find(function (item) { return item.id === 'border-left-port'; });
+                var borderRight = state.ports.find(function (item) { return item.id === 'border-right-port'; });
+                if (left)
+                    editor.updateText('limit-left-status', "local: x=".concat(left.position.x, ", y=").concat(left.position.y));
+                if (right)
+                    editor.updateText('limit-right-status', "local: x=".concat(right.position.x, ", y=").concat(right.position.y));
+                if (top)
+                    editor.updateText('limit-top-status', "local: x=".concat(top.position.x, ", y=").concat(top.position.y));
+                if (bottom)
+                    editor.updateText('limit-bottom-status', "local: x=".concat(bottom.position.x, ", y=").concat(bottom.position.y));
+                if (borderLeft)
+                    editor.updateText('border-left-status', "local: x=".concat(borderLeft.position.x, ", y=").concat(borderLeft.position.y));
+                if (borderRight)
+                    editor.updateText('border-right-status', "local: x=".concat(borderRight.position.x, ", y=").concat(borderRight.position.y));
+            },
+        },
+        {
+            id: 'add-invalid-default-port',
+            label: 'Add invalid default port',
+            run: function (editor) {
+                editor.removePort('added-default-port');
+                editor.addPortToElement('default-normalize-host', {
+                    id: 'added-default-port',
+                    elementId: 'default-normalize-host',
+                    position: { x: 180, y: 120 },
+                    shapeId: 'port-circle',
+                    anchorCenter: true,
+                });
+                var state = editor.getState();
+                var added = state.ports.find(function (item) { return item.id === 'added-default-port'; });
+                if (added) {
+                    editor.updateText('add-default-status', "add invalid default: local x=".concat(added.position.x, ", y=").concat(added.position.y));
+                }
+            },
+        },
+        {
+            id: 'read-reload-normalized-port',
+            label: 'Read reload-normalized port',
+            run: function (editor) {
+                var state = editor.getState();
+                var reloaded = state.ports.find(function (item) { return item.id === 'reload-default-port'; });
+                if (reloaded) {
+                    editor.updateText('reload-default-status', "reload invalid default: local x=".concat(reloaded.position.x, ", y=").concat(reloaded.position.y));
+                }
+            },
+        },
+    ],
+};
+
 var createPortBorderState = function () { return ({
     elements: [
         {
@@ -2125,6 +2332,104 @@ var childConstraintsDemoConfig = ({
     ],
 });
 
+var createLabelStyleState = function () { return ({
+    elements: [
+        {
+            id: 'label-center-host',
+            position: { x: 80, y: 160 },
+            size: { width: 260, height: 120 },
+            shapeId: 'panel',
+        },
+        {
+            id: 'label-background-host',
+            position: { x: 390, y: 160 },
+            size: { width: 260, height: 120 },
+            shapeId: 'panel',
+            style: {
+                cornerRadius: 16,
+                stroke: '#1f4d99',
+                strokeWidth: 2,
+                fill: '#edf4ff',
+            },
+        },
+        {
+            id: 'label-baseline-host',
+            position: { x: 700, y: 160 },
+            size: { width: 260, height: 120 },
+            shapeId: 'panel',
+        },
+    ],
+    ports: [],
+    links: [],
+    texts: [
+        {
+            id: 'label-style-intro',
+            content: 'Compare center alignment, background fill, and baseline label styling. Resize hosts to verify visual stability.',
+            position: { x: 80, y: 80 },
+        },
+        {
+            id: 'label-center-text',
+            content: 'Center aligned owner-width label',
+            ownerId: 'label-center-host',
+            position: { x: 0, y: 44 },
+            layout: { boundsMode: 'owner-width', wrap: 'none', overflow: 'ellipsis-end', padding: 8 },
+            style: { align: 'center', fill: '#16324f', fontSize: 15 },
+        },
+        {
+            id: 'label-background-text',
+            content: 'Top Header Label',
+            ownerId: 'label-background-host',
+            position: { x: 0, y: 0 },
+            layout: { boundsMode: 'owner-width', wrap: 'none', overflow: 'ellipsis-end', padding: 0 },
+            style: {
+                align: 'center',
+                backgroundFill: '#cfe2ff',
+                backgroundStroke: '#1f4d99',
+                backgroundStrokeWidth: 1,
+                fill: '#16324f',
+                fontSize: 15,
+                padding: 8,
+            },
+        },
+        {
+            id: 'label-baseline-text',
+            content: 'Baseline label (no style keys)',
+            ownerId: 'label-baseline-host',
+            position: { x: 12, y: 44 },
+            layout: { boundsMode: 'owner-width', wrap: 'none', overflow: 'ellipsis-end', padding: 8 },
+        },
+    ],
+}); };
+var labelStyleDemoConfig = {
+    id: 'label-style',
+    title: 'Label Style',
+    description: 'Center text alignment and backgroundFill styling for labels.',
+    createState: createLabelStyleState,
+    elementShapes: baseElementShapes,
+    portShapes: basePortShapes,
+    defaultElementShapeId: 'default',
+    defaultPortShapeId: 'port-circle',
+    actions: [
+        {
+            id: 'resize-label-hosts',
+            label: 'Resize hosts (style verification)',
+            run: function (editor, state) {
+                var _a, _b;
+                var expanded = ((_b = (_a = state.elements.find(function (item) { return item.id === 'label-center-host'; })) === null || _a === void 0 ? void 0 : _a.size.width) !== null && _b !== void 0 ? _b : 0) > 260;
+                if (expanded) {
+                    editor.resizeElement('label-center-host', 260, 120);
+                    editor.resizeElement('label-background-host', 260, 120);
+                    editor.resizeElement('label-baseline-host', 260, 120);
+                    return;
+                }
+                editor.resizeElement('label-center-host', 320, 140);
+                editor.resizeElement('label-background-host', 320, 140);
+                editor.resizeElement('label-baseline-host', 320, 140);
+            },
+        },
+    ],
+};
+
 var createGridOverlayState = function () { return ({
     elements: [
         {
@@ -2226,141 +2531,174 @@ var routingDemoConfig = ({
 
 var obstacleRoutingLinks = [
     {
-        id: 'block-link',
-        sourcePortId: 'block-source-port',
-        targetPortId: 'block-target-port',
+        id: 'sibling-external-link',
+        sourcePortId: 'sibling-a-port',
+        targetPortId: 'sibling-b-port',
         points: [],
         routing: 'auto',
     },
     {
-        id: 'shared-sibling-link',
-        sourcePortId: 'shared-child-a-port',
-        targetPortId: 'shared-child-b-port',
+        id: 'parent-to-child-link',
+        sourcePortId: 'attach-parent-port',
+        targetPortId: 'attach-child-a-port',
         points: [],
         routing: 'auto',
     },
     {
-        id: 'parent-child-link',
-        sourcePortId: 'parent-host-port',
-        targetPortId: 'edge-child-port',
+        id: 'child-to-parent-link',
+        sourcePortId: 'attach-child-b-port',
+        targetPortId: 'attach-parent-port',
         points: [],
         routing: 'auto',
     },
     {
-        id: 'grandchild-link',
-        sourcePortId: 'grandchild-a-port',
-        targetPortId: 'grandchild-b-port',
+        id: 'child-to-child-link',
+        sourcePortId: 'attach-child-a-port',
+        targetPortId: 'attach-child-b-port',
         points: [],
         routing: 'auto',
     },
 ];
+var obstacleRoutingShapes = __spreadArray(__spreadArray([], baseElementShapes, true), [
+    {
+        id: 'routing-ellipse',
+        kind: 'ellipse',
+        style: {
+            fill: '#e8f8ff',
+            stroke: '#1e6b8f',
+            strokeWidth: 2,
+        },
+    },
+], false);
 var createObstacleRoutingState = function () { return ({
     elements: [
         {
-            id: 'block-source',
-            position: { x: 60, y: 40 },
-            size: { width: 140, height: 90 },
-            shapeId: 'default',
+            id: 'sibling-parent',
+            position: { x: 40, y: 90 },
+            size: { width: 540, height: 250 },
+            shapeId: 'panel',
+            style: { fill: '#fafafa' },
         },
         {
-            id: 'block-target',
-            position: { x: 380, y: 40 },
-            size: { width: 140, height: 90 },
-            shapeId: 'panel',
+            id: 'sibling-a',
+            position: { x: 70, y: 75 },
+            size: { width: 140, height: 100 },
+            shapeId: 'routing-ellipse',
+            parentId: 'sibling-parent',
+            portMovement: { moveMode: 'anchors', anchorConstraint: { preset: 'cardinal' } },
         },
         {
-            id: 'block-obstacle',
-            position: { x: 250, y: 30 },
-            size: { width: 80, height: 110 },
-            shapeId: 'default',
+            id: 'sibling-b',
+            position: { x: 310, y: 75 },
+            size: { width: 140, height: 100 },
+            shapeId: 'routing-ellipse',
+            parentId: 'sibling-parent',
+            portMovement: { moveMode: 'anchors', anchorConstraint: { preset: 'cardinal' } },
         },
         {
-            id: 'shared-parent',
-            position: { x: 40, y: 180 },
-            size: { width: 420, height: 220 },
-            shapeId: 'panel',
-            style: { fill: '#fafafa' },
+            id: 'attach-parent',
+            position: { x: 620, y: 90 },
+            size: { width: 360, height: 250 },
+            shapeId: 'routing-ellipse',
+            portMovement: { moveMode: 'anchors', anchorConstraint: { preset: 'cardinal' } },
         },
         {
-            id: 'shared-child-a',
-            position: { x: 40, y: 40 },
-            size: { width: 140, height: 90 },
-            shapeId: 'default',
-            parentId: 'shared-parent',
+            id: 'attach-child',
+            position: { x: 40, y: 45 },
+            size: { width: 140, height: 100 },
+            shapeId: 'routing-ellipse',
+            parentId: 'attach-parent',
+            portMovement: { moveMode: 'anchors', anchorConstraint: { preset: 'cardinal' } },
         },
         {
-            id: 'shared-child-b',
-            position: { x: 220, y: 40 },
-            size: { width: 140, height: 90 },
-            shapeId: 'default',
-            parentId: 'shared-parent',
+            id: 'attach-child-b',
+            position: { x: 190, y: 120 },
+            size: { width: 140, height: 100 },
+            shapeId: 'routing-ellipse',
+            parentId: 'attach-parent',
+            portMovement: { moveMode: 'anchors', anchorConstraint: { preset: 'cardinal' } },
         },
+    ],
+    ports: [
         {
-            id: 'parent-host',
-            position: { x: 500, y: 180 },
-            size: { width: 320, height: 220 },
-            shapeId: 'panel',
-            style: { fill: '#fafafa' },
+            id: 'sibling-a-port',
+            elementId: 'sibling-a',
+            position: { x: 0, y: 50 },
+            shapeId: 'port-dark',
+            anchorCenter: true,
+            currentAnchorId: 'left',
         },
         {
-            id: 'edge-child',
-            position: { x: 40, y: 60 },
-            size: { width: 160, height: 90 },
-            shapeId: 'default',
-            parentId: 'parent-host',
+            id: 'sibling-b-port',
+            elementId: 'sibling-b',
+            position: { x: 140, y: 50 },
+            shapeId: 'port-dark',
+            anchorCenter: true,
+            currentAnchorId: 'right',
         },
         {
-            id: 'grandparent',
-            position: { x: 40, y: 380 },
-            size: { width: 780, height: 160 },
-            shapeId: 'panel',
-            style: { fill: '#fafafa' },
+            id: 'attach-parent-port',
+            elementId: 'attach-parent',
+            position: { x: 20, y: 125 },
+            shapeId: 'port-circle',
+            anchorCenter: true,
+            currentAnchorId: 'left',
+            externalLinkAttachPoint: { x: -16, y: 0 },
+            internalLinkAttachPoint: { x: 16, y: 0 },
+        },
+        {
+            id: 'attach-child-a-port',
+            elementId: 'attach-child',
+            position: { x: 140, y: 50 },
+            shapeId: 'port-circle',
+            anchorCenter: true,
+            currentAnchorId: 'right',
+            externalLinkAttachPoint: { x: 12, y: 0 },
+            internalLinkAttachPoint: { x: -12, y: 0 },
+        },
+        {
+            id: 'attach-child-b-port',
+            elementId: 'attach-child-b',
+            position: { x: 0, y: 50 },
+            shapeId: 'port-circle',
+            anchorCenter: true,
+            currentAnchorId: 'left',
+            externalLinkAttachPoint: { x: 12, y: 0 },
+            internalLinkAttachPoint: { x: -12, y: 0 },
         },
+    ],
+    links: obstacleRoutingLinks,
+    texts: [
         {
-            id: 'mid-parent-a',
+            id: 'obstacle-routing-instructions',
+            content: 'Two checks in one canvas: (A) sibling external-anchor link avoids both child interiors; (B) parent/children hierarchy resolves internal vs external attach points per endpoint direction.',
             position: { x: 40, y: 30 },
-            size: { width: 300, height: 100 },
-            shapeId: 'panel',
-            parentId: 'grandparent',
         },
         {
-            id: 'mid-parent-b',
-            position: { x: 420, y: 30 },
-            size: { width: 300, height: 100 },
-            shapeId: 'panel',
-            parentId: 'grandparent',
+            id: 'sibling-group-label',
+            content: 'Scenario A: Same-parent children, external-facing anchors (left/right)',
+            position: { x: 52, y: 66 },
         },
         {
-            id: 'grandchild-a',
-            position: { x: 40, y: 20 },
-            size: { width: 120, height: 60 },
-            shapeId: 'default',
-            parentId: 'mid-parent-a',
+            id: 'attach-group-label',
+            content: 'Scenario B: Directional attach semantics (parent internal, child/sibling external)',
+            position: { x: 620, y: 66 },
         },
         {
-            id: 'grandchild-b',
-            position: { x: 40, y: 20 },
-            size: { width: 120, height: 60 },
-            shapeId: 'default',
-            parentId: 'mid-parent-b',
+            id: 'attach-link-parent-child-label',
+            content: 'parent->child-A: parent endpoint INTERNAL, child endpoint EXTERNAL',
+            position: { x: 620, y: 350 },
+        },
+        {
+            id: 'attach-link-child-parent-label',
+            content: 'child-B->parent: child endpoint EXTERNAL, parent endpoint INTERNAL',
+            position: { x: 620, y: 372 },
+        },
+        {
+            id: 'attach-link-child-child-label',
+            content: 'child-A->child-B: sibling endpoints EXTERNAL on both ends',
+            position: { x: 620, y: 394 },
         },
-    ],
-    ports: [
-        { id: 'block-source-port', elementId: 'block-source', position: { x: 70, y: 45 }, shapeId: 'port-circle' },
-        { id: 'block-target-port', elementId: 'block-target', position: { x: 70, y: 45 }, shapeId: 'port-circle' },
-        { id: 'shared-child-a-port', elementId: 'shared-child-a', position: { x: 70, y: 45 }, shapeId: 'port-circle' },
-        { id: 'shared-child-b-port', elementId: 'shared-child-b', position: { x: 70, y: 45 }, shapeId: 'port-circle' },
-        { id: 'parent-host-port', elementId: 'parent-host', position: { x: 250, y: 110 }, shapeId: 'port-circle' },
-        { id: 'edge-child-port', elementId: 'edge-child', position: { x: 0, y: 45 }, shapeId: 'port-circle' },
-        { id: 'grandchild-a-port', elementId: 'grandchild-a', position: { x: 60, y: 30 }, shapeId: 'port-circle' },
-        { id: 'grandchild-b-port', elementId: 'grandchild-b', position: { x: 60, y: 30 }, shapeId: 'port-circle' },
-    ],
-    links: obstacleRoutingLinks,
-    texts: [
-        { id: 'block-label', content: 'Blocking obstacle', position: { x: 60, y: 16 } },
-        { id: 'shared-label', content: 'Shared parent (siblings)', position: { x: 40, y: 158 } },
-        { id: 'parent-label', content: 'Parent-child (stay inside)', position: { x: 500, y: 158 } },
-        { id: 'grand-label', content: 'Grandchildren (shared ancestors)', position: { x: 40, y: 358 } },
     ],
 }); };
 var addLinksAction = {
@@ -2382,17 +2720,17 @@ var rerouteAllAction = {
         editor.rerouteAllLinks();
     },
 };
-var obstacleRoutingDemoConfig = ({
+var obstacleRoutingDemoConfig = {
     id: 'obstacle-routing',
     title: 'Obstacle Routing',
-    description: 'Auto routing avoids obstacles and respects ancestor/edge rules.',
+    description: 'Nested multi-anchor checks: sibling interior-avoidance + directional internal/external parent-child attach semantics.',
     createState: createObstacleRoutingState,
-    elementShapes: baseElementShapes,
+    elementShapes: obstacleRoutingShapes,
     portShapes: basePortShapes,
     defaultElementShapeId: 'default',
     defaultPortShapeId: 'port-circle',
     actions: [addLinksAction, rerouteAllAction],
-});
+};
 
 var createLinkBendHandlesState = function () { return ({
     elements: [
@@ -4382,21 +4720,42 @@ var ObstacleRouter = /** @class */ (function () {
     ObstacleRouter.prototype.computeStubEndpoint = function (point, endpoint, bounds, obstacles) {
         if (!(endpoint === null || endpoint === void 0 ? void 0 : endpoint.onEdgeSide) || !endpoint.rect)
             return null;
-        var normal = this.getNormal(endpoint.onEdgeSide);
+        var outwardNormal = this.getNormal(endpoint.onEdgeSide);
+        var selectedNormal = outwardNormal;
+        var maxLength = this.computeAvailableStubLength(point, outwardNormal, bounds, obstacles, endpoint.elementId);
+        // If the outward normal is fully blocked by route bounds on the endpoint host, fall back inward
+        // to preserve a visible perpendicular stub for bounded parent-child routes.
+        if (maxLength <= this.tolerance && bounds && this.rectsEqual(bounds, endpoint.rect)) {
+            var inwardNormal = { x: -outwardNormal.x, y: -outwardNormal.y };
+            var inwardLength = this.computeAvailableStubLength(point, inwardNormal, bounds, obstacles, endpoint.elementId);
+            if (inwardLength > maxLength) {
+                selectedNormal = inwardNormal;
+                maxLength = inwardLength;
+            }
+        }
+        if (maxLength <= 0)
+            return null;
+        return {
+            x: point.x + selectedNormal.x * maxLength,
+            y: point.y + selectedNormal.y * maxLength,
+        };
+    };
+    ObstacleRouter.prototype.computeAvailableStubLength = function (point, normal, bounds, obstacles, ignoreId) {
         var maxLength = this.stubLength;
         if (bounds) {
             maxLength = Math.min(maxLength, this.distanceToBounds(point, normal, bounds));
         }
-        var obstacleLimit = this.distanceToObstacles(point, normal, obstacles, endpoint.elementId);
+        var obstacleLimit = this.distanceToObstacles(point, normal, obstacles, ignoreId);
         if (obstacleLimit !== null) {
             maxLength = Math.min(maxLength, obstacleLimit);
         }
-        if (maxLength <= 0)
-            return null;
-        return {
-            x: point.x + normal.x * maxLength,
-            y: point.y + normal.y * maxLength,
-        };
+        return maxLength;
+    };
+    ObstacleRouter.prototype.rectsEqual = function (a, b) {
+        return (Math.abs(a.x - b.x) <= this.tolerance &&
+            Math.abs(a.y - b.y) <= this.tolerance &&
+            Math.abs(a.width - b.width) <= this.tolerance &&
+            Math.abs(a.height - b.height) <= this.tolerance);
     };
     ObstacleRouter.prototype.getNormal = function (side) {
         switch (side) {
@@ -4693,7 +5052,7 @@ var borderSideToInwardRotation = function (side) {
     return 0;
 };
 
-var POSITION_EPSILON$1 = 1e-6;
+var POSITION_EPSILON$2 = 1e-6;
 var MIN_TRUNCATION_WIDTH_SAFETY_EPSILON = 0.5;
 var FONT_SIZE_TRUNCATION_SAFETY_RATIO = 1.4;
 var FONT_SIZE_TRUNCATION_SAFETY_BASE = 2;
@@ -4719,7 +5078,7 @@ var TextLayoutService = /** @class */ (function () {
         var textRenderPadding = this.resolveTextRenderPadding(text.style);
         var horizontalRenderInset = textRenderPadding * 2;
         var verticalRenderInset = textRenderPadding * 2;
-        var zeroPaddingInset = padding <= POSITION_EPSILON$1 && this.shouldTrackOwnerBoundLayout(text) ? 0.5 : 0;
+        var zeroPaddingInset = padding <= POSITION_EPSILON$2 && this.shouldTrackOwnerBoundLayout(text) ? 0.5 : 0;
         var drawableWidth = maxWidth !== undefined ? Math.max(0, maxWidth - zeroPaddingInset * 2 - horizontalRenderInset) : undefined;
         var drawableHeight = maxHeight !== undefined ? Math.max(0, maxHeight - zeroPaddingInset * 2 - verticalRenderInset) : undefined;
         var lineHeight = this.textMeasurer.measure(__assign(__assign({}, text), { content: 'M' })).height;
@@ -5417,6 +5776,7 @@ var resolvePortWorldTransform = function (options) {
 };
 
 var EDGE_TOLERANCE = 0.5;
+var POSITION_EPSILON$1 = 1e-6;
 var LinkRoutingService = /** @class */ (function () {
     function LinkRoutingService(config) {
         this.model = config.model;
@@ -5525,11 +5885,27 @@ var LinkRoutingService = /** @class */ (function () {
         if (points.length < 2) {
             return [__assign({}, source), __assign({}, target)];
         }
+        var sourceDelta = {
+            x: source.x - points[0].x,
+            y: source.y - points[0].y,
+        };
+        var targetDelta = {
+            x: target.x - points[points.length - 1].x,
+            y: target.y - points[points.length - 1].y,
+        };
+        var shouldTranslateAllPoints = Math.abs(sourceDelta.x - targetDelta.x) <= POSITION_EPSILON$1 &&
+            Math.abs(sourceDelta.y - targetDelta.y) <= POSITION_EPSILON$1;
         return points.map(function (point, index) {
             if (index === 0)
                 return __assign({}, source);
             if (index === points.length - 1)
                 return __assign({}, target);
+            if (shouldTranslateAllPoints) {
+                return {
+                    x: point.x + sourceDelta.x,
+                    y: point.y + sourceDelta.y,
+                };
+            }
             return __assign({}, point);
         });
     };
@@ -5695,16 +6071,13 @@ var LinkRoutingService = /** @class */ (function () {
         var oppositeElementId = (_b = this.model.getPort(oppositePortId)) === null || _b === void 0 ? void 0 : _b.elementId;
         if (!elementId || !oppositeElementId)
             return 'external';
-        return this.hasAncestorRelation(elementId, oppositeElementId) ? 'internal' : 'external';
+        return this.isAncestorOf(elementId, oppositeElementId) ? 'internal' : 'external';
     };
-    LinkRoutingService.prototype.hasAncestorRelation = function (sourceElementId, targetElementId) {
-        if (sourceElementId === targetElementId)
+    LinkRoutingService.prototype.isAncestorOf = function (candidateAncestorId, candidateDescendantId) {
+        if (candidateAncestorId === candidateDescendantId)
             return false;
-        var sourceChain = this.getAncestorChain(sourceElementId);
-        if (sourceChain.includes(targetElementId))
-            return true;
-        var targetChain = this.getAncestorChain(targetElementId);
-        return targetChain.includes(sourceElementId);
+        var descendantChain = this.getAncestorChain(candidateDescendantId);
+        return descendantChain.includes(candidateAncestorId);
     };
     LinkRoutingService.prototype.getAncestorChain = function (elementId) {
         var _a;
@@ -5864,11 +6237,17 @@ var DiagramEngine = /** @class */ (function () {
     DiagramEngine.prototype.load = function (state) {
         var _this = this;
         var patches = this.commandQueue.run(createLoadCommand(state), this.model);
-        var allPatches = this.mutationPipeline.run({
+        var mutationPatches = this.mutationPipeline.run({
             basePatches: patches,
             layoutSteps: [function () { return _this.applyAllLayouts(); }],
             includeEmptyLinkRouting: true,
         });
+        var normalizedPorts = this.normalizePortsForHostPolicies();
+        var normalizedLinkPatches = normalizedPorts.movedPortIds.length > 0
+            ? this.updateLinksForPorts(normalizedPorts.movedPortIds)
+            : [];
+        var textPresentationPatches = this.resolveAllTextPresentationPatches(false);
+        var allPatches = __spreadArray(__spreadArray(__spreadArray(__spreadArray([], mutationPatches, true), normalizedPorts.patches, true), normalizedLinkPatches, true), textPresentationPatches, true);
         this.emitChange(allPatches);
     };
     DiagramEngine.prototype.getState = function () {
@@ -6460,7 +6839,7 @@ var DiagramEngine = /** @class */ (function () {
             if (!host)
                 return;
             host.portIds.forEach(function (portId) {
-                var _a;
+                var _a, _b, _c;
                 var port = _this.model.getPort(portId);
                 if (!port)
                     return;
@@ -6483,11 +6862,16 @@ var DiagramEngine = /** @class */ (function () {
                     return;
                 }
                 var projected = _this.resolveBorderPortResizeProjection(port.position, host.shapeId, sizeInfo, host.size);
-                var unchanged = Math.abs(projected.x - port.position.x) <= POSITION_EPSILON &&
-                    Math.abs(projected.y - port.position.y) <= POSITION_EPSILON;
+                var constrained = _this.resolveConstrainedPortRelativePosition(port, host, projected);
+                var unchanged = Math.abs(constrained.position.x - port.position.x) <= POSITION_EPSILON &&
+                    Math.abs(constrained.position.y - port.position.y) <= POSITION_EPSILON &&
+                    ((_b = constrained.currentAnchorId) !== null && _b !== void 0 ? _b : null) === ((_c = port.currentAnchorId) !== null && _c !== void 0 ? _c : null);
                 if (unchanged)
                     return;
-                var patchesForPort = _this.commandQueue.run(createMovePortCommand(port.id, { position: projected, currentAnchorId: null }), _this.model);
+                var patchesForPort = _this.commandQueue.run(createMovePortCommand(port.id, {
+                    position: constrained.position,
+                    currentAnchorId: constrained.currentAnchorId,
+                }), _this.model);
                 reprojectionPatches.push.apply(reprojectionPatches, patchesForPort);
                 movedPortIds.add(port.id);
             });
@@ -6544,10 +6928,10 @@ var DiagramEngine = /** @class */ (function () {
         return this.projectPointToHostBorder(projectedTarget, shapeId, nextSize);
     };
     DiagramEngine.prototype.resolveConstrainedPortRelativePosition = function (port, element, requestedPosition) {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d, _e, _f, _g;
         var position = __assign({}, requestedPosition);
         var effectiveMoveMode = this.resolveEffectivePortMoveMode(port, element);
-        if (effectiveMoveMode && effectiveMoveMode !== 'free' && effectiveMoveMode !== 'anchors') {
+        if (effectiveMoveMode === 'inside' || effectiveMoveMode === 'border') {
             var widthLimit = Math.max(0, element.size.width - ((_b = (_a = port.size) === null || _a === void 0 ? void 0 : _a.width) !== null && _b !== void 0 ? _b : 0));
             var heightLimit = Math.max(0, element.size.height - ((_d = (_c = port.size) === null || _c === void 0 ? void 0 : _c.height) !== null && _d !== void 0 ? _d : 0));
             var bounds = {
@@ -6571,9 +6955,12 @@ var DiagramEngine = /** @class */ (function () {
                         height: Math.max(0, element.size.height),
                     };
             }
-            position = effectiveMoveMode === 'inside'
-                ? clampToRect(position, bounds)
-                : this.constrainPortToHostBorder(position, element);
+            if (effectiveMoveMode === 'inside') {
+                position = clampToRect(position, bounds);
+            }
+            else {
+                position = this.constrainPortToHostBorder(position, element);
+            }
         }
         var style = port.style;
         if ((style === null || style === void 0 ? void 0 : style.moveAxis) === 'horizontal') {
@@ -6587,18 +6974,134 @@ var DiagramEngine = /** @class */ (function () {
             position.x = clamp(position.x, bounds.x, bounds.x + bounds.width);
             position.y = clamp(position.y, bounds.y, bounds.y + bounds.height);
         }
+        if (effectiveMoveMode === 'border') {
+            var resolvedBorder = this.resolveBorderPositionWithLimits(position, element, (_e = element.portMovement) === null || _e === void 0 ? void 0 : _e.positionLimits);
+            position = resolvedBorder !== null && resolvedBorder !== void 0 ? resolvedBorder : this.constrainPortToHostBorder(position, element);
+        }
+        else {
+            position = this.applyPortPositionLimits(position, (_f = element.portMovement) === null || _f === void 0 ? void 0 : _f.positionLimits);
+        }
         if (effectiveMoveMode === 'anchors') {
-            var anchor = this.resolveNearestPortAnchor(element, position);
+            var anchor = this.resolveNearestPortAnchor(element, position, port.currentAnchorId);
             if (anchor) {
                 return {
                     position: __assign({}, anchor.position),
                     currentAnchorId: anchor.id,
                 };
             }
-            return { position: position, currentAnchorId: (_e = port.currentAnchorId) !== null && _e !== void 0 ? _e : null };
+            return { position: __assign({}, port.position), currentAnchorId: (_g = port.currentAnchorId) !== null && _g !== void 0 ? _g : null };
         }
         return { position: position, currentAnchorId: null };
     };
+    DiagramEngine.prototype.applyPortPositionLimits = function (position, limits) {
+        if (!limits)
+            return __assign({}, position);
+        var x = position.x;
+        var y = position.y;
+        if (limits.x) {
+            if (typeof limits.x.min === 'number') {
+                x = Math.max(x, limits.x.min);
+            }
+            if (typeof limits.x.max === 'number') {
+                x = Math.min(x, limits.x.max);
+            }
+        }
+        if (limits.y) {
+            if (typeof limits.y.min === 'number') {
+                y = Math.max(y, limits.y.min);
+            }
+            if (typeof limits.y.max === 'number') {
+                y = Math.min(y, limits.y.max);
+            }
+        }
+        return { x: x, y: y };
+    };
+    DiagramEngine.prototype.resolveBorderPositionWithLimits = function (position, element, limits) {
+        var _this = this;
+        var _a, _b, _c, _d;
+        var borderBase = this.constrainPortToHostBorder(position, element);
+        if (!limits)
+            return borderBase;
+        if (this.isPointWithinPositionLimits(borderBase, limits))
+            return borderBase;
+        var target = this.applyPortPositionLimits(borderBase, limits);
+        var xValues = new Set([borderBase.x, target.x, 0, Math.max(0, element.size.width)]);
+        var yValues = new Set([borderBase.y, target.y, 0, Math.max(0, element.size.height)]);
+        if (typeof ((_a = limits.x) === null || _a === void 0 ? void 0 : _a.min) === 'number')
+            xValues.add(limits.x.min);
+        if (typeof ((_b = limits.x) === null || _b === void 0 ? void 0 : _b.max) === 'number')
+            xValues.add(limits.x.max);
+        if (typeof ((_c = limits.y) === null || _c === void 0 ? void 0 : _c.min) === 'number')
+            yValues.add(limits.y.min);
+        if (typeof ((_d = limits.y) === null || _d === void 0 ? void 0 : _d.max) === 'number')
+            yValues.add(limits.y.max);
+        var seeds = [];
+        xValues.forEach(function (x) { return yValues.forEach(function (y) { return seeds.push({ x: x, y: y }); }); });
+        seeds.push({ x: borderBase.x, y: target.y }, { x: target.x, y: borderBase.y });
+        var candidates = [];
+        var seen = new Set();
+        seeds.forEach(function (seed) {
+            var candidate = _this.constrainPortToHostBorder(seed, element);
+            var key = "".concat(candidate.x.toFixed(6), ":").concat(candidate.y.toFixed(6));
+            if (seen.has(key))
+                return;
+            seen.add(key);
+            candidates.push(candidate);
+        });
+        var valid = candidates.filter(function (candidate) { return _this.isPointWithinPositionLimits(candidate, limits); });
+        if (valid.length === 0)
+            return null;
+        return valid.reduce(function (best, candidate) {
+            var bestDistance = Math.pow((best.x - target.x), 2) + Math.pow((best.y - target.y), 2);
+            var candidateDistance = Math.pow((candidate.x - target.x), 2) + Math.pow((candidate.y - target.y), 2);
+            if (candidateDistance < bestDistance)
+                return candidate;
+            if (candidateDistance > bestDistance)
+                return best;
+            if (candidate.x < best.x)
+                return candidate;
+            if (candidate.x > best.x)
+                return best;
+            return candidate.y < best.y ? candidate : best;
+        }, valid[0]);
+    };
+    DiagramEngine.prototype.isPointWithinPositionLimits = function (position, limits) {
+        if (!limits)
+            return true;
+        if (limits.x) {
+            if (typeof limits.x.min === 'number' && position.x < limits.x.min)
+                return false;
+            if (typeof limits.x.max === 'number' && position.x > limits.x.max)
+                return false;
+        }
+        if (limits.y) {
+            if (typeof limits.y.min === 'number' && position.y < limits.y.min)
+                return false;
+            if (typeof limits.y.max === 'number' && position.y > limits.y.max)
+                return false;
+        }
+        return true;
+    };
+    DiagramEngine.prototype.filterAnchorsByPositionLimits = function (anchors, limits) {
+        if (!limits)
+            return anchors;
+        return anchors.filter(function (anchor) {
+            var position = anchor.position;
+            if (limits.x) {
+                if (typeof limits.x.min === 'number' && position.x < limits.x.min)
+                    return false;
+                if (typeof limits.x.max === 'number' && position.x > limits.x.max)
+                    return false;
+            }
+            if (limits.y) {
+                if (typeof limits.y.min === 'number' && position.y < limits.y.min)
+                    return false;
+                if (typeof limits.y.max === 'number' && position.y > limits.y.max)
+                    return false;
+            }
+            return true;
+        });
+    };
     DiagramEngine.prototype.resolveEffectivePortMoveMode = function (port, element) {
         var _a, _b;
         return (_b = (_a = element.portMovement) === null || _a === void 0 ? void 0 : _a.moveMode) !== null && _b !== void 0 ? _b : port.moveMode;
@@ -6633,7 +7136,8 @@ var DiagramEngine = /** @class */ (function () {
         return [];
     };
     DiagramEngine.prototype.resolveNearestPortAnchor = function (element, target, preferredAnchorId) {
-        var anchors = this.resolvePortAnchorsForElement(element);
+        var _a;
+        var anchors = this.filterAnchorsByPositionLimits(this.resolvePortAnchorsForElement(element), (_a = element.portMovement) === null || _a === void 0 ? void 0 : _a.positionLimits);
         if (anchors.length === 0)
             return null;
         if (preferredAnchorId) {
@@ -6698,6 +7202,46 @@ var DiagramEngine = /** @class */ (function () {
     DiagramEngine.prototype.resolveTextPresentation = function (text) {
         return this.textLayoutService.resolveTextPresentation(text);
     };
+    DiagramEngine.prototype.resolveAllTextPresentationPatches = function (emitTextUpdated) {
+        var _this = this;
+        var textPatches = [];
+        this.model.texts.forEach(function (text) {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
+            var current = text.toData();
+            var resolved = _this.resolveTextPresentation(current);
+            var currentDisplay = (_a = current.displayContent) !== null && _a !== void 0 ? _a : current.content;
+            var sizeChanged = !current.size ||
+                current.size.width !== resolved.size.width ||
+                current.size.height !== resolved.size.height;
+            var displayChanged = currentDisplay !== resolved.displayContent;
+            var offsetChanged = ((_c = (_b = current.displayOffset) === null || _b === void 0 ? void 0 : _b.x) !== null && _c !== void 0 ? _c : 0) !== ((_e = (_d = resolved.displayOffset) === null || _d === void 0 ? void 0 : _d.x) !== null && _e !== void 0 ? _e : 0) ||
+                ((_g = (_f = current.displayOffset) === null || _f === void 0 ? void 0 : _f.y) !== null && _g !== void 0 ? _g : 0) !== ((_j = (_h = resolved.displayOffset) === null || _h === void 0 ? void 0 : _h.y) !== null && _j !== void 0 ? _j : 0);
+            var clipChanged = ((_l = (_k = current.displayClipSize) === null || _k === void 0 ? void 0 : _k.width) !== null && _l !== void 0 ? _l : 0) !== ((_o = (_m = resolved.displayClipSize) === null || _m === void 0 ? void 0 : _m.width) !== null && _o !== void 0 ? _o : 0) ||
+                ((_q = (_p = current.displayClipSize) === null || _p === void 0 ? void 0 : _p.height) !== null && _q !== void 0 ? _q : 0) !== ((_s = (_r = resolved.displayClipSize) === null || _r === void 0 ? void 0 : _r.height) !== null && _s !== void 0 ? _s : 0);
+            if (!sizeChanged && !displayChanged && !offsetChanged && !clipChanged)
+                return;
+            text.setSize(resolved.size);
+            text.setDisplayContent(resolved.displayContent);
+            text.setDisplayOffset(resolved.displayOffset);
+            text.setDisplayClipSize(resolved.displayClipSize);
+            textPatches.push(patchUpdate('text', text.id, {
+                size: resolved.size,
+                displayContent: resolved.displayContent,
+                displayOffset: resolved.displayOffset,
+                displayClipSize: resolved.displayClipSize,
+            }));
+            if (emitTextUpdated) {
+                _this.events.emit('textUpdated', {
+                    textId: text.id,
+                    ownerId: text.ownerId,
+                    content: text.content,
+                    displayContent: resolved.displayContent,
+                    reason: 'layout',
+                });
+            }
+        });
+        return textPatches;
+    };
     DiagramEngine.prototype.emitSelection = function () {
         var _this = this;
         var selectedIds = this.selection.get();
@@ -6787,6 +7331,40 @@ var DiagramEngine = /** @class */ (function () {
     DiagramEngine.prototype.routeLinksWithEmptyPoints = function () {
         return this.linkRoutingService.routeLinksWithEmptyPoints();
     };
+    DiagramEngine.prototype.normalizePortsForHostPolicies = function (portIds) {
+        var _this = this;
+        var ids = portIds !== null && portIds !== void 0 ? portIds : Array.from(this.model.ports.keys());
+        var normalizedPatches = [];
+        var movedPortIds = new Set();
+        ids.forEach(function (portId) {
+            var _a, _b;
+            var port = _this.model.getPort(portId);
+            if (!port)
+                return;
+            var element = _this.model.getElement(port.elementId);
+            if (!element)
+                return;
+            var constrained = _this.resolveConstrainedPortRelativePosition(port, element, port.position);
+            var previousAnchorId = (_a = port.currentAnchorId) !== null && _a !== void 0 ? _a : null;
+            var shouldPersistAnchorId = previousAnchorId !== null || constrained.currentAnchorId === null;
+            var nextAnchorId = shouldPersistAnchorId ? ((_b = constrained.currentAnchorId) !== null && _b !== void 0 ? _b : null) : previousAnchorId;
+            var unchanged = Math.abs(constrained.position.x - port.position.x) <= POSITION_EPSILON &&
+                Math.abs(constrained.position.y - port.position.y) <= POSITION_EPSILON &&
+                previousAnchorId === nextAnchorId;
+            if (unchanged)
+                return;
+            var update = {
+                position: constrained.position,
+            };
+            if (shouldPersistAnchorId) {
+                update.currentAnchorId = constrained.currentAnchorId;
+            }
+            var patches = _this.commandQueue.run(createMovePortCommand(port.id, update), _this.model);
+            normalizedPatches.push.apply(normalizedPatches, patches);
+            movedPortIds.add(port.id);
+        });
+        return { patches: normalizedPatches, movedPortIds: Array.from(movedPortIds) };
+    };
     DiagramEngine.prototype.computeRemovalDiff = function (before) {
         var after = this.model.toState();
         var removedPatches = [];
@@ -6997,6 +7575,21 @@ var KonvaNodeFactory = /** @class */ (function () {
         }
         return node;
     };
+    KonvaNodeFactory.prototype.createTextBackgroundNode = function (config) {
+        return new this.konva.Rect({
+            id: config.id,
+            x: config.x,
+            y: config.y,
+            width: config.width,
+            height: config.height,
+            fill: config.fill,
+            stroke: config.stroke,
+            strokeWidth: config.strokeWidth,
+            cornerRadius: config.cornerRadius,
+            name: 'text-background',
+            listening: false,
+        });
+    };
     KonvaNodeFactory.prototype.createHandleNode = function (config) {
         return new this.konva.Rect({
             id: config.id,
@@ -7177,6 +7770,7 @@ var KonvaRenderer = /** @class */ (function () {
         this.portNodes = new Map();
         this.linkNodes = new Map();
         this.textNodes = new Map();
+        this.textBackgroundNodes = new Map();
         this.selectedIds = new Set();
         this.tempLinkNode = null;
         this.tempPortNode = null;
@@ -7476,6 +8070,8 @@ var KonvaRenderer = /** @class */ (function () {
         this.elementNodes.clear();
         this.portNodes.clear();
         this.linkNodes.clear();
+        this.textBackgroundNodes.forEach(function (node) { var _a; return (_a = node.destroy) === null || _a === void 0 ? void 0 : _a.call(node); });
+        this.textBackgroundNodes.clear();
         this.textNodes.clear();
         this.resizeHandleNodes.clear();
         this.linkHandleNodes.clear();
@@ -7682,7 +8278,7 @@ var KonvaRenderer = /** @class */ (function () {
         var _this = this;
         var texts = Array.from(model.texts.values());
         texts.forEach(function (text) {
-            var _a, _b, _c, _d, _e, _f, _g, _h;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
             var node = _this.textNodes.get(text.id);
             if (!node) {
                 node = _this.nodeFactory.createTextNode(text.toData());
@@ -7691,32 +8287,124 @@ var KonvaRenderer = /** @class */ (function () {
             }
             var position = (_c = model.getTextWorldPosition(text.id)) !== null && _c !== void 0 ? _c : text.position;
             var displayOffset = (_d = text.displayOffset) !== null && _d !== void 0 ? _d : { x: 0, y: 0 };
-            _this.updatePosition(node, {
+            var textPosition = {
                 x: position.x + displayOffset.x,
                 y: position.y + displayOffset.y,
+            };
+            _this.updatePosition(node, {
+                x: textPosition.x,
+                y: textPosition.y,
             });
             if (node.setAttrs) {
-                var style = text.style;
-                var defaults = resolveTextStyleDefaults(style);
-                var baseFill = (_g = (_f = (_e = style === null || style === void 0 ? void 0 : style.fill) !== null && _e !== void 0 ? _e : _this.getNodeAttr(node, '__baseFill')) !== null && _f !== void 0 ? _f : _this.getNodeAttr(node, 'fill')) !== null && _g !== void 0 ? _g : 'black';
+                var style_1 = text.style;
+                var defaults = resolveTextStyleDefaults(style_1);
+                var baseFill = (_g = (_f = (_e = style_1 === null || style_1 === void 0 ? void 0 : style_1.fill) !== null && _e !== void 0 ? _e : _this.getNodeAttr(node, '__baseFill')) !== null && _f !== void 0 ? _f : _this.getNodeAttr(node, 'fill')) !== null && _g !== void 0 ? _g : 'black';
                 var fill = _this.selectedIds.has(text.id) ? '#ff7a00' : baseFill;
-                var clip = text.displayClipSize;
-                node.setAttrs(__assign(__assign({ text: (_h = text.displayContent) !== null && _h !== void 0 ? _h : text.content, fontSize: defaults.fontSize, fontFamily: defaults.fontFamily, lineHeight: defaults.lineHeight }, (style !== null && style !== void 0 ? style : {})), { width: clip === null || clip === void 0 ? void 0 : clip.width, height: clip === null || clip === void 0 ? void 0 : clip.height, wrap: clip ? 'none' : undefined, ellipsis: false, fill: fill, __baseFill: baseFill, 
+                var clip_1 = text.displayClipSize;
+                node.setAttrs(__assign(__assign({ text: (_h = text.displayContent) !== null && _h !== void 0 ? _h : text.content, fontSize: defaults.fontSize, fontFamily: defaults.fontFamily, lineHeight: defaults.lineHeight }, (style_1 !== null && style_1 !== void 0 ? style_1 : {})), { width: clip_1 === null || clip_1 === void 0 ? void 0 : clip_1.width, height: clip_1 === null || clip_1 === void 0 ? void 0 : clip_1.height, wrap: clip_1 ? 'none' : undefined, ellipsis: false, fill: fill, __baseFill: baseFill, 
                     // Keep metadata for tests/debugging; Konva clip attrs do not apply on Text nodes.
-                    clipX: clip ? 0 : undefined, clipY: clip ? 0 : undefined, clipWidth: clip === null || clip === void 0 ? void 0 : clip.width, clipHeight: clip === null || clip === void 0 ? void 0 : clip.height }));
+                    clipX: clip_1 ? 0 : undefined, clipY: clip_1 ? 0 : undefined, clipWidth: clip_1 === null || clip_1 === void 0 ? void 0 : clip_1.width, clipHeight: clip_1 === null || clip_1 === void 0 ? void 0 : clip_1.height }));
+            }
+            var style = text.style;
+            var backgroundFill = style === null || style === void 0 ? void 0 : style.backgroundFill;
+            var clip = text.displayClipSize;
+            var backgroundWidth = (_j = clip === null || clip === void 0 ? void 0 : clip.width) !== null && _j !== void 0 ? _j : (_k = text.size) === null || _k === void 0 ? void 0 : _k.width;
+            var backgroundHeight = (_l = clip === null || clip === void 0 ? void 0 : clip.height) !== null && _l !== void 0 ? _l : (_m = text.size) === null || _m === void 0 ? void 0 : _m.height;
+            var backgroundMeta = _this.resolveTextBackgroundMeta(model, text.toData());
+            var hasBackground = typeof backgroundFill === 'string' &&
+                backgroundFill.length > 0 &&
+                typeof backgroundWidth === 'number' &&
+                typeof backgroundHeight === 'number' &&
+                backgroundWidth > 0 &&
+                backgroundHeight > 0;
+            if (hasBackground) {
+                var baseX = textPosition.x + backgroundMeta.inset;
+                var baseY = textPosition.y + backgroundMeta.inset;
+                var width = Math.max(0, backgroundWidth - backgroundMeta.inset * 2);
+                var height = Math.max(0, backgroundHeight - backgroundMeta.inset);
+                var backgroundStroke = typeof (style === null || style === void 0 ? void 0 : style.backgroundStroke) === 'string' && style.backgroundStroke.length > 0
+                    ? style.backgroundStroke
+                    : undefined;
+                var backgroundStrokeWidth = typeof (style === null || style === void 0 ? void 0 : style.backgroundStrokeWidth) === 'number'
+                    ? Math.max(0, style.backgroundStrokeWidth)
+                    : undefined;
+                var backgroundNode = _this.textBackgroundNodes.get(text.id);
+                if (!backgroundNode) {
+                    backgroundNode = _this.nodeFactory.createTextBackgroundNode({
+                        id: "text-background:".concat(text.id),
+                        x: baseX,
+                        y: baseY,
+                        width: width,
+                        height: height,
+                        fill: backgroundFill,
+                        stroke: backgroundStroke,
+                        strokeWidth: backgroundStrokeWidth,
+                        cornerRadius: backgroundMeta.cornerRadius,
+                    });
+                    _this.textBackgroundNodes.set(text.id, backgroundNode);
+                    (_p = (_o = _this.layers.getLayer('texts')) === null || _o === void 0 ? void 0 : _o.add) === null || _p === void 0 ? void 0 : _p.call(_o, backgroundNode);
+                }
+                else {
+                    _this.updatePosition(backgroundNode, { x: baseX, y: baseY });
+                    (_q = backgroundNode.setAttrs) === null || _q === void 0 ? void 0 : _q.call(backgroundNode, {
+                        width: width,
+                        height: height,
+                        fill: backgroundFill,
+                        stroke: backgroundStroke,
+                        strokeWidth: backgroundStrokeWidth,
+                        cornerRadius: backgroundMeta.cornerRadius,
+                        listening: false,
+                        name: 'text-background',
+                    });
+                }
+                (_r = node.moveToTop) === null || _r === void 0 ? void 0 : _r.call(node);
+            }
+            else {
+                var backgroundNode = _this.textBackgroundNodes.get(text.id);
+                (_s = backgroundNode === null || backgroundNode === void 0 ? void 0 : backgroundNode.destroy) === null || _s === void 0 ? void 0 : _s.call(backgroundNode);
+                _this.textBackgroundNodes.delete(text.id);
             }
         });
         Array.from(this.textNodes.keys()).forEach(function (id) {
-            var _a;
+            var _a, _b;
             if (!model.texts.has(id)) {
+                var backgroundNode = _this.textBackgroundNodes.get(id);
+                (_a = backgroundNode === null || backgroundNode === void 0 ? void 0 : backgroundNode.destroy) === null || _a === void 0 ? void 0 : _a.call(backgroundNode);
+                _this.textBackgroundNodes.delete(id);
                 var node = _this.textNodes.get(id);
-                (_a = node === null || node === void 0 ? void 0 : node.destroy) === null || _a === void 0 ? void 0 : _a.call(node);
+                (_b = node === null || node === void 0 ? void 0 : node.destroy) === null || _b === void 0 ? void 0 : _b.call(node);
                 _this.textNodes.delete(id);
                 _this.layers.markDirty('texts');
             }
         });
         this.layers.markDirty('texts');
     };
+    KonvaRenderer.prototype.resolveTextBackgroundMeta = function (model, text) {
+        var _a;
+        var ownerId = (_a = text.ownerId) !== null && _a !== void 0 ? _a : null;
+        if (!ownerId)
+            return { inset: 0 };
+        var owner = model.getElement(ownerId);
+        if (!owner)
+            return { inset: 0 };
+        var ownerStyle = owner.style;
+        var strokeWidth = typeof (ownerStyle === null || ownerStyle === void 0 ? void 0 : ownerStyle.strokeWidth) === 'number' ? Math.max(0, ownerStyle.strokeWidth) : 0;
+        var inset = strokeWidth > 0 ? strokeWidth / 2 : 0;
+        var rawCornerRadius = ownerStyle === null || ownerStyle === void 0 ? void 0 : ownerStyle.cornerRadius;
+        var isTopLabel = text.position.y <= 1;
+        if (!isTopLabel)
+            return { inset: inset };
+        if (typeof rawCornerRadius === 'number' && rawCornerRadius > 0) {
+            var topRadius = Math.max(0, rawCornerRadius - inset);
+            return { inset: inset, cornerRadius: [topRadius, topRadius, 0, 0] };
+        }
+        if (Array.isArray(rawCornerRadius) && rawCornerRadius.length === 4) {
+            var tl = typeof rawCornerRadius[0] === 'number' ? Math.max(0, rawCornerRadius[0] - inset) : 0;
+            var tr = typeof rawCornerRadius[1] === 'number' ? Math.max(0, rawCornerRadius[1] - inset) : 0;
+            return { inset: inset, cornerRadius: [tl, tr, 0, 0] };
+        }
+        return { inset: inset };
+    };
     KonvaRenderer.prototype.updatePosition = function (node, position) {
         if (node.position) {
             node.position({ x: position.x, y: position.y });
@@ -9731,14 +10419,19 @@ var KonvaInteraction = /** @class */ (function () {
         this.engine.setSelection(Array.from(selected));
     };
     KonvaInteraction.prototype.applyPortConstraints = function (portId, worldTarget) {
+        var _a;
         var port = this.getPortById(portId);
         if (!port)
             return worldTarget;
+        var element = this.getElementById(port.elementId);
+        if (!element)
+            return worldTarget;
         var elementPos = this.engine.getElementWorldPosition(port.elementId);
         if (!elementPos)
             return worldTarget;
         var relative = { x: worldTarget.x - elementPos.x, y: worldTarget.y - elementPos.y };
         var style = port.style;
+        var limits = (_a = element.portMovement) === null || _a === void 0 ? void 0 : _a.positionLimits;
         var constrained = __assign({}, relative);
         if ((style === null || style === void 0 ? void 0 : style.moveAxis) === 'horizontal') {
             constrained.y = port.position.y;
@@ -9751,6 +10444,18 @@ var KonvaInteraction = /** @class */ (function () {
             constrained.x = Math.min(bounds.x + bounds.width, Math.max(bounds.x, constrained.x));
             constrained.y = Math.min(bounds.y + bounds.height, Math.max(bounds.y, constrained.y));
         }
+        if (limits === null || limits === void 0 ? void 0 : limits.x) {
+            if (typeof limits.x.min === 'number')
+                constrained.x = Math.max(constrained.x, limits.x.min);
+            if (typeof limits.x.max === 'number')
+                constrained.x = Math.min(constrained.x, limits.x.max);
+        }
+        if (limits === null || limits === void 0 ? void 0 : limits.y) {
+            if (typeof limits.y.min === 'number')
+                constrained.y = Math.max(constrained.y, limits.y.min);
+            if (typeof limits.y.max === 'number')
+                constrained.y = Math.min(constrained.y, limits.y.max);
+        }
         return { x: elementPos.x + constrained.x, y: elementPos.y + constrained.y };
     };
     KonvaInteraction.prototype.resolveLinkPreviewSource = function (sourcePortId, pointer, hit) {
@@ -12323,10 +13028,11 @@ var ObstacleRoutingDemo = function () { return (React.createElement(SimpleDemo,
         } },
         React.createElement("strong", null, "Expected routing behavior"),
         React.createElement("ul", { style: { margin: '6px 0 0 16px' } },
-            React.createElement("li", null, "Links between top nodes should route around the blocking element."),
-            React.createElement("li", null, "Sibling links inside a shared parent should ignore the parent as an obstacle."),
-            React.createElement("li", null, "Parent-child links should stay within the parent and avoid the child interior when ports are on edges."),
-            React.createElement("li", null, "Grandchild links should ignore shared ancestors (parent + grandparent containers)."))) })); };
+            React.createElement("li", null, "Scenario A: the sibling link must not cross either child host interior."),
+            React.createElement("li", null, "Scenario A: sibling host ports use anchor preset `cardinal` (left/right) for deterministic multi-anchor placement."),
+            React.createElement("li", null, "Scenario B has one parent and two children with three links: parent->child, child->parent, and child->child."),
+            React.createElement("li", null, "Scenario B: ancestor endpoints resolve to `internalLinkAttachPoint`; descendant/sibling endpoints resolve to `externalLinkAttachPoint`."),
+            React.createElement("li", null, "Use `Reroute All Links` repeatedly; both routes should stay deterministic after each reroute."))) })); };
 
 var initialPayloads = {
     elementDeleted: null,
@@ -13314,6 +14020,18 @@ var demoTabs = [
         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: portBorderDemoConfig.id,
         title: portBorderDemoConfig.title,