2022-08-09 changelog

Miro Web SDK 2.0 ⚠ breaking change! ⚠
Fixed a bug affecting the frame.add method.

Summary

After moving a board item inside a frame, the method would return an error when trying to explicitly add an item as a child of a containing parent frame.

❗️

Breaking change

Miro Web SDK 2.0, frame.add method

frame.add used to establish a parent-child relationship between a parent frame and a child item inside the frame, as well as reposition the child item inside the frame, after recalculating its coordinates as relative to the top-left corner of the parent frame.

Now it establishes the parent-child relationship, without repositioning the child inside the parent.

What has changed

Before implementing this change, to add a board item to a frame as a child item, you'd need to:

1. Select the board item to move inside the frame, and move it inside the frame by specifying different absolute coordinates.
2. Pass the child item as an argument of the frame.add method to establish the parent-child relationship between the items.
3. The frame.add would establish the parent-child relationship, and it would also reposition the child item inside the frame as relative to the parent frame.
   This would result in an error printed to the developer console, and the operation would fail.

Now the frame.add method establishes the parent-child relationship, and it recalculates the child item coordinates as relative to the parent frame. However, it no longer automatically repositions the child inside the frame.

To add a board item to a frame as a child item, now you need to:

1. Select the board item to move inside the frame, and move it inside the frame by specifying different absolute coordinates.
2. Pass the child item as an argument of the frame.add method to establish the parent-child relationship between the items.
3. After adding the child item to the parent frame, the child coordinates are recalculated as relative to the top-left corner of the parent frame.
   It's now possible to move the parent frame with its child, or to move the child item inside the parent frame by specifying relative coordinates.

Example

// Create a frame.
const frame = await miro.board.createFrame({
    title: "title",
    width: 800,
    height: 600,
    x: 4100,
    y: 4200,
    style: {
        fillColor: "#FFFFFF",
    },
});

// Create a child, and position it inside the frame.
const child = await miro.board.createShape({
    width: 200,
    height: 250,
    x: 4200,
    y: 4300,
    style: {
        fillColor: "#6DEB0C",
    },
});

// Create another child, and position it inside the frame.
const child2 = await miro.board.createShape({
    width: 200,
    height: 250,
    x: 4050,
    y: 4060,
    style: {
        fillColor: "#FF0000",
    },
});

// Add the child items to the parent frame.
await frame.add(child)
await frame.add( child2 )

// For example, now you can update the child items' position inside the frame
// by specifying relative coordinates.
const shapes = await miro.board.get({ type: "shape" });
await Promise.all(
  shapes.map((child) => {
    child.x += 150;
    child.y += 200;
    return child.sync();
  })
);