You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
173 lines
4.7 KiB
173 lines
4.7 KiB
var util = require('../../util');
|
|
var Hammer = require('../../module/hammer');
|
|
|
|
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 = [];
|
|
}
|
|
|
|
this._navigationReleaseOverload = function () {};
|
|
|
|
// clean up previous navigation items
|
|
if (this.navigationDOM && this.navigationDOM['wrapper'] && this.navigationDOM['wrapper'].parentNode) {
|
|
this.navigationDOM['wrapper'].parentNode.removeChild(this.navigationDOM['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.navigationDOM = {};
|
|
var navigationDivs = ['up','down','left','right','zoomIn','zoomOut','zoomExtends'];
|
|
var navigationDivActions = ['_moveUp','_moveDown','_moveLeft','_moveRight','_zoomIn','_zoomOut','_zoomExtent'];
|
|
|
|
this.navigationDOM['wrapper'] = document.createElement('div');
|
|
this.frame.appendChild(this.navigationDOM['wrapper']);
|
|
|
|
for (var i = 0; i < navigationDivs.length; i++) {
|
|
this.navigationDOM[navigationDivs[i]] = document.createElement('div');
|
|
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));
|
|
this.navigationHammers.push(hammer);
|
|
}
|
|
|
|
this._navigationReleaseOverload = this._stopMovement;
|
|
|
|
};
|
|
|
|
|
|
/**
|
|
* this stops all movement induced by the navigation buttons
|
|
*
|
|
* @private
|
|
*/
|
|
exports._zoomExtent = function(event) {
|
|
this.zoomExtent({duration:700});
|
|
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();
|
|
};
|