Panel and Group default sizes and bounding dimensions
To implement
- Preferred width and height values for added panels
- Minimum, maximum width and height values for added panels
- Explore the idea of
prioritywhere certain panels will be offered free space / have space taken from them first/last.
Not sure if it fits this issue but I'd like to request a change of behaviour when dragging a panel onto another panel to create a group with tabs. Let's look at an example where I have a window that is 1000px wide and three panels A, B, C next to each other. A and C are 100px wide each, and B in the middle takes the remaining 800px.
Current Behaviour: If I drag C onto A to create a tab group, then as a result both that tab group and B will each have a width of about 500px. This feels unintuitive as both the dragged panel and the target panel had a width of 100px which is much smaller.
Desired Behaviour: If I drag C onto A to create a tab group, that tab group should remain at the size that A had originally. This feels more like what I'm used to from other software with a dock view layout.
Piece of advice here: Might be worth considering using the Flexbox model directly
Piece of advice here: Might be worth considering using the Flexbox model directly
Just CSS flex does not give me docking functionality... or do you mean something else?
1.17.1 Releases changes related to initial, maximum and minimum sizes as well as a small change to prevent group resizing when moving groups.
See http://localhost:3000/docs/core/panels/add#minimum-and-maximum
See https://github.com/mathuo/dockview/issues/708 for continued work on group size preservation
minimum and maximum width/height doesn't work on floating windows
@mathuo Perhaps you didn't notice the last comments, since the issue is closed. But unfortunatelty @amirmamaghani is correct and when "undocking" a panel size and/or constraints aren't respected and instead it is always resized to a square 300x300. I've tried to debug it and I think the problem is here in the TabsContainer where it never only passes position and no size
if (
isFloatingGroupsEnabled &&
event.shiftKey &&
this.group.api.location.type !== "floating"
) {
event.preventDefault();
const { top, left } = this.element.getBoundingClientRect();
const { top: rootTop, left: rootLeft } =
this.accessor.element.getBoundingClientRect();
this.accessor.addFloatingGroup(this.group, {
x: left - rootLeft + 20,
y: top - rootTop + 20,
inDragMode: true,
});
}
https://github.com/mathuo/dockview/blob/master/packages/dockview-core/src/dockview/components/titlebar/tabsContainer.ts#L215
or that the getAnchoredBox function only looks at the passed options and not on any constraints or dimensions of the floating group that is to be added in addFloatingGroup of DockviewComponent