@gravity-ui/graph/build/components/canvas/connections/BaseConnection.d.ts

Modern graph editor component

import { Component } from "../../../lib";
import { TComponentState } from "../../../lib/Component";
import { ConnectionState, TConnection, TConnectionId } from "../../../store/connection/ConnectionState";
import { TPoint } from "../../../utils/types/shapes";
import { GraphComponent, GraphComponentContext } from "../GraphComponent";
import { TAnchor } from "../anchors";
import { Block } from "../blocks/Block";
/**
 * Properties for BaseConnection component
 */
export type TBaseConnectionProps = {
    /** Unique identifier for the connection */
    id: TConnectionId;
};
/**
 * State interface for BaseConnection component
 * Combines component state with connection data and interaction states
 */
export type TBaseConnectionState = TComponentState & TConnection & {
    /** Whether the connection is currently being hovered */
    hovered?: boolean;
};
/**
 * BaseConnection - Foundation class for all connection types in @gravity-ui/graph
 *
 * Provides core functionality for connection components including:
 * - Integration with the Port System for reliable connection points
 * - Automatic state synchronization with ConnectionState
 * - Reactive geometry updates when ports change
 * - HitBox management for user interaction
 *
 * ## Key Features:
 *
 * ### Port System Integration
 * Uses the Port System to resolve connection endpoints, which solves the initialization
 * order problem where connections can be created before blocks/anchors are ready.
 *
 * ### Reactive Updates
 * Automatically subscribes to port changes and updates connection geometry when
 * source or target positions change.
 *
 * ### Event Handling
 * Provides hover state management and can be extended for custom interaction handling.
 *
 * ## Usage:
 *
 * BaseConnection is typically used as a base class for more specific connection types.
 * For most use cases, prefer BlockConnection which extends this with optimized rendering.
 *
 * @example
 * ```typescript
 * class SimpleConnection extends BaseConnection {
 *   protected render() {
 *     if (!this.connectionPoints) return;
 *
 *     const [source, target] = this.connectionPoints;
 *     const ctx = this.context.ctx;
 *
 *     ctx.beginPath();
 *     ctx.moveTo(source.x, source.y);
 *     ctx.lineTo(target.x, target.y);
 *     ctx.stroke();
 *   }
 * }
 * ```
 *
 * @see {@link BlockConnection} For production-ready connection implementation
 * @see {@link ConnectionState} For connection data management
 * @see {@link PortState} For port system details
 */
export declare class BaseConnection<Props extends TBaseConnectionProps = TBaseConnectionProps, State extends TBaseConnectionState = TBaseConnectionState, Context extends GraphComponentContext = GraphComponentContext, Connection extends TConnection = TConnection> extends GraphComponent<Props, State, Context> {
    /**
     * @deprecated use port system instead
     */
    protected get sourceBlock(): Block;
    /**
     * @deprecated use port system instead
     */
    protected get targetBlock(): Block;
    /**
     * @deprecated use port system instead
     */
    protected get sourceAnchor(): TAnchor | undefined;
    /**
     * @deprecated use port system instead
     */
    protected get targetAnchor(): TAnchor | undefined;
    /**
     * Calculated connection endpoints based on port positions
     * Updated automatically when source or target ports change position
     */
    connectionPoints: [TPoint, TPoint] | undefined;
    /**
     * Reference to the reactive connection state from the store
     * Provides access to connection data and port references
     */
    protected connectedState: ConnectionState<Connection>;
    /**
     * Bounding box for the connection [minX, minY, maxX, maxY]
     * Used for hit detection and rendering optimizations
     */
    protected bBox: [minX: number, minY: number, maxX: number, maxY: number];
    constructor(props: Props, parent: Component);
    getEntityId(): TConnectionId;
    protected willMount(): void;
    protected handleEvent(event: any): void;
    protected unmount(): void;
    /**
     * Updates connection points based on current port positions
     * Called automatically when port geometry changes
     *
     * This method:
     * 1. Retrieves current port positions from the Port System
     * 2. Updates connectionPoints for rendering
     * 3. Recalculates bounding box for optimization
     * 4. Updates hit box for interaction
     *
     * @returns {void}
     */
    protected updatePoints(): void;
    /**
     * Get the current bounding box of the connection
     * @returns Readonly tuple of [sourceX, sourceY, targetX, targetY]
     */
    protected getBBox(): Readonly<[sourceX: number, sourceY: number, targetX: number, targetY: number]>;
    /**
     * Updates the hit box for user interaction
     * Adds threshold padding around the connection line to make it easier to click
     *
     * @returns {void}
     */
    private updateHitBox;
}