@gravity-ui/graph
Version:
Modern graph editor component
68 lines (67 loc) • 2.29 kB
TypeScript
import { TComponentState } from "../../../lib/Component";
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: {
diffX: number;
diffY: 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);
protected isDraggable(): boolean;
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 {};