Viewport Actions

setViewport

setViewport: (vp: Viewport) => void

// Usage — set the camera to an exact position and zoom
const { setViewport } = useWorkflowStore();

setViewport({ x: -200, y: 100, zoom: 0.75 });

// Typically called when loading a workflow — restores the last saved viewport
// Also called by React Flow's onMoveEnd when the user pans or zooms

fitView

fitView: () => void

// Usage — zoom and pan to fit all nodes within the visible canvas area
const { fitView } = useWorkflowStore();

// Called from the toolbar Fit View button or keyboard shortcut (Ctrl+Shift+F)
fitView();

// Internally delegates to React Flow's fitView() via the ReactFlowInstance ref
// Adds 40px padding around the node bounding box

zoomIn / zoomOut

zoomIn  : () => void
zoomOut : () => void

// Usage — called from toolbar zoom buttons or keyboard (Ctrl+= / Ctrl+-)
const { zoomIn, zoomOut } = useWorkflowStore();

zoomIn();   // Increases zoom by 0.1, capped at 2.0
zoomOut();  // Decreases zoom by 0.1, floored at 0.2

Viewport Persistence

The viewport is serialized and saved with the workflow definition so the user returns to the same camera position when they reopen the workflow:

// Included in the serialized workflow payload
{
  "processId": "proc-001",
  "viewport" : { "x": -120, "y": 80, "zoom": 0.85 },
  "nodes"    : [...],
  "edges"    : [...]
}

Viewport Constraints