Halfway updating Network to hammer2

lib/network/Network.js

@@ -659,20 +659,20 @@ Network.prototype.destroy = function() {
   this.keycharm.reset();
 
   // clear hammer bindings
-  this.hammer.dispose();
+  this.hammer.destroy();
 
   // clear events
   this.off();
 
   this._recursiveDOMDelete(this.containerElement);
-}
+};
 
 Network.prototype._recursiveDOMDelete = function(DOMobject) {
   while (DOMobject.hasChildNodes() == true) {
     this._recursiveDOMDelete(DOMobject.firstChild);
     DOMobject.removeChild(DOMobject.firstChild);
   }
-}
+};
 
 /**
  * Check if there is an element on the given position in the network

lib/network/mixins/ManipulationMixin.js

@@ -2,6 +2,7 @@ var util = require('../../util');
 var Node = require('../Node');
 var Edge = require('../Edge');
 var Hammer = require('../../module/hammer');
+var hammerUtil = require('../../hammerUtil');
 
 /**
  * clears the toolbar div element of children
@@ -26,7 +27,7 @@ exports._cleanManipulatorHammers = function() {
   // clean hammer bindings
   if (this.manipulationHammers.length != 0) {
     for (var i = 0; i < this.manipulationHammers.length; i++) {
-      this.manipulationHammers[i].dispose();
+      this.manipulationHammers[i].destroy();
     }
     this.manipulationHammers = [];
   }
@@ -215,10 +216,10 @@ exports._createManipulatorBar = function() {
 
 
 exports._bindHammerToDiv = function(domElement, funct) {
-  var hammer = Hammer(domElement, {prevent_default: true});
-  hammer.on('touch', this[funct].bind(this));
+  var hammer = new Hammer(domElement, {});
+  hammerUtil.onTouch(hammer, this[funct].bind(this));
   this.manipulationHammers.push(hammer);
-}
+};
 
 
 /**
@@ -419,7 +420,7 @@ exports._selectControlNode = function(pointer) {
  * @private
  */
 exports._controlNodeDrag = function(event) {
-  var pointer = this._getPointer(event.gesture.center);
+  var pointer = this._getPointer(event.center);
   if (this.selectedControlNode !== null && this.selectedControlNode !== undefined) {
     this.selectedControlNode.x = this._XconvertDOMtoCanvas(pointer.x);
     this.selectedControlNode.y = this._YconvertDOMtoCanvas(pointer.y);
@@ -494,7 +495,7 @@ exports._handleConnect = function(pointer) {
         this.cachedFunctions["_handleOnDrag"] = this._handleOnDrag;
         var me = this;
         this._handleOnDrag = function(event) {
-          var pointer = me._getPointer(event.gesture.center);
+          var pointer = me._getPointer(event.center);
           var connectionEdge = me.body.edges['connectionEdge'];
           connectionEdge.to.x = me._XconvertDOMtoCanvas(pointer.x);
           connectionEdge.to.y = me._YconvertDOMtoCanvas(pointer.y);
@@ -507,7 +508,7 @@ exports._handleConnect = function(pointer) {
 
 exports._finishConnect = function(event) {
   if (this._getSelectedNodeCount() == 1) {
-    var pointer = this._getPointer(event.gesture.center);
+    var pointer = this._getPointer(event.center);
     // restore the drag function
     this._handleOnDrag = this.cachedFunctions["_handleOnDrag"];
     delete this.cachedFunctions["_handleOnDrag"];

lib/network/mixins/NavigationMixin.js

@@ -1,11 +1,12 @@
 var util = require('../../util');
 var Hammer = require('../../module/hammer');
+var hammerUtil = require('../../hammerUtil');
 
 exports._cleanNavigation = function() {
   // clean hammer bindings
   if (this.navigationHammers.length != 0) {
     for (var i = 0; i < this.navigationHammers.length; i++) {
-      this.navigationHammers[i].dispose();
+      this.navigationHammers[i].destroy();
     }
     this.navigationHammers = [];
   }
@@ -41,8 +42,8 @@ exports._loadNavigationElements = function() {
     this.navigationDOM[navigationDivs[i]].className = 'network-navigation ' + navigationDivs[i];
     this.navigationDOM['wrapper'].appendChild(this.navigationDOM[navigationDivs[i]]);
 
-    var hammer = Hammer(this.navigationDOM[navigationDivs[i]], {prevent_default: true});
-    hammer.on('touch', this[navigationDivActions[i]].bind(this));
+    var hammer = new Hammer(this.navigationDOM[navigationDivs[i]], {prevent_default: true});
+    hammerUtil.onTouch(hammer, this[navigationDivActions[i]].bind(this));
     this.navigationHammers.push(hammer);
   }
 

lib/network/modules/Canvas.js

@@ -1,9 +1,5 @@
-/**
- * Created by Alex on 26-Feb-15.
- */
-
-
 var Hammer = require('../../module/hammer');
+var hammerUtil = require('../../hammerUtil');
 
 class Canvas {
   /**
@@ -79,36 +75,32 @@ class Canvas {
   _bindHammer() {
     var me = this;
     if (this.hammer !== undefined) {
-      this.hammer.dispose();
+      this.hammer.destroy();
     }
     this.drag = {};
     this.pinch = {};
-    this.hammer = Hammer(this.frame.canvas, {
-      prevent_default: true
-    });
+    this.hammer = new Hammer(this.frame.canvas);
     this.hammer.on('tap',       me.body.eventListeners.onTap );
     this.hammer.on('doubletap', me.body.eventListeners.onDoubleTap );
-    this.hammer.on('hold',      me.body.eventListeners.onHold );
-    this.hammer.on('touch',     me.body.eventListeners.onTouch );
-    this.hammer.on('dragstart', me.body.eventListeners.onDragStart );
-    this.hammer.on('drag',      me.body.eventListeners.onDrag );
-    this.hammer.on('dragend',   me.body.eventListeners.onDragEnd );
-
+    this.hammer.on('press',     me.body.eventListeners.onHold );
+    hammerUtil.onTouch(this.hammer, me.body.eventListeners.onTouch );
+    this.hammer.on('panstart',  me.body.eventListeners.onDragStart );
+    this.hammer.on('panmove',   me.body.eventListeners.onDrag );
+    this.hammer.on('panend',    me.body.eventListeners.onDragEnd );
+    this.hammer.on('pinch',     me.body.eventListeners.onPinch.bind(me) );
+
+    // TODO: neatly cleanup these handlers when re-creating the Canvas
     if (this.options.zoomable == true) {
-      this.hammer.on('mousewheel',      me.body.eventListeners.onMouseWheel.bind(me));
-      this.hammer.on('DOMMouseScroll',  me.body.eventListeners.onMouseWheel.bind(me)); // for FF
-      this.hammer.on('pinch',           me.body.eventListeners.onPinch.bind(me) );
+      this.frame.canvas.addEventListener('mousewheel',     me.body.eventListeners.onMouseWheel.bind(me));
+      this.frame.canvas.addEventListener('DOMMouseScroll', me.body.eventListeners.onMouseWheel.bind(me));
     }
 
-    this.hammer.on('mousemove', me.body.eventListeners.onMouseMove.bind(me) );
+    this.frame.canvas.addEventListener('mousemove', me.body.eventListeners.onMouseMove.bind(me));
 
-    this.hammerFrame = Hammer(this.frame, {
-      prevent_default: true
-    });
-    this.hammerFrame.on('release', me.body.eventListeners.onRelease.bind(me) );
+    this.hammerFrame = new Hammer(this.frame);
+    hammerUtil.onRelease(this.hammerFrame, me.body.eventListeners.onRelease.bind(me) );
   }
 
-
   setOptions(options = {}) {
     this.options = options;
   }

lib/network/modules/TouchEventHandler.js

@@ -40,14 +40,14 @@ class TouchEventHandler {
 
   /**
    * Get the pointer location from a touch location
-   * @param {{pageX: Number, pageY: Number}} touch
+   * @param {{x: Number, y: Number}} touch
    * @return {{x: Number, y: Number}} pointer
    * @private
    */
   getPointer(touch) {
     return {
-      x: touch.pageX - util.getAbsoluteLeft(this.canvas.frame.canvas),
-      y: touch.pageY - util.getAbsoluteTop(this.canvas.frame.canvas)
+      x: touch.x - util.getAbsoluteLeft(this.canvas.frame.canvas),
+      y: touch.y - util.getAbsoluteTop(this.canvas.frame.canvas)
     };
   }
 
@@ -58,8 +58,9 @@ class TouchEventHandler {
    * @private
    */
   onTouch(event) {
+    console.log('touch!')
     if (new Date().valueOf() - this.touchTime > 100) {
-      this.drag.pointer = this.getPointer(event.gesture.center);
+      this.drag.pointer = this.getPointer(event.center);
       this.drag.pinched = false;
       this.pinch.scale = this.scale;
 
@@ -73,8 +74,7 @@ class TouchEventHandler {
    * @private
    */
   onTap(event) {
-    console.log("tap",event)
-    var pointer = this.getPointer(event.gesture.center);
+    var pointer = this.getPointer(event.center);
     this.pointerPosition = pointer;
     this.selectionHandler.selectOnPoint(pointer);
   }

lib/timeline/Core.js

@@ -1,5 +1,6 @@
 var Emitter = require('emitter-component');
 var Hammer = require('../module/hammer');
+var hammerUtil = require('../hammerUtil');
 var util = require('../util');
 var DataSet = require('../DataSet');
 var DataView = require('../DataView');
@@ -135,12 +136,8 @@ Core.prototype._create = function (container) {
   });
 
   // emulate a touch event (emitted before the start of a pan, pinch, tap, or press)
-  this.hammer.on('hammer.input', function (event) {
-    if (event.isFirst) {
-      if (me.isActive()) {
-        me.emit('touch', event);
-      }
-    }
+  hammerUtil.onTouch(this.hammer, function (event) {
+    me.emit('touch', event);
   }.bind(this));
 
   function onMouseWheel(event) {