Touch Support

Touch Gestures

• Single finger drag (canvas) - Pan the viewport
• Single finger drag (node) - Move nodes
• Pinch - Zoom in/out
• Tap handle - Start connection
• Tap node - Select node
• Tap canvas - Deselect all

Creating Connections

On touch devices, connections work slightly differently:

1. Tap an output handle to start a connection
2. Tap an input handle to complete it
3. Tap the canvas to cancel

Minimap Touch

The minimap also supports touch:

• Tap - Jump to location
• Drag - Pan the viewport

Implementation

Touch support is built-in and automatic. The canvas uses:

/* Prevents browser gestures */
.canvas {
  touch-action: none;
}

/* Touch events handled */
- touchstart
- touchmove  
- touchend
- touchcancel

Best Practices

• Make handles at least 44x44px for easy tapping
• Provide enough spacing between nodes
• Consider larger fonts for mobile
• Test on actual devices