reagraph/dist/GraphScene.d.ts

WebGL Node-based Graph for React

import { ThreeEvent } from '@react-three/fiber';
import { default as Graph } from 'graphology';
import { ReactNode, default as React } from 'react';
import { CenterNodesParams, FitNodesParams } from './CameraControls/useCenterGraph';
import { LayoutOverrides, LayoutTypes } from './layout';
import { SizingType } from './sizing';
import { ClusterEventArgs } from './symbols/Cluster';
import { EdgeInterpolation, EdgeLabelPosition } from './symbols/Edge';
import { EdgeArrowPosition } from './symbols/edges/Edge';
import { ClusterRenderer, CollapseProps, ContextMenuEvent, GraphEdge, GraphNode, InternalGraphEdge, InternalGraphNode, NodeContextMenuProps, NodeRenderer } from './types';
import { LabelVisibilityType } from './utils/visibility';
export interface GraphSceneProps {
    /**
     * Type of layout.
     *
     * @default 'forceDirected2d'
     */
    layoutType?: LayoutTypes;
    /**
     * List of ids that are selected.
     *
     * @default []
     */
    selections?: string[];
    /**
     * List of ids that are active.
     *
     * @default []
     */
    actives?: string[];
    /**
     * List of node ids that are collapsed.
     *
     * @default []
     */
    collapsedNodeIds?: string[];
    /**
     * Animate or not the graph positions.
     *
     * @default true
     */
    animated?: boolean;
    /**
     * Nodes to pass to the graph.
     */
    nodes: GraphNode[];
    /**
     * Edges to pass to the graph.
     */
    edges: GraphEdge[];
    /**
     * Context menu element.
     */
    contextMenu?: (event: ContextMenuEvent) => ReactNode;
    /**
     * Type of sizing for nodes.
     *
     * @default 'default'
     */
    sizingType?: SizingType;
    /**
     * Type of visibility for labels.
     *
     * @default 'auto'
     */
    labelType?: LabelVisibilityType;
    /**
     * Place of visibility for edge labels.
     *
     * @default 'inline'
     */
    edgeLabelPosition?: EdgeLabelPosition;
    /**
     * Placement of edge arrows.
     *
     * @default 'end'
     */
    edgeArrowPosition?: EdgeArrowPosition;
    /**
     * Shape of edge.
     *
     * @default 'linear'
     */
    edgeInterpolation?: EdgeInterpolation;
    /**
     * Font of label, same as troika-three-text.
     * The URL of a custom font file to be used. Supported font formats are: .ttf, .otf, .woff (.woff2 is not supported).
     * If not provided, the Roboto font is loaded from the Google Fonts CDN.
     */
    labelFontUrl?: string;
    /**
     * Attribute based sizing property.
     */
    sizingAttribute?: string;
    /**
     * The default size to size nodes to.
     *
     * @default 7
     */
    defaultNodeSize?: number;
    /**
     * When using sizing attributes, the min size a node can be.
     *
     * @default 5
     */
    minNodeSize?: number;
    /**
     * When using sizing attributes, the max size a node can be.
     *
     * @default 15
     */
    maxNodeSize?: number;
    /**
     * Attribute used for clustering.
     */
    clusterAttribute?: string;
    /**
     * Disable interactions or not.
     */
    disabled?: boolean;
    /**
     * Allow dragging of nodes.
     *
     * @default false
     */
    draggable?: boolean;
    /**
     * Constrain dragging to the cluster bounds.
     *
     * @default false
     */
    constrainDragging?: boolean;
    /**
     * Render a custom node
     */
    renderNode?: NodeRenderer;
    /**
     * Render a custom cluster
     */
    onRenderCluster?: ClusterRenderer;
    /**
     * Advanced overrides for the layout.
     */
    layoutOverrides?: LayoutOverrides;
    /**
     * Whether to aggregate edges with the same source and target.
     */
    aggregateEdges?: boolean;
    /**
     * When a node was clicked.
     */
    onNodeClick?: (node: InternalGraphNode, props?: CollapseProps, event?: ThreeEvent<MouseEvent>) => void;
    /**
     * When a node was double clicked.
     */
    onNodeDoubleClick?: (node: InternalGraphNode, event: ThreeEvent<MouseEvent>) => void;
    /**
     * When a node context menu happened.
     */
    onNodeContextMenu?: (node: InternalGraphNode, props?: NodeContextMenuProps) => void;
    /**
     * When node got a pointer over.
     */
    onNodePointerOver?: (node: InternalGraphNode, event: ThreeEvent<PointerEvent>) => void;
    /**
     * When node lost pointer over.
     */
    onNodePointerOut?: (node: InternalGraphNode, event: ThreeEvent<PointerEvent>) => void;
    /**
     * Triggered after a node was dragged.
     */
    onNodeDragged?: (node: InternalGraphNode) => void;
    /**
     * Triggered after a cluster was dragged.
     */
    onClusterDragged?: (cluster: ClusterEventArgs) => void;
    /**
     * When a edge context menu happened.
     */
    onEdgeContextMenu?: (edge?: InternalGraphEdge) => void;
    /**
     * When an edge was clicked.
     */
    onEdgeClick?: (edge: InternalGraphEdge, event?: ThreeEvent<MouseEvent>) => void;
    /**
     * When edge got a pointer over.
     */
    onEdgePointerOver?: (edge: InternalGraphEdge, event?: ThreeEvent<PointerEvent>) => void;
    /**
     * When edge lost pointer over.
     */
    onEdgePointerOut?: (edge: InternalGraphEdge, event?: ThreeEvent<PointerEvent>) => void;
    /**
     * When a cluster was clicked.
     */
    onClusterClick?: (cluster: ClusterEventArgs, event: ThreeEvent<MouseEvent>) => void;
    /**
     * When a cluster receives a pointer over event.
     */
    onClusterPointerOver?: (cluster: ClusterEventArgs, event: ThreeEvent<PointerEvent>) => void;
    /**
     * When cluster receives a pointer leave event.
     */
    onClusterPointerOut?: (cluster: ClusterEventArgs, event: ThreeEvent<PointerEvent>) => void;
}
export interface GraphSceneRef {
    /**
     * Reference to the graph object.
     */
    graph: Graph;
    /**
     * Centers the graph on a specific node or list of nodes.
     *
     * @param nodeIds - An array of node IDs to center the graph on. If this parameter is omitted,
     * the graph will be centered on all nodes.
     *
     * @param opts.centerOnlyIfNodesNotInView - A boolean flag that determines whether the graph should
     * only be centered if the nodes specified by `ids` are not currently in view. If this
     * parameter is `true`, the graph will only be re-centered if one or more of the nodes
     * specified by `ids` are not currently in view. If this parameter is
     * `false` or omitted, the graph will be re-centered regardless of whether the nodes
     * are currently in view.
     */
    centerGraph: (nodeIds?: string[], opts?: CenterNodesParams) => void;
    /**
     * Fit all the given nodes into view of the camera.
     *
     * @param nodeIds - An array of node IDs to fit the view on. If this parameter is omitted,
     * the view will fit to all nodes.
     *
     * @param opts.fitOnlyIfNodesNotInView - A boolean flag that determines whether the view should
     * only be fit if the nodes specified by `ids` are not currently in view. If this
     * parameter is `true`, the view will only be fit if one or more of the nodes
     * specified by `ids` are not currently visible in the viewport. If this parameter is
     * `false` or omitted, the view will be fit regardless of whether the nodes
     * are currently in view.
     */
    fitNodesInView: (nodeIds?: string[], opts?: FitNodesParams) => void;
    /**
     * Calls render scene on the graph. this is useful when you want to manually render the graph
     * for things like screenshots.
     */
    renderScene: () => void;
}
export declare const GraphScene: React.ForwardRefExoticComponent<GraphSceneProps & React.RefAttributes<GraphSceneRef>>;