Browse Source
Merge pull request #29 from almende/alex_dev
merge alex_dev with developcss_transitions
Jos de Jong
11 years ago
41 changed files with 23210 additions and 3566 deletions
Split 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 | |||
| 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; | |||
| } | |||
| }; | |||