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.