orcasvn-react-diagrams 0.2.8 → 0.2.9

package/dist/cjs/examples.js

@@ -1146,6 +1146,128 @@ 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',
+            position: { x: 700, y: 140 },
+            size: { width: 180, height: 120 },
+            shapeId: 'default',
+            visible: false,
+            style: { fill: '#fee2e2', stroke: '#dc2626', 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-port',
+            elementId: 'policy-hidden',
+            position: { x: 0, y: 60 },
+            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-link',
+            sourcePortId: 'policy-normal-port',
+            targetPortId: 'policy-hidden-port',
+            points: [
+                { x: 300, y: 220 },
+                { x: 700, y: 200 },
+            ],
+            style: { stroke: '#dc2626', 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.',
+            position: { x: 80, y: 72 },
+            size: { width: 760, height: 44 },
+            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 in state',
+            position: { x: 16, y: 14 },
+            ownerId: 'policy-hidden',
+        },
+    ],
+}); };
+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.',
+    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',
+                    'policy-unselectable-port',
+                    'policy-hidden-link',
+                ]);
+            },
+        },
+    ],
+};
+
 var createEventHandlersState = function () { return ({
     elements: [
         {
@@ -4612,6 +4734,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;
@@ -4650,6 +4774,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,
@@ -5053,6 +5179,29 @@ 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;
+        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;
+    };
+    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)
@@ -5071,6 +5220,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)
@@ -5086,6 +5241,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)
@@ -5095,6 +5260,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)
@@ -5283,18 +5465,18 @@ var DiagramModel = /** @class */ (function () {
         }
         var current = element;
         while (current === null || current === void 0 ? void 0 : current.parentId) {
-            var parent_1 = this.elements.get(current.parentId);
-            if (!parent_1)
+            var parent_2 = this.elements.get(current.parentId);
+            if (!parent_2)
                 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;
+            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;
             }
             x += parentX;
             y += parentY;
-            current = parent_1;
+            current = parent_2;
         }
         return { x: x, y: y };
     };
@@ -8409,16 +8591,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);
     };
@@ -8680,11 +8884,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;
@@ -9130,6 +9338,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);
     };
@@ -10047,7 +10280,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,
@@ -10080,6 +10315,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;
@@ -10088,7 +10327,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);
@@ -10111,7 +10350,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();
@@ -10129,9 +10368,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);
@@ -10142,7 +10382,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);
@@ -10153,9 +10393,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);
@@ -10166,7 +10407,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);
@@ -10255,9 +10496,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);
@@ -11249,15 +11491,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;
@@ -11323,6 +11571,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))
@@ -11352,6 +11602,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;
@@ -12366,6 +12618,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;
@@ -12383,6 +12637,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);
@@ -12390,6 +12646,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;
@@ -12399,6 +12657,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; });
@@ -13330,13 +13590,65 @@ 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 _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;
+};
+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 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) {
+        if (!isElementVisibleInState(element.id, elementsById))
+            return;
         includeRect(bounds, element.position.x, element.position.y, element.size.width, element.size.height);
     });
     state.ports.forEach(function (port) {
         var _a;
+        if (!isPortVisibleInState(port.id, portsById, elementsById))
+            return;
         var size = port.size;
         if (!size) {
             expandBounds(bounds, port.position.x, port.position.y);
@@ -13348,12 +13660,16 @@ var resolveStateWorldBounds = function (state) {
         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 clipSize = text.displayClipSize;
@@ -13368,7 +13684,10 @@ 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) {
+        if (!isElementVisibleInState(element.id, elementsById))
+            return;
         includeRect(bounds, element.position.x, element.position.y, element.size.width, element.size.height);
     });
     return hasBounds(bounds) ? bounds : null;
@@ -16520,6 +16839,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,