Browse Source

Moved some util functions to util.js

v3_develop
jos 10 years ago
parent
commit
2da139a4e8
3 changed files with 49 additions and 161 deletions
  1. +27
    -138
      lib/graph3d/Graph3d.js
  2. +8
    -23
      lib/network/mixins/NavigationMixin.js
  3. +14
    -0
      lib/util.js

+ 27
- 138
lib/graph3d/Graph3d.js View File

@ -1,6 +1,7 @@
var Emitter = require('emitter-component'); var Emitter = require('emitter-component');
var DataSet = require('../DataSet'); var DataSet = require('../DataSet');
var DataView = require('../DataView'); var DataView = require('../DataView');
var util = require('../util');
var Point3d = require('./Point3d'); var Point3d = require('./Point3d');
var Point2d = require('./Point2d'); var Point2d = require('./Point2d');
var Filter = require('./Filter'); var Filter = require('./Filter');
@ -768,11 +769,11 @@ Graph3d.prototype.create = function () {
var ontooltip = function (event) {me._onTooltip(event);}; var ontooltip = function (event) {me._onTooltip(event);};
// TODO: these events are never cleaned up... can give a 'memory leakage' // TODO: these events are never cleaned up... can give a 'memory leakage'
G3DaddEventListener(this.frame.canvas, 'keydown', onkeydown);
G3DaddEventListener(this.frame.canvas, 'mousedown', onmousedown);
G3DaddEventListener(this.frame.canvas, 'touchstart', ontouchstart);
G3DaddEventListener(this.frame.canvas, 'mousewheel', onmousewheel);
G3DaddEventListener(this.frame.canvas, 'mousemove', ontooltip);
util.addEventListener(this.frame.canvas, 'keydown', onkeydown);
util.addEventListener(this.frame.canvas, 'mousedown', onmousedown);
util.addEventListener(this.frame.canvas, 'touchstart', ontouchstart);
util.addEventListener(this.frame.canvas, 'mousewheel', onmousewheel);
util.addEventListener(this.frame.canvas, 'mousemove', ontooltip);
// add the new graph to the container element // add the new graph to the container element
this.containerElement.appendChild(this.frame); this.containerElement.appendChild(this.frame);
@ -1987,9 +1988,9 @@ Graph3d.prototype._onMouseDown = function(event) {
var me = this; var me = this;
this.onmousemove = function (event) {me._onMouseMove(event);}; this.onmousemove = function (event) {me._onMouseMove(event);};
this.onmouseup = function (event) {me._onMouseUp(event);}; this.onmouseup = function (event) {me._onMouseUp(event);};
G3DaddEventListener(document, 'mousemove', me.onmousemove);
G3DaddEventListener(document, 'mouseup', me.onmouseup);
G3DpreventDefault(event);
util.addEventListener(document, 'mousemove', me.onmousemove);
util.addEventListener(document, 'mouseup', me.onmouseup);
util.preventDefault(event);
}; };
@ -2035,7 +2036,7 @@ Graph3d.prototype._onMouseMove = function (event) {
var parameters = this.getCameraPosition(); var parameters = this.getCameraPosition();
this.emit('cameraPositionChange', parameters); this.emit('cameraPositionChange', parameters);
G3DpreventDefault(event);
util.preventDefault(event);
}; };
@ -2049,9 +2050,9 @@ Graph3d.prototype._onMouseUp = function (event) {
this.leftButtonDown = false; this.leftButtonDown = false;
// remove event listeners here // remove event listeners here
G3DremoveEventListener(document, 'mousemove', this.onmousemove);
G3DremoveEventListener(document, 'mouseup', this.onmouseup);
G3DpreventDefault(event);
util.removeEventListener(document, 'mousemove', this.onmousemove);
util.removeEventListener(document, 'mouseup', this.onmouseup);
util.preventDefault(event);
}; };
/** /**
@ -2060,8 +2061,8 @@ Graph3d.prototype._onMouseUp = function (event) {
*/ */
Graph3d.prototype._onTooltip = function (event) { Graph3d.prototype._onTooltip = function (event) {
var delay = 300; // ms var delay = 300; // ms
var mouseX = getMouseX(event) - getAbsoluteLeft(this.frame);
var mouseY = getMouseY(event) - getAbsoluteTop(this.frame);
var mouseX = getMouseX(event) - util.getAbsoluteLeft(this.frame);
var mouseY = getMouseY(event) - util.getAbsoluteTop(this.frame);
if (!this.showTooltip) { if (!this.showTooltip) {
return; return;
@ -2114,8 +2115,8 @@ Graph3d.prototype._onTouchStart = function(event) {
var me = this; var me = this;
this.ontouchmove = function (event) {me._onTouchMove(event);}; this.ontouchmove = function (event) {me._onTouchMove(event);};
this.ontouchend = function (event) {me._onTouchEnd(event);}; this.ontouchend = function (event) {me._onTouchEnd(event);};
G3DaddEventListener(document, 'touchmove', me.ontouchmove);
G3DaddEventListener(document, 'touchend', me.ontouchend);
util.addEventListener(document, 'touchmove', me.ontouchmove);
util.addEventListener(document, 'touchend', me.ontouchend);
this._onMouseDown(event); this._onMouseDown(event);
}; };
@ -2133,8 +2134,8 @@ Graph3d.prototype._onTouchMove = function(event) {
Graph3d.prototype._onTouchEnd = function(event) { Graph3d.prototype._onTouchEnd = function(event) {
this.touchDown = false; this.touchDown = false;
G3DremoveEventListener(document, 'touchmove', this.ontouchmove);
G3DremoveEventListener(document, 'touchend', this.ontouchend);
util.removeEventListener(document, 'touchmove', this.ontouchmove);
util.removeEventListener(document, 'touchend', this.ontouchend);
this._onMouseUp(event); this._onMouseUp(event);
}; };
@ -2179,7 +2180,7 @@ Graph3d.prototype._onWheel = function(event) {
// Prevent default actions caused by mouse wheel. // Prevent default actions caused by mouse wheel.
// That might be ugly, but we handle scrolls somehow // That might be ugly, but we handle scrolls somehow
// anyway, so don't bother here.. // anyway, so don't bother here..
G3DpreventDefault(event);
util.preventDefault(event);
}; };
/** /**
@ -2371,85 +2372,6 @@ Graph3d.prototype._hideTooltip = function () {
} }
}; };
/**
* Add and event listener. Works for all browsers
* @param {Element} element An html element
* @param {string} action The action, for example 'click',
* without the prefix 'on'
* @param {function} listener The callback function to be executed
* @param {boolean} useCapture
*/
G3DaddEventListener = function(element, action, listener, useCapture) {
if (element.addEventListener) {
if (useCapture === undefined)
useCapture = false;
if (action === 'mousewheel' && navigator.userAgent.indexOf('Firefox') >= 0) {
action = 'DOMMouseScroll'; // For Firefox
}
element.addEventListener(action, listener, useCapture);
} else {
element.attachEvent('on' + action, listener); // IE browsers
}
};
/**
* Remove an event listener from an element
* @param {Element} element An html dom element
* @param {string} action The name of the event, for example 'mousedown'
* @param {function} listener The listener function
* @param {boolean} useCapture
*/
G3DremoveEventListener = function(element, action, listener, useCapture) {
if (element.removeEventListener) {
// non-IE browsers
if (useCapture === undefined)
useCapture = false;
if (action === 'mousewheel' && navigator.userAgent.indexOf('Firefox') >= 0) {
action = 'DOMMouseScroll'; // For Firefox
}
element.removeEventListener(action, listener, useCapture);
} else {
// IE browsers
element.detachEvent('on' + action, listener);
}
};
/**
* Stop event propagation
*/
G3DstopPropagation = function(event) {
if (!event)
event = window.event;
if (event.stopPropagation) {
event.stopPropagation(); // non-IE browsers
}
else {
event.cancelBubble = true; // IE browsers
}
};
/**
* Cancels the event if it is cancelable, without stopping further propagation of the event.
*/
G3DpreventDefault = function (event) {
if (!event)
event = window.event;
if (event.preventDefault) {
event.preventDefault(); // non-IE browsers
}
else {
event.returnValue = false; // IE browsers
}
};
/** /**
* @constructor Slider * @constructor Slider
* *
@ -2741,9 +2663,9 @@ Slider.prototype._onMouseDown = function(event) {
var me = this; var me = this;
this.onmousemove = function (event) {me._onMouseMove(event);}; this.onmousemove = function (event) {me._onMouseMove(event);};
this.onmouseup = function (event) {me._onMouseUp(event);}; this.onmouseup = function (event) {me._onMouseUp(event);};
G3DaddEventListener(document, 'mousemove', this.onmousemove);
G3DaddEventListener(document, 'mouseup', this.onmouseup);
G3DpreventDefault(event);
util.addEventListener(document, 'mousemove', this.onmousemove);
util.addEventListener(document, 'mouseup', this.onmouseup);
util.preventDefault(event);
}; };
@ -2779,7 +2701,7 @@ Slider.prototype._onMouseMove = function (event) {
this.setIndex(index); this.setIndex(index);
G3DpreventDefault();
util.preventDefault();
}; };
@ -2787,10 +2709,10 @@ Slider.prototype._onMouseUp = function (event) {
this.frame.style.cursor = 'auto'; this.frame.style.cursor = 'auto';
// remove event listeners // remove event listeners
G3DremoveEventListener(document, 'mousemove', this.onmousemove);
G3DremoveEventListener(document, 'mouseup', this.onmouseup);
util.removeEventListener(document, 'mousemove', this.onmousemove);
util.removeEventListener(document, 'mouseup', this.onmouseup);
G3DpreventDefault();
util.preventDefault();
}; };
@ -2798,39 +2720,6 @@ Slider.prototype._onMouseUp = function (event) {
/**--------------------------------------------------------------------------**/ /**--------------------------------------------------------------------------**/
/**
* Retrieve the absolute left value of a DOM element
* @param {Element} elem A dom element, for example a div
* @return {Number} left The absolute left position of this element
* in the browser page.
*/
getAbsoluteLeft = function(elem) {
var left = 0;
while( elem !== null ) {
left += elem.offsetLeft;
left -= elem.scrollLeft;
elem = elem.offsetParent;
}
return left;
};
/**
* Retrieve the absolute top value of a DOM element
* @param {Element} elem A dom element, for example a div
* @return {Number} top The absolute top position of this element
* in the browser page.
*/
getAbsoluteTop = function(elem) {
var top = 0;
while( elem !== null ) {
top += elem.offsetTop;
top -= elem.scrollTop;
elem = elem.offsetParent;
}
return top;
};
/** /**
* Get the horizontal mouse position from a mouse event * Get the horizontal mouse position from a mouse event
* @param {Event} event * @param {Event} event

+ 8
- 23
lib/network/mixins/NavigationMixin.js View File

@ -1,3 +1,5 @@
var util = require('../../util');
exports._cleanNavigation = function() { exports._cleanNavigation = function() {
// clean up previous navigation items // clean up previous navigation items
var wrapper = document.getElementById('network-navigation_wrapper'); var wrapper = document.getElementById('network-navigation_wrapper');
@ -52,23 +54,6 @@ exports._stopMovement = function() {
}; };
/**
* stops the actions performed by page up and down etc.
*
* @param event
* @private
*/
exports._preventDefault = function(event) {
if (event !== undefined) {
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
}
};
/** /**
* move the screen up * move the screen up
* By using the increments, instead of adding a fixed number to the translation, we keep fluent and * By using the increments, instead of adding a fixed number to the translation, we keep fluent and
@ -80,7 +65,7 @@ exports._preventDefault = function(event) {
exports._moveUp = function(event) { exports._moveUp = function(event) {
this.yIncrement = this.constants.keyboard.speed.y; this.yIncrement = this.constants.keyboard.speed.y;
this.start(); // if there is no node movement, the calculation wont be done this.start(); // if there is no node movement, the calculation wont be done
this._preventDefault(event);
util.preventDefault(event);
if (this.navigationDivs) { if (this.navigationDivs) {
this.navigationDivs['up'].className += " active"; this.navigationDivs['up'].className += " active";
} }
@ -94,7 +79,7 @@ exports._moveUp = function(event) {
exports._moveDown = function(event) { exports._moveDown = function(event) {
this.yIncrement = -this.constants.keyboard.speed.y; this.yIncrement = -this.constants.keyboard.speed.y;
this.start(); // if there is no node movement, the calculation wont be done this.start(); // if there is no node movement, the calculation wont be done
this._preventDefault(event);
util.preventDefault(event);
if (this.navigationDivs) { if (this.navigationDivs) {
this.navigationDivs['down'].className += " active"; this.navigationDivs['down'].className += " active";
} }
@ -108,7 +93,7 @@ exports._moveDown = function(event) {
exports._moveLeft = function(event) { exports._moveLeft = function(event) {
this.xIncrement = this.constants.keyboard.speed.x; this.xIncrement = this.constants.keyboard.speed.x;
this.start(); // if there is no node movement, the calculation wont be done this.start(); // if there is no node movement, the calculation wont be done
this._preventDefault(event);
util.preventDefault(event);
if (this.navigationDivs) { if (this.navigationDivs) {
this.navigationDivs['left'].className += " active"; this.navigationDivs['left'].className += " active";
} }
@ -122,7 +107,7 @@ exports._moveLeft = function(event) {
exports._moveRight = function(event) { exports._moveRight = function(event) {
this.xIncrement = -this.constants.keyboard.speed.y; this.xIncrement = -this.constants.keyboard.speed.y;
this.start(); // if there is no node movement, the calculation wont be done this.start(); // if there is no node movement, the calculation wont be done
this._preventDefault(event);
util.preventDefault(event);
if (this.navigationDivs) { if (this.navigationDivs) {
this.navigationDivs['right'].className += " active"; this.navigationDivs['right'].className += " active";
} }
@ -136,7 +121,7 @@ exports._moveRight = function(event) {
exports._zoomIn = function(event) { exports._zoomIn = function(event) {
this.zoomIncrement = this.constants.keyboard.speed.zoom; this.zoomIncrement = this.constants.keyboard.speed.zoom;
this.start(); // if there is no node movement, the calculation wont be done this.start(); // if there is no node movement, the calculation wont be done
this._preventDefault(event);
util.preventDefault(event);
if (this.navigationDivs) { if (this.navigationDivs) {
this.navigationDivs['zoomIn'].className += " active"; this.navigationDivs['zoomIn'].className += " active";
} }
@ -150,7 +135,7 @@ exports._zoomIn = function(event) {
exports._zoomOut = function() { exports._zoomOut = function() {
this.zoomIncrement = -this.constants.keyboard.speed.zoom; this.zoomIncrement = -this.constants.keyboard.speed.zoom;
this.start(); // if there is no node movement, the calculation wont be done this.start(); // if there is no node movement, the calculation wont be done
this._preventDefault(event);
util.preventDefault(event);
if (this.navigationDivs) { if (this.navigationDivs) {
this.navigationDivs['zoomOut'].className += " active"; this.navigationDivs['zoomOut'].className += " active";
} }

+ 14
- 0
lib/util.js View File

@ -566,6 +566,20 @@ exports.removeEventListener = function(element, action, listener, useCapture) {
} }
}; };
/**
* Cancels the event if it is cancelable, without stopping further propagation of the event.
*/
exports.preventDefault = function (event) {
if (!event)
event = window.event;
if (event.preventDefault) {
event.preventDefault(); // non-IE browsers
}
else {
event.returnValue = false; // IE browsers
}
};
/** /**
* Get HTML element which is the target of the event * Get HTML element which is the target of the event

Loading…
Cancel
Save