Viewport
viewport.Viewport
Table of contents
Methods
Methods
get
▸ get(): Promise
<Rect
>
Fetches the dimensions of the current viewport and its position, relative to the center of board with x: 0
and y: 0
.
The viewport x
and y
coordinates define the horizontal and vertical position of the top-left corner of the viewport, relative to the center point of the board with x: 0
and y: 0
.
Values are in dp.
The method takes no arguments.
Example:
// Get the current viewport.
const viewport = await miro.board.viewport.get();
// Print coordinates and dimensions of the current viewport.
console.log(viewport);
// {
// x: -29570.817261000782,
// y: -18247.315051361205,
// width: 64157.213365973126,
// height: 32763.49326537
// }
Returns
Promise
<Rect
>
set
▸ set(options
): Promise
<Rect
>
Updates the dimensions of the viewport and its position, relative to the center of board with x: 0
and y: 0
.
There can be a discrepancy between the input that you pass to viewport.set()
, and the corresponding output.
The output depends on specific factors such as the actual screen size, any vertical or horizontal navigation bars, and so on.
The method takes viewport
as a required argument:
Property | Type | Description |
---|---|---|
x | Number | Horizontal position of the top-left corner of the viewport, relative to the center point of the board, in dp. |
y | Number | Vertical position of the top-left corner of the viewport, relative to the center point of the board, in dp. |
width | Number | Width of the viewport, in dp. |
height | Number | Height of the viewport, in dp. |
The method takes padding
and animationDurationInMs
as optional arguments.
padding
is an object with the following optional properties:
Property | Type | Description |
---|---|---|
top | Number | Padding area above the target viewport, in dp. Default: 0 (no padding) |
bottom | Number | Padding area below the target viewport, in dp. Default: 0 (no padding) |
right | Number | Padding area right of the target viewport, in dp. Default: 0 (no padding) |
left | Number | Padding area left of the target viewport, in dp. Default: 0 (no padding) |
animationDurationInMs
defines the duration in milliseconds of a zoom animation effect that plays when setting the viewport.
Default: 0
(no animation)
Example:
const myViewport = await miro.board.viewport.set({
viewport: {
x: 200, // top-left corner of the viewport, relative to the center of the board
y: 100, // top-left corner of the viewport, relative to the center of the board
width: 1280,
height: 720,
},
padding: {
top: 100,
left: 200,
bottom: 50,
right: 20,
},
animationDurationInMs: 1000,
});
console.log(myViewport); // => {x: 224.2903225806451, y: 119.00000000000003, width: 1328.5806451612902, height: 718.7872340425532}
Parameters
Name | Type |
---|---|
options | SetOptions |
Returns
Promise
<Rect
>
zoomTo
▸ zoomTo(items
): Promise
<void
>
Zooms to one or more items on the board.
If you zoom to items that are scattered across the board, the method can zoom out to include in the viewport all the items that you pass as arguments.
If you don't pass any items as arguments, the method throws an error.
Example:
// Create three sticky notes
const first = await miro.board.createStickyNote({
content: 'first',
x: 400,
y: 400,
});
const second = await miro.board.createStickyNote({
content: 'second',
x: -400,
y: -400,
});
const third = await miro.board.createStickyNote({
content: 'third',
});
// Zoom to a sticky note on the board
await miro.board.viewport.zoomTo(first);
// Or: zoom to multiple sticky notes on the board
await miro.board.viewport.zoomTo([second, third]);
// Or: zoom to all sticky notes on the board
const stickyNotes = await miro.board.get({
type: 'sticky_note',
});
await miro.board.viewport.zoomTo(stickyNotes);
Parameters
Name | Type |
---|---|
items | Items |
Returns
Promise
<void
>
Updated 2 months ago