orcasvn-react-diagrams 0.2.9 → 0.2.10

package/CHANGELOG.md

@@ -2,6 +2,15 @@
 
 All notable changes to this project are documented in this file.
 
+## [0.2.10] - 2026-05-27
+
+### Changed
+- `ElementData.visible = false` now hides only the element body from built-in render, hit testing, selection persistence, and fit/export helpers instead of suppressing descendant elements through hidden ancestors.
+- Visible descendants under hidden parents now remain rendered, selectable, draggable, and included in fit/export bounds, while direct-owned parent ports/texts still follow the hidden parent and links remain visible when their endpoint ports are visible.
+
+### Docs
+- Updated release highlights, API/invariant docs, integration guidance, commands/events notes, and machine-readable contract artifacts for `v0.2.10`.
+
 ## [0.2.9] - 2026-05-27
 
 ### Added

package/README.md

@@ -30,13 +30,14 @@ editor.addElement({
 });
 ```
 
-## Release Highlights (v0.2.9)
+## Release Highlights (v0.2.10)
 
-- Includes all completed `v0.2.1` through `v0.2.8` work, plus `v0.2.9` updates.
-- `v0.2.9` element visibility/selectability policy:
-  - `ElementData.visible = false` keeps the element in state while removing it from built-in render, hit testing, selection, and fit/export bounds
+- Includes all completed `v0.2.1` through `v0.2.9` work, plus `v0.2.10` updates.
+- `v0.2.10` element visibility/selectability policy:
+  - `ElementData.visible = false` keeps the element in state while removing its own body from built-in render, hit testing, selection, and fit/export bounds
+  - visible descendant elements under a hidden parent remain rendered and interactive if their own `visible` flag stays enabled
+  - direct-owned parent ports/texts still follow the hidden parent, and links remain visible when their endpoint ports are visible
   - `ElementData.selectable = false` keeps the element visible while preventing built-in element-body click/marquee/programmatic selection from retaining that element id
-  - owned ports/texts and endpoint-dependent links now follow the same hidden-scene visibility rules
 
 ## API Docs
 

package/ai/api-contract.json

@@ -227,7 +227,9 @@
       },
       "semantics": [
         "visible=false hides the element body from built-in render, hit testing, marquee selection, persisted selection, zoomToFitElements, and exportImage fit-to-content bounds",
-        "hidden-scene propagation also hides owned ports, owned texts, and links whose endpoint ports belong to hidden elements",
+        "descendant elements keep resolving visibility from their own visible flag even when an ancestor element is hidden",
+        "direct-owned ports and direct-owned texts still hide with their hidden parent element",
+        "links remain visible whenever both endpoint ports remain visible, including links attached to visible descendants under hidden parents",
         "selectable=false blocks built-in element-body click selection, marquee selection, and programmatic setSelection/toggleSelection from retaining that element id",
         "selectable=false does not hide the element"
       ]

package/ai/invariants.json

@@ -15,7 +15,7 @@
   "entityRules": {
     "element": [
       "child element positions are parent-relative when parentId is set",
-      "element visible-state is enabled by default and hidden ancestors suppress descendant element visibility",
+      "element visible-state is enabled by default and visible=false hides only that element body while descendants resolve visibility from their own visible flag",
       "element selectable-state is enabled by default and selectable=false prevents the element id from persisting in selection state",
       "deleting an element removes its ports, links via ports, and owned texts"
     ],
@@ -39,7 +39,7 @@
   },
   "eventRules": [
     "mutations emit change with patches and full state snapshot",
-    "setSelection/toggleSelection normalize away hidden scene members and selectable=false element ids before emitting selection",
+    "setSelection/toggleSelection normalize away hidden element bodies, direct-owned hidden artifacts, and selectable=false element ids before emitting selection",
     "setSelection emits selection plus derived selected entity events",
     "setViewport emits viewport patch without immediate render"
   ],

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',
                 ]);
             },
         },
@@ -5183,18 +5218,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 +5489,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 };
     };
@@ -13591,22 +13615,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 +13647,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 +13752,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 +13786,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 +13804,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;
 };

package/dist/cjs/index.js

@@ -536,18 +536,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);
@@ -818,18 +807,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 };
     };
@@ -9438,22 +9427,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);
@@ -9482,6 +9459,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]; }));
@@ -9490,20 +9564,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) {
@@ -9518,7 +9598,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) {
@@ -9535,7 +9616,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;
 };