On this Page

TreeNode

TreeNode is the recursive data shape used by the immutable moveTreeNode collection helper. It is a TypeScript interface, not a rendered motion primitive.

Overview

Every node needs a stable id. Arbitrary additional data is supported, and children can contain nested TreeNode values at any depth.

Behaviour

moveTreeNode returns a new hierarchy when it can move a node. It does not mutate the input array. Attempts to move a node onto itself or into one of its descendants are rejected and return the original tree.

Usage

TypeScript

import { moveTreeNode, type TreeNode } from "fractalsvelte/motion";

const tree: TreeNode[] = [
	{
		id: "workspace",
		children: [{ id: "inbox" }, { id: "archive" }],
	},
	{ id: "trash" },
];

const nextTree = moveTreeNode(tree, "archive", undefined, 0);
// `archive` is now the first root node; `tree` is unchanged.

Pass undefined as parentId to move an item to the root. Omit index to append it to the selected parent or root collection.

API

`TreeNode`

Field	Type	Required	Description
`id`	`string`	Yes	Stable node identifier.
`children`	`TreeNode[]`	No	Optional nested child nodes.
`[key: string]`	`unknown`	No	Additional application-specific node data.

`moveTreeNode`

moveTreeNode(nodes, id, parentId?, index?): TreeNode[]

Parameter	Type	Description
`nodes`	`TreeNode[]`	Source hierarchy. It is never mutated.
`id`	`string`	Identifier of the node to move.
`parentId`	`string \\| undefined`	Destination parent id. Omit it to insert at the root.
`index`	`number \\| undefined`	Destination index. Omit it to append.

The function returns the resulting TreeNode[]. If id is absent, matches parentId, or would become its own descendant, it returns the original nodes reference unchanged.

Integrations

TreeView uses the same hierarchy model for its reorderable mode. Use moveTreeNode directly when application state needs the same immutable move logic outside a rendered tree.