globals.js

MoonZoon.toml

@@ -25,6 +25,7 @@ frontend = [
 backend = [
     "backend/Cargo.toml",
     "backend/src",
+    "backend/globals.js",
     "backend/index.js",
     "backend/style.css",
 ]

backend/globals.js

@@ -0,0 +1 @@
+var process = { env: { IS_PREACT: "false" } };

backend/index.js

@@ -1,2 +1,3 @@
 import { FW } from '/_api/pkg/frontend.js';
 window.FW = FW;
+

backend/src/main.rs

@@ -5,6 +5,11 @@ async fn frontend() -> Frontend {
         .title("FastWave")
         .append_to_head(include_str!("../favicon.html")) // realfavicongenerator.net
         .append_to_head(concat!("<style>", include_str!("../style.css"), "</style>"))
+        .append_to_head(concat!(
+            "<script>",
+            include_str!("../globals.js"),
+            "</script>"
+        ))
         .append_to_head(concat!(
             "<script type=\"module\">",
             include_str!("../index.js"),

frontend/src/diagram_panel.rs

@@ -38,7 +38,8 @@ impl DiagramPanel {
             .s(Height::fill())
             .task_with_controller(move |controller| {
                 canvas_controller.set(controller.clone());
-                println!("hello from task_with_controller")
+                zoon::println!("hello from task_with_controller");
+                async {}
             })
     }
 }

frontend/src/diagram_panel/excalidraw_canvas.rs

@@ -1,6 +1,4 @@
-use crate::platform;
 pub use js_bridge::ExcalidrawController;
-use std::rc::Rc;
 use zoon::*;
 
 pub struct ExcalidrawCanvas {
@@ -63,38 +61,14 @@ impl ExcalidrawCanvas {
                     width.set_neq(new_width);
                     height.set_neq(new_height);
                 }))
-                .update_raw_el(|raw_el| {
+                .after_insert(clone!((controller) move |element| {
-                    // @TODO rewrite to a native Zoon API
-                    raw_el.event_handler_with_options(
-                        EventOptions::new().preventable(),
-                        clone!((controller) move |event: events_extra::WheelEvent| {
-                            event.prevent_default();
-                            if let Some(controller) = controller.lock_ref().as_ref() {
-                                controller.zoom_or_pan(
-                                    event.delta_y(),
-                                    event.shift_key(),
-                                    event.offset_x() as u32,
-                                );
-                            }
-                        }),
-                    )
-                })
-                .after_insert(clone!((controller, timeline_getter) move |element| {
                     Task::start(async move {
-                        let pixi_controller = SendWrapper::new(js_bridge::ExcalidrawController::new(
+                        let excalidraw_controller = SendWrapper::new(js_bridge::ExcalidrawController::new());
-                            1.,
+                        excalidraw_controller.init(&element).await;
-                            width.get(),
+                        controller.set(Some(excalidraw_controller));
-                            0,
-                            row_height,
-                            row_gap,
-                            &timeline_getter
-                        ));
-                        pixi_controller.init(&element).await;
-                        controller.set(Some(pixi_controller));
                     });
                 }))
                 .after_remove(move |_| {
-                    drop(timeline_getter);
                     drop(resize_task);
                     drop(task_with_controller);
                     if let Some(controller) = controller.take() {
@@ -124,6 +98,9 @@ mod js_bridge {
         #[derive(Clone)]
         pub type ExcalidrawController;
 
+        #[wasm_bindgen(constructor)]
+        pub fn new() -> ExcalidrawController;
+
         #[wasm_bindgen(method)]
         pub async fn init(this: &ExcalidrawController, parent_element: &JsValue);
 
@@ -136,6 +113,6 @@ mod js_bridge {
         // -- FastWave-specific --
 
         #[wasm_bindgen(method)]
-        pub fn get_timeline_zoom(this: &ExcalidrawController) -> f64;
+        pub fn hello(this: &ExcalidrawController);
     }
 }

frontend/src/main.rs

@@ -8,7 +8,7 @@ mod controls_panel;
 use controls_panel::ControlsPanel;
 
 mod diagram_panel;
-use diagram_panel::DiagramPanel;
+use diagram_panel::{ExcalidrawController, DiagramPanel};
 
 mod waveform_panel;
 use waveform_panel::{PixiController, WaveformPanel};
@@ -45,7 +45,8 @@ struct Store {
     selected_var_refs: MutableVec<wellen::VarRef>,
     hierarchy: Mutable<Option<Arc<wellen::Hierarchy>>>,
     loaded_filename: Mutable<Option<Filename>>,
-    canvas_controller: Mutable<Mutable<Option<SendWrapper<PixiController>>>>,
+    pixi_canvas_controller: Mutable<Mutable<Option<SendWrapper<PixiController>>>>,
+    excalidraw_canvas_controller: Mutable<Mutable<Option<SendWrapper<ExcalidrawController>>>>,
 }
 
 static STORE: Lazy<Store> = lazy::default();
@@ -65,7 +66,8 @@ fn root() -> impl Element {
     let layout: Mutable<Layout> = <_>::default();
     let mode: Mutable<Mode> = <_>::default();
     let loaded_filename = STORE.loaded_filename.clone();
-    let canvas_controller = STORE.canvas_controller.clone();
+    let pixi_canvas_controller = STORE.pixi_canvas_controller.clone();
+    let excalidraw_canvas_controller = STORE.excalidraw_canvas_controller.clone();
     Column::new()
         .s(Height::fill())
         .s(Scrollbars::y_and_clip_x())
@@ -76,7 +78,7 @@ fn root() -> impl Element {
             mode.clone(),
             loaded_filename.clone(),
         ))
-        .item_signal(mode.signal().map(clone!((hierarchy, selected_var_refs, loaded_filename, canvas_controller) move |mode| match mode {
+        .item_signal(mode.signal().map(clone!((hierarchy, selected_var_refs, loaded_filename, pixi_canvas_controller) move |mode| match mode {
             Mode::Waves => {
                 Column::new()
                     .s(Height::fill())
@@ -96,15 +98,15 @@ fn root() -> impl Element {
                                 let hierarchy = hierarchy.clone();
                                 let selected_var_refs = selected_var_refs.clone();
                                 let loaded_filename = loaded_filename.clone();
-                                let canvas_controller = canvas_controller.clone();
+                                let pixi_canvas_controller = pixi_canvas_controller.clone();
                                 map_ref!{
                                     let layout = layout.signal(),
                                     let hierarchy_is_some = hierarchy.signal_ref(Option::is_some) => {
-                                        (*hierarchy_is_some && matches!(layout, Layout::Tree)).then(clone!((hierarchy, selected_var_refs, loaded_filename, canvas_controller) move || WaveformPanel::new(
+                                        (*hierarchy_is_some && matches!(layout, Layout::Tree)).then(clone!((hierarchy, selected_var_refs, loaded_filename, pixi_canvas_controller) move || WaveformPanel::new(
                                             hierarchy.clone(),
                                             selected_var_refs.clone(),
                                             loaded_filename.clone(),
-                                            canvas_controller.clone(),
+                                            pixi_canvas_controller.clone(),
                                         )))
                                     }
                                 }
@@ -114,15 +116,15 @@ fn root() -> impl Element {
                         let hierarchy = hierarchy.clone();
                         let selected_var_refs = selected_var_refs.clone();
                         let loaded_filename = loaded_filename.clone();
-                        let canvas_controller = canvas_controller.clone();
+                        let pixi_canvas_controller = pixi_canvas_controller.clone();
                         map_ref!{
                             let layout = layout.signal(),
                             let hierarchy_is_some = hierarchy.signal_ref(Option::is_some) => {
-                                (*hierarchy_is_some && matches!(layout, Layout::Columns)).then(clone!((hierarchy, selected_var_refs, loaded_filename, canvas_controller) move || WaveformPanel::new(
+                                (*hierarchy_is_some && matches!(layout, Layout::Columns)).then(clone!((hierarchy, selected_var_refs, loaded_filename, pixi_canvas_controller) move || WaveformPanel::new(
                                     hierarchy.clone(),
                                     selected_var_refs.clone(),
                                     loaded_filename.clone(),
-                                    canvas_controller.clone(),
+                                    pixi_canvas_controller.clone(),
                                 )))
                             }
                         }
@@ -132,7 +134,7 @@ fn root() -> impl Element {
                 Column::new()
                     .s(Height::fill())
                     .s(Scrollbars::y_and_clip_x())
-                    .item(DiagramPanel::new())
+                    .item(DiagramPanel::new(excalidraw_canvas_controller.clone()))
             }
         })))
         .item(CommandPanel::new())

frontend/src/platform.rs

@@ -81,7 +81,7 @@ pub async fn remove_all_decoders() -> RemovedDecodersCount {
 }
 
 async fn redraw_all_timeline_rows() {
-    if let Some(controller) = STORE.canvas_controller.get_cloned().get_cloned() {
+    if let Some(controller) = STORE.pixi_canvas_controller.get_cloned().get_cloned() {
         controller.redraw_all_rows().await
     }
 }

frontend/typescript/bundles/excalidraw_canvas.js

@@ -74737,9 +74737,6 @@ var require_client = __commonJS({
 var import_excalidraw = __toESM(require_main());
 var React = __toESM(require_react());
 var ReactDOM = __toESM(require_client());
-function hello() {
-  return "Hello from excalidraw_canvas";
-}
 function attach_to_canvas() {
   const App = () => {
     return React.createElement(
@@ -74757,9 +74754,34 @@ function attach_to_canvas() {
   const excalidrawWrapper = document.getElementById("excalidraw_canvas");
   const root = ReactDOM.createRoot(excalidrawWrapper);
 }
+var ExcalidrawController = class {
+  // app: Application
+  // // -- FastWave-specific --
+  // var_signal_rows: Array<VarSignalRow> = [];
+  // 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");
+  }
+};
 export {
-  attach_to_canvas,
+  ExcalidrawController,
-  hello
+  attach_to_canvas
 };
 /*! Bundled license information:
 

frontend/typescript/excalidraw_canvas/excalidraw_canvas.ts

@@ -2,10 +2,6 @@ import { Excalidraw } from '@excalidraw/excalidraw'
 import * as React from 'react'
 import * as ReactDOM from 'react-dom/client'
 
-export function hello(): String {
-    return "Hello from excalidraw_canvas"
-}
-
 export function attach_to_canvas() {
     const App = () => {
         return React.createElement(
@@ -25,4 +21,67 @@ export function attach_to_canvas() {
     const root = ReactDOM.createRoot(excalidrawWrapper!);
 }
 
+export class ExcalidrawController {
+    // app: Application
+    // // -- FastWave-specific --
+    // var_signal_rows: Array<VarSignalRow> = [];
+    // 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;
+    }
+
+    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")
+    }
+}