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

Modern graph editor component

import { GraphComponent } from "./components/canvas/GraphComponent";
export type TGraphColors = {
    canvas?: Partial<TCanvasColors>;
    block?: Partial<TBlockColors>;
    anchor?: Partial<TAnchorColors>;
    connection?: Partial<TConnectionColors>;
    connectionLabel?: Partial<TConnectionLabelColors>;
    selection?: Partial<TSelectionColors>;
};
export type TSelectionColors = {
    background: string;
    border: string;
};
export type TConnectionLabelColors = {
    background: string;
    hoverBackground: string;
    selectedBackground: string;
    text: string;
    hoverText: string;
    selectedText: string;
};
export type TConnectionColors = {
    background: string;
    selectedBackground: string;
};
export type TAnchorColors = {
    background: string;
    selectedBorder: string;
};
export type TBlockColors = {
    background: string;
    border: string;
    text: string;
    selectedBorder: string;
};
export type TCanvasColors = {
    belowLayerBackground: string;
    layerBackground: string;
    dots: string;
    border: string;
};
export type TMouseWheelBehavior = "zoom" | "scroll";
export declare const initGraphColors: TGraphColors;
/**
 * Constructor type for any class that extends GraphComponent
 */
export type GraphComponentConstructor = new (...args: unknown[]) => GraphComponent;
export type TGraphConstants = {
    selectionLayer: {
        SELECTABLE_ENTITY_TYPES: GraphComponentConstructor[];
    };
    system: {
        GRID_SIZE: number;
        /**
         * @deprecated this config is not used anymore, Layers checks devicePixelRatio internally
         */
        PIXEL_RATIO: number;
        USABLE_RECT_GAP: number;
        /** For preload blocks on the html layer (camera dimensions * (1 + this value)) */
        CAMERA_VIEWPORT_TRESHOLD: number;
    };
    camera: {
        SPEED: number;
        STEP: number;
        /**
         * Auto-panning threshold: distance from edge in pixels to activate auto-panning
         * @default 50
         */
        AUTO_PAN_THRESHOLD: number;
        /**
         * Auto-panning speed: base pixels per frame for camera movement
         * @default 10
         */
        AUTO_PAN_SPEED: number;
        /**
         * Controls the behavior of mouse wheel events.
         *
         * - **"zoom"**: Mouse wheel will zoom in/out the graph
         * - **"scroll"**: Mouse wheel will scroll the graph vertically by default, or horizontally when Shift is pressed
         *
         * @remarks
         * **Mouse wheel scrolling behavior:**
         * - Default scroll direction is vertical (up/down)
         * - Holding Shift key switches to horizontal scrolling (left/right)
         * - This is an environment-dependent behavior as per W3C UI Events specification
         * - Different browsers and operating systems may handle Shift+wheel differently
         *
         * **Trackpad behavior:**
         * - This setting only affects mouse wheel behavior
         * - Trackpad gestures remain unchanged and use their native behavior:
         *   - Pinch to zoom
         *   - Two-finger swipe to scroll in any direction
         *
         * @default "zoom"
         * @see https://w3c.github.io/uievents/#events-wheelevents - W3C UI Events Wheel Events specification
         */
        MOUSE_WHEEL_BEHAVIOR: TMouseWheelBehavior;
    };
    block: {
        WIDTH_MIN: number;
        HEAD_HEIGHT: number;
        BODY_PADDING: number;
        SCALES: [number, number, number];
        DEFAULT_Z_INDEX: number;
        INCRIMENT_Z_INDEX: number;
        GHOST_BLOCK_OPACITY: number;
        WIDTH: number;
        HEIGHT: number;
        SNAPPING_GRID_SIZE: number;
    };
    connection: {
        MUTED_CANVAS_CONNECTION_WIDTH: number;
        SCALES: [number, number, number];
        DEFAULT_Z_INDEX: number;
        THRESHOLD_LINE_HIT: number;
        MIN_ZOOM_FOR_CONNECTION_ARROW_AND_LABEL: number;
        /** Size of Path2D chunks for batch rendering */
        PATH2D_CHUNK_SIZE: number;
        LABEL: {
            INNER_PADDINGS: [number, number, number, number];
        };
    };
    text: {
        BASE_FONT_SIZE: number;
        PADDING: number;
    };
};
export declare const initGraphConstants: TGraphConstants;