reagraph/dist/store.d.ts

WebGL Node-based Graph for React

import { default as Graph } from 'graphology';
import { FC, ReactNode } from 'react';
import { BufferGeometry, Mesh } from 'three';
import { StoreApi } from 'zustand';
import { Theme } from './themes';
import { InternalGraphEdge, InternalGraphNode, InternalGraphPosition } from './types';
import { CenterPositionVector, ClusterGroup } from './utils';
export type DragReferences = {
    [key: string]: InternalGraphNode;
};
export interface GraphState {
    nodes: InternalGraphNode[];
    edges: InternalGraphEdge[];
    /**
     * O(1) lookup of a node by its id. Kept in sync with `nodes`.
     * Avoids O(n) `nodes.find` scans inside per-node components, which
     * otherwise make rendering/dragging O(n^2) on large graphs.
     */
    nodeMap: Map<string, InternalGraphNode>;
    /**
     * Set of node ids that have at least one outbound edge. Kept in sync
     * with `edges`. Lets a node determine `canCollapse` in O(1) instead of
     * filtering the entire edge list (O(n*e)) on every render.
     */
    nodesWithOutboundEdges: Set<string>;
    /**
     * O(1) lookup of an edge by its id. Kept in sync with `edges`.
     */
    edgeMap: Map<string, InternalGraphEdge>;
    graph: Graph;
    clusters: Map<string, ClusterGroup>;
    collapsedNodeIds?: string[];
    centerPosition?: CenterPositionVector;
    actives?: string[];
    selections?: string[];
    hoveredNodeId?: string;
    hoveredEdgeIds?: string[];
    edgeContextMenus?: Set<string>;
    setEdgeContextMenus: (edges: Set<string>) => void;
    edgeMeshes: Array<Mesh<BufferGeometry>>;
    setEdgeMeshes: (edgeMeshes: Array<Mesh<BufferGeometry>>) => void;
    draggingIds?: string[];
    drags?: DragReferences;
    panning?: boolean;
    theme: Theme;
    setTheme: (theme: Theme) => void;
    setClusters: (clusters: Map<string, ClusterGroup>) => void;
    setPanning: (panning: boolean) => void;
    setDrags: (drags: DragReferences) => void;
    addDraggingId: (id: string) => void;
    removeDraggingId: (id: string) => void;
    setActives: (actives: string[]) => void;
    setSelections: (selections: string[]) => void;
    setHoveredNodeId: (hoveredNodeId: string | null) => void;
    setHoveredEdgeIds: (hoveredEdgeIds: string[] | null) => void;
    setNodes: (nodes: InternalGraphNode[]) => void;
    setEdges: (edges: InternalGraphEdge[]) => void;
    setNodePosition: (id: string, position: InternalGraphPosition) => void;
    setCollapsedNodeIds: (nodeIds: string[]) => void;
    setClusterPosition: (id: string, position: CenterPositionVector) => void;
}
export declare const createStore: ({ actives, selections, collapsedNodeIds, theme }: Partial<GraphState>) => import('zustand').UseBoundStore<StoreApi<GraphState>>;
export declare const Provider: FC<{
    children: ReactNode;
    store?: StoreApi<GraphState>;
}>;
export declare const useStore: <T>(selector: (state: GraphState) => T) => T;