You will likely want to add something under control.ts file. But I will leave it to your creativity for the interface and function names.
When you’re ready for you PR we’ll do a full review and give feedback/suggestions if need. No worries. Then you get a cool contributor badge on the forums!
Hello!
I’ve created a preview of the proposed changes in the PG. There is a new class extending Control at line 108. Actually the changes will be implemented directly into the Control class, I’ve created that one so I can add the methods in the PG. You can set an overlapGroup value for a control. All controls in the a group will be deoverlapped I’m not sure of the name here so please feel free to correct me So you can have two overlapping group each of groups deoverlapped. Does this makes sense? I am sure, you get the point. If you set the overlapGroup to undefined or null, the observer will be removed and the control will not be deovlerapped anymore. I am not sure whether BJS supports non-rectangle based controls but for the record this one supports only rectangle based.
Ooops, forgot to mention one thing I am not sure of. Whats the best approach to get the high level control in the gui? I am now just doing a this.parent.
I assume that only a linked control will use the deoverlapping stuff and linked controls must be at the top level, so this.parent should always return the top level control, so I can get safelly all the children. Maybe we should not allow to set the overlapGroup for a non linked control?
I will go with control.host(). This is a better approach then relying on the actual fact that a linked control must be added to the top level container. This rule could change.
Hello @msDestiny14!
I think a better place for the deoverlap method will be the AdvancedDynamicTexture class. It is the container which should constrain and control the layout not the control itself. I am thinking just exposing a public function (line 136) on the ADT and let the user to call it whenever he needs to move the controls away so I would not add an observer to the ADT and call the deoverlap method on every frame automatically. The user can call the method with a overlapGroup specified or leave it undefined to process all groups. The second parameter allows the user to set the speed of the movement at every frame. Freedom!
Hello @msDestiny14!
Unfortunatelly after using this method in a real life app I have discovered that after some crazy rotations of the camera I can end up with very messed positions like:
starting organized:
ending in chaos
I have a solution in mind (EDIT: not working in real scenarios so not implemented):
I need to preserve the original linkOffsetXY values and I’ll introduce a private property called linkOffsetOffset: Vector2 (any better name in mind?) which will offset the offset set by the user and I will only calculate this value and not override the original linkOffsetXY values.
The controls will primarily try to reach the original linkOffsetXY if not in overlap.
And as an addition I will add deoverlapSpeed to the control. Controls with a lower speed value will move slower or never if set to zero.
R.
Awesome! So glad to have a new contributor to Babylon.js This feature is a fantastic addition to the GUI system, I’ll definitely use it when it’s merged in!