I want to add logical components to UI elements like it does with nodes, so I can control their behavior flexibly.
For example, I want to add various logical components to Button.
One way is using multi-inherit from both Node and Button, but I haven’t tested it;
Another way is creating corresponding nodes for each UI element, then add logical components to the corresponding nodes, it works, but I have to synchronize their status manually.
I don’t know if it exists better way to achieve this.
Since the UI hierarchy is not a component hierarchy, not directly. However you can abuse the system a bit. Inherit UIElement, which by itself doesn’t draw anything. Add it as a child of the element you wish to affect, and code the logic so that it affects its parent.
If you’re using a layout, an additional child element can mess it up, however try setting fixed 0,0 size for the logic child.
In this case you can’t use scene update event for per-frame update, or LogicComponent convenience virtual functions Update() or FixedUpdate(), so you just have to subscribe to the application-wide update event. This is actually proper since the UI is a global subsystem.