orcasvn-react-diagrams 0.2.7 → 0.2.8

package/dist/esm/examples.js

@@ -741,7 +741,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,
@@ -1119,7 +1119,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 },
         },
     ],
@@ -1127,7 +1127,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,
@@ -1427,6 +1427,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 },
@@ -1524,6 +1710,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',
@@ -6286,6 +6516,8 @@ var AutoLayoutService = /** @class */ (function () {
         return this.applyResolvedLayout(parentId, parent, desiredPositions, desiredSizes, {
             width: newParentWidth,
             height: newParentHeight,
+        }, {
+            preserveResizedLayoutParentSize: true,
         });
     };
     AutoLayoutService.prototype.resolveGridCellWidths = function (rowInnerWidth, weights) {
@@ -6295,7 +6527,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 = [];
@@ -6314,7 +6546,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);
             }
@@ -13892,6 +14124,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)' },
 ];
@@ -14220,15 +14455,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' } },
@@ -14344,6 +14581,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."),