viewport

The viewport module represents the current UI view of the XD document's content.

Example

// Pan viewport to bring the region x:100, y:200, width:50, height:50 into view
viewport.scrollIntoView(100, 200, 50, 50);

// Pan view to the first selected object
if (selection.items.length > 0) {
  viewport.scrollIntoView(selection.items[0]);
}

// Pan view to center the location x:100, y:200
viewport.scrollToCenter(100, 200);

// Zoom & pan to show entire region x:100, y:200, width:50, height:50
viewport.zoomToRect(100, 200, 50, 50);

console.log("Viewport at:", viewport.bounds); // e.g. "{ x:100, y:50, width:1400, height:900 }"
console.log("Zoom:", viewport.zoomFactor); // e.g. "0.66"
Copied to your clipboard
1// Pan viewport to bring the region x:100, y:200, width:50, height:50 into view
2viewport.scrollIntoView(100, 200, 50, 50);
3
4// Pan view to the first selected object
5if (selection.items.length > 0) {
6  viewport.scrollIntoView(selection.items[0]);
7}
8
9// Pan view to center the location x:100, y:200
10viewport.scrollToCenter(100, 200);
11
12// Zoom & pan to show entire region x:100, y:200, width:50, height:50
13viewport.zoomToRect(100, 200, 50, 50);
14
15console.log("Viewport at:", viewport.bounds); // e.g. "{ x:100, y:50, width:1400, height:900 }"
16console.log("Zoom:", viewport.zoomFactor); // e.g. "0.66"

Since: XD 14

scrollIntoView()

▸ scrollIntoView(node) | (x, y, width, height)

Smoothly pan the viewport to bring the entire given region into view. If the region is already fully in view, does nothing. If the given region is too large to fit entirely in view, it is simply centered (zoom remains unchanged).

The region can be defined by passing a SceneNode, or by explicitly specifying a rectangle in global coordinates.

scrollIntoView(node)

Param	Type
node	SceneNode

scrollIntoView(x, y, width, height)

Param	Type
x	number
y	number
width	number
height	number

Kind: static method of viewport

scrollToCenter()

▸ scrollToCenter(x, y)

Smoothly pan the viewport to center on a specific point in the document's global coordinates. Even if the point is already in view, the view pans until it is centered.

Param	Type
x	number
y	number

Kind: static method of viewport

zoomToRect()

▸ zoomToRect(node) | (x, y, width, height)

Zoom & pan the view as needed so the given region fills the viewport (with some padding). If the region is large, zooms out as needed so it fits entirely in view. If the region is smaller, zooms in so the region fills the entire viewport - may zoom in past 100% to achieve this.

The region can be defined by passing a SceneNode, or by explicitly specifying a rectangle in global coordinates.