Merge pull request #51 from endrjuskr/feature/upgradeD3

Upgrade D3 to V4

package.json

@@ -40,18 +40,16 @@
   ],
   "author": "Palantir",
   "license": "MIT",
-  "dependencies": {
-    "@types/d3": "^3.5",
-    "d3": "^3.5"
-  },
   "devDependencies": {
     "@types/chai": "3.4.34",
+    "@types/d3": "^4.4.1",
     "@types/mocha": "2.2.33",
     "@types/node": "6.0.52",
     "browserify": "^13.3.0",
     "browserify-shim": "^3.8.12",
     "circle-github-bot": "^0.4.0",
     "chai": "3.5.0",
+    "circle-github-bot": "^0.4.0",
     "http-server": "^0.9.0",
     "istanbul": "^0.4.5",
     "mocha": "3.2.0",
@@ -64,5 +62,8 @@
     "tslint": "^4.3.1",
     "typedoc": "^0.5.3",
     "typescript": "2.1.4"
+  },
+  "dependencies": {
+    "d3": "^4.5.0"
   }
 }

src/animators/baseAnimator.ts

@@ -6,6 +6,10 @@
 
 import * as d3 from "d3";
 
+import { d3Selection, DOM } from "../utils";
+
+export type EasingFn = (normalizedTime: number) => number;
+
 export class BaseAnimator {
 
   /**
@@ -16,11 +20,11 @@ export class BaseAnimator {
   /**
    * The default easing of the animation
    */
-  public static DEFAULT_EASING = "exp-out";
+  public static DEFAULT_EASING: EasingFn = d3.easeExpOut;
 
   private _duration: number;
   private _delay: number;
-  private _easing: string;
+  private _easing: EasingFn;
   private _moveX: number;
   private _moveY: number;
 
@@ -32,20 +36,21 @@ export class BaseAnimator {
     this.moveY(0);
   }
 
-  public animate(selection: d3.Selection<any>): any {
-    const xForm = d3.transform("");
-    xForm.translate = [this.moveX(), this.moveY()];
-    selection.attr("transform", xForm.toString());
-    xForm.translate = [0, 0];
-    return this._animate(selection, { transform: xForm.toString() });
+  public animate(selection: d3Selection<any>): any {
+    DOM.transform(selection, this.moveX(), this.moveY());
+    const initialTranslate = `translate(0, 0)`;
+    return this._animate(selection, { transform: initialTranslate });
   }
 
-  public _animate(selection: d3.Selection<any>, attr: any) {
-    return selection.transition()
+  public _animate(selection: d3Selection<any>, attr: any): d3.Transition<any, any, any, any> {
+    const transition = selection.transition()
       .ease(this.easing())
       .duration(this.duration())
-      .delay(this.delay())
-      .attr(attr);
+      .delay(this.delay());
+
+    DOM.applyAttrs(transition, attr);
+
+    return transition;
   }
 
   public duration(): number;
@@ -92,9 +97,9 @@ export class BaseAnimator {
     }
   }
 
-  public easing(): string;
-  public easing(easing: string): BaseAnimator;
-  public easing(easing?: string): any {
+  public easing(): EasingFn;
+  public easing(easing: EasingFn): BaseAnimator;
+  public easing(easing?: EasingFn): any {
     if (easing == null) {
       return this._easing;
     } else {

src/animators/opacityAnimator.ts

@@ -4,12 +4,12 @@
  * license at https://github.com/palantir/svg-typewriter/blob/develop/LICENSE
  */
 
-import * as d3 from "d3";
+import { d3Selection } from "../utils";
 
 import { BaseAnimator } from "./baseAnimator";
 
 export class OpacityAnimator extends BaseAnimator {
-  public animate(selection: d3.Selection<any>): any {
+  public animate(selection: d3Selection<any>): any {
     const area = selection.select(".text-area");
     area.attr("opacity", 0);
     const attr = {

src/measurers/abstractMeasurer.ts

@@ -6,7 +6,7 @@
 
 import * as d3 from "d3";
 
-import * as Utils from "../utils";
+import { d3Selection, DOM } from "../utils";
 
 /**
  * Dimension of area's BBox.
@@ -24,52 +24,52 @@ export class AbstractMeasurer {
 
   private textMeasurer: ITextMeasurer;
 
-  constructor(area: d3.Selection<void>, className?: string) {
+  constructor(area: d3Selection<any>, className?: string) {
     this.textMeasurer = this.getTextMeasurer(area, className);
   }
 
   public measure(text: string = AbstractMeasurer.HEIGHT_TEXT) {
     return this.textMeasurer(text);
   }
 
-  private checkSelectionIsText(d: d3.Selection<any>) {
-    return (d[0][0] as Element).tagName === "text" || !d.select("text").empty();
+  private checkSelectionIsText(d: d3Selection<Element>) {
+    return d.node().tagName === "text" || !d.select("text").empty();
   }
 
-  private getTextMeasurer(area: d3.Selection<void>, className: string) {
+  private getTextMeasurer(area: d3Selection<Element>, className: string) {
     if (!this.checkSelectionIsText(area)) {
-      const textElement = area.append("text");
+      const textElement = area.append<Element>("text");
       if (className) {
         textElement.classed(className, true);
       }
       textElement.remove();
       return (text: string)  => {
-        (area.node() as Element).appendChild(textElement.node() as Element);
+        area.node().appendChild(textElement.node());
         const areaDimension = this.measureBBox(textElement, text);
         textElement.remove();
         return areaDimension;
       };
     } else {
-      const parentNode = (area.node() as Element).parentNode;
-      let textSelection: d3.Selection<void>;
-      if ((area[0][0] as Element).tagName === "text") {
+      const parentNode = area.node().parentNode;
+      let textSelection: d3Selection<d3.BaseType>;
+      if (area.node().tagName === "text") {
         textSelection = area;
       } else {
         textSelection = area.select("text");
       }
       area.remove();
       return (text: string) => {
-        parentNode.appendChild(area.node() as Element);
+        parentNode.appendChild(area.node());
         const areaDimension = this.measureBBox(textSelection, text);
         area.remove();
         return areaDimension;
       };
     }
   }
 
-  private measureBBox(d: d3.Selection<void>, text: string) {
+  private measureBBox(d: d3Selection<any>, text: string) {
     d.text(text);
-    const bb = Utils.DOM.getBBox(d);
+    const bb = DOM.getBBox(d);
     return { width: bb.width, height: bb.height };
   }
 }

src/measurers/cacheCharacterMeasurer.ts

@@ -4,18 +4,17 @@
  * license at https://github.com/palantir/svg-typewriter/blob/develop/LICENSE
  */
 
-import * as d3 from "d3";
-import * as Utils from "../utils";
+import { Cache, d3Selection } from "../utils";
 
 import { IDimensions } from "./abstractMeasurer";
 import { CharacterMeasurer } from "./characterMeasurer";
 
 export class CacheCharacterMeasurer extends CharacterMeasurer {
-  private cache: Utils.Cache<IDimensions>;
+  private cache: Cache<IDimensions>;
 
-  constructor(area: d3.Selection<void>, className?: string, useGuards?: boolean) {
+  constructor(area: d3Selection<any>, className?: string, useGuards?: boolean) {
     super(area, className, useGuards);
-    this.cache = new Utils.Cache<IDimensions>((c: string) => {
+    this.cache = new Cache<IDimensions>((c: string) => {
       return this._measureCharacterNotFromCache(c);
     });
   }

src/measurers/cacheMeasurer.ts

@@ -4,18 +4,17 @@
  * license at https://github.com/palantir/svg-typewriter/blob/develop/LICENSE
  */
 
-import * as d3 from "d3";
-import * as Utils from "../utils";
+import { Cache, d3Selection } from "../utils";
 
 import { IDimensions } from "./abstractMeasurer";
 import { CacheCharacterMeasurer } from "./cacheCharacterMeasurer";
 
 export class CacheMeasurer extends CacheCharacterMeasurer {
-  private dimCache: Utils.Cache<IDimensions>;
+  private dimCache: Cache<IDimensions>;
 
-  constructor(area: d3.Selection<void>, className?: string) {
+  constructor(area: d3Selection<any>, className?: string) {
     super(area, className);
-    this.dimCache = new Utils.Cache<IDimensions>((s: string) => {
+    this.dimCache = new Cache<IDimensions>((s: string) => {
       return this._measureNotFromCache(s);
     });
   }

src/measurers/measurer.ts

@@ -6,13 +6,15 @@
 
 import * as d3 from "d3";
 
+import { d3Selection } from "../utils";
+
 import { AbstractMeasurer, IDimensions } from "./abstractMeasurer";
 
 export class Measurer extends AbstractMeasurer {
   private guardWidth: number;
   private useGuards: boolean;
 
-  constructor(area: d3.Selection<void>, className: string = null, useGuards: boolean = false) {
+  constructor(area: d3Selection<any>, className: string = null, useGuards: boolean = false) {
     super(area, className);
     this.useGuards = useGuards;
   }

src/utils/dom.ts

@@ -6,26 +6,27 @@
 
 import * as d3 from "d3";
 
+export type d3Selection<D extends d3.BaseType> = d3.Selection<D, any, any, any>;
+
 export class DOM {
-  public static transform(s: d3.Selection<any>): d3.Transform;
-  public static transform(s: d3.Selection<any>, x: number, y: number): d3.Selection<any>;
-  public static transform(s: d3.Selection<any>, x?: number, y?: number): any {
-    const xform = d3.transform(s.attr("transform"));
+  public static transform(s: d3Selection<any>): string;
+  public static transform(s: d3Selection<any>, x: number, y: number): d3Selection<any>;
+  public static transform(s: d3Selection<any>, x?: number, y?: number): any {
     if (x == null) {
-      return xform.translate;
+      return s.attr("transform");
     } else {
       y = (y == null) ? 0 : y;
-      xform.translate[0] = x;
-      xform.translate[1] = y;
-      s.attr("transform", xform.toString());
+      const translate = `translate(${x}, ${y})`;
+      s.attr("transform", translate);
       return s;
     }
   }
 
-  public static getBBox(element: d3.Selection<any>): SVGRect {
+  public static getBBox(element: d3Selection<any>): SVGRect {
     let bbox: SVGRect;
     try {
-      bbox = (element.node() as any).getBBox();
+      // getBBox will only be avaiable on SVGLocatable. Otherwise return default.
+      bbox = element.node().getBBox();
     } catch (err) {
       bbox = {
         height: 0,
@@ -36,4 +37,8 @@ export class DOM {
     }
     return bbox;
   }
+
+  public static applyAttrs(element: any, attrs: { [key: string]: any }) {
+    Object.keys(attrs).forEach((key) => element.attr(key, attrs[key]));
+  }
 }