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;
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 answer by Max Harper
- 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.
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)) ]