-
Notifications
You must be signed in to change notification settings - Fork 24
/
index.html
128 lines (120 loc) · 4.61 KB
/
index.html
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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>GraphViz WASM</title>
<script>
const dot = `
digraph G {
node [shape=rect];
subgraph cluster_0 {
style=filled;
color=lightgrey;
node [style=filled,color=white];
a0 -> a1 -> a2 -> a3;
label = "process #1";
}
subgraph cluster_1 {
node [style=filled];
b0 -> b1 -> b2 -> b3;
label = "process #2";
color=blue
}
start -> a0;
start -> b0;
a1 -> b3;
b2 -> a3;
a3 -> a0;
a3 -> end;
b3 -> end;
start [shape=Mdiamond, label=<<TABLE BORDER="0" CELLBORDER="1" CELLSPACING="0" >
<TR>
<TD COLSPAN="3" BGCOLOR="azure3"><b><FONT FACE="Times-Roman" POINT-SIZE="12.0" >one obj</FONT></b></TD>
</TR>
<TR>
<TD PORT="in1" BGCOLOR="white">in1<br/>:In1</TD>
<TD ROWSPAN="2" BGCOLOR="azure3"> some text </TD>
<TD PORT="out1" BGCOLOR="0.5 0.5 0.5">out1<br/>:Out1</TD>
</TR>
<TR>
<TD PORT="in2" HREF="somepage.html" BGCOLOR="0.45 0.5 0.75">in2<br/>:In2</TD>
<TD PORT="out2" HREF="somepage.html" BGCOLOR="0.8 0.5 1">out2<br/>:Out2</TD>
</TR>
</TABLE>>];
end [shape=Msquare];
}
`;
</script>
</head>
<body>
<h3>ESM</h3>
<div id="ESM"></div>
<script type="module">
import { Graphviz } from "https://cdn.jsdelivr.net/npm/@hpcc-js/wasm/dist/index.js";
// import { Graphviz } from "./packages/wasm/dist/index.js";
if (Graphviz) {
const graphviz = await Graphviz.load();
const svg = graphviz.layout(dot, "svg", "dot");
document.getElementById("ESM").innerHTML = svg;
}
</script>
<hr>
<h3>UMD 1</h3>
<div id="UMD1"></div>
<script src="https://cdn.jsdelivr.net/npm/@hpcc-js/wasm/dist/graphviz.umd.js"></script>
<!-- <script src="./packages/wasm/dist/graphviz.umd.js"></script> -->
<script>
var hpccWasm = window["@hpcc-js/wasm"];
hpccWasm.Graphviz.load().then(graphviz => {
var svg = graphviz.layout(dot, "svg", "dot");
document.getElementById("UMD1").innerHTML = svg;
}).catch(e => console.log(e.message));
</script>
<hr>
<h3>UMD 2</h3>
<div id="UMD2"></div>
<script src="https://cdn.jsdelivr.net/npm/@hpcc-js/wasm/dist/index.umd.js"></script>
<!-- <script src="./packages/wasm/dist/index.umd.js"></script> -->
<script>
var hpccWasm = window["@hpcc-js/wasm"];
hpccWasm.Graphviz.load().then(graphviz => {
var svg = graphviz.layout(dot, "svg", "dot");
document.getElementById("UMD2").innerHTML = svg;
}).catch(e => console.log(e.message));
</script>
<hr>
<h3>Web Worker</h3>
<div id="worker"></div>
<script type="module">
const myWorker = new Worker("./index-worker.js", { type: 'module' });
myWorker.onmessage = (e) => {
document.getElementById("worker").innerHTML = e.data;
}
myWorker.postMessage(dot);
</script>
<hr>
<h3>Image</h3>
<div id="image"></div>
<script type="module">
import { Graphviz } from "https://cdn.jsdelivr.net/npm/@hpcc-js/wasm/dist/index.js";
// import { Graphviz } from "./dist/index.js";
if (Graphviz) {
const graphviz = await Graphviz.load();
const svg = graphviz.neato('digraph { a[image="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"]; }', "svg", { images: [{ path: "https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png", width: "272px", height: "92px" }] });
document.getElementById("image").innerHTML = svg;
}
</script>
<hr>
<h3>Image 2</h3>
<div id="image2"></div>
<script type="module">
import { Graphviz } from "https://cdn.jsdelivr.net/npm/@hpcc-js/wasm/dist/index.js";
// import { Graphviz } from "./dist/index.js";
if (Graphviz) {
const graphviz = await Graphviz.load();
const svg = graphviz.neato('digraph { a[image="./resources/hpcc-logo.png"]; }', "svg", { images: [{ path: "./resources/hpcc-logo.png", width: "272px", height: "92px" }] });
document.getElementById("image2").innerHTML = svg;
}
</script>
</body>
</html>