orcasvn-react-diagrams 0.2.6 → 0.2.7

package/dist/cjs/examples.js

@@ -860,23 +860,44 @@ var linkPortCreationDemoConfig = ({
 var createNestedState = function () { return ({
     elements: [
         {
-            id: 'parent-1',
-            position: { x: 140, y: 140 },
-            size: { width: 320, height: 240 },
+            id: 'parent-locked',
+            position: { x: 110, y: 140 },
+            size: { width: 300, height: 240 },
+            shapeId: 'panel',
+            childElementInteraction: { movable: false },
+        },
+        {
+            id: 'child-locked',
+            position: { x: 40, y: 60 },
+            size: { width: 160, height: 100 },
+            shapeId: 'default',
+            parentId: 'parent-locked',
+        },
+        {
+            id: 'parent-free',
+            position: { x: 470, y: 140 },
+            size: { width: 300, height: 240 },
             shapeId: 'panel',
         },
         {
-            id: 'child-1',
+            id: 'child-free',
             position: { x: 40, y: 60 },
             size: { width: 160, height: 100 },
             shapeId: 'default',
-            parentId: 'parent-1',
+            parentId: 'parent-free',
         },
     ],
     ports: [
         {
-            id: 'child-port',
-            elementId: 'child-1',
+            id: 'child-port-locked',
+            elementId: 'child-locked',
+            position: { x: 20, y: 20 },
+            shapeId: 'port-circle',
+            anchorCenter: true,
+        },
+        {
+            id: 'child-port-free',
+            elementId: 'child-free',
             position: { x: 20, y: 20 },
             shapeId: 'port-circle',
             anchorCenter: true,
@@ -885,28 +906,61 @@ var createNestedState = function () { return ({
     links: [],
     texts: [
         {
-            id: 'child-label',
-            content: 'Child',
-            position: { x: 6, y: -16 },
-            ownerId: 'child-1',
+            id: 'parent-locked-label',
+            content: 'Locked child drag',
+            position: { x: 12, y: 12 },
+            ownerId: 'parent-locked',
+            interaction: { movable: false, editable: false },
+        },
+        {
+            id: 'child-locked-label',
+            content: 'Drag disabled',
+            position: { x: 10, y: 10 },
+            ownerId: 'child-locked',
+            interaction: { movable: false, editable: false },
+        },
+        {
+            id: 'parent-free-label',
+            content: 'Movable child drag',
+            position: { x: 12, y: 12 },
+            ownerId: 'parent-free',
+            interaction: { movable: false, editable: false },
+        },
+        {
+            id: 'child-free-label',
+            content: 'Drag enabled',
+            position: { x: 10, y: 10 },
+            ownerId: 'child-free',
+            interaction: { movable: false, editable: false },
         },
     ],
 }); };
 var nestedDemoConfig = ({
     id: 'nested',
     title: 'Nested Elements',
-    description: 'Parent/child elements with world positioning.',
+    description: 'Compare locked and movable child drag; locked children still move through API actions.',
     createState: createNestedState,
     elementShapes: baseElementShapes,
     portShapes: basePortShapes,
     defaultElementShapeId: 'default',
     defaultPortShapeId: 'port-circle',
     actions: [
+        {
+            id: 'move-locked-child-api',
+            label: 'Move locked child (API)',
+            run: function (editor, state) {
+                var child = state.elements.find(function (element) { return element.id === 'child-locked'; });
+                var parent = state.elements.find(function (element) { return element.id === 'parent-locked'; });
+                if (!child || !parent)
+                    return;
+                editor.moveElementTo(child.id, parent.position.x + child.position.x + 30, parent.position.y + child.position.y + 10);
+            },
+        },
         {
             id: 'move-parent',
-            label: 'Move parent',
+            label: 'Move locked parent',
             run: function (editor, state) {
-                var parent = state.elements.find(function (element) { return element.id === 'parent-1'; });
+                var parent = state.elements.find(function (element) { return element.id === 'parent-locked'; });
                 if (!parent)
                     return;
                 editor.moveElementTo(parent.id, parent.position.x + 40, parent.position.y + 20);
@@ -914,15 +968,15 @@ var nestedDemoConfig = ({
         },
         {
             id: 'add-child',
-            label: 'Add child',
+            label: 'Add movable child',
             run: function (editor, state, demo, helpers) {
                 var _a;
-                var parent = state.elements.find(function (element) { return element.id === 'parent-1'; });
+                var parent = state.elements.find(function (element) { return element.id === 'parent-free'; });
                 if (!parent)
                     return;
                 var offset = helpers.nextOffset();
                 editor.addElement({
-                    id: "child-".concat(createId()),
+                    id: "child-free-".concat(createId()),
                     position: { x: 30 + offset, y: 50 + offset },
                     size: { width: 140, height: 90 },
                     shapeId: (_a = demo.defaultElementShapeId) !== null && _a !== void 0 ? _a : 'default',
@@ -1241,147 +1295,266 @@ var linkCancelDemoConfig = ({
     actions: [],
 });
 
-var createAutoLayoutState = function () { return ({
-    elements: [
-        {
-            id: 'layout-row',
-            position: { x: 60, y: 80 },
-            size: { width: 180, height: 96 },
-            shapeId: 'panel',
-            layout: { mode: 'horizontal', padding: { x: 14, y: 12 }, gap: 14, align: 'center' },
-        },
-        { id: 'row-a', position: { x: 0, y: 0 }, size: { width: 62, height: 44 }, shapeId: 'default', parentId: 'layout-row' },
-        { id: 'row-b', position: { x: 0, y: 0 }, size: { width: 96, height: 32 }, shapeId: 'default', parentId: 'layout-row' },
-        { id: 'row-c', position: { x: 0, y: 0 }, size: { width: 54, height: 56 }, shapeId: 'default', parentId: 'layout-row' },
-        {
-            id: 'row-nested-owner',
-            position: { x: 0, y: 0 },
-            size: { width: 82, height: 82 },
-            shapeId: 'default',
-            parentId: 'layout-row',
-            layout: { mode: 'vertical', padding: { x: 8, y: 6 }, gap: 6, align: 'start' },
-        },
-        { id: 'row-nested-child-a', position: { x: 0, y: 0 }, size: { width: 60, height: 20 }, shapeId: 'default', parentId: 'row-nested-owner' },
-        { id: 'row-nested-child-b', position: { x: 0, y: 0 }, size: { width: 76, height: 22 }, shapeId: 'default', parentId: 'row-nested-owner' },
-        {
-            id: 'layout-column',
-            position: { x: 400, y: 70 },
-            size: { width: 120, height: 140 },
-            shapeId: 'panel',
-            layout: { mode: 'vertical', padding: { x: 12, y: 10 }, gap: 16, align: 'end' },
-        },
-        { id: 'col-a', position: { x: 0, y: 0 }, size: { width: 44, height: 28 }, shapeId: 'default', parentId: 'layout-column' },
-        { id: 'col-b', position: { x: 0, y: 0 }, size: { width: 70, height: 36 }, shapeId: 'default', parentId: 'layout-column' },
-        { id: 'col-c', position: { x: 0, y: 0 }, size: { width: 92, height: 44 }, shapeId: 'default', parentId: 'layout-column' },
-        {
-            id: 'layout-grid',
-            position: { x: 620, y: 70 },
-            size: { width: 160, height: 110 },
-            shapeId: 'panel',
-            layout: {
-                mode: 'grid',
-                padding: { x: 10, y: 10 },
-                gap: 10,
-                align: 'center',
-                autoResize: 'grow-shrink',
-                gridTemplate: [12, 4, 8],
-                gridChildWidthResizeEnabled: false,
-                childMinWidth: 24,
-                childMinHeight: 18,
+var createAutoLayoutState = function (lockComparisonChildren) {
+    if (lockComparisonChildren === void 0) { lockComparisonChildren = true; }
+    return ({
+        elements: [
+            {
+                id: 'layout-row',
+                position: { x: 60, y: 80 },
+                size: { width: 180, height: 96 },
+                shapeId: 'panel',
+                layout: { mode: 'horizontal', padding: { x: 14, y: 12 }, gap: 14, align: 'center' },
             },
-        },
-        { id: 'grid-a', position: { x: 0, y: 0 }, size: { width: 36, height: 26 }, shapeId: 'default', parentId: 'layout-grid' },
-        { id: 'grid-b', position: { x: 0, y: 0 }, size: { width: 44, height: 24 }, shapeId: 'default', parentId: 'layout-grid' },
-        { id: 'grid-c', position: { x: 0, y: 0 }, size: { width: 50, height: 20 }, shapeId: 'default', parentId: 'layout-grid' },
-        { id: 'grid-d', position: { x: 0, y: 0 }, size: { width: 28, height: 30 }, shapeId: 'default', parentId: 'layout-grid' },
-        { id: 'grid-e', position: { x: 0, y: 0 }, size: { width: 52, height: 28 }, shapeId: 'default', parentId: 'layout-grid' },
-        {
-            id: 'layout-nested',
-            position: { x: 120, y: 260 },
-            size: { width: 190, height: 130 },
-            shapeId: 'panel',
-            layout: { mode: 'horizontal', padding: { x: 12, y: 12 }, gap: 12, align: 'start' },
-        },
-        {
-            id: 'nested-stack',
-            position: { x: 0, y: 0 },
-            size: { width: 90, height: 92 },
-            shapeId: 'default',
-            parentId: 'layout-nested',
-            layout: { mode: 'vertical', padding: { x: 8, y: 8 }, gap: 8, align: 'center' },
-        },
-        { id: 'stack-a', position: { x: 0, y: 0 }, size: { width: 60, height: 24 }, shapeId: 'default', parentId: 'nested-stack' },
-        { id: 'stack-b', position: { x: 0, y: 0 }, size: { width: 90, height: 30 }, shapeId: 'default', parentId: 'nested-stack' },
-        {
-            id: 'stack-overflow',
-            position: { x: 0, y: 0 },
-            size: { width: 110, height: 26 },
-            shapeId: 'default',
-            parentId: 'nested-stack',
-        },
-        { id: 'nested-peer', position: { x: 0, y: 0 }, size: { width: 50, height: 90 }, shapeId: 'default', parentId: 'layout-nested' },
-        {
-            id: 'layout-manual',
-            position: { x: 420, y: 260 },
-            size: { width: 190, height: 120 },
-            shapeId: 'panel',
-        },
-        { id: 'manual-a', position: { x: 12, y: 18 }, size: { width: 60, height: 30 }, shapeId: 'default', parentId: 'layout-manual' },
-        { id: 'manual-b', position: { x: 90, y: 60 }, size: { width: 68, height: 32 }, shapeId: 'default', parentId: 'layout-manual' },
-    ],
-    ports: [],
-    links: [],
-    texts: [
-        {
-            id: 'label-layout-row',
-            content: 'Row parent label lane',
-            position: { x: 8, y: 6 },
-            ownerId: 'layout-row',
-            layout: { boundsMode: 'owner-width', wrap: 'word', overflow: 'clip', padding: 0 },
-        },
-        { id: 'label-row-a', content: 'row-a', position: { x: 6, y: -14 }, ownerId: 'row-a' },
-        { id: 'label-row-b', content: 'row-b', position: { x: 6, y: -14 }, ownerId: 'row-b' },
-        { id: 'label-row-c', content: 'row-c', position: { x: 6, y: -14 }, ownerId: 'row-c' },
-        { id: 'label-row-nested-owner', content: 'owns children', position: { x: 6, y: -16 }, ownerId: 'row-nested-owner' },
-        {
-            id: 'label-layout-column',
-            content: 'Column parent label lane',
-            position: { x: 8, y: 6 },
-            ownerId: 'layout-column',
-            layout: { boundsMode: 'owner-width', wrap: 'word', overflow: 'clip', padding: 0 },
-        },
-        { id: 'label-col-a', content: 'col-a', position: { x: 6, y: -14 }, ownerId: 'col-a' },
-        { id: 'label-col-b', content: 'col-b', position: { x: 6, y: -14 }, ownerId: 'col-b' },
-        { id: 'label-col-c', content: 'col-c', position: { x: 6, y: -14 }, ownerId: 'col-c' },
-        {
-            id: 'label-layout-grid',
-            content: 'Grid template [12,4,8]',
-            position: { x: 8, y: 6 },
-            ownerId: 'layout-grid',
-            layout: { boundsMode: 'owner-width', wrap: 'word', overflow: 'clip', padding: 0 },
-        },
-        { id: 'label-grid-a', content: 'grid-a', position: { x: 6, y: -14 }, ownerId: 'grid-a' },
-        { id: 'label-grid-b', content: 'grid-b', position: { x: 6, y: -14 }, ownerId: 'grid-b' },
-        { id: 'label-grid-c', content: 'grid-c', position: { x: 6, y: -14 }, ownerId: 'grid-c' },
-        { id: 'label-grid-d', content: 'grid-d', position: { x: 6, y: -14 }, ownerId: 'grid-d' },
-        { id: 'label-grid-e', content: 'grid-e', position: { x: 6, y: -14 }, ownerId: 'grid-e' },
-        {
-            id: 'label-layout-nested',
-            content: 'Row + nested column lane',
-            position: { x: 6, y: 6 },
-            ownerId: 'layout-nested',
-            layout: { boundsMode: 'owner-width', wrap: 'word', overflow: 'clip', padding: 0 },
-        },
-        { id: 'label-nested-stack', content: 'nested stack', position: { x: 6, y: -16 }, ownerId: 'nested-stack' },
-        { id: 'label-stack-a', content: 'stack-a', position: { x: 6, y: -14 }, ownerId: 'stack-a' },
-        { id: 'label-stack-b', content: 'stack-b', position: { x: 6, y: -14 }, ownerId: 'stack-b' },
-        { id: 'label-stack-overflow', content: 'stack-overflow', position: { x: 6, y: -14 }, ownerId: 'stack-overflow' },
-        { id: 'label-nested-peer', content: 'nested-peer', position: { x: 6, y: -14 }, ownerId: 'nested-peer' },
-        { id: 'label-layout-manual', content: 'Manual (no layout)', position: { x: 6, y: -18 }, ownerId: 'layout-manual' },
-        { id: 'label-manual-a', content: 'manual-a', position: { x: 6, y: -14 }, ownerId: 'manual-a' },
-        { id: 'label-manual-b', content: 'manual-b', position: { x: 6, y: -14 }, ownerId: 'manual-b' },
-    ],
-}); };
+            { id: 'row-a', position: { x: 0, y: 0 }, size: { width: 62, height: 44 }, shapeId: 'default', parentId: 'layout-row' },
+            { id: 'row-b', position: { x: 0, y: 0 }, size: { width: 96, height: 32 }, shapeId: 'default', parentId: 'layout-row' },
+            { id: 'row-c', position: { x: 0, y: 0 }, size: { width: 54, height: 56 }, shapeId: 'default', parentId: 'layout-row' },
+            {
+                id: 'row-nested-owner',
+                position: { x: 0, y: 0 },
+                size: { width: 82, height: 82 },
+                shapeId: 'default',
+                parentId: 'layout-row',
+                layout: { mode: 'vertical', padding: { x: 8, y: 6 }, gap: 6, align: 'start' },
+            },
+            { id: 'row-nested-child-a', position: { x: 0, y: 0 }, size: { width: 60, height: 20 }, shapeId: 'default', parentId: 'row-nested-owner' },
+            { id: 'row-nested-child-b', position: { x: 0, y: 0 }, size: { width: 76, height: 22 }, shapeId: 'default', parentId: 'row-nested-owner' },
+            {
+                id: 'layout-column',
+                position: { x: 400, y: 70 },
+                size: { width: 120, height: 140 },
+                shapeId: 'panel',
+                layout: { mode: 'vertical', padding: { x: 12, y: 10 }, gap: 16, align: 'end' },
+            },
+            { id: 'col-a', position: { x: 0, y: 0 }, size: { width: 44, height: 28 }, shapeId: 'default', parentId: 'layout-column' },
+            { id: 'col-b', position: { x: 0, y: 0 }, size: { width: 70, height: 36 }, shapeId: 'default', parentId: 'layout-column' },
+            { id: 'col-c', position: { x: 0, y: 0 }, size: { width: 92, height: 44 }, shapeId: 'default', parentId: 'layout-column' },
+            {
+                id: 'layout-grid',
+                position: { x: 620, y: 70 },
+                size: { width: 160, height: 110 },
+                shapeId: 'panel',
+                layout: {
+                    mode: 'grid',
+                    padding: { x: 10, y: 10 },
+                    gap: 10,
+                    align: 'center',
+                    autoResize: 'grow-shrink',
+                    gridTemplate: [12, 4, 8],
+                    gridChildWidthResizeEnabled: true,
+                    childMinWidth: 24,
+                    childMinHeight: 18,
+                },
+            },
+            { id: 'grid-a', position: { x: 0, y: 0 }, size: { width: 36, height: 26 }, shapeId: 'default', parentId: 'layout-grid' },
+            { id: 'grid-b', position: { x: 0, y: 0 }, size: { width: 44, height: 24 }, shapeId: 'default', parentId: 'layout-grid' },
+            { id: 'grid-c', position: { x: 0, y: 0 }, size: { width: 50, height: 20 }, shapeId: 'default', parentId: 'layout-grid' },
+            { id: 'grid-d', position: { x: 0, y: 0 }, size: { width: 28, height: 30 }, shapeId: 'default', parentId: 'layout-grid' },
+            { id: 'grid-e', position: { x: 0, y: 0 }, size: { width: 52, height: 28 }, shapeId: 'default', parentId: 'layout-grid' },
+            {
+                id: 'layout-nested',
+                position: { x: 120, y: 260 },
+                size: { width: 190, height: 130 },
+                shapeId: 'panel',
+                layout: { mode: 'horizontal', padding: { x: 12, y: 12 }, gap: 12, align: 'start' },
+            },
+            {
+                id: 'nested-stack',
+                position: { x: 0, y: 0 },
+                size: { width: 90, height: 92 },
+                shapeId: 'default',
+                parentId: 'layout-nested',
+                layout: { mode: 'vertical', padding: { x: 8, y: 8 }, gap: 8, align: 'center' },
+            },
+            { id: 'stack-a', position: { x: 0, y: 0 }, size: { width: 60, height: 24 }, shapeId: 'default', parentId: 'nested-stack' },
+            { id: 'stack-b', position: { x: 0, y: 0 }, size: { width: 90, height: 30 }, shapeId: 'default', parentId: 'nested-stack' },
+            {
+                id: 'stack-overflow',
+                position: { x: 0, y: 0 },
+                size: { width: 110, height: 26 },
+                shapeId: 'default',
+                parentId: 'nested-stack',
+            },
+            { id: 'nested-peer', position: { x: 0, y: 0 }, size: { width: 50, height: 90 }, shapeId: 'default', parentId: 'layout-nested' },
+            {
+                id: 'layout-grid-deep',
+                position: { x: 640, y: 250 },
+                size: { width: 250, height: 180 },
+                shapeId: 'panel',
+                layout: {
+                    mode: 'grid',
+                    padding: { x: 12, y: 12 },
+                    gap: 12,
+                    align: 'center',
+                    autoResize: 'grow-shrink',
+                    gridTemplate: [4, 4, 4],
+                    gridChildWidthResizeEnabled: true,
+                    childMinWidth: 48,
+                    childMinHeight: 60,
+                },
+            },
+            {
+                id: 'deep-grid-leaf-left',
+                position: { x: 0, y: 0 },
+                size: { width: 58, height: 72 },
+                shapeId: 'default',
+                parentId: 'layout-grid-deep',
+            },
+            {
+                id: 'deep-grid-nested-parent',
+                position: { x: 0, y: 0 },
+                size: { width: 108, height: 90 },
+                shapeId: 'default',
+                parentId: 'layout-grid-deep',
+                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: 'deep-grid-leaf-right',
+                position: { x: 0, y: 0 },
+                size: { width: 52, height: 78 },
+                shapeId: 'default',
+                parentId: 'layout-grid-deep',
+            },
+            { id: 'deep-grid-a', position: { x: 0, y: 0 }, size: { width: 34, height: 24 }, shapeId: 'default', parentId: 'deep-grid-nested-parent' },
+            { 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-lock-compare',
+                position: { x: 420, y: 410 },
+                size: { width: 240, height: 160 },
+                shapeId: 'panel',
+                layout: { mode: 'horizontal', padding: { x: 12, y: 12 }, gap: 12, align: 'start' },
+            },
+            {
+                id: 'deep-lock-parent',
+                position: { x: 0, y: 0 },
+                size: { width: 110, height: 92 },
+                shapeId: 'default',
+                parentId: 'layout-lock-compare',
+                childElementInteraction: lockComparisonChildren ? { movable: false } : undefined,
+            },
+            { id: 'deep-lock-child-a', position: { x: 12, y: 24 }, size: { width: 38, height: 24 }, shapeId: 'default', parentId: 'deep-lock-parent' },
+            { id: 'deep-lock-child-b', position: { x: 56, y: 54 }, size: { width: 42, height: 24 }, shapeId: 'default', parentId: 'deep-lock-parent' },
+            {
+                id: 'deep-free-parent',
+                position: { x: 0, y: 0 },
+                size: { width: 110, height: 92 },
+                shapeId: 'default',
+                parentId: 'layout-lock-compare',
+            },
+            { id: 'deep-free-child-a', position: { x: 12, y: 24 }, size: { width: 38, height: 24 }, shapeId: 'default', parentId: 'deep-free-parent' },
+            { id: 'deep-free-child-b', position: { x: 56, y: 54 }, size: { width: 42, height: 24 }, shapeId: 'default', parentId: 'deep-free-parent' },
+            {
+                id: 'layout-manual',
+                position: { x: 420, y: 260 },
+                size: { width: 190, height: 120 },
+                shapeId: 'panel',
+            },
+            { id: 'manual-a', position: { x: 12, y: 18 }, size: { width: 60, height: 30 }, shapeId: 'default', parentId: 'layout-manual' },
+            { id: 'manual-b', position: { x: 90, y: 60 }, size: { width: 68, height: 32 }, shapeId: 'default', parentId: 'layout-manual' },
+        ],
+        ports: [],
+        links: [],
+        texts: [
+            {
+                id: 'label-layout-row',
+                content: 'Row parent label lane',
+                position: { x: 8, y: 6 },
+                ownerId: 'layout-row',
+                layout: { boundsMode: 'owner-width', wrap: 'word', overflow: 'clip', padding: 0 },
+            },
+            { id: 'label-row-a', content: 'row-a', position: { x: 6, y: -14 }, ownerId: 'row-a' },
+            { id: 'label-row-b', content: 'row-b', position: { x: 6, y: -14 }, ownerId: 'row-b' },
+            { id: 'label-row-c', content: 'row-c', position: { x: 6, y: -14 }, ownerId: 'row-c' },
+            { id: 'label-row-nested-owner', content: 'owns children', position: { x: 6, y: -16 }, ownerId: 'row-nested-owner' },
+            {
+                id: 'label-layout-column',
+                content: 'Column parent label lane',
+                position: { x: 8, y: 6 },
+                ownerId: 'layout-column',
+                layout: { boundsMode: 'owner-width', wrap: 'word', overflow: 'clip', padding: 0 },
+            },
+            { id: 'label-col-a', content: 'col-a', position: { x: 6, y: -14 }, ownerId: 'col-a' },
+            { id: 'label-col-b', content: 'col-b', position: { x: 6, y: -14 }, ownerId: 'col-b' },
+            { id: 'label-col-c', content: 'col-c', position: { x: 6, y: -14 }, ownerId: 'col-c' },
+            {
+                id: 'label-layout-grid',
+                content: 'Grid template [12,4,8]',
+                position: { x: 8, y: 6 },
+                ownerId: 'layout-grid',
+                layout: { boundsMode: 'owner-width', wrap: 'word', overflow: 'clip', padding: 0 },
+            },
+            { id: 'label-grid-a', content: 'grid-a', position: { x: 6, y: -14 }, ownerId: 'grid-a' },
+            { id: 'label-grid-b', content: 'grid-b', position: { x: 6, y: -14 }, ownerId: 'grid-b' },
+            { id: 'label-grid-c', content: 'grid-c', position: { x: 6, y: -14 }, ownerId: 'grid-c' },
+            { id: 'label-grid-d', content: 'grid-d', position: { x: 6, y: -14 }, ownerId: 'grid-d' },
+            { id: 'label-grid-e', content: 'grid-e', position: { x: 6, y: -14 }, ownerId: 'grid-e' },
+            {
+                id: 'label-layout-nested',
+                content: 'Row + nested column lane',
+                position: { x: 6, y: 6 },
+                ownerId: 'layout-nested',
+                layout: { boundsMode: 'owner-width', wrap: 'word', overflow: 'clip', padding: 0 },
+            },
+            { id: 'label-nested-stack', content: 'nested stack', position: { x: 6, y: -16 }, ownerId: 'nested-stack' },
+            { id: 'label-stack-a', content: 'stack-a', position: { x: 6, y: -14 }, ownerId: 'stack-a' },
+            { id: 'label-stack-b', content: 'stack-b', position: { x: 6, y: -14 }, ownerId: 'stack-b' },
+            { id: 'label-stack-overflow', content: 'stack-overflow', position: { x: 6, y: -14 }, ownerId: 'stack-overflow' },
+            { id: 'label-nested-peer', content: 'nested-peer', position: { x: 6, y: -14 }, ownerId: 'nested-peer' },
+            {
+                id: 'label-layout-grid-deep',
+                content: 'Outer grid: all direct children snap',
+                position: { x: 8, y: 6 },
+                ownerId: 'layout-grid-deep',
+                layout: { boundsMode: 'owner-width', wrap: 'word', overflow: 'clip', padding: 0 },
+            },
+            { id: 'label-deep-grid-leaf-left', content: 'leaf resize/reorder', position: { x: 6, y: -16 }, ownerId: 'deep-grid-leaf-left' },
+            { id: 'label-deep-grid-nested-parent', content: 'nested grid 12-unit child', position: { x: 6, y: -16 }, ownerId: 'deep-grid-nested-parent' },
+            { id: 'label-deep-grid-leaf-right', content: 'leaf resize/reorder', position: { x: 6, y: -16 }, ownerId: 'deep-grid-leaf-right' },
+            { id: 'label-deep-grid-a', content: 'grid-a', position: { x: 6, y: -14 }, ownerId: 'deep-grid-a' },
+            { 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-lock-compare',
+                content: 'Child drag lock comparison',
+                position: { x: 8, y: 6 },
+                ownerId: 'layout-lock-compare',
+                layout: { boundsMode: 'owner-width', wrap: 'word', overflow: 'clip', padding: 0 },
+            },
+            {
+                id: 'label-deep-lock-parent',
+                content: lockComparisonChildren ? 'parent lock: on' : 'parent lock: off',
+                position: { x: 6, y: -16 },
+                ownerId: 'deep-lock-parent',
+            },
+            {
+                id: 'label-deep-lock-child-a',
+                content: lockComparisonChildren ? 'drag target (locked)' : 'drag target (unlocked)',
+                position: { x: 4, y: -14 },
+                ownerId: 'deep-lock-child-a',
+            },
+            { id: 'label-deep-lock-child-b', content: 'api move still works', position: { x: 4, y: -14 }, ownerId: 'deep-lock-child-b' },
+            { id: 'label-deep-free-parent', content: 'movable reference', position: { x: 6, y: -16 }, ownerId: 'deep-free-parent' },
+            { id: 'label-deep-free-child-a', content: 'drag target', position: { x: 4, y: -14 }, ownerId: 'deep-free-child-a' },
+            { id: 'label-deep-free-child-b', content: 'free sibling', position: { x: 4, y: -14 }, ownerId: 'deep-free-child-b' },
+            { id: 'label-layout-manual', content: 'Manual (no layout)', position: { x: 6, y: -18 }, ownerId: 'layout-manual' },
+            { id: 'label-manual-a', content: 'manual-a', position: { x: 6, y: -14 }, ownerId: 'manual-a' },
+            { id: 'label-manual-b', content: 'manual-b', position: { x: 6, y: -14 }, ownerId: 'manual-b' },
+        ],
+    });
+};
 var autoLayoutDemoConfig = ({
     id: 'auto-layout',
     title: 'Element Auto-Layout + Label Lane',
@@ -4213,6 +4386,7 @@ var ElementModel = /** @class */ (function () {
         this.moveMode = data.moveMode;
         this.anchorCenter = data.anchorCenter;
         this.layout = data.layout;
+        this.childElementInteraction = data.childElementInteraction;
         this.portMovement = data.portMovement;
     }
     ElementModel.prototype.setPosition = function (position) {
@@ -4250,6 +4424,7 @@ var ElementModel = /** @class */ (function () {
             moveMode: this.moveMode,
             anchorCenter: this.anchorCenter,
             layout: this.layout,
+            childElementInteraction: this.childElementInteraction,
             portMovement: this.portMovement,
         };
     };
@@ -8082,9 +8257,7 @@ var DiagramEngine = /** @class */ (function () {
         var parentId = (_a = element.parentId) !== null && _a !== void 0 ? _a : null;
         if (!parentId)
             return false;
-        if (this.model.getChildren(element.id).length > 0)
-            return false;
-        if (element.layout && element.layout.mode !== 'manual')
+        if (!this.isLeafGridChildResizeCandidate(element))
             return false;
         var parent = this.model.getElement(parentId);
         if (((_b = parent === null || parent === void 0 ? void 0 : parent.layout) === null || _b === void 0 ? void 0 : _b.mode) !== 'grid')
@@ -8092,16 +8265,7 @@ var DiagramEngine = /** @class */ (function () {
         return !Boolean(parent.layout.gridChildWidthResizeEnabled);
     };
     DiagramEngine.prototype.shouldAnchorAutoLayoutGridChildWidthToLeft = function (element) {
-        var _a, _b;
-        var parentId = (_a = element.parentId) !== null && _a !== void 0 ? _a : null;
-        if (!parentId)
-            return false;
-        if (this.model.getChildren(element.id).length > 0)
-            return false;
-        if (element.layout && element.layout.mode !== 'manual')
-            return false;
-        var parent = this.model.getElement(parentId);
-        return Boolean(((_b = parent === null || parent === void 0 ? void 0 : parent.layout) === null || _b === void 0 ? void 0 : _b.mode) === 'grid' && parent.layout.gridChildWidthResizeEnabled);
+        return this.isEnabledGridChildWidthResizeCandidate(element);
     };
     DiagramEngine.prototype.shouldRestrictAutoLayoutChildRightGrowth = function (element, handle, requestedWidth) {
         return false;
@@ -8111,41 +8275,55 @@ var DiagramEngine = /** @class */ (function () {
         var parentId = (_a = element.parentId) !== null && _a !== void 0 ? _a : null;
         if (!parentId)
             return requestedWidth;
-        if (this.model.getChildren(element.id).length > 0)
-            return requestedWidth;
-        if (element.layout && element.layout.mode !== 'manual')
-            return requestedWidth;
-        var parent = this.model.getElement(parentId);
-        if (!(parent === null || parent === void 0 ? void 0 : parent.layout) || parent.layout.mode !== 'grid' || !parent.layout.gridChildWidthResizeEnabled)
+        if (!this.isEnabledGridChildWidthResizeCandidate(element))
             return requestedWidth;
         return this.autoLayoutService.snapGridChildRequestedWidth(parentId, element.id, requestedWidth);
     };
     DiagramEngine.prototype.resolveGridChildWidthResizeTopologyChange = function (element, requestedWidth) {
-        var _a, _b, _c;
+        var _a, _b;
         var parentId = (_a = element.parentId) !== null && _a !== void 0 ? _a : null;
         if (!parentId)
             return null;
-        if (this.model.getChildren(element.id).length > 0)
-            return null;
-        if (element.layout && element.layout.mode !== 'manual')
+        if (!this.isEnabledGridChildWidthResizeCandidate(element))
             return null;
         var parent = this.model.getElement(parentId);
-        if (!parent || ((_b = parent.layout) === null || _b === void 0 ? void 0 : _b.mode) !== 'grid' || !parent.layout.gridChildWidthResizeEnabled)
+        if (!parent)
             return null;
         var topologyChange = this.autoLayoutService.resolveGridChildResizeTopologyChange(parentId, element.id, requestedWidth);
         if (!topologyChange)
             return null;
+        var parentLayout = parent.layout;
+        if (!parentLayout)
+            return null;
         return {
             parentId: topologyChange.parentId,
             triggerChildId: topologyChange.triggerChildId,
             reason: topologyChange.reason,
             beforeRows: topologyChange.beforeRows,
             afterRows: topologyChange.afterRows,
-            beforeGridTemplate: parent.layout.gridTemplate ? __spreadArray([], parent.layout.gridTemplate, true) : undefined,
-            afterGridTemplate: __spreadArray([], ((_c = topologyChange.nextLayout.gridTemplate) !== null && _c !== void 0 ? _c : []), true),
+            beforeGridTemplate: parentLayout.gridTemplate ? __spreadArray([], parentLayout.gridTemplate, true) : undefined,
+            afterGridTemplate: __spreadArray([], ((_b = topologyChange.nextLayout.gridTemplate) !== null && _b !== void 0 ? _b : []), true),
             afterLayout: topologyChange.nextLayout,
         };
     };
+    DiagramEngine.prototype.isLeafGridChildResizeCandidate = function (element) {
+        if (this.model.getChildren(element.id).length > 0)
+            return false;
+        if (element.layout && element.layout.mode !== 'manual')
+            return false;
+        return true;
+    };
+    DiagramEngine.prototype.isEnabledGridChildWidthResizeCandidate = function (element) {
+        var _a;
+        var parentId = (_a = element.parentId) !== null && _a !== void 0 ? _a : null;
+        if (!parentId)
+            return false;
+        var parent = this.model.getElement(parentId);
+        var layout = parent === null || parent === void 0 ? void 0 : parent.layout;
+        if (!layout || layout.mode !== 'grid')
+            return false;
+        return Boolean(layout.gridChildWidthResizeEnabled);
+    };
     DiagramEngine.prototype.getPortWorldPosition = function (id) {
         return this.model.getPortWorldPosition(id);
     };
@@ -10006,7 +10184,7 @@ var ellipseMidPointToIndex = function (value) {
 var KonvaInteraction = /** @class */ (function () {
     function KonvaInteraction(engine, config) {
         if (config === void 0) { config = {}; }
-        var _a, _b;
+        var _a;
         this.linkDragContext = null;
         this.programmaticLinkSession = null;
         this.bound = false;
@@ -10030,7 +10208,6 @@ var KonvaInteraction = /** @class */ (function () {
         this.stage = config.stage;
         this.hitTester = (_a = config.hitTester) !== null && _a !== void 0 ? _a : new KonvaHitTester();
         this.renderer = config.renderer;
-        this.panKey = (_b = config.panKey) !== null && _b !== void 0 ? _b : 'Control';
         this.shapeRegistry = config.shapeRegistry;
         this.shapeHoverControls = this.normalizeShapeHoverControls(config.shapeHoverControls);
         this.onShapeHoverControlInteracted = config.onShapeHoverControlInteracted;
@@ -10198,7 +10375,10 @@ var KonvaInteraction = /** @class */ (function () {
             var hit = _this.resolveHit(point);
             var nativeEvent = event === null || event === void 0 ? void 0 : event.evt;
             var isMulti = Boolean(nativeEvent && (nativeEvent.ctrlKey || nativeEvent.metaKey || nativeEvent.shiftKey));
-            var isPanGesture = Boolean(nativeEvent && _this.isPanKeyPressed(nativeEvent) && nativeEvent.button === 0);
+            var isPrimaryButton = !nativeEvent || nativeEvent.button === 0;
+            var isEmptyPaper = !hit || hit.type === 'none';
+            var isMarqueeGesture = Boolean(isPrimaryButton && isEmptyPaper && (nativeEvent === null || nativeEvent === void 0 ? void 0 : nativeEvent.shiftKey));
+            var isPanGesture = Boolean(isPrimaryButton && isEmptyPaper && !(nativeEvent === null || nativeEvent === void 0 ? void 0 : nativeEvent.shiftKey));
             var pointerInfo = _this.buildPointerInfo(point, nativeEvent);
             if ((hit === null || hit === void 0 ? void 0 : hit.type) === 'shape-hover-control') {
                 var resolvedControl = _this.resolveShapeHoverControlFromHit(hit.id, point);
@@ -10256,11 +10436,14 @@ var KonvaInteraction = /** @class */ (function () {
                 }
                 return;
             }
-            if (!hit || hit.type === 'none') {
+            if (isMarqueeGesture) {
                 _this.dragState = { mode: 'marquee', start: point, isMulti: isMulti, hasMoved: false };
                 (_d = _this.renderer) === null || _d === void 0 ? void 0 : _d.renderMarquee({ x: point.x, y: point.y, width: 0, height: 0 });
                 return;
             }
+            if (isEmptyPaper) {
+                return;
+            }
             if (hit.type === 'port') {
                 var elementId = _this.engine.getPortElementId(hit.id);
                 if (!elementId)
@@ -10325,6 +10508,7 @@ var KonvaInteraction = /** @class */ (function () {
                     var element = _this.getElementById(hit.id);
                     if (!element)
                         return;
+                    var movable = _this.isElementMovable(hit.id);
                     var anchor = element.anchorCenter ? 'center' : 'top-left';
                     var base = element.anchorCenter
                         ? {
@@ -10339,12 +10523,13 @@ var KonvaInteraction = /** @class */ (function () {
                         offset: { x: point.x - base.x, y: point.y - base.y },
                         start: __assign({}, base),
                         anchor: anchor,
+                        movable: movable,
                         startParentId: (_e = element.parentId) !== null && _e !== void 0 ? _e : null,
                         selectionIds: _this.engine.getSelection(),
                         isMulti: isMulti,
                         hasMoved: false,
                     };
-                    _this.setCursor('grabbing');
+                    _this.setCursor(movable ? 'grabbing' : 'pointer');
                 }
             }
         };
@@ -10402,6 +10587,9 @@ var KonvaInteraction = /** @class */ (function () {
                     var dy = target.y - _this.dragState.start.y;
                     var moved = Math.hypot(dx, dy) >= _this.dragThreshold;
                     _this.dragState.hasMoved = _this.dragState.hasMoved || moved;
+                    if (!_this.dragState.movable) {
+                        return;
+                    }
                     _this.engine.moveElementTo(_this.dragState.id, target.x, target.y);
                     if (_this.renderer && _this.engine.getSelection().includes(_this.dragState.id)) {
                         var element = _this.getElementById(_this.dragState.id);
@@ -10527,15 +10715,15 @@ var KonvaInteraction = /** @class */ (function () {
                 var dx = point.x - _this.dragState.start.x;
                 var dy = point.y - _this.dragState.start.y;
                 _this.pan = {
-                    x: _this.dragState.origin.x - dx * _this.panSpeed,
-                    y: _this.dragState.origin.y - dy * _this.panSpeed,
+                    x: _this.dragState.origin.x + dx * _this.panSpeed,
+                    y: _this.dragState.origin.y + dy * _this.panSpeed,
                 };
                 _this.applyStageTransform();
                 _this.engine.setViewport(_this.pan, _this.zoom);
             }
         };
         var pointerUp = function () {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
             var args = [];
             for (var _i = 0; _i < arguments.length; _i++) {
                 args[_i] = arguments[_i];
@@ -10629,10 +10817,21 @@ var KonvaInteraction = /** @class */ (function () {
                     _this.engine.emitPaperClick(pointerInfo);
                 }
             }
-            if (((_h = _this.dragState) === null || _h === void 0 ? void 0 : _h.mode) === 'move' && _this.dragState.type === 'element') {
+            if (((_h = _this.dragState) === null || _h === void 0 ? void 0 : _h.mode) === 'pan') {
+                var point = pointerPoint !== null && pointerPoint !== void 0 ? pointerPoint : _this.dragState.start;
+                var dx = point.x - _this.dragState.start.x;
+                var dy = point.y - _this.dragState.start.y;
+                var moved = Math.hypot(dx, dy) >= _this.dragThreshold;
+                if (!moved) {
+                    _this.engine.setSelection([]);
+                    var pointerInfo = _this.buildPointerInfo(point, nativeEvent);
+                    _this.engine.emitPaperClick(pointerInfo);
+                }
+            }
+            if (((_j = _this.dragState) === null || _j === void 0 ? void 0 : _j.mode) === 'move' && _this.dragState.type === 'element') {
                 var element = _this.getElementById(_this.dragState.id);
                 if (element) {
-                    var endTopLeft = (_j = _this.engine.getElementWorldPosition(_this.dragState.id)) !== null && _j !== void 0 ? _j : element.position;
+                    var endTopLeft = (_k = _this.engine.getElementWorldPosition(_this.dragState.id)) !== null && _k !== void 0 ? _k : element.position;
                     var endWorld = _this.dragState.anchor === 'center'
                         ? {
                             x: endTopLeft.x + element.size.width / 2,
@@ -10643,7 +10842,8 @@ var KonvaInteraction = /** @class */ (function () {
                         x: endWorld.x - _this.dragState.start.x,
                         y: endWorld.y - _this.dragState.start.y,
                     };
-                    var moved = _this.dragState.hasMoved || Math.hypot(delta.x, delta.y) > 0;
+                    var moved = _this.dragState.movable &&
+                        (_this.dragState.hasMoved || Math.hypot(delta.x, delta.y) > 0);
                     if (moved) {
                         _this.engine.emitElementDrop({
                             elementId: _this.dragState.id,
@@ -10655,16 +10855,16 @@ var KonvaInteraction = /** @class */ (function () {
                             anchor: _this.dragState.anchor,
                         });
                     }
-                    else {
+                    else if (!_this.dragState.hasMoved) {
                         var pointerInfo = _this.buildPointerInfo(pointerPoint !== null && pointerPoint !== void 0 ? pointerPoint : _this.dragState.start, nativeEvent);
                         _this.engine.emitElementClick(_this.dragState.id, pointerInfo, _this.dragState.isMulti);
                     }
                 }
             }
-            if (((_k = _this.dragState) === null || _k === void 0 ? void 0 : _k.mode) === 'move' && _this.dragState.type === 'port') {
+            if (((_l = _this.dragState) === null || _l === void 0 ? void 0 : _l.mode) === 'move' && _this.dragState.type === 'port') {
                 var elementId = _this.engine.getPortElementId(_this.dragState.id);
                 if (elementId) {
-                    var pointerInfo = _this.buildPointerInfo((_l = pointerPoint !== null && pointerPoint !== void 0 ? pointerPoint : _this.engine.getPortWorldPosition(_this.dragState.id)) !== null && _l !== void 0 ? _l : { x: 0, y: 0 }, nativeEvent);
+                    var pointerInfo = _this.buildPointerInfo((_m = pointerPoint !== null && pointerPoint !== void 0 ? pointerPoint : _this.engine.getPortWorldPosition(_this.dragState.id)) !== null && _m !== void 0 ? _m : { x: 0, y: 0 }, nativeEvent);
                     _this.engine.emitPortMouseUp({ portId: _this.dragState.id, elementId: elementId, pointer: pointerInfo });
                 }
             }
@@ -10970,6 +11170,10 @@ var KonvaInteraction = /** @class */ (function () {
             this.setCursor('pointer');
             return;
         }
+        if (hit.type === 'element' && !this.isElementMovable(hit.id)) {
+            this.setCursor('pointer');
+            return;
+        }
         this.setCursor('grab');
     };
     KonvaInteraction.prototype.normalizeShapeHoverControls = function (controls) {
@@ -12195,6 +12399,14 @@ var KonvaInteraction = /** @class */ (function () {
         var _a, _b;
         return ((_b = (_a = this.getTextById(id)) === null || _a === void 0 ? void 0 : _a.interaction) === null || _b === void 0 ? void 0 : _b.movable) !== false;
     };
+    KonvaInteraction.prototype.isElementMovable = function (id) {
+        var _a;
+        var element = this.getElementById(id);
+        if (!(element === null || element === void 0 ? void 0 : element.parentId))
+            return true;
+        var parent = this.getElementById(element.parentId);
+        return ((_a = parent === null || parent === void 0 ? void 0 : parent.childElementInteraction) === null || _a === void 0 ? void 0 : _a.movable) !== false;
+    };
     KonvaInteraction.prototype.isTextEditable = function (id) {
         var _a, _b;
         return ((_b = (_a = this.getTextById(id)) === null || _a === void 0 ? void 0 : _a.interaction) === null || _b === void 0 ? void 0 : _b.editable) !== false;
@@ -12313,19 +12525,6 @@ var KonvaInteraction = /** @class */ (function () {
         var tag = target.tagName.toLowerCase();
         return tag === 'input' || tag === 'textarea' || tag === 'select';
     };
-    KonvaInteraction.prototype.isPanKeyPressed = function (event) {
-        switch (this.panKey) {
-            case 'Shift':
-                return event.shiftKey;
-            case 'Alt':
-                return event.altKey;
-            case 'Meta':
-                return event.metaKey;
-            case 'Control':
-            default:
-                return event.ctrlKey;
-        }
-    };
     return KonvaInteraction;
 }());
 
@@ -13694,11 +13893,16 @@ var parentOptions = [
     { id: 'layout-column', label: 'Vertical layout' },
     { id: 'layout-grid', label: 'Grid layout' },
     { id: 'layout-nested', label: 'Nested layout' },
+    { id: 'layout-grid-deep', label: 'Nested grid' },
+    { id: 'layout-lock-compare', label: 'Child lock compare' },
     { id: 'layout-manual', label: 'Manual (compare)' },
 ];
 var shortLabel = 'Parent label lane demo';
 var longLabel = 'Parent label lane demo with longer content to increase flexible reserved space and push children downward.';
 var defaultGridTemplateText = '[12,4,8]';
+var lockComparisonContainerId = 'layout-lock-compare';
+var lockParentId = 'deep-lock-parent';
+var lockTargetId = 'deep-lock-child-a';
 var serializeGridTemplate = function (template) {
     return Array.isArray(template) && template.length > 0 ? JSON.stringify(template) : defaultGridTemplateText;
 };
@@ -13737,11 +13941,13 @@ var parseGridTemplate = function (value) {
 };
 var AutoLayoutDemo = function () {
     var demo = autoLayoutDemoConfig;
-    var _a = useDemoEditor({
-        createState: demo.createState,
+    var _a = React.useState(true), lockComparisonChildren = _a[0], setLockComparisonChildren = _a[1];
+    var createState = React.useCallback(function () { return createAutoLayoutState(lockComparisonChildren); }, [lockComparisonChildren]);
+    var _b = useDemoEditor({
+        createState: createState,
         elementShapes: demo.elementShapes,
         portShapes: demo.portShapes,
-    }), containerRef = _a.containerRef, editorRef = _a.editorRef, diagramState = _a.diagramState, selection = _a.selection, snapEnabled = _a.snapEnabled, setSnapEnabled = _a.setSnapEnabled;
+    }), containerRef = _b.containerRef, editorRef = _b.editorRef, diagramState = _b.diagramState, selection = _b.selection, snapEnabled = _b.snapEnabled, setSnapEnabled = _b.setSnapEnabled;
     var nextOffset = useOffsetSequence();
     var actionHelpers = React.useMemo(function () { return ({ nextOffset: nextOffset }); }, [nextOffset]);
     var controls = useDemoControls({
@@ -13753,25 +13959,25 @@ var AutoLayoutDemo = function () {
         setSnapEnabled: setSnapEnabled,
         actionHelpers: actionHelpers,
     });
-    var _b = React.useState(parentOptions[0].id), targetId = _b[0], setTargetId = _b[1];
-    var _c = React.useState('horizontal'), mode = _c[0], setMode = _c[1];
-    var _d = React.useState('center'), align = _d[0], setAlign = _d[1];
-    var _e = React.useState('grow'), autoResize = _e[0], setAutoResize = _e[1];
-    var _f = React.useState(12), padding = _f[0], setPadding = _f[1];
-    var _g = React.useState(12), gap = _g[0], setGap = _g[1];
-    var _h = React.useState('none'), childFitMainAxis = _h[0], setChildFitMainAxis = _h[1];
-    var _j = React.useState('none'), childFitCrossAxis = _j[0], setChildFitCrossAxis = _j[1];
-    var _k = React.useState(''), childMinWidth = _k[0], setChildMinWidth = _k[1];
-    var _l = React.useState(''), childMinHeight = _l[0], setChildMinHeight = _l[1];
-    var _m = React.useState(''), childMaxWidth = _m[0], setChildMaxWidth = _m[1];
-    var _o = React.useState(''), childMaxHeight = _o[0], setChildMaxHeight = _o[1];
-    var _p = React.useState(defaultGridTemplateText), gridTemplateText = _p[0], setGridTemplateText = _p[1];
-    var _q = React.useState(false), gridChildWidthResizeEnabled = _q[0], setGridChildWidthResizeEnabled = _q[1];
-    var _r = React.useState('none'), labelReservedMode = _r[0], setLabelReservedMode = _r[1];
-    var _s = React.useState(32), labelReservedFixedSize = _s[0], setLabelReservedFixedSize = _s[1];
-    var _t = React.useState(''), labelReservedMinSize = _t[0], setLabelReservedMinSize = _t[1];
-    var _u = React.useState(''), labelReservedMaxSize = _u[0], setLabelReservedMaxSize = _u[1];
-    var _v = React.useState('None yet'), lastTrigger = _v[0], setLastTrigger = _v[1];
+    var _c = React.useState(parentOptions[0].id), targetId = _c[0], setTargetId = _c[1];
+    var _d = React.useState('horizontal'), mode = _d[0], setMode = _d[1];
+    var _e = React.useState('center'), align = _e[0], setAlign = _e[1];
+    var _f = React.useState('grow'), autoResize = _f[0], setAutoResize = _f[1];
+    var _g = React.useState(12), padding = _g[0], setPadding = _g[1];
+    var _h = React.useState(12), gap = _h[0], setGap = _h[1];
+    var _j = React.useState('none'), childFitMainAxis = _j[0], setChildFitMainAxis = _j[1];
+    var _k = React.useState('none'), childFitCrossAxis = _k[0], setChildFitCrossAxis = _k[1];
+    var _l = React.useState(''), childMinWidth = _l[0], setChildMinWidth = _l[1];
+    var _m = React.useState(''), childMinHeight = _m[0], setChildMinHeight = _m[1];
+    var _o = React.useState(''), childMaxWidth = _o[0], setChildMaxWidth = _o[1];
+    var _p = React.useState(''), childMaxHeight = _p[0], setChildMaxHeight = _p[1];
+    var _q = React.useState(defaultGridTemplateText), gridTemplateText = _q[0], setGridTemplateText = _q[1];
+    var _r = React.useState(false), gridChildWidthResizeEnabled = _r[0], setGridChildWidthResizeEnabled = _r[1];
+    var _s = React.useState('none'), labelReservedMode = _s[0], setLabelReservedMode = _s[1];
+    var _t = React.useState(32), labelReservedFixedSize = _t[0], setLabelReservedFixedSize = _t[1];
+    var _u = React.useState(''), labelReservedMinSize = _u[0], setLabelReservedMinSize = _u[1];
+    var _v = React.useState(''), labelReservedMaxSize = _v[0], setLabelReservedMaxSize = _v[1];
+    var _w = React.useState('None yet'), lastTrigger = _w[0], setLastTrigger = _w[1];
     React.useEffect(function () {
         var editor = editorRef.current;
         if (!editor)
@@ -13805,6 +14011,36 @@ var AutoLayoutDemo = function () {
         }
     }, [diagramState, targetId]);
     var targetElement = React.useMemo(function () { return diagramState === null || diagramState === void 0 ? void 0 : diagramState.elements.find(function (el) { return el.id === targetId; }); }, [diagramState, targetId]);
+    var resolveElementWorldPosition = React.useCallback(function (elementId) {
+        if (!diagramState)
+            return null;
+        var byId = new Map(diagramState.elements.map(function (element) { return [element.id, element]; }));
+        var current = byId.get(elementId);
+        if (!current)
+            return null;
+        var x = 0;
+        var y = 0;
+        while (current) {
+            x += current.position.x;
+            y += current.position.y;
+            current = current.parentId ? byId.get(current.parentId) : undefined;
+        }
+        return { x: x, y: y };
+    }, [diagramState]);
+    var lockDemoContext = React.useMemo(function () {
+        var _a;
+        if (!diagramState)
+            return null;
+        var outer = diagramState.elements.find(function (el) { return el.id === lockComparisonContainerId; });
+        var parent = diagramState.elements.find(function (el) { return el.id === lockParentId; });
+        if (!outer || !parent)
+            return null;
+        return {
+            outer: outer,
+            parent: parent,
+            isLocked: ((_a = parent.childElementInteraction) === null || _a === void 0 ? void 0 : _a.movable) === false,
+        };
+    }, [diagramState]);
     var targetOptions = React.useMemo(function () {
         var seen = new Set();
         var options = [];
@@ -13951,21 +14187,29 @@ var AutoLayoutDemo = function () {
             setLastTrigger('child removed');
         }
     };
-    var handleFocusResizeLockChild = function () {
+    var handleFocusLockTarget = function () {
         var editor = editorRef.current;
         if (!editor)
             return;
-        setTargetId('layout-grid');
-        editor.setSelection(['grid-b']);
-        setLastTrigger('focus resize-lock child');
+        setTargetId(lockParentId);
+        editor.setSelection([lockTargetId]);
+        setLastTrigger(lockComparisonChildren ? 'focus locked child' : 'focus unlocked comparison child');
     };
-    var handleFocusResizeLockParent = function () {
+    var handleFocusLockParent = function () {
         var editor = editorRef.current;
         if (!editor)
             return;
-        setTargetId('layout-grid');
-        editor.setSelection(['layout-grid']);
-        setLastTrigger('focus resize-lock parent');
+        setTargetId(lockParentId);
+        editor.setSelection([lockParentId]);
+        setLastTrigger('focus lock parent');
+    };
+    var handleMoveLockTargetViaApi = function () {
+        var editor = editorRef.current;
+        var parentWorld = resolveElementWorldPosition(lockParentId);
+        if (!editor || !lockDemoContext || !parentWorld)
+            return;
+        editor.moveElementTo(lockTargetId, parentWorld.x + 56, parentWorld.y + 18);
+        setLastTrigger(lockDemoContext.isLocked ? 'locked child moved by api' : 'comparison child moved by api');
     };
     var alignmentLabel = mode === 'horizontal'
         ? 'Vertical align (top/center/bottom)'
@@ -13976,10 +14220,17 @@ var AutoLayoutDemo = function () {
         React.createElement("div", { style: { marginBottom: 12 } },
             React.createElement("h2", { style: { marginTop: 0, marginBottom: 4 } }, demo.title),
             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' } },
-                "Grid child width resize is disabled by default. With the capability off, select ",
-                React.createElement("code", null, "grid-b"),
-                " and drag a corner mostly downward: width stays stable while height changes. Turn the capability on to let horizontal drag wrap rows automatically from a flat 12-unit slot array, then resize children in 1/12 steps. Any corner can drive width changes, width always grows or shrinks on the right, siblings keep their own widths, and dragging can swap grid item order.")),
+                "The ",
+                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.")),
         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' } },
@@ -14032,6 +14283,14 @@ var AutoLayoutDemo = function () {
                 React.createElement("label", { style: { display: 'inline-flex', alignItems: 'center', gap: 6 } },
                     React.createElement("input", { id: "grid-child-width-resize-enabled", type: "checkbox", checked: gridChildWidthResizeEnabled, onChange: function (event) { return setGridChildWidthResizeEnabled(event.target.checked); }, disabled: mode !== 'grid' }),
                     "Enable 12-unit resize on child width drag"),
+                React.createElement("label", { htmlFor: "lock-comparison-child-drag", style: { fontWeight: 600 } }, "Lock comparison child drag"),
+                React.createElement("label", { style: { display: 'inline-flex', alignItems: 'center', gap: 6 } },
+                    React.createElement("input", { id: "lock-comparison-child-drag", type: "checkbox", checked: lockComparisonChildren, onChange: function (event) {
+                            setLockComparisonChildren(event.target.checked);
+                            setTargetId(lockComparisonContainerId);
+                            setLastTrigger(event.target.checked ? 'comparison child drag locked' : 'comparison child drag unlocked');
+                        } }),
+                    "Reload parent-owned lock demo"),
                 React.createElement("label", { htmlFor: "label-reserved-mode-select", style: { fontWeight: 600 } }, "Label lane"),
                 React.createElement("select", { id: "label-reserved-mode-select", value: labelReservedMode, onChange: function (event) { return setLabelReservedMode(event.target.value); }, style: { padding: '6px 10px', minWidth: 120 }, disabled: mode === 'manual' },
                     React.createElement("option", { value: "none" }, "None"),
@@ -14062,8 +14321,9 @@ var AutoLayoutDemo = function () {
                     React.createElement("strong", null, lastTrigger)),
                 React.createElement("button", { type: "button", onClick: function () { return handleSetLabelContent(shortLabel); }, style: { padding: '6px 10px' }, disabled: !targetElement || mode === 'manual' }, "Label short"),
                 React.createElement("button", { type: "button", onClick: function () { return handleSetLabelContent(longLabel); }, style: { padding: '6px 10px' }, disabled: !targetElement || mode === 'manual' }, "Label long"),
-                React.createElement("button", { type: "button", onClick: handleFocusResizeLockChild, style: { padding: '6px 10px' } }, "Focus lock child"),
-                React.createElement("button", { type: "button", onClick: handleFocusResizeLockParent, style: { padding: '6px 10px' } }, "Focus lock parent")),
+                React.createElement("button", { type: "button", onClick: handleFocusLockTarget, style: { padding: '6px 10px' } }, "Focus lock target"),
+                React.createElement("button", { type: "button", onClick: handleFocusLockParent, style: { padding: '6px 10px' } }, "Focus lock parent"),
+                React.createElement("button", { type: "button", onClick: handleMoveLockTargetViaApi, style: { padding: '6px 10px' } }, "Move lock target via API")),
             React.createElement("div", { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 } },
                 React.createElement("div", null,
                     React.createElement("div", { style: { fontWeight: 600, marginBottom: 6 } }, "Child order (axis or grid row-major)"),
@@ -14084,6 +14344,10 @@ var AutoLayoutDemo = function () {
                 React.createElement("div", null,
                     React.createElement("div", { style: { fontWeight: 600, marginBottom: 6 } }, "Scenario tips"),
                     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, "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."),
                         React.createElement("li", null, "Enable grid child width resize, then shrink a full-width grid child; it should snap smaller without flashing, and later siblings should keep their own widths."),
                         React.createElement("li", null, "Enable grid child width resize, then grow a child; siblings on the right should keep their own widths and only move down when they no longer fit."),