WIP: UI: TreeView Item Drag Padding #111032

Harley Acheson · 2023-08-11T04:24:24+02:00

Harley Acheson commented

2023-08-11 04:24:24 +02:00

Eliminates the "no drop" zones between TreeView list items

Marked as WIP because this might not be the solution, but just an identification of the problem. When dragging TreeView items we get a bad result between the items: the mouse cursor changes to a "stopsign" and the tooltip hint is removed.

In a nutshell the space between the items returns false for the ui_view_drop_poll. This is because ui_handle_viewlist_items_hover calls ui_list_row_find_mouse_over which calls ui_but_find_mouse_over_ex, which uses the button's bounds for the hit calculation.

This fixes that by adding a specific test for UI_BTYPE_LISTROW & UI_BTYPE_VIEW_ITEM which adds padding. This allows it to pass the ui_view_drop_poll and we no longer get the stopsign cursor. However the tooltip then says "View Drop" between the items, which is fixed by also adding padding in AbstractTreeViewItem::get_win_rect.

Note that I have not actually found the define for the item gap size, and am just guessing with 2.0f * U.pixelsize.

Eliminates the "no drop" zones between TreeView list items --- Marked as WIP because this might not be the solution, but just an identification of the problem. When dragging TreeView items we get a bad result between the items: the mouse cursor changes to a "stopsign" and the tooltip hint is removed. In a nutshell the space between the items returns false for the ui_view_drop_poll. This is because ui_handle_viewlist_items_hover calls ui_list_row_find_mouse_over which calls ui_but_find_mouse_over_ex, which uses the button's bounds for the hit calculation. This fixes that by adding a specific test for UI_BTYPE_LISTROW & UI_BTYPE_VIEW_ITEM which adds padding. This allows it to pass the ui_view_drop_poll and we no longer get the stopsign cursor. However the tooltip then says "View Drop" between the items, which is fixed by also adding padding in AbstractTreeViewItem::get_win_rect. Note that I have not actually found the define for the item gap size, and am just guessing with `2.0f * U.pixelsize`. ![ConsoleSelect.gif](/attachments/d0e39aa1-b158-4ed4-b0b3-1e368ecad08a)

TreeViewDrag.gif

129 KiB

Harley Acheson added 1 commit 2023-08-11 04:24:36 +02:00

WIP: TreeView Item Drag Padding 7f971dad86

Eliminates the "no drop" zones between TreeView list items

Harley Acheson changed title from ~~WIP: TreeView Item Drag Padding~~ to WIP: UI: TreeView Item Drag Padding

2023-08-11 04:24:48 +02:00

Harley Acheson added this to the User Interface project 2023-08-11 04:24:57 +02:00

Harley Acheson requested review from Julian Eisel 2023-08-11 04:25:08 +02:00

luckyrobster commented

2023-08-11 04:35:45 +02:00

First-time contributor

That's what I was thinking to make a Right-Click select request to have an "indicator" when it comes to drag-and-drop the layer in-between to avoid the ordering confusion. Something like you can do in Inkscape for example.

GPv3_LayerPanel_Ordering.gif

100 KiB

Julian Eisel commented

2023-08-11 15:39:21 +02:00

(Think the gap size comes from uiStyle.buttonspacey.)

Adding padding takes away space from the view drop area. Views can also have a drop-target (not just view items) so dropping in empty space of the view also works (the light linking UI uses this, and will use view item drop-targets in future too).

Did you look into what I proposed, increasing the row height slightly and using a layout with alignment enabled? That would properly increase the item size without post-processing rectangles locally in a way that can cause discrepancies/conflicts with other UI handling code.

(Think the gap size comes from `uiStyle.buttonspacey`.) Adding padding takes away space from the view drop area. Views can also have a drop-target (not just view items) so dropping in empty space of the view also works (the light linking UI uses this, and will use view item drop-targets in future too). Did you look into what I proposed, increasing the row height slightly and using a layout with alignment enabled? That would properly increase the item size without post-processing rectangles locally in a way that can cause discrepancies/conflicts with other UI handling code.

Harley Acheson added 1 commit 2023-08-11 18:09:50 +02:00

Simplification 9d585685a8

Harley Acheson commented

2023-08-11 18:17:20 +02:00

@JulianEisel - Did you look into what I proposed, increasing the row height slightly and using a layout with alignment enabled?

I can confirm that the dragging operation looks great with just the following change...

diff --git a/source/blender/editors/interface/views/tree_view.cc b/source/blender/editors/interface/views/tree_view.cc
index 28218961b38..80b47961e3e 100644
--- a/source/blender/editors/interface/views/tree_view.cc
+++ b/source/blender/editors/interface/views/tree_view.cc
@@ -579,7 +579,7 @@ void TreeViewLayoutBuilder::build_from_tree(const AbstractTreeView &tree_view)
   uiLayout &parent_layout = current_layout();
 
   uiLayout *box = uiLayoutBox(&parent_layout);
-  uiLayoutColumn(box, false);
+  uiLayoutColumn(box, true);
 
   tree_view.foreach_item([this](AbstractTreeViewItem &item) { build_row(item); },
                          AbstractTreeView::IterOptions::SkipCollapsed |

However, I (have so far) not found a way to also have the wider line spacing that you prefer. We end up with a tighter spacing of the rows:

> @JulianEisel - Did you look into what I proposed, increasing the row height slightly and using a layout with alignment enabled? I can confirm that the dragging operation looks great with just the following change... ``` diff --git a/source/blender/editors/interface/views/tree_view.cc b/source/blender/editors/interface/views/tree_view.cc index 28218961b38..80b47961e3e 100644 --- a/source/blender/editors/interface/views/tree_view.cc +++ b/source/blender/editors/interface/views/tree_view.cc @@ -579,7 +579,7 @@ void TreeViewLayoutBuilder::build_from_tree(const AbstractTreeView &tree_view) uiLayout &parent_layout = current_layout(); uiLayout *box = uiLayoutBox(&parent_layout); - uiLayoutColumn(box, false); + uiLayoutColumn(box, true); tree_view.foreach_item([this](AbstractTreeViewItem &item) { build_row(item); }, AbstractTreeView::IterOptions::SkipCollapsed | ``` However, I (have so far) not found a way to also have the wider line spacing that you prefer. We end up with a tighter spacing of the rows: ![ListHeight.gif](/attachments/7f81506d-40ff-4c75-9a02-fb51a600ea0e)

ListHeight.gif

190 KiB

Julian Eisel commented

2023-09-22 17:43:18 +02:00

Committed 427bdc8dcf. This makes sure there won't be discrepancies between the rectangle used by the tree view (e.g. for dropping, but also possibly other things) and the one used for handling etc. It removes the gap (by enabling alignment in the layout), scales up the view item to avoid a crammed look, but scales down the highlights to use the regular widget height.

Committed 427bdc8dcf. This makes sure there won't be discrepancies between the rectangle used by the tree view (e.g. for dropping, but also possibly other things) and the one used for handling etc. It removes the gap (by enabling alignment in the layout), scales up the view item to avoid a crammed look, but scales down the highlights to use the regular widget height.

Harley Acheson commented

2023-09-25 20:21:52 +02:00

This is not needed with 427bdc8dcf

This is not needed with 427bdc8dcf

Harley Acheson closed this pull request

2023-09-25 20:21:54 +02:00

Pull request closed

Please reopen this pull request to perform a merge.

Sign in to join this conversation.

No reviewers

No Label

Download

What's New

Blender Studio

Manual

Developers Blog

Documentation

Benchmark

Blender Conference

Development Fund

One-time Donations

WIP: UI: TreeView Item Drag Padding #111032

Pull request closed