Start here

# Touch Interaction

This demo shows how a graph editor application can be optimized for touch devices.

## Things to Try

- Change the "Snap Touch Panning" behavior and see how it affects graph panning.
  Horizontal
    Locks near-horizontal panning to the x-axis.
  Vertical
    Locks near-vertical panning to the y-axis.
  Both
    Snaps near-horizontal and near-vertical panning.
- Change the "Start Touch Panning" behavior and see how it affects graph panning.
  One Finger
    Starts viewport panning by dragging with one finger and edit gestures after a long press delay.
  Two Fingers
    Starts viewport panning by dragging with at least two fingers. This allows edit gestures (e.g. node resize) to be started immediately without a long press delay.
- Create nodes by dragging them from the palette into the canvas.
- Navigate the graph by dragging with either one or two fingers, depending on the "Start Touch Panning" option. Pinch-zoom with two fingers.
- Select a node by tapping it. Drag the node handles to change the node's size. Drag the node itself to move it around.
- Double Tap quickly on the empty canvas area to start the lasso selection tool. Release the finger to complete the selection gesture.
- Long Press a graph item to open its context menu or the empty canvas area to open the background context menu.
- Create nodes using the background context menu.
- Create an edge by selecting "Create Edge" from a node's context menu.

Snap Touch Panning

Start Touch Panning