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

Implemented localization for Network

v3_develop
jos 10 years ago
parent
e207d2f1a8
commit
57374b33aa
10 changed files with 2217 additions and 1660 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +1
    -0
      HISTORY.md
  2. +1030
    -747
      dist/vis.js
  3. +1
    -1
      dist/vis.min.css
  4. +907
    -866
      docs/network.html
  5. +6
    -4
      docs/timeline.html
  6. +231
    -0
      examples/network/31_localization.html
  7. +1
    -0
      examples/network/index.html
  8. +7
    -19
      lib/network/Network.js
  9. +2
    -2
      lib/network/locales.js
  10. +31
    -21
      lib/network/mixins/ManipulationMixin.js

+ 1
- 0
HISTORY.md View File

@ -15,6 +15,7 @@ http://visjs.org
- A fix in reading group properties for a node. - A fix in reading group properties for a node.
- Fixed physics solving stopping when a support node was not moving. - Fixed physics solving stopping when a support node was not moving.
- Added localization support.
### Graph2D ### Graph2D

+ 1030
- 747
dist/vis.js
File diff suppressed because it is too large
View File


+ 1
- 1
dist/vis.min.css
File diff suppressed because it is too large
View File


+ 907
- 866
docs/network.html
File diff suppressed because it is too large
View File


+ 6
- 4
docs/timeline.html View File

@ -443,14 +443,14 @@ var options = {
<td>locale</td> <td>locale</td>
<td>String</td> <td>String</td>
<td>none</td> <td>none</td>
<td>Select a locale for the Timeline. See section <a>Localization</a> for more information.</td>
<td>Select a locale for the Timeline. See section <a href="#Localization">Localization</a> for more information.</td>
</tr> </tr>
<tr> <tr>
<td>locales</td> <td>locales</td>
<td>Object</td> <td>Object</td>
<td>none</td> <td>none</td>
<td>A map with i18n locales. See section <a>Localization</a> for more information.</td>
<td>A map with i18n locales. See section <a href="#Localization">Localization</a> for more information.</td>
</tr> </tr>
<tr> <tr>
@ -1025,7 +1025,7 @@ To load a locale into the Timeline not supported by default, one can add a new l
<pre class="prettyprint lang-js">var options = { <pre class="prettyprint lang-js">var options = {
locales: { locales: {
// create a new locale
// create a new locale (text strings should be replaced with localized strings)
mylocale: { mylocale: {
current: 'current', current: 'current',
time: 'time', time: 'time',
@ -1039,7 +1039,9 @@ To load a locale into the Timeline not supported by default, one can add a new l
<h3 id="available-locales">Available locales</h3> <h3 id="available-locales">Available locales</h3>
Timeline comes with support for the following locales:
<p>
Timeline comes with support for the following locales:
</p>
<table> <table>
<tr><th>Language</th><th>Code</th></tr> <tr><th>Language</th><th>Code</th></tr>

+ 231
- 0
examples/network/31_localization.html View File

@ -0,0 +1,231 @@
<!doctype html>
<html>
<head>
<title>Network | Localization</title>
<style type="text/css">
body, select {
font: 10pt sans;
}
#mynetwork {
position:relative;
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;
}
#operation {
font-size:28px;
}
#network-popUp {
display:none;
position:absolute;
top:350px;
left:170px;
z-index:299;
width:250px;
height:120px;
background-color: #f9f9f9;
border-style:solid;
border-width:3px;
border-color: #5394ed;
padding:10px;
text-align: center;
}
</style>
<script type="text/javascript" src="../../dist/vis.js"></script>
<link type="text/css" rel="stylesheet" href="../../dist/vis.css">
<script type="text/javascript">
var nodes = null;
var edges = null;
var network = null;
function draw() {
nodes = [];
edges = [];
var connectionCount = [];
// randomly create some nodes and edges
var nodeCount = 25;
for (var i = 0; i < nodeCount; i++) {
nodes.push({
id: i,
label: String(i)
});
connectionCount[i] = 0;
// create edges in a scale-free-network 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 network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {
stabilize: false,
dataManipulation: true,
onAdd: function(data,callback) {
var span = document.getElementById('operation');
var idInput = document.getElementById('node-id');
var labelInput = document.getElementById('node-label');
var saveButton = document.getElementById('saveButton');
var cancelButton = document.getElementById('cancelButton');
var div = document.getElementById('network-popUp');
span.innerHTML = "Add Node";
idInput.value = data.id;
labelInput.value = data.label;
saveButton.onclick = saveData.bind(this,data,callback);
cancelButton.onclick = clearPopUp.bind();
div.style.display = 'block';
},
onEdit: function(data,callback) {
var span = document.getElementById('operation');
var idInput = document.getElementById('node-id');
var labelInput = document.getElementById('node-label');
var saveButton = document.getElementById('saveButton');
var cancelButton = document.getElementById('cancelButton');
var div = document.getElementById('network-popUp');
span.innerHTML = "Edit Node";
idInput.value = data.id;
labelInput.value = data.label;
saveButton.onclick = saveData.bind(this,data,callback);
cancelButton.onclick = clearPopUp.bind();
div.style.display = 'block';
},
onConnect: function(data,callback) {
if (data.from == data.to) {
var r=confirm("Do you want to connect the node to itself?");
if (r==true) {
callback(data);
}
}
else {
callback(data);
}
}
};
network = new vis.Network(container, data, options);
// add event listeners
network.on('select', function(params) {
document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes;
});
network.on("resize", function(params) {console.log(params.width,params.height)});
function clearPopUp() {
var saveButton = document.getElementById('saveButton');
var cancelButton = document.getElementById('cancelButton');
saveButton.onclick = null;
cancelButton.onclick = null;
var div = document.getElementById('network-popUp');
div.style.display = 'none';
}
function saveData(data,callback) {
var idInput = document.getElementById('node-id');
var labelInput = document.getElementById('node-label');
var div = document.getElementById('network-popUp');
data.id = idInput.value;
data.label = labelInput.value;
clearPopUp();
callback(data);
}
// update the locale when changing the select box value
var select = document.getElementById('locale');
select.onchange = function () {
network.setOptions({
locale: this.value
});
};
select.onchange();
}
</script>
</head>
<body onload="draw();">
<h2>Editing the dataset (localized)</h2>
<p style="width: 700px; font-size:14px; text-align: justify;">
This is the same example as <a href="21_data_manipulation.html">21_data_manipulation.html</a>, except that there is a select box added which allows to switch locale. The localization is only relevant to the manipulation buttons.
</p>
<p>
<label for="locale">Select a locale:</label>
<select id="locale">
<option value="en" selected>en</option>
<option value="nl">nl</option>
</select>
</p>
<div id="network-popUp">
<span id="operation">node</span> <br>
<table style="margin:auto;"><tr>
<td>id</td><td><input id="node-id" value="new value"></td>
</tr>
<tr>
<td>label</td><td><input id="node-label" value="new value"> </td>
</tr></table>
<input type="button" value="save" id="saveButton"></button>
<input type="button" value="cancel" id="cancelButton"></button>
</div>
<br />
<div id="mynetwork"></div>
<p id="selection"></p>
</body>
</html>

+ 1
- 0
examples/network/index.html View File

@ -42,6 +42,7 @@
<p><a href="28_world_cup_network_performance.html">28_world_cup_network_performance.html</a></p> <p><a href="28_world_cup_network_performance.html">28_world_cup_network_performance.html</a></p>
<p><a href="29_neighbourhood_highlight.html">29_neighbourhood_highlight.html</a></p> <p><a href="29_neighbourhood_highlight.html">29_neighbourhood_highlight.html</a></p>
<p><a href="30_importing_from_gephi.html">30_importing_from_gephi.html</a></p> <p><a href="30_importing_from_gephi.html">30_importing_from_gephi.html</a></p>
<p><a href="31_localization.html">31_localization.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>

+ 7
- 19
lib/network/Network.js View File

@ -13,6 +13,7 @@ var Node = require('./Node');
var Edge = require('./Edge'); var Edge = require('./Edge');
var Popup = require('./Popup'); var Popup = require('./Popup');
var MixinLoader = require('./mixins/MixinLoader'); var MixinLoader = require('./mixins/MixinLoader');
var locales = require('./locales');
// Load custom shapes into CanvasRenderingContext2D // Load custom shapes into CanvasRenderingContext2D
require('./shapes'); require('./shapes');
@ -188,25 +189,8 @@ function Network (container, data, options) {
minVelocity: 0.1, // px/s minVelocity: 0.1, // px/s
stabilize: true, // stabilize before displaying the network stabilize: true, // stabilize before displaying the network
stabilizationIterations: 1000, // maximum number of iteration to stabilize stabilizationIterations: 1000, // maximum number of iteration to stabilize
labels:{
add:"Add Node",
edit:"Edit",
link:"Add Link",
del:"Delete selected",
editNode:"Edit Node",
editEdge:"Edit Edge",
back:"Back",
addDescription:"Click in an empty space to place a new node.",
linkDescription:"Click on a node and drag the edge to another node to connect them.",
editEdgeDescription:"Click on the control points and drag them to a node to connect to it.",
addError:"The function for add does not support two arguments (data,callback).",
linkError:"The function for connect does not support two arguments (data,callback).",
editError:"The function for edit does not support two arguments (data, callback).",
editBoundError:"No edit function has been bound to this button.",
deleteError:"The function for delete does not support two arguments (data, callback).",
createEdgeError:"Cannot link edges to a cluster.",
deleteClusterError:"Clusters cannot be deleted."
},
locale: 'en',
locales: locales,
tooltip: { tooltip: {
delay: 300, delay: 300,
fontColor: 'black', fontColor: 'black',
@ -663,6 +647,10 @@ Network.prototype.setOptions = function (options) {
this.constants.tooltip.color = util.parseColor(options.tooltip.color); this.constants.tooltip.color = util.parseColor(options.tooltip.color);
} }
} }
if (options.labels) {
throw new Error('Option "labels" is deprecated. Use options "locale" and "locales" instead.');
}
} }
// (Re)loading the mixins that can be enabled or disabled in the options. // (Re)loading the mixins that can be enabled or disabled in the options.

+ 2
- 2
lib/network/locales.js View File

@ -10,8 +10,8 @@ exports['en'] = {
addDescription: 'Click in an empty space to place a new node.', addDescription: 'Click in an empty space to place a new node.',
linkDescription: 'Click on a node and drag the edge to another node to connect them.', linkDescription: 'Click on a node and drag the edge to another node to connect them.',
editEdgeDescription: 'Click on the control points and drag them to a node to connect to it.', editEdgeDescription: 'Click on the control points and drag them to a node to connect to it.',
createEdgeError:"Cannot link edges to a cluster.",
deleteClusterError:"Clusters cannot be deleted."
createEdgeError: 'Cannot link edges to a cluster.',
deleteClusterError: 'Clusters cannot be deleted.'
}; };
exports['en_EN'] = exports['en']; exports['en_EN'] = exports['en'];
exports['en_US'] = exports['en']; exports['en_US'] = exports['en'];

+ 31
- 21
lib/network/mixins/ManipulationMixin.js View File

@ -64,6 +64,8 @@ exports._createManipulatorBar = function() {
this.off('select', this.boundFunction); this.off('select', this.boundFunction);
} }
var locale = this.constants.locales[this.constants.locale];
if (this.edgeBeingEdited !== undefined) { if (this.edgeBeingEdited !== undefined) {
this.edgeBeingEdited._disableControlNodes(); this.edgeBeingEdited._disableControlNodes();
this.edgeBeingEdited = undefined; this.edgeBeingEdited = undefined;
@ -85,30 +87,31 @@ exports._createManipulatorBar = function() {
while (this.manipulationDiv.hasChildNodes()) { while (this.manipulationDiv.hasChildNodes()) {
this.manipulationDiv.removeChild(this.manipulationDiv.firstChild); this.manipulationDiv.removeChild(this.manipulationDiv.firstChild);
} }
// add the icons to the manipulator div // add the icons to the manipulator div
this.manipulationDiv.innerHTML = "" + this.manipulationDiv.innerHTML = "" +
"<span class='network-manipulationUI add' id='network-manipulate-addNode'>" + "<span class='network-manipulationUI add' id='network-manipulate-addNode'>" +
"<span class='network-manipulationLabel'>"+this.constants.labels['add'] +"</span></span>" +
"<span class='network-manipulationLabel'>"+locale['add'] +"</span></span>" +
"<div class='network-seperatorLine'></div>" + "<div class='network-seperatorLine'></div>" +
"<span class='network-manipulationUI connect' id='network-manipulate-connectNode'>" + "<span class='network-manipulationUI connect' id='network-manipulate-connectNode'>" +
"<span class='network-manipulationLabel'>"+this.constants.labels['link'] +"</span></span>";
"<span class='network-manipulationLabel'>"+locale['link'] +"</span></span>";
if (this._getSelectedNodeCount() == 1 && this.triggerFunctions.edit) { if (this._getSelectedNodeCount() == 1 && this.triggerFunctions.edit) {
this.manipulationDiv.innerHTML += "" + this.manipulationDiv.innerHTML += "" +
"<div class='network-seperatorLine'></div>" + "<div class='network-seperatorLine'></div>" +
"<span class='network-manipulationUI edit' id='network-manipulate-editNode'>" + "<span class='network-manipulationUI edit' id='network-manipulate-editNode'>" +
"<span class='network-manipulationLabel'>"+this.constants.labels['editNode'] +"</span></span>";
"<span class='network-manipulationLabel'>"+locale['editNode'] +"</span></span>";
} }
else if (this._getSelectedEdgeCount() == 1 && this._getSelectedNodeCount() == 0) { else if (this._getSelectedEdgeCount() == 1 && this._getSelectedNodeCount() == 0) {
this.manipulationDiv.innerHTML += "" + this.manipulationDiv.innerHTML += "" +
"<div class='network-seperatorLine'></div>" + "<div class='network-seperatorLine'></div>" +
"<span class='network-manipulationUI edit' id='network-manipulate-editEdge'>" + "<span class='network-manipulationUI edit' id='network-manipulate-editEdge'>" +
"<span class='network-manipulationLabel'>"+this.constants.labels['editEdge'] +"</span></span>";
"<span class='network-manipulationLabel'>"+locale['editEdge'] +"</span></span>";
} }
if (this._selectionIsEmpty() == false) { if (this._selectionIsEmpty() == false) {
this.manipulationDiv.innerHTML += "" + this.manipulationDiv.innerHTML += "" +
"<div class='network-seperatorLine'></div>" + "<div class='network-seperatorLine'></div>" +
"<span class='network-manipulationUI delete' id='network-manipulate-delete'>" + "<span class='network-manipulationUI delete' id='network-manipulate-delete'>" +
"<span class='network-manipulationLabel'>"+this.constants.labels['del'] +"</span></span>";
"<span class='network-manipulationLabel'>"+locale['del'] +"</span></span>";
} }
@ -138,7 +141,7 @@ exports._createManipulatorBar = function() {
else { else {
this.editModeDiv.innerHTML = "" + this.editModeDiv.innerHTML = "" +
"<span class='network-manipulationUI edit editmode' id='network-manipulate-editModeButton'>" + "<span class='network-manipulationUI edit editmode' id='network-manipulate-editModeButton'>" +
"<span class='network-manipulationLabel'>" + this.constants.labels['edit'] + "</span></span>";
"<span class='network-manipulationLabel'>" + locale['edit'] + "</span></span>";
var editModeButton = document.getElementById("network-manipulate-editModeButton"); var editModeButton = document.getElementById("network-manipulate-editModeButton");
editModeButton.onclick = this._toggleEditMode.bind(this); editModeButton.onclick = this._toggleEditMode.bind(this);
} }
@ -158,13 +161,15 @@ exports._createAddNodeToolbar = function() {
this.off('select', this.boundFunction); this.off('select', this.boundFunction);
} }
var locale = this.constants.locales[this.constants.locale];
// create the toolbar contents // create the toolbar contents
this.manipulationDiv.innerHTML = "" + this.manipulationDiv.innerHTML = "" +
"<span class='network-manipulationUI back' id='network-manipulate-back'>" + "<span class='network-manipulationUI back' id='network-manipulate-back'>" +
"<span class='network-manipulationLabel'>" + this.constants.labels['back'] + " </span></span>" +
"<span class='network-manipulationLabel'>" + locale['back'] + " </span></span>" +
"<div class='network-seperatorLine'></div>" + "<div class='network-seperatorLine'></div>" +
"<span class='network-manipulationUI none' id='network-manipulate-back'>" + "<span class='network-manipulationUI none' id='network-manipulate-back'>" +
"<span id='network-manipulatorLabel' class='network-manipulationLabel'>" + this.constants.labels['addDescription'] + "</span></span>";
"<span id='network-manipulatorLabel' class='network-manipulationLabel'>" + locale['addDescription'] + "</span></span>";
// bind the icon // bind the icon
var backButton = document.getElementById("network-manipulate-back"); var backButton = document.getElementById("network-manipulate-back");
@ -187,6 +192,8 @@ exports._createAddEdgeToolbar = function() {
this._unselectAll(true); this._unselectAll(true);
this.freezeSimulation = true; this.freezeSimulation = true;
var locale = this.constants.locales[this.constants.locale];
if (this.boundFunction) { if (this.boundFunction) {
this.off('select', this.boundFunction); this.off('select', this.boundFunction);
} }
@ -197,10 +204,10 @@ exports._createAddEdgeToolbar = function() {
this.manipulationDiv.innerHTML = "" + this.manipulationDiv.innerHTML = "" +
"<span class='network-manipulationUI back' id='network-manipulate-back'>" + "<span class='network-manipulationUI back' id='network-manipulate-back'>" +
"<span class='network-manipulationLabel'>" + this.constants.labels['back'] + " </span></span>" +
"<span class='network-manipulationLabel'>" + locale['back'] + " </span></span>" +
"<div class='network-seperatorLine'></div>" + "<div class='network-seperatorLine'></div>" +
"<span class='network-manipulationUI none' id='network-manipulate-back'>" + "<span class='network-manipulationUI none' id='network-manipulate-back'>" +
"<span id='network-manipulatorLabel' class='network-manipulationLabel'>" + this.constants.labels['linkDescription'] + "</span></span>";
"<span id='network-manipulatorLabel' class='network-manipulationLabel'>" + locale['linkDescription'] + "</span></span>";
// bind the icon // bind the icon
var backButton = document.getElementById("network-manipulate-back"); var backButton = document.getElementById("network-manipulate-back");
@ -237,12 +244,14 @@ exports._createEditEdgeToolbar = function() {
this.edgeBeingEdited = this._getSelectedEdge(); this.edgeBeingEdited = this._getSelectedEdge();
this.edgeBeingEdited._enableControlNodes(); this.edgeBeingEdited._enableControlNodes();
var locale = this.constants.locales[this.constants.locale];
this.manipulationDiv.innerHTML = "" + this.manipulationDiv.innerHTML = "" +
"<span class='network-manipulationUI back' id='network-manipulate-back'>" + "<span class='network-manipulationUI back' id='network-manipulate-back'>" +
"<span class='network-manipulationLabel'>" + this.constants.labels['back'] + " </span></span>" +
"<span class='network-manipulationLabel'>" + locale['back'] + " </span></span>" +
"<div class='network-seperatorLine'></div>" + "<div class='network-seperatorLine'></div>" +
"<span class='network-manipulationUI none' id='network-manipulate-back'>" + "<span class='network-manipulationUI none' id='network-manipulate-back'>" +
"<span id='network-manipulatorLabel' class='network-manipulationLabel'>" + this.constants.labels['editEdgeDescription'] + "</span></span>";
"<span id='network-manipulatorLabel' class='network-manipulationLabel'>" + locale['editEdgeDescription'] + "</span></span>";
// bind the icon // bind the icon
var backButton = document.getElementById("network-manipulate-back"); var backButton = document.getElementById("network-manipulate-back");
@ -328,9 +337,10 @@ exports._releaseControlNode = function(pointer) {
exports._handleConnect = function(pointer) { exports._handleConnect = function(pointer) {
if (this._getSelectedNodeCount() == 0) { if (this._getSelectedNodeCount() == 0) {
var node = this._getNodeAt(pointer); var node = this._getNodeAt(pointer);
if (node != null) { if (node != null) {
if (node.clusterSize > 1) { if (node.clusterSize > 1) {
alert(this.constants.labels["createEdgeError"])
alert(this.constants.locales[this.constants.locale]['createEdgeError'])
} }
else { else {
this._selectObject(node,false); this._selectObject(node,false);
@ -386,7 +396,7 @@ exports._finishConnect = function(pointer) {
var node = this._getNodeAt(pointer); var node = this._getNodeAt(pointer);
if (node != null) { if (node != null) {
if (node.clusterSize > 1) { if (node.clusterSize > 1) {
alert(this.constants.labels["createEdgeError"])
alert(this.constants.locales[this.constants.locale]["createEdgeError"])
} }
else { else {
this._createEdge(connectFromId,node.id); this._createEdge(connectFromId,node.id);
@ -416,7 +426,7 @@ exports._addNode = function() {
}); });
} }
else { else {
throw new Error(this.constants.labels['addError']);
throw new Error('The function for add does not support two arguments (data,callback)');
this._createManipulatorBar(); this._createManipulatorBar();
this.moving = true; this.moving = true;
this.start(); this.start();
@ -450,7 +460,7 @@ exports._createEdge = function(sourceNodeId,targetNodeId) {
}); });
} }
else { else {
throw new Error(this.constants.labels["linkError"]);
throw new Error('The function for connect does not support two arguments (data,callback)');
this.moving = true; this.moving = true;
this.start(); this.start();
} }
@ -481,7 +491,7 @@ exports._editEdge = function(sourceNodeId,targetNodeId) {
}); });
} }
else { else {
throw new Error(this.constants.labels["linkError"]);
throw new Error('The function for edit does not support two arguments (data, callback)');
this.moving = true; this.moving = true;
this.start(); this.start();
} }
@ -524,11 +534,11 @@ exports._editNode = function() {
}); });
} }
else { else {
throw new Error(this.constants.labels["editError"]);
throw new Error('The function for edit does not support two arguments (data, callback)');
} }
} }
else { else {
throw new Error(this.constants.labels["editBoundError"]);
throw new Error('No edit function has been bound to this button');
} }
}; };
@ -558,7 +568,7 @@ exports._deleteSelected = function() {
}); });
} }
else { else {
throw new Error(this.constants.labels["deleteError"])
throw new Error('The function for delete does not support two arguments (data, callback)')
} }
} }
else { else {
@ -570,7 +580,7 @@ exports._deleteSelected = function() {
} }
} }
else { else {
alert(this.constants.labels["deleteClusterError"]);
alert(this.constants.locales[this.constants.locale]["deleteClusterError"]);
} }
} }
}; };

Write Preview
Loading…
Cancel
Save