@gravity-ui/graph/build/graph.d.ts

Modern graph editor component

import { PublicGraphApi, ZoomConfig } from "./api/PublicGraphApi";
import { GraphComponent } from "./components/canvas/GraphComponent";
import { TBlock } from "./components/canvas/blocks/Block";
import { BelowLayer } from "./components/canvas/layers/belowLayer/BelowLayer";
import { GraphLayer } from "./components/canvas/layers/graphLayer/GraphLayer";
import { SelectionLayer } from "./components/canvas/layers/selectionLayer/SelectionLayer";
import { TGraphColors, TGraphConstants } from "./graphConfig";
import { GraphEventParams, GraphEventsDefinitions } from "./graphEvents";
import { HitTest } from "./services/HitTest";
import { Layer } from "./services/Layer";
import { Layers } from "./services/LayersService";
import { CameraService } from "./services/camera/CameraService";
import { RootStore } from "./store";
import { TBlockId } from "./store/block/Block";
import { TConnection } from "./store/connection/ConnectionState";
import { TGraphSettingsConfig } from "./store/settings";
import { RecursivePartial } from "./utils/types/helpers";
import { IPoint, IRect, Point, TPoint, TRect } from "./utils/types/shapes";
export type LayerConfig<T extends Constructor<Layer> = Constructor<Layer>> = [
    T,
    T extends Constructor<Layer<infer Props>> ? Omit<Props, "root" | "camera" | "graph"> & {
        root?: Props["root"];
    } : never
];
export type TGraphConfig<Block extends TBlock = TBlock, Connection extends TConnection = TConnection> = {
    configurationName?: string;
    blocks?: Block[];
    connections?: TConnection[];
    rect?: TRect;
    cameraXY?: TPoint;
    cameraScale?: number;
    settings?: Partial<TGraphSettingsConfig<Block, Connection>>;
    layers?: LayerConfig[];
};
export type TGraphZoomTarget = "center" | TRect | TBlockId[];
export declare enum GraphState {
    INIT = 0,
    ATTACHED = 1,
    READY = 2
}
export declare class Graph {
    private scheduler;
    cameraService: CameraService;
    layers: Layers;
    api: PublicGraphApi;
    eventEmitter: EventTarget;
    rootStore: RootStore;
    hitTest: HitTest;
    protected graphLayer: GraphLayer;
    protected belowLayer: BelowLayer;
    protected selectionLayer: SelectionLayer;
    getGraphCanvas(): HTMLCanvasElement;
    get graphColors(): TGraphColors;
    $graphColors: import("@preact/signals-core").Signal<TGraphColors>;
    get graphConstants(): TGraphConstants;
    $graphConstants: import("@preact/signals-core").Signal<TGraphConstants>;
    state: GraphState;
    protected config: TGraphConfig;
    protected startRequested: boolean;
    constructor(config: TGraphConfig, rootEl?: HTMLDivElement, graphColors?: TGraphColors, graphConstants?: TGraphConstants);
    protected onUpdateSize: (event: IRect) => void;
    getGraphLayer(): GraphLayer;
    setColors(colors: RecursivePartial<TGraphColors>): void;
    setConstants(constants: RecursivePartial<TGraphConstants>): void;
    /**
     * Zoom to center of camera
     * @param zoomConfig - zoom config
     * @param zoomConfig.x if set - zoom to x coordinate, else - zoom to center
     * @param zoomConfig.y if set - zoom to y coordinate, else - zoom to center
     * @param zoomConfig.scale camera scale
     *
     * @returns {undefined}
     * */
    zoom(zoomConfig: {
        x?: number;
        y?: number;
        scale: number;
    }): void;
    zoomTo(target: TGraphZoomTarget, config?: ZoomConfig): Promise<void> | void;
    getElementsOverPoint<T extends Constructor<GraphComponent>>(point: IPoint, filter?: T[]): InstanceType<T>[];
    getElementOverPoint<T extends Constructor<GraphComponent>>(point: IPoint, filter?: T[]): InstanceType<T> | undefined;
    getViewportRect(): TRect;
    getElementsInViewport<T extends Constructor<GraphComponent>>(filter?: T[]): InstanceType<T>[];
    getElementsOverRect<T extends Constructor<GraphComponent>>(rect: TRect, filter?: T[]): InstanceType<T>[];
    getPointInCameraSpace(event: MouseEvent): Point;
    updateEntities({ blocks, connections, }: Partial<{
        blocks?: TBlock[];
        connections?: TConnection[];
    }>): void;
    setEntities({ blocks, connections, }: Partial<{
        blocks?: TBlock[];
        connections?: TConnection[];
    }>): void;
    on<EventName extends keyof GraphEventsDefinitions = keyof GraphEventsDefinitions, Cb extends GraphEventsDefinitions[EventName] = GraphEventsDefinitions[EventName]>(type: EventName, cb: Cb, options?: AddEventListenerOptions | boolean): () => void;
    off<EventName extends keyof GraphEventsDefinitions = keyof GraphEventsDefinitions, Cb extends GraphEventsDefinitions[EventName] = GraphEventsDefinitions[EventName]>(type: EventName, cb: Cb): void;
    emit<EventName extends keyof GraphEventsDefinitions = keyof GraphEventsDefinitions, Cb extends GraphEventsDefinitions[EventName] = GraphEventsDefinitions[EventName], P extends Parameters<Cb>[0] = Parameters<Cb>[0]>(eventName: EventName, detail: GraphEventParams<P>): CustomEvent<GraphEventParams<P>>;
    executеDefaultEventAction<EventName extends keyof GraphEventsDefinitions = keyof GraphEventsDefinitions, Cb extends GraphEventsDefinitions[EventName] = GraphEventsDefinitions[EventName], P extends Parameters<Cb>[0] = Parameters<Cb>[0]>(eventName: EventName, detail: GraphEventParams<P>, defaultCb: () => void): void;
    addLayer<T extends Constructor<Layer> = Constructor<Layer>>(layerCtor: T, props: T extends Constructor<Layer<infer Props>> ? Omit<Props, "root" | "camera" | "graph" | "emitter"> & {
        root?: Props["root"];
    } : never): InstanceType<T>;
    detachLayer(layer: Layer): void;
    setupGraph(config?: TGraphConfig): void;
    updateSettings(settings: Partial<TGraphSettingsConfig>): void;
    updateSize(): void;
    attach(rootEl: HTMLDivElement): void;
    start(rootEl?: HTMLDivElement): void;
    /**
     * Graph is ready when the hitboxes are stable.
     * In order to initialize hitboxes we need to start scheduler and wait untils every component registered in hitTest service
     * Immediatelly after registering startign a rendering process.
     * @param cb - Callback to run after graph is ready
     */
    runAfterGraphReady(cb: () => void): void;
    stop(full?: boolean): void;
    protected setGraphState(state: GraphState): void;
    protected clear(): void;
    detach(): void;
    unmount(): void;
}