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);
Figure 1. MindmapNode item.
Table of contents
Properties
- type
- nodeView
- width
- layout
- direction
- height
- childrenIds
- isRoot
- id
- origin
- relativeTo
- parentId
- createdAt
- createdBy
- modifiedAt
- modifiedBy
- x
- y
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
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:
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 andend
represents the right side of the mind map root node. - When the layout is
vertical
,start
represents the top andend
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:
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 thex
andy
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 | 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
isnull
.
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
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 withsetMetadata
.- 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 tonull
, 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
>
Updated 1 day ago