orcasvn-react-diagrams 0.2.3 → 0.2.4

package/dist/esm/types/api/types.d.ts

@@ -48,6 +48,14 @@ export type PortAnchorConstraint = {
     preset: HostAnchorPreset;
     fallback?: 'nearest';
 };
+export type PositionAxisLimit = {
+    min?: number;
+    max?: number;
+};
+export type PortPositionLimits = {
+    x?: PositionAxisLimit;
+    y?: PositionAxisLimit;
+};
 export type ResolvePortAnchorsOptions = {
     preset: HostAnchorPreset;
 };
@@ -158,6 +166,7 @@ export type ElementShapeHoverControlActivationEvent = {
 export type ElementPortMovementPolicy = {
     moveMode: MoveConstraint | 'anchors';
     anchorConstraint?: PortAnchorConstraint;
+    positionLimits?: PortPositionLimits;
 };
 export type LinkRoutingMode = 'auto' | 'manual';
 export type AnchorReference = 'top-left' | 'center';

package/dist/esm/types/displaybox/demos/labelStyleDemo.d.ts

@@ -0,0 +1,2 @@
+import type { DemoConfig } from '../types';
+export declare const labelStyleDemoConfig: DemoConfig;

package/dist/esm/types/displaybox/demos/portPositionLimitsDemo.d.ts

@@ -0,0 +1,2 @@
+import type { DemoConfig } from '../types';
+export declare const portPositionLimitsDemoConfig: DemoConfig;

package/dist/esm/types/engine/DiagramEngine.d.ts

@@ -115,12 +115,17 @@ export default class DiagramEngine {
     private collectResizedElementSizes;
     private resolveBorderPortResizeProjection;
     private resolveConstrainedPortRelativePosition;
+    private applyPortPositionLimits;
+    private resolveBorderPositionWithLimits;
+    private isPointWithinPositionLimits;
+    private filterAnchorsByPositionLimits;
     private resolveEffectivePortMoveMode;
     private resolvePortAnchorsForElement;
     private resolveNearestPortAnchor;
     private findNearestPortAnchor;
     private resolveAnchoredPortResizeProjection;
     private resolveTextPresentation;
+    private resolveAllTextPresentationPatches;
     private emitSelection;
     private applyLayoutForParent;
     private applyLayoutCascade;
@@ -132,6 +137,7 @@ export default class DiagramEngine {
     private constrainPortToHostBorder;
     private projectPointToHostBorder;
     private routeLinksWithEmptyPoints;
+    private normalizePortsForHostPolicies;
     private computeRemovalDiff;
     private emitEntityDeletionEvents;
 }

package/dist/esm/types/engine/LinkRoutingService.d.ts

@@ -34,7 +34,7 @@ export default class LinkRoutingService {
     private getElementRect;
     private resolveHostForPort;
     private resolveAttachModeForPorts;
-    private hasAncestorRelation;
+    private isAncestorOf;
     private getAncestorChain;
     private getAncestorExclusions;
     private resolveRouteBounds;

package/dist/esm/types/renderer/konva/KonvaNodeFactory.d.ts

@@ -36,6 +36,17 @@ export default class KonvaNodeFactory {
     createPortNode(model: PortData): KonvaNodeLike;
     createLinkNode(model: LinkData): KonvaNodeLike;
     createTextNode(model: TextData): KonvaNodeLike;
+    createTextBackgroundNode(config: {
+        id: string;
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+        fill: string;
+        stroke?: string;
+        strokeWidth?: number;
+        cornerRadius?: number | [number, number, number, number];
+    }): KonvaNodeLike;
     createHandleNode(config: {
         id: string;
         x: number;

package/dist/esm/types/renderer/konva/KonvaRenderer.d.ts

@@ -61,6 +61,7 @@ export default class KonvaRenderer implements Renderer {
     private portNodes;
     private linkNodes;
     private textNodes;
+    private textBackgroundNodes;
     private selectedIds;
     private overlayLayer;
     private tempLinkNode;
@@ -118,6 +119,7 @@ export default class KonvaRenderer implements Renderer {
     private syncPorts;
     private syncLinks;
     private syncTexts;
+    private resolveTextBackgroundMeta;
     private updatePosition;
     private applyPortOrientation;
     private resolveHostElement;

package/dist/esm/types/strategies/ObstacleRouter.d.ts

@@ -16,6 +16,8 @@ export default class ObstacleRouter implements RouterStrategy {
     private pointsWithinBounds;
     private isPathClear;
     private computeStubEndpoint;
+    private computeAvailableStubLength;
+    private rectsEqual;
     private getNormal;
     private distanceToBounds;
     private distanceToObstacles;

package/dist/examples.d.ts

@@ -50,6 +50,14 @@ type PortAnchorConstraint = {
     preset: HostAnchorPreset;
     fallback?: 'nearest';
 };
+type PositionAxisLimit = {
+    min?: number;
+    max?: number;
+};
+type PortPositionLimits = {
+    x?: PositionAxisLimit;
+    y?: PositionAxisLimit;
+};
 type ResolvePortAnchorsOptions = {
     preset: HostAnchorPreset;
 };
@@ -131,6 +139,7 @@ type ElementShapeHoverControls = {
 type ElementPortMovementPolicy = {
     moveMode: MoveConstraint | 'anchors';
     anchorConstraint?: PortAnchorConstraint;
+    positionLimits?: PortPositionLimits;
 };
 type LinkRoutingMode = 'auto' | 'manual';
 type AnchorReference = 'top-left' | 'center';

package/dist/index.d.ts

@@ -48,6 +48,14 @@ type PortAnchorConstraint = {
     preset: HostAnchorPreset;
     fallback?: 'nearest';
 };
+type PositionAxisLimit = {
+    min?: number;
+    max?: number;
+};
+type PortPositionLimits = {
+    x?: PositionAxisLimit;
+    y?: PositionAxisLimit;
+};
 type ResolvePortAnchorsOptions = {
     preset: HostAnchorPreset;
 };
@@ -158,6 +166,7 @@ type ElementShapeHoverControlActivationEvent = {
 type ElementPortMovementPolicy = {
     moveMode: MoveConstraint | 'anchors';
     anchorConstraint?: PortAnchorConstraint;
+    positionLimits?: PortPositionLimits;
 };
 type LinkRoutingMode = 'auto' | 'manual';
 type AnchorReference = 'top-left' | 'center';
@@ -767,4 +776,4 @@ type DiagramEditorHandle = DiagramEngineHandle & {
 };
 declare const createDiagramEditor: (config: DiagramEditorConfig) => DiagramEditorHandle;
 
-export { type AnchorReference, type BorderSide$1 as BorderSide, type ClientRectLike, type DiagramContainer, type DiagramEditorConfig, type DiagramEditorHandle, type DiagramEngineHandle, type DiagramImageExportOptions, type DiagramPatch, type DiagramState, type EdgeHoverControl, type ElementData, type ElementDeletedEvent, type ElementDropEvent, type ElementLayout, type ElementLayoutAlign, type ElementLayoutChildFitCrossAxis, type ElementLayoutChildFitMainAxis, type ElementLayoutLabelReservedSpace, type ElementLayoutLabelReservedSpaceMode, type ElementLayoutLabelReservedSpacePlacement, type ElementLayoutMode, type ElementLinkConnectingEvent, type ElementLinkEndedEvent, type ElementLinkStartedEvent, type ElementMovedEvent, type ElementPointerEvent, type ElementPortMovementPolicy, type ElementResizedEvent, type ElementSelectedEvent, type ElementShapeControlDragEvent, type ElementShapeControlEventType, type ElementShapeHoverControlActivationEvent, type ElementShapeHoverControlInteractionEvent, type ElementShapeHoverControls, EllipseMidPoint, type EngineChangeEvent, type EngineConfigEvent, type EngineEventMap, type EnginePointerInfo, type EngineSelectionEvent, type HostAnchorPreset, type HoverControlIcon, type LinkData, type LinkDeletedEvent, type LinkRoutingMode, type MoveConstraint, type OverlayShapeConfig, type OverlayShapeHandle, type PaperClickEvent, type Point, type PortAnchor, type PortAnchorConstraint, type PortBorderTransformContext, type PortBorderTransformResult, type PortData, type PortDeletedEvent, type PortLinkAttachMode, type PortMouseEvent, type PortMovedEvent, type PortSelectedEvent, type Rect, type RerouteLinksOptions, type ResolvePortAnchorsOptions, type ShapeControlDefinition, type ShapeControlTargetKind, type ShapeControlVisibilityTrigger, type ShapeDrawContext, type ShapeEdgeTarget, type ShapeEllipseMidPointTarget, type ShapeHoverGeometry, type ShapeVertexTarget, type SimpleShape, type Size, type TextData, type TextDeletedEvent, type TextLayout, type TextLayoutBoundsMode, type TextLayoutOverflowMode, type TextLayoutWrapMode, type TextSelectedEvent, type TextUpdatedEvent, type VertexHoverControl, createDiagramEditor, createDiagramEngine };
+export { type AnchorReference, type BorderSide$1 as BorderSide, type ClientRectLike, type DiagramContainer, type DiagramEditorConfig, type DiagramEditorHandle, type DiagramEngineHandle, type DiagramImageExportOptions, type DiagramPatch, type DiagramState, type EdgeHoverControl, type ElementData, type ElementDeletedEvent, type ElementDropEvent, type ElementLayout, type ElementLayoutAlign, type ElementLayoutChildFitCrossAxis, type ElementLayoutChildFitMainAxis, type ElementLayoutLabelReservedSpace, type ElementLayoutLabelReservedSpaceMode, type ElementLayoutLabelReservedSpacePlacement, type ElementLayoutMode, type ElementLinkConnectingEvent, type ElementLinkEndedEvent, type ElementLinkStartedEvent, type ElementMovedEvent, type ElementPointerEvent, type ElementPortMovementPolicy, type ElementResizedEvent, type ElementSelectedEvent, type ElementShapeControlDragEvent, type ElementShapeControlEventType, type ElementShapeHoverControlActivationEvent, type ElementShapeHoverControlInteractionEvent, type ElementShapeHoverControls, EllipseMidPoint, type EngineChangeEvent, type EngineConfigEvent, type EngineEventMap, type EnginePointerInfo, type EngineSelectionEvent, type HostAnchorPreset, type HoverControlIcon, type LinkData, type LinkDeletedEvent, type LinkRoutingMode, type MoveConstraint, type OverlayShapeConfig, type OverlayShapeHandle, type PaperClickEvent, type Point, type PortAnchor, type PortAnchorConstraint, type PortBorderTransformContext, type PortBorderTransformResult, type PortData, type PortDeletedEvent, type PortLinkAttachMode, type PortMouseEvent, type PortMovedEvent, type PortPositionLimits, type PortSelectedEvent, type PositionAxisLimit, type Rect, type RerouteLinksOptions, type ResolvePortAnchorsOptions, type ShapeControlDefinition, type ShapeControlTargetKind, type ShapeControlVisibilityTrigger, type ShapeDrawContext, type ShapeEdgeTarget, type ShapeEllipseMidPointTarget, type ShapeHoverGeometry, type ShapeVertexTarget, type SimpleShape, type Size, type TextData, type TextDeletedEvent, type TextLayout, type TextLayoutBoundsMode, type TextLayoutOverflowMode, type TextLayoutWrapMode, type TextSelectedEvent, type TextUpdatedEvent, type VertexHoverControl, createDiagramEditor, createDiagramEngine };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "orcasvn-react-diagrams",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "dependencies": {
     "eventemitter3": "^5.0.1",
     "flatten-js": "^0.6.9",
@@ -57,16 +57,16 @@
     "./ai-manifest": "./ai/manifest.json",
     "./package.json": "./package.json"
   },
-  "files": [
-    "dist",
-    "src/examples",
-    "src/displaybox/demos",
-    "src/displaybox/types.ts",
-    "README.md",
-    "CHANGELOG.md",
-    "docs",
-    "ai"
-  ],
+  "files": [
+    "dist",
+    "src/examples",
+    "src/displaybox/demos",
+    "src/displaybox/types.ts",
+    "README.md",
+    "CHANGELOG.md",
+    "docs",
+    "ai"
+  ],
   "types": "dist/index.d.ts",
   "devDependencies": {
     "@rollup/plugin-commonjs": "^26.0.1",

package/src/displaybox/demos/ObstacleRoutingDemoTab.tsx

@@ -15,16 +15,17 @@ const ObstacleRoutingDemo = () => (
           background: '#f4f4f4',
         }}
       >
-        <strong>Expected routing behavior</strong>
-        <ul style={{ margin: '6px 0 0 16px' }}>
-          <li>Links between top nodes should route around the blocking element.</li>
-          <li>Sibling links inside a shared parent should ignore the parent as an obstacle.</li>
-          <li>Parent-child links should stay within the parent and avoid the child interior when ports are on edges.</li>
-          <li>Grandchild links should ignore shared ancestors (parent + grandparent containers).</li>
-        </ul>
-      </div>
-    }
-  />
+        <strong>Expected routing behavior</strong>
+        <ul style={{ margin: '6px 0 0 16px' }}>
+          <li>Scenario A: the sibling link must not cross either child host interior.</li>
+          <li>Scenario A: sibling host ports use anchor preset `cardinal` (left/right) for deterministic multi-anchor placement.</li>
+          <li>Scenario B has one parent and two children with three links: parent-&gt;child, child-&gt;parent, and child-&gt;child.</li>
+          <li>Scenario B: ancestor endpoints resolve to `internalLinkAttachPoint`; descendant/sibling endpoints resolve to `externalLinkAttachPoint`.</li>
+          <li>Use `Reroute All Links` repeatedly; both routes should stay deterministic after each reroute.</li>
+        </ul>
+      </div>
+    }
+  />
 );
 
 export default ObstacleRoutingDemo;

package/src/displaybox/demos/index.tsx

@@ -18,9 +18,11 @@ 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 { 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';
@@ -170,16 +172,28 @@ 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,
+  {
+    id: portConstraintsDemoConfig.id,
+    title: portConstraintsDemoConfig.title,
+    description: portConstraintsDemoConfig.description,
+    Component: wrapSimpleDemo(portConstraintsDemoConfig),
+  },
+  {
+    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),
   },
   {

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