Skip to main content

Events

Whole-Tree Events​

The TreeView object exposes 2 events that communicate changes that affect the whole tree.

rootChanged fires when the contents of the root field (the field that contains the root node) change. That is, if a new root node is assigned or the schema changes. This will not fire when the node itself changes.

commitApplied fires whenever a change is applied outside of a transaction or when a transaction is committed. This is used to get Revertible objects to put on the undo or redo stacks. See undo redo support and Transactions.

Here is an example of how to subscribe to one of these events:

const unsubscribe = treeView.events.on("rootChanged", () => {...});

// Later at some point when the event subscription is not needed anymore
unsubscribe();

Node-Level Events​

SharedTree supports two node-level events: nodeChanged and treeChanged. These can be subscribed to using the Tree.on method, which has the following signature:

on<K extends keyof TreeChangeEvents>(
		node: TreeNode,
		eventName: K,
		listener: TreeChangeEvents[K],
	): () => void;

Tree.on assigns the specified listener function to the specified eventName for the specified node. The node can be any node of the tree.

The eventName can be either "treeChanged" or "nodeChanged":

  • nodeChanged fires whenever one or more properties of the specified node change.
  • treeChanged fires whenever one or more properties of the specified node or any node in its subtree, change.

We recommend looking at the documentation of each of the events for more details.

The Tree.on() method returns a function that unsubscribes the handler from the event. This method is typically called in clean up code when the node is being removed. For example:

const unsubscribe = Tree.on(myTreeNode, "nodeChanged", () => {...});

// Later at some point when the event subscription is not needed anymore
unsubscribe();