create a custom Tree-style Control #16

New Issue

yagich · 2022-08-24T06:37:44Z

yagich commented

2022-08-24 06:37:44 +00:00

the Tree node in Godot is less than ideal for a UI app that has to be interacted with by users, and is clunky to work with from code. i propose a custom implementation, with a reasonable amount of modularity.
features that are a must have:

items with label that can optionally be set to be changeable
items can have an amount of buttons on the left or right of the label
1. buttons can be checkboxes or regular buttons
items can be reordered
items can have metadata (can be facilitated with the built-in Object metadata property)
items can be added and removed by functions accessed on the tree
items should be right-clickable:
1. each tree item can have a list of options when right clicked
2. the tree node itself can have "global" right click menu items, which if defined, will show up before item-specific ones

ideas for functionality, and if this is needed at all, are welcome.

the Tree node in Godot is less than ideal for a UI app that has to be interacted with by users, and is clunky to work with from code. i propose a custom implementation, with a reasonable amount of modularity. features that are a must have: 1. items with label that can optionally be set to be changeable 1. items can have an amount of buttons on the left or right of the label 1. buttons can be checkboxes or regular buttons 1. items can be reordered 1. items can have metadata (can be facilitated with the built-in `Object` metadata property) 1. items can be added and removed by functions accessed on the tree 1. items should be right-clickable: 1. each tree item can have a list of options when right clicked 1. the tree node itself can have "global" right click menu items, which if defined, will show up before item-specific ones ideas for functionality, and if this is needed at all, are welcome.

yagich added the

enhancement

question

labels 2022-08-24 06:37:44 +00:00

yagich commented

2022-08-24 08:22:33 +00:00

the biggest hurdle when making this, i think, will be how to handle hovering and selecting items, since items would have to either:

extend Button with toggle_mode set to on (which would let the user deselect an item, which i'm not sure is desired behavior) and add label/icons/etc to it as a child, letting Godot provide the necessary hints for focus/hover etc, optionally be in a ButtonGroup to only allow selecting one item at a time, or
extend something like PanelContainer and rely on Control's signals and GUI event functions to do focusing and highlighting.

i'm still not sure which approach is best, thoughts?

the biggest hurdle when making this, i think, will be how to handle hovering and selecting items, since items would have to either: - extend `Button` with `toggle_mode` set to on (which would let the user deselect an item, which i'm not sure is desired behavior) and add label/icons/etc to it as a child, letting Godot provide the necessary hints for focus/hover etc, optionally be in a `ButtonGroup` to only allow selecting one item at a time, or - extend something like `PanelContainer` and rely on `Control`'s signals and GUI event functions to do focusing and highlighting. i'm still not sure which approach is best, thoughts?

xananax commented

2022-08-24 21:29:33 +00:00

I'm not sure I understand the problem, but if I do, how about:

A: DragHandle: just a panel
B: OptionButton: checkbox + text (checkbox doesn't need to look like a checkbox, a button with toggle is fine)
C: additional buttons

Selecting or deselecting a top item selects all children recursively.

I think maybe a mockup of what you envision would help determine a proper technical structure

I'm not sure I understand the problem, but if I do, how about: ![image](/attachments/daac63ae-a01d-4bf3-8860-efb23493d76c) - **A**: DragHandle: just a panel - **B**: OptionButton: checkbox + text (checkbox doesn't need to look like a checkbox, a button with toggle is fine) - **C**: additional buttons Selecting or deselecting a top item selects all children recursively. I think maybe a mockup of what you envision would help determine a proper technical structure

image.png

304 KiB

yagich commented

2022-08-25 07:07:36 +00:00

this is the current mockup i have made with godot:

the first two items are just HBoxContainers, which provides no obvious way to "select" them. the rest of the items are toggleable Buttons that have an HBoxContainer as a child. this lets us easily determine what item is currently being edited.

your mockup seems easier to implement than what i imagined 😄 so i think i will base the design on that. thinking about it more, it makes a lot of sense for the base node of the items to be a button.

another concern i have is how to handle sub-items. i guess if we have a MarginContainer of some size for one "space", that could work? if so the node structure would be something like:

Tree (PanelContainer)
└── ItemsList (VBoxContainer)
    └── ItemContainer (HBoxContainer)
        ├── Spacer (MarginContainer)
        └── ItemContent (Button)
            └── HBoxContainer
                ├── DragHandle (Panel)
                ├── Text (Label/CheckBox)
                └── etc...

this is the current mockup i have made with godot: ![image](/attachments/7ff5ab61-f697-44d7-a5fe-ac91d47e5caf) the first two items are just HBoxContainers, which provides no obvious way to "select" them. the rest of the items are toggleable Buttons that have an HBoxContainer as a child. this lets us easily determine what item is currently being edited. your mockup seems easier to implement than what i imagined 😄 so i think i will base the design on that. thinking about it more, it makes a lot of sense for the base node of the items to be a button. another concern i have is how to handle sub-items. i guess if we have a MarginContainer of some size for one "space", that could work? if so the node structure would be something like: ``` Tree (PanelContainer) └── ItemsList (VBoxContainer) └── ItemContainer (HBoxContainer) ├── Spacer (MarginContainer) └── ItemContent (Button) └── HBoxContainer ├── DragHandle (Panel) ├── Text (Label/CheckBox) └── etc... ```

image.png

36 KiB

Sign in to join this conversation.