From 7107f77c8212084f664cb3e31644f9c5f08fbf17 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Martin=20Kav=C3=ADk?= Date: Tue, 11 Jun 2024 17:00:29 +0200 Subject: [PATCH] timeline_width/viewport_width/viewport_x --- frontend/src/platform.rs | 13 ++++- frontend/src/platform/browser.rs | 14 ++++- frontend/src/platform/tauri.rs | 12 +++- frontend/src/waveform_panel.rs | 4 +- frontend/src/waveform_panel/pixi_canvas.rs | 32 +++++++++-- frontend/typescript/bundles/pixi_canvas.js | 37 +++++++++++-- frontend/typescript/bundles/tauri_glue.js | 11 +++- .../typescript/pixi_canvas/pixi_canvas.ts | 55 +++++++++++++++++-- frontend/typescript/tauri_glue/tauri_glue.ts | 15 +++-- shared/src/signal_to_timeline.rs | 18 ++++-- src-tauri/src/lib.rs | 14 ++++- 11 files changed, 188 insertions(+), 37 deletions(-) diff --git a/frontend/src/platform.rs b/frontend/src/platform.rs index 967468e..fbff934 100644 --- a/frontend/src/platform.rs +++ b/frontend/src/platform.rs @@ -31,11 +31,20 @@ pub async fn get_hierarchy() -> wellen::Hierarchy { pub async fn load_signal_and_get_timeline( signal_ref: wellen::SignalRef, - screen_width: u32, + timeline_width: u32, + timeline_viewport_width: u32, + timeline_viewport_x: u32, block_height: u32, var_format: shared::VarFormat, ) -> shared::Timeline { - platform::load_signal_and_get_timeline(signal_ref, screen_width, block_height, var_format).await + platform::load_signal_and_get_timeline( + signal_ref, + timeline_width, + timeline_viewport_width, + timeline_viewport_x, + block_height, + var_format, + ).await } pub async fn unload_signal(signal_ref: wellen::SignalRef) { diff --git a/frontend/src/platform/browser.rs b/frontend/src/platform/browser.rs index bc29666..bfe9527 100644 --- a/frontend/src/platform/browser.rs +++ b/frontend/src/platform/browser.rs @@ -76,7 +76,9 @@ pub(super) async fn get_hierarchy() -> wellen::Hierarchy { pub(super) async fn load_signal_and_get_timeline( signal_ref: wellen::SignalRef, - screen_width: u32, + timeline_width: u32, + timeline_viewport_width: u32, + timeline_viewport_x: u32, block_height: u32, var_format: shared::VarFormat, ) -> shared::Timeline { @@ -86,7 +88,15 @@ pub(super) async fn load_signal_and_get_timeline( let signal = waveform.get_signal(signal_ref).unwrap(); let time_table = waveform.time_table(); let timeline = - shared::signal_to_timeline(signal, time_table, screen_width, block_height, var_format); + shared::signal_to_timeline( + signal, + time_table, + timeline_width, + timeline_viewport_width, + timeline_viewport_x, + block_height, + var_format, + ); timeline } diff --git a/frontend/src/platform/tauri.rs b/frontend/src/platform/tauri.rs index e376506..43f48f4 100644 --- a/frontend/src/platform/tauri.rs +++ b/frontend/src/platform/tauri.rs @@ -19,7 +19,9 @@ pub(super) async fn get_hierarchy() -> wellen::Hierarchy { pub(super) async fn load_signal_and_get_timeline( signal_ref: wellen::SignalRef, - screen_width: u32, + timeline_width: u32, + timeline_viewport_width: u32, + timeline_viewport_x: u32, block_height: u32, var_format: shared::VarFormat, ) -> shared::Timeline { @@ -27,7 +29,9 @@ pub(super) async fn load_signal_and_get_timeline( serde_wasm_bindgen::from_value( tauri_glue::load_signal_and_get_timeline( signal_ref.index(), - screen_width, + timeline_width, + timeline_viewport_width, + timeline_viewport_x, block_height, var_format, ) @@ -61,7 +65,9 @@ mod tauri_glue { #[wasm_bindgen(catch)] pub async fn load_signal_and_get_timeline( signal_ref_index: usize, - screen_width: u32, + timeline_width: u32, + timeline_viewport_width: u32, + timeline_viewport_x: u32, block_height: u32, var_format: JsValue, ) -> Result; diff --git a/frontend/src/waveform_panel.rs b/frontend/src/waveform_panel.rs index 0548f2a..e8a95a6 100644 --- a/frontend/src/waveform_panel.rs +++ b/frontend/src/waveform_panel.rs @@ -122,7 +122,9 @@ impl WaveformPanel { let signal_ref = var.signal_ref(); let timeline = platform::load_signal_and_get_timeline( signal_ref, - controller.screen_width(), + controller.get_timeline_width(), + controller.get_timeline_viewport_width(), + controller.get_timeline_viewport_x(), ROW_HEIGHT, var_format, ) diff --git a/frontend/src/waveform_panel/pixi_canvas.rs b/frontend/src/waveform_panel/pixi_canvas.rs index f577110..82390b3 100644 --- a/frontend/src/waveform_panel/pixi_canvas.rs +++ b/frontend/src/waveform_panel/pixi_canvas.rs @@ -52,12 +52,14 @@ impl PixiCanvas { let task_with_controller = Mutable::new(None); // -- FastWave-specific -- let timeline_getter = Rc::new(Closure::new( - |signal_ref_index, screen_width, row_height, var_format| { + |signal_ref_index, timeline_width, timeline_viewport_width, timeline_viewport_x, row_height, var_format| { future_to_promise(async move { let signal_ref = wellen::SignalRef::from_index(signal_ref_index).unwrap_throw(); let timeline = platform::load_signal_and_get_timeline( signal_ref, - screen_width, + timeline_width, + timeline_viewport_width, + timeline_viewport_x, row_height, serde_wasm_bindgen::from_value(var_format).unwrap_throw(), ) @@ -81,7 +83,14 @@ impl PixiCanvas { })) .after_insert(clone!((controller, timeline_getter) move |element| { Task::start(async move { - let pixi_controller = js_bridge::PixiController::new(row_height, row_gap, &timeline_getter); + let pixi_controller = js_bridge::PixiController::new( + width.get(), + width.get(), + 0, + row_height, + row_gap, + &timeline_getter + ); pixi_controller.init(&element).await; controller.set(Some(pixi_controller)); }); @@ -113,11 +122,13 @@ mod js_bridge { type TimelinePromise = js_sys::Promise; type SignalRefIndex = usize; - type ScreenWidth = u32; + type TimelineWidth = u32; + type TimelineViewportWidth = u32; + type TimelineViewportX = u32; type RowHeight = u32; type VarFormatJs = JsValue; type TimelineGetter = - Closure TimelinePromise>; + Closure TimelinePromise>; // Note: Add all corresponding methods to `frontend/typescript/pixi_canvas/pixi_canvas.ts` #[wasm_bindgen(module = "/typescript/bundles/pixi_canvas.js")] @@ -128,6 +139,9 @@ mod js_bridge { // @TODO `row_height` and `row_gap` is FastWave-specific #[wasm_bindgen(constructor)] pub fn new( + timeline_width: u32, + timeline_viewport_width: u32, + timeline_viewport_x: u32, row_height: u32, row_gap: u32, timeline_getter: &TimelineGetter, @@ -143,7 +157,13 @@ mod js_bridge { pub fn destroy(this: &PixiController); #[wasm_bindgen(method)] - pub fn screen_width(this: &PixiController) -> u32; + pub fn get_timeline_width(this: &PixiController) -> u32; + + #[wasm_bindgen(method)] + pub fn get_timeline_viewport_width(this: &PixiController) -> u32; + + #[wasm_bindgen(method)] + pub fn get_timeline_viewport_x(this: &PixiController) -> u32; // -- FastWave-specific -- diff --git a/frontend/typescript/bundles/pixi_canvas.js b/frontend/typescript/bundles/pixi_canvas.js index 3291b1f..c4b6731 100644 --- a/frontend/typescript/bundles/pixi_canvas.js +++ b/frontend/typescript/bundles/pixi_canvas.js @@ -35133,12 +35133,18 @@ var PixiController = class { // -- FastWave-specific -- var_signal_rows = []; var_signal_rows_container = new Container(); + timeline_width; + timeline_viewport_width; + timeline_viewport_x; row_height; row_gap; previous_parent_width; timeline_getter; - constructor(row_height, row_gap, timeline_getter) { + constructor(timeline_width, timeline_viewport_width, timeline_viewport_x, row_height, row_gap, timeline_getter) { this.app = new Application(); + this.timeline_width = timeline_width; + 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); @@ -35156,6 +35162,7 @@ var PixiController = class { const width_changed = width !== this.previous_parent_width; this.previous_parent_width = width; if (width_changed) { + this.timeline_viewport_width = width; await this.redraw_all_rows(); } } @@ -35171,20 +35178,40 @@ var PixiController = class { }; this.app.destroy(rendererDestroyOptions, options); } - screen_width() { - return this.app.screen.width; + get_timeline_width() { + return this.timeline_width; + } + get_timeline_viewport_width() { + return this.timeline_viewport_width; + } + get_timeline_viewport_x() { + return this.timeline_viewport_x; } // -- FastWave-specific -- async redraw_all_rows() { await Promise.all(this.var_signal_rows.map(async (row) => { - const timeline = await this.timeline_getter(row.signal_ref_index, this.app.screen.width, this.row_height, row.var_format); + const timeline = await this.timeline_getter( + row.signal_ref_index, + this.timeline_width, + this.timeline_viewport_width, + this.timeline_viewport_x, + this.row_height, + row.var_format + ); row.redraw(timeline); })); } async redraw_row(index) { const row = this.var_signal_rows[index]; if (typeof row !== "undefined") { - const timeline = await this.timeline_getter(row.signal_ref_index, this.app.screen.width, this.row_height, row.var_format); + const timeline = await this.timeline_getter( + row.signal_ref_index, + this.timeline_width, + this.timeline_viewport_width, + this.timeline_viewport_x, + this.row_height, + row.var_format + ); row.redraw(timeline); } } diff --git a/frontend/typescript/bundles/tauri_glue.js b/frontend/typescript/bundles/tauri_glue.js index c4cf8f8..c24c802 100644 --- a/frontend/typescript/bundles/tauri_glue.js +++ b/frontend/typescript/bundles/tauri_glue.js @@ -2520,8 +2520,15 @@ async function pick_and_load_waveform() { async function get_hierarchy() { return await invoke2("get_hierarchy"); } -async function load_signal_and_get_timeline(signal_ref_index, screen_width, block_height, var_format) { - return await invoke2("load_signal_and_get_timeline", { signal_ref_index, screen_width, block_height, var_format }); +async function load_signal_and_get_timeline(signal_ref_index, timeline_width, timeline_viewport_width, timeline_viewport_x, block_height, var_format) { + return await invoke2("load_signal_and_get_timeline", { + signal_ref_index, + timeline_width, + timeline_viewport_width, + timeline_viewport_x, + block_height, + var_format + }); } async function unload_signal(signal_ref_index) { return await invoke2("unload_signal", { signal_ref_index }); diff --git a/frontend/typescript/pixi_canvas/pixi_canvas.ts b/frontend/typescript/pixi_canvas/pixi_canvas.ts index 021dee9..4d24b6b 100644 --- a/frontend/typescript/pixi_canvas/pixi_canvas.ts +++ b/frontend/typescript/pixi_canvas/pixi_canvas.ts @@ -27,21 +27,41 @@ enum VarFormat { Unsigned, } -type TimelineGetter = (signal_ref_index: number, screen_width: number, row_height: number, var_format: VarFormat) => Promise; +type TimelineGetter = ( + signal_ref_index: number, + timeline_width: number, + timeline_viewport_width: number, + timeline_viewport_x: number, + row_height: number, + var_format: VarFormat +) => Promise; export class PixiController { app: Application // -- FastWave-specific -- var_signal_rows: Array = []; var_signal_rows_container = new Container(); + timeline_width: number; + timeline_viewport_width: number; + timeline_viewport_x: number; row_height: number; row_gap: number; previous_parent_width: number | null; timeline_getter: TimelineGetter; - constructor(row_height: number, row_gap: number, timeline_getter: TimelineGetter) { + constructor( + timeline_width: number, + timeline_viewport_width: number, + timeline_viewport_x: number, + row_height: number, + row_gap: number, + timeline_getter: TimelineGetter + ) { this.app = new Application(); // -- FastWave-specific -- + this.timeline_width = timeline_width; + 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); @@ -62,6 +82,7 @@ export class PixiController { const width_changed = width !== this.previous_parent_width; this.previous_parent_width = width; if (width_changed) { + this.timeline_viewport_width = width; await this.redraw_all_rows(); } } @@ -79,15 +100,30 @@ export class PixiController { this.app.destroy(rendererDestroyOptions, options); } - screen_width() { - return this.app.screen.width; + get_timeline_width() { + return this.timeline_width; + } + + get_timeline_viewport_width() { + return this.timeline_viewport_width; + } + + get_timeline_viewport_x() { + return this.timeline_viewport_x; } // -- FastWave-specific -- async redraw_all_rows() { await Promise.all(this.var_signal_rows.map(async row => { - const timeline = await this.timeline_getter(row.signal_ref_index, this.app.screen.width, this.row_height, row.var_format); + const timeline = await this.timeline_getter( + row.signal_ref_index, + this.timeline_width, + this.timeline_viewport_width, + this.timeline_viewport_x, + this.row_height, + row.var_format + ); row.redraw(timeline); })) } @@ -95,7 +131,14 @@ export class PixiController { async redraw_row(index: number) { const row = this.var_signal_rows[index]; if (typeof row !== 'undefined') { - const timeline = await this.timeline_getter(row.signal_ref_index, this.app.screen.width, this.row_height, row.var_format); + const timeline = await this.timeline_getter( + row.signal_ref_index, + this.timeline_width, + this.timeline_viewport_width, + this.timeline_viewport_x, + this.row_height, + row.var_format + ); row.redraw(timeline); } } diff --git a/frontend/typescript/tauri_glue/tauri_glue.ts b/frontend/typescript/tauri_glue/tauri_glue.ts index 7231c40..37b6d1c 100644 --- a/frontend/typescript/tauri_glue/tauri_glue.ts +++ b/frontend/typescript/tauri_glue/tauri_glue.ts @@ -6,8 +6,6 @@ const invoke = core.invoke; type Filename = string; type WellenHierarchy = unknown; -type WellenTimeTable = unknown; -type WellenSignal = unknown; type Timeline = unknown; type VarFormat = unknown; @@ -25,11 +23,20 @@ export async function get_hierarchy(): Promise { export async function load_signal_and_get_timeline( signal_ref_index: number, - screen_width: number, + timeline_width: number, + timeline_viewport_width: number, + timeline_viewport_x: number, block_height: number, var_format: VarFormat, ): Promise { - return await invoke("load_signal_and_get_timeline", { signal_ref_index, screen_width, block_height, var_format }); + return await invoke("load_signal_and_get_timeline", { + signal_ref_index, + timeline_width, + timeline_viewport_width, + timeline_viewport_x, + block_height, + var_format + }); } export async function unload_signal(signal_ref_index: number): Promise { diff --git a/shared/src/signal_to_timeline.rs b/shared/src/signal_to_timeline.rs index da61b0c..ceea93f 100644 --- a/shared/src/signal_to_timeline.rs +++ b/shared/src/signal_to_timeline.rs @@ -3,29 +3,39 @@ use crate::*; pub fn signal_to_timeline( signal: &wellen::Signal, time_table: &[wellen::Time], - screen_width: u32, + mut timeline_width: u32, + timeline_viewport_width: u32, + timeline_viewport_x: u32, block_height: u32, var_format: VarFormat, ) -> Timeline { + println!("timeline_width: {timeline_width}"); + println!("timeline_viewport_width: {timeline_viewport_width}"); + println!("timeline_viewport_x: {timeline_viewport_x}"); + println!("_____"); const MIN_BLOCK_WIDTH: u32 = 3; // Courier New, 16px, sync with `label_style` in `pixi_canvas.rs` const LETTER_WIDTH: f64 = 9.61; const LETTER_HEIGHT: u32 = 18; const LABEL_X_PADDING: u32 = 10; + if timeline_width == 0 { + timeline_width = timeline_viewport_width; + } + let Some(last_time) = time_table.last().copied() else { return Timeline::default(); }; let last_time = last_time as f64; - let screen_width = screen_width as f64; + let timeline_width = timeline_width as f64; let mut x_value_pairs = signal .iter_changes() .map(|(index, value)| { let index = index as usize; let time = time_table[index] as f64; - let x = time / last_time * screen_width; + let x = time / last_time * timeline_width; (x, value) }) .peekable(); @@ -36,7 +46,7 @@ pub fn signal_to_timeline( let next_block_x = if let Some((next_block_x, _)) = x_value_pairs.peek() { *next_block_x } else { - screen_width + timeline_width }; let block_width = (next_block_x - block_x) as u32; diff --git a/src-tauri/src/lib.rs b/src-tauri/src/lib.rs index d369f09..ce5315f 100644 --- a/src-tauri/src/lib.rs +++ b/src-tauri/src/lib.rs @@ -42,7 +42,9 @@ async fn get_hierarchy(store: tauri::State<'_, Store>) -> Result, @@ -55,7 +57,15 @@ async fn load_signal_and_get_timeline( let signal = waveform.get_signal(signal_ref).unwrap(); let time_table = waveform.time_table(); let timeline = - shared::signal_to_timeline(signal, time_table, screen_width, block_height, var_format); + shared::signal_to_timeline( + signal, + time_table, + timeline_width, + timeline_viewport_width, + timeline_viewport_x, + block_height, + var_format, + ); Ok(serde_json::to_value(timeline).unwrap()) }