jrtechs-vis/lib/network/mixins/NavigationMixin.js

var util = require('../../util');
var Hammer = require('../../module/hammer');

exports._cleanNavigation = function() {
  // clean hammer bindings
  if (this.navigationHammers.existing.length != 0) {
    for (var i = 0; i < this.navigationHammers.existing.length; i++) {
      this.navigationHammers.existing[i].dispose();
    }
    this.navigationHammers.existing = [];
  }

  // clean up previous navigation items
  var wrapper = document.getElementById('network-navigation_wrapper');
  if (wrapper && wrapper.parentNode) {
    wrapper.parentNode.removeChild(wrapper);
  }
};

/**
 * Creation of the navigation controls nodes. They are drawn over the rest of the nodes and are not affected by scale and translation
 * they have a triggerFunction which is called on click. If the position of the navigation controls is dependent
 * on this.frame.canvas.clientWidth or this.frame.canvas.clientHeight, we flag horizontalAlignLeft and verticalAlignTop false.
 * This means that the location will be corrected by the _relocateNavigation function on a size change of the canvas.
 *
 * @private
 */
exports._loadNavigationElements = function() {
  this._cleanNavigation();

  this.navigationDivs = {};
  var navigationDivs = ['up','down','left','right','zoomIn','zoomOut','zoomExtends'];
  var navigationDivActions = ['_moveUp','_moveDown','_moveLeft','_moveRight','_zoomIn','_zoomOut','_zoomExtent'];

  this.navigationDivs['wrapper'] = document.createElement('div');
  this.navigationDivs['wrapper'].id = 'network-navigation_wrapper';
  this.frame.appendChild(this.navigationDivs['wrapper']);

  for (var i = 0; i < navigationDivs.length; i++) {
    this.navigationDivs[navigationDivs[i]] = document.createElement('div');
    this.navigationDivs[navigationDivs[i]].id = 'network-navigation_' + navigationDivs[i];
    this.navigationDivs[navigationDivs[i]].className = 'network-navigation ' + navigationDivs[i];
    this.navigationDivs['wrapper'].appendChild(this.navigationDivs[navigationDivs[i]]);

    var hammer = Hammer(this.navigationDivs[navigationDivs[i]], {prevent_default: true});
    hammer.on('touch', this[navigationDivActions[i]].bind(this));
    this.navigationHammers.new.push(hammer);
  }

  var hammerDoc = Hammer(document, {prevent_default: false});
  hammerDoc.on('release', this._stopMovement.bind(this));
  this.navigationHammers.new.push(hammerDoc);

  this.navigationHammers.existing = this.navigationHammers.new;
};


/**
 * this stops all movement induced by the navigation buttons
 *
 * @private
 */
exports._zoomExtent = function(event) {
  // FIXME: this is a workaround because the binding of Hammer on Document makes this fire twice
  if (this._zoomExtentLastTime === undefined || new Date() - this._zoomExtentLastTime > 50) {
    this._zoomExtentLastTime = new Date();
    this.zoomExtent({duration:800});
    event.stopPropagation();
  }
};

/**
 * this stops all movement induced by the navigation buttons
 *
 * @private
 */
exports._stopMovement = function() {
  this._xStopMoving();
  this._yStopMoving();
  this._stopZoom();
};


/**
 * move the screen up
 * By using the increments, instead of adding a fixed number to the translation, we keep fluent and
 * instant movement. The onKeypress event triggers immediately, then pauses, then triggers frequently
 * To avoid this behaviour, we do the translation in the start loop.
 *
 * @private
 */
exports._moveUp = function(event) {
  this.yIncrement = this.constants.keyboard.speed.y;
  this.start(); // if there is no node movement, the calculation wont be done
  event.preventDefault();
};


/**
 * move the screen down
 * @private
 */
exports._moveDown = function(event) {
  this.yIncrement = -this.constants.keyboard.speed.y;
  this.start(); // if there is no node movement, the calculation wont be done
  event.preventDefault();
};


/**
 * move the screen left
 * @private
 */
exports._moveLeft = function(event) {
  this.xIncrement = this.constants.keyboard.speed.x;
  this.start(); // if there is no node movement, the calculation wont be done
  event.preventDefault();
};


/**
 * move the screen right
 * @private
 */
exports._moveRight = function(event) {
  this.xIncrement = -this.constants.keyboard.speed.y;
  this.start(); // if there is no node movement, the calculation wont be done
  event.preventDefault();
};


/**
 * Zoom in, using the same method as the movement.
 * @private
 */
exports._zoomIn = function(event) {
  this.zoomIncrement = this.constants.keyboard.speed.zoom;
  this.start(); // if there is no node movement, the calculation wont be done
  event.preventDefault();
};


/**
 * Zoom out
 * @private
 */
exports._zoomOut = function(event) {
  this.zoomIncrement = -this.constants.keyboard.speed.zoom;
  this.start(); // if there is no node movement, the calculation wont be done
  event.preventDefault();
};


/**
 * Stop zooming and unhighlight the zoom controls
 * @private
 */
exports._stopZoom = function(event) {
  this.zoomIncrement = 0;
  event && event.preventDefault();
};


/**
 * Stop moving in the Y direction and unHighlight the up and down
 * @private
 */
exports._yStopMoving = function(event) {
  this.yIncrement = 0;
  event && event.preventDefault();
};


/**
 * Stop moving in the X direction and unHighlight left and right.
 * @private
 */
exports._xStopMoving = function(event) {
  this.xIncrement = 0;
  event && event.preventDefault();
};