Week 9 - Working tree editor
Summary
Last week, I started the new REACT frontend. Currently, It doesn’t have all the file creation options as the basic HTML/JS one, and the tree editor doesn’t work. This week, I implemented basic tree editor functionality.
Development
Problems with ProjectStorm library
I created custom diagram nodes to accurately represent the nuances of behavior trees. ProjectStorm offers two options for linking blocks:
- Fixed links at creation time
- Port connections
Since users will be adding new nodes interactively, the first option is not feasible. Additionally, in the context of Behavior Trees, the term “ports” is reserved for the information flows associated with a given node.
For these reasons, I developed custom nodes with a specialized connection port. This port is rendered in a more appropriate manner, allowing for dynamic connection creation. The standard nodes’ ports will be reserved for information flows.
Node header
I added a header featuring dropdown menus that include the basic BT blocks such as Sequences, Decorators, and Fallbacks. For the time being, user actions cannot be added.
Bugs
I discovered a critical bug:
- When the user resizes the tree editor or interacts with the file editor, all the blocks are deleted. This appears to be due to unexpected interactions between the separator node and the diagram. I am still working on resolving this issue.
Improvements
I improved the behavior of the file browser and the tree editor.
I migrated the project to the yarn project manager for easier development.