Pan and Zoom

The camera maps graph world coordinates to the visible viewport. Users can pan, wheel, pinch and zoom while application controls use the same camera through the component or store API.

World coordinatesNode positions stay stable while the camera moves.

Dynamic workspaceBounds grow from rendered node dimensions.

Content framingInitial and reset positions can align to the start node.

Configure the Camera

Scope dfPanZoomOptionsProvider() to one editor component or provide shared defaults at application level.

graph-editor.component.ts

    
      import {dfPanZoomOptionsProvider} from '@ng-draw-flow/core';

providers: [
  dfPanZoomOptionsProvider({
    leftPosition: 80,
    topPosition: 40,
    minZoom: 0.4,
    maxZoom: 2,
    wheelBehavior: 'zoom',
    backgroundCanvas: {visible: true},
  }),
];

Initial and Reset Framing

With no placement options, world origin {x: 0, y: 0} is centered. Configure either axis independently to align rendered content to an exact viewport offset.

Horizontal Alignment

leftPosition aligns the left edge of the first startNode to the requested viewport offset. Without a start node it uses the left edge of all rendered content.

graph-editor.component.ts

    
      dfPanZoomOptionsProvider({
  topPosition: null,
  leftPosition: 0,
});

Vertical Alignment

topPosition applies the same rule to the top edge. A null value keeps centered framing on that axis.

graph-editor.component.ts

    
      dfPanZoomOptionsProvider({
  topPosition: 0,
  leftPosition: null,
});

Placement options affect initial and reset framing only. They do not change saved node coordinates or the position assigned to a newly created node.

Options

Option	Default	Behavior
`leftPosition`	`null`	Initial/reset offset from the left viewport edge.
`topPosition`	`null`	Initial/reset offset from the top viewport edge.
`minZoom` / `maxZoom`	`0.25` / `3`	Lower and upper bounds for every zoom command and gesture.
`zoomStep`	`0.25`	Step used by `zoomIn()` and `zoomOut()` .
`zoomAnimationDuration`	`300`	Camera zoom transition duration in milliseconds.
`wheelBehavior`	`zoom`	Uses the wheel for `zoom` or viewport `scroll` .
`wheelStep`	`0.008`	Base wheel zoom step; takes priority over legacy sensitivity.
`wheelSpeed`	`1`	Additional multiplier for wheel zoom.
`pinchZoomSpeed`	`1`	Multiplier for trackpad pinch zoom.
`touchSensitivity`	`0.01`	Touch gesture sensitivity.
`backgroundCanvas.visible`	`true`	Renders the workspace fill, border and point grid.
`panSize`	Deprecated	Ignored by dynamic workspace sizing and retained for compatibility only.
`zoomWheelSensitivity`	`0.01`	Used only when `wheelStep` is undefined.

Dynamic Workspace

The usable workspace is recalculated from rendered node bounds as nodes move or resize. There is no fixed panSize border that blocks dragging. Camera clamping follows the current content instead.

Programmatic Camera Control

Inject NgDrawFlowStoreService in a toolbar or call the same methods on a viewChild(NgDrawFlowComponent) . Coordinates and zoom are optional, so omitted camera fields keep their current values.

editor-toolbar.component.ts

    
      readonly store = inject(NgDrawFlowStoreService);

zoomToOverview(): void {
  this.store.setPosition({x: 40, y: 40, zoom: 0.75});
}

zoomToActualSize(): void {
  this.store.setScale(1);
}

resetCamera(): void {
  this.store.resetPosition();
}

Background Theming

The dedicated canvas follows camera movement and workspace CSS variables. Disable it when the application supplies its own background.

styles.less

    
      ng-draw-flow {
  --df-pan-zoom-viewport-background: #f4f4f5;
  --df-pan-zoom-workspace-background: #fff;
  --df-pan-zoom-grid-color: #d4d4d8;
  --df-pan-zoom-border-color: #e4e4e7;
}

NgDrawFlow