draw_diagram_element

2024-10-10 23:58:14 +02:00 · 2024-10-10 23:58:14 +02:00 · 5e67646672
parent 3c3b71175e
commit 5e67646672
6 changed files with 86 additions and 44 deletions
--- a/frontend/src/diagram_panel/excalidraw_canvas.rs
+++ b/frontend/src/diagram_panel/excalidraw_canvas.rs
@ -73,5 +73,8 @@ mod js_bridge {

        #[wasm_bindgen(method)]
        pub async fn init(this: &ExcalidrawController, parent_element: &JsValue);
+
+        #[wasm_bindgen(method)]
+        pub fn draw_diagram_element(this: &ExcalidrawController, excalidraw_element: JsValue);
    }
 }
--- a/frontend/src/script_bridge.rs
+++ b/frontend/src/script_bridge.rs
@ -78,4 +78,17 @@ impl FW {
    pub async fn remove_all_decoders() -> RemovedDecodersCount {
        platform::remove_all_decoders().await
    }
+
+    // @TODO replace argument once Excalidraw's `convertToExcalidrawElements` works: {type: "rectangle", x: 100, y: 250}
+    /// JS: `FW.draw_diagram_element({id: 'my_rectangle', type: 'rectangle', x: 500,  y: 250, strokeColor: 'black', backgroundColor: 'lightblue', fillStyle: 'solid', strokeWidth: 5, strokeStyle: 'solid', roundness: null, roughness: 0, opacity: 100, width: 100, height: 50, angle: 0, seed: 0, version: 0, versionNonce: 0, isDeleted: false, groupIds: [], frameId: null, boundElements: null, updated: 0, link: null, locked: false, customData: {}})`
+    pub async fn draw_diagram_element(excalidraw_element: JsValue) {
+        if let Some(controller) = STORE
+            .excalidraw_canvas_controller
+            .lock_ref()
+            .lock_ref()
+            .as_ref()
+        {
+            controller.draw_diagram_element(excalidraw_element)
+        }
+    }
 }
--- a/frontend/typescript/bundles/excalidraw_canvas.js
+++ b/frontend/typescript/bundles/excalidraw_canvas.js
@ -74738,8 +74738,17 @@ var import_excalidraw = __toESM(require_main());
 var React = __toESM(require_react());
 var ReactDOM = __toESM(require_client());
 var ExcalidrawController = class {
+  api;
  constructor() {
  }
+  draw_diagram_element(excalidraw_element) {
+    if (typeof this.api !== "undefined") {
+      const elements = this.api.getSceneElements();
+      this.api.updateScene({
+        elements: elements.concat(excalidraw_element)
+      });
+    }
+  }
  async init(parent_element) {
    const App = () => {
      return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { style: { height: "100%" } }, /* @__PURE__ */ React.createElement(
@ -74755,7 +74764,8 @@ var ExcalidrawController = class {
            currentItemRoughness: 0,
            // Font family: Code
            currentItemFontFamily: 3
-          } }
+          } },
+          excalidrawAPI: (api) => this.api = api
        },
        /* @__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))
      )));
--- a/frontend/typescript/excalidraw_canvas/excalidraw_canvas.tsx
+++ b/frontend/typescript/excalidraw_canvas/excalidraw_canvas.tsx
@ -1,44 +1,60 @@
 import { Excalidraw, MainMenu } from '@excalidraw/excalidraw'
+import { ExcalidrawImperativeAPI } from '@excalidraw/excalidraw/types/types'
+import { ExcalidrawElement } from '@excalidraw/excalidraw/types/element/types'
+// @TODO doesn't work with Excalidraw 0.17.6
+// import { ExcalidrawElementSkeleton, convertToExcalidrawElements } from '@excalidraw/excalidraw/types/data/transform'
 import * as React from 'react'
 import * as ReactDOM from 'react-dom/client'

 export class ExcalidrawController {
+    api: ExcalidrawImperativeAPI | undefined
+
    constructor() {}

+    draw_diagram_element(excalidraw_element: ExcalidrawElement) {
+      if (typeof this.api !== 'undefined') {
+        const elements = this.api.getSceneElements()
+        this.api.updateScene({
+          elements: elements.concat(excalidraw_element)
+        })
+      }
+    }
+
    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));
+      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,
+                }}}
+                excalidrawAPI={(api) => this.api = api}
+              >
+                <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));
    }
 }
  
--- a/frontend/typescript/excalidraw_canvas/package-lock.json
+++ b/frontend/typescript/excalidraw_canvas/package-lock.json
@ -7,7 +7,7 @@
      "dependencies": {
        "@excalidraw/excalidraw": "0.17.6",
        "@excalidraw/laser-pointer": "1.3.1",
-        "@types/react": "18.3.10",
+        "@types/react": "18.3.11",
        "@types/react-dom": "18.3.0",
        "browser-fs-access": "0.35.0",
        "jotai": "2.10.0",
@ -17,7 +17,7 @@
      },
      "devDependencies": {
        "esbuild": "^0.24.0",
-        "typescript": "^5.6.2"
+        "typescript": "^5.6.3"
      }
    },
    "node_modules/@esbuild/aix-ppc64": {
@ -424,9 +424,9 @@
      "integrity": "sha512-hCZTSvwbzWGvhqxp/RqVqwU999pBf2vp7hzIjiYOsl8wqOmUxkQ6ddw1cV3l8811+kdUFus/q4d1Y3E3SyEifA=="
    },
    "node_modules/@types/react": {
-      "version": "18.3.10",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.10.tgz",
-      "integrity": "sha512-02sAAlBnP39JgXwkAq3PeU9DVaaGpZyF3MGcC0MKgQVkZor5IiiDAipVaxQHtDJAmO4GIy/rVBy/LzVj76Cyqg==",
+      "version": "18.3.11",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.11.tgz",
+      "integrity": "sha512-r6QZ069rFTjrEYgFdOck1gK7FLVsgJE7tTz0pQBczlBNUhBNk0MQH4UbnFSwjpQLMkLzgqvBBa+qGpLje16eTQ==",
      "dependencies": {
        "@types/prop-types": "*",
        "csstype": "^3.0.2"
@ -592,9 +592,9 @@
      }
    },
    "node_modules/typescript": {
-      "version": "5.6.2",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.6.2.tgz",
-      "integrity": "sha512-NW8ByodCSNCwZeghjN3o+JX5OFH0Ojg6sadjEKY4huZ52TqbJTJnDo5+Tw98lSy63NZvi4n+ez5m2u5d4PkZyw==",
+      "version": "5.6.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.6.3.tgz",
+      "integrity": "sha512-hjcS1mhfuyi4WW8IWtjP7brDrG2cuDZukyrYrSauoXGNgx0S7zceP07adYkJycEr56BOUTNPzbInooiN3fn1qw==",
      "dev": true,
      "bin": {
        "tsc": "bin/tsc",
--- a/frontend/typescript/excalidraw_canvas/package.json
+++ b/frontend/typescript/excalidraw_canvas/package.json
@ -2,7 +2,7 @@
  "dependencies": {
    "@excalidraw/excalidraw": "0.17.6",
    "@excalidraw/laser-pointer": "1.3.1",
-    "@types/react": "18.3.10",
+    "@types/react": "18.3.11",
    "@types/react-dom": "18.3.0",
    "browser-fs-access": "0.35.0",
    "jotai": "2.10.0",
@ -12,6 +12,6 @@
  },
  "devDependencies": {
    "esbuild": "^0.24.0",
-    "typescript": "^5.6.2"
+    "typescript": "^5.6.3"
  }
 }