What if we do something where whenever we set size and position of a Node, that action is communicated to that Node’s parent.
A Node that receives these messages from its children can (if an option is turned on) keep track of which child Node is furthest to the left, furthest to the right, furthest up, furthest down, furthest forward, and furthest backward. Based on that info the parent Node can (if said option is enabled) automatically size itself so that it contains all of it’s children. Children send messages on size and position change. When the option is toggled on a parent, all children are notified; if the option on a parent is turned off, then children don’t send messages, otherwise they do (that’d be more performant than if children were to always send messages and let the parents decide whether or not to care).
In theory, a size change on a child node could propagate all the way up the scene graph to the root, stopping where the automatic sizing option is turned off.
The effect would be similar to this traditional DOM example: https://jsfiddle.net/vmmor3jh/
The parent DIV in that example is sized to contain its children, but there are some problems with that. For example, now let’s reposition child 2: https://jsfiddle.net/hccahk5j/1/
You’ll notice now that the parent doesn’t fully contain its children. You might try setting the children to position absolute, but that doesn’t work at all: https://jsfiddle.net/nrgr0ngk/1/
There isn’t really a way to do this with regular HTML+CSS; it requires setting the size of the parent container manually which means we need to do some calculations. Who knows, there might be a way to do this with the newer flex-box API, but I don’t care much about it because the API is needlessly complex when it doesn’t need to be. It’s tedious to use flex-box.
So, this got me thinking about how we can “do some calculations” ourselves and make it easy for the users of our library to benefit from it; so that setting a single option to true is just as easy as setting a single (non-existent) CSS property would be.
Any thoughts on the best way to do this?
.
