Browse Source
- Renamed storePosition to storePositions. Added deprication message and old name still works.
- Worked around hammer.js bug with multiple release listeners. - Improved cleaning up after manipulation toolbar. - Added getPositions() method to get the position of all nodes. - Added getCenterCoordinates() method to get the x and y position in canvas space of the center of the view.v3_develop
Alex de Mulder
10 years ago
9 changed files with 25268 additions and 25602 deletions
Split View
Diff Options
-
+9 -0HISTORY.md
-
+25181 -25386dist/vis.js
-
+1 -1dist/vis.min.css
-
+23 -12docs/network.html
-
+0 -184examples/network/ex.html
-
+34 -3lib/network/Network.js
-
+9 -4lib/network/mixins/ManipulationMixin.js
-
+5 -9lib/network/mixins/NavigationMixin.js
-
+6 -3lib/network/mixins/SelectionMixin.js
+ 9
- 0
HISTORY.md
View File
+ 25181
- 25386
dist/vis.js
File diff suppressed because it is too large
View File
+ 1
- 1
dist/vis.min.css
File diff suppressed because it is too large
View File
+ 23
- 12
docs/network.html
View File
+ 0
- 184
examples/network/ex.html
View File
| @ -1,184 +0,0 @@ | |||
| <!doctype html> | |||
| <html> | |||
| <head> | |||
| <title>Network | Random nodes</title> | |||
| <style type="text/css"> | |||
| body { | |||
| font: 10pt sans; | |||
| } | |||
| #mynetwork { | |||
| width: 600px; | |||
| height: 600px; | |||
| border: 1px solid lightgray; | |||
| } | |||
| </style> | |||
| <script type="text/javascript" src="../../dist/vis.js"></script> | |||
| <link href="../../dist/vis.css" rel="stylesheet" type="text/css" /> | |||
| <script type="text/javascript"> | |||
| var nodes = null; | |||
| var edges = null; | |||
| var network = null; | |||
| function draw() { | |||
| nodes = new vis.DataSet([{ | |||
| id: '1001', | |||
| value: '1' | |||
| }, { | |||
| id: '1009', | |||
| value: '2' | |||
| }, { | |||
| id: '1061', | |||
| value: '3' | |||
| }, { | |||
| id: '1226', | |||
| value: '4' | |||
| }]); | |||
| edges = new vis.DataSet([{ | |||
| id: '1001_1061', | |||
| from: '1001', | |||
| to: '1061', | |||
| value: '1' | |||
| }, { | |||
| id: '1001_1226', | |||
| from: '1001', | |||
| to: '1226', | |||
| value: '1' | |||
| }, { | |||
| id: '1009_1061', | |||
| from: '1009', | |||
| to: '1061', | |||
| value: '2' | |||
| }, { | |||
| id: '1009_1226', | |||
| from: '1009', | |||
| to: '1226', | |||
| value: '1' | |||
| }, { | |||
| id: '1061_1226', | |||
| from: '1061', | |||
| to: '1226', | |||
| value: '1' | |||
| }]); | |||
| var container = document.getElementById('mynetwork'); | |||
| var data = { | |||
| nodes: nodes, | |||
| edges: edges | |||
| }; | |||
| var nodeNormalColor = { // For 'normal' nodes | |||
| background: '#92bbc7', | |||
| border: '#5d93a6', | |||
| borderWidth: 2, | |||
| highlight: { | |||
| background: '#5d93a6', | |||
| border: '#537286' | |||
| } | |||
| }; | |||
| var nodeBlurColor = { // For 'blurred' nodes | |||
| background: '#f0f0f0', | |||
| border: '#f0f0f0' | |||
| }; | |||
| var edgeNormalColor = { | |||
| color: '#5d93a6', | |||
| highlight: '#28132b' | |||
| }; | |||
| var edgeBlurColor = { | |||
| color: '#f0f0f0', | |||
| highlight: '#f0f0f0' | |||
| }; | |||
| var options = { | |||
| nodes: { | |||
| shape: 'dot', | |||
| color: nodeNormalColor | |||
| }, | |||
| edges: { | |||
| inheritColor: false, | |||
| color: edgeNormalColor, | |||
| widthSelectionMultiplier: 1 | |||
| }, | |||
| physics: { | |||
| 'barnesHut': { | |||
| centralGravity: 0.5, | |||
| springLength: 150, | |||
| springConstant: 0.03, | |||
| damping: 0.2 | |||
| } | |||
| } | |||
| }; | |||
| network = new vis.Network(container, data, options); | |||
| // add event listeners | |||
| network.on('select', function (params) { | |||
| console.log(params.edges); | |||
| var nodesData = {}; | |||
| var edgesData = {}; | |||
| var nodeResetQuery = []; | |||
| var edgeResetQuery = []; | |||
| var allEdges = edges.get(); | |||
| var allNodes = nodes.get(); | |||
| for (var i = 0; i < allNodes.length; i++) { | |||
| nodesData[allNodes[i].id] = {id:allNodes[i].id, color: nodeBlurColor}; | |||
| nodeResetQuery.push({id:allNodes[i].id, color: nodeNormalColor}); | |||
| } | |||
| for (var i = 0; i < allEdges.length; i++) { | |||
| edgesData[allEdges[i].id] = {id:allEdges[i].id, color: edgeBlurColor}; | |||
| edgeResetQuery.push({id:allEdges[i].id, color: edgeNormalColor}); | |||
| } | |||
| // deselect | |||
| if (params.nodes.length == 0 && params.edges.length == 0) { | |||
| nodes.update(nodeResetQuery); | |||
| edges.update(edgeResetQuery); | |||
| return; | |||
| } | |||
| // paint nodes and edges. | |||
| for (var i = 0; i < params.nodes.length; i++) { | |||
| nodesData[params.nodes[i]].color = nodeNormalColor; | |||
| } | |||
| for (var i = 0; i < params.edges.length; i++) { | |||
| edgesData[params.edges[i]].color = edgeNormalColor; | |||
| var selEdge = edges.get(params.edges[i]); | |||
| nodesData[selEdge.to].color = nodeNormalColor; | |||
| nodesData[selEdge.from].color = nodeNormalColor; | |||
| } | |||
| var nodeUpdateQuery = []; | |||
| var edgeUpdateQuery = []; | |||
| for (var nodeId in nodesData) { | |||
| if (nodesData.hasOwnProperty(nodeId)) { | |||
| nodeUpdateQuery.push(nodesData[nodeId]); | |||
| } | |||
| } | |||
| for (var edgeId in edgesData) { | |||
| if (edgesData.hasOwnProperty(edgeId)) { | |||
| edgeUpdateQuery.push(edgesData[edgeId]); | |||
| } | |||
| } | |||
| nodes.update(nodeUpdateQuery); | |||
| edges.update(edgeUpdateQuery); | |||
| // nodes.update(nodeResetQuery); | |||
| // edges.update(edgeResetQuery); | |||
| // nodes.update(nodeUpdateQuery); | |||
| // edges.update(edgeUpdateQuery); | |||
| });} | |||
| </script> | |||
| </head> | |||
| <body onload="draw();"> | |||
| <br> | |||
| <div id="mynetwork"></div> | |||
| <p id="selection"></p> | |||
| </body> | |||
| </html> | |||