orcasvn-react-diagrams 0.2.9 → 0.2.11

package/dist/cjs/examples.js

@@ -1164,13 +1164,21 @@ var createElementVisibilitySelectionState = function () { return ({
             style: { fill: '#e2e8f0', stroke: '#334155', strokeWidth: 2 },
         },
         {
-            id: 'policy-hidden',
-            position: { x: 700, y: 140 },
-            size: { width: 180, height: 120 },
+            id: 'policy-hidden-parent',
+            position: { x: 660, y: 110 },
+            size: { width: 220, height: 170 },
             shapeId: 'default',
             visible: false,
             style: { fill: '#fee2e2', stroke: '#dc2626', strokeWidth: 2 },
         },
+        {
+            id: 'policy-hidden-child',
+            parentId: 'policy-hidden-parent',
+            position: { x: 50, y: 58 },
+            size: { width: 120, height: 72 },
+            shapeId: 'default',
+            style: { fill: '#dcfce7', stroke: '#16a34a', strokeWidth: 2 },
+        },
     ],
     ports: [
         {
@@ -1186,9 +1194,15 @@ var createElementVisibilitySelectionState = function () { return ({
             shapeId: 'port-circle',
         },
         {
-            id: 'policy-hidden-port',
-            elementId: 'policy-hidden',
-            position: { x: 0, y: 60 },
+            id: 'policy-hidden-parent-port',
+            elementId: 'policy-hidden-parent',
+            position: { x: 0, y: 85 },
+            shapeId: 'port-circle',
+        },
+        {
+            id: 'policy-hidden-child-port',
+            elementId: 'policy-hidden-child',
+            position: { x: 120, y: 36 },
             shapeId: 'port-circle',
         },
     ],
@@ -1204,22 +1218,32 @@ var createElementVisibilitySelectionState = function () { return ({
             style: { stroke: '#2563eb', strokeWidth: 3 },
         },
         {
-            id: 'policy-hidden-link',
+            id: 'policy-hidden-parent-link',
             sourcePortId: 'policy-normal-port',
-            targetPortId: 'policy-hidden-port',
+            targetPortId: 'policy-hidden-parent-port',
             points: [
                 { x: 300, y: 220 },
-                { x: 700, y: 200 },
+                { x: 660, y: 195 },
             ],
             style: { stroke: '#dc2626', strokeWidth: 3 },
         },
+        {
+            id: 'policy-visible-child-link',
+            sourcePortId: 'policy-normal-port',
+            targetPortId: 'policy-hidden-child-port',
+            points: [
+                { x: 300, y: 220 },
+                { x: 830, y: 204 },
+            ],
+            style: { stroke: '#16a34a', strokeWidth: 3 },
+        },
     ],
     texts: [
         {
             id: 'policy-tip',
-            content: 'Blue node is normal. Slate node is visible but its body ignores click and marquee. Its port stays interactive. Hidden node, its port, and its attached red link stay in state but are suppressed from scene, selection, zoom-to-fit, and fit-to-content export.',
+            content: 'Blue node is normal. Slate node is visible but its body ignores click and marquee. Its port stays interactive. Red parent container is hidden, but its green child stays visible and interactive. Parent-owned port/text and the red parent link stay suppressed, while the green child link remains in scene, selection, zoom-to-fit, and fit-to-content export.',
             position: { x: 80, y: 72 },
-            size: { width: 760, height: 44 },
+            size: { width: 810, height: 60 },
             style: { fontSize: 14, fill: '#0f172a' },
         },
         {
@@ -1236,16 +1260,22 @@ var createElementVisibilitySelectionState = function () { return ({
         },
         {
             id: 'policy-hidden-label',
-            content: 'Hidden in state',
+            content: 'Hidden parent body',
             position: { x: 16, y: 14 },
-            ownerId: 'policy-hidden',
+            ownerId: 'policy-hidden-parent',
+        },
+        {
+            id: 'policy-hidden-child-label',
+            content: 'Visible child inside hidden parent',
+            position: { x: 10, y: 12 },
+            ownerId: 'policy-hidden-child',
         },
     ],
 }); };
 var elementVisibilitySelectionDemoConfig = {
     id: 'element-visibility-selection',
     title: 'Element Visibility + Selectability',
-    description: 'QA scene for visible-but-unselectable element bodies, hidden-in-state elements, and port/link propagation. Shift + drag marquee to confirm only eligible items are collected.',
+    description: 'QA scene for visible-but-unselectable bodies, hidden parent containers, and visible descendants that survive hidden ancestors. Shift + drag marquee to confirm only eligible items are collected.',
     createState: createElementVisibilitySelectionState,
     elementShapes: baseElementShapes,
     portShapes: basePortShapes,
@@ -1259,9 +1289,14 @@ var elementVisibilitySelectionDemoConfig = {
                 editor.setSelection([
                     'policy-normal',
                     'policy-unselectable',
-                    'policy-hidden',
+                    'policy-hidden-parent',
+                    'policy-hidden-child',
                     'policy-unselectable-port',
-                    'policy-hidden-link',
+                    'policy-hidden-parent-port',
+                    'policy-hidden-child-port',
+                    'policy-hidden-parent-link',
+                    'policy-visible-child-link',
+                    'policy-hidden-child-label',
                 ]);
             },
         },
@@ -3451,55 +3486,96 @@ var labelStyleDemoConfig = {
 var createLinkColorPoolState = function () { return ({
     elements: [
         {
-            id: 'lc-off-source',
-            position: { x: 80, y: 170 },
+            id: 'lc-load-missing-source',
+            position: { x: 80, y: 160 },
             size: { width: 190, height: 120 },
             shapeId: 'default',
         },
         {
-            id: 'lc-off-target',
-            position: { x: 350, y: 170 },
+            id: 'lc-load-missing-target',
+            position: { x: 350, y: 160 },
             size: { width: 190, height: 120 },
             shapeId: 'default',
         },
         {
-            id: 'lc-default-source',
-            position: { x: 80, y: 360 },
+            id: 'lc-load-blank-source',
+            position: { x: 80, y: 350 },
             size: { width: 190, height: 120 },
             shapeId: 'panel',
         },
         {
-            id: 'lc-default-target',
-            position: { x: 350, y: 360 },
+            id: 'lc-load-blank-target',
+            position: { x: 350, y: 350 },
             size: { width: 190, height: 120 },
             shapeId: 'panel',
         },
         {
-            id: 'lc-custom-source',
-            position: { x: 620, y: 170 },
+            id: 'lc-load-explicit-source',
+            position: { x: 80, y: 540 },
+            size: { width: 190, height: 120 },
+            shapeId: 'default',
+        },
+        {
+            id: 'lc-load-explicit-target',
+            position: { x: 350, y: 540 },
+            size: { width: 190, height: 120 },
+            shapeId: 'default',
+        },
+        {
+            id: 'lc-create-auto-source',
+            position: { x: 620, y: 250 },
             size: { width: 190, height: 120 },
             shapeId: 'default',
         },
         {
-            id: 'lc-custom-target',
-            position: { x: 620, y: 360 },
+            id: 'lc-create-auto-target',
+            position: { x: 620, y: 420 },
             size: { width: 190, height: 120 },
             shapeId: 'default',
         },
+        {
+            id: 'lc-create-explicit-source',
+            position: { x: 870, y: 250 },
+            size: { width: 190, height: 120 },
+            shapeId: 'panel',
+        },
+        {
+            id: 'lc-create-explicit-target',
+            position: { x: 870, y: 420 },
+            size: { width: 190, height: 120 },
+            shapeId: 'panel',
+        },
     ],
     ports: [
-        { id: 'lc-off-source-port', elementId: 'lc-off-source', position: { x: 170, y: 60 }, shapeId: 'port-circle' },
-        { id: 'lc-off-target-port', elementId: 'lc-off-target', position: { x: 20, y: 60 }, shapeId: 'port-circle' },
-        { id: 'lc-default-source-port', elementId: 'lc-default-source', position: { x: 170, y: 60 }, shapeId: 'port-circle' },
-        { id: 'lc-default-target-port', elementId: 'lc-default-target', position: { x: 20, y: 60 }, shapeId: 'port-circle' },
-        { id: 'lc-custom-source-port', elementId: 'lc-custom-source', position: { x: 95, y: 110 }, shapeId: 'port-circle' },
-        { id: 'lc-custom-target-port', elementId: 'lc-custom-target', position: { x: 95, y: 10 }, shapeId: 'port-circle' },
+        { id: 'lc-load-missing-source-port', elementId: 'lc-load-missing-source', position: { x: 170, y: 60 }, shapeId: 'port-circle' },
+        { id: 'lc-load-missing-target-port', elementId: 'lc-load-missing-target', position: { x: 20, y: 60 }, shapeId: 'port-circle' },
+        { id: 'lc-load-blank-source-port', elementId: 'lc-load-blank-source', position: { x: 170, y: 60 }, shapeId: 'port-circle' },
+        { id: 'lc-load-blank-target-port', elementId: 'lc-load-blank-target', position: { x: 20, y: 60 }, shapeId: 'port-circle' },
+        { id: 'lc-load-explicit-source-port', elementId: 'lc-load-explicit-source', position: { x: 170, y: 60 }, shapeId: 'port-circle' },
+        { id: 'lc-load-explicit-target-port', elementId: 'lc-load-explicit-target', position: { x: 20, y: 60 }, shapeId: 'port-circle' },
+        { id: 'lc-create-auto-source-port', elementId: 'lc-create-auto-source', position: { x: 95, y: 110 }, shapeId: 'port-circle' },
+        { id: 'lc-create-auto-target-port', elementId: 'lc-create-auto-target', position: { x: 95, y: 10 }, shapeId: 'port-circle' },
+        { id: 'lc-create-explicit-source-port', elementId: 'lc-create-explicit-source', position: { x: 95, y: 110 }, shapeId: 'port-circle' },
+        { id: 'lc-create-explicit-target-port', elementId: 'lc-create-explicit-target', position: { x: 95, y: 10 }, shapeId: 'port-circle' },
     ],
     links: [
         {
-            id: 'lc-reference-link',
-            sourcePortId: 'lc-off-source-port',
-            targetPortId: 'lc-off-target-port',
+            id: 'lc-loaded-missing-link',
+            sourcePortId: 'lc-load-missing-source-port',
+            targetPortId: 'lc-load-missing-target-port',
+            points: [],
+        },
+        {
+            id: 'lc-loaded-blank-link',
+            sourcePortId: 'lc-load-blank-source-port',
+            targetPortId: 'lc-load-blank-target-port',
+            points: [],
+            style: { stroke: '   ', strokeWidth: 2 },
+        },
+        {
+            id: 'lc-loaded-explicit-link',
+            sourcePortId: 'lc-load-explicit-source-port',
+            targetPortId: 'lc-load-explicit-target-port',
             points: [],
             style: { stroke: '#374151', strokeWidth: 2 },
         },
@@ -3507,18 +3583,20 @@ var createLinkColorPoolState = function () { return ({
     texts: [
         {
             id: 'lc-intro',
-            content: 'Use Color Mode above: Off keeps baseline link color behavior. Default Pool enables random colors from the built-in 20-color pool. Custom Pool restricts random colors to #0b7285, #e8590c, #5f3dc4.',
+            content: 'Change Color Mode, then use Reload Demo State to compare load-time fill. The left column loads one missing-stroke link, one blank-stroke link, and one explicit-stroke link. The right column actions add new links so you can compare creation-time color assignment with explicit-stroke preservation under the same policy.',
             position: { x: 80, y: 86 },
         },
-        { id: 'lc-off-label', content: 'Off scenario pair', ownerId: 'lc-off-source', position: { x: 10, y: -16 } },
-        { id: 'lc-default-label', content: 'Default-pool scenario pair', ownerId: 'lc-default-source', position: { x: 10, y: -16 } },
-        { id: 'lc-custom-label', content: 'Custom-pool scenario pair', ownerId: 'lc-custom-source', position: { x: 10, y: -16 } },
+        { id: 'lc-load-missing-label', content: 'Loaded link with missing stroke', ownerId: 'lc-load-missing-source', position: { x: 10, y: -16 } },
+        { id: 'lc-load-blank-label', content: 'Loaded link with blank stroke', ownerId: 'lc-load-blank-source', position: { x: 10, y: -16 } },
+        { id: 'lc-load-explicit-label', content: 'Loaded link with explicit stroke', ownerId: 'lc-load-explicit-source', position: { x: 10, y: -16 } },
+        { id: 'lc-create-auto-label', content: 'Add new unstyled links here', ownerId: 'lc-create-auto-source', position: { x: 10, y: -16 } },
+        { id: 'lc-create-explicit-label', content: 'Add new explicit-stroke links here', ownerId: 'lc-create-explicit-source', position: { x: 10, y: -16 } },
     ],
 }); };
 var linkColorPoolDemoConfig = {
     id: 'link-color-pool',
     title: 'Link Color Pool',
-    description: 'Verify disabled/default/custom random link-color assignment on new links.',
+    description: 'Verify off/default/custom load-time fill for missing link strokes and compare it with creation-time color assignment.',
     createState: createLinkColorPoolState,
     elementShapes: baseElementShapes,
     portShapes: basePortShapes,
@@ -3526,38 +3604,30 @@ var linkColorPoolDemoConfig = {
     defaultPortShapeId: 'port-circle',
     actions: [
         {
-            id: 'add-link-off-pair',
-            label: 'Add link (off pair)',
+            id: 'add-link-create-auto',
+            label: 'Add new unstyled link',
             run: function (editor) {
                 editor.addLink({
-                    id: "link-color-off-".concat(createId()),
-                    sourcePortId: 'lc-off-source-port',
-                    targetPortId: 'lc-off-target-port',
+                    id: "link-color-create-auto-".concat(createId()),
+                    sourcePortId: 'lc-create-auto-source-port',
+                    targetPortId: 'lc-create-auto-target-port',
                     points: [],
                 });
             },
         },
         {
-            id: 'add-link-default-pair',
-            label: 'Add link (default pair)',
+            id: 'add-link-create-explicit',
+            label: 'Add new explicit-stroke link',
             run: function (editor) {
                 editor.addLink({
-                    id: "link-color-default-".concat(createId()),
-                    sourcePortId: 'lc-default-source-port',
-                    targetPortId: 'lc-default-target-port',
-                    points: [],
-                });
-            },
-        },
-        {
-            id: 'add-link-custom-pair',
-            label: 'Add link (custom pair)',
-            run: function (editor) {
-                editor.addLink({
-                    id: "link-color-custom-".concat(createId()),
-                    sourcePortId: 'lc-custom-source-port',
-                    targetPortId: 'lc-custom-target-port',
+                    id: "link-color-create-explicit-".concat(createId()),
+                    sourcePortId: 'lc-create-explicit-source-port',
+                    targetPortId: 'lc-create-explicit-target-port',
                     points: [],
+                    style: {
+                        stroke: '#111827',
+                        strokeWidth: 2,
+                    },
                 });
             },
         },
@@ -5183,18 +5253,7 @@ var DiagramModel = /** @class */ (function () {
         var element = this.elements.get(id);
         if (!element)
             return false;
-        if (element.visible === false)
-            return false;
-        var currentParentId = element.parentId;
-        while (currentParentId) {
-            var parent_1 = this.elements.get(currentParentId);
-            if (!parent_1)
-                break;
-            if (parent_1.visible === false)
-                return false;
-            currentParentId = parent_1.parentId;
-        }
-        return true;
+        return element.visible !== false;
     };
     DiagramModel.prototype.isElementSelectable = function (id) {
         var element = this.elements.get(id);
@@ -5465,18 +5524,18 @@ var DiagramModel = /** @class */ (function () {
         }
         var current = element;
         while (current === null || current === void 0 ? void 0 : current.parentId) {
-            var parent_2 = this.elements.get(current.parentId);
-            if (!parent_2)
+            var parent_1 = this.elements.get(current.parentId);
+            if (!parent_1)
                 break;
-            var parentX = parent_2.position.x;
-            var parentY = parent_2.position.y;
-            if (parent_2.anchorCenter) {
-                parentX -= parent_2.size.width / 2;
-                parentY -= parent_2.size.height / 2;
+            var parentX = parent_1.position.x;
+            var parentY = parent_1.position.y;
+            if (parent_1.anchorCenter) {
+                parentX -= parent_1.size.width / 2;
+                parentY -= parent_1.size.height / 2;
             }
             x += parentX;
             y += parentY;
-            current = parent_2;
+            current = parent_1;
         }
         return { x: x, y: y };
     };
@@ -8019,6 +8078,10 @@ var DEFAULT_LINK_COLOR_POOL = [
     '#9c755f',
     '#bab0ab',
 ];
+var hasUsableLinkStroke = function (style) {
+    var stroke = style === null || style === void 0 ? void 0 : style.stroke;
+    return stroke !== undefined && stroke !== null && "".concat(stroke).trim().length > 0;
+};
 var normalizeLinkColorPoolPolicy = function (policy) {
     var _a;
     var enabled = Boolean(policy === null || policy === void 0 ? void 0 : policy.enabled);
@@ -8026,7 +8089,11 @@ var normalizeLinkColorPoolPolicy = function (policy) {
         .map(function (color) { return color.trim(); })
         .filter(function (color) { return color.length > 0; });
     var colors = normalizedColors.length > 0 ? normalizedColors : __spreadArray([], DEFAULT_LINK_COLOR_POOL, true);
-    return { enabled: enabled, colors: colors };
+    return {
+        enabled: enabled,
+        colors: colors,
+        assignOnLoadWhenMissingStroke: Boolean(policy === null || policy === void 0 ? void 0 : policy.assignOnLoadWhenMissingStroke),
+    };
 };
 var DiagramEngine = /** @class */ (function () {
     function DiagramEngine(config) {
@@ -8072,8 +8139,9 @@ var DiagramEngine = /** @class */ (function () {
     DiagramEngine.prototype.load = function (state) {
         var _this = this;
         var patches = this.commandQueue.run(createLoadCommand(state), this.model);
+        var linkColorPatches = this.assignOptionalLinkColorsOnLoad();
         var mutationPatches = this.mutationPipeline.run({
-            basePatches: patches,
+            basePatches: __spreadArray(__spreadArray([], patches, true), linkColorPatches, true),
             layoutSteps: [function () { return _this.applyAllLayouts(); }],
             includeEmptyLinkRouting: true,
         });
@@ -9431,21 +9499,41 @@ var DiagramEngine = /** @class */ (function () {
         return this.linkRoutingService.routeLinksWithEmptyPoints();
     };
     DiagramEngine.prototype.applyOptionalLinkColor = function (link) {
-        if (!this.linkColorPoolPolicy.enabled)
-            return link;
-        var existingStyle = link.style;
-        var hasExplicitStroke = existingStyle !== undefined &&
-            Object.prototype.hasOwnProperty.call(existingStyle, 'stroke') &&
-            existingStyle.stroke !== undefined &&
-            existingStyle.stroke !== null &&
-            "".concat(existingStyle.stroke).trim().length > 0;
-        if (hasExplicitStroke)
+        var style = this.resolveOptionalLinkColorStyle(link.style);
+        if (style === link.style)
             return link;
+        return __assign(__assign({}, link), { style: style });
+    };
+    DiagramEngine.prototype.assignOptionalLinkColorsOnLoad = function () {
+        var _this = this;
+        if (!this.linkColorPoolPolicy.enabled || !this.linkColorPoolPolicy.assignOnLoadWhenMissingStroke) {
+            return [];
+        }
+        var patches = [];
+        this.model.links.forEach(function (link) {
+            var style = _this.resolveOptionalLinkColorStyle(link.style);
+            if (style === link.style)
+                return;
+            link.style = style;
+            patches.push(patchUpdate('link', link.id, { style: style }));
+        });
+        return patches;
+    };
+    DiagramEngine.prototype.resolveOptionalLinkColorStyle = function (style) {
+        if (!this.linkColorPoolPolicy.enabled || hasUsableLinkStroke(style)) {
+            return style;
+        }
+        var stroke = this.pickOptionalLinkColor();
+        if (!stroke)
+            return style;
+        return __assign(__assign({}, (style !== null && style !== void 0 ? style : {})), { stroke: stroke });
+    };
+    DiagramEngine.prototype.pickOptionalLinkColor = function () {
         var colors = this.linkColorPoolPolicy.colors;
         if (colors.length === 0)
-            return link;
+            return undefined;
         var index = Math.max(0, Math.min(colors.length - 1, Math.floor(Math.random() * colors.length)));
-        return __assign(__assign({}, link), { style: __assign(__assign({}, (existingStyle !== null && existingStyle !== void 0 ? existingStyle : {})), { stroke: colors[index] }) });
+        return colors[index];
     };
     DiagramEngine.prototype.refreshLinksForRenderCycle = function () {
         if (this.linkRouteRefreshPolicy.mode !== 'redraw-two-endpoint-change')
@@ -13591,22 +13679,10 @@ var resolveViewportFitOptions = function (options) {
 };
 var clamp = function (value, min, max) { return Math.max(min, Math.min(max, value)); };
 var isElementVisibleInState = function (elementId, elementsById) {
-    var _a, _b;
     var element = elementsById.get(elementId);
     if (!element)
         return false;
-    if (element.visible === false)
-        return false;
-    var currentParentId = (_a = element.parentId) !== null && _a !== void 0 ? _a : null;
-    while (currentParentId) {
-        var parent_1 = elementsById.get(currentParentId);
-        if (!parent_1)
-            break;
-        if (parent_1.visible === false)
-            return false;
-        currentParentId = (_b = parent_1.parentId) !== null && _b !== void 0 ? _b : null;
-    }
-    return true;
+    return element.visible !== false;
 };
 var isPortVisibleInState = function (portId, portsById, elementsById) {
     var port = portsById.get(portId);
@@ -13635,6 +13711,103 @@ var isTextVisibleInState = function (text, elementsById, portsById, linksById) {
         return isLinkVisibleInState(text.ownerId, linksById, portsById, elementsById);
     return true;
 };
+var resolveElementWorldPositionInState = function (elementId, elementsById) {
+    var element = elementsById.get(elementId);
+    if (!element)
+        return null;
+    var x = element.position.x;
+    var y = element.position.y;
+    if (element.anchorCenter) {
+        x -= element.size.width / 2;
+        y -= element.size.height / 2;
+    }
+    var current = element;
+    while (current.parentId) {
+        var parent_1 = elementsById.get(current.parentId);
+        if (!parent_1)
+            break;
+        var parentX = parent_1.position.x;
+        var parentY = parent_1.position.y;
+        if (parent_1.anchorCenter) {
+            parentX -= parent_1.size.width / 2;
+            parentY -= parent_1.size.height / 2;
+        }
+        x += parentX;
+        y += parentY;
+        current = parent_1;
+    }
+    return { x: x, y: y };
+};
+var resolvePortWorldPositionInState = function (portId, portsById, elementsById) {
+    var port = portsById.get(portId);
+    if (!port)
+        return null;
+    var elementPosition = resolveElementWorldPositionInState(port.elementId, elementsById);
+    if (!elementPosition)
+        return __assign({}, port.position);
+    return {
+        x: elementPosition.x + port.position.x,
+        y: elementPosition.y + port.position.y,
+    };
+};
+var resolveLinkMidpointInState = function (link) {
+    var points = link.points;
+    if (points.length === 0)
+        return { x: 0, y: 0 };
+    if (points.length === 1)
+        return __assign({}, points[0]);
+    var total = 0;
+    for (var i = 1; i < points.length; i += 1) {
+        total += distance(points[i - 1], points[i]);
+    }
+    var halfway = total / 2;
+    var traveled = 0;
+    for (var i = 1; i < points.length; i += 1) {
+        var segment = distance(points[i - 1], points[i]);
+        if (traveled + segment >= halfway) {
+            var ratio = segment === 0 ? 0 : (halfway - traveled) / segment;
+            return {
+                x: points[i - 1].x + (points[i].x - points[i - 1].x) * ratio,
+                y: points[i - 1].y + (points[i].y - points[i - 1].y) * ratio,
+            };
+        }
+        traveled += segment;
+    }
+    return __assign({}, points[points.length - 1]);
+};
+var resolveTextWorldPositionInState = function (text, elementsById, portsById, linksById) {
+    if (!text.ownerId)
+        return __assign({}, text.position);
+    if (elementsById.has(text.ownerId)) {
+        var elementPosition = resolveElementWorldPositionInState(text.ownerId, elementsById);
+        if (!elementPosition)
+            return __assign({}, text.position);
+        return {
+            x: elementPosition.x + text.position.x,
+            y: elementPosition.y + text.position.y,
+        };
+    }
+    if (portsById.has(text.ownerId)) {
+        var portPosition = resolvePortWorldPositionInState(text.ownerId, portsById, elementsById);
+        if (!portPosition)
+            return __assign({}, text.position);
+        return {
+            x: portPosition.x + text.position.x,
+            y: portPosition.y + text.position.y,
+        };
+    }
+    if (linksById.has(text.ownerId)) {
+        var link = linksById.get(text.ownerId);
+        if (!link)
+            return __assign({}, text.position);
+        var midpoint = resolveLinkMidpointInState(link);
+        return {
+            x: midpoint.x + text.position.x,
+            y: midpoint.y + text.position.y,
+        };
+    }
+    return __assign({}, text.position);
+};
 var resolveStateWorldBounds = function (state) {
     var bounds = createBounds();
     var elementsById = new Map(state.elements.map(function (element) { return [element.id, element]; }));
@@ -13643,20 +13816,26 @@ var resolveStateWorldBounds = function (state) {
     state.elements.forEach(function (element) {
         if (!isElementVisibleInState(element.id, elementsById))
             return;
-        includeRect(bounds, element.position.x, element.position.y, element.size.width, element.size.height);
+        var position = resolveElementWorldPositionInState(element.id, elementsById);
+        if (!position)
+            return;
+        includeRect(bounds, position.x, position.y, element.size.width, element.size.height);
     });
     state.ports.forEach(function (port) {
         var _a;
         if (!isPortVisibleInState(port.id, portsById, elementsById))
             return;
+        var position = resolvePortWorldPositionInState(port.id, portsById, elementsById);
+        if (!position)
+            return;
         var size = port.size;
         if (!size) {
-            expandBounds(bounds, port.position.x, port.position.y);
+            expandBounds(bounds, position.x, position.y);
             return;
         }
         var anchorCenter = (_a = port.anchorCenter) !== null && _a !== void 0 ? _a : true;
-        var x = anchorCenter ? port.position.x - size.width / 2 : port.position.x;
-        var y = anchorCenter ? port.position.y - size.height / 2 : port.position.y;
+        var x = anchorCenter ? position.x - size.width / 2 : position.x;
+        var y = anchorCenter ? position.y - size.height / 2 : position.y;
         includeRect(bounds, x, y, size.width, size.height);
     });
     state.links.forEach(function (link) {
@@ -13671,7 +13850,8 @@ var resolveStateWorldBounds = function (state) {
         if (!isTextVisibleInState(text, elementsById, portsById, linksById))
             return;
         var offset = (_a = text.displayOffset) !== null && _a !== void 0 ? _a : { x: 0, y: 0 };
-        var position = { x: text.position.x + offset.x, y: text.position.y + offset.y };
+        var worldPosition = resolveTextWorldPositionInState(text, elementsById, portsById, linksById);
+        var position = { x: worldPosition.x + offset.x, y: worldPosition.y + offset.y };
         var clipSize = text.displayClipSize;
         var size = clipSize !== null && clipSize !== void 0 ? clipSize : text.size;
         if (size) {
@@ -13688,7 +13868,10 @@ var resolveElementWorldBounds = function (state) {
     state.elements.forEach(function (element) {
         if (!isElementVisibleInState(element.id, elementsById))
             return;
-        includeRect(bounds, element.position.x, element.position.y, element.size.width, element.size.height);
+        var position = resolveElementWorldPositionInState(element.id, elementsById);
+        if (!position)
+            return;
+        includeRect(bounds, position.x, position.y, element.size.width, element.size.height);
     });
     return hasBounds(bounds) ? bounds : null;
 };
@@ -16374,9 +16557,10 @@ var LinkColorPoolDemo = function () {
     var linkColorPoolPolicy = React.useMemo(function () {
         if (mode === 'off')
             return undefined;
-        if (mode === 'default')
-            return { enabled: true };
-        return { enabled: true, colors: customPool };
+        if (mode === 'default') {
+            return { enabled: true, assignOnLoadWhenMissingStroke: true };
+        }
+        return { enabled: true, assignOnLoadWhenMissingStroke: true, colors: customPool };
     }, [mode]);
     return (React.createElement(SimpleDemo, { demo: linkColorPoolDemoConfig, linkColorPoolPolicy: linkColorPoolPolicy, beforeStage: React.createElement("div", { style: {
                 marginBottom: 12,
@@ -16388,9 +16572,10 @@ var LinkColorPoolDemo = function () {
             React.createElement("label", { htmlFor: "link-color-mode", style: { display: 'inline-flex', alignItems: 'center', gap: 8, fontWeight: 600 } },
                 "Color Mode",
                 React.createElement("select", { id: "link-color-mode", value: mode, onChange: function (event) { return setMode(event.target.value); } },
-                    React.createElement("option", { value: "off" }, "Off (default behavior)"),
-                    React.createElement("option", { value: "default" }, "Default 20-color pool"),
-                    React.createElement("option", { value: "custom" }, "Custom pool (#0b7285, #e8590c, #5f3dc4)")))) }));
+                    React.createElement("option", { value: "off" }, "Off (no load fill)"),
+                    React.createElement("option", { value: "default" }, "Default pool load fill"),
+                    React.createElement("option", { value: "custom" }, "Custom pool load fill (#0b7285, #e8590c, #5f3dc4)"))),
+            React.createElement("p", { style: { margin: '8px 0 0', fontSize: 13 } }, "Switching modes recreates the demo so the seeded loaded links can prove whether missing and blank strokes are filled, while explicit loaded strokes stay untouched.")) }));
 };
 
 var sidePositions = {