frontend/src/waveform_panel/pixi_canvas.rs

@@ -35,12 +35,12 @@ impl PixiCanvas {
         let height = Mutable::new(0);
         let resize_task = Task::start_droppable(
             map_ref! {
-                let _ = width.signal(),
-                let _ = height.signal() => ()
+                let width = width.signal(),
+                let height = height.signal() => (*width, *height)
             }
-            .for_each_sync(clone!((controller) move |_| {
+            .for_each_sync(clone!((controller) move |(width, height)| {
                 if let Some(controller) = controller.lock_ref().as_ref() {
-                    controller.queue_resize();
+                    controller.resize(width, height);
                 }
             })),
         );
@@ -101,7 +101,7 @@ mod js_bridge {
         pub async fn init(this: &PixiController, parent_element: &JsValue);
 
         #[wasm_bindgen(method)]
-        pub fn queue_resize(this: &PixiController);
+        pub fn resize(this: &PixiController, width: u32, height: u32);
 
         #[wasm_bindgen(method)]
         pub fn destroy(this: &PixiController);

frontend/typescript/bundles/pixi_canvas.js

@@ -35135,19 +35135,27 @@ var PixiController = class {
   var_signal_rows_container = new Container();
   row_height;
   row_gap;
+  previous_parent_width;
   constructor(row_height, row_gap) {
     this.app = new Application();
     this.row_height = row_height;
     this.row_gap = row_gap;
     this.app.stage.addChild(this.var_signal_rows_container);
+    this.previous_parent_width = null;
   }
   async init(parent_element) {
     await this.app.init({ background: "DarkSlateBlue", antialias: true, resizeTo: parent_element });
     parent_element.appendChild(this.app.canvas);
   }
-  // Default automatic Pixi resizing is not reliable
-  queue_resize() {
-    this.app.queueResize();
+  // Default automatic Pixi resizing according to the parent is not reliable 
+  // and the `app.renderer`'s `resize` event is fired on every browser window size change 
+  resize(width, height) {
+    this.app.resize();
+    const width_changed = width !== this.previous_parent_width;
+    this.previous_parent_width = width;
+    if (width_changed) {
+      this.redraw_rows();
+    }
   }
   destroy() {
     const rendererDestroyOptions = {
@@ -35165,6 +35173,9 @@ var PixiController = class {
     return this.app.screen.width;
   }
   // -- FastWave-specific --
+  redraw_rows() {
+    this.var_signal_rows.forEach((row) => row.draw());
+  }
   remove_var(index) {
     if (typeof this.var_signal_rows[index] !== "undefined") {
       this.var_signal_rows[index].destroy();
@@ -35196,7 +35207,6 @@ var VarSignalRow = class {
   row_height;
   row_gap;
   row_height_with_gap;
-  renderer_resize_callback = () => this.draw();
   row_container = new Container();
   row_container_background;
   signal_blocks_container = new Container();
@@ -35226,6 +35236,10 @@ var VarSignalRow = class {
     this.row_container.addChild(this.signal_blocks_container);
     this.draw();
   }
+  redraw(timeline) {
+    this.timeline = timeline;
+    this.draw();
+  }
   draw() {
     this.row_container_background.width = this.app.screen.width;
     this.signal_blocks_container.removeChildren();
@@ -35251,7 +35265,6 @@ var VarSignalRow = class {
     this.row_container.y -= this.row_height_with_gap;
   }
   destroy() {
-    this.app.renderer.off("resize", this.renderer_resize_callback);
     this.owner.splice(this.index_in_owner, 1);
     this.rows_container.removeChildAt(this.index_in_owner);
     this.row_container.destroy(true);

frontend/typescript/pixi_canvas/pixi_canvas.ts

@@ -23,6 +23,7 @@ export class PixiController {
     var_signal_rows_container = new Container();
     row_height: number;
     row_gap: number;
+    previous_parent_width: number | null;
 
     constructor(row_height: number, row_gap: number) {
         this.app = new Application();
@@ -30,6 +31,7 @@ export class PixiController {
         this.row_height = row_height;
         this.row_gap = row_gap;
         this.app.stage.addChild(this.var_signal_rows_container);
+        this.previous_parent_width = null;
     }
 
     async init(parent_element: HTMLElement) {
@@ -37,9 +39,16 @@ export class PixiController {
         parent_element.appendChild(this.app.canvas);
     }
 
-    // Default automatic Pixi resizing is not reliable
-    queue_resize() {
-        this.app.queueResize();
+    // Default automatic Pixi resizing according to the parent is not reliable 
+    // and the `app.renderer`'s `resize` event is fired on every browser window size change 
+    resize(width: number, height: number) {
+        this.app.resize();
+        // -- FastWave-specific --
+        const width_changed = width !== this.previous_parent_width;
+        this.previous_parent_width = width;
+        if (width_changed) {
+            this.redraw_rows();
+        }
     }
 
     destroy() {
@@ -61,6 +70,10 @@ export class PixiController {
 
     // -- FastWave-specific --
 
+    redraw_rows() {
+        this.var_signal_rows.forEach(row => row.draw());
+    }
+
     remove_var(index: number) {
         if (typeof this.var_signal_rows[index] !== 'undefined') {
             this.var_signal_rows[index].destroy();
@@ -96,7 +109,6 @@ class VarSignalRow {
     row_height: number;
     row_gap: number;
     row_height_with_gap: number;
-    renderer_resize_callback = () => this.draw();
     row_container = new Container();
     row_container_background: Sprite;
     signal_blocks_container = new Container();
@@ -144,11 +156,11 @@ class VarSignalRow {
         this.row_container.addChild(this.signal_blocks_container);
 
         this.draw();
-        // this.app.renderer.on("resize", (width, height) => { 
-        //     // @TODO only on `width` change
-        //     // @TODO inline `renderer_resize_callback`?
-        //     this.draw();
-        // });
+    }
+
+    redraw(timeline: Timeline) {
+        this.timeline = timeline;
+        this.draw();
     }
 
     draw() {
@@ -186,7 +198,6 @@ class VarSignalRow {
     }
 
     destroy() {
-        this.app.renderer.off("resize", this.renderer_resize_callback);
         this.owner.splice(this.index_in_owner, 1);
         this.rows_container.removeChildAt(this.index_in_owner);
         this.row_container.destroy(true);