@unblocks/xyflow-react/dist/index.d.ts

Utilities for working with @xyflow/react

import React from 'react';
import { Node, Edge, ReactFlowProps } from '@xyflow/react';
import { PartialExcept, PartialOnly } from '@unblocks/types';

interface DagreOptions {
    direction: 'TB' | 'LR';
    nodesep?: number;
    ranksep?: number;
}

/**
 * Graph class to manage nodes and edges
 */
declare class Graph {
    nodes: Node[];
    edges: Edge[];
    /** Edges that do not affect the layout */
    extraEdges: Edge[];
    private nodeLookup;
    private edgeLookup;
    private extraEdgeLookup;
    constructor();
    addNode(node: Node): this;
    addNodes(nodes: Node[]): this;
    findNode(id: string): Node;
    /**
     * Add an edge to the graph (affects the layout)
     * @param edge
     */
    addEdge(edge: Edge): this | undefined;
    addEdges(edges: Edge[]): this;
    /**
     * Add an extra edge that does not affect the layout
     * @param edge edge
     */
    addExtraEdge(edge: Edge): this;
    addExtraEdges(edges: Edge[]): this;
    findEdge(id: string): Edge;
    getAllEdges(): Edge[];
}

type DagreFlowProps = {
    graph: Graph;
    nodeTypes?: ReactFlowProps['nodeTypes'];
    dagreOptions?: DagreOptions;
};
declare function DagreFlow({ graph, dagreOptions, ...restProps }: DagreFlowProps): React.JSX.Element;

interface MultiHandleNodeData {
    [key: string]: unknown;
    topTargetHandle?: boolean;
    leftTargetHandle?: boolean;
    rightTargetHandle?: boolean;
    bottomTargetHandle?: boolean;
    topSourceHandle?: boolean;
    leftSourceHandle?: boolean;
    rightSourceHandle?: boolean;
    bottomSourceHandle?: boolean;
}

type MultiHandleProps = MultiHandleNodeData;
declare function MultiHandle({ topSourceHandle, topTargetHandle, leftSourceHandle, leftTargetHandle, rightSourceHandle, rightTargetHandle, bottomSourceHandle, bottomTargetHandle, }: MultiHandleProps): React.JSX.Element;
declare const _default$1: React.MemoExoticComponent<typeof MultiHandle>;

type WithMultiHandleProps = MultiHandleProps & {
    children: React.ReactNode;
};
declare function WithMultiHandle({ children, ...restProps }: WithMultiHandleProps): React.JSX.Element;
declare const _default: React.MemoExoticComponent<typeof WithMultiHandle>;

declare function createNode<NodeData extends Record<string, unknown> = Record<string, unknown>, NodeType extends string = string>({ id, data, draggable, position, sourcePosition, targetPosition, ...rest }: PartialExcept<Node<NodeData, NodeType>, 'id' | 'data'>): Node<NodeData, NodeType>;

declare function createEdge<EdgeData extends Record<string, unknown> = Record<string, unknown>, EdgeType extends string | undefined = string | undefined>({ id, source, target, ...rest }: PartialOnly<Edge<EdgeData, EdgeType>, 'id'>): Edge<EdgeData, EdgeType>;

export { DagreFlow, type DagreFlowProps, type DagreOptions, Graph, _default$1 as MultiHandle, type MultiHandleNodeData, type MultiHandleProps, _default as WithMultiHandle, type WithMultiHandleProps, createEdge, createNode };