t

Author: alanpoon

src/shared/image_viewer_modal.rs

@@ -13,6 +13,28 @@ live_design! {
     use crate::shared::styles::*;
     use crate::shared::icon_button::RobrixIconButton;
     IMG_DEFAULT = dep("crate://self/resources/img/default_image.png")
+    
+    ZoomableImage = {{ZoomableImage}} {
+        width: Fill,
+        height: Fill,
+        flow: Overlay,
+        
+        // Transform state
+        scale: 1.0,
+        offset: (0.0, 0.0),
+        
+        // Interaction state
+        dragging: false,
+        last_mouse_pos: (0.0, 0.0),
+        
+        // Internal image widget to hold the actual texture
+        inner_image = <Image> {
+            width: Fill,
+            height: Fill,
+            fit: Smallest,
+            source: (IMG_DEFAULT)
+        }
+    }
     pub ImageViewerModal = {{ImageViewerModal}} {
         width: Fill, height: Fill
         image_modal = <Modal> {
@@ -31,13 +53,11 @@ live_design! {
                 image_container = <View> {
                     width: Fill,
                     height: Fill,
-                    flow: Down,
-                    align: {x: 0.5}
-                    image = <Image> {
-                        height: Fill
-                        width: Fill
-                        fit: Smallest,
-                        source: (IMG_DEFAULT)
+                    flow: Overlay,
+                    align: {x: 0.5, y: 0.5}
+                    zoomable_image = <ZoomableImage> {
+                        width: Fill,
+                        height: Fill,
                     }
                 }
                 <View> {
@@ -130,6 +150,120 @@ pub enum ImageViewerModalAction {
     None,
 }
 
+#[derive(Live, LiveHook, Widget)]
+pub struct ZoomableImage {
+    #[deref] 
+    view: View,
+    
+    // Transform state
+    #[live] 
+    scale: f64,
+    #[live] 
+    offset: DVec2,
+    
+    // Interaction state
+    #[live] 
+    dragging: bool,
+    #[live] 
+    last_mouse_pos: DVec2,
+}
+
+impl Widget for ZoomableImage {
+    fn handle_event(&mut self, cx: &mut Cx, event: &Event, scope: &mut Scope) {
+        self.view.handle_event(cx, event, scope);
+        
+        match event {
+            Event::MouseDown(e) => {
+                if e.button.is_primary() {
+                    self.dragging = true;
+                    self.last_mouse_pos = e.abs;
+                    cx.set_key_focus(self.view.area());
+                    self.redraw(cx);
+                }
+            }
+            Event::MouseUp(e) => {
+                if e.button.is_primary() {
+                    self.dragging = false;
+                    self.redraw(cx);
+                }
+            }
+            Event::MouseMove(e) => {
+                if self.dragging {
+                    let delta = e.abs - self.last_mouse_pos;
+                    
+                    // Scale delta by inverse of zoom to maintain consistent pan speed  
+                    let scaled_delta = delta / self.scale;
+                    self.offset += scaled_delta;
+                    
+                    self.last_mouse_pos = e.abs;
+                    self.redraw(cx);
+                }
+            }
+            Event::Scroll(e) => {
+                // Zoom in/out with mouse wheel
+                let zoom_factor = if e.scroll.y > 0.0 { 1.1 } else { 0.9 };
+                let old_scale = self.scale;
+                self.scale *= zoom_factor;
+                self.scale = self.scale.clamp(0.1, 10.0); // Clamp zoom level
+                
+                if self.scale != old_scale {
+                    // Get widget's rect
+                    let widget_rect = self.view.area().rect(cx);
+                    let widget_center = DVec2{
+                        x: widget_rect.pos.x as f64 + widget_rect.size.x as f64 * 0.5,
+                        y: widget_rect.pos.y as f64 + widget_rect.size.y as f64 * 0.5,
+                    };
+                    
+                    // Calculate mouse position relative to widget center
+                    let mouse_rel = e.abs - widget_center;
+                    
+                    // Adjust offset to zoom toward mouse position
+                    let scale_ratio = self.scale / old_scale;
+                    self.offset = self.offset * scale_ratio + mouse_rel * (1.0 - scale_ratio) / self.scale;
+                    
+                    self.redraw(cx);
+                }
+            }
+            _ => {}
+        }
+    }
+    
+    fn draw_walk(&mut self, cx: &mut Cx2d, scope: &mut Scope, walk: Walk) -> DrawStep {
+        // Apply transform by modifying the drawing context
+        // This is a simplified approach - in a full implementation, we'd use custom shaders
+        if self.scale != 1.0 || self.offset.x != 0.0 || self.offset.y != 0.0 {
+            // Update the inner image's transform properties if possible
+            // For now, just redraw - the actual transform will be visual feedback
+            self.view.redraw(cx);
+        }
+        self.view.draw_walk(cx, scope, walk)
+    }
+}
+
+impl ZoomableImage {
+    pub fn reset_transform(&mut self, cx: &mut Cx) {
+        self.scale = 1.0;
+        self.offset = DVec2 {x: 0.0, y: 0.0};
+        self.dragging = false;
+        self.redraw(cx);
+    }
+    
+    pub fn set_image_texture(&mut self, cx: &mut Cx, data: &[u8]) -> Result<(), String> {
+        // Load the image data into the internal image widget
+        let image = self.view.image(id!(inner_image));
+        match crate::utils::load_png_or_jpg(&image, cx, data) {
+            Ok(()) => {
+                // Reset transform when setting new image
+                self.reset_transform(cx);
+                Ok(())
+            }
+            Err(e) => {
+                Err(format!("Failed to load image: {:?}", e))
+            }
+        }
+    }
+}
+
 impl Widget for ImageViewerModal {
     fn handle_event(&mut self, cx: &mut Cx, event: &Event, scope: &mut Scope) {
         self.view.handle_event(cx, event, scope);
@@ -187,18 +321,19 @@ impl ImageViewerModal {
         }
     }
 
-    /// Load image data into the Image widget
+    /// Load image data into the ZoomableImage widget
     fn load_image_data(&mut self, cx: &mut Cx, data: &[u8]) {
-        let image = self.view.image(id!(image));
-        match load_png_or_jpg(&image, cx, data) {
-            Ok(()) => {
-                self.view.view(id!(loading_view)).set_visible(cx, false);
-                self.view.view(id!(error_label_view)).set_visible(cx, false);
-                self.view.image(id!(image)).set_visible(cx, true);
-            }
-            Err(e) => {
-                error!("Failed to load image: {:?}", e);
-                self.show_error_state(cx);
+        println!("load_image_data");
+        if let Some(mut zoomable_image) = self.view.zoomable_image(id!(zoomable_image)).borrow_mut() {
+            match zoomable_image.set_image_texture(cx, data) {
+                Ok(()) => {
+                    self.view.view(id!(loading_view)).set_visible(cx, false);
+                    self.view.view(id!(error_label_view)).set_visible(cx, false);
+                    self.view.view(id!(image_container)).set_visible(cx, true);
+                }
+                Err(e) => {
+                    self.show_error_state(cx);
+                }
             }
         }
     }
@@ -207,18 +342,24 @@ impl ImageViewerModal {
     fn show_loading_state(&mut self, cx: &mut Cx) {
         self.view.view(id!(loading_view)).set_visible(cx, true);
         self.view.view(id!(error_label_view)).set_visible(cx, false);
-        self.view.image(id!(image)).set_visible(cx, false);
+        self.view.view(id!(image_container)).set_visible(cx, false);
     }
 
     /// Show error state
     fn show_error_state(&mut self, cx: &mut Cx) {
         self.view.view(id!(loading_view)).set_visible(cx, false);
         self.view.view(id!(error_label_view)).set_visible(cx, true);
-        self.view.image(id!(image)).set_visible(cx, false);
+        self.view.view(id!(image_container)).set_visible(cx, false);
     }
     fn close(&mut self, cx: &mut Cx) {
         self.mxc_uri = None;
         self.image_loaded = false;
+        
+        // Reset the zoomable image transform
+        if let Some(mut zoomable_image) = self.view.zoomable_image(id!(zoomable_image)).borrow_mut() {
+            zoomable_image.reset_transform(cx);
+        }
+        
         self.modal(id!(image_modal)).close(cx);
     }
 }

src/shared/text_or_image.rs

@@ -78,6 +78,7 @@ impl Widget for TextOrImage {
                     // so we do nothing this condition.
                     let image_viewer_modal = get_global_image_viewer_modal(cx);
                     image_viewer_modal.open(cx, Some(mxc_uri.clone()));
+                    println!("Image clicked");
                 }
                 _ => { },
             }