Working Inspector component

After working on Apple Go binding generation and porting that panel UI kit for a bit I realized I needed to get back to the main critical path of the Big Project. So I returned to the treeview and inspector UI prototype.

The Inspector was made up of several PropertySets, which are a named set of fields you can change and maps to a single object. Previously, a PropertySet would iterate over fields and place PropertyFields, which were basically a row of the inspector showing the field name and an input.

I decided to remove the PropertyField and put most of that HTML into the PropertySet. The problem is I needed to include a different input based on the type of field, like textbox for a string, checkbox for a boolean, etc. This led me down the path of figuring out how to place pre-made HTML bits that were put into a variable. JSX just lets you put a variable inline with other HTML to insert any elements in that variable. Vue uses a tag called component for dynamic components, though only components, not HTML snippets.

I started implementing the component tag in vtemplate and realized I needed to place more than just components, so I renamed it for now to node. Using a node element you can insert pre-defined components or HTML from a variable. All the other attributes on node are placed on the component or outer HTML element.

Then I threw this away. I ended up making a component for the input called PropertyInput that didn't use a template, but just used the vecty functional API to create different input elements based on the type of value it was given. I implemented basic types like strings, boolean, integers, and floats.

Before going into advanced types like references and slices, I got it to set the data on the object it came from. And it would bubble up an OnChange callback that would persist the node tree. So it's now a working inspector. It even updates the tree when you modify properties of the node like name and active.

When I come back to this I'll start working on the advanced types it needs to support. References will be fun because I want them to be settable with drag and drop, just like Unity. You'll be able to drag a node from the treeview to the inspector field to set it.