Alternative experimental method of linking GUI controls for CAD-like UX

[qwiglydee]

Hi.

The Babylonjs 2dGUI is awesome, but it has limitations (and bugs sometimes).
So, I’ve implemented new way of linking controls positions to meshes and other controls.
Apparently it is not as efficient as built-in implementation, yet it allows more complicated setups, such as linking a control to 2 or more other controls or meshes in any combination.

In the picture:

• dot controls linked with meshes with an offset
• bridge line connecting the dots
• callout lines connecting meshes with the dots
• another bridge line connecting two meshes
• labels on these lines

The bride lines are drawn from edges to center, so that 0-stop of color gradient is at the edges.
The callout lines are drawn from one edge to another so that 0-stop of gradient is at the 1st edge.

https://playground.babylonjs.com/#0EZBHT#12

[qwiglydee]

@amoebachant, check that out.

The implementation eliminates the very reasons of the issues we discussed recently:

• moving to projected position doesn’t depend on measures
• centering is performed in computeAlignment (where it conceptually belongs)
• the alignment only calculated in layout phase
• triggering dirtyness also happens only in the layout phase
• dirtyness of position is checked by value (although it’s still triggered every frame)

However, each link is handled separately and that brings some overhead.

[Basic]

@qwiglydee Looks nice, reminds me of SketchUp (Someone should totally make a open-source project based on BabylonJS similar to SketchUp )

Seems like the gradient fading should be tweaked when you are zoomed in.

[qwiglydee]

I’m actually going to work on sketchup-ish custom solutions with consumer-level UX as my upcoming freelance services.
But I’ll share some snippets open-source, here and on github.

[qwiglydee]

Indeed, it makes more sence to define gradient at the edges.

I’ve just reversed drawing direction, looks much nicer.