@veltdev/reactflow-crdt/esm/types/store.d.ts

ReactFlow CRDT library for Velt

import { type Edge, type Node, type OnNodesChange, type OnEdgesChange, type OnConnect } from '@xyflow/react';
import { Store } from '@veltdev/crdt';
export interface VeltReactFlowStoreConfig {
    /** Unique document identifier for syncing */
    editorId: string;
    /** Initial nodes for the flow diagram */
    initialNodes: Node[];
    /** Initial edges for the flow diagram */
    initialEdges: Edge[];
    /** Time in milliseconds to debounce updates */
    debounceMs?: number;
    /** Velt client instance */
    veltClient?: any;
}
/**
 * Represents the state of the flow diagram in a serialized format
 * suitable for storage and synchronization
 */
export interface FlowState {
    /** Map of node IDs to their corresponding Node objects */
    nodes: Record<string, Node>;
    /** Map of edge IDs to their corresponding Edge objects */
    edges: Record<string, Edge>;
}
/**
 * Represents the application state and actions for the flow diagram
 */
export type VeltReactFlowAppState = {
    /** Array of nodes in the flow diagram */
    nodes: Node[];
    /** Array of edges connecting the nodes */
    edges: Edge[];
    /** Callback for handling node changes */
    onNodesChange: OnNodesChange;
    /** Callback for handling edge changes */
    onEdgesChange: OnEdgesChange;
    /** Callback for handling new connections */
    onConnect: OnConnect;
    /** Function to set all nodes at once */
    setNodes: (nodes: Node[]) => void;
    /** Function to set all edges at once */
    setEdges: (edges: Edge[]) => void;
};
/**
 * Creates a Zustand store with React Flow state management and real-time synchronization
 * @param {VeltStoreConfig} [config={}] - Configuration options
 * @returns {ReturnType<typeof create<VeltReactFlowAppState>>} Zustand store with flow state and actions
 */
export declare const veltReactFlowStore: (config: VeltReactFlowStoreConfig) => {
    zustandStore: import("zustand").UseBoundStore<import("zustand").StoreApi<VeltReactFlowAppState>>;
    crdtStore: Store<FlowState>;
};
export declare const createVeltReactFlowStore: (config: VeltReactFlowStoreConfig) => Promise<{
    zustandStore: import("zustand").UseBoundStore<import("zustand").StoreApi<VeltReactFlowAppState>>;
    crdtStore: Store<FlowState>;
}>;
//# sourceMappingURL=store.d.ts.map