orcasvn-react-diagrams 0.2.4 → 0.2.6

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

@@ -1,4 +1,4 @@
-import { DiagramEngineHandle, Point, DiagramState, ElementShapeHoverControlActivationEvent, ElementShapeHoverControlInteractionEvent, ElementShapeHoverControls, EngineChangeEvent, EngineSelectionEvent } from './types';
+import { DiagramEngineHandle, Point, DiagramState, ElementShapeHoverControlActivationEvent, ElementShapeHoverControlInteractionEvent, ElementShapeHoverControls, EngineChangeEvent, EngineSelectionEvent, LinkColorPoolPolicy, LinkRouteRefreshPolicy, ViewportFitOptions } from './types';
 import { type BuiltInShapeKind } from '../shapes';
 export type SimpleShape = {
     id: string;
@@ -18,6 +18,8 @@ export type DiagramEditorConfig = {
     onElementShapeHoverControlActivated?: (event: ElementShapeHoverControlActivationEvent) => void;
     onChange?: (event: EngineChangeEvent) => void;
     onSelection?: (event: EngineSelectionEvent) => void;
+    linkRouteRefreshPolicy?: LinkRouteRefreshPolicy;
+    linkColorPoolPolicy?: LinkColorPoolPolicy;
 };
 export type DiagramImageExportOptions = {
     mimeType?: string;
@@ -37,6 +39,7 @@ export type DiagramEditorHandle = DiagramEngineHandle & {
     completeLinkToPort: (targetPortId: string) => void;
     completeLinkToElement: (targetElementId: string, pointer: Point) => void;
     cancelLink: () => void;
+    zoomToFitElements: (options?: ViewportFitOptions) => void;
     exportImage: (options?: DiagramImageExportOptions) => string;
     resize: (width: number, height: number) => void;
     setElementShapeHoverControls: (controls?: ElementShapeHoverControls) => void;

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

@@ -19,7 +19,16 @@ export type ClientRectLike = {
 export type DiagramContainer = {
     getBoundingClientRect: () => ClientRectLike;
 };
+export type ViewportFitOptions = {
+    padding?: number;
+    minZoom?: number;
+    maxZoom?: number;
+};
 export type MoveConstraint = 'free' | 'inside' | 'border';
+export type TextInteractionPolicy = {
+    movable?: boolean;
+    editable?: boolean;
+};
 export type BorderSide = 'left' | 'right' | 'top' | 'bottom';
 export type HostAnchorPreset = 'vertices' | 'cardinal';
 export type PortLinkAttachMode = 'external' | 'internal';
@@ -173,10 +182,21 @@ export type AnchorReference = 'top-left' | 'center';
 export type RerouteLinksOptions = {
     includeManual?: boolean;
 };
-export type ElementLayoutMode = 'manual' | 'horizontal' | 'vertical';
+export type LinkRouteRefreshMode = 'mutation-only' | 'redraw-two-endpoint-change';
+export type LinkRouteRefreshPolicy = {
+    mode?: LinkRouteRefreshMode;
+    includeManual?: boolean;
+};
+export type LinkColorPoolPolicy = {
+    enabled?: boolean;
+    colors?: string[];
+};
+export type ElementLayoutMode = 'manual' | 'horizontal' | 'vertical' | 'grid';
 export type ElementLayoutAlign = 'start' | 'center' | 'end';
 export type ElementLayoutChildFitMainAxis = 'none' | 'distribute';
 export type ElementLayoutChildFitCrossAxis = 'none' | 'stretch';
+export type ElementLayoutAutoResizeMode = 'grow' | 'grow-shrink';
+export type ElementLayoutGridRowTemplate = number;
 export type ElementLayoutLabelReservedSpaceMode = 'none' | 'fixed' | 'flexible';
 export type ElementLayoutLabelReservedSpacePlacement = 'top';
 export type ElementLayoutLabelReservedSpace = {
@@ -197,8 +217,15 @@ export type ElementLayout = {
     };
     gap?: number;
     align?: ElementLayoutAlign;
+    autoResize?: ElementLayoutAutoResizeMode;
+    gridTemplate?: ElementLayoutGridRowTemplate[];
+    gridChildWidthResizeEnabled?: boolean;
     childFitMainAxis?: ElementLayoutChildFitMainAxis;
     childFitCrossAxis?: ElementLayoutChildFitCrossAxis;
+    childMinWidth?: number;
+    childMaxWidth?: number;
+    childMinHeight?: number;
+    childMaxHeight?: number;
     childFitMinSize?: Partial<Size>;
     childFitMaxSize?: Partial<Size>;
     labelReservedSpace?: ElementLayoutLabelReservedSpace;
@@ -283,6 +310,7 @@ export type TextData = {
     size?: Size;
     style?: Record<string, unknown>;
     ownerId?: string | null;
+    interaction?: TextInteractionPolicy;
     layout?: TextLayout;
     displayContent?: string;
     displayOffset?: Point;
@@ -356,6 +384,19 @@ export type ElementResizedEvent = {
     oldSize: Size;
     newSize: Size;
 };
+export type GridLayoutChangedReason = 'child-resize-split' | 'child-resize-redistribute';
+export type GridRowSnapshot = {
+    childIds: string[];
+};
+export type GridLayoutChangedEvent = {
+    parentId: string;
+    triggerChildId: string;
+    reason: GridLayoutChangedReason;
+    beforeRows: GridRowSnapshot[];
+    afterRows: GridRowSnapshot[];
+    beforeGridTemplate?: ElementLayoutGridRowTemplate[];
+    afterGridTemplate: ElementLayoutGridRowTemplate[];
+};
 export type ElementDeletedEvent = {
     elementId: string;
 };
@@ -424,6 +465,7 @@ export type EngineEventMap = {
     elementDragged: ElementDropEvent;
     elementMoved: ElementMovedEvent;
     elementResized: ElementResizedEvent;
+    gridLayoutChanged: GridLayoutChangedEvent;
     elementDeleted: ElementDeletedEvent;
     portDeleted: PortDeletedEvent;
     linkDeleted: LinkDeletedEvent;

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

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

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

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

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

@@ -1,7 +1,10 @@
 import React from 'react';
+import type { LinkColorPoolPolicy, LinkRouteRefreshPolicy } from '../../api';
 import type { DemoConfig } from '../types';
 type SimpleDemoProps = {
     demo: DemoConfig;
+    linkRouteRefreshPolicy?: LinkRouteRefreshPolicy;
+    linkColorPoolPolicy?: LinkColorPoolPolicy;
     beforeStage?: React.ReactNode;
     stageHandlers?: {
         onDragOver?: (event: React.DragEvent<HTMLDivElement>) => void;
@@ -9,5 +12,5 @@ type SimpleDemoProps = {
         onDrop?: (event: React.DragEvent<HTMLDivElement>) => void;
     };
 };
-declare const SimpleDemo: ({ demo, beforeStage, stageHandlers }: SimpleDemoProps) => React.JSX.Element;
+declare const SimpleDemo: ({ demo, linkRouteRefreshPolicy, linkColorPoolPolicy, beforeStage, stageHandlers }: SimpleDemoProps) => React.JSX.Element;
 export default SimpleDemo;

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

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

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

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

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

@@ -0,0 +1,4 @@
+import type { DiagramState } from '../../api';
+import type { DemoConfig } from '../types';
+export declare const createOffsetAnchorAvoidanceState: () => DiagramState;
+export declare const offsetAnchorAvoidanceDemoConfig: DemoConfig;

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

@@ -1,6 +1,9 @@
+import type { TextInteractionPolicy } from '../../api';
 import type { DemoConfig } from '../types';
 export declare const textDemoOwnerId = "text-layout-owner";
 export declare const textDemoOwnedTextId = "text-owned-overflow";
 export declare const textDemoFloatingTextId = "text-floating-overflow";
 export declare const textDemoLongSample = "Long diagram label: middle ellipsis should keep the beginning and end visible while preserving the full canonical content in model state.";
+export declare const textDemoOwnedInteraction: TextInteractionPolicy;
+export declare const textDemoFloatingInteraction: TextInteractionPolicy;
 export declare const textDemoConfig: DemoConfig;

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

@@ -0,0 +1,4 @@
+import type { DiagramState } from '../../api';
+import type { DemoConfig } from '../types';
+export declare const createZoomToFitElementsState: () => DiagramState;
+export declare const zoomToFitElementsDemoConfig: DemoConfig;

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

@@ -1,5 +1,5 @@
 import type { CSSProperties } from 'react';
-import type { DiagramEditorHandle, DiagramState, SimpleShape } from '../api';
+import type { DiagramEditorHandle, DiagramState, LinkColorPoolPolicy, LinkRouteRefreshPolicy, SimpleShape } from '../api';
 import type { RouterStrategy } from '../strategies/RouterStrategy';
 export type DemoActionHelpers = {
     nextOffset: () => number;
@@ -20,6 +20,8 @@ export type DemoConfig = {
     defaultPortShapeId?: string;
     router?: RouterStrategy;
     snapDefault?: boolean;
+    linkRouteRefreshPolicy?: LinkRouteRefreshPolicy;
+    linkColorPoolPolicy?: LinkColorPoolPolicy;
     stageStyle?: CSSProperties;
     actions: DemoAction[];
 };

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { DiagramEditorHandle, DiagramState, ElementShapeHoverControlActivationEvent, ElementShapeHoverControlInteractionEvent, ElementShapeHoverControls, SimpleShape } from '../api';
+import type { DiagramEditorHandle, DiagramState, ElementShapeHoverControlActivationEvent, ElementShapeHoverControlInteractionEvent, ElementShapeHoverControls, LinkColorPoolPolicy, LinkRouteRefreshPolicy, SimpleShape } from '../api';
 import type { RouterStrategy } from '../strategies/RouterStrategy';
 import type { ViewportSnapshot } from './types';
 type DemoEditorConfig = {
@@ -8,11 +8,13 @@ type DemoEditorConfig = {
     portShapes?: SimpleShape[];
     router?: RouterStrategy;
     snapDefault?: boolean;
+    linkRouteRefreshPolicy?: LinkRouteRefreshPolicy;
+    linkColorPoolPolicy?: LinkColorPoolPolicy;
     elementShapeHoverControls?: ElementShapeHoverControls;
     onElementShapeHoverControlInteraction?: (event: ElementShapeHoverControlInteractionEvent) => void;
     onElementShapeHoverControlActivated?: (event: ElementShapeHoverControlActivationEvent) => void;
 };
-declare const useDemoEditor: ({ createState, elementShapes, portShapes, router, snapDefault, elementShapeHoverControls, onElementShapeHoverControlInteraction, onElementShapeHoverControlActivated, }: DemoEditorConfig) => {
+declare const useDemoEditor: ({ createState, elementShapes, portShapes, router, snapDefault, linkRouteRefreshPolicy, linkColorPoolPolicy, elementShapeHoverControls, onElementShapeHoverControlInteraction, onElementShapeHoverControlActivated, }: DemoEditorConfig) => {
     containerRef: import("react").MutableRefObject<HTMLDivElement | null>;
     editorRef: import("react").MutableRefObject<DiagramEditorHandle | null>;
     diagramState: DiagramState | null;

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

@@ -1,26 +1,83 @@
-import { DiagramPatch } from '../api/types';
+import { DiagramPatch, ElementData, GridLayoutChangedReason, GridRowSnapshot } from '../api/types';
 import DiagramModel from '../models/DiagramModel';
 import CommandQueue from './CommandQueue';
 export type AutoLayoutResult = {
     patches: DiagramPatch[];
     movedPortIds: string[];
 };
+export type GridChildResizeTopologyChange = {
+    parentId: string;
+    triggerChildId: string;
+    reason: GridLayoutChangedReason;
+    beforeRows: GridRowSnapshot[];
+    afterRows: GridRowSnapshot[];
+    nextLayout: NonNullable<ElementData['layout']>;
+};
 export type AutoLayoutServiceConfig = {
     model: DiagramModel;
     commandQueue: CommandQueue;
     collectElementPortIds: (elementId: string) => string[];
 };
+type ParentLayoutOptions = {
+    preserveParentSize?: boolean;
+    preserveParentWidth?: boolean;
+    preserveParentHeight?: boolean;
+};
 export default class AutoLayoutService {
     private model;
     private commandQueue;
     private collectElementPortIds;
     constructor(config: AutoLayoutServiceConfig);
-    applyLayoutForParent(parentId: string): AutoLayoutResult;
+    applyLayoutForParent(parentId: string, options?: ParentLayoutOptions): AutoLayoutResult;
     applyLayoutCascade(startParentId: string | null): AutoLayoutResult;
     applyAllLayouts(): AutoLayoutResult;
+    describeGridRows(parentId: string): GridRowSnapshot[];
+    describeGridSlotState(parentId: string): {
+        orderedChildIds: string[];
+        slotWeights: number[];
+    } | null;
+    resolveGridReorderedLayout(parentId: string, previousState: {
+        orderedChildIds: string[];
+        slotWeights: number[];
+    }): NonNullable<ElementData['layout']> | null;
+    resolveGridChildResizeTopologyChange(parentId: string, childId: string, requestedWidth: number): GridChildResizeTopologyChange | null;
+    snapGridChildRequestedWidth(parentId: string, childId: string, requestedWidth: number): number;
+    canGridChildGrowRightward(parentId: string, childId: string): boolean;
+    private applyAxisLayoutForParent;
+    private applyGridLayoutForParent;
+    private resolveGridCellWidths;
+    private applyResolvedLayout;
     private resolveLayoutPadding;
+    private resolveAutoResizeMode;
+    private resolveAutoResizedDimension;
+    private resolveChildSizeConstraints;
+    private resolveAssignedGridRows;
+    private repartitionAssignedGridRows;
+    private fitGridRowWeights;
+    private gridRowSnapshotsEqual;
+    private normalizeGridTemplate;
+    private assignChildrenToGridRows;
+    private resolveGridChildSlotState;
+    private packGridRowsFromSlots;
+    private resolveRequestedGridUnits;
+    private sortGridChildrenForLayout;
+    private resolveRightwardGridOverflowChange;
+    private resolveSameRowGridUnitResizeChange;
+    private splitGridRowIntoTwelveUnits;
+    private reflowTrailingGridRows;
+    private flattenAssignedRowsToGridTemplate;
+    private buildEqualGridUnits;
+    private normalizeRowWeightsToTwelveUnits;
+    private normalizeGridSlotUnits;
+    private clampGridUnits;
+    private distributeUnitsWithMinimums;
+    private gridWeightsEqual;
+    private resolveGridRowUnitWidth;
     private resolveLabelReservedTopLane;
     private resolveFlexibleLabelLaneFromText;
+    private resolveAlignmentOffset;
     private clampLayoutSize;
+    private distributeWeightedSizes;
     private distributeLayoutSizes;
 }
+export {};

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

@@ -1,4 +1,4 @@
-import { DiagramEngineHandle, DiagramState, ElementData, EngineEventMap, ElementDropEvent, EnginePointerInfo, LinkData, ElementLinkConnectingEvent, LinkRoutingMode, OverlayShapeConfig, OverlayShapeHandle, Point, PortData, RerouteLinksOptions, TextData, PortMouseEvent } from '../api/types';
+import { DiagramEngineHandle, DiagramState, ElementData, EngineEventMap, ElementDropEvent, EnginePointerInfo, LinkData, LinkColorPoolPolicy, ElementLinkConnectingEvent, LinkRoutingMode, LinkRouteRefreshPolicy, OverlayShapeConfig, OverlayShapeHandle, Point, PortData, RerouteLinksOptions, TextData, PortMouseEvent } from '../api/types';
 import { Renderer } from '../renderer/Renderer';
 import RenderScheduler from '../renderer/RenderScheduler';
 import { RouterStrategy } from '../strategies/RouterStrategy';
@@ -12,6 +12,8 @@ export type DiagramEngineConfig = {
     snapper?: SnapStrategy;
     shapeRegistry?: ShapeRegistry;
     textMeasurer?: TextMeasurer;
+    linkRouteRefreshPolicy?: LinkRouteRefreshPolicy;
+    linkColorPoolPolicy?: LinkColorPoolPolicy;
 };
 export default class DiagramEngine {
     private model;
@@ -27,6 +29,8 @@ export default class DiagramEngine {
     private autoLayoutService;
     private linkRoutingService;
     private mutationPipeline;
+    private linkRouteRefreshPolicy;
+    private linkColorPoolPolicy;
     constructor(config: DiagramEngineConfig);
     static create(config: DiagramEngineConfig): DiagramEngine;
     load(state: DiagramState): void;
@@ -44,7 +48,15 @@ export default class DiagramEngine {
     createOverlayShape(config: OverlayShapeConfig): OverlayShapeHandle;
     on<TEvent extends keyof EngineEventMap>(event: TEvent, handler: (payload: EngineEventMap[TEvent]) => void): () => void;
     addElement(element: ElementData): void;
+    private resolveElementMovePosition;
+    private buildChildMutationLayoutSteps;
     moveElementTo(id: string, x: number, y: number): void;
+    resizeElementBounds(id: string, bounds: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    }): void;
     resizeElement(id: string, width: number, height: number): void;
     setElementLayout(id: string, layout: ElementData['layout']): void;
     removeElement(id: string): void;
@@ -77,6 +89,11 @@ export default class DiagramEngine {
         width: number;
         height: number;
     };
+    private shouldLockAutoLayoutChildHorizontalResize;
+    private shouldAnchorAutoLayoutGridChildWidthToLeft;
+    private shouldRestrictAutoLayoutChildRightGrowth;
+    private resolveSnappedGridChildWidth;
+    private resolveGridChildWidthResizeTopologyChange;
     getPortWorldPosition(id: string): Point | null;
     getPortLinkWorldPosition(id: string, options?: {
         oppositePortId?: string;
@@ -137,6 +154,8 @@ export default class DiagramEngine {
     private constrainPortToHostBorder;
     private projectPointToHostBorder;
     private routeLinksWithEmptyPoints;
+    private applyOptionalLinkColor;
+    private refreshLinksForRenderCycle;
     private normalizePortsForHostPolicies;
     private computeRemovalDiff;
     private emitEntityDeletionEvents;

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

@@ -9,6 +9,9 @@ export type LinkRoutingServiceConfig = {
     router: RouterStrategy;
     shapeRegistry: ShapeRegistry;
 };
+export type RedrawLinkRefreshOptions = {
+    includeManual?: boolean;
+};
 export default class LinkRoutingService {
     private model;
     private commandQueue;
@@ -18,6 +21,7 @@ export default class LinkRoutingService {
     setRouter(router: RouterStrategy): void;
     updateLinksForPorts(portIds: string[]): DiagramPatch[];
     routeLinksWithEmptyPoints(): DiagramPatch[];
+    refreshLinksForRedraw(options?: RedrawLinkRefreshOptions): DiagramPatch[];
     getPortLinkWorldPosition(portId: string, options?: {
         oppositePortId?: string;
         attachMode?: PortLinkAttachMode;
@@ -26,7 +30,9 @@ export default class LinkRoutingService {
     private resolveLinkPointsForUpdate;
     private resolveLinkEndpoints;
     private updateManualRoute;
+    private pointsEqual;
     private buildRouteContext;
+    private resolveCommonAncestorCorridorHint;
     private resolveEndpointGeometry;
     private resolveCornerTieBreakSide;
     private resolveElementShape;
@@ -36,8 +42,11 @@ export default class LinkRoutingService {
     private resolveAttachModeForPorts;
     private isAncestorOf;
     private getAncestorChain;
+    private getFirstCommonAncestorId;
+    private resolveImmediateChildUnderAncestor;
     private getAncestorExclusions;
     private resolveRouteBounds;
     private isPointOnRectEdge;
+    private isPointInsideRect;
     private resolveEdgeSide;
 }

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

@@ -6,6 +6,7 @@ export default class TextModel {
     size?: Size;
     style?: Record<string, unknown>;
     ownerId?: string | null;
+    interaction?: TextData['interaction'];
     layout?: TextData['layout'];
     displayContent?: string;
     displayOffset?: Point;

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

@@ -72,6 +72,7 @@ export default class KonvaInteraction {
     private readonly dragThreshold;
     private readonly panSpeed;
     private readonly occupiedVertexTolerance;
+    private readonly nestedHoverElementPadding;
     private emittingElementLinkEnded;
     private panKey;
     constructor(engine: DiagramEngine, config?: InteractionConfig);
@@ -106,6 +107,9 @@ export default class KonvaInteraction {
     private emitShapeHoverControlInteraction;
     private emitLegacyShapeHoverControlActivation;
     private updateShapeHoverControl;
+    private resolveNestedHoverElementCandidates;
+    private isDescendantOrSelf;
+    private isPointWithinElementHoverBounds;
     private resolveShapeHoverControl;
     private resolveTargetHoverCandidate;
     private resolveElementHoverCandidate;
@@ -142,6 +146,8 @@ export default class KonvaInteraction {
     private getElementById;
     private getPortById;
     private getTextById;
+    private isTextMovable;
+    private isTextEditable;
     private getLinkById;
     private resolveTextScreenPosition;
     private applyViewportPatch;

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

@@ -23,5 +23,7 @@ export default class ObstacleRouter implements RouterStrategy {
     private distanceToObstacles;
     private ensureEndpoints;
     private compactPreservingStubs;
+    private buildCommonAncestorCorridorCandidate;
+    private scoreCommonAncestorCorridor;
 }
 export {};

package/dist/cjs/types/strategies/RouterStrategy.d.ts

@@ -8,6 +8,15 @@ export type RouteEndpoint = {
     rect?: Rect;
     onEdgeSide?: 'left' | 'right' | 'top' | 'bottom';
 };
+export type CommonAncestorCorridorHint = {
+    ancestorId: string;
+    bounds: Rect;
+    sourceBranchId: string;
+    targetBranchId: string;
+    sourceBranchRect: Rect;
+    targetBranchRect: Rect;
+    axis: 'horizontal' | 'vertical';
+};
 export type RouteContext = {
     linkId: string;
     sourcePortId: string;
@@ -16,6 +25,7 @@ export type RouteContext = {
     bounds?: Rect;
     sourceEndpoint?: RouteEndpoint;
     targetEndpoint?: RouteEndpoint;
+    commonAncestorCorridor?: CommonAncestorCorridorHint;
 };
 export interface RouterStrategy {
     route(source: Point, target: Point, context?: RouteContext): Point[];