DEV Community

loading...

Working Inspector component

Jeff Lindsay
Indie maker of many things. Helped pioneer SHDH, webhooks, Hacker Dojo, TIGSource, OpenStack, JWT, Twilio, Docker, Dokku, all incidental. Follow your curiosity
・2 min read

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.

inspector demo

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.

Discussion (0)