orcasvn-react-diagrams 0.2.0 → 0.2.2

package/src/displaybox/demos/linkCancelDemo.ts

@@ -0,0 +1,56 @@
+import type { DiagramState } from '../../api';
+import type { DemoConfig } from '../types';
+import { baseElementShapes, basePortShapes } from './shared';
+
+const createLinkCancelState = (): DiagramState => ({
+  elements: [
+    {
+      id: 'cancel-source',
+      position: { x: 140, y: 180 },
+      size: { width: 200, height: 120 },
+      shapeId: 'default',
+    },
+    {
+      id: 'cancel-target',
+      position: { x: 480, y: 200 },
+      size: { width: 200, height: 120 },
+      shapeId: 'panel',
+    },
+  ],
+  ports: [
+    {
+      id: 'cancel-source-port',
+      elementId: 'cancel-source',
+      position: { x: 30, y: 60 },
+      shapeId: 'port-circle',
+      anchorCenter: true,
+    },
+    {
+      id: 'cancel-target-port',
+      elementId: 'cancel-target',
+      position: { x: 170, y: 50 },
+      shapeId: 'port-circle',
+      anchorCenter: true,
+    },
+  ],
+  links: [],
+  texts: [
+    {
+      id: 'cancel-tip',
+      content: 'Start a link from the left port. Drop on empty space to cancel, or on the right port to create.',
+      position: { x: 120, y: 140 },
+    },
+  ],
+});
+
+export const linkCancelDemoConfig: DemoConfig = ({
+  id: 'link-cancel',
+  title: 'Link Hover Complete',
+  description: 'Watch immediate link completion on destination-port hover and host cancellation behavior.',
+  createState: createLinkCancelState,
+  elementShapes: baseElementShapes,
+  portShapes: basePortShapes,
+  defaultElementShapeId: 'default',
+  defaultPortShapeId: 'port-circle',
+  actions: [],
+});

package/src/displaybox/demos/linkPortCreationDemo.ts

@@ -0,0 +1,46 @@
+import type { DiagramState } from '../../api';
+import type { DemoConfig } from '../types';
+import { baseElementShapes, basePortShapes } from './shared';
+
+const createLinkPortCreationState = (): DiagramState => ({
+  elements: [
+    {
+      id: 'link-source',
+      position: { x: 140, y: 160 },
+      size: { width: 220, height: 140 },
+      shapeId: 'default',
+    },
+    {
+      id: 'link-target',
+      position: { x: 440, y: 200 },
+      size: { width: 220, height: 140 },
+      shapeId: 'panel',
+    },
+  ],
+  ports: [
+    {
+      id: 'link-source-port',
+      elementId: 'link-source',
+      position: { x: 30, y: 30 },
+      shapeId: 'port-circle',
+      anchorCenter: true,
+    },
+  ],
+  links: [],
+  texts: [
+    { id: 'link-source-label', content: 'Drag from the port', position: { x: 12, y: -12 }, ownerId: 'link-source' },
+    { id: 'link-target-label', content: 'Drop on me to create a port', position: { x: 12, y: -12 }, ownerId: 'link-target' },
+  ],
+});
+
+export const linkPortCreationDemoConfig: DemoConfig = ({
+  id: 'link-port-creation',
+  title: 'Link Creates Port',
+  description: 'Drag from a port to an element to auto-create a target port.',
+  createState: createLinkPortCreationState,
+  elementShapes: baseElementShapes,
+  portShapes: basePortShapes,
+  defaultElementShapeId: 'default',
+  defaultPortShapeId: 'port-circle',
+  actions: [],
+});

package/src/displaybox/demos/multiLevelTreeDemo.ts

@@ -0,0 +1,120 @@
+import type { DiagramState } from '../../api';
+import type { DemoConfig } from '../types';
+import { baseElementShapes, basePortShapes } from './shared';
+
+const createMultiLevelTreeState = (): DiagramState => ({
+  elements: [
+    {
+      id: 'tree-root',
+      position: { x: 120, y: 120 },
+      size: { width: 300, height: 220 },
+      shapeId: 'panel',
+    },
+    {
+      id: 'tree-child-1',
+      position: { x: 40, y: 40 },
+      size: { width: 200, height: 140 },
+      shapeId: 'default',
+      parentId: 'tree-root',
+    },
+    {
+      id: 'tree-child-2',
+      position: { x: 30, y: 30 },
+      size: { width: 150, height: 100 },
+      shapeId: 'default',
+      parentId: 'tree-child-1',
+    },
+    {
+      id: 'tree-child-3',
+      position: { x: 20, y: 20 },
+      size: { width: 110, height: 70 },
+      shapeId: 'default',
+      parentId: 'tree-child-2',
+    },
+    {
+      id: 'tree-root-2',
+      position: { x: 520, y: 140 },
+      size: { width: 260, height: 200 },
+      shapeId: 'panel',
+    },
+    {
+      id: 'tree2-child-1',
+      position: { x: 30, y: 40 },
+      size: { width: 170, height: 120 },
+      shapeId: 'default',
+      parentId: 'tree-root-2',
+    },
+    {
+      id: 'tree2-child-2',
+      position: { x: 20, y: 20 },
+      size: { width: 120, height: 80 },
+      shapeId: 'default',
+      parentId: 'tree2-child-1',
+    },
+  ],
+  ports: [
+    {
+      id: 'tree-root-port',
+      elementId: 'tree-root',
+      position: { x: 150, y: 0 },
+      shapeId: 'port-circle',
+      anchorCenter: true,
+    },
+    {
+      id: 'tree-child-3-port',
+      elementId: 'tree-child-3',
+      position: { x: 55, y: 35 },
+      shapeId: 'port-circle',
+      anchorCenter: true,
+    },
+    {
+      id: 'tree-root-2-port',
+      elementId: 'tree-root-2',
+      position: { x: 130, y: 200 },
+      shapeId: 'port-circle',
+      anchorCenter: true,
+    },
+    {
+      id: 'tree2-child-2-port',
+      elementId: 'tree2-child-2',
+      position: { x: 60, y: 40 },
+      shapeId: 'port-circle',
+      anchorCenter: true,
+    },
+  ],
+  links: [
+    {
+      id: 'tree-link-1',
+      sourcePortId: 'tree-root-port',
+      targetPortId: 'tree-root-2-port',
+      points: [],
+    },
+    {
+      id: 'tree-link-2',
+      sourcePortId: 'tree-child-3-port',
+      targetPortId: 'tree2-child-2-port',
+      points: [],
+    },
+  ],
+  texts: [
+    { id: 'tree-root-label', content: 'Root A', position: { x: 12, y: -16 }, ownerId: 'tree-root' },
+    { id: 'tree-child-1-label', content: 'Level 1', position: { x: 12, y: -16 }, ownerId: 'tree-child-1' },
+    { id: 'tree-child-2-label', content: 'Level 2', position: { x: 12, y: -16 }, ownerId: 'tree-child-2' },
+    { id: 'tree-child-3-label', content: 'Level 3', position: { x: 12, y: -16 }, ownerId: 'tree-child-3' },
+    { id: 'tree-root-2-label', content: 'Root B', position: { x: 12, y: -16 }, ownerId: 'tree-root-2' },
+    { id: 'tree2-child-1-label', content: 'Level 1', position: { x: 12, y: -16 }, ownerId: 'tree2-child-1' },
+    { id: 'tree2-child-2-label', content: 'Level 2', position: { x: 12, y: -16 }, ownerId: 'tree2-child-2' },
+  ],
+});
+
+export const multiLevelTreeDemoConfig: DemoConfig = ({
+  id: 'multi-level-tree',
+  title: 'Multi-level Tree',
+  description: 'Three-level and two-level nested trees with default links.',
+  createState: createMultiLevelTreeState,
+  elementShapes: baseElementShapes,
+  portShapes: basePortShapes,
+  defaultElementShapeId: 'default',
+  defaultPortShapeId: 'port-circle',
+  actions: [],
+});

package/src/displaybox/demos/multipleElementsDemo.ts

@@ -0,0 +1,62 @@
+import type { DiagramState } from '../../api';
+import type { DemoConfig } from '../types';
+import { baseElementShapes, basePortShapes } from './shared';
+
+const createMultipleElementsState = (): DiagramState => ({
+  elements: [
+    {
+      id: 'multi-1',
+      position: { x: 120, y: 120 },
+      size: { width: 220, height: 140 },
+      shapeId: 'default',
+    },
+    {
+      id: 'multi-2',
+      position: { x: 420, y: 160 },
+      size: { width: 220, height: 140 },
+      shapeId: 'panel',
+    },
+    {
+      id: 'multi-3',
+      position: { x: 260, y: 360 },
+      size: { width: 240, height: 160 },
+      shapeId: 'default',
+    },
+  ],
+  ports: [
+    { id: 'm1p1', elementId: 'multi-1', position: { x: 30, y: 30 }, shapeId: 'port-circle', anchorCenter: true },
+    { id: 'm2p1', elementId: 'multi-2', position: { x: 40, y: 30 }, shapeId: 'port-circle', anchorCenter: true },
+    { id: 'm3p1', elementId: 'multi-3', position: { x: 40, y: 40 }, shapeId: 'port-circle', anchorCenter: true },
+  ],
+  links: [
+    {
+      id: 'link-12',
+      sourcePortId: 'm1p1',
+      targetPortId: 'm2p1',
+      points: [],
+    },
+    {
+      id: 'link-23',
+      sourcePortId: 'm2p1',
+      targetPortId: 'm3p1',
+      points: [],
+    },
+  ],
+  texts: [
+    { id: 'm1-label', content: 'Multi 1', position: { x: 12, y: -12 }, ownerId: 'multi-1' },
+    { id: 'm2-label', content: 'Multi 2', position: { x: 12, y: -12 }, ownerId: 'multi-2' },
+    { id: 'm3-label', content: 'Multi 3', position: { x: 12, y: -12 }, ownerId: 'multi-3' },
+  ],
+});
+
+export const multipleElementsDemoConfig: DemoConfig = ({
+  id: 'multiple',
+  title: 'Multiple Elements + Links',
+  description: 'Three elements with ports, links, and labels.',
+  createState: createMultipleElementsState,
+  elementShapes: baseElementShapes,
+  portShapes: basePortShapes,
+  defaultElementShapeId: 'default',
+  defaultPortShapeId: 'port-circle',
+  actions: [],
+});

package/src/displaybox/demos/nestedDemo.ts

@@ -0,0 +1,78 @@
+import type { DiagramState } from '../../api';
+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,
+        });
+      },
+    },
+  ],
+});

package/src/displaybox/demos/obstacleRoutingDemo.ts

@@ -0,0 +1,176 @@
+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],
+});

package/src/displaybox/demos/portBorderDemo.ts

@@ -0,0 +1,98 @@
+import type { DiagramState } from '../../api';
+import type { DemoConfig } from '../types';
+import { baseElementShapes, basePortShapes } from './shared';
+
+const createPortBorderState = (): DiagramState => ({
+  elements: [
+    {
+      id: 'border-host-orient-on',
+      position: { x: 120, y: 150 },
+      size: { width: 260, height: 180 },
+      shapeId: 'default',
+    },
+    {
+      id: 'border-host-orient-off',
+      position: { x: 460, y: 150 },
+      size: { width: 260, height: 180 },
+      shapeId: 'default',
+    },
+  ],
+  ports: [
+    {
+      id: 'border-port-orient-on',
+      elementId: 'border-host-orient-on',
+      position: { x: 130, y: 0 },
+      shapeId: 'port-triangle',
+      moveMode: 'border',
+      anchorCenter: true,
+      orientToHostBorder: true,
+    },
+    {
+      id: 'border-port-orient-off',
+      elementId: 'border-host-orient-off',
+      position: { x: 130, y: 0 },
+      shapeId: 'port-triangle',
+      moveMode: 'border',
+      anchorCenter: true,
+      orientToHostBorder: false,
+    },
+  ],
+  links: [
+    {
+      id: 'border-link',
+      sourcePortId: 'border-port-orient-on',
+      targetPortId: 'border-port-orient-off',
+      points: [],
+    },
+  ],
+  texts: [
+    {
+      id: 'border-host-orient-on-label',
+      content: 'Orientation ON',
+      position: { x: 12, y: -14 },
+      ownerId: 'border-host-orient-on',
+    },
+    {
+      id: 'border-host-orient-off-label',
+      content: 'Orientation OFF',
+      position: { x: 12, y: -14 },
+      ownerId: 'border-host-orient-off',
+    },
+    {
+      id: 'border-port-orient-on-label',
+      content: 'Drag around border',
+      position: { x: 8, y: -18 },
+      ownerId: 'border-port-orient-on',
+    },
+    {
+      id: 'border-port-orient-off-label',
+      content: 'Drag around border',
+      position: { x: 8, y: -18 },
+      ownerId: 'border-port-orient-off',
+    },
+  ],
+});
+
+export const portBorderDemoConfig: DemoConfig = ({
+  id: 'port-border',
+  title: 'Port Border Orientation',
+  description: 'Directional ports rotate toward host interior by default (left: on, right: opt-out).',
+  createState: createPortBorderState,
+  elementShapes: baseElementShapes,
+  portShapes: [
+    ...basePortShapes,
+    {
+      id: 'port-triangle',
+      kind: 'triangle',
+      style: {
+        fill: '#ffffff',
+        stroke: '#1f4d99',
+        strokeWidth: 2,
+        name: 'port',
+      },
+    },
+  ],
+  defaultElementShapeId: 'default',
+  defaultPortShapeId: 'port-triangle',
+  actions: [],
+});