@glyphlab/diagram-react 0.0.0-stage → 0.1.0

package/index.d.ts

@@ -0,0 +1,192 @@
+import { DiagramController, Size, Bounds, Selection, NodeHighlight, EdgeHighlight, Highlights, LinkStatus, EdgeState, GroupState, MetaState, NodeState, DiagramFile } from '@glyphlab/diagram-core';
+export { COLOR_PRESETS, colorCss, colorLabel } from '@glyphlab/diagram-core';
+import * as react from 'react';
+import { CSSProperties, ReactNode } from 'react';
+import { StoreApi } from 'zustand/vanilla';
+
+declare function addNodeAt(controller: DiagramController, x: number, y: number, laneId?: string, onError?: (message: string) => void): string | undefined;
+declare function addGroupAt(controller: DiagramController, x: number, y: number): string | undefined;
+declare function deleteNode(controller: DiagramController, id: string): void;
+declare function deleteGroup(controller: DiagramController, id: string): void;
+declare function deleteEdge(controller: DiagramController, id: string): void;
+
+declare function ArrowHeads({ id, colors }: {
+    id: string;
+    colors: (string | undefined)[];
+}): react.JSX.Element;
+
+declare const MIN_SCALE = 0.2;
+declare const MAX_SCALE = 2;
+interface ViewportState {
+    x: number;
+    y: number;
+    scale: number;
+    panning: boolean;
+    setPanning: (panning: boolean) => void;
+    setPosition: (x: number, y: number) => void;
+    panBy: (dx: number, dy: number) => void;
+    zoomAround: (factor: number, cx: number, cy: number) => void;
+    fit: (size: Size, bounds: Bounds) => void;
+    reset: (size: Size, bounds: Bounds) => void;
+}
+interface SelectionState {
+    selection: Selection | null;
+    select: (selection: Selection) => void;
+    clearSelection: () => void;
+}
+interface EditState {
+    node: {
+        id: string;
+        field: 'title' | 'body';
+    } | null;
+    edge: string | null;
+    group: string | null;
+    editNode: (id: string, field: 'title' | 'body') => void;
+    editEdge: (id: string) => void;
+    editGroup: (id: string) => void;
+    end: () => void;
+}
+interface ConnectState {
+    hovered: string | null;
+    source: string | null;
+    side: 'n' | 'e' | 's' | 'w';
+    cursor: {
+        x: number;
+        y: number;
+    } | null;
+    target: string | null;
+    hover: (id: string) => void;
+    leave: () => void;
+    start: (source: string, side: ConnectState['side'], cursor: {
+        x: number;
+        y: number;
+    }) => void;
+    move: (cursor: {
+        x: number;
+        y: number;
+    }, target: string | null) => void;
+    end: () => void;
+}
+interface HighlightState {
+    nodes: Record<string, NodeHighlight>;
+    edges: Record<string, EdgeHighlight>;
+    dimmed: boolean;
+    set: (highlights: Highlights) => void;
+    clear: () => void;
+}
+interface CanvasUi {
+    viewport: StoreApi<ViewportState>;
+    selection: StoreApi<SelectionState>;
+    edit: StoreApi<EditState>;
+    connect: StoreApi<ConnectState>;
+    highlight: StoreApi<HighlightState>;
+}
+declare const createCanvasUi: () => CanvasUi;
+
+interface DiagramInstance {
+    readonly uid: string;
+    readonly controller: DiagramController;
+    readonly ui: CanvasUi;
+    readonly surface: {
+        el: HTMLElement | null;
+    };
+    dispose(): void;
+}
+declare function createDiagramInstance(controller: DiagramController): DiagramInstance;
+
+declare function connectNodes(instance: DiagramInstance, from: string, to: string): void;
+
+declare function layerStyle(color: string | undefined): CSSProperties;
+declare function edgeStyle(color: string | undefined): CSSProperties | undefined;
+
+declare function ColorControl(): react.JSX.Element | null;
+
+interface NodeLinkState {
+    status: LinkStatus;
+    detail?: string;
+    count?: number;
+}
+declare function LinkBadge({ title, state, onOpen }: {
+    title: string;
+    state: NodeLinkState | undefined;
+    onOpen?: () => void;
+}): react.JSX.Element | null;
+
+interface DiagramSlots {
+    renderMarkdown?: (source: string) => ReactNode;
+    openNodeContent?: (id: string, section?: 'decisions' | 'code') => void;
+    useLinkState?: (id: string) => NodeLinkState | undefined;
+}
+declare const useDiagram: () => DiagramInstance;
+declare const useSlots: () => DiagramSlots;
+declare const useNodes: <T>(selector: (state: NodeState) => T) => T;
+declare const useEdges: <T>(selector: (state: EdgeState) => T) => T;
+declare const useGroups: <T>(selector: (state: GroupState) => T) => T;
+declare const useMeta: <T>(selector: (state: MetaState) => T) => T;
+declare const useViewport: <T>(selector: (state: ViewportState) => T) => T;
+declare const useSelection: <T>(selector: (state: SelectionState) => T) => T;
+declare const useEditing: <T>(selector: (state: EditState) => T) => T;
+declare const useConnecting: <T>(selector: (state: ConnectState) => T) => T;
+declare const useHighlights: <T>(selector: (state: HighlightState) => T) => T;
+declare function bindStore<S>(api: StoreApi<S>): {
+    (): S;
+    <T>(selector: (state: S) => T): T;
+} & StoreApi<S>;
+
+declare function DiagramProvider({ instance, slots, children }: {
+    instance: DiagramInstance;
+    slots?: DiagramSlots;
+    children: ReactNode;
+}): react.JSX.Element;
+
+declare function DiagramCanvas({ title, designKey, empty: emptyMessage }: {
+    title: string;
+    designKey?: string | number;
+    empty?: ReactNode;
+}): react.JSX.Element;
+
+declare const DiagramEdge: react.MemoExoticComponent<({ id }: {
+    id: string;
+}) => react.JSX.Element | null>;
+
+declare const DiagramGroup: react.MemoExoticComponent<({ id }: {
+    id: string;
+}) => react.JSX.Element | null>;
+
+declare const DiagramNode: react.MemoExoticComponent<({ id }: {
+    id: string;
+}) => react.JSX.Element | null>;
+
+declare function DiagramToolbar({ title }: {
+    title: string;
+}): react.JSX.Element;
+
+declare function EdgeStyleControl(): react.JSX.Element | null;
+
+interface DiagramViewerConfig {
+    diagram: DiagramFile;
+    highlights?: Highlights;
+    focus?: boolean;
+    renderMarkdown?: (source: string) => ReactNode;
+    openNodeContent?: (id: string, section?: 'decisions' | 'code') => void;
+    linkStates?: Record<string, NodeLinkState>;
+    movableNodes?: boolean;
+}
+declare function DiagramViewer({ config }: {
+    config: DiagramViewerConfig;
+}): react.JSX.Element;
+
+declare const EdgeLabel: react.MemoExoticComponent<({ id }: {
+    id: string;
+}) => react.JSX.Element | null>;
+
+interface ZoomControlsConfig {
+    onZoom: (factor: number) => void;
+    onFit: () => void;
+}
+declare function ZoomControls({ config }: {
+    config: ZoomControlsConfig;
+}): react.JSX.Element;
+
+export { ArrowHeads, ColorControl, DiagramCanvas, DiagramEdge, DiagramGroup, DiagramNode, DiagramProvider, DiagramToolbar, DiagramViewer, EdgeLabel, EdgeStyleControl, LinkBadge, MAX_SCALE, MIN_SCALE, ZoomControls, addGroupAt, addNodeAt, bindStore, connectNodes, createCanvasUi, createDiagramInstance, deleteEdge, deleteGroup, deleteNode, edgeStyle, layerStyle, useConnecting, useDiagram, useEdges, useEditing, useGroups, useHighlights, useMeta, useNodes, useSelection, useSlots, useViewport };
+export type { CanvasUi, ConnectState, DiagramInstance, DiagramSlots, DiagramViewerConfig, EditState, HighlightState, NodeLinkState, SelectionState, ViewportState };