PixelPaint: Inherit from `AbstractZoomPanWidget`

12 files changed, 69 insertions, 244 deletions

diff --git a/Userland/Applications/PixelPaint/ImageEditor.cpp b/Userland/Applications/PixelPaint/ImageEditor.cpp
index 3aa2fb92e8..67565b7a29 100644
--- a/Userland/Applications/PixelPaint/ImageEditor.cpp
+++ b/Userland/Applications/PixelPaint/ImageEditor.cpp
@@ -32,6 +32,8 @@ ImageEditor::ImageEditor(NonnullRefPtr<Image> image)
     set_focus_policy(GUI::FocusPolicy::StrongFocus);
     m_undo_stack.push(make<ImageUndoCommand>(*m_image));
     m_image->add_client(*this);
+    set_original_rect(m_image->rect());
+    set_scale_bounds(0.1f, 100.0f);
 
     m_pixel_grid_threshold = (float)Config::read_i32("PixelPaint", "PixelGrid", "Threshold", 15);
     m_show_pixel_grid = Config::read_bool("PixelPaint", "PixelGrid", "Show", true);
@@ -106,33 +108,33 @@ void ImageEditor::paint_event(GUI::PaintEvent& event)
     {
         Gfx::DisjointRectSet background_rects;
         background_rects.add(frame_inner_rect());
-        background_rects.shatter(m_editor_image_rect);
+        background_rects.shatter(content_rect());
         for (auto& rect : background_rects.rects())
             painter.fill_rect(rect, palette().color(Gfx::ColorRole::Tray));
     }
 
-    Gfx::StylePainter::paint_transparency_grid(painter, m_editor_image_rect, palette());
+    Gfx::StylePainter::paint_transparency_grid(painter, content_rect(), palette());
 
-    painter.draw_rect(m_editor_image_rect.inflated(2, 2), Color::Black);
-    m_image->paint_into(painter, m_editor_image_rect);
+    painter.draw_rect(content_rect().inflated(2, 2), Color::Black);
+    m_image->paint_into(painter, content_rect());
 
     if (m_active_layer && m_show_active_layer_boundary) {
-        painter.draw_rect(enclosing_int_rect(image_rect_to_editor_rect(m_active_layer->relative_rect())).inflated(2, 2), Color::Black);
+        painter.draw_rect(enclosing_int_rect(content_to_frame_rect(m_active_layer->relative_rect())).inflated(2, 2), Color::Black);
     }
 
-    if (m_show_pixel_grid && m_scale > m_pixel_grid_threshold) {
-        auto event_image_rect = enclosing_int_rect(editor_rect_to_image_rect(event.rect())).inflated(1, 1);
+    if (m_show_pixel_grid && scale() > m_pixel_grid_threshold) {
+        auto event_image_rect = enclosing_int_rect(frame_to_content_rect(event.rect())).inflated(1, 1);
         auto image_rect = m_image->rect().inflated(1, 1).intersected(event_image_rect);
 
         for (auto i = image_rect.left(); i < image_rect.right(); i++) {
-            auto start_point = image_position_to_editor_position({ i, image_rect.top() }).to_type<int>();
-            auto end_point = image_position_to_editor_position({ i, image_rect.bottom() }).to_type<int>();
+            auto start_point = content_to_frame_position({ i, image_rect.top() }).to_type<int>();
+            auto end_point = content_to_frame_position({ i, image_rect.bottom() }).to_type<int>();
             painter.draw_line(start_point, end_point, Color::LightGray);
         }
 
         for (auto i = image_rect.top(); i < image_rect.bottom(); i++) {
-            auto start_point = image_position_to_editor_position({ image_rect.left(), i }).to_type<int>();
-            auto end_point = image_position_to_editor_position({ image_rect.right(), i }).to_type<int>();
+            auto start_point = content_to_frame_position({ image_rect.left(), i }).to_type<int>();
+            auto end_point = content_to_frame_position({ image_rect.right(), i }).to_type<int>();
             painter.draw_line(start_point, end_point, Color::LightGray);
         }
     }
@@ -140,10 +142,10 @@ void ImageEditor::paint_event(GUI::PaintEvent& event)
     if (m_show_guides) {
         for (auto& guide : m_guides) {
             if (guide.orientation() == Guide::Orientation::Horizontal) {
-                int y_coordinate = (int)image_position_to_editor_position({ 0.0f, guide.offset() }).y();
+                int y_coordinate = (int)content_to_frame_position({ 0.0f, guide.offset() }).y();
                 painter.draw_line({ 0, y_coordinate }, { rect().width(), y_coordinate }, Color::Cyan, 1, Gfx::Painter::LineStyle::Dashed, Color::LightGray);
             } else if (guide.orientation() == Guide::Orientation::Vertical) {
-                int x_coordinate = (int)image_position_to_editor_position({ guide.offset(), 0.0f }).x();
+                int x_coordinate = (int)content_to_frame_position({ guide.offset(), 0.0f }).x();
                 painter.draw_line({ x_coordinate, 0 }, { x_coordinate, rect().height() }, Color::Cyan, 1, Gfx::Painter::LineStyle::Dashed, Color::LightGray);
             }
         }
@@ -163,8 +165,8 @@ void ImageEditor::paint_event(GUI::PaintEvent& event)
         painter.fill_rect({ { 0, 0 }, { rect().width(), m_ruler_thickness } }, ruler_bg_color);
 
         const auto ruler_step = calculate_ruler_step_size();
-        const auto editor_origin_to_image = editor_position_to_image_position({ 0, 0 });
-        const auto editor_max_to_image = editor_position_to_image_position({ width(), height() });
+        const auto editor_origin_to_image = frame_to_content_position({ 0, 0 });
+        const auto editor_max_to_image = frame_to_content_position({ width(), height() });
 
         // Horizontal ruler
         painter.draw_line({ 0, m_ruler_thickness }, { rect().width(), m_ruler_thickness }, ruler_fg_color);
@@ -173,12 +175,12 @@ void ImageEditor::paint_event(GUI::PaintEvent& event)
             const int num_sub_divisions = min(ruler_step, 10);
             for (int x_sub = 0; x_sub < num_sub_divisions; ++x_sub) {
                 const int x_pos = x + (int)(ruler_step * x_sub / num_sub_divisions);
-                const int editor_x_sub = image_position_to_editor_position({ x_pos, 0 }).x();
+                const int editor_x_sub = content_to_frame_position({ x_pos, 0 }).x();
                 const int line_length = (x_sub % 2 == 0) ? m_ruler_thickness / 3 : m_ruler_thickness / 6;
                 painter.draw_line({ editor_x_sub, m_ruler_thickness - line_length }, { editor_x_sub, m_ruler_thickness }, ruler_fg_color);
             }
 
-            const int editor_x = image_position_to_editor_position({ x, 0 }).x();
+            const int editor_x = content_to_frame_position({ x, 0 }).x();
             painter.draw_line({ editor_x, 0 }, { editor_x, m_ruler_thickness }, ruler_fg_color);
             painter.draw_text({ { editor_x + 2, 0 }, { m_ruler_thickness, m_ruler_thickness - 2 } }, String::formatted("{}", x), painter.font(), Gfx::TextAlignment::CenterLeft, ruler_text_color);
         }
@@ -190,12 +192,12 @@ void ImageEditor::paint_event(GUI::PaintEvent& event)
             const int num_sub_divisions = min(ruler_step, 10);
             for (int y_sub = 0; y_sub < num_sub_divisions; ++y_sub) {
                 const int y_pos = y + (int)(ruler_step * y_sub / num_sub_divisions);
-                const int editor_y_sub = image_position_to_editor_position({ 0, y_pos }).y();
+                const int editor_y_sub = content_to_frame_position({ 0, y_pos }).y();
                 const int line_length = (y_sub % 2 == 0) ? m_ruler_thickness / 3 : m_ruler_thickness / 6;
                 painter.draw_line({ m_ruler_thickness - line_length, editor_y_sub }, { m_ruler_thickness, editor_y_sub }, ruler_fg_color);
             }
 
-            const int editor_y = image_position_to_editor_position({ 0, y }).y();
+            const int editor_y = content_to_frame_position({ 0, y }).y();
             painter.draw_line({ 0, editor_y }, { m_ruler_thickness, editor_y }, ruler_fg_color);
             painter.draw_text({ { 0, editor_y - m_ruler_thickness }, { m_ruler_thickness, m_ruler_thickness } }, String::formatted("{}", y), painter.font(), Gfx::TextAlignment::BottomRight, ruler_text_color);
         }
@@ -213,7 +215,7 @@ void ImageEditor::paint_event(GUI::PaintEvent& event)
 
 int ImageEditor::calculate_ruler_step_size() const
 {
-    const auto step_target = 80 / m_scale;
+    const auto step_target = 80 / scale();
     const auto max_factor = 5;
     for (int factor = 0; factor < max_factor; ++factor) {
         if (step_target <= 1 * (float)pow(10, factor))
@@ -240,50 +242,6 @@ Gfx::IntRect ImageEditor::mouse_indicator_rect_y() const
     return Gfx::IntRect(top_left, size);
 }
 
-Gfx::FloatRect ImageEditor::layer_rect_to_editor_rect(Layer const& layer, Gfx::IntRect const& layer_rect) const
-{
-    return image_rect_to_editor_rect(layer_rect.translated(layer.location()));
-}
-
-Gfx::FloatRect ImageEditor::image_rect_to_editor_rect(Gfx::IntRect const& image_rect) const
-{
-    Gfx::FloatRect editor_rect;
-    editor_rect.set_location(image_position_to_editor_position(image_rect.location()));
-    editor_rect.set_width((float)image_rect.width() * m_scale);
-    editor_rect.set_height((float)image_rect.height() * m_scale);
-    return editor_rect;
-}
-
-Gfx::FloatRect ImageEditor::editor_rect_to_image_rect(Gfx::IntRect const& editor_rect) const
-{
-    Gfx::FloatRect image_rect;
-    image_rect.set_location(editor_position_to_image_position(editor_rect.location()));
-    image_rect.set_width((float)editor_rect.width() / m_scale);
-    image_rect.set_height((float)editor_rect.height() / m_scale);
-    return image_rect;
-}
-
-Gfx::FloatPoint ImageEditor::layer_position_to_editor_position(Layer const& layer, Gfx::IntPoint const& layer_position) const
-{
-    return image_position_to_editor_position(layer_position.translated(layer.location()));
-}
-
-Gfx::FloatPoint ImageEditor::image_position_to_editor_position(Gfx::IntPoint const& image_position) const
-{
-    Gfx::FloatPoint editor_position;
-    editor_position.set_x(m_editor_image_rect.x() + ((float)image_position.x() * m_scale));
-    editor_position.set_y(m_editor_image_rect.y() + ((float)image_position.y() * m_scale));
-    return editor_position;
-}
-
-Gfx::FloatPoint ImageEditor::editor_position_to_image_position(Gfx::IntPoint const& editor_position) const
-{
-    Gfx::FloatPoint image_position;
-    image_position.set_x(((float)editor_position.x() - m_editor_image_rect.x()) / m_scale);
-    image_position.set_y(((float)editor_position.y() - m_editor_image_rect.y()) / m_scale);
-    return image_position;
-}
-
 void ImageEditor::second_paint_event(GUI::PaintEvent& event)
 {
     if (m_active_tool)
@@ -292,7 +250,7 @@ void ImageEditor::second_paint_event(GUI::PaintEvent& event)
 
 GUI::MouseEvent ImageEditor::event_with_pan_and_scale_applied(GUI::MouseEvent const& event) const
 {
-    auto image_position = editor_position_to_image_position(event.position());
+    auto image_position = frame_to_content_position(event.position());
     return {
         static_cast<GUI::Event::Type>(event.type()),
         Gfx::IntPoint(image_position.x(), image_position.y()),
@@ -305,7 +263,7 @@ GUI::MouseEvent ImageEditor::event_with_pan_and_scale_applied(GUI::MouseEvent co
 
 GUI::MouseEvent ImageEditor::event_adjusted_for_layer(GUI::MouseEvent const& event, Layer const& layer) const
 {
-    auto image_position = editor_position_to_image_position(event.position());
+    auto image_position = frame_to_content_position(event.position());
     image_position.translate_by(-layer.location().x(), -layer.location().y());
     return {
         static_cast<GUI::Event::Type>(event.type()),
@@ -320,8 +278,7 @@ GUI::MouseEvent ImageEditor::event_adjusted_for_layer(GUI::MouseEvent const& eve
 void ImageEditor::mousedown_event(GUI::MouseEvent& event)
 {
     if (event.button() == GUI::MouseButton::Middle) {
-        m_click_position = event.position();
-        m_saved_pan_origin = m_pan_origin;
+        start_panning(event.position());
         set_override_cursor(Gfx::StandardCursor::Drag);
         return;
     }
@@ -349,13 +306,8 @@ void ImageEditor::mousemove_event(GUI::MouseEvent& event)
         update(mouse_indicator_rect_y());
     }
 
-    if (event.buttons() & GUI::MouseButton::Middle) {
-        auto delta = event.position() - m_click_position;
-        m_pan_origin = m_saved_pan_origin.translated(
-            -delta.x(),
-            -delta.y());
-
-        relayout();
+    if (is_panning()) {
+        GUI::AbstractZoomPanWidget::mousemove_event(event);
         return;
     }
 
@@ -375,6 +327,10 @@ void ImageEditor::mousemove_event(GUI::MouseEvent& event)
 void ImageEditor::mouseup_event(GUI::MouseEvent& event)
 {
     set_override_cursor(m_active_cursor);
+    if (event.button() == GUI::MouseButton::Middle) {
+        stop_panning();
+        return;
+    }
 
     if (!m_active_tool)
         return;
@@ -384,12 +340,6 @@ void ImageEditor::mouseup_event(GUI::MouseEvent& event)
     m_active_tool->on_mouseup(m_active_layer.ptr(), tool_event);
 }
 
-void ImageEditor::mousewheel_event(GUI::MouseEvent& event)
-{
-    auto scale_delta = -event.wheel_delta() * 0.1f;
-    scale_centered_on_position(event.position(), scale_delta);
-}
-
 void ImageEditor::context_menu_event(GUI::ContextMenuEvent& event)
 {
     if (!m_active_tool)
@@ -397,12 +347,6 @@ void ImageEditor::context_menu_event(GUI::ContextMenuEvent& event)
     m_active_tool->on_context_menu(m_active_layer, event);
 }
 
-void ImageEditor::resize_event(GUI::ResizeEvent& event)
-{
-    relayout();
-    GUI::Frame::resize_event(event);
-}
-
 void ImageEditor::keydown_event(GUI::KeyEvent& event)
 {
     if (m_active_tool)
@@ -552,7 +496,7 @@ void ImageEditor::set_secondary_color(Color color)
 
 Layer* ImageEditor::layer_at_editor_position(Gfx::IntPoint const& editor_position)
 {
-    auto image_position = editor_position_to_image_position(editor_position);
+    auto image_position = frame_to_content_position(editor_position);
     for (ssize_t i = m_image->layer_count() - 1; i >= 0; --i) {
         auto& layer = m_image->layer(i);
         if (!layer.is_visible())
@@ -563,72 +507,9 @@ Layer* ImageEditor::layer_at_editor_position(Gfx::IntPoint const& editor_positio
     return nullptr;
 }
 
-void ImageEditor::set_absolute_scale(float scale, bool do_relayout)
-{
-    if (scale < 0.1f)
-        scale = 0.1f;
-    if (scale > 100.0f)
-        scale = 100.0f;
-    if (scale == m_scale)
-        return;
-    m_scale = scale;
-    if (on_scale_changed)
-        on_scale_changed(m_scale);
-    if (do_relayout)
-        relayout();
-}
-
-void ImageEditor::clamped_scale_by(float scale_delta, bool do_relayout)
-{
-    set_absolute_scale(m_scale * AK::exp2(scale_delta), do_relayout);
-}
-
-void ImageEditor::scale_centered_on_position(Gfx::IntPoint const& position, float scale_delta)
-{
-    auto old_scale = m_scale;
-    auto image_coord_of_position = editor_position_to_image_position(position);
-
-    auto image_size = m_image->size();
-    Gfx::FloatPoint offset_from_center_in_image_coords = {
-        image_coord_of_position.x() - image_size.width() / 2.0f,
-        image_coord_of_position.y() - image_size.height() / 2.0f
-    };
-    Gfx::FloatPoint offset_from_center_in_editor_coords = {
-        position.x() - width() / 2.0f,
-        position.y() - height() / 2.0f
-    };
-
-    clamped_scale_by(scale_delta, false);
-
-    m_pan_origin = {
-        offset_from_center_in_image_coords.x() * m_scale - offset_from_center_in_editor_coords.x(),
-        offset_from_center_in_image_coords.y() * m_scale - offset_from_center_in_editor_coords.y()
-    };
-
-    if (old_scale != m_scale)
-        relayout();
-}
-
-void ImageEditor::scale_by(float scale_delta)
-{
-    if (scale_delta == 0)
-        return;
-    clamped_scale_by(scale_delta, true);
-}
-
-void ImageEditor::set_pan_origin(Gfx::FloatPoint const& pan_origin)
-{
-    if (m_pan_origin == pan_origin)
-        return;
-
-    m_pan_origin = pan_origin;
-    relayout();
-}
-
 void ImageEditor::fit_image_to_view(FitType type)
 {
     auto viewport_rect = rect();
-    m_pan_origin = Gfx::FloatPoint(0, 0);
 
     if (m_show_rulers) {
         viewport_rect = {
@@ -643,56 +524,35 @@ void ImageEditor::fit_image_to_view(FitType type)
     auto image_size = image().size();
     auto height_ratio = floorf(border_ratio * viewport_rect.height()) / (float)image_size.height();
     auto width_ratio = floorf(border_ratio * viewport_rect.width()) / (float)image_size.width();
+
+    float new_scale = 1.0f;
     switch (type) {
     case FitType::Width:
-        set_absolute_scale(width_ratio, false);
+        new_scale = width_ratio;
         break;
     case FitType::Height:
-        set_absolute_scale(height_ratio, false);
+        new_scale = height_ratio;
         break;
     case FitType::Image:
-        set_absolute_scale(min(height_ratio, width_ratio), false);
+        new_scale = min(height_ratio, width_ratio);
         break;
     }
 
-    float offset = m_show_rulers ? -m_ruler_thickness / (m_scale * 2.0f) : 0.0f;
-    m_pan_origin = Gfx::FloatPoint(offset, offset);
-
-    relayout();
-}
-
-void ImageEditor::reset_scale_and_position()
-{
-    set_absolute_scale(1.0f, false);
-
-    m_pan_origin = Gfx::FloatPoint(0, 0);
-    relayout();
-}
-
-void ImageEditor::relayout()
-{
-    Gfx::IntSize new_size;
-    new_size.set_width(image().size().width() * m_scale);
-    new_size.set_height(image().size().height() * m_scale);
-    m_editor_image_rect.set_size(new_size);
-
-    Gfx::IntPoint new_location;
-    new_location.set_x((width() / 2) - (new_size.width() / 2) - (m_pan_origin.x()));
-    new_location.set_y((height() / 2) - (new_size.height() / 2) - (m_pan_origin.y()));
-    m_editor_image_rect.set_location(new_location);
+    float offset = m_show_rulers ? -m_ruler_thickness / (scale() * 2.0f) : 0.0f;
 
-    update();
+    set_origin(Gfx::FloatPoint(offset, offset));
+    set_scale(new_scale);
 }
 
 void ImageEditor::image_did_change(Gfx::IntRect const& modified_image_rect)
 {
-    update(m_editor_image_rect.intersected(enclosing_int_rect(image_rect_to_editor_rect(modified_image_rect))));
+    update(content_rect().intersected(enclosing_int_rect(content_to_frame_rect(modified_image_rect))));
 }
 
 void ImageEditor::image_did_change_rect(Gfx::IntRect const& new_image_rect)
 {
-    m_editor_image_rect = enclosing_int_rect(image_rect_to_editor_rect(new_image_rect));
-    update(m_editor_image_rect);
+    set_original_rect(new_image_rect);
+    set_content_rect(new_image_rect);
 }
 
 void ImageEditor::image_select_layer(Layer* layer)
diff --git a/Userland/Applications/PixelPaint/ImageEditor.h b/Userland/Applications/PixelPaint/ImageEditor.h
index 2f17914b84..de881a3ced 100644
--- a/Userland/Applications/PixelPaint/ImageEditor.h
+++ b/Userland/Applications/PixelPaint/ImageEditor.h
@@ -12,6 +12,7 @@
 #include "Image.h"
 #include "Selection.h"
 #include <AK/Variant.h>
+#include <LibGUI/AbstractZoomPanWidget.h>
 #include <LibGUI/Frame.h>
 #include <LibGUI/UndoStack.h>
 #include <LibGfx/Point.h>
@@ -22,7 +23,7 @@ class Layer;
 class Tool;
 
 class ImageEditor final
-    : public GUI::Frame
+    : public GUI::AbstractZoomPanWidget
     , public ImageClient {
     C_OBJECT(ImageEditor);
 
@@ -68,16 +69,7 @@ public:
         Image
     };
 
-    float scale() const { return m_scale; }
-    void scale_centered_on_position(Gfx::IntPoint const&, float);
     void fit_image_to_view(FitType type = FitType::Image);
-    void reset_scale_and_position();
-    void scale_by(float);
-    void set_absolute_scale(float, bool do_relayout = true);
-    Function<void(float)> on_scale_changed;
-
-    void set_pan_origin(Gfx::FloatPoint const&);
-    Gfx::FloatPoint pan_origin() const { return m_pan_origin; }
 
     Color primary_color() const { return m_primary_color; }
     void set_primary_color(Color);
@@ -102,13 +94,6 @@ public:
 
     Function<void(void)> on_leave;
 
-    Gfx::FloatRect layer_rect_to_editor_rect(Layer const&, Gfx::IntRect const&) const;
-    Gfx::FloatRect image_rect_to_editor_rect(Gfx::IntRect const&) const;
-    Gfx::FloatRect editor_rect_to_image_rect(Gfx::IntRect const&) const;
-    Gfx::FloatPoint layer_position_to_editor_position(Layer const&, Gfx::IntPoint const&) const;
-    Gfx::FloatPoint image_position_to_editor_position(Gfx::IntPoint const&) const;
-    Gfx::FloatPoint editor_position_to_image_position(Gfx::IntPoint const&) const;
-
     bool request_close();
 
     void save_project_as();
@@ -137,11 +122,9 @@ private:
     virtual void mousedown_event(GUI::MouseEvent&) override;
     virtual void mousemove_event(GUI::MouseEvent&) override;
     virtual void mouseup_event(GUI::MouseEvent&) override;
-    virtual void mousewheel_event(GUI::MouseEvent&) override;
     virtual void keydown_event(GUI::KeyEvent&) override;
     virtual void keyup_event(GUI::KeyEvent&) override;
     virtual void context_menu_event(GUI::ContextMenuEvent&) override;
-    virtual void resize_event(GUI::ResizeEvent&) override;
     virtual void enter_event(Core::Event&) override;
     virtual void leave_event(Core::Event&) override;
 
@@ -154,9 +137,6 @@ private:
 
     Result<void, String> save_project_to_fd_and_close(int fd) const;
 
-    void clamped_scale_by(float, bool do_relayout);
-    void relayout();
-
     int calculate_ruler_step_size() const;
     Gfx::IntRect mouse_indicator_rect_x() const;
     Gfx::IntRect mouse_indicator_rect_y() const;
@@ -180,11 +160,6 @@ private:
     Color m_primary_color { Color::Black };
     Color m_secondary_color { Color::White };
 
-    Gfx::IntRect m_editor_image_rect;
-    float m_scale { 1 };
-    Gfx::FloatPoint m_pan_origin;
-    Gfx::FloatPoint m_saved_pan_origin;
-    Gfx::IntPoint m_click_position;
     Gfx::IntPoint m_mouse_position;
 
     int m_ruler_thickness { 20 };
diff --git a/Userland/Applications/PixelPaint/MainWidget.cpp b/Userland/Applications/PixelPaint/MainWidget.cpp
index 04a61a187f..67b1c00d08 100644
--- a/Userland/Applications/PixelPaint/MainWidget.cpp
+++ b/Userland/Applications/PixelPaint/MainWidget.cpp
@@ -90,7 +90,7 @@ MainWidget::MainWidget()
             image_editor.set_active_tool(active_tool);
         m_show_guides_action->set_checked(image_editor.guide_visibility());
         m_show_rulers_action->set_checked(image_editor.ruler_visibility());
-        image_editor.on_scale_changed(image_editor.scale());
+        image_editor.on_scale_change(image_editor.scale());
     };
 }
 
@@ -346,9 +346,8 @@ void MainWidget::initialize_menubar(GUI::Window& window)
 
     m_reset_zoom_action = GUI::CommonActions::make_reset_zoom_action(
         [&](auto&) {
-            auto* editor = current_image_editor();
-            VERIFY(editor);
-            editor->reset_scale_and_position();
+            if (auto* editor = current_image_editor())
+                editor->reset_view();
         });
 
     m_add_guide_action = GUI::Action::create(
@@ -666,15 +665,15 @@ void MainWidget::initialize_menubar(GUI::Window& window)
         auto zoom_level_optional = value.view().trim("%"sv, TrimMode::Right).to_int();
         if (!zoom_level_optional.has_value()) {
             // Indicate that a parse-error occurred by resetting the text to the current state.
-            editor->on_scale_changed(editor->scale());
+            editor->on_scale_change(editor->scale());
             return;
         }
 
-        editor->set_absolute_scale(zoom_level_optional.value() * 1.0f / 100);
+        editor->set_scale(zoom_level_optional.value() * 1.0f / 100);
         // If the selected zoom level got clamped, or a "fit to …" level was selected,
         // there is a chance that the new scale is identical to the old scale.
         // In these cases, we need to manually reset the text:
-        editor->on_scale_changed(editor->scale());
+        editor->on_scale_change(editor->scale());
     };
     m_zoom_combobox->on_return_pressed = [this]() {
         m_zoom_combobox->on_change(m_zoom_combobox->text(), GUI::ModelIndex());
@@ -807,7 +806,7 @@ ImageEditor& MainWidget::create_new_editor(NonnullRefPtr<Image> image)
         m_show_rulers_action->set_checked(show_rulers);
     };
 
-    image_editor.on_scale_changed = [this](float scale) {
+    image_editor.on_scale_change = [this](float scale) {
         m_zoom_combobox->set_text(String::formatted("{}%", roundf(scale * 100)));
     };
 
diff --git a/Userland/Applications/PixelPaint/Selection.cpp b/Userland/Applications/PixelPaint/Selection.cpp
index dc1e9e0838..a55975fe7f 100644
--- a/Userland/Applications/PixelPaint/Selection.cpp
+++ b/Userland/Applications/PixelPaint/Selection.cpp
@@ -55,7 +55,7 @@ void Selection::draw_marching_ants(Gfx::Painter& painter, Mask const& mask) cons
 
     // Only check the visible selection area when drawing for performance
     auto rect = m_editor.rect();
-    rect = Gfx::enclosing_int_rect(m_editor.editor_rect_to_image_rect(rect));
+    rect = Gfx::enclosing_int_rect(m_editor.frame_to_content_rect(rect));
     rect.inflate(step * 2, step * 2); // prevent borders from having visible ants if the selection extends beyond it
 
     // Scan the image horizontally to find vertical borders
@@ -67,7 +67,7 @@ void Selection::draw_marching_ants(Gfx::Painter& painter, Mask const& mask) cons
 
             if (this_selected != previous_selected) {
                 Gfx::IntRect image_pixel { x, y, 1, 1 };
-                auto pixel = m_editor.image_rect_to_editor_rect(image_pixel).to_type<int>();
+                auto pixel = m_editor.content_to_frame_rect(image_pixel).to_type<int>();
                 auto end = max(pixel.top(), pixel.bottom()); // for when the zoom is < 100%
 
                 for (int pixel_y = pixel.top(); pixel_y <= end; pixel_y++) {
@@ -88,7 +88,7 @@ void Selection::draw_marching_ants(Gfx::Painter& painter, Mask const& mask) cons
 
             if (this_selected != previous_selected) {
                 Gfx::IntRect image_pixel { x, y, 1, 1 };
-                auto pixel = m_editor.image_rect_to_editor_rect(image_pixel).to_type<int>();
+                auto pixel = m_editor.content_to_frame_rect(image_pixel).to_type<int>();
                 auto end = max(pixel.left(), pixel.right()); // for when the zoom is < 100%
 
                 for (int pixel_x = pixel.left(); pixel_x <= end; pixel_x++) {
diff --git a/Userland/Applications/PixelPaint/Tools/CloneTool.cpp b/Userland/Applications/PixelPaint/Tools/CloneTool.cpp
index d06084eee6..0ed7f141dd 100644
--- a/Userland/Applications/PixelPaint/Tools/CloneTool.cpp
+++ b/Userland/Applications/PixelPaint/Tools/CloneTool.cpp
@@ -102,7 +102,7 @@ void CloneTool::on_second_paint(Layer const*, GUI::PaintEvent& event)
     GUI::Painter painter(*m_editor);
     painter.add_clip_rect(event.rect());
 
-    auto sample_pos = m_editor->image_position_to_editor_position(m_sample_location.value());
+    auto sample_pos = m_editor->content_to_frame_position(m_sample_location.value());
     // We don't want the marker to be a single pixel and hide the color.
     auto offset = AK::max(2, size() / 2);
     Gfx::IntRect rect = {
diff --git a/Userland/Applications/PixelPaint/Tools/EllipseTool.cpp b/Userland/Applications/PixelPaint/Tools/EllipseTool.cpp
index 18b7a6b0a3..2eca8ec643 100644
--- a/Userland/Applications/PixelPaint/Tools/EllipseTool.cpp
+++ b/Userland/Applications/PixelPaint/Tools/EllipseTool.cpp
@@ -107,8 +107,8 @@ void EllipseTool::on_second_paint(Layer const* layer, GUI::PaintEvent& event)
 
     GUI::Painter painter(*m_editor);
     painter.add_clip_rect(event.rect());
-    auto preview_start = m_editor->layer_position_to_editor_position(*layer, m_ellipse_start_position).to_type<int>();
-    auto preview_end = m_editor->layer_position_to_editor_position(*layer, m_ellipse_end_position).to_type<int>();
+    auto preview_start = m_editor->content_to_frame_position(m_ellipse_start_position).to_type<int>();
+    auto preview_end = m_editor->content_to_frame_position(m_ellipse_end_position).to_type<int>();
     draw_using(painter, preview_start, preview_end, AK::max(m_thickness * m_editor->scale(), 1));
 }
 
diff --git a/Userland/Applications/PixelPaint/Tools/GuideTool.cpp b/Userland/Applications/PixelPaint/Tools/GuideTool.cpp
index edb09bfef5..9a7e422955 100644
--- a/Userland/Applications/PixelPaint/Tools/GuideTool.cpp
+++ b/Userland/Applications/PixelPaint/Tools/GuideTool.cpp
@@ -171,7 +171,7 @@ void GuideTool::on_context_menu(Layer*, GUI::ContextMenuEvent& event)
             editor()));
     }
 
-    auto image_position = editor()->editor_position_to_image_position(event.position());
+    auto image_position = editor()->frame_to_content_position(event.position());
     m_context_menu_guide = closest_guide({ (int)image_position.x(), (int)image_position.y() });
     if (m_context_menu_guide)
         m_context_menu->popup(event.screen_position());
diff --git a/Userland/Applications/PixelPaint/Tools/MoveTool.cpp b/Userland/Applications/PixelPaint/Tools/MoveTool.cpp
index 6106b2b774..9690715c6a 100644
--- a/Userland/Applications/PixelPaint/Tools/MoveTool.cpp
+++ b/Userland/Applications/PixelPaint/Tools/MoveTool.cpp
@@ -24,11 +24,8 @@ MoveTool::~MoveTool()
 
 void MoveTool::on_mousedown(Layer* layer, MouseEvent& event)
 {
-    if (event.image_event().button() == GUI::MouseButton::Secondary && !m_is_panning) {
-        m_is_panning = true;
-        m_event_origin = event.raw_event().position();
-        m_saved_pan_origin = m_editor->pan_origin();
-        m_editor->set_override_cursor(Gfx::StandardCursor::Drag);
+    if (event.image_event().button() == GUI::MouseButton::Secondary) {
+        m_editor->start_panning(event.raw_event().position());
         return;
     }
 
@@ -48,12 +45,8 @@ void MoveTool::on_mousedown(Layer* layer, MouseEvent& event)
 
 void MoveTool::on_mousemove(Layer* layer, MouseEvent& event)
 {
-    if (m_is_panning) {
-        auto& raw_event = event.raw_event();
-        auto delta = raw_event.position() - m_event_origin;
-        m_editor->set_pan_origin(m_saved_pan_origin.translated(
-            -delta.x(),
-            -delta.y()));
+    if (m_editor->is_panning()) {
+        m_editor->pan_to(event.raw_event().position());
         return;
     }
 
@@ -70,8 +63,8 @@ void MoveTool::on_mousemove(Layer* layer, MouseEvent& event)
 
 void MoveTool::on_mouseup(Layer* layer, MouseEvent& event)
 {
-    if (event.image_event().button() == GUI::MouseButton::Secondary && m_is_panning) {
-        m_is_panning = false;
+    if (event.image_event().button() == GUI::MouseButton::Secondary) {
+        m_editor->stop_panning();
         m_editor->set_override_cursor(cursor());
         return;
     }
diff --git a/Userland/Applications/PixelPaint/Tools/MoveTool.h b/Userland/Applications/PixelPaint/Tools/MoveTool.h
index 4fa391b7c5..d62d554258 100644
--- a/Userland/Applications/PixelPaint/Tools/MoveTool.h
+++ b/Userland/Applications/PixelPaint/Tools/MoveTool.h
@@ -25,9 +25,6 @@ private:
     RefPtr<Layer> m_layer_being_moved;
     Gfx::IntPoint m_event_origin;
     Gfx::IntPoint m_layer_origin;
-
-    bool m_is_panning { false };
-    Gfx::FloatPoint m_saved_pan_origin;
 };
 
 }
diff --git a/Userland/Applications/PixelPaint/Tools/RectangleSelectTool.cpp b/Userland/Applications/PixelPaint/Tools/RectangleSelectTool.cpp
index 7f7d536506..fa52524495 100644
--- a/Userland/Applications/PixelPaint/Tools/RectangleSelectTool.cpp
+++ b/Userland/Applications/PixelPaint/Tools/RectangleSelectTool.cpp
@@ -134,7 +134,7 @@ void RectangleSelectTool::on_second_paint(Layer const*, GUI::PaintEvent& event)
     painter.add_clip_rect(event.rect());
 
     auto rect_in_image = Gfx::IntRect::from_two_points(m_selection_start, m_selection_end);
-    auto rect_in_editor = m_editor->image_rect_to_editor_rect(rect_in_image);
+    auto rect_in_editor = m_editor->content_to_frame_rect(rect_in_image);
 
     m_editor->selection().draw_marching_ants(painter, rect_in_editor.to_type<int>());
 }
diff --git a/Userland/Applications/PixelPaint/Tools/Tool.cpp b/Userland/Applications/PixelPaint/Tools/Tool.cpp
index 566b00218b..e1dde2fa05 100644
--- a/Userland/Applications/PixelPaint/Tools/Tool.cpp
+++ b/Userland/Applications/PixelPaint/Tools/Tool.cpp
@@ -55,7 +55,7 @@ void Tool::on_keydown(GUI::KeyEvent& event)
 
 Gfx::IntPoint Tool::editor_stroke_position(Gfx::IntPoint const& pixel_coords, int stroke_thickness) const
 {
-    auto position = m_editor->image_position_to_editor_position(pixel_coords);
+    auto position = m_editor->content_to_frame_position(pixel_coords);
     auto offset = (stroke_thickness % 2 == 0) ? 0 : m_editor->scale() / 2;
     position = position.translated(offset, offset);
     return position.to_type<int>();
diff --git a/Userland/Applications/PixelPaint/Tools/ZoomTool.cpp b/Userland/Applications/PixelPaint/Tools/ZoomTool.cpp
index d7792db0e4..b1ca6dc28f 100644
--- a/Userland/Applications/PixelPaint/Tools/ZoomTool.cpp
+++ b/Userland/Applications/PixelPaint/Tools/ZoomTool.cpp
@@ -27,7 +27,8 @@ void ZoomTool::on_mousedown(Layer*, MouseEvent& event)
         return;
 
     auto scale_factor = (raw_event.button() == GUI::MouseButton::Primary) ? m_sensitivity : -m_sensitivity;
-    m_editor->scale_centered_on_position(raw_event.position(), scale_factor);
+    auto new_scale = AK::exp2(scale_factor);
+    m_editor->scale_centered(new_scale, raw_event.position());
 }
 
 GUI::Widget* ZoomTool::get_properties_widget()