gilzoide/godot-dockable-container

Dockable/tiling UI panels Container addon for Godot

Dockable Container

Warning

This branch is only usable with Godot 4.X. For Godot 3.X support, check out the godot-3 branch.

Docking/tiling UI panels Container addon for Godot.

It is composed of a Container script and layout Resources in a binary tree structure that store panels division direction and size as well as tab names and what tab index is currently selected. As layout information are Resources, it's easy to save/load them.

Child Controls are only moved visually and have their NodePaths and position in parent maintained.

Available at the Asset Library.

Live preview a sample scene here.

Plugin

Enable Dockable Container plugin at Project -> Project Settings -> Plugin to edit the layout directly in the inspector! It also registers the DockableContainer node type.

Theming

Panels are actual TabContainer instances, split handles use VSplitContainer and HSplitContainer theme configurations, drop preview uses TooltipPanel/panel StyleBox. Tabs alignment and rearrange group are exported in DockableContainer.

TODO

• Add way to specify icon and custom name for tabs, based on a property or method on children
• Document better how to use

Credits

Node icon made by Nif-kun. Licensed under CC0.

godot-dockable-container's Issues

Support for Docking into Separate Containers

Is there a possibility of adding or an existing functionality for moving into a different DockableContainer. Similar to how the Godot editor does it?

Dockable container is blocking mouse input to area nodes in a child viewport

I'm using this plugin for some of my UI layout, and some of my panels have 3D viewports in them. In the 3D scene, I have Area nodes that have mouse_entered and mouse_exited signals on them. When I nest these viewports in a DockableContainer, the areas do not trigger the signal, even when the DockableContainer mouse filter is set to "Ignore". My hunch is that this is because the dockable container uses some tab and split containers, and when the dockable containers mouse ignore setting is changed, it is not propagating to the sub-containers.

Steps to reproduce:

1. Create a viewport container, with a viewport. In the viewport you need a 3D scene, with Areas and Colliders.
2. Nest the viewport container in something like a margin container.
3. Set margin container and viewport container mouse filters to "Ignore"
4. Set the viewport "object picking" to on.
5. Connect the mouse_entered and mouse_exited signals from the Area to a script in the Margin Container.
6. Preview the scene, hovering the mouse over the collider will trigger whatever you put in the connected function...
7. Create a new margin container with dockable container child, put this at the top of the scene tree. Nest the original margin container with viewport onto the dockable container node.
8. Set the new margin container and dockable container mouse filter mode to "ignore"
9. Preview the scene. The signals will no longer trigger when mouse hovers over the area.

Multiple dockable containers

Can you add support for multiple containers ?
This will be useful for creating layouts where some parts are dockable and can be moved around and some parts are static. Ability to move panels from one container to another will be great!

Child Reposition Issue

Issue

Conditions to occur

1. Place three (3) nodes of control type inside DockerContainer.
2. Follow the layout (make sure the node on the bottom-right side is at the very edge):
   
3. Bottom-right node must have a minimum width, I've set mine to 275.
4. Turn off Tab Visible of DockerContainer.
5. Change the theme and replace the TabContainer panel style to either StyleBoxEmpty, StyleBoxFlat, or StyleBoxTexture.
6. Run and try to resize the window.

Note

• If the bottom-right node does not have a minimum size, the issue does not occur.
• If the bottom-right node's layout has the exact(?) or larger size than it's minimum size, the issue does not occur.
• If the Tab Visible is turned on, the issue does not occur; Regardless of minimum size, layout, or TabContainer panel style.
• If the TabContainer panel style is a StyleBoxLine, the issue does not occur. However, it will occur if the StyleBoxLine's thickness is below one(1). This is my current solution to the problem.
• Resizing the window vertically fixes the reposition issue.

Dragging item in a Tree control that is nested in a dockable container tab causes dockable container to initaite it's own drag and drop.

I'm really putting your plugin to the test :)

I believe the culprit is on line 55:

	elif what == NOTIFICATION_DRAG_BEGIN:
		_drag_n_drop_panel.visible = true
		set_process_input(true)

When I drag an item in my tree view, I get this:

Thanks again for the great tool.

Error occurs when exiting the scene

Take the TestScene.tscn in samples folder for example, run the scene in godot and everything works fine, but after click the close button, Godot console prints below message:

Thanks for any help.

Container resizing Issues

Resizing containers in a column or row is not intuitive/straightforward.

2022-07-30.22-54-40.mp4

As you can see from this, trying to resize one container leads to size change in some other container.
This is probably because of the tree-type nature of organizing containers. Can this be changed so that other containers are not affected when resizing ?

Move to new Window

Could you add the function that you can move the containers to new windows with the size that the container had before (and back again)?

Multible Windows come in Godot 4.0 or 4.1.

"Dockable Container Layout" resource type is available in all "new resource" dropdown menus

Fantastic plugin! Not urgent bug at all.

Now that I've added dockable containers to my project, every single menu where I can select a resource, "dockable container layouts" appears as one of the options, even when it would clearly break the object.

Here it is as an option for MeshInstance:

I don't think this needs a workaround or anything, it just looks like it may be a simple fix, so I brought it to your attention.
Thank you for the great tool!