bug: restoring popout groups

Author: mathuo

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

@@ -5597,6 +5597,67 @@ describe('dockviewComponent', () => {
             expect(dockview.groups.length).toBe(0);
         });
 
+        test('popout single panel -> save layout -> load layout', async () => {
+            const container = document.createElement('div');
+
+            window.open = () => setupMockWindow();
+
+            const 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, 500);
+
+            const panel1 = dockview.addPanel({
+                id: 'panel_1',
+                component: 'default',
+            });
+
+            const panel2 = dockview.addPanel({
+                id: 'panel_2',
+                component: 'default',
+            });
+
+            const panel3 = dockview.addPanel({
+                id: 'panel_3',
+                component: 'default',
+            });
+
+            const panel4 = dockview.addPanel({
+                id: 'panel_4',
+                component: 'default',
+                position: { direction: 'right' },
+            });
+
+            expect(dockview.panels.length).toBe(4);
+            expect(dockview.groups.length).toBe(2);
+
+            expect(await dockview.addPopoutGroup(panel1)).toBeTruthy();
+
+            expect(dockview.panels.length).toBe(4);
+            expect(dockview.groups.length).toBe(3);
+
+            expect(panel1.api.location.type).toBe('popout');
+
+            dockview.fromJSON(dockview.toJSON());
+
+            await new Promise((resolve) => setTimeout(resolve, 0)); // popout views are completed as a promise so must complete microtask-queue
+
+            expect(dockview.panels.length).toBe(4);
+            expect(dockview.groups.length).toBe(3);
+            expect(dockview.groups.every((g) => g.api.isVisible)).toBeTruthy();
+        });
+
         test('move from fixed to popout group and back', async () => {
             const container = document.createElement('div');
 

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

@@ -116,6 +116,7 @@ export interface DockviewPopoutGroupOptions {
      * Defaults to `/popout.html` if not provided
      */
     popoutUrl?: string;
+    referenceGroup?: DockviewGroupPanel;
     onDidOpen?: (event: { id: string; window: Window }) => void;
     onWillClose?: (event: { id: string; window: Window }) => void;
     overridePopoutGroup?: DockviewGroupPanel;
@@ -726,10 +727,11 @@ export class DockviewComponent
                     this
                 );
 
-                const referenceGroup =
-                    itemToPopout instanceof DockviewPanel
-                        ? itemToPopout.group
-                        : itemToPopout;
+                const referenceGroup = options?.referenceGroup
+                    ? options.referenceGroup
+                    : itemToPopout instanceof DockviewPanel
+                    ? itemToPopout.group
+                    : itemToPopout;
 
                 const referenceLocation = itemToPopout.api.location.type;
 
@@ -1483,18 +1485,14 @@ export class DockviewComponent
 
                 const group = createGroupFromSerializedState(data);
 
-                this.addPopoutGroup(
-                    (gridReferenceGroup
+                this.addPopoutGroup(group, {
+                    position: position ?? undefined,
+                    overridePopoutGroup: gridReferenceGroup ? group : undefined,
+                    referenceGroup: gridReferenceGroup
                         ? this.getPanel(gridReferenceGroup)
-                        : undefined) ?? group,
-                    {
-                        position: position ?? undefined,
-                        overridePopoutGroup: gridReferenceGroup
-                            ? group
-                            : undefined,
-                        popoutUrl: url,
-                    }
-                );
+                        : undefined,
+                    popoutUrl: url,
+                });
             }
 
             for (const floatingGroup of this._floatingGroups) {