orcasvn-react-diagrams 0.2.2 → 0.2.4

package/src/displaybox/demos/obstacleRoutingDemo.ts

@@ -1,176 +1,212 @@
-import type { DiagramState, LinkData } from '../../api';
-import type { DemoAction, DemoConfig } from '../types';
-import { baseElementShapes, basePortShapes } from './shared';
-
-const obstacleRoutingLinks: LinkData[] = [
-  {
-    id: 'block-link',
-    sourcePortId: 'block-source-port',
-    targetPortId: 'block-target-port',
-    points: [],
-    routing: 'auto',
-  },
-  {
-    id: 'shared-sibling-link',
-    sourcePortId: 'shared-child-a-port',
-    targetPortId: 'shared-child-b-port',
-    points: [],
-    routing: 'auto',
-  },
-  {
-    id: 'parent-child-link',
-    sourcePortId: 'parent-host-port',
-    targetPortId: 'edge-child-port',
-    points: [],
-    routing: 'auto',
-  },
-  {
-    id: 'grandchild-link',
-    sourcePortId: 'grandchild-a-port',
-    targetPortId: 'grandchild-b-port',
-    points: [],
-    routing: 'auto',
-  },
-];
-
-const createObstacleRoutingState = (): DiagramState => ({
-  elements: [
-    {
-      id: 'block-source',
-      position: { x: 60, y: 40 },
-      size: { width: 140, height: 90 },
-      shapeId: 'default',
-    },
-    {
-      id: 'block-target',
-      position: { x: 380, y: 40 },
-      size: { width: 140, height: 90 },
-      shapeId: 'panel',
-    },
-    {
-      id: 'block-obstacle',
-      position: { x: 250, y: 30 },
-      size: { width: 80, height: 110 },
-      shapeId: 'default',
-    },
-    {
-      id: 'shared-parent',
-      position: { x: 40, y: 180 },
-      size: { width: 420, height: 220 },
-      shapeId: 'panel',
-      style: { fill: '#fafafa' },
-    },
-    {
-      id: 'shared-child-a',
-      position: { x: 40, y: 40 },
-      size: { width: 140, height: 90 },
-      shapeId: 'default',
-      parentId: 'shared-parent',
-    },
-    {
-      id: 'shared-child-b',
-      position: { x: 220, y: 40 },
-      size: { width: 140, height: 90 },
-      shapeId: 'default',
-      parentId: 'shared-parent',
-    },
-    {
-      id: 'parent-host',
-      position: { x: 500, y: 180 },
-      size: { width: 320, height: 220 },
-      shapeId: 'panel',
-      style: { fill: '#fafafa' },
-    },
-    {
-      id: 'edge-child',
-      position: { x: 40, y: 60 },
-      size: { width: 160, height: 90 },
-      shapeId: 'default',
-      parentId: 'parent-host',
-    },
-    {
-      id: 'grandparent',
-      position: { x: 40, y: 380 },
-      size: { width: 780, height: 160 },
-      shapeId: 'panel',
-      style: { fill: '#fafafa' },
-    },
-    {
-      id: 'mid-parent-a',
-      position: { x: 40, y: 30 },
-      size: { width: 300, height: 100 },
-      shapeId: 'panel',
-      parentId: 'grandparent',
-    },
-    {
-      id: 'mid-parent-b',
-      position: { x: 420, y: 30 },
-      size: { width: 300, height: 100 },
-      shapeId: 'panel',
-      parentId: 'grandparent',
-    },
-    {
-      id: 'grandchild-a',
-      position: { x: 40, y: 20 },
-      size: { width: 120, height: 60 },
-      shapeId: 'default',
-      parentId: 'mid-parent-a',
-    },
-    {
-      id: 'grandchild-b',
-      position: { x: 40, y: 20 },
-      size: { width: 120, height: 60 },
-      shapeId: 'default',
-      parentId: 'mid-parent-b',
-    },
-  ],
-  ports: [
-    { id: 'block-source-port', elementId: 'block-source', position: { x: 70, y: 45 }, shapeId: 'port-circle' },
-    { id: 'block-target-port', elementId: 'block-target', position: { x: 70, y: 45 }, shapeId: 'port-circle' },
-    { id: 'shared-child-a-port', elementId: 'shared-child-a', position: { x: 70, y: 45 }, shapeId: 'port-circle' },
-    { id: 'shared-child-b-port', elementId: 'shared-child-b', position: { x: 70, y: 45 }, shapeId: 'port-circle' },
-    { id: 'parent-host-port', elementId: 'parent-host', position: { x: 250, y: 110 }, shapeId: 'port-circle' },
-    { id: 'edge-child-port', elementId: 'edge-child', position: { x: 0, y: 45 }, shapeId: 'port-circle' },
-    { id: 'grandchild-a-port', elementId: 'grandchild-a', position: { x: 60, y: 30 }, shapeId: 'port-circle' },
-    { id: 'grandchild-b-port', elementId: 'grandchild-b', position: { x: 60, y: 30 }, shapeId: 'port-circle' },
-  ],
-  links: obstacleRoutingLinks,
-  texts: [
-    { id: 'block-label', content: 'Blocking obstacle', position: { x: 60, y: 16 } },
-    { id: 'shared-label', content: 'Shared parent (siblings)', position: { x: 40, y: 158 } },
-    { id: 'parent-label', content: 'Parent-child (stay inside)', position: { x: 500, y: 158 } },
-    { id: 'grand-label', content: 'Grandchildren (shared ancestors)', position: { x: 40, y: 358 } },
-  ],
-});
-
-const addLinksAction: DemoAction = {
-  id: 'add-links',
-  label: 'Add Links (Auto)',
-  run: (editor, state) => {
-    const existing = new Set(state.links.map((link) => link.id));
-    obstacleRoutingLinks.forEach((link) => {
-      if (existing.has(link.id)) return;
-      editor.addLink({ ...link });
-    });
-  },
-};
-
-const rerouteAllAction: DemoAction = {
-  id: 'reroute-links',
-  label: 'Reroute All Links',
-  run: (editor) => {
-    editor.rerouteAllLinks();
-  },
-};
-
-export const obstacleRoutingDemoConfig: DemoConfig = ({
-  id: 'obstacle-routing',
-  title: 'Obstacle Routing',
-  description: 'Auto routing avoids obstacles and respects ancestor/edge rules.',
-  createState: createObstacleRoutingState,
-  elementShapes: baseElementShapes,
-  portShapes: basePortShapes,
-  defaultElementShapeId: 'default',
-  defaultPortShapeId: 'port-circle',
-  actions: [addLinksAction, rerouteAllAction],
-});
+import type { DiagramState, LinkData, SimpleShape } from '../../api';
+import type { DemoAction, DemoConfig } from '../types';
+import { baseElementShapes, basePortShapes } from './shared';
+
+const obstacleRoutingLinks: LinkData[] = [
+  {
+    id: 'sibling-external-link',
+    sourcePortId: 'sibling-a-port',
+    targetPortId: 'sibling-b-port',
+    points: [],
+    routing: 'auto',
+  },
+  {
+    id: 'parent-to-child-link',
+    sourcePortId: 'attach-parent-port',
+    targetPortId: 'attach-child-a-port',
+    points: [],
+    routing: 'auto',
+  },
+  {
+    id: 'child-to-parent-link',
+    sourcePortId: 'attach-child-b-port',
+    targetPortId: 'attach-parent-port',
+    points: [],
+    routing: 'auto',
+  },
+  {
+    id: 'child-to-child-link',
+    sourcePortId: 'attach-child-a-port',
+    targetPortId: 'attach-child-b-port',
+    points: [],
+    routing: 'auto',
+  },
+];
+
+const obstacleRoutingShapes: SimpleShape[] = [
+  ...baseElementShapes,
+  {
+    id: 'routing-ellipse',
+    kind: 'ellipse',
+    style: {
+      fill: '#e8f8ff',
+      stroke: '#1e6b8f',
+      strokeWidth: 2,
+    },
+  },
+];
+
+const createObstacleRoutingState = (): DiagramState => ({
+  elements: [
+    {
+      id: 'sibling-parent',
+      position: { x: 40, y: 90 },
+      size: { width: 540, height: 250 },
+      shapeId: 'panel',
+      style: { fill: '#fafafa' },
+    },
+    {
+      id: 'sibling-a',
+      position: { x: 70, y: 75 },
+      size: { width: 140, height: 100 },
+      shapeId: 'routing-ellipse',
+      parentId: 'sibling-parent',
+      portMovement: { moveMode: 'anchors', anchorConstraint: { preset: 'cardinal' } },
+    },
+    {
+      id: 'sibling-b',
+      position: { x: 310, y: 75 },
+      size: { width: 140, height: 100 },
+      shapeId: 'routing-ellipse',
+      parentId: 'sibling-parent',
+      portMovement: { moveMode: 'anchors', anchorConstraint: { preset: 'cardinal' } },
+    },
+    {
+      id: 'attach-parent',
+      position: { x: 620, y: 90 },
+      size: { width: 360, height: 250 },
+      shapeId: 'routing-ellipse',
+      portMovement: { moveMode: 'anchors', anchorConstraint: { preset: 'cardinal' } },
+    },
+    {
+      id: 'attach-child',
+      position: { x: 40, y: 45 },
+      size: { width: 140, height: 100 },
+      shapeId: 'routing-ellipse',
+      parentId: 'attach-parent',
+      portMovement: { moveMode: 'anchors', anchorConstraint: { preset: 'cardinal' } },
+    },
+    {
+      id: 'attach-child-b',
+      position: { x: 190, y: 120 },
+      size: { width: 140, height: 100 },
+      shapeId: 'routing-ellipse',
+      parentId: 'attach-parent',
+      portMovement: { moveMode: 'anchors', anchorConstraint: { preset: 'cardinal' } },
+    },
+  ],
+  ports: [
+    {
+      id: 'sibling-a-port',
+      elementId: 'sibling-a',
+      position: { x: 0, y: 50 },
+      shapeId: 'port-dark',
+      anchorCenter: true,
+      currentAnchorId: 'left',
+    },
+    {
+      id: 'sibling-b-port',
+      elementId: 'sibling-b',
+      position: { x: 140, y: 50 },
+      shapeId: 'port-dark',
+      anchorCenter: true,
+      currentAnchorId: 'right',
+    },
+    {
+      id: 'attach-parent-port',
+      elementId: 'attach-parent',
+      position: { x: 20, y: 125 },
+      shapeId: 'port-circle',
+      anchorCenter: true,
+      currentAnchorId: 'left',
+      externalLinkAttachPoint: { x: -16, y: 0 },
+      internalLinkAttachPoint: { x: 16, y: 0 },
+    },
+    {
+      id: 'attach-child-a-port',
+      elementId: 'attach-child',
+      position: { x: 140, y: 50 },
+      shapeId: 'port-circle',
+      anchorCenter: true,
+      currentAnchorId: 'right',
+      externalLinkAttachPoint: { x: 12, y: 0 },
+      internalLinkAttachPoint: { x: -12, y: 0 },
+    },
+    {
+      id: 'attach-child-b-port',
+      elementId: 'attach-child-b',
+      position: { x: 0, y: 50 },
+      shapeId: 'port-circle',
+      anchorCenter: true,
+      currentAnchorId: 'left',
+      externalLinkAttachPoint: { x: 12, y: 0 },
+      internalLinkAttachPoint: { x: -12, y: 0 },
+    },
+  ],
+  links: obstacleRoutingLinks,
+  texts: [
+    {
+      id: 'obstacle-routing-instructions',
+      content:
+        'Two checks in one canvas: (A) sibling external-anchor link avoids both child interiors; (B) parent/children hierarchy resolves internal vs external attach points per endpoint direction.',
+      position: { x: 40, y: 30 },
+    },
+    {
+      id: 'sibling-group-label',
+      content: 'Scenario A: Same-parent children, external-facing anchors (left/right)',
+      position: { x: 52, y: 66 },
+    },
+    {
+      id: 'attach-group-label',
+      content: 'Scenario B: Directional attach semantics (parent internal, child/sibling external)',
+      position: { x: 620, y: 66 },
+    },
+    {
+      id: 'attach-link-parent-child-label',
+      content: 'parent->child-A: parent endpoint INTERNAL, child endpoint EXTERNAL',
+      position: { x: 620, y: 350 },
+    },
+    {
+      id: 'attach-link-child-parent-label',
+      content: 'child-B->parent: child endpoint EXTERNAL, parent endpoint INTERNAL',
+      position: { x: 620, y: 372 },
+    },
+    {
+      id: 'attach-link-child-child-label',
+      content: 'child-A->child-B: sibling endpoints EXTERNAL on both ends',
+      position: { x: 620, y: 394 },
+    },
+  ],
+});
+
+const addLinksAction: DemoAction = {
+  id: 'add-links',
+  label: 'Add Links (Auto)',
+  run: (editor, state) => {
+    const existing = new Set(state.links.map((link) => link.id));
+    obstacleRoutingLinks.forEach((link) => {
+      if (existing.has(link.id)) return;
+      editor.addLink({ ...link });
+    });
+  },
+};
+
+const rerouteAllAction: DemoAction = {
+  id: 'reroute-links',
+  label: 'Reroute All Links',
+  run: (editor) => {
+    editor.rerouteAllLinks();
+  },
+};
+
+export const obstacleRoutingDemoConfig: DemoConfig = {
+  id: 'obstacle-routing',
+  title: 'Obstacle Routing',
+  description: 'Nested multi-anchor checks: sibling interior-avoidance + directional internal/external parent-child attach semantics.',
+  createState: createObstacleRoutingState,
+  elementShapes: obstacleRoutingShapes,
+  portShapes: basePortShapes,
+  defaultElementShapeId: 'default',
+  defaultPortShapeId: 'port-circle',
+  actions: [addLinksAction, rerouteAllAction],
+};

package/src/displaybox/demos/portPositionLimitsDemo.ts

@@ -0,0 +1,211 @@
+import type { DiagramState } from '../../api';
+import type { DemoConfig } from '../types';
+import { baseElementShapes, basePortShapes } from './shared';
+
+const createPortPositionLimitsState = (): DiagramState => ({
+  elements: [
+    {
+      id: 'limit-left-host',
+      position: { x: 60, y: 120 },
+      size: { width: 220, height: 140 },
+      shapeId: 'panel',
+      portMovement: {
+        moveMode: 'inside',
+        positionLimits: {
+          x: { max: 70 },
+        },
+      },
+    },
+    {
+      id: 'limit-right-host',
+      position: { x: 330, y: 120 },
+      size: { width: 220, height: 140 },
+      shapeId: 'panel',
+      portMovement: {
+        moveMode: 'inside',
+        positionLimits: {
+          x: { min: 150 },
+        },
+      },
+    },
+    {
+      id: 'limit-top-host',
+      position: { x: 600, y: 120 },
+      size: { width: 220, height: 140 },
+      shapeId: 'panel',
+      portMovement: {
+        moveMode: 'inside',
+        positionLimits: {
+          y: { max: 45 },
+        },
+      },
+    },
+    {
+      id: 'limit-bottom-host',
+      position: { x: 870, y: 120 },
+      size: { width: 220, height: 140 },
+      shapeId: 'panel',
+      portMovement: {
+        moveMode: 'inside',
+        positionLimits: {
+          y: { min: 90 },
+        },
+      },
+    },
+    {
+      id: 'border-left-host',
+      position: { x: 200, y: 350 },
+      size: { width: 220, height: 140 },
+      shapeId: 'panel',
+      portMovement: {
+        moveMode: 'border',
+        positionLimits: {
+          x: { max: 80 },
+        },
+      },
+    },
+    {
+      id: 'border-right-host',
+      position: { x: 500, y: 350 },
+      size: { width: 220, height: 140 },
+      shapeId: 'panel',
+      portMovement: {
+        moveMode: 'border',
+        positionLimits: {
+          x: { min: 140 },
+        },
+      },
+    },
+    {
+      id: 'default-normalize-host',
+      position: { x: 800, y: 350 },
+      size: { width: 220, height: 140 },
+      shapeId: 'panel',
+      portMovement: {
+        moveMode: 'inside',
+        positionLimits: {
+          x: { max: 60 },
+          y: { max: 60 },
+        },
+      },
+    },
+  ],
+  ports: [
+    { id: 'limit-left-port', elementId: 'limit-left-host', position: { x: 40, y: 70 }, shapeId: 'port-circle', anchorCenter: true },
+    { id: 'limit-right-port', elementId: 'limit-right-host', position: { x: 180, y: 70 }, shapeId: 'port-circle', anchorCenter: true },
+    { id: 'limit-top-port', elementId: 'limit-top-host', position: { x: 110, y: 30 }, shapeId: 'port-circle', anchorCenter: true },
+    { id: 'limit-bottom-port', elementId: 'limit-bottom-host', position: { x: 110, y: 110 }, shapeId: 'port-circle', anchorCenter: true },
+    { id: 'border-left-port', elementId: 'border-left-host', position: { x: 80, y: 0 }, shapeId: 'port-circle', anchorCenter: true },
+    { id: 'border-right-port', elementId: 'border-right-host', position: { x: 140, y: 140 }, shapeId: 'port-circle', anchorCenter: true },
+    { id: 'reload-default-port', elementId: 'default-normalize-host', position: { x: 190, y: 130 }, shapeId: 'port-circle', anchorCenter: true },
+  ],
+  links: [],
+  texts: [
+    {
+      id: 'limit-intro',
+      content:
+        'Top row: threshold/limit hosts. Bottom row: border+limits hosts and default-position normalization checks for add/load flows.',
+      position: { x: 60, y: 40 },
+    },
+    { id: 'limit-group-title', content: 'Threshold/limit-focused hosts', position: { x: 60, y: 85 } },
+    { id: 'border-group-title', content: 'Border+limits + default-position normalization', position: { x: 200, y: 315 } },
+    { id: 'limit-left-title', content: 'x.max = 70 (left of X)', position: { x: 8, y: -20 }, ownerId: 'limit-left-host' },
+    { id: 'limit-right-title', content: 'x.min = 150 (right of X)', position: { x: 8, y: -20 }, ownerId: 'limit-right-host' },
+    { id: 'limit-top-title', content: 'y.max = 45 (above Y)', position: { x: 8, y: -20 }, ownerId: 'limit-top-host' },
+    { id: 'limit-bottom-title', content: 'y.min = 90 (below Y)', position: { x: 8, y: -20 }, ownerId: 'limit-bottom-host' },
+    { id: 'border-left-title', content: 'moveMode=border + x.max = 80', position: { x: 8, y: -20 }, ownerId: 'border-left-host' },
+    { id: 'border-right-title', content: 'moveMode=border + x.min = 140', position: { x: 8, y: -20 }, ownerId: 'border-right-host' },
+    { id: 'default-normalize-title', content: 'default normalization host x/y.max = 60', position: { x: 8, y: -20 }, ownerId: 'default-normalize-host' },
+    { id: 'limit-left-status', content: 'local: x=40, y=70', position: { x: 8, y: 110 }, ownerId: 'limit-left-host' },
+    { id: 'limit-right-status', content: 'local: x=180, y=70', position: { x: 8, y: 110 }, ownerId: 'limit-right-host' },
+    { id: 'limit-top-status', content: 'local: x=110, y=30', position: { x: 8, y: 110 }, ownerId: 'limit-top-host' },
+    { id: 'limit-bottom-status', content: 'local: x=110, y=110', position: { x: 8, y: 110 }, ownerId: 'limit-bottom-host' },
+    { id: 'border-left-status', content: 'local: x=80, y=0', position: { x: 8, y: 110 }, ownerId: 'border-left-host' },
+    { id: 'border-right-status', content: 'local: x=140, y=140', position: { x: 8, y: 110 }, ownerId: 'border-right-host' },
+    {
+      id: 'add-default-status',
+      content: 'add invalid default: not executed',
+      position: { x: 8, y: 88 },
+      ownerId: 'default-normalize-host',
+    },
+    {
+      id: 'reload-default-status',
+      content: 'reload invalid default: click "Read reload-normalized port"',
+      position: { x: 8, y: 106 },
+      ownerId: 'default-normalize-host',
+    },
+  ],
+});
+
+export const portPositionLimitsDemoConfig: DemoConfig = {
+  id: 'port-position-limits',
+  title: 'Port Position Limits',
+  description: 'Unified restriction demo: threshold limits, border+limits, and add/load default-position normalization.',
+  createState: createPortPositionLimitsState,
+  elementShapes: baseElementShapes,
+  portShapes: basePortShapes,
+  defaultElementShapeId: 'default',
+  defaultPortShapeId: 'port-circle',
+  actions: [
+    {
+      id: 'force-limit-clamp',
+      label: 'Force out-of-range moves',
+      run: (editor) => {
+        editor.movePortTo('limit-left-port', 1000, 1000);
+        editor.movePortTo('limit-right-port', -1000, 1000);
+        editor.movePortTo('limit-top-port', 1000, 1000);
+        editor.movePortTo('limit-bottom-port', 1000, -1000);
+        editor.movePortTo('border-left-port', 1000, 1000);
+        editor.movePortTo('border-right-port', -1000, -1000);
+
+        const state = editor.getState();
+        const left = state.ports.find((item) => item.id === 'limit-left-port');
+        const right = state.ports.find((item) => item.id === 'limit-right-port');
+        const top = state.ports.find((item) => item.id === 'limit-top-port');
+        const bottom = state.ports.find((item) => item.id === 'limit-bottom-port');
+        const borderLeft = state.ports.find((item) => item.id === 'border-left-port');
+        const borderRight = state.ports.find((item) => item.id === 'border-right-port');
+
+        if (left) editor.updateText('limit-left-status', `local: x=${left.position.x}, y=${left.position.y}`);
+        if (right) editor.updateText('limit-right-status', `local: x=${right.position.x}, y=${right.position.y}`);
+        if (top) editor.updateText('limit-top-status', `local: x=${top.position.x}, y=${top.position.y}`);
+        if (bottom) editor.updateText('limit-bottom-status', `local: x=${bottom.position.x}, y=${bottom.position.y}`);
+        if (borderLeft) editor.updateText('border-left-status', `local: x=${borderLeft.position.x}, y=${borderLeft.position.y}`);
+        if (borderRight) editor.updateText('border-right-status', `local: x=${borderRight.position.x}, y=${borderRight.position.y}`);
+      },
+    },
+    {
+      id: 'add-invalid-default-port',
+      label: 'Add invalid default port',
+      run: (editor) => {
+        editor.removePort('added-default-port');
+        editor.addPortToElement('default-normalize-host', {
+          id: 'added-default-port',
+          elementId: 'default-normalize-host',
+          position: { x: 180, y: 120 },
+          shapeId: 'port-circle',
+          anchorCenter: true,
+        });
+        const state = editor.getState();
+        const added = state.ports.find((item) => item.id === 'added-default-port');
+        if (added) {
+          editor.updateText('add-default-status', `add invalid default: local x=${added.position.x}, y=${added.position.y}`);
+        }
+      },
+    },
+    {
+      id: 'read-reload-normalized-port',
+      label: 'Read reload-normalized port',
+      run: (editor) => {
+        const state = editor.getState();
+        const reloaded = state.ports.find((item) => item.id === 'reload-default-port');
+        if (reloaded) {
+          editor.updateText(
+            'reload-default-status',
+            `reload invalid default: local x=${reloaded.position.x}, y=${reloaded.position.y}`,
+          );
+        }
+      },
+    },
+  ],
+};