@delove/reaflow/dist/layout/useLayout.d.ts

Node-based Visualizations for React

import { RefObject } from 'react';
import { CanvasPosition, EdgeData, NodeData } from '../types';
import { CanvasDirection, ElkCanvasLayoutOptions } from './elkLayout';
export interface ElkRoot {
    x?: number;
    y?: number;
    width?: number;
    height?: number;
    children?: any[];
    edges?: any[];
    direction?: CanvasDirection;
}
export interface LayoutProps {
    maxHeight: number;
    maxWidth: number;
    nodes: NodeData[];
    edges: EdgeData[];
    pannable: boolean;
    defaultPosition: CanvasPosition;
    fit: boolean;
    zoom: number;
    layoutOptions?: ElkCanvasLayoutOptions;
    direction: CanvasDirection;
    setZoom: (factor: number) => void;
    onLayoutChange: (layout: ElkRoot) => void;
}
export interface LayoutResult {
    /**
     * X/Y offset.
     */
    xy: [number, number];
    /**
     * Scroll offset.
     */
    scrollXY: [number, number];
    /**
     * ELK Layout object.
     */
    layout: ElkRoot;
    /**
     * Ref to container div.
     */
    containerRef: RefObject<HTMLDivElement | null>;
    /**
     * Height of the svg.
     */
    canvasHeight?: number;
    /**
     * Width of the svg.
     */
    canvasWidth?: number;
    /**
     * Width of the container div.
     */
    containerWidth?: number;
    /**
     * Height of the container div.
     */
    containerHeight?: number;
    /**
     * Positions the canvas to the viewport.
     */
    positionCanvas?: (position: CanvasPosition, animated?: boolean) => void;
    /**
     * Fit the canvas to the viewport.
     */
    fitCanvas?: (animated?: boolean) => void;
    /**
     * Fit a group of nodes to the viewport.
     */
    fitNodes?: (nodeIds: string | string[], animated?: boolean) => void;
    /**
     * Scroll to X/Y
     */
    setScrollXY?: (xy: [number, number], animated?: boolean) => void;
    observe: (el: HTMLDivElement) => void;
}
export declare const useLayout: ({ maxWidth, maxHeight, nodes, edges, fit, pannable, defaultPosition, direction, layoutOptions, zoom, setZoom, onLayoutChange }: LayoutProps) => LayoutResult;