From e934ac031dcc153b7e8ad6d6a2b10295fc0b3dd8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Martin=20Kav=C3=ADk?= <martin@kavik.cz>
Date: Wed, 12 Jun 2024 00:10:08 +0200
Subject: [PATCH] zoom with offset x

---
 frontend/src/waveform_panel/pixi_canvas.rs     | 8 ++++++--
 frontend/typescript/bundles/pixi_canvas.js     | 7 ++++++-
 frontend/typescript/pixi_canvas/pixi_canvas.ts | 8 +++++++-
 shared/src/signal_to_timeline.rs               | 2 ++
 4 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/frontend/src/waveform_panel/pixi_canvas.rs b/frontend/src/waveform_panel/pixi_canvas.rs
index eb9f26d..69e5960 100644
--- a/frontend/src/waveform_panel/pixi_canvas.rs
+++ b/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);
diff --git a/frontend/typescript/bundles/pixi_canvas.js b/frontend/typescript/bundles/pixi_canvas.js
index 4e4ad9d..469c0c7 100644
--- a/frontend/typescript/bundles/pixi_canvas.js
+++ b/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();
   }
diff --git a/frontend/typescript/pixi_canvas/pixi_canvas.ts b/frontend/typescript/pixi_canvas/pixi_canvas.ts
index bf3340c..ca82560 100644
--- a/frontend/typescript/pixi_canvas/pixi_canvas.ts
+++ b/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();
     }
diff --git a/shared/src/signal_to_timeline.rs b/shared/src/signal_to_timeline.rs
index e49ed22..cdd6505 100644
--- a/shared/src/signal_to_timeline.rs
+++ b/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)| {