Answered

SDK: get current zoom and position

  • 20 November 2020
  • 2 replies
  • 58 views

Hello, 

I would like to place a shape on the center of the current screen. So I slide a bit to the right click on my plugin and it creates it in the center of the scroll position. 

With miro.board.viewport.get() I seem to get the whole viewport with all screens, etc and it would position it wrong, even if I try to calculate it like that: 

    const viewport = await miro.board.viewport.get();
const zoom = await miro.board.viewport.getScale();
const vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0)
const vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0)
calculated.centeredX = (vw * zoom) / 2 + viewport.x;
calculated.centeredY = (vh * zoom) / 2 + viewport.y;
console.log(calculated, viewport)

My assumption is that viewport.x is the left position and viewport.y the top positon to of my current visible browser window. Then I read my browsers window height and width, half it to get the center and multiply it with the scale factor of miro.

It does not work like that unfortunately.

Best, Markus

icon

Best answer by Max Harper 20 November 2020, 17:20

@Markus Edenhauser    You’re close.  I’d recommend: 

  • Don’t use the browser window dimensions for this case.
  • You also needn’t worry about zoom here … unless you are trying to dynamically resize the object that you create to always “look” a certain size at the current zoom level.  
  • Viewport has X and Y and importantly here, it also has ‘width’ and ‘height’ → which are the exact width in Miro pts, (not screen pixels)… to get from miro pts to screen pixels you’d convert with ‘zoom’.  But I don’t believe you don’t need that in this case. 
  • Use instead:  viewport.width and viewport.height

  • In Miro just like SVG/other web graphics the Y is positive in the ‘down’ direction… 

  • centerXY = [ (viewport.x + (viewport.width/2)) ,  (viewport.y + (viewport.height/2)) ]

View original

2 replies

Userlevel 6

@Markus Edenhauser    You’re close.  I’d recommend: 

  • Don’t use the browser window dimensions for this case.
  • You also needn’t worry about zoom here … unless you are trying to dynamically resize the object that you create to always “look” a certain size at the current zoom level.  
  • Viewport has X and Y and importantly here, it also has ‘width’ and ‘height’ → which are the exact width in Miro pts, (not screen pixels)… to get from miro pts to screen pixels you’d convert with ‘zoom’.  But I don’t believe you don’t need that in this case. 
  • Use instead:  viewport.width and viewport.height

  • In Miro just like SVG/other web graphics the Y is positive in the ‘down’ direction… 

  • centerXY = [ (viewport.x + (viewport.width/2)) ,  (viewport.y + (viewport.height/2)) ]

@Max Harper Thanks for your reply. This was my initial approach, and it didn’t work as expected because I had used it wrongly later on :facepalm: 

const centeredX = viewport.x + (viewport.width/2);
const centeredY = viewport.y + (viewport.height/2);

Using this to get the center of the viewport works like a charm.

Reply