Merge pull request lowcoder-org#287 from mingfang/develop

hanshuai · web-flow · commit e3fc9ca21437 · 2023-03-02T13:24:19.000+08:00
add Mermaid component
diff --git a/client/packages/openblocks-comps/package.json b/client/packages/openblocks-comps/package.json
@@ -7,6 +7,7 @@
     "@types/react": "17",
     "@types/react-dom": "17",
     "big.js": "^6.2.1",
+    "mermaid": "^10.0.0",
     "openblocks-cli": "workspace:^",
     "openblocks-sdk": "workspace:^",
     "react": "17",
@@ -31,6 +32,14 @@
           "w": 15,
           "h": 60
         }
+      },
+      "mermaid": {
+        "name": "Mermaid",
+        "icon": "./icons/icon-chart.svg",
+        "layoutInfo": {
+          "w": 15,
+          "h": 60
+        }
       }
     }
   },
diff --git a/client/packages/openblocks-comps/src/comps/mermaidComp/index.tsx b/client/packages/openblocks-comps/src/comps/mermaidComp/index.tsx
@@ -0,0 +1,47 @@
+import {
+  UICompBuilder,
+  Section,
+  withExposingConfigs,
+  stringExposingStateControl,
+  NameConfig,
+  eventHandlerControl,
+  withMethodExposing,
+} from "openblocks-sdk";
+
+import Mermaid from "./mermaid"
+
+const childrenMap = {
+  code: stringExposingStateControl("code",
+    `graph LR
+   Start --> Stop`
+  ),
+  onEvent: eventHandlerControl([
+    {
+      label: "onChange",
+      value: "change",
+      description: "",
+    },
+  ]),
+};
+
+const CompBase = new UICompBuilder(childrenMap, (props: any) => {
+  const code = props.code.value;
+  return (
+    <Mermaid code={code}/>
+  );
+}).setPropertyViewFn((children: any) => {
+  return (
+    <>
+      <Section name="Basic">
+        {children.code.propertyView({ label: "code" })}
+      </Section>
+      <Section name="Interaction">{children.onEvent.propertyView()}</Section>
+    </>
+  );
+}).build();
+
+const AppViewCompTemp = withMethodExposing(CompBase, []);
+
+export const MermaidComp = withExposingConfigs(AppViewCompTemp, [
+  new NameConfig("code", ""),
+]);
diff --git a/client/packages/openblocks-comps/src/comps/mermaidComp/mermaid.tsx b/client/packages/openblocks-comps/src/comps/mermaidComp/mermaid.tsx
@@ -0,0 +1,29 @@
+import React, { useEffect, useState } from "react"
+import mermaid from "mermaid"
+
+function escape(str: string): string {
+  const entries: { [index: string]: any } = { lt: "<", gt: ">", nbsp: " ", amp: "&", quot: "\"" }
+  return str.replace(/&(lt|gt|nbsp|amp|quot);/gi, function (_, t) {
+    return entries[t]
+  }).trim()
+}
+
+export default ({ id = "graphDiv", code = "" }) => {
+  const [svg, setSvg] = useState('')
+
+  useEffect(() => {
+    mermaid.initialize({ startOnLoad: false })
+  }, [])
+
+  useEffect(() => {
+    if (!code) return
+
+    mermaid.mermaidAPI.render(id, escape(code)).then(res => {
+      setSvg(res.svg)
+    })
+  }, [code, setSvg])
+
+  return (
+    <pre className="mermaid" dangerouslySetInnerHTML={{ __html: svg }}></pre>
+  )
+}
diff --git a/client/packages/openblocks-comps/src/index.ts b/client/packages/openblocks-comps/src/index.ts
@@ -1,7 +1,9 @@
 import { ChartCompWithDefault } from "./comps/chartComp/chartComp";
 import { ImageEditorComp } from "./comps/imageEditorComp/index";
+import {MermaidComp} from "./comps/mermaidComp";
 
 export default {
   chart: ChartCompWithDefault,
   imageEditor: ImageEditorComp,
+  mermaid: MermaidComp,
 };
