Understanding events & forest

[cruxcode]

If you look at the localdb/.../events.json file, you will notice that it contains an array of events. There are six types of events as of now:

1. CREATE - It is the event associated with the creation of a node in the tree. When the user drags and drops a component into the canvas, then, a create event is called and the component is added into localdb which stores all the components on the canvas in JSON format.
2. DELETE - This is event is used to remove a node from the tree. It is the event associated with the removal of any component from the canvas. This happens when you select a component and press the delete key on your keyboard.
3. PATCH - Patch event takes a slice and merges that slice with the existing state. This merge is almost similar to the default merge function from lodash library. Some use cases of this event are an update to the styles of a component or the parent node of that component which happens in case of repositioning of that node in the tree.
4. LINK - Link event is when you link a node in one tree to a node in another tree.
5. UNLINK - Unlink event is the opposite of the link event, you remove the link between two nodes in two different trees.
6. HARDPATCH - Overwrites the state of the node. It is used in scenarios like undo-redo implementation.
7. UNSET - Deletes a field in the state object given a path to reach the field. If the selector/path is ["styles", "background"], then, this event will remove background field.

When you drag and drop a component onto the canvas, the natural perception is that one event will get fired. But actually, this might or might not be the case. When we create a component in the backend we have to store initial props, initial callbacks, and create components. Each of these has an event associated with them, we also give an alias and that also is the cause of firing one more event. Since all these events are associated with one single action and hold a semantic meaning together, we need to know about the entire group of these events. Hence, we group the events semantically and send an array of events in response which holds the entire group of events.

A separation exists on the tree level, if we update only the CSS by some action only the CSS tree is affected and gets updated.

The entire structure of an application in the backend is stored in the form of a forest. Forest is a terminology meaning "tree of trees", as of now we have four different trees:

1. CSS tree
2. Callbacks tree
3. Custom props tree
4. Component tree.

A node in the component tree is linked to its respective nodes in CSS, callbacks, and custom props trees.
A subscribeForest function enables us to receive updates for the events if we have subscribed to that particular update. So when any particular event happens in the subscribed forest, we'll receive the updates for that.

If any user action is causing the firing of 'n' events, the subscribeForest is also called 'n' times. Whenever any event happens and we have subscribed to the forest, it emits an event indication of what has been updated along with its metadata and the name of the semantic group that the event was a part of.

Apart from the 6 types of events, we also have 6 types of updates which are listed below:-

1. wire- Adding a node to a tree, it can be in any tree.
2. dewire- When a node is removed from a tree, it can be in any tree.
3. rewire- When the node is repositioned in the tree.
4. change- Any change in the existing node of any tree.
5. link- When a node from one tree is connected to a node in another tree.
6. unlink- Opposite to the link update.

A question arises-

Q. Why do we have these update types when we already have event types?

A. On repositioning a patch event gets generated but the same patch event is generated on changing any styles property. We treat repositioning patch events in a special way and for that we have added a layer of abstraction that can tell whether the update is for
updating the data inside a node or the position of a node. Also, a patch event and a hard-patch event fire the same change update.