orcasvn-react-diagrams 0.2.0 → 0.2.2

package/src/displaybox/demos/customDemo.ts

@@ -0,0 +1,59 @@
+import type { DiagramState } from '../../api';
+import { createId } from '../../utils/ids';
+import type { DemoConfig } from '../types';
+import { baseElementShapes, basePortShapes } from './shared';
+
+const createCustomShapeState = (): DiagramState => ({
+  elements: [
+    {
+      id: 'custom-1',
+      position: { x: 120, y: 160 },
+      size: { width: 260, height: 150 },
+      shapeId: 'panel',
+    },
+  ],
+  ports: [
+    {
+      id: 'custom-port',
+      elementId: 'custom-1',
+      position: { x: 30, y: 30 },
+      shapeId: 'port-dark',
+      anchorCenter: true,
+    },
+  ],
+  links: [],
+  texts: [
+    {
+      id: 'custom-text',
+      content: 'Custom Shapes',
+      position: { x: 20, y: -16 },
+      ownerId: 'custom-1',
+    },
+  ],
+});
+
+export const customDemoConfig: DemoConfig = ({
+  id: 'custom',
+  title: 'Custom Shapes',
+  description: 'Built-in shapes with custom styling.',
+  createState: createCustomShapeState,
+  elementShapes: baseElementShapes,
+  portShapes: basePortShapes,
+  defaultElementShapeId: 'panel',
+  defaultPortShapeId: 'port-dark',
+  actions: [
+    {
+      id: 'add-element',
+      label: 'Add element',
+      run: (editor, _state, demo, helpers) => {
+        const offset = helpers.nextOffset();
+        editor.addElement({
+          id: `panel-${createId()}`,
+          position: { x: 160 + offset, y: 140 + offset },
+          size: { width: 220, height: 140 },
+          shapeId: demo.defaultElementShapeId ?? 'panel',
+        });
+      },
+    },
+  ],
+});

package/src/displaybox/demos/deletionEventsDemo.ts

@@ -0,0 +1,91 @@
+import type { DiagramState } from '../../api';
+import type { DemoConfig } from '../types';
+import { baseElementShapes, basePortShapes } from './shared';
+
+const createDeletionEventsState = (): DiagramState => ({
+  elements: [
+    {
+      id: 'delete-source',
+      position: { x: 120, y: 170 },
+      size: { width: 220, height: 150 },
+      shapeId: 'default',
+    },
+    {
+      id: 'delete-target',
+      position: { x: 520, y: 210 },
+      size: { width: 220, height: 140 },
+      shapeId: 'panel',
+    },
+  ],
+  ports: [
+    {
+      id: 'delete-source-link-port',
+      elementId: 'delete-source',
+      position: { x: 220, y: 75 },
+      shapeId: 'port-circle',
+      anchorCenter: true,
+      moveMode: 'border',
+    },
+    {
+      id: 'delete-source-free-port',
+      elementId: 'delete-source',
+      position: { x: 0, y: 75 },
+      shapeId: 'port-dark',
+      anchorCenter: true,
+      moveMode: 'border',
+    },
+    {
+      id: 'delete-target-link-port',
+      elementId: 'delete-target',
+      position: { x: 0, y: 70 },
+      shapeId: 'port-circle',
+      anchorCenter: true,
+      moveMode: 'border',
+    },
+  ],
+  links: [
+    {
+      id: 'delete-link',
+      sourcePortId: 'delete-source-link-port',
+      targetPortId: 'delete-target-link-port',
+      points: [],
+    },
+  ],
+  texts: [
+    {
+      id: 'delete-element-text',
+      content: 'Element-owned text',
+      position: { x: 12, y: -14 },
+      ownerId: 'delete-source',
+    },
+    {
+      id: 'delete-port-text',
+      content: 'Port-owned text',
+      position: { x: 8, y: -16 },
+      ownerId: 'delete-source-free-port',
+    },
+    {
+      id: 'delete-link-text',
+      content: 'Link-owned text',
+      position: { x: 10, y: -16 },
+      ownerId: 'delete-link',
+    },
+    {
+      id: 'delete-free-text',
+      content: 'Standalone text (direct text delete)',
+      position: { x: 120, y: 120 },
+    },
+  ],
+});
+
+export const deletionEventsDemoConfig: DemoConfig = {
+  id: 'deletion-events',
+  title: 'Deletion Events',
+  description: 'Inspect elementDeleted, portDeleted, linkDeleted, and textDeleted payloads for direct and cascade removals.',
+  createState: createDeletionEventsState,
+  elementShapes: baseElementShapes,
+  portShapes: basePortShapes,
+  defaultElementShapeId: 'default',
+  defaultPortShapeId: 'port-circle',
+  actions: [],
+};

package/src/displaybox/demos/engineEventsDemo.ts

@@ -0,0 +1,64 @@
+import type { DiagramState } from '../../api';
+import type { DemoConfig } from '../types';
+import { baseElementShapes, basePortShapes } from './shared';
+
+const createEngineEventsState = (): DiagramState => ({
+  elements: [
+    {
+      id: 'engine-events-source',
+      position: { x: 140, y: 160 },
+      size: { width: 220, height: 140 },
+      shapeId: 'default',
+    },
+    {
+      id: 'engine-events-target',
+      position: { x: 500, y: 260 },
+      size: { width: 240, height: 160 },
+      shapeId: 'panel',
+    },
+  ],
+  ports: [
+    {
+      id: 'engine-events-source-port',
+      elementId: 'engine-events-source',
+      position: { x: 40, y: 60 },
+      shapeId: 'port-circle',
+      anchorCenter: true,
+    },
+    {
+      id: 'engine-events-target-port',
+      elementId: 'engine-events-target',
+      position: { x: 60, y: 50 },
+      shapeId: 'port-circle',
+      anchorCenter: true,
+    },
+  ],
+  links: [
+    {
+      id: 'engine-events-link',
+      sourcePortId: 'engine-events-source-port',
+      targetPortId: 'engine-events-target-port',
+      points: [],
+      routing: 'auto',
+    },
+  ],
+  texts: [
+    {
+      id: 'engine-events-tip',
+      content: 'Select an engine event and interact to see the payload.',
+      position: { x: 140, y: 120 },
+    },
+  ],
+});
+
+export const engineEventsDemoConfig: DemoConfig = ({
+  id: 'engine-events',
+  title: 'Engine Events',
+  description: 'Inspect the latest payload for each engine event.',
+  createState: createEngineEventsState,
+  elementShapes: baseElementShapes,
+  portShapes: basePortShapes,
+  defaultElementShapeId: 'default',
+  defaultPortShapeId: 'port-circle',
+  actions: [],
+});

package/src/displaybox/demos/eventHandlersDemo.ts

@@ -0,0 +1,41 @@
+import type { DiagramState } from '../../api';
+import type { DemoConfig } from '../types';
+import { baseElementShapes, basePortShapes } from './shared';
+
+const createEventHandlersState = (): DiagramState => ({
+  elements: [
+    {
+      id: 'event-element',
+      position: { x: 160, y: 160 },
+      size: { width: 220, height: 140 },
+      shapeId: 'default',
+    },
+    {
+      id: 'event-element-2',
+      position: { x: 460, y: 280 },
+      size: { width: 220, height: 140 },
+      shapeId: 'panel',
+    },
+  ],
+  ports: [],
+  links: [],
+  texts: [
+    {
+      id: 'event-tip',
+      content: 'Pick an engine event and interact to see the handler run.',
+      position: { x: 120, y: 120 },
+    },
+  ],
+});
+
+export const eventHandlersDemoConfig: DemoConfig = ({
+  id: 'event-handlers',
+  title: 'Event Handlers',
+  description: 'Choose an engine event and watch the handler effect.',
+  createState: createEventHandlersState,
+  elementShapes: baseElementShapes,
+  portShapes: basePortShapes,
+  defaultElementShapeId: 'default',
+  defaultPortShapeId: 'port-circle',
+  actions: [],
+});

package/src/displaybox/demos/externalDragDropDemo.ts

@@ -0,0 +1,28 @@
+import type { DiagramState } from '../../api';
+import type { DemoConfig } from '../types';
+import { baseElementShapes, basePortShapes } from './shared';
+
+const createExternalDragDropState = (): DiagramState => ({
+  elements: [],
+  ports: [],
+  links: [],
+  texts: [
+    {
+      id: 'drop-tip',
+      content: 'Drag items from the toolbox into the canvas.',
+      position: { x: 120, y: 120 },
+    },
+  ],
+});
+
+export const externalDragDropDemoConfig: DemoConfig = ({
+  id: 'external-drag-drop',
+  title: 'External Drag + Drop',
+  description: 'Drag items from the external toolbox into the canvas. Drops use client-to-world conversion.',
+  createState: createExternalDragDropState,
+  elementShapes: baseElementShapes,
+  portShapes: basePortShapes,
+  defaultElementShapeId: 'default',
+  defaultPortShapeId: 'port-circle',
+  actions: [],
+});

package/src/displaybox/demos/gridOverlayDemo.ts

@@ -0,0 +1,50 @@
+import type { DiagramState } from '../../api';
+import type { DemoConfig } from '../types';
+import { baseElementShapes, basePortShapes, gridStageStyle } from './shared';
+
+const createGridOverlayState = (): DiagramState => ({
+  elements: [
+    {
+      id: 'grid-a',
+      position: { x: 140, y: 120 },
+      size: { width: 200, height: 120 },
+      shapeId: 'default',
+    },
+    {
+      id: 'grid-b',
+      position: { x: 420, y: 220 },
+      size: { width: 220, height: 140 },
+      shapeId: 'panel',
+    },
+  ],
+  ports: [
+    { id: 'grid-a-port', elementId: 'grid-a', position: { x: 40, y: 40 }, shapeId: 'port-circle', anchorCenter: true },
+    { id: 'grid-b-port', elementId: 'grid-b', position: { x: 50, y: 50 }, shapeId: 'port-circle', anchorCenter: true },
+  ],
+  links: [
+    {
+      id: 'grid-link',
+      sourcePortId: 'grid-a-port',
+      targetPortId: 'grid-b-port',
+      points: [],
+    },
+  ],
+  texts: [
+    { id: 'grid-a-label', content: 'Grid A', position: { x: 12, y: -12 }, ownerId: 'grid-a' },
+    { id: 'grid-b-label', content: 'Grid B', position: { x: 12, y: -12 }, ownerId: 'grid-b' },
+  ],
+});
+
+export const gridOverlayDemoConfig: DemoConfig = ({
+  id: 'grid-overlay',
+  title: 'Grid Overlay',
+  description: 'Grid background with snapping enabled by default.',
+  createState: createGridOverlayState,
+  elementShapes: baseElementShapes,
+  portShapes: basePortShapes,
+  defaultElementShapeId: 'default',
+  defaultPortShapeId: 'port-circle',
+  snapDefault: true,
+  stageStyle: gridStageStyle,
+  actions: [],
+});

package/src/displaybox/demos/index.tsx

@@ -0,0 +1,217 @@
+import React from 'react';
+import type { DemoConfig, DemoDefinition } from '../types';
+import { basicDemoConfig } from './basicDemo';
+import { linkPortCreationDemoConfig } from './linkPortCreationDemo';
+import { nestedDemoConfig } from './nestedDemo';
+import { customDemoConfig } from './customDemo';
+import { textDemoConfig } from './textDemo';
+import { selectionDemoConfig } from './selectionDemo';
+import { eventHandlersDemoConfig } from './eventHandlersDemo';
+import { engineEventsDemoConfig } from './engineEventsDemo';
+import { linkCancelDemoConfig } from './linkCancelDemo';
+import { autoLayoutDemoConfig } from './autoLayoutDemo';
+import { externalDragDropDemoConfig } from './externalDragDropDemo';
+import { shapeGalleryDemoConfig } from './shapeGalleryDemo';
+import { svgPathDemoConfig } from './svgPathDemo';
+import { roundedRectRadiusDemoConfig } from './roundedRectRadiusDemo';
+import { rotatedCreationDemoConfig } from './rotatedCreationDemo';
+import { multiLevelTreeDemoConfig } from './multiLevelTreeDemo';
+import { multipleElementsDemoConfig } from './multipleElementsDemo';
+import { portConstraintsDemoConfig } from './portConstraintsDemo';
+import { portBorderDemoConfig } from './portBorderDemo';
+import { childConstraintsDemoConfig } from './childConstraintsDemo';
+import { gridOverlayDemoConfig } from './gridOverlayDemo';
+import { routingDemoConfig } from './routingDemo';
+import { obstacleRoutingDemoConfig } from './obstacleRoutingDemo';
+import { linkBendHandlesDemoConfig } from './linkBendHandlesDemo';
+import { deletionEventsDemoConfig } from './deletionEventsDemo';
+import { shapeBorderMovementDemoConfig } from './shapeBorderMovementDemo';
+import { shapeHoverControlsDemoConfig } from './shapeHoverControlsDemo';
+import EventHandlersDemo from './EventHandlersDemoTab';
+import EngineEventsDemo from './EngineEventsDemoTab';
+import LinkCancelDemo from './LinkCancelDemoTab';
+import AutoLayoutDemo from './AutoLayoutDemoTab';
+import ExternalDragDropDemo from './ExternalDragDropDemoTab';
+import SvgPathDemo from './SvgPathDemoTab';
+import TextLayoutDemo from './TextLayoutDemoTab';
+import SimpleDemo from './SimpleDemo';
+import ObstacleRoutingDemo from './ObstacleRoutingDemoTab';
+import DeletionEventsDemo from './DeletionEventsDemoTab';
+import ShapeHoverControlsDemo from './ShapeHoverControlsDemoTab';
+
+export {
+  baseElementShapes,
+  basePortShapes,
+  customGalleryShapes,
+  defaultGhostSize,
+  defaultSvgPath,
+  defaultSvgPathSize,
+  externalToolboxItems,
+} from './shared';
+
+const wrapSimpleDemo = (demo: DemoConfig) => () => <SimpleDemo demo={demo} />;
+
+export const demoTabs: DemoDefinition[] = [
+  {
+    id: basicDemoConfig.id,
+    title: basicDemoConfig.title,
+    description: basicDemoConfig.description,
+    Component: wrapSimpleDemo(basicDemoConfig),
+  },
+  {
+    id: linkPortCreationDemoConfig.id,
+    title: linkPortCreationDemoConfig.title,
+    description: linkPortCreationDemoConfig.description,
+    Component: wrapSimpleDemo(linkPortCreationDemoConfig),
+  },
+  {
+    id: nestedDemoConfig.id,
+    title: nestedDemoConfig.title,
+    description: nestedDemoConfig.description,
+    Component: wrapSimpleDemo(nestedDemoConfig),
+  },
+  {
+    id: customDemoConfig.id,
+    title: customDemoConfig.title,
+    description: customDemoConfig.description,
+    Component: wrapSimpleDemo(customDemoConfig),
+  },
+  {
+    id: textDemoConfig.id,
+    title: textDemoConfig.title,
+    description: textDemoConfig.description,
+    Component: TextLayoutDemo,
+  },
+  {
+    id: selectionDemoConfig.id,
+    title: selectionDemoConfig.title,
+    description: selectionDemoConfig.description,
+    Component: wrapSimpleDemo(selectionDemoConfig),
+  },
+  {
+    id: eventHandlersDemoConfig.id,
+    title: eventHandlersDemoConfig.title,
+    description: eventHandlersDemoConfig.description,
+    Component: EventHandlersDemo,
+  },
+  {
+    id: engineEventsDemoConfig.id,
+    title: engineEventsDemoConfig.title,
+    description: engineEventsDemoConfig.description,
+    Component: EngineEventsDemo,
+  },
+  {
+    id: deletionEventsDemoConfig.id,
+    title: deletionEventsDemoConfig.title,
+    description: deletionEventsDemoConfig.description,
+    Component: DeletionEventsDemo,
+  },
+  {
+    id: autoLayoutDemoConfig.id,
+    title: autoLayoutDemoConfig.title,
+    description: autoLayoutDemoConfig.description,
+    Component: AutoLayoutDemo,
+  },
+  {
+    id: linkCancelDemoConfig.id,
+    title: linkCancelDemoConfig.title,
+    description: linkCancelDemoConfig.description,
+    Component: LinkCancelDemo,
+  },
+  {
+    id: externalDragDropDemoConfig.id,
+    title: externalDragDropDemoConfig.title,
+    description: externalDragDropDemoConfig.description,
+    Component: ExternalDragDropDemo,
+  },
+  {
+    id: shapeGalleryDemoConfig.id,
+    title: shapeGalleryDemoConfig.title,
+    description: shapeGalleryDemoConfig.description,
+    Component: wrapSimpleDemo(shapeGalleryDemoConfig),
+  },
+  {
+    id: roundedRectRadiusDemoConfig.id,
+    title: roundedRectRadiusDemoConfig.title,
+    description: roundedRectRadiusDemoConfig.description,
+    Component: wrapSimpleDemo(roundedRectRadiusDemoConfig),
+  },
+  {
+    id: rotatedCreationDemoConfig.id,
+    title: rotatedCreationDemoConfig.title,
+    description: rotatedCreationDemoConfig.description,
+    Component: wrapSimpleDemo(rotatedCreationDemoConfig),
+  },
+  {
+    id: svgPathDemoConfig.id,
+    title: svgPathDemoConfig.title,
+    description: svgPathDemoConfig.description,
+    Component: SvgPathDemo,
+  },
+  {
+    id: multiLevelTreeDemoConfig.id,
+    title: multiLevelTreeDemoConfig.title,
+    description: multiLevelTreeDemoConfig.description,
+    Component: wrapSimpleDemo(multiLevelTreeDemoConfig),
+  },
+  {
+    id: multipleElementsDemoConfig.id,
+    title: multipleElementsDemoConfig.title,
+    description: multipleElementsDemoConfig.description,
+    Component: wrapSimpleDemo(multipleElementsDemoConfig),
+  },
+  {
+    id: portConstraintsDemoConfig.id,
+    title: portConstraintsDemoConfig.title,
+    description: portConstraintsDemoConfig.description,
+    Component: wrapSimpleDemo(portConstraintsDemoConfig),
+  },
+  {
+    id: portBorderDemoConfig.id,
+    title: portBorderDemoConfig.title,
+    description: portBorderDemoConfig.description,
+    Component: wrapSimpleDemo(portBorderDemoConfig),
+  },
+  {
+    id: shapeBorderMovementDemoConfig.id,
+    title: shapeBorderMovementDemoConfig.title,
+    description: shapeBorderMovementDemoConfig.description,
+    Component: wrapSimpleDemo(shapeBorderMovementDemoConfig),
+  },
+  {
+    id: shapeHoverControlsDemoConfig.id,
+    title: shapeHoverControlsDemoConfig.title,
+    description: shapeHoverControlsDemoConfig.description,
+    Component: ShapeHoverControlsDemo,
+  },
+  {
+    id: childConstraintsDemoConfig.id,
+    title: childConstraintsDemoConfig.title,
+    description: childConstraintsDemoConfig.description,
+    Component: wrapSimpleDemo(childConstraintsDemoConfig),
+  },
+  {
+    id: gridOverlayDemoConfig.id,
+    title: gridOverlayDemoConfig.title,
+    description: gridOverlayDemoConfig.description,
+    Component: wrapSimpleDemo(gridOverlayDemoConfig),
+  },
+  {
+    id: routingDemoConfig.id,
+    title: routingDemoConfig.title,
+    description: routingDemoConfig.description,
+    Component: wrapSimpleDemo(routingDemoConfig),
+  },
+  {
+    id: obstacleRoutingDemoConfig.id,
+    title: obstacleRoutingDemoConfig.title,
+    description: obstacleRoutingDemoConfig.description,
+    Component: ObstacleRoutingDemo,
+  },
+  {
+    id: linkBendHandlesDemoConfig.id,
+    title: linkBendHandlesDemoConfig.title,
+    description: linkBendHandlesDemoConfig.description,
+    Component: wrapSimpleDemo(linkBendHandlesDemoConfig),
+  },
+];

package/src/displaybox/demos/linkBendHandlesDemo.ts

@@ -0,0 +1,143 @@
+import type { DiagramState } from '../../api';
+import type { DemoConfig } from '../types';
+import { baseElementShapes, basePortShapes } from './shared';
+
+const createLinkBendHandlesState = (): DiagramState => ({
+  elements: [
+    {
+      id: 'bend-source',
+      position: { x: 120, y: 120 },
+      size: { width: 180, height: 100 },
+      shapeId: 'default',
+    },
+    {
+      id: 'bend-target',
+      position: { x: 420, y: 140 },
+      size: { width: 220, height: 120 },
+      shapeId: 'panel',
+    },
+    {
+      id: 'corner-upper',
+      position: { x: 120, y: 330 },
+      size: { width: 200, height: 110 },
+      shapeId: 'default',
+    },
+    {
+      id: 'corner-lower',
+      position: { x: 360, y: 510 },
+      size: { width: 220, height: 120 },
+      shapeId: 'panel',
+    },
+    {
+      id: 'stacked-top',
+      position: { x: 700, y: 300 },
+      size: { width: 180, height: 100 },
+      shapeId: 'default',
+    },
+    {
+      id: 'stacked-bottom',
+      position: { x: 700, y: 470 },
+      size: { width: 180, height: 100 },
+      shapeId: 'panel',
+    },
+  ],
+  ports: [
+    {
+      id: 'bend-source-port',
+      elementId: 'bend-source',
+      position: { x: 30, y: 50 },
+      shapeId: 'port-circle',
+      moveMode: 'border',
+      anchorCenter: true,
+    },
+    {
+      id: 'bend-target-port',
+      elementId: 'bend-target',
+      position: { x: 40, y: 40 },
+      shapeId: 'port-circle',
+      moveMode: 'border',
+      anchorCenter: true,
+    },
+    {
+      id: 'corner-source-port',
+      elementId: 'corner-upper',
+      position: { x: 200, y: 110 },
+      shapeId: 'port-circle',
+      moveMode: 'border',
+      anchorCenter: true,
+    },
+    {
+      id: 'corner-target-port',
+      elementId: 'corner-lower',
+      position: { x: 0, y: 60 },
+      shapeId: 'port-circle',
+      moveMode: 'border',
+      anchorCenter: true,
+    },
+    {
+      id: 'stacked-source-port',
+      elementId: 'stacked-top',
+      position: { x: 0, y: 100 },
+      shapeId: 'port-dark',
+      moveMode: 'border',
+      anchorCenter: true,
+    },
+    {
+      id: 'stacked-target-port',
+      elementId: 'stacked-bottom',
+      position: { x: 180, y: 0 },
+      shapeId: 'port-dark',
+      moveMode: 'border',
+      anchorCenter: true,
+    },
+  ],
+  links: [
+    {
+      id: 'bend-link',
+      sourcePortId: 'bend-source-port',
+      targetPortId: 'bend-target-port',
+      routing: 'manual',
+      points: [
+        { x: 150, y: 170 },
+        { x: 300, y: 170 },
+        { x: 300, y: 280 },
+        { x: 460, y: 180 },
+      ],
+    },
+    {
+      id: 'corner-auto-link',
+      sourcePortId: 'corner-source-port',
+      targetPortId: 'corner-target-port',
+      routing: 'auto',
+      points: [],
+    },
+    {
+      id: 'stacked-auto-link',
+      sourcePortId: 'stacked-source-port',
+      targetPortId: 'stacked-target-port',
+      routing: 'auto',
+      points: [],
+    },
+  ],
+  texts: [
+    { id: 'bend-source-label', content: 'Manual start', position: { x: 12, y: -12 }, ownerId: 'bend-source' },
+    { id: 'bend-target-label', content: 'Manual end', position: { x: 12, y: -12 }, ownerId: 'bend-target' },
+    { id: 'corner-upper-label', content: 'Corner source', position: { x: 12, y: -12 }, ownerId: 'corner-upper' },
+    { id: 'corner-lower-label', content: 'Left-edge target', position: { x: 12, y: -12 }, ownerId: 'corner-lower' },
+    { id: 'stacked-top-label', content: 'Stacked top', position: { x: 12, y: -12 }, ownerId: 'stacked-top' },
+    { id: 'stacked-bottom-label', content: 'Stacked bottom', position: { x: 12, y: -12 }, ownerId: 'stacked-bottom' },
+    { id: 'bend-tip', content: 'Select the manual link to drag bend handles. Auto links show corner edge-cases.', position: { x: 120, y: 70 } },
+  ],
+});
+
+export const linkBendHandlesDemoConfig: DemoConfig = ({
+  id: 'link-bends',
+  title: 'Link Bend Handles',
+  description: 'Manual bend editing plus corner and stacked auto-routing edge cases.',
+  createState: createLinkBendHandlesState,
+  elementShapes: baseElementShapes,
+  portShapes: basePortShapes,
+  defaultElementShapeId: 'default',
+  defaultPortShapeId: 'port-circle',
+  actions: [],
+});