orcasvn-react-diagrams 0.2.0 → 0.2.2

package/dist/examples.d.ts

@@ -0,0 +1,532 @@
+import { CSSProperties } from 'react';
+
+type Point = {
+    x: number;
+    y: number;
+};
+type Size = {
+    width: number;
+    height: number;
+};
+type Rect = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+type ClientRectLike = {
+    left: number;
+    top: number;
+};
+type DiagramContainer = {
+    getBoundingClientRect: () => ClientRectLike;
+};
+type MoveConstraint = 'free' | 'inside' | 'border';
+type BorderSide = 'left' | 'right' | 'top' | 'bottom';
+type HostAnchorPreset = 'vertices' | 'cardinal';
+type PortAnchor = {
+    id: string;
+    position: Point;
+    side?: BorderSide;
+    normal?: Point;
+    meta?: Record<string, unknown>;
+};
+type PortAnchorConstraint = {
+    preset: HostAnchorPreset;
+    fallback?: 'nearest';
+};
+type ResolvePortAnchorsOptions = {
+    preset: HostAnchorPreset;
+};
+type ShapeVertexTarget = {
+    id: string;
+    position: Point;
+};
+type ShapeEdgeTarget = {
+    id: string;
+    start: Point;
+    end: Point;
+    midpoint: Point;
+};
+declare enum EllipseMidPoint {
+    top = "top",
+    right = "right",
+    bottom = "bottom",
+    left = "left"
+}
+type ShapeEllipseMidPointTarget = {
+    id: EllipseMidPoint;
+    ellipseMidPoint: EllipseMidPoint;
+    position: Point;
+};
+type ShapeHoverGeometry = {
+    vertices: ShapeVertexTarget[];
+    edges: ShapeEdgeTarget[];
+};
+type HoverControlIcon = {
+    svgPath: string;
+    size?: Size;
+    style?: Record<string, unknown>;
+};
+type ShapeControlTargetKind = 'vertex' | 'edge' | 'midpoint' | 'ellipse-midpoint';
+type ShapeControlVisibilityTrigger = 'element-hover' | 'target-hover';
+type ShapeControlDefinition = {
+    id: string;
+    targetKind: ShapeControlTargetKind;
+    icon: HoverControlIcon;
+    targetIndices?: number[];
+    ellipseMidPoints?: EllipseMidPoint | EllipseMidPoint[];
+    allowAllTargets?: boolean;
+    visibilityTriggers?: ShapeControlVisibilityTrigger[];
+    lineStyle?: Record<string, unknown>;
+    tolerance?: number;
+};
+/**
+ * @deprecated Use ShapeControlDefinition with targetKind='edge'.
+ */
+type EdgeHoverControl = {
+    kind: 'edge';
+    icon: HoverControlIcon;
+    lineStyle?: Record<string, unknown>;
+    tolerance?: number;
+};
+/**
+ * @deprecated Use ShapeControlDefinition with targetKind='vertex'.
+ */
+type VertexHoverControl = {
+    kind: 'vertex';
+    icon: HoverControlIcon;
+    tolerance?: number;
+};
+type ElementShapeHoverControls = {
+    controls?: ShapeControlDefinition[];
+    /**
+     * @deprecated Legacy singleton edge control. Use controls[] instead.
+     */
+    edge?: EdgeHoverControl;
+    /**
+     * @deprecated Legacy singleton vertex control. Use controls[] instead.
+     */
+    vertex?: VertexHoverControl;
+    /**
+     * @deprecated Legacy resolution preference for singleton edge/vertex controls.
+     */
+    priority?: 'vertex-first';
+};
+type ElementPortMovementPolicy = {
+    moveMode: MoveConstraint | 'anchors';
+    anchorConstraint?: PortAnchorConstraint;
+};
+type LinkRoutingMode = 'auto' | 'manual';
+type AnchorReference = 'top-left' | 'center';
+type RerouteLinksOptions = {
+    includeManual?: boolean;
+};
+type ElementLayoutMode = 'manual' | 'horizontal' | 'vertical';
+type ElementLayoutAlign = 'start' | 'center' | 'end';
+type ElementLayoutChildFitMainAxis = 'none' | 'distribute';
+type ElementLayoutChildFitCrossAxis = 'none' | 'stretch';
+type TextLayoutBoundsMode = 'owner-width' | 'owner-box' | 'fixed';
+type TextLayoutWrapMode = 'none' | 'word' | 'char';
+type TextLayoutOverflowMode = 'clip' | 'ellipsis-end' | 'ellipsis-middle' | 'ellipsis-start';
+type ElementLayout = {
+    mode: ElementLayoutMode;
+    padding?: number | {
+        x: number;
+        y: number;
+    };
+    gap?: number;
+    align?: ElementLayoutAlign;
+    childFitMainAxis?: ElementLayoutChildFitMainAxis;
+    childFitCrossAxis?: ElementLayoutChildFitCrossAxis;
+    childFitMinSize?: Partial<Size>;
+    childFitMaxSize?: Partial<Size>;
+};
+type TextLayout = {
+    boundsMode?: TextLayoutBoundsMode;
+    wrap?: TextLayoutWrapMode;
+    overflow?: TextLayoutOverflowMode;
+    padding?: number;
+    maxLines?: number;
+    fixedSize?: Size;
+};
+type ElementDropEvent = {
+    elementId: string;
+    startWorld: Point;
+    endWorld: Point;
+    delta: Point;
+    startParentId?: string | null;
+    selectionIds: string[];
+    anchor: AnchorReference;
+};
+type OverlayShapeConfig = {
+    shapeId: string;
+    position: Point;
+    size: Size;
+    style?: Record<string, unknown>;
+    anchorCenter?: boolean;
+};
+type OverlayShapeHandle = {
+    update: (config: OverlayShapeConfig) => void;
+    destroy: () => void;
+};
+type ElementData = {
+    id: string;
+    position: Point;
+    size: Size;
+    shapeId: string;
+    style?: Record<string, unknown>;
+    portIds?: string[];
+    textIds?: string[];
+    parentId?: string | null;
+    moveMode?: MoveConstraint;
+    anchorCenter?: boolean;
+    layout?: ElementLayout;
+    portMovement?: ElementPortMovementPolicy;
+};
+type PortData = {
+    id: string;
+    elementId: string;
+    position: Point;
+    shapeId?: string;
+    size?: Size;
+    style?: Record<string, unknown>;
+    textIds?: string[];
+    moveMode?: MoveConstraint;
+    anchorCenter?: boolean;
+    orientToHostBorder?: boolean;
+    currentAnchorId?: string;
+};
+type ShapeDrawContext = {
+    ctx: CanvasRenderingContext2D;
+    model: ElementData | PortData;
+};
+type LinkData = {
+    id: string;
+    sourcePortId: string;
+    targetPortId: string;
+    points: Point[];
+    routing?: LinkRoutingMode;
+    style?: Record<string, unknown>;
+    textIds?: string[];
+};
+type TextData = {
+    id: string;
+    content: string;
+    position: Point;
+    size?: Size;
+    style?: Record<string, unknown>;
+    ownerId?: string | null;
+    layout?: TextLayout;
+    displayContent?: string;
+    displayOffset?: Point;
+    displayClipSize?: Size;
+};
+type DiagramState = {
+    elements: ElementData[];
+    ports: PortData[];
+    links: LinkData[];
+    texts: TextData[];
+};
+type DiagramPatch = {
+    type: string;
+    entity: 'element' | 'port' | 'link' | 'text' | 'selection' | 'viewport' | 'config';
+    id?: string;
+    payload?: Record<string, unknown>;
+};
+type EngineChangeEvent = {
+    patches: DiagramPatch[];
+    state: DiagramState;
+};
+type EngineSelectionEvent = {
+    selectedIds: string[];
+};
+type EngineConfigEvent = {
+    type: 'routing' | 'snapping' | 'rendering';
+};
+type EnginePointerInfo = {
+    client: Point;
+    world: Point;
+    button?: number;
+    buttons?: number;
+    altKey?: boolean;
+    ctrlKey?: boolean;
+    metaKey?: boolean;
+    shiftKey?: boolean;
+    pointerType?: string;
+};
+type PaperClickEvent = {
+    pointer: EnginePointerInfo;
+};
+type PortMouseEvent = {
+    portId: string;
+    elementId: string;
+    pointer: EnginePointerInfo;
+};
+type PortMovedEvent = {
+    portId: string;
+    elementId: string;
+    oldWorld: Point;
+    newWorld: Point;
+    delta: Point;
+};
+type PortSelectedEvent = {
+    portId: string;
+    elementId: string;
+};
+type ElementPointerEvent = {
+    elementId: string;
+    pointer: EnginePointerInfo;
+    isMulti: boolean;
+};
+type ElementMovedEvent = {
+    elementId: string;
+    oldWorld: Point;
+    newWorld: Point;
+    delta: Point;
+};
+type ElementResizedEvent = {
+    elementId: string;
+    oldSize: Size;
+    newSize: Size;
+};
+type ElementDeletedEvent = {
+    elementId: string;
+};
+type PortDeletedEvent = {
+    portId: string;
+    elementId: string;
+};
+type LinkDeletedEvent = {
+    linkId: string;
+    sourcePortId: string;
+    targetPortId: string;
+};
+type TextDeletedEvent = {
+    textId: string;
+    ownerId?: string | null;
+};
+type TextUpdatedEvent = {
+    textId: string;
+    ownerId?: string | null;
+    content: string;
+    displayContent: string;
+    reason: 'content' | 'layout';
+};
+type ElementLinkStartedEvent = {
+    sourcePortId: string;
+    sourceElementId: string;
+    startWorld: Point;
+};
+type ElementLinkConnectingEvent = {
+    sourcePortId: string;
+    sourceElementId: string;
+    targetPortId: string;
+    targetElementId: string;
+    cancel: () => void;
+    cancelled: boolean;
+};
+type ElementLinkEndedEvent = {
+    sourcePortId: string;
+    sourceElementId: string;
+    linkId?: string;
+    targetPortId?: string;
+    targetElementId?: string;
+    cancelled: boolean;
+};
+type ElementSelectedEvent = {
+    elementId: string;
+};
+type TextSelectedEvent = {
+    textId: string;
+};
+type EngineEventMap = {
+    change: EngineChangeEvent;
+    selection: EngineSelectionEvent;
+    config: EngineConfigEvent;
+    /**
+     * Deprecated (legacy kebab-case). Prefer `elementDrop`.
+     */
+    'element-drop': ElementDropEvent;
+    elementDrop: ElementDropEvent;
+    paperClick: PaperClickEvent;
+    portMouseDown: PortMouseEvent;
+    portMouseUp: PortMouseEvent;
+    portMoved: PortMovedEvent;
+    portSelected: PortSelectedEvent;
+    elementClick: ElementPointerEvent;
+    elementDragged: ElementDropEvent;
+    elementMoved: ElementMovedEvent;
+    elementResized: ElementResizedEvent;
+    elementDeleted: ElementDeletedEvent;
+    portDeleted: PortDeletedEvent;
+    linkDeleted: LinkDeletedEvent;
+    textDeleted: TextDeletedEvent;
+    textUpdated: TextUpdatedEvent;
+    elementSelected: ElementSelectedEvent;
+    elementLinkStarted: ElementLinkStartedEvent;
+    elementLinkConnecting: ElementLinkConnectingEvent;
+    elementLinkEnded: ElementLinkEndedEvent;
+    textSelected: TextSelectedEvent;
+};
+type DiagramEngineHandle = {
+    load: (state: DiagramState) => void;
+    getState: () => DiagramState;
+    getViewport: () => {
+        pan: Point;
+        zoom: number;
+    };
+    /**
+     * Convert client/screen coordinates into diagram world coordinates.
+     * Formula: world = (client - containerRect - pan) / zoom.
+     */
+    clientToWorld: (clientPoint: Point, container: DiagramContainer) => Point;
+    createOverlayShape: (config: OverlayShapeConfig) => OverlayShapeHandle;
+    on: <T extends keyof EngineEventMap>(event: T, handler: (payload: EngineEventMap[T]) => void) => () => void;
+    addElement: (element: ElementData) => void;
+    moveElementTo: (id: string, x: number, y: number) => void;
+    resizeElement: (id: string, width: number, height: number) => void;
+    setElementLayout: (id: string, layout: ElementLayout | undefined) => void;
+    removeElement: (id: string) => void;
+    addPortToElement: (elementId: string, port: PortData) => void;
+    movePortTo: (id: string, x: number, y: number) => void;
+    removePort: (id: string) => void;
+    addLink: (link: LinkData) => void;
+    updateLinkPoints: (id: string, points: Point[]) => void;
+    setLinkRoutingMode: (id: string, mode: LinkRoutingMode) => void;
+    rerouteAllLinks: () => void;
+    rerouteLinks: (linkIds: string[], options?: RerouteLinksOptions) => void;
+    removeLink: (id: string) => void;
+    addText: (text: TextData) => void;
+    updateText: (id: string, content: string) => void;
+    moveTextTo: (id: string, x: number, y: number) => void;
+    removeText: (id: string) => void;
+    setSelection: (ids: string[]) => void;
+    setViewport: (pan: Point, zoom: number) => void;
+    setRouting: (router: unknown) => void;
+    setSnapping: (snapper: unknown) => void;
+    registerShape: (shape: {
+        id: string;
+        baseRotation?: number;
+        draw?: (context: ShapeDrawContext) => void;
+        createNode?: (model: ElementData | PortData) => unknown;
+        svgPath?: string;
+        svgSize?: Size;
+        projectToBorder?: (point: Point, rect: Rect) => Point;
+        resolveBorderSide?: (point: Point, rect: Rect) => BorderSide;
+        resolvePortAnchors?: (rect: Rect, options: ResolvePortAnchorsOptions) => PortAnchor[];
+        resolveHoverGeometry?: (rect: Rect) => ShapeHoverGeometry | undefined;
+        resolveEllipseMidPoints?: (rect: Rect) => ShapeEllipseMidPointTarget[] | undefined;
+    }) => void;
+    render: () => void;
+};
+
+type RouteObstacle = {
+    id: string;
+    rect: Rect;
+};
+type RouteEndpoint = {
+    elementId?: string;
+    rect?: Rect;
+    onEdgeSide?: 'left' | 'right' | 'top' | 'bottom';
+};
+type RouteContext = {
+    linkId: string;
+    sourcePortId: string;
+    targetPortId: string;
+    obstacles: RouteObstacle[];
+    bounds?: Rect;
+    sourceEndpoint?: RouteEndpoint;
+    targetEndpoint?: RouteEndpoint;
+};
+interface RouterStrategy {
+    route(source: Point, target: Point, context?: RouteContext): Point[];
+}
+
+type BuiltInShapeKind = 'rect' | 'circle' | 'ellipse' | 'diamond' | 'triangle' | 'pentagon' | 'hexagon';
+
+type SimpleShape = {
+    id: string;
+    kind: BuiltInShapeKind;
+    style?: Record<string, unknown>;
+};
+type DiagramEditorHandle = DiagramEngineHandle & {
+    resize: (width: number, height: number) => void;
+    setElementShapeHoverControls: (controls?: ElementShapeHoverControls) => void;
+    destroy: () => void;
+};
+
+type DemoActionHelpers = {
+    nextOffset: () => number;
+};
+type DemoAction = {
+    id: string;
+    label: string;
+    run: (editor: DiagramEditorHandle, state: DiagramState, demo: DemoConfig, helpers: DemoActionHelpers) => void;
+};
+type DemoConfig = {
+    id: string;
+    title: string;
+    description: string;
+    createState: () => DiagramState;
+    elementShapes?: SimpleShape[];
+    portShapes?: SimpleShape[];
+    defaultElementShapeId?: string;
+    defaultPortShapeId?: string;
+    router?: RouterStrategy;
+    snapDefault?: boolean;
+    stageStyle?: CSSProperties;
+    actions: DemoAction[];
+};
+type DemoDefinition = {
+    id: string;
+    title: string;
+    description: string;
+    Component: React.ComponentType;
+};
+type ToolboxItem = {
+    id: string;
+    label: string;
+    shapeId: string;
+    size: {
+        width: number;
+        height: number;
+    };
+};
+type DiagramCounts = {
+    elements: number;
+    ports: number;
+    links: number;
+    texts: number;
+};
+type ViewportSnapshot = {
+    pan: {
+        x: number;
+        y: number;
+    };
+    zoom: number;
+};
+type DisplayBoxMetrics = {
+    selection: string[];
+    counts: DiagramCounts;
+    viewport: ViewportSnapshot;
+    snapEnabled: boolean;
+};
+
+declare const baseElementShapes: SimpleShape[];
+declare const basePortShapes: SimpleShape[];
+declare const customGalleryShapes: SimpleShape[];
+declare const externalToolboxItems: ToolboxItem[];
+declare const defaultGhostSize: {
+    width: number;
+    height: number;
+};
+declare const defaultSvgPath = "M10 10 H110 V90 H10 Z";
+declare const defaultSvgPathSize: {
+    width: number;
+    height: number;
+};
+
+declare const demoTabs: DemoDefinition[];
+
+export { type DemoAction, type DemoActionHelpers, type DemoConfig, type DemoDefinition, type DiagramCounts, type DisplayBoxMetrics, type ToolboxItem, type ViewportSnapshot, baseElementShapes, basePortShapes, customGalleryShapes, defaultGhostSize, defaultSvgPath, defaultSvgPathSize, demoTabs, externalToolboxItems };