work in progress of porting the event handlres

9 years ago · 3541260108
--- a/dist/vis.js
+++ b/dist/vis.js
--- a/lib/network/Network.js
+++ b/lib/network/Network.js
@ -24,6 +24,7 @@ import { ClusterEngine } from './modules/Clustering'
 import { CanvasRenderer } from './modules/CanvasRenderer'
 import { Canvas } from './modules/Canvas'
 import { View } from './modules/View'
 import { TouchEventHandler } from './modules/TouchEventHandler'

 /**
 * @constructor Network
@ -226,9 +227,11 @@ function Network (container, data, options) {
  this.clustering = new ClusterEngine(this.body);
  this.physics = new PhysicsEngine(this.body);
  this.canvas = new Canvas(this.body);
  this.touchHandler = new TouchEventHandler(this.body);

  this.renderer.setCanvas(this.canvas);
  this.view.setCanvas(this.canvas);
  this.touchHandler.setCanvas(this.canvas);

  this.hoverObj = {nodes:{},edges:{}};
  this.controlNodesActive = false;
@ -671,443 +674,6 @@ Network.prototype._recursiveDOMDelete = function(DOMobject) {
  }
 }

 /**
 * Get the pointer location from a touch location
 * @param {{pageX: Number, pageY: Number}} touch
 * @return {{x: Number, y: Number}} pointer
 * @private
 */
 Network.prototype._getPointer = function (touch) {
  return {
    x: touch.pageX - util.getAbsoluteLeft(this.frame.canvas),
    y: touch.pageY - util.getAbsoluteTop(this.frame.canvas)
  };
 };

 /**
 * On start of a touch gesture, store the pointer
 * @param event
 * @private
 */
 Network.prototype._onTouch = function (event) {
  if (new Date().valueOf() - this.touchTime > 100) {
    this.drag.pointer = this._getPointer(event.gesture.center);
    this.drag.pinched = false;
    this.pinch.scale = this._getScale();

    // to avoid double fireing of this event because we have two hammer instances. (on canvas and on frame)
    this.touchTime = new Date().valueOf();

    this._handleTouch(this.drag.pointer);
  }
 };

 /**
 * handle drag start event
 * @private
 */
 Network.prototype._onDragStart = function (event) {
  this._handleDragStart(event);
 };


 /**
 * This function is called by _onDragStart.
 * It is separated out because we can then overload it for the datamanipulation system.
 *
 * @private
 */
 Network.prototype._handleDragStart = function(event) {
  // in case the touch event was triggered on an external div, do the initial touch now.
  if (this.drag.pointer === undefined) {
    this._onTouch(event);
  }

  var node = this._getNodeAt(this.drag.pointer);
  // note: drag.pointer is set in _onTouch to get the initial touch location

  this.drag.dragging = true;
  this.drag.selection = [];
  this.drag.translation = this._getTranslation();
  this.drag.nodeId = null;
  this.draggingNodes = false;

  if (node != null && this.constants.dragNodes == true) {
    this.draggingNodes = true;
    this.drag.nodeId = node.id;
    // select the clicked node if not yet selected
    if (!node.isSelected()) {
      this._selectObject(node,false);
    }

    this.emit("dragStart",{nodeIds:this.getSelection().nodes});

    // create an array with the selected nodes and their original location and status
    for (var objectId in this.selectionObj.nodes) {
      if (this.selectionObj.nodes.hasOwnProperty(objectId)) {
        var object = this.selectionObj.nodes[objectId];
        var s = {
          id: object.id,
          node: object,

          // store original x, y, xFixed and yFixed, make the node temporarily Fixed
          x: object.x,
          y: object.y,
          xFixed: object.xFixed,
          yFixed: object.yFixed
        };

        object.xFixed = true;
        object.yFixed = true;

        this.drag.selection.push(s);
      }
    }
  }
 };


 /**
 * handle drag event
 * @private
 */
 Network.prototype._onDrag = function (event) {
  this._handleOnDrag(event)
 };


 /**
 * This function is called by _onDrag.
 * It is separated out because we can then overload it for the datamanipulation system.
 *
 * @private
 */
 Network.prototype._handleOnDrag = function(event) {
  if (this.drag.pinched) {
    return;
  }

  // remove the focus on node if it is focussed on by the focusOnNode
  this.releaseNode();

  var pointer = this._getPointer(event.gesture.center);
  var me = this;
  var drag = this.drag;
  var selection = drag.selection;
  if (selection && selection.length && this.constants.dragNodes == true) {
    // calculate delta's and new location
    var deltaX = pointer.x - drag.pointer.x;
    var deltaY = pointer.y - drag.pointer.y;

    // update position of all selected nodes
    selection.forEach(function (s) {
      var node = s.node;

      if (!s.xFixed) {
        node.x = me._XconvertDOMtoCanvas(me._XconvertCanvasToDOM(s.x) + deltaX);
      }

      if (!s.yFixed) {
        node.y = me._YconvertDOMtoCanvas(me._YconvertCanvasToDOM(s.y) + deltaY);
      }
    });


    // start _animationStep if not yet running
    if (!this.moving) {
      this.moving = true;
      this.start();
    }
  }
  else {
    // move the network
    if (this.constants.dragNetwork == true) {
      // if the drag was not started properly because the click started outside the network div, start it now.
      if (this.drag.pointer === undefined) {
        this._handleDragStart(event);
        return;
      }
      var diffX = pointer.x - this.drag.pointer.x;
      var diffY = pointer.y - this.drag.pointer.y;

      this._setTranslation(
        this.drag.translation.x + diffX,
        this.drag.translation.y + diffY
      );
      this._redraw();
    }
  }
 };

 /**
 * handle drag start event
 * @private
 */
 Network.prototype._onDragEnd = function (event) {
  this._handleDragEnd(event);
 };


 Network.prototype._handleDragEnd = function(event) {
  this.drag.dragging = false;
  var selection = this.drag.selection;
  if (selection && selection.length) {
    selection.forEach(function (s) {
      // restore original xFixed and yFixed
      s.node.xFixed = s.xFixed;
      s.node.yFixed = s.yFixed;
    });
    this.moving = true;
    this.start();
  }
  else {
    this._redraw();
  }
  if (this.draggingNodes == false) {
    this.emit("dragEnd",{nodeIds:[]});
  }
  else {
    this.emit("dragEnd",{nodeIds:this.getSelection().nodes});
  }

 }
 /**
 * handle tap/click event: select/unselect a node
 * @private
 */
 Network.prototype._onTap = function (event) {
  var pointer = this._getPointer(event.gesture.center);
  this.pointerPosition = pointer;
  this._handleTap(pointer);

 };


 /**
 * handle doubletap event
 * @private
 */
 Network.prototype._onDoubleTap = function (event) {
  var pointer = this._getPointer(event.gesture.center);
  this._handleDoubleTap(pointer);
 };


 /**
 * handle long tap event: multi select nodes
 * @private
 */
 Network.prototype._onHold = function (event) {
  var pointer = this._getPointer(event.gesture.center);
  this.pointerPosition = pointer;
  this._handleOnHold(pointer);
 };

 /**
 * handle the release of the screen
 *
 * @private
 */
 Network.prototype._onRelease = function (event) {
  var pointer = this._getPointer(event.gesture.center);
  this._handleOnRelease(pointer);
 };

 /**
 * Handle pinch event
 * @param event
 * @private
 */
 Network.prototype._onPinch = function (event) {
  var pointer = this._getPointer(event.gesture.center);

  this.drag.pinched = true;
  if (!('scale' in this.pinch)) {
    this.pinch.scale = 1;
  }

  // TODO: enabled moving while pinching?
  var scale = this.pinch.scale * event.gesture.scale;
  this._zoom(scale, pointer)
 };

 /**
 * Zoom the network in or out
 * @param {Number} scale a number around 1, and between 0.01 and 10
 * @param {{x: Number, y: Number}} pointer    Position on screen
 * @return {Number} appliedScale    scale is limited within the boundaries
 * @private
 */
 Network.prototype._zoom = function(scale, pointer) {
  if (this.constants.zoomable == true) {
    var scaleOld = this._getScale();
    if (scale < 0.00001) {
      scale = 0.00001;
    }
    if (scale > 10) {
      scale = 10;
    }

    var preScaleDragPointer = null;
    if (this.drag !== undefined) {
      if (this.drag.dragging == true) {
        preScaleDragPointer = this.DOMtoCanvas(this.drag.pointer);
      }
    }
  // + this.frame.canvas.clientHeight / 2
    var translation = this._getTranslation();

    var scaleFrac = scale / scaleOld;
    var tx = (1 - scaleFrac) * pointer.x + translation.x * scaleFrac;
    var ty = (1 - scaleFrac) * pointer.y + translation.y * scaleFrac;

    this.areaCenter = {"x" : this._XconvertDOMtoCanvas(pointer.x),
                       "y" : this._YconvertDOMtoCanvas(pointer.y)};

    this._setScale(scale);
    this._setTranslation(tx, ty);

    if (preScaleDragPointer != null) {
      var postScaleDragPointer = this.canvasToDOM(preScaleDragPointer);
      this.drag.pointer.x = postScaleDragPointer.x;
      this.drag.pointer.y = postScaleDragPointer.y;
    }

    this._redraw();

    if (scaleOld < scale) {
      this.emit("zoom", {direction:"+"});
    }
    else {
      this.emit("zoom", {direction:"-"});
    }

    return scale;
  }
 };


 /**
 * Event handler for mouse wheel event, used to zoom the timeline
 * See http://adomas.org/javascript-mouse-wheel/
 *     https://github.com/EightMedia/hammer.js/issues/256
 * @param {MouseEvent}  event
 * @private
 */
 Network.prototype._onMouseWheel = function(event) {
  // retrieve delta
  var delta = 0;
  if (event.wheelDelta) { /* IE/Opera. */
    delta = event.wheelDelta/120;
  } else if (event.detail) { /* Mozilla case. */
    // In Mozilla, sign of delta is different than in IE.
    // Also, delta is multiple of 3.
    delta = -event.detail/3;
  }

  // If delta is nonzero, handle it.
  // Basically, delta is now positive if wheel was scrolled up,
  // and negative, if wheel was scrolled down.
  if (delta) {

    // calculate the new scale
    var scale = this._getScale();
    var zoom = delta / 10;
    if (delta < 0) {
      zoom = zoom / (1 - zoom);
    }
    scale *= (1 + zoom);

    // calculate the pointer location
    var gesture = hammerUtil.fakeGesture(this, event);
    var pointer = this._getPointer(gesture.center);

    // apply the new scale
    this._zoom(scale, pointer);
  }

  // Prevent default actions caused by mouse wheel.
  event.preventDefault();
 };


 /**
 * Mouse move handler for checking whether the title moves over a node with a title.
 * @param  {Event} event
 * @private
 */
 Network.prototype._onMouseMoveTitle = function (event) {
  var gesture = hammerUtil.fakeGesture(this, event);
  var pointer = this._getPointer(gesture.center);
  var popupVisible = false;

  // check if the previously selected node is still selected
  if (this.popup !== undefined) {
    if (this.popup.hidden === false) {
      this._checkHidePopup(pointer);
    }

    // if the popup was not hidden above
    if (this.popup.hidden === false) {
      popupVisible = true;
      this.popup.setPosition(pointer.x + 3,pointer.y - 5)
      this.popup.show();
    }
  }

  // if we bind the keyboard to the div, we have to highlight it to use it. This highlights it on mouse over
  if (this.constants.keyboard.bindToWindow == false && this.constants.keyboard.enabled == true) {
    this.frame.focus();
  }

  // start a timeout that will check if the mouse is positioned above an element
  if (popupVisible === false) {
    var me = this;
    var checkShow = function () {
      me._checkShowPopup(pointer);
    };
    if (this.popupTimer) {
      clearInterval(this.popupTimer); // stop any running calculationTimer
    }
    if (!this.drag.dragging) {
      this.popupTimer = setTimeout(checkShow, this.constants.tooltip.delay);
    }
  }

  /**
   * Adding hover highlights
   */
  if (this.constants.hover == true) {
    // removing all hover highlights
    for (var edgeId in this.hoverObj.edges) {
      if (this.hoverObj.edges.hasOwnProperty(edgeId)) {
        this.hoverObj.edges[edgeId].hover = false;
        delete this.hoverObj.edges[edgeId];
      }
    }

    // adding hover highlights
    var obj = this._getNodeAt(pointer);
    if (obj == null) {
      obj = this._getEdgeAt(pointer);
    }
    if (obj != null) {
      this._hoverObject(obj);
    }

    // removing all node hover highlights except for the selected one.
    for (var nodeId in this.hoverObj.nodes) {
      if (this.hoverObj.nodes.hasOwnProperty(nodeId)) {
        if (obj instanceof Node && obj.id != nodeId || obj instanceof Edge || obj == null) {
          this._blurObject(this.hoverObj.nodes[nodeId]);
          delete this.hoverObj.nodes[nodeId];
        }
      }
    }
    this.redraw();
  }
 };

 /**
 * Check if there is an element on the given position in the network
 * (a node or edge). If so, and if this element has a title,
--- a/lib/network/Node.js
+++ b/lib/network/Node.js
@ -68,8 +68,8 @@ function Node(properties, imagelist, grouplist, networkConstants) {
  // variables to tell the node about the network.
  this.networkScaleInv = 1;
  this.networkScale = 1;
  this.canvasTopLeft = {"x": -300, "y": -300};
  this.canvasBottomRight = {"x":  300, "y":  300};
  this.canvasTopLeft = {x: -300, y: -300};
  this.canvasBottomRight = {x: 300, y: 300};
  this.parentEdgeId = null;
 }

--- a/lib/network/modules/CanvasRenderer.js
+++ b/lib/network/modules/CanvasRenderer.js
@ -45,6 +45,9 @@ class CanvasRenderer {
        }
      }
    }
    else {

    }
  }

  renderStep() {
--- a/lib/network/modules/PhysicsEngine.js
+++ b/lib/network/modules/PhysicsEngine.js
@ -21,7 +21,7 @@ class PhysicsEngine {
    this.scale = 1;
    this.viewFunction = undefined;

    this.body.emitter.on("_setScale",       (scale) => this.scale = scale);
    this.body.emitter.on("_setScale", (scale) => this.scale = scale);

    this.simulationInterval = 1000 / 60;
    this.requiresTimeout = true;
--- a/lib/network/modules/TouchEventHandler.js
+++ b/lib/network/modules/TouchEventHandler.js
@ -0,0 +1,460 @@
 /**
 * Created by Alex on 2/27/2015.
 *
 */

 import {SelectionHandler} from "./components/SelectionHandler"
 var util = require('../../util');

 class TouchEventHandler {
  constructor(body) {
    this.body = body;

    this.body.eventListeners.onTap        = this.onTap.bind(this);
    this.body.eventListeners.onTouch      = this.onTouch.bind(this);
    this.body.eventListeners.onDoubleTap  = this.onDoubleTap.bind(this);
    this.body.eventListeners.onHold       = this.onHold.bind(this);
    this.body.eventListeners.onDragStart  = this.onDragStart.bind(this);
    this.body.eventListeners.onDrag       = this.onDrag.bind(this);
    this.body.eventListeners.onDragEnd    = this.onDragEnd.bind(this);
    this.body.eventListeners.onMouseWheel = this.onMouseWheel.bind(this);
    this.body.eventListeners.onPinch      = this.onPinch.bind(this);
    this.body.eventListeners.onMouseMove  = this.onMouseMove.bind(this);
    this.body.eventListeners.onRelease    = this.onRelease.bind(this);

    this.touchTime = 0;
    this.drag = {};
    this.pinch = {};
    this.pointerPosition = {x:0,y:0};

    this.scale = 1.0;
    this.body.emitter.on("_setScale", (scale) => this.scale = scale);

    this.selectionHandler = new SelectionHandler(body);
  }

  setCanvas(canvas) {
    this.canvas = canvas;
    this.selectionHandler.setCanvas(canvas);
  }

  /**
   * Get the pointer location from a touch location
   * @param {{pageX: Number, pageY: 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)
    };
  }


  /**
   * On start of a touch gesture, store the pointer
   * @param event
   * @private
   */
  onTouch(event) {
    if (new Date().valueOf() - this.touchTime > 100) {
      this.drag.pointer = this.getPointer(event.gesture.center);
      this.drag.pinched = false;
      this.pinch.scale = this.scale;

      // to avoid double fireing of this event because we have two hammer instances. (on canvas and on frame)
      this.touchTime = new Date().valueOf();
    }
  }

  /**
   * handle tap/click event: select/unselect a node
   * @private
   */
  onTap(event) {
    console.log("tap",event)
    var pointer = this.getPointer(event.gesture.center);
    this.pointerPosition = pointer;
    this.selectionHandler.selectOnPoint(pointer);
  }

  /**
   * handle drag start event
   * @private
   */

  /**
   * This function is called by onDragStart.
   * It is separated out because we can then overload it for the datamanipulation system.
   *
   * @private
   */
  onDragStart(event) {
    // in case the touch event was triggered on an external div, do the initial touch now.
    //if (this.drag.pointer === undefined) {
    //  this.onTouch(event);
    //}
    //
    //var node = this._getNodeAt(this.drag.pointer);
    //// note: drag.pointer is set in onTouch to get the initial touch location
    //
    //this.drag.dragging = true;
    //this.drag.selection = [];
    //this.drag.translation = this._getTranslation();
    //this.drag.nodeId = null;
    //this.draggingNodes = false;
    //
    //if (node != null && this.constants.dragNodes == true) {
    //  this.draggingNodes = true;
    //  this.drag.nodeId = node.id;
    //  // select the clicked node if not yet selected
    //  if (!node.isSelected()) {
    //    this._selectObject(node, false);
    //  }
    //
    //  this.emit("dragStart", {nodeIds: this.getSelection().nodes});
    //
    //  // create an array with the selected nodes and their original location and status
    //  for (var objectId in this.selectionObj.nodes) {
    //    if (this.selectionObj.nodes.hasOwnProperty(objectId)) {
    //      var object = this.selectionObj.nodes[objectId];
    //      var s = {
    //        id: object.id,
    //        node: object,
    //
    //        // store original x, y, xFixed and yFixed, make the node temporarily Fixed
    //        x: object.x,
    //        y: object.y,
    //        xFixed: object.xFixed,
    //        yFixed: object.yFixed
    //      };
    //
    //      object.xFixed = true;
    //      object.yFixed = true;
    //
    //      this.drag.selection.push(s);
    //    }
    //  }
    //}
  }


  /**
   * handle drag event
   * @private
   */
  onDrag(event) {
    //if (this.drag.pinched) {
    //  return;
    //}
    //
    //// remove the focus on node if it is focussed on by the focusOnNode
    //this.releaseNode();
    //
    //var pointer = this.getPointer(event.gesture.center);
    //var me = this;
    //var drag = this.drag;
    //var selection = drag.selection;
    //if (selection && selection.length && this.constants.dragNodes == true) {
    //  // calculate delta's and new location
    //  var deltaX = pointer.x - drag.pointer.x;
    //  var deltaY = pointer.y - drag.pointer.y;
    //
    //  // update position of all selected nodes
    //  selection.forEach(function (s) {
    //    var node = s.node;
    //
    //    if (!s.xFixed) {
    //      node.x = me._XconvertDOMtoCanvas(me._XconvertCanvasToDOM(s.x) + deltaX);
    //    }
    //
    //    if (!s.yFixed) {
    //      node.y = me._YconvertDOMtoCanvas(me._YconvertCanvasToDOM(s.y) + deltaY);
    //    }
    //  });
    //
    //
    //  // start _animationStep if not yet running
    //  if (!this.moving) {
    //    this.moving = true;
    //    this.start();
    //  }
    //}
    //else {
    //  // move the network
    //  if (this.constants.dragNetwork == true) {
    //    // if the drag was not started properly because the click started outside the network div, start it now.
    //    if (this.drag.pointer === undefined) {
    //      this._handleDragStart(event);
    //      return;
    //    }
    //    var diffX = pointer.x - this.drag.pointer.x;
    //    var diffY = pointer.y - this.drag.pointer.y;
    //
    //    this._setTranslation(
    //      this.drag.translation.x + diffX,
    //      this.drag.translation.y + diffY
    //    );
    //    this._redraw();
    //  }
    //}
  }


  /**
   * handle drag start event
   * @private
   */
  onDragEnd(event) {
    //this.drag.dragging = false;
    //var selection = this.drag.selection;
    //if (selection && selection.length) {
    //  selection.forEach(function (s) {
    //    // restore original xFixed and yFixed
    //    s.node.xFixed = s.xFixed;
    //    s.node.yFixed = s.yFixed;
    //  });
    //  this.moving = true;
    //  this.start();
    //}
    //else {
    //  this._redraw();
    //}
    //if (this.draggingNodes == false) {
    //  this.emit("dragEnd", {nodeIds: []});
    //}
    //else {
    //  this.emit("dragEnd", {nodeIds: this.getSelection().nodes});
    //}
  }

  /**
   * handle doubletap event
   * @private
   */
  onDoubleTap(event) {
    //var pointer = this.getPointer(event.gesture.center);
    //this._handleDoubleTap(pointer);
  }



  /**
   * handle long tap event: multi select nodes
   * @private
   */
  onHold(event) {
    //var pointer = this.getPointer(event.gesture.center);
    //this.pointerPosition = pointer;
    //this._handleOnHold(pointer);
  }


  /**
   * handle the release of the screen
   *
   * @private
   */
  onRelease(event) {
    //var pointer = this.getPointer(event.gesture.center);
    //this._handleOnRelease(pointer);
  }


  /**
   * Handle pinch event
   * @param event
   * @private
   */
  onPinch(event) {
    //var pointer = this.getPointer(event.gesture.center);
    //
    //this.drag.pinched = true;
    //if (!('scale' in this.pinch)) {
    //  this.pinch.scale = 1;
    //}
    //
    //// TODO: enabled moving while pinching?
    //var scale = this.pinch.scale * event.gesture.scale;
    //this._zoom(scale, pointer)
  }


  /**
   * Zoom the network in or out
   * @param {Number} scale a number around 1, and between 0.01 and 10
   * @param {{x: Number, y: Number}} pointer    Position on screen
   * @return {Number} appliedScale    scale is limited within the boundaries
   * @private
   */
  _zoom(scale, pointer) {
    //if (this.constants.zoomable == true) {
    //  var scaleOld = this._getScale();
    //  if (scale < 0.00001) {
    //    scale = 0.00001;
    //  }
    //  if (scale > 10) {
    //    scale = 10;
    //  }
    //
    //  var preScaleDragPointer = null;
    //  if (this.drag !== undefined) {
    //    if (this.drag.dragging == true) {
    //      preScaleDragPointer = this.canvas.DOMtoCanvas(this.drag.pointer);
    //    }
    //  }
    //  // + this.canvas.frame.canvas.clientHeight / 2
    //  var translation = this._getTranslation();
    //
    //  var scaleFrac = scale / scaleOld;
    //  var tx = (1 - scaleFrac) * pointer.x + translation.x * scaleFrac;
    //  var ty = (1 - scaleFrac) * pointer.y + translation.y * scaleFrac;
    //
    //    this._setScale(scale);
    //  this._setTranslation(tx, ty);
    //
    //  if (preScaleDragPointer != null) {
    //    var postScaleDragPointer = this.canvas.canvasToDOM(preScaleDragPointer);
    //    this.drag.pointer.x = postScaleDragPointer.x;
    //    this.drag.pointer.y = postScaleDragPointer.y;
    //  }
    //
    //  this._redraw();
    //
    //  if (scaleOld < scale) {
    //    this.emit("zoom", {direction: "+"});
    //  }
    //  else {
    //    this.emit("zoom", {direction: "-"});
    //  }
    //
    //  return scale;
    //}
  }


  /**
   * Event handler for mouse wheel event, used to zoom the timeline
   * See http://adomas.org/javascript-mouse-wheel/
   *     https://github.com/EightMedia/hammer.js/issues/256
   * @param {MouseEvent}  event
   * @private
   */
  onMouseWheel(event) {
    //// retrieve delta
    //var delta = 0;
    //if (event.wheelDelta) { /* IE/Opera. */
    //  delta = event.wheelDelta / 120;
    //} else if (event.detail) { /* Mozilla case. */
    //  // In Mozilla, sign of delta is different than in IE.
    //  // Also, delta is multiple of 3.
    //  delta = -event.detail / 3;
    //}
    //
    //// If delta is nonzero, handle it.
    //// Basically, delta is now positive if wheel was scrolled up,
    //// and negative, if wheel was scrolled down.
    //if (delta) {
    //
    //  // calculate the new scale
    //  var scale = this._getScale();
    //  var zoom = delta / 10;
    //  if (delta < 0) {
    //    zoom = zoom / (1 - zoom);
    //  }
    //  scale *= (1 + zoom);
    //
    //  // calculate the pointer location
    //  var gesture = hammerUtil.fakeGesture(this, event);
    //  var pointer = this.getPointer(gesture.center);
    //
    //  // apply the new scale
    //  this._zoom(scale, pointer);
    //}
    //
    //// Prevent default actions caused by mouse wheel.
    //event.preventDefault();
  }


  /**
   * Mouse move handler for checking whether the title moves over a node with a title.
   * @param  {Event} event
   * @private
   */
  onMouseMove(event) {
    //var gesture = hammerUtil.fakeGesture(this, event);
    //var pointer = this.getPointer(gesture.center);
    //var popupVisible = false;
    //
    //// check if the previously selected node is still selected
    //if (this.popup !== undefined) {
    //  if (this.popup.hidden === false) {
    //    this._checkHidePopup(pointer);
    //  }
    //
    //  // if the popup was not hidden above
    //  if (this.popup.hidden === false) {
    //    popupVisible = true;
    //    this.popup.setPosition(pointer.x + 3, pointer.y - 5)
    //    this.popup.show();
    //  }
    //}
    //
    //// if we bind the keyboard to the div, we have to highlight it to use it. This highlights it on mouse over
    //if (this.constants.keyboard.bindToWindow == false && this.constants.keyboard.enabled == true) {
    //  this.canvas.frame.focus();
    //}
    //
    //// start a timeout that will check if the mouse is positioned above an element
    //if (popupVisible === false) {
    //  var me = this;
    //  var checkShow = function() {
    //    me._checkShowPopup(pointer);
    //  };
    //
    //  if (this.popupTimer) {
    //    clearInterval(this.popupTimer); // stop any running calculationTimer
    //  }
    //  if (!this.drag.dragging) {
    //    this.popupTimer = setTimeout(checkShow, this.constants.tooltip.delay);
    //  }
    //}
    //
    ///**
    // * Adding hover highlights
    // */
    //if (this.constants.hover == true) {
    //  // removing all hover highlights
    //  for (var edgeId in this.hoverObj.edges) {
    //    if (this.hoverObj.edges.hasOwnProperty(edgeId)) {
    //      this.hoverObj.edges[edgeId].hover = false;
    //      delete this.hoverObj.edges[edgeId];
    //    }
    //  }
    //
    //  // adding hover highlights
    //  var obj = this._getNodeAt(pointer);
    //  if (obj == null) {
    //    obj = this._getEdgeAt(pointer);
    //  }
    //  if (obj != null) {
    //    this._hoverObject(obj);
    //  }
    //
    //  // removing all node hover highlights except for the selected one.
    //  for (var nodeId in this.hoverObj.nodes) {
    //    if (this.hoverObj.nodes.hasOwnProperty(nodeId)) {
    //      if (obj instanceof Node && obj.id != nodeId || obj instanceof Edge || obj == null) {
    //        this._blurObject(this.hoverObj.nodes[nodeId]);
    //        delete this.hoverObj.nodes[nodeId];
    //      }
    //    }
    //  }
    //  this.redraw();
    //}
  }
 }

 export {TouchEventHandler};
--- a/lib/network/modules/components/SelectionHandler.js
+++ b/lib/network/modules/components/SelectionHandler.js
@ -0,0 +1,640 @@
 /**
 * Created by Alex on 2/27/2015.
 */

 var Node = require("../../Node");

 class SelectionHandler {
  constructor(body) {
    this.body = body;
    this.selectionObj = {nodes:[], edges:[]};

    this.options = {
      select: true,
      selectConnectedEdges: true
    }
  }

  setCanvas(canvas) {
    this.canvas = canvas;
  }


  /**
   * handles the selection part of the tap;
   *
   * @param {Object} pointer
   * @private
   */
  selectOnPoint(pointer) {
    if (this.options.select === true) {
      if (this._getSelectedObjectCount() > 0) {this._unselectAll();}

      this.selectObject(pointer);
      this._generateClickEvent(pointer);

      this.body.emitter.emit("_requestRedraw");
    }
  }

  _generateClickEvent(pointer) {
    var properties = this.getSelection();
    properties['pointer'] = {
      DOM: {x: pointer.x, y: pointer.y},
      canvas: this.canvas.DOMtoCanvas(pointer)
    }
    this.body.emitter.emit("click", properties);
  }

  selectObject(pointer) {
    var obj = this._getNodeAt(pointer);
    if (obj != null) {
      if (this.options.selectConnectedEdges === true) {
        this._selectConnectedEdges(obj);
      }
    }
    else {
      obj = this._getEdgeAt(pointer);
    }

    if (obj !== null) {
      obj.select();
      this._addToSelection(obj);
      this.body.emitter.emit('selected', this.getSelection())
    }
    return obj;
  }


  /**
   *
   * @param object
   * @param overlappingNodes
   * @private
   */
  _getNodesOverlappingWith(object, overlappingNodes) {
    var nodes = this.body.nodes;
    for (var nodeId in nodes) {
      if (nodes.hasOwnProperty(nodeId)) {
        if (nodes[nodeId].isOverlappingWith(object)) {
          overlappingNodes.push(nodeId);
        }
      }
    }
  }

  /**
   * retrieve all nodes overlapping with given object
   * @param {Object} object  An object with parameters left, top, right, bottom
   * @return {Number[]}   An array with id's of the overlapping nodes
   * @private
   */
  _getAllNodesOverlappingWith(object) {
    var overlappingNodes = [];
    this._getNodesOverlappingWith(object,overlappingNodes);
    return overlappingNodes;
  }


  /**
   * Return a position object in canvasspace from a single point in screenspace
   *
   * @param pointer
   * @returns {{left: number, top: number, right: number, bottom: number}}
   * @private
   */
  _pointerToPositionObject(pointer) {
    var canvasPos = this.canvas.DOMtoCanvas(pointer);
    return {
      left:   canvasPos.x,
      top:    canvasPos.y,
      right:  canvasPos.x,
      bottom: canvasPos.y
    };
  }


  /**
   * Get the top node at the a specific point (like a click)
   *
   * @param {{x: Number, y: Number}} pointer
   * @return {Node | null} node
   * @private
   */
  _getNodeAt(pointer) {
    // we first check if this is an navigation controls element
    var positionObject = this._pointerToPositionObject(pointer);
    var overlappingNodes = this._getAllNodesOverlappingWith(positionObject);

    // if there are overlapping nodes, select the last one, this is the
    // one which is drawn on top of the others
    if (overlappingNodes.length > 0) {
      return this.body.nodes[overlappingNodes[overlappingNodes.length - 1]];
    }
    else {
      return null;
    }
  }


  /**
   * retrieve all edges overlapping with given object, selector is around center
   * @param {Object} object  An object with parameters left, top, right, bottom
   * @return {Number[]}   An array with id's of the overlapping nodes
   * @private
   */
  _getEdgesOverlappingWith(object, overlappingEdges) {
    var edges = this.body.edges;
    for (var edgeId in edges) {
      if (edges.hasOwnProperty(edgeId)) {
        if (edges[edgeId].isOverlappingWith(object)) {
          overlappingEdges.push(edgeId);
        }
      }
    }
  }


  /**
   * retrieve all nodes overlapping with given object
   * @param {Object} object  An object with parameters left, top, right, bottom
   * @return {Number[]}   An array with id's of the overlapping nodes
   * @private
   */
  _getAllEdgesOverlappingWith(object) {
    var overlappingEdges = [];
    this._getEdgesOverlappingWith(object,overlappingEdges);
    return overlappingEdges;
  }


  /**
   * Place holder. To implement change the _getNodeAt to a _getObjectAt. Have the _getObjectAt call
   * _getNodeAt and _getEdgesAt, then priortize the selection to user preferences.
   *
   * @param pointer
   * @returns {null}
   * @private
   */
  _getEdgeAt(pointer) {
    var positionObject = this._pointerToPositionObject(pointer);
    var overlappingEdges = this._getAllEdgesOverlappingWith(positionObject);

    if (overlappingEdges.length > 0) {
      return this.body.edges[overlappingEdges[overlappingEdges.length - 1]];
    }
    else {
      return null;
    }
  }


  /**
   * Add object to the selection array.
   *
   * @param obj
   * @private
   */
  _addToSelection(obj) {
    if (obj instanceof Node) {
      this.selectionObj.nodes[obj.id] = obj;
    }
    else {
      this.selectionObj.edges[obj.id] = obj;
    }
  }

  /**
   * Add object to the selection array.
   *
   * @param obj
   * @private
   */
  _addToHover(obj) {
    if (obj instanceof Node) {
      this.hoverObj.nodes[obj.id] = obj;
    }
    else {
      this.hoverObj.edges[obj.id] = obj;
    }
  }


  /**
   * Remove a single option from selection.
   *
   * @param {Object} obj
   * @private
   */
  _removeFromSelection(obj) {
    if (obj instanceof Node) {
      delete this.selectionObj.nodes[obj.id];
    }
    else {
      delete this.selectionObj.edges[obj.id];
    }
  }

  /**
   * Unselect all. The selectionObj is useful for this.
   *
   * @param {Boolean} [doNotTrigger] | ignore trigger
   * @private
   */
  _unselectAll(doNotTrigger = false) {
    for(var nodeId in this.selectionObj.nodes) {
      if(this.selectionObj.nodes.hasOwnProperty(nodeId)) {
        this.selectionObj.nodes[nodeId].unselect();
      }
    }
    for(var edgeId in this.selectionObj.edges) {
      if(this.selectionObj.edges.hasOwnProperty(edgeId)) {
        this.selectionObj.edges[edgeId].unselect();
      }
    }
  
    this.selectionObj = {nodes:{},edges:{}};
  
    if (doNotTrigger == false) {
      this.body.emitter.emit('select', this.getSelection());
    }
  }


  /**
   * return the number of selected nodes
   *
   * @returns {number}
   * @private
   */
  _getSelectedNodeCount() {
    var count = 0;
    for (var nodeId in this.selectionObj.nodes) {
      if (this.selectionObj.nodes.hasOwnProperty(nodeId)) {
        count += 1;
      }
    }
    return count;
  }

  /**
   * return the selected node
   *
   * @returns {number}
   * @private
   */
  _getSelectedNode() {
    for (var nodeId in this.selectionObj.nodes) {
      if (this.selectionObj.nodes.hasOwnProperty(nodeId)) {
        return this.selectionObj.nodes[nodeId];
      }
    }
    return null;
  }

  /**
   * return the selected edge
   *
   * @returns {number}
   * @private
   */
  _getSelectedEdge() {
    for (var edgeId in this.selectionObj.edges) {
      if (this.selectionObj.edges.hasOwnProperty(edgeId)) {
        return this.selectionObj.edges[edgeId];
      }
    }
    return null;
  }


  /**
   * return the number of selected edges
   *
   * @returns {number}
   * @private
   */
  _getSelectedEdgeCount() {
    var count = 0;
    for (var edgeId in this.selectionObj.edges) {
      if (this.selectionObj.edges.hasOwnProperty(edgeId)) {
        count += 1;
      }
    }
    return count;
  }


  /**
   * return the number of selected objects.
   *
   * @returns {number}
   * @private
   */
  _getSelectedObjectCount() {
    var count = 0;
    for(var nodeId in this.selectionObj.nodes) {
      if(this.selectionObj.nodes.hasOwnProperty(nodeId)) {
        count += 1;
      }
    }
    for(var edgeId in this.selectionObj.edges) {
      if(this.selectionObj.edges.hasOwnProperty(edgeId)) {
        count += 1;
      }
    }
    return count;
  }

  /**
   * Check if anything is selected
   *
   * @returns {boolean}
   * @private
   */
  _selectionIsEmpty() {
    for(var nodeId in this.selectionObj.nodes) {
      if(this.selectionObj.nodes.hasOwnProperty(nodeId)) {
        return false;
      }
    }
    for(var edgeId in this.selectionObj.edges) {
      if(this.selectionObj.edges.hasOwnProperty(edgeId)) {
        return false;
      }
    }
    return true;
  }


  /**
   * check if one of the selected nodes is a cluster.
   *
   * @returns {boolean}
   * @private
   */
  _clusterInSelection() {
    for(var nodeId in this.selectionObj.nodes) {
      if(this.selectionObj.nodes.hasOwnProperty(nodeId)) {
        if (this.selectionObj.nodes[nodeId].clusterSize > 1) {
          return true;
        }
      }
    }
    return false;
  }

  /**
   * select the edges connected to the node that is being selected
   *
   * @param {Node} node
   * @private
   */
  _selectConnectedEdges(node) {
    for (var i = 0; i < node.edges.length; i++) {
      var edge = node.edges[i];
      edge.select();
      this._addToSelection(edge);
    }
  }

  /**
   * select the edges connected to the node that is being selected
   *
   * @param {Node} node
   * @private
   */
  _hoverConnectedEdges(node) {
    for (var i = 0; i < node.edges.length; i++) {
      var edge = node.edges[i];
      edge.hover = true;
      this._addToHover(edge);
    }
  }


  /**
   * unselect the edges connected to the node that is being selected
   *
   * @param {Node} node
   * @private
   */
  _unselectConnectedEdges(node) {
    for (var i = 0; i < node.edges.length; i++) {
      var edge = node.edges[i];
      edge.unselect();
      this._removeFromSelection(edge);
    }
  }






  /**
   * This is called when someone clicks on a node. either select or deselect it.
   * If there is an existing selection and we don't want to append to it, clear the existing selection
   *
   * @param {Node || Edge} object
   * @private
   */
  _blurObject(object) {
    if (object.hover == true) {
      object.hover = false;
      this.body.emitter.emit("blurNode",{node:object.id});
    }
  }

  /**
   * This is called when someone clicks on a node. either select or deselect it.
   * If there is an existing selection and we don't want to append to it, clear the existing selection
   *
   * @param {Node || Edge} object
   * @private
   */
  _hoverObject(object) {
    if (object.hover == false) {
      object.hover = true;
      this._addToHover(object);
      if (object instanceof Node) {
        this.body.emitter.emit("hoverNode",{node:object.id});
      }
    }
    if (object instanceof Node) {
      this._hoverConnectedEdges(object);
    }
  }




  /**
   * handles the selection part of the double tap and opens a cluster if needed
   *
   * @param {Object} pointer
   * @private
   */
  _handleDoubleTap(pointer) {
    var node = this._getNodeAt(pointer);
    if (node != null && node !== undefined) {
      // we reset the areaCenter here so the opening of the node will occur
      this.areaCenter =  {"x" : this._XconvertDOMtoCanvas(pointer.x),
        "y" : this._YconvertDOMtoCanvas(pointer.y)};
      this.openCluster(node);
    }
    var properties = this.getSelection();
    properties['pointer'] = {
      DOM: {x: pointer.x, y: pointer.y},
      canvas: {x: this._XconvertDOMtoCanvas(pointer.x), y: this._YconvertDOMtoCanvas(pointer.y)}
    }
    this.body.emitter.emit("doubleClick", properties);
  }


  /**
   * Handle the onHold selection part
   *
   * @param pointer
   * @private
   */
  _handleOnHold(pointer) {
    var node = this._getNodeAt(pointer);
    if (node != null) {
      this._selectObject(node,true);
    }
    else {
      var edge = this._getEdgeAt(pointer);
      if (edge != null) {
        this._selectObject(edge,true);
      }
    }
    this._requestRedraw();
  }


  /**
   *
   * retrieve the currently selected objects
   * @return {{nodes: Array.<String>, edges: Array.<String>}} selection
   */
  getSelection() {
    var nodeIds = this.getSelectedNodes();
    var edgeIds = this.getSelectedEdges();
    return {nodes:nodeIds, edges:edgeIds};
  }

  /**
   *
   * retrieve the currently selected nodes
   * @return {String[]} selection    An array with the ids of the
   *                                            selected nodes.
   */
  getSelectedNodes() {
    var idArray = [];
    if (this.options.select == true) {
      for (var nodeId in this.selectionObj.nodes) {
        if (this.selectionObj.nodes.hasOwnProperty(nodeId)) {
          idArray.push(nodeId);
        }
      }
    }
    return idArray
  }

  /**
   *
   * retrieve the currently selected edges
   * @return {Array} selection    An array with the ids of the
   *                                            selected nodes.
   */
  getSelectedEdges() {
    var idArray = [];
    if (this.options.select == true) {
      for (var edgeId in this.selectionObj.edges) {
        if (this.selectionObj.edges.hasOwnProperty(edgeId)) {
          idArray.push(edgeId);
        }
      }
    }
    return idArray;
  }


  /**
   * select zero or more nodes with the option to highlight edges
   * @param {Number[] | String[]} selection     An array with the ids of the
   *                                            selected nodes.
   * @param {boolean} [highlightEdges]
   */
  selectNodes(selection, highlightEdges) {
    var i, iMax, id;
  
    if (!selection || (selection.length == undefined))
      throw 'Selection must be an array with ids';
  
    // first unselect any selected node
    this._unselectAll(true);
  
    for (i = 0, iMax = selection.length; i < iMax; i++) {
      id = selection[i];
  
      var node = this.body.nodes[id];
      if (!node) {
        throw new RangeError('Node with id "' + id + '" not found');
      }
      this._selectObject(node,true,true,highlightEdges,true);
    }
    this.redraw();
  }


  /**
   * select zero or more edges
   * @param {Number[] | String[]} selection     An array with the ids of the
   *                                            selected nodes.
   */
  selectEdges(selection) {
    var i, iMax, id;
  
    if (!selection || (selection.length == undefined))
      throw 'Selection must be an array with ids';
  
    // first unselect any selected node
    this._unselectAll(true);
  
    for (i = 0, iMax = selection.length; i < iMax; i++) {
      id = selection[i];
  
      var edge = this.body.edges[id];
      if (!edge) {
        throw new RangeError('Edge with id "' + id + '" not found');
      }
      this._selectObject(edge,true,true,false,true);
    }
    this.redraw();
  }

  /**
   * Validate the selection: remove ids of nodes which no longer exist
   * @private
   */
  _updateSelection() {
    for (var nodeId in this.selectionObj.nodes) {
      if (this.selectionObj.nodes.hasOwnProperty(nodeId)) {
        if (!this.body.nodes.hasOwnProperty(nodeId)) {
          delete this.selectionObj.nodes[nodeId];
        }
      }
    }
    for (var edgeId in this.selectionObj.edges) {
      if (this.selectionObj.edges.hasOwnProperty(edgeId)) {
        if (!this.body.edges.hasOwnProperty(edgeId)) {
          delete this.selectionObj.edges[edgeId];
        }
      }
    }
  }
 }

 export {SelectionHandler};