orcasvn-react-diagrams 0.2.8 → 0.2.10

package/dist/esm/examples.js

@@ -1144,6 +1144,163 @@ var selectionDemoConfig = ({
     ],
 });
 
+var createElementVisibilitySelectionState = function () { return ({
+    elements: [
+        {
+            id: 'policy-normal',
+            position: { x: 120, y: 160 },
+            size: { width: 180, height: 120 },
+            shapeId: 'default',
+            style: { fill: '#dbeafe', stroke: '#1d4ed8', strokeWidth: 2 },
+        },
+        {
+            id: 'policy-unselectable',
+            position: { x: 410, y: 160 },
+            size: { width: 180, height: 120 },
+            shapeId: 'default',
+            selectable: false,
+            style: { fill: '#e2e8f0', stroke: '#334155', strokeWidth: 2 },
+        },
+        {
+            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: [
+        {
+            id: 'policy-normal-port',
+            elementId: 'policy-normal',
+            position: { x: 180, y: 60 },
+            shapeId: 'port-circle',
+        },
+        {
+            id: 'policy-unselectable-port',
+            elementId: 'policy-unselectable',
+            position: { x: 0, y: 60 },
+            shapeId: 'port-circle',
+        },
+        {
+            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',
+        },
+    ],
+    links: [
+        {
+            id: 'policy-visible-link',
+            sourcePortId: 'policy-normal-port',
+            targetPortId: 'policy-unselectable-port',
+            points: [
+                { x: 300, y: 220 },
+                { x: 410, y: 220 },
+            ],
+            style: { stroke: '#2563eb', strokeWidth: 3 },
+        },
+        {
+            id: 'policy-hidden-parent-link',
+            sourcePortId: 'policy-normal-port',
+            targetPortId: 'policy-hidden-parent-port',
+            points: [
+                { x: 300, y: 220 },
+                { 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. 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: 810, height: 60 },
+            style: { fontSize: 14, fill: '#0f172a' },
+        },
+        {
+            id: 'policy-normal-label',
+            content: 'Normal selectable element',
+            position: { x: 16, y: 14 },
+            ownerId: 'policy-normal',
+        },
+        {
+            id: 'policy-unselectable-label',
+            content: 'Visible but body is unselectable',
+            position: { x: 16, y: 14 },
+            ownerId: 'policy-unselectable',
+        },
+        {
+            id: 'policy-hidden-label',
+            content: 'Hidden parent body',
+            position: { x: 16, y: 14 },
+            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 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,
+    defaultElementShapeId: 'default',
+    defaultPortShapeId: 'port-circle',
+    actions: [
+        {
+            id: 'policy-filtered-selection',
+            label: 'Try filtered API selection',
+            run: function (editor) {
+                editor.setSelection([
+                    'policy-normal',
+                    'policy-unselectable',
+                    'policy-hidden-parent',
+                    'policy-hidden-child',
+                    'policy-unselectable-port',
+                    'policy-hidden-parent-port',
+                    'policy-hidden-child-port',
+                    'policy-hidden-parent-link',
+                    'policy-visible-child-link',
+                    'policy-hidden-child-label',
+                ]);
+            },
+        },
+    ],
+};
+
 var createEventHandlersState = function () { return ({
     elements: [
         {
@@ -4610,6 +4767,8 @@ var ElementModel = /** @class */ (function () {
         this.style = data.style;
         this.portIds = data.portIds ? __spreadArray([], data.portIds, true) : [];
         this.textIds = data.textIds ? __spreadArray([], data.textIds, true) : [];
+        this.visible = data.visible;
+        this.selectable = data.selectable;
         this.parentId = (_a = data.parentId) !== null && _a !== void 0 ? _a : null;
         this.moveMode = data.moveMode;
         this.anchorCenter = data.anchorCenter;
@@ -4648,6 +4807,8 @@ var ElementModel = /** @class */ (function () {
             style: this.style,
             portIds: __spreadArray([], this.portIds, true),
             textIds: __spreadArray([], this.textIds, true),
+            visible: this.visible,
+            selectable: this.selectable,
             parentId: this.parentId,
             moveMode: this.moveMode,
             anchorCenter: this.anchorCenter,
@@ -5051,6 +5212,18 @@ var DiagramModel = /** @class */ (function () {
     DiagramModel.prototype.getElement = function (id) {
         return this.elements.get(id);
     };
+    DiagramModel.prototype.isElementVisible = function (id) {
+        var element = this.elements.get(id);
+        if (!element)
+            return false;
+        return element.visible !== false;
+    };
+    DiagramModel.prototype.isElementSelectable = function (id) {
+        var element = this.elements.get(id);
+        if (!element)
+            return false;
+        return this.isElementVisible(id) && element.selectable !== false;
+    };
     DiagramModel.prototype.setElementLayout = function (id, layout) {
         var element = this.elements.get(id);
         if (!element)
@@ -5069,6 +5242,12 @@ var DiagramModel = /** @class */ (function () {
     DiagramModel.prototype.getPort = function (id) {
         return this.ports.get(id);
     };
+    DiagramModel.prototype.isPortVisible = function (id) {
+        var port = this.ports.get(id);
+        if (!port)
+            return false;
+        return this.isElementVisible(port.elementId);
+    };
     DiagramModel.prototype.getPortWorldPosition = function (id) {
         var port = this.ports.get(id);
         if (!port)
@@ -5084,6 +5263,16 @@ var DiagramModel = /** @class */ (function () {
     DiagramModel.prototype.getLink = function (id) {
         return this.links.get(id);
     };
+    DiagramModel.prototype.isLinkVisible = function (id) {
+        var link = this.links.get(id);
+        if (!link)
+            return false;
+        var sourcePort = this.ports.get(link.sourcePortId);
+        var targetPort = this.ports.get(link.targetPortId);
+        var sourceVisible = sourcePort ? this.isPortVisible(sourcePort.id) : true;
+        var targetVisible = targetPort ? this.isPortVisible(targetPort.id) : true;
+        return sourceVisible && targetVisible;
+    };
     DiagramModel.prototype.getLinkMidpoint = function (id) {
         var link = this.links.get(id);
         if (!link)
@@ -5093,6 +5282,23 @@ var DiagramModel = /** @class */ (function () {
     DiagramModel.prototype.getText = function (id) {
         return this.texts.get(id);
     };
+    DiagramModel.prototype.isTextVisible = function (id) {
+        var text = this.texts.get(id);
+        if (!text)
+            return false;
+        if (!text.ownerId)
+            return true;
+        if (this.elements.has(text.ownerId)) {
+            return this.isElementVisible(text.ownerId);
+        }
+        if (this.ports.has(text.ownerId)) {
+            return this.isPortVisible(text.ownerId);
+        }
+        if (this.links.has(text.ownerId)) {
+            return this.isLinkVisible(text.ownerId);
+        }
+        return true;
+    };
     DiagramModel.prototype.getTextWorldPosition = function (id) {
         var text = this.texts.get(id);
         if (!text)
@@ -8407,16 +8613,38 @@ var DiagramEngine = /** @class */ (function () {
         this.emitEntityDeletionEvents(removal.removed);
     };
     DiagramEngine.prototype.setSelection = function (ids) {
-        this.selection.set(ids);
+        this.selection.set(this.normalizeSelectionIds(ids));
         this.emitSelection();
     };
     DiagramEngine.prototype.toggleSelection = function (id) {
-        this.selection.toggle(id);
+        var current = new Set(this.selection.get());
+        if (current.has(id)) {
+            current.delete(id);
+        }
+        else if (this.isSelectableId(id)) {
+            current.add(id);
+        }
+        this.selection.set(Array.from(current));
         this.emitSelection();
     };
     DiagramEngine.prototype.getSelection = function () {
         return this.selection.get();
     };
+    DiagramEngine.prototype.isElementVisible = function (id) {
+        return this.model.isElementVisible(id);
+    };
+    DiagramEngine.prototype.isElementSelectable = function (id) {
+        return this.model.isElementSelectable(id);
+    };
+    DiagramEngine.prototype.isPortVisible = function (id) {
+        return this.model.isPortVisible(id);
+    };
+    DiagramEngine.prototype.isLinkVisible = function (id) {
+        return this.model.isLinkVisible(id);
+    };
+    DiagramEngine.prototype.isTextVisible = function (id) {
+        return this.model.isTextVisible(id);
+    };
     DiagramEngine.prototype.getElementWorldPosition = function (id) {
         return this.model.getElementWorldPosition(id);
     };
@@ -8678,11 +8906,15 @@ var DiagramEngine = /** @class */ (function () {
         var _this = this;
         var _a;
         var allPatches = this.appendTextLayoutPatches(patches, (_a = options === null || options === void 0 ? void 0 : options.emitTextUpdated) !== null && _a !== void 0 ? _a : true);
+        var selectionChanged = this.syncSelectionToPolicies();
         var state = this.model.toState();
         this.events.emit('change', { patches: allPatches, state: state });
-        if ((options === null || options === void 0 ? void 0 : options.render) === false)
-            return;
-        this.scheduler.requestRender(function () { return _this.renderer.render(_this.model); });
+        if ((options === null || options === void 0 ? void 0 : options.render) !== false) {
+            this.scheduler.requestRender(function () { return _this.renderer.render(_this.model); });
+        }
+        if (selectionChanged) {
+            this.emitSelection();
+        }
     };
     DiagramEngine.prototype.appendTextLayoutPatches = function (patches, emitTextUpdated) {
         var _this = this;
@@ -9128,6 +9360,31 @@ var DiagramEngine = /** @class */ (function () {
         });
         this.renderer.renderSelection(selectedIds);
     };
+    DiagramEngine.prototype.normalizeSelectionIds = function (ids) {
+        var _this = this;
+        return ids.filter(function (id, index) { return ids.indexOf(id) === index && _this.isSelectableId(id); });
+    };
+    DiagramEngine.prototype.isSelectableId = function (id) {
+        if (this.model.getElement(id))
+            return this.model.isElementSelectable(id);
+        if (this.model.getPort(id))
+            return this.model.isPortVisible(id);
+        if (this.model.getLink(id))
+            return this.model.isLinkVisible(id);
+        if (this.model.getText(id))
+            return this.model.isTextVisible(id);
+        return false;
+    };
+    DiagramEngine.prototype.syncSelectionToPolicies = function () {
+        var current = this.selection.get();
+        var normalized = this.normalizeSelectionIds(current);
+        if (current.length === normalized.length &&
+            current.every(function (id, index) { return id === normalized[index]; })) {
+            return false;
+        }
+        this.selection.set(normalized);
+        return true;
+    };
     DiagramEngine.prototype.applyLayoutForParent = function (parentId, options) {
         return this.autoLayoutService.applyLayoutForParent(parentId, options);
     };
@@ -10045,7 +10302,9 @@ var KonvaRenderer = /** @class */ (function () {
     };
     KonvaRenderer.prototype.syncElements = function (model) {
         var _this = this;
-        var elements = Array.from(model.elements.values()).map(function (element, index) { return ({
+        var elements = Array.from(model.elements.values())
+            .filter(function (element) { return model.isElementVisible(element.id); })
+            .map(function (element, index) { return ({
             element: element,
             depth: _this.getElementDepth(model, element),
             order: index,
@@ -10078,6 +10337,10 @@ var KonvaRenderer = /** @class */ (function () {
                 node.setAttrs({ __depth: depth });
             }
         });
+        var visibleElementIds = new Set(elements.map(function (_a) {
+            var element = _a.element;
+            return element.id;
+        }));
         elements.forEach(function (_a) {
             var _b;
             var element = _a.element;
@@ -10086,7 +10349,7 @@ var KonvaRenderer = /** @class */ (function () {
         });
         Array.from(this.elementNodes.keys()).forEach(function (id) {
             var _a;
-            if (!model.elements.has(id)) {
+            if (!visibleElementIds.has(id)) {
                 var node = _this.elementNodes.get(id);
                 (_a = node === null || node === void 0 ? void 0 : node.destroy) === null || _a === void 0 ? void 0 : _a.call(node);
                 _this.elementNodes.delete(id);
@@ -10109,7 +10372,7 @@ var KonvaRenderer = /** @class */ (function () {
     };
     KonvaRenderer.prototype.syncPorts = function (model) {
         var _this = this;
-        var ports = Array.from(model.ports.values());
+        var ports = Array.from(model.ports.values()).filter(function (port) { return model.isPortVisible(port.id); });
         ports.forEach(function (port) {
             var _a, _b, _c, _d, _e;
             var data = port.toData();
@@ -10127,9 +10390,10 @@ var KonvaRenderer = /** @class */ (function () {
             _this.updatePosition(node, position);
             _this.applyPortOrientation(node, data, position, model);
         });
+        var visiblePortIds = new Set(ports.map(function (port) { return port.id; }));
         Array.from(this.portNodes.keys()).forEach(function (id) {
             var _a;
-            if (!model.ports.has(id)) {
+            if (!visiblePortIds.has(id)) {
                 var node = _this.portNodes.get(id);
                 (_a = node === null || node === void 0 ? void 0 : node.destroy) === null || _a === void 0 ? void 0 : _a.call(node);
                 _this.portNodes.delete(id);
@@ -10140,7 +10404,7 @@ var KonvaRenderer = /** @class */ (function () {
     };
     KonvaRenderer.prototype.syncLinks = function (model) {
         var _this = this;
-        var links = Array.from(model.links.values());
+        var links = Array.from(model.links.values()).filter(function (link) { return model.isLinkVisible(link.id); });
         links.forEach(function (link) {
             var _a, _b;
             var node = _this.linkNodes.get(link.id);
@@ -10151,9 +10415,10 @@ var KonvaRenderer = /** @class */ (function () {
             }
             _this.updateLine(node, link.toData());
         });
+        var visibleLinkIds = new Set(links.map(function (link) { return link.id; }));
         Array.from(this.linkNodes.keys()).forEach(function (id) {
             var _a;
-            if (!model.links.has(id)) {
+            if (!visibleLinkIds.has(id)) {
                 var node = _this.linkNodes.get(id);
                 (_a = node === null || node === void 0 ? void 0 : node.destroy) === null || _a === void 0 ? void 0 : _a.call(node);
                 _this.linkNodes.delete(id);
@@ -10164,7 +10429,7 @@ var KonvaRenderer = /** @class */ (function () {
     };
     KonvaRenderer.prototype.syncTexts = function (model) {
         var _this = this;
-        var texts = Array.from(model.texts.values());
+        var texts = Array.from(model.texts.values()).filter(function (text) { return model.isTextVisible(text.id); });
         texts.forEach(function (text) {
             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);
@@ -10253,9 +10518,10 @@ var KonvaRenderer = /** @class */ (function () {
                 _this.textBackgroundNodes.delete(text.id);
             }
         });
+        var visibleTextIds = new Set(texts.map(function (text) { return text.id; }));
         Array.from(this.textNodes.keys()).forEach(function (id) {
             var _a, _b;
-            if (!model.texts.has(id)) {
+            if (!visibleTextIds.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);
@@ -11247,15 +11513,21 @@ var KonvaInteraction = /** @class */ (function () {
     KonvaInteraction.prototype.normalizeHit = function (hit) {
         if (!hit || hit.type === 'none')
             return null;
-        if (hit.type === 'port' ||
-            hit.type === 'link' ||
-            hit.type === 'text' ||
-            hit.type === 'resize-handle' ||
+        if (hit.type === 'port') {
+            return this.engine.isPortVisible(hit.id) ? hit : null;
+        }
+        if (hit.type === 'link') {
+            return this.engine.isLinkVisible(hit.id) ? hit : null;
+        }
+        if (hit.type === 'text') {
+            return this.engine.isTextVisible(hit.id) ? hit : null;
+        }
+        if (hit.type === 'resize-handle' ||
             hit.type === 'link-handle' ||
             hit.type === 'shape-hover-control') {
             return hit;
         }
-        return __assign(__assign({}, hit), { type: 'element' });
+        return this.engine.isElementSelectable(hit.id) ? __assign(__assign({}, hit), { type: 'element' }) : null;
     };
     KonvaInteraction.prototype.resolveHit = function (point) {
         var _this = this;
@@ -11321,6 +11593,8 @@ var KonvaInteraction = /** @class */ (function () {
         var best = null;
         state.elements.forEach(function (element) {
             var _a, _b, _c;
+            if (!_this.engine.isElementSelectable(element.id))
+                return;
             var world = (_a = _this.engine.getElementWorldPosition(element.id)) !== null && _a !== void 0 ? _a : element.position;
             var rotation = _this.engine.getElementRotation(element.id);
             if (!pointInRotatedRect(point, world, element.size, rotation, (_b = element.anchorCenter) !== null && _b !== void 0 ? _b : false))
@@ -11350,6 +11624,8 @@ var KonvaInteraction = /** @class */ (function () {
         var bestDistance = Number.POSITIVE_INFINITY;
         links.forEach(function (link) {
             var _a, _b;
+            if (!_this.engine.isLinkVisible(link.id))
+                return;
             if (link.points.length < 2)
                 return;
             var tolerance = ((_b = (_a = link.style) === null || _a === void 0 ? void 0 : _a.hitStrokeWidth) !== null && _b !== void 0 ? _b : 15) / 2;
@@ -12364,6 +12640,8 @@ var KonvaInteraction = /** @class */ (function () {
         };
         state.elements.forEach(function (element) {
             var _a, _b;
+            if (!_this.engine.isElementSelectable(element.id))
+                return;
             var position = (_a = _this.engine.getElementWorldPosition(element.id)) !== null && _a !== void 0 ? _a : element.position;
             var rotation = _this.engine.getElementRotation(element.id);
             var anchorCenter = (_b = element.anchorCenter) !== null && _b !== void 0 ? _b : false;
@@ -12381,6 +12659,8 @@ var KonvaInteraction = /** @class */ (function () {
         });
         state.ports.forEach(function (port) {
             var _a;
+            if (!_this.engine.isPortVisible(port.id))
+                return;
             var position = (_a = _this.engine.getPortWorldPosition(port.id)) !== null && _a !== void 0 ? _a : port.position;
             if (containsPoint(position)) {
                 selected.add(port.id);
@@ -12388,6 +12668,8 @@ var KonvaInteraction = /** @class */ (function () {
         });
         state.texts.forEach(function (text) {
             var _a, _b, _c, _d, _e;
+            if (!_this.engine.isTextVisible(text.id))
+                return;
             var position = (_a = _this.engine.getTextWorldPosition(text.id)) !== null && _a !== void 0 ? _a : text.position;
             var width = (_c = (_b = text.size) === null || _b === void 0 ? void 0 : _b.width) !== null && _c !== void 0 ? _c : 0;
             var height = (_e = (_d = text.size) === null || _d === void 0 ? void 0 : _d.height) !== null && _e !== void 0 ? _e : 0;
@@ -12397,6 +12679,8 @@ var KonvaInteraction = /** @class */ (function () {
             }
         });
         state.links.forEach(function (link) {
+            if (!_this.engine.isLinkVisible(link.id))
+                return;
             if (link.points.length === 0)
                 return;
             var xs = link.points.map(function (point) { return point.x; });
@@ -13328,32 +13612,180 @@ var resolveViewportFitOptions = function (options) {
     return { padding: padding, minZoom: minZoom, maxZoom: maxZoom };
 };
 var clamp = function (value, min, max) { return Math.max(min, Math.min(max, value)); };
+var isElementVisibleInState = function (elementId, elementsById) {
+    var element = elementsById.get(elementId);
+    if (!element)
+        return false;
+    return element.visible !== false;
+};
+var isPortVisibleInState = function (portId, portsById, elementsById) {
+    var port = portsById.get(portId);
+    if (!port)
+        return false;
+    return isElementVisibleInState(port.elementId, elementsById);
+};
+var isLinkVisibleInState = function (linkId, linksById, portsById, elementsById) {
+    var link = linksById.get(linkId);
+    if (!link)
+        return false;
+    var sourcePort = portsById.get(link.sourcePortId);
+    var targetPort = portsById.get(link.targetPortId);
+    var sourceVisible = sourcePort ? isPortVisibleInState(sourcePort.id, portsById, elementsById) : true;
+    var targetVisible = targetPort ? isPortVisibleInState(targetPort.id, portsById, elementsById) : true;
+    return sourceVisible && targetVisible;
+};
+var isTextVisibleInState = function (text, elementsById, portsById, linksById) {
+    if (!text.ownerId)
+        return true;
+    if (elementsById.has(text.ownerId))
+        return isElementVisibleInState(text.ownerId, elementsById);
+    if (portsById.has(text.ownerId))
+        return isPortVisibleInState(text.ownerId, portsById, elementsById);
+    if (linksById.has(text.ownerId))
+        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]; }));
+    var portsById = new Map(state.ports.map(function (port) { return [port.id, port]; }));
+    var linksById = new Map(state.links.map(function (link) { return [link.id, link]; }));
     state.elements.forEach(function (element) {
-        includeRect(bounds, element.position.x, element.position.y, element.size.width, element.size.height);
+        if (!isElementVisibleInState(element.id, elementsById))
+            return;
+        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) {
+        if (!isLinkVisibleInState(link.id, linksById, portsById, elementsById))
+            return;
         link.points.forEach(function (point) {
             expandBounds(bounds, point.x, point.y);
         });
     });
     state.texts.forEach(function (text) {
         var _a;
+        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) {
@@ -13366,8 +13798,14 @@ var resolveStateWorldBounds = function (state) {
 };
 var resolveElementWorldBounds = function (state) {
     var bounds = createBounds();
+    var elementsById = new Map(state.elements.map(function (element) { return [element.id, element]; }));
     state.elements.forEach(function (element) {
-        includeRect(bounds, element.position.x, element.position.y, element.size.width, element.size.height);
+        if (!isElementVisibleInState(element.id, elementsById))
+            return;
+        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;
 };
@@ -16518,6 +16956,12 @@ var demoTabs = [
         description: selectionDemoConfig.description,
         Component: wrapSimpleDemo(selectionDemoConfig),
     },
+    {
+        id: elementVisibilitySelectionDemoConfig.id,
+        title: elementVisibilitySelectionDemoConfig.title,
+        description: elementVisibilitySelectionDemoConfig.description,
+        Component: wrapSimpleDemo(elementVisibilitySelectionDemoConfig),
+    },
     {
         id: eventHandlersDemoConfig.id,
         title: eventHandlersDemoConfig.title,