Convert frame coordinates to board coordinates

Problem

Convert relative frame coordinates of a child item to absolute board coordinates when repositioning the item outside the frame.

Solution

Create a helper function:

function projectLocalToGlobalCoord(frame, coord): {
  return {
    x: (frame.x - frame.width/2) + coord.x,
    y: (frame.y - frame.height/2) + coord.y,
  };
};

Discussion

When you position items on the board, you assign them x and y coordinates.
These coordinates can be relative to the center of the board, or to the top-left corner of a parent frame.
If you are setting and updating the position of items inside and outside frames, consider converting relative frame coordinates to absolute board coordinates.

See also

• Position and coordinates
• Check Miro App Examples on GitHub