@gravity-ui/graph
Version:
Modern graph editor component
85 lines (84 loc) • 2.92 kB
TypeScript
import { TComponentState } from "../../../lib/Component";
import { DragContext, DragDiff } from "../../../services/drag";
import { BlockState } from "../../../store/block/Block";
import { GroupState, TGroup, TGroupId } from "../../../store/group/Group";
import { TMeasureTextOptions } from "../../../utils/functions/text";
import { TRect } from "../../../utils/types/shapes";
import { GraphComponent } from "../GraphComponent";
import { TGraphLayerContext } from "../layers/graphLayer/GraphLayer";
import { BlockGroups } from "./BlockGroups";
export type TGroupStyle = {
background: string;
border: string;
borderWidth: number;
selectedBackground: string;
selectedBorder: string;
};
export type TGroupGeometry = {
padding: [number, number, number, number];
};
export type TGroupProps = {
id: TGroupId;
onDragUpdate: (groupId: string, diff: {
deltaX: number;
deltaY: number;
}) => void;
style?: Partial<TGroupStyle>;
geometry?: Partial<TGroupGeometry>;
draggable?: boolean;
};
type TGroupState<T extends TGroup = TGroup> = TComponentState & T & {
rect: TRect;
};
export declare class Group<T extends TGroup = TGroup> extends GraphComponent<TGroupProps, TGroupState<T>, TGraphLayerContext> {
static define(config: {
style?: Partial<TGroupStyle>;
geometry?: Partial<TGroupGeometry>;
}): typeof Group;
get zIndex(): number;
context: TGraphLayerContext;
protected blocks: BlockState[];
protected groupState: GroupState | undefined;
cursor: string;
protected style: TGroupStyle;
protected geometry: TGroupGeometry;
constructor(props: TGroupProps, parent: BlockGroups);
getEntityId(): string;
/**
* Check if group can be dragged based on props.draggable and canDrag setting
*/
isDraggable(): boolean;
/**
* Handle drag start - nothing special needed, DragService handles autopanning and cursor
*/
handleDragStart(_context: DragContext): void;
/**
* Handle drag update - update group rect and notify via callback
*/
handleDrag(diff: DragDiff, _context: DragContext): void;
/**
* Handle drag end - nothing special needed, DragService handles cleanup
*/
handleDragEnd(_context: DragContext): void;
protected getRect(rect?: TRect): {
x: number;
y: number;
width: number;
height: number;
};
protected subscribeToGroup(): void;
protected updateHitBox(rect: TRect): void;
protected layoutText(text: string, textParams?: TMeasureTextOptions): {
measures: import("../../../utils/functions/text").TWrapText;
lines: any[];
lineHeight: number;
};
protected renderBody(ctx: CanvasRenderingContext2D, rect?: {
x: number;
y: number;
width: number;
height: number;
}): void;
protected render(): void;
}
export {};