Appearance
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
- Pan: One-finger drag to scroll/pan the canvas.
- Pinch-to-Zoom: Two-finger pinch to zoom in/out smoothly.
- Two-Finger Rotate: Optional rotate gesture for canvas rotation (if supported).
- Tap to Select: Single tap selects a component.
- Double-Tap: Open component properties.
- Long Press: Open context menu (equivalent to right-click).
- Multi-Select: Two-finger tap or long-press-drag for lasso selection.
- Swipe: Quick swipe to switch between editor modes or undo.
Pen/Stylus Input
- Precise Placement: Pen tip positions components and draws wires with pixel precision.
- Pressure Sensitivity: Optional use of pressure (e.g., thicker annotation lines with more pressure).
- Hover Preview: Pen hover shows placement preview before touching down.
- Barrel Button: Pen barrel button mapped to context menu or undo.
- Eraser End: Pen eraser end activates delete mode.
- Palm Rejection: Ignore accidental palm touches while using pen.
- Ink Annotations: Freehand ink annotations alongside structured circuit elements.
Input Mode Management
- Auto-Detection: Automatically switch between mouse, touch, and pen modes.
- Input Priority: Pen overrides touch (palm rejection); touch overrides mouse.
- Touch Targets: Increase hit-test areas for touch (larger than mouse targets).
- Touch-Friendly Toolbox: Larger buttons and spacing in touch mode.
- 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
| Element | Mouse Hit Area | Touch Hit Area |
|---|---|---|
| Pin | 8×8 px | 20×20 px |
| Wire | 4px tolerance | 12px tolerance |
| Component | Bounding box | Bounding box + 8px padding |
| Toolbar button | 24×24 px | 44×44 px (Windows guideline) |
WinUI Integration
WinUI 3 provides built-in pointer, manipulation, and ink support:
PointerPressed/Moved/Releasedevents withPointerDeviceType(Mouse, Touch, Pen).ManipulationStarted/Delta/Completedfor pinch/pan gestures.InkCanvasfor freehand ink annotations.InkPresenterfor 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
- Implement
InputManagerwith pointer type detection and routing. - Implement
GestureRecognizerfor touch gestures (tap, pinch, pan, long-press). - Add pinch-to-zoom handling in canvas (smooth transform updates).
- Add one-finger pan gesture.
- Implement pen input with pressure and hover support.
- Implement palm rejection when pen is in proximity.
- Map pen barrel button and eraser end to actions.
- Increase touch hit-test areas (adaptive sizing based on input mode).
- Create adaptive UI layout (larger toolbar in touch mode).
- Implement
InkCanvasoverlay for freehand annotations. - Add floating toolbar for common touch-mode operations.
- 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.