From 64cc46d4ac8a4b44f90b791652ada672c4f3de02 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Martin=20Kav=C3=ADk?= Date: Fri, 7 Jun 2024 18:49:39 +0200 Subject: [PATCH] redraw rows --- frontend/src/waveform_panel/pixi_canvas.rs | 10 +++--- frontend/typescript/bundles/pixi_canvas.js | 23 +++++++++++--- .../typescript/pixi_canvas/pixi_canvas.ts | 31 +++++++++++++------ 3 files changed, 44 insertions(+), 20 deletions(-) diff --git a/frontend/src/waveform_panel/pixi_canvas.rs b/frontend/src/waveform_panel/pixi_canvas.rs index 218f6a3..066e8dd 100644 --- a/frontend/src/waveform_panel/pixi_canvas.rs +++ b/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); diff --git a/frontend/typescript/bundles/pixi_canvas.js b/frontend/typescript/bundles/pixi_canvas.js index 8a5fedf..3c5a9ad 100644 --- a/frontend/typescript/bundles/pixi_canvas.js +++ b/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); diff --git a/frontend/typescript/pixi_canvas/pixi_canvas.ts b/frontend/typescript/pixi_canvas/pixi_canvas.ts index a6eb0f4..c8661bf 100644 --- a/frontend/typescript/pixi_canvas/pixi_canvas.ts +++ b/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);