Touch Interaction [yFiles for HTML]

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

Things to Try

Create nodes by dragging them from the palette into the canvas.
Navigate the graph by dragging with one finger. 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 node or any other graph item to open the item's context menu.
Long Press on 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.
Change the "Snap Touch Panning" behavior using the selection box above the palette and see how it affects graph panning. "Horizontal" locks near-horizontal panning to the x-axis. "Vertical" does the same for the y-axis. "Both" snaps near-horizontal and near-vertical panning.

Snap Touch Panning