orcasvn-react-diagrams 0.2.2 → 0.2.3

package/dist/cjs/types/api/createDiagramEditor.d.ts

@@ -1,4 +1,4 @@
-import { DiagramEngineHandle, DiagramState, ElementShapeHoverControlActivationEvent, ElementShapeHoverControlInteractionEvent, ElementShapeHoverControls, EngineChangeEvent, EngineSelectionEvent } from './types';
+import { DiagramEngineHandle, Point, DiagramState, ElementShapeHoverControlActivationEvent, ElementShapeHoverControlInteractionEvent, ElementShapeHoverControls, EngineChangeEvent, EngineSelectionEvent } from './types';
 import { type BuiltInShapeKind } from '../shapes';
 export type SimpleShape = {
     id: string;
@@ -19,7 +19,25 @@ export type DiagramEditorConfig = {
     onChange?: (event: EngineChangeEvent) => void;
     onSelection?: (event: EngineSelectionEvent) => void;
 };
+export type DiagramImageExportOptions = {
+    mimeType?: string;
+    quality?: number;
+    pixelRatio?: number;
+    x?: number;
+    y?: number;
+    width?: number;
+    height?: number;
+    fitToContent?: boolean | {
+        padding?: number;
+    };
+};
 export type DiagramEditorHandle = DiagramEngineHandle & {
+    startLinkFromPort: (sourcePortId: string, pointer?: Point) => void;
+    updateLinkPreview: (pointer: Point) => void;
+    completeLinkToPort: (targetPortId: string) => void;
+    completeLinkToElement: (targetElementId: string, pointer: Point) => void;
+    cancelLink: () => void;
+    exportImage: (options?: DiagramImageExportOptions) => string;
     resize: (width: number, height: number) => void;
     setElementShapeHoverControls: (controls?: ElementShapeHoverControls) => void;
     destroy: () => void;

package/dist/cjs/types/api/index.d.ts

@@ -1,4 +1,4 @@
 export * from './types';
 export { createDiagramEngine } from '../engine/DiagramEngine';
 export { createDiagramEditor } from './createDiagramEditor';
-export type { DiagramEditorConfig, DiagramEditorHandle, SimpleShape } from './createDiagramEditor';
+export type { DiagramEditorConfig, DiagramEditorHandle, DiagramImageExportOptions, SimpleShape, } from './createDiagramEditor';

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

@@ -22,6 +22,7 @@ export type DiagramContainer = {
 export type MoveConstraint = 'free' | 'inside' | 'border';
 export type BorderSide = 'left' | 'right' | 'top' | 'bottom';
 export type HostAnchorPreset = 'vertices' | 'cardinal';
+export type PortLinkAttachMode = 'external' | 'internal';
 export type PortAnchor = {
     id: string;
     position: Point;
@@ -29,6 +30,20 @@ export type PortAnchor = {
     normal?: Point;
     meta?: Record<string, unknown>;
 };
+export type PortBorderTransformContext = {
+    side: BorderSide;
+    normal: Point;
+    hostRect: Rect;
+    attachMode: PortLinkAttachMode;
+    effectiveLinkAttachPoint: Point;
+    placementPoint: Point;
+    rotationPivot: Point;
+    portSize?: Size;
+};
+export type PortBorderTransformResult = {
+    rotation?: number;
+    offset?: Point;
+};
 export type PortAnchorConstraint = {
     preset: HostAnchorPreset;
     fallback?: 'nearest';
@@ -153,6 +168,15 @@ export type ElementLayoutMode = 'manual' | 'horizontal' | 'vertical';
 export type ElementLayoutAlign = 'start' | 'center' | 'end';
 export type ElementLayoutChildFitMainAxis = 'none' | 'distribute';
 export type ElementLayoutChildFitCrossAxis = 'none' | 'stretch';
+export type ElementLayoutLabelReservedSpaceMode = 'none' | 'fixed' | 'flexible';
+export type ElementLayoutLabelReservedSpacePlacement = 'top';
+export type ElementLayoutLabelReservedSpace = {
+    mode?: ElementLayoutLabelReservedSpaceMode;
+    placement?: ElementLayoutLabelReservedSpacePlacement;
+    size?: number;
+    minSize?: number;
+    maxSize?: number;
+};
 export type TextLayoutBoundsMode = 'owner-width' | 'owner-box' | 'fixed';
 export type TextLayoutWrapMode = 'none' | 'word' | 'char';
 export type TextLayoutOverflowMode = 'clip' | 'ellipsis-end' | 'ellipsis-middle' | 'ellipsis-start';
@@ -168,6 +192,7 @@ export type ElementLayout = {
     childFitCrossAxis?: ElementLayoutChildFitCrossAxis;
     childFitMinSize?: Partial<Size>;
     childFitMaxSize?: Partial<Size>;
+    labelReservedSpace?: ElementLayoutLabelReservedSpace;
 };
 export type TextLayout = {
     boundsMode?: TextLayoutBoundsMode;
@@ -222,6 +247,11 @@ export type PortData = {
     moveMode?: MoveConstraint;
     anchorCenter?: boolean;
     orientToHostBorder?: boolean;
+    placementPoint?: Point;
+    linkAttachPoint?: Point;
+    externalLinkAttachPoint?: Point;
+    internalLinkAttachPoint?: Point;
+    rotationPivot?: Point;
     currentAnchorId?: string;
 };
 export type ShapeDrawContext = {
@@ -441,7 +471,9 @@ export type DiagramEngineHandle = {
         svgSize?: Size;
         projectToBorder?: (point: Point, rect: Rect) => Point;
         resolveBorderSide?: (point: Point, rect: Rect) => BorderSide;
+        resolveBorderNormal?: (point: Point, rect: Rect) => Point;
         resolvePortAnchors?: (rect: Rect, options: ResolvePortAnchorsOptions) => PortAnchor[];
+        resolvePortBorderTransform?: (context: PortBorderTransformContext) => PortBorderTransformResult | undefined;
         resolveHoverGeometry?: (rect: Rect) => ShapeHoverGeometry | undefined;
         resolveEllipseMidPoints?: (rect: Rect) => ShapeEllipseMidPointTarget[] | undefined;
     }) => void;

package/dist/cjs/types/displaybox/DisplayBoxControls.d.ts

@@ -13,6 +13,10 @@ type ControlsProps = {
     onManualRender: () => void;
     onToggleLinkRouting: () => void;
     onAction: (action: DemoAction) => void;
+    onExportImage?: () => void;
+    onClearExportPreview?: () => void;
+    exportPreviewDataUrl?: string | null;
+    exportError?: string | null;
 };
-declare const DisplayBoxControls: ({ actions, snapEnabled, selectedLinkRouting, canToggleLinkRouting, onReload, onZoomIn, onZoomOut, onResetViewport, onToggleSnap, onManualRender, onToggleLinkRouting, onAction, }: ControlsProps) => React.JSX.Element;
+declare const DisplayBoxControls: ({ actions, snapEnabled, selectedLinkRouting, canToggleLinkRouting, onReload, onZoomIn, onZoomOut, onResetViewport, onToggleSnap, onManualRender, onToggleLinkRouting, onAction, onExportImage, onClearExportPreview, exportPreviewDataUrl, exportError, }: ControlsProps) => React.JSX.Element;
 export default DisplayBoxControls;

package/dist/cjs/types/displaybox/demos/AsymmetricPortMultiAnchorDemoTab.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const AsymmetricPortMultiAnchorDemo: () => React.JSX.Element;
+export default AsymmetricPortMultiAnchorDemo;

package/dist/cjs/types/displaybox/demos/LayoutLabelReservedSpaceDemoTab.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const LayoutLabelReservedSpaceDemo: () => React.JSX.Element;
+export default LayoutLabelReservedSpaceDemo;

package/dist/cjs/types/displaybox/demos/VertexControlLinkSessionDemoTab.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const VertexControlLinkSessionDemo: () => React.JSX.Element;
+export default VertexControlLinkSessionDemo;

package/dist/cjs/types/displaybox/demos/asymmetricPortMultiAnchorDemo.d.ts

@@ -0,0 +1,31 @@
+import type { DiagramState, Point } from '../../api';
+import type { DemoConfig } from '../types';
+export declare const asymmetricPortMultiAnchorDemoId = "asymmetric-port-multi-anchor";
+export declare const asymmetricPortDefaultVariantId = "classic";
+export type AsymmetricPortShapeVariant = {
+    id: string;
+    label: string;
+    description: string;
+    shapeId: string;
+    svgPath: string;
+    svgSize: {
+        width: number;
+        height: number;
+    };
+    placementPoint: Point;
+    externalLinkAttachPoint: Point;
+    internalLinkAttachPoint: Point;
+    rotationPivot: Point;
+};
+export declare const asymmetricPortShapeVariants: AsymmetricPortShapeVariant[];
+export declare const resolveAsymmetricPortShapeVariant: (variantId?: string) => AsymmetricPortShapeVariant;
+export declare const asymmetricPortMultiAnchorShapeId: string;
+export declare const asymmetricPortMultiAnchorShapeSvgPath: string;
+export declare const asymmetricPortMultiAnchorShapeSize: {
+    width: number;
+    height: number;
+};
+export declare const multiAnchorHostId = "multi-anchor-host";
+export declare const multiAnchorExternalPortId = "multi-anchor-port-external";
+export declare const createAsymmetricPortMultiAnchorState: (showLegacyComparison?: boolean, variantId?: string) => DiagramState;
+export declare const asymmetricPortMultiAnchorDemoConfig: DemoConfig;

package/dist/cjs/types/displaybox/demos/layoutLabelReservedSpaceDemo.d.ts

@@ -0,0 +1,11 @@
+import type { DemoConfig } from '../types';
+export declare const layoutReservedDemoIds: {
+    readonly parent: "layout-lane-parent";
+    readonly childA: "layout-lane-child-a";
+    readonly childB: "layout-lane-child-b";
+    readonly nestedParent: "layout-lane-nested-parent";
+    readonly nestedChildA: "layout-lane-nested-child-a";
+    readonly nestedChildB: "layout-lane-nested-child-b";
+    readonly parentLabel: "layout-lane-parent-label";
+};
+export declare const layoutLabelReservedSpaceDemoConfig: DemoConfig;

package/dist/cjs/types/displaybox/demos/vertexControlLinkSessionDemo.d.ts

@@ -0,0 +1,12 @@
+import type { DemoConfig } from '../types';
+export declare const vertexSessionDemoIds: {
+    readonly source: "vertex-session-source";
+    readonly portTarget: "vertex-session-port-target";
+    readonly elementTarget: "vertex-session-element-target";
+    readonly nativeSource: "vertex-session-native-source";
+    readonly nativeTarget: "vertex-session-native-target";
+    readonly existingTargetPort: "vertex-session-existing-target-port";
+    readonly nativeSourcePort: "vertex-session-native-source-port";
+    readonly nativeTargetPort: "vertex-session-native-target-port";
+};
+export declare const vertexControlLinkSessionDemoConfig: DemoConfig;

package/dist/cjs/types/displaybox/useDemoControls.d.ts

@@ -13,6 +13,8 @@ type UseDemoControlsArgs = {
 declare const useDemoControls: ({ demo, editorRef, diagramState, selection, snapEnabled, setSnapEnabled, actionHelpers, }: UseDemoControlsArgs) => {
     selectedLinkRouting: import("../api").LinkRoutingMode;
     canToggleLinkRouting: boolean;
+    exportPreviewDataUrl: string | null;
+    exportError: string | null;
     handleAction: (action: DemoAction) => void;
     handleReload: () => void;
     handleZoomIn: () => void;
@@ -21,6 +23,8 @@ declare const useDemoControls: ({ demo, editorRef, diagramState, selection, snap
     handleToggleSnap: () => void;
     handleManualRender: () => void;
     handleToggleLinkRouting: () => void;
+    handleExportImage: () => void;
+    handleClearExportPreview: () => void;
     snapEnabled: boolean;
 };
 export default useDemoControls;

package/dist/cjs/types/engine/AutoLayoutService.d.ts

@@ -19,6 +19,8 @@ export default class AutoLayoutService {
     applyLayoutCascade(startParentId: string | null): AutoLayoutResult;
     applyAllLayouts(): AutoLayoutResult;
     private resolveLayoutPadding;
+    private resolveLabelReservedTopLane;
+    private resolveFlexibleLabelLaneFromText;
     private clampLayoutSize;
     private distributeLayoutSizes;
 }

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

@@ -78,6 +78,10 @@ export default class DiagramEngine {
         height: number;
     };
     getPortWorldPosition(id: string): Point | null;
+    getPortLinkWorldPosition(id: string, options?: {
+        oppositePortId?: string;
+        attachMode?: 'external' | 'internal';
+    }): Point | null;
     getTextWorldPosition(id: string): Point | null;
     getPortElementId(portId: string): string | null;
     deleteSelection(): void;
@@ -121,6 +125,7 @@ export default class DiagramEngine {
     private applyLayoutForParent;
     private applyLayoutCascade;
     private applyAllLayouts;
+    private hasFlexibleLabelReservedSpace;
     private updateLinksForPorts;
     private collectElementPortIds;
     private computeAutoRoute;

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

@@ -1,4 +1,4 @@
-import { DiagramPatch, LinkData, Point } from '../api/types';
+import { DiagramPatch, LinkData, Point, PortLinkAttachMode } from '../api/types';
 import DiagramModel from '../models/DiagramModel';
 import { ShapeRegistry } from '../renderer/RenderTypes';
 import { RouterStrategy } from '../strategies/RouterStrategy';
@@ -18,8 +18,13 @@ export default class LinkRoutingService {
     setRouter(router: RouterStrategy): void;
     updateLinksForPorts(portIds: string[]): DiagramPatch[];
     routeLinksWithEmptyPoints(): DiagramPatch[];
+    getPortLinkWorldPosition(portId: string, options?: {
+        oppositePortId?: string;
+        attachMode?: PortLinkAttachMode;
+    }): Point | null;
     computeAutoRoute(link: LinkData, source: Point, target: Point): Point[];
     private resolveLinkPointsForUpdate;
+    private resolveLinkEndpoints;
     private updateManualRoute;
     private buildRouteContext;
     private resolveEndpointGeometry;
@@ -27,6 +32,9 @@ export default class LinkRoutingService {
     private resolveElementShape;
     private isPointOnProjectedBorder;
     private getElementRect;
+    private resolveHostForPort;
+    private resolveAttachModeForPorts;
+    private hasAncestorRelation;
     private getAncestorChain;
     private getAncestorExclusions;
     private resolveRouteBounds;

package/dist/cjs/types/models/PortModel.d.ts

@@ -10,6 +10,11 @@ export default class PortModel {
     moveMode?: MoveConstraint;
     anchorCenter?: boolean;
     orientToHostBorder: boolean;
+    placementPoint?: Point;
+    linkAttachPoint?: Point;
+    externalLinkAttachPoint?: Point;
+    internalLinkAttachPoint?: Point;
+    rotationPivot?: Point;
     currentAnchorId?: string;
     constructor(data: PortData);
     setPosition(position: Point): void;

package/dist/cjs/types/renderer/RenderTypes.d.ts

@@ -1,4 +1,4 @@
-import { ElementData, Point, PortAnchor, PortData, Rect, ResolvePortAnchorsOptions, ShapeEllipseMidPointTarget, ShapeDrawContext, ShapeHoverGeometry } from '../api/types';
+import { ElementData, Point, PortBorderTransformContext, PortBorderTransformResult, PortAnchor, PortData, Rect, ResolvePortAnchorsOptions, ShapeEllipseMidPointTarget, ShapeDrawContext, ShapeHoverGeometry } from '../api/types';
 import { BorderSide } from '../utils/borderGeometry';
 export type ShapeNodeSizeUpdateContext = {
     size: {
@@ -38,7 +38,9 @@ export type ShapeDefinition = {
     };
     projectToBorder?: (point: Point, rect: Rect) => Point;
     resolveBorderSide?: (point: Point, rect: Rect) => BorderSide;
+    resolveBorderNormal?: (point: Point, rect: Rect) => Point;
     resolvePortAnchors?: (rect: Rect, options: ResolvePortAnchorsOptions) => PortAnchor[];
+    resolvePortBorderTransform?: (context: PortBorderTransformContext) => PortBorderTransformResult | undefined;
     resolveHoverGeometry?: (rect: Rect) => ShapeHoverGeometry | undefined;
     resolveEllipseMidPoints?: (rect: Rect) => ShapeEllipseMidPointTarget[] | undefined;
 };

package/dist/cjs/types/renderer/konva/KonvaInteraction.d.ts

@@ -56,6 +56,7 @@ export default class KonvaInteraction {
     private onShapeHoverControlInteracted?;
     private onShapeHoverControlActivated?;
     private linkDragContext;
+    private programmaticLinkSession;
     private bound;
     private handlers;
     private windowHandlers;
@@ -70,9 +71,16 @@ export default class KonvaInteraction {
     private textEditor;
     private readonly dragThreshold;
     private readonly panSpeed;
+    private readonly occupiedVertexTolerance;
+    private emittingElementLinkEnded;
     private panKey;
     constructor(engine: DiagramEngine, config?: InteractionConfig);
     setShapeHoverControls(controls?: ElementShapeHoverControls): void;
+    startLinkFromPort(sourcePortId: string, pointer?: Point): void;
+    updateLinkPreview(pointer: Point): void;
+    completeLinkToPort(targetPortId: string): void;
+    completeLinkToElement(targetElementId: string, pointer: Point): void;
+    cancelLink(): void;
     private buildPointerInfo;
     bind(stage?: KonvaStageLike): void;
     dispose(): void;
@@ -102,6 +110,7 @@ export default class KonvaInteraction {
     private resolveTargetHoverCandidate;
     private resolveElementHoverCandidate;
     private resolveEligibleTargetIndices;
+    private resolveOccupiedVertexIndices;
     private resolveEligibleEllipseMidPoints;
     private resolveRotatedHoverGeometry;
     private resolveRotatedEllipseMidPoints;
@@ -122,7 +131,12 @@ export default class KonvaInteraction {
     private projectPointOnSegment;
     private applyMarqueeSelection;
     private applyPortConstraints;
+    private resolveLinkPreviewSource;
+    private resolveActiveLinkSession;
+    private finishLinkDragSession;
+    private emitElementLinkEndedSafely;
     private tryCreateLinkToPort;
+    private tryCreateLinkToElement;
     private createPortForLink;
     private createPlaceholderPort;
     private getElementById;

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

@@ -79,5 +79,6 @@ export default class KonvaNodeFactory {
     }): KonvaNodeLike;
     private createDrawNode;
     private createSvgPathNode;
+    private resolveShapeRotation;
     private applyShapeBehaviorAttrs;
 }

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

@@ -120,7 +120,6 @@ export default class KonvaRenderer implements Renderer {
     private syncTexts;
     private updatePosition;
     private applyPortOrientation;
-    private resolvePortBorderRotation;
     private resolveHostElement;
     private getNodeAttr;
     private updateSize;

package/dist/cjs/types/shapes/BuiltInShapes.d.ts

@@ -1,4 +1,4 @@
-import { Point, PortAnchor, Rect, ResolvePortAnchorsOptions, ShapeEllipseMidPointTarget, ShapeHoverGeometry } from '../api/types';
+import { Point, PortBorderTransformContext, PortBorderTransformResult, PortAnchor, Rect, ResolvePortAnchorsOptions, ShapeEllipseMidPointTarget, ShapeHoverGeometry } from '../api/types';
 import { ShapeNodeSizeUpdater, ShapeResizeNormalizeContext } from '../renderer/RenderTypes';
 import { BorderSide } from '../utils/borderGeometry';
 export type BuiltInShapeKind = 'rect' | 'circle' | 'ellipse' | 'diamond' | 'triangle' | 'pentagon' | 'hexagon';
@@ -46,7 +46,9 @@ export declare abstract class BuiltInShape {
     abstract createNode(context: ShapeCreateContext): unknown;
     projectToBorder(point: Point, rect: Rect): Point;
     resolveBorderSide(point: Point, rect: Rect): BorderSide;
+    resolveBorderNormal(point: Point, rect: Rect): Point;
     resolvePortAnchors(_rect: Rect, _options: ResolvePortAnchorsOptions): PortAnchor[];
+    resolvePortBorderTransform(_context: PortBorderTransformContext): PortBorderTransformResult | undefined;
     resolveHoverGeometry(_rect: Rect): ShapeHoverGeometry | undefined;
     resolveEllipseMidPoints(_rect: Rect): ShapeEllipseMidPointTarget[] | undefined;
     protected resolveShapeName(isPort: boolean): string;

package/dist/cjs/types/utils/__tests__/portGeometry.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/types/utils/portGeometry.d.ts

@@ -0,0 +1,44 @@
+import { BorderSide, Point, PortData, PortLinkAttachMode } from '../api/types';
+import { ShapeRegistry } from '../renderer/RenderTypes';
+type HostElementLike = {
+    id: string;
+    position: Point;
+    size: {
+        width: number;
+        height: number;
+    };
+    shapeId: string;
+};
+export type PortGeometryPoints = {
+    placementPoint: Point;
+    sharedLinkAttachPoint: Point;
+    effectiveLinkAttachPoint: Point;
+    rotationPivot: Point;
+};
+export type PortOrientationContext = {
+    localRotation: number;
+    rotation: number;
+    offset: Point;
+    nodeAnchorPoint: Point;
+    side?: BorderSide;
+    normal?: Point;
+};
+export declare const borderSideToNormal: (side: BorderSide) => Point;
+export declare const resolvePortGeometryPoints: (port: Pick<PortData, 'placementPoint' | 'linkAttachPoint' | 'externalLinkAttachPoint' | 'internalLinkAttachPoint' | 'rotationPivot'>, attachMode: PortLinkAttachMode) => PortGeometryPoints;
+export declare const resolvePortOrientationContext: (options: {
+    port: Pick<PortData, 'shapeId' | 'style' | 'moveMode' | 'orientToHostBorder' | 'anchorCenter' | 'placementPoint' | 'linkAttachPoint' | 'externalLinkAttachPoint' | 'internalLinkAttachPoint' | 'rotationPivot' | 'size'>;
+    worldPlacement: Point;
+    host: HostElementLike | null;
+    shapeRegistry: ShapeRegistry;
+    attachMode: PortLinkAttachMode;
+}) => PortOrientationContext;
+export declare const resolvePortWorldTransform: (options: {
+    port: Pick<PortData, 'placementPoint' | 'linkAttachPoint' | 'externalLinkAttachPoint' | 'internalLinkAttachPoint' | 'rotationPivot'>;
+    worldPlacement: Point;
+    attachMode: PortLinkAttachMode;
+    orientation: Pick<PortOrientationContext, 'localRotation' | 'rotation' | 'offset' | 'nodeAnchorPoint'>;
+}) => {
+    nodePosition: Point;
+    linkAttachWorld: Point;
+};
+export {};