<!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>