orcasvn-react-diagrams 0.2.6 → 0.2.7

package/src/displaybox/demos/nestedDemo.ts

@@ -3,75 +3,128 @@ import { createId } from '../../utils/ids';
 import type { DemoConfig } from '../types';
 import { baseElementShapes, basePortShapes } from './shared';
 
-const createNestedState = (): DiagramState => ({
-  elements: [
-    {
-      id: 'parent-1',
-      position: { x: 140, y: 140 },
-      size: { width: 320, height: 240 },
-      shapeId: 'panel',
-    },
-    {
-      id: 'child-1',
-      position: { x: 40, y: 60 },
-      size: { width: 160, height: 100 },
-      shapeId: 'default',
-      parentId: 'parent-1',
-    },
-  ],
-  ports: [
-    {
-      id: 'child-port',
-      elementId: 'child-1',
-      position: { x: 20, y: 20 },
-      shapeId: 'port-circle',
-      anchorCenter: true,
-    },
-  ],
-  links: [],
-  texts: [
-    {
-      id: 'child-label',
-      content: 'Child',
-      position: { x: 6, y: -16 },
-      ownerId: 'child-1',
-    },
-  ],
-});
-
-export const nestedDemoConfig: DemoConfig = ({
-  id: 'nested',
-  title: 'Nested Elements',
-  description: 'Parent/child elements with world positioning.',
-  createState: createNestedState,
-  elementShapes: baseElementShapes,
-  portShapes: basePortShapes,
-  defaultElementShapeId: 'default',
-  defaultPortShapeId: 'port-circle',
-  actions: [
-    {
-      id: 'move-parent',
-      label: 'Move parent',
-      run: (editor, state) => {
-        const parent = state.elements.find((element) => element.id === 'parent-1');
-        if (!parent) return;
-        editor.moveElementTo(parent.id, parent.position.x + 40, parent.position.y + 20);
-      },
-    },
-    {
-      id: 'add-child',
-      label: 'Add child',
-      run: (editor, state, demo, helpers) => {
-        const parent = state.elements.find((element) => element.id === 'parent-1');
-        if (!parent) return;
-        const offset = helpers.nextOffset();
-        editor.addElement({
-          id: `child-${createId()}`,
-          position: { x: 30 + offset, y: 50 + offset },
-          size: { width: 140, height: 90 },
-          shapeId: demo.defaultElementShapeId ?? 'default',
-          parentId: parent.id,
-        });
+const createNestedState = (): DiagramState => ({
+  elements: [
+    {
+      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-free',
+      position: { x: 40, y: 60 },
+      size: { width: 160, height: 100 },
+      shapeId: 'default',
+      parentId: 'parent-free',
+    },
+  ],
+  ports: [
+    {
+      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,
+    },
+  ],
+  links: [],
+  texts: [
+    {
+      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 },
+    },
+  ],
+});
+
+export const nestedDemoConfig: DemoConfig = ({
+  id: 'nested',
+  title: 'Nested Elements',
+  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: (editor, state) => {
+        const child = state.elements.find((element) => element.id === 'child-locked');
+        const parent = state.elements.find((element) => 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 locked parent',
+      run: (editor, state) => {
+        const parent = state.elements.find((element) => element.id === 'parent-locked');
+        if (!parent) return;
+        editor.moveElementTo(parent.id, parent.position.x + 40, parent.position.y + 20);
+      },
+    },
+    {
+      id: 'add-child',
+      label: 'Add movable child',
+      run: (editor, state, demo, helpers) => {
+        const parent = state.elements.find((element) => element.id === 'parent-free');
+        if (!parent) return;
+        const offset = helpers.nextOffset();
+        editor.addElement({
+          id: `child-free-${createId()}`,
+          position: { x: 30 + offset, y: 50 + offset },
+          size: { width: 140, height: 90 },
+          shapeId: demo.defaultElementShapeId ?? 'default',
+          parentId: parent.id,
+        });
       },
     },
   ],