mirror of
https://github.com/gosticks/DefinitelyTyped.git
synced 2026-08-13 21:40:21 +00:00
Represent ForceGraph as interface
This commit is contained in:
Peter Kimberley
@@ -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')
|
||||
|
||||
Vendored
+80
-75
@@ -3,7 +3,7 @@
|
||||
// Definitions by: Peter Kimberley <https://github.com/p-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<T> = ((node: GraphNodeObject) => T);
|
||||
type NodeCanvasCallbackFn = ((node: GraphNodeObject, canvasContext: CanvasRenderingContext2D, globalScale: number) => void);
|
||||
type NodeEventCallback = ((node: GraphNodeObject) => void);
|
||||
type NodeAccessorFn<T> = (node: GraphNodeObject) => T;
|
||||
type NodeCanvasCallbackFn = (node: GraphNodeObject, canvasContext: CanvasRenderingContext2D, globalScale: number) => void;
|
||||
type NodeEventCallback = (node: GraphNodeObject) => void;
|
||||
|
||||
type LinkAccessorFn<T> = ((link: GraphLink) => T);
|
||||
type LinkCanvasCallbackFn = ((link: GraphLinkObject, canvasContext: CanvasRenderingContext2D, globalScale: number) => void);
|
||||
type LinkEventCallback = ((link: GraphLinkObject) => void);
|
||||
type LinkAccessorFn<T> = (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<number>): ForceGraph & (number | string | NodeAccessorFn<number>);
|
||||
function nodeLabel(label?: string | NodeAccessorFn<string>): ForceGraph & (string | NodeAccessorFn<string>);
|
||||
function nodeColor(color?: string | NodeAccessorFn<string>): ForceGraph & (string | NodeAccessorFn<string>);
|
||||
function nodeAutoColorBy(attribute?: string | NodeAccessorFn<string>): ForceGraph & (string | NodeAccessorFn<string>);
|
||||
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<string>): ForceGraph & (string | LinkAccessorFn<string>);
|
||||
function linkVisibility(visible?: boolean | string | LinkAccessorFn<boolean>): ForceGraph & (boolean | string | LinkAccessorFn<boolean>);
|
||||
function linkColor(color?: string | LinkAccessorFn<string>): ForceGraph & (string | LinkAccessorFn<string>);
|
||||
function linkAutoColorBy(attribute?: string | LinkAccessorFn<string>): ForceGraph & (string | LinkAccessorFn<string>);
|
||||
function linkWidth(width?: number | string | LinkAccessorFn<number>): ForceGraph & (number | string | LinkAccessorFn<number>);
|
||||
function linkCurvature(curvature?: LinkCurvatureType | string | LinkAccessorFn<LinkCurvatureType>): ForceGraph;
|
||||
function linkCanvasObject(callback?: NodeCanvasCallbackFn): ForceGraph & NodeCanvasCallbackFn;
|
||||
function linkDirectionalArrowLength(length?: number | string | LinkAccessorFn<number>): ForceGraph & (number | string | LinkAccessorFn<number>);
|
||||
function linkDirectionalArrowColor(color?: string | LinkAccessorFn<string>): ForceGraph & (string | LinkAccessorFn<string>);
|
||||
function linkDirectionalArrowRelPos(ratio?: number | string | LinkAccessorFn<number>): ForceGraph & (number | string | LinkAccessorFn<number>);
|
||||
function linkDirectionalParticles(particleCount?: number | string | LinkAccessorFn<number>): ForceGraph & (number | string | LinkAccessorFn<number>);
|
||||
function linkDirectionalParticleSpeed(speed?: number | string | LinkAccessorFn<number>): ForceGraph & (number | string | LinkAccessorFn<number>);
|
||||
function linkDirectionalParticleWidth(width?: number | string | LinkAccessorFn<number>): ForceGraph & (number | string | LinkAccessorFn<number>);
|
||||
function linkDirectionalParticleColor(color?: string | LinkAccessorFn<string>): ForceGraph & (string | LinkAccessorFn<string>);
|
||||
// Node styling
|
||||
nodeRelSize(size?: number): ForceGraphInstance & number;
|
||||
nodeVal(val?: number | string | NodeAccessorFn<number>): ForceGraphInstance & (number | string | NodeAccessorFn<number>);
|
||||
nodeLabel(label?: string | NodeAccessorFn<string | undefined>): ForceGraphInstance & (string | NodeAccessorFn<string | undefined>);
|
||||
nodeColor(color?: string | NodeAccessorFn<string>): ForceGraphInstance & (string | NodeAccessorFn<string>);
|
||||
nodeAutoColorBy(attribute?: string | NodeAccessorFn<string>): ForceGraphInstance & (string | NodeAccessorFn<string>);
|
||||
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<string | undefined>): ForceGraphInstance & (string | LinkAccessorFn<string | undefined>);
|
||||
linkVisibility(visible?: boolean | string | LinkAccessorFn<boolean>): ForceGraphInstance & (boolean | string | LinkAccessorFn<boolean>);
|
||||
linkColor(color?: string | LinkAccessorFn<string>): ForceGraphInstance & (string | LinkAccessorFn<string>);
|
||||
linkAutoColorBy(attribute?: string | LinkAccessorFn<string>): ForceGraphInstance & (string | LinkAccessorFn<string>);
|
||||
linkWidth(width?: number | string | LinkAccessorFn<number>): ForceGraphInstance & (number | string | LinkAccessorFn<number>);
|
||||
linkCurvature(curvature?: LinkCurvatureType | string | LinkAccessorFn<LinkCurvatureType>): ForceGraphInstance;
|
||||
linkCanvasObject(callback?: LinkCanvasCallbackFn): ForceGraphInstance & LinkCanvasCallbackFn;
|
||||
linkDirectionalArrowLength(length?: number | string | LinkAccessorFn<number>): ForceGraphInstance & (number | string | LinkAccessorFn<number>);
|
||||
linkDirectionalArrowColor(color?: string | LinkAccessorFn<string>): ForceGraphInstance & (string | LinkAccessorFn<string>);
|
||||
linkDirectionalArrowRelPos(ratio?: number | string | LinkAccessorFn<number>): ForceGraphInstance & (number | string | LinkAccessorFn<number>);
|
||||
linkDirectionalParticles(particleCount?: number | string | LinkAccessorFn<number>): ForceGraphInstance & (number | string | LinkAccessorFn<number>);
|
||||
linkDirectionalParticleSpeed(speed?: number | string | LinkAccessorFn<number>): ForceGraphInstance & (number | string | LinkAccessorFn<number>);
|
||||
linkDirectionalParticleWidth(width?: number | string | LinkAccessorFn<number>): ForceGraphInstance & (number | string | LinkAccessorFn<number>);
|
||||
linkDirectionalParticleColor(color?: string | LinkAccessorFn<string>): ForceGraphInstance & (string | LinkAccessorFn<string>);
|
||||
|
||||
// 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;
|
||||
|
||||
Reference in New Issue
Block a user