From 1da2bd0daf5e8d9d4d83b393a12475d86e3cbf69 Mon Sep 17 00:00:00 2001 From: Dom Parfitt Date: Wed, 10 Oct 2018 20:07:13 +0100 Subject: [PATCH 01/32] Initial commit --- types/d3-graphviz/d3-graphviz-tests.ts | 0 types/d3-graphviz/index.d.ts | 39 ++++++++++++++++++++++++++ types/d3-graphviz/tsconfig.json | 22 +++++++++++++++ types/d3-graphviz/tslint.json | 1 + 4 files changed, 62 insertions(+) create mode 100644 types/d3-graphviz/d3-graphviz-tests.ts create mode 100644 types/d3-graphviz/index.d.ts create mode 100644 types/d3-graphviz/tsconfig.json create mode 100644 types/d3-graphviz/tslint.json diff --git a/types/d3-graphviz/d3-graphviz-tests.ts b/types/d3-graphviz/d3-graphviz-tests.ts new file mode 100644 index 0000000000..e69de29bb2 diff --git a/types/d3-graphviz/index.d.ts b/types/d3-graphviz/index.d.ts new file mode 100644 index 0000000000..8dc81e1f1c --- /dev/null +++ b/types/d3-graphviz/index.d.ts @@ -0,0 +1,39 @@ +// Type definitions for d3-graphviz 2.6 +// Project: https://github.com/magjac/d3-graphviz +// Definitions by: Dom Parfitt +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped + +/*~ If this module is a UMD module that exposes a global variable 'myLib' when + *~ loaded outside a module loader environment, declare that global here. + *~ Otherwise, delete this declaration. + */ +export as namespace myLib; + +/*~ If this module has methods, declare them as functions like so. + */ +export function myMethod(a: string): string; +export function myOtherMethod(a: number): number; + +/*~ You can declare types that are available via importing the module */ +export interface someType { + name: string; + length: number; + extras?: string[]; +} + +/*~ You can declare properties of the module using const, let, or var */ +export const myField: number; + +/*~ If there are types, properties, or methods inside dotted names + *~ of the module, declare them inside a 'namespace'. + */ +export namespace subProp { + /*~ For example, given this definition, someone could write: + *~ import { subProp } from 'yourModule'; + *~ subProp.foo(); + *~ or + *~ import * as yourMod from 'yourModule'; + *~ yourMod.subProp.foo(); + */ + export function foo(): void; +} \ No newline at end of file diff --git a/types/d3-graphviz/tsconfig.json b/types/d3-graphviz/tsconfig.json new file mode 100644 index 0000000000..42e41a7b1f --- /dev/null +++ b/types/d3-graphviz/tsconfig.json @@ -0,0 +1,22 @@ +{ + "compilerOptions": { + "module": "commonjs", + "lib": [ + "es6" + ], + "noImplicitAny": true, + "noImplicitThis": true, + "strictNullChecks": true, + "baseUrl": "../", + "typeRoots": [ + "../" + ], + "types": [], + "noEmit": true, + "forceConsistentCasingInFileNames": true + }, + "files": [ + "index.d.ts", + "d3-graphviz-tests.ts" + ] +} diff --git a/types/d3-graphviz/tslint.json b/types/d3-graphviz/tslint.json new file mode 100644 index 0000000000..3db14f85ea --- /dev/null +++ b/types/d3-graphviz/tslint.json @@ -0,0 +1 @@ +{ "extends": "dtslint/dt.json" } From b9679651519dcd925a489548d30a0c8e4f7144f2 Mon Sep 17 00:00:00 2001 From: Dom Parfitt Date: Thu, 11 Oct 2018 21:22:31 +0100 Subject: [PATCH 02/32] Began defining functions --- types/d3-graphviz/index.d.ts | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/types/d3-graphviz/index.d.ts b/types/d3-graphviz/index.d.ts index 8dc81e1f1c..7adf792638 100644 --- a/types/d3-graphviz/index.d.ts +++ b/types/d3-graphviz/index.d.ts @@ -3,6 +3,24 @@ // Definitions by: Dom Parfitt // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped +export function extractElementData(element: any): any; +export function extractAllElementsData(element: any): any; +export function createElement(data: any): any; +export function createElementWithAttributes(data: any): any; +export function replaceElement(element: any, data: any): any; +export function insertElementData(element: any, datum: any): void; +export function insertAllElementsData(element: any, datum: any): void; +export function insertChildren(element: any, index: any): void; +export function attributeElement(data: any): void; +export function shallowCopyObject(obj: any): any; +export function roundTo4Decimals(x: number): number; +// var zoom$1 = function (enable) +export function createZoomBehavior(): any; +export function getTranslatedZoomTransform(selection$$1: any): any; +export function translateZoomBehaviorTransform(selection$$1: any): any; + +// ======================================================================== + /*~ If this module is a UMD module that exposes a global variable 'myLib' when *~ loaded outside a module loader environment, declare that global here. *~ Otherwise, delete this declaration. From 0f692416dca28aaa4f9f04203853735c7e9d8734 Mon Sep 17 00:00:00 2001 From: Dom Parfitt Date: Fri, 12 Oct 2018 11:17:01 +0100 Subject: [PATCH 03/32] Added top level exported function, options interface and Graphviz object interface --- types/d3-graphviz/index.d.ts | 103 +++++++++++++++++++---------------- 1 file changed, 57 insertions(+), 46 deletions(-) diff --git a/types/d3-graphviz/index.d.ts b/types/d3-graphviz/index.d.ts index 7adf792638..e1e7bd0cd9 100644 --- a/types/d3-graphviz/index.d.ts +++ b/types/d3-graphviz/index.d.ts @@ -3,55 +3,66 @@ // Definitions by: Dom Parfitt // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped -export function extractElementData(element: any): any; -export function extractAllElementsData(element: any): any; -export function createElement(data: any): any; -export function createElementWithAttributes(data: any): any; -export function replaceElement(element: any, data: any): any; -export function insertElementData(element: any, datum: any): void; -export function insertAllElementsData(element: any, datum: any): void; -export function insertChildren(element: any, index: any): void; -export function attributeElement(data: any): void; -export function shallowCopyObject(obj: any): any; -export function roundTo4Decimals(x: number): number; -// var zoom$1 = function (enable) -export function createZoomBehavior(): any; -export function getTranslatedZoomTransform(selection$$1: any): any; -export function translateZoomBehaviorTransform(selection$$1: any): any; - -// ======================================================================== - -/*~ If this module is a UMD module that exposes a global variable 'myLib' when - *~ loaded outside a module loader environment, declare that global here. - *~ Otherwise, delete this declaration. +/** + * + * @param selector + * @param options */ -export as namespace myLib; +export function graphviz(selector: string, options: IGraphvizOptions | boolean): IGraphviz; -/*~ If this module has methods, declare them as functions like so. - */ -export function myMethod(a: string): string; -export function myOtherMethod(a: number): number; - -/*~ You can declare types that are available via importing the module */ -export interface someType { - name: string; - length: number; - extras?: string[]; +export interface IGraphvizOptions { + useWorker?: boolean, + engine?: string, + totalMemory?: number, + keyMode?: string, + fade?: boolean, + tweenPaths?: boolean, + tweenShapes?: boolean, + convertEqualSidedPolygons?: boolean, + tweenPrecision?: number, + growEnteringEdges?: boolean, + zoom?: boolean, + zoomScaleExtent?: number[], + zoomTranslateExtent?: number[][], + width?: number, + height?: number, + scale?: number, + fit?: boolean, } -/*~ You can declare properties of the module using const, let, or var */ -export const myField: number; +export interface IGraphviz { + engine(engine: string): IGraphviz; + addImage(path: any, width: any, height: any): any; + totalMemory(size: number): IGraphviz; + keyMode(keyMode: any): any; + fade(enable: boolean): IGraphviz; + tweenPaths(enable: boolean): IGraphviz; + tweenShapes(enable: boolean): IGraphviz; + convertEqualSidedPolygons(enable: boolean): IGraphviz; + tweenPrecision(precision: number): IGraphviz; + growEnteringEdges(enable: boolean): IGraphviz; + zoom(enable: boolean): IGraphviz; + resetZoom(transition: any): any; + zoomBehavior(): any; + zoomSelection(): any; + zoomScaleExtent(extent: number[]): IGraphviz; + zoomTranslateExtent(extent: number[][]): IGraphviz; + render(callback: any): IGraphviz; + dot: any; + data(): any; + renderDot(src: string, callback: any): any; + transition: any; + active(name: any): any; + options(options: IGraphvizOptions | undefined): IGraphviz; + width(width: number): IGraphviz; + height(height: number): IGraphviz; + scale(scale: number): IGraphviz; + fit(fit: boolean): IGraphviz; + attributer: any; + on(typenames: string, callback: () => void): any; + onerror: any; + logEvents(enable: boolean): IGraphviz; + drawEdge: any; + updateDrawnEdge(x1: any, x2: any, y1: any, y2: any, attributes?: any, options?: any): any; -/*~ If there are types, properties, or methods inside dotted names - *~ of the module, declare them inside a 'namespace'. - */ -export namespace subProp { - /*~ For example, given this definition, someone could write: - *~ import { subProp } from 'yourModule'; - *~ subProp.foo(); - *~ or - *~ import * as yourMod from 'yourModule'; - *~ yourMod.subProp.foo(); - */ - export function foo(): void; } \ No newline at end of file From b64b97aaa692ebc73c6619386825b34096822e5b Mon Sep 17 00:00:00 2001 From: Dom Parfitt Date: Fri, 12 Oct 2018 11:59:11 +0100 Subject: [PATCH 04/32] Added more definitions --- types/d3-graphviz/index.d.ts | 45 ++++++++++++++++++++++++++++++------ 1 file changed, 38 insertions(+), 7 deletions(-) diff --git a/types/d3-graphviz/index.d.ts b/types/d3-graphviz/index.d.ts index e1e7bd0cd9..7fdd4b2244 100644 --- a/types/d3-graphviz/index.d.ts +++ b/types/d3-graphviz/index.d.ts @@ -1,8 +1,11 @@ +import { IEdgeOptions, IGraphviz, INodeOptions } from './index.d'; // Type definitions for d3-graphviz 2.6 // Project: https://github.com/magjac/d3-graphviz // Definitions by: Dom Parfitt // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped +import { ZoomBehavior } from 'd3-zoom' + /** * * @param selector @@ -30,9 +33,28 @@ export interface IGraphvizOptions { fit?: boolean, } +export interface IEdgeAttributes { + style: any; + URL: any; + tooltip: any; +} + +export interface IEdgeOptions { + shortening: number; +} + +export interface INodeAttributes { + URL: any; + tooltip: any; +} + +export interface INodeOptions { + +} + export interface IGraphviz { engine(engine: string): IGraphviz; - addImage(path: any, width: any, height: any): any; + addImage(path: string, width: number, height: number): IGraphviz; totalMemory(size: number): IGraphviz; keyMode(keyMode: any): any; fade(enable: boolean): IGraphviz; @@ -43,11 +65,11 @@ export interface IGraphviz { growEnteringEdges(enable: boolean): IGraphviz; zoom(enable: boolean): IGraphviz; resetZoom(transition: any): any; - zoomBehavior(): any; - zoomSelection(): any; + zoomBehavior(): ZoomBehavior | null; + zoomSelection(): any | null; zoomScaleExtent(extent: number[]): IGraphviz; zoomTranslateExtent(extent: number[][]): IGraphviz; - render(callback: any): IGraphviz; + render(callback: Function): IGraphviz; dot: any; data(): any; renderDot(src: string, callback: any): any; @@ -62,7 +84,16 @@ export interface IGraphviz { on(typenames: string, callback: () => void): any; onerror: any; logEvents(enable: boolean): IGraphviz; - drawEdge: any; - updateDrawnEdge(x1: any, x2: any, y1: any, y2: any, attributes?: any, options?: any): any; - + drawEdge(x1: number, x2: number, y1: number, y2: number, attributes?: IEdgeAttributes, options?: IEdgeOptions): IGraphviz; + updateDrawnEdge(x1: number, x2: number, y1: number, y2: number, attributes?: IEdgeAttributes, options?: IEdgeOptions): IGraphviz; + moveDrawnEdgeEndPoint(x2: number, y2: number, options?: IEdgeOptions): IGraphviz; + insertDrawnEdge: any; + removeDrawnEdge: any; + drawnEdgeSelection(): any; + drawNode(x: number, y: number, nodeId: string, attributes?: INodeAttributes, options?: INodeOptions): IGraphviz; + updateDrawnNode(x: number, y: number, nodeId: string, attributes?: INodeAttributes, options?: INodeOptions): IGraphviz; + moveDrawnNode(x: number, y: number, options?: INodeOptions): IGraphviz; + inserDrawnNode: any; + removeDrawnNode: any; + drawnNodeSelection(): any; } \ No newline at end of file From 8d088a3d2ed1d8730d7db8d22a465fbbb8a955b3 Mon Sep 17 00:00:00 2001 From: Dom Parfitt Date: Fri, 12 Oct 2018 13:01:59 +0100 Subject: [PATCH 05/32] Added dom lib --- types/d3-graphviz/tsconfig.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/types/d3-graphviz/tsconfig.json b/types/d3-graphviz/tsconfig.json index 42e41a7b1f..e33601771b 100644 --- a/types/d3-graphviz/tsconfig.json +++ b/types/d3-graphviz/tsconfig.json @@ -2,7 +2,8 @@ "compilerOptions": { "module": "commonjs", "lib": [ - "es6" + "es6", + "dom" ], "noImplicitAny": true, "noImplicitThis": true, From a07b85a68ffbc759abb2e45f880dc4d3ee107d72 Mon Sep 17 00:00:00 2001 From: Dom Parfitt Date: Fri, 12 Oct 2018 13:02:14 +0100 Subject: [PATCH 06/32] Added more definitions --- types/d3-graphviz/index.d.ts | 23 ++++++++++++----------- 1 file changed, 12 insertions(+), 11 deletions(-) diff --git a/types/d3-graphviz/index.d.ts b/types/d3-graphviz/index.d.ts index 7fdd4b2244..d29861a500 100644 --- a/types/d3-graphviz/index.d.ts +++ b/types/d3-graphviz/index.d.ts @@ -1,10 +1,11 @@ -import { IEdgeOptions, IGraphviz, INodeOptions } from './index.d'; // Type definitions for d3-graphviz 2.6 // Project: https://github.com/magjac/d3-graphviz // Definitions by: Dom Parfitt // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped import { ZoomBehavior } from 'd3-zoom' +import { Selection } from 'd3-selection' + /** * @@ -56,7 +57,7 @@ export interface IGraphviz { engine(engine: string): IGraphviz; addImage(path: string, width: number, height: number): IGraphviz; totalMemory(size: number): IGraphviz; - keyMode(keyMode: any): any; + keyMode(keyMode: string): IGraphviz; fade(enable: boolean): IGraphviz; tweenPaths(enable: boolean): IGraphviz; tweenShapes(enable: boolean): IGraphviz; @@ -70,9 +71,9 @@ export interface IGraphviz { zoomScaleExtent(extent: number[]): IGraphviz; zoomTranslateExtent(extent: number[][]): IGraphviz; render(callback: Function): IGraphviz; - dot: any; + dot(src: any, callback: () => void): any; data(): any; - renderDot(src: string, callback: any): any; + renderDot(src: string, callback: any): IGraphviz; transition: any; active(name: any): any; options(options: IGraphvizOptions | undefined): IGraphviz; @@ -80,20 +81,20 @@ export interface IGraphviz { height(height: number): IGraphviz; scale(scale: number): IGraphviz; fit(fit: boolean): IGraphviz; - attributer: any; + attributer(callback: any): any; on(typenames: string, callback: () => void): any; - onerror: any; + onerror(callback: any): any; logEvents(enable: boolean): IGraphviz; drawEdge(x1: number, x2: number, y1: number, y2: number, attributes?: IEdgeAttributes, options?: IEdgeOptions): IGraphviz; updateDrawnEdge(x1: number, x2: number, y1: number, y2: number, attributes?: IEdgeAttributes, options?: IEdgeOptions): IGraphviz; moveDrawnEdgeEndPoint(x2: number, y2: number, options?: IEdgeOptions): IGraphviz; - insertDrawnEdge: any; - removeDrawnEdge: any; + insertDrawnEdge(name: string): IGraphviz; + removeDrawnEdge(): IGraphviz; drawnEdgeSelection(): any; drawNode(x: number, y: number, nodeId: string, attributes?: INodeAttributes, options?: INodeOptions): IGraphviz; updateDrawnNode(x: number, y: number, nodeId: string, attributes?: INodeAttributes, options?: INodeOptions): IGraphviz; moveDrawnNode(x: number, y: number, options?: INodeOptions): IGraphviz; - inserDrawnNode: any; - removeDrawnNode: any; - drawnNodeSelection(): any; + inserDrawnNode(nodeId: string): IGraphviz; + removeDrawnNode(): IGraphviz; + drawnNodeSelection(): Selection; } \ No newline at end of file From cbbc39e185d96d299b688378fd13a20446bb1418 Mon Sep 17 00:00:00 2001 From: Dom Parfitt Date: Fri, 12 Oct 2018 13:04:34 +0100 Subject: [PATCH 07/32] Updated config --- types/d3-graphviz/tsconfig.json | 1 + 1 file changed, 1 insertion(+) diff --git a/types/d3-graphviz/tsconfig.json b/types/d3-graphviz/tsconfig.json index e33601771b..55afef6cff 100644 --- a/types/d3-graphviz/tsconfig.json +++ b/types/d3-graphviz/tsconfig.json @@ -8,6 +8,7 @@ "noImplicitAny": true, "noImplicitThis": true, "strictNullChecks": true, + "strictFunctionTypes": true, "baseUrl": "../", "typeRoots": [ "../" From 55dc1a3e412643401220300035bf939315ab5bc3 Mon Sep 17 00:00:00 2001 From: Dom Parfitt Date: Fri, 12 Oct 2018 13:06:33 +0100 Subject: [PATCH 08/32] Added required TS version --- types/d3-graphviz/index.d.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/types/d3-graphviz/index.d.ts b/types/d3-graphviz/index.d.ts index d29861a500..9429cc7ae9 100644 --- a/types/d3-graphviz/index.d.ts +++ b/types/d3-graphviz/index.d.ts @@ -2,6 +2,7 @@ // Project: https://github.com/magjac/d3-graphviz // Definitions by: Dom Parfitt // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped +// TypeScript Version: 2.3 import { ZoomBehavior } from 'd3-zoom' import { Selection } from 'd3-selection' From 37a35d669c541355565c9191df34a18631fac4d3 Mon Sep 17 00:00:00 2001 From: Dom Parfitt Date: Fri, 12 Oct 2018 13:59:08 +0100 Subject: [PATCH 09/32] Updated some parameters to be optional --- types/d3-graphviz/index.d.ts | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/types/d3-graphviz/index.d.ts b/types/d3-graphviz/index.d.ts index 9429cc7ae9..52547bb101 100644 --- a/types/d3-graphviz/index.d.ts +++ b/types/d3-graphviz/index.d.ts @@ -7,13 +7,12 @@ import { ZoomBehavior } from 'd3-zoom' import { Selection } from 'd3-selection' - /** * * @param selector * @param options */ -export function graphviz(selector: string, options: IGraphvizOptions | boolean): IGraphviz; +export function graphviz(selector: string, options?: IGraphvizOptions | boolean): IGraphviz; export interface IGraphvizOptions { useWorker?: boolean, @@ -74,7 +73,7 @@ export interface IGraphviz { render(callback: Function): IGraphviz; dot(src: any, callback: () => void): any; data(): any; - renderDot(src: string, callback: any): IGraphviz; + renderDot(src: string, callback?: any): IGraphviz; transition: any; active(name: any): any; options(options: IGraphvizOptions | undefined): IGraphviz; From 7acb2d656f09f7e05d07364a7730a326ab0f8b9f Mon Sep 17 00:00:00 2001 From: Dom Parfitt Date: Fri, 12 Oct 2018 14:59:43 +0100 Subject: [PATCH 10/32] Updated definitions per API --- types/d3-graphviz/index.d.ts | 51 +++++++++++++++++++----------------- 1 file changed, 27 insertions(+), 24 deletions(-) diff --git a/types/d3-graphviz/index.d.ts b/types/d3-graphviz/index.d.ts index 52547bb101..aab3955658 100644 --- a/types/d3-graphviz/index.d.ts +++ b/types/d3-graphviz/index.d.ts @@ -7,6 +7,13 @@ import { ZoomBehavior } from 'd3-zoom' import { Selection } from 'd3-selection' +//This should be extending d3-selection, need to check it is correct +export interface ISelection extends Selection { + graphviz(options?: IGraphvizOptions | boolean): IGraphviz; + selectWithoutDataPropagation(): ISelection; +} + + /** * * @param selector @@ -34,7 +41,7 @@ export interface IGraphvizOptions { fit?: boolean, } -export interface IEdgeAttributes { +export interface IDotAttributes { style: any; URL: any; tooltip: any; @@ -44,55 +51,51 @@ export interface IEdgeOptions { shortening: number; } -export interface INodeAttributes { - URL: any; - tooltip: any; -} - export interface INodeOptions { } export interface IGraphviz { - engine(engine: string): IGraphviz; - addImage(path: string, width: number, height: number): IGraphviz; + engine(engine: string): IGraphviz; //engine should be an enum + addImage(path: string, width: number, height: number): IGraphviz; //Width & height can be strings, i.e. '100px' totalMemory(size: number): IGraphviz; - keyMode(keyMode: string): IGraphviz; + keyMode(keyMode: string): IGraphviz; //keyMode should be an enum fade(enable: boolean): IGraphviz; tweenPaths(enable: boolean): IGraphviz; tweenShapes(enable: boolean): IGraphviz; convertEqualSidedPolygons(enable: boolean): IGraphviz; - tweenPrecision(precision: number): IGraphviz; + tweenPrecision(precision: number): IGraphviz; //precision can be a string, i.e. '50%' growEnteringEdges(enable: boolean): IGraphviz; zoom(enable: boolean): IGraphviz; - resetZoom(transition: any): any; + resetZoom(transition?: any): any; zoomBehavior(): ZoomBehavior | null; zoomSelection(): any | null; - zoomScaleExtent(extent: number[]): IGraphviz; - zoomTranslateExtent(extent: number[][]): IGraphviz; - render(callback: Function): IGraphviz; - dot(src: any, callback: () => void): any; + zoomScaleExtent(extent?: number[]): IGraphviz; + zoomTranslateExtent(extent?: number[][]): IGraphviz; + render(callback?: Function): IGraphviz; + dot(src: any, callback?: () => void): IGraphviz; data(): any; renderDot(src: string, callback?: any): IGraphviz; - transition: any; - active(name: any): any; - options(options: IGraphvizOptions | undefined): IGraphviz; + transition(name: any): IGraphviz; + active(name?: any): any; //Returns a transition, what type? + options(): IGraphvizOptions; + options(options: IGraphvizOptions): IGraphviz; width(width: number): IGraphviz; height(height: number): IGraphviz; scale(scale: number): IGraphviz; fit(fit: boolean): IGraphviz; - attributer(callback: any): any; - on(typenames: string, callback: () => void): any; + attributer(callback: Function | null): IGraphviz; + on(typenames: string, callback?: () => void): any; onerror(callback: any): any; logEvents(enable: boolean): IGraphviz; - drawEdge(x1: number, x2: number, y1: number, y2: number, attributes?: IEdgeAttributes, options?: IEdgeOptions): IGraphviz; - updateDrawnEdge(x1: number, x2: number, y1: number, y2: number, attributes?: IEdgeAttributes, options?: IEdgeOptions): IGraphviz; + drawEdge(x1: number, x2: number, y1: number, y2: number, attributes?: IDotAttributes, options?: IEdgeOptions): IGraphviz; + updateDrawnEdge(x1: number, x2: number, y1: number, y2: number, attributes?: IDotAttributes, options?: IEdgeOptions): IGraphviz; moveDrawnEdgeEndPoint(x2: number, y2: number, options?: IEdgeOptions): IGraphviz; insertDrawnEdge(name: string): IGraphviz; removeDrawnEdge(): IGraphviz; drawnEdgeSelection(): any; - drawNode(x: number, y: number, nodeId: string, attributes?: INodeAttributes, options?: INodeOptions): IGraphviz; - updateDrawnNode(x: number, y: number, nodeId: string, attributes?: INodeAttributes, options?: INodeOptions): IGraphviz; + drawNode(x: number, y: number, nodeId: string, attributes?: IDotAttributes, options?: INodeOptions): IGraphviz; + updateDrawnNode(x: number, y: number, nodeId: string, attributes?: IDotAttributes, options?: INodeOptions): IGraphviz; moveDrawnNode(x: number, y: number, options?: INodeOptions): IGraphviz; inserDrawnNode(nodeId: string): IGraphviz; removeDrawnNode(): IGraphviz; From bde0d4ee2b9aa89b7905652ccdf1fd5506409b54 Mon Sep 17 00:00:00 2001 From: Dom Parfitt Date: Fri, 12 Oct 2018 15:49:18 +0100 Subject: [PATCH 11/32] Fixed selection extension methods --- types/d3-graphviz/index.d.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/types/d3-graphviz/index.d.ts b/types/d3-graphviz/index.d.ts index aab3955658..cfcde911be 100644 --- a/types/d3-graphviz/index.d.ts +++ b/types/d3-graphviz/index.d.ts @@ -7,13 +7,13 @@ import { ZoomBehavior } from 'd3-zoom' import { Selection } from 'd3-selection' -//This should be extending d3-selection, need to check it is correct -export interface ISelection extends Selection { - graphviz(options?: IGraphvizOptions | boolean): IGraphviz; - selectWithoutDataPropagation(): ISelection; +declare module 'd3-selection' { + interface Selection { + graphviz(options?: IGraphvizOptions | boolean): IGraphviz; + selectWithoutDataPropagation(): Selection; + } } - /** * * @param selector From 89691438b48dd31c9bf7cccc50779bfdacb70d29 Mon Sep 17 00:00:00 2001 From: Dom Parfitt Date: Fri, 12 Oct 2018 15:57:25 +0100 Subject: [PATCH 12/32] Added module declaration --- types/d3-graphviz/index.d.ts | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/types/d3-graphviz/index.d.ts b/types/d3-graphviz/index.d.ts index cfcde911be..f4904a8829 100644 --- a/types/d3-graphviz/index.d.ts +++ b/types/d3-graphviz/index.d.ts @@ -4,10 +4,12 @@ // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped // TypeScript Version: 2.3 +declare module 'd3-graphviz' { + import { ZoomBehavior } from 'd3-zoom' import { Selection } from 'd3-selection' -declare module 'd3-selection' { +module 'd3-selection' { interface Selection { graphviz(options?: IGraphvizOptions | boolean): IGraphviz; selectWithoutDataPropagation(): Selection; @@ -100,4 +102,5 @@ export interface IGraphviz { inserDrawnNode(nodeId: string): IGraphviz; removeDrawnNode(): IGraphviz; drawnNodeSelection(): Selection; -} \ No newline at end of file +} +} From 3c70f6db28885d730a4ce4656d0ccf8306cb5625 Mon Sep 17 00:00:00 2001 From: Dom Parfitt Date: Fri, 12 Oct 2018 15:58:58 +0100 Subject: [PATCH 13/32] Formatting --- types/d3-graphviz/index.d.ts | 190 +++++++++++++++++------------------ 1 file changed, 95 insertions(+), 95 deletions(-) diff --git a/types/d3-graphviz/index.d.ts b/types/d3-graphviz/index.d.ts index f4904a8829..c8eb54c06a 100644 --- a/types/d3-graphviz/index.d.ts +++ b/types/d3-graphviz/index.d.ts @@ -6,101 +6,101 @@ declare module 'd3-graphviz' { -import { ZoomBehavior } from 'd3-zoom' -import { Selection } from 'd3-selection' + import { ZoomBehavior } from 'd3-zoom' + import { Selection } from 'd3-selection' -module 'd3-selection' { - interface Selection { - graphviz(options?: IGraphvizOptions | boolean): IGraphviz; - selectWithoutDataPropagation(): Selection; + module 'd3-selection' { + interface Selection { + graphviz(options?: IGraphvizOptions | boolean): IGraphviz; + selectWithoutDataPropagation(): Selection; + } + } + + /** + * + * @param selector + * @param options + */ + export function graphviz(selector: string, options?: IGraphvizOptions | boolean): IGraphviz; + + export interface IGraphvizOptions { + useWorker?: boolean, + engine?: string, + totalMemory?: number, + keyMode?: string, + fade?: boolean, + tweenPaths?: boolean, + tweenShapes?: boolean, + convertEqualSidedPolygons?: boolean, + tweenPrecision?: number, + growEnteringEdges?: boolean, + zoom?: boolean, + zoomScaleExtent?: number[], + zoomTranslateExtent?: number[][], + width?: number, + height?: number, + scale?: number, + fit?: boolean, + } + + export interface IDotAttributes { + style: any; + URL: any; + tooltip: any; + } + + export interface IEdgeOptions { + shortening: number; + } + + export interface INodeOptions { + + } + + export interface IGraphviz { + engine(engine: string): IGraphviz; //engine should be an enum + addImage(path: string, width: number, height: number): IGraphviz; //Width & height can be strings, i.e. '100px' + totalMemory(size: number): IGraphviz; + keyMode(keyMode: string): IGraphviz; //keyMode should be an enum + fade(enable: boolean): IGraphviz; + tweenPaths(enable: boolean): IGraphviz; + tweenShapes(enable: boolean): IGraphviz; + convertEqualSidedPolygons(enable: boolean): IGraphviz; + tweenPrecision(precision: number): IGraphviz; //precision can be a string, i.e. '50%' + growEnteringEdges(enable: boolean): IGraphviz; + zoom(enable: boolean): IGraphviz; + resetZoom(transition?: any): any; + zoomBehavior(): ZoomBehavior | null; + zoomSelection(): any | null; + zoomScaleExtent(extent?: number[]): IGraphviz; + zoomTranslateExtent(extent?: number[][]): IGraphviz; + render(callback?: Function): IGraphviz; + dot(src: any, callback?: () => void): IGraphviz; + data(): any; + renderDot(src: string, callback?: any): IGraphviz; + transition(name: any): IGraphviz; + active(name?: any): any; //Returns a transition, what type? + options(): IGraphvizOptions; + options(options: IGraphvizOptions): IGraphviz; + width(width: number): IGraphviz; + height(height: number): IGraphviz; + scale(scale: number): IGraphviz; + fit(fit: boolean): IGraphviz; + attributer(callback: Function | null): IGraphviz; + on(typenames: string, callback?: () => void): any; + onerror(callback: any): any; + logEvents(enable: boolean): IGraphviz; + drawEdge(x1: number, x2: number, y1: number, y2: number, attributes?: IDotAttributes, options?: IEdgeOptions): IGraphviz; + updateDrawnEdge(x1: number, x2: number, y1: number, y2: number, attributes?: IDotAttributes, options?: IEdgeOptions): IGraphviz; + moveDrawnEdgeEndPoint(x2: number, y2: number, options?: IEdgeOptions): IGraphviz; + insertDrawnEdge(name: string): IGraphviz; + removeDrawnEdge(): IGraphviz; + drawnEdgeSelection(): any; + drawNode(x: number, y: number, nodeId: string, attributes?: IDotAttributes, options?: INodeOptions): IGraphviz; + updateDrawnNode(x: number, y: number, nodeId: string, attributes?: IDotAttributes, options?: INodeOptions): IGraphviz; + moveDrawnNode(x: number, y: number, options?: INodeOptions): IGraphviz; + inserDrawnNode(nodeId: string): IGraphviz; + removeDrawnNode(): IGraphviz; + drawnNodeSelection(): Selection; } } - -/** - * - * @param selector - * @param options - */ -export function graphviz(selector: string, options?: IGraphvizOptions | boolean): IGraphviz; - -export interface IGraphvizOptions { - useWorker?: boolean, - engine?: string, - totalMemory?: number, - keyMode?: string, - fade?: boolean, - tweenPaths?: boolean, - tweenShapes?: boolean, - convertEqualSidedPolygons?: boolean, - tweenPrecision?: number, - growEnteringEdges?: boolean, - zoom?: boolean, - zoomScaleExtent?: number[], - zoomTranslateExtent?: number[][], - width?: number, - height?: number, - scale?: number, - fit?: boolean, -} - -export interface IDotAttributes { - style: any; - URL: any; - tooltip: any; -} - -export interface IEdgeOptions { - shortening: number; -} - -export interface INodeOptions { - -} - -export interface IGraphviz { - engine(engine: string): IGraphviz; //engine should be an enum - addImage(path: string, width: number, height: number): IGraphviz; //Width & height can be strings, i.e. '100px' - totalMemory(size: number): IGraphviz; - keyMode(keyMode: string): IGraphviz; //keyMode should be an enum - fade(enable: boolean): IGraphviz; - tweenPaths(enable: boolean): IGraphviz; - tweenShapes(enable: boolean): IGraphviz; - convertEqualSidedPolygons(enable: boolean): IGraphviz; - tweenPrecision(precision: number): IGraphviz; //precision can be a string, i.e. '50%' - growEnteringEdges(enable: boolean): IGraphviz; - zoom(enable: boolean): IGraphviz; - resetZoom(transition?: any): any; - zoomBehavior(): ZoomBehavior | null; - zoomSelection(): any | null; - zoomScaleExtent(extent?: number[]): IGraphviz; - zoomTranslateExtent(extent?: number[][]): IGraphviz; - render(callback?: Function): IGraphviz; - dot(src: any, callback?: () => void): IGraphviz; - data(): any; - renderDot(src: string, callback?: any): IGraphviz; - transition(name: any): IGraphviz; - active(name?: any): any; //Returns a transition, what type? - options(): IGraphvizOptions; - options(options: IGraphvizOptions): IGraphviz; - width(width: number): IGraphviz; - height(height: number): IGraphviz; - scale(scale: number): IGraphviz; - fit(fit: boolean): IGraphviz; - attributer(callback: Function | null): IGraphviz; - on(typenames: string, callback?: () => void): any; - onerror(callback: any): any; - logEvents(enable: boolean): IGraphviz; - drawEdge(x1: number, x2: number, y1: number, y2: number, attributes?: IDotAttributes, options?: IEdgeOptions): IGraphviz; - updateDrawnEdge(x1: number, x2: number, y1: number, y2: number, attributes?: IDotAttributes, options?: IEdgeOptions): IGraphviz; - moveDrawnEdgeEndPoint(x2: number, y2: number, options?: IEdgeOptions): IGraphviz; - insertDrawnEdge(name: string): IGraphviz; - removeDrawnEdge(): IGraphviz; - drawnEdgeSelection(): any; - drawNode(x: number, y: number, nodeId: string, attributes?: IDotAttributes, options?: INodeOptions): IGraphviz; - updateDrawnNode(x: number, y: number, nodeId: string, attributes?: IDotAttributes, options?: INodeOptions): IGraphviz; - moveDrawnNode(x: number, y: number, options?: INodeOptions): IGraphviz; - inserDrawnNode(nodeId: string): IGraphviz; - removeDrawnNode(): IGraphviz; - drawnNodeSelection(): Selection; -} -} From f5735f792e2167eaee6b7ef7ab7b45f71e0298d0 Mon Sep 17 00:00:00 2001 From: Dom Parfitt Date: Fri, 12 Oct 2018 16:00:50 +0100 Subject: [PATCH 14/32] Updated names --- types/d3-graphviz/index.d.ts | 84 ++++++++++++++++++------------------ 1 file changed, 42 insertions(+), 42 deletions(-) diff --git a/types/d3-graphviz/index.d.ts b/types/d3-graphviz/index.d.ts index c8eb54c06a..9e4b62f104 100644 --- a/types/d3-graphviz/index.d.ts +++ b/types/d3-graphviz/index.d.ts @@ -11,7 +11,7 @@ declare module 'd3-graphviz' { module 'd3-selection' { interface Selection { - graphviz(options?: IGraphvizOptions | boolean): IGraphviz; + graphviz(options?: GraphvizOptions | boolean): Graphviz; selectWithoutDataPropagation(): Selection; } } @@ -21,9 +21,9 @@ declare module 'd3-graphviz' { * @param selector * @param options */ - export function graphviz(selector: string, options?: IGraphvizOptions | boolean): IGraphviz; + export function graphviz(selector: string, options?: GraphvizOptions | boolean): Graphviz; - export interface IGraphvizOptions { + export interface GraphvizOptions { useWorker?: boolean, engine?: string, totalMemory?: number, @@ -43,64 +43,64 @@ declare module 'd3-graphviz' { fit?: boolean, } - export interface IDotAttributes { + export interface DotAttributes { style: any; URL: any; tooltip: any; } - export interface IEdgeOptions { + export interface EdgeOptions { shortening: number; } - export interface INodeOptions { + export interface NodeOptions { } - export interface IGraphviz { - engine(engine: string): IGraphviz; //engine should be an enum - addImage(path: string, width: number, height: number): IGraphviz; //Width & height can be strings, i.e. '100px' - totalMemory(size: number): IGraphviz; - keyMode(keyMode: string): IGraphviz; //keyMode should be an enum - fade(enable: boolean): IGraphviz; - tweenPaths(enable: boolean): IGraphviz; - tweenShapes(enable: boolean): IGraphviz; - convertEqualSidedPolygons(enable: boolean): IGraphviz; - tweenPrecision(precision: number): IGraphviz; //precision can be a string, i.e. '50%' - growEnteringEdges(enable: boolean): IGraphviz; - zoom(enable: boolean): IGraphviz; + export interface Graphviz { + engine(engine: string): Graphviz; //engine should be an enum + addImage(path: string, width: number, height: number): Graphviz; //Width & height can be strings, i.e. '100px' + totalMemory(size: number): Graphviz; + keyMode(keyMode: string): Graphviz; //keyMode should be an enum + fade(enable: boolean): Graphviz; + tweenPaths(enable: boolean): Graphviz; + tweenShapes(enable: boolean): Graphviz; + convertEqualSidedPolygons(enable: boolean): Graphviz; + tweenPrecision(precision: number): Graphviz; //precision can be a string, i.e. '50%' + growEnteringEdges(enable: boolean): Graphviz; + zoom(enable: boolean): Graphviz; resetZoom(transition?: any): any; zoomBehavior(): ZoomBehavior | null; zoomSelection(): any | null; - zoomScaleExtent(extent?: number[]): IGraphviz; - zoomTranslateExtent(extent?: number[][]): IGraphviz; - render(callback?: Function): IGraphviz; - dot(src: any, callback?: () => void): IGraphviz; + zoomScaleExtent(extent?: number[]): Graphviz; + zoomTranslateExtent(extent?: number[][]): Graphviz; + render(callback?: Function): Graphviz; + dot(src: any, callback?: () => void): Graphviz; data(): any; - renderDot(src: string, callback?: any): IGraphviz; - transition(name: any): IGraphviz; + renderDot(src: string, callback?: any): Graphviz; + transition(name: any): Graphviz; active(name?: any): any; //Returns a transition, what type? - options(): IGraphvizOptions; - options(options: IGraphvizOptions): IGraphviz; - width(width: number): IGraphviz; - height(height: number): IGraphviz; - scale(scale: number): IGraphviz; - fit(fit: boolean): IGraphviz; - attributer(callback: Function | null): IGraphviz; + options(): GraphvizOptions; + options(options: GraphvizOptions): Graphviz; + width(width: number): Graphviz; + height(height: number): Graphviz; + scale(scale: number): Graphviz; + fit(fit: boolean): Graphviz; + attributer(callback: Function | null): Graphviz; on(typenames: string, callback?: () => void): any; onerror(callback: any): any; - logEvents(enable: boolean): IGraphviz; - drawEdge(x1: number, x2: number, y1: number, y2: number, attributes?: IDotAttributes, options?: IEdgeOptions): IGraphviz; - updateDrawnEdge(x1: number, x2: number, y1: number, y2: number, attributes?: IDotAttributes, options?: IEdgeOptions): IGraphviz; - moveDrawnEdgeEndPoint(x2: number, y2: number, options?: IEdgeOptions): IGraphviz; - insertDrawnEdge(name: string): IGraphviz; - removeDrawnEdge(): IGraphviz; + logEvents(enable: boolean): Graphviz; + drawEdge(x1: number, x2: number, y1: number, y2: number, attributes?: DotAttributes, options?: EdgeOptions): Graphviz; + updateDrawnEdge(x1: number, x2: number, y1: number, y2: number, attributes?: DotAttributes, options?: EdgeOptions): Graphviz; + moveDrawnEdgeEndPoint(x2: number, y2: number, options?: EdgeOptions): Graphviz; + insertDrawnEdge(name: string): Graphviz; + removeDrawnEdge(): Graphviz; drawnEdgeSelection(): any; - drawNode(x: number, y: number, nodeId: string, attributes?: IDotAttributes, options?: INodeOptions): IGraphviz; - updateDrawnNode(x: number, y: number, nodeId: string, attributes?: IDotAttributes, options?: INodeOptions): IGraphviz; - moveDrawnNode(x: number, y: number, options?: INodeOptions): IGraphviz; - inserDrawnNode(nodeId: string): IGraphviz; - removeDrawnNode(): IGraphviz; + drawNode(x: number, y: number, nodeId: string, attributes?: DotAttributes, options?: NodeOptions): Graphviz; + updateDrawnNode(x: number, y: number, nodeId: string, attributes?: DotAttributes, options?: NodeOptions): Graphviz; + moveDrawnNode(x: number, y: number, options?: NodeOptions): Graphviz; + inserDrawnNode(nodeId: string): Graphviz; + removeDrawnNode(): Graphviz; drawnNodeSelection(): Selection; } } From 52afe229919b363b5817b57ab17e85d37beece8c Mon Sep 17 00:00:00 2001 From: Dom Parfitt Date: Fri, 12 Oct 2018 16:12:21 +0100 Subject: [PATCH 15/32] Re-ordered to match the API with sections --- types/d3-graphviz/index.d.ts | 127 ++++++++++++++++++++++------------- 1 file changed, 80 insertions(+), 47 deletions(-) diff --git a/types/d3-graphviz/index.d.ts b/types/d3-graphviz/index.d.ts index 9e4b62f104..ebb97df2cb 100644 --- a/types/d3-graphviz/index.d.ts +++ b/types/d3-graphviz/index.d.ts @@ -23,6 +23,86 @@ declare module 'd3-graphviz' { */ export function graphviz(selector: string, options?: GraphvizOptions | boolean): Graphviz; + export interface Graphviz { + //Options + options(): GraphvizOptions; + options(options: GraphvizOptions): Graphviz; + + //Rendering + renderDot(src: string, callback?: any): Graphviz; + dot(src: any, callback?: () => void): Graphviz; + render(callback?: Function): Graphviz; + engine(engine: string): Graphviz; //engine should be an enum + onerror(callback: any): any; + + //Images + addImage(path: string, width: number, height: number): Graphviz; //Width & height can be strings, i.e. '100px' + + //Creating Transitions + transition(name: any): Graphviz; + active(name?: any): any; //Returns a transition, what type? + + //Controlling SVG and Graph Size + width(width: number): Graphviz; + height(height: number): Graphviz; + fit(fit: boolean): Graphviz; + scale(scale: number): Graphviz; + + //Control Flow + on(typenames: string, callback?: () => void): any; + logEvents(enable: boolean): Graphviz; + + //Controlling Fade + fade(enable: boolean): Graphviz; + + //Controlling Animated Growth of Entering Edges + growEnteringEdges(enable: boolean): Graphviz; + + //Controlling Path Tweening + tweenPaths(enable: boolean): Graphviz; + tweenPrecision(precision: number): Graphviz; //precision can be a string, i.e. '50%' + + //Controlling Shape Tweening + tweenShapes(enable: boolean): Graphviz; + convertEqualSidedPolygons(enable: boolean): Graphviz; + + //Controlling Panning & Zooming + zoom(enable: boolean): Graphviz; + zoomBehavior(): ZoomBehavior | null; + zoomSelection(): any | null; + zoomScaleExtent(extent?: number[]): Graphviz; + zoomTranslateExtent(extent?: number[][]): Graphviz; + resetZoom(transition?: any): any; + + //Maintaining Object Constancy + keyMode(keyMode: string): Graphviz; //keyMode should be an enum + + //Customizing Graph Attributes + attributer(callback: Function | null): Graphviz; + + //Accessing Extracted Data + data(): any; + + //Modifying an Existing Graph and Animating the Changes + //Edges + drawEdge(x1: number, x2: number, y1: number, y2: number, attributes?: DotAttributes, options?: EdgeOptions): Graphviz; + updateDrawnEdge(x1: number, x2: number, y1: number, y2: number, attributes?: DotAttributes, options?: EdgeOptions): Graphviz; + moveDrawnEdgeEndPoint(x2: number, y2: number, options?: EdgeOptions): Graphviz; + insertDrawnEdge(name: string): Graphviz; + removeDrawnEdge(): Graphviz; + drawnEdgeSelection(): any; + //Nodes + drawNode(x: number, y: number, nodeId: string, attributes?: DotAttributes, options?: NodeOptions): Graphviz; + updateDrawnNode(x: number, y: number, nodeId: string, attributes?: DotAttributes, options?: NodeOptions): Graphviz; + moveDrawnNode(x: number, y: number, options?: NodeOptions): Graphviz; + inserDrawnNode(nodeId: string): Graphviz; + removeDrawnNode(): Graphviz; + drawnNodeSelection(): Selection; + + //Large Graphs + totalMemory(size: number): Graphviz; + } + export interface GraphvizOptions { useWorker?: boolean, engine?: string, @@ -56,51 +136,4 @@ declare module 'd3-graphviz' { export interface NodeOptions { } - - export interface Graphviz { - engine(engine: string): Graphviz; //engine should be an enum - addImage(path: string, width: number, height: number): Graphviz; //Width & height can be strings, i.e. '100px' - totalMemory(size: number): Graphviz; - keyMode(keyMode: string): Graphviz; //keyMode should be an enum - fade(enable: boolean): Graphviz; - tweenPaths(enable: boolean): Graphviz; - tweenShapes(enable: boolean): Graphviz; - convertEqualSidedPolygons(enable: boolean): Graphviz; - tweenPrecision(precision: number): Graphviz; //precision can be a string, i.e. '50%' - growEnteringEdges(enable: boolean): Graphviz; - zoom(enable: boolean): Graphviz; - resetZoom(transition?: any): any; - zoomBehavior(): ZoomBehavior | null; - zoomSelection(): any | null; - zoomScaleExtent(extent?: number[]): Graphviz; - zoomTranslateExtent(extent?: number[][]): Graphviz; - render(callback?: Function): Graphviz; - dot(src: any, callback?: () => void): Graphviz; - data(): any; - renderDot(src: string, callback?: any): Graphviz; - transition(name: any): Graphviz; - active(name?: any): any; //Returns a transition, what type? - options(): GraphvizOptions; - options(options: GraphvizOptions): Graphviz; - width(width: number): Graphviz; - height(height: number): Graphviz; - scale(scale: number): Graphviz; - fit(fit: boolean): Graphviz; - attributer(callback: Function | null): Graphviz; - on(typenames: string, callback?: () => void): any; - onerror(callback: any): any; - logEvents(enable: boolean): Graphviz; - drawEdge(x1: number, x2: number, y1: number, y2: number, attributes?: DotAttributes, options?: EdgeOptions): Graphviz; - updateDrawnEdge(x1: number, x2: number, y1: number, y2: number, attributes?: DotAttributes, options?: EdgeOptions): Graphviz; - moveDrawnEdgeEndPoint(x2: number, y2: number, options?: EdgeOptions): Graphviz; - insertDrawnEdge(name: string): Graphviz; - removeDrawnEdge(): Graphviz; - drawnEdgeSelection(): any; - drawNode(x: number, y: number, nodeId: string, attributes?: DotAttributes, options?: NodeOptions): Graphviz; - updateDrawnNode(x: number, y: number, nodeId: string, attributes?: DotAttributes, options?: NodeOptions): Graphviz; - moveDrawnNode(x: number, y: number, options?: NodeOptions): Graphviz; - inserDrawnNode(nodeId: string): Graphviz; - removeDrawnNode(): Graphviz; - drawnNodeSelection(): Selection; - } } From 6167bf2f9c366ae7c1cb39fb3197721c30dd5d3b Mon Sep 17 00:00:00 2001 From: Dom Parfitt Date: Fri, 12 Oct 2018 16:14:43 +0100 Subject: [PATCH 16/32] Added Engine type --- types/d3-graphviz/index.d.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/types/d3-graphviz/index.d.ts b/types/d3-graphviz/index.d.ts index ebb97df2cb..9c344995d4 100644 --- a/types/d3-graphviz/index.d.ts +++ b/types/d3-graphviz/index.d.ts @@ -32,7 +32,7 @@ declare module 'd3-graphviz' { renderDot(src: string, callback?: any): Graphviz; dot(src: any, callback?: () => void): Graphviz; render(callback?: Function): Graphviz; - engine(engine: string): Graphviz; //engine should be an enum + engine(engine: Engine): Graphviz; onerror(callback: any): any; //Images @@ -102,10 +102,12 @@ declare module 'd3-graphviz' { //Large Graphs totalMemory(size: number): Graphviz; } + + type Engine = 'circo' | 'dot' | 'fdp' | 'neato' | 'osage' | 'patchwork' | 'twopi'; export interface GraphvizOptions { useWorker?: boolean, - engine?: string, + engine?: Engine, totalMemory?: number, keyMode?: string, fade?: boolean, From 0fc3a2952152bfb9fdfe50d63b9e6021d6266ee0 Mon Sep 17 00:00:00 2001 From: Dom Parfitt Date: Fri, 12 Oct 2018 16:17:08 +0100 Subject: [PATCH 17/32] Added TypeNames type --- types/d3-graphviz/index.d.ts | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/types/d3-graphviz/index.d.ts b/types/d3-graphviz/index.d.ts index 9c344995d4..1adbba9be2 100644 --- a/types/d3-graphviz/index.d.ts +++ b/types/d3-graphviz/index.d.ts @@ -49,7 +49,7 @@ declare module 'd3-graphviz' { scale(scale: number): Graphviz; //Control Flow - on(typenames: string, callback?: () => void): any; + on(typenames: TypeNames, callback?: () => void): any; logEvents(enable: boolean): Graphviz; //Controlling Fade @@ -104,6 +104,11 @@ declare module 'd3-graphviz' { } type Engine = 'circo' | 'dot' | 'fdp' | 'neato' | 'osage' | 'patchwork' | 'twopi'; + + type TypeNames = 'initEnd' | 'start' | 'layoutStart' | 'layoutEnd' | 'dataExtractEnd' | + 'dataProcessPass1End' | 'dataProcessPass2End' | 'dataProcessEnd' | + 'renderStart' | 'renderEnd' | 'transitionStart' | 'transitionEnd' | + 'resotreEnd' | 'end'; export interface GraphvizOptions { useWorker?: boolean, From 2ec51b3f48835d4d152c3469091a472715f8dbd1 Mon Sep 17 00:00:00 2001 From: Dom Parfitt Date: Fri, 12 Oct 2018 16:18:21 +0100 Subject: [PATCH 18/32] Added KeyMode type --- types/d3-graphviz/index.d.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/types/d3-graphviz/index.d.ts b/types/d3-graphviz/index.d.ts index 1adbba9be2..d6c98cd69a 100644 --- a/types/d3-graphviz/index.d.ts +++ b/types/d3-graphviz/index.d.ts @@ -75,7 +75,7 @@ declare module 'd3-graphviz' { resetZoom(transition?: any): any; //Maintaining Object Constancy - keyMode(keyMode: string): Graphviz; //keyMode should be an enum + keyMode(keyMode: KeyMode): Graphviz; //keyMode should be an enum //Customizing Graph Attributes attributer(callback: Function | null): Graphviz; @@ -109,12 +109,14 @@ declare module 'd3-graphviz' { 'dataProcessPass1End' | 'dataProcessPass2End' | 'dataProcessEnd' | 'renderStart' | 'renderEnd' | 'transitionStart' | 'transitionEnd' | 'resotreEnd' | 'end'; + + type KeyMode = 'title' | 'id' | 'tag-index' | 'index'; export interface GraphvizOptions { useWorker?: boolean, engine?: Engine, totalMemory?: number, - keyMode?: string, + keyMode?: KeyMode, fade?: boolean, tweenPaths?: boolean, tweenShapes?: boolean, From ff625a6a860a4116f9995fc5eafbdaa5ea308078 Mon Sep 17 00:00:00 2001 From: Dom Parfitt Date: Mon, 15 Oct 2018 10:09:59 +0100 Subject: [PATCH 19/32] Added more definitions and comments --- types/d3-graphviz/index.d.ts | 113 ++++++++++++++++++++++------------- 1 file changed, 70 insertions(+), 43 deletions(-) diff --git a/types/d3-graphviz/index.d.ts b/types/d3-graphviz/index.d.ts index d6c98cd69a..2774dab42a 100644 --- a/types/d3-graphviz/index.d.ts +++ b/types/d3-graphviz/index.d.ts @@ -7,7 +7,8 @@ declare module 'd3-graphviz' { import { ZoomBehavior } from 'd3-zoom' - import { Selection } from 'd3-selection' + import { Selection, BaseType } from 'd3-selection' + import { Transition } from 'd3-transition' module 'd3-selection' { interface Selection { @@ -23,86 +24,108 @@ declare module 'd3-graphviz' { */ export function graphviz(selector: string, options?: GraphvizOptions | boolean): Graphviz; + /** + * Interface representing the Graphviz Renderer. Methods generally return the instance of the + * object they were called on (i.e this) in order to allow for easy method chaining. + */ export interface Graphviz { //Options + /** + * Gets the currently set options object on the renderer + */ options(): GraphvizOptions; - options(options: GraphvizOptions): Graphviz; + + /** + * Sets the options provided. Does not overwrite existing options that are not + * provided in the options parameter. + * @param options the options to set on the renderer + */ + options(options: GraphvizOptions): this; //Rendering - renderDot(src: string, callback?: any): Graphviz; - dot(src: any, callback?: () => void): Graphviz; - render(callback?: Function): Graphviz; - engine(engine: Engine): Graphviz; - onerror(callback: any): any; + renderDot(src: string, callback?: any): this; + dot(src: string, callback?: () => void): this; + render(callback?: Function): this; + engine(engine: Engine): this; + onerror(callback: Function): this; //Images - addImage(path: string, width: number, height: number): Graphviz; //Width & height can be strings, i.e. '100px' + /** + * + * @param path + * @param width + * @param height + */ + addImage(path: string, width: number | string, height: number | string): this; //Creating Transitions - transition(name: any): Graphviz; - active(name?: any): any; //Returns a transition, what type? + transition(name?: Function | string | Transition): this; + active(name?: string): Transition | null; //Controlling SVG and Graph Size - width(width: number): Graphviz; - height(height: number): Graphviz; - fit(fit: boolean): Graphviz; - scale(scale: number): Graphviz; + width(width: number | string): this; + height(height: number | string): this; + fit(fit: boolean): this; + scale(scale: number): this; //Control Flow - on(typenames: TypeNames, callback?: () => void): any; - logEvents(enable: boolean): Graphviz; + on(typenames: TypeNames, callback?: () => void): this; + logEvents(enable: boolean): this; //Controlling Fade - fade(enable: boolean): Graphviz; + fade(enable: boolean): this; //Controlling Animated Growth of Entering Edges - growEnteringEdges(enable: boolean): Graphviz; + growEnteringEdges(enable: boolean): this; //Controlling Path Tweening - tweenPaths(enable: boolean): Graphviz; - tweenPrecision(precision: number): Graphviz; //precision can be a string, i.e. '50%' + tweenPaths(enable: boolean): this; + tweenPrecision(precision: number): this; //precision can be a string, i.e. '50%' //Controlling Shape Tweening - tweenShapes(enable: boolean): Graphviz; - convertEqualSidedPolygons(enable: boolean): Graphviz; + tweenShapes(enable: boolean): this; + convertEqualSidedPolygons(enable: boolean): this; //Controlling Panning & Zooming - zoom(enable: boolean): Graphviz; + zoom(enable: boolean): this; zoomBehavior(): ZoomBehavior | null; - zoomSelection(): any | null; - zoomScaleExtent(extent?: number[]): Graphviz; - zoomTranslateExtent(extent?: number[][]): Graphviz; - resetZoom(transition?: any): any; + zoomSelection(): Element | null; + zoomScaleExtent(extent?: number[]): this; + zoomTranslateExtent(extent?: number[][]): this; + resetZoom(transition?: string | Transition): this; //Maintaining Object Constancy - keyMode(keyMode: KeyMode): Graphviz; //keyMode should be an enum + keyMode(keyMode: KeyMode): this; //keyMode should be an enum //Customizing Graph Attributes - attributer(callback: Function | null): Graphviz; + attributer(callback: Function | null): this; //Accessing Extracted Data data(): any; //Modifying an Existing Graph and Animating the Changes //Edges - drawEdge(x1: number, x2: number, y1: number, y2: number, attributes?: DotAttributes, options?: EdgeOptions): Graphviz; - updateDrawnEdge(x1: number, x2: number, y1: number, y2: number, attributes?: DotAttributes, options?: EdgeOptions): Graphviz; - moveDrawnEdgeEndPoint(x2: number, y2: number, options?: EdgeOptions): Graphviz; - insertDrawnEdge(name: string): Graphviz; - removeDrawnEdge(): Graphviz; - drawnEdgeSelection(): any; + drawEdge(x1: number, x2: number, y1: number, y2: number, attributes?: DotAttributes, options?: EdgeOptions): this; + updateDrawnEdge(x1: number, x2: number, y1: number, y2: number, attributes?: DotAttributes, options?: EdgeOptions): this; + moveDrawnEdgeEndPoint(x2: number, y2: number, options?: EdgeOptions): this; + insertDrawnEdge(name: string): this; + removeDrawnEdge(): this; + drawnEdgeSelection(): Selection; //Nodes - drawNode(x: number, y: number, nodeId: string, attributes?: DotAttributes, options?: NodeOptions): Graphviz; - updateDrawnNode(x: number, y: number, nodeId: string, attributes?: DotAttributes, options?: NodeOptions): Graphviz; - moveDrawnNode(x: number, y: number, options?: NodeOptions): Graphviz; - inserDrawnNode(nodeId: string): Graphviz; - removeDrawnNode(): Graphviz; + drawNode(x: number, y: number, nodeId: string, attributes?: DotAttributes, options?: NodeOptions): this; + updateDrawnNode(x: number, y: number, nodeId: string, attributes?: DotAttributes, options?: NodeOptions): this; + moveDrawnNode(x: number, y: number, options?: NodeOptions): this; + inserDrawnNode(nodeId: string): this; + removeDrawnNode(): this; drawnNodeSelection(): Selection; //Large Graphs - totalMemory(size: number): Graphviz; + totalMemory(size: number): this; } + /** + * Enum defining the valid strings that can be passed in as an engine + */ type Engine = 'circo' | 'dot' | 'fdp' | 'neato' | 'osage' | 'patchwork' | 'twopi'; type TypeNames = 'initEnd' | 'start' | 'layoutStart' | 'layoutEnd' | 'dataExtractEnd' | @@ -112,6 +135,10 @@ declare module 'd3-graphviz' { type KeyMode = 'title' | 'id' | 'tag-index' | 'index'; + /** + * Interface defining the options present on the Graphviz Renderer. + * Most map directly to methods that can be used to set their values. + */ export interface GraphvizOptions { useWorker?: boolean, engine?: Engine, @@ -126,8 +153,8 @@ declare module 'd3-graphviz' { zoom?: boolean, zoomScaleExtent?: number[], zoomTranslateExtent?: number[][], - width?: number, - height?: number, + width?: number | string, + height?: number | string, scale?: number, fit?: boolean, } From 453fa5e9a285bc53ece30e55936b64420a9cc837 Mon Sep 17 00:00:00 2001 From: Dom Parfitt Date: Mon, 15 Oct 2018 10:31:36 +0100 Subject: [PATCH 20/32] Updated to use generics matching other d3 libraries --- types/d3-graphviz/index.d.ts | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/types/d3-graphviz/index.d.ts b/types/d3-graphviz/index.d.ts index 2774dab42a..356f36c10d 100644 --- a/types/d3-graphviz/index.d.ts +++ b/types/d3-graphviz/index.d.ts @@ -12,7 +12,7 @@ declare module 'd3-graphviz' { module 'd3-selection' { interface Selection { - graphviz(options?: GraphvizOptions | boolean): Graphviz; + graphviz(options?: GraphvizOptions | boolean): Graphviz; selectWithoutDataPropagation(): Selection; } } @@ -22,13 +22,13 @@ declare module 'd3-graphviz' { * @param selector * @param options */ - export function graphviz(selector: string, options?: GraphvizOptions | boolean): Graphviz; + export function graphviz(selector: string | GElement, options?: GraphvizOptions | boolean): Graphviz; /** * Interface representing the Graphviz Renderer. Methods generally return the instance of the * object they were called on (i.e this) in order to allow for easy method chaining. */ - export interface Graphviz { + export interface Graphviz { //Options /** * Gets the currently set options object on the renderer @@ -59,8 +59,8 @@ declare module 'd3-graphviz' { addImage(path: string, width: number | string, height: number | string): this; //Creating Transitions - transition(name?: Function | string | Transition): this; - active(name?: string): Transition | null; + transition(name?: Function | string | Transition): this; + active(name?: string): Transition | null; //Controlling SVG and Graph Size width(width: number | string): this; @@ -88,11 +88,11 @@ declare module 'd3-graphviz' { //Controlling Panning & Zooming zoom(enable: boolean): this; - zoomBehavior(): ZoomBehavior | null; + zoomBehavior(): ZoomBehavior | null; zoomSelection(): Element | null; zoomScaleExtent(extent?: number[]): this; zoomTranslateExtent(extent?: number[][]): this; - resetZoom(transition?: string | Transition): this; + resetZoom(transition?: string | Transition): this; //Maintaining Object Constancy keyMode(keyMode: KeyMode): this; //keyMode should be an enum @@ -110,14 +110,14 @@ declare module 'd3-graphviz' { moveDrawnEdgeEndPoint(x2: number, y2: number, options?: EdgeOptions): this; insertDrawnEdge(name: string): this; removeDrawnEdge(): this; - drawnEdgeSelection(): Selection; + drawnEdgeSelection(): Selection; //Nodes drawNode(x: number, y: number, nodeId: string, attributes?: DotAttributes, options?: NodeOptions): this; updateDrawnNode(x: number, y: number, nodeId: string, attributes?: DotAttributes, options?: NodeOptions): this; moveDrawnNode(x: number, y: number, options?: NodeOptions): this; inserDrawnNode(nodeId: string): this; removeDrawnNode(): this; - drawnNodeSelection(): Selection; + drawnNodeSelection(): Selection; //Large Graphs totalMemory(size: number): this; From e3a4185ba57fbbbb4b3770f6ee58434b9069fe14 Mon Sep 17 00:00:00 2001 From: Dom Parfitt Date: Mon, 15 Oct 2018 10:48:35 +0100 Subject: [PATCH 21/32] Updated arrays to be fixed size --- types/d3-graphviz/index.d.ts | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/types/d3-graphviz/index.d.ts b/types/d3-graphviz/index.d.ts index 356f36c10d..e08e1afb20 100644 --- a/types/d3-graphviz/index.d.ts +++ b/types/d3-graphviz/index.d.ts @@ -43,7 +43,7 @@ declare module 'd3-graphviz' { options(options: GraphvizOptions): this; //Rendering - renderDot(src: string, callback?: any): this; + renderDot(src: string, callback?: Function): this; dot(src: string, callback?: () => void): this; render(callback?: Function): this; engine(engine: Engine): this; @@ -90,8 +90,8 @@ declare module 'd3-graphviz' { zoom(enable: boolean): this; zoomBehavior(): ZoomBehavior | null; zoomSelection(): Element | null; - zoomScaleExtent(extent?: number[]): this; - zoomTranslateExtent(extent?: number[][]): this; + zoomScaleExtent(extent?: [number, number]): this; + zoomTranslateExtent(extent?: [[number, number], [number, number]]): this; resetZoom(transition?: string | Transition): this; //Maintaining Object Constancy @@ -134,7 +134,7 @@ declare module 'd3-graphviz' { 'resotreEnd' | 'end'; type KeyMode = 'title' | 'id' | 'tag-index' | 'index'; - + /** * Interface defining the options present on the Graphviz Renderer. * Most map directly to methods that can be used to set their values. @@ -151,8 +151,8 @@ declare module 'd3-graphviz' { tweenPrecision?: number, growEnteringEdges?: boolean, zoom?: boolean, - zoomScaleExtent?: number[], - zoomTranslateExtent?: number[][], + zoomScaleExtent?: [number, number], + zoomTranslateExtent?: [[number, number], [number, number]], width?: number | string, height?: number | string, scale?: number, From d2bfcec67efabde3b08b7763b3a796bbcf0fd355 Mon Sep 17 00:00:00 2001 From: Dom Parfitt Date: Mon, 15 Oct 2018 13:26:43 +0100 Subject: [PATCH 22/32] Added documentation --- types/d3-graphviz/index.d.ts | 334 ++++++++++++++++++++++++++++++++--- 1 file changed, 308 insertions(+), 26 deletions(-) diff --git a/types/d3-graphviz/index.d.ts b/types/d3-graphviz/index.d.ts index e08e1afb20..0646df0f3b 100644 --- a/types/d3-graphviz/index.d.ts +++ b/types/d3-graphviz/index.d.ts @@ -10,17 +10,33 @@ declare module 'd3-graphviz' { import { Selection, BaseType } from 'd3-selection' import { Transition } from 'd3-transition' + /** + * Define methods which act as extensions to d3-selection + */ module 'd3-selection' { interface Selection { + /** + * Returns a new graphviz renderer instance on the first element in the given selection. If a graphviz renderer instance already exists + * on that element, instead returns the existing graphviz renderer instance. + * @param options either a GraphvizOptions object representing the options of the graphviz renderer or a boolean representing the + * useWorker option. + */ graphviz(options?: GraphvizOptions | boolean): Graphviz; + + /** + * For each selected element, selects the first descendant element that matches the specified selector string in the same ways as + * d3-selection.select, but does not propagate any associated data from the current element to the corresponding selected element. + */ selectWithoutDataPropagation(): Selection; } } /** - * - * @param selector - * @param options + * Creates a new graphviz renderer instance on the first element matching the given selector string. If the selector is not a string, + * instead creates a new graphviz renderer instance on the specified node. If a graphviz renderer instance already exists on that + * element, instead returns the existing graphviz renderer instance. + * @param selector either a string representing a selector for a given node or an instance of a node + * @param options the options to be applied to the graphviz renderer */ export function graphviz(selector: string | GElement, options?: GraphvizOptions | boolean): Graphviz; @@ -34,7 +50,7 @@ declare module 'd3-graphviz' { * Gets the currently set options object on the renderer */ options(): GraphvizOptions; - + /** * Sets the options provided. Does not overwrite existing options that are not * provided in the options parameter. @@ -43,83 +59,334 @@ declare module 'd3-graphviz' { options(options: GraphvizOptions): this; //Rendering + /** + * Renders an SVG graph from the specified src string and appends it to the selection the grapviz + * renderer instance was generated on. + * @param src a string representing a valid string in the DOT language + * @param callback + */ renderDot(src: string, callback?: Function): this; + + /** + * Starts computation of the layout of a graph from the specified dotSrc string and saves the data for + * rendering the SVG with {@link render} at a later stage. + * @param src a string representing a valid string in the DOT language + * @param callback + */ dot(src: string, callback?: () => void): this; + + /** + * Starts rendering of an SVG graph from data saved by {@link dot} and appends it to the selection + * the grapviz renderer instance was generated on. + * @param callback + */ render(callback?: Function): this; + + /** + * Sets the Graphviz layout engine name to the specified engine string. + * @param engine a string taking one of the following values: + * - circo + * - dot + * - fdp + * - neato + * - osage + * - patchwork + * - twopi + */ engine(engine: Engine): this; - onerror(callback: Function): this; + + /** + * Sets the callback that is called if the layout computation encounters + * an error. If no callback is passed then it removes the existing callback. + * @param callback the call back function triggered by an error + */ + onerror(callback?: Function): this; //Images /** - * - * @param path - * @param width - * @param height + * Add an image reference. Must be called before {@link renderDot} ir {@link dot} + * are called. + * @param path the path of the image, may be a filename, relative or absolute path or a URL + * @param width the width of the image, if a string is used then it may specify units. Allowed + * units are: in, px, pc, pt, cm, or mm. If no units are given or dimensions are + * given as numbers, points (pt) are used. + * @param height the height of the image, which follows the same unit rules as width. */ addImage(path: string, width: number | string, height: number | string): this; //Creating Transitions transition(name?: Function | string | Transition): this; + + /** + * Returns the active transition on the generated graph's top level svg with the specified name, + * if any. Returns null if there is no such active transition on the top level svg node. + * @param name the name of the transition + */ active(name?: string): Transition | null; //Controlling SVG and Graph Size - width(width: number | string): this; - height(height: number | string): this; + /** + * Sets the SVG width attribute. + * @param width the width in pixels + */ + width(width: number): this; + + /** + * Sets the SVG height attribute + * @param height the height in pixels + */ + height(height: number): this; + + /** + * Sets whether the graph's viewbox is affected by the size of its parent SVG's size + * @param fit true, if the graph should scale to fit its parent, false if it should + * remain at its original size + */ fit(fit: boolean): this; + + /** + * Sets the value the graph should scale by in relation to its parent SVG. Scaling + * only occurs if fit is set to true + * @param scale the scale value with 1.0 being 100%, 0.5 being 50% etc. + */ scale(scale: number): this; //Control Flow + /** + * Adds or removes a listener to the graphviz renderer instance for the specified event typenames. + * @param typenames + * @param callback + */ on(typenames: TypeNames, callback?: () => void): this; + + /** + * Sets whether events are logged or not. + * @param enable true if events should be logged, false if not + */ logEvents(enable: boolean): this; //Controlling Fade + /** + * Sets whether fade in and out of nodes is enabled. + * @param enable true to enable fade in and out, false to disable + */ fade(enable: boolean): this; //Controlling Animated Growth of Entering Edges + /** + * Sets whether animated growth of entering edges is enabled. + * @param enable true to animate entering edges, false to disable + */ growEnteringEdges(enable: boolean): this; //Controlling Path Tweening + /** + * Enables or disables path tweening + * @param enable true if path tweening should be enabled, false if it should be disabled + */ tweenPaths(enable: boolean): this; - tweenPrecision(precision: number): this; //precision can be a string, i.e. '50%' + + /** + * Sets the precision of path tweening. If precision is a number, sets the precision used + * during path tweening to precision points. The precision is the length of each path + * segment during tweening. If instead precision is a string containing '%', sets the + * relative precision. + * @param precision the precision as either a number of a string containing a percentage + */ + tweenPrecision(precision: number | string): this; //Controlling Shape Tweening + /** + * Enables or disables shape tweening during transitions. Implicitly sets path tweening + * as enabled due to SVGs handling for them. + * @param enable true if shape tweening should be enabled, false if it should be disabled + */ tweenShapes(enable: boolean): this; + + /** + * Enables or disables conversion of polygons with an equal number of sides during shape + * tweening. + * @param enable true if conversion should be enabled, false if it should be disabled. + */ convertEqualSidedPolygons(enable: boolean): this; //Controlling Panning & Zooming + /** + * Enables or disables zooming and panning. + * @param enable true if zooming should be enabled, false if it should be disabled. + */ zoom(enable: boolean): this; + + /** + * Returns the zoom behaviour of a graph. If the zoom is disable or the graph has not + * yet been rendered then returns null. + */ zoomBehavior(): ZoomBehavior | null; + + /** + * Returns the selection to which zoom behaviour has been applied. If zoom is disabled + * or the graph has not yet been rendered then returns null. + */ zoomSelection(): Element | null; + + /** + * Sets the scale extend for zooming where the first number is the minimum allowed zoom + * and the second is the maximum. + * @param extent a tuple containing the minimum and maximum allowed zoom + */ zoomScaleExtent(extent?: [number, number]): this; + + /** + * Sets the translate extent which restricts panning. + * @param extent a tuple of the form ((x0, y0), (x1, y1)) where (x0, y0) is the top-left + * corner of the "world" and (x1, y1) is the bottom-right corner + */ zoomTranslateExtent(extent?: [[number, number], [number, number]]): this; + + /** + * Resets any transformations made by panning and zooming. + * @param transition an optional transition to apply during reset. + */ resetZoom(transition?: string | Transition): this; //Maintaining Object Constancy - keyMode(keyMode: KeyMode): this; //keyMode should be an enum + /** + * Sets the key mode to the the provided mode string. Must be set before passing in + * any DOT strings. + * @param keyMode + */ + keyMode(keyMode: KeyMode): this; //Customizing Graph Attributes + /** + * + * @param callback + */ attributer(callback: Function | null): this; //Accessing Extracted Data - data(): any; - + /** + * Returns the data extracted by {@link dot} or null if none exists. + */ + data(): Datum; + //Modifying an Existing Graph and Animating the Changes - //Edges - drawEdge(x1: number, x2: number, y1: number, y2: number, attributes?: DotAttributes, options?: EdgeOptions): this; - updateDrawnEdge(x1: number, x2: number, y1: number, y2: number, attributes?: DotAttributes, options?: EdgeOptions): this; + //Edges + /** + * Draws a straight edge from (x1, y1) to (x2, y2) using coordinates relative to top level G container element of the graph. + * @param x1 the starting x co-ordinate + * @param y1 the starting y co-ordinate + * @param x2 the ending x co-ordinate + * @param y2 the ending y co-ordinate + * @param attributes object containing DOT attributes + * @param options object containing the options used when drawing the edge + */ + drawEdge(x1: number, y1: number, x2: number, y2: number, attributes?: DotAttributes, options?: EdgeOptions): this; + + /** + * Updates properties and attributes of the edge currently drawn with {@link drawEdge}, + * using the same arguments. This method cannot be used after the edge has been inserted + * into the graph data with {@link insertDrawnEdge.} + * @param x1 the starting x co-ordinate + * @param y1 the starting y co-ordinate + * @param x2 the ending x co-ordinate + * @param y2 the ending y co-ordinate + * @param attributes object containing DOT attributes + * @param options object containing the options used when drawing the edge + */ + updateDrawnEdge(x1: number, y1: number, x2: number, y2: number, attributes?: DotAttributes, options?: EdgeOptions): this; + + /** + * Updates the end point of the edge currently drawn with {@link drawEdge}, + * accepting the same options argument. This method cannot be used after the + * edge has been inserted into the graph data with {@link insertDrawnEdge}. + * @param x2 the ending x co-ordinate + * @param y2 the ending y co-ordinate + * @param options object containing the options used when drawing the edge + */ moveDrawnEdgeEndPoint(x2: number, y2: number, options?: EdgeOptions): this; + + /** + * Inserts the edge into the graph data, making it available for an animated + * transition into a subsequent new layout. + * @param name the name of the edge. + */ insertDrawnEdge(name: string): this; + + /** + * Removes the edge currently drawn with {@link drawEdge}. This method cannot + * be used after the edge has been inserted into the graph data with + * {@link insertDrawnEdge}. + */ removeDrawnEdge(): this; + + /** + * Returns a {@link Selection} containing the edge currently being drawn. The selection is empty + * if no edge has been drawn or the lastest drawn edge has been inserted into the graph data with + * {@link insertDrawnNode}. + */ drawnEdgeSelection(): Selection; - //Nodes + + //Nodes + /** + * Draws a node with the upper left corner of its bounding box at (x, y), using + * coordinates relative to the top level G container element of the graph. + * @param x x co-ordinate of the top-left bounding box of the node + * @param y y co-ordinate of the top-left bounding box of the node + * @param nodeId the ID of the node + * @param attributes object containing DOT attributes + * @param options object containing the options used when drawing the node + */ drawNode(x: number, y: number, nodeId: string, attributes?: DotAttributes, options?: NodeOptions): this; + + /** + * Updates properties and attributes of the node currently drawn with {@link drawNode}, + * using the same arguments. This method cannot be used after the node has been inserted + * into the graph data with {@link insertDrawnNode}. + * @param x x co-ordinate of the top-left bounding box of the node + * @param y y co-ordinate of the top-left bounding box of the node + * @param nodeId the ID of the node + * @param attributes object containing DOT attributes + * @param options object containing the options used when drawing the node + */ updateDrawnNode(x: number, y: number, nodeId: string, attributes?: DotAttributes, options?: NodeOptions): this; + + /** + * Updates the position of the upper left corner of the node currently drawn + * with {@link drawNode}, accepting the same options argument. This method + * cannot be used after the node has been inserted into the graph data with + * {@link insertDrawnNode}. + * @param x new x co-ordinate of the top-left bounding box of the node + * @param y new y co-ordinate of the top-left bounding box of the node + * @param options object containing the options used when drawing the node + */ moveDrawnNode(x: number, y: number, options?: NodeOptions): this; + + /** + * Inserts the node into the graph data, making it available for an animated + * transition into a subsequent new layout. + * @param nodeId the ID of the node + */ inserDrawnNode(nodeId: string): this; + + /** + * Removes the node currently drawn with {@link drawNode}. This method cannot + * be used after the node has been inserted into the graph data with {@link insertDrawnNode}. + */ removeDrawnNode(): this; + + /** + * Returns a {@link Selection} containing the node currently being drawn. The selection is empty + * if no node has been drawn or the lastest drawn node has been inserted into the graph data with + * {@link insertDrawnNode}. + */ drawnNodeSelection(): Selection; //Large Graphs + /** + * Sets the total memory available to Viz.js to size bytes, which should be a power of 2. + * @param size the size in bytes of memory allocated to Viz.js + */ totalMemory(size: number): this; } @@ -128,11 +395,17 @@ declare module 'd3-graphviz' { */ type Engine = 'circo' | 'dot' | 'fdp' | 'neato' | 'osage' | 'patchwork' | 'twopi'; - type TypeNames = 'initEnd' | 'start' | 'layoutStart' | 'layoutEnd' | 'dataExtractEnd' | - 'dataProcessPass1End' | 'dataProcessPass2End' | 'dataProcessEnd' | - 'renderStart' | 'renderEnd' | 'transitionStart' | 'transitionEnd' | - 'resotreEnd' | 'end'; + /** + * Enum defining the valid strings that can be passed as TypeNames + */ + type TypeNames = 'initEnd' | 'start' | 'layoutStart' | 'layoutEnd' | 'dataExtractEnd' | + 'dataProcessPass1End' | 'dataProcessPass2End' | 'dataProcessEnd' | + 'renderStart' | 'renderEnd' | 'transitionStart' | 'transitionEnd' | + 'resotreEnd' | 'end' | string; //string included to allow for optional addition of a name, e.g. initEnd.foo + /** + * Enum defining the valid strings that can be passed as KeyModes + */ type KeyMode = 'title' | 'id' | 'tag-index' | 'index'; /** @@ -148,27 +421,36 @@ declare module 'd3-graphviz' { tweenPaths?: boolean, tweenShapes?: boolean, convertEqualSidedPolygons?: boolean, - tweenPrecision?: number, + tweenPrecision?: number | string, growEnteringEdges?: boolean, zoom?: boolean, zoomScaleExtent?: [number, number], zoomTranslateExtent?: [[number, number], [number, number]], - width?: number | string, - height?: number | string, + width?: number, + height?: number, scale?: number, fit?: boolean, } + /** + * Interface defining the attributes available per the DOT language + */ export interface DotAttributes { style: any; URL: any; tooltip: any; } + /** + * Interface defining the options available for rendering edges + */ export interface EdgeOptions { shortening: number; } + /** + * Interface defining the options available for rendering nodes + */ export interface NodeOptions { } From e4d1bfe44dd4c46d70ff9c7dfcf4c933feff27f8 Mon Sep 17 00:00:00 2001 From: Dom Parfitt Date: Mon, 15 Oct 2018 13:35:58 +0100 Subject: [PATCH 23/32] Updated return type --- types/d3-graphviz/index.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/types/d3-graphviz/index.d.ts b/types/d3-graphviz/index.d.ts index 0646df0f3b..0ccece31cf 100644 --- a/types/d3-graphviz/index.d.ts +++ b/types/d3-graphviz/index.d.ts @@ -221,7 +221,7 @@ declare module 'd3-graphviz' { * Returns the zoom behaviour of a graph. If the zoom is disable or the graph has not * yet been rendered then returns null. */ - zoomBehavior(): ZoomBehavior | null; + zoomBehavior(): ZoomBehavior | null; /** * Returns the selection to which zoom behaviour has been applied. If zoom is disabled From 32d11daec7f7df3fc3a3aa856a58256b82b5d86e Mon Sep 17 00:00:00 2001 From: Dom Parfitt Date: Mon, 15 Oct 2018 14:05:33 +0100 Subject: [PATCH 24/32] Added some tests --- types/d3-graphviz/d3-graphviz-tests.ts | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/types/d3-graphviz/d3-graphviz-tests.ts b/types/d3-graphviz/d3-graphviz-tests.ts index e69de29bb2..eef9436a09 100644 --- a/types/d3-graphviz/d3-graphviz-tests.ts +++ b/types/d3-graphviz/d3-graphviz-tests.ts @@ -0,0 +1,16 @@ +import { select, BaseType } from 'd3-selection'; +import * as d3Graphviz from 'd3-graphviz'; + +let graphviz: d3Graphviz.Graphviz; + +// Can get a graphviz render using extension method on d3-select +graphviz = select('test').graphviz(); + +// Can use graphviz method as selector +graphviz = d3Graphviz.graphviz('test'); + +// Can get the options +const options: d3Graphviz.GraphvizOptions = d3Graphviz.graphviz('').options(); + +// Can set the options +graphviz = graphviz.options(options); From ab0992bd548d555dabbfb22aa03a9c8df7f1ff50 Mon Sep 17 00:00:00 2001 From: Dom Parfitt Date: Mon, 15 Oct 2018 14:20:20 +0100 Subject: [PATCH 25/32] Made parameter optional --- types/d3-graphviz/index.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/types/d3-graphviz/index.d.ts b/types/d3-graphviz/index.d.ts index 0ccece31cf..bd2aac491a 100644 --- a/types/d3-graphviz/index.d.ts +++ b/types/d3-graphviz/index.d.ts @@ -262,7 +262,7 @@ declare module 'd3-graphviz' { * * @param callback */ - attributer(callback: Function | null): this; + attributer(callback?: Function): this; //Accessing Extracted Data /** From f1caa4586925e6cddedd0e745d56f9e5e780e592 Mon Sep 17 00:00:00 2001 From: Dom Parfitt Date: Mon, 15 Oct 2018 14:23:56 +0100 Subject: [PATCH 26/32] Updated DOT attributes --- types/d3-graphviz/index.d.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/types/d3-graphviz/index.d.ts b/types/d3-graphviz/index.d.ts index bd2aac491a..dfa04cb1b9 100644 --- a/types/d3-graphviz/index.d.ts +++ b/types/d3-graphviz/index.d.ts @@ -436,9 +436,9 @@ declare module 'd3-graphviz' { * Interface defining the attributes available per the DOT language */ export interface DotAttributes { - style: any; - URL: any; - tooltip: any; + style?: any; + URL?: any; + tooltip?: any; } /** From 65c4a2842f185b6097b7c5fe884aafcdde17d6d5 Mon Sep 17 00:00:00 2001 From: Dom Parfitt Date: Mon, 15 Oct 2018 14:29:22 +0100 Subject: [PATCH 27/32] Updated callbacks --- types/d3-graphviz/index.d.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/types/d3-graphviz/index.d.ts b/types/d3-graphviz/index.d.ts index dfa04cb1b9..682cbb2b2e 100644 --- a/types/d3-graphviz/index.d.ts +++ b/types/d3-graphviz/index.d.ts @@ -73,7 +73,7 @@ declare module 'd3-graphviz' { * @param src a string representing a valid string in the DOT language * @param callback */ - dot(src: string, callback?: () => void): this; + dot(src: string, callback?: Function): this; /** * Starts rendering of an SVG graph from data saved by {@link dot} and appends it to the selection @@ -157,7 +157,7 @@ declare module 'd3-graphviz' { * @param typenames * @param callback */ - on(typenames: TypeNames, callback?: () => void): this; + on(typenames: TypeNames, callback?: Function): this; /** * Sets whether events are logged or not. From 4c672ef8ed98317f1adf0a2c155bf6a1579b18b6 Mon Sep 17 00:00:00 2001 From: Dom Parfitt Date: Mon, 15 Oct 2018 14:50:11 +0100 Subject: [PATCH 28/32] Linting fixes --- types/d3-graphviz/index.d.ts | 876 +++++++++++++++++------------------ 1 file changed, 433 insertions(+), 443 deletions(-) diff --git a/types/d3-graphviz/index.d.ts b/types/d3-graphviz/index.d.ts index 682cbb2b2e..f08ec0e019 100644 --- a/types/d3-graphviz/index.d.ts +++ b/types/d3-graphviz/index.d.ts @@ -4,454 +4,444 @@ // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped // TypeScript Version: 2.3 -declare module 'd3-graphviz' { +import { ZoomBehavior } from 'd3-zoom'; +import { Selection, BaseType } from 'd3-selection'; +import { Transition } from 'd3-transition'; - import { ZoomBehavior } from 'd3-zoom' - import { Selection, BaseType } from 'd3-selection' - import { Transition } from 'd3-transition' - - /** - * Define methods which act as extensions to d3-selection - */ - module 'd3-selection' { - interface Selection { - /** - * Returns a new graphviz renderer instance on the first element in the given selection. If a graphviz renderer instance already exists - * on that element, instead returns the existing graphviz renderer instance. - * @param options either a GraphvizOptions object representing the options of the graphviz renderer or a boolean representing the - * useWorker option. - */ - graphviz(options?: GraphvizOptions | boolean): Graphviz; - - /** - * For each selected element, selects the first descendant element that matches the specified selector string in the same ways as - * d3-selection.select, but does not propagate any associated data from the current element to the corresponding selected element. - */ - selectWithoutDataPropagation(): Selection; - } - } - - /** - * Creates a new graphviz renderer instance on the first element matching the given selector string. If the selector is not a string, - * instead creates a new graphviz renderer instance on the specified node. If a graphviz renderer instance already exists on that - * element, instead returns the existing graphviz renderer instance. - * @param selector either a string representing a selector for a given node or an instance of a node - * @param options the options to be applied to the graphviz renderer - */ - export function graphviz(selector: string | GElement, options?: GraphvizOptions | boolean): Graphviz; - - /** - * Interface representing the Graphviz Renderer. Methods generally return the instance of the - * object they were called on (i.e this) in order to allow for easy method chaining. - */ - export interface Graphviz { - //Options +/** + * Define methods which act as extensions to d3-selection + */ +declare module 'd3-selection' { + interface Selection { /** - * Gets the currently set options object on the renderer + * Returns a new graphviz renderer instance on the first element in the given selection. If a graphviz renderer instance already exists + * on that element, instead returns the existing graphviz renderer instance. + * @param options either a GraphvizOptions object representing the options of the graphviz renderer or a boolean representing the + * useWorker option. */ - options(): GraphvizOptions; + graphviz(options?: GraphvizOptions | boolean): Graphviz; /** - * Sets the options provided. Does not overwrite existing options that are not - * provided in the options parameter. - * @param options the options to set on the renderer + * For each selected element, selects the first descendant element that matches the specified selector string in the same ways as + * d3-selection.select, but does not propagate any associated data from the current element to the corresponding selected element. */ - options(options: GraphvizOptions): this; - - //Rendering - /** - * Renders an SVG graph from the specified src string and appends it to the selection the grapviz - * renderer instance was generated on. - * @param src a string representing a valid string in the DOT language - * @param callback - */ - renderDot(src: string, callback?: Function): this; - - /** - * Starts computation of the layout of a graph from the specified dotSrc string and saves the data for - * rendering the SVG with {@link render} at a later stage. - * @param src a string representing a valid string in the DOT language - * @param callback - */ - dot(src: string, callback?: Function): this; - - /** - * Starts rendering of an SVG graph from data saved by {@link dot} and appends it to the selection - * the grapviz renderer instance was generated on. - * @param callback - */ - render(callback?: Function): this; - - /** - * Sets the Graphviz layout engine name to the specified engine string. - * @param engine a string taking one of the following values: - * - circo - * - dot - * - fdp - * - neato - * - osage - * - patchwork - * - twopi - */ - engine(engine: Engine): this; - - /** - * Sets the callback that is called if the layout computation encounters - * an error. If no callback is passed then it removes the existing callback. - * @param callback the call back function triggered by an error - */ - onerror(callback?: Function): this; - - //Images - /** - * Add an image reference. Must be called before {@link renderDot} ir {@link dot} - * are called. - * @param path the path of the image, may be a filename, relative or absolute path or a URL - * @param width the width of the image, if a string is used then it may specify units. Allowed - * units are: in, px, pc, pt, cm, or mm. If no units are given or dimensions are - * given as numbers, points (pt) are used. - * @param height the height of the image, which follows the same unit rules as width. - */ - addImage(path: string, width: number | string, height: number | string): this; - - //Creating Transitions - transition(name?: Function | string | Transition): this; - - /** - * Returns the active transition on the generated graph's top level svg with the specified name, - * if any. Returns null if there is no such active transition on the top level svg node. - * @param name the name of the transition - */ - active(name?: string): Transition | null; - - //Controlling SVG and Graph Size - /** - * Sets the SVG width attribute. - * @param width the width in pixels - */ - width(width: number): this; - - /** - * Sets the SVG height attribute - * @param height the height in pixels - */ - height(height: number): this; - - /** - * Sets whether the graph's viewbox is affected by the size of its parent SVG's size - * @param fit true, if the graph should scale to fit its parent, false if it should - * remain at its original size - */ - fit(fit: boolean): this; - - /** - * Sets the value the graph should scale by in relation to its parent SVG. Scaling - * only occurs if fit is set to true - * @param scale the scale value with 1.0 being 100%, 0.5 being 50% etc. - */ - scale(scale: number): this; - - //Control Flow - /** - * Adds or removes a listener to the graphviz renderer instance for the specified event typenames. - * @param typenames - * @param callback - */ - on(typenames: TypeNames, callback?: Function): this; - - /** - * Sets whether events are logged or not. - * @param enable true if events should be logged, false if not - */ - logEvents(enable: boolean): this; - - //Controlling Fade - /** - * Sets whether fade in and out of nodes is enabled. - * @param enable true to enable fade in and out, false to disable - */ - fade(enable: boolean): this; - - //Controlling Animated Growth of Entering Edges - /** - * Sets whether animated growth of entering edges is enabled. - * @param enable true to animate entering edges, false to disable - */ - growEnteringEdges(enable: boolean): this; - - //Controlling Path Tweening - /** - * Enables or disables path tweening - * @param enable true if path tweening should be enabled, false if it should be disabled - */ - tweenPaths(enable: boolean): this; - - /** - * Sets the precision of path tweening. If precision is a number, sets the precision used - * during path tweening to precision points. The precision is the length of each path - * segment during tweening. If instead precision is a string containing '%', sets the - * relative precision. - * @param precision the precision as either a number of a string containing a percentage - */ - tweenPrecision(precision: number | string): this; - - //Controlling Shape Tweening - /** - * Enables or disables shape tweening during transitions. Implicitly sets path tweening - * as enabled due to SVGs handling for them. - * @param enable true if shape tweening should be enabled, false if it should be disabled - */ - tweenShapes(enable: boolean): this; - - /** - * Enables or disables conversion of polygons with an equal number of sides during shape - * tweening. - * @param enable true if conversion should be enabled, false if it should be disabled. - */ - convertEqualSidedPolygons(enable: boolean): this; - - //Controlling Panning & Zooming - /** - * Enables or disables zooming and panning. - * @param enable true if zooming should be enabled, false if it should be disabled. - */ - zoom(enable: boolean): this; - - /** - * Returns the zoom behaviour of a graph. If the zoom is disable or the graph has not - * yet been rendered then returns null. - */ - zoomBehavior(): ZoomBehavior | null; - - /** - * Returns the selection to which zoom behaviour has been applied. If zoom is disabled - * or the graph has not yet been rendered then returns null. - */ - zoomSelection(): Element | null; - - /** - * Sets the scale extend for zooming where the first number is the minimum allowed zoom - * and the second is the maximum. - * @param extent a tuple containing the minimum and maximum allowed zoom - */ - zoomScaleExtent(extent?: [number, number]): this; - - /** - * Sets the translate extent which restricts panning. - * @param extent a tuple of the form ((x0, y0), (x1, y1)) where (x0, y0) is the top-left - * corner of the "world" and (x1, y1) is the bottom-right corner - */ - zoomTranslateExtent(extent?: [[number, number], [number, number]]): this; - - /** - * Resets any transformations made by panning and zooming. - * @param transition an optional transition to apply during reset. - */ - resetZoom(transition?: string | Transition): this; - - //Maintaining Object Constancy - /** - * Sets the key mode to the the provided mode string. Must be set before passing in - * any DOT strings. - * @param keyMode - */ - keyMode(keyMode: KeyMode): this; - - //Customizing Graph Attributes - /** - * - * @param callback - */ - attributer(callback?: Function): this; - - //Accessing Extracted Data - /** - * Returns the data extracted by {@link dot} or null if none exists. - */ - data(): Datum; - - //Modifying an Existing Graph and Animating the Changes - //Edges - /** - * Draws a straight edge from (x1, y1) to (x2, y2) using coordinates relative to top level G container element of the graph. - * @param x1 the starting x co-ordinate - * @param y1 the starting y co-ordinate - * @param x2 the ending x co-ordinate - * @param y2 the ending y co-ordinate - * @param attributes object containing DOT attributes - * @param options object containing the options used when drawing the edge - */ - drawEdge(x1: number, y1: number, x2: number, y2: number, attributes?: DotAttributes, options?: EdgeOptions): this; - - /** - * Updates properties and attributes of the edge currently drawn with {@link drawEdge}, - * using the same arguments. This method cannot be used after the edge has been inserted - * into the graph data with {@link insertDrawnEdge.} - * @param x1 the starting x co-ordinate - * @param y1 the starting y co-ordinate - * @param x2 the ending x co-ordinate - * @param y2 the ending y co-ordinate - * @param attributes object containing DOT attributes - * @param options object containing the options used when drawing the edge - */ - updateDrawnEdge(x1: number, y1: number, x2: number, y2: number, attributes?: DotAttributes, options?: EdgeOptions): this; - - /** - * Updates the end point of the edge currently drawn with {@link drawEdge}, - * accepting the same options argument. This method cannot be used after the - * edge has been inserted into the graph data with {@link insertDrawnEdge}. - * @param x2 the ending x co-ordinate - * @param y2 the ending y co-ordinate - * @param options object containing the options used when drawing the edge - */ - moveDrawnEdgeEndPoint(x2: number, y2: number, options?: EdgeOptions): this; - - /** - * Inserts the edge into the graph data, making it available for an animated - * transition into a subsequent new layout. - * @param name the name of the edge. - */ - insertDrawnEdge(name: string): this; - - /** - * Removes the edge currently drawn with {@link drawEdge}. This method cannot - * be used after the edge has been inserted into the graph data with - * {@link insertDrawnEdge}. - */ - removeDrawnEdge(): this; - - /** - * Returns a {@link Selection} containing the edge currently being drawn. The selection is empty - * if no edge has been drawn or the lastest drawn edge has been inserted into the graph data with - * {@link insertDrawnNode}. - */ - drawnEdgeSelection(): Selection; - - //Nodes - /** - * Draws a node with the upper left corner of its bounding box at (x, y), using - * coordinates relative to the top level G container element of the graph. - * @param x x co-ordinate of the top-left bounding box of the node - * @param y y co-ordinate of the top-left bounding box of the node - * @param nodeId the ID of the node - * @param attributes object containing DOT attributes - * @param options object containing the options used when drawing the node - */ - drawNode(x: number, y: number, nodeId: string, attributes?: DotAttributes, options?: NodeOptions): this; - - /** - * Updates properties and attributes of the node currently drawn with {@link drawNode}, - * using the same arguments. This method cannot be used after the node has been inserted - * into the graph data with {@link insertDrawnNode}. - * @param x x co-ordinate of the top-left bounding box of the node - * @param y y co-ordinate of the top-left bounding box of the node - * @param nodeId the ID of the node - * @param attributes object containing DOT attributes - * @param options object containing the options used when drawing the node - */ - updateDrawnNode(x: number, y: number, nodeId: string, attributes?: DotAttributes, options?: NodeOptions): this; - - /** - * Updates the position of the upper left corner of the node currently drawn - * with {@link drawNode}, accepting the same options argument. This method - * cannot be used after the node has been inserted into the graph data with - * {@link insertDrawnNode}. - * @param x new x co-ordinate of the top-left bounding box of the node - * @param y new y co-ordinate of the top-left bounding box of the node - * @param options object containing the options used when drawing the node - */ - moveDrawnNode(x: number, y: number, options?: NodeOptions): this; - - /** - * Inserts the node into the graph data, making it available for an animated - * transition into a subsequent new layout. - * @param nodeId the ID of the node - */ - inserDrawnNode(nodeId: string): this; - - /** - * Removes the node currently drawn with {@link drawNode}. This method cannot - * be used after the node has been inserted into the graph data with {@link insertDrawnNode}. - */ - removeDrawnNode(): this; - - /** - * Returns a {@link Selection} containing the node currently being drawn. The selection is empty - * if no node has been drawn or the lastest drawn node has been inserted into the graph data with - * {@link insertDrawnNode}. - */ - drawnNodeSelection(): Selection; - - //Large Graphs - /** - * Sets the total memory available to Viz.js to size bytes, which should be a power of 2. - * @param size the size in bytes of memory allocated to Viz.js - */ - totalMemory(size: number): this; - } - - /** - * Enum defining the valid strings that can be passed in as an engine - */ - type Engine = 'circo' | 'dot' | 'fdp' | 'neato' | 'osage' | 'patchwork' | 'twopi'; - - /** - * Enum defining the valid strings that can be passed as TypeNames - */ - type TypeNames = 'initEnd' | 'start' | 'layoutStart' | 'layoutEnd' | 'dataExtractEnd' | - 'dataProcessPass1End' | 'dataProcessPass2End' | 'dataProcessEnd' | - 'renderStart' | 'renderEnd' | 'transitionStart' | 'transitionEnd' | - 'resotreEnd' | 'end' | string; //string included to allow for optional addition of a name, e.g. initEnd.foo - - /** - * Enum defining the valid strings that can be passed as KeyModes - */ - type KeyMode = 'title' | 'id' | 'tag-index' | 'index'; - - /** - * Interface defining the options present on the Graphviz Renderer. - * Most map directly to methods that can be used to set their values. - */ - export interface GraphvizOptions { - useWorker?: boolean, - engine?: Engine, - totalMemory?: number, - keyMode?: KeyMode, - fade?: boolean, - tweenPaths?: boolean, - tweenShapes?: boolean, - convertEqualSidedPolygons?: boolean, - tweenPrecision?: number | string, - growEnteringEdges?: boolean, - zoom?: boolean, - zoomScaleExtent?: [number, number], - zoomTranslateExtent?: [[number, number], [number, number]], - width?: number, - height?: number, - scale?: number, - fit?: boolean, - } - - /** - * Interface defining the attributes available per the DOT language - */ - export interface DotAttributes { - style?: any; - URL?: any; - tooltip?: any; - } - - /** - * Interface defining the options available for rendering edges - */ - export interface EdgeOptions { - shortening: number; - } - - /** - * Interface defining the options available for rendering nodes - */ - export interface NodeOptions { - + selectWithoutDataPropagation(): Selection; } } + +/** + * Creates a new graphviz renderer instance on the first element matching the given selector string. If the selector is not a string, + * instead creates a new graphviz renderer instance on the specified node. If a graphviz renderer instance already exists on that + * element, instead returns the existing graphviz renderer instance. + * @param selector either a string representing a selector for a given node or an instance of a node + * @param options the options to be applied to the graphviz renderer + */ +export function graphviz(selector: string | GElement, options?: GraphvizOptions | boolean): Graphviz; + +/** + * Interface representing the Graphviz Renderer. Methods generally return the instance of the + * object they were called on (i.e this) in order to allow for easy method chaining. + */ +export interface Graphviz { + // Options + /** + * Gets the currently set options object on the renderer + */ + options(): GraphvizOptions; + + /** + * Sets the options provided. Does not overwrite existing options that are not + * provided in the options parameter. + * @param options the options to set on the renderer + */ + options(options: GraphvizOptions): this; + + // Rendering + /** + * Renders an SVG graph from the specified src string and appends it to the selection the grapviz + * renderer instance was generated on. + * @param src a string representing a valid string in the DOT language + * @param callback + */ + renderDot(src: string, callback?: Function): this; + + /** + * Starts computation of the layout of a graph from the specified dotSrc string and saves the data for + * rendering the SVG with {@link render} at a later stage. + * @param src a string representing a valid string in the DOT language + * @param callback + */ + dot(src: string, callback?: Function): this; + + /** + * Starts rendering of an SVG graph from data saved by {@link dot} and appends it to the selection + * the grapviz renderer instance was generated on. + * @param callback + */ + render(callback?: Function): this; + + /** + * Sets the Graphviz layout engine name to the specified engine string. + * @param engine a string taking one of the following values: + * - circo + * - dot + * - fdp + * - neato + * - osage + * - patchwork + * - twopi + */ + engine(engine: Engine): this; + + /** + * Sets the callback that is called if the layout computation encounters + * an error. If no callback is passed then it removes the existing callback. + * @param callback the call back function triggered by an error + */ + onerror(callback?: Function): this; + + // Images + /** + * Add an image reference. Must be called before {@link renderDot} ir {@link dot} + * are called. + * @param path the path of the image, may be a filename, relative or absolute path or a URL + * @param width the width of the image, if a string is used then it may specify units. Allowed + * units are: in, px, pc, pt, cm, or mm. If no units are given or dimensions are + * given as numbers, points (pt) are used. + * @param height the height of the image, which follows the same unit rules as width. + */ + addImage(path: string, width: number | string, height: number | string): this; + + // Creating Transitions + transition(name?: Function | string | Transition): this; + + /** + * Returns the active transition on the generated graph's top level svg with the specified name, + * if any. Returns null if there is no such active transition on the top level svg node. + * @param name the name of the transition + */ + active(name?: string): Transition | null; + + // Controlling SVG and Graph Size + /** + * Sets the SVG width attribute. + * @param width the width in pixels + */ + width(width: number): this; + + /** + * Sets the SVG height attribute + * @param height the height in pixels + */ + height(height: number): this; + + /** + * Sets whether the graph's viewbox is affected by the size of its parent SVG's size + * @param fit true, if the graph should scale to fit its parent, false if it should + * remain at its original size + */ + fit(fit: boolean): this; + + /** + * Sets the value the graph should scale by in relation to its parent SVG. Scaling + * only occurs if fit is set to true + * @param scale the scale value with 1.0 being 100%, 0.5 being 50% etc. + */ + scale(scale: number): this; + + // Control Flow + /** + * Adds or removes a listener to the graphviz renderer instance for the specified event typenames. + * @param typenames + * @param callback + */ + on(typenames: TypeNames, callback?: Function): this; + + /** + * Sets whether events are logged or not. + * @param enable true if events should be logged, false if not + */ + logEvents(enable: boolean): this; + + // Controlling Fade + /** + * Sets whether fade in and out of nodes is enabled. + * @param enable true to enable fade in and out, false to disable + */ + fade(enable: boolean): this; + + // Controlling Animated Growth of Entering Edges + /** + * Sets whether animated growth of entering edges is enabled. + * @param enable true to animate entering edges, false to disable + */ + growEnteringEdges(enable: boolean): this; + + // Controlling Path Tweening + /** + * Enables or disables path tweening + * @param enable true if path tweening should be enabled, false if it should be disabled + */ + tweenPaths(enable: boolean): this; + + /** + * Sets the precision of path tweening. If precision is a number, sets the precision used + * during path tweening to precision points. The precision is the length of each path + * segment during tweening. If instead precision is a string containing '%', sets the + * relative precision. + * @param precision the precision as either a number of a string containing a percentage + */ + tweenPrecision(precision: number | string): this; + + // Controlling Shape Tweening + /** + * Enables or disables shape tweening during transitions. Implicitly sets path tweening + * as enabled due to SVGs handling for them. + * @param enable true if shape tweening should be enabled, false if it should be disabled + */ + tweenShapes(enable: boolean): this; + + /** + * Enables or disables conversion of polygons with an equal number of sides during shape + * tweening. + * @param enable true if conversion should be enabled, false if it should be disabled. + */ + convertEqualSidedPolygons(enable: boolean): this; + + // Controlling Panning & Zooming + /** + * Enables or disables zooming and panning. + * @param enable true if zooming should be enabled, false if it should be disabled. + */ + zoom(enable: boolean): this; + + /** + * Returns the zoom behaviour of a graph. If the zoom is disable or the graph has not + * yet been rendered then returns null. + */ + zoomBehavior(): ZoomBehavior | null; + + /** + * Returns the selection to which zoom behaviour has been applied. If zoom is disabled + * or the graph has not yet been rendered then returns null. + */ + zoomSelection(): Element | null; + + /** + * Sets the scale extend for zooming where the first number is the minimum allowed zoom + * and the second is the maximum. + * @param extent a tuple containing the minimum and maximum allowed zoom + */ + zoomScaleExtent(extent?: [number, number]): this; + + /** + * Sets the translate extent which restricts panning. + * @param extent a tuple of the form ((x0, y0), (x1, y1)) where (x0, y0) is the top-left + * corner of the "world" and (x1, y1) is the bottom-right corner + */ + zoomTranslateExtent(extent?: [[number, number], [number, number]]): this; + + /** + * Resets any transformations made by panning and zooming. + * @param transition an optional transition to apply during reset. + */ + resetZoom(transition?: string | Transition): this; + + // Maintaining Object Constancy + /** + * Sets the key mode to the the provided mode string. Must be set before passing in + * any DOT strings. + * @param keyMode + */ + keyMode(keyMode: KeyMode): this; + + // Customizing Graph Attributes + /** + * + * @param callback + */ + attributer(callback?: Function): this; + + // Accessing Extracted Data + /** + * Returns the data extracted by {@link dot} or null if none exists. + */ + data(): Datum; + + // Modifying an Existing Graph and Animating the Changes + // Edges + /** + * Draws a straight edge from (x1, y1) to (x2, y2) using coordinates relative to top level G container element of the graph. + * @param x1 the starting x co-ordinate + * @param y1 the starting y co-ordinate + * @param x2 the ending x co-ordinate + * @param y2 the ending y co-ordinate + * @param attributes object containing DOT attributes + * @param options object containing the options used when drawing the edge + */ + drawEdge(x1: number, y1: number, x2: number, y2: number, attributes?: DotAttributes, options?: EdgeOptions): this; + + /** + * Updates properties and attributes of the edge currently drawn with {@link drawEdge}, + * using the same arguments. This method cannot be used after the edge has been inserted + * into the graph data with {@link insertDrawnEdge.} + * @param x1 the starting x co-ordinate + * @param y1 the starting y co-ordinate + * @param x2 the ending x co-ordinate + * @param y2 the ending y co-ordinate + * @param attributes object containing DOT attributes + * @param options object containing the options used when drawing the edge + */ + updateDrawnEdge(x1: number, y1: number, x2: number, y2: number, attributes?: DotAttributes, options?: EdgeOptions): this; + + /** + * Updates the end point of the edge currently drawn with {@link drawEdge}, + * accepting the same options argument. This method cannot be used after the + * edge has been inserted into the graph data with {@link insertDrawnEdge}. + * @param x2 the ending x co-ordinate + * @param y2 the ending y co-ordinate + * @param options object containing the options used when drawing the edge + */ + moveDrawnEdgeEndPoint(x2: number, y2: number, options?: EdgeOptions): this; + + /** + * Inserts the edge into the graph data, making it available for an animated + * transition into a subsequent new layout. + * @param name the name of the edge. + */ + insertDrawnEdge(name: string): this; + + /** + * Removes the edge currently drawn with {@link drawEdge}. This method cannot + * be used after the edge has been inserted into the graph data with + * {@link insertDrawnEdge}. + */ + removeDrawnEdge(): this; + + /** + * Returns a {@link Selection} containing the edge currently being drawn. The selection is empty + * if no edge has been drawn or the lastest drawn edge has been inserted into the graph data with + * {@link insertDrawnNode}. + */ + drawnEdgeSelection(): Selection; + + // Nodes + /** + * Draws a node with the upper left corner of its bounding box at (x, y), using + * coordinates relative to the top level G container element of the graph. + * @param x x co-ordinate of the top-left bounding box of the node + * @param y y co-ordinate of the top-left bounding box of the node + * @param nodeId the ID of the node + * @param attributes object containing DOT attributes + * @param options object containing the options used when drawing the node, currently unused + */ + drawNode(x: number, y: number, nodeId: string, attributes?: DotAttributes, options?: any): this; + + /** + * Updates properties and attributes of the node currently drawn with {@link drawNode}, + * using the same arguments. This method cannot be used after the node has been inserted + * into the graph data with {@link insertDrawnNode}. + * @param x x co-ordinate of the top-left bounding box of the node + * @param y y co-ordinate of the top-left bounding box of the node + * @param nodeId the ID of the node + * @param attributes object containing DOT attributes + * @param options object containing the options used when drawing the node, currently unused + */ + updateDrawnNode(x: number, y: number, nodeId: string, attributes?: DotAttributes, options?: any): this; + + /** + * Updates the position of the upper left corner of the node currently drawn + * with {@link drawNode}, accepting the same options argument. This method + * cannot be used after the node has been inserted into the graph data with + * {@link insertDrawnNode}. + * @param x new x co-ordinate of the top-left bounding box of the node + * @param y new y co-ordinate of the top-left bounding box of the node + * @param options object containing the options used when drawing the node, currently unused + */ + moveDrawnNode(x: number, y: number, options?: any): this; + + /** + * Inserts the node into the graph data, making it available for an animated + * transition into a subsequent new layout. + * @param nodeId the ID of the node + */ + inserDrawnNode(nodeId: string): this; + + /** + * Removes the node currently drawn with {@link drawNode}. This method cannot + * be used after the node has been inserted into the graph data with {@link insertDrawnNode}. + */ + removeDrawnNode(): this; + + /** + * Returns a {@link Selection} containing the node currently being drawn. The selection is empty + * if no node has been drawn or the lastest drawn node has been inserted into the graph data with + * {@link insertDrawnNode}. + */ + drawnNodeSelection(): Selection; + + // Large Graphs + /** + * Sets the total memory available to Viz.js to size bytes, which should be a power of 2. + * @param size the size in bytes of memory allocated to Viz.js + */ + totalMemory(size: number): this; +} + +/** + * Enum defining the valid strings that can be passed in as an engine + */ +export type Engine = 'circo' | 'dot' | 'fdp' | 'neato' | 'osage' | 'patchwork' | 'twopi'; + +/** + * Enum defining the valid strings that can be passed as TypeNames + */ +export type TypeNames = 'initEnd' | 'start' | 'layoutStart' | 'layoutEnd' | 'dataExtractEnd' | + 'dataProcessPass1End' | 'dataProcessPass2End' | 'dataProcessEnd' | + 'renderStart' | 'renderEnd' | 'transitionStart' | 'transitionEnd' | + 'resotreEnd' | 'end' | string; // string included to allow for optional addition of a name, e.g. initEnd.foo + +/** + * Enum defining the valid strings that can be passed as KeyModes + */ +export type KeyMode = 'title' | 'id' | 'tag-index' | 'index'; + +/** + * Interface defining the options present on the Graphviz Renderer. + * Most map directly to methods that can be used to set their values. + */ +export interface GraphvizOptions { + useWorker?: boolean; + engine?: Engine; + totalMemory?: number; + keyMode?: KeyMode; + fade?: boolean; + tweenPaths?: boolean; + tweenShapes?: boolean; + convertEqualSidedPolygons?: boolean; + tweenPrecision?: number | string; + growEnteringEdges?: boolean; + zoom?: boolean; + zoomScaleExtent?: [number, number]; + zoomTranslateExtent?: [[number, number], [number, number]]; + width?: number; + height?: number; + scale?: number; + fit?: boolean; +} + +/** + * Interface defining the attributes available per the DOT language + */ +export interface DotAttributes { + style?: any; + URL?: any; + tooltip?: any; +} + +/** + * Interface defining the options available for rendering edges + */ +export interface EdgeOptions { + shortening: number; +} From a40a7eada5938aec5ce1440f82d725aa83ab6e2b Mon Sep 17 00:00:00 2001 From: Dom Parfitt Date: Mon, 15 Oct 2018 15:02:29 +0100 Subject: [PATCH 29/32] Removed unnecessary generics --- types/d3-graphviz/index.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/types/d3-graphviz/index.d.ts b/types/d3-graphviz/index.d.ts index f08ec0e019..12316c5147 100644 --- a/types/d3-graphviz/index.d.ts +++ b/types/d3-graphviz/index.d.ts @@ -36,7 +36,7 @@ declare module 'd3-selection' { * @param selector either a string representing a selector for a given node or an instance of a node * @param options the options to be applied to the graphviz renderer */ -export function graphviz(selector: string | GElement, options?: GraphvizOptions | boolean): Graphviz; +export function graphviz(selector: string | BaseType, options?: GraphvizOptions | boolean): Graphviz; /** * Interface representing the Graphviz Renderer. Methods generally return the instance of the From 3be54467eb7c187cc05ea3cca77c8472c4097906 Mon Sep 17 00:00:00 2001 From: Dom Parfitt Date: Mon, 15 Oct 2018 15:21:22 +0100 Subject: [PATCH 30/32] Updated callbacks --- types/d3-graphviz/index.d.ts | 24 ++++++++++++++++-------- 1 file changed, 16 insertions(+), 8 deletions(-) diff --git a/types/d3-graphviz/index.d.ts b/types/d3-graphviz/index.d.ts index 12316c5147..8d703309ed 100644 --- a/types/d3-graphviz/index.d.ts +++ b/types/d3-graphviz/index.d.ts @@ -5,7 +5,7 @@ // TypeScript Version: 2.3 import { ZoomBehavior } from 'd3-zoom'; -import { Selection, BaseType } from 'd3-selection'; +import { Selection, BaseType, ValueFn } from 'd3-selection'; import { Transition } from 'd3-transition'; /** @@ -63,7 +63,7 @@ export interface Graphviz void): this; /** * Starts computation of the layout of a graph from the specified dotSrc string and saves the data for @@ -71,14 +71,14 @@ export interface Graphviz void): this; /** * Starts rendering of an SVG graph from data saved by {@link dot} and appends it to the selection * the grapviz renderer instance was generated on. * @param callback */ - render(callback?: Function): this; + render(callback?: () => void): this; /** * Sets the Graphviz layout engine name to the specified engine string. @@ -98,7 +98,7 @@ export interface Graphviz void): this; // Images /** @@ -113,7 +113,15 @@ export interface Graphviz): this; + /** + * Applies the specified transition name to subsequent SVG rendering. Accepts the same arguments + * as {@link d3-select.transition} or a function, but returns the graph renderer instance, not the + * transition. If name is a function, it is taken to be a transition factory. A transition factory + * is a function that returns a transition. + * @param name either a function returning a transition, a transition object or a string naming a + * transition + */ + transition(name?: () => Transition | string | Transition): this; /** * Returns the active transition on the generated graph's top level svg with the specified name, @@ -155,7 +163,7 @@ export interface Graphviz void): this; /** * Sets whether events are logged or not. @@ -260,7 +268,7 @@ export interface Graphviz): this; // Accessing Extracted Data /** From 93e0c830c8555fa9da989414bcd452953060b6d5 Mon Sep 17 00:00:00 2001 From: Dom Parfitt Date: Tue, 16 Oct 2018 09:06:13 +0100 Subject: [PATCH 31/32] Fixed incorrect method name --- types/d3-graphviz/index.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/types/d3-graphviz/index.d.ts b/types/d3-graphviz/index.d.ts index 8d703309ed..9d3dc1ac61 100644 --- a/types/d3-graphviz/index.d.ts +++ b/types/d3-graphviz/index.d.ts @@ -373,7 +373,7 @@ export interface Graphviz Date: Fri, 26 Oct 2018 21:07:23 +0100 Subject: [PATCH 32/32] Fixed typo in enum --- types/d3-graphviz/index.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/types/d3-graphviz/index.d.ts b/types/d3-graphviz/index.d.ts index 9d3dc1ac61..e3a30ce4f7 100644 --- a/types/d3-graphviz/index.d.ts +++ b/types/d3-graphviz/index.d.ts @@ -407,7 +407,7 @@ export type Engine = 'circo' | 'dot' | 'fdp' | 'neato' | 'osage' | 'patchwork' | export type TypeNames = 'initEnd' | 'start' | 'layoutStart' | 'layoutEnd' | 'dataExtractEnd' | 'dataProcessPass1End' | 'dataProcessPass2End' | 'dataProcessEnd' | 'renderStart' | 'renderEnd' | 'transitionStart' | 'transitionEnd' | - 'resotreEnd' | 'end' | string; // string included to allow for optional addition of a name, e.g. initEnd.foo + 'restoreEnd' | 'end' | string; // string included to allow for optional addition of a name, e.g. initEnd.foo /** * Enum defining the valid strings that can be passed as KeyModes