Feature: (Mostly) AI-Attempt on Issue #798 Support resizable Groups

[emilkrebs]

Disclaimer:
This PR has been mostly written by Claude Sonnet 4.6 and Opus 4.6 4.8 since I do not have a clear overview over the codebase. Human critical thinking skills still apply :)

It works pretty well I think and I desperately want this feature in Eclipse Theia for a more modern IDE expierence.
I will take some time to review the PR myself but since I am not an expert here feel free to drop your opinion on this :)

Thanks a lot!

Fixes:

#798

[krassowski]

On https://lumino--799.org.readthedocs.build/en/799/examples/dockpanel/index.html preview it looks like it can work, but it's really hard do know when it will because the cursor does not change to 4-way arrow when on hover.

IMO there ought to be a handle in DOM or some specific pixel size of a corner that you can grab otherwise it will be unintuitive and hard to use.

[emilkrebs]

On https://lumino--799.org.readthedocs.build/en/799/examples/dockpanel/index.html preview it looks like it can work, but it's really hard do know when it will because the cursor does not change to 4-way arrow when on hover.

IMO there ought to be a handle in DOM or some specific pixel size of a corner that you can grab otherwise it will be unintuitive and hard to use.

Thanks for testing! I agree, makes a lot more sense to increase the area and indicate before dragging. Currently its a bit annoying to use and doesn't have this "clean" feeling like in vscode. I will try to find a better approach!

[emilkrebs]

Updates:

• cursor upated to move on drag & hover
• added functionality to style specifaclly on intersection-hover

Example from the image in dockpanel.css

.lm-DockPanel-handle.lm-mod-intersection {
  cursor: move;
  background-color: red;
}

[krassowski]

I tested it and it works well. I skimmed the code and it looks clean, though I did not read deep into it. It looks like some tests will need updating, e.g.:

❌ @lumino/widgets > SplitPanel > #handleEvent() > keydown > should release the mouse if Escape is pressed
AssertionError: expected [ 'pointerdown', 'keydown', …(1) ] to not include 'pointermove'

[krassowski]

It looks great on the example preview. I am somewhat worried about potential performance impact here, see my comment. I am not saying that we have to move the listener to handles, but I would suggest trying that and if that is not feasible considering if some of the hit tests can be cached.

[krassowski]

I am somewhat worried about performance impact of constantly listening to pointermove on the entire widget. Can we instead only add listeners on the layout handles objects?

[emilkrebs]

It looks great on the example preview. I am somewhat worried about potential performance impact here, see my comment. I am not saying that we have to move the listener to handles, but I would suggest trying that and if that is not feasible considering if some of the hit tests can be cached.

Good point! I have actually tested the performance using the chrome devtools snd noticed no significant increase in the before and after. However its definitely a good suggestion since I noticed a significant performance drop in both instances when resizing panels, might make sense to think about that in the future 🤔