Browse Source
Merge pull request #29 from almende/alex_dev
merge alex_dev with developcss_transitions
Jos de Jong
10 years ago
41 changed files with 23210 additions and 3566 deletions
Unified View
Diff Options
-
+5 -0.gitignore
-
+10 -0HISTORY.md
-
+10 -4Jakefile.js
-
BINdist/UI_icons/downarrow.png
-
BINdist/UI_icons/leftarrow.png
-
BINdist/UI_icons/minus.png
-
BINdist/UI_icons/plus.png
-
BINdist/UI_icons/rightarrow.png
-
BINdist/UI_icons/uparrow.png
-
BINdist/UI_icons/zoomExtends.png
-
+8 -0dist/vis.css
-
+6982 -3068dist/vis.js
-
+10 -8dist/vis.min.js
-
+259 -2docs/graph.html
-
+8 -0examples/graph/02_random_nodes.html
-
+1 -1examples/graph/17_network_info.html
-
+102 -0examples/graph/18_fully_random_nodes_clustering.html
-
+142 -0examples/graph/19_scale_free_graph_clustering.html
-
+186 -0examples/graph/20_UI_example.html
-
BINexamples/graph/img/UI_icons/downarrow.png
-
BINexamples/graph/img/UI_icons/leftarrow.png
-
BINexamples/graph/img/UI_icons/minus.png
-
BINexamples/graph/img/UI_icons/plus.png
-
BINexamples/graph/img/UI_icons/rightarrow.png
-
BINexamples/graph/img/UI_icons/uparrow.png
-
BINexamples/graph/img/UI_icons/zoomExtends.png
-
+3 -0examples/graph/index.html
-
+4 -2package.json
-
+25 -3src/DataSet.js
-
+1019 -0src/graph/ClusterMixin.js
-
+41 -23src/graph/Edge.js
-
+741 -408src/graph/Graph.js
-
+337 -46src/graph/Node.js
-
+1 -1src/graph/Popup.js
-
+547 -0src/graph/SectorsMixin.js
-
+487 -0src/graph/SelectionMixin.js
-
+258 -0src/graph/UIMixin.js
-
+14 -0src/module/imports.js
-
+28 -0src/util.js
-
+18 -0test/dataset.js
-
+11964 -0vis.js.tmp
+ 5
- 0
.gitignore
View File
| @ -1,2 +1,7 @@ | |||||
| .idea | .idea | ||||
| node_modules | node_modules | ||||
| .project | |||||
| .settings/.jsdtscope | |||||
| .settings/org.eclipse.wst.jsdt.ui.superType.container | |||||
| .settings/org.eclipse.wst.jsdt.ui.superType.name | |||||
| npm-debug.log | |||||
+ 10
- 0
HISTORY.md
View File
+ 10
- 4
Jakefile.js
View File
BIN
dist/UI_icons/downarrow.png
View File
| Before | After |
|---|---|
|
|
| Width: 30 | Height: 30 | Size: 4.4 KiB |
BIN
dist/UI_icons/leftarrow.png
View File
| Before | After |
|---|---|
|
|
| Width: 30 | Height: 30 | Size: 4.4 KiB |
BIN
dist/UI_icons/minus.png
View File
| Before | After |
|---|---|
|
|
| Width: 30 | Height: 30 | Size: 4.0 KiB |
BIN
dist/UI_icons/plus.png
View File
| Before | After |
|---|---|
|
|
| Width: 30 | Height: 30 | Size: 4.2 KiB |
BIN
dist/UI_icons/rightarrow.png
View File
| Before | After |
|---|---|
|
|
| Width: 30 | Height: 30 | Size: 4.4 KiB |
BIN
dist/UI_icons/uparrow.png
View File
| Before | After |
|---|---|
|
|
| Width: 30 | Height: 30 | Size: 4.4 KiB |
BIN
dist/UI_icons/zoomExtends.png
View File
| Before | After |
|---|---|
|
|
| Width: 30 | Height: 30 | Size: 4.4 KiB |
+ 8
- 0
dist/vis.css
View File
+ 6982
- 3068
dist/vis.js
File diff suppressed because it is too large
View File
+ 10
- 8
dist/vis.min.js
File diff suppressed because it is too large
View File
+ 259
- 2
docs/graph.html
View File
+ 8
- 0
examples/graph/02_random_nodes.html
View File
+ 1
- 1
examples/graph/17_network_info.html
View File
+ 102
- 0
examples/graph/18_fully_random_nodes_clustering.html
View File
| @ -0,0 +1,102 @@ | |||||
| <!doctype html> | |||||
| <html> | |||||
| <head> | |||||
| <title>Graph | Really Random nodes</title> | |||||
| <style type="text/css"> | |||||
| body { | |||||
| font: 10pt sans; | |||||
| } | |||||
| #mygraph { | |||||
| width: 600px; | |||||
| height: 600px; | |||||
| border: 1px solid lightgray; | |||||
| } | |||||
| </style> | |||||
| <script type="text/javascript" src="../../dist/vis.js"></script> | |||||
| <script type="text/javascript"> | |||||
| var nodes = null; | |||||
| var edges = null; | |||||
| var graph = null; | |||||
| function draw() { | |||||
| nodes = []; | |||||
| edges = []; | |||||
| // randomly create some nodes and edges | |||||
| var nodeCount = parseInt(document.getElementById('nodeCount').value); | |||||
| for (var i = 0; i < nodeCount; i++) { | |||||
| nodes.push({ | |||||
| id: i, | |||||
| label: String(i) | |||||
| }); | |||||
| } | |||||
| for (var i = 0; i < nodeCount; i++) { | |||||
| var from = i; | |||||
| var to = i; | |||||
| to = i; | |||||
| while (to == i) { | |||||
| to = Math.floor(Math.random() * (nodeCount)); | |||||
| } | |||||
| edges.push({ | |||||
| from: from, | |||||
| to: to | |||||
| }); | |||||
| } | |||||
| // create a graph | |||||
| var clusteringOn = document.getElementById('clustering').checked; | |||||
| var container = document.getElementById('mygraph'); | |||||
| var data = { | |||||
| nodes: nodes, | |||||
| edges: edges | |||||
| }; | |||||
| var options = { | |||||
| edges: { | |||||
| length: 80 | |||||
| }, | |||||
| clustering: { | |||||
| enabled: clusteringOn | |||||
| }, | |||||
| stabilize: false | |||||
| }; | |||||
| graph = new vis.Graph(container, data, options); | |||||
| // add event listeners | |||||
| vis.events.addListener(graph, 'select', function(params) { | |||||
| document.getElementById('selection').innerHTML = | |||||
| 'Selection: ' + graph.getSelection(); | |||||
| }); | |||||
| } | |||||
| </script> | |||||
| </head> | |||||
| <body onload="draw();"> | |||||
| <h2>Clustering - Fully random graph</h2> | |||||
| <div style="width:700px; font-size:14px;"> | |||||
| This example shows a fully randomly generated set of nodes and connected edges. | |||||
| By clicking the checkbox you can turn clustering on and off. If you increase the number of nodes to | |||||
| a value higher than 100, automatic clustering is used before the initial draw (assuming the checkbox is checked). | |||||
| <br /> | |||||
| <br /> | |||||
| Clustering is done automatically when zooming out. When zooming in over the cluster, the cluster pops open. When the cluster is very big, a special instance | |||||
| will be created and the cluster contents will only be simulated in there. Double click will also open a cluster. | |||||
| <br /> | |||||
| <br /> | |||||
| Try values of 500 and 5000 with and without clustering. All thresholds can be changed to suit your dataset. | |||||
| </div> | |||||
| <br /> | |||||
| <form onsubmit="draw(); return false;"> | |||||
| <label for="nodeCount">Number of nodes:</label> | |||||
| <input id="nodeCount" type="text" value="50" style="width: 50px;"> | |||||
| <label for="clustering">Enable Clustering:</label> | |||||
| <input id="clustering" type="checkbox" onChange="draw()" checked="true"> | |||||
| <input type="submit" value="Go"> | |||||
| </form> | |||||
| <br> | |||||
| <div id="mygraph"></div> | |||||
| <p id="selection"></p> | |||||
| </body> | |||||
| </html> | |||||
+ 142
- 0
examples/graph/19_scale_free_graph_clustering.html
View File
| @ -0,0 +1,142 @@ | |||||
| <!doctype html> | |||||
| <html> | |||||
| <head> | |||||
| <title>Graph | Random nodes</title> | |||||
| <style type="text/css"> | |||||
| body { | |||||
| font: 10pt sans; | |||||
| } | |||||
| #mygraph { | |||||
| width: 600px; | |||||
| height: 600px; | |||||
| border: 1px solid lightgray; | |||||
| } | |||||
| </style> | |||||
| <script type="text/javascript" src="../../dist/vis.js"></script> | |||||
| <script type="text/javascript"> | |||||
| var nodes = null; | |||||
| var edges = null; | |||||
| var graph = null; | |||||
| function draw() { | |||||
| nodes = []; | |||||
| edges = []; | |||||
| var connectionCount = []; | |||||
| // randomly create some nodes and edges | |||||
| var nodeCount = document.getElementById('nodeCount').value; | |||||
| for (var i = 0; i < nodeCount; i++) { | |||||
| nodes.push({ | |||||
| id: i, | |||||
| label: String(i) | |||||
| }); | |||||
| connectionCount[i] = 0; | |||||
| // create edges in a scale-free-graph way | |||||
| if (i == 1) { | |||||
| var from = i; | |||||
| var to = 0; | |||||
| edges.push({ | |||||
| from: from, | |||||
| to: to | |||||
| }); | |||||
| connectionCount[from]++; | |||||
| connectionCount[to]++; | |||||
| } | |||||
| else if (i > 1) { | |||||
| var conn = edges.length * 2; | |||||
| var rand = Math.floor(Math.random() * conn); | |||||
| var cum = 0; | |||||
| var j = 0; | |||||
| while (j < connectionCount.length && cum < rand) { | |||||
| cum += connectionCount[j]; | |||||
| j++; | |||||
| } | |||||
| var from = i; | |||||
| var to = j; | |||||
| edges.push({ | |||||
| from: from, | |||||
| to: to | |||||
| }); | |||||
| connectionCount[from]++; | |||||
| connectionCount[to]++; | |||||
| } | |||||
| } | |||||
| // create a graph | |||||
| var clusteringOn = document.getElementById('clustering').checked; | |||||
| var clusterEdgeThreshold = parseInt(document.getElementById('clusterEdgeThreshold').value); | |||||
| var container = document.getElementById('mygraph'); | |||||
| var data = { | |||||
| nodes: nodes, | |||||
| edges: edges | |||||
| }; | |||||
| /* | |||||
| var options = { | |||||
| nodes: { | |||||
| shape: 'circle' | |||||
| }, | |||||
| edges: { | |||||
| length: 50 | |||||
| }, | |||||
| stabilize: false | |||||
| }; | |||||
| */ | |||||
| var options = { | |||||
| edges: { | |||||
| length: 50 | |||||
| }, | |||||
| clustering: { | |||||
| enabled: clusteringOn, | |||||
| clusterEdgeThreshold: clusterEdgeThreshold | |||||
| }, | |||||
| stabilize: false | |||||
| }; | |||||
| graph = new vis.Graph(container, data, options); | |||||
| // add event listeners | |||||
| vis.events.addListener(graph, 'select', function(params) { | |||||
| document.getElementById('selection').innerHTML = | |||||
| 'Selection: ' + graph.getSelection(); | |||||
| }); | |||||
| } | |||||
| </script> | |||||
| </head> | |||||
| <body onload="draw();"> | |||||
| <h2>Clustering - Scale-Free-Graph</h2> | |||||
| <div style="width:700px; font-size:14px;"> | |||||
| This example shows therandomly generated <b>scale-free-graph</b> set of nodes and connected edges from example 2. | |||||
| By clicking the checkbox you can turn clustering on and off. If you increase the number of nodes to | |||||
| a value higher than 100, automatic clustering is used before the initial draw (assuming the checkbox is checked). | |||||
| <br /> | |||||
| <br /> | |||||
| Clustering is done automatically when zooming out. When zooming in over the cluster, the cluster pops open. When the cluster is very big, a special instance | |||||
| will be created and the cluster contents will only be simulated in there. Double click will also open a cluster. | |||||
| <br /> | |||||
| <br /> | |||||
| Try values of 500 and 5000 with and without clustering. All thresholds can be changed to suit your dataset. | |||||
| Experiment with the clusterEdgeThreshold, which increases the formation of clusters when zoomed out (assuming the checkbox is checked). | |||||
| </div> | |||||
| <br /> | |||||
| <form onsubmit="draw(); return false;"> | |||||
| <label for="nodeCount">Number of nodes:</label> | |||||
| <input id="nodeCount" type="text" value="125" style="width: 50px;"> | |||||
| <label for="clustering">Enable Clustering:</label> | |||||
| <input id="clustering" type="checkbox" onChange="draw()" checked="true"> | |||||
| <label for="clusterEdgeThreshold">clusterEdgeThreshold:</label> | |||||
| <input id="clusterEdgeThreshold" type="text" value="20" style="width: 50px;"> | |||||
| <input type="submit" value="Go"> | |||||
| </form> | |||||
| <br> | |||||
| <div id="mygraph"></div> | |||||
| <p id="selection"></p> | |||||
| </body> | |||||
| </html> | |||||
+ 186
- 0
examples/graph/20_UI_example.html
View File
| @ -0,0 +1,186 @@ | |||||
| <!doctype html> | |||||
| <html> | |||||
| <head> | |||||
| <title>Graph | Random nodes</title> | |||||
| <style type="text/css"> | |||||
| body { | |||||
| font: 10pt sans; | |||||
| } | |||||
| #mygraph { | |||||
| width: 600px; | |||||
| height: 600px; | |||||
| border: 1px solid lightgray; | |||||
| } | |||||
| table.legend_table { | |||||
| font-size: 11px; | |||||
| border-width:1px; | |||||
| border-color:#d3d3d3; | |||||
| border-style:solid; | |||||
| } | |||||
| table.legend_table,td { | |||||
| border-width:1px; | |||||
| border-color:#d3d3d3; | |||||
| border-style:solid; | |||||
| padding: 2px; | |||||
| } | |||||
| div.table_content { | |||||
| width:80px; | |||||
| text-align:center; | |||||
| } | |||||
| div.table_description { | |||||
| width:100px; | |||||
| } | |||||
| </style> | |||||
| <script type="text/javascript" src="../../dist/vis.js"></script> | |||||
| <script type="text/javascript"> | |||||
| var nodes = null; | |||||
| var edges = null; | |||||
| var graph = null; | |||||
| function draw() { | |||||
| nodes = []; | |||||
| edges = []; | |||||
| var connectionCount = []; | |||||
| // randomly create some nodes and edges | |||||
| var nodeCount = document.getElementById('nodeCount').value; | |||||
| for (var i = 0; i < nodeCount; i++) { | |||||
| nodes.push({ | |||||
| id: i, | |||||
| label: String(i) | |||||
| }); | |||||
| connectionCount[i] = 0; | |||||
| // create edges in a scale-free-graph way | |||||
| if (i == 1) { | |||||
| var from = i; | |||||
| var to = 0; | |||||
| edges.push({ | |||||
| from: from, | |||||
| to: to | |||||
| }); | |||||
| connectionCount[from]++; | |||||
| connectionCount[to]++; | |||||
| } | |||||
| else if (i > 1) { | |||||
| var conn = edges.length * 2; | |||||
| var rand = Math.floor(Math.random() * conn); | |||||
| var cum = 0; | |||||
| var j = 0; | |||||
| while (j < connectionCount.length && cum < rand) { | |||||
| cum += connectionCount[j]; | |||||
| j++; | |||||
| } | |||||
| var from = i; | |||||
| var to = j; | |||||
| edges.push({ | |||||
| from: from, | |||||
| to: to | |||||
| }); | |||||
| connectionCount[from]++; | |||||
| connectionCount[to]++; | |||||
| } | |||||
| } | |||||
| // create a graph | |||||
| var container = document.getElementById('mygraph'); | |||||
| var data = { | |||||
| nodes: nodes, | |||||
| edges: edges | |||||
| }; | |||||
| /* | |||||
| var options = { | |||||
| nodes: { | |||||
| shape: 'circle' | |||||
| }, | |||||
| edges: { | |||||
| length: 50 | |||||
| }, | |||||
| stabilize: false | |||||
| }; | |||||
| */ | |||||
| var options = { | |||||
| edges: { | |||||
| length: 50 | |||||
| }, | |||||
| stabilize: false, | |||||
| navigationUI: { | |||||
| enabled: true | |||||
| }, | |||||
| keyboardNavigation: { | |||||
| enabled: true | |||||
| } | |||||
| }; | |||||
| graph = new vis.Graph(container, data, options); | |||||
| // add event listeners | |||||
| vis.events.addListener(graph, 'select', function(params) { | |||||
| document.getElementById('selection').innerHTML = | |||||
| 'Selection: ' + graph.getSelection(); | |||||
| }); | |||||
| } | |||||
| </script> | |||||
| </head> | |||||
| <body onload="draw();"> | |||||
| <h2>UI - User Interface and Keyboad Navigation</h2> | |||||
| <div style="width: 700px; font-size:14px;"> | |||||
| This example is the same as example 2, except for the UI that has been activated. The UI icons are described below. <br /><br /> | |||||
| <table class="legend_table"> | |||||
| <tr> | |||||
| <td>Icons: </td> | |||||
| <td><div class="table_content"><img src="img/UI_icons/uparrow.png" /> </div></td> | |||||
| <td><div class="table_content"><img src="img/UI_icons/downarrow.png" /> </div></td> | |||||
| <td><div class="table_content"><img src="img/UI_icons/leftarrow.png" /> </div></td> | |||||
| <td><div class="table_content"><img src="img/UI_icons/rightarrow.png" /> </div></td> | |||||
| <td><div class="table_content"><img src="img/UI_icons/plus.png" /> </div></td> | |||||
| <td><div class="table_content"><img src="img/UI_icons/minus.png" /> </div></td> | |||||
| <td><div class="table_content"><img src="img/UI_icons/zoomExtends.png" /> </div></td> | |||||
| </tr> | |||||
| <tr> | |||||
| <td><div class="table_description">Keyboard shortcuts:</div></td> | |||||
| <td><div class="table_content">Up arrow</div></td> | |||||
| <td><div class="table_content">Down arrow</div></td> | |||||
| <td><div class="table_content">Left arrow</div></td> | |||||
| <td><div class="table_content">Right arrow</div></td> | |||||
| <td><div class="table_content">=<br />[<br />Page up</div></td> | |||||
| <td><div class="table_content">-<br />]<br />Page down</div></td> | |||||
| <td><div class="table_content">None</div></td> | |||||
| </tr> | |||||
| <td><div class="table_description">Description:</div></td> | |||||
| <td><div class="table_content">Move up</div></td> | |||||
| <td><div class="table_content">Move down</div></td> | |||||
| <td><div class="table_content">Move left</div></td> | |||||
| <td><div class="table_content">Move right</div></td> | |||||
| <td><div class="table_content">Zoom in</div></td> | |||||
| <td><div class="table_content">Zoom out</div></td> | |||||
| <td><div class="table_content">Zoom extends</div></td> | |||||
| </tr> | |||||
| </table> | |||||
| <br /> | |||||
| Apart from clicking the icons, you can also navigate using the keyboard. The buttons are in table above. | |||||
| Zoom Extends changes the zoom and position of the camera to encompass all visible nodes. The UI buttons can be toggled on or off | |||||
| by pressing the U button on the keyboard. | |||||
| </div> | |||||
| <br /> | |||||
| <form onsubmit="draw(); return false;"> | |||||
| <label for="nodeCount">Number of nodes:</label> | |||||
| <input id="nodeCount" type="text" value="25" style="width: 50px;"> | |||||
| <input type="submit" value="Go"> | |||||
| </form> | |||||
| <br> | |||||
| <div id="mygraph"></div> | |||||
| <p id="selection"></p> | |||||
| </body> | |||||
| </html> | |||||
BIN
examples/graph/img/UI_icons/downarrow.png
View File
| Before | After |
|---|---|
|
|
| Width: 30 | Height: 30 | Size: 4.4 KiB |
BIN
examples/graph/img/UI_icons/leftarrow.png
View File
| Before | After |
|---|---|
|
|
| Width: 30 | Height: 30 | Size: 4.4 KiB |
BIN
examples/graph/img/UI_icons/minus.png
View File
| Before | After |
|---|---|
|
|
| Width: 30 | Height: 30 | Size: 4.0 KiB |
BIN
examples/graph/img/UI_icons/plus.png
View File
| Before | After |
|---|---|
|
|
| Width: 30 | Height: 30 | Size: 4.2 KiB |
BIN
examples/graph/img/UI_icons/rightarrow.png
View File
| Before | After |
|---|---|
|
|
| Width: 30 | Height: 30 | Size: 4.4 KiB |
BIN
examples/graph/img/UI_icons/uparrow.png
View File
| Before | After |
|---|---|
|
|
| Width: 30 | Height: 30 | Size: 4.4 KiB |
BIN
examples/graph/img/UI_icons/zoomExtends.png
View File
| Before | After |
|---|---|
|
|
| Width: 30 | Height: 30 | Size: 4.4 KiB |
+ 3
- 0
examples/graph/index.html
View File
+ 4
- 2
package.json
View File
+ 25
- 3
src/DataSet.js
View File
+ 1019
- 0
src/graph/ClusterMixin.js
File diff suppressed because it is too large
View File
+ 41
- 23
src/graph/Edge.js
View File
+ 741
- 408
src/graph/Graph.js
File diff suppressed because it is too large
View File
+ 337
- 46
src/graph/Node.js
View File
+ 1
- 1
src/graph/Popup.js
View File
+ 547
- 0
src/graph/SectorsMixin.js
View File
| @ -0,0 +1,547 @@ | |||||
| /** | |||||
| * Creation of the SectorMixin var. | |||||
| * | |||||
| * This contains all the functions the Graph object can use to employ the sector system. | |||||
| * The sector system is always used by Graph, though the benefits only apply to the use of clustering. | |||||
| * If clustering is not used, there is no overhead except for a duplicate object with references to nodes and edges. | |||||
| * | |||||
| * Alex de Mulder | |||||
| * 21-01-2013 | |||||
| */ | |||||
| var SectorMixin = { | |||||
| /** | |||||
| * This function is only called by the setData function of the Graph object. | |||||
| * This loads the global references into the active sector. This initializes the sector. | |||||
| * | |||||
| * @private | |||||
| */ | |||||
| _putDataInSector : function() { | |||||
| this.sectors["active"][this._sector()].nodes = this.nodes; | |||||
| this.sectors["active"][this._sector()].edges = this.edges; | |||||
| this.sectors["active"][this._sector()].nodeIndices = this.nodeIndices; | |||||
| }, | |||||
| /** | |||||
| * /** | |||||
| * This function sets the global references to nodes, edges and nodeIndices back to | |||||
| * those of the supplied (active) sector. If a type is defined, do the specific type | |||||
| * | |||||
| * @param {String} sectorId | |||||
| * @param {String} [sectorType] | "active" or "frozen" | |||||
| * @private | |||||
| */ | |||||
| _switchToSector : function(sectorId, sectorType) { | |||||
| if (sectorType === undefined || sectorType == "active") { | |||||
| this._switchToActiveSector(sectorId); | |||||
| } | |||||
| else { | |||||
| this._switchToFrozenSector(sectorId); | |||||
| } | |||||
| }, | |||||
| /** | |||||
| * This function sets the global references to nodes, edges and nodeIndices back to | |||||
| * those of the supplied active sector. | |||||
| * | |||||
| * @param sectorId | |||||
| * @private | |||||
| */ | |||||
| _switchToActiveSector : function(sectorId) { | |||||
| this.nodeIndices = this.sectors["active"][sectorId]["nodeIndices"]; | |||||
| this.nodes = this.sectors["active"][sectorId]["nodes"]; | |||||
| this.edges = this.sectors["active"][sectorId]["edges"]; | |||||
| }, | |||||
| /** | |||||
| * This function sets the global references to nodes, edges and nodeIndices back to | |||||
| * those of the supplied frozen sector. | |||||
| * | |||||
| * @param sectorId | |||||
| * @private | |||||
| */ | |||||
| _switchToFrozenSector : function(sectorId) { | |||||
| this.nodeIndices = this.sectors["frozen"][sectorId]["nodeIndices"]; | |||||
| this.nodes = this.sectors["frozen"][sectorId]["nodes"]; | |||||
| this.edges = this.sectors["frozen"][sectorId]["edges"]; | |||||
| }, | |||||
| /** | |||||
| * This function sets the global references to nodes, edges and nodeIndices to | |||||
| * those of the navigationUI sector. | |||||
| * | |||||
| * @private | |||||
| */ | |||||
| _switchToUISector : function() { | |||||
| this.nodeIndices = this.sectors["navigationUI"]["nodeIndices"]; | |||||
| this.nodes = this.sectors["navigationUI"]["nodes"]; | |||||
| this.edges = this.sectors["navigationUI"]["edges"]; | |||||
| }, | |||||
| /** | |||||
| * This function sets the global references to nodes, edges and nodeIndices back to | |||||
| * those of the currently active sector. | |||||
| * | |||||
| * @private | |||||
| */ | |||||
| _loadLatestSector : function() { | |||||
| this._switchToSector(this._sector()); | |||||
| }, | |||||
| /** | |||||
| * This function returns the currently active sector Id | |||||
| * | |||||
| * @returns {String} | |||||
| * @private | |||||
| */ | |||||
| _sector : function() { | |||||
| return this.activeSector[this.activeSector.length-1]; | |||||
| }, | |||||
| /** | |||||
| * This function returns the previously active sector Id | |||||
| * | |||||
| * @returns {String} | |||||
| * @private | |||||
| */ | |||||
| _previousSector : function() { | |||||
| if (this.activeSector.length > 1) { | |||||
| return this.activeSector[this.activeSector.length-2]; | |||||
| } | |||||
| else { | |||||
| throw new TypeError('there are not enough sectors in the this.activeSector array.'); | |||||
| } | |||||
| }, | |||||
| /** | |||||
| * We add the active sector at the end of the this.activeSector array | |||||
| * This ensures it is the currently active sector returned by _sector() and it reaches the top | |||||
| * of the activeSector stack. When we reverse our steps we move from the end to the beginning of this stack. | |||||
| * | |||||
| * @param newId | |||||
| * @private | |||||
| */ | |||||
| _setActiveSector : function(newId) { | |||||
| this.activeSector.push(newId); | |||||
| }, | |||||
| /** | |||||
| * We remove the currently active sector id from the active sector stack. This happens when | |||||
| * we reactivate the previously active sector | |||||
| * | |||||
| * @private | |||||
| */ | |||||
| _forgetLastSector : function() { | |||||
| this.activeSector.pop(); | |||||
| }, | |||||
| /** | |||||
| * This function creates a new active sector with the supplied newId. This newId | |||||
| * is the expanding node id. | |||||
| * | |||||
| * @param {String} newId | Id of the new active sector | |||||
| * @private | |||||
| */ | |||||
| _createNewSector : function(newId) { | |||||
| // create the new sector | |||||
| this.sectors["active"][newId] = {"nodes":{}, | |||||
| "edges":{}, | |||||
| "nodeIndices":[], | |||||
| "formationScale": this.scale, | |||||
| "drawingNode": undefined}; | |||||
| // create the new sector render node. This gives visual feedback that you are in a new sector. | |||||
| this.sectors["active"][newId]['drawingNode'] = new Node( | |||||
| {id:newId, | |||||
| color: { | |||||
| background: "#eaefef", | |||||
| border: "495c5e" | |||||
| } | |||||
| },{},{},this.constants); | |||||
| this.sectors["active"][newId]['drawingNode'].clusterSize = 2; | |||||
| }, | |||||
| /** | |||||
| * This function removes the currently active sector. This is called when we create a new | |||||
| * active sector. | |||||
| * | |||||
| * @param {String} sectorId | Id of the active sector that will be removed | |||||
| * @private | |||||
| */ | |||||
| _deleteActiveSector : function(sectorId) { | |||||
| delete this.sectors["active"][sectorId]; | |||||
| }, | |||||
| /** | |||||
| * This function removes the currently active sector. This is called when we reactivate | |||||
| * the previously active sector. | |||||
| * | |||||
| * @param {String} sectorId | Id of the active sector that will be removed | |||||
| * @private | |||||
| */ | |||||
| _deleteFrozenSector : function(sectorId) { | |||||
| delete this.sectors["frozen"][sectorId]; | |||||
| }, | |||||
| /** | |||||
| * Freezing an active sector means moving it from the "active" object to the "frozen" object. | |||||
| * We copy the references, then delete the active entree. | |||||
| * | |||||
| * @param sectorId | |||||
| * @private | |||||
| */ | |||||
| _freezeSector : function(sectorId) { | |||||
| // we move the set references from the active to the frozen stack. | |||||
| this.sectors["frozen"][sectorId] = this.sectors["active"][sectorId]; | |||||
| // we have moved the sector data into the frozen set, we now remove it from the active set | |||||
| this._deleteActiveSector(sectorId); | |||||
| }, | |||||
| /** | |||||
| * This is the reverse operation of _freezeSector. Activating means moving the sector from the "frozen" | |||||
| * object to the "active" object. | |||||
| * | |||||
| * @param sectorId | |||||
| * @private | |||||
| */ | |||||
| _activateSector : function(sectorId) { | |||||
| // we move the set references from the frozen to the active stack. | |||||
| this.sectors["active"][sectorId] = this.sectors["frozen"][sectorId]; | |||||
| // we have moved the sector data into the active set, we now remove it from the frozen stack | |||||
| this._deleteFrozenSector(sectorId); | |||||
| }, | |||||
| /** | |||||
| * This function merges the data from the currently active sector with a frozen sector. This is used | |||||
| * in the process of reverting back to the previously active sector. | |||||
| * The data that is placed in the frozen (the previously active) sector is the node that has been removed from it | |||||
| * upon the creation of a new active sector. | |||||
| * | |||||
| * @param sectorId | |||||
| * @private | |||||
| */ | |||||
| _mergeThisWithFrozen : function(sectorId) { | |||||
| // copy all nodes | |||||
| for (var nodeId in this.nodes) { | |||||
| if (this.nodes.hasOwnProperty(nodeId)) { | |||||
| this.sectors["frozen"][sectorId]["nodes"][nodeId] = this.nodes[nodeId]; | |||||
| } | |||||
| } | |||||
| // copy all edges (if not fully clustered, else there are no edges) | |||||
| for (var edgeId in this.edges) { | |||||
| if (this.edges.hasOwnProperty(edgeId)) { | |||||
| this.sectors["frozen"][sectorId]["edges"][edgeId] = this.edges[edgeId]; | |||||
| } | |||||
| } | |||||
| // merge the nodeIndices | |||||
| for (var i = 0; i < this.nodeIndices.length; i++) { | |||||
| this.sectors["frozen"][sectorId]["nodeIndices"].push(this.nodeIndices[i]); | |||||
| } | |||||
| }, | |||||
| /** | |||||
| * This clusters the sector to one cluster. It was a single cluster before this process started so | |||||
| * we revert to that state. The clusterToFit function with a maximum size of 1 node does this. | |||||
| * | |||||
| * @private | |||||
| */ | |||||
| _collapseThisToSingleCluster : function() { | |||||
| this.clusterToFit(1,false); | |||||
| }, | |||||
| /** | |||||
| * We create a new active sector from the node that we want to open. | |||||
| * | |||||
| * @param node | |||||
| * @private | |||||
| */ | |||||
| _addSector : function(node) { | |||||
| // this is the currently active sector | |||||
| var sector = this._sector(); | |||||
| // // this should allow me to select nodes from a frozen set. | |||||
| // if (this.sectors['active'][sector]["nodes"].hasOwnProperty(node.id)) { | |||||
| // console.log("the node is part of the active sector"); | |||||
| // } | |||||
| // else { | |||||
| // console.log("I dont know what the fuck happened!!"); | |||||
| // } | |||||
| // when we switch to a new sector, we remove the node that will be expanded from the current nodes list. | |||||
| delete this.nodes[node.id]; | |||||
| var unqiueIdentifier = util.randomUUID(); | |||||
| // we fully freeze the currently active sector | |||||
| this._freezeSector(sector); | |||||
| // we create a new active sector. This sector has the Id of the node to ensure uniqueness | |||||
| this._createNewSector(unqiueIdentifier); | |||||
| // we add the active sector to the sectors array to be able to revert these steps later on | |||||
| this._setActiveSector(unqiueIdentifier); | |||||
| // we redirect the global references to the new sector's references. this._sector() now returns unqiueIdentifier | |||||
| this._switchToSector(this._sector()); | |||||
| // finally we add the node we removed from our previous active sector to the new active sector | |||||
| this.nodes[node.id] = node; | |||||
| }, | |||||
| /** | |||||
| * We close the sector that is currently open and revert back to the one before. | |||||
| * If the active sector is the "default" sector, nothing happens. | |||||
| * | |||||
| * @private | |||||
| */ | |||||
| _collapseSector : function() { | |||||
| // the currently active sector | |||||
| var sector = this._sector(); | |||||
| // we cannot collapse the default sector | |||||
| if (sector != "default") { | |||||
| if ((this.nodeIndices.length == 1) || | |||||
| (this.sectors["active"][sector]["drawingNode"].width*this.scale < this.constants.clustering.screenSizeThreshold * this.frame.canvas.clientWidth) || | |||||
| (this.sectors["active"][sector]["drawingNode"].height*this.scale < this.constants.clustering.screenSizeThreshold * this.frame.canvas.clientHeight)) { | |||||
| var previousSector = this._previousSector(); | |||||
| // we collapse the sector back to a single cluster | |||||
| this._collapseThisToSingleCluster(); | |||||
| // we move the remaining nodes, edges and nodeIndices to the previous sector. | |||||
| // This previous sector is the one we will reactivate | |||||
| this._mergeThisWithFrozen(previousSector); | |||||
| // the previously active (frozen) sector now has all the data from the currently active sector. | |||||
| // we can now delete the active sector. | |||||
| this._deleteActiveSector(sector); | |||||
| // we activate the previously active (and currently frozen) sector. | |||||
| this._activateSector(previousSector); | |||||
| // we load the references from the newly active sector into the global references | |||||
| this._switchToSector(previousSector); | |||||
| // we forget the previously active sector because we reverted to the one before | |||||
| this._forgetLastSector(); | |||||
| // finally, we update the node index list. | |||||
| this._updateNodeIndexList(); | |||||
| } | |||||
| } | |||||
| }, | |||||
| /** | |||||
| * This runs a function in all active sectors. This is used in _redraw() and the _initializeForceCalculation(). | |||||
| * | |||||
| * @param {String} runFunction | This is the NAME of a function we want to call in all active sectors | |||||
| * | we dont pass the function itself because then the "this" is the window object | |||||
| * | instead of the Graph object | |||||
| * @param {*} [argument] | Optional: arguments to pass to the runFunction | |||||
| * @private | |||||
| */ | |||||
| _doInAllActiveSectors : function(runFunction,argument) { | |||||
| if (argument === undefined) { | |||||
| for (var sector in this.sectors["active"]) { | |||||
| if (this.sectors["active"].hasOwnProperty(sector)) { | |||||
| // switch the global references to those of this sector | |||||
| this._switchToActiveSector(sector); | |||||
| this[runFunction](); | |||||
| } | |||||
| } | |||||
| } | |||||
| else { | |||||
| for (var sector in this.sectors["active"]) { | |||||
| if (this.sectors["active"].hasOwnProperty(sector)) { | |||||
| // switch the global references to those of this sector | |||||
| this._switchToActiveSector(sector); | |||||
| var args = Array.prototype.splice.call(arguments, 1); | |||||
| if (args.length > 1) { | |||||
| this[runFunction](args[0],args[1]); | |||||
| } | |||||
| else { | |||||
| this[runFunction](argument); | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| // we revert the global references back to our active sector | |||||
| this._loadLatestSector(); | |||||
| }, | |||||
| /** | |||||
| * This runs a function in all frozen sectors. This is used in the _redraw(). | |||||
| * | |||||
| * @param {String} runFunction | This is the NAME of a function we want to call in all active sectors | |||||
| * | we don't pass the function itself because then the "this" is the window object | |||||
| * | instead of the Graph object | |||||
| * @param {*} [argument] | Optional: arguments to pass to the runFunction | |||||
| * @private | |||||
| */ | |||||
| _doInAllFrozenSectors : function(runFunction,argument) { | |||||
| if (argument === undefined) { | |||||
| for (var sector in this.sectors["frozen"]) { | |||||
| if (this.sectors["frozen"].hasOwnProperty(sector)) { | |||||
| // switch the global references to those of this sector | |||||
| this._switchToFrozenSector(sector); | |||||
| this[runFunction](); | |||||
| } | |||||
| } | |||||
| } | |||||
| else { | |||||
| for (var sector in this.sectors["frozen"]) { | |||||
| if (this.sectors["frozen"].hasOwnProperty(sector)) { | |||||
| // switch the global references to those of this sector | |||||
| this._switchToFrozenSector(sector); | |||||
| var args = Array.prototype.splice.call(arguments, 1); | |||||
| if (args.length > 1) { | |||||
| this[runFunction](args[0],args[1]); | |||||
| } | |||||
| else { | |||||
| this[runFunction](argument); | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| this._loadLatestSector(); | |||||
| }, | |||||
| /** | |||||
| * This runs a function in the navigationUI sector. | |||||
| * | |||||
| * @param {String} runFunction | This is the NAME of a function we want to call in all active sectors | |||||
| * | we don't pass the function itself because then the "this" is the window object | |||||
| * | instead of the Graph object | |||||
| * @param {*} [argument] | Optional: arguments to pass to the runFunction | |||||
| * @private | |||||
| */ | |||||
| _doInUISector : function(runFunction,argument) { | |||||
| this._switchToUISector(); | |||||
| if (argument === undefined) { | |||||
| this[runFunction](); | |||||
| } | |||||
| else { | |||||
| var args = Array.prototype.splice.call(arguments, 1); | |||||
| if (args.length > 1) { | |||||
| this[runFunction](args[0],args[1]); | |||||
| } | |||||
| else { | |||||
| this[runFunction](argument); | |||||
| } | |||||
| } | |||||
| this._loadLatestSector(); | |||||
| }, | |||||
| /** | |||||
| * This runs a function in all sectors. This is used in the _redraw(). | |||||
| * | |||||
| * @param {String} runFunction | This is the NAME of a function we want to call in all active sectors | |||||
| * | we don't pass the function itself because then the "this" is the window object | |||||
| * | instead of the Graph object | |||||
| * @param {*} [argument] | Optional: arguments to pass to the runFunction | |||||
| * @private | |||||
| */ | |||||
| _doInAllSectors : function(runFunction,argument) { | |||||
| var args = Array.prototype.splice.call(arguments, 1); | |||||
| if (argument === undefined) { | |||||
| this._doInAllActiveSectors(runFunction); | |||||
| this._doInAllFrozenSectors(runFunction); | |||||
| } | |||||
| else { | |||||
| if (args.length > 1) { | |||||
| this._doInAllActiveSectors(runFunction,args[0],args[1]); | |||||
| this._doInAllFrozenSectors(runFunction,args[0],args[1]); | |||||
| } | |||||
| else { | |||||
| this._doInAllActiveSectors(runFunction,argument); | |||||
| this._doInAllFrozenSectors(runFunction,argument); | |||||
| } | |||||
| } | |||||
| }, | |||||
| /** | |||||
| * This clears the nodeIndices list. We cannot use this.nodeIndices = [] because we would break the link with the | |||||
| * active sector. Thus we clear the nodeIndices in the active sector, then reconnect the this.nodeIndices to it. | |||||
| * | |||||
| * @private | |||||
| */ | |||||
| _clearNodeIndexList : function() { | |||||
| var sector = this._sector(); | |||||
| this.sectors["active"][sector]["nodeIndices"] = []; | |||||
| this.nodeIndices = this.sectors["active"][sector]["nodeIndices"]; | |||||
| }, | |||||
| /** | |||||
| * Draw the encompassing sector node | |||||
| * | |||||
| * @param ctx | |||||
| * @param sectorType | |||||
| * @private | |||||
| */ | |||||
| _drawSectorNodes : function(ctx,sectorType) { | |||||
| var minY = 1e9, maxY = -1e9, minX = 1e9, maxX = -1e9, node; | |||||
| for (var sector in this.sectors[sectorType]) { | |||||
| if (this.sectors[sectorType].hasOwnProperty(sector)) { | |||||
| if (this.sectors[sectorType][sector]["drawingNode"] !== undefined) { | |||||
| this._switchToSector(sector,sectorType); | |||||
| minY = 1e9; maxY = -1e9; minX = 1e9; maxX = -1e9; | |||||
| for (var nodeId in this.nodes) { | |||||
| if (this.nodes.hasOwnProperty(nodeId)) { | |||||
| node = this.nodes[nodeId]; | |||||
| node.resize(ctx); | |||||
| if (minX > node.x - 0.5 * node.width) {minX = node.x - 0.5 * node.width;} | |||||
| if (maxX < node.x + 0.5 * node.width) {maxX = node.x + 0.5 * node.width;} | |||||
| if (minY > node.y - 0.5 * node.height) {minY = node.y - 0.5 * node.height;} | |||||
| if (maxY < node.y + 0.5 * node.height) {maxY = node.y + 0.5 * node.height;} | |||||
| } | |||||
| } | |||||
| node = this.sectors[sectorType][sector]["drawingNode"]; | |||||
| node.x = 0.5 * (maxX + minX); | |||||
| node.y = 0.5 * (maxY + minY); | |||||
| node.width = 2 * (node.x - minX); | |||||
| node.height = 2 * (node.y - minY); | |||||
| node.radius = Math.sqrt(Math.pow(0.5*node.width,2) + Math.pow(0.5*node.height,2)); | |||||
| node.setScale(this.scale); | |||||
| node._drawCircle(ctx); | |||||
| } | |||||
| } | |||||
| } | |||||
| }, | |||||
| _drawAllSectorNodes : function(ctx) { | |||||
| this._drawSectorNodes(ctx,"frozen"); | |||||
| this._drawSectorNodes(ctx,"active"); | |||||
| this._loadLatestSector(); | |||||
| } | |||||
| }; | |||||
+ 487
- 0
src/graph/SelectionMixin.js
View File
| @ -0,0 +1,487 @@ | |||||
| var SelectionMixin = { | |||||
| /** | |||||
| * This function can be called from the _doInAllSectors function | |||||
| * | |||||
| * @param object | |||||
| * @param overlappingNodes | |||||
| * @private | |||||
| */ | |||||
| _getNodesOverlappingWith : function(object, overlappingNodes) { | |||||
| var nodes = this.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 : function (object) { | |||||
| var overlappingNodes = []; | |||||
| this._doInAllActiveSectors("_getNodesOverlappingWith",object,overlappingNodes); | |||||
| return overlappingNodes; | |||||
| }, | |||||
| /** | |||||
| * retrieve all nodes in the navigationUI 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 | |||||
| */ | |||||
| _getAllUINodesOverlappingWith : function (object) { | |||||
| var overlappingNodes = []; | |||||
| this._doInUISector("_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 : function(pointer) { | |||||
| var x = this._canvasToX(pointer.x); | |||||
| var y = this._canvasToY(pointer.y); | |||||
| return {left: x, | |||||
| top: y, | |||||
| right: x, | |||||
| bottom: y}; | |||||
| }, | |||||
| /** | |||||
| * Return a position object in canvasspace from a single point in screenspace | |||||
| * | |||||
| * @param pointer | |||||
| * @returns {{left: number, top: number, right: number, bottom: number}} | |||||
| * @private | |||||
| */ | |||||
| _pointerToScreenPositionObject : function(pointer) { | |||||
| var x = pointer.x; | |||||
| var y = pointer.y; | |||||
| return {left: x, | |||||
| top: y, | |||||
| right: x, | |||||
| bottom: y}; | |||||
| }, | |||||
| /** | |||||
| * Get the top navigationUI node at the a specific point (like a click) | |||||
| * | |||||
| * @param {{x: Number, y: Number}} pointer | |||||
| * @return {Node | null} node | |||||
| * @private | |||||
| */ | |||||
| _getUINodeAt : function (pointer) { | |||||
| var screenPositionObject = this._pointerToScreenPositionObject(pointer); | |||||
| var overlappingNodes = this._getAllUINodesOverlappingWith(screenPositionObject); | |||||
| if (this.UIvisible && overlappingNodes.length > 0) { | |||||
| return this.sectors["navigationUI"]["nodes"][overlappingNodes[overlappingNodes.length - 1]]; | |||||
| } | |||||
| else { | |||||
| return null; | |||||
| } | |||||
| }, | |||||
| /** | |||||
| * Get the top node at the a specific point (like a click) | |||||
| * | |||||
| * @param {{x: Number, y: Number}} pointer | |||||
| * @return {Node | null} node | |||||
| * @private | |||||
| */ | |||||
| _getNodeAt : function (pointer) { | |||||
| // we first check if this is an navigationUI element | |||||
| var positionObject = this._pointerToPositionObject(pointer); | |||||
| 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.nodes[overlappingNodes[overlappingNodes.length - 1]]; | |||||
| } | |||||
| else { | |||||
| return null; | |||||
| } | |||||
| }, | |||||
| /** | |||||
| * 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 : function(pointer) { | |||||
| return null; | |||||
| }, | |||||
| /** | |||||
| * Add object to the selection array. The this.selection id array may not be needed. | |||||
| * | |||||
| * @param obj | |||||
| * @private | |||||
| */ | |||||
| _addToSelection : function(obj) { | |||||
| this.selection.push(obj.id); | |||||
| this.selectionObj[obj.id] = obj; | |||||
| }, | |||||
| /** | |||||
| * Remove a single option from selection. | |||||
| * | |||||
| * @param obj | |||||
| * @private | |||||
| */ | |||||
| _removeFromSelection : function(obj) { | |||||
| for (var i = 0; i < this.selection.length; i++) { | |||||
| if (obj.id == this.selection[i]) { | |||||
| this.selection.splice(i,1); | |||||
| break; | |||||
| } | |||||
| } | |||||
| delete this.selectionObj[obj.id]; | |||||
| }, | |||||
| /** | |||||
| * Unselect all. The selectionObj is useful for this. | |||||
| * | |||||
| * @private | |||||
| */ | |||||
| _unselectAll : function() { | |||||
| this.selection = []; | |||||
| for (var objId in this.selectionObj) { | |||||
| if (this.selectionObj.hasOwnProperty(objId)) { | |||||
| this.selectionObj[objId].unselect(); | |||||
| } | |||||
| } | |||||
| this.selectionObj = {}; | |||||
| this._trigger('select'); | |||||
| }, | |||||
| /** | |||||
| * Check if anything is selected | |||||
| * | |||||
| * @returns {boolean} | |||||
| * @private | |||||
| */ | |||||
| _selectionIsEmpty : function() { | |||||
| if (this.selection.length == 0) { | |||||
| return true; | |||||
| } | |||||
| else { | |||||
| return false; | |||||
| } | |||||
| }, | |||||
| /** | |||||
| * 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} node | |||||
| * @param {Boolean} append | |||||
| * @private | |||||
| */ | |||||
| _selectNode : function(node, append) { | |||||
| if (this._selectionIsEmpty() == false && append == false) { | |||||
| this._unselectAll(); | |||||
| } | |||||
| if (node.selected == false) { | |||||
| node.select(); | |||||
| this._addToSelection(node); | |||||
| } | |||||
| else { | |||||
| node.unselect(); | |||||
| this._removeFromSelection(node); | |||||
| } | |||||
| this._trigger('select'); | |||||
| }, | |||||
| /** | |||||
| * handles the selection part of the touch, only for navigationUI elements; | |||||
| * Touch is triggered before tap, also before hold. Hold triggers after a while. | |||||
| * This is the most responsive solution | |||||
| * | |||||
| * @param {Object} pointer | |||||
| * @private | |||||
| */ | |||||
| _handleTouch : function(pointer) { | |||||
| var node = this._getUINodeAt(pointer); | |||||
| if (node != null) { | |||||
| if (this[node.triggerFunction] !== undefined) { | |||||
| this[node.triggerFunction](); | |||||
| } | |||||
| } | |||||
| }, | |||||
| /** | |||||
| * handles the selection part of the tap; | |||||
| * | |||||
| * @param {Object} pointer | |||||
| * @private | |||||
| */ | |||||
| _handleTap : function(pointer) { | |||||
| var node = this._getNodeAt(pointer); | |||||
| if (node != null) { | |||||
| this._selectNode(node,false); | |||||
| } | |||||
| else { | |||||
| this._unselectAll(); | |||||
| } | |||||
| this._redraw(); | |||||
| }, | |||||
| /** | |||||
| * handles the selection part of the double tap and opens a cluster if needed | |||||
| * | |||||
| * @param {Object} pointer | |||||
| * @private | |||||
| */ | |||||
| _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._canvasToX(pointer.x), | |||||
| "y" : this._canvasToY(pointer.y)}; | |||||
| this.openCluster(node); | |||||
| } | |||||
| }, | |||||
| /** | |||||
| * Handle the onHold selection part | |||||
| * | |||||
| * @param pointer | |||||
| * @private | |||||
| */ | |||||
| _handleOnHold : function(pointer) { | |||||
| var node = this._getNodeAt(pointer); | |||||
| if (node != null) { | |||||
| this._selectNode(node,true); | |||||
| } | |||||
| this._redraw(); | |||||
| }, | |||||
| /** | |||||
| * handle the onRelease event. These functions are here for the navigationUI module. | |||||
| * | |||||
| * @private | |||||
| */ | |||||
| _handleOnRelease : function() { | |||||
| this.xIncrement = 0; | |||||
| this.yIncrement = 0; | |||||
| this.zoomIncrement = 0; | |||||
| this._unHighlightAll(); | |||||
| }, | |||||
| /** | |||||
| * * // TODO: rework this function, it is from the old system | |||||
| * | |||||
| * retrieve the currently selected nodes | |||||
| * @return {Number[] | String[]} selection An array with the ids of the | |||||
| * selected nodes. | |||||
| */ | |||||
| getSelection : function() { | |||||
| return this.selection.concat([]); | |||||
| }, | |||||
| /** | |||||
| * // TODO: rework this function, it is from the old system | |||||
| * | |||||
| * select zero or more nodes | |||||
| * @param {Number[] | String[]} selection An array with the ids of the | |||||
| * selected nodes. | |||||
| */ | |||||
| setSelection : function(selection) { | |||||
| var i, iMax, id; | |||||
| if (!selection || (selection.length == undefined)) | |||||
| throw 'Selection must be an array with ids'; | |||||
| // first unselect any selected node | |||||
| for (i = 0, iMax = this.selection.length; i < iMax; i++) { | |||||
| id = this.selection[i]; | |||||
| this.nodes[id].unselect(); | |||||
| } | |||||
| this.selection = []; | |||||
| for (i = 0, iMax = selection.length; i < iMax; i++) { | |||||
| id = selection[i]; | |||||
| var node = this.nodes[id]; | |||||
| if (!node) { | |||||
| throw new RangeError('Node with id "' + id + '" not found'); | |||||
| } | |||||
| node.select(); | |||||
| this.selection.push(id); | |||||
| } | |||||
| this.redraw(); | |||||
| }, | |||||
| /** | |||||
| * TODO: rework this function, it is from the old system | |||||
| * | |||||
| * Validate the selection: remove ids of nodes which no longer exist | |||||
| * @private | |||||
| */ | |||||
| _updateSelection : function () { | |||||
| var i = 0; | |||||
| while (i < this.selection.length) { | |||||
| var nodeId = this.selection[i]; | |||||
| if (!this.nodes.hasOwnProperty(nodeId)) { | |||||
| this.selection.splice(i, 1); | |||||
| delete this.selectionObj[nodeId]; | |||||
| } | |||||
| else { | |||||
| i++; | |||||
| } | |||||
| } | |||||
| } | |||||
| /** | |||||
| * Unselect selected nodes. If no selection array is provided, all nodes | |||||
| * are unselected | |||||
| * @param {Object[]} selection Array with selection objects, each selection | |||||
| * object has a parameter row. Optional | |||||
| * @param {Boolean} triggerSelect If true (default), the select event | |||||
| * is triggered when nodes are unselected | |||||
| * @return {Boolean} changed True if the selection is changed | |||||
| * @private | |||||
| */ | |||||
| /* _unselectNodes : function(selection, triggerSelect) { | |||||
| var changed = false; | |||||
| var i, iMax, id; | |||||
| if (selection) { | |||||
| // remove provided selections | |||||
| for (i = 0, iMax = selection.length; i < iMax; i++) { | |||||
| id = selection[i]; | |||||
| if (this.nodes.hasOwnProperty(id)) { | |||||
| this.nodes[id].unselect(); | |||||
| } | |||||
| var j = 0; | |||||
| while (j < this.selection.length) { | |||||
| if (this.selection[j] == id) { | |||||
| this.selection.splice(j, 1); | |||||
| changed = true; | |||||
| } | |||||
| else { | |||||
| j++; | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| else if (this.selection && this.selection.length) { | |||||
| // remove all selections | |||||
| for (i = 0, iMax = this.selection.length; i < iMax; i++) { | |||||
| id = this.selection[i]; | |||||
| if (this.nodes.hasOwnProperty(id)) { | |||||
| this.nodes[id].unselect(); | |||||
| } | |||||
| changed = true; | |||||
| } | |||||
| this.selection = []; | |||||
| } | |||||
| if (changed && (triggerSelect == true || triggerSelect == undefined)) { | |||||
| // fire the select event | |||||
| this._trigger('select'); | |||||
| } | |||||
| return changed; | |||||
| }, | |||||
| */ | |||||
| /** | |||||
| * select all nodes on given location x, y | |||||
| * @param {Array} selection an array with node ids | |||||
| * @param {boolean} append If true, the new selection will be appended to the | |||||
| * current selection (except for duplicate entries) | |||||
| * @return {Boolean} changed True if the selection is changed | |||||
| * @private | |||||
| */ | |||||
| /* _selectNodes : function(selection, append) { | |||||
| var changed = false; | |||||
| var i, iMax; | |||||
| // TODO: the selectNodes method is a little messy, rework this | |||||
| // check if the current selection equals the desired selection | |||||
| var selectionAlreadyThere = true; | |||||
| if (selection.length != this.selection.length) { | |||||
| selectionAlreadyThere = false; | |||||
| } | |||||
| else { | |||||
| for (i = 0, iMax = Math.min(selection.length, this.selection.length); i < iMax; i++) { | |||||
| if (selection[i] != this.selection[i]) { | |||||
| selectionAlreadyThere = false; | |||||
| break; | |||||
| } | |||||
| } | |||||
| } | |||||
| if (selectionAlreadyThere) { | |||||
| return changed; | |||||
| } | |||||
| if (append == undefined || append == false) { | |||||
| // first deselect any selected node | |||||
| var triggerSelect = false; | |||||
| changed = this._unselectNodes(undefined, triggerSelect); | |||||
| } | |||||
| for (i = 0, iMax = selection.length; i < iMax; i++) { | |||||
| // add each of the new selections, but only when they are not duplicate | |||||
| var id = selection[i]; | |||||
| var isDuplicate = (this.selection.indexOf(id) != -1); | |||||
| if (!isDuplicate) { | |||||
| this.nodes[id].select(); | |||||
| this.selection.push(id); | |||||
| changed = true; | |||||
| } | |||||
| } | |||||
| if (changed) { | |||||
| // fire the select event | |||||
| this._trigger('select'); | |||||
| } | |||||
| return changed; | |||||
| }, | |||||
| */ | |||||
| }; | |||||
+ 258
- 0
src/graph/UIMixin.js
View File
| @ -0,0 +1,258 @@ | |||||
| /** | |||||
| * Created by Alex on 1/22/14. | |||||
| */ | |||||
| var UIMixin = { | |||||
| /** | |||||
| * This function moves the navigationUI if the canvas size has been changed. If the arugments | |||||
| * verticaAlignTop and horizontalAlignLeft are false, the correction will be made | |||||
| * | |||||
| * @private | |||||
| */ | |||||
| _relocateUI : function() { | |||||
| if (this.sectors !== undefined) { | |||||
| var xOffset = this.UIclientWidth - this.frame.canvas.clientWidth; | |||||
| var yOffset = this.UIclientHeight - this.frame.canvas.clientHeight; | |||||
| this.UIclientWidth = this.frame.canvas.clientWidth; | |||||
| this.UIclientHeight = this.frame.canvas.clientHeight; | |||||
| var node = null; | |||||
| for (var nodeId in this.sectors["navigationUI"]["nodes"]) { | |||||
| if (this.sectors["navigationUI"]["nodes"].hasOwnProperty(nodeId)) { | |||||
| node = this.sectors["navigationUI"]["nodes"][nodeId]; | |||||
| if (!node.horizontalAlignLeft) { | |||||
| node.x -= xOffset; | |||||
| } | |||||
| if (!node.verticalAlignTop) { | |||||
| node.y -= yOffset; | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| }, | |||||
| /** | |||||
| * Creation of the navigationUI nodes. They are drawn over the rest of the nodes and are not affected by scale and translation | |||||
| * they have a triggerFunction which is called on click. If the position of the navigationUI is dependent | |||||
| * on this.frame.canvas.clientWidth or this.frame.canvas.clientHeight, we flag horizontalAlignLeft and verticalAlignTop false. | |||||
| * This means that the location will be corrected by the _relocateUI function on a size change of the canvas. | |||||
| * | |||||
| * @private | |||||
| */ | |||||
| _loadUIElements : function() { | |||||
| var DIR = this.constants.navigationUI.iconPath; | |||||
| this.UIclientWidth = this.frame.canvas.clientWidth; | |||||
| this.UIclientHeight = this.frame.canvas.clientHeight; | |||||
| if (this.UIclientWidth === undefined) { | |||||
| this.UIclientWidth = 0; | |||||
| this.UIclientHeight = 0; | |||||
| } | |||||
| var offset = 15; | |||||
| var intermediateOffset = 7; | |||||
| var UINodes = [ | |||||
| {id: 'UI_up', shape: 'image', image: DIR + 'uparrow.png', triggerFunction: "_moveUp", | |||||
| verticalAlignTop: false, x: 45 + offset + intermediateOffset, y: this.UIclientHeight - 45 - offset - intermediateOffset}, | |||||
| {id: 'UI_down', shape: 'image', image: DIR + 'downarrow.png', triggerFunction: "_moveDown", | |||||
| verticalAlignTop: false, x: 45 + offset + intermediateOffset, y: this.UIclientHeight - 15 - offset}, | |||||
| {id: 'UI_left', shape: 'image', image: DIR + 'leftarrow.png', triggerFunction: "_moveLeft", | |||||
| verticalAlignTop: false, x: 15 + offset, y: this.UIclientHeight - 15 - offset}, | |||||
| {id: 'UI_right', shape: 'image', image: DIR + 'rightarrow.png',triggerFunction: "_moveRight", | |||||
| verticalAlignTop: false, x: 75 + offset + 2 * intermediateOffset, y: this.UIclientHeight - 15 - offset}, | |||||
| {id: 'UI_plus', shape: 'image', image: DIR + 'plus.png', triggerFunction: "_zoomIn", | |||||
| verticalAlignTop: false, horizontalAlignLeft: false, | |||||
| x: this.UIclientWidth - 45 - offset - intermediateOffset, y: this.UIclientHeight - 15 - offset}, | |||||
| {id: 'UI_min', shape: 'image', image: DIR + 'minus.png', triggerFunction: "_zoomOut", | |||||
| verticalAlignTop: false, horizontalAlignLeft: false, | |||||
| x: this.UIclientWidth - 15 - offset, y: this.UIclientHeight - 15 - offset}, | |||||
| {id: 'UI_zoomExtends', shape: 'image', image: DIR + 'zoomExtends.png', triggerFunction: "zoomToFit", | |||||
| verticalAlignTop: false, horizontalAlignLeft: false, | |||||
| x: this.UIclientWidth - 15 - offset, y: this.UIclientHeight - 45 - offset - intermediateOffset} | |||||
| ]; | |||||
| var nodeObj = null; | |||||
| for (var i = 0; i < UINodes.length; i++) { | |||||
| nodeObj = this.sectors["navigationUI"]['nodes']; | |||||
| nodeObj[UINodes[i]['id']] = new Node(UINodes[i], this.images, this.groups, this.constants); | |||||
| } | |||||
| }, | |||||
| /** | |||||
| * By setting the clustersize to be larger than 1, we use the clustering drawing method | |||||
| * to illustrate the buttons are presed. We call this highlighting. | |||||
| * | |||||
| * @param {String} elementId | |||||
| * @private | |||||
| */ | |||||
| _highlightUIElement : function(elementId) { | |||||
| if (this.sectors["navigationUI"]["nodes"].hasOwnProperty(elementId)) { | |||||
| this.sectors["navigationUI"]["nodes"][elementId].clusterSize = 2; | |||||
| } | |||||
| }, | |||||
| /** | |||||
| * Reverting back to a normal button | |||||
| * | |||||
| * @param {String} elementId | |||||
| * @private | |||||
| */ | |||||
| _unHighlightUIElement : function(elementId) { | |||||
| if (this.sectors["navigationUI"]["nodes"].hasOwnProperty(elementId)) { | |||||
| this.sectors["navigationUI"]["nodes"][elementId].clusterSize = 1; | |||||
| } | |||||
| }, | |||||
| /** | |||||
| * toggle the visibility of the navigationUI | |||||
| * | |||||
| * @private | |||||
| */ | |||||
| _toggleUI : function() { | |||||
| if (this.UIvisible === undefined) { | |||||
| this.UIvisible = false; | |||||
| } | |||||
| this.UIvisible = !this.UIvisible; | |||||
| this._redraw(); | |||||
| }, | |||||
| /** | |||||
| * un-highlight (for lack of a better term) all navigationUI elements | |||||
| * @private | |||||
| */ | |||||
| _unHighlightAll : function() { | |||||
| for (var nodeId in this.sectors['navigationUI']['nodes']) { | |||||
| this._unHighlightUIElement(nodeId); | |||||
| } | |||||
| }, | |||||
| _preventDefault : function(event) { | |||||
| if (event !== undefined) { | |||||
| if (event.preventDefault) { | |||||
| event.preventDefault(); | |||||
| } else { | |||||
| event.returnValue = false; | |||||
| } | |||||
| } | |||||
| }, | |||||
| /** | |||||
| * move the screen up | |||||
| * By using the increments, instead of adding a fixed number to the translation, we keep fluent and | |||||
| * instant movement. The onKeypress event triggers immediately, then pauses, then triggers frequently | |||||
| * To avoid this behaviour, we do the translation in the start loop. | |||||
| * | |||||
| * @private | |||||
| */ | |||||
| _moveUp : function(event) { | |||||
| this._highlightUIElement("UI_up"); | |||||
| this.yIncrement = this.constants.keyboardNavigation.yMovementSpeed; | |||||
| this.start(); // if there is no node movement, the calculation wont be done | |||||
| this._preventDefault(event); | |||||
| }, | |||||
| /** | |||||
| * move the screen down | |||||
| * @private | |||||
| */ | |||||
| _moveDown : function(event) { | |||||
| this._highlightUIElement("UI_down"); | |||||
| this.yIncrement = -this.constants.keyboardNavigation.yMovementSpeed; | |||||
| this.start(); // if there is no node movement, the calculation wont be done | |||||
| this._preventDefault(event); | |||||
| }, | |||||
| /** | |||||
| * move the screen left | |||||
| * @private | |||||
| */ | |||||
| _moveLeft : function(event) { | |||||
| this._highlightUIElement("UI_left"); | |||||
| this.xIncrement = this.constants.keyboardNavigation.xMovementSpeed; | |||||
| this.start(); // if there is no node movement, the calculation wont be done | |||||
| this._preventDefault(event); | |||||
| }, | |||||
| /** | |||||
| * move the screen right | |||||
| * @private | |||||
| */ | |||||
| _moveRight : function(event) { | |||||
| this._highlightUIElement("UI_right"); | |||||
| this.xIncrement = -this.constants.keyboardNavigation.xMovementSpeed; | |||||
| this.start(); // if there is no node movement, the calculation wont be done | |||||
| this._preventDefault(event); | |||||
| }, | |||||
| /** | |||||
| * Zoom in, using the same method as the movement. | |||||
| * @private | |||||
| */ | |||||
| _zoomIn : function(event) { | |||||
| this._highlightUIElement("UI_plus"); | |||||
| this.zoomIncrement = this.constants.keyboardNavigation.zoomMovementSpeed; | |||||
| this.start(); // if there is no node movement, the calculation wont be done | |||||
| this._preventDefault(event); | |||||
| }, | |||||
| /** | |||||
| * Zoom out | |||||
| * @private | |||||
| */ | |||||
| _zoomOut : function() { | |||||
| this._highlightUIElement("UI_min"); | |||||
| this.zoomIncrement = -this.constants.keyboardNavigation.zoomMovementSpeed; | |||||
| this.start(); // if there is no node movement, the calculation wont be done | |||||
| this._preventDefault(event); | |||||
| }, | |||||
| /** | |||||
| * Stop zooming and unhighlight the zoom controls | |||||
| * @private | |||||
| */ | |||||
| _stopZoom : function() { | |||||
| this._unHighlightUIElement("UI_plus"); | |||||
| this._unHighlightUIElement("UI_min"); | |||||
| this.zoomIncrement = 0; | |||||
| }, | |||||
| /** | |||||
| * Stop moving in the Y direction and unHighlight the up and down | |||||
| * @private | |||||
| */ | |||||
| _yStopMoving : function() { | |||||
| this._unHighlightUIElement("UI_up"); | |||||
| this._unHighlightUIElement("UI_down"); | |||||
| this.yIncrement = 0; | |||||
| }, | |||||
| /** | |||||
| * Stop moving in the X direction and unHighlight left and right. | |||||
| * @private | |||||
| */ | |||||
| _xStopMoving : function() { | |||||
| this._unHighlightUIElement("UI_left"); | |||||
| this._unHighlightUIElement("UI_right"); | |||||
| this.xIncrement = 0; | |||||
| } | |||||
| }; | |||||