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.
- Locks near-horizontal panning to the x-axis.
- Locks near-vertical panning to the y-axis.
- 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
- 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.