allow mermaid syntax and export in preview

src/components/App.tsx

@@ -1178,7 +1178,10 @@ class App extends React.Component<AppProps, AppState> {
                           app={this}
                         >
                           {this.props.children}
-                          <MermaidToExcalidraw appState={this.state} />
+                          <MermaidToExcalidraw
+                            appState={this.state}
+                            elements={this.scene.getNonDeletedElements()}
+                          />
                         </LayerUI>
 
                         <div className="excalidraw-textEditorContainer" />

src/components/MermaidToExcalidraw.tsx

@@ -1,34 +1,118 @@
-import { AppState } from "../types";
+import { useState, useRef, useEffect } from "react";
+import { AppState, BinaryFiles } from "../types";
 import { updateActiveTool } from "../utils";
-import { useExcalidrawSetAppState } from "./App";
+import { useApp, useExcalidrawSetAppState } from "./App";
 import { Button } from "./Button";
 import { Dialog } from "./Dialog";
+import {
+  parseMermaid,
+  graphToExcalidraw,
+} from "@excalidraw/mermaid-to-excalidraw";
 
 import "./MermaidToExcalidraw.scss";
-const MermaidToExcalidraw = ({ appState }: { appState: AppState }) => {
+import { DEFAULT_EXPORT_PADDING, DEFAULT_FONT_SIZE } from "../constants";
+import {
+  convertToExcalidrawElements,
+  exportToCanvas,
+} from "../packages/excalidraw/index";
+import { NonDeletedExcalidrawElement } from "../element/types";
+import { canvasToBlob } from "../data/blob";
+
+const MermaidToExcalidraw = ({
+  appState,
+  elements,
+}: {
+  appState: AppState;
+  elements: readonly NonDeletedExcalidrawElement[];
+}) => {
+  const [text, setText] = useState("");
+  const [canvasData, setCanvasData] = useState<{
+    //@ts-ignore
+    elements: readonly NonDeletedExcalidrawElement[];
+    files: BinaryFiles | null;
+  }>({ elements: [], files: null });
+  const canvasRef = useRef<HTMLDivElement>(null);
+  const app = useApp();
+
+  useEffect(() => {
+    const canvasNode = canvasRef.current;
+    if (!canvasNode) {
+      return;
+    }
+    const maxWidth = canvasNode.offsetWidth;
+    const maxHeight = canvasNode.offsetHeight;
+    let dimension = Math.max(maxWidth, maxHeight);
+    if (dimension > canvasNode.offsetWidth) {
+      dimension = canvasNode.offsetWidth - 10;
+    }
+    if (dimension > canvasNode.offsetHeight) {
+      dimension = canvasNode.offsetHeight;
+    }
+    exportToCanvas({
+      elements: canvasData.elements,
+      files: canvasData.files,
+      exportPadding: DEFAULT_EXPORT_PADDING,
+      maxWidthOrHeight: dimension,
+    }).then((canvas) => {
+      // if converting to blob fails, there's some problem that will
+      // likely prevent preview and export (e.g. canvas too big)
+      return canvasToBlob(canvas).then(() => {
+        canvasNode.replaceChildren(canvas);
+      });
+    });
+  }, [canvasData, canvasRef]);
+
   const setAppState = useExcalidrawSetAppState();
   if (appState?.activeTool?.type !== "mermaid") {
     return null;
   }
+
+  const onChange = async (event: any) => {
+    setText(event.target.value);
+    let mermaidGraphData;
+    try {
+      mermaidGraphData = await parseMermaid(event.target.value, {
+        fontSize: DEFAULT_FONT_SIZE,
+      });
+    } catch (e) {
+      // Parse error, displaying error message to users
+    }
+
+    if (mermaidGraphData) {
+      const { elements, files } = graphToExcalidraw(mermaidGraphData);
+
+      setCanvasData({ elements: convertToExcalidrawElements(elements), files });
+    }
+  };
+
+  const onClose = () => {
+    const activeTool = updateActiveTool(appState, { type: "selection" });
+    setAppState({ activeTool });
+  };
+
+  const onSelect = () => {
+    app.scene.replaceAllElements([...elements, ...canvasData.elements]);
+    app.addFiles(Object.values(canvasData.files || []));
+    app.scrollToContent(canvasData.elements);
+    onClose();
+  };
+
   return (
-    <Dialog
-      onCloseRequest={() => {
-        const activeTool = updateActiveTool(appState, { type: "selection" });
-        setAppState({ activeTool });
-      }}
-      title="Mermaid to Excalidraw"
-    >
+    <Dialog onCloseRequest={onClose} title="Mermaid to Excalidraw">
       <div className="mermaid-to-excalidraw-wrapper">
         <div className="mermaid-to-excalidraw-wrapper-text">
           <label>Describe</label>
-          <textarea />
+          <textarea onChange={onChange} value={text} />
         </div>
         <div className="mermaid-to-excalidraw-wrapper-preview">
           <label>Preview</label>
-          <div className="mermaid-to-excalidraw-wrapper-preview-canvas"></div>
+          <div
+            className="mermaid-to-excalidraw-wrapper-preview-canvas"
+            ref={canvasRef}
+          ></div>
           <Button
             className="mermaid-to-excalidraw-wrapper-preview-insert"
-            onSelect={() => console.log("hey")}
+            onSelect={onSelect}
           >
             Insert
           </Button>

src/data/transform.ts

@@ -159,7 +159,7 @@ export type ExcalidrawElementSkeleton =
     } & Partial<ExcalidrawImageElement>);
 
 const DEFAULT_LINEAR_ELEMENT_PROPS = {
-  width: 300,
+  width: 100,
   height: 0,
 };
 

src/element/dragElements.ts

@@ -7,7 +7,11 @@ import { AppState, PointerDownState } from "../types";
 import { getBoundTextElement } from "./textElement";
 import { isSelectedViaGroup } from "../groups";
 import Scene from "../scene/Scene";
-import { isFrameElement } from "./typeChecks";
+import {
+  isArrowElement,
+  isBoundToContainer,
+  isFrameElement,
+} from "./typeChecks";
 
 export const dragSelectedElements = (
   pointerDownState: PointerDownState,
@@ -36,6 +40,7 @@ export const dragSelectedElements = (
   if (frames.length > 0) {
     const elementsInFrames = scene
       .getNonDeletedElements()
+      .filter((e) => !isBoundToContainer(e))
       .filter((e) => e.frameId !== null)
       .filter((e) => frames.includes(e.frameId!));
 
@@ -54,20 +59,16 @@ export const dragSelectedElements = (
     // update coords of bound text only if we're dragging the container directly
     // (we don't drag the group that it's part of)
     if (
+      // Don't update coords of arrow label since we calculate its position during render
+      !isArrowElement(element) &&
       // container isn't part of any group
       // (perf optim so we don't check `isSelectedViaGroup()` in every case)
-      !element.groupIds.length ||
-      // container is part of a group, but we're dragging the container directly
-      (appState.editingGroupId && !isSelectedViaGroup(appState, element))
+      (!element.groupIds.length ||
+        // container is part of a group, but we're dragging the container directly
+        (appState.editingGroupId && !isSelectedViaGroup(appState, element)))
     ) {
       const textElement = getBoundTextElement(element);
-      if (
-        textElement &&
-        // when container is added to a frame, so will its bound text
-        // so the text is already in `elementsToUpdate` and we should avoid
-        // updating its coords again
-        (!textElement.frameId || !frames.includes(textElement.frameId))
-      ) {
+      if (textElement) {
         updateElementCoords(
           lockDirection,
           distanceX,

src/types.ts

@@ -525,6 +525,8 @@ export type AppClassProperties = {
   onInsertElements: App["onInsertElements"];
   onExportImage: App["onExportImage"];
   lastViewportPosition: App["lastViewportPosition"];
+  scrollToContent: App["scrollToContent"];
+  addFiles: App["addFiles"];
 };
 
 export type PointerDownState = Readonly<{