zoom with offset x

frontend/src/waveform_panel/pixi_canvas.rs

@@ -86,7 +86,11 @@ impl PixiCanvas {
                     // @TODO rewrite to a native Zoon API
                     raw_el.event_handler(clone!((controller) move |event: events_extra::WheelEvent| {
                         if let Some(controller) = controller.lock_ref().as_ref() {
-                            controller.zoom_or_pan(event.delta_y(), event.shift_key());
+                            controller.zoom_or_pan(
+                                event.delta_y(), 
+                                event.shift_key(),
+                                event.offset_x() as u32,
+                            );
                         }
                     }))
                 })
@@ -180,7 +184,7 @@ mod js_bridge {
         pub fn set_var_format(this: &PixiController, index: usize, var_format: JsValue);
 
         #[wasm_bindgen(method)]
-        pub fn zoom_or_pan(this: &PixiController, wheel_delta_y: f64, shift_key: bool);
+        pub fn zoom_or_pan(this: &PixiController, wheel_delta_y: f64, shift_key: bool, offset_x: u32);
 
         #[wasm_bindgen(method)]
         pub fn remove_var(this: &PixiController, index: usize);

frontend/typescript/bundles/pixi_canvas.js

@@ -35217,11 +35217,16 @@ var PixiController = class {
       this.redraw_row(index);
     }
   }
-  async zoom_or_pan(wheel_delta_y, shift_key) {
+  async zoom_or_pan(wheel_delta_y, shift_key, offset_x) {
     if (shift_key) {
       this.timeline_viewport_x -= Math.sign(wheel_delta_y) * 20;
     } else {
+      const offset_x_ratio = offset_x / this.timeline_viewport_width;
+      const old_timeline_width = this.timeline_viewport_width * this.timeline_zoom;
       this.timeline_zoom -= Math.sign(wheel_delta_y) * 0.1;
+      const new_timeline_width = this.timeline_viewport_width * this.timeline_zoom;
+      const timeline_width_difference = new_timeline_width - old_timeline_width;
+      this.timeline_viewport_x -= timeline_width_difference * offset_x_ratio;
     }
     this.redraw_all_rows();
   }

frontend/typescript/pixi_canvas/pixi_canvas.ts

@@ -147,11 +147,17 @@ export class PixiController {
         }
     }
 
-    async zoom_or_pan(wheel_delta_y: number, shift_key: boolean) {
+    async zoom_or_pan(wheel_delta_y: number, shift_key: boolean, offset_x: number) {
         if (shift_key) {
             this.timeline_viewport_x -= Math.sign(wheel_delta_y) * 20;
         } else {
+            // @TODO fix, bounds
+            const offset_x_ratio = offset_x / this.timeline_viewport_width;
+            const old_timeline_width = this.timeline_viewport_width * this.timeline_zoom; 
             this.timeline_zoom -= Math.sign(wheel_delta_y) * 0.1;
+            const new_timeline_width = this.timeline_viewport_width * this.timeline_zoom;
+            const timeline_width_difference = new_timeline_width - old_timeline_width;
+            this.timeline_viewport_x -= timeline_width_difference * offset_x_ratio;
         }
         this.redraw_all_rows();
     }

shared/src/signal_to_timeline.rs

@@ -23,6 +23,8 @@ pub fn signal_to_timeline(
     let timeline_viewport_x = timeline_viewport_x as f64;
     let timeline_width = timeline_viewport_width as f64 * timeline_zoom;
 
+    // @TODO hide blocks not visible in the viewport
+
     let mut x_value_pairs = signal
         .iter_changes()
         .map(|(index, value)| {