Book a Demo!
CoCalc Logo Icon
StoreFeaturesDocsShareSupportNewsAboutPoliciesSign UpSign In
epsylon
GitHub Repository: epsylon/ufonet
Path: blob/master/core/js/treemap.js
1208 views
1
var labelType, useGradients, nativeTextSupport, animate;
2
3
function init(){
4
//init data
5
var json = "{id:\"nodeROOT\", name:\"UFONET\", data:{}, children:[{id:\"nodeGLOBAL\", name:\"GLOBAL\", data:{}, children:[{id:\"nodeBOARD\", name:\"BOARD\", data:{}, children:[{id:\"nodeSUPPORT\", name:\"SUPPORT\", data:{}, children:[]}]}, {id:\"nodeGRID\", name:\"GRID\", data:{}, children:[{id:\"nodeSTATS2\", name:\"STATS\", data:{}, children:[]}]}, {id:\"nodeWARGAMES\", name:\"WARGAMES\", data:{}, children:[{id:\"nodeBOTNET2\", name:\"BOTNET\", data:{}, children:[]}, {id:\"nodeSUPPORT2\", name:\"SUPPORT\", data:{}, children:[]}]}, {id:\"nodeLINKS\", name:\"LINKS\", data:{}, children:[]}, {id:\"nodeSTREAMS\", name:\"STREAMS\", data:{}, children:[]}, {id:\"nodeNETWORK\", name:\"NETWORK\", data:{}, children:[{id:\"nodeRADAR\", name:\"RADAR\", data:{}, children:[]}, {id:\"nodeWARPS2\", name:\"WARPS\", data:{}}]}]}, {id:\"nodeSHIP\", name:\"SHIP\", data:{}, children:[{id:\"nodeEXPLORE\", name:\"EXPLORE\", data:{}, children:[{id:\"nodeINSPECTION\", name:\"INSPECTION\", data:{}, children:[]}, {id:\"nodeABDUCTION\", name:\"ABDUCTION\", data:{}, children:[]}, {id:\"nodeDORKING\", name:\"DORKING\", data:{}, children:[{id:\"nodeZOMBIES2\", name:\"ZOMBIES\", data:{}, children:[]}]} ]}, {id:\"nodeBOTNET\", name:\"BOTNET\", data:{}, children:[{id:\"nodeZOMBIES\", name:\"ZOMBIES\", data:{}, children:[]}, {id:\"nodeALIENS\", name:\"ALIENS\", data:{}, children:[]}, {id:\"nodeDROIDS\", name:\"DROIDS\", data:{}, children:[]}, {id:\"nodeUCAVs\", name:\"UCAVs\", data:{}, children:[]}, {id:\"nodeXML-RPCs\", name:\"XML-RPCs\", data:{}, children:[]}, {id:\"NTPs\", name:\"NTPs\", data:{}, children:[]}, {id:\"DNSs\", name:\"DNSs\", data:{}, children:[]}, {id:\"SNMPs\", name:\"SNMPs\", data:{}, children:[]} ]}, {id:\"nodeATTACKS\", name:\"ATTACKS\", data:{}, children:[{id:\"nodeBOTNET4\", name:\"BOTNET\", data:{}, children:[]}, {id:\"nodeEXTRA\", name:\"EXTRA\", data:{}, children:[{id:\"nodeLAYER7\", name:\"LAYER-7\", data:{}, children:[]}, {id:\"nodeLOIC\", name:\"LOIC\", data:{}, children:[]}, {id:\"nodeLORIS\", name:\"LORIS\", data:{}, children:[]},{id:\"nodeUFOSYN\", name:\"UFOSYN\", data:{}, children:[]},{id:\"nodeFRAGGLE\", name:\"FRAGGLE\", data:{}, children:[]},{id:\"nodeUFORST\", name:\"UFORST\", data:{}, children:[]},{id:\"nodeSPRAY\", name:\"SPRAY\", data:{}, children:[]},{id:\"nodeSMURF\", name:\"SMURF\", data:{}, children:[]},{id:\"nodeXMAS\", name:\"XMAS\", data:{}, children:[]},{id:\"nodeDROPER\", name:\"DROPER\", data:{}, children:[]},{id:\"nodeSNIPER\", name:\"SNIPER\", data:{}, children:[]},{id:\"nodeTACHYON\", name:\"TACHYON\", data:{}, children:[]},{id:\"nodePINGER\", name:\"PINGER\", data:{}, children:[]},{id:\"nodeMONLIST\", name:\"MONLIST\", data:{}, children:[]},{id:\"nodeUFOACK\", name:\"UFOACK\", data:{}, children:[]},{id:\"nodeOVERLAP\", name:\"OVERLAP\", data:{}, children:[]},{id:\"nodeUFOUDP\", name:\"UFOUDP\", data:{}, children:[]},{id:\"nodeNUKE\", name:\"NUKE\", data:{}, children:[]}]}]}, {id:\"nodeTV\", name:\"TV\", data:{}, children:[]}, {id:\"nodeBROWSER\", name:\"BROWSER\", data:{}, children:[]}, {id:\"nodeGAMES\", name:\"GAMES\", data:{}, children:[]}, {id:\"nodeNEWS\", name:\"NEWS\", data:{}, children:[]}, {id:\"nodeMISSIONS\", name:\"MISSIONS\", data:{}, children:[]}, {id:\"nodeSTATS\", name:\"STATS\", data:{}, children:[]}, {id:\"nodeWARPS\", name:\"WARPS\", data:{}}]}]}";
6
//end
7
8
var getTree = (function() {
9
var i = 0;
10
return function(nodeId, level) {
11
var subtree = eval('(' + json.replace(/id:\"([a-zA-Z0-9]+)\"/g,
12
function(all, match) {
13
return "id:\"" + match + "_" + i + "\""
14
}) + ')');
15
$jit.json.prune(subtree, level); i++;
16
return {
17
'id': nodeId,
18
'children': subtree.children
19
};
20
};
21
})();
22
23
$jit.ST.Plot.NodeTypes.implement({
24
'nodeline': {
25
'render': function(node, canvas, animating) {
26
if(animating === 'expand' || animating === 'contract') {
27
var pos = node.pos.getc(true), nconfig = this.node, data = node.data;
28
var width = nconfig.width, height = nconfig.height;
29
var algnPos = this.getAlignedPos(pos, width, height);
30
var ctx = canvas.getCtx(), ort = this.config.orientation;
31
ctx.beginPath();
32
if(ort == 'left' || ort == 'right') {
33
ctx.moveTo(algnPos.x, algnPos.y + height / 2);
34
ctx.lineTo(algnPos.x + width, algnPos.y + height / 2);
35
} else {
36
ctx.moveTo(algnPos.x + width / 2, algnPos.y);
37
ctx.lineTo(algnPos.x + width / 2, algnPos.y + height);
38
}
39
ctx.stroke();
40
}
41
}
42
}
43
44
});
45
46
//init Spacetree
47
var st = new $jit.ST({
48
'injectInto': 'infovis',
49
duration: 800,
50
transition: $jit.Trans.Quart.easeInOut,
51
levelDistance: 160,
52
levelsToShow: 1,
53
Node: {
54
height: 30,
55
width: 60,
56
type: 'nodeline',
57
color:'yellow',
58
overridable: true,
59
lineWidth: 1
60
},
61
62
Edge: {
63
height: 30,
64
width: 60,
65
color:'red',
66
overridable: true,
67
lineWidth: 1
68
},
69
70
request: function(nodeId, level, onComplete) {
71
var ans = getTree(nodeId, level);
72
onComplete.onComplete(nodeId, ans);
73
},
74
75
onCreateLabel: function(label, node){
76
label.id = node.id;
77
label.innerHTML = node.name;
78
label.onclick = function(){
79
st.onClick(node.id);
80
};
81
var style = label.style;
82
style.width = 180 + 'px';
83
style.height = 80 + 'px';
84
style.cursor = 'pointer';
85
style.color = 'yellow';
86
style.fontSize = '14px';
87
style.textDecoration = 'underline';
88
style.paddingTop = '4px';
89
},
90
91
onBeforePlotNode: function(node){
92
if (node.selected) {
93
node.data.$color = "#ff7";
94
}
95
else {
96
delete node.data.$color;
97
}
98
},
99
100
onBeforePlotLine: function(adj){
101
if (adj.nodeFrom.selected && adj.nodeTo.selected) {
102
adj.data.$color = "green";
103
adj.data.$lineWidth = 1;
104
}
105
else {
106
delete adj.data.$color;
107
delete adj.data.$lineWidth;
108
}
109
}
110
});
111
st.loadJSON(eval( '(' + json + ')' ));
112
st.compute();
113
st.onClick(st.root);
114
//end
115
116
function get(id) {
117
return document.getElementById(id);
118
};
119
var top = get('r-top'),
120
left = get('r-left'),
121
bottom = get('r-bottom'),
122
right = get('r-right');
123
function changeHandler() {
124
if(this.checked) {
125
top.disabled = bottom.disabled = right.disabled = left.disabled = true;
126
st.switchPosition(this.value, "animate", {
127
onComplete: function(){
128
top.disabled = bottom.disabled = right.disabled = left.disabled = false;
129
}
130
});
131
}
132
};
133
top.onchange = left.onchange = bottom.onchange = right.onchange = changeHandler;
134
}
135
136