/
html.go
133 lines (129 loc) · 4.38 KB
/
html.go
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
package callvis
var TemplateHead = `<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<script src="https://cdn.jsdelivr.net/npm/svg-pan-zoom@3.5.0/dist/svg-pan-zoom.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
<style>
html, body, table {
height: 100%;
margin: 0;
width: 100%;
overflow: hidden;
}
</style>
</head>
<body>
<table>
<tr>
<td>
<button id="ShowAllEdges">显示全部</button>
<button id="HideAllEdges">隐藏全部</button>
<span>
<button id="button1">隐藏上游</button>
<button id="button3">恢复上游</button>
<button id="button2">隐藏下游</button>
<button id="button4">恢复下游</button>
<em id="nodeName"></em>
</span>
</td>
</tr>
<tr>
<td style="border-top: 1px solid #333;">
`
var TemplateFoot = `
</td>
</tr>
</table>
<script>
// Don't use window.onLoad like this in production, because it can only listen to one function.
window.onload = function () {
// Expose to window namespase for testing purposes
window.zoomTiger = svgPanZoom('svg', {
zoomEnabled: true,
controlIconsEnabled: false,
fit: true,
center: true,
});
document.getElementById('ShowAllEdges').addEventListener('click', function () {
let containerArr = document.getElementsByClassName("edge");
for (let i = 0; i < containerArr.length; i++) {
containerArr[i].style.display = ''
}
})
document.getElementById('HideAllEdges').addEventListener('click', function () {
let containerArr = document.getElementsByClassName("edge");
for (let i = 0; i < containerArr.length; i++) {
containerArr[i].style.display = 'none'
}
})
$('#clust1').click(() => {
clearFill("path")
clearFill("polygon")
$('#nodeName').html("")
})
$(".node").each((k, n) => {
let curr = $(n)
curr.click(() => {
clearFill("path")
clearFill("polygon")
let nodeName = curr.find("title").html()
curr.find('polygon').attr("fillOri", curr.find('polygon').attr("fill"))
curr.find('path').attr("fillOri", curr.find('path').attr("fill"))
curr.find('polygon').attr("fill", "red")
curr.find('path').attr("fill", "red")
$('#nodeName').html(nodeName)
})
})
$('#button1').click(() => {
let nodeName = $("#nodeName").html();
$('title').each((k, v) => {
if ($(v).html().endsWith("->" + nodeName)) {
$(v).parent(".edge").css("display", "none")
}
})
})
$('#button3').click(() => {
let nodeName = $("#nodeName").html();
$('title').each((k, v) => {
if ($(v).html().endsWith("->" + nodeName)) {
$(v).parent(".edge").css("display", "")
}
})
})
$('#button2').click(() => {
let nodeName = $("#nodeName").html();
cssRecursive(nodeName, "none")
})
$('#button4').click(() => {
let nodeName = $("#nodeName").html();
cssRecursive(nodeName, "")
})
};
function cssRecursive(nodeName, display) {
$('title').each((k, v) => {
let edge = $(v).html()
if (edge.startsWith(nodeName + "->")) {
let childName = edge.replace(nodeName + "->", "")
if (nodeName != childName) {
cssRecursive(childName, display)
}
$(v).parent(".edge").css("display", display)
}
})
}
function clearFill(domType) {
let nodeName = $('#nodeName').html()
if (nodeName) {
$('title').each((k, v) => {
if ($(v).html() == nodeName) {
$(v).parent(".node").find(domType).attr("fill", $(v).parent(".node").find(domType).attr("fillOri"))
}
})
}
}
</script>
</body>
</html>
`