Add layer transforms, interaction in layer

crates/egui/src/context.rs

@@ -12,7 +12,7 @@ use crate::{
     input_state::*,
     layers::GraphicLayers,
     load::{Bytes, Loaders, SizedTexture},
-    memory::Options,
+    memory::{LayerTransform, Options},
     os::OperatingSystem,
     output::FullOutput,
     util::IdTypeMap,
@@ -2071,9 +2071,14 @@ impl Context {
     /// Move all the graphics at the given layer.
     ///
     /// Can be used to implement drag-and-drop (see relevant demo).
-    pub fn translate_layer(&self, layer_id: LayerId, delta: Vec2) {
+    pub fn transform_layer(&self, layer_id: LayerId, delta: Vec2, scale: f32) {
         if delta != Vec2::ZERO {
-            self.graphics_mut(|g| g.entry(layer_id).translate(delta));
+            let transform = LayerTransform {
+                translation: delta,
+                scale,
+            };
+            self.graphics_mut(|g| g.entry(layer_id).transform(&transform));
+            self.memory_mut(|m| m.layer_transforms_mut().insert(layer_id, transform));
         }
     }
 
@@ -2102,6 +2107,10 @@ impl Context {
     ///
     /// See also [`Response::contains_pointer`].
     pub fn rect_contains_pointer(&self, layer_id: LayerId, rect: Rect) -> bool {
+        let transform = self
+            .memory(|m| m.layer_transforms().get(&layer_id).cloned())
+            .unwrap_or_default();
+        let rect = transform.apply(rect);
         if !rect.is_positive() {
             return false;
         }
@@ -2142,6 +2151,12 @@ impl Context {
         let mut blocking_widget = None;
 
         self.write(|ctx| {
+            let transform = ctx
+                .memory
+                .layer_transforms()
+                .get(&layer_id)
+                .cloned()
+                .unwrap_or_default();
             let viewport = ctx.viewport();
 
             // We add all widgets here, even non-interactive ones,
@@ -2165,7 +2180,7 @@ impl Context {
                                 // which means there are no widgets covering us.
                                 break;
                             }
-                            if !blocking.rect.contains(pointer_pos) {
+                            if !transform.apply(blocking.rect).contains(pointer_pos) {
                                 continue;
                             }
                             if sense.interactive() && !blocking.sense.interactive() {

crates/egui/src/layers.rs

@@ -1,7 +1,7 @@
 //! Handles paint layers, i.e. how things
 //! are sometimes painted behind or in front of other things.
 
-use crate::{Id, *};
+use crate::{memory::LayerTransform, Id, *};
 use epaint::{ClippedShape, Shape};
 
 /// Different layer categories
@@ -159,10 +159,10 @@ impl PaintList {
     }
 
     /// Translate each [`Shape`] and clip rectangle by this much, in-place
-    pub fn translate(&mut self, delta: Vec2) {
+    pub fn transform(&mut self, transform: &LayerTransform) {
         for ClippedShape { clip_rect, shape } in &mut self.0 {
-            *clip_rect = clip_rect.translate(delta);
-            shape.translate(delta);
+            *clip_rect = transform.apply(*clip_rect);
+            shape.transform(transform.translation, transform.scale);
         }
     }
 

crates/egui/src/memory.rs

@@ -1,5 +1,7 @@
 #![warn(missing_docs)] // Let's keep this file well-documented.` to memory.rs
 
+use ahash::HashMap;
+
 use crate::{
     area, vec2,
     window::{self, WindowInteraction},
@@ -88,6 +90,7 @@ pub struct Memory {
     // -------------------------------------------------
     // Per-viewport:
     areas: ViewportIdMap<Areas>,
+    layer_transforms: HashMap<LayerId, LayerTransform>,
 
     #[cfg_attr(feature = "persistence", serde(skip))]
     pub(crate) interactions: ViewportIdMap<Interaction>,
@@ -107,6 +110,7 @@ impl Default for Memory {
             viewport_id: Default::default(),
             window_interactions: Default::default(),
             areas: Default::default(),
+            layer_transforms: Default::default(),
             popup: Default::default(),
             everything_is_visible: Default::default(),
         };
@@ -151,6 +155,32 @@ impl FocusDirection {
     }
 }
 
+#[derive(Clone, Debug)]
+#[cfg_attr(feature = "persistence", derive(serde::Deserialize, serde::Serialize))]
+#[cfg_attr(feature = "persistence", serde(default))]
+pub struct LayerTransform {
+    pub translation: Vec2,
+    pub scale: f32,
+}
+
+impl Default for LayerTransform {
+    fn default() -> Self {
+        Self {
+            translation: Vec2::default(),
+            scale: 1.0,
+        }
+    }
+}
+
+impl LayerTransform {
+    pub(crate) fn apply(&self, rect: Rect) -> Rect {
+        Rect::from_center_size(
+            (rect.center() + self.translation) * self.scale,
+            rect.size() * self.scale,
+        )
+    }
+}
+
 // ----------------------------------------------------------------------------
 
 /// Some global options that you can read and write.
@@ -605,9 +635,20 @@ impl Memory {
         self.areas.entry(self.viewport_id).or_default()
     }
 
+    /// Access layer transformations.
+    pub fn layer_transforms(&self) -> &HashMap<LayerId, LayerTransform> {
+        &self.layer_transforms
+    }
+
+    /// Access layer transformations.
+    pub fn layer_transforms_mut(&mut self) -> &mut HashMap<LayerId, LayerTransform> {
+        &mut self.layer_transforms
+    }
+
     /// Top-most layer at the given position.
     pub fn layer_id_at(&self, pos: Pos2, resize_interact_radius_side: f32) -> Option<LayerId> {
-        self.areas().layer_id_at(pos, resize_interact_radius_side)
+        self.areas()
+            .layer_id_at(pos, resize_interact_radius_side, &self.layer_transforms)
     }
 
     /// An iterator over all layers. Back-to-front. Top is last.
@@ -883,7 +924,12 @@ impl Areas {
     }
 
     /// Top-most layer at the given position.
-    pub fn layer_id_at(&self, pos: Pos2, resize_interact_radius_side: f32) -> Option<LayerId> {
+    pub fn layer_id_at(
+        &self,
+        pos: Pos2,
+        resize_interact_radius_side: f32,
+        layer_transforms: &HashMap<LayerId, LayerTransform>,
+    ) -> Option<LayerId> {
         for layer in self.order.iter().rev() {
             if self.is_visible(layer) {
                 if let Some(state) = self.areas.get(&layer.id) {
@@ -894,6 +940,10 @@ impl Areas {
                             rect = rect.expand(resize_interact_radius_side);
                         }
 
+                        if let Some(transform) = layer_transforms.get(layer) {
+                            rect = transform.apply(rect);
+                        }
+
                         if rect.contains(pos) {
                             return Some(*layer);
                         }

crates/egui/src/ui.rs

@@ -2153,7 +2153,7 @@ impl Ui {
 
             if let Some(pointer_pos) = self.ctx().pointer_interact_pos() {
                 let delta = pointer_pos - response.rect.center();
-                self.ctx().translate_layer(layer_id, delta);
+                self.ctx().transform_layer(layer_id, delta, 1.0);
             }
 
             InnerResponse::new(inner, response)

crates/egui_demo_lib/src/demo/demo_app_windows.rs

@@ -32,6 +32,7 @@ impl Default for Demos {
             Box::<super::MiscDemoWindow>::default(),
             Box::<super::multi_touch::MultiTouch>::default(),
             Box::<super::painting::Painting>::default(),
+            Box::<super::pan_zoom::PanZoom>::default(),
             Box::<super::panels::Panels>::default(),
             Box::<super::plot_demo::PlotDemo>::default(),
             Box::<super::scrolling::Scrolling>::default(),

crates/egui_demo_lib/src/demo/mod.rs

@@ -19,6 +19,7 @@ pub mod misc_demo_window;
 pub mod multi_touch;
 pub mod paint_bezier;
 pub mod painting;
+pub mod pan_zoom;
 pub mod panels;
 pub mod password;
 pub mod plot_demo;

crates/egui_demo_lib/src/demo/pan_zoom.rs

@@ -0,0 +1,106 @@
+#[derive(Clone, Default, PartialEq)]
+#[cfg_attr(feature = "serde", derive(serde::Deserialize, serde::Serialize))]
+pub struct PanZoom {
+    pan: egui::Vec2,
+    zoom: f32,
+}
+
+impl Eq for PanZoom {}
+
+impl super::Demo for PanZoom {
+    fn name(&self) -> &'static str {
+        "🗖 Pan Zoom"
+    }
+
+    fn show(&mut self, ctx: &egui::Context, open: &mut bool) {
+        use super::View as _;
+        let window = egui::Window::new("Pan Zoom")
+            .default_width(200.0)
+            .default_height(200.0)
+            .vscroll(false)
+            .open(open);
+        window.show(ctx, |ui| self.ui(ui));
+    }
+}
+
+impl super::View for PanZoom {
+    fn ui(&mut self, ui: &mut egui::Ui) {
+        // On initialization, zoom is 0
+        if self.zoom == 0.0 {
+            self.zoom = 1.0;
+        }
+
+        let (id, rect) = ui.allocate_space(ui.available_size());
+        let response = ui.interact(rect, id, egui::Sense::click_and_drag());
+        // Uncomment to allow dragging the background as well.
+        // self.pan += response.drag_delta() / self.zoom;
+
+        // Plot-like reset
+        if response.double_clicked() {
+            self.zoom = 1.0;
+            self.pan = egui::Vec2::ZERO;
+        }
+
+        if let Some(pointer) = ui.ctx().input(|i| i.pointer.hover_pos()) {
+            // Ignore if some other widget is covering this container.
+            if response.rect.contains(pointer) {
+                let original_zoom = self.zoom;
+                self.zoom *= ui.ctx().input(|i| i.zoom_delta());
+                let delta = pointer / self.zoom - pointer / original_zoom;
+                self.pan += delta;
+
+                // Keep mouse centered.
+                self.pan += ui.ctx().input(|i| i.raw_scroll_delta) / self.zoom;
+            }
+        }
+
+        let current_size = ui.min_rect();
+        [
+            (
+                current_size.left_top() + egui::Vec2::new(10.0, 10.0),
+                "top left!",
+            ),
+            (
+                current_size.left_bottom() + egui::Vec2::new(10.0, -10.0),
+                "bottom left?",
+            ),
+            (
+                current_size.right_bottom() + egui::Vec2::new(-10.0, -10.0),
+                "right bottom :D",
+            ),
+            (
+                current_size.right_top() + egui::Vec2::new(-10.0, 10.0),
+                "right top ):",
+            ),
+        ]
+        .iter()
+        .map(|(pos, msg)| {
+            egui::Area::new(*msg)
+                .default_pos(*pos)
+                // Need to cover up the pan_zoom demo window,
+                // but may also cover over other windows.
+                .order(egui::Order::Foreground)
+                .show(ui.ctx(), |ui| {
+                    let rect = egui::Rect::from_min_max(
+                        (rect.min / self.zoom) - self.pan,
+                        (rect.max / self.zoom) - self.pan,
+                    );
+                    ui.set_clip_rect(rect);
+                    egui::Frame::default()
+                        .rounding(egui::Rounding::same(4.0))
+                        .inner_margin(egui::Margin::same(8.0))
+                        .stroke(ui.ctx().style().visuals.window_stroke)
+                        .fill(ui.style().visuals.panel_fill)
+                        .show(ui, |ui| {
+                            ui.style_mut().wrap = Some(false);
+                            ui.button(*msg).clicked();
+                        });
+                })
+                .response
+                .layer_id
+        })
+        .for_each(|id| {
+            ui.ctx().transform_layer(id, self.pan, self.zoom);
+        });
+    }
+}

crates/epaint/src/mesh.rs

@@ -269,9 +269,10 @@ impl Mesh {
     }
 
     /// Translate location by this much, in-place
-    pub fn translate(&mut self, delta: Vec2) {
+    pub fn transform(&mut self, delta: Vec2, scale: f32) {
         for v in &mut self.vertices {
             v.pos += delta;
+            v.pos = (v.pos.to_vec2() * scale).to_pos2();
         }
     }