Prototyped tree view and property inspector UI
Jeff Lindsay Oct 10
I did a poll on Twitter to see what project on my backlog to take on yesterday. Surprisingly almost nobody was interested in a Go to Objective-C bridge. I guess I'm the only one with plans for what I can do with that. Most popular was working on my Go WASM web framework project, but at the last minute that was beat out by "Prototype UI for new project".
The goal was to recreate this aspect of Unity where you have a project tree with arbitrary nodes that you can make. Those nodes then have behaviors or components attached to them, which you can interact with via an inspector view. This can be customized to not only provide a way to edit data associated with a component, but visualize and interact. And of course these components might reference other objects, which you can drag and drop into place.
The key components here are a tree view and a property editor. Luckily there are some alright jQuery libraries for each of these. So I started throwing them together. I used jsTree and jqPropertyGrid to make this.
It's fun to not worry about architecture and just throw messy code together like the good old days. In about 2.5 hours I had this app where you have an empty tree you can create nodes for. You can arrange and nest nodes with drag and drop. You can click a node and see properties on it. Editing those properties persist between selecting nodes, as well as between page reloads. And then there is a rough concept of components you can add to a node to add more properties.
It's kind of a fun data management toy. It also is a great start. I will not require many more features before I can start defining a view data model that can eventually come from a backend. Eventually I can recreate this frontend in Go out of components.