Zoom

Description

This guide shows how to zoom in and zoom out of the canvas using:

• Mouse wheel
• Double click
• Buttons
• Pinch-to-zoom (trackpad / touchscreen)

To enable zooming, add the fZoom directive to the f-canvas.

Zoom is a core interaction for any serious node editor. It helps users move from a high-level overview to fine-grained editing without losing orientation on large canvases.

It becomes even more important when the editor supports minimaps, large graphs, or touch-friendly interactions on trackpads and tablets. Good zoom behavior is one of the easiest ways to improve perceived editor quality.

Notes

• Pinch-to-zoom works on devices that support multi-touch gestures (touch screens and trackpads).
• The directive applies zoom with sensible limits to keep interactions smooth and predictable.

Example

Related docs

• Zoom Docs
• Minimap Example
• Connection Waypoints Example