orcasvn-react-diagrams 0.2.7 → 0.2.9

package/dist/cjs/examples.js

@@ -743,7 +743,7 @@ var createBasicState = function () { return ({
 var basicDemoConfig = ({
     id: 'basic',
     title: 'Basic Diagram',
-    description: 'Elements, ports, link, and labels.',
+    description: 'Elements, ports, link, and labels. Drag empty paper to pan; use Shift + drag for marquee selection.',
     createState: createBasicState,
     elementShapes: baseElementShapes,
     portShapes: basePortShapes,
@@ -1121,7 +1121,7 @@ var createSelectionState = function () { return ({
     texts: [
         {
             id: 'select-tip',
-            content: 'Click to select, drag to move, Delete/Backspace to remove.',
+            content: 'Click to select, drag to move, drag empty paper to pan, Shift + drag to marquee-select.',
             position: { x: 80, y: 80 },
         },
     ],
@@ -1129,7 +1129,7 @@ var createSelectionState = function () { return ({
 var selectionDemoConfig = ({
     id: 'selection',
     title: 'Selection + Interaction',
-    description: 'Click to select, drag to move, marquee-select on empty space, delete to remove.',
+    description: 'Click to select, drag to move, drag empty paper to pan, Shift + drag to marquee-select, delete to remove.',
     createState: createSelectionState,
     elementShapes: baseElementShapes,
     portShapes: basePortShapes,
@@ -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: [
         {
@@ -1429,6 +1551,192 @@ var createAutoLayoutState = function (lockComparisonChildren) {
             { id: 'deep-grid-b', position: { x: 0, y: 0 }, size: { width: 40, height: 28 }, shapeId: 'default', parentId: 'deep-grid-nested-parent' },
             { id: 'deep-grid-c', position: { x: 0, y: 0 }, size: { width: 52, height: 24 }, shapeId: 'default', parentId: 'deep-grid-nested-parent' },
             { id: 'deep-grid-d', position: { x: 0, y: 0 }, size: { width: 28, height: 30 }, shapeId: 'default', parentId: 'deep-grid-nested-parent' },
+            {
+                id: 'layout-grid-empty-compare',
+                position: { x: 930, y: 70 },
+                size: { width: 280, height: 190 },
+                shapeId: 'panel',
+                layout: {
+                    mode: 'grid',
+                    padding: { x: 12, y: 12 },
+                    gap: 12,
+                    align: 'center',
+                    autoResize: 'grow-shrink',
+                    gridTemplate: [4, 4, 4],
+                    gridChildWidthResizeEnabled: true,
+                    childMinWidth: 44,
+                    childMinHeight: 52,
+                },
+            },
+            {
+                id: 'empty-grid-slot',
+                position: { x: 0, y: 0 },
+                size: { width: 28, height: 18 },
+                shapeId: 'default',
+                parentId: 'layout-grid-empty-compare',
+                layout: {
+                    mode: 'grid',
+                    padding: { x: 8, y: 8 },
+                    gap: 8,
+                    align: 'center',
+                    autoResize: 'grow-shrink',
+                    gridTemplate: [6, 6],
+                    gridChildWidthResizeEnabled: true,
+                },
+            },
+            {
+                id: 'filled-grid-slot',
+                position: { x: 0, y: 0 },
+                size: { width: 92, height: 88 },
+                shapeId: 'default',
+                parentId: 'layout-grid-empty-compare',
+                layout: {
+                    mode: 'grid',
+                    padding: { x: 8, y: 8 },
+                    gap: 8,
+                    align: 'center',
+                    autoResize: 'grow-shrink',
+                    gridTemplate: [6, 6],
+                    gridChildWidthResizeEnabled: true,
+                    childMinWidth: 18,
+                    childMinHeight: 18,
+                },
+            },
+            {
+                id: 'empty-grid-compare-leaf',
+                position: { x: 0, y: 0 },
+                size: { width: 60, height: 70 },
+                shapeId: 'default',
+                parentId: 'layout-grid-empty-compare',
+            },
+            { id: 'filled-grid-slot-a', position: { x: 0, y: 0 }, size: { width: 34, height: 22 }, shapeId: 'default', parentId: 'filled-grid-slot' },
+            { id: 'filled-grid-slot-b', position: { x: 0, y: 0 }, size: { width: 40, height: 24 }, shapeId: 'default', parentId: 'filled-grid-slot' },
+            { id: 'filled-grid-slot-c', position: { x: 0, y: 0 }, size: { width: 48, height: 22 }, shapeId: 'default', parentId: 'filled-grid-slot' },
+            {
+                id: 'layout-grid-mixed-modes',
+                position: { x: 930, y: 320 },
+                size: { width: 340, height: 240 },
+                shapeId: 'panel',
+                layout: {
+                    mode: 'grid',
+                    padding: { x: 12, y: 12 },
+                    gap: 12,
+                    align: 'center',
+                    autoResize: 'grow-shrink',
+                    gridTemplate: [4, 4, 4],
+                    gridChildWidthResizeEnabled: true,
+                    childMinWidth: 52,
+                    childMinHeight: 64,
+                },
+            },
+            {
+                id: 'mixed-grid-child',
+                position: { x: 0, y: 0 },
+                size: { width: 88, height: 88 },
+                shapeId: 'default',
+                parentId: 'layout-grid-mixed-modes',
+                layout: {
+                    mode: 'grid',
+                    padding: { x: 8, y: 8 },
+                    gap: 8,
+                    align: 'center',
+                    autoResize: 'grow-shrink',
+                    gridTemplate: [6, 6],
+                    gridChildWidthResizeEnabled: true,
+                    childMinWidth: 18,
+                    childMinHeight: 18,
+                },
+            },
+            {
+                id: 'mixed-column-child',
+                position: { x: 0, y: 0 },
+                size: { width: 92, height: 96 },
+                shapeId: 'default',
+                parentId: 'layout-grid-mixed-modes',
+                layout: {
+                    mode: 'vertical',
+                    padding: { x: 8, y: 8 },
+                    gap: 8,
+                    align: 'center',
+                    autoResize: 'grow-shrink',
+                },
+            },
+            {
+                id: 'mixed-row-child',
+                position: { x: 0, y: 0 },
+                size: { width: 104, height: 84 },
+                shapeId: 'default',
+                parentId: 'layout-grid-mixed-modes',
+                layout: {
+                    mode: 'horizontal',
+                    padding: { x: 8, y: 8 },
+                    gap: 8,
+                    align: 'center',
+                    autoResize: 'grow-shrink',
+                },
+            },
+            { id: 'mixed-grid-a', position: { x: 0, y: 0 }, size: { width: 34, height: 22 }, shapeId: 'default', parentId: 'mixed-grid-child' },
+            { id: 'mixed-grid-b', position: { x: 0, y: 0 }, size: { width: 44, height: 24 }, shapeId: 'default', parentId: 'mixed-grid-child' },
+            { id: 'mixed-column-a', position: { x: 0, y: 0 }, size: { width: 60, height: 20 }, shapeId: 'default', parentId: 'mixed-column-child' },
+            { id: 'mixed-column-b', position: { x: 0, y: 0 }, size: { width: 68, height: 24 }, shapeId: 'default', parentId: 'mixed-column-child' },
+            { id: 'mixed-row-a', position: { x: 0, y: 0 }, size: { width: 32, height: 28 }, shapeId: 'default', parentId: 'mixed-row-child' },
+            { id: 'mixed-row-b', position: { x: 0, y: 0 }, size: { width: 44, height: 24 }, shapeId: 'default', parentId: 'mixed-row-child' },
+            {
+                id: 'layout-column-grid-tree',
+                position: { x: 40, y: 520 },
+                size: { width: 340, height: 220 },
+                shapeId: 'panel',
+                layout: { mode: 'vertical', padding: { x: 12, y: 12 }, gap: 12, align: 'start', autoResize: 'grow-shrink' },
+            },
+            {
+                id: 'column-grid-tree-top',
+                position: { x: 0, y: 0 },
+                size: { width: 180, height: 88 },
+                shapeId: 'default',
+                parentId: 'layout-column-grid-tree',
+                layout: {
+                    mode: 'grid',
+                    padding: { x: 8, y: 8 },
+                    gap: 8,
+                    align: 'center',
+                    autoResize: 'grow-shrink',
+                    gridTemplate: [6, 6],
+                    gridChildWidthResizeEnabled: true,
+                    childMinWidth: 18,
+                    childMinHeight: 18,
+                },
+            },
+            {
+                id: 'column-grid-tree-branch',
+                position: { x: 0, y: 0 },
+                size: { width: 220, height: 96 },
+                shapeId: 'default',
+                parentId: 'layout-column-grid-tree',
+                layout: { mode: 'horizontal', padding: { x: 8, y: 8 }, gap: 8, align: 'center', autoResize: 'grow-shrink' },
+            },
+            { id: 'column-grid-top-a', position: { x: 0, y: 0 }, size: { width: 52, height: 22 }, shapeId: 'default', parentId: 'column-grid-tree-top' },
+            { id: 'column-grid-top-b', position: { x: 0, y: 0 }, size: { width: 44, height: 24 }, shapeId: 'default', parentId: 'column-grid-tree-top' },
+            {
+                id: 'column-grid-tree-inner-grid',
+                position: { x: 0, y: 0 },
+                size: { width: 120, height: 84 },
+                shapeId: 'default',
+                parentId: 'column-grid-tree-branch',
+                layout: {
+                    mode: 'grid',
+                    padding: { x: 8, y: 8 },
+                    gap: 8,
+                    align: 'center',
+                    autoResize: 'grow-shrink',
+                    gridTemplate: [6, 6],
+                    gridChildWidthResizeEnabled: true,
+                    childMinWidth: 18,
+                    childMinHeight: 18,
+                },
+            },
+            { id: 'column-grid-tree-leaf', position: { x: 0, y: 0 }, size: { width: 58, height: 62 }, shapeId: 'default', parentId: 'column-grid-tree-branch' },
+            { id: 'column-grid-inner-a', position: { x: 0, y: 0 }, size: { width: 30, height: 22 }, shapeId: 'default', parentId: 'column-grid-tree-inner-grid' },
+            { id: 'column-grid-inner-b', position: { x: 0, y: 0 }, size: { width: 42, height: 24 }, shapeId: 'default', parentId: 'column-grid-tree-inner-grid' },
             {
                 id: 'layout-lock-compare',
                 position: { x: 420, y: 410 },
@@ -1526,6 +1834,50 @@ var createAutoLayoutState = function (lockComparisonChildren) {
             { id: 'label-deep-grid-b', content: 'grid-b', position: { x: 6, y: -14 }, ownerId: 'deep-grid-b' },
             { id: 'label-deep-grid-c', content: 'grid-c', position: { x: 6, y: -14 }, ownerId: 'deep-grid-c' },
             { id: 'label-deep-grid-d', content: 'grid-d', position: { x: 6, y: -14 }, ownerId: 'deep-grid-d' },
+            {
+                id: 'label-layout-grid-empty-compare',
+                content: 'Grid owner: empty vs filled nested grids',
+                position: { x: 8, y: 6 },
+                ownerId: 'layout-grid-empty-compare',
+                layout: { boundsMode: 'owner-width', wrap: 'word', overflow: 'clip', padding: 0 },
+            },
+            { id: 'label-empty-grid-slot', content: 'empty nested grid', position: { x: 6, y: -16 }, ownerId: 'empty-grid-slot' },
+            { id: 'label-filled-grid-slot', content: 'nested grid with children', position: { x: 6, y: -16 }, ownerId: 'filled-grid-slot' },
+            { id: 'label-empty-grid-compare-leaf', content: 'leaf sibling', position: { x: 6, y: -16 }, ownerId: 'empty-grid-compare-leaf' },
+            { id: 'label-filled-grid-slot-a', content: 'slot-a', position: { x: 6, y: -14 }, ownerId: 'filled-grid-slot-a' },
+            { id: 'label-filled-grid-slot-b', content: 'slot-b', position: { x: 6, y: -14 }, ownerId: 'filled-grid-slot-b' },
+            { id: 'label-filled-grid-slot-c', content: 'slot-c', position: { x: 6, y: -14 }, ownerId: 'filled-grid-slot-c' },
+            {
+                id: 'label-layout-grid-mixed-modes',
+                content: 'Grid owner: mixed child layout modes',
+                position: { x: 8, y: 6 },
+                ownerId: 'layout-grid-mixed-modes',
+                layout: { boundsMode: 'owner-width', wrap: 'word', overflow: 'clip', padding: 0 },
+            },
+            { id: 'label-mixed-grid-child', content: 'grid child', position: { x: 6, y: -16 }, ownerId: 'mixed-grid-child' },
+            { id: 'label-mixed-column-child', content: 'vertical child', position: { x: 6, y: -16 }, ownerId: 'mixed-column-child' },
+            { id: 'label-mixed-row-child', content: 'horizontal child', position: { x: 6, y: -16 }, ownerId: 'mixed-row-child' },
+            { id: 'label-mixed-grid-a', content: 'grid-a', position: { x: 6, y: -14 }, ownerId: 'mixed-grid-a' },
+            { id: 'label-mixed-grid-b', content: 'grid-b', position: { x: 6, y: -14 }, ownerId: 'mixed-grid-b' },
+            { id: 'label-mixed-column-a', content: 'col-a', position: { x: 6, y: -14 }, ownerId: 'mixed-column-a' },
+            { id: 'label-mixed-column-b', content: 'col-b', position: { x: 6, y: -14 }, ownerId: 'mixed-column-b' },
+            { id: 'label-mixed-row-a', content: 'row-a', position: { x: 6, y: -14 }, ownerId: 'mixed-row-a' },
+            { id: 'label-mixed-row-b', content: 'row-b', position: { x: 6, y: -14 }, ownerId: 'mixed-row-b' },
+            {
+                id: 'label-layout-column-grid-tree',
+                content: 'Vertical owner with grid descendants',
+                position: { x: 8, y: 6 },
+                ownerId: 'layout-column-grid-tree',
+                layout: { boundsMode: 'owner-width', wrap: 'word', overflow: 'clip', padding: 0 },
+            },
+            { id: 'label-column-grid-tree-top', content: 'top-level grid child', position: { x: 6, y: -16 }, ownerId: 'column-grid-tree-top' },
+            { id: 'label-column-grid-tree-branch', content: 'row branch with inner grid', position: { x: 6, y: -16 }, ownerId: 'column-grid-tree-branch' },
+            { id: 'label-column-grid-top-a', content: 'top-a', position: { x: 6, y: -14 }, ownerId: 'column-grid-top-a' },
+            { id: 'label-column-grid-top-b', content: 'top-b', position: { x: 6, y: -14 }, ownerId: 'column-grid-top-b' },
+            { id: 'label-column-grid-tree-inner-grid', content: 'nested grid descendant', position: { x: 6, y: -16 }, ownerId: 'column-grid-tree-inner-grid' },
+            { id: 'label-column-grid-tree-leaf', content: 'branch leaf', position: { x: 6, y: -14 }, ownerId: 'column-grid-tree-leaf' },
+            { id: 'label-column-grid-inner-a', content: 'inner-a', position: { x: 6, y: -14 }, ownerId: 'column-grid-inner-a' },
+            { id: 'label-column-grid-inner-b', content: 'inner-b', position: { x: 6, y: -14 }, ownerId: 'column-grid-inner-b' },
             {
                 id: 'label-layout-lock-compare',
                 content: 'Child drag lock comparison',
@@ -4382,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;
@@ -4420,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,
@@ -4823,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)
@@ -4841,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)
@@ -4856,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)
@@ -4865,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)
@@ -5053,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 };
     };
@@ -6288,6 +6700,8 @@ var AutoLayoutService = /** @class */ (function () {
         return this.applyResolvedLayout(parentId, parent, desiredPositions, desiredSizes, {
             width: newParentWidth,
             height: newParentHeight,
+        }, {
+            preserveResizedLayoutParentSize: true,
         });
     };
     AutoLayoutService.prototype.resolveGridCellWidths = function (rowInnerWidth, weights) {
@@ -6297,7 +6711,7 @@ var AutoLayoutService = /** @class */ (function () {
         var safeWeights = weights.map(function (weight) { return _this.clampGridUnits(weight); });
         return this.distributeWeightedSizes(Math.max(0, rowInnerWidth), safeWeights);
     };
-    AutoLayoutService.prototype.applyResolvedLayout = function (parentId, parent, desiredPositions, desiredSizes, parentSize) {
+    AutoLayoutService.prototype.applyResolvedLayout = function (parentId, parent, desiredPositions, desiredSizes, parentSize, options) {
         var _this = this;
         var _a;
         var patches = [];
@@ -6316,7 +6730,7 @@ var AutoLayoutService = /** @class */ (function () {
                 var resizePatches = _this.commandQueue.run(createResizeElementCommand(childId, fittedSize), _this.model);
                 patches.push.apply(patches, resizePatches);
                 movedPortIds.push.apply(movedPortIds, _this.collectElementPortIds(childId));
-                var nested = _this.applyLayoutForParent(childId);
+                var nested = _this.applyLayoutForParent(childId, (options === null || options === void 0 ? void 0 : options.preserveResizedLayoutParentSize) ? { preserveParentSize: true } : undefined);
                 patches.push.apply(patches, nested.patches);
                 movedPortIds.push.apply(movedPortIds, nested.movedPortIds);
             }
@@ -8177,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);
     };
@@ -8448,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;
@@ -8898,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);
     };
@@ -9815,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,
@@ -9848,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;
@@ -9856,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);
@@ -9879,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();
@@ -9897,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);
@@ -9910,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);
@@ -9921,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);
@@ -9934,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);
@@ -10023,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);
@@ -11017,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;
@@ -11091,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))
@@ -11120,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;
@@ -12134,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;
@@ -12151,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);
@@ -12158,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;
@@ -12167,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; });
@@ -13098,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);
@@ -13116,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;
@@ -13136,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;
@@ -13894,6 +14445,9 @@ var parentOptions = [
     { id: 'layout-grid', label: 'Grid layout' },
     { id: 'layout-nested', label: 'Nested layout' },
     { id: 'layout-grid-deep', label: 'Nested grid' },
+    { id: 'layout-grid-empty-compare', label: 'Grid empty vs filled' },
+    { id: 'layout-grid-mixed-modes', label: 'Grid mixed child modes' },
+    { id: 'layout-column-grid-tree', label: 'Non-grid with grid descendants' },
     { id: 'layout-lock-compare', label: 'Child lock compare' },
     { id: 'layout-manual', label: 'Manual (compare)' },
 ];
@@ -14222,15 +14776,17 @@ var AutoLayoutDemo = function () {
             React.createElement("p", { style: { marginTop: 0 } }, "Try horizontal, vertical, grid, nested, and manual layout containers. Select a layout parent directly on the canvas or pick it from the list; the controls below always act on the current selection. Drag, resize, add, or remove children to see automatic reflow. Use fit controls, explicit child min/max constraints, auto-resize policy, 12-unit grid templates, and the optional grid child width-resize capability to validate current behavior."),
             React.createElement("p", { style: { marginTop: 0, fontSize: 13, color: '#333' } }, "Grid child width resize starts enabled for the seeded grid parents in this demo. With the capability on, horizontal drag can wrap rows automatically from a flat 12-unit slot array, resize direct grid children in 1/12 steps, and reorder peers by drag position. That now includes nested layout parents as well as leaf children. Turn the checkbox off on a selected grid parent to compare the older locked-width behavior where a mostly downward drag keeps width stable while height changes."),
             React.createElement("p", { style: { marginTop: 0, marginBottom: 0, fontSize: 13, color: '#333' } },
-                "The ",
+                "The seeded scenarios now cover empty nested grids, mixed child layout modes under one grid owner, and grid descendants inside a non-grid tree. Use ",
                 React.createElement("code", null, "layout-grid-deep"),
-                " scenario now keeps the outer container focused on grid behavior with three direct grid children, including one nested grid parent that also follows the enabled 12-unit resize path. The child drag lock comparison lives beside it in ",
-                React.createElement("code", null, " layout-lock-compare"),
-                "; toggle the lock, try dragging",
-                React.createElement("code", null, " deep-lock-child-a"),
-                " versus ",
-                React.createElement("code", null, " deep-free-child-a"),
-                ", then use the API move shortcut to confirm the policy suppresses built-in drag without freezing geometry.")),
+                " for enabled 12-unit nested-child resize,",
+                React.createElement("code", null, "layout-grid-empty-compare"),
+                " for empty-versus-filled nested grid comparison, ",
+                React.createElement("code", null, "layout-grid-mixed-modes"),
+                "for direct-child layout mixing, and ",
+                React.createElement("code", null, "layout-column-grid-tree"),
+                " for a non-grid owner that still contains grid-layout descendants. The child drag lock comparison lives beside them in ",
+                React.createElement("code", null, "layout-lock-compare"),
+                ".")),
         React.createElement(DisplayBoxControls, { actions: demo.actions, snapEnabled: controls.snapEnabled, selectedLinkRouting: controls.selectedLinkRouting, canToggleLinkRouting: controls.canToggleLinkRouting, onReload: controls.handleReload, onZoomIn: controls.handleZoomIn, onZoomOut: controls.handleZoomOut, onResetViewport: controls.handleResetViewport, onToggleSnap: controls.handleToggleSnap, onManualRender: controls.handleManualRender, onToggleLinkRouting: controls.handleToggleLinkRouting, onAction: controls.handleAction, onExportImage: controls.handleExportImage, onClearExportPreview: controls.handleClearExportPreview, exportPreviewDataUrl: controls.exportPreviewDataUrl, exportError: controls.exportError }),
         React.createElement("div", { style: { display: 'grid', gap: 12, marginBottom: 12 } },
             React.createElement("div", { style: { display: 'flex', flexWrap: 'wrap', gap: 12, alignItems: 'center' } },
@@ -14346,6 +14902,9 @@ var AutoLayoutDemo = function () {
                     React.createElement("ul", { style: { marginTop: 0, paddingLeft: 18, fontSize: 13 } },
                         React.createElement("li", null, "Nested grid: target layout-grid-deep to inspect an outer grid where all three direct children, including the nested grid parent, use enabled 12-unit resize."),
                         React.createElement("li", null, "Select deep-grid-nested-parent and drag a horizontal resize handle; it should snap in grid units and then reflow inner children inside the resized container."),
+                        React.createElement("li", null, "Empty nested grid: target layout-grid-empty-compare and compare empty-grid-slot against filled-grid-slot. The empty nested grid should still occupy its assigned outer slot."),
+                        React.createElement("li", null, "Mixed grid children: target layout-grid-mixed-modes to inspect one grid owner whose direct children use grid, vertical, and horizontal auto-layout modes side by side."),
+                        React.createElement("li", null, "Non-grid with grid descendants: target layout-column-grid-tree to inspect a vertical parent that still contains grid-layout containers deeper in the subtree."),
                         React.createElement("li", null, "Lock comparison: target layout-lock-compare, toggle Lock comparison child drag, then compare deep-lock-child-a and deep-free-child-a."),
                         React.createElement("li", null, "Use Move lock target via API after locking; the child should still reposition because the policy only suppresses built-in drag."),
                         React.createElement("li", null, "Resize lock: with grid child width resize off, select grid-b and drag diagonally; width should stay fixed."),
@@ -16280,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,