[Feature] Enhance PaneGrid to split panes by drag & drop

[jhff]

Summary

Previously, dropping a pane onto another would just swap them. This leads users of PaneGrid needing to manually create splits first and then swap panes (and most probably closing unnecessary ones) in order to change the layout of the grid.

This change adds functionality to PaneGrid in order to be able to split a pane with another by simply dragging and dropping the pane in a certain region of the target pane.

Implementation

Introduced Region parameter to pane_grid::DragEvent::Dropped that is the target pane area (top, left, bottom, right, center) where the dragged pane is hovering on. Panes were divided in thirds. Left and right sides have priority over top and bottom.

Users of PaneGrid can call pane_grid::State::split_with(target, pane, region) in order to split the target with a given pane on a given region of the target.

The Region of the hovered target dropping area is highlighted with a given style in order for users to easily see how the panes will be displayed.

Demo

pane_grid.mov

[tarkah]

This is great! Love the simple implementation.

Stretch goal or follow-up: It'd be super cool if we could also drop on the "splits" between nodes to place the source pane between the two target nodes on either side of the split. I think that'd round out this pane grid implementation very nicely!

Open question for behavior when dropping on a split: How do the nodes get resized to "distribute" across the one source and 2 target nodes? I'd assume they keep the same ratio of their current width / total width of all 3 nodes * available width.

[jhff]

This is great! Love the simple implementation.

Thanks! 🙌

Stretch goal or follow-up: It'd be super cool if we could also drop on the "splits" between nodes to place the source pane between the two target nodes on either side of the split. I think that'd round out this pane grid implementation very nicely!

Open question for behavior when dropping on a split: How do the nodes get resized to "distribute" across the one source and 2 target nodes? I'd assume they keep the same ratio of their current width / total width of all 3 nodes * available width.

That's interesting. I've tried to find some good examples that implement something like that, so I could have a better understanding on how that would "feel", but didn't find any. Usually apps just allow the user to place a pane either on the left side of a pane (if on the right side of the split) or vice-versa. Check out VS Code or https://golden-layout.com/ for example. This way also avoids having to figure out how to handle the ratio of their width/height and leave that entirely to the user.

Do you know any example that does that?

[tarkah]

Do you know any example that does that?

I do not. I just had the thought when watching your video. In the 2x2 grid, it seemed like it'd be nice to drag to the top right pane over the bottom middle split and end up with 3 evenly distributed panes on the bottom.

However now that I'm thinking about this more, I don't think it'd always work that intuitively for 2 reasons:

• Splits aren't always setup as one would think. Some splits are between single pane nodes and others against more nested nodes.
• Even distribution is only possible when all nodes are at the same width. This starts to become less useful without a perfect starting grid like the 2x2 example.

So it's hard to say how useful this would actually be in practice without implementation or another example to reference.

[jhff]

Do you know any example that does that?

I do not. I just had the thought when watching your video. In the 2x2 grid, it seemed like it'd be nice to drag to the top right pane over the bottom middle split and end up with 3 evenly distributed panes on the bottom.

However now that I'm thinking about this more, I don't think it'd always work that intuitively for 2 reasons:

• Splits aren't always setup as one would think. Some splits are between single pane nodes and others against more nested nodes.
• Even distribution is only possible when all nodes are at the same width. This starts to become less useful without a perfect starting grid like the 2x2 example.

So it's hard to say how useful this would actually be in practice without implementation or another example to reference.

Exactly, that might introduce a lot of complexity or weird behaviour to the user itself. Anyway, I think this can be enhanced even more by being able to drag & drop at the edges of the whole grid in order to create a new row at top/bottom or new column at left/right side of the grid with the dragged pane. Gonna add that here.

[hecrj]

Looks fantastic! Just an idea!

[hecrj]

@tarkah @jhff We can focus on merging this bit of functionality first. We can add further improvements in a different PR.

[hecrj]

Fantastic! 🎉

Thanks 🙇