excalidraw_canvas.tsx

Makefile.toml

@@ -311,7 +311,7 @@ run_task = { fork = true, parallel = true, name = [
 description = "Compile `frontend/typescript/excalidraw_canvas` on change"
 cwd = "frontend/typescript/excalidraw_canvas"
 command = "node_modules/.bin/esbuild"
-args = ["excalidraw_canvas.ts", "--bundle", "--outfile=../bundles/excalidraw_canvas.js", "--format=esm", "--watch"]
+args = ["excalidraw_canvas.tsx", "--bundle", "--outfile=../bundles/excalidraw_canvas.js", "--format=esm", "--watch"]
 
 [tasks.watch_build_excalidraw_canvas.windows]
 command = "node_modules/.bin/esbuild.cmd"
@@ -321,7 +321,8 @@ description = "Typecheck `frontend/typescript/excalidraw_canvas` on change"
 cwd = "frontend/typescript/excalidraw_canvas"
 command = "node_modules/.bin/tsc"
 args = [
-    "excalidraw_canvas.ts",
+    "excalidraw_canvas.tsx",
+    "--jsx",
     "--watch",
     "--noEmit",
     "--preserveWatchOutput",

backend/globals.js

@@ -1 +1,5 @@
+// -- Excalidraw settings --
+// @TODO replace with "true" once Preact is integrated to ExcalidrawCanvas
 var process = { env: { IS_PREACT: "false" } };
+window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = { isDisabled: true };
+// -- / --

frontend/src/diagram_panel/excalidraw_canvas.rs

@@ -62,7 +62,7 @@ impl ExcalidrawCanvas {
 mod js_bridge {
     use zoon::*;
 
-    // Note: Add all corresponding methods to `frontend/typescript/excalidraw_canvas/excalidraw_canvas.ts`
+    // Note: Add all corresponding methods to `frontend/typescript/excalidraw_canvas/excalidraw_canvas.tsx`
     #[wasm_bindgen(module = "/typescript/bundles/excalidraw_canvas.js")]
     extern "C" {
         #[derive(Clone)]

frontend/typescript/bundles/excalidraw_canvas.js

@@ -74733,7 +74733,7 @@ var require_client = __commonJS({
   }
 });
 
-// excalidraw_canvas.ts
+// excalidraw_canvas.tsx
 var import_excalidraw = __toESM(require_main());
 var React = __toESM(require_react());
 var ReactDOM = __toESM(require_client());
@@ -74742,21 +74742,23 @@ var ExcalidrawController = class {
   }
   async init(parent_element) {
     const App = () => {
-      return React.createElement(
+      return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { style: { height: "100%" } }, /* @__PURE__ */ React.createElement(
-        React.Fragment,
+        import_excalidraw.Excalidraw,
-        null,
+        {
-        React.createElement(
+          theme: "dark",
-          "div",
+          gridModeEnabled: true,
-          {
+          UIOptions: { canvasActions: { toggleTheme: true } },
-            style: { height: "100%" }
+          initialData: { appState: {
-          },
+            // Canvas background: 3. default, blue
-          React.createElement(import_excalidraw.Excalidraw, {
+            viewBackgroundColor: "#f5faff",
-            theme: "dark",
+            // Sloppiness: Artist
-            gridModeEnabled: true,
+            currentItemRoughness: 0,
-            UIOptions: { canvasActions: { toggleTheme: true } }
+            // Font family: Code
-          })
+            currentItemFontFamily: 3
-        )
+          } }
-      );
+        },
+        /* @__PURE__ */ React.createElement(import_excalidraw.MainMenu, null, /* @__PURE__ */ React.createElement(import_excalidraw.MainMenu.DefaultItems.LoadScene, null), /* @__PURE__ */ React.createElement(import_excalidraw.MainMenu.DefaultItems.SaveToActiveFile, null), /* @__PURE__ */ React.createElement(import_excalidraw.MainMenu.DefaultItems.Export, null), /* @__PURE__ */ React.createElement(import_excalidraw.MainMenu.DefaultItems.SaveAsImage, null), /* @__PURE__ */ React.createElement(import_excalidraw.MainMenu.DefaultItems.ClearCanvas, null), /* @__PURE__ */ React.createElement(import_excalidraw.MainMenu.DefaultItems.ToggleTheme, null), /* @__PURE__ */ React.createElement(import_excalidraw.MainMenu.DefaultItems.ChangeCanvasBackground, null))
+      )));
     };
     const root = ReactDOM.createRoot(parent_element);
     root.render(React.createElement(App));

frontend/typescript/excalidraw_canvas/excalidraw_canvas.ts

@@ -1,30 +0,0 @@
-import { Excalidraw } from '@excalidraw/excalidraw'
-import * as React from 'react'
-import * as ReactDOM from 'react-dom/client'
-
-export class ExcalidrawController {
-    constructor() {}
-
-    async init(parent_element: HTMLElement) {
-        const App = () => {
-            return React.createElement(
-              React.Fragment,
-              null,
-              React.createElement(
-                "div",
-                {
-                  style: { height: "100%" },
-                },
-                React.createElement(Excalidraw, { 
-                    theme: 'dark',
-                    gridModeEnabled: true,
-                    UIOptions: { canvasActions: { toggleTheme: true } }
-                }),
-              ),
-            );
-          };
-        const root = ReactDOM.createRoot(parent_element);
-        root.render(React.createElement(App));
-    }
-}
-  

frontend/typescript/excalidraw_canvas/excalidraw_canvas.tsx

@@ -0,0 +1,44 @@
+import { Excalidraw, MainMenu } from '@excalidraw/excalidraw'
+import * as React from 'react'
+import * as ReactDOM from 'react-dom/client'
+
+export class ExcalidrawController {
+    constructor() {}
+
+    async init(parent_element: HTMLElement) {
+        const App = () => {
+            return (
+              <>
+                <div style={{ height: "100%" }}>
+                  <Excalidraw 
+                    theme='dark'
+                    gridModeEnabled={true}
+                    UIOptions={{canvasActions: {toggleTheme: true}}}
+                    initialData={{appState: {
+                      // Canvas background: 3. default, blue
+                      viewBackgroundColor: "#f5faff",
+                      // Sloppiness: Artist
+                      currentItemRoughness: 0,
+                      // Font family: Code
+                      currentItemFontFamily: 3,
+                    }}}
+                  >
+                    <MainMenu>
+                      <MainMenu.DefaultItems.LoadScene />
+                      <MainMenu.DefaultItems.SaveToActiveFile />
+                      <MainMenu.DefaultItems.Export />
+                      <MainMenu.DefaultItems.SaveAsImage />
+                      <MainMenu.DefaultItems.ClearCanvas />
+                      <MainMenu.DefaultItems.ToggleTheme />
+                      <MainMenu.DefaultItems.ChangeCanvasBackground />
+                    </MainMenu>
+                  </Excalidraw>
+                </div>
+              </>
+            );
+          };
+        const root = ReactDOM.createRoot(parent_element);
+        root.render(React.createElement(App));
+    }
+}
+