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

excalidraw_canvas.tsx

Browse source
This commit is contained in:
Martin Kavík 2024-10-08 19:26:46 +02:00
parent bdb37a7357
commit ae74973b13
6 changed files with 70 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
Makefile.toml
View file

@ -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",

4
backend/globals.js
View file

@ -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 };
// -- / --

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

@ -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)]

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

@ -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));

30
frontend/typescript/excalidraw_canvas/excalidraw_canvas.ts
View file

@ -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));
}
}

44
frontend/typescript/excalidraw_canvas/excalidraw_canvas.tsx Normal file
View file

@ -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));
}
}