jrtechs
/
jrtechs-vis
mirror of https://github.com/jrtechs/vis.git
1
0
Fork 0
Code Issues 0 Releases 82 Wiki Activity
Browse Source

work in progress of porting the event handlres

flowchartTest
Alex de Mulder 9 years ago
parent
57d15b6ea9
commit
3541260108
7 changed files with 3377 additions and 1813 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +2268
    -1373
      dist/vis.js
  2. +3
    -437
      lib/network/Network.js
  3. +2
    -2
      lib/network/Node.js
  4. +3
    -0
      lib/network/modules/CanvasRenderer.js
  5. +1
    -1
      lib/network/modules/PhysicsEngine.js
  6. +460
    -0
      lib/network/modules/TouchEventHandler.js
  7. +640
    -0
      lib/network/modules/components/SelectionHandler.js

+ 2268
- 1373
dist/vis.js
File diff suppressed because it is too large
View File


+ 3
- 437
lib/network/Network.js View File

@ -24,6 +24,7 @@ import { ClusterEngine } from './modules/Clustering'
import { CanvasRenderer } from './modules/CanvasRenderer' import { CanvasRenderer } from './modules/CanvasRenderer'
import { Canvas } from './modules/Canvas' import { Canvas } from './modules/Canvas'
import { View } from './modules/View' import { View } from './modules/View'
import { TouchEventHandler } from './modules/TouchEventHandler'
/** /**
* @constructor Network * @constructor Network
@ -226,9 +227,11 @@ function Network (container, data, options) {
this.clustering = new ClusterEngine(this.body); this.clustering = new ClusterEngine(this.body);
this.physics = new PhysicsEngine(this.body); this.physics = new PhysicsEngine(this.body);
this.canvas = new Canvas(this.body); this.canvas = new Canvas(this.body);
this.touchHandler = new TouchEventHandler(this.body);
this.renderer.setCanvas(this.canvas); this.renderer.setCanvas(this.canvas);
this.view.setCanvas(this.canvas); this.view.setCanvas(this.canvas);
this.touchHandler.setCanvas(this.canvas);
this.hoverObj = {nodes:{},edges:{}}; this.hoverObj = {nodes:{},edges:{}};
this.controlNodesActive = false; 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 * 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 node or edge). If so, and if this element has a title,

+ 2
- 2
lib/network/Node.js View File

@ -68,8 +68,8 @@ function Node(properties, imagelist, grouplist, networkConstants) {
// variables to tell the node about the network. // variables to tell the node about the network.
this.networkScaleInv = 1; this.networkScaleInv = 1;
this.networkScale = 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; this.parentEdgeId = null;
} }

+ 3
- 0
lib/network/modules/CanvasRenderer.js View File

@ -45,6 +45,9 @@ class CanvasRenderer {
} }
} }
} }
else {
}
} }
renderStep() { renderStep() {

+ 1
- 1
lib/network/modules/PhysicsEngine.js View File

@ -21,7 +21,7 @@ class PhysicsEngine {
this.scale = 1; this.scale = 1;
this.viewFunction = undefined; 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.simulationInterval = 1000 / 60;
this.requiresTimeout = true; this.requiresTimeout = true;

+ 460
- 0
lib/network/modules/TouchEventHandler.js View File

@ -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};

+ 640
- 0
lib/network/modules/components/SelectionHandler.js View File

@ -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};

Write Preview
Loading…
Cancel
Save