Skip to main content
Answered

SDK: get current zoom and position

  • November 20, 2020
  • 3 replies
  • 787 views
M

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

Best answer by Max Harper

@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
Marijn Huizendveld
1 person likes this
  • Marijn Huizendveld
    Marijn Huizendveld
Was it helpful?

3 replies

Max Harper
Forum|alt.badge.img+6
  • Max Harper
  • Miro Hero
  • 373 replies
  • Answer
  • November 20, 2020

@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)) ]

Think visually. Work brilliantly. || visualthinking.tools || Creators of 'PowerPack', 'Clusterizer' and 'Totally Random' Miro Apps: || max@refractivestrategy.com || Support Community Miro Plug-In Creation: https://www.buymeacoffee.com/refractive
M

@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.

Max Harper
1 person likes this
  • Max Harper
    Max Harper
Marijn Huizendveld
Forum|alt.badge.img+2

Not entirely sure what the cause is but I’m unable to produce the desired results.


In order to center a widget I have used this:

(async () => {
    let widget: IWidget;

    // somehow obtain the widget that you want to zoom into. 

    const widgetBounds = widget.bounds;
    const viewport = await miro.board.viewport.get();
    const targetWidth = widgetBounds.width;
    const targetHeight = widgetBounds.height;
    const targetViewport = {
        x: widgetBounds.x - (targetWidth / 2) - ((viewport.width - targetWidth) / 2),
        y: widgetBounds.y - (targetHeight / 2) - ((viewport.height - targetHeight) / 2),
        width: viewport.width,
        height: viewport.height,
    }

    console.log("target viewport", targetViewport);
    console.log("widget", widgetBounds);
    console.log("viewport", viewport);

    miro.board.viewport.set(targetViewport, {
        padding: {
            top: 0,
            left: 0,
            right: 0,
            bottom: 0,
        },
        animationTimeInMS: 250
    });
})()

 

This seems to produce the desired results: the widget is centered in the middle but it does have some issues:

  • The left panels might be open so it’s not the center of the visible part of the canvas;
  • It doesn’t alter the zoom level, if the canvas is zoomed out a lot the object will be in the middle but not very apparent;

What I’m wondering

  • Is there a way to increase/decrease the current zoom/scale level?
  • Is there a way to know if the toolbar panels are open?

Thanks for helping out!
-Marijn

 

Reply


Behind the Canvas: Powering Innovation in Miro

Terms & Conditions