forked from Vanessa219/vditor
/
graphvizRender.ts
49 lines (42 loc) · 1.92 KB
/
graphvizRender.ts
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
import {Constants} from "../constants";
import {addScript} from "../util/addScript";
import {graphvizRenderAdapter} from "./adapterRender";
declare class Viz {
public renderSVGElement: (code: string) => Promise<any>;
constructor({ }: { worker: Worker });
}
export const graphvizRender = (element: HTMLElement, cdn = Constants.CDN) => {
const graphvizElements = graphvizRenderAdapter.getElements(element);
if (graphvizElements.length === 0) {
return;
}
addScript(`${cdn}/dist/js/graphviz/viz.js`, "vditorGraphVizScript").then(() => {
graphvizElements.forEach((e: HTMLDivElement) => {
const code = graphvizRenderAdapter.getCode(e);
if (e.parentElement.classList.contains("vditor-wysiwyg__pre") ||
e.parentElement.classList.contains("vditor-ir__marker--pre")) {
return;
}
if (e.getAttribute("data-processed") === "true" || code.trim() === "") {
return;
}
try {
const blob = new Blob([`importScripts('${(document.getElementById("vditorGraphVizScript") as HTMLScriptElement).src.replace("viz.js", "full.render.js")}');`],
{ type: "application/javascript" });
const url = window.URL || window.webkitURL;
const blobUrl = url.createObjectURL(blob);
const worker = new Worker(blobUrl);
new Viz({ worker })
.renderSVGElement(code).then((result: HTMLElement) => {
e.innerHTML = result.outerHTML;
}).catch((error) => {
e.innerHTML = `graphviz render error: <br>${error}`;
e.className = "vditor-reset--error";
});
} catch (e) {
console.error("graphviz error", e);
}
e.setAttribute("data-processed", "true");
});
});
};