orcasvn-react-diagrams 0.2.2 → 0.2.3

package/src/displaybox/demos/autoLayoutDemo.ts

@@ -74,18 +74,36 @@ const createAutoLayoutState = (): DiagramState => ({
   ports: [],
   links: [],
   texts: [
-    { id: 'label-layout-row', content: 'Row parent', position: { x: 8, y: -18 }, ownerId: 'layout-row' },
+    {
+      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', position: { x: 8, y: -18 }, ownerId: 'layout-column' },
+    {
+      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-nested', content: 'Row + nested column', position: { x: 6, y: -18 }, ownerId: 'layout-nested' },
+    {
+      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' },
@@ -100,8 +118,8 @@ const createAutoLayoutState = (): DiagramState => ({
 
 export const autoLayoutDemoConfig: DemoConfig = ({
   id: 'auto-layout',
-  title: 'Element Auto-Layout',
-  description: 'Arrange children with padding/alignment plus fit options (main-axis distribute, cross-axis stretch).',
+  title: 'Element Auto-Layout + Label Lane',
+  description: 'Consolidated auto-layout verification with baseline/nested containers, fit options, and label reserved-space modes.',
   createState: createAutoLayoutState,
   elementShapes: baseElementShapes,
   portShapes: basePortShapes,

package/src/displaybox/demos/index.tsx

@@ -8,36 +8,40 @@ 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 { 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 { shapeGalleryDemoConfig } from './shapeGalleryDemo';
+import { svgPathDemoConfig } from './svgPathDemo';
+import { roundedRectRadiusDemoConfig } from './roundedRectRadiusDemo';
+import { rotatedCreationDemoConfig } from './rotatedCreationDemo';
+import { multiLevelTreeDemoConfig } from './multiLevelTreeDemo';
 import { multipleElementsDemoConfig } from './multipleElementsDemo';
+import { asymmetricPortMultiAnchorDemoConfig } from './asymmetricPortMultiAnchorDemo';
 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 { 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 { vertexControlLinkSessionDemoConfig } from './vertexControlLinkSessionDemo';
+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 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';
+import AsymmetricPortMultiAnchorDemo from './AsymmetricPortMultiAnchorDemoTab';
+import VertexControlLinkSessionDemo from './VertexControlLinkSessionDemoTab';
 
 export {
   baseElementShapes,
@@ -76,12 +80,12 @@ export const demoTabs: DemoDefinition[] = [
     description: customDemoConfig.description,
     Component: wrapSimpleDemo(customDemoConfig),
   },
-  {
-    id: textDemoConfig.id,
-    title: textDemoConfig.title,
-    description: textDemoConfig.description,
-    Component: TextLayoutDemo,
-  },
+  {
+    id: textDemoConfig.id,
+    title: textDemoConfig.title,
+    description: textDemoConfig.description,
+    Component: TextLayoutDemo,
+  },
   {
     id: selectionDemoConfig.id,
     title: selectionDemoConfig.title,
@@ -94,24 +98,24 @@ export const demoTabs: DemoDefinition[] = [
     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: 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,
@@ -124,30 +128,36 @@ export const demoTabs: DemoDefinition[] = [
     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,
+  {
+    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: asymmetricPortMultiAnchorDemoConfig.id,
+    title: asymmetricPortMultiAnchorDemoConfig.title,
+    description: asymmetricPortMultiAnchorDemoConfig.description,
+    Component: AsymmetricPortMultiAnchorDemo,
+  },
   {
     id: multiLevelTreeDemoConfig.id,
     title: multiLevelTreeDemoConfig.title,
@@ -166,18 +176,18 @@ export const demoTabs: DemoDefinition[] = [
     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: 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,
@@ -185,8 +195,14 @@ export const demoTabs: DemoDefinition[] = [
     Component: ShapeHoverControlsDemo,
   },
   {
-    id: childConstraintsDemoConfig.id,
-    title: childConstraintsDemoConfig.title,
+    id: vertexControlLinkSessionDemoConfig.id,
+    title: vertexControlLinkSessionDemoConfig.title,
+    description: vertexControlLinkSessionDemoConfig.description,
+    Component: VertexControlLinkSessionDemo,
+  },
+  {
+    id: childConstraintsDemoConfig.id,
+    title: childConstraintsDemoConfig.title,
     description: childConstraintsDemoConfig.description,
     Component: wrapSimpleDemo(childConstraintsDemoConfig),
   },

package/src/displaybox/demos/layoutLabelReservedSpaceDemo.ts

@@ -0,0 +1,121 @@
+import type { DiagramState } from '../../api';
+import type { DemoConfig } from '../types';
+import { baseElementShapes, basePortShapes } from './shared';
+
+export const layoutReservedDemoIds = {
+  parent: 'layout-lane-parent',
+  childA: 'layout-lane-child-a',
+  childB: 'layout-lane-child-b',
+  nestedParent: 'layout-lane-nested-parent',
+  nestedChildA: 'layout-lane-nested-child-a',
+  nestedChildB: 'layout-lane-nested-child-b',
+  parentLabel: 'layout-lane-parent-label',
+} as const;
+
+const createLayoutReservedState = (): DiagramState => ({
+  elements: [
+    {
+      id: layoutReservedDemoIds.parent,
+      position: { x: 70, y: 90 },
+      size: { width: 520, height: 260 },
+      shapeId: 'panel',
+      layout: {
+        mode: 'horizontal',
+        padding: 12,
+        gap: 10,
+        align: 'start',
+        childFitMainAxis: 'none',
+        childFitCrossAxis: 'none',
+        labelReservedSpace: { mode: 'none' },
+      },
+    },
+    {
+      id: layoutReservedDemoIds.childA,
+      parentId: layoutReservedDemoIds.parent,
+      position: { x: 0, y: 0 },
+      size: { width: 110, height: 70 },
+      shapeId: 'default',
+    },
+    {
+      id: layoutReservedDemoIds.childB,
+      parentId: layoutReservedDemoIds.parent,
+      position: { x: 0, y: 0 },
+      size: { width: 130, height: 60 },
+      shapeId: 'default',
+    },
+    {
+      id: layoutReservedDemoIds.nestedParent,
+      parentId: layoutReservedDemoIds.parent,
+      position: { x: 0, y: 0 },
+      size: { width: 190, height: 140 },
+      shapeId: 'default',
+      layout: {
+        mode: 'vertical',
+        padding: 8,
+        gap: 8,
+        align: 'start',
+        labelReservedSpace: { mode: 'fixed', size: 20 },
+      },
+    },
+    {
+      id: layoutReservedDemoIds.nestedChildA,
+      parentId: layoutReservedDemoIds.nestedParent,
+      position: { x: 0, y: 0 },
+      size: { width: 120, height: 26 },
+      shapeId: 'default',
+    },
+    {
+      id: layoutReservedDemoIds.nestedChildB,
+      parentId: layoutReservedDemoIds.nestedParent,
+      position: { x: 0, y: 0 },
+      size: { width: 150, height: 30 },
+      shapeId: 'default',
+    },
+  ],
+  ports: [],
+  links: [],
+  texts: [
+    {
+      id: layoutReservedDemoIds.parentLabel,
+      ownerId: layoutReservedDemoIds.parent,
+      content: 'Parent label lane demo',
+      position: { x: 10, y: 6 },
+      style: { fontSize: 13, fontFamily: 'sans-serif' },
+      layout: { boundsMode: 'owner-width', wrap: 'word', overflow: 'clip', padding: 0 },
+    },
+    {
+      id: 'layout-lane-child-a-label',
+      ownerId: layoutReservedDemoIds.childA,
+      content: 'child-a',
+      position: { x: 8, y: -14 },
+      style: { fontSize: 12, fontFamily: 'sans-serif' },
+    },
+    {
+      id: 'layout-lane-child-b-label',
+      ownerId: layoutReservedDemoIds.childB,
+      content: 'child-b',
+      position: { x: 8, y: -14 },
+      style: { fontSize: 12, fontFamily: 'sans-serif' },
+    },
+    {
+      id: 'layout-lane-nested-parent-label',
+      ownerId: layoutReservedDemoIds.nestedParent,
+      content: 'nested layout parent',
+      position: { x: 8, y: -14 },
+      style: { fontSize: 12, fontFamily: 'sans-serif' },
+    },
+  ],
+});
+
+export const layoutLabelReservedSpaceDemoConfig: DemoConfig = {
+  id: 'layout-label-reserved-space',
+  title: 'Layout Label Reserved Space',
+  description:
+    'Reserve top label lane for child layouts (none/fixed/flexible) and verify distribute/stretch plus nested layout behavior within adjusted child bounds.',
+  createState: createLayoutReservedState,
+  elementShapes: baseElementShapes,
+  portShapes: basePortShapes,
+  defaultElementShapeId: 'default',
+  defaultPortShapeId: 'port-circle',
+  actions: [],
+};

package/src/displaybox/demos/vertexControlLinkSessionDemo.ts

@@ -0,0 +1,145 @@
+import type { DiagramState } from '../../api';
+import type { DemoConfig } from '../types';
+import { baseElementShapes, basePortShapes } from './shared';
+
+export const vertexSessionDemoIds = {
+  source: 'vertex-session-source',
+  portTarget: 'vertex-session-port-target',
+  elementTarget: 'vertex-session-element-target',
+  nativeSource: 'vertex-session-native-source',
+  nativeTarget: 'vertex-session-native-target',
+  existingTargetPort: 'vertex-session-existing-target-port',
+  nativeSourcePort: 'vertex-session-native-source-port',
+  nativeTargetPort: 'vertex-session-native-target-port',
+} as const;
+
+const elementShapes = [
+  ...baseElementShapes,
+  {
+    id: 'vertex-session-diamond',
+    kind: 'diamond' as const,
+    style: {
+      fill: '#f5edff',
+      stroke: '#6a3da3',
+      strokeWidth: 2,
+    },
+  },
+  {
+    id: 'vertex-session-target',
+    kind: 'rect' as const,
+    style: {
+      cornerRadius: 10,
+      fill: '#edf7ff',
+      stroke: '#2f6d97',
+      strokeWidth: 2,
+    },
+  },
+];
+
+const createVertexSessionState = (): DiagramState => ({
+  elements: [
+    {
+      id: vertexSessionDemoIds.source,
+      position: { x: 80, y: 120 },
+      size: { width: 170, height: 130 },
+      shapeId: 'vertex-session-diamond',
+    },
+    {
+      id: vertexSessionDemoIds.portTarget,
+      position: { x: 420, y: 110 },
+      size: { width: 210, height: 140 },
+      shapeId: 'vertex-session-target',
+    },
+    {
+      id: vertexSessionDemoIds.elementTarget,
+      position: { x: 720, y: 120 },
+      size: { width: 220, height: 160 },
+      shapeId: 'vertex-session-target',
+    },
+    {
+      id: vertexSessionDemoIds.nativeSource,
+      position: { x: 200, y: 360 },
+      size: { width: 180, height: 120 },
+      shapeId: 'default',
+    },
+    {
+      id: vertexSessionDemoIds.nativeTarget,
+      position: { x: 560, y: 360 },
+      size: { width: 180, height: 120 },
+      shapeId: 'default',
+    },
+  ],
+  ports: [
+    {
+      id: vertexSessionDemoIds.existingTargetPort,
+      elementId: vertexSessionDemoIds.portTarget,
+      position: { x: 0, y: 70 },
+      shapeId: 'port-circle',
+      moveMode: 'border',
+      anchorCenter: true,
+      orientToHostBorder: true,
+    },
+    {
+      id: vertexSessionDemoIds.nativeSourcePort,
+      elementId: vertexSessionDemoIds.nativeSource,
+      position: { x: 180, y: 60 },
+      shapeId: 'port-circle',
+      moveMode: 'border',
+      anchorCenter: true,
+      orientToHostBorder: true,
+    },
+    {
+      id: vertexSessionDemoIds.nativeTargetPort,
+      elementId: vertexSessionDemoIds.nativeTarget,
+      position: { x: 0, y: 60 },
+      shapeId: 'port-circle',
+      moveMode: 'border',
+      anchorCenter: true,
+      orientToHostBorder: true,
+    },
+  ],
+  links: [],
+  texts: [
+    {
+      id: 'vertex-session-source-label',
+      ownerId: vertexSessionDemoIds.source,
+      content: 'Drag the vertex control to start programmatic link session',
+      position: { x: 8, y: -18 },
+      style: { fontSize: 13, fontFamily: 'sans-serif' },
+    },
+    {
+      id: 'vertex-session-target-port-label',
+      ownerId: vertexSessionDemoIds.portTarget,
+      content: 'Scenario 1 target: existing port',
+      position: { x: 8, y: -16 },
+      style: { fontSize: 13, fontFamily: 'sans-serif' },
+    },
+    {
+      id: 'vertex-session-target-element-label',
+      ownerId: vertexSessionDemoIds.elementTarget,
+      content: 'Scenario 2 target: element body (auto create destination port)',
+      position: { x: 8, y: -16 },
+      style: { fontSize: 13, fontFamily: 'sans-serif' },
+    },
+    {
+      id: 'vertex-session-native-label',
+      ownerId: vertexSessionDemoIds.nativeSource,
+      content: 'Scenario 5 baseline: native port drag still works',
+      position: { x: 8, y: -16 },
+      style: { fontSize: 12, fontFamily: 'sans-serif' },
+    },
+  ],
+});
+
+export const vertexControlLinkSessionDemoConfig: DemoConfig = {
+  id: 'vertex-control-link-session',
+  title: 'Vertex Control Link Session',
+  description:
+    'Programmatic link lifecycle driven by vertex-control drag: start, preview update, complete-to-port, complete-to-element, and cancel paths with event log verification.',
+  createState: createVertexSessionState,
+  elementShapes,
+  portShapes: basePortShapes,
+  defaultElementShapeId: 'default',
+  defaultPortShapeId: 'port-circle',
+  actions: [],
+};