@veltdev/reactflow-crdt/index.d.ts

ReactFlow CRDT library for Velt

import * as zustand from 'zustand';
import { Node, Edge, OnNodesChange, OnEdgesChange, OnConnect } from '@xyflow/react';
import { Store } from '@veltdev/crdt';

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
 */
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
 */
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
 */
declare const veltReactFlowStore: (config: VeltReactFlowStoreConfig) => {
    zustandStore: zustand.UseBoundStore<zustand.StoreApi<VeltReactFlowAppState>>;
    crdtStore: Store<FlowState>;
};
declare const createVeltReactFlowStore: (config: VeltReactFlowStoreConfig) => Promise<{
    zustandStore: zustand.UseBoundStore<zustand.StoreApi<VeltReactFlowAppState>>;
    crdtStore: Store<FlowState>;
}>;

interface VeltReactFlowCrdtExtensionConfig extends Omit<VeltReactFlowStoreConfig, 'veltClient'> {
}
interface VeltReactFlowCrdtExtensionResponse extends VeltReactFlowAppState {
    store: Store<FlowState>;
}
declare const useVeltReactFlowCrdtExtension: (config: VeltReactFlowCrdtExtensionConfig) => VeltReactFlowCrdtExtensionResponse;

export { createVeltReactFlowStore, useVeltReactFlowCrdtExtension, veltReactFlowStore };
export type { VeltReactFlowAppState, VeltReactFlowCrdtExtensionConfig, VeltReactFlowCrdtExtensionResponse, VeltReactFlowStoreConfig };