Browse Source
started creation of the edges handler and the nodes handler. currently broken.
flowchartTest
Alex de Mulder
9 years ago
20 changed files with 2281 additions and 2311 deletions
Unified View
Diff Options
-
+1236 -825dist/vis.js
-
+1 -1examples/network/02_random_nodes.html
-
+2 -2index.js
-
+2 -11lib/network/Images.js
-
+99 -692lib/network/Network.js
-
+0 -707lib/network/mixins/SelectionMixin.js
-
+2 -1lib/network/modules/Canvas.js
-
+1 -1lib/network/modules/CanvasRenderer.js
-
+24 -32lib/network/modules/Clustering.js
-
+241 -0lib/network/modules/EdgesHandler.js
-
+3 -3lib/network/modules/InteractionHandler.js
-
+421 -0lib/network/modules/LayoutEngine.js
-
+200 -0lib/network/modules/NodesHandler.js
-
+13 -4lib/network/modules/PhysicsEngine.js
-
+9 -4lib/network/modules/SelectionHandler.js
-
+2 -7lib/network/modules/View.js
-
+5 -4lib/network/modules/components/NavigationHandler.js
-
+7 -8lib/network/modules/components/edges/EdgeMain.js
-
+6 -9lib/network/modules/components/nodes/NodeMain.js
-
+7 -0lib/util.js
+ 1236
- 825
dist/vis.js
File diff suppressed because it is too large
View File
+ 1
- 1
examples/network/02_random_nodes.html
View File
+ 2
- 2
index.js
View File
+ 2
- 11
lib/network/Images.js
View File
+ 99
- 692
lib/network/Network.js
View File
+ 0
- 707
lib/network/mixins/SelectionMixin.js
View File
| @ -1,707 +0,0 @@ | |||||
| var Node = require('../Node'); | |||||
| /** | |||||
| * | |||||
| * @param object | |||||
| * @param overlappingNodes | |||||
| * @private | |||||
| */ | |||||
| exports._getNodesOverlappingWith = function(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 | |||||
| */ | |||||
| exports._getAllNodesOverlappingWith = function (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 | |||||
| */ | |||||
| exports._pointerToPositionObject = function(pointer) { | |||||
| var x = this._XconvertDOMtoCanvas(pointer.x); | |||||
| var y = this._YconvertDOMtoCanvas(pointer.y); | |||||
| return { | |||||
| left: x, | |||||
| top: y, | |||||
| right: x, | |||||
| bottom: y | |||||
| }; | |||||
| }; | |||||
| /** | |||||
| * Get the top node at the a specific point (like a click) | |||||
| * | |||||
| * @param {{x: Number, y: Number}} pointer | |||||
| * @return {Node | null} node | |||||
| * @private | |||||
| */ | |||||
| exports._getNodeAt = function (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 | |||||
| */ | |||||
| exports._getEdgesOverlappingWith = function (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 | |||||
| */ | |||||
| exports._getAllEdgesOverlappingWith = function (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 | |||||
| */ | |||||
| exports._getEdgeAt = function(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 | |||||
| */ | |||||
| exports._addToSelection = function(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 | |||||
| */ | |||||
| exports._addToHover = function(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 | |||||
| */ | |||||
| exports._removeFromSelection = function(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 | |||||
| */ | |||||
| exports._unselectAll = function(doNotTrigger) { | |||||
| if (doNotTrigger === undefined) { | |||||
| 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.emit('select', this.getSelection()); | |||||
| } | |||||
| }; | |||||
| /** | |||||
| * Unselect all clusters. The selectionObj is useful for this. | |||||
| * | |||||
| * @param {Boolean} [doNotTrigger] | ignore trigger | |||||
| * @private | |||||
| */ | |||||
| exports._unselectClusters = function(doNotTrigger) { | |||||
| if (doNotTrigger === undefined) { | |||||
| doNotTrigger = false; | |||||
| } | |||||
| for (var nodeId in this.selectionObj.nodes) { | |||||
| if (this.selectionObj.nodes.hasOwnProperty(nodeId)) { | |||||
| if (this.selectionObj.nodes[nodeId].clusterSize > 1) { | |||||
| this.selectionObj.nodes[nodeId].unselect(); | |||||
| this._removeFromSelection(this.selectionObj.nodes[nodeId]); | |||||
| } | |||||
| } | |||||
| } | |||||
| if (doNotTrigger == false) { | |||||
| this.emit('select', this.getSelection()); | |||||
| } | |||||
| }; | |||||
| /** | |||||
| * return the number of selected nodes | |||||
| * | |||||
| * @returns {number} | |||||
| * @private | |||||
| */ | |||||
| exports._getSelectedNodeCount = function() { | |||||
| 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 | |||||
| */ | |||||
| exports._getSelectedNode = function() { | |||||
| 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 | |||||
| */ | |||||
| exports._getSelectedEdge = function() { | |||||
| 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 | |||||
| */ | |||||
| exports._getSelectedEdgeCount = function() { | |||||
| 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 | |||||
| */ | |||||
| exports._getSelectedObjectCount = function() { | |||||
| 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 | |||||
| */ | |||||
| exports._selectionIsEmpty = function() { | |||||
| 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 | |||||
| */ | |||||
| exports._clusterInSelection = function() { | |||||
| 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 | |||||
| */ | |||||
| exports._selectConnectedEdges = function(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 | |||||
| */ | |||||
| exports._hoverConnectedEdges = function(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 | |||||
| */ | |||||
| exports._unselectConnectedEdges = function(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 | |||||
| * @param {Boolean} append | |||||
| * @param {Boolean} [doNotTrigger] | ignore trigger | |||||
| * @private | |||||
| */ | |||||
| exports._selectObject = function(object, append, doNotTrigger, highlightEdges, overrideSelectable) { | |||||
| if (doNotTrigger === undefined) { | |||||
| doNotTrigger = false; | |||||
| } | |||||
| if (highlightEdges === undefined) { | |||||
| highlightEdges = true; | |||||
| } | |||||
| if (this._selectionIsEmpty() == false && append == false && this.forceAppendSelection == false) { | |||||
| this._unselectAll(true); | |||||
| } | |||||
| // selectable allows the object to be selected. Override can be used if needed to bypass this. | |||||
| if (object.selected == false && (this.constants.selectable == true || overrideSelectable)) { | |||||
| object.select(); | |||||
| this._addToSelection(object); | |||||
| if (object instanceof Node && this.blockConnectingEdgeSelection == false && highlightEdges == true) { | |||||
| this._selectConnectedEdges(object); | |||||
| } | |||||
| } | |||||
| // do not select the object if selectable is false, only add it to selection to allow drag to work | |||||
| else if (object.selected == false) { | |||||
| this._addToSelection(object); | |||||
| doNotTrigger = true; | |||||
| } | |||||
| else { | |||||
| object.unselect(); | |||||
| this._removeFromSelection(object); | |||||
| } | |||||
| if (doNotTrigger == false) { | |||||
| this.emit('select', this.getSelection()); | |||||
| } | |||||
| }; | |||||
| /** | |||||
| * 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 | |||||
| */ | |||||
| exports._blurObject = function(object) { | |||||
| if (object.hover == true) { | |||||
| object.hover = false; | |||||
| this.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 | |||||
| */ | |||||
| exports._hoverObject = function(object) { | |||||
| if (object.hover == false) { | |||||
| object.hover = true; | |||||
| this._addToHover(object); | |||||
| if (object instanceof Node) { | |||||
| this.emit("hoverNode",{node:object.id}); | |||||
| } | |||||
| } | |||||
| if (object instanceof Node) { | |||||
| this._hoverConnectedEdges(object); | |||||
| } | |||||
| }; | |||||
| /** | |||||
| * handles the selection part of the touch, only for navigation controls elements; | |||||
| * Touch is triggered before tap, also before hold. Hold triggers after a while. | |||||
| * This is the most responsive solution | |||||
| * | |||||
| * @param {Object} pointer | |||||
| * @private | |||||
| */ | |||||
| exports._handleTouch = function(pointer) { | |||||
| }; | |||||
| /** | |||||
| * handles the selection part of the tap; | |||||
| * | |||||
| * @param {Object} pointer | |||||
| * @private | |||||
| */ | |||||
| exports._handleTap = function(pointer) { | |||||
| var node = this._getNodeAt(pointer); | |||||
| if (node != null) { | |||||
| this._selectObject(node, false); | |||||
| } | |||||
| else { | |||||
| var edge = this._getEdgeAt(pointer); | |||||
| if (edge != null) { | |||||
| this._selectObject(edge, false); | |||||
| } | |||||
| else { | |||||
| this._unselectAll(); | |||||
| } | |||||
| } | |||||
| 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.emit("click", properties); | |||||
| this._requestRedraw(); | |||||
| }; | |||||
| /** | |||||
| * handles the selection part of the double tap and opens a cluster if needed | |||||
| * | |||||
| * @param {Object} pointer | |||||
| * @private | |||||
| */ | |||||
| exports._handleDoubleTap = function(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.emit("doubleClick", properties); | |||||
| }; | |||||
| /** | |||||
| * Handle the onHold selection part | |||||
| * | |||||
| * @param pointer | |||||
| * @private | |||||
| */ | |||||
| exports._handleOnHold = function(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(); | |||||
| }; | |||||
| /** | |||||
| * handle the onRelease event. These functions are here for the navigation controls module | |||||
| * and data manipulation module. | |||||
| * | |||||
| * @private | |||||
| */ | |||||
| exports._handleOnRelease = function(pointer) { | |||||
| this._manipulationReleaseOverload(pointer); | |||||
| this._navigationReleaseOverload(pointer); | |||||
| }; | |||||
| exports._manipulationReleaseOverload = function (pointer) {}; | |||||
| exports._navigationReleaseOverload = function (pointer) {}; | |||||
| /** | |||||
| * | |||||
| * retrieve the currently selected objects | |||||
| * @return {{nodes: Array.<String>, edges: Array.<String>}} selection | |||||
| */ | |||||
| exports.getSelection = function() { | |||||
| 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. | |||||
| */ | |||||
| exports.getSelectedNodes = function() { | |||||
| var idArray = []; | |||||
| if (this.constants.selectable == 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. | |||||
| */ | |||||
| exports.getSelectedEdges = function() { | |||||
| var idArray = []; | |||||
| if (this.constants.selectable == true) { | |||||
| for (var edgeId in this.selectionObj.edges) { | |||||
| if (this.selectionObj.edges.hasOwnProperty(edgeId)) { | |||||
| idArray.push(edgeId); | |||||
| } | |||||
| } | |||||
| } | |||||
| return idArray; | |||||
| }; | |||||
| /** | |||||
| * select zero or more nodes DEPRICATED | |||||
| * @param {Number[] | String[]} selection An array with the ids of the | |||||
| * selected nodes. | |||||
| */ | |||||
| exports.setSelection = function() { | |||||
| console.log("setSelection is deprecated. Please use selectNodes instead.") | |||||
| }; | |||||
| /** | |||||
| * 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] | |||||
| */ | |||||
| exports.selectNodes = function(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. | |||||
| */ | |||||
| exports.selectEdges = function(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 | |||||
| */ | |||||
| exports._updateSelection = function () { | |||||
| 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]; | |||||
| } | |||||
| } | |||||
| } | |||||
| }; | |||||
+ 2
- 1
lib/network/modules/Canvas.js
View File
+ 1
- 1
lib/network/modules/CanvasRenderer.js
View File
+ 24
- 32
lib/network/modules/Clustering.js
View File
+ 241
- 0
lib/network/modules/EdgesHandler.js
View File
| @ -0,0 +1,241 @@ | |||||
| /** | |||||
| * Created by Alex on 3/4/2015. | |||||
| */ | |||||
| var util = require("../../util"); | |||||
| var DataSet = require('../../DataSet'); | |||||
| var DataView = require('../../DataView'); | |||||
| var Edge = require("./components/edges/EdgeMain"); | |||||
| class EdgesHandler { | |||||
| constructor(body, images, groups) { | |||||
| this.body = body; | |||||
| this.images = images; | |||||
| this.groups = groups; | |||||
| this.edgesListeners = { | |||||
| 'add': (event, params) => {this.add(params.items);}, | |||||
| 'update': (event, params) => {this.update(params.items);}, | |||||
| 'remove': (event, params) => {this.remove(params.items);} | |||||
| }; | |||||
| var customScalingFunction = function (min,max,total,value) { | |||||
| if (max == min) { | |||||
| return 0.5; | |||||
| } | |||||
| else { | |||||
| var scale = 1 / (max - min); | |||||
| return Math.max(0,(value - min)*scale); | |||||
| } | |||||
| }; | |||||
| this.options = {}; | |||||
| this.defaultOptions = { | |||||
| customScalingFunction: customScalingFunction, | |||||
| widthMin: 1, // | |||||
| widthMax: 15,// | |||||
| width: 1, | |||||
| widthSelectionMultiplier: 2, | |||||
| hoverWidth: 1.5, | |||||
| value:1, | |||||
| style: 'line', | |||||
| color: { | |||||
| color:'#848484', | |||||
| highlight:'#848484', | |||||
| hover: '#848484' | |||||
| }, | |||||
| opacity:1.0, | |||||
| fontColor: '#343434', | |||||
| fontSize: 14, // px | |||||
| fontFace: 'arial', | |||||
| fontFill: 'white', | |||||
| fontStrokeWidth: 0, // px | |||||
| fontStrokeColor: 'white', | |||||
| labelAlignment:'horizontal', | |||||
| arrowScaleFactor: 1, | |||||
| dash: { | |||||
| length: 10, | |||||
| gap: 5, | |||||
| altLength: undefined | |||||
| }, | |||||
| inheritColor: "from", // to, from, false, true (== from) | |||||
| useGradients: false, // release in 4.0 | |||||
| smoothEdges: { | |||||
| enabled: true, | |||||
| dynamic: true, | |||||
| type: "continuous", | |||||
| roundness: 0.5 | |||||
| } | |||||
| }; | |||||
| util.extend(this.options, this.defaultOptions); | |||||
| } | |||||
| setOptions(options) { | |||||
| } | |||||
| /** | |||||
| * Load edges by reading the data table | |||||
| * @param {Array | DataSet | DataView} edges The data containing the edges. | |||||
| * @private | |||||
| * @private | |||||
| */ | |||||
| setData(edges) { | |||||
| var oldEdgesData = this.body.data.edges; | |||||
| if (edges instanceof DataSet || edges instanceof DataView) { | |||||
| this.body.data.edges = edges; | |||||
| } | |||||
| else if (Array.isArray(edges)) { | |||||
| this.body.data.edges = new DataSet(); | |||||
| this.body.data.edges.add(edges); | |||||
| } | |||||
| else if (!edges) { | |||||
| this.body.data.edges = new DataSet(); | |||||
| } | |||||
| else { | |||||
| throw new TypeError('Array or DataSet expected'); | |||||
| } | |||||
| // TODO: is this null or undefined or false? | |||||
| if (oldEdgesData) { | |||||
| // unsubscribe from old dataset | |||||
| util.forEach(this.edgesListeners, (callback, event) => {oldEdgesData.off(event, callback);}); | |||||
| } | |||||
| // remove drawn edges | |||||
| this.body.edges = {}; | |||||
| // TODO: is this null or undefined or false? | |||||
| if (this.body.data.edges) { | |||||
| // subscribe to new dataset | |||||
| util.forEach(this.edgesListeners, (callback, event) => {this.body.data.edges.on(event, callback);}); | |||||
| // draw all new nodes | |||||
| var ids = this.body.data.edges.getIds(); | |||||
| this.add(ids); | |||||
| } | |||||
| this.body.emitter.emit("_dataChanged"); | |||||
| } | |||||
| /** | |||||
| * Add edges | |||||
| * @param {Number[] | String[]} ids | |||||
| * @private | |||||
| */ | |||||
| add(ids) { | |||||
| var edges = this.body.edges, | |||||
| edgesData = this.body.data.edges; | |||||
| for (var i = 0; i < ids.length; i++) { | |||||
| var id = ids[i]; | |||||
| var oldEdge = edges[id]; | |||||
| if (oldEdge) { | |||||
| oldEdge.disconnect(); | |||||
| } | |||||
| var data = edgesData.get(id, {"showInternalIds" : true}); | |||||
| edges[id] = new Edge(data, this.body, this.options); | |||||
| } | |||||
| this.body.emitter.emit("_dataChanged"); | |||||
| } | |||||
| /** | |||||
| * Update existing edges, or create them when not yet existing | |||||
| * @param {Number[] | String[]} ids | |||||
| * @private | |||||
| */ | |||||
| update(ids) { | |||||
| var edges = this.body.edges; | |||||
| var edgesData = this.body.data.edges; | |||||
| for (var i = 0; i < ids.length; i++) { | |||||
| var id = ids[i]; | |||||
| var data = edgesData.get(id); | |||||
| var edge = edges[id]; | |||||
| if (edge) { | |||||
| // update edge | |||||
| edge.disconnect(); | |||||
| edge.setProperties(data); | |||||
| edge.connect(); | |||||
| } | |||||
| else { | |||||
| // create edge | |||||
| edge = new Edge(data, this.body, this.options); | |||||
| this.body.edges[id] = edge; | |||||
| } | |||||
| } | |||||
| this.body.emitter.emit("_dataUpdated") | |||||
| } | |||||
| /** | |||||
| * Remove existing edges. Non existing ids will be ignored | |||||
| * @param {Number[] | String[]} ids | |||||
| * @private | |||||
| */ | |||||
| remove(ids) { | |||||
| var edges = this.body.edges; | |||||
| for (var i = 0; i < ids.length; i++) { | |||||
| var id = ids[i]; | |||||
| var edge = edges[id]; | |||||
| if (edge !== undefined) { | |||||
| if (edge.via != null) { | |||||
| delete this.body.supportNodes[edge.via.id]; | |||||
| } | |||||
| edge.disconnect(); | |||||
| delete edges[id]; | |||||
| } | |||||
| } | |||||
| this.body.emitter.emit("_dataChanged"); | |||||
| } | |||||
| /** | |||||
| * Bezier curves require an anchor point to calculate the smooth flow. These points are nodes. These nodes are invisible but | |||||
| * are used for the force calculation. | |||||
| * | |||||
| * @private | |||||
| */ | |||||
| createBezierNodes(specificEdges = this.body.edges) { | |||||
| var changedData = false; | |||||
| if (this.options.smoothEdges.enabled == true && this.options.smoothEdges.dynamic == true) { | |||||
| for (var edgeId in specificEdges) { | |||||
| if (specificEdges.hasOwnProperty(edgeId)) { | |||||
| var edge = specificEdges[edgeId]; | |||||
| if (edge.via == null) { | |||||
| changedData = true; | |||||
| // TODO: move to nodes | |||||
| var nodeId = "edgeId:".concat(edge.id); | |||||
| var node = new Node( | |||||
| {id:nodeId, | |||||
| mass:1, | |||||
| shape:'circle', | |||||
| image:"", | |||||
| internalMultiplier:1 | |||||
| },{},{},this.constants); | |||||
| this.body.supportNodes[nodeId] = node; | |||||
| edge.via = node; | |||||
| edge.via.parentEdgeId = edge.id; | |||||
| edge.positionBezierNode(); | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| if (changedData === true) { | |||||
| this.body.emitter.emit("_dataChanged"); | |||||
| } | |||||
| } | |||||
| } | |||||
| export default EdgesHandler; | |||||
+ 3
- 3
lib/network/modules/InteractionHandler.js
View File
+ 421
- 0
lib/network/modules/LayoutEngine.js
View File
+ 200
- 0
lib/network/modules/NodesHandler.js
View File
| @ -0,0 +1,200 @@ | |||||
| /** | |||||
| * Created by Alex on 3/4/2015. | |||||
| */ | |||||
| var util = require("../../util"); | |||||
| var DataSet = require('../../DataSet'); | |||||
| var DataView = require('../../DataView'); | |||||
| var Node = require("./components/nodes/NodeMain"); | |||||
| class NodesHandler { | |||||
| constructor(body, images, groups, layoutEngine) { | |||||
| this.body = body; | |||||
| this.images = images; | |||||
| this.groups = groups; | |||||
| this.layoutEngine = layoutEngine; | |||||
| this.nodesListeners = { | |||||
| 'add': (event, params) => {this.add(params.items);}, | |||||
| 'update': (event, params) => {this.update(params.items, params.data);}, | |||||
| 'remove': (event, params) => {this.remove(params.items);} | |||||
| }; | |||||
| var customScalingFunction = function (min,max,total,value) { | |||||
| if (max == min) { | |||||
| return 0.5; | |||||
| } | |||||
| else { | |||||
| var scale = 1 / (max - min); | |||||
| return Math.max(0,(value - min)*scale); | |||||
| } | |||||
| }; | |||||
| this.options = {}; | |||||
| this.defaultOptions = { | |||||
| customScalingFunction: customScalingFunction, | |||||
| mass: 1, | |||||
| radiusMin: 10, | |||||
| radiusMax: 30, | |||||
| radius: 10, | |||||
| shape: 'ellipse', | |||||
| image: undefined, | |||||
| widthMin: 16, // px | |||||
| widthMax: 64, // px | |||||
| fontColor: 'black', | |||||
| fontSize: 14, // px | |||||
| fontFace: 'verdana', | |||||
| fontFill: undefined, | |||||
| fontStrokeWidth: 0, // px | |||||
| fontStrokeColor: '#ffffff', | |||||
| fontDrawThreshold: 3, | |||||
| scaleFontWithValue: false, | |||||
| fontSizeMin: 14, | |||||
| fontSizeMax: 30, | |||||
| fontSizeMaxVisible: 30, | |||||
| value: 1, | |||||
| level: -1, | |||||
| color: { | |||||
| border: '#2B7CE9', | |||||
| background: '#97C2FC', | |||||
| highlight: { | |||||
| border: '#2B7CE9', | |||||
| background: '#D2E5FF' | |||||
| }, | |||||
| hover: { | |||||
| border: '#2B7CE9', | |||||
| background: '#D2E5FF' | |||||
| } | |||||
| }, | |||||
| group: undefined, | |||||
| borderWidth: 1, | |||||
| borderWidthSelected: undefined | |||||
| }; | |||||
| util.extend(this.options, this.defaultOptions); | |||||
| } | |||||
| setOptions(options) { | |||||
| } | |||||
| /** | |||||
| * Set a data set with nodes for the network | |||||
| * @param {Array | DataSet | DataView} nodes The data containing the nodes. | |||||
| * @private | |||||
| */ | |||||
| setData(nodes) { | |||||
| var oldNodesData = this.body.data.nodes; | |||||
| if (nodes instanceof DataSet || nodes instanceof DataView) { | |||||
| this.body.data.nodes = nodes; | |||||
| } | |||||
| else if (Array.isArray(nodes)) { | |||||
| this.body.data.nodes = new DataSet(); | |||||
| this.body.data.nodes.add(nodes); | |||||
| } | |||||
| else if (!nodes) { | |||||
| this.body.data.nodes = new DataSet(); | |||||
| } | |||||
| else { | |||||
| throw new TypeError('Array or DataSet expected'); | |||||
| } | |||||
| if (oldNodesData) { | |||||
| // unsubscribe from old dataset | |||||
| util.forEach(this.nodesListeners, function (callback, event) { | |||||
| oldNodesData.off(event, callback); | |||||
| }); | |||||
| } | |||||
| // remove drawn nodes | |||||
| this.body.nodes = {}; | |||||
| if (this.body.data.nodes) { | |||||
| // subscribe to new dataset | |||||
| var me = this; | |||||
| util.forEach(this.nodesListeners, function (callback, event) { | |||||
| me.body.data.nodes.on(event, callback); | |||||
| }); | |||||
| // draw all new nodes | |||||
| var ids = this.body.data.nodes.getIds(); | |||||
| this.add(ids); | |||||
| } | |||||
| this.body.emitter.emit("_dataChanged"); | |||||
| } | |||||
| /** | |||||
| * Add nodes | |||||
| * @param {Number[] | String[]} ids | |||||
| * @private | |||||
| */ | |||||
| add(ids) { | |||||
| var id; | |||||
| var newNodes = []; | |||||
| for (var i = 0; i < ids.length; i++) { | |||||
| id = ids[i]; | |||||
| var data = this.body.data.nodes.get(id); | |||||
| var node = new Node(data, this.images, this.groups, this.options); | |||||
| newNodes.push(node); | |||||
| this.body.nodes[id] = node; // note: this may replace an existing node | |||||
| } | |||||
| this.layoutEngine.positionInitially(newNodes); | |||||
| this.body.emitter.emit("_dataChanged"); | |||||
| } | |||||
| /** | |||||
| * Update existing nodes, or create them when not yet existing | |||||
| * @param {Number[] | String[]} ids | |||||
| * @private | |||||
| */ | |||||
| update(ids, changedData) { | |||||
| var nodes = this.body.nodes; | |||||
| var dataChanged = false; | |||||
| for (var i = 0; i < ids.length; i++) { | |||||
| var id = ids[i]; | |||||
| var node = nodes[id]; | |||||
| var data = changedData[i]; | |||||
| if (node !== undefined) { | |||||
| // update node | |||||
| node.setProperties(data, this.constants); | |||||
| } | |||||
| else { | |||||
| dataChanged = true; | |||||
| // create node | |||||
| node = new Node(properties, this.images, this.groups, this.constants); | |||||
| nodes[id] = node; | |||||
| } | |||||
| } | |||||
| if (dataChanged) { | |||||
| this.body.emitter.emit("_dataChanged"); | |||||
| } | |||||
| else { | |||||
| this.body.emitter.emit("_dataUpdated"); | |||||
| } | |||||
| } | |||||
| /** | |||||
| * Remove existing nodes. If nodes do not exist, the method will just ignore it. | |||||
| * @param {Number[] | String[]} ids | |||||
| * @private | |||||
| */ | |||||
| remove(ids) { | |||||
| var nodes = this.body.nodes; | |||||
| for (let i = 0; i < ids.length; i++) { | |||||
| var id = ids[i]; | |||||
| delete nodes[id]; | |||||
| } | |||||
| this.body.emitter.emit("_dataChanged"); | |||||
| } | |||||
| } | |||||
| export default NodesHandler; | |||||