timeline_width/viewport_width/viewport_x

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) {

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
 }
 

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<JsValue, JsValue>;

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,
         )

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<dyn FnMut(SignalRefIndex, ScreenWidth, RowHeight, VarFormatJs) -> TimelinePromise>;
+        Closure<dyn FnMut(SignalRefIndex, TimelineWidth, TimelineViewportWidth, TimelineViewportX, RowHeight, VarFormatJs) -> 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 --
 

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() {
+  get_timeline_width() {
-    return this.app.screen.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);
     }
   }

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) {
+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, screen_width, 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 });

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<Timeline>;
+type TimelineGetter = (
+    signal_ref_index: number, 
+    timeline_width: number, 
+    timeline_viewport_width: number, 
+    timeline_viewport_x: number, 
+    row_height: number, 
+    var_format: VarFormat
+) => Promise<Timeline>;
 
 export class PixiController {
     app: Application
     // -- FastWave-specific --
     var_signal_rows: Array<VarSignalRow> = [];
     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() {
+    get_timeline_width() {
-        return this.app.screen.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);
         }
     }

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<WellenHierarchy> {
 
 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<Timeline> {
-    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<void> {

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;

src-tauri/src/lib.rs

@@ -42,7 +42,9 @@ async fn get_hierarchy(store: tauri::State<'_, Store>) -> Result<serde_json::Val
 #[tauri::command(rename_all = "snake_case")]
 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: shared::VarFormat,
     store: tauri::State<'_, Store>,
@@ -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())
 }