From ae74973b13cb08122d334a7378a5c2c1e4125c8f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Martin=20Kav=C3=ADk?= <martin@kavik.cz>
Date: Tue, 8 Oct 2024 19:26:46 +0200
Subject: [PATCH] excalidraw_canvas.tsx

---
 Makefile.toml                                 |  5 ++-
 backend/globals.js                            |  4 ++
 .../src/diagram_panel/excalidraw_canvas.rs    |  2 +-
 .../typescript/bundles/excalidraw_canvas.js   | 34 +++++++-------
 .../excalidraw_canvas/excalidraw_canvas.ts    | 30 -------------
 .../excalidraw_canvas/excalidraw_canvas.tsx   | 44 +++++++++++++++++++
 6 files changed, 70 insertions(+), 49 deletions(-)
 delete mode 100644 frontend/typescript/excalidraw_canvas/excalidraw_canvas.ts
 create mode 100644 frontend/typescript/excalidraw_canvas/excalidraw_canvas.tsx

diff --git a/Makefile.toml b/Makefile.toml
index 880e71e..0b80b0e 100644
--- a/Makefile.toml
+++ b/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",
diff --git a/backend/globals.js b/backend/globals.js
index 5e5189d..17d69ec 100644
--- a/backend/globals.js
+++ b/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 };
+// -- / --
diff --git a/frontend/src/diagram_panel/excalidraw_canvas.rs b/frontend/src/diagram_panel/excalidraw_canvas.rs
index efb8ea2..5414164 100644
--- a/frontend/src/diagram_panel/excalidraw_canvas.rs
+++ b/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)]
diff --git a/frontend/typescript/bundles/excalidraw_canvas.js b/frontend/typescript/bundles/excalidraw_canvas.js
index 8f8af22..00365af 100644
--- a/frontend/typescript/bundles/excalidraw_canvas.js
+++ b/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(
-        React.Fragment,
-        null,
-        React.createElement(
-          "div",
-          {
-            style: { height: "100%" }
-          },
-          React.createElement(import_excalidraw.Excalidraw, {
-            theme: "dark",
-            gridModeEnabled: true,
-            UIOptions: { canvasActions: { toggleTheme: true } }
-          })
-        )
-      );
+      return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { style: { height: "100%" } }, /* @__PURE__ */ React.createElement(
+        import_excalidraw.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
+          } }
+        },
+        /* @__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));
diff --git a/frontend/typescript/excalidraw_canvas/excalidraw_canvas.ts b/frontend/typescript/excalidraw_canvas/excalidraw_canvas.ts
deleted file mode 100644
index 95f19d6..0000000
--- a/frontend/typescript/excalidraw_canvas/excalidraw_canvas.ts
+++ /dev/null
@@ -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));
-    }
-}
-  
\ No newline at end of file
diff --git a/frontend/typescript/excalidraw_canvas/excalidraw_canvas.tsx b/frontend/typescript/excalidraw_canvas/excalidraw_canvas.tsx
new file mode 100644
index 0000000..3c2ec5f
--- /dev/null
+++ b/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));
+    }
+}
+  
\ No newline at end of file