MindmapNode

Mindmap.MindmapNode

Experimental

MindmapNode

Represents a mind map node on a board.

// Create mind map root node
const root = await miro.board.experimental.createMindmapNode({
  nodeView: {
    content: '<p>Mind map root node.</p>',
  },
  x: -300,
  y: 400,
  width: 720,
});

// Create mind map child node A
const childA = await miro.board.experimental.createMindmapNode({
  nodeView: {
    content: '<p>Mind map child node A.</p>',
  },
  x: -300,
  y: 400,
  width: 720,
});

// Create mind map child node B
const childB = await miro.board.experimental.createMindmapNode({
  nodeView: {
    content: '<p>Mind map child node B.</p>',
  },
  x: 300,
  y: 400,
  width: 720,
});

// Add  node A and node B as child nodes to the root node
await root.add(childA);
await root.add(childB);

// Output the mind map nodes to the developer console
console.log(root, childA, childB);

MindmapNode item
Figure 1. MindmapNode item.

Properties

Methods

Properties

type

• Readonly type: "mindmap_node"

Experimental

Defines the type of item.
Item type is useful to retrieve specific items from a board.

Example:

// Get all mind map nodes from the board
const items = await miro.board.experimental.get({type: 'mindmap_node'});

// Output to the console the total number of mind map nodes
console.log(`The current board has ${items.length} mind map nodes.`);

Overrides

BaseItem.type

nodeView

• Readonly nodeView: Object

This property represents the visual representation of the node.

Note:

Currently, only text widget representation is supported

Type declaration

Name	Type
`type`	`"text"`
`content`	`string`

width

• width: number

Width of the item in dp.

See also:

Pixels and dimensions

layout

• layout: "horizontal" | "vertical" = 'horizontal'

Indicates the layout of the mind map.

Layout accepts two properties: vertical and horizontal.

Layout can only be set for the root mind map node. For all other nodes, the layout property is always read-only.

direction

• direction: undefined | "start" | "end"

Indicates the current direction of the mind map node relative to the root node.

Direction accepts two values: start and end. The direction value's representation changes based on the layout of the mind map:

When the layout is horizontal, start represents the left and end represents the right side of the mind map root node.
When the layout is vertical, start represents the top and end represents the bottom side of the mind map root node.

direction property can only be set for immediate children of the root node. This property is read-only for all other child nodes, and is undefined for the root mind map node.

height

• Readonly height: number

Height of the item in dp.

See also:

Pixels and dimensions

childrenIds

• Readonly childrenIds: string[] = []

An array of unique identifiers.
The IDs represent child items inside an item.
You can programmatically retrieve child items inside a parent item by specifying their ID.

The children can be only be of type mindmap_node

ℹ️ Note:

You can access all available experimental features from the experimental namespace.

isRoot

• Readonly isRoot: boolean = true

Determines if a mindmap node is a root node or not.

If value is true, the mindmap node is root node.
If value is false, the mindmap node is descendant node

id

• Readonly id: string

Unique ID of the item, assigned automatically upon creation.

Example: 3658432978520043388

origin

• origin: "center"

origin marks:

The positioning reference point of a board item.
This is the point used to calculate the x and y coordinates of an item when it's positioned on the board, or when it's a child inside a parent item.
The rotation pivot point of a board item that supports rotation.

origin accepts only one value: center.
Any other value throws an error.

relativeTo

• relativeTo: RelativeTo

The relativeTo property affects the x and y coordinate values of a board item.
relativeTo defines the positioning reference of a board item, which can be:

Depending on whether an item is a child of a parent item or not, relativeTo can have one of the following values:

Value	Description	On the board UI
`canvas_center`	The item is positioned on the board, and it's not a child of another item. The `x` and `y` coordinate values of the item are relative to the center of the board.	Figure 1. The `relativeTo` property of the board item—a sticky note in the example image—is set to `canvas_center`. The same mechanism applies to and works in the same way for all supported board items.
`parent_top_left`	The item is positioned on the board, and it is a child of a parent item. For example, a parent frame. The `x` and `y` coordinate values of the child item are relative to the top-left corner of the parent item).	Figure 2. The `relativeTo` property of the board item—a sticky note in the example image—is set to `parent_top_left`. The same mechanism applies to and works in the same way for all supported board items.
`parent_center`	Experimental feature The item is positioned on the board, and it is a child of a parent mind map node. The `x` and `y` coordinate values of the item are relative to the center of the parent mind map node item.	Figure 3. The `relativeTo` property of the child mind map nodes is set to `parent_center`.

See also:

parentId

• Readonly parentId: null | string

Mind map node's parentId property can be one of the following:

The parentId of a child mind map node is always a mind map node ID.
If a root mind map node is inside a frame, parentId is the frame ID.
If a root mind map node is not inside a frame, parentId is null.

createdAt

• Readonly createdAt: string

Timestamp

Date and time when the item was created.

Format: UTC, ISO 8601.
Includes a trailing Z offset.

Example: 2021-05-18T07:59:01Z

ℹ️ Note:

Timestamps indicating creation and update times are always in UTC time, regardless of the time offset configured on the machine where the app runs or where the code is executed.

createdBy

• Readonly createdBy: string

Miro users are automatically assigned a unique ID.

createdBy contains the ID of the user who created the item.

Example: 3658432978520043388

modifiedAt

• Readonly modifiedAt: string

Timestamp

Date and time when the item was last modified.

Format: UTC, ISO 8601.
Includes a trailing Z offset.

Example: 2021-05-18T07:59:01Z

ℹ️ Note:

Timestamps indicating creation and update times are always in UTC time, regardless of the time offset configured on the machine where the app runs or where the code is executed.

modifiedBy

• Readonly modifiedBy: string

Miro users are automatically assigned a unique ID.

modifiedBy contains the ID of the user who applied the most recent edit to the item.

Example: 3658432978520043388

x

• x: number

The x-axis coordinate of an item is the horizontal distance in dp of the center point of the item from the center point of the board.

The center point of the board has x: 0 and y: 0 coordinates.

Default: 0

See also:

y

• y: number

The y-axis coordinate of an item is the vertical distance in dp of the center point of the item from the center point of the board.

The center point of the board has x: 0 and y: 0 coordinates.

Default: 0

See also:

Methods

sync

▸ sync(): Promise<void>

Experimental

sync propagates to the board any changes to item and tag properties.
After updating the properties of an item or a tag, sync it with the board to:

Propagate to the board the changes applied to the item or to the tag.
Make the changes visible on the board.

All board items and tags require sync to make any changes to their properties visible on the board.

For more information and examples, see Update and sync item properties.

Example:
(The code example updates a mind map node item using sync.
The same mechanism applies to and works in the same way for all supported board items.)

// Create a new mind map node.
const mindmapNode = await miro.board.experimental.createMindmapNode();

mindmapNode.nodeView.content = 'This is a mindmap node';

// Call 'sync' to make the changed mind map node item properties visible on the board.
await mindmapNode.sync();

// Output the updated mind map node item to the developer console.
console.log(mindmapNode);

Returns

Promise<void>

Overrides

BaseItem.sync

add

▸ add(item): Promise<MindmapNode>

Experimental

Adds a child node to a mind map node.

To add a child node to a mind map node with add(), the child node:

Must exist on the board.
Must be of type mindmap_node.
Must not be the parent or ancestor of the mind map node. For example, given the mind map structure Root 1 -> A1 -> B1 -> C1. You cannot add A1 under B1 or C1.

add() establishes a parent/child relationship between mind map nodes. After calling add():

The parentId of the child item corresponds to the parent mind map node ID.
The child mind map node ID is added to the parent mind map node's childrenIds array.
The child node is automatically repositioned relative to the parent node depending on the initial position of the child node. For example, if the a mind map node is located on the left of the parent node before adding it as a child node, the child node is added to the left of the parent node.
The child node's position is returned relative to its parent, calculated from the center of the parent node.
If a mind map node is already a child of another mind map node, add() will reparent the child node to the new parent node.

When adding a mind map node to a root mind map node (isRoot: true), the position of the child node with regards to the root mind map node depends on the initial position of the child node, based on the following:

If the initial position of the child node is to the left of the root mind map node, the child node is attached to the left of the root node.
If the initial position of the child node is to the right of the root mind map node, the child node is attached to the right of the root node.

// Create two mind map items, specifically one root node and one child node
const root = await miro.board.experimental.createMindmapNode({nodeView: {content: 'Root'}});
const child = await miro.board.experimental.createMindmapNode({nodeView: {content: 'Child'}});

// Add the child node to the root node
await root.add(child);

console.log(root, child);

Parameters

Name	Type
`item`	`MindmapNode`

Returns

Promise<MindmapNode>

getChildren

▸ getChildren(): Promise<MindmapNode[]>

Experimental

Returns an array containing children of mindmap item.
If a mind map item has no children, the method returns an empty array.

The children can be only be of type mindmap_node

ℹ️ Note:

Use the experimental namespace for all experimental features.

// Create three mind map items
const root = await miro.board.experimental.createMindmapNode({nodeView: {content: 'Root'}});
const child1 = await miro.board.experimental.createMindmapNode({nodeView: {content: 'Child 1'}});
const child2 = await miro.board.experimental.createMindmapNode({nodeView: {content: 'Child 2'}});

// Add Child 1 and Child 2 nodes to the root node
await root.add(child1);
await root.add(child2);

// Get all children nodes
const children = await root.getChildren();

console.log(children);

Returns

Promise<MindmapNode[]>

getMetadata

▸ getMetadata(): Promise<AppData>

Experimental

Fetches board item metadata, stored per app, for the specified metadata key.
The response contains the metadata value assigned to the requested key.

To fetch all the metadata for a board item, invoke the method without passing any arguments.
The response contains all the metadata associated with the board item as key/value pairs.

An app can access only the metadata that it sets.
It cannot access metadata set by other apps.

ℹ️ Note:

To access board item metadata, apps require the boards:read permission.
To store board item metadata, apps require the boards:write permission.
getMetadata returns a new object, not a reference to the object that was previously set with setMetadata.
If the specified key isn't found, the method returns undefined.

⚠️ Warning:

Use AppMetadata to store limited amounts of metadata.
Recommended: < 6 KB.
When updating metadata, limit the data size of the update payload.
Recommended: < 6 KB.
Don't use AppMetadata as a file storage solution (< 300 KB).

Example:

// Create new mind map node
const root = await miro.board.experimental.createMindmapNode({nodeView: {content: 'Root'}});

// Set item metadata for an imaginary geocaching game, and store it in the created mind map item
await root.setMetadata('leaderboard', ['Ziltoid', 'Howard', 'Paul']);
await root.setMetadata('scores', [10, 20, 30]);

// Get all metadata items by not passing any parameter
const metadata = await root.getMetadata();

console.log(metadata.leaderboard, metadata.scores);

// Get specific metadata by passing metadata key as argument
const leaderboard = await geoCard.getMetadata('leaderboard');
const scores = await geoCard.getMetadata('scores');

console.log(leaderboard, scores);

// Clear metadata
await mindmapNode.setMetadata('leaderboard', {});
await mindmapNode.setMetadata('scores', {});

Returns

Promise<AppData>

▸ getMetadata<T>(key): Promise<T>

Type parameters

Name	Type
`T`	extends `AppDataValue`

Parameters

Name	Type
`key`	`string`

Returns

Promise<T>

setMetadata

▸ setMetadata<T>(key, value): Promise<T>

Experimental

Adds board item metadata to make it available on the board that the app runs on.
An app can access only the board item metadata that it sets.
It cannot access metadata set by other apps.

Board item metadata is stored in the item it refers to. Therefore:

When duplicating an item, the metadata is copied to the new item.
When deleting an item, the corresponding metadata is removed with the deleted item.

Board item metadata is synced across, and available to, all the users who can:

Access and view the board that the app is running on, AND
Run the app on the board.

AppMetadata is a key/value-pair object. It can contain values with the following data types:

string
number
boolean
Object
Array

ℹ️ Note:

To access board item metadata, apps require the boards:read permission.
To store board item metadata, apps require the boards:write permission.
You can overwrite the value of an existing key inside AppMetadata: if you pass the same key multiple times with different values, only the last/most recent value is stored with the key.
After setting a key, you cannot delete it; you can only update it.
However, you can delete the corresponding value by setting it to null, or to an empty value ('').
You can assign an empty array ([]) as the value of a key. It's returned as an empty array.

⚠️ Warning:

Use AppMetadata to store limited amounts of metadata.
Recommended: < 6 KB.
When updating metadata, limit the data size of the update payload.
Recommended: < 6 KB.
Don't use AppMetadata as a file storage solution (< 300 KB).

Example:

// Create new mind map node
const root = await miro.board.experimental.createMindmapNode({nodeView: {content: 'Root'}});

// Set item metadata for an imaginary geocaching game and store it in the mind map item created
await root.setMetadata('leaderboard', ['Ziltoid', 'Howard', 'Paul']);
await root.setMetadata('scores', [10, 20, 30]);

// Get all metadata items by not passing any parameter
const metadata = await root.getMetadata();

console.log(metadata.leaderboard, metadata.scores);

// Get specific metadata by passing metadata key as argument
const leaderboard = await geoCard.getMetadata('leaderboard');
const scores = await geoCard.getMetadata('scores');

console.log(leaderboard, scores);

// Clear metadata
await mindmapNode.setMetadata('leaderboard', {});
await mindmapNode.setMetadata('scores', {});

Type parameters

Name	Type
`T`	extends `AppData`

Parameters

Name	Type
`key`	`string`
`value`	`AppDataValue`

Returns

Promise<T>

Table of contents

Properties

Methods

Properties

type

Overrides

nodeView

Type declaration

width

layout

direction

height

childrenIds

isRoot

id

origin

relativeTo

parentId

createdAt

createdBy

modifiedAt

modifiedBy

x

y

Methods

sync

Returns

Overrides

add

Parameters

Returns

getChildren

Returns

getMetadata

Returns

Type parameters

Parameters

Returns

setMetadata

Type parameters

Parameters

Returns