feat: retain size when moving groups

mathuo · Aug 27, 2024 · e2e9183 · e2e9183
1 parent 0508403
commit e2e9183
Show file tree

Hide file tree

Showing 2 changed files with 125 additions and 2 deletions.
diff --git a/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts b/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts
@@ -8,7 +8,7 @@ import { PanelUpdateEvent } from '../../panel/types';
 import { Orientation } from '../../splitview/splitview';
 import { CompositeDisposable } from '../../lifecycle';
 import { Emitter } from '../../events';
-import {  IDockviewPanel } from '../../dockview/dockviewPanel';
+import { IDockviewPanel } from '../../dockview/dockviewPanel';
 import { DockviewGroupPanel } from '../../dockview/dockviewGroupPanel';
 import { fireEvent, queryByTestId } from '@testing-library/dom';
 import { getPanelData } from '../../dnd/dataTransfer';
@@ -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);
 

diff --git a/packages/dockview-core/src/dockview/dockviewComponent.ts b/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) => {