Add mermaid graph

Yann Leflour · Yann Leflour · commit 8e2a0cfc2752 · 2023-12-14T23:13:51.000+01:00
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/ui-sketcher-webview/.eslintrc.cjs b/ui-sketcher-webview/.eslintrc.cjs
@@ -20,5 +20,6 @@ module.exports = {
       "warn",
       { allowConstantExport: true },
     ],
+    "react-hooks/rules-of-hooks": "off",
   },
 };
diff --git a/ui-sketcher-webview/docs/tldr-raw-gotchas.md b/ui-sketcher-webview/docs/tldr-raw-gotchas.md
@@ -0,0 +1,4 @@
+### What's an "indicator"
+
+Used when hovering over a shape or when it's selected; must return only SVG elements here.
+In Tldraw, it's the blue box or line that appears when hovering over a shape.
diff --git a/ui-sketcher-webview/package.json b/ui-sketcher-webview/package.json
@@ -13,8 +13,11 @@
     "@tldraw/tldraw": "2.0.0-canary.ba4091c59418",
     "canvas-size": "^1.2.6",
     "daisyui": "^4.4.19",
+    "firacode": "^6.2.0",
+    "mermaid": "^10.6.1",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "valtio": "^1.12.1"
   },
   "pnpm": {
     "overrides": {
diff --git a/ui-sketcher-webview/src/App.tsx b/ui-sketcher-webview/src/App.tsx
@@ -1,19 +1,49 @@
-import { Tldraw } from "@tldraw/tldraw";
+import { TLOnMountHandler, Tldraw } from "@tldraw/tldraw";
 import "@tldraw/tldraw/tldraw.css";
-import { useMakeReal } from "./lib/useMakeReal";
+import { useSettings } from "./domain/use-settings";
 import { shapeUtils } from "./shapes-utils";
 import { ShareZone } from "./share-zone/share-zone";
+import { isMermaid } from "./tools/mermaid/mermaid.utils";
+
+const onMount: TLOnMountHandler = (editor) => {
+  editor.registerExternalContentHandler("embed", async (asset) => {
+    alert("embed");
+  });
+  editor.registerExternalContentHandler("files", async (asset) => {
+    alert("files");
+  });
+  editor.registerExternalContentHandler("url", async (asset) => {
+    alert("url");
+  });
+  // editor.registerExternalContentHandler("svg-text", async (asset) => {
+  //   alert("svg-text");
+  // });
+  editor.registerExternalContentHandler("text", async (asset) => {
+    if (isMermaid(asset.text)) {
+      console.debug("mermaid");
+      editor.createShape({
+        type: "mermaid",
+        x: asset.point?.x,
+        y: asset.point?.y,
+        props: { source: asset.text },
+      });
+      return;
+    }
+    alert("text");
+  });
+};
 
 export const App = () => {
   // TODO: use editor persistence per file
-  const makeReal = useMakeReal();
+  const settings = useSettings();
 
   return (
     <div className={`h-screen w-screen`}>
       <Tldraw
-        persistenceKey={makeReal.persistanceKey}
+        persistenceKey={settings.persistanceKey}
         shapeUtils={shapeUtils}
         shareZone={<ShareZone />}
+        onMount={onMount}
       />
     </div>
   );
diff --git a/ui-sketcher-webview/src/domain/use-settings.ts b/ui-sketcher-webview/src/domain/use-settings.ts
@@ -0,0 +1,9 @@
+import "@tldraw/tldraw/tldraw.css";
+import { proxy, useSnapshot } from "valtio";
+
+const settings = proxy({
+  partialRenderEnabled: window.partialRenderEnabled || false,
+  persistanceKey: window.workspaceId,
+});
+
+export const useSettings = () => useSnapshot(settings);
diff --git a/ui-sketcher-webview/src/domain/use-tldraw.ts b/ui-sketcher-webview/src/domain/use-tldraw.ts
diff --git a/ui-sketcher-webview/src/lib/useMakeReal.ts b/ui-sketcher-webview/src/lib/useMakeReal.ts
diff --git a/ui-sketcher-webview/src/main.tsx b/ui-sketcher-webview/src/main.tsx
@@ -2,6 +2,7 @@ import React from "react";
 import ReactDOM from "react-dom/client";
 import { App } from "./App.tsx";
 import "./index.css";
+import "firacode/distr/fira_code.css";
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
diff --git a/ui-sketcher-webview/src/shapes-utils/index.ts b/ui-sketcher-webview/src/shapes-utils/index.ts
@@ -1,3 +1,4 @@
+import { MermaidShapeUtil } from "../tools/mermaid/mermaid.shape-util";
 import { PreviewShapeUtil } from "./preview-shape";
 
-export const shapeUtils = [PreviewShapeUtil];
+export const shapeUtils = [PreviewShapeUtil, MermaidShapeUtil];
diff --git a/ui-sketcher-webview/src/tools/mermaid/mermaid.config.ts b/ui-sketcher-webview/src/tools/mermaid/mermaid.config.ts
@@ -0,0 +1,10 @@
+import { MermaidConfig } from 'mermaid';
+import mermaidStyles from "./mermaid.css?raw";
+
+export const mermaidConfig: MermaidConfig = {
+  startOnLoad: true,
+  theme: "default",
+  securityLevel: "loose",
+  themeCSS: mermaidStyles,
+  fontFamily: "Fira Code",
+}
diff --git a/ui-sketcher-webview/src/tools/mermaid/mermaid.css b/ui-sketcher-webview/src/tools/mermaid/mermaid.css
@@ -0,0 +1,48 @@
+g.classGroup rect {
+  fill: #282a36;
+  stroke: #6272a4;
+}
+merm g.classGroup text {
+  fill: #f8f8f2;
+}
+g.classGroup line {
+  stroke: #f8f8f2;
+  stroke-width: 0.5;
+}
+.classLabel .box {
+  stroke: #21222c;
+  stroke-width: 3;
+  fill: #21222c;
+  opacity: 1;
+}
+.classLabel .label {
+  fill: #f1fa8c;
+}
+.relation {
+  stroke: #ff79c6;
+  stroke-width: 1;
+}
+#compositionStart,
+#compositionEnd {
+  fill: #bd93f9;
+  stroke: #bd93f9;
+  stroke-width: 1;
+}
+#aggregationEnd,
+#aggregationStart {
+  fill: #21222c;
+  stroke: #50fa7b;
+  stroke-width: 1;
+}
+#dependencyStart,
+#dependencyEnd {
+  fill: #00bcd4;
+  stroke: #00bcd4;
+  stroke-width: 1;
+}
+#extensionStart,
+#extensionEnd {
+  fill: #f8f8f2;
+  stroke: #f8f8f2;
+  stroke-width: 1;
+}
diff --git a/ui-sketcher-webview/src/tools/mermaid/mermaid.shape-util.tsx b/ui-sketcher-webview/src/tools/mermaid/mermaid.shape-util.tsx
@@ -0,0 +1,98 @@
+import {
+  BaseBoxShapeUtil,
+  Editor,
+  HTMLContainer,
+  SvgExportContext,
+  TLBaseShape,
+  useIsEditing,
+} from "@tldraw/tldraw";
+import { useBoxShadow } from "../use-box-shadow.hook";
+
+import mermaid from "mermaid";
+import { useEffect, useLayoutEffect, useRef } from "react";
+import { mermaidConfig } from "./mermaid.config";
+
+mermaid.initialize(mermaidConfig);
+
+export type MermaidShape = TLBaseShape<
+  "mermaid",
+  {
+    source: string;
+    w: number;
+    h: number;
+  }
+>;
+
+export class MermaidShapeUtil extends BaseBoxShapeUtil<MermaidShape> {
+  static override type = "mermaid" as const;
+
+  getDefaultProps(): MermaidShape["props"] {
+    return {
+      source: "",
+      w: (200 * 2) / 3,
+      h: (300 * 2) / 3,
+    };
+  }
+
+  override canEdit = () => true;
+  override isAspectRatioLocked = (_shape: MermaidShape) => false;
+  override canResize = (_shape: MermaidShape) => false;
+  override canBind = (_shape: MermaidShape) => false;
+  override canUnmount = () => true;
+  override toSvg(
+    _shape: MermaidShape,
+    _ctx: SvgExportContext,
+  ): SVGElement | Promise<SVGElement> {
+    const g = document.createElementNS("http://www.w3.org/2000/svg", "g");
+    return g;
+  }
+
+  constructor(editor: Editor) {
+    super(editor);
+  }
+
+  override component(shape: MermaidShape) {
+    const diagramRef = useRef<HTMLDivElement>(null);
+    const boxShadow = useBoxShadow(this.editor, shape);
+    const isEditing = useIsEditing(shape.id);
+    const mermaidDivId = `mermaid-${shape.id.replace(":", "-")}`;
+
+    const { source } = shape.props;
+
+    useEffect(() => {
+      (async () => {
+        if (isEditing || !diagramRef.current) return;
+        console.debug("rendering mermaid", source);
+        await mermaid.run({
+          nodes: [diagramRef.current],
+        });
+        const svg = diagramRef.current.querySelector("svg");
+        if (!svg) return;
+        this.editor.updateShape({
+          id: shape.id,
+          type: "mermaid",
+          props: {
+            w: diagramRef.current.offsetWidth,
+            h: diagramRef.current.offsetHeight,
+          },
+        });
+      })();
+    }, [source, isEditing, shape.id]);
+
+    return (
+      <HTMLContainer
+        className="tl-mermaid-container"
+        id={shape.id}
+        style={{ boxShadow }}
+      >
+        <div ref={diagramRef} className="mermaid " id={mermaidDivId}>
+          {source}
+        </div>
+      </HTMLContainer>
+    );
+  }
+
+  indicator(shape: MermaidShape) {
+    return <rect width={shape.props.w} height={shape.props.h} />;
+  }
+}
diff --git a/ui-sketcher-webview/src/tools/mermaid/mermaid.utils.test.ts b/ui-sketcher-webview/src/tools/mermaid/mermaid.utils.test.ts
@@ -0,0 +1,20 @@
+import { describe, expect, test } from "vitest";
+import { isMermaid } from "./mermaid.utils";
+
+
+describe("isMermaid", () => {
+  test("should return true if code is mermaid", () => {
+    expect(isMermaid("flowchart\n")).toBe(true)
+    expect(isMermaid("flowchart LR\n")).toBe(true)
+
+    const code = `
+    flowchart TD
+      A[Christmas] -->|Get money| B(Go shopping)
+      B --> C{Let me think}
+      C -->|One| D[Laptop]
+      C -->|Two| E[iPhone]
+      C -->|Three| F[fa:fa-car Car]
+    `
+    expect(isMermaid(code)).toBe(true)
+  });
+});
diff --git a/ui-sketcher-webview/src/tools/mermaid/mermaid.utils.ts b/ui-sketcher-webview/src/tools/mermaid/mermaid.utils.ts
@@ -0,0 +1,9 @@
+const mermaidTypes = ["flowchart", "sequenceDiagram", "gantt", "classDiagram", "stateDiagram-v2", "pie", "gantt", "journey", "C4Context"]
+
+export const isMermaid = (code: string) => {
+  const firstWord = code.trimStart().split(/[\s\n]/)?.[0];
+
+  if (!firstWord) return false;
+
+  return mermaidTypes.some(type => firstWord === type);
+}
diff --git a/ui-sketcher-webview/src/tools/use-box-shadow.hook.ts b/ui-sketcher-webview/src/tools/use-box-shadow.hook.ts
@@ -0,0 +1,37 @@
+import { Editor, TLBaseShape, Vec2d, useValue } from "@tldraw/tldraw";
+
+export const useBoxShadow = (editor: Editor, shape: TLBaseShape<string, object>) => useValue(
+  "box shadow",
+  () => {
+    const rotation = editor.getShapePageTransform(shape)!.rotation();
+    return getRotatedBoxShadow(rotation);
+  },
+  [editor, shape],
+);
+
+const ROTATING_BOX_SHADOWS = [
+  {
+    offsetX: 0,
+    offsetY: 2,
+    blur: 4,
+    spread: -1,
+    color: "#0000003a",
+  },
+  {
+    offsetX: 0,
+    offsetY: 3,
+    blur: 12,
+    spread: -2,
+    color: "#0000001f",
+  },
+];
+
+function getRotatedBoxShadow(rotation: number) {
+  const cssStrings = ROTATING_BOX_SHADOWS.map((shadow) => {
+    const { offsetX, offsetY, blur, spread, color } = shadow;
+    const vec = new Vec2d(offsetX, offsetY);
+    const { x, y } = vec.rot(-rotation);
+    return `${x}px ${y}px ${blur}px ${spread}px ${color}`;
+  });
+  return cssStrings.join(", ");
+}
diff --git a/ui-sketcher-webview/tldraw-examples/tools.ts b/ui-sketcher-webview/tldraw-examples/tools.ts
@@ -0,0 +1,38 @@
+import { TLUiOverrides, toolbarItem } from "@tldraw/tldraw";
+
+export const myOverrides: TLUiOverrides = {
+  actions(editor, actions) {
+    // Create a new action or replace an existing one
+    actions["my-new-action"] = {
+      id: "my-new-action",
+      label: "My new action",
+      readonlyOk: true,
+      kbd: "$u",
+      onSelect(_source: any) {
+        // Whatever you want to happen when the action is run
+        window.alert("My new action just happened!");
+      },
+    };
+    return actions;
+  },
+  tools(editor, tools) {
+    // Create a tool item in the ui's context.
+    tools.myNewTool = {
+      id: "my-new-tool",
+      icon: "triangle-down",
+      label: "New Tool",
+      kbd: "c",
+      readonlyOk: false,
+      onSelect: () => {
+        // Wccchatever you want to happen when the tool is selected
+        alert("Card tool selected!");
+        editor.setCurrentTool("card");
+      },
+    };
+    return tools;
+  },
+  toolbar(editor, toolbar, { tools }) {
+    toolbar.splice(4, 0, toolbarItem(tools.myNewTool));
+    return toolbar;
+  },
+};
