diff --git a/frontend/src/diagram_panel.rs b/frontend/src/diagram_panel.rs index 51fb3b7..af68be0 100644 --- a/frontend/src/diagram_panel.rs +++ b/frontend/src/diagram_panel.rs @@ -6,17 +6,14 @@ pub use excalidraw_canvas::ExcalidrawController; #[derive(Clone)] pub struct DiagramPanel { - canvas_controller: Mutable>>> + canvas_controller: Mutable>>>, } impl DiagramPanel { pub fn new( canvas_controller: Mutable>>>, ) -> impl Element { - Self { - canvas_controller - } - .root() + Self { canvas_controller }.root() } fn root(&self) -> impl Element { @@ -26,7 +23,6 @@ impl DiagramPanel { .s(Width::fill()) .s(Height::fill()) .s(Gap::new().y(20)) - .item("Diagram panel") .item(self.canvas()) } @@ -38,7 +34,6 @@ impl DiagramPanel { .s(Height::fill()) .task_with_controller(move |controller| { canvas_controller.set(controller.clone()); - zoon::println!("hello from task_with_controller"); async {} }) } diff --git a/frontend/src/diagram_panel/excalidraw_canvas.rs b/frontend/src/diagram_panel/excalidraw_canvas.rs index 04e1e00..efb8ea2 100644 --- a/frontend/src/diagram_panel/excalidraw_canvas.rs +++ b/frontend/src/diagram_panel/excalidraw_canvas.rs @@ -4,10 +4,6 @@ use zoon::*; pub struct ExcalidrawCanvas { raw_el: RawHtmlEl, controller: Mutable>>, - #[allow(dead_code)] - width: ReadOnlyMutable, - #[allow(dead_code)] - height: ReadOnlyMutable, task_with_controller: Mutable>, } @@ -32,35 +28,13 @@ impl ExcalidrawCanvas { pub fn new() -> Self { let controller: Mutable>> = Mutable::new(None); - let width = Mutable::new(0); - let height = Mutable::new(0); - let resize_task = Task::start_droppable( - map_ref! { - let width = width.signal(), - let height = height.signal() => (*width, *height) - } - .dedupe() - .throttle(|| Timer::sleep(50)) - .for_each( - clone!((controller) move |(width, height)| clone!((controller) async move { - if let Some(controller) = controller.lock_ref().as_ref() { - controller.resize(width, height).await - } - })), - ), - ); let task_with_controller = Mutable::new(None); Self { controller: controller.clone(), - width: width.read_only(), - height: height.read_only(), task_with_controller: task_with_controller.clone(), raw_el: El::new() + .s(RoundedCorners::all(10)) .s(Clip::both()) - .on_viewport_size_change(clone!((width, height) move |new_width, new_height| { - width.set_neq(new_width); - height.set_neq(new_height); - })) .after_insert(clone!((controller) move |element| { Task::start(async move { let excalidraw_controller = SendWrapper::new(js_bridge::ExcalidrawController::new()); @@ -69,11 +43,7 @@ impl ExcalidrawCanvas { }); })) .after_remove(move |_| { - drop(resize_task); drop(task_with_controller); - if let Some(controller) = controller.take() { - controller.destroy(); - } }) .into_raw_el(), } @@ -103,16 +73,5 @@ mod js_bridge { #[wasm_bindgen(method)] pub async fn init(this: &ExcalidrawController, parent_element: &JsValue); - - #[wasm_bindgen(method)] - pub async fn resize(this: &ExcalidrawController, width: u32, height: u32); - - #[wasm_bindgen(method)] - pub fn destroy(this: &ExcalidrawController); - - // -- FastWave-specific -- - - #[wasm_bindgen(method)] - pub fn hello(this: &ExcalidrawController); } } diff --git a/frontend/src/header_panel.rs b/frontend/src/header_panel.rs index 39ff84a..c2ed570 100644 --- a/frontend/src/header_panel.rs +++ b/frontend/src/header_panel.rs @@ -2,8 +2,6 @@ use crate::{platform, theme::*, Filename, Layout, Mode}; use std::sync::Arc; use zoon::*; - - pub struct HeaderPanel { hierarchy: Mutable>>, layout: Mutable, @@ -38,7 +36,7 @@ impl HeaderPanel { .s(Gap::both(15)) .item(self.load_button()) .item(self.layout_switcher()) - .item(self.mode_switcher()) + .item(self.mode_switcher()), ) } diff --git a/frontend/src/main.rs b/frontend/src/main.rs index dc0bebb..51ee649 100644 --- a/frontend/src/main.rs +++ b/frontend/src/main.rs @@ -8,7 +8,7 @@ mod controls_panel; use controls_panel::ControlsPanel; mod diagram_panel; -use diagram_panel::{ExcalidrawController, DiagramPanel}; +use diagram_panel::{DiagramPanel, ExcalidrawController}; mod waveform_panel; use waveform_panel::{PixiController, WaveformPanel}; diff --git a/frontend/typescript/bundles/excalidraw_canvas.js b/frontend/typescript/bundles/excalidraw_canvas.js index e6e5691..750261c 100644 --- a/frontend/typescript/bundles/excalidraw_canvas.js +++ b/frontend/typescript/bundles/excalidraw_canvas.js @@ -74737,51 +74737,29 @@ var require_client = __commonJS({ var import_excalidraw = __toESM(require_main()); var React = __toESM(require_react()); var ReactDOM = __toESM(require_client()); -function attach_to_canvas() { - const App = () => { - return React.createElement( - React.Fragment, - null, - React.createElement( - "div", - { - style: { height: "500px" } - }, - React.createElement(import_excalidraw.Excalidraw) - ) - ); - }; - const excalidrawWrapper = document.getElementById("excalidraw_canvas"); - const root = ReactDOM.createRoot(excalidrawWrapper); -} var ExcalidrawController = class { - // app: Application - // // -- FastWave-specific -- - // var_signal_rows: Array = []; - // var_signal_rows_container = new Container(); - // // @TODO reset `timeline_*` on file unload? - // timeline_zoom: number; - // timeline_viewport_width: number; - // timeline_viewport_x: number; - // row_height: number; - // row_gap: number; - // timeline_getter: TimelineGetter; constructor() { - this.hello(); } async init(parent_element) { - } - async resize(width, _height) { - } - destroy() { - } - hello() { - console.log("Hello from excalidraw_canvas TS"); + const App = () => { + return React.createElement( + React.Fragment, + null, + React.createElement( + "div", + { + style: { height: "100%" } + }, + React.createElement(import_excalidraw.Excalidraw) + ) + ); + }; + const root = ReactDOM.createRoot(parent_element); + root.render(React.createElement(App)); } }; export { - ExcalidrawController, - attach_to_canvas + ExcalidrawController }; /*! Bundled license information: diff --git a/frontend/typescript/excalidraw_canvas/excalidraw_canvas.ts b/frontend/typescript/excalidraw_canvas/excalidraw_canvas.ts index 70f9f30..6e44597 100644 --- a/frontend/typescript/excalidraw_canvas/excalidraw_canvas.ts +++ b/frontend/typescript/excalidraw_canvas/excalidraw_canvas.ts @@ -2,86 +2,25 @@ import { Excalidraw } from '@excalidraw/excalidraw' import * as React from 'react' import * as ReactDOM from 'react-dom/client' -export function attach_to_canvas() { - const App = () => { - return React.createElement( - React.Fragment, - null, - React.createElement( - "div", - { - style: { height: "500px" }, - }, - React.createElement(Excalidraw), - ), - ); - }; - - const excalidrawWrapper = document.getElementById("excalidraw_canvas"); - const root = ReactDOM.createRoot(excalidrawWrapper!); -} - export class ExcalidrawController { - // app: Application - // // -- FastWave-specific -- - // var_signal_rows: Array = []; - // var_signal_rows_container = new Container(); - // // @TODO reset `timeline_*` on file unload? - // timeline_zoom: number; - // timeline_viewport_width: number; - // timeline_viewport_x: number; - // row_height: number; - // row_gap: number; - // timeline_getter: TimelineGetter; - - constructor( - // timeline_zoom: number, - // timeline_viewport_width: number, - // timeline_viewport_x: number, - // row_height: number, - // row_gap: number, - // timeline_getter: TimelineGetter - ) { - this.hello() - // this.app = new Application(); - // // -- FastWave-specific -- - // this.timeline_zoom = timeline_zoom; - // this.timeline_viewport_width = timeline_viewport_width; - // this.timeline_viewport_x = timeline_viewport_x; - // this.row_height = row_height; - // this.row_gap = row_gap; - // this.app.stage.addChild(this.var_signal_rows_container); - // this.timeline_getter = timeline_getter; - } + constructor() {} async init(parent_element: HTMLElement) { - // await this.app.init({ background: color_dark_slate_blue, antialias: true, resizeTo: parent_element }); - // parent_element.appendChild(this.app.canvas); - } - - async resize(width: number, _height: number) { - // // -- FastWave-specific -- - // this.timeline_viewport_width = width; - // await this.redraw_all_rows(); - // // -- // -- - // this.app.queueResize(); - } - - destroy() { - // const rendererDestroyOptions = { - // removeView: true - // } - // const options = { - // children: true, - // texture: true, - // textureSource: true, - // context: true, - // } - // this.app.destroy(rendererDestroyOptions, options); - } - - hello() { - console.log("Hello from excalidraw_canvas TS") + const App = () => { + return React.createElement( + React.Fragment, + null, + React.createElement( + "div", + { + style: { height: "100%" }, + }, + React.createElement(Excalidraw), + ), + ); + }; + const root = ReactDOM.createRoot(parent_element); + root.render(React.createElement(App)); } } \ No newline at end of file