This demo shows how a graph editor application can be optimized for touch devices.
-
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.