# Pan and zoom the workspace

## What you will make

Pan empty workspace, wheel-zoom around the pointer, and reset the presentation without undoing moved nodes.

## How it works

Nodes remain in workspace coordinates while one outer [`Group`](/reference/components/group/) applies pan and zoom presentation once. Inverse mapping subtracts the workspace top and pan, then divides by zoom.

## Build the change

The background owns a pan session. The workspace owns wheel input, calls `preventDefault()`, clamps zoom to 60%–180%, and computes pan from the pointer anchor. See [style types](/reference/types/styles/) and [event types](/reference/types/events/).

```tsx
const zoomAroundPoint = (
  view: ViewTransform,
  point: Readonly<{ x: number; y: number }>,
  deltaY: number,
): ViewTransform => {
  const anchor = rootToWorkspace(point, view);
  const zoom = Math.min(
    1.8,
    Math.max(0.6, view.zoom * Math.exp(-deltaY * 0.001)),
  );
  return {
    zoom,
    panX: point.x - anchor.x * zoom,
    panY: point.y - WORKSPACE_TOP - anchor.y * zoom,
  };
};

<Group
  style={{
    translateX: view.panX / view.zoom,
    translateY: view.panY / view.zoom,
    scaleX: view.zoom,
    scaleY: view.zoom,
  }}
>
  {connections}
  {cards}
</Group>;
```

Pibbl applies the Group scale before its translation, so the source divides the stored root-pixel pan by zoom. The anchor calculation prevents the content beneath the pointer from drifting; clamping prevents an unbounded or inverted view, and `preventDefault()` prevents the owned wheel gesture from scrolling the page.

## Predict and try

Change the wheel exponent coefficient from `0.001` to `0.0015`. The zoom step changes, but the anchor remains stable.

## Check your result

Pan moves every displayed node together, wheel preserves the point below the pointer, and Reset returns to 100% with moved node data intact.

## What you learned

Domain data and viewport presentation are separate state. Owned wheel cancellation prevents browser scrolling only for this workspace gesture.

[Open the interactive workbench](/playground/#/workbench/diagram-editor-pan-and-zoom)

## Implementation guidance for agents

Read the [Authoring, signals, and lifecycle companion](/agents/topics/lifecycle/) for ownership, adaptation, failure modes, and verification. [Agent start](/agents/) provides the version-selection workflow.

## Documentation version

Documentation built with @pibbl/core 0.0.2, revision 2dccb19. ALPHA — NOT FOR PRODUCTION USE.