🤖 Merge PR #54320 Add typing for all imports from dagre-d3 by @chanwutk

* add types to all exports of dagre-d3; add corresponding tests

* passing test

* type check with $Expect

* clean up

* test

types/dagre-d3/dagre-d3-tests.ts

@@ -1,15 +1,101 @@
-import * as graphlib from "graphlib";
-import { render } from "dagre-d3";
+import { dagre, intersect, render, util } from "dagre-d3";
 import * as d3 from "d3";
 
-const graph = new graphlib.Graph();
+const graph = new dagre.graphlib.Graph<{extraProp: string}>();
 
 // has graph methods from dagre.d.ts
-graph.setNode("a", {});
+graph.setNode("a", {extraProp: 'test'});
 
+const node: dagre.Node<{extraProp: string}> = graph.node("a");
+
+// has extraProp in Graph"s Generic type
+// $ExpectType string
+node.extraProp;
+
+// intersect
+const point = {x: 0, y: 0};
+const _ = intersect.node(node, point);
+const {x: _xcircle, y: _ycircle} = intersect.circle(node, 0, point);
+const {x: _xellipse, y: _yellipse} = intersect.ellipse(node, 0, 0, point);
+const {x: _xpolygon, y: _ypolygon} = intersect.polygon(node, [point], point);
+const {x: _xrect, y: _yrect} = intersect.rect(node, point);
+
+// render
 const renderer = new render();
-renderer.arrows()["arrowType"] = (parent: d3.Selection<any, any, any, any>, id: string, edge: dagre.Edge, type: string) => { };
-renderer.shapes()["shapeName"] = (parent: d3.Selection<any, any, any, any>, bbox: any, node: dagre.Node) => { };
+
+// $ExpectType Arrows
+const arrows = renderer.arrows();
+renderer.arrows({
+  ...arrows,
+  arrowType: (parent: d3.Selection<any, any, any, any>, _id: string, _edge: dagre.Edge, _type: string) => { }
+});
+
+// $ExpectType Shapes
+const shapes = renderer.shapes();
+renderer.shapes({
+  ...shapes,
+  shapeName: (parent: d3.Selection<d3.BaseType, any, any, any>, _bbox: any, _node: dagre.Node) => parent.insert("rect"),
+});
 
 const svg = d3.select("svg");
 renderer(svg, graph);
+
+// $ExpectType CreateNodes
+const createNodes = renderer.createNodes();
+renderer.createNodes((selection, _g, _shape) => selection.selectAll("g"))
+  .createNodes(createNodes);
+
+// $ExpectType CreateClusters
+const createClusters = renderer.createClusters();
+renderer.createClusters((selection, _g) => selection.selectAll("g"))
+  .createClusters(createClusters);
+
+// $ExpectType CreateEdgeLabels
+const createEdgeLabels = renderer.createEdgeLabels();
+renderer.createEdgeLabels((selection, _g) => selection.selectAll("g"))
+  .createEdgeLabels(createEdgeLabels);
+
+// $ExpectType CreateEdgePaths
+const createEdgePaths = renderer.createEdgePaths();
+renderer.createEdgePaths((selection, _g) => selection.selectAll("g"))
+  .createEdgePaths(createEdgePaths);
+
+// util
+// $ExpectType boolean
+util.isSubgraph(graph, "a");
+
+// $ExpectType string
+util.edgeToId({v: "a", w: "b", name: "c"});
+
+// $ExpectType void
+util.applyStyle(
+  d3.select<d3.BaseType, string>("svg"),
+  function(
+    this: d3.BaseType,
+    _d: string,
+    _index: number,
+    _groups: d3.BaseType[] | d3.ArrayLike<d3.BaseType>,
+  ) {
+    return "fill: red";
+  }
+);
+
+// $ExpectType void
+util.applyClass(
+  d3.select<d3.BaseType, string>("svg"),
+  function(
+    this: d3.BaseType,
+    _d: string,
+    _index: number,
+    _groups: d3.BaseType[] | d3.ArrayLike<d3.BaseType>,
+  ) {
+    return "class-name";
+  },
+  'other-class-1 other-class-2'
+);
+
+// $ExpectType SelectionOrTransition<BaseType, string, HTMLElement, any>
+util.applyTransition(
+  d3.select<d3.BaseType, string>("svg"),
+  graph,
+);

types/dagre-d3/index.d.ts

@@ -5,21 +5,142 @@
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 // TypeScript Version: 2.2
 
-import * as d3 from "d3";
+import {
+  BaseType,
+  Selection,
+  SelectionOrTransition,
+  ValueFn,
+} from "d3";
 import * as dagre from "dagre";
 import * as graphlib from "graphlib";
 
 export as namespace dagreD3;
 
-export * from "dagre";
+export {
+  dagre as dagre,
+  graphlib as graphlib,
+};
+
+export interface Point {
+  x: number;
+  y: number;
+}
+
+export const intersect: {
+  node: (node: dagre.Node, point: any) => any;
+
+  circle: (
+    node: dagre.Node,
+    rx: number,
+    point: Point,
+  ) => Point;
+
+  ellipse: (
+    node: dagre.Node,
+    rx: number,
+    ry: number,
+    point: Point,
+  ) => Point;
+
+  polygon: (
+    node: dagre.Node,
+    polyPoints: Point[],
+    point: Point,
+  ) => Point;
+
+  rect: (
+    node: dagre.Node,
+    point: Point,
+  ) => Point;
+};
+
 export const render: { new(): Render };
-export const intersect: { [shapeName: string]: (node: dagre.Node, points: Array<{}>, point: any) => void };
+
+export const util: {
+  isSubgraph: (g: dagre.graphlib.Graph<any>, v: string) => boolean,
+
+  edgeToId: (e: {v: string, w: string, name: string}) => string,
+
+  applyStyle: <GElement extends BaseType, Datum>(
+    dom: Selection<GElement, Datum, any, any>,
+    styleFn: ValueFn<GElement, Datum, string | number | boolean | null>,
+  ) => void,
+
+  applyClass: <GElement extends BaseType, Datum>(
+    dom: Selection<GElement, Datum, any, any>,
+    classFn: ValueFn<GElement, Datum, string | number | boolean | null>,
+    otherClasses: string,
+  ) => void,
+
+  applyTransition: <GElement extends BaseType, Datum, PElement extends BaseType, PDatum>(
+    selection: Selection<GElement, Datum, PElement, PDatum>,
+    g: dagre.graphlib.Graph<any>,
+  ) => SelectionOrTransition<GElement, Datum, PElement, PDatum>,
+};
+
+export type CreateNodes = (
+  selection: Selection<SVGGElement, string, any, any>,
+  g: dagre.graphlib.Graph<any>,
+  shapes: Shapes,
+) => SelectionOrTransition<BaseType, any, any, any>;
+
+export type CreateClusters = (
+  selection: Selection<SVGGElement, string, any, any>,
+  g: dagre.graphlib.Graph<any>,
+) => SelectionOrTransition<BaseType, any, any, any>;
+
+export type CreateEdgeLabels = (
+  selection: Selection<SVGGElement, string, any, any>,
+  g: dagre.graphlib.Graph<any>,
+) => SelectionOrTransition<BaseType, any, any, any>;
+
+export type CreateEdgePaths = (
+  selection: Selection<SVGGElement, string, any, any>,
+  g: dagre.graphlib.Graph<any>,
+  arrows: Arrows,
+) => SelectionOrTransition<BaseType, any, any, any>;
+
+export type Arrow = (
+  parent: Selection<any, any, any, any>,
+  id: string,
+  edge: dagre.Edge,
+  type: string,
+) => void;
+
+export interface Arrows {
+  [arrowStyleName: string]: Arrow;
+}
+
+export type Shape = (
+  parent: Selection<any, string, any, any>,
+  bbox: any,
+  node: dagre.Node,
+) => Selection<any, string, any, any>;
+
+export interface Shapes {
+  [shapeStyleName: string]: Shape;
+}
 
 export interface Render {
   // see https://dagrejs.github.io/project/dagre-d3/latest/demo/user-defined.html for example usage
 
-  (selection: d3.Selection<any, any, any, any>, g: graphlib.Graph): void;
+  (selection: Selection<any, any, any, any>, g: dagre.graphlib.Graph<any>): void;
 
-  arrows(): { [arrowStyleName: string]: (parent: d3.Selection<any, any, any, any>, id: string, edge: dagre.Edge, type: string) => void };
-  shapes(): { [shapeStyleName: string]: (parent: d3.Selection<any, any, any, any>, bbox: any, node: dagre.Node) => void };
+  createNodes(): CreateNodes;
+  createNodes(value: CreateNodes): Render;
+
+  createClusters(): CreateClusters;
+  createClusters(value: CreateClusters): Render;
+
+  createEdgeLabels(): CreateEdgeLabels;
+  createEdgeLabels(value: CreateEdgeLabels): Render;
+
+  createEdgePaths(): CreateEdgePaths;
+  createEdgePaths(value: CreateEdgePaths): Render;
+
+  arrows(): Arrows;
+  arrows(value: Arrows): Render;
+
+  shapes(): Shapes;
+  shapes(value: Shapes): Render;
 }