feat: allow center drops when no grid panels

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

@@ -2287,6 +2287,126 @@ describe('dockviewComponent', () => {
         });
     });
 
+    test('orthogonal realigment #4', () => {
+        const container = document.createElement('div');
+
+        const dockview = new DockviewComponent({
+            parentElement: container,
+            components: {
+                default: PanelContentPartTest,
+            },
+            tabComponents: {
+                test_tab_id: PanelTabPartTest,
+            },
+            orientation: Orientation.HORIZONTAL,
+        });
+
+        dockview.layout(1000, 1000);
+
+        expect(dockview.orientation).toBe(Orientation.HORIZONTAL);
+
+        dockview.addPanel({
+            id: 'panel1',
+            component: 'default',
+            position: {
+                direction: 'above',
+            },
+        });
+
+        expect(dockview.orientation).toBe(Orientation.VERTICAL);
+
+        expect(JSON.parse(JSON.stringify(dockview.toJSON()))).toEqual({
+            activeGroup: '1',
+            grid: {
+                root: {
+                    type: 'branch',
+                    data: [
+                        {
+                            type: 'leaf',
+                            data: {
+                                views: ['panel1'],
+                                id: '1',
+                                activeView: 'panel1',
+                            },
+                            size: 1000,
+                        },
+                    ],
+                    size: 1000,
+                },
+                height: 1000,
+                width: 1000,
+                orientation: Orientation.VERTICAL,
+            },
+            panels: {
+                panel1: {
+                    id: 'panel1',
+                    contentComponent: 'default',
+                    title: 'panel1',
+                },
+            },
+        });
+    });
+
+    test('orthogonal realigment #5', () => {
+        const container = document.createElement('div');
+
+        const dockview = new DockviewComponent({
+            parentElement: container,
+            components: {
+                default: PanelContentPartTest,
+            },
+            tabComponents: {
+                test_tab_id: PanelTabPartTest,
+            },
+            orientation: Orientation.VERTICAL,
+        });
+
+        dockview.layout(1000, 1000);
+
+        expect(dockview.orientation).toBe(Orientation.VERTICAL);
+
+        dockview.addPanel({
+            id: 'panel1',
+            component: 'default',
+            position: {
+                direction: 'left',
+            },
+        });
+
+        expect(dockview.orientation).toBe(Orientation.HORIZONTAL);
+
+        expect(JSON.parse(JSON.stringify(dockview.toJSON()))).toEqual({
+            activeGroup: '1',
+            grid: {
+                root: {
+                    type: 'branch',
+                    data: [
+                        {
+                            type: 'leaf',
+                            data: {
+                                views: ['panel1'],
+                                id: '1',
+                                activeView: 'panel1',
+                            },
+                            size: 1000,
+                        },
+                    ],
+                    size: 1000,
+                },
+                height: 1000,
+                width: 1000,
+                orientation: Orientation.HORIZONTAL,
+            },
+            panels: {
+                panel1: {
+                    id: 'panel1',
+                    contentComponent: 'default',
+                    title: 'panel1',
+                },
+            },
+        });
+    });
+
     test('that a empty component has no groups', () => {
         const container = document.createElement('div');
 
@@ -3635,4 +3755,36 @@ describe('dockviewComponent', () => {
         expect(dockview.groups.length).toBe(1);
         expect(dockview.panels.length).toBe(2);
     });
+
+    test('that moving the last panel to be floating should leave an empty gridview', () => {
+        const container = document.createElement('div');
+
+        const dockview = new DockviewComponent({
+            parentElement: container,
+            components: {
+                default: PanelContentPartTest,
+            },
+            tabComponents: {
+                test_tab_id: PanelTabPartTest,
+            },
+            orientation: Orientation.HORIZONTAL,
+        });
+
+        dockview.layout(1000, 500);
+
+        const panel1 = dockview.addPanel({
+            id: 'panel_1',
+            component: 'default',
+        });
+
+        expect(
+            dockview.element.querySelectorAll('.view-container > .view').length
+        ).toBe(1);
+
+        dockview.addFloatingGroup(panel1);
+
+        expect(
+            dockview.element.querySelectorAll('.view-container > .view').length
+        ).toBe(0);
+    });
 });

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

@@ -8,7 +8,6 @@
         left: 0px;
         height: 100%;
         width: 100%;
-        z-index: 9997;
     }
 }
 

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

@@ -247,6 +247,13 @@ export class DockviewComponent
                     if (data.viewId !== this.id) {
                         return false;
                     }
+
+                    if (position === 'center') {
+                        // center drop target is only allowed if there are no panels in the grid
+                        // floating panels are allowed
+                        return this.gridview.length === 0;
+                    }
+
                     return true;
                 }
 
@@ -261,7 +268,7 @@ export class DockviewComponent
 
                 return false;
             },
-            acceptedTargetZones: ['top', 'bottom', 'left', 'right'],
+            acceptedTargetZones: ['top', 'bottom', 'left', 'right', 'center'],
             overlayModel: {
                 activationSize: { type: 'pixels', value: 10 },
                 size: { type: 'pixels', value: 20 },
@@ -399,6 +406,7 @@ export class DockviewComponent
         switch (position) {
             case 'top':
             case 'left':
+            case 'center':
                 return this.createGroupAtLocation([0]); // insert into first position
             case 'bottom':
             case 'right':