Snapping Demo

This demo shows how the snapping feature can be customized.

In addition to the default snapping features, it adds extra snap lines to the bounds of labels, lets the outline of the star shaped nodes snap to grid points, and uses free additional snap lines nodes can snap to.

Things to Try

• Move the topmost orange node and one of the star shaped nodes around and compare their different grid snapping behavior.

  While an orange node only snaps to grid points with its center, a star shaped node snaps with all points of its outline, but then again only to the grid points, not in between.

• Move the unconnected orange node close to an orthogonal node or edge label to snap it to the label's bounds.
• Move an edge label to a non-orthogonal edge segment to disable node snapping for this label. Nodes cannot snap to non-orthogonal labels.
• Move node and and edge labels along their owner's border/path to snap them to other particular positions relative to the owner.
• Move a node close to the red snap lines to snap it to these non-graph elements.
• Position of a red snap line by dragging it around.