diff --git a/types/force-graph/force-graph-tests.ts b/types/force-graph/force-graph-tests.ts index 7e52dc3f6f..43a0cf571b 100644 --- a/types/force-graph/force-graph-tests.ts +++ b/types/force-graph/force-graph-tests.ts @@ -1,9 +1,10 @@ -import * as ForceGraph from 'force-graph'; +import ForceGraph from 'force-graph'; -const graph = ForceGraph(new HTMLElement()); +const graph = ForceGraph(); +graph(new HTMLElement()); graph - .graphData([]) + .graphData({nodes: [], links: []}) .nodeId('testNode') .linkSource('source') .linkTarget('target') diff --git a/types/force-graph/index.d.ts b/types/force-graph/index.d.ts index c34c2bf11a..6a714e7d5b 100644 --- a/types/force-graph/index.d.ts +++ b/types/force-graph/index.d.ts @@ -3,7 +3,7 @@ // Definitions by: Peter Kimberley // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped -declare function ForceGraph(element: HTMLElement): void; +declare function ForceGraph(): ForceGraph.ForceGraphInstance; declare namespace ForceGraph { /** @@ -15,8 +15,11 @@ declare namespace ForceGraph { links: GraphLink[]; } - interface GraphNode { + interface GraphEntity { id: string; + } + + interface GraphNode extends GraphEntity { name: string; val: any; } @@ -27,7 +30,8 @@ declare namespace ForceGraph { index: number; } - interface GraphLink { + interface GraphLink extends GraphEntity { + type: string; source: string | GraphNode; target: string | GraphNode; } @@ -50,87 +54,88 @@ declare namespace ForceGraph { * Types */ - type NodeAccessorFn = ((node: GraphNodeObject) => T); - type NodeCanvasCallbackFn = ((node: GraphNodeObject, canvasContext: CanvasRenderingContext2D, globalScale: number) => void); - type NodeEventCallback = ((node: GraphNodeObject) => void); + type NodeAccessorFn = (node: GraphNodeObject) => T; + type NodeCanvasCallbackFn = (node: GraphNodeObject, canvasContext: CanvasRenderingContext2D, globalScale: number) => void; + type NodeEventCallback = (node: GraphNodeObject) => void; - type LinkAccessorFn = ((link: GraphLink) => T); - type LinkCanvasCallbackFn = ((link: GraphLinkObject, canvasContext: CanvasRenderingContext2D, globalScale: number) => void); - type LinkEventCallback = ((link: GraphLinkObject) => void); + type LinkAccessorFn = (link: GraphLinkObject) => T; + type LinkCanvasCallbackFn = (link: GraphLinkObject, canvasContext: CanvasRenderingContext2D, globalScale: number) => void; + type LinkEventCallback = (link: GraphLinkObject) => void; type DagMode = 'td' | 'bu' | 'lr' | 'rl' | 'radialout' | 'radialin'; - type ForceFn = ((node: {x: number, y: number}) => number); + type ForceFn = (node: { x: number, y: number }) => number; - /** - * Methods - */ - // Data input - function graphData(data?: GraphData[]): ForceGraph.ForceGraphObj & GraphData; - function nodeId(id?: string): ForceGraph & string; - function linkSource(source?: string): ForceGraph & string; - function linkTarget(target?: string): ForceGraph & string; + interface ForceGraphInstance { + (element: HTMLElement): ForceGraphInstance; - // Container layout - function width(width?: number): ForceGraph & number; - function height(height?: number): ForceGraph & number; - function backgroundColor(color?: string): ForceGraph & string; + // Data input + graphData(data?: GraphData): ForceGraphInstance & GraphData; + nodeId(id?: string): ForceGraphInstance & string; + linkSource(source?: string): ForceGraphInstance & string; + linkTarget(target?: string): ForceGraphInstance & string; - // Node styling - function nodeRelSize(size?: number): ForceGraph & number; - function nodeVal(val?: number | string | NodeAccessorFn): ForceGraph & (number | string | NodeAccessorFn); - function nodeLabel(label?: string | NodeAccessorFn): ForceGraph & (string | NodeAccessorFn); - function nodeColor(color?: string | NodeAccessorFn): ForceGraph & (string | NodeAccessorFn); - function nodeAutoColorBy(attribute?: string | NodeAccessorFn): ForceGraph & (string | NodeAccessorFn); - function nodeCanvasObject(callback?: NodeCanvasCallbackFn): ForceGraph & NodeCanvasCallbackFn; + // Container layout + width(width?: number): ForceGraphInstance & number; + height(height?: number): ForceGraphInstance & number; + backgroundColor(color?: string): ForceGraphInstance & string; - // Link styling - function linkLabel(label?: string | LinkAccessorFn): ForceGraph & (string | LinkAccessorFn); - function linkVisibility(visible?: boolean | string | LinkAccessorFn): ForceGraph & (boolean | string | LinkAccessorFn); - function linkColor(color?: string | LinkAccessorFn): ForceGraph & (string | LinkAccessorFn); - function linkAutoColorBy(attribute?: string | LinkAccessorFn): ForceGraph & (string | LinkAccessorFn); - function linkWidth(width?: number | string | LinkAccessorFn): ForceGraph & (number | string | LinkAccessorFn); - function linkCurvature(curvature?: LinkCurvatureType | string | LinkAccessorFn): ForceGraph; - function linkCanvasObject(callback?: NodeCanvasCallbackFn): ForceGraph & NodeCanvasCallbackFn; - function linkDirectionalArrowLength(length?: number | string | LinkAccessorFn): ForceGraph & (number | string | LinkAccessorFn); - function linkDirectionalArrowColor(color?: string | LinkAccessorFn): ForceGraph & (string | LinkAccessorFn); - function linkDirectionalArrowRelPos(ratio?: number | string | LinkAccessorFn): ForceGraph & (number | string | LinkAccessorFn); - function linkDirectionalParticles(particleCount?: number | string | LinkAccessorFn): ForceGraph & (number | string | LinkAccessorFn); - function linkDirectionalParticleSpeed(speed?: number | string | LinkAccessorFn): ForceGraph & (number | string | LinkAccessorFn); - function linkDirectionalParticleWidth(width?: number | string | LinkAccessorFn): ForceGraph & (number | string | LinkAccessorFn); - function linkDirectionalParticleColor(color?: string | LinkAccessorFn): ForceGraph & (string | LinkAccessorFn); + // Node styling + nodeRelSize(size?: number): ForceGraphInstance & number; + nodeVal(val?: number | string | NodeAccessorFn): ForceGraphInstance & (number | string | NodeAccessorFn); + nodeLabel(label?: string | NodeAccessorFn): ForceGraphInstance & (string | NodeAccessorFn); + nodeColor(color?: string | NodeAccessorFn): ForceGraphInstance & (string | NodeAccessorFn); + nodeAutoColorBy(attribute?: string | NodeAccessorFn): ForceGraphInstance & (string | NodeAccessorFn); + nodeCanvasObject(callback?: NodeCanvasCallbackFn): ForceGraphInstance & NodeCanvasCallbackFn; - // Render control - function pauseAnimation(): ForceGraph; - function stopAnimation(): ForceGraph; // Alias for pauseAnimation() - function resumeAnimation(): ForceGraph; - function centerAt(x?: number, y?: number, milliseconds?: number): ForceGraph & {x: number, y: number}; - function zoom(zoomLevel?: number, duration?: number): ForceGraph & number; + // Link styling + linkLabel(label?: string | LinkAccessorFn): ForceGraphInstance & (string | LinkAccessorFn); + linkVisibility(visible?: boolean | string | LinkAccessorFn): ForceGraphInstance & (boolean | string | LinkAccessorFn); + linkColor(color?: string | LinkAccessorFn): ForceGraphInstance & (string | LinkAccessorFn); + linkAutoColorBy(attribute?: string | LinkAccessorFn): ForceGraphInstance & (string | LinkAccessorFn); + linkWidth(width?: number | string | LinkAccessorFn): ForceGraphInstance & (number | string | LinkAccessorFn); + linkCurvature(curvature?: LinkCurvatureType | string | LinkAccessorFn): ForceGraphInstance; + linkCanvasObject(callback?: LinkCanvasCallbackFn): ForceGraphInstance & LinkCanvasCallbackFn; + linkDirectionalArrowLength(length?: number | string | LinkAccessorFn): ForceGraphInstance & (number | string | LinkAccessorFn); + linkDirectionalArrowColor(color?: string | LinkAccessorFn): ForceGraphInstance & (string | LinkAccessorFn); + linkDirectionalArrowRelPos(ratio?: number | string | LinkAccessorFn): ForceGraphInstance & (number | string | LinkAccessorFn); + linkDirectionalParticles(particleCount?: number | string | LinkAccessorFn): ForceGraphInstance & (number | string | LinkAccessorFn); + linkDirectionalParticleSpeed(speed?: number | string | LinkAccessorFn): ForceGraphInstance & (number | string | LinkAccessorFn); + linkDirectionalParticleWidth(width?: number | string | LinkAccessorFn): ForceGraphInstance & (number | string | LinkAccessorFn); + linkDirectionalParticleColor(color?: string | LinkAccessorFn): ForceGraphInstance & (string | LinkAccessorFn); - // Force engine configuration - function dagMode(mode?: DagMode): ForceGraph & DagMode; - function dagLevelDistance(distance?: number): ForceGraph & number; - function d3AlphaDecay(decay?: number): ForceGraph & number; - function d3VelocityDecay(decay?: number): ForceGraph & number; - function d3Force(force: 'link' | 'charge' | 'center' | string, forceFn?: ForceFn): ForceGraph & ForceFn; - function warmupTicks(ticks?: number): ForceGraph & number; - function cooldownTicks(ticks?: number): ForceGraph & number; - function cooldownTime(milliseconds?: number): ForceGraph & number; - function onEngineTick(callback: (() => void)): ForceGraph; - function onEngineStop(callback: (() => void)): ForceGraph; + // Render control + pauseAnimation(): ForceGraphInstance; + stopAnimation(): ForceGraphInstance; // Alias for pauseAnimation() + resumeAnimation(): ForceGraphInstance; + centerAt(x?: number, y?: number, milliseconds?: number): ForceGraphInstance & {x: number, y: number}; + zoom(zoomLevel?: number, duration?: number): ForceGraphInstance & number; - // Interaction - function onNodeClick(callback: NodeEventCallback): ForceGraph; - function onNodeRightClick(callback: NodeEventCallback): ForceGraph; - function onNodeHover(callback: NodeEventCallback): ForceGraph; - function onNodeDrag(callback: NodeEventCallback): ForceGraph; - function onNodeDragEnd(callback: NodeEventCallback): ForceGraph; - function onLinkClick(callback: LinkEventCallback): ForceGraph; - function onLinkRightClick(callback: LinkEventCallback): ForceGraph; - function onLinkHover(callback: LinkEventCallback): ForceGraph; - function linkHoverPrecision(precision?: number): ForceGraph & number; - function enableNodeDrag(enable?: boolean): ForceGraph & boolean; - function enableZoomPanInteraction(enable?: boolean): ForceGraph & boolean; - function enablePointerInteraction(enable?: boolean): ForceGraph & boolean; + // Force engine configuration + dagMode(mode?: DagMode): ForceGraphInstance & DagMode; + dagLevelDistance(distance?: number): ForceGraphInstance & number; + d3AlphaDecay(decay?: number): ForceGraphInstance & number; + d3VelocityDecay(decay?: number): ForceGraphInstance & number; + d3Force(force: 'link' | 'charge' | 'center' | string, forceFn?: ForceFn): ForceGraphInstance & ForceFn; + warmupTicks(ticks?: number): ForceGraphInstance & number; + cooldownTicks(ticks?: number): ForceGraphInstance & number; + cooldownTime(milliseconds?: number): ForceGraphInstance & number; + onEngineTick(callback: () => void): ForceGraphInstance; + onEngineStop(callback: () => void): ForceGraphInstance; + + // Interaction + onNodeClick(callback: NodeEventCallback): ForceGraphInstance; + onNodeRightClick(callback: NodeEventCallback): ForceGraphInstance; + onNodeHover(callback: (node?: GraphNodeObject, previousNode?: GraphNodeObject) => void): ForceGraphInstance; + onNodeDrag(callback: NodeEventCallback): ForceGraphInstance; + onNodeDragEnd(callback: NodeEventCallback): ForceGraphInstance; + onLinkClick(callback: LinkEventCallback): ForceGraphInstance; + onLinkRightClick(callback: LinkEventCallback): ForceGraphInstance; + onLinkHover(callback: (link?: GraphLinkObject, previousLink?: GraphLinkObject) => void): ForceGraphInstance; + linkHoverPrecision(precision?: number): ForceGraphInstance & number; + enableNodeDrag(enable?: boolean): ForceGraphInstance & boolean; + enableZoomPanInteraction(enable?: boolean): ForceGraphInstance & boolean; + enablePointerInteraction(enable?: boolean): ForceGraphInstance & boolean; + } } -export = ForceGraph; +export default ForceGraph;