Products/FastWave2.0
2
0
Fork 0
Code Issues 8 Pull requests Actions Packages Projects Releases 1 Wiki Activity

draw_diagram_element

Browse source
This commit is contained in:
Martin Kavík 2024-10-10 23:58:14 +02:00
parent 3c3b71175e
commit 5e67646672
6 changed files with 86 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
frontend/src/diagram_panel/excalidraw_canvas.rs
View file

@ -73,5 +73,8 @@ mod js_bridge {
#[wasm_bindgen(method)] #[wasm_bindgen(method)]
pub async fn init(this: &ExcalidrawController, parent_element: &JsValue); pub async fn init(this: &ExcalidrawController, parent_element: &JsValue);
#[wasm_bindgen(method)]
pub fn draw_diagram_element(this: &ExcalidrawController, excalidraw_element: JsValue);
} }
} }

13
frontend/src/script_bridge.rs
View file

@ -78,4 +78,17 @@ impl FW {
pub async fn remove_all_decoders() -> RemovedDecodersCount { pub async fn remove_all_decoders() -> RemovedDecodersCount {
platform::remove_all_decoders().await 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)
}
}
} }

12
frontend/typescript/bundles/excalidraw_canvas.js
View file

@ -74738,8 +74738,17 @@ var import_excalidraw = __toESM(require_main());
var React = __toESM(require_react()); var React = __toESM(require_react());
var ReactDOM = __toESM(require_client()); var ReactDOM = __toESM(require_client());
var ExcalidrawController = class { var ExcalidrawController = class {
api;
constructor() { 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) { async init(parent_element) {
const App = () => { const App = () => {
return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { style: { height: "100%" } }, /* @__PURE__ */ React.createElement( 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, currentItemRoughness: 0,
// Font family: Code // Font family: Code
currentItemFontFamily: 3 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)) /* @__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))
))); )));

82
frontend/typescript/excalidraw_canvas/excalidraw_canvas.tsx
View file

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

16
frontend/typescript/excalidraw_canvas/package-lock.json generated
View file

@ -7,7 +7,7 @@
"dependencies": { "dependencies": {
"@excalidraw/excalidraw": "0.17.6", "@excalidraw/excalidraw": "0.17.6",
"@excalidraw/laser-pointer": "1.3.1", "@excalidraw/laser-pointer": "1.3.1",
"@types/react": "18.3.10", "@types/react": "18.3.11",
"@types/react-dom": "18.3.0", "@types/react-dom": "18.3.0",
"browser-fs-access": "0.35.0", "browser-fs-access": "0.35.0",
"jotai": "2.10.0", "jotai": "2.10.0",
@ -17,7 +17,7 @@
}, },
"devDependencies": { "devDependencies": {
"esbuild": "^0.24.0", "esbuild": "^0.24.0",
"typescript": "^5.6.2" "typescript": "^5.6.3"
} }
}, },
"node_modules/@esbuild/aix-ppc64": { "node_modules/@esbuild/aix-ppc64": {
@ -424,9 +424,9 @@
"integrity": "sha512-hCZTSvwbzWGvhqxp/RqVqwU999pBf2vp7hzIjiYOsl8wqOmUxkQ6ddw1cV3l8811+kdUFus/q4d1Y3E3SyEifA==" "integrity": "sha512-hCZTSvwbzWGvhqxp/RqVqwU999pBf2vp7hzIjiYOsl8wqOmUxkQ6ddw1cV3l8811+kdUFus/q4d1Y3E3SyEifA=="
}, },
"node_modules/@types/react": { "node_modules/@types/react": {
"version": "18.3.10", "version": "18.3.11",
"resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.10.tgz", "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.11.tgz",
"integrity": "sha512-02sAAlBnP39JgXwkAq3PeU9DVaaGpZyF3MGcC0MKgQVkZor5IiiDAipVaxQHtDJAmO4GIy/rVBy/LzVj76Cyqg==", "integrity": "sha512-r6QZ069rFTjrEYgFdOck1gK7FLVsgJE7tTz0pQBczlBNUhBNk0MQH4UbnFSwjpQLMkLzgqvBBa+qGpLje16eTQ==",
"dependencies": { "dependencies": {
"@types/prop-types": "*", "@types/prop-types": "*",
"csstype": "^3.0.2" "csstype": "^3.0.2"
@ -592,9 +592,9 @@
} }
}, },
"node_modules/typescript": { "node_modules/typescript": {
"version": "5.6.2", "version": "5.6.3",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-5.6.2.tgz", "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.6.3.tgz",
"integrity": "sha512-NW8ByodCSNCwZeghjN3o+JX5OFH0Ojg6sadjEKY4huZ52TqbJTJnDo5+Tw98lSy63NZvi4n+ez5m2u5d4PkZyw==", "integrity": "sha512-hjcS1mhfuyi4WW8IWtjP7brDrG2cuDZukyrYrSauoXGNgx0S7zceP07adYkJycEr56BOUTNPzbInooiN3fn1qw==",
"dev": true, "dev": true,
"bin": { "bin": {
"tsc": "bin/tsc", "tsc": "bin/tsc",

4
frontend/typescript/excalidraw_canvas/package.json
View file

@ -2,7 +2,7 @@
"dependencies": { "dependencies": {
"@excalidraw/excalidraw": "0.17.6", "@excalidraw/excalidraw": "0.17.6",
"@excalidraw/laser-pointer": "1.3.1", "@excalidraw/laser-pointer": "1.3.1",
"@types/react": "18.3.10", "@types/react": "18.3.11",
"@types/react-dom": "18.3.0", "@types/react-dom": "18.3.0",
"browser-fs-access": "0.35.0", "browser-fs-access": "0.35.0",
"jotai": "2.10.0", "jotai": "2.10.0",
@ -12,6 +12,6 @@
}, },
"devDependencies": { "devDependencies": {
"esbuild": "^0.24.0", "esbuild": "^0.24.0",
"typescript": "^5.6.2" "typescript": "^5.6.3"
} }
} }