Initial implementation of panning and zooming

Author: friendlymatthew

src/renderer/app_state.rs

@@ -1,6 +1,7 @@
 use crate::{
     image::grammar::Image,
     renderer::{
+        camera::Camera,
         draw_uniform::DrawUniform,
         effect_pipeline::EffectPipeline,
         feature_uniform::{FeatureUniform, TransformAction},
@@ -14,7 +15,7 @@ use crate::{
 use anyhow::Result;
 use winit::{
     dpi::PhysicalSize,
-    event::{ElementState, Event, KeyEvent, Modifiers, MouseButton, WindowEvent},
+    event::{ElementState, Event, KeyEvent, Modifiers, MouseButton, MouseScrollDelta, WindowEvent},
     event_loop::EventLoop,
     keyboard::{KeyCode, PhysicalKey},
     window::{CursorIcon, Window, WindowBuilder},
@@ -30,6 +31,7 @@ pub struct AppState<'a> {
 
     pub feature_uniform: FeatureUniform,
     pub draw_uniform: DrawUniform,
+    pub camera: Camera,
     pub mouse_state: MouseState,
     pub editor_state: EditorState,
     pub modifiers: Modifiers,
@@ -61,6 +63,8 @@ impl<'a> AppState<'a> {
         let draw_uniform_resource =
             gpu_allocator.create_uniform_resource("draw_uniform", draw_uniform)?;
 
+        let camera = Camera::new();
+
         let shape_render_texture =
             gpu_allocator.create_render_texture("shape_texture", size.width, size.height);
 
@@ -147,6 +151,7 @@ impl<'a> AppState<'a> {
             size,
             feature_uniform,
             draw_uniform,
+            camera,
             mouse_state,
             editor_state,
             modifiers,
@@ -179,14 +184,48 @@ impl<'a> AppState<'a> {
         let feature_uniform = &mut self.feature_uniform;
         let draw_uniform = &mut self.draw_uniform;
 
+        // the state
+        // note to future self: we are probably due for a refactor
+        // right now, application state, inputs, windowing are all coupled together
+        // it would be good to be able to reuse certain commands for instance, think about cut (cmd + x)
+        let mut super_key_pressed = if cfg!(target_os = "macos") {
+            self.modifiers.state().super_key()
+        } else {
+            self.modifiers.state().control_key()
+        };
+
+        let mut draw_mode = draw_uniform.crosshair();
+
+        // some global rules
+        // maybe keep a stack of actions?
+        draw_mode = if super_key_pressed { false } else { draw_mode };
+
         match event {
             WindowEvent::MouseInput { state, button, .. } => {
                 if *button == MouseButton::Left {
                     let prev_state = self.mouse_state.pressed();
                     self.mouse_state
                         .set_pressed(matches!(state, ElementState::Pressed));
 
-                    if draw_uniform.crosshair() {
+                    // camera panning
+                    if super_key_pressed && !draw_mode {
+                        self.window.set_cursor_icon(CursorIcon::Grab);
+
+                        match (prev_state, self.mouse_state.pressed()) {
+                            (false, true) => {
+                                let (x, y) = self.mouse_state.position();
+                                self.mouse_state.set_camera_pan_start(Some((x, y)));
+                            }
+                            (true, false) => {
+                                self.mouse_state.set_camera_pan_start(None);
+                                self.window.set_cursor_icon(CursorIcon::Default);
+                            }
+                            _ => {}
+                        }
+                        return true;
+                    }
+
+                    if draw_mode {
                         // Crosshair mode: Draw new circles
                         match (prev_state, self.mouse_state.pressed()) {
                             (false, true) => {
@@ -265,10 +304,49 @@ impl<'a> AppState<'a> {
                     }
                 }
             }
+            WindowEvent::MouseWheel { delta, .. } => {
+                match delta {
+                    MouseScrollDelta::LineDelta(_, y) => {
+                        let zoom_speed = 0.1;
+                        let zoom_factor = if *y > 0.0 {
+                            1.0 + zoom_speed
+                        } else if *y < 0.0 {
+                            1.0 - zoom_speed
+                        } else {
+                            1.0
+                        };
+                        self.camera.zoom(zoom_factor);
+                    }
+                    MouseScrollDelta::PixelDelta(pos) => {
+                        // Zoom with two-finger scroll
+                        let zoom_speed = 0.1;
+                        let y = pos.y as f32;
+                        let zoom_factor = if y > 0.0 {
+                            1.0 + zoom_speed * 0.01 * y
+                        } else if y < 0.0 {
+                            1.0 + zoom_speed * 0.01 * y
+                        } else {
+                            1.0
+                        };
+                        self.camera.zoom(zoom_factor);
+                    }
+                };
+            }
             WindowEvent::CursorMoved { position, .. } => {
                 let (x, y) = (position.x as f32, position.y as f32);
 
-                if draw_uniform.crosshair() {
+                if super_key_pressed && self.mouse_state.pressed() {
+                    if let Some((start_x, start_y)) = self.mouse_state.camera_pan_start() {
+                        let delta_x = (x - start_x) / (self.size.width as f32) * 2.0;
+                        let delta_y = -(y - start_y) / (self.size.height as f32) * 2.0; // Invert Y
+
+                        self.camera.pan(delta_x, delta_y);
+
+                        self.mouse_state.set_camera_pan_start(Some((x, y)));
+                    }
+                }
+
+                if draw_mode {
                     // Crosshair mode: Update the preview circle radius
                     if let Some(center) = self.mouse_state.start_drag() {
                         let radius = compute_distance(center, (x, y));
@@ -404,6 +482,9 @@ impl<'a> AppState<'a> {
                             }
                         }
                     }
+                    (KeyCode::KeyR, ElementState::Pressed) => {
+                        self.camera.reset();
+                    }
                     _ => return false,
                 }
             }
@@ -421,6 +502,10 @@ impl<'a> AppState<'a> {
             self.feature_uniform.gamma(),
         );
 
+        // Update camera in draw uniform
+        self.draw_uniform
+            .update_camera(self.camera.view_projection_matrix());
+
         // Update image shader uniforms
         let uniform_resources = &self.image_shader.uniform_resources;
         self.gpu_allocator

src/renderer/camera.rs

@@ -0,0 +1,54 @@
+#[derive(Debug, Clone, Copy)]
+pub struct Camera {
+    pub pan_x: f32,
+    pub pan_y: f32,
+    pub zoom: f32,
+}
+
+impl Camera {
+    pub fn new() -> Self {
+        Self {
+            pan_x: 0.0,
+            pan_y: 0.0,
+            zoom: 1.0,
+        }
+    }
+
+    pub fn pan(&mut self, delta_x: f32, delta_y: f32) {
+        self.pan_x += delta_x / self.zoom;
+        self.pan_y += delta_y / self.zoom;
+    }
+
+    // factor > 1.0 zooms in, factor < 1.0 zooms out
+    pub fn zoom(&mut self, factor: f32) {
+        self.zoom *= factor;
+        // Clamp zoom to reasonable bounds
+        self.zoom = self.zoom.clamp(0.1, 10.0);
+    }
+
+    pub fn _set_zoom(&mut self, zoom: f32) {
+        self.zoom = zoom.clamp(0.1, 10.0);
+    }
+
+    pub fn reset(&mut self) {
+        self.pan_x = 0.0;
+        self.pan_y = 0.0;
+        self.zoom = 1.0;
+    }
+
+    // generate a view-proj matrix for the camera
+    pub fn view_projection_matrix(&self) -> [[f32; 4]; 4] {
+        [
+            [self.zoom, 0.0, 0.0, 0.0],
+            [0.0, self.zoom, 0.0, 0.0],
+            [0.0, 0.0, 1.0, 0.0],
+            [self.pan_x, self.pan_y, 0.0, 1.0],
+        ]
+    }
+}
+
+impl Default for Camera {
+    fn default() -> Self {
+        Self::new()
+    }
+}

src/renderer/draw_uniform.rs

@@ -1,10 +1,17 @@
 #[repr(C)]
-#[derive(Debug, Default, Copy, Clone, bytemuck::Pod, bytemuck::Zeroable)]
+#[derive(Debug, Copy, Clone, bytemuck::Pod, bytemuck::Zeroable)]
 pub struct DrawUniform {
     pub crosshair: u32,
     pub circle_center_x: f32,
     pub circle_center_y: f32,
     pub circle_radius: f32,
+    pub camera_view_proj: [[f32; 4]; 4],
+}
+
+impl Default for DrawUniform {
+    fn default() -> Self {
+        Self::new()
+    }
 }
 
 impl DrawUniform {
@@ -14,9 +21,19 @@ impl DrawUniform {
             circle_center_x: 0.0,
             circle_center_y: 0.0,
             circle_radius: 0.0,
+            camera_view_proj: [
+                [1.0, 0.0, 0.0, 0.0],
+                [0.0, 1.0, 0.0, 0.0],
+                [0.0, 0.0, 1.0, 0.0],
+                [0.0, 0.0, 0.0, 1.0],
+            ],
         }
     }
 
+    pub(crate) fn update_camera(&mut self, view_proj: [[f32; 4]; 4]) {
+        self.camera_view_proj = view_proj;
+    }
+
     pub(crate) const fn crosshair(&self) -> bool {
         self.crosshair == 1
     }

src/renderer/image_shader.wgsl

@@ -19,6 +19,7 @@ struct DrawUniform {
     circle_center_x: f32,
     circle_center_y: f32,
     circle_radius: f32,
+    camera_view_proj: mat4x4<f32>,
 }
 
 
@@ -53,9 +54,13 @@ fn vs_main(
 ) -> VertexOutput {
     var out: VertexOutput;
 
+    // Apply feature transform (flip X/Y)
     var transformed = transform_matrix() * vec3<f32>(model.position.x, model.position.y, 1.0);
 
-    out.clip_position = vec4<f32>(transformed.xy, model.position.z, 1.0);
+    // Apply camera transform (pan and zoom)
+    var camera_transformed = draw_uniform.camera_view_proj * vec4<f32>(transformed.xy, model.position.z, 1.0);
+
+    out.clip_position = camera_transformed;
     out.tex_coords = model.tex_coords;
 
     return out;

src/renderer/mod.rs

@@ -3,6 +3,7 @@ pub(crate) use texture::*;
 pub(crate) use vertex::*;
 
 mod app_state;
+mod camera;
 mod compute_effect;
 mod draw_uniform;
 mod effect_pipeline;

src/renderer/mouse_state.rs

@@ -6,6 +6,7 @@ pub struct MouseState {
     position_x: f32,
     position_y: f32,
     start_drag: Option<(f32, f32)>,
+    camera_pan_start: Option<(f32, f32)>,
     selected_shape: Option<usize>,   // index to the shape stack
     clipboard_shape: Option<Circle>, // index to the shape stack
     dragging_shape: bool,
@@ -70,4 +71,12 @@ impl MouseState {
     pub(crate) const fn set_clipboard_shape(&mut self, element_id: Option<Circle>) {
         self.clipboard_shape = element_id;
     }
+
+    pub(crate) const fn camera_pan_start(&self) -> Option<(f32, f32)> {
+        self.camera_pan_start
+    }
+
+    pub(crate) const fn set_camera_pan_start(&mut self, position: Option<(f32, f32)>) {
+        self.camera_pan_start = position;
+    }
 }