Alex de Mulder
9 years ago
12 changed files with 27861 additions and 27861 deletions
Unified View
Diff Options
-
+27156 -27162dist/vis.js
-
+49 -42lib/network/Network.js
-
+1 -8lib/network/Node.js
-
+2 -2lib/network/mixins/SelectionMixin.js
-
+36 -29lib/network/modules/Canvas.js
-
+41 -23lib/network/modules/CanvasRenderer.js
-
+462 -0lib/network/modules/InteractionHandler.js
-
+18 -9lib/network/modules/PhysicsEngine.js
-
+79 -100lib/network/modules/SelectionHandler.js
-
+0 -460lib/network/modules/TouchEventHandler.js
-
+17 -25lib/network/modules/View.js
-
+0 -1lib/util.js
+ 27156
- 27162
dist/vis.js
File diff suppressed because it is too large
View File
+ 49
- 42
lib/network/Network.js
View File
+ 1
- 8
lib/network/Node.js
View File
+ 2
- 2
lib/network/mixins/SelectionMixin.js
View File
+ 36
- 29
lib/network/modules/Canvas.js
View File
+ 41
- 23
lib/network/modules/CanvasRenderer.js
View File
+ 462
- 0
lib/network/modules/InteractionHandler.js
View File
| @ -0,0 +1,462 @@ | |||||
| /** | |||||
| * Created by Alex on 2/27/2015. | |||||
| * | |||||
| */ | |||||
| var util = require('../../util'); | |||||
| class InteractionHandler { | |||||
| constructor(body, canvas, selectionHandler) { | |||||
| this.body = body; | |||||
| this.canvas = canvas; | |||||
| this.selectionHandler = selectionHandler; | |||||
| // bind the events from hammer to functions in this object | |||||
| 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.hoverObj = {nodes:{},edges:{}}; | |||||
| this.options = {}; | |||||
| this.defaultOptions = { | |||||
| dragNodes:true, | |||||
| dragView: true, | |||||
| zoomView: true, | |||||
| selectEnabled: true, | |||||
| hoverEnabled: false | |||||
| } | |||||
| util.extend(this.options,this.defaultOptions); | |||||
| } | |||||
| setOptions(options) { | |||||
| if (options !== undefined) { | |||||
| util.deepExtend(this.options, options); | |||||
| } | |||||
| } | |||||
| /** | |||||
| * Get the pointer location from a touch location | |||||
| * @param {{x: Number, y: Number}} touch | |||||
| * @return {{x: Number, y: Number}} pointer | |||||
| * @private | |||||
| */ | |||||
| getPointer(touch) { | |||||
| return { | |||||
| x: touch.x - util.getAbsoluteLeft(this.canvas.frame.canvas), | |||||
| y: touch.y - 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.center); | |||||
| this.drag.pinched = false; | |||||
| this.pinch.scale = this.body.view.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) { | |||||
| var pointer = this.getPointer(event.center); | |||||
| var previouslySelected = this.selectionHandler._getSelectedObjectCount() > 0; | |||||
| var selected = this.selectionHandler.selectOnPoint(pointer); | |||||
| if (selected === true || (previouslySelected == true && selected === false)) { // select or unselect | |||||
| this.body.emitter.emit('selected', this.selectionHandler.getSelection()); | |||||
| } | |||||
| this.selectionHandler._generateClickEvent("click",pointer); | |||||
| } | |||||
| /** | |||||
| * handle doubletap event | |||||
| * @private | |||||
| */ | |||||
| onDoubleTap(event) { | |||||
| var pointer = this.getPointer(event.center); | |||||
| this.selectionHandler._generateClickEvent("doubleClick",pointer); | |||||
| } | |||||
| /** | |||||
| * handle long tap event: multi select nodes | |||||
| * @private | |||||
| */ | |||||
| onHold(event) { | |||||
| var pointer = this.getPointer(event.center); | |||||
| var selectionChanged = this.selectionHandler.selectAdditionalOnPoint(pointer); | |||||
| if (selectionChanged === true) { // select or longpress | |||||
| this.body.emitter.emit('selected', this.selectionHandler.getSelection()); | |||||
| } | |||||
| this.selectionHandler._generateClickEvent("click",pointer); | |||||
| } | |||||
| /** | |||||
| * handle the release of the screen | |||||
| * | |||||
| * @private | |||||
| */ | |||||
| onRelease() {} | |||||
| /** | |||||
| * 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.selectionHandler.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 = util.extend({},this.body.view.translation); // copy the object | |||||
| this.drag.nodeId = null; | |||||
| this.draggingNodes = false; | |||||
| this.body.emitter.emit("dragStart", {nodeIds: this.selectionHandler.getSelection().nodes}); | |||||
| if (node != null && this.options.dragNodes === true) { | |||||
| this.drag.nodeId = node.id; | |||||
| // select the clicked node if not yet selected | |||||
| if (node.isSelected() === false) { | |||||
| this.selectionHandler.selectObject(node); | |||||
| } | |||||
| var selection = this.selectionHandler.selectionObj.nodes; | |||||
| // create an array with the selected nodes and their original location and status | |||||
| for (let nodeId in selection) { | |||||
| if (selection.hasOwnProperty(nodeId)) { | |||||
| var object = selection[nodeId]; | |||||
| 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 === true) { | |||||
| return; | |||||
| } | |||||
| // remove the focus on node if it is focussed on by the focusOnNode | |||||
| this.body.emitter.emit("unlockNode"); | |||||
| var pointer = this.getPointer(event.center); | |||||
| var selection = this.drag.selection; | |||||
| if (selection && selection.length && this.options.dragNodes === true) { | |||||
| // calculate delta's and new location | |||||
| var deltaX = pointer.x - this.drag.pointer.x; | |||||
| var deltaY = pointer.y - this.drag.pointer.y; | |||||
| // update position of all selected nodes | |||||
| selection.forEach((selection) => { | |||||
| var node = selection.node; | |||||
| if (!selection.xFixed) { | |||||
| node.x = this.canvas._XconvertDOMtoCanvas(this.canvas._XconvertCanvasToDOM(selection.x) + deltaX); | |||||
| } | |||||
| if (!selection.yFixed) { | |||||
| node.y = this.canvas._YconvertDOMtoCanvas(this.canvas._YconvertCanvasToDOM(selection.y) + deltaY); | |||||
| } | |||||
| }); | |||||
| // start the simulation of the physics | |||||
| this.body.emitter.emit("startSimulation"); | |||||
| } | |||||
| else { | |||||
| // move the network | |||||
| if (this.options.dragView === 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.body.view.translation = {x:this.drag.translation.x + diffX, y:this.drag.translation.y + diffY}; | |||||
| this.body.emitter.emit("_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.body.emitter.emit("startSimulation"); | |||||
| } | |||||
| else { | |||||
| this.body.emitter.emit("_requestRedraw"); | |||||
| } | |||||
| this.body.emitter.emit("dragEnd", {nodeIds: this.selectionHandler.getSelection().nodes}); | |||||
| } | |||||
| /** | |||||
| * Handle pinch event | |||||
| * @param event | |||||
| * @private | |||||
| */ | |||||
| onPinch(event) { | |||||
| var pointer = this.getPointer(event.center); | |||||
| this.drag.pinched = true; | |||||
| if (this.pinch[scale] === undefined) { | |||||
| 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.options.zoomView === true) { | |||||
| var scaleOld = this.body.view.scale; | |||||
| 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.body.view.translation; | |||||
| var scaleFrac = scale / scaleOld; | |||||
| var tx = (1 - scaleFrac) * pointer.x + translation.x * scaleFrac; | |||||
| var ty = (1 - scaleFrac) * pointer.y + translation.y * scaleFrac; | |||||
| this.body.view.scale = scale; | |||||
| this.body.view.translation = {x:tx, y:ty}; | |||||
| if (preScaleDragPointer != null) { | |||||
| var postScaleDragPointer = this.canvas.canvasToDOM(preScaleDragPointer); | |||||
| this.drag.pointer.x = postScaleDragPointer.x; | |||||
| this.drag.pointer.y = postScaleDragPointer.y; | |||||
| } | |||||
| this.body.emitter.emit("_requestRedraw"); | |||||
| if (scaleOld < scale) { | |||||
| this.body.emitter.emit("zoom", {direction: "+"}); | |||||
| } | |||||
| else { | |||||
| this.body.emitter.emit("zoom", {direction: "-"}); | |||||
| } | |||||
| } | |||||
| } | |||||
| /** | |||||
| * 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.body.view.scale; | |||||
| var zoom = delta / 10; | |||||
| if (delta < 0) { | |||||
| zoom = zoom / (1 - zoom); | |||||
| } | |||||
| scale *= (1 + zoom); | |||||
| // calculate the pointer location | |||||
| var pointer = {x:event.pageX, y:event.pageY}; | |||||
| // 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 pointer = {x:event.pageX, y:event.pageY}; | |||||
| 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.options.keyboard.bindToWindow == false && this.options.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.options.tooltip.delay); | |||||
| } | |||||
| } | |||||
| /** | |||||
| * Adding hover highlights | |||||
| */ | |||||
| if (this.options.hoverEnabled === 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.selectionHandler.getNodeAt(pointer); | |||||
| if (obj == null) { | |||||
| obj = this.selectionHandler.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.body.emitter.emit("_requestRedraw"); | |||||
| } | |||||
| } | |||||
| } | |||||
| export {TouchEventHandler}; | |||||
+ 18
- 9
lib/network/modules/PhysicsEngine.js
View File
lib/network/modules/components/SelectionHandler.js → lib/network/modules/SelectionHandler.js
View File
+ 0
- 460
lib/network/modules/TouchEventHandler.js
View File
| @ -1,460 +0,0 @@ | |||||
| /** | |||||
| * 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 {{x: Number, y: Number}} touch | |||||
| * @return {{x: Number, y: Number}} pointer | |||||
| * @private | |||||
| */ | |||||
| getPointer(touch) { | |||||
| return { | |||||
| x: touch.x - util.getAbsoluteLeft(this.canvas.frame.canvas), | |||||
| y: touch.y - util.getAbsoluteTop(this.canvas.frame.canvas) | |||||
| }; | |||||
| } | |||||
| /** | |||||
| * On start of a touch gesture, store the pointer | |||||
| * @param event | |||||
| * @private | |||||
| */ | |||||
| onTouch(event) { | |||||
| console.log('touch!') | |||||
| if (new Date().valueOf() - this.touchTime > 100) { | |||||
| this.drag.pointer = this.getPointer(event.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) { | |||||
| var pointer = this.getPointer(event.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}; | |||||