@cnvx/svelte-diagrams/dist/diagram-lib.d.ts

A Svelte 5 library for creating interactive node diagrams with customizable connections and layouts

export declare const browser = true;
export declare const dev: any;
export interface Vector2 {
    x: number;
    y: number;
}
export declare const vector2: (x: number, y: number) => {
    x: number;
    y: number;
};
export declare const eq: (a: Vector2, b: Vector2) => boolean;
export declare const Anchor: {
    readonly TOP_LEFT: {
        x: number;
        y: number;
    };
    readonly TOP_RIGHT: {
        x: number;
        y: number;
    };
    readonly BOTTOM_LEFT: {
        x: number;
        y: number;
    };
    readonly BOTTOM_RIGHT: {
        x: number;
        y: number;
    };
    readonly CENTER_LEFT: {
        x: number;
        y: number;
    };
    readonly CENTER_RIGHT: {
        x: number;
        y: number;
    };
    readonly CENTER_TOP: {
        x: number;
        y: number;
    };
    readonly CENTER_BOTTOM: {
        x: number;
        y: number;
    };
    readonly CENTER_CENTER: {
        x: number;
        y: number;
    };
};
export declare enum Side {
    Right = 0,
    Top = 1,
    Left = 2,
    Bottom = 3
}
export declare function debugSide(s: Side): string;
export declare function normaliseAngle(r: number): number;
export declare function sideToUnitVector2(s: Side): Vector2;
export declare function sideForAngle(rad: number): Side;
export declare function unitVectorFromAngle(rad: number): Vector2;
export type GetBezierPathParams = {
    /** The `x` position of the source handle. */
    sourceX: number;
    /** The `y` position of the source handle. */
    sourceY: number;
    /**
     * The position of the source handle.
     * @default Side.Bottom
     */
    sourcePosition?: Side;
    /** The `x` position of the target handle. */
    targetX: number;
    /** The `y` position of the target handle. */
    targetY: number;
    /**
     * The position of the target handle.
     * @default Side.Top
     */
    targetPosition?: Side;
    /**
     * The curvature of the bezier edge.
     * @default 0.25
     */
    curvature?: number;
};
export type GetControlWithCurvatureParams = {
    pos: Side;
    x1: number;
    y1: number;
    x2: number;
    y2: number;
    c: number;
};
export declare function getBezierEdgeCenter({ sourceX, sourceY, targetX, targetY, sourceControlX, sourceControlY, targetControlX, targetControlY }: {
    sourceX: number;
    sourceY: number;
    targetX: number;
    targetY: number;
    sourceControlX: number;
    sourceControlY: number;
    targetControlX: number;
    targetControlY: number;
}): [number, number, number, number];
/**
 * The `getBezierPath` util returns everything you need to render a bezier edge
 *between two nodes.
 * @public
 * @returns A path string you can use in an SVG, the `labelX` and `labelY` position (center of path)
 * and `offsetX`, `offsetY` between source handle and label.
 * - `path`: the path to use in an SVG `<path>` element.
 * - `labelX`: the `x` position you can use to render a label for this edge.
 * - `labelY`: the `y` position you can use to render a label for this edge.
 * - `offsetX`: the absolute difference between the source `x` position and the `x` position of the
 * middle of this path.
 * - `offsetY`: the absolute difference between the source `y` position and the `y` position of the
 * middle of this path.
 * @example
 * ```js
 *  const source = { x: 0, y: 20 };
 *  const target = { x: 150, y: 100 };
 *
 *  const [path, labelX, labelY, offsetX, offsetY] = getBezierPath({
 *    sourceX: source.x,
 *    sourceY: source.y,
 *    sourcePosition: Side.Right,
 *    targetX: target.x,
 *    targetY: target.y,
 *    targetPosition: Side.Left,
 *});
 *```
 *
 * @remarks This function returns a tuple (aka a fixed-size array) to make it easier to
 *work with multiple edge paths at once.
 */
export declare function getBezierPath({ sourceX, sourceY, sourcePosition, targetX, targetY, targetPosition, curvature }: GetBezierPathParams): [
    path: string,
    labelX: number,
    labelY: number,
    offsetX: number,
    offsetY: number
];
export declare function getEdgeCenter({ sourceX, sourceY, targetX, targetY, }: {
    sourceX: number;
    sourceY: number;
    targetX: number;
    targetY: number;
}): [number, number, number, number];
export interface GetSmoothStepPathParams {
    /** The `x` position of the source handle. */
    sourceX: number;
    /** The `y` position of the source handle. */
    sourceY: number;
    /**
     * The position of the source handle.
     * @default Side.Bottom
     */
    sourcePosition?: Side;
    /** The `x` position of the target handle. */
    targetX: number;
    /** The `y` position of the target handle. */
    targetY: number;
    /**
     * The position of the target handle.
     * @default Side.Top
     */
    targetPosition?: Side;
    /** @default 5 */
    borderRadius?: number;
    centerX?: number;
    centerY?: number;
    /** @default 20 */
    offset?: number;
}
/**
 * The `getSmoothStepPath` util returns everything you need to render a stepped path
 * between two nodes. The `borderRadius` property can be used to choose how rounded
 * the corners of those steps are.
 * @public
 * @returns A path string you can use in an SVG, the `labelX` and `labelY` position (center of path)
 * and `offsetX`, `offsetY` between source handle and label.
 *
 * - `path`: the path to use in an SVG `<path>` element.
 * - `labelX`: the `x` position you can use to render a label for this edge.
 * - `labelY`: the `y` position you can use to render a label for this edge.
 * - `offsetX`: the absolute difference between the source `x` position and the `x` position of the
 * middle of this path.
 * - `offsetY`: the absolute difference between the source `y` position and the `y` position of the
 * middle of this path.
 * @example
 * ```js
 *  const source = { x: 0, y: 20 };
 *  const target = { x: 150, y: 100 };
 *
 *  const [path, labelX, labelY, offsetX, offsetY] = getSmoothStepPath({
 *    sourceX: source.x,
 *    sourceY: source.y,
 *    sourcePosition: Side.Right,
 *    targetX: target.x,
 *    targetY: target.y,
 *    targetPosition: Side.Left,
 *  });
 * ```
 * @remarks This function returns a tuple (aka a fixed-size array) to make it easier to work with multiple edge paths at once.
 */
export declare function getSmoothStepPath({ sourceX, sourceY, sourcePosition, targetX, targetY, targetPosition, borderRadius, centerX, centerY, offset, }: GetSmoothStepPathParams): [path: string, labelX: number, labelY: number, offsetX: number, offsetY: number];