Fix generic pointer input for graph view and edge cases for board view

Author: Mercotui

Cargo.toml

@@ -45,6 +45,7 @@ features = [
     "ResizeObserver",
     "ResizeObserverEntry",
     "ResizeObserverSize",
+    "TouchEvent",
     "PointerEvent",
     "MouseScrollEvent",
     "CanvasRenderingContext2d",

src/lib.rs

@@ -45,16 +45,4 @@ impl WiggersGraaf {
         StatefulViews::restart(&instance.stateful_views);
         Ok(instance)
     }
-
-    pub fn accumulate_translation(&self, delta_x: f32, delta_y: f32) {
-        self.stateful_views
-            .borrow()
-            .accumulate_translation(delta_x, delta_y);
-    }
-
-    pub fn accumulate_zoom(&self, zoom_movement: f32, target_x: f32, target_y: f32) {
-        self.stateful_views
-            .borrow()
-            .accumulate_zoom(zoom_movement, target_x, target_y);
-    }
 }

src/views/controls/mod.rs src/views/board_view/controls.rssrc/views/controls/mod.rs renamed to src/views/board_view/controls.rs

@@ -1,16 +1,14 @@
 // SPDX-FileCopyrightText: 2025 Menno van der Graaf <mennovandergraaf@hotmail.com>
 // SPDX-License-Identifier: MIT
 
-use crate::views::controls::pointer_handler::{MouseHandler, PointerEvent};
+use crate::views::pointer_handler::{MouseHandler, PointerEvent};
 use crate::views::utils::Coordinates;
 use std::cell::RefCell;
 use std::rc::{Rc, Weak};
 use wasm_bindgen::JsValue;
 use web_sys::HtmlElement;
 
-pub mod pointer_handler;
-
-pub struct PointerControls {
+pub struct Controls {
     on_event_cb: Box<OnPointerEventCb>,
     drag_pointer_index: Option<i32>,
     _pointer_handler: Rc<RefCell<MouseHandler>>,
@@ -25,7 +23,7 @@ pub enum ControlEvent {
     Up(),
 }
 
-impl PointerControls {
+impl Controls {
     pub fn new(
         target: &HtmlElement,
         on_event_cb: Box<OnPointerEventCb>,
@@ -49,23 +47,30 @@ impl PointerControls {
     fn handle_event(&mut self, event: PointerEvent) -> bool {
         let mut handled = false;
         match event {
-            PointerEvent::Down((index, coordinates)) => {
-                if self.drag_pointer_index.is_none() {
+            PointerEvent::Down((index, _timestamp, coordinates)) => {
+                // If we were not dragging yet, then try to initiate a drag
+                if self.drag_pointer_index.is_none()
+                    && (self.on_event_cb)(ControlEvent::Down(coordinates))
+                {
                     self.drag_pointer_index = Some(index);
-                    handled = (self.on_event_cb)(ControlEvent::Down(coordinates));
+                    handled = true;
                 }
             }
-            PointerEvent::Up((index, _coordinates)) => {
+            PointerEvent::Up((index, _timestamp, _coordinates)) => {
                 if self.drag_pointer_index == Some(index) {
                     self.drag_pointer_index = None;
                     handled = (self.on_event_cb)(ControlEvent::Up());
                 }
             }
-            PointerEvent::Move((index, coordinates)) => {
+            PointerEvent::Move((index, _timestamp, coordinates)) => {
                 if self.drag_pointer_index == Some(index) {
                     handled = (self.on_event_cb)(ControlEvent::Move(coordinates));
                 }
             }
+            PointerEvent::TouchMove() => {
+                // Prevent default behavior of touchmove if pointer is down
+                handled = self.drag_pointer_index.is_some()
+            }
             PointerEvent::Wheel(_) => {}
         }
         handled

src/views/board_view/mod.rs

@@ -1,18 +1,18 @@
 // SPDX-FileCopyrightText: 2025 Menno van der Graaf <mennovandergraaf@hotmail.com>
 // SPDX-License-Identifier: MIT
-
+mod controls;
 mod layout;
 mod renderer;
-pub(crate) mod visual_board;
+pub mod visual_board;
 
 use crate::board::SlideMove;
 use crate::graph;
+use crate::views::board_view::controls::{ControlEvent, Controls};
 use crate::views::board_view::layout::Layout;
 use crate::views::board_view::renderer::Renderer;
 use crate::views::board_view::visual_board::{
     AnimatableOffset, Animation, AnimationRepeatBehavior, DragEndResult, DragMove, VisualBoard,
 };
-use crate::views::controls::{ControlEvent, PointerControls};
 use crate::views::frame_scheduler::FrameScheduler;
 use crate::views::resize_observer::ResizeObserver;
 use crate::views::utils::{get_element_of_type, Size};
@@ -30,7 +30,7 @@ pub struct BoardView {
     on_drag_move_cb: Box<OnDragMoveCb>,
     frame_scheduler: FrameScheduler,
     _resize_observer: ResizeObserver,
-    _pointer_controls: Rc<RefCell<PointerControls>>,
+    _pointer_controls: Rc<RefCell<Controls>>,
     visual_board: VisualBoard,
     layout: Layout,
     renderer: Renderer,
@@ -65,7 +65,7 @@ impl BoardView {
                             .resize(width, height);
                     }),
                 ),
-                _pointer_controls: PointerControls::new(
+                _pointer_controls: Controls::new(
                     &canvas,
                     Box::new(move |event: ControlEvent| {
                         self_ref_for_mouse_event_cb

src/views/board_view/visual_board.rs

@@ -254,19 +254,18 @@ impl VisualBoard {
 
     /// Start dragging the targeted piece, returns true if this piece can be dragged
     pub fn start_drag(&mut self, target: VisualCoordinates) -> bool {
-        // Find if the cursor is targeting a piece, and find if this piece can be dragged
-        let entry: Option<(board::Coordinates, bool)> = self
+        // Find if the cursor is targeting a piece, and if that piece can be dragged
+        let piece: Option<board::Coordinates> = self
             .pieces
             .iter_mut()
-            .find(|(_, piece)| piece.rect.contains(target))
-            .map(|(base_coordinates, piece)| (*base_coordinates, !piece.drag_moves.is_empty()));
+            .find(|(_, piece)| piece.rect.contains(target) && !piece.drag_moves.is_empty())
+            .map(|(base_coordinates, _)| *base_coordinates);
 
-        match entry {
+        match piece {
             None => {
                 self.highlight(&None);
-                false
             }
-            Some((base_coordinates, can_be_dragged)) => {
+            Some(base_coordinates) => {
                 // If we are currently running an animation, then clear it
                 self.clear_animation();
                 self.highlight(&Some(base_coordinates));
@@ -276,9 +275,9 @@ impl VisualBoard {
                     target: base_coordinates,
                     start_coordinates: None,
                 });
-                can_be_dragged
             }
         }
+        piece.is_some()
     }
 
     pub fn stop_drag(&mut self) -> DragEndResult {

src/views/frame_scheduler.rs

@@ -1,6 +1,7 @@
 // SPDX-FileCopyrightText: 2025 Menno van der Graaf <mennovandergraaf@hotmail.com>
 // SPDX-License-Identifier: MIT
 
+use crate::views::utils::dom_high_res_timestamp_to_duration;
 use std::cell::Cell;
 use std::rc::Rc;
 use std::time::Duration;
@@ -25,10 +26,7 @@ impl FrameScheduler {
         let frame_requested_clone = frame_requested.clone();
         let on_frame_closure = Closure::new(move |timestamp: f64| {
             frame_requested_clone.set(false);
-
-            // The DOMHighResTimeStamp is in milliseconds, convert it to a std time Duration
-            let timestamp = Duration::from_micros((timestamp * 1000.0) as u64);
-            on_frame_cb(timestamp);
+            on_frame_cb(dom_high_res_timestamp_to_duration(timestamp));
         });
 
         Self {

src/views/graph_view/controls.rs

@@ -0,0 +1,83 @@
+// SPDX-FileCopyrightText: 2025 Menno van der Graaf <mennovandergraaf@hotmail.com>
+// SPDX-License-Identifier: MIT
+
+use crate::views::pointer_handler::{MouseHandler, PointerEvent};
+use crate::views::utils::{Coordinates, Delta};
+use std::cell::RefCell;
+use std::rc::{Rc, Weak};
+use wasm_bindgen::JsValue;
+use web_sys::HtmlElement;
+
+pub struct Controls {
+    on_event_cb: Box<OnPointerEventCb>,
+    // TODO(Menno 04.09.2025) Track multiple pointers for gestures
+    drag_pointer_index: Option<i32>,
+    previous_drag_coordinates: Coordinates,
+    _pointer_handler: Rc<RefCell<MouseHandler>>,
+}
+
+/// The callback type for the handler to call on a mouse event
+pub type OnPointerEventCb = dyn FnMut(ControlEvent);
+
+pub enum ControlEvent {
+    Down(Coordinates),
+    Move(Delta),
+    Up(),
+}
+
+impl Controls {
+    pub fn new(
+        target: &HtmlElement,
+        on_event_cb: Box<OnPointerEventCb>,
+    ) -> Result<Rc<RefCell<Self>>, JsValue> {
+        Ok(Rc::new_cyclic(|self_ref: &Weak<RefCell<Self>>| {
+            let self_ref = self_ref.clone();
+            RefCell::new(Self {
+                on_event_cb,
+                drag_pointer_index: None,
+                previous_drag_coordinates: Coordinates::zero(),
+                _pointer_handler: MouseHandler::new(
+                    target,
+                    Box::new(move |event| -> bool {
+                        self_ref.upgrade().unwrap().borrow_mut().handle_event(event)
+                    }),
+                )
+                .expect("Couldn't register mouse handler"),
+            })
+        }))
+    }
+
+    fn handle_event(&mut self, event: PointerEvent) -> bool {
+        let mut handled = false;
+        match event {
+            PointerEvent::Down((index, _timestamp, coordinates)) => {
+                if self.drag_pointer_index.is_none() {
+                    self.drag_pointer_index = Some(index);
+                    self.previous_drag_coordinates = coordinates;
+                    (self.on_event_cb)(ControlEvent::Down(coordinates));
+                    handled = true;
+                }
+            }
+            PointerEvent::Up((index, _timestamp, _coordinates)) => {
+                if self.drag_pointer_index == Some(index) {
+                    self.drag_pointer_index = None;
+                    (self.on_event_cb)(ControlEvent::Up());
+                    handled = true;
+                }
+            }
+            PointerEvent::Move((index, _timestamp, coordinates)) => {
+                if self.drag_pointer_index == Some(index) {
+                    let delta = coordinates - self.previous_drag_coordinates;
+                    (self.on_event_cb)(ControlEvent::Move(delta));
+                    self.previous_drag_coordinates = coordinates;
+                    handled = true;
+                }
+            }
+            PointerEvent::TouchMove() => {
+                handled = true;
+            }
+            PointerEvent::Wheel(_) => {}
+        }
+        handled
+    }
+}

src/views/graph_view/mod.rs

@@ -5,6 +5,7 @@ use crate::board::BoardId;
 use crate::graph::Graph;
 use crate::views::frame_scheduler::{FrameScheduler, OnFrameCb};
 use crate::views::graph_view::arrangement::Arrangement;
+use crate::views::graph_view::controls::{ControlEvent, Controls};
 use crate::views::graph_view::renderer::Renderer;
 use crate::views::resize_observer::ResizeObserver;
 use crate::views::utils::get_element_of_type;
@@ -16,6 +17,7 @@ use wasm_bindgen::JsValue;
 use web_sys::HtmlCanvasElement;
 
 pub mod arrangement;
+mod controls;
 mod renderer;
 
 /// This represents the view's content coordinate space, dynamic axes depending on the content size
@@ -72,12 +74,11 @@ const _ZOOM_MINIMUM: Scale<f32, ClipSpace, ClipSpace> = Scale::new(1.0);
 /// The maximum zoom level
 const _ZOOM_MAXIMUM: Scale<f32, ClipSpace, ClipSpace> = Scale::new(5.0);
 
-// TODO(Menno 30.04.2025) Can't be flicked yet
-/// A 2D graph view that can be zoomed, dragged and flicked around by mouse or touch input.
 pub struct GraphView {
     _self_ref: Weak<RefCell<Self>>,
     frame_scheduler: FrameScheduler,
     _resize_observer: ResizeObserver,
+    _controls: Rc<RefCell<Controls>>,
     canvas: HtmlCanvasElement,
     canvas_needs_size_update: bool,
     canvas_size: Size2D<f32, CanvasSpace>,
@@ -97,6 +98,7 @@ impl GraphView {
         let view = Rc::new_cyclic(|self_ref| {
             let self_ref_for_on_frame_cb = self_ref.clone();
             let self_ref_for_resize_observer_cb = self_ref.clone();
+            let self_ref_for_mouse_event_cb = self_ref.clone();
 
             RefCell::new(Self {
                 _self_ref: self_ref.clone(),
@@ -117,6 +119,17 @@ impl GraphView {
                             .resize(width, height);
                     }),
                 ),
+                _controls: Controls::new(
+                    &canvas,
+                    Box::new(move |event: ControlEvent| {
+                        self_ref_for_mouse_event_cb
+                            .upgrade()
+                            .unwrap()
+                            .borrow_mut()
+                            .handle_pointer_event(event)
+                    }),
+                )
+                .expect("Could not create graph controls"),
                 canvas,
                 canvas_needs_size_update: false,
                 canvas_size: Size2D::zero(),
@@ -173,7 +186,17 @@ impl GraphView {
         self.schedule_draw();
     }
 
-    pub fn accumulate_zoom(&mut self, zoom_movement: f32, target_x: f32, target_y: f32) {
+    fn handle_pointer_event(&mut self, event: ControlEvent) {
+        match event {
+            ControlEvent::Down(_coordinates) => {}
+            ControlEvent::Move(coordinates) => {
+                self.handle_translation(Vector2D::new(coordinates.x as f32, -coordinates.y as f32))
+            }
+            ControlEvent::Up() => {}
+        }
+    }
+
+    fn _accumulate_zoom(&mut self, zoom_movement: f32, target_x: f32, target_y: f32) {
         let target_begin = self
             .canvas_to_clip
             .transform_vector(Vector2D::new(target_x, target_y));
@@ -198,12 +221,9 @@ impl GraphView {
         self.schedule_draw();
     }
 
-    pub fn accumulate_translation(&mut self, delta_x: f32, delta_y: f32) {
-        let delta_translation = self
-            .canvas_to_clip
-            .transform_vector(Vector2D::new(delta_x, delta_y));
+    fn handle_translation(&mut self, translation: Vector2D<f32, CanvasSpace>) {
         // TODO(Menno 04.05.2025) Clamp this translation
-        self.translation += delta_translation;
+        self.translation += self.canvas_to_clip.transform_vector(translation);
         self.recalculate_view_transform();
         self.schedule_draw();
     }

src/views/mod.rs

@@ -2,10 +2,10 @@
 // SPDX-License-Identifier: MIT
 
 mod board_view;
-mod controls;
 mod frame_scheduler;
 pub mod graph_view;
 mod moves_view;
+pub mod pointer_handler;
 mod resize_observer;
 mod utils;
 
@@ -99,18 +99,6 @@ impl StatefulViews {
         }))
     }
 
-    pub fn accumulate_translation(&self, delta_x: f32, delta_y: f32) {
-        self.graph_view
-            .borrow_mut()
-            .accumulate_translation(delta_x, delta_y);
-    }
-
-    pub fn accumulate_zoom(&self, zoom_movement: f32, target_x: f32, target_y: f32) {
-        self.graph_view
-            .borrow_mut()
-            .accumulate_zoom(zoom_movement, target_x, target_y);
-    }
-
     pub fn preview_move(&self, move_info: Option<MoveInfo>) {
         let Some(_lock) = BoolGuard::lock(&self.move_lock) else {
             // No preview, a move is ongoing