Merge branch 'master' of https://github.com/mathuo/dockview into 777-…

…keeping-header-actions-even-when-no-tabs-are-open
mathuo · Dec 10, 2024 · 04327b4 · 04327b4
2 parents a02241d + 32e759e
commit 04327b4
Show file tree

Hide file tree

Showing 3 changed files with 161 additions and 18 deletions.
diff --git a/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts b/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts
@@ -5191,6 +5191,126 @@ describe('dockviewComponent', () => {
             expect(dockview.groups.length).toBe(2);
             expect(dockview.panels.length).toBe(3);
         });
+
+        test('persistance with custom url', 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);
+
+            dockview.addPanel({
+                id: 'panel_1',
+                component: 'default',
+            });
+
+            const panel2 = dockview.addPanel({
+                id: 'panel_2',
+                component: 'default',
+                position: { direction: 'right' },
+            });
+
+            const panel3 = dockview.addPanel({
+                id: 'panel_3',
+                component: 'default',
+                position: { direction: 'right' },
+            });
+
+            expect(await dockview.addPopoutGroup(panel2.group)).toBeTruthy();
+            expect(
+                await dockview.addPopoutGroup(panel3.group, {
+                    popoutUrl: '/custom.html',
+                })
+            ).toBeTruthy();
+
+            const state = dockview.toJSON();
+
+            expect(state.popoutGroups).toEqual([
+                {
+                    data: {
+                        activeView: 'panel_2',
+                        id: '4',
+                        views: ['panel_2'],
+                    },
+                    gridReferenceGroup: '2',
+                    position: {
+                        height: 2001,
+                        left: undefined,
+                        top: undefined,
+                        width: 1001,
+                    },
+                    url: undefined,
+                },
+                {
+                    data: {
+                        activeView: 'panel_3',
+                        id: '5',
+                        views: ['panel_3'],
+                    },
+                    gridReferenceGroup: '3',
+                    position: {
+                        height: 2001,
+                        left: undefined,
+                        top: undefined,
+                        width: 1001,
+                    },
+                    url: '/custom.html',
+                },
+            ]);
+
+            dockview.clear();
+            expect(dockview.groups.length).toBe(0);
+
+            dockview.fromJSON(state);
+            await new Promise((resolve) => setTimeout(resolve, 0)); // popout views are completed as a promise so must complete microtask-queue
+
+            expect(dockview.toJSON().popoutGroups).toEqual([
+                {
+                    data: {
+                        activeView: 'panel_2',
+                        id: '4',
+                        views: ['panel_2'],
+                    },
+                    gridReferenceGroup: '2',
+                    position: {
+                        height: 2001,
+                        left: undefined,
+                        top: undefined,
+                        width: 1001,
+                    },
+                    url: undefined,
+                },
+                {
+                    data: {
+                        activeView: 'panel_3',
+                        id: '5',
+                        views: ['panel_3'],
+                    },
+                    gridReferenceGroup: '3',
+                    position: {
+                        height: 2001,
+                        left: undefined,
+                        top: undefined,
+                        width: 1001,
+                    },
+                    url: '/custom.html',
+                },
+            ]);
+        });
     });
 
     describe('maximized group', () => {

diff --git a/packages/dockview-core/src/dockview/dockviewComponent.ts b/packages/dockview-core/src/dockview/dockviewComponent.ts
@@ -98,6 +98,22 @@ function moveGroupWithoutDestroying(options: {
     });
 }
 
+export interface DockviewPopoutGroupOptions {
+    /**
+     * The position of the popout group
+     */
+    position?: Box;
+    /**
+     * The same-origin path at which the popout window will be created
+     *
+     * Defaults to `/popout.html` if not provided
+     */
+    popoutUrl?: string;
+    onDidOpen?: (event: { id: string; window: Window }) => void;
+    onWillClose?: (event: { id: string; window: Window }) => void;
+    overridePopoutGroup?: DockviewGroupPanel;
+}
+
 export interface PanelReference {
     update: (event: { params: { [key: string]: any } }) => void;
     remove: () => void;
@@ -110,6 +126,7 @@ export interface SerializedFloatingGroup {
 
 export interface SerializedPopoutGroup {
     data: GroupPanelViewState;
+    url?: string;
     gridReferenceGroup?: string;
     position: Box | null;
 }
@@ -566,13 +583,7 @@ export class DockviewComponent
 
     addPopoutGroup(
         itemToPopout: DockviewPanel | DockviewGroupPanel,
-        options?: {
-            position?: Box;
-            popoutUrl?: string;
-            onDidOpen?: (event: { id: string; window: Window }) => void;
-            onWillClose?: (event: { id: string; window: Window }) => void;
-            overridePopoutGroup?: DockviewGroupPanel;
-        }
+        options?: DockviewPopoutGroupOptions
     ): Promise<boolean> {
         if (
             itemToPopout instanceof DockviewPanel &&
@@ -608,7 +619,10 @@ export class DockviewComponent
             `${this.id}-${groupId}`, // unique id
             theme ?? '',
             {
-                url: options?.popoutUrl ?? '/popout.html',
+                url:
+                    options?.popoutUrl ??
+                    this.options?.popoutUrl ??
+                    '/popout.html',
                 left: window.screenX + box.left,
                 top: window.screenY + box.top,
                 width: box.width,
@@ -659,20 +673,23 @@ export class DockviewComponent
                 const isGroupAddedToDom =
                     referenceGroup.element.parentElement !== null;
 
-                const group = !isGroupAddedToDom
-                    ? referenceGroup
-                    : options?.overridePopoutGroup ??
-                      this.createGroup({ id: groupId });
+                let group: DockviewGroupPanel;
+
+                if (!isGroupAddedToDom) {
+                    group = referenceGroup;
+                } else if (options?.overridePopoutGroup) {
+                    group = options.overridePopoutGroup;
+                } else {
+                    group = this.createGroup({ id: groupId });
+                    this._onDidAddGroup.fire(group);
+                }
+
                 group.model.renderContainer = overlayRenderContainer;
                 group.layout(
                     _window.window!.innerWidth,
                     _window.window!.innerHeight
                 );
 
-                if (!this._groups.has(group.api.id)) {
-                    this._onDidAddGroup.fire(group);
-                }
-
                 if (!options?.overridePopoutGroup && isGroupAddedToDom) {
                     if (itemToPopout instanceof DockviewPanel) {
                         this.movingLock(() => {
@@ -709,6 +726,7 @@ export class DockviewComponent
                 group.model.location = {
                     type: 'popout',
                     getWindow: () => _window.window!,
+                    popoutUrl: options?.popoutUrl,
                 };
 
                 if (
@@ -1198,6 +1216,10 @@ export class DockviewComponent
                     data: group.popoutGroup.toJSON() as GroupPanelViewState,
                     gridReferenceGroup: group.referenceGroup,
                     position: group.window.dimensions(),
+                    url:
+                        group.popoutGroup.api.location.type === 'popout'
+                            ? group.popoutGroup.api.location.popoutUrl
+                            : undefined,
                 };
             }
         );
@@ -1321,7 +1343,7 @@ export class DockviewComponent
             const serializedPopoutGroups = data.popoutGroups ?? [];
 
             for (const serializedPopoutGroup of serializedPopoutGroups) {
-                const { data, position, gridReferenceGroup } =
+                const { data, position, gridReferenceGroup, url } =
                     serializedPopoutGroup;
 
                 const group = createGroupFromSerializedState(data);
@@ -1335,6 +1357,7 @@ export class DockviewComponent
                         overridePopoutGroup: gridReferenceGroup
                             ? group
                             : undefined,
+                        popoutUrl: url,
                     }
                 );
             }

diff --git a/packages/dockview-core/src/dockview/dockviewGroupPanelModel.ts b/packages/dockview-core/src/dockview/dockviewGroupPanelModel.ts
@@ -196,7 +196,7 @@ export interface IDockviewGroupPanelModel extends IPanel {
 export type DockviewGroupLocation =
     | { type: 'grid' }
     | { type: 'floating' }
-    | { type: 'popout'; getWindow: () => Window };
+    | { type: 'popout'; getWindow: () => Window; popoutUrl?: string };
 
 export class WillShowOverlayLocationEvent implements IDockviewEvent {
     get kind(): DockviewGroupDropLocation {