Skip to content

Spec: Touch/Pen Support

Overview

Add full touch and pen/stylus input support to the DigitalWorks canvas, enabling natural interaction on tablets, 2-in-1 laptops, and Surface devices. Touch gestures for navigation and pen input for precise circuit drawing.

Motivation

Windows tablets and 2-in-1 devices (Surface Pro, Surface Go, Lenovo Yoga) are popular in educational settings. Students in labs often use tablets for note-taking and could design circuits directly with a stylus. Touch/pen support makes DigitalWorks accessible on these devices without requiring a mouse.

Requirements

Functional Requirements

Touch Gestures

  1. Pan: One-finger drag to scroll/pan the canvas.
  2. Pinch-to-Zoom: Two-finger pinch to zoom in/out smoothly.
  3. Two-Finger Rotate: Optional rotate gesture for canvas rotation (if supported).
  4. Tap to Select: Single tap selects a component.
  5. Double-Tap: Open component properties.
  6. Long Press: Open context menu (equivalent to right-click).
  7. Multi-Select: Two-finger tap or long-press-drag for lasso selection.
  8. Swipe: Quick swipe to switch between editor modes or undo.

Pen/Stylus Input

  1. Precise Placement: Pen tip positions components and draws wires with pixel precision.
  2. Pressure Sensitivity: Optional use of pressure (e.g., thicker annotation lines with more pressure).
  3. Hover Preview: Pen hover shows placement preview before touching down.
  4. Barrel Button: Pen barrel button mapped to context menu or undo.
  5. Eraser End: Pen eraser end activates delete mode.
  6. Palm Rejection: Ignore accidental palm touches while using pen.
  7. Ink Annotations: Freehand ink annotations alongside structured circuit elements.

Input Mode Management

  1. Auto-Detection: Automatically switch between mouse, touch, and pen modes.
  2. Input Priority: Pen overrides touch (palm rejection); touch overrides mouse.
  3. Touch Targets: Increase hit-test areas for touch (larger than mouse targets).
  4. Touch-Friendly Toolbox: Larger buttons and spacing in touch mode.
  5. On-Screen Controls: Floating toolbar for common actions in tablet mode.

Non-Functional Requirements

  • Touch input latency < 16ms (60fps responsiveness).
  • Pinch-to-zoom is smooth and proportional (no jumping).
  • Works with Windows Ink platform.
  • Compatible with Surface Pen, Wacom stylus, and generic capacitive styli.
  • No degradation of mouse/keyboard experience when touch hardware is present.

Design

Input Abstraction Layer

csharp
public interface IInputHandler
{
    void OnPointerPressed(PointerEventArgs e);
    void OnPointerMoved(PointerEventArgs e);
    void OnPointerReleased(PointerEventArgs e);
    void OnManipulationStarted(ManipulationEventArgs e);  // pinch/pan
    void OnManipulationDelta(ManipulationEventArgs e);
    void OnManipulationCompleted(ManipulationEventArgs e);
}

public class InputManager
{
    public InputMode CurrentMode { get; }  // Mouse, Touch, Pen
    public bool IsPenHovering { get; }
    public float PenPressure { get; }
    
    // Automatically routes input to correct handler based on pointer type
    public void ProcessPointerInput(PointerRoutedEventArgs e);
}

public enum InputMode { Mouse, Touch, Pen }

Gesture Recognition

csharp
public class GestureRecognizer
{
    // Single-finger gestures
    public event Action<Point> Tapped;
    public event Action<Point> DoubleTapped;
    public event Action<Point> LongPressed;
    public event Action<Point, Vector> Dragged;
    
    // Multi-finger gestures
    public event Action<float> PinchZoom;        // scale factor
    public event Action<Vector> TwoFingerPan;    // delta
    public event Action<float> TwoFingerRotate;  // angle delta
}

Touch Target Sizing

ElementMouse Hit AreaTouch Hit Area
Pin8×8 px20×20 px
Wire4px tolerance12px tolerance
ComponentBounding boxBounding box + 8px padding
Toolbar button24×24 px44×44 px (Windows guideline)

WinUI Integration

WinUI 3 provides built-in pointer, manipulation, and ink support:

  • PointerPressed/Moved/Released events with PointerDeviceType (Mouse, Touch, Pen).
  • ManipulationStarted/Delta/Completed for pinch/pan gestures.
  • InkCanvas for freehand ink annotations.
  • InkPresenter for pen configuration.

Adaptive UI

When touch is detected as primary input:

  • Toolbox icons increase to 44×44 px.
  • Floating action buttons appear for common operations.
  • Context menus use larger touch-friendly items.
  • Status bar elements become tappable with larger targets.

Implementation Tasks

  1. Implement InputManager with pointer type detection and routing.
  2. Implement GestureRecognizer for touch gestures (tap, pinch, pan, long-press).
  3. Add pinch-to-zoom handling in canvas (smooth transform updates).
  4. Add one-finger pan gesture.
  5. Implement pen input with pressure and hover support.
  6. Implement palm rejection when pen is in proximity.
  7. Map pen barrel button and eraser end to actions.
  8. Increase touch hit-test areas (adaptive sizing based on input mode).
  9. Create adaptive UI layout (larger toolbar in touch mode).
  10. Implement InkCanvas overlay for freehand annotations.
  11. Add floating toolbar for common touch-mode operations.
  12. Test with Surface Pen, Wacom, and capacitive touch.

Risks & Open Questions

  • Should canvas rotation be supported (adds complexity to rendering and hit-testing)?
  • How to distinguish intentional touch from accidental (beyond palm rejection)?
  • Performance of gesture processing with many rapid touch events?
  • Should ink annotations convert to structured annotations (handwriting recognition)?
  • How to handle touch on very small circuits (zoom-to-fit first)?

Priority

Low-Medium — Important for tablet/educational market, but desktop-first is acceptable.