The NgDiagramViewportService provides methods and signals for interacting with the diagram viewport.

Example usage

private viewportService = inject(NgDiagramViewportService);

// Move viewport to (100, 200)
this.viewportService.moveViewport(100, 200);

// Zoom in by a factor of 1.2
this.viewportService.zoom(1.2);

Extends

• NgDiagramBaseService

Properties

canZoomIn

canZoomIn: Signal<boolean>

Returns true if the current zoom level is below the maximum and can be increased.

---

canZoomOut

canZoomOut: Signal<boolean>

Returns true if the current zoom level is above the minimum and can be decreased.

---

scale

scale: Signal<number>

Returns a computed signal for the scale that safely handles uninitialized state.

---

viewport

viewport: Signal<Viewport>

Returns a computed signal for the viewport that safely handles uninitialized state.

Accessors

maxZoom

Get Signature

get maxZoom(): number

Returns the maximum zoom scale from the diagram configuration.

Returns

number

---

minZoom

Get Signature

get minZoom(): number

Returns the minimum zoom scale from the diagram configuration.

Returns

number

Methods

centerOnNode()

centerOnNode(nodeOrId): Promise<void>

Centers the Node within the current viewport bounds.

Parameters

nodeOrId

The ID of the node or the node object to center on.

string | Node

Returns

Promise<void>

A promise that resolves once the change has been applied to the model. Inside a transaction, the promise resolves right away and the change is applied when the transaction commits.

Remarks

When calling centerOnNode() immediately after adding or modifying a node, its dimensions may not be measured yet. Use the waitForMeasurements transaction option to ensure accurate centering:

await this.ngDiagramService.transaction(() => {
  this.modelService.addNodes([newNode]);
}, { waitForMeasurements: true });
this.viewportService.centerOnNode(newNode.id); // Now centers correctly

---

centerOnRect()

centerOnRect(rect): Promise<void>

Centers the rectangle within the current viewport bounds.

Parameters

rect

Rect

The rectangle to center on.

Returns

Promise<void>

A promise that resolves once the change has been applied to the model. Inside a transaction, the promise resolves right away and the change is applied when the transaction commits.

---

clientToFlowPosition()

clientToFlowPosition(clientPosition): Point

Converts a client position to a flow position.

Parameters

clientPosition

Point

Client position to convert.

Returns

Point

Flow position.

---

clientToFlowViewportPosition()

clientToFlowViewportPosition(clientPosition): Point

Converts a client position to a position relative to the flow viewport.

Parameters

clientPosition

Point

Client position.

Returns

Point

Position on the flow viewport.

---

flowToClientPosition()

flowToClientPosition(flowPosition): Point

Converts a flow position to a client position.

Parameters

flowPosition

Point

Flow position to convert.

Returns

Point

Client position.

---

moveViewport()

moveViewport(x, y): Promise<void>

Moves the viewport to the specified coordinates.

Parameters

x

number

The x-coordinate to move the viewport to.

y

number

The y-coordinate to move the viewport to.

Returns

Promise<void>

A promise that resolves once the change has been applied to the model. Inside a transaction, the promise resolves right away and the change is applied when the transaction commits.

---

moveViewportBy()

moveViewportBy(dx, dy): Promise<void>

Moves the viewport by the specified amounts.

Parameters

dx

number

The amount to move the viewport in the x-direction.

dy

number

The amount to move the viewport in the y-direction.

Returns

Promise<void>

A promise that resolves once the change has been applied to the model. Inside a transaction, the promise resolves right away and the change is applied when the transaction commits.

---

setViewport()

setViewport(x, y, scale): Promise<void>

Sets the viewport to an absolute position and scale.

Parameters

x

number

The absolute x-coordinate for the viewport.

y

number

The absolute y-coordinate for the viewport.

scale

number

The absolute zoom scale (clamped to configured min/max).

Returns

Promise<void>

A promise that resolves once the change has been applied to the model. Inside a transaction, the promise resolves right away and the change is applied when the transaction commits.

Example

// Reset to origin at 50% zoom
this.viewportService.setViewport(0, 0, 0.5);

Since

1.2.0

---

zoom()

zoom(factor, center?): Promise<void>

Zooms the viewport by the specified factor.

Parameters

factor

number

The factor to zoom by (e.g., 1.1 for 10% zoom in, 0.9 for 10% zoom out).

center?

Point

The center point to zoom towards.

Returns

Promise<void>

A promise that resolves once the change has been applied to the model. Inside a transaction, the promise resolves right away and the change is applied when the transaction commits.

---

zoomToFit()

zoomToFit(options?): Promise<void>

Automatically adjusts the viewport to fit all diagram content (or a specified subset) within the visible area.

Parameters

options?

Optional configuration object

edgeIds?

string[]

Array of edge IDs to fit. If not provided, only edges with both ends among the fitted nodes are included. When nodeIds is not provided either, all edges are included.

nodeIds?

string[]

Array of node IDs to fit. If not provided, all nodes are included.

padding?

number | [number, number] | [number, number, number] | [number, number, number, number]

Padding around the content (default: 50). Supports CSS-like syntax:

• Single number: uniform padding on all sides
• [top/bottom, left/right]: vertical and horizontal padding
• [top, left/right, bottom]: top, horizontal, bottom padding
• [top, right, bottom, left]: individual padding for each side

Returns

Promise<void>

Remarks

Always await the preceding model mutation (e.g. await modelService.deleteNodes(...)) before calling zoomToFit() — an un-awaited mutation is not yet committed when zoomToFit() reads the model, so the viewport would fit the old content.

When calling zoomToFit() immediately after adding or modifying nodes/edges, their dimensions may not be measured yet. Use the waitForMeasurements transaction option to ensure accurate results:

await this.ngDiagramService.transaction(() => {
  this.modelService.addNodes([newNode]);
}, { waitForMeasurements: true });
this.viewportService.zoomToFit(); // Now includes new node dimensions

Example

// Fit all nodes and edges with default padding
this.viewportService.zoomToFit();

// Fit with custom uniform padding
this.viewportService.zoomToFit({ padding: 100 });

// Fit with different padding on each side [top, right, bottom, left]
this.viewportService.zoomToFit({ padding: [50, 100, 50, 100] });

// Fit only specific nodes
this.viewportService.zoomToFit({ nodeIds: ['node1', 'node2'] });

// Custom zoomToFit with anchor positioning using setViewport
// anchor: (0,0) = top-left, (0.5,0.5) = center, (1,1) = bottom-right
const anchor = { x: 0.5, y: 0.5 };
const { width, height } = this.modelService.metadata().viewport;
const bounds = this.modelService.computePartsBounds(nodes, edges);
if (!bounds.width || !bounds.height) return; // nothing measurable to fit
const scale = Math.min(width / bounds.width, height / bounds.height);
const x = width * anchor.x - (bounds.x + bounds.width * anchor.x) * scale;
const y = height * anchor.y - (bounds.y + bounds.height * anchor.y) * scale;
this.viewportService.setViewport(x, y, scale);