react-graph-ts/dist/index.d.ts

Graph stand on d3

import { default as default_2 } from 'react';
import { JSX as JSX_2 } from 'react/jsx-runtime';
import { SimulationNodeDatum } from 'd3';

declare type ClickType = 'right' | 'left' | 'ctrl-left' | 'ctrl-right';

declare type Colors = {
    background: string;
    node: string;
    nodeHover: string;
    nodeActive: string;
    link: string;
    linkHover: string;
    linkActive: string;
    nodeLabel: string;
    particles: string;
    arrow?: string;
};

declare type DetectNodeColorFn<TNode extends {} = {}> = (target: NodeType<TNode>, isHover: boolean) => string;

declare type DrawNodeFn<TNode extends {} = {}> = (context: CanvasRenderingContext2D, node: NodeType<TNode>, drawNode: () => void) => void;

declare type GetLabelFn<TNode extends {} = {}> = (target: NodeType<TNode>) => string;

export declare const Graph: <TLink extends {}, TNode extends {}>(props: GraphProps<TNode, TLink> & {
    ref?: default_2.ForwardedRef<GraphRef>;
}) => ReturnType<typeof GraphComponent>;

declare function GraphComponent<TLink extends {}, TNode extends {}>(props: GraphProps<TLink, TNode>, ref: default_2.ForwardedRef<GraphRef>): JSX_2.Element;

export declare type GraphProps<TLink extends {}, TNode extends {}> = {
    id?: string;
    isFixed?: boolean;
    settings?: Partial<Settings>;
    onClick?: OnClickFn<TNode, TLink>;
    links: LinkType<TLink>[];
    dashedLinks?: boolean;
    colors?: Partial<Colors>;
    linkColor?: LinkColorFn<TLink>;
    linkLabel?: LinkLabelFn<TLink>;
    enablePanInteraction?: boolean;
    nodes: NodeType<TNode>[];
    getLabel?: GetLabelFn<TNode>;
    nodeColor?: DetectNodeColorFn<TNode>;
    onSelectedNode?: OnSelectedNodesFn<TNode>;
    drawNode?: DrawNodeFn<TNode>;
};

export declare type GraphRef = {
    getPointerCoords: (x: number, y: number) => [number, number];
    onRenderFramePre: (cb: () => void) => void;
    zoom: (scale: number, duration?: number) => void;
    centerAt: (x: number, y: number, duration?: number) => void;
};

declare const INITIAL_SETTINGS: {
    linkDistance: number;
    linkStrength: number;
    nodeRadius: number;
    hoveredBorder: number;
    width: number;
    height: number;
    alphaDecay: number;
    isFixed: boolean;
    isFixedNodeAfterDrag: boolean;
    particlesSpeed: number;
    particlesSize: number;
    withParticles: boolean;
    isDashed: boolean;
    withNodeLabels: boolean;
    withLinksArrows: boolean;
};

declare type LinkColorFn<TLink extends {} = {}> = (target: LinkType<TLink>, isHover: boolean) => string;

declare type LinkLabelFn<TLink extends {} = {}> = (link: LinkType<TLink>) => string;

declare type LinkSettings = {
    color?: string;
    withArrow?: boolean;
    isDashed?: boolean;
    withParticles?: boolean;
    width?: number;
};

export declare type LinkType<T extends {} = {}> = {
    id: string;
    source: string | NodeType;
    target: string | NodeType;
    control?: {
        x: number;
        y: number;
    };
    drawIndex?: number;
    curveIndex?: number;
    curveGroupSize?: number;
    settings?: LinkSettings;
} & T;

export declare type NodeType<T extends {} = {}> = {
    id: string;
} & SimulationNodeDatum & T;

declare type OnClickFn<TNode extends {} = {}, TLink extends {} = {}> = (target: NodeType<TNode> | LinkType<TLink> | null, targetType: TargetType, clickType: ClickType, event: MouseEvent) => void;

declare type OnSelectedNodesFn<TNode extends {} = {}> = (nodes: NodeType<TNode>[]) => void;

declare type Settings = typeof INITIAL_SETTINGS;

declare type TargetType = 'background' | 'node' | 'link';

export { }