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) => void; /** * When a node was double clicked. */ onNodeDoubleClick?: (node: InternalGraphNode, event: ThreeEvent) => void; /** * When a node context menu happened. */ onNodeContextMenu?: (node: InternalGraphNode, props?: NodeContextMenuProps) => void; /** * When node got a pointer over. */ onNodePointerOver?: (node: InternalGraphNode, event: ThreeEvent) => void; /** * When node lost pointer over. */ onNodePointerOut?: (node: InternalGraphNode, event: ThreeEvent) => 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) => void; /** * When edge got a pointer over. */ onEdgePointerOver?: (edge: InternalGraphEdge, event?: ThreeEvent) => void; /** * When edge lost pointer over. */ onEdgePointerOut?: (edge: InternalGraphEdge, event?: ThreeEvent) => void; /** * When a cluster was clicked. */ onClusterClick?: (cluster: ClusterEventArgs, event: ThreeEvent) => void; /** * When a cluster receives a pointer over event. */ onClusterPointerOver?: (cluster: ClusterEventArgs, event: ThreeEvent) => void; /** * When cluster receives a pointer leave event. */ onClusterPointerOut?: (cluster: ClusterEventArgs, event: ThreeEvent) => 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>;