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

- Fixed setting font to null so the network won't crash anymore.

webworkersNetwork
Alex de Mulder 9 years ago
parent
ab88ca5299
commit
1d0db57815
5 changed files with 667 additions and 80 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +1
    -0
      HISTORY.md
  2. +9
    -3
      dist/vis.js
  3. +5
    -1
      lib/network/modules/components/Edge.js
  4. +6
    -2
      lib/network/modules/components/Node.js
  5. +646
    -74
      test/networkTest.html

+ 1
- 0
HISTORY.md View File

@ -7,6 +7,7 @@ http://visjs.org
- Fixed Phantom Edges during clustering. - Fixed Phantom Edges during clustering.
- Fixed scaling not doing anything to edges. - Fixed scaling not doing anything to edges.
- Fixed setting font to null so the network won't crash anymore.
## 2015-09-07, version 4.8.1 ## 2015-09-07, version 4.8.1

+ 9
- 3
dist/vis.js View File

@ -28584,13 +28584,16 @@ return /******/ (function(modules) { // webpackBootstrap
} }
// handle the font options // handle the font options
if (newOptions.font !== undefined) {
if (newOptions.font !== undefined && newOptions.font !== null) {
_sharedLabel2['default'].parseOptions(parentOptions.font, newOptions); _sharedLabel2['default'].parseOptions(parentOptions.font, newOptions);
} else if (allowDeletion === true && newOptions.font === null) {
parentOptions.font = undefined;
delete parentOptions.font;
} }
// handle the scaling options, specifically the label part // handle the scaling options, specifically the label part
if (newOptions.scaling !== undefined) { if (newOptions.scaling !== undefined) {
util.mergeOptions(parentOptions.scaling, newOptions.scaling, 'label');
util.mergeOptions(parentOptions.scaling, newOptions.scaling, 'label', allowDeletion);
} }
} }
}]); }]);
@ -31458,8 +31461,11 @@ return /******/ (function(modules) { // webpackBootstrap
} }
// handle the font settings // handle the font settings
if (newOptions.font !== undefined) {
if (newOptions.font !== undefined && newOptions.font !== null) {
_sharedLabel2['default'].parseOptions(parentOptions.font, newOptions); _sharedLabel2['default'].parseOptions(parentOptions.font, newOptions);
} else if (allowDeletion === true && newOptions.font === null) {
parentOptions.font = undefined;
delete parentOptions.font;
} }
} }
}]); }]);

+ 5
- 1
lib/network/modules/components/Edge.js View File

@ -187,9 +187,13 @@ class Edge {
} }
// handle the font settings // handle the font settings
if (newOptions.font !== undefined) {
if (newOptions.font !== undefined && newOptions.font !== null) {
Label.parseOptions(parentOptions.font, newOptions); Label.parseOptions(parentOptions.font, newOptions);
} }
else if (allowDeletion === true && newOptions.font === null) {
parentOptions.font = undefined;
delete parentOptions.font;
}
} }

+ 6
- 2
lib/network/modules/components/Node.js View File

@ -203,13 +203,17 @@ class Node {
} }
// handle the font options // handle the font options
if (newOptions.font !== undefined) {
if (newOptions.font !== undefined && newOptions.font !== null) {
Label.parseOptions(parentOptions.font, newOptions); Label.parseOptions(parentOptions.font, newOptions);
} }
else if (allowDeletion === true && newOptions.font === null) {
parentOptions.font = undefined;
delete parentOptions.font;
}
// handle the scaling options, specifically the label part // handle the scaling options, specifically the label part
if (newOptions.scaling !== undefined) { if (newOptions.scaling !== undefined) {
util.mergeOptions(parentOptions.scaling, newOptions.scaling, 'label');
util.mergeOptions(parentOptions.scaling, newOptions.scaling, 'label', allowDeletion);
} }
} }

+ 646
- 74
test/networkTest.html View File

@ -1,89 +1,661 @@
<!doctype html>
<!DOCTYPE HTML>
<html> <html>
<head> <head>
<title>Vis Popup Example</title>
<script src="../dist/vis.js"></script>
<link href="http://visjs.org/dist/vis.css" rel="stylesheet" type="text/css" />
<style type="text/css"> <style type="text/css">
body {
font: 10pt sans;
.graph {
width: 600px;
height: 500px;
} </style>
</head>
<body>
Reset causes crash
<pre>
When you press the button, the nodes dataset will receive an update which shall reset the font and color properties, instead, vis crashes :(
(The browser console shows the details)
</pre>
<button onclick="javascript:action()">Click me!</button>
<div class="graph" id="visualization1"></div>
<script type="text/javascript">
var action = function() {
nodes.update([
{
"id": "35b99ac8-aa07-4834-b508-6e9435f573cb",
"label": "Adam",
"x": -96,
"y": -382,
"fixed": {
"x": true,
"y": true
},
"color": null,
"font": null
},
{
"id": "38d37e10-3c8b-487c-9757-1061d2bbbd07",
"label": "Betsy",
"x": -19,
"y": -548,
"fixed": {
"x": true,
"y": true
},
"color": null,
"font": null
},
{
"id": "4762501a-6bcb-4d35-acfd-f2e9d6310389",
"label": "Carol",
"x": -243,
"y": -378,
"fixed": {
"x": true,
"y": true
},
"color": null,
"font": null
},
{
"id": "7e17b617-b7a4-4f70-937b-f45ec8dc0a9d",
"label": "Catherine",
"x": -551,
"y": -214,
"fixed": {
"x": true,
"y": true
},
"color": null,
"font": null
},
{
"id": "e017a09b-4526-4b4d-b097-f70e56f20ab4",
"label": "Craig",
"x": 155,
"y": -381,
"fixed": {
"x": true,
"y": true
},
"color": null,
"font": null
},
{
"id": "8ec7f3ee-35f9-4c56-a57b-12d91c0c372e",
"label": "George",
"x": -302,
"y": -536,
"fixed": {
"x": true,
"y": true
},
"color": null,
"font": null
},
{
"id": "8d2a0469-bb6a-4e40-ab1f-3d5edc620415",
"label": "Jessica",
"x": -4,
"y": -379,
"fixed": {
"x": true,
"y": true
},
"color": null,
"font": null
},
{
"id": "afd75e95-e45a-4dea-848a-e16ca735bc57",
"label": "John",
"x": -531,
"y": -543,
"fixed": {
"x": true,
"y": true
},
"color": null,
"font": null
},
{
"id": "9c050064-d805-48b3-80a6-181d3599daff",
"label": "Mary",
"x": -280,
"y": -210,
"fixed": {
"x": true,
"y": true
},
"color": null,
"font": null
},
{
"id": "f24ab062-62a1-4555-a57f-dfcd597c3515",
"label": "Michael",
"x": -98,
"y": -211,
"fixed": {
"x": true,
"y": true
},
"color": null,
"font": null
},
{
"id": "59d10b18-1c9e-4dcb-ba4f-988ebd7a3efb",
"label": "Michelle",
"x": -630,
"y": -387,
"fixed": {
"x": true,
"y": true
},
"color": null,
"font": null
},
{
"id": "b11149a2-9050-4632-b095-d9d233319b91",
"label": "Robert",
"x": -360,
"y": -380,
"fixed": {
"x": true,
"y": true
},
"color": null,
"font": null
},
{
"id": "a1485262-99fe-4b1e-a246-cc70fbb1859a",
"label": "Sharon",
"x": -532,
"y": -384,
"fixed": {
"x": true,
"y": true
},
"color": null,
"font": null
}
]);
}
var nodes = new vis.DataSet([
{
"id": "35b99ac8-aa07-4834-b508-6e9435f573cb",
"label": "Adam",
"color": {
"background": "rgba(252,245,170,1)",
"border": "rgba(183,148,134,1)"
},
"x": -96,
"y": -382,
"fixed": {
"x": true,
"y": true
},
"font": {
"color": "#000000"
}
},
{
"id": "38d37e10-3c8b-487c-9757-1061d2bbbd07",
"label": "Betsy",
"color": {
"background": "rgba(252,245,170,1)",
"border": "rgba(183,148,134,1)"
},
"x": -19,
"y": -548,
"fixed": {
"x": true,
"y": true
},
"font": {
"color": "#000000"
}
},
{
"id": "4762501a-6bcb-4d35-acfd-f2e9d6310389",
"label": "Carol",
"color": {
"background": "rgba(252,245,170,1)",
"border": "rgba(183,148,134,1)"
},
"x": -243,
"y": -378,
"fixed": {
"x": true,
"y": true
},
"font": {
"color": "#000000"
}
},
{
"id": "7e17b617-b7a4-4f70-937b-f45ec8dc0a9d",
"label": "Catherine",
"color": {
"background": "rgba(252,245,170,1)",
"border": "rgba(183,148,134,1)"
},
"x": -551,
"y": -214,
"fixed": {
"x": true,
"y": true
},
"font": {
"color": "#000000"
}
},
{
"id": "e017a09b-4526-4b4d-b097-f70e56f20ab4",
"label": "Craig",
"color": {
"background": "rgba(252,245,170,1)",
"border": "rgba(183,148,134,1)"
},
"x": 155,
"y": -381,
"fixed": {
"x": true,
"y": true
},
"font": {
"color": "#000000"
}
},
{
"id": "8ec7f3ee-35f9-4c56-a57b-12d91c0c372e",
"label": "George",
"color": {
"background": "rgba(252,245,170,1)",
"border": "rgba(183,148,134,1)"
},
"x": -302,
"y": -536,
"fixed": {
"x": true,
"y": true
},
"font": {
"color": "#000000"
}
},
{
"id": "8d2a0469-bb6a-4e40-ab1f-3d5edc620415",
"label": "Jessica",
"color": {
"background": "rgba(252,245,170,1)",
"border": "rgba(183,148,134,1)"
},
"x": -4,
"y": -379,
"fixed": {
"x": true,
"y": true
},
"font": {
"color": "#000000"
}
},
{
"id": "afd75e95-e45a-4dea-848a-e16ca735bc57",
"label": "John",
"color": {
"background": "rgba(252,245,170,1)",
"border": "rgba(183,148,134,1)"
},
"x": -531,
"y": -543,
"fixed": {
"x": true,
"y": true
},
"font": {
"color": "#000000"
}
},
{
"id": "9c050064-d805-48b3-80a6-181d3599daff",
"label": "Mary",
"color": {
"background": "rgba(252,245,170,1)",
"border": "rgba(183,148,134,1)"
},
"x": -280,
"y": -210,
"fixed": {
"x": true,
"y": true
},
"font": {
"color": "#000000"
}
},
{
"id": "f24ab062-62a1-4555-a57f-dfcd597c3515",
"label": "Michael",
"color": {
"background": "rgba(252,245,170,1)",
"border": "rgba(183,148,134,1)"
},
"x": -98,
"y": -211,
"fixed": {
"x": true,
"y": true
},
"font": {
"color": "#000000"
}
},
{
"id": "59d10b18-1c9e-4dcb-ba4f-988ebd7a3efb",
"label": "Michelle",
"color": {
"background": "rgba(252,245,170,1)",
"border": "rgba(183,148,134,1)"
},
"x": -630,
"y": -387,
"fixed": {
"x": true,
"y": true
},
"font": {
"color": "#000000"
}
},
{
"id": "b11149a2-9050-4632-b095-d9d233319b91",
"label": "Robert",
"color": {
"background": "rgba(252,245,170,1)",
"border": "rgba(183,148,134,1)"
},
"x": -360,
"y": -380,
"fixed": {
"x": true,
"y": true
},
"font": {
"color": "#000000"
}
},
{
"id": "a1485262-99fe-4b1e-a246-cc70fbb1859a",
"label": "Sharon",
"color": {
"background": "rgba(252,245,170,1)",
"border": "rgba(183,148,134,1)"
},
"x": -532,
"y": -384,
"fixed": {
"x": true,
"y": true
},
"font": {
"color": "#000000"
}
} }
]);
#mynetwork {
width: 600px;
height: 600px;
border: 1px solid lightgray;
var edges = new vis.DataSet([
{
"id": "62b28c2f-c6dc-4b6b-b108-722eb47d5972",
"from": "35b99ac8-aa07-4834-b508-6e9435f573cb",
"to": "f24ab062-62a1-4555-a57f-dfcd597c3515",
"type": "family:father of",
"label": "father of",
"color": "#bc960d",
"labelAlignment": "line-above"
},
{
"id": "4ae8de41-ef1a-400a-b51b-05662ce24597",
"from": "38d37e10-3c8b-487c-9757-1061d2bbbd07",
"to": "e017a09b-4526-4b4d-b097-f70e56f20ab4",
"type": "family:mother of",
"label": "mother of",
"color": "#eec75b",
"labelAlignment": "line-above"
},
{
"id": "70f6e36a-ce9a-47b4-97e1-14b2df17d204",
"from": "38d37e10-3c8b-487c-9757-1061d2bbbd07",
"to": "8d2a0469-bb6a-4e40-ab1f-3d5edc620415",
"type": "family:mother of",
"label": "mother of",
"color": "#eec75b",
"labelAlignment": "line-above"
},
{
"id": "c32a86ce-ab9a-49b6-a202-e93a37265fda",
"from": "38d37e10-3c8b-487c-9757-1061d2bbbd07",
"to": "b11149a2-9050-4632-b095-d9d233319b91",
"type": "family:mother of",
"label": "mother of",
"color": "#eec75b",
"labelAlignment": "line-above"
},
{
"id": "bbce9cc0-0353-45cd-bfa6-a13834ff7218",
"from": "4762501a-6bcb-4d35-acfd-f2e9d6310389",
"to": "f24ab062-62a1-4555-a57f-dfcd597c3515",
"type": "family:mother of",
"label": "mother of",
"color": "#eec75b",
"labelAlignment": "line-above"
},
{
"id": "deb7eb05-f667-496b-aeda-205c37b2484b",
"from": "8ec7f3ee-35f9-4c56-a57b-12d91c0c372e",
"to": "afd75e95-e45a-4dea-848a-e16ca735bc57",
"type": "family:brother of",
"label": "brother of",
"color": "green",
"labelAlignment": "line-above"
},
{
"id": "3c8c7947-6c82-4f98-978a-26bbb372bfbb",
"from": "afd75e95-e45a-4dea-848a-e16ca735bc57",
"to": "a1485262-99fe-4b1e-a246-cc70fbb1859a",
"type": "family:father of",
"label": "father of",
"color": "#bc960d",
"labelAlignment": "line-above"
},
{
"id": "cd4e71e7-9735-4a42-8632-e88cc01ab64f",
"from": "f24ab062-62a1-4555-a57f-dfcd597c3515",
"to": "9c050064-d805-48b3-80a6-181d3599daff",
"type": "family:brother of",
"label": "brother of",
"color": "green",
"labelAlignment": "line-above"
},
{
"id": "b4499f60-04f9-4306-9c57-3d73b72f37c0",
"from": "59d10b18-1c9e-4dcb-ba4f-988ebd7a3efb",
"to": "7e17b617-b7a4-4f70-937b-f45ec8dc0a9d",
"type": "family:mother of",
"label": "mother of",
"color": "#eec75b",
"labelAlignment": "line-above"
},
{
"id": "16562853-b597-44f6-9c55-2ce8a1fe4f83",
"from": "b11149a2-9050-4632-b095-d9d233319b91",
"to": "7e17b617-b7a4-4f70-937b-f45ec8dc0a9d",
"type": "family:father of",
"label": "father of",
"color": "#bc960d",
"labelAlignment": "line-above"
},
{
"id": "599dd644-e61f-401e-8b17-dfdd340c125e",
"from": "b11149a2-9050-4632-b095-d9d233319b91",
"to": "9c050064-d805-48b3-80a6-181d3599daff",
"type": "family:father of",
"label": "father of",
"color": "#bc960d",
"labelAlignment": "line-above"
},
{
"id": "961f7f2b-5abe-4036-a155-aa9b30ae1260",
"from": "b11149a2-9050-4632-b095-d9d233319b91",
"to": "a1485262-99fe-4b1e-a246-cc70fbb1859a",
"type": "family:married to",
"title": "Does not need to be a christian marriage though...",
"label": "married to",
"color": "#17bba3",
"labelAlignment": "line-above"
} }
</style>
<script src="../dist/vis.js" type="text/javascript" ></script>
<link href="../dist/vis.css" rel="stylesheet" type="text/css"/>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" type="text/javascript"></script>
<script type="text/javascript">
var network = null;
var network2 = null;
function draw() {
// create an array with nodes
var nodes = [
{id: 1, label: 'Node 1'},
{id: 2, label: 'Node 2'},
{id: 3, label: 'Node 3'},
{id: 4, label: 'Node 4'},
{id: 5, label: 'Node 5'}
];
// create an array with edges
var edges = [
{from: 1, to: 2},
{from: 2, to: 3},
{from: 3, to: 4},
{from: 4, to: 5}
];
// create a network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {layout:{randomSeed:8}};
network = new vis.Network(container, data, options);
]);
setTimeout(function() {
var clusterOptionsByData = {
joinCondition:function(childOptions) {
return childOptions.id == 2 || childOptions.id == 3 || childOptions.id == 4;
},
clusterNodeProperties: {id:'cid1', label:'cid1'}
}
network.cluster(clusterOptionsByData);
},100);
setTimeout(function() {
var itemId = 'cid1';
network.openCluster([itemId]);
},300);
setTimeout(function() {
var clusterOptionsByData = {
joinCondition:function(childOptions) {
return childOptions.id == 2 || childOptions.id == 3 || childOptions.id == 4;
var data = {
nodes: nodes,
edges: edges
};
var options = {
"autoResize": true,
"height": "100%",
"width": "100%",
"interaction": {
"dragNodes":true,
"dragView": true,
"hideEdgesOnDrag": false,
"hideNodesOnDrag": false,
"hover": false,
"navigationButtons": true,
"selectable": true,
"selectConnectedEdges": true,
"tooltipDelay": 300,
"zoomView": true,
"keyboard": {
"enabled": false,
"speed": {
"x": 10,
"y": 10,
"zoom": 0.02
},
"bindToWindow": true
}
},
"nodes": {
"shape": "box",
font: {color:"#ff0000"},
"color": {
"border" : "#2B7CE9",
"background" : "#97C2FC",
"highlight": {
"border": "#2B7CE9",
"background": "#D2E5FF"
},
"hover": {
"border": "white",
"background": "white"
}
}
},
"physics": {
"barnesHut": {
"centralGravity": 0,
"springLength": 240
}
},
"groups": {
"neighbours": {
"color": "#E6E6E6"
}, },
clusterNodeProperties: {id:'cid2', label:'cid2'}
"matches": {
"color": "#97C2FC"
}
},
"locale": "en_EN"
}
;
var container = document.getElementById("visualization1");
var network = new vis.Network(container, data, options);
var hasNetworkStabilized = false;
network.on("stabilized", function(properties) {
if(!hasNetworkStabilized) {
hasNetworkStabilized = true;
network.storePositions();
setNodesMoveable(data.nodes.get(), false);
network.fit();
}
});
network.on("dragStart", function(properties) {
if(properties.nodes.length) {
var node = data.nodes.get(properties.nodes[0]);
setNodesMoveable([ node ], true);
}
});
network.on("dragEnd", function(properties) {
if(properties.nodes.length) {
var node = data.nodes.get(properties.nodes[0]);
setNodesMoveable([ node ], false);
}
});
setNodesMoveable = function(nodes, isMoveable) {
// first store positions
network.storePositions();
var updates = [];
var keys = Object.keys(nodes);
for(var i = 0; i < keys.length; i++) {
var id = nodes[keys[i]].id;
var update = {
id: id,
fixed: { // v4: formerly allowToMoveX, allowToMoveY
x: !isMoveable,
y: !isMoveable
} }
network.cluster(clusterOptionsByData);
},1000);
};
updates.push(update);
} }
</script>
</head>
<body onload="draw();">
<h2>Popup Example</h2>
data.nodes.update(updates);
console.log(updates);
};
<div id='mynetwork'></div>
</script>
</body> </body>
</html> </html>

Write Preview
Loading…
Cancel
Save