@gravity-ui/graph
Version:
Modern graph editor component
77 lines (76 loc) • 3.59 kB
TypeScript
import { HitBoxData } from "../../../services/HitTest";
import { TConnection } from "../../../store/connection/ConnectionState";
import { ConnectionArrow } from "./Arrow";
import { BaseConnection, TBaseConnectionProps, TBaseConnectionState } from "./BaseConnection";
import { Path2DRenderInstance, Path2DRenderStyleResult } from "./BatchPath2D";
import { BlockConnections, TGraphConnectionsContext } from "./BlockConnections";
export type TConnectionProps = TBaseConnectionProps & {
useBezier: boolean;
bezierDirection: "vertical" | "horizontal";
showConnectionArrows: boolean;
showConnectionLabels: boolean;
};
export type TBlockConnection = {
id: string;
addInRenderOrder(cmp: any, setting: object): void;
removeFromRenderOrder(cmp: any): void;
};
export declare class BlockConnection<T extends TConnection> extends BaseConnection<TConnectionProps, TBaseConnectionState, TGraphConnectionsContext, T> implements Path2DRenderInstance {
readonly cursor = "pointer";
protected path2d: Path2D;
private labelGeometry;
protected geometry: {
x1: number;
x2: number;
y1: number;
y2: number;
};
/**
* The arrow shape component that renders the arrow in the middle of the connection.
* This is conditionally added to the batch renderer based on the showConnectionArrows setting.
*/
protected arrowShape: ConnectionArrow<T>;
/**
* Creates a new BlockConnection instance.
*
* @param props - The connection properties including showConnectionArrows setting
* @param parent - The parent BlockConnections component
*/
constructor(props: TConnectionProps, parent: BlockConnections);
/**
* Updates the visual appearance of the connection and manages arrow visibility.
* This method centralizes all arrow rendering logic to ensure consistency.
*
* IMPORTANT: We must use the props parameter instead of this.props because this.props
* may contain outdated values during re-renders, which was the source of the original bug.
* Always pass the most current props to this method when calling it from propsChanged.
*
* @param state - The current state of the connection (selected, hovered, etc.)
* @param props - The connection properties, used to check showConnectionArrows setting
*/
protected applyShape(state?: TBaseConnectionState, props?: TConnectionProps): void;
getPath(): Path2D;
/**
* Creates the Path2D object for the arrow in the middle of the connection.
* This is used by the ConnectionArrow component to render the arrow.
*
* @returns A Path2D object representing the arrow shape
*/
createArrowPath(): Path2D;
styleArrow(ctx: CanvasRenderingContext2D): Path2DRenderStyleResult | undefined;
protected generatePath(): Path2D;
protected createPath(): Path2D;
getClassName(state?: TBaseConnectionState): string;
style(ctx: CanvasRenderingContext2D): Path2DRenderStyleResult | undefined;
protected setRenderStyles(ctx: CanvasRenderingContext2D, state?: TBaseConnectionState, withDashed?: boolean): void;
afterRender?(ctx: CanvasRenderingContext2D): void;
protected propsChanged(nextProps: TConnectionProps): void;
protected stateChanged(nextState: TBaseConnectionState): void;
get zIndex(): number;
protected updatePoints(): void;
protected handleEvent(event: any): void;
onHitBox(shape: HitBoxData): boolean;
private renderLabelText;
getStrokeColor(state: TConnection): string;
protected unmount(): void;
}