@gravity-ui/graph
Version:
Modern graph editor component
201 lines (200 loc) • 11.5 kB
TypeScript
import type { Block, TBlock } from "../components/canvas/blocks/Block";
import { BlockConnection } from "../components/canvas/connections/BlockConnection";
import { Component } from "../lib";
import type { TGetCameraBlockScaleLevel } from "../services/camera/defaultGetCameraBlockScaleLevel";
import type { EWheelIntent, TResolveWheelIntent, TResolveWheelIntentOptions } from "../utils/functions/wheelIntent";
import { TConnection } from "./connection/ConnectionState";
import { RootStore } from "./index";
/** @deprecated Use ECanDrag and setting canDrag instead */
export declare enum ECanChangeBlockGeometry {
ALL = "all",
ONLY_SELECTED = "onlySelected",
NONE = "none"
}
export declare enum ECanDrag {
/** Any component can be dragged. If component is in selection, all selected draggable components move together */
ALL = "all",
/** Only selected components can be dragged */
ONLY_SELECTED = "onlySelected",
/** Drag is disabled for all components (except manual drag via startDrag) */
NONE = "none"
}
export type TGraphSettingsConfig<Block extends TBlock = TBlock, Connection extends TConnection = TConnection> = {
canDragCamera: boolean;
canZoomCamera: boolean;
/** @deprecated Use NewBlockLayer parameters instead */
canDuplicateBlocks?: boolean;
/** @deprecated Use canDrag instead */
canChangeBlockGeometry?: ECanChangeBlockGeometry;
/** Controls which components can be dragged */
canDrag?: ECanDrag;
/**
* Minimum distance in pixels the mouse must move before a drag operation starts.
* Helps prevent accidental drags during clicks. Default: 3
*/
dragThreshold?: number;
/**
* Controls if connections can be created via anchors
* If this connection is enabled, then anchors are not draggable and connection creation is handled by ConnectionLayer.
* */
canCreateNewConnections: boolean;
scaleFontSize: number;
showConnectionArrows: boolean;
useBezierConnections: boolean;
bezierConnectionDirection: "vertical" | "horizontal";
useBlocksAnchors: boolean;
connectivityComponentOnClickRaise: boolean;
showConnectionLabels: boolean;
blockComponents: Record<string, typeof Block<Block>>;
connection?: typeof BlockConnection<Connection>;
background?: typeof Component;
/**
* When enabled, mouseenter/mouseleave events are re-evaluated after each camera change.
* Useful for trackpads where panning does not trigger native mousemove events,
* so hovering over elements requires this emulation to work correctly.
* Default: false
*/
emulateMouseEventsOnCameraChange?: boolean;
/**
* Classifies wheel input as pan or zoom intent so Camera can route without knowing device type.
* Receives `mouseWheelBehavior` and `wheelInputDevice` from camera constants so wheel policy
* stays in the input layer, not Camera.
*
* Transitional: today Camera calls {@link GraphEditorSettings.wheelIntentFromEvent} from a raw
* `wheel` listener. A future input layer will normalize DOM events and emit semantic graph events
* (`camera:pan`, `camera:zoom`, …); this callback is the classification hook until then.
*
* @default {@link createWheelIntentResolver} — gesture-shape heuristics (pan vs zoom intent).
*/
resolveWheelIntent: TResolveWheelIntent;
/**
* Maps camera scale to block zoom tier (minimalistic / schematic / detailed).
* Always set at runtime; `setupSettings` falls back to the exported `defaultGetCameraBlockScaleLevel` when omitted.
*/
getCameraBlockScaleLevel: TGetCameraBlockScaleLevel;
};
export declare const DefaultSettings: TGraphSettingsConfig;
export declare class GraphEditorSettings {
rootStore: RootStore;
$settings: import("@preact/signals-core").Signal<TGraphSettingsConfig<TBlock, {
id?: import("./connection/ConnectionState").TConnectionId;
sourceBlockId?: import("..").TBlockId;
targetBlockId?: import("..").TBlockId;
sourceAnchorId?: string;
targetAnchorId?: string;
sourcePortId?: import("..").TPortId;
targetPortId?: import("..").TPortId;
label?: string;
styles?: Partial<import("../graphConfig").TConnectionColors> & {
dashes?: number[];
};
dashed?: boolean;
selected?: boolean;
}>>;
$blockComponents: import("@preact/signals-core").ReadonlySignal<Record<string, {
new (props: import("../components/canvas/blocks/Block").TBlockProps, parent: Component): Block<TBlock, import("../components/canvas/blocks/Block").TBlockProps>;
IS: "Block";
create<Props extends import("../lib/CoreComponent").CoreComponentProps, Context extends import("../lib/CoreComponent").CoreComponentContext>(this: Constructor<import("../lib").CoreComponent<Props, Context>>, props?: Props, options?: {
readonly key?: string;
readonly ref?: ((inst: unknown) => void) | string;
}): import("../lib/CoreComponent").ComponentDescriptor<Props, Context>;
mount<Props extends import("../lib/CoreComponent").CoreComponentProps, Context extends import("../lib/CoreComponent").CoreComponentContext>(Component: Constructor<import("../lib").CoreComponent<Props, Context>>, props?: Props): import("../lib").CoreComponent<Props, Context>;
unmount(instance: any): void;
}>>;
$background: import("@preact/signals-core").ReadonlySignal<typeof Component>;
$connection: import("@preact/signals-core").ReadonlySignal<{
new (props: import("../components/canvas/connections/BlockConnection").TConnectionProps, parent: import("../components/canvas/connections/BlockConnections").BlockConnections): BlockConnection<{
id?: import("./connection/ConnectionState").TConnectionId;
sourceBlockId?: import("..").TBlockId;
targetBlockId?: import("..").TBlockId;
sourceAnchorId?: string;
targetAnchorId?: string;
sourcePortId?: import("..").TPortId;
targetPortId?: import("..").TPortId;
label?: string;
styles?: Partial<import("../graphConfig").TConnectionColors> & {
dashes?: number[];
};
dashed?: boolean;
selected?: boolean;
}>;
create<Props extends import("../lib/CoreComponent").CoreComponentProps, Context extends import("../lib/CoreComponent").CoreComponentContext>(this: Constructor<import("../lib").CoreComponent<Props, Context>>, props?: Props, options?: {
readonly key?: string;
readonly ref?: ((inst: unknown) => void) | string;
}): import("../lib/CoreComponent").ComponentDescriptor<Props, Context>;
mount<Props extends import("../lib/CoreComponent").CoreComponentProps, Context extends import("../lib/CoreComponent").CoreComponentContext>(Component: Constructor<import("../lib").CoreComponent<Props, Context>>, props?: Props): import("../lib").CoreComponent<Props, Context>;
unmount(instance: any): void;
}>;
constructor(rootStore: RootStore);
setupSettings(config: Partial<TGraphSettingsConfig>): void;
setConfigFlag<K extends keyof TGraphSettingsConfig>(flagPath: K, value: TGraphSettingsConfig[K]): void;
getConfigFlag(flagPath: keyof TGraphSettingsConfig): number | boolean | typeof Component | TGetCameraBlockScaleLevel | "vertical" | "horizontal" | TResolveWheelIntent | {
new (props: import("../components/canvas/connections/BlockConnection").TConnectionProps, parent: import("../components/canvas/connections/BlockConnections").BlockConnections): BlockConnection<{
id?: import("./connection/ConnectionState").TConnectionId;
sourceBlockId?: import("..").TBlockId;
targetBlockId?: import("..").TBlockId;
sourceAnchorId?: string;
targetAnchorId?: string;
sourcePortId?: import("..").TPortId;
targetPortId?: import("..").TPortId;
label?: string;
styles?: Partial<import("../graphConfig").TConnectionColors> & {
dashes?: number[];
};
dashed?: boolean;
selected?: boolean;
}>;
create<Props extends import("../lib/CoreComponent").CoreComponentProps, Context extends import("../lib/CoreComponent").CoreComponentContext>(this: Constructor<import("../lib").CoreComponent<Props, Context>>, props?: Props, options?: {
readonly key?: string;
readonly ref?: ((inst: unknown) => void) | string;
}): import("../lib/CoreComponent").ComponentDescriptor<Props, Context>;
mount<Props extends import("../lib/CoreComponent").CoreComponentProps, Context extends import("../lib/CoreComponent").CoreComponentContext>(Component: Constructor<import("../lib").CoreComponent<Props, Context>>, props?: Props): import("../lib").CoreComponent<Props, Context>;
unmount(instance: any): void;
} | ECanChangeBlockGeometry | ECanDrag | Record<string, {
new (props: import("../components/canvas/blocks/Block").TBlockProps, parent: Component): Block<TBlock, import("../components/canvas/blocks/Block").TBlockProps>;
IS: "Block";
create<Props extends import("../lib/CoreComponent").CoreComponentProps, Context extends import("../lib/CoreComponent").CoreComponentContext>(this: Constructor<import("../lib").CoreComponent<Props, Context>>, props?: Props, options?: {
readonly key?: string;
readonly ref?: ((inst: unknown) => void) | string;
}): import("../lib/CoreComponent").ComponentDescriptor<Props, Context>;
mount<Props extends import("../lib/CoreComponent").CoreComponentProps, Context extends import("../lib/CoreComponent").CoreComponentContext>(Component: Constructor<import("../lib").CoreComponent<Props, Context>>, props?: Props): import("../lib").CoreComponent<Props, Context>;
unmount(instance: any): void;
}>;
/**
* Resolves wheel intent using {@link TGraphSettingsConfig.resolveWheelIntent} (typed; prefer over getConfigFlag).
*/
wheelIntentFromEvent(event: WheelEvent, options: TResolveWheelIntentOptions): EWheelIntent;
$connectionsSettings: import("@preact/signals-core").ReadonlySignal<{
useBezierConnections: boolean;
showConnectionLabels: boolean;
canCreateNewConnections: boolean;
showConnectionArrows: boolean;
bezierConnectionDirection: "vertical" | "horizontal";
}>;
/**
* Computed canDrag setting with backward compatibility.
* Priority: canChangeBlockGeometry (deprecated, for existing users) > canDrag > default ALL
*/
$canDrag: import("@preact/signals-core").ReadonlySignal<ECanDrag>;
/**
* Drag threshold in pixels. Default: 3
*/
$dragThreshold: import("@preact/signals-core").ReadonlySignal<number>;
toJSON(): TGraphSettingsConfig<TBlock, {
id?: import("./connection/ConnectionState").TConnectionId;
sourceBlockId?: import("..").TBlockId;
targetBlockId?: import("..").TBlockId;
sourceAnchorId?: string;
targetAnchorId?: string;
sourcePortId?: import("..").TPortId;
targetPortId?: import("..").TPortId;
label?: string;
styles?: Partial<import("../graphConfig").TConnectionColors> & {
dashes?: number[];
};
dashed?: boolean;
selected?: boolean;
}>;
get asConfig(): TGraphSettingsConfig;
reset(): void;
}