bug: fix overlay container for popout to floating

mathuo · Dec 22, 2024 · 296b491 · 296b491
1 parent 487d02b
commit 296b491
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 10 deletions.
diff --git a/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts b/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts
@@ -5052,8 +5052,13 @@ describe('dockviewComponent', () => {
                 component: 'default',
             });
 
-            await dockview.addPopoutGroup(panel2);
+            const panel3 = dockview.addPanel({
+                id: 'panel_3',
+                component: 'default',
+                renderer: 'always',
+            });
 
+            await dockview.addPopoutGroup(panel2);
             panel2.api.moveTo({ group: panel1.api.group, position: 'right' });
 
             // confirm panel is rendered on DOM
@@ -5062,6 +5067,22 @@ describe('dockviewComponent', () => {
                     '.dv-content-container > .testpanel-panel_2'
                 ).length
             ).toBe(1);
+
+            await dockview.addPopoutGroup(panel3);
+            panel3.api.moveTo({ group: panel1.api.group, position: 'right' });
+
+            // confirm panel is rendered to always overlay container
+            expect(
+                dockview.element.querySelectorAll(
+                    '.dv-render-overlay > .testpanel-panel_3'
+                ).length
+            ).toBe(1);
+            expect(
+                panel2.group.element.querySelectorAll(
+                    '.dv-content-container > .testpanel-panel_3'
+                ).length
+            ).toBe(0);
+            expect(dockview.element);
         });
 
         test('move popout group of 1 panel inside grid', async () => {

diff --git a/packages/dockview-core/src/dockview/dockviewComponent.ts b/packages/dockview-core/src/dockview/dockviewComponent.ts
@@ -842,32 +842,31 @@ export class DockviewComponent
                                 });
                             }
                         } else if (this.getPanel(group.id)) {
-                            const removedGroup = group;
+                            group.model.renderContainer =
+                                this.overlayRenderContainer;
+                            returnedGroup = group;
 
                             if (floatingBox) {
-                                this.addFloatingGroup(removedGroup, {
+                                this.addFloatingGroup(group, {
                                     height: floatingBox.height,
                                     width: floatingBox.width,
                                     position: floatingBox,
                                 });
                             } else {
-                                this.doRemoveGroup(removedGroup, {
+                                this.doRemoveGroup(group, {
                                     skipDispose: true,
                                     skipActive: true,
                                     skipPopoutReturn: true,
                                 });
 
-                                removedGroup.model.renderContainer =
-                                    this.overlayRenderContainer;
-                                removedGroup.model.location = { type: 'grid' };
-                                returnedGroup = removedGroup;
+                                group.model.location = { type: 'grid' };
 
                                 this.movingLock(() => {
                                     // suppress group add events since the group already exists
-                                    this.doAddGroup(removedGroup, [0]);
+                                    this.doAddGroup(group, [0]);
                                 });
                             }
-                            this.doSetGroupAndPanelActive(removedGroup);
+                            this.doSetGroupAndPanelActive(group);
                         }
                     })
                 );