From 6c4d1c85522af9a770a22c8d0af0179cdc249563 Mon Sep 17 00:00:00 2001 From: Peter Kimberley Date: Sun, 3 Feb 2019 20:50:24 +1100 Subject: [PATCH] Initial commit --- types/force-graph/force-graph-tests.ts | 69 +++++++++++++ types/force-graph/index.d.ts | 136 +++++++++++++++++++++++++ types/force-graph/tsconfig.json | 27 +++++ types/force-graph/tslint.json | 3 + 4 files changed, 235 insertions(+) create mode 100644 types/force-graph/force-graph-tests.ts create mode 100644 types/force-graph/index.d.ts create mode 100644 types/force-graph/tsconfig.json create mode 100644 types/force-graph/tslint.json diff --git a/types/force-graph/force-graph-tests.ts b/types/force-graph/force-graph-tests.ts new file mode 100644 index 0000000000..7e52dc3f6f --- /dev/null +++ b/types/force-graph/force-graph-tests.ts @@ -0,0 +1,69 @@ +import * as ForceGraph from 'force-graph'; + +const graph = ForceGraph(new HTMLElement()); + +graph + .graphData([]) + .nodeId('testNode') + .linkSource('source') + .linkTarget('target') + .width(100) + .height(100) + .backgroundColor('#FFF') + .nodeRelSize(4) + .nodeVal('val') + .nodeLabel((node) => node.name) + .nodeColor('color') + .nodeAutoColorBy('color') + .nodeCanvasObject((node, ctx, scale) => {}) + .linkLabel('name') + .linkVisibility(true) + .linkColor('color') + .linkAutoColorBy('type') + .linkWidth(1) + .linkCurvature(ForceGraph.LinkCurvatureType.Straight) + .linkCanvasObject((link, ctx, scale) => {}) + .linkDirectionalArrowLength(0) + .linkDirectionalArrowColor('color') + .linkDirectionalArrowRelPos(0.5) + .linkDirectionalParticles(0) + .linkDirectionalParticleSpeed(0.01) + .linkDirectionalParticleWidth(4) + .linkDirectionalParticleColor('color'); + +graph.pauseAnimation(); +graph.resumeAnimation(); +graph.centerAt(0, 0, 0); +graph.zoom(1.0, 0); + +graph + .dagMode('td') + .dagLevelDistance(1) + .d3AlphaDecay(0.0228) + .d3VelocityDecay(0.4) + .d3Force('link') + .d3Force('custom', (node) => 1) + .warmupTicks(0) + .cooldownTicks(Infinity) + .cooldownTime(15000) + .onEngineTick(() => {}) + .onEngineStop(() => {}); + +graph + .onNodeClick(() => {}) + .onNodeRightClick(() => {}) + .onNodeHover(() => {}) + .onNodeDrag(() => {}) + .onNodeDragEnd(() => {}) + .onLinkClick(() => {}) + .onLinkRightClick(() => {}) + .onLinkHover(() => {}) + .linkHoverPrecision(4) + .enableNodeDrag(true) + .enableZoomPanInteraction(true) + .enablePointerInteraction(true); + +// Test a property getter +const nodeDraggingEnabled: boolean = graph.enableNodeDrag(); +if (typeof nodeDraggingEnabled !== "boolean") + throw new Error('ForceGraph.enableNodeDrag() did not return a result of type boolean as expected'); diff --git a/types/force-graph/index.d.ts b/types/force-graph/index.d.ts new file mode 100644 index 0000000000..c34c2bf11a --- /dev/null +++ b/types/force-graph/index.d.ts @@ -0,0 +1,136 @@ +// Type definitions for force-graph 1.x +// Project: https://github.com/vasturiano/force-graph +// Definitions by: Peter Kimberley +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped + +declare function ForceGraph(element: HTMLElement): void; + +declare namespace ForceGraph { + /** + * Interfaces + */ + + interface GraphData { + nodes: GraphNode[]; + links: GraphLink[]; + } + + interface GraphNode { + id: string; + name: string; + val: any; + } + + interface GraphNodeObject extends GraphNode { + x: number; + y: number; + index: number; + } + + interface GraphLink { + source: string | GraphNode; + target: string | GraphNode; + } + + interface GraphLinkObject extends GraphLink { + source: GraphNode; + target: GraphNode; + } + + /** + * Enums + */ + + enum LinkCurvatureType { + Straight = 0, + HalfLineLength = 1 + } + + /** + * Types + */ + + 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 DagMode = 'td' | 'bu' | 'lr' | 'rl' | 'radialout' | 'radialin'; + 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; + + // Container layout + function width(width?: number): ForceGraph & number; + function height(height?: number): ForceGraph & number; + function backgroundColor(color?: string): ForceGraph & 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; + + // 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); + + // 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; + + // 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; + + // 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; +} + +export = ForceGraph; diff --git a/types/force-graph/tsconfig.json b/types/force-graph/tsconfig.json new file mode 100644 index 0000000000..f56bd2e24e --- /dev/null +++ b/types/force-graph/tsconfig.json @@ -0,0 +1,27 @@ +{ + "compilerOptions": { + "module": "commonjs", + "lib": [ + "es6", + "dom" + ], + "noImplicitAny": true, + "noImplicitThis": true, + "strictNullChecks": false, + "strictFunctionTypes": true, + "baseUrl": "../", + "typeRoots": [ + "../" + ], + "types": [], + "noEmit": true, + "forceConsistentCasingInFileNames": true + }, + "exclude": [ + "node_modules" + ], + "files": [ + "index.d.ts", + "force-graph-tests.ts" + ] +} diff --git a/types/force-graph/tslint.json b/types/force-graph/tslint.json new file mode 100644 index 0000000000..e60c15844f --- /dev/null +++ b/types/force-graph/tslint.json @@ -0,0 +1,3 @@ +{ + "extends": "dtslint/dt.json" +} \ No newline at end of file