feat: DH-22800: Support Intersection 2D Window Resizing#2701
feat: DH-22800: Support Intersection 2D Window Resizing#2701SimonVutov wants to merge 9 commits into
Conversation
Codecov Report❌ Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #2701 +/- ##
==========================================
+ Coverage 50.49% 51.39% +0.90%
==========================================
Files 788 795 +7
Lines 44923 45574 +651
Branches 11447 11618 +171
==========================================
+ Hits 22682 23422 +740
+ Misses 22222 22133 -89
Partials 19 19
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Harness. 🚀 New features to boost your workflow:
|
There was a problem hiding this comment.
Pull request overview
Adds 2D “intersection” resize handles to Golden Layout so users can drag diagonally at row/column splitter crossings to resize both axes together (DH-22800).
Changes:
- Add
IntersectionSplittercontrol (2D drag handle) and export it fromcontrols. - Extend
RowOrColumnto create/refresh intersection handles and apply drag updates for both the parent splitter and a perpendicular child splitter. - Add styling + Jest coverage for intersection handle creation and drag behavior.
Reviewed changes
Copilot reviewed 6 out of 6 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/golden-layout/src/items/RowOrColumn.ts | Creates/positions intersection handles and wires diagonal drag to existing 1D splitter logic. |
| packages/golden-layout/src/controls/IntersectionSplitter.ts | New 2D splitter control backed by DragListener. |
| packages/golden-layout/src/controls/index.ts | Re-exports IntersectionSplitter. |
| packages/golden-layout/src/tests/intersection-drag.test.ts | Adds tests covering diagonal drag + handle persistence across refreshes/drags. |
| packages/golden-layout/scss/goldenlayout-dark-theme.scss | Dark theme styling for intersection handle visibility/hover/drag states. |
| packages/golden-layout/scss/goldenlayout-base.scss | Base styling + cursor override while intersection-dragging. |
Replaced the one-level-deep loop with a small recursive walk
SimonVutov
force-pushed
the
DH-22800-Support-Intersection-2D-Window-Resizing
branch
from
b54162a to
5cb5501
Compare
dsmmcken
left a comment
dsmmcken
left a comment
There was a problem hiding this comment.
2d drag, over another splitter triggers it and it gets stuck hovered;
I wonder if we could detect 4-way corners, with a bit of fuzziness (like if the 4th corner is +/- 5px or 10px or whatever), and make them a 4-way drag (that leaves it snapped perfectly aligned on drop)?
Didn't review JS, will leave to someone else to review that.
| .lm_intersection_dragging, | ||
| .lm_intersection_dragging * { | ||
| cursor: move !important; | ||
| } |
There was a problem hiding this comment.
Doesn't actually do anything, pointer-events none means cursor wont trigger, and the pointer-events none is needed to prevent interaction with other elements while dragging.
| z-index: 59; | ||
| } | ||
| } | ||
|
|
||
| // Intersection splitter: an invisible grab area at grid crossing points that | ||
| // enables simultaneous (2D) resizing of rows and columns. The visible drag | ||
| // affordance is the two perpendicular splitter lines themselves, which are | ||
| // highlighted (via .lm_dragging) on hover and while dragging. | ||
| .lm_intersection_splitter { | ||
| position: absolute; | ||
| z-index: 60; |
There was a problem hiding this comment.
these z-indexes look sus.
| // Intersection splitter (2D grid resize). The grab area is invisible; the drag | ||
| // affordance is the two perpendicular splitter lines, which reuse the standard | ||
| // .lm_splitter.lm_dragging highlight above. | ||
| .lm_intersection_splitter { | ||
| background: transparent; | ||
| } |
There was a problem hiding this comment.
Does nothing, transparent by default.
mofojed
left a comment
mofojed
left a comment
There was a problem hiding this comment.
Need to make sure the JSDocs on these functions include all parameters and are up to date. Should also add a couple e2e tests
There's still some odd behaviours in some scenarios.
-
When dragging from a 1D splitter and then dragging over a intersection point, it changes lights up the whole cross for a moment and then all the highlights disappear as you drag away; however when you drop the change still occurs
https://github.com/user-attachments/assets/f65b9284-077c-4b10-97d0-c845c4d3cd0a -
When dragging a column in the grid, then dragging over an intersection point, the cursor changes and the splitters highlight unnecessarily. (I would have thought this wouldn't be possible because I thought the grid turns off pointer events for the document when a column drag is occurring).
https://github.com/user-attachments/assets/f0397b7f-412d-44c8-b757-b037131e7e7b
I like the feature though, great work overall.
| item: AbstractContentItem | undefined, | ||
| nearEdge: boolean, | ||
| path: string, | ||
| out: { |
There was a problem hiding this comment.
I don't like using an out parameter like this. Why not just return an array of the splitters?
| * crossing handle can be created for it. Lines can be nested arbitrarily deep, | ||
| * so descend until the edge is no longer shared. | ||
| * | ||
| * @param nearEdge true when the bar sits at the start of `item` along the bar |
| return ( | ||
| $(document.body).hasClass('lm_dragging') || | ||
| $(document.body).hasClass('lm_intersection_dragging') || | ||
| document.documentElement.classList.contains('grid-block-events') |
There was a problem hiding this comment.
golden-layout should not depend on grid, or any grid specific class.
I don't think this is actually needed for anything? Just remove this grid-block-events check.
Changes
Validation
packages/golden-layout/src/__tests__/intersection-drag.test.tsDemo (23s mov video):
2026-06-24.10-35-43.mov
Other Information
The splitter lines are width 10px, and this intersection handle is a square of side length 14px.
this._hitAreaSize = Math.max(this._grabSize, 14);Each crossing gets an invisible square handle element and it is centered exactly on the crossing point: It uses
_getIntersectionPositionto get the intersection position and places the handle centered there with slightly higher z index than splitter lines so that it has priority over them.