jrtechs
/
jrtechs-vis
mirror of https://github.com/jrtechs/vis.git
1
0
Fork 0
Code Issues 0 Releases 82 Wiki Activity
Browse Source

Renamed UI* stuff to Navigation

css_transitions
josdejong 10 years ago
parent
fa60644e57
commit
3c10c6d071
12 changed files with 258 additions and 264 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +1
    -2
      Jakefile.js
  2. +10
    -17
      docs/graph.html
  3. +1
    -1
      examples/graph/18_fully_random_nodes_clustering.html
  4. +1
    -1
      examples/graph/19_scale_free_graph_clustering.html
  5. +0
    -185
      examples/graph/20_UI_example.html
  6. +186
    -0
      examples/graph/20_navigation.html
  7. +1
    -1
      examples/graph/index.html
  8. +25
    -25
      src/graph/Graph.js
  9. +18
    -17
      src/graph/NavigationMixin.js
  10. +3
    -3
      src/graph/Node.js
  11. +5
    -5
      src/graph/SectorsMixin.js
  12. +7
    -7
      src/graph/SelectionMixin.js

+ 1
- 2
Jakefile.js View File

@ -85,10 +85,9 @@ task('build', {async: true}, function () {
'./src/graph/SectorsMixin.js', './src/graph/SectorsMixin.js',
'./src/graph/ClusterMixin.js', './src/graph/ClusterMixin.js',
'./src/graph/SelectionMixin.js', './src/graph/SelectionMixin.js',
'./src/graph/UIMixin.js',
'./src/graph/NavigationMixin.js',
'./src/graph/Graph.js', './src/graph/Graph.js',
'./src/module/exports.js' './src/module/exports.js'
], ],

+ 10
- 17
docs/graph.html View File

@ -693,7 +693,7 @@ var options = {
</tr> </tr>
<tr> <tr>
<td><a href="#Navigation_controls">navigationUI</a></td>
<td><a href="#Navigation_controls">navigation</a></td>
<td>Object</td> <td>Object</td>
<td>none</td> <td>none</td>
<td> <td>
@ -1296,17 +1296,16 @@ var options: {
</p> </p>
<pre class="prettyprint"> <pre class="prettyprint">
// These variables must be defined in an options object named navigationUI.
// If a variable is not supplied, the default value is used.
// simple use of navigation controls
var options: { var options: {
navigationUI: {
enabled: false,
iconPath: this._getIconURL() // automatic loading of the default icons
}
navigation: true
} }
// OR to just load the module with default values:
// advanced use of navigation controls
var options: { var options: {
navigationUI: true
navigation: {
iconPath: this._getIconURL() // automatic loading of the default icons
}
} }
</pre> </pre>
@ -1318,16 +1317,10 @@ var options: {
<th>Description</th> <th>Description</th>
</tr> </tr>
<tr>
<td>enabled</td>
<td>Boolean</td>
<td>false</td>
<td>On/off switch for the navigation UI elements.</td>
</tr>
<tr> <tr>
<td>iconPath</td> <td>iconPath</td>
<td>string</td> <td>string</td>
<td>[path to vis.js]/UI_icons/</td>
<td>/path/to/navigation/icons/</td>
<td>The path to the icon images can be defined here. If custom icons are used, they have to have the same filename as the ones originally packaged with vis.js.</td> <td>The path to the icon images can be defined here. If custom icons are used, they have to have the same filename as the ones originally packaged with vis.js.</td>
</tr> </tr>
</table> </table>
@ -1336,7 +1329,7 @@ var options: {
<p> <p>
The graph can be navigated using shortcut keys. The graph can be navigated using shortcut keys.
It can be configured with the following user-configurable settings. It can be configured with the following user-configurable settings.
The default state for the keyboard navigation is <b>off</b>. The predefined keys can be found in the <a href="../examples/graph/20_UI_example.html">UI example.</a>
The default state for the keyboard navigation is <b>off</b>. The predefined keys can be found in the example <a href="../examples/graph/20_navigation.html">20_navigation.html</a>.
</p> </p>
<pre class="prettyprint"> <pre class="prettyprint">

+ 1
- 1
examples/graph/18_fully_random_nodes_clustering.html View File

@ -1,7 +1,7 @@
<!doctype html> <!doctype html>
<html> <html>
<head> <head>
<title>Graph | Really Random nodes</title>
<title>Graph | Fully random nodes clustering</title>
<style type="text/css"> <style type="text/css">
body { body {

+ 1
- 1
examples/graph/19_scale_free_graph_clustering.html View File

@ -1,7 +1,7 @@
<!doctype html> <!doctype html>
<html> <html>
<head> <head>
<title>Graph | Random nodes</title>
<title>Graph | Scale free graph clustering</title>
<style type="text/css"> <style type="text/css">
body { body {

+ 0
- 185
examples/graph/20_UI_example.html View File

@ -1,185 +0,0 @@
<!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.
</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>

+ 186
- 0
examples/graph/20_navigation.html View File

@ -0,0 +1,186 @@
<!doctype html>
<html>
<head>
<title>Graph | Navigation</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>Navigation controls and keyboad navigation</h2>
<div style="width: 700px; font-size:14px;">
This example is the same as example 2, except for the navigation controls that has been activated. The navigation controls 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>
<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.
</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>

+ 1
- 1
examples/graph/index.html View File

@ -31,7 +31,7 @@
<p><a href="17_network_info.html">17_network_info.html</a></p> <p><a href="17_network_info.html">17_network_info.html</a></p>
<p><a href="18_fully_random_nodes_clustering.html">18_fully_random_nodes_clustering.html</a></p> <p><a href="18_fully_random_nodes_clustering.html">18_fully_random_nodes_clustering.html</a></p>
<p><a href="19_scale_free_graph_clustering.html">19_scale_free_graph_clustering.html</a></p> <p><a href="19_scale_free_graph_clustering.html">19_scale_free_graph_clustering.html</a></p>
<p><a href="20_UI_example.html">20_UI_example.html</a></p>
<p><a href="20_navigation.html">20_UI_example.html</a></p>
<p><a href="graphviz/graphviz_gallery.html">graphviz_gallery.html</a></p> <p><a href="graphviz/graphviz_gallery.html">graphviz_gallery.html</a></p>
</div> </div>

+ 25
- 25
src/graph/Graph.js View File

@ -86,7 +86,7 @@ function Graph (container, data, options) {
activeAreaBoxSize: 100, // (px) | box area around the curser where clusters are popped open. activeAreaBoxSize: 100, // (px) | box area around the curser where clusters are popped open.
massTransferCoefficient: 1 // (multiplier) | parent.mass += massTransferCoefficient * child.mass massTransferCoefficient: 1 // (multiplier) | parent.mass += massTransferCoefficient * child.mass
}, },
navigationUI: {
navigation: {
enabled: false, enabled: false,
iconPath: this._getIconURL() iconPath: this._getIconURL()
}, },
@ -105,7 +105,7 @@ function Graph (container, data, options) {
graph._redraw(); graph._redraw();
}); });
// navigationUI variables
// navigation variables
this.xIncrement = 0; this.xIncrement = 0;
this.yIncrement = 0; this.yIncrement = 0;
this.zoomIncrement = 0; this.zoomIncrement = 0;
@ -393,16 +393,16 @@ Graph.prototype.setOptions = function (options) {
this.constants.clustering.enabled = false; this.constants.clustering.enabled = false;
} }
if (options.navigationUI) {
this.constants.navigationUI.enabled = true;
for (var prop in options.navigationUI) {
if (options.navigationUI.hasOwnProperty(prop)) {
this.constants.navigationUI[prop] = options.navigationUI[prop];
if (options.navigation) {
this.constants.navigation.enabled = true;
for (var prop in options.navigation) {
if (options.navigation.hasOwnProperty(prop)) {
this.constants.navigation[prop] = options.navigation[prop];
} }
} }
} }
else if (options.navigationUI !== undefined) {
this.constants.navigationUI.enabled = false;
else if (options.navigation !== undefined) {
this.constants.navigation.enabled = false;
} }
if (options.keyboardNavigation) { if (options.keyboardNavigation) {
@ -482,8 +482,8 @@ Graph.prototype.setOptions = function (options) {
this._setTranslation(this.frame.clientWidth / 2, this.frame.clientHeight / 2); this._setTranslation(this.frame.clientWidth / 2, this.frame.clientHeight / 2);
this._setScale(1); this._setScale(1);
// load the navigationUI system.
this._loadUISystem();
// load the navigation system.
this._loadNavigationControls();
// bind keys. If disabled, this will not do anything; // bind keys. If disabled, this will not do anything;
this._createKeyBinds(); this._createKeyBinds();
@ -558,7 +558,7 @@ Graph.prototype._create = function () {
/** /**
* Binding the keys for keyboard navigation. These functions are defined in the UIMixin
* Binding the keys for keyboard navigation. These functions are defined in the NavigationMixin
* @private * @private
*/ */
Graph.prototype._createKeyBinds = function() { Graph.prototype._createKeyBinds = function() {
@ -1093,7 +1093,7 @@ Graph.prototype.setSize = function(width, height) {
this.frame.canvas.width = this.frame.canvas.clientWidth; this.frame.canvas.width = this.frame.canvas.clientWidth;
this.frame.canvas.height = this.frame.canvas.clientHeight; this.frame.canvas.height = this.frame.canvas.clientHeight;
if (this.constants.navigationUI.enabled == true) {
if (this.constants.navigation.enabled == true) {
this._relocateUI(); this._relocateUI();
} }
}; };
@ -1442,7 +1442,7 @@ Graph.prototype._redraw = function() {
// restore original scaling and translation // restore original scaling and translation
ctx.restore(); ctx.restore();
if (this.constants.navigationUI.enabled == true) {
if (this.constants.navigation.enabled == true) {
this._doInUISector("_drawNodes",ctx,true); this._doInUISector("_drawNodes",ctx,true);
} }
}; };
@ -1988,7 +1988,7 @@ Graph.prototype._loadSectorSystem = function() {
"formationScale": 1.0, "formationScale": 1.0,
"drawingNode": undefined}; "drawingNode": undefined};
this.sectors["frozen"] = {}; this.sectors["frozen"] = {};
this.sectors["navigationUI"] = {"nodes":{},
this.sectors["navigation"] = {"nodes":{},
"edges":{}, "edges":{},
"nodeIndices":[], "nodeIndices":[],
"formationScale": 1.0, "formationScale": 1.0,
@ -2021,34 +2021,34 @@ Graph.prototype._loadSelectionSystem = function() {
/** /**
* Mixin the navigationUI (User Interface) system and initialize the parameters required
* Mixin the navigation (User Interface) system and initialize the parameters required
* *
* @private * @private
*/ */
Graph.prototype._loadUISystem = function() {
for (var mixinFunction in UIMixin) {
if (UIMixin.hasOwnProperty(mixinFunction)) {
Graph.prototype[mixinFunction] = UIMixin[mixinFunction];
Graph.prototype._loadNavigationControls = function() {
for (var mixinFunction in NavigationMixin) {
if (NavigationMixin.hasOwnProperty(mixinFunction)) {
Graph.prototype[mixinFunction] = NavigationMixin[mixinFunction];
} }
} }
if (this.constants.navigationUI.enabled == true) {
if (this.constants.navigation.enabled == true) {
this._loadUIElements(); this._loadUIElements();
} }
} }
/** /**
* this function exists to avoid errors when not loading the navigationUI system
* this function exists to avoid errors when not loading the navigation system
*/ */
Graph.prototype._relocateUI = function() { Graph.prototype._relocateUI = function() {
// empty, is overloaded by navigationUI system
// empty, is overloaded by navigation system
} }
/** /**
* * this function exists to avoid errors when not loading the navigationUI system
* * this function exists to avoid errors when not loading the navigation system
*/ */
Graph.prototype._unHighlightAll = function() { Graph.prototype._unHighlightAll = function() {
// empty, is overloaded by the navigationUI system
// empty, is overloaded by the navigation system
} }

src/graph/UIMixin.js → src/graph/NavigationMixin.js View File

@ -2,10 +2,10 @@
* Created by Alex on 1/22/14. * Created by Alex on 1/22/14.
*/ */
var UIMixin = {
var NavigationMixin = {
/** /**
* This function moves the navigationUI if the canvas size has been changed. If the arugments
* This function moves the navigation controls if the canvas size has been changed. If the arugments
* verticaAlignTop and horizontalAlignLeft are false, the correction will be made * verticaAlignTop and horizontalAlignLeft are false, the correction will be made
* *
* @private * @private
@ -18,9 +18,9 @@ var UIMixin = {
this.UIclientHeight = this.frame.canvas.clientHeight; this.UIclientHeight = this.frame.canvas.clientHeight;
var node = null; var node = null;
for (var nodeId in this.sectors["navigationUI"]["nodes"]) {
if (this.sectors["navigationUI"]["nodes"].hasOwnProperty(nodeId)) {
node = this.sectors["navigationUI"]["nodes"][nodeId];
for (var nodeId in this.sectors["navigation"]["nodes"]) {
if (this.sectors["navigation"]["nodes"].hasOwnProperty(nodeId)) {
node = this.sectors["navigation"]["nodes"][nodeId];
if (!node.horizontalAlignLeft) { if (!node.horizontalAlignLeft) {
node.x -= xOffset; node.x -= xOffset;
} }
@ -34,15 +34,15 @@ var UIMixin = {
/** /**
* 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
* Creation of the navigation controls 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 navigation controls is dependent
* on this.frame.canvas.clientWidth or this.frame.canvas.clientHeight, we flag horizontalAlignLeft and verticalAlignTop false. * 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. * This means that the location will be corrected by the _relocateUI function on a size change of the canvas.
* *
* @private * @private
*/ */
_loadUIElements : function() { _loadUIElements : function() {
var DIR = this.constants.navigationUI.iconPath;
var DIR = this.constants.navigation.iconPath;
this.UIclientWidth = this.frame.canvas.clientWidth; this.UIclientWidth = this.frame.canvas.clientWidth;
this.UIclientHeight = this.frame.canvas.clientHeight; this.UIclientHeight = this.frame.canvas.clientHeight;
if (this.UIclientWidth === undefined) { if (this.UIclientWidth === undefined) {
@ -74,7 +74,7 @@ var UIMixin = {
var nodeObj = null; var nodeObj = null;
for (var i = 0; i < UINodes.length; i++) { for (var i = 0; i < UINodes.length; i++) {
nodeObj = this.sectors["navigationUI"]['nodes'];
nodeObj = this.sectors["navigation"]['nodes'];
nodeObj[UINodes[i]['id']] = new Node(UINodes[i], this.images, this.groups, this.constants); nodeObj[UINodes[i]['id']] = new Node(UINodes[i], this.images, this.groups, this.constants);
} }
}, },
@ -88,8 +88,8 @@ var UIMixin = {
* @private * @private
*/ */
_highlightUIElement : function(elementId) { _highlightUIElement : function(elementId) {
if (this.sectors["navigationUI"]["nodes"].hasOwnProperty(elementId)) {
this.sectors["navigationUI"]["nodes"][elementId].clusterSize = 2;
if (this.sectors["navigation"]["nodes"].hasOwnProperty(elementId)) {
this.sectors["navigation"]["nodes"][elementId].clusterSize = 2;
} }
}, },
@ -101,19 +101,20 @@ var UIMixin = {
* @private * @private
*/ */
_unHighlightUIElement : function(elementId) { _unHighlightUIElement : function(elementId) {
if (this.sectors["navigationUI"]["nodes"].hasOwnProperty(elementId)) {
this.sectors["navigationUI"]["nodes"][elementId].clusterSize = 1;
if (this.sectors["navigation"]["nodes"].hasOwnProperty(elementId)) {
this.sectors["navigation"]["nodes"][elementId].clusterSize = 1;
} }
}, },
/** /**
* un-highlight (for lack of a better term) all navigationUI elements
* un-highlight (for lack of a better term) all navigation controls elements
* @private * @private
*/ */
_unHighlightAll : function() { _unHighlightAll : function() {
for (var nodeId in this.sectors['navigationUI']['nodes']) {
this._unHighlightUIElement(nodeId);
for (var nodeId in this.sectors['navigation']['nodes']) {
if (this.sectors['navigation']['nodes'].hasOwnProperty(nodeId)) {
this._unHighlightUIElement(nodeId);
}
} }
}, },

+ 3
- 3
src/graph/Node.js View File

@ -44,8 +44,8 @@ function Node(properties, imagelist, grouplist, constants) {
this.y = 0; this.y = 0;
this.xFixed = false; this.xFixed = false;
this.yFixed = false; this.yFixed = false;
this.horizontalAlignLeft = true; // these are for the navigationUI
this.verticalAlignTop = true; // these are for the navigationUI
this.horizontalAlignLeft = true; // these are for the navigation controls
this.verticalAlignTop = true; // these are for the navigation controls
this.radius = constants.nodes.radius; this.radius = constants.nodes.radius;
this.baseRadiusValue = constants.nodes.radius; this.baseRadiusValue = constants.nodes.radius;
this.radiusFixed = false; this.radiusFixed = false;
@ -150,7 +150,7 @@ Node.prototype.setProperties = function(properties, constants) {
if (properties.y !== undefined) {this.y = properties.y;} if (properties.y !== undefined) {this.y = properties.y;}
if (properties.value !== undefined) {this.value = properties.value;} if (properties.value !== undefined) {this.value = properties.value;}
// navigationUI properties
// navigation controls properties
if (properties.horizontalAlignLeft !== undefined) {this.horizontalAlignLeft = properties.horizontalAlignLeft;} if (properties.horizontalAlignLeft !== undefined) {this.horizontalAlignLeft = properties.horizontalAlignLeft;}
if (properties.verticalAlignTop !== undefined) {this.verticalAlignTop = properties.verticalAlignTop;} if (properties.verticalAlignTop !== undefined) {this.verticalAlignTop = properties.verticalAlignTop;}
if (properties.triggerFunction !== undefined) {this.triggerFunction = properties.triggerFunction;} if (properties.triggerFunction !== undefined) {this.triggerFunction = properties.triggerFunction;}

+ 5
- 5
src/graph/SectorsMixin.js View File

@ -72,14 +72,14 @@ var SectorMixin = {
/** /**
* This function sets the global references to nodes, edges and nodeIndices to * This function sets the global references to nodes, edges and nodeIndices to
* those of the navigationUI sector.
* those of the navigation controls sector.
* *
* @private * @private
*/ */
_switchToUISector : function() { _switchToUISector : function() {
this.nodeIndices = this.sectors["navigationUI"]["nodeIndices"];
this.nodes = this.sectors["navigationUI"]["nodes"];
this.edges = this.sectors["navigationUI"]["edges"];
this.nodeIndices = this.sectors["navigation"]["nodeIndices"];
this.nodes = this.sectors["navigation"]["nodes"];
this.edges = this.sectors["navigation"]["edges"];
}, },
@ -432,7 +432,7 @@ var SectorMixin = {
/** /**
* This runs a function in the navigationUI sector.
* This runs a function in the navigation controls sector.
* *
* @param {String} runFunction | This is the NAME of a function we want to call in all active sectors * @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 * | we don't pass the function itself because then the "this" is the window object

+ 7
- 7
src/graph/SelectionMixin.js View File

@ -33,7 +33,7 @@ var SelectionMixin = {
/** /**
* retrieve all nodes in the navigationUI overlapping with given object
* retrieve all nodes in the navigation controls overlapping with given object
* @param {Object} object An object with parameters left, top, right, bottom * @param {Object} object An object with parameters left, top, right, bottom
* @return {Number[]} An array with id's of the overlapping nodes * @return {Number[]} An array with id's of the overlapping nodes
* @private * @private
@ -80,7 +80,7 @@ var SelectionMixin = {
/** /**
* Get the top navigationUI node at the a specific point (like a click)
* Get the top navigation controls node at the a specific point (like a click)
* *
* @param {{x: Number, y: Number}} pointer * @param {{x: Number, y: Number}} pointer
* @return {Node | null} node * @return {Node | null} node
@ -90,7 +90,7 @@ var SelectionMixin = {
var screenPositionObject = this._pointerToScreenPositionObject(pointer); var screenPositionObject = this._pointerToScreenPositionObject(pointer);
var overlappingNodes = this._getAllUINodesOverlappingWith(screenPositionObject); var overlappingNodes = this._getAllUINodesOverlappingWith(screenPositionObject);
if (overlappingNodes.length > 0) { if (overlappingNodes.length > 0) {
return this.sectors["navigationUI"]["nodes"][overlappingNodes[overlappingNodes.length - 1]];
return this.sectors["navigation"]["nodes"][overlappingNodes[overlappingNodes.length - 1]];
} }
else { else {
return null; return null;
@ -106,7 +106,7 @@ var SelectionMixin = {
* @private * @private
*/ */
_getNodeAt : function (pointer) { _getNodeAt : function (pointer) {
// we first check if this is an navigationUI element
// we first check if this is an navigation controls element
var positionObject = this._pointerToPositionObject(pointer); var positionObject = this._pointerToPositionObject(pointer);
overlappingNodes = this._getAllNodesOverlappingWith(positionObject); overlappingNodes = this._getAllNodesOverlappingWith(positionObject);
@ -238,7 +238,7 @@ var SelectionMixin = {
/** /**
* handles the selection part of the touch, only for navigationUI elements;
* handles the selection part of the touch, only for navigation controls elements;
* Touch is triggered before tap, also before hold. Hold triggers after a while. * Touch is triggered before tap, also before hold. Hold triggers after a while.
* This is the most responsive solution * This is the most responsive solution
* *
@ -246,7 +246,7 @@ var SelectionMixin = {
* @private * @private
*/ */
_handleTouch : function(pointer) { _handleTouch : function(pointer) {
if (this.constants.navigationUI.enabled == true) {
if (this.constants.navigation.enabled == true) {
var node = this._getUINodeAt(pointer); var node = this._getUINodeAt(pointer);
if (node != null) { if (node != null) {
if (this[node.triggerFunction] !== undefined) { if (this[node.triggerFunction] !== undefined) {
@ -308,7 +308,7 @@ var SelectionMixin = {
/** /**
* handle the onRelease event. These functions are here for the navigationUI module.
* handle the onRelease event. These functions are here for the navigation controls module.
* *
* @private * @private
*/ */

Write Preview
Loading…
Cancel
Save