feat: retain size when moving groups

packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts

@@ -262,6 +262,112 @@ describe('dockviewComponent', () => {
         dockview.dispose();
     });
 
+    describe('move group', () => {
+        test('horizontal', () => {
+            dockview = new DockviewComponent(container, {
+                createComponent(options) {
+                    switch (options.name) {
+                        case 'default':
+                            return new PanelContentPartTest(
+                                options.id,
+                                options.name
+                            );
+                        default:
+                            throw new Error(`unsupported`);
+                    }
+                },
+            });
+
+            dockview.layout(600, 1000);
+
+            const panel1 = dockview.addPanel({
+                id: 'panel1',
+                component: 'default',
+            });
+            const panel2 = dockview.addPanel({
+                id: 'panel2',
+                component: 'default',
+                position: { direction: 'right' },
+            });
+            const panel3 = dockview.addPanel({
+                id: 'panel3',
+                component: 'default',
+                position: { direction: 'right' },
+            });
+
+            expect(panel1.api.width).toBe(200);
+            expect(panel2.api.width).toBe(200);
+            expect(panel3.api.width).toBe(200);
+
+            panel3.api.setSize({ width: 300 });
+
+            expect(panel1.api.width).toBe(200);
+            expect(panel2.api.width).toBe(100);
+            expect(panel3.api.width).toBe(300);
+
+            dockview.moveGroup({
+                from: { group: panel3.api.group },
+                to: { group: panel1.api.group, position: 'right' },
+            });
+
+            expect(panel1.api.width).toBe(200);
+            expect(panel2.api.width).toBe(100);
+            expect(panel3.api.width).toBe(300);
+        });
+
+        test('vertical', () => {
+            dockview = new DockviewComponent(container, {
+                createComponent(options) {
+                    switch (options.name) {
+                        case 'default':
+                            return new PanelContentPartTest(
+                                options.id,
+                                options.name
+                            );
+                        default:
+                            throw new Error(`unsupported`);
+                    }
+                },
+            });
+
+            dockview.layout(1000, 600);
+
+            const panel1 = dockview.addPanel({
+                id: 'panel1',
+                component: 'default',
+            });
+            const panel2 = dockview.addPanel({
+                id: 'panel2',
+                component: 'default',
+                position: { direction: 'below' },
+            });
+            const panel3 = dockview.addPanel({
+                id: 'panel3',
+                component: 'default',
+                position: { direction: 'below' },
+            });
+
+            expect(panel1.api.height).toBe(200);
+            expect(panel2.api.height).toBe(200);
+            expect(panel3.api.height).toBe(200);
+
+            panel3.api.setSize({ height: 300 });
+
+            expect(panel1.api.height).toBe(200);
+            expect(panel2.api.height).toBe(100);
+            expect(panel3.api.height).toBe(300);
+
+            dockview.moveGroup({
+                from: { group: panel3.api.group },
+                to: { group: panel1.api.group, position: 'bottom' },
+            });
+
+            expect(panel1.api.height).toBe(200);
+            expect(panel2.api.height).toBe(100);
+            expect(panel3.api.height).toBe(300);
+        });
+    });
+
     test('set active panel', () => {
         dockview.layout(500, 1000);
 

packages/dockview-core/src/dockview/dockviewComponent.ts

@@ -2068,7 +2068,24 @@ export class DockviewComponent
                 target
             );
 
-            this.gridview.addView(from, Sizing.Distribute, dropLocation);
+            let size: number;
+
+            switch (this.gridview.orientation) {
+                case Orientation.VERTICAL:
+                    size =
+                        referenceLocation.length % 2 == 0
+                            ? from.api.width
+                            : from.api.height;
+                    break;
+                case Orientation.HORIZONTAL:
+                    size =
+                        referenceLocation.length % 2 == 0
+                            ? from.api.height
+                            : from.api.width;
+                    break;
+            }
+
+            this.gridview.addView(from, size, dropLocation);
         }
 
         from.panels.forEach((panel) => {