Add Viewport up/down scroll

src/main.rs

@@ -26,12 +26,13 @@ use druid::widget::{
 };
 use druid::{
     AppDelegate, AppLauncher, Color, Command, Data, DelegateCtx, Env, FileDialogOptions, FileSpec,
-    Handled, Lens, Target, WindowDesc,
+    Handled, Lens, Target, WidgetId, WindowDesc,
 };
 
 use im::Vector;
 
-use stiletto::tool::{CanvasToolCtx, CanvasToolParams};
+use stiletto::tool::CanvasToolParams;
+use stiletto::widget::tool_ctx::{CanvasToolCtx};
 use stiletto::widget::{build_simple_tool_widget, CanvasState, CanvasToolIconState, CanvasWidget};
 use stiletto::DocumentSnapshot;
 
@@ -106,6 +107,8 @@ impl StilettoState {
 }
 
 fn build_ui() -> impl Widget<StilettoState> {
+    let canvas_id = WidgetId::next();
+
     let history_buttons = Flex::row()
         .cross_axis_alignment(CrossAxisAlignment::Center)
         .with_child(Button::new("Undo").on_click(
@@ -124,19 +127,27 @@ fn build_ui() -> impl Widget<StilettoState> {
 
     let save_buttons = Flex::row()
         .cross_axis_alignment(CrossAxisAlignment::Center)
-        .with_child(
-            Button::new("Save").on_click(move |ctx, data: &mut StilettoState, _| {
-                if data.current_file_path.is_some() {
-                    ctx.submit_command(Command::new(commands::SAVE_FILE, (), Target::Auto));
-                } else {
-                    ctx.submit_command(Command::new(
-                        druid::commands::SHOW_SAVE_PANEL,
-                        save_dialog_options_clone.clone(),
-                        Target::Auto,
-                    ))
-                }
-            }),
-        )
+        .with_child(Button::new("Up").on_click(
+            move |ctx: &mut EventCtx, _data: &mut StilettoState, _env: &Env| {
+                ctx.submit_command(Command::new(CanvasWidget::SCROLL, -30.0, canvas_id));
+            },
+        ))
+        .with_child(Button::new("Down").on_click(
+            move |ctx: &mut EventCtx, _data: &mut StilettoState, _env: &Env| {
+                ctx.submit_command(Command::new(CanvasWidget::SCROLL, 30.0, canvas_id));
+            },
+        ))
+        .with_child(Button::new("Save").on_click(move |ctx, data: &mut StilettoState, _| {
+            if data.current_file_path.is_some() {
+                ctx.submit_command(Command::new(commands::SAVE_FILE, (), Target::Auto));
+            } else {
+                ctx.submit_command(Command::new(
+                    druid::commands::SHOW_SAVE_PANEL,
+                    save_dialog_options_clone.clone(),
+                    Target::Auto,
+                ))
+            }
+        }))
         .with_child(Button::new("Save As").on_click(move |ctx, _, _| {
             ctx.submit_command(Command::new(
                 druid::commands::SHOW_SAVE_PANEL,
@@ -182,7 +193,12 @@ fn build_ui() -> impl Widget<StilettoState> {
         .cross_axis_alignment(CrossAxisAlignment::Center)
         .must_fill_main_axis(true)
         .with_child(SizedBox::new(Align::left(toolbar)).height(50.0))
-        .with_flex_child((CanvasWidget).lens(StilettoState::canvas), 1.0)
+        .with_flex_child(
+            CanvasWidget::new()
+                .lens(StilettoState::canvas)
+                .with_id(canvas_id),
+            1.0,
+        )
         .controller(ToolSwitcher::new())
 }
 

src/tool.rs

@@ -14,12 +14,7 @@
 //  You should have received a copy of the GNU Affero General Public License
 //  along with this program.  If not, see <https://www.gnu.org/licenses/>.
 
-use druid::kurbo::BezPath;
-use druid::{Color, Data, Env, Event, EventCtx, PaintCtx};
-
-use crate::canvas;
-use crate::canvas::{Canvas, CanvasElement};
-use crate::history::VersionedCanvas;
+use druid::{Color, Data};
 
 #[derive(Clone, Data)]
 pub enum CanvasToolParams {
@@ -32,155 +27,3 @@ pub enum CanvasToolType {
     Pen,
     Eraser,
 }
-
-#[derive(Clone, Data)]
-pub enum CanvasToolState {
-    Idle,
-    DrawingFreehand {
-        pen_params: CanvasToolParams,
-        current_path: CanvasElement,
-    },
-    Erasing,
-}
-
-#[derive(Clone, Data)]
-pub struct CanvasToolCtx {
-    initial_params: CanvasToolParams,
-    state: CanvasToolState,
-}
-
-impl CanvasToolParams {
-    pub fn tool_type(&self) -> CanvasToolType {
-        match self {
-            CanvasToolParams::Pen { .. } => CanvasToolType::Pen,
-            CanvasToolParams::Eraser => CanvasToolType::Eraser,
-        }
-    }
-}
-
-impl CanvasToolCtx {
-    pub fn new(params: CanvasToolParams) -> Self {
-        CanvasToolCtx {
-            initial_params: params,
-            state: CanvasToolState::Idle,
-        }
-    }
-
-    pub fn handle_event(
-        &mut self,
-        ctx: &EventCtx,
-        event: &Event,
-        mut vcanvas: &mut VersionedCanvas,
-        env: &Env,
-    ) {
-        match self.initial_params.tool_type() {
-            CanvasToolType::Pen => self.handle_pen_event(&ctx, &event, &mut vcanvas, &env),
-            CanvasToolType::Eraser => self.handle_erase_event(&ctx, &event, &mut vcanvas, &env),
-        }
-    }
-
-    pub fn handle_erase_event(
-        &mut self,
-        _ctx: &EventCtx,
-        event: &Event,
-        vcanvas: &mut VersionedCanvas,
-        _env: &Env,
-    ) {
-        match (&mut self.state, event) {
-            (CanvasToolState::Idle, Event::MouseDown(_)) => {
-                self.state = CanvasToolState::Erasing;
-            }
-            (CanvasToolState::Erasing, Event::MouseMove(mouse_event)) => {
-                let eraser_rect = druid::Rect::from_center_size(mouse_event.pos, (5.0, 5.0));
-                let old_elements = vcanvas.get().elements();
-                let mut new_elements = old_elements.clone();
-                new_elements.retain(|elem| {
-                    // Check if the element intersects the eraser rect
-                    if elem.bounding_box().intersect(eraser_rect).area() > 0.0 {
-                        if elem.intersects_rect(eraser_rect) {
-                            return false;
-                        }
-                    }
-                    return true;
-                });
-                if new_elements.len() != old_elements.len() {
-                    vcanvas.update(|canvas: &mut Canvas| {
-                        *canvas = Canvas::new_with_elements(new_elements);
-                    });
-                }
-            }
-            (CanvasToolState::Erasing, Event::MouseUp(_)) => {
-                self.state = CanvasToolState::Idle;
-            }
-            _ => {}
-        }
-    }
-
-    pub fn handle_pen_event(
-        &mut self,
-        _ctx: &EventCtx,
-        event: &Event,
-        vcanvas: &mut VersionedCanvas,
-        _env: &Env,
-    ) {
-        match (&mut self.state, event) {
-            (CanvasToolState::Idle, Event::MouseDown(mouse_event)) => {
-                let mut kurbo_path = BezPath::new();
-                kurbo_path.move_to((mouse_event.pos.x, mouse_event.pos.y));
-                if let CanvasToolParams::Pen { thickness, color } = &self.initial_params {
-                    self.state = CanvasToolState::DrawingFreehand {
-                        pen_params: self.initial_params.clone(),
-                        current_path: CanvasElement::Freehand {
-                            path: canvas::Path { kurbo_path },
-                            thickness: *thickness,
-                            stroke_color: color.clone(),
-                        },
-                    };
-                }
-            }
-            (
-                CanvasToolState::DrawingFreehand {
-                    ref mut current_path,
-                    ..
-                },
-                Event::MouseMove(mouse_event),
-            ) => {
-                if let CanvasElement::Freehand { ref mut path, .. } = current_path {
-                    path.kurbo_path
-                        .line_to((mouse_event.pos.x, mouse_event.pos.y));
-                }
-            }
-            (CanvasToolState::DrawingFreehand { .. }, Event::MouseUp(_)) => {
-                vcanvas.update(move |canvas: &mut Canvas| {
-                    let current_state = std::mem::replace(&mut self.state, CanvasToolState::Idle);
-                    if let CanvasToolState::DrawingFreehand { current_path, .. } = current_state {
-                        if let CanvasElement::Freehand {
-                            mut path,
-                            mut thickness,
-                            stroke_color,
-                        } = current_path
-                        {
-                            canvas.add_element(CanvasElement::Freehand {
-                                path,
-                                thickness,
-                                stroke_color,
-                            });
-                        }
-                    }
-                });
-            }
-            _ => {}
-        }
-    }
-
-    pub fn needs_repaint(&self) -> bool {
-        true
-    }
-
-    pub fn paint(&self, ctx: &mut PaintCtx, _env: &Env) {
-        match &self.state {
-            CanvasToolState::DrawingFreehand { current_path, .. } => current_path.draw(ctx),
-            _ => {}
-        }
-    }
-}

src/widget/canvas.rs

@@ -16,13 +16,16 @@
 
 use im::Vector;
 
+use super::tool_ctx::{CanvasToolCtx};
 use crate::canvas::Canvas;
 use crate::history::VersionedCanvas;
-use crate::tool::CanvasToolCtx;
 use crate::DocumentSnapshot;
 
+use druid::scroll_component::ScrollComponent;
 use druid::widget::prelude::*;
-use druid::{Color, Data, Env, Event, PointerType};
+use druid::widget::Viewport;
+use druid::{Affine, Color, Data, Env, Event, PointerType, Selector};
+
 
 #[derive(Clone, Data)]
 pub struct CanvasState {
@@ -83,54 +86,102 @@ impl CanvasState {
         &mut self.tool_ctx
     }
 
-    pub fn handle_event(&mut self, mut ctx: &mut EventCtx, event: &Event, env: &Env) {
+    pub fn handle_event(&mut self, ctx: &mut EventCtx, event: &Event, transform: Affine, env: &Env) {
         self.tool_ctx
-            .handle_event(ctx, event, &mut self.versioned_canvas, env);
+            .handle_event(ctx, event, &mut self.versioned_canvas, transform, env);
     }
 }
 
-pub struct CanvasWidget;
+pub struct CanvasWidget {
+    viewport: Viewport,
+    scroll_component: ScrollComponent,
+}
+
+impl CanvasWidget {
+    pub fn new() -> Self {
+        CanvasWidget {
+            viewport: Viewport {
+                content_size: Size::new(0.0, 0.0),
+                rect: druid::Rect::new(0.0, 0.0, 0.0, 0.0),
+            },
+            scroll_component: ScrollComponent::new(),
+        }
+    }
+
+    pub const SCROLL: Selector<f64> = Selector::new("scroll_canvas");
+}
 
 impl Widget<CanvasState> for CanvasWidget {
     fn event(&mut self, ctx: &mut EventCtx, event: &Event, data: &mut CanvasState, env: &Env) {
         ctx.request_focus();
-        let mut toggle_eraser_event = false;
-        let mut enable_temporary_erasing = false;
-        match event {
-            Event::MouseDown(mouse_event) => {
-                toggle_eraser_event = true;
-                enable_temporary_erasing = mouse_event.pointer_type == PointerType::Eraser;
+
+        self.scroll_component
+            .event(&mut self.viewport, ctx, event, env);
+        if !ctx.is_handled() {
+            let mut scroll_amount = 0.0;
+            let mut toggle_eraser_event = false;
+            let mut enable_temporary_erasing = false;
+            match event {
+                Event::Command(cmd) => {
+                    if let Some(value) = cmd.get(CanvasWidget::SCROLL) {
+                        scroll_amount = *value;
+                    }
+                }
+                Event::KeyDown(key_event) => {
+                    if key_event.code == druid::Code::ArrowDown {
+                        scroll_amount = 30.0;
+                    } else if key_event.code == druid::Code::ArrowUp {
+                        scroll_amount = -30.0;
+                    }
+                }
+                Event::MouseDown(mouse_event) => {
+                    toggle_eraser_event = true;
+                    enable_temporary_erasing = mouse_event.pointer_type == PointerType::Eraser;
+                }
+                Event::MouseMove(mouse_event) => {
+                    toggle_eraser_event = true;
+                    enable_temporary_erasing = mouse_event.pointer_type == PointerType::Eraser;
+                }
+                Event::MouseUp(mouse_event) => {
+                    toggle_eraser_event = true;
+                    enable_temporary_erasing = mouse_event.pointer_type == PointerType::Eraser;
+                }
+                _ => {}
             }
-            Event::MouseMove(mouse_event) => {
-                toggle_eraser_event = true;
-                enable_temporary_erasing = mouse_event.pointer_type == PointerType::Eraser;
-            }
-            Event::MouseUp(mouse_event) => {
-                toggle_eraser_event = true;
-                enable_temporary_erasing = mouse_event.pointer_type == PointerType::Eraser;
-            }
-            _ => {}
-        }
-        // TODO: the first eraser toggle is not handled
-        if toggle_eraser_event && data.temporary_erasing != enable_temporary_erasing {
-            if enable_temporary_erasing {
-                ctx.submit_notification(crate::commands::PUSH_ERASER);
+            // TODO: the first eraser toggle is not handled
+            if toggle_eraser_event && data.temporary_erasing != enable_temporary_erasing {
+                if enable_temporary_erasing {
+                    ctx.submit_notification(crate::commands::PUSH_ERASER);
+                } else {
+                    ctx.submit_notification(crate::commands::POP_ERASER);
+                }
+                data.temporary_erasing = enable_temporary_erasing;
             } else {
-                ctx.submit_notification(crate::commands::POP_ERASER);
+                let transform =
+                    Affine::translate((self.viewport.rect.x0, self.viewport.rect.y0));
+                data.handle_event(ctx, event, transform, env);
+            }
+            if scroll_amount != 0.0 {
+                self.viewport.rect.y0 = 0.0_f64.max(self.viewport.rect.y0 + scroll_amount);
+                self.scroll_component
+                    .reset_scrollbar_fade(|d| ctx.request_timer(d), env);
+                ctx.request_paint();
+                ctx.set_handled();
             }
-            data.temporary_erasing = enable_temporary_erasing;
-        } else {
-            data.handle_event(ctx, event, env);
         }
+        // TODO: replace this by own handling of Wheel event (must be able to extend content size)
+        self.scroll_component
+            .handle_scroll(&mut self.viewport, ctx, event, env);
     }
 
     fn lifecycle(
         &mut self,
-        _ctx: &mut LifeCycleCtx,
-        _event: &LifeCycle,
+        ctx: &mut LifeCycleCtx,
+        event: &LifeCycle,
         _data: &CanvasState,
-        _env: &Env,
+        env: &Env,
     ) {
+        self.scroll_component.lifecycle(ctx, event, env);
     }
 
     fn update(
@@ -149,6 +200,7 @@ impl Widget<CanvasState> for CanvasWidget {
         //        ctx.request_paint_rect(e.bounding_box());
         //    }
         //} else {
+
         ctx.request_paint();
         //}
     }
@@ -177,12 +229,28 @@ impl Widget<CanvasState> for CanvasWidget {
         let size = ctx.size();
         let rect = size.to_rect();
 
+        ctx.clip(rect);
         ctx.fill(rect, &Color::WHITE);
+
+        let page_content_size = data.versioned_canvas.get().content_size();
+        self.viewport.rect = self.viewport.rect.with_size(size);
+        self.viewport.content_size = druid::Size::new(
+            self.viewport.rect.x1.max(page_content_size.width),
+            self.viewport.rect.y1.max(page_content_size.height),
+        );
+
+        ctx.save().unwrap();
+        ctx.transform(Affine::translate((
+            -self.viewport.rect.x0,
+            -self.viewport.rect.y0,
+        )));
         for element in data.versioned_canvas.get().elements().iter() {
             element.draw(ctx);
         }
+        ctx.restore().unwrap();
         if data.tool_ctx.needs_repaint() {
             data.tool_ctx.paint(ctx, env);
         }
+        self.scroll_component.draw_bars(ctx, &self.viewport, env);
     }
 }

src/widget/mod.rs

@@ -1,5 +1,6 @@
 pub mod canvas;
 pub mod tool_icon;
+pub mod tool_ctx;
 
 pub use canvas::*;
 pub use tool_icon::*;

src/widget/tool_ctx.rs

@@ -0,0 +1,190 @@
+//  Stiletto
+//  Copyright (C) 2020 Stiletto Authors
+//
+//  This program is free software: you can redistribute it and/or modify
+//  it under the terms of the GNU Affero General Public License as published by
+//  the Free Software Foundation, either version 3 of the License, or
+//  (at your option) any later version.
+//
+//  This program is distributed in the hope that it will be useful,
+//  but WITHOUT ANY WARRANTY; without even the implied warranty of
+//  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+//  GNU Affero General Public License for more details.
+//
+//  You should have received a copy of the GNU Affero General Public License
+//  along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+use crate::tool::{CanvasToolParams, CanvasToolType};
+use crate::canvas::{Canvas, CanvasElement};
+use crate::history::VersionedCanvas;
+
+use druid::kurbo::BezPath;
+use druid::{Affine, Data, Env, Event, EventCtx, MouseButton, MouseEvent, PaintCtx};
+
+#[derive(Clone, Data)]
+pub enum CanvasToolState {
+    Idle,
+    DrawingFreehand {
+        pen_params: CanvasToolParams,
+        current_path: CanvasElement,
+    },
+    Erasing,
+}
+
+#[derive(Clone, Data)]
+pub struct CanvasToolCtx {
+    initial_params: CanvasToolParams,
+    state: CanvasToolState,
+}
+
+impl CanvasToolParams {
+    pub fn tool_type(&self) -> CanvasToolType {
+        match self {
+            CanvasToolParams::Pen { .. } => CanvasToolType::Pen,
+            CanvasToolParams::Eraser => CanvasToolType::Eraser,
+        }
+    }
+}
+
+fn pressed(mouse_event: &MouseEvent) -> bool {
+    mouse_event.buttons.contains(MouseButton::Left)
+        || mouse_event.button == MouseButton::Left
+}
+
+impl CanvasToolCtx {
+    pub fn new(params: CanvasToolParams) -> Self {
+        CanvasToolCtx {
+            initial_params: params,
+            state: CanvasToolState::Idle,
+        }
+    }
+
+    pub fn handle_event(
+        &mut self,
+        ctx: &mut EventCtx,
+        event: &Event,
+        vcanvas: &mut VersionedCanvas,
+        transform: Affine,
+        env: &Env,
+    ) {
+        match self.initial_params.tool_type() {
+            CanvasToolType::Pen => self.handle_pen_event(ctx, event, vcanvas, transform, env),
+            CanvasToolType::Eraser => self.handle_erase_event(ctx, event, vcanvas, transform, env),
+        }
+    }
+
+    pub fn handle_erase_event(
+        &mut self,
+        ctx: &mut EventCtx,
+        event: &Event,
+        vcanvas: &mut VersionedCanvas,
+        transform: Affine,
+        _env: &Env,
+    ) {
+        match (&mut self.state, event) {
+            (CanvasToolState::Idle, Event::MouseDown(mouse_event)) if pressed(mouse_event) => {
+                self.state = CanvasToolState::Erasing;
+                ctx.set_handled();
+            }
+            (CanvasToolState::Erasing, Event::MouseMove(mouse_event)) if pressed(mouse_event) => {
+                let eraser_rect =
+                    druid::Rect::from_center_size(transform * mouse_event.pos, (5.0, 5.0));
+                let old_elements = vcanvas.get().elements();
+                let mut new_elements = old_elements.clone();
+                new_elements.retain(|elem| {
+                    // Check if the element intersects the eraser rect
+                    if elem.bounding_box().intersect(eraser_rect).area() > 0.0 {
+                        if elem.intersects_rect(eraser_rect) {
+                            return false;
+                        }
+                    }
+                    return true;
+                });
+                if new_elements.len() != old_elements.len() {
+                    vcanvas.update(|canvas: &mut Canvas| {
+                        *canvas = Canvas::new_with_elements(new_elements);
+                    });
+                }
+                ctx.set_handled();
+            }
+            (CanvasToolState::Erasing, Event::MouseUp(mouse_event)) if pressed(mouse_event) => {
+                self.state = CanvasToolState::Idle;
+                ctx.set_handled();
+            }
+            _ => {}
+        }
+    }
+
+    pub fn handle_pen_event(
+        &mut self,
+        ctx: &mut EventCtx,
+        event: &Event,
+        vcanvas: &mut VersionedCanvas,
+        transform: Affine,
+        _env: &Env,
+    ) {
+        match (&mut self.state, event) {
+            (CanvasToolState::Idle, Event::MouseDown(mouse_event)) if pressed(mouse_event) => {
+                let mut kurbo_path = BezPath::new();
+                kurbo_path.move_to((mouse_event.pos.x, mouse_event.pos.y));
+                if let CanvasToolParams::Pen { thickness, color } = &self.initial_params {
+                    self.state = CanvasToolState::DrawingFreehand {
+                        pen_params: self.initial_params.clone(),
+                        current_path: CanvasElement::Freehand {
+                            path: crate::canvas::Path { kurbo_path },
+                            thickness: *thickness,
+                            stroke_color: color.clone(),
+                        },
+                    };
+                }
+                ctx.set_handled();
+            }
+            (
+                CanvasToolState::DrawingFreehand {
+                    ref mut current_path,
+                    ..
+                },
+                Event::MouseMove(mouse_event),
+            ) => if pressed(mouse_event) {
+                if let CanvasElement::Freehand { ref mut path, .. } = current_path {
+                    path.kurbo_path
+                        .line_to((mouse_event.pos.x, mouse_event.pos.y));
+                }
+                ctx.set_handled();
+            }
+            (CanvasToolState::DrawingFreehand { .. }, Event::MouseUp(mouse_event)) if pressed(mouse_event) => {
+                vcanvas.update(move |canvas: &mut Canvas| {
+                    let current_state = std::mem::replace(&mut self.state, CanvasToolState::Idle);
+                    if let CanvasToolState::DrawingFreehand { current_path, .. } = current_state {
+                        if let CanvasElement::Freehand {
+                            mut path,
+                            thickness,
+                            stroke_color,
+                        } = current_path
+                        {
+                            path.kurbo_path.apply_affine(transform);
+                            canvas.add_element(CanvasElement::Freehand {
+                                path,
+                                thickness,
+                                stroke_color,
+                            });
+                        }
+                    }
+                });
+                ctx.set_handled();
+            }
+            _ => {}
+        }
+    }
+
+    pub fn needs_repaint(&self) -> bool {
+        true
+    }
+
+    pub fn paint(&self, ctx: &mut PaintCtx, _env: &Env) {
+        match &self.state {
+            CanvasToolState::DrawingFreehand { current_path, .. } => current_path.draw(ctx),
+            _ => {}
+        }
+    }
+}