@gravity-ui/graph
Version:
Modern graph editor component
206 lines (205 loc) • 10.9 kB
TypeScript
import { Component } from "../../../lib/Component";
import { DragContext, DragDiff } from "../../../services/drag";
import { TGraphSettingsConfig } from "../../../store";
import { BlockState, TBlockId } from "../../../store/block/Block";
import { PortState } from "../../../store/connection/port/Port";
import { TMeasureTextOptions } from "../../../utils/functions/text";
import { TTExtRect } from "../../../utils/renderers/text";
import { TPoint, TRect } from "../../../utils/types/shapes";
import { GraphComponent, TGraphComponentProps } from "../GraphComponent";
import { TAnchor } from "../anchors";
import { TGraphLayerContext } from "../layers/graphLayer/GraphLayer";
import { BlockController } from "./controllers/BlockController";
export type TBlockSettings = {
/** Phantom blocks are blocks whose dimensions and position
* are not taken into account when calculating the usable rect.
*
* @deprecated phantom blocks are not used anymore. Please create an issue if you need this feature.
*/
phantom?: boolean;
};
export declare function isTBlock(block: unknown): block is TBlock;
export type TBlock<T extends Record<string, unknown> = {}> = {
id: TBlockId;
is: string;
x: number;
y: number;
group?: string;
width: number;
height: number;
selected?: boolean;
name: string;
anchors?: TAnchor[];
settings?: TBlockSettings;
meta?: T;
};
export type TBlockProps = TGraphComponentProps & {
id: TBlockId;
font?: string;
};
declare module "../../../graphEvents" {
interface GraphEventsDefinitions {
"block-drag-start": (event: CustomEvent<{
nativeEvent: MouseEvent;
block: TBlock;
}>) => void;
"block-drag": (event: CustomEvent<{
nativeEvent: MouseEvent;
block: TBlock;
x: number;
y: number;
}>) => void;
"block-drag-end": (event: CustomEvent<{
nativeEvent: MouseEvent;
block: TBlock;
}>) => void;
}
}
export type BlockViewState = {
zIndex: number;
order: number;
};
export declare class Block<T extends TBlock = TBlock, Props extends TBlockProps = TBlockProps> extends GraphComponent<Props, T, TGraphLayerContext> {
static IS: "Block";
cursor?: string;
readonly isBlock = true;
context: TGraphLayerContext;
state: T;
props: Props;
connectedState: BlockState<T>;
protected lastDragEvent?: MouseEvent;
protected startDragCoords: number[];
protected shouldRenderText: boolean;
protected shouldRenderHtml: boolean;
protected raised: boolean;
protected hidden: boolean;
protected currentState(): T;
protected blockController: BlockController;
$viewState: import("@preact/signals-core").Signal<BlockViewState>;
constructor(props: Props, parent: Component);
getEntityId(): TBlockId;
isRendered(): boolean;
protected updateViewState(params: Partial<BlockViewState>): void;
getGeometry(): TRect;
getConfigFlag<K extends keyof TGraphSettingsConfig>(flagPath: K): number | boolean | typeof Component | import("../../..").ECanDrag | {
new (props: import("../connections").TConnectionProps, parent: import("../connections/BlockConnections").BlockConnections): import("../connections").BlockConnection<{
id?: import("../../..").TConnectionId;
sourceBlockId?: TBlockId;
targetBlockId?: TBlockId;
sourceAnchorId?: string;
targetAnchorId?: string;
sourcePortId?: import("../../../store/connection/port/Port").TPortId;
targetPortId?: import("../../../store/connection/port/Port").TPortId;
label?: string;
styles?: Partial<import("../../../graphConfig").TConnectionColors> & {
dashes?: number[];
};
dashed?: boolean;
selected?: boolean;
}>;
create<Props_1 extends import("../../../lib/CoreComponent").CoreComponentProps, Context extends import("../../../lib/CoreComponent").CoreComponentContext>(this: Constructor<import("../../../lib").CoreComponent<Props_1, Context>>, props?: Props_1, options?: {
readonly key?: string;
readonly ref?: ((inst: unknown) => void) | string;
}): import("../../../lib/CoreComponent").ComponentDescriptor<Props_1, Context>;
mount<Props_1 extends import("../../../lib/CoreComponent").CoreComponentProps, Context extends import("../../../lib/CoreComponent").CoreComponentContext>(Component: Constructor<import("../../../lib").CoreComponent<Props_1, Context>>, props?: Props_1): import("../../../lib").CoreComponent<Props_1, Context>;
unmount(instance: any): void;
} | import("../../..").ECanChangeBlockGeometry | "vertical" | "horizontal" | Record<string, {
new (props: TBlockProps, parent: Component): Block<TBlock, TBlockProps>;
IS: "Block";
create<Props_1 extends import("../../../lib/CoreComponent").CoreComponentProps, Context extends import("../../../lib/CoreComponent").CoreComponentContext>(this: Constructor<import("../../../lib").CoreComponent<Props_1, Context>>, props?: Props_1, options?: {
readonly key?: string;
readonly ref?: ((inst: unknown) => void) | string;
}): import("../../../lib/CoreComponent").ComponentDescriptor<Props_1, Context>;
mount<Props_1 extends import("../../../lib/CoreComponent").CoreComponentProps, Context extends import("../../../lib/CoreComponent").CoreComponentContext>(Component: Constructor<import("../../../lib").CoreComponent<Props_1, Context>>, props?: Props_1): import("../../../lib").CoreComponent<Props_1, Context>;
unmount(instance: any): void;
}>;
protected subscribe(id: TBlockId): void[];
protected getNextState(): T;
protected didIterate(): void;
protected calcZIndex(): number;
protected raiseBlock(): void;
protected stateChanged(nextState: T): void;
getRenderIndex(): number;
updatePosition(x: number, y: number, silent?: boolean): void;
protected updatePortPositions(): void;
getInputPort(): PortState;
getOutputPort(): PortState;
getAnchorPort(anchorId: string): PortState;
/**
* Check if block can be dragged based on canDrag setting
*/
isDraggable(): boolean;
/**
* Handle drag start - emit event and initialize drag state
*/
handleDragStart(context: DragContext): void;
/**
* Handle drag update - calculate new position and update block
*/
handleDrag(diff: DragDiff, context: DragContext): void;
/**
* Handle drag end - finalize drag state
*/
handleDragEnd(context: DragContext): void;
protected calcNextDragPosition(x: number, y: number): [number, number];
protected applyNextPosition(x: number, y: number): void;
updateHitBox: (geometry: TRect, force?: boolean) => void;
getConnectionAnchorPosition(anchor: TAnchor): {
x: number;
y: number;
};
getAnchorPosition(anchor: TAnchor): TPoint;
getConnectionPoint(direction: "in" | "out"): TPoint;
protected renderAnchor(anchor: TAnchor, getPosition: (anchor: TAnchor) => TPoint): import("../../../lib/CoreComponent").ComponentDescriptor<import("../anchors").TAnchorProps, TGraphLayerContext>;
protected isAnchorsAllowed(): number | boolean | "" | typeof Component | import("../../..").ECanDrag | {
new (props: import("../connections").TConnectionProps, parent: import("../connections/BlockConnections").BlockConnections): import("../connections").BlockConnection<{
id?: import("../../..").TConnectionId;
sourceBlockId?: TBlockId;
targetBlockId?: TBlockId;
sourceAnchorId?: string;
targetAnchorId?: string;
sourcePortId?: import("../../../store/connection/port/Port").TPortId;
targetPortId?: import("../../../store/connection/port/Port").TPortId;
label?: string;
styles?: Partial<import("../../../graphConfig").TConnectionColors> & {
dashes?: number[];
};
dashed?: boolean;
selected?: boolean;
}>;
create<Props_1 extends import("../../../lib/CoreComponent").CoreComponentProps, Context extends import("../../../lib/CoreComponent").CoreComponentContext>(this: Constructor<import("../../../lib").CoreComponent<Props_1, Context>>, props?: Props_1, options?: {
readonly key?: string;
readonly ref?: ((inst: unknown) => void) | string;
}): import("../../../lib/CoreComponent").ComponentDescriptor<Props_1, Context>;
mount<Props_1 extends import("../../../lib/CoreComponent").CoreComponentProps, Context extends import("../../../lib/CoreComponent").CoreComponentContext>(Component: Constructor<import("../../../lib").CoreComponent<Props_1, Context>>, props?: Props_1): import("../../../lib").CoreComponent<Props_1, Context>;
unmount(instance: any): void;
} | import("../../..").ECanChangeBlockGeometry | "vertical" | "horizontal" | Record<string, {
new (props: TBlockProps, parent: Component): Block<TBlock, TBlockProps>;
IS: "Block";
create<Props_1 extends import("../../../lib/CoreComponent").CoreComponentProps, Context extends import("../../../lib/CoreComponent").CoreComponentContext>(this: Constructor<import("../../../lib").CoreComponent<Props_1, Context>>, props?: Props_1, options?: {
readonly key?: string;
readonly ref?: ((inst: unknown) => void) | string;
}): import("../../../lib/CoreComponent").ComponentDescriptor<Props_1, Context>;
mount<Props_1 extends import("../../../lib/CoreComponent").CoreComponentProps, Context extends import("../../../lib/CoreComponent").CoreComponentContext>(Component: Constructor<import("../../../lib").CoreComponent<Props_1, Context>>, props?: Props_1): import("../../../lib").CoreComponent<Props_1, Context>;
unmount(instance: any): void;
}>;
protected binderGetAnchorPosition: (anchor: TAnchor) => {
x: number;
y: number;
};
protected updateChildren(): import("../../../lib/CoreComponent").ComponentDescriptor<import("../anchors").TAnchorProps, TGraphLayerContext>[];
protected willRender(): void;
protected renderStroke(color: string): void;
protected getContentRect(): TRect;
protected renderText(text: string, ctx?: CanvasRenderingContext2D, { rect, renderParams }?: {
rect: TTExtRect;
renderParams: TMeasureTextOptions;
}): void;
renderMinimalisticBlock(ctx: CanvasRenderingContext2D): void;
protected renderBody(ctx: CanvasRenderingContext2D): void;
renderSchematicView(ctx: CanvasRenderingContext2D): void;
setHiddenBlock(hidden: boolean): void;
renderDetailedView(ctx: CanvasRenderingContext2D): void;
protected render(): void;
protected unmount(): void;
}