[WIP] Tab Bar Reordering Behavior and Bug Fixes

[lilingxi01]

Description

This PR is still a WIP.

• [x] Add basic drag-and-drop reordering behavior (with full animation) to tab bar.
• [x] Fix tab bar item holding state (when pressing/dragging on the tab bar item, it should hide its dividers).
• [x] Add some documentations to clarify the properties of tab bar.
• [x] Add some documentations to clarify the properties of tab bar item.
• [x] Optimize the reordering algorithm to deliver a better UX.
• [x] Support basic onDrag and onDrop as well (once the vertical displacement is exceeding the threshold).
• [ ] Add a specific type for onDrag on tab bar item.
• [ ] Issue: Support onDrag dropping outside the tab bar.

Related Issues

• #256
• #572

Checklist

• [x] I read and understood the contributing guide as well as the code of conduct
• [x] My changes generate no new warnings
• [x] My code builds and runs on my machine
• [x] I documented my code
• [ ] Review requested

Screenshots

WIP. Check comments for the newest stage.

[lilingxi01]

Current stage of tab bar reordering behavior (with onDrag now):

(It will be the same under all color schemes and all styles)

https://user-images.githubusercontent.com/36816148/168942464-6406b410-8697-4310-b09b-571d8538e002.mp4

There are some additional issues like dropping the tab bar item outside of tab bar. I will merge this PR only when these issues are all resolved.

[austincondiff]

Very nice @lilingxi01! What will happen when the tab is dropped outside the tab bar? When we work on split layouts, I'd imagine that would be useful.

[lilingxi01]

@austincondiff : Yes, that is what I am dealing with right now.

When I dropped a tab item outside, it will not be tracked anymore. The original tab bar cannot get any dropping information related to an outside drop, therefore it cannot perform a reset if this is an invalid drop. (I kinda have a solution for that, implementing it in progress.)

And for now, I am having some trouble on the onDrag and onDrop APIs as they are using uniform types (typically text, images, or files). With uniform types, the tab information will become a readable content for all applications (as a text, image, or a file), which will lead to a weird behavior that user can drop a tab into another application as a text. This problem is related to #639.

I am trying to find a solution, e.g. creating a custom uniform type associating with our tab system so it can (ideally) be dropped to anywhere (yet not into another application), but it is challenging to me (lack of documentation and guidance) and I am still trying.

[austincondiff]

Thanks for the update. That sounds pretty tricky. I suppose if a tab is dropped anywhere else aside from another layout pane or tab group, it can open a new single-file window (as if you opened the file by itself and not the project).

[lukepistrol]

Any updates on this?

[lilingxi01]

@lukepistrol : For the problem I stated in this comment –– No.

But I will resolve conflicts, fix minor bugs, and then leave remaining part to a future PR. Before that, I will temporarily disable the ability of dragging a tab out.

[austincondiff]

@lilingxi01 can you get this PR is a mergable state so someone else can resume this effort?

[lilingxi01]

@austincondiff I will finish it by the end of August.

[lukepistrol]

Any updates on this? @lilingxi01

[austincondiff]

@lukepistrol, @lilingxi01 messaged me the other day and said he still plans on finishing this. Is this still true?

[lilingxi01]

Known backlogs:

• No dragging-out behavior (as we cannot fully handling all events for now).
• No side-dragging constrain (on Xcode, tab cannot be horizontally dragged over the tab bar area, but on CodeEdit, it is allowed for now).

[austincondiff]

Thank you @lilingxi01!