feat: 优化grapviz图的显示效果

.gitignore

@@ -4,3 +4,4 @@
 /node_modules
 /demo/dist
 /coverage
+.vscode

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+  "javascript.preferences.quoteStyle": "double",
+  "javascript.format.semicolons": "insert",
+  "typescript.format.semicolons": "insert"
+}

src/assets/scss/_reset.scss

@@ -263,6 +263,10 @@
       overflow: hidden;
       height: 420px;
     }
+
+    .language-graphviz polygon {
+      fill: transparent;
+    }
   }
 
   &-task {

src/js/graphviz/worker.js

@@ -1,6 +0,0 @@
-importScripts("viz.js");
-
-onmessage = function(e) {
-  var result = Viz(e.data.src, e.data.options);
-  postMessage(result);
-}

src/ts/markdown/codeRender.ts

@@ -5,7 +5,7 @@ import {code160to32} from "../util/code160to32";
 export const codeRender = (element: HTMLElement, lang: (keyof II18nLang) = "zh_CN") => {
     element.querySelectorAll("pre > code").forEach((e: HTMLElement, index: number) => {
         if (e.classList.contains("language-mermaid") || e.classList.contains("language-echarts")
-            || e.classList.contains("language-abc")) {
+            || e.classList.contains("language-abc") || e.classList.contains("language-graphviz")) {
             return;
         }
 

src/ts/markdown/graphvizRender.ts

@@ -7,18 +7,23 @@ declare class Viz {
 }
 
 export const graphvizRender = (element: HTMLElement, code: string, cdn = `https://cdn.jsdelivr.net/npm/vditor@${VDITOR_VERSION}`) => {
-  // addScript("https://cdn.bootcss.com/viz.js/2.1.2/full.render.js", "vditorGraphVizFullScript");
-  // TODO: 这里的cdn地址暂时写死
-  addScript("https://cdn.bootcss.com/viz.js/2.1.2/viz.js", "vditorGraphVizScript");
+    // TODO: 这里的cdn地址暂时写死
+    addScript(`https://cdn.bootcss.com/viz.js/2.1.2/viz.js`, "vditorGraphVizScript");
 
-  const workerURL = "../../js/graphviz/full.render.js";
-  const viz1 = new Viz({ workerURL });
-
-  // tslint:disable-next-line:no-console
-  console.log(viz1, code);
-  viz1.renderSVGElement(code).then((result: HTMLElement) => {
-    // tslint:disable-next-line:no-console
-    console.log(result);
-    element.appendChild(result as HTMLElement);
-  });
+    element.querySelectorAll("pre > code").forEach((e: HTMLDivElement) => {
+        try {
+            if (e.getAttribute("data-processed") === "true") {
+                return;
+            }
+            const workerURL = "../../js/graphviz/full.render.js";
+            const viz = new Viz({ workerURL });
+            viz.renderSVGElement(code).then((result: HTMLElement) => {
+                e.replaceChild(result, e?.childNodes[0]);
+            });
+            e.setAttribute("data-processed", "true");
+        } catch (error) {
+            e.className = "hljs";
+            e.innerHTML = `echarts render error: <br>${error}`;
+        }
+    });
 };

src/ts/markdown/highlightRender.ts

@@ -39,7 +39,7 @@ export const highlightRender = (hljsOption?: IHljs, element: HTMLElement | Docum
 
     element.querySelectorAll("pre > code").forEach((block) => {
         if (block.classList.contains("language-mermaid") || block.classList.contains("language-echarts")
-            || block.classList.contains("language-abc")) {
+            || block.classList.contains("language-abc") || block.classList.contains("language-graphviz")) {
             return;
         }
         hljs.highlightBlock(block);