Android touch support

src/factories/Container.ts

@@ -61,6 +61,9 @@ module n3Charts.Factory {
       element.addEventListener('mouseout', (event) => {
         eventMgr.triggerDataAndOptions.apply(eventMgr, ['container-out', event]);
       });
+      element.addEventListener('touchstart', function (event) {
+          eventMgr.triggerDataAndOptions.apply(eventMgr, ['container-tap', event]);
+        });
     }
 
     getCoordinatesFromEvent(event): ICoordinates {
@@ -69,11 +72,13 @@ module n3Charts.Factory {
       var {left, top} = event.currentTarget.getBoundingClientRect();
 
       var xScale = (<Factory.Axis>this.factoryMgr.get('x-axis'));
-      var x = xScale.invert(event.clientX - left - dim.margin.left);
-
+      var clientX = event.clientX || event.touches[0].clientX
+      var x = xScale.invert(clientX - left - dim.margin.left);
+
       var yScale = (<Factory.Axis>this.factoryMgr.get('y-axis'));
-      var y = <number>yScale.invert(event.clientY - top - dim.margin.top);
-
+      var clientY = event.clientY || event.touches[0].clientY
+      var y = <number>yScale.invert(clientY - top - dim.margin.top);
+
       return {y, x};
     }
 

src/factories/Pan.ts

@@ -79,10 +79,27 @@ module n3Charts.Factory {
         this.eventMgr.on(k('window-mouseup'), null);
         this.eventMgr.on(k('window-mousemove'), null);
       };
-
-      let onMouseMove = () => {
+
+      let onTouchEnd = () => {
+          if (this.hasMoved) {
+              this.eventMgr.trigger('pan-end');
+          }
+          if (turnBackOn) {
+              turnBackOn();
+          }
+          this.isActive = this.hasMoved = false;
+          turnBackOn = undefined;
+          this.eventMgr.on(k('window-touchend'), null);
+          this.eventMgr.on(k('window-touchmove'), null);
+      };
+
+      let onMove = () => {
         if (this.isActive) {
-          let [xEnd, yEnd] = d3.mouse(container.svg.node());
+          let eventCoordinate = d3.touches(container.svg.node())[0];
+          if(eventCoordinate === undefined){
+              eventCoordinate = d3.mouse(container.svg.node());
+          }
+          let [xEnd, yEnd] = eventCoordinate;
           let newDomains = this.getNewDomains(
             xStart - xEnd,
             xStart - xEnd,
@@ -119,9 +136,19 @@ module n3Charts.Factory {
             this.isActive = true;
             [xStart, yStart] = d3.mouse(event.currentTarget);
             this.eventMgr.on(k('window-mouseup'), onMouseUp);
-            this.eventMgr.on(k('window-mousemove'), onMouseMove);
+            this.eventMgr.on(k('window-mousemove'), onMove);
           }
         });
+
+      container.svg
+        .on(k('touchstart'), () => {
+          var event = <MouseEvent>d3.event;
+
+          this.isActive = true;
+          [xStart, yStart] = d3.touches(event.currentTarget)[0];          
+          this.eventMgr.on(k('window-touchend'), onTouchEnd);
+          this.eventMgr.on(k('window-touchmove'), onMove);
+        });
     }
   }
 }

src/factories/Tooltip.ts

@@ -29,6 +29,7 @@ module n3Charts.Factory {
       this.createTooltip();
       this.eventMgr.on('container-move.tooltip', this.show.bind(this));
       this.eventMgr.on('container-out.tooltip', this.hide.bind(this));
+      this.eventMgr.on('container-tap.tooltip', this.show.bind(this));
       this.eventMgr.on('outer-world-hover.tooltip', this.showFromCoordinates.bind(this));
 
       this.hide();

src/utils/EventManager.ts

@@ -30,6 +30,7 @@ module n3Charts.Utils {
 
       'container-over',   // on mouse over on the container
       'container-move',   // on mouse move on the container
+      'container-tap',   // on tap on the container
       'container-out',   // on mouse out on the container
 
       'focus',   // on focus of a data point from a snappy tooltip
@@ -47,6 +48,8 @@ module n3Charts.Utils {
 
       'window-mouseup',
       'window-mousemove',
+      'window-touchend',
+      'window-touchmove'
     ];
 
     init(events:string[]): EventManager {
@@ -64,7 +67,15 @@ module n3Charts.Utils {
         // (<Event>d3.event).preventDefault();
         this.trigger('window-mousemove')
       });
-
+      d3.select(window).on('touchmove.' + id, () => {
+        (<Event>d3.event).preventDefault();
+        this.trigger('window-touchmove');
+      });
+      d3.select(window).on('touchend.' + id, () => {
+        (<Event>d3.event).preventDefault();
+        this.trigger('window-touchend');
+      });
+
       // Support chaining
       return this;
     }
@@ -133,17 +144,22 @@ module n3Charts.Utils {
     // That would be so cool to have native dblclick support in D3...
     listenForDblClick(selection: d3.Selection<any>, callback: Function, listenerSuffix:string): d3.Selection<any> {
       let down,
+        up,
         tolerance = 5,
-        last,
-        wait = null;
+        wait = null,
+        touchWait = null;
 
       let dist = (a:number[], b:number[]):number => {
         return Math.sqrt(Math.pow(a[0] - b[0], 2) + Math.pow(a[1] - b[1], 2));
       };
 
       selection.on('mousedown.dbl.' + listenerSuffix, function() {
         down = d3.mouse(document.body);
-        last = new Date().getTime();
+      });
+
+      selection.on('touchstart.dbl.' + listenerSuffix, function () {
+          down = d3.touches(document.body)[0];
+          up = d3.touches(document.body)[0];
       });
 
       selection.on('mouseup.dbl.' + listenerSuffix, () => {
@@ -161,6 +177,27 @@ module n3Charts.Utils {
               wait = null;
             };
           })(d3.event), 300);
+        };
+      });
+
+      selection.on('touchmove.dbl.' + listenerSuffix, function () {
+          up = d3.touches(document.body)[0];
+      });
+
+      selection.on('touchend.dbl.' + listenerSuffix, () => {
+        if (!down || dist(down, up) > tolerance) {
+            return;
+        }
+        if (touchWait && this.options.doubleClickEnabled) {
+          window.clearTimeout(touchWait);
+          touchWait = null;
+          callback(d3.event);
+        } else {
+          touchWait = window.setTimeout((function(e) {
+            return function() {
+              touchWait = null;
+            };
+          })(d3.event), 300);
         }
       });