5 ms·
> You want to draw two disjoint circles and a line connecting their centers. I wouldn't say two circles connected by a line is very useful in UI to be honest.
by slver 5y ago
> You want to draw two disjoint circles and a line connecting their centers.
I wouldn't say two circles connected by a line is very useful in UI to be honest.
Such relationships are more commonly seen in animation software, modeling software, engineering software and games, 2D or 3D, where such relationships are explicitly expressed by scripting or specialized binding systems (like inverse kinematics). The general metaphor for such software is not a tree, not a graph either, but rather a set, upon which set operate a set of systems (like physics and AI etc.).
But all of those things sit, in my mind, distinctly apart from what UI is. And the distinction between UI and just "things on a computer" is that UI is entirely artificial and made for the purpose of conversing with the user, rather that representing or simulating existing phenomena, natural etc. So UI does NOT have to be arbitrary. But it HAS to be easy to comprehend. That is its purpose.
The only place I've seen this used in UI I can recall is Reason (audio software), where you can flip your rack of modules, and connect inputs and outputs with wires. It's quite gimmicky and becomes a mess (just like real cable management does), so I think this also informs us how well arbitrary graphs look on screen. They don't help and become unintelligible at scale.
While a clean hierarchy tends to stay clean, so it's useful in UI where we control our metaphors and optimize them for comprehensibility.
> It can even be worse if those objects are laid atop of others, and things are switching on the Z axis. You’re now breaking the structure or rather changing it constantly. The parent-child relationship often feels forced.
I'm sorry that's a bit abstract, can you provide an example again? You see, a list has a clear enumeration order, you can make the first or last item be "on top". A tree also has a clear traversal.
A graph has no clear traversal order at all, so how would a graph help you at all figuring out z-index for your UI?
If anything, having your UI as a graph would take away the common-sense approach to rendering order which allows you to NOT assign a z-index to literally every element. I've had to deal with such problems, and trust me, you don't want to have that problem. The tree is a friend.
> Or even simpler: you have two objects in different containers, but with the same margin to appear aligned. What you’re trying to express is their alignment and not their relation to their “parent” which might be very well invisible.
A visual example would help. The "parent" exists to provide a transform reference as much as anything else. So it's unclear why you wouldn't use a parent for the purpose it exists, only to eventually do the exact same thing.
- dgb23 5y agoI agree with all you’re saying. But I come across these things in a small fraction of cases where the tree is a hindrance.
- slver 5y agoWe'll always have relationships on top of (and independent of) the tree. I think we shouldn't underestimate what the tree gives us. I.e. in small fraction of cases the tree is maybe a hindrance. But if that hindrance doesn't go away but multiplies without the tree, our hindrance is likely coming from the complexity of our problem, rather than from the tree.
- slver 5y agoBy the way notice the tree keeps reoccurring in other case of interfaces: - All computer languages are code, which expresses a set of nested statements and expressions (which form a syntax tree). - While XML was replaced with JSON for data exchange, that's also a tree, not a graph (some implementations exist to describe a graph, but I'd argue that doesn't help serialization etc. concerns). There's something about a tree that makes it very suitable both for computer and human comprehension. OF COURSE, all those trees end up describing graphs. Say our "syntax tree" at runtime is an object graph and so on. But it's notable that we describe that object graph by encoding it into a tree of rules.
- dmitriid 5y ago> I wouldn't say two circles connected by a line is very useful in UI to be honest. It is when you think that you can't reliably animate or reposition anything in HTML if it causes a reflow. Most (any?) other UI toolkits give you distinct "canvas" that can be in more-or-less arbitrary relationships to each other. And if that is not enough, they let you drop down to `onPaint` and paint your own stuff. HTML+CSS force you into a rigid tree laid out on a rigid 2D-plane. Because at their core they have always been just a tool to (somewhat badly) render text and some images. All the other things we force into/onto them play very badly with this concept.
- slver 5y ago