import * as React from 'react'; import { Object3D, Material, Scene, Camera, WebGLRenderer } from 'three'; import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js'; import { ConfigOptions, ForceGraph3DInstance } from '3d-force-graph'; interface GraphData { nodes: NodeObject[]; links: LinkObject[]; } type NodeObject = NodeType & { id?: string | number; x?: number; y?: number; z?: number; vx?: number; vy?: number; vz?: number; fx?: number; fy?: number; fz?: number; [others: string]: any; }; type LinkObject = LinkType & { source?: string | number | NodeObject; target?: string | number | NodeObject; [others: string]: any; }; type Accessor = Out | string | ((obj: In) => Out); type NodeAccessor = Accessor, T>; type LinkAccessor = Accessor, T>; type DagMode = 'td' | 'bu' | 'lr' | 'rl' | 'zout' | 'zin' | 'radialout' | 'radialin'; type ForceEngine = 'd3' | 'ngraph'; interface ForceFn { (alpha: number): void; initialize?: (nodes: NodeObject[], ...args: any[]) => void; [key: string]: any; } type Coords = { x: number; y: number; z: number; } type LinkPositionUpdateFn = (obj: Object3D, coords: { start: Coords, end: Coords }, link: LinkObject) => void | null | boolean; interface ForceGraphProps< NodeType = {}, LinkType = {} > extends ConfigOptions { // Data input graphData?: GraphData, LinkObject>; nodeId?: string; linkSource?: string; linkTarget?: string; // Container layout width?: number; height?: number; backgroundColor?: string; showNavInfo?: boolean; // Node styling nodeRelSize?: number; nodeVal?: NodeAccessor; nodeLabel?: NodeAccessor; nodeVisibility?: NodeAccessor; nodeColor?: NodeAccessor; nodeAutoColorBy?: NodeAccessor; nodeOpacity?: number; nodeResolution?: number; nodeThreeObject?: NodeAccessor; nodeThreeObjectExtend?: NodeAccessor; // Link styling linkLabel?: LinkAccessor; linkVisibility?: LinkAccessor; linkColor?: LinkAccessor; linkAutoColorBy?: LinkAccessor; linkWidth?: LinkAccessor; linkOpacity?: number; linkResolution?: number; linkCurvature?: LinkAccessor; linkCurveRotation?: LinkAccessor; linkMaterial?: LinkAccessor; linkThreeObject?: LinkAccessor; linkThreeObjectExtend?: LinkAccessor; linkPositionUpdate?: LinkPositionUpdateFn | null; linkDirectionalArrowLength?: LinkAccessor; linkDirectionalArrowColor?: LinkAccessor; linkDirectionalArrowRelPos?: LinkAccessor; linkDirectionalArrowResolution?: number; linkDirectionalParticles?: LinkAccessor; linkDirectionalParticleSpeed?: LinkAccessor; linkDirectionalParticleWidth?: LinkAccessor; linkDirectionalParticleColor?: LinkAccessor; linkDirectionalParticleResolution?: number; // Force engine (d3-force) configuration forceEngine?: ForceEngine; numDimensions?: 1 | 2 | 3; dagMode?: DagMode; dagLevelDistance?: number | null; dagNodeFilter?: (node: NodeObject) => boolean; onDagError?: ((loopNodeIds: (string | number)[]) => void) | undefined; d3AlphaMin?: number; d3AlphaDecay?: number; d3VelocityDecay?: number; ngraphPhysics?: object; warmupTicks?: number; cooldownTicks?: number; cooldownTime?: number; onEngineTick?: () => void; onEngineStop?: () => void; // Interaction onNodeClick?: (node: NodeObject, event: MouseEvent) => void; onNodeRightClick?: (node: NodeObject, event: MouseEvent) => void; onNodeHover?: (node: NodeObject | null, previousNode: NodeObject | null) => void; onNodeDrag?: (node: NodeObject, translate: { x: number, y: number }) => void; onNodeDragEnd?: (node: NodeObject, translate: { x: number, y: number }) => void; onLinkClick?: (link: LinkObject, event: MouseEvent) => void; onLinkRightClick?: (link: LinkObject, event: MouseEvent) => void; onLinkHover?: (link: LinkObject | null, previousLink: LinkObject | null) => void; linkHoverPrecision?: number; onBackgroundClick?: (event: MouseEvent) => void; onBackgroundRightClick?: (event: MouseEvent) => void; enableNodeDrag?: boolean; enableNavigationControls?: boolean; enablePointerInteraction?: boolean; } interface ForceGraphMethods< NodeType = {}, LinkType = {} > { // Link styling emitParticle(link: LinkObject): ForceGraph3DInstance; // Force engine (d3-force) configuration d3Force(forceName: 'link' | 'charge' | 'center' | string): ForceFn> | undefined; d3Force(forceName: 'link' | 'charge' | 'center' | string, forceFn: ForceFn>): ForceGraph3DInstance; d3ReheatSimulation(): ForceGraph3DInstance; // Render control pauseAnimation(): ForceGraph3DInstance; resumeAnimation(): ForceGraph3DInstance; cameraPosition(position: Partial, lookAt?: Coords, transitionMs?: number): ForceGraph3DInstance; zoomToFit(durationMs?: number, padding?: number, nodeFilter?: (node: NodeObject) => boolean): ForceGraph3DInstance; postProcessingComposer(): EffectComposer; scene(): Scene; camera(): Camera; renderer(): WebGLRenderer; controls(): object; refresh(): ForceGraph3DInstance; // Utility getGraphBbox(nodeFilter?: (node: NodeObject) => boolean): { x: [number, number], y: [number, number], z: [number, number] }; screen2GraphCoords(x: number, y: number, distance: number): Coords; graph2ScreenCoords(x: number, y: number, z: number): Coords; } type FCwithRef = (props: ForceGraphProps, LinkObject> & { ref?: React.MutableRefObject, LinkObject> | undefined>; }) => React.ReactElement; declare const ForceGraph: FCwithRef; export { ForceGraphMethods, ForceGraphProps, GraphData, LinkObject, NodeObject, ForceGraph as default };