You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
262 lines
9.9 KiB
262 lines
9.9 KiB
<!DOCTYPE html>
|
|
<html>
|
|
<head lang="en">
|
|
<meta charset="UTF-8">
|
|
<title></title>
|
|
|
|
<script type="text/javascript" src="../dist/vis.js"></script>
|
|
<link href="../dist/vis.css" rel="stylesheet" type="text/css"/>
|
|
|
|
<style type="text/css">
|
|
#mynetwork {
|
|
width: 600px;
|
|
height: 400px;
|
|
border: 1px solid lightgray;
|
|
}
|
|
</style>
|
|
|
|
|
|
</head>
|
|
|
|
<body>
|
|
<div id="mynetwork"></div>
|
|
|
|
<script>
|
|
var network = null;
|
|
// create an array with nodes
|
|
var nodes = new vis.DataSet([
|
|
{id: 1, label: 'Node 1', cid:1},
|
|
{id: 2, label: 'Node 2', cid:1},
|
|
{id: 3, label: 'Node 3'},
|
|
{id: 4, label: 'Node 4'},
|
|
{id: 5, label: 'Node 5'}
|
|
]);
|
|
|
|
// create an array with edges
|
|
var edges = new vis.DataSet([
|
|
{id: 'e1', from: 1, to: 3, label: 'hi'},
|
|
{from: 1, to: 2},
|
|
{from: 2, to: 4},
|
|
{from: 2, to: 5}
|
|
]);
|
|
|
|
var data = {
|
|
nodes: nodes,
|
|
edges: edges
|
|
};
|
|
var container = document.getElementById('mynetwork');
|
|
|
|
function drawQuick() {
|
|
draw({physics:{stabilization:false}});
|
|
}
|
|
|
|
function draw(options) {
|
|
try {
|
|
// clean
|
|
if (network !== null) {
|
|
network.destroy();
|
|
network = null;
|
|
}
|
|
network = new vis.Network(container, data, options);
|
|
}
|
|
catch (err) {
|
|
console.log("err")
|
|
}
|
|
}
|
|
|
|
function clusterByCid() {
|
|
drawQuick();
|
|
var clusterOptionsByData = {
|
|
joinCondition:function(childOptions) {
|
|
return childOptions.cid == 1;
|
|
},
|
|
clusterNodeProperties: {id:'cidCluster', borderWidth:3, shape:'database'}
|
|
}
|
|
network.cluster(clusterOptionsByData);
|
|
}
|
|
|
|
|
|
function clusterByConnection() {
|
|
drawQuick();
|
|
network.clusterByConnection(1)
|
|
}
|
|
function clusterByHubsize() {
|
|
drawQuick();
|
|
var clusterOptionsByData = {
|
|
processProperties: function(clusterOptions, childNodes) {
|
|
clusterOptions.label = "[" + childNodes.length + "]";
|
|
return clusterOptions;
|
|
},
|
|
clusterNodeProperties: {borderWidth:3, shape:'box', font:{size:30}}
|
|
}
|
|
network.clusterByHubsize(undefined, clusterOptionsByData);
|
|
}
|
|
|
|
function checkMethods() {
|
|
var methods = [
|
|
{name:"setSize", arguments: [200,300]},
|
|
{name:"canvasToDOM", arguments: [{x:10,y:20}]},
|
|
{name:"DOMtoCanvas", arguments: [{x:10,y:20}]},
|
|
{name:"findNode", arguments: [1]},
|
|
{name:"isCluster", arguments: [1]},
|
|
{name:"cluster", arguments: null, func: clusterByCid},
|
|
{name:"findNode", arguments: [1]},
|
|
{name:"isCluster", arguments: ['cidCluster']},
|
|
{name:"getNodesInCluster", arguments: ['cidCluster']},
|
|
{name:"openCluster", arguments: ['cidCluster']},
|
|
{name:"clusterByConnection",arguments: null, func: clusterByConnection},
|
|
{name:"clusterByHubsize", arguments: null, func: clusterByHubsize},
|
|
{name:"clusterOutliers", arguments: null, funcFirst: drawQuick},
|
|
{name:"getSeed", arguments: null, funcFirst: drawQuick},
|
|
{name:"enableEditMode", arguments: null},
|
|
{name:"disableEditMode", arguments: null},
|
|
{name:"addNodeMode", arguments: null},
|
|
{name:"disableEditMode", arguments: null},
|
|
{name:"editNode", arguments: null, funcFirst: function() {network.setOptions({manipulation:{editNode:function(data,callback) {callback(data);}}})}},
|
|
{name:"disableEditMode", arguments: null},
|
|
{name:"addEdgeMode", arguments: null},
|
|
{name:"disableEditMode", arguments: null},
|
|
{name:"editEdgeMode", arguments: null},
|
|
{name:"disableEditMode", arguments: null},
|
|
{name:"selectNodes", arguments: [[5], true]},
|
|
{name:"deleteSelected", arguments: null, funcFirst:drawQuick},
|
|
{name:"disableEditMode", arguments: null},
|
|
{name:"getPositions", arguments: [[1]]},
|
|
{name:"storePositions", arguments: null, funcFirst:drawQuick},
|
|
{name:"getBoundingBox", arguments: [1]},
|
|
{name:"getConnectedNodes", arguments: [1]},
|
|
{name:"getConnectedEdges", arguments: [1]},
|
|
{name:"startSimulation", arguments: null},
|
|
{name:"stopSimulation", arguments: null},
|
|
{name:"stabilize", arguments: null},
|
|
{name:"getSelection", arguments: null},
|
|
{name:"getSelectedNodes", arguments: null},
|
|
{name:"getSelectedEdges", arguments: null},
|
|
{name:"getNodeAt", arguments: [{x:10,y:20}]},
|
|
{name:"getEdgeAt", arguments: [{x:10,y:20}]},
|
|
{name:"selectNodes", arguments: [[1],false]},
|
|
{name:"selectEdges", arguments: [['e1']]},
|
|
{name:"unselectAll", arguments: null},
|
|
{name:"redraw", arguments: null},
|
|
{name:"getScale", arguments: null},
|
|
{name:"getViewPosition", arguments: null},
|
|
{name:"fit", arguments: null},
|
|
{name:"moveTo", arguments: [{position:{x:0,y:0}}]},
|
|
{name:"focus", arguments: [1]},
|
|
{name:"releaseNode", arguments: null},
|
|
]
|
|
|
|
drawQuick();
|
|
for (var i = 0; i < methods.length; i++) {
|
|
setTimeout(testMethod.bind(this,methods,i), i*50);
|
|
}
|
|
}
|
|
|
|
function testMethod(methods,i) {
|
|
var methodName = methods[i].name;
|
|
console.log("Currently testing:", methodName);
|
|
|
|
if (methods[i].funcFirst !== undefined) {
|
|
methods[i].funcFirst();
|
|
}
|
|
|
|
if (methods[i].func !== undefined) {
|
|
methods[i].func();
|
|
}
|
|
else {
|
|
if (methods[i].arguments === null) {
|
|
network[methodName].apply(network);
|
|
}
|
|
else {
|
|
network[methodName].apply(network, methods[i].arguments)
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
var amountOfOptionChecks = 1;
|
|
var optionCheckTime = 150;
|
|
var optionsThreshold = 0.8;
|
|
function checkOptions(i) {
|
|
// console.log('checking Options iteration:',i)
|
|
var allOptions = vis.network.allOptions.allOptions;
|
|
var testOptions = {};
|
|
constructOptions(allOptions, testOptions);
|
|
var failed = setTimeout(function() {console.error("FAILED",JSON.stringify(testOptions,null,4))}, 0.9*optionCheckTime);
|
|
var counter = 0;
|
|
drawQuick();
|
|
network.on("afterDrawing", function() {
|
|
counter++;
|
|
if (counter > 2) {
|
|
counter = 0;
|
|
network.off('afterDrawing');
|
|
clearTimeout(failed);
|
|
}
|
|
})
|
|
network.on("stabilized", function() {
|
|
clearTimeout(failed);
|
|
});
|
|
network.on("destroy", function() {
|
|
clearTimeout(failed);
|
|
})
|
|
network.setOptions(testOptions);
|
|
}
|
|
|
|
function constructOptions(allOptions, testOptions) {
|
|
|
|
for (var option in allOptions) {
|
|
if (Math.random() < optionsThreshold) {
|
|
if (option !== "__type__" && option !== '__any__' && option !== 'locales' && option !== 'image' && option !== 'id') {
|
|
if (allOptions[option].__type__ !== undefined) {
|
|
if (testOptions[option] === undefined) {
|
|
testOptions[option] = {};
|
|
}
|
|
constructOptions(allOptions[option], testOptions[option])
|
|
if (Object.keys(testOptions).length === 0) {
|
|
testOptions[option] = undefined;
|
|
delete testOptions[option];
|
|
}
|
|
}
|
|
else {
|
|
if (allOptions[option].boolean !== undefined) {
|
|
if (testOptions[option] === undefined) {
|
|
testOptions[option] = {};
|
|
}
|
|
testOptions[option] = Math.random() < 0.5;
|
|
}
|
|
else if(allOptions[option].number !== undefined) {
|
|
if (testOptions[option] === undefined) {
|
|
testOptions[option] = {};
|
|
}
|
|
testOptions[option] = 1 * Math.random();
|
|
}
|
|
else if(allOptions[option].string !== undefined && Array.isArray(allOptions[option].string)) {
|
|
var value = allOptions[option].string[Math.floor(Math.random() * allOptions[option].string.length)];
|
|
if (value !== 'image' && value !== 'circularImage' && value !== 'icon') {
|
|
if (testOptions[option] === undefined) {
|
|
testOptions[option] = {};
|
|
}
|
|
testOptions[option] = value;
|
|
}
|
|
}
|
|
else if(allOptions[option].string !== undefined) {
|
|
// if (testOptions[option] === undefined) {
|
|
// testOptions[option] = {};
|
|
// }
|
|
// testOptions[option] = "hello world";
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
for (var i = 0; i < amountOfOptionChecks; i++) {
|
|
setTimeout(checkOptions.bind(this,i), i*optionCheckTime);
|
|
}
|
|
setTimeout(checkMethods, amountOfOptionChecks*optionCheckTime);
|
|
</script>
|
|
</body>
|
|
</html>
|