From 165ab9ab490a59b9c9da917e3cbbe7660632e2bc Mon Sep 17 00:00:00 2001 From: jos Date: Mon, 2 Mar 2015 11:36:37 +0100 Subject: [PATCH] Halfway updating Network to hammer2 --- lib/network/Network.js | 6 ++-- lib/network/mixins/ManipulationMixin.js | 15 ++++----- lib/network/mixins/NavigationMixin.js | 7 +++-- lib/network/modules/Canvas.js | 40 ++++++++++-------------- lib/network/modules/TouchEventHandler.js | 12 +++---- lib/timeline/Core.js | 9 ++---- 6 files changed, 40 insertions(+), 49 deletions(-) diff --git a/lib/network/Network.js b/lib/network/Network.js index 76d1cb14..eaec5265 100644 --- a/lib/network/Network.js +++ b/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 diff --git a/lib/network/mixins/ManipulationMixin.js b/lib/network/mixins/ManipulationMixin.js index 9052b780..cc14c3a8 100644 --- a/lib/network/mixins/ManipulationMixin.js +++ b/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"]; diff --git a/lib/network/mixins/NavigationMixin.js b/lib/network/mixins/NavigationMixin.js index 93a1f97e..b9361131 100644 --- a/lib/network/mixins/NavigationMixin.js +++ b/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); } diff --git a/lib/network/modules/Canvas.js b/lib/network/modules/Canvas.js index 73cd8b27..8f382186 100644 --- a/lib/network/modules/Canvas.js +++ b/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; } diff --git a/lib/network/modules/TouchEventHandler.js b/lib/network/modules/TouchEventHandler.js index b5b07473..96e5ed97 100644 --- a/lib/network/modules/TouchEventHandler.js +++ b/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); } diff --git a/lib/timeline/Core.js b/lib/timeline/Core.js index cc3fef4f..92c79e72 100644 --- a/lib/timeline/Core.js +++ b/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) {