Skip to content

pixso.viewport

These are methods and properties available on the pixso.viewport global object. It represents the area of the canvas that is currently visible on-screen, commonly referred to as the viewport. The position of the viewport is represented via its center coordinate and zoom level.

  • Type:
typescript
interface ViewportAPI {
  center: Vector;
  zoom: number;
  scrollAndZoomIntoView(nodes: ReadonlyArray<BaseNode>): void;
  readonly bounds: Rect;
}

center

  • Type: Vector
typescript
interface Vector {
  readonly x: number;
  readonly y: number;
}

Center of the the current page that is currently visible on screen.

zoom

  • Type: number

Zoom level. A value of 1.0 means 100% zoom, 0.5 means 50% zoom.

scrollAndZoomIntoView

  • Type: scrollAndZoomIntoView(nodes: ReadonlyArray<BaseNode>): void

Automatically sets the viewport coordinates such that the nodes are visible on screen. It is the equivalent of pressing Shift-2.

position

  • Readonly: true
  • Type: Vector
  • Tip: Cross-thread Communication

Gets the position of the upper left corner of the current canvas in the browser coordinate system.

bounds

  • Readonly:true
  • Type: Rect
typescript
interface Rect {
  readonly x: number;
  readonly y: number;
  readonly width: number;
  readonly height: number;
}

The bounds of the viewport of the page that is currently visible on screen. The (x, y) corresponds to the top-left of the screen. User actions such as resizing the window or showing/hiding the rulers/UI will change the bounds of the viewport.