orcasvn-react-diagrams 0.2.2 → 0.2.4

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,42 @@ 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 { portConstraintsDemoConfig } from './portConstraintsDemo';
-import { portBorderDemoConfig } from './portBorderDemo';
-import { childConstraintsDemoConfig } from './childConstraintsDemo';
+import { asymmetricPortMultiAnchorDemoConfig } from './asymmetricPortMultiAnchorDemo';
+import { portConstraintsDemoConfig } from './portConstraintsDemo';
+import { portPositionLimitsDemoConfig } from './portPositionLimitsDemo';
+import { portBorderDemoConfig } from './portBorderDemo';
+import { childConstraintsDemoConfig } from './childConstraintsDemo';
+import { labelStyleDemoConfig } from './labelStyleDemo';
 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 +82,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 +100,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 +130,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,
@@ -160,24 +172,36 @@ export const demoTabs: DemoDefinition[] = [
     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: portConstraintsDemoConfig.id,
+    title: portConstraintsDemoConfig.title,
+    description: portConstraintsDemoConfig.description,
+    Component: wrapSimpleDemo(portConstraintsDemoConfig),
   },
   {
-    id: shapeBorderMovementDemoConfig.id,
-    title: shapeBorderMovementDemoConfig.title,
-    description: shapeBorderMovementDemoConfig.description,
-    Component: wrapSimpleDemo(shapeBorderMovementDemoConfig),
+    id: portPositionLimitsDemoConfig.id,
+    title: portPositionLimitsDemoConfig.title,
+    description: portPositionLimitsDemoConfig.description,
+    Component: wrapSimpleDemo(portPositionLimitsDemoConfig),
   },
+  {
+    id: labelStyleDemoConfig.id,
+    title: labelStyleDemoConfig.title,
+    description: labelStyleDemoConfig.description,
+    Component: wrapSimpleDemo(labelStyleDemoConfig),
+  },
+  {
+    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 +209,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/labelStyleDemo.ts

@@ -0,0 +1,101 @@
+import type { DiagramState } from '../../api';
+import type { DemoConfig } from '../types';
+import { baseElementShapes, basePortShapes } from './shared';
+
+const createLabelStyleState = (): DiagramState => ({
+  elements: [
+    {
+      id: 'label-center-host',
+      position: { x: 80, y: 160 },
+      size: { width: 260, height: 120 },
+      shapeId: 'panel',
+    },
+    {
+      id: 'label-background-host',
+      position: { x: 390, y: 160 },
+      size: { width: 260, height: 120 },
+      shapeId: 'panel',
+      style: {
+        cornerRadius: 16,
+        stroke: '#1f4d99',
+        strokeWidth: 2,
+        fill: '#edf4ff',
+      },
+    },
+    {
+      id: 'label-baseline-host',
+      position: { x: 700, y: 160 },
+      size: { width: 260, height: 120 },
+      shapeId: 'panel',
+    },
+  ],
+  ports: [],
+  links: [],
+  texts: [
+    {
+      id: 'label-style-intro',
+      content: 'Compare center alignment, background fill, and baseline label styling. Resize hosts to verify visual stability.',
+      position: { x: 80, y: 80 },
+    },
+    {
+      id: 'label-center-text',
+      content: 'Center aligned owner-width label',
+      ownerId: 'label-center-host',
+      position: { x: 0, y: 44 },
+      layout: { boundsMode: 'owner-width', wrap: 'none', overflow: 'ellipsis-end', padding: 8 },
+      style: { align: 'center', fill: '#16324f', fontSize: 15 },
+    },
+    {
+      id: 'label-background-text',
+      content: 'Top Header Label',
+      ownerId: 'label-background-host',
+      position: { x: 0, y: 0 },
+      layout: { boundsMode: 'owner-width', wrap: 'none', overflow: 'ellipsis-end', padding: 0 },
+      style: {
+        align: 'center',
+        backgroundFill: '#cfe2ff',
+        backgroundStroke: '#1f4d99',
+        backgroundStrokeWidth: 1,
+        fill: '#16324f',
+        fontSize: 15,
+        padding: 8,
+      },
+    },
+    {
+      id: 'label-baseline-text',
+      content: 'Baseline label (no style keys)',
+      ownerId: 'label-baseline-host',
+      position: { x: 12, y: 44 },
+      layout: { boundsMode: 'owner-width', wrap: 'none', overflow: 'ellipsis-end', padding: 8 },
+    },
+  ],
+});
+
+export const labelStyleDemoConfig: DemoConfig = {
+  id: 'label-style',
+  title: 'Label Style',
+  description: 'Center text alignment and backgroundFill styling for labels.',
+  createState: createLabelStyleState,
+  elementShapes: baseElementShapes,
+  portShapes: basePortShapes,
+  defaultElementShapeId: 'default',
+  defaultPortShapeId: 'port-circle',
+  actions: [
+    {
+      id: 'resize-label-hosts',
+      label: 'Resize hosts (style verification)',
+      run: (editor, state) => {
+        const expanded = (state.elements.find((item) => item.id === 'label-center-host')?.size.width ?? 0) > 260;
+        if (expanded) {
+          editor.resizeElement('label-center-host', 260, 120);
+          editor.resizeElement('label-background-host', 260, 120);
+          editor.resizeElement('label-baseline-host', 260, 120);
+          return;
+        }
+        editor.resizeElement('label-center-host', 320, 140);
+        editor.resizeElement('label-background-host', 320, 140);
+        editor.resizeElement('label-baseline-host', 320, 140);
+      },
+    },
+  ],
+};

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: [],
+};