How does the geometry work for widgets on the REST API?

  • 12 March 2022
  • 2 replies
  • 95 views
E
Badge +1

Hi,

 I’m building an application that transforms widgets using the REST API and I’m having some trouble understanding why the coordinates in the API response don’t seem to correspond the coordinates on my Miro board.

 

I have for example a frame with text inside it on my board as shown below:

 

Clearly the text is inside the frame and, to my intuitive understanding, should have a higher x coordinate than the frame which contains it. However, in my REST API response I have the following:

 

// Frame
{
      "type": "frame",
      "x": -3587.3270314932,
      "y": -5206.0307250572
}

// Text inside frame
{
      "type": "text",
      "x": -3698.5956533089,
      "y": -4955.33351925148
}

As you can see the x coordinate has a lower value for the text than for the frame. Is there a clear description somewhere of how these coordinates are generated? (And therefore how I might manipulate them to have values that correspond to the visual appearance).

2 replies

Max Harper
Userlevel 7
Badge +5

@Emile Paffard-Wray 
Unlike computer graphics(web), in Miro, the X and Y of each widget is taken at its center point. Which will explain why your Frame X > Text X    because the text center is left of the frame center. 

This center-based geom scheme means you’ll have to get clever with managing the geometry. Especially as you resize and reposition. 
 
For certain operations we made a utility function for deriving the ‘upper left’ of each item

function getUpperLeftCoord(widget){
return {x: widget.x - .5* widget.bounds.width, y: widget.y - .5*widget.bounds.height}
}

@Joanna Smith may appreciate knowing this challenge you hit. 

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
E
Badge +1

Ah thank you @Max Harper, I don’t know why I didn’t think of checking this!

Reply


Terms & Conditions