Edit in GitHubLog an issue

viewport

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

Example

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)#

ParamType
nodeSceneNode

scrollIntoView(x, y, width, height)#

ParamType
xnumber
ynumber
widthnumber
heightnumber

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.

ParamType
xnumber
ynumber

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.

zoomToRect(node)#

ParamType
nodeSceneNode

zoomToRect(x, y, width, height)#

ParamType
xnumber
ynumber
widthnumber
heightnumber

Kind: static method of viewport

bounds#

bounds: {x:number, y:number, width:number, height:number}

The current viewport bounds expressed in global coordinates.

Kind: static property of viewport Read only: true

zoomFactor#

zoomFactor: number

The current viewport zoom factor (where 1.0 = 100% zoom, 0.5 = 50% zoom, etc.).

Kind: static property of viewport Read only: true

Was this helpful?
Copyright © 2021 Adobe. All rights reserved.