Add Viewport up/down scroll

src/main.rs

@@ -24,13 +24,15 @@ use druid::widget::prelude::*;
 use druid::widget::{Align, Button, CrossAxisAlignment, Flex, List, SizedBox, WidgetExt};
 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::widget::{build_simple_tool_widget, CanvasState, CanvasToolIconState, CanvasWidget};
+use stiletto::widget::{
+    build_simple_tool_widget, CanvasState, CanvasToolIconState, CanvasWidget, SCROLL,
+};
 use stiletto::DocumentSnapshot;
 
 pub fn main() {
@@ -89,6 +91,8 @@ struct 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(
@@ -107,6 +111,16 @@ fn build_ui() -> impl Widget<StilettoState> {
 
     let save_buttons = Flex::row()
         .cross_axis_alignment(CrossAxisAlignment::Center)
+        .with_child(Button::new("Up").on_click(
+            move |ctx: &mut EventCtx, _data: &mut StilettoState, _env: &Env| {
+                ctx.submit_command(Command::new(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(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));
@@ -163,7 +177,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,
+        )
 }
 
 struct Delegate;

src/tool.rs

@@ -15,7 +15,7 @@
 //  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 druid::{Affine, Color, Data, Env, Event, EventCtx, PaintCtx};
 
 use crate::canvas;
 use crate::canvas::{Canvas, CanvasElement};
@@ -71,11 +71,16 @@ impl CanvasToolCtx {
         ctx: &EventCtx,
         event: &Event,
         mut vcanvas: &mut VersionedCanvas,
+        transform: Affine,
         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),
+            CanvasToolType::Pen => {
+                self.handle_pen_event(&ctx, &event, &mut vcanvas, transform, &env)
+            }
+            CanvasToolType::Eraser => {
+                self.handle_erase_event(&ctx, &event, &mut vcanvas, transform, &env)
+            }
         }
     }
 
@@ -84,6 +89,7 @@ impl CanvasToolCtx {
         _ctx: &EventCtx,
         event: &Event,
         vcanvas: &mut VersionedCanvas,
+        transform: Affine,
         _env: &Env,
     ) {
         match (&mut self.state, event) {
@@ -92,7 +98,7 @@ impl CanvasToolCtx {
             }
             (CanvasToolState::Erasing, Event::MouseMove(mouse_event)) => {
                 let eraser_rect =
-                    druid::Rect::from_center_size(mouse_event.pos, (5.0, 5.0));
+                    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| {
@@ -122,6 +128,7 @@ impl CanvasToolCtx {
         _ctx: &EventCtx,
         event: &Event,
         vcanvas: &mut VersionedCanvas,
+        transform: Affine,
         _env: &Env,
     ) {
         match (&mut self.state, event) {
@@ -161,6 +168,7 @@ impl CanvasToolCtx {
                             stroke_color,
                         } = current_path
                         {
+                            path.kurbo_path.apply_affine(transform);
                             canvas.add_element(CanvasElement::Freehand {
                                 path,
                                 thickness,

src/widget/canvas.rs

@@ -21,8 +21,13 @@ 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};
+use druid::widget::Viewport;
+use druid::{Affine, Color, Data, Env, Event};
+use druid::{Selector};
+
+pub const SCROLL: Selector<f64> = Selector::new("scroll_canvas");
 
 #[derive(Clone, Data)]
 pub struct CanvasState {
@@ -74,21 +79,62 @@ impl CanvasState {
     }
 }
 
-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(),
+        }
+    }
+}
 
 impl Widget<CanvasState> for CanvasWidget {
     fn event(&mut self, ctx: &mut EventCtx, event: &Event, data: &mut CanvasState, env: &Env) {
-        data.tool_ctx
-            .handle_event(ctx, event, &mut data.versioned_canvas, env);
+        ctx.request_focus();
+        let mut needs_update = false;
+        match event {
+            Event::Command(cmd) => {
+                if let Some(value) = cmd.get(SCROLL) {
+                    self.viewport.rect.y0 += value;
+                    needs_update = true;
+                }
+            }
+            Event::KeyDown(key_event) => {
+                if key_event.code == druid::Code::ArrowDown {
+                    self.viewport.rect.y0 += 30.0;
+                    needs_update = true;
+                } else if key_event.code == druid::Code::ArrowUp {
+                    self.viewport.rect.y0 = 0.0_f64.max(self.viewport.rect.y0 - 30.0);
+                    needs_update = true;
+                }
+            }
+            _ => {
+                let transform = Affine::translate((self.viewport.rect.x0, self.viewport.rect.y0));
+                data.tool_ctx
+                    .handle_event(ctx, event, &mut data.versioned_canvas, transform, env);
+            }
+        }
+        if needs_update {
+            ctx.request_paint();
+        }
     }
 
     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(
@@ -107,6 +153,7 @@ impl Widget<CanvasState> for CanvasWidget {
         //        ctx.request_paint_rect(e.bounding_box());
         //    }
         //} else {
+
         ctx.request_paint();
         //}
     }
@@ -136,11 +183,26 @@ impl Widget<CanvasState> for CanvasWidget {
         let rect = size.to_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);
     }
 }