API

GraphCanvas

Prop	Description	Default
`theme`	Theme to use for the graph. `Theme`	`{ canvas: { background: '#fff' }, no...`
`cameraMode`	Type of camera interaction. `CameraMode`	`pan`
`maxDistance`	The maximum distance for the camera. Default is 50000. `number`
`minDistance`	The minimum distance for the camera. Default is 1000. `number`
`lassoType`	The type of lasso selection. `LassoType`	`none`
`children`	Children to render in the canvas. Useful for things like lights. `ReactNode`
`glOptions`	Ability to extend Cavas gl options. For example { preserveDrawingBuffer: true } `Object`	`{}`
`onLasso`	When the canvas had a lasso selection. `(selections: string[]) => void`
`onLassoEnd`	When the canvas had a lasso selection end. `(selections: string[]) => void`
`onCanvasClick`	When the canvas was clicked but didn't hit a node/edge. `(event: MouseEvent) => void`
`aggregateEdges`	Whether to aggregate edges with the same source and target. `boolean`
`layoutType`	Type of layout. `LayoutTypes`	`forceDirected2d`
`selections`	List of ids that are selected. `string[]`
`actives`	List of ids that are active. `string[]`
`collapsedNodeIds`	List of node ids that are collapsed. `string[]`
`animated`	Animate or not the graph positions. `boolean`	`true`
`nodes` *	Nodes to pass to the graph. `GraphNode[]`
`edges` *	Edges to pass to the graph. `GraphEdge[]`
`contextMenu`	Context menu element. `(event: ContextMenuEvent) => ReactNode`
`sizingType`	Type of sizing for nodes. `SizingType`	`default`
`labelType`	Type of visibility for labels. `LabelVisibilityType`	`auto`
`edgeLabelPosition`	Place of visibility for edge labels. `EdgeLabelPosition`
`edgeArrowPosition`	Placement of edge arrows. `EdgeArrowPosition`
`edgeInterpolation`	Shape of edge. `EdgeInterpolation`
`labelFontUrl`	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) Default: The Roboto font loaded from Google Fonts CDN `string`
`sizingAttribute`	Attribute based sizing property. `string`
`defaultNodeSize`	The default size to size nodes to. Default is 7. `number`	`7`
`minNodeSize`	When using sizing attributes, the min size a node can be. `number`	`5`
`maxNodeSize`	When using sizing attributes, the max size a node can be. `number`	`15`
`clusterAttribute`	Attribute used for clustering. `string`
`disabled`	Disable interactions or not. `boolean`
`draggable`	Allow dragging of nodes. `boolean`
`constrainDragging`	Constrain dragging to the cluster bounds. Default is `false`. `boolean`
`renderNode`	Render a custom node `NodeRenderer`
`onRenderCluster`	Render a custom cluster `ClusterRenderer`
`layoutOverrides`	Advanced overrides for the layout. `LayoutOverrides`
`onNodeClick`	When a node was clicked. `(node: InternalGraphNode, props?: CollapseProps, event?: ThreeEvent<MouseEvent>) => void`
`onNodeDoubleClick`	When a node was double clicked. `(node: InternalGraphNode, event: ThreeEvent<MouseEvent>) => void`
`onNodeContextMenu`	When a node context menu happened. `(node: InternalGraphNode, props?: NodeContextMenuProps) => void`
`onNodePointerOver`	When node got a pointer over. `(node: InternalGraphNode, event: ThreeEvent<PointerEvent>) => void`
`onNodePointerOut`	When node lost pointer over. `(node: InternalGraphNode, event: ThreeEvent<PointerEvent>) => void`
`onNodeDragged`	Triggered after a node was dragged. `(node: InternalGraphNode) => void`
`onClusterDragged`	Triggered after a cluster was dragged. `(cluster: ClusterEventArgs) => void`
`onEdgeContextMenu`	When a edge context menu happened. `(edge?: InternalGraphEdge) => void`
`onEdgeClick`	When an edge was clicked. `(edge: InternalGraphEdge, event?: ThreeEvent<MouseEvent>) => void`
`onEdgePointerOver`	When edge got a pointer over. `(edge: InternalGraphEdge, event?: ThreeEvent<PointerEvent>) => void`
`onEdgePointerOut`	When edge lost pointer over. `(edge: InternalGraphEdge, event?: ThreeEvent<PointerEvent>) => void`
`onClusterClick`	When a cluster was clicked. `(cluster: ClusterEventArgs, event: ThreeEvent<MouseEvent>) => void`
`onClusterPointerOver`	When a cluster receives a pointer over event. `(cluster: ClusterEventArgs, event: ThreeEvent<PointerEvent>) => void`
`onClusterPointerOut`	When cluster receives a pointer leave event. `(cluster: ClusterEventArgs, event: ThreeEvent<PointerEvent>) => void`
`ref`	`Ref<GraphCanvasRef>`