@gravity-ui/graph
Version:
Modern graph editor component
87 lines (86 loc) • 4.37 kB
TypeScript
import { ReadonlySignal, Signal } from "@preact/signals-core";
import { TBlock } from "../../..";
import { Graph } from "../../../graph";
import { CoreComponent } from "../../../lib";
import { TComponentState } from "../../../lib/Component";
import { Layer, LayerContext, LayerProps } from "../../../services/Layer";
import { BlockState } from "../../../store/block/Block";
import { GroupState, TGroup, TGroupId } from "../../../store/group/Group";
import { TRect } from "../../../utils/types/shapes";
import { Group } from "./Group";
export type TDefinitionGroup<T extends TGroup = TGroup> = Omit<T, "rect"> & {
blocksIds: BlockState["id"][];
};
export type BlockGroupsProps<T extends TGroup = TGroup> = LayerProps & {
mapBlockGroups?: (blocks: BlockState[]) => GroupState[];
groupComponent?: typeof Group<T>;
draggable?: boolean;
updateBlocksOnDrag?: boolean;
};
export type BlockGroupsContext = LayerContext & {
canvas: HTMLCanvasElement;
ctx: CanvasRenderingContext2D;
root?: HTMLElement;
ownerDocument: Document | HTMLElement;
graph: Graph;
};
export type BlockGroupsState = TComponentState & {
groups: GroupState[];
};
export declare class BlockGroups<P extends BlockGroupsProps = BlockGroupsProps> extends Layer<P, BlockGroupsContext, BlockGroupsState> {
static withBlockGrouping<P extends BlockGroupsProps, Instance extends BlockGroups<P>>(this: new (props: P) => Instance, { groupingFn, mapToGroups, }: {
groupingFn: (blocks: BlockState[]) => Record<string, BlockState[]>;
mapToGroups: (key: string, params: {
blocks: BlockState[];
rect: TRect;
}) => TGroup;
}): new (props: P) => Instance & {
$groupsBlocksMap: ReadonlySignal<Record<string, BlockState[]>>;
};
static withPredefinedGroups<T extends TGroup, P extends TDefinitionGroup<T> = TDefinitionGroup<T>, Props extends BlockGroupsProps<T> = BlockGroupsProps<T>, Instance extends BlockGroups<Props> = BlockGroups<Props>>(this: new (props: Props) => Instance): new (props: Props) => Instance & {
$groupsBlocksMap: ReadonlySignal<Record<string, BlockState[]>>;
defineGroups(groups: P[]): void;
};
/**
* Map of groups to blocks
* Used to quickly find the blocks of a group
*/
protected $groupsBlocksMap: Signal<Record<string, BlockState<TBlock>[]>>;
/**
* Source of groups
*/
protected $groupsSource: ReadonlySignal<GroupState<TGroup>[]>;
/**
* Map of blocks to groups
* Used to quickly find the group of a block
*/
protected $blockGroupsMap: ReadonlySignal<Map<import("../../..").TBlockId, string>>;
constructor(props: P);
protected afterInit(): void;
getParent(): CoreComponent | undefined;
updateBlocks: (groupId: TGroupId, { deltaX, deltaY }: {
deltaX: number;
deltaY: number;
}) => void;
setGroups<T extends TGroup>(groups: T[]): void;
updateGroups<T extends TGroup>(groups: T[]): void;
protected unmountLayer(): void;
protected getGroupComponent(group: GroupState): {
new (props: import("./Group").TGroupProps, parent: BlockGroups): Group<TGroup>;
define(config: {
style?: Partial<import("./Group").TGroupStyle>;
geometry?: Partial<import("./Group").TGroupGeometry>;
}): typeof Group;
create<Props extends import("../../../lib/CoreComponent").CoreComponentProps, Context extends import("../../../lib/CoreComponent").CoreComponentContext>(this: Constructor<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<CoreComponent<Props, Context>>, props?: Props): CoreComponent<Props, Context>;
unmount(instance: any): void;
};
protected updateChildren(): import("../../../lib/CoreComponent").ComponentDescriptor<import("./Group").TGroupProps, import("../layers/graphLayer/GraphLayer").TGraphLayerContext>[];
/**
* Find a Group component by its ID
*/
getGroupById(groupId: string): Group | null;
}