Merge pull request #114 from mathuo/113-improve-events

feat: improve events

packages/dockview/src/__tests__/dockview/deserializer.spec.ts

@@ -1,95 +0,0 @@
-import {
-    DefaultDeserializer,
-    PanelDeserializerOptions,
-} from '../../dockview/deserializer';
-import { DockviewComponent } from '../../dockview/dockviewComponent';
-import { Groupview } from '../../groupview/groupview';
-import { GroupPanel } from '../../groupview/groupviewPanel';
-
-describe('deserializer', () => {
-    test('fromJSON', () => {
-        const openPanel = jest.fn();
-
-        const model = jest.fn<Groupview, []>(() => {
-            const result: Partial<Groupview> = {
-                openPanel,
-            };
-
-            return result as Groupview;
-        });
-
-        const panel1 = jest.fn();
-        const panel2 = jest.fn();
-
-        const groupMock = jest.fn<GroupPanel, []>(() => {
-            const result: Partial<GroupPanel> = {
-                model: new model(),
-                panels: <any>[panel1, panel2],
-                activePanel: null,
-            };
-
-            return result as GroupPanel;
-        });
-        const group = new groupMock();
-        const createGroup = jest.fn().mockReturnValue(new groupMock());
-
-        const dockviewComponentMock = jest.fn<DockviewComponent, []>(() => {
-            const value: Partial<DockviewComponent> = {
-                createGroup,
-            };
-
-            return <DockviewComponent>value;
-        });
-
-        const createPanel = jest
-            .fn()
-            .mockImplementation((child) => ({ id: child }));
-
-        const panelDeserializer: PanelDeserializerOptions = {
-            createPanel,
-        };
-
-        const dockviewComponent = new dockviewComponentMock();
-
-        const cut = new DefaultDeserializer(
-            dockviewComponent,
-            panelDeserializer
-        );
-
-        cut.fromJSON({
-            type: 'leaf',
-            size: 100,
-            visible: true,
-            data: {
-                hideHeader: true,
-                locked: true,
-                id: 'id',
-                views: ['view1', 'view2'],
-                activeView: 'view2',
-            },
-        });
-
-        expect(createGroup).toBeCalledWith({
-            id: 'id',
-            locked: true,
-            hideHeader: true,
-        });
-        expect(createGroup).toBeCalledTimes(1);
-
-        expect(createPanel).toBeCalledWith('view1', group);
-        expect(createPanel).toBeCalledWith('view2', group);
-        expect(createPanel).toBeCalledTimes(2);
-
-        expect(openPanel).toBeCalledWith(
-            { id: 'view1' },
-            { skipSetActive: true }
-        );
-        expect(openPanel).toBeCalledWith(
-            { id: 'view2' },
-            { skipSetActive: false }
-        );
-
-        expect(openPanel).toBeCalledWith(panel2);
-        expect(openPanel).toBeCalledTimes(3);
-    });
-});

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

@@ -254,34 +254,34 @@ describe('dockviewComponent', () => {
         const panel3 = dockview.getGroupPanel('panel3');
         const panel4 = dockview.getGroupPanel('panel4');
 
-        const group1 = panel1.group;
+        const group1 = panel1!.group;
         dockview.moveGroupOrPanel(group1, group1.id, 'panel1', Position.Right);
-        const group2 = panel1.group;
+        const group2 = panel1!.group;
         dockview.moveGroupOrPanel(group2, group1.id, 'panel3', Position.Center);
 
         expect(dockview.activeGroup).toBe(group2);
-        expect(dockview.activeGroup.model.activePanel).toBe(panel3);
+        expect(dockview.activeGroup!.model.activePanel).toBe(panel3);
-        expect(dockview.activeGroup.model.indexOf(panel3)).toBe(1);
+        expect(dockview.activeGroup!.model.indexOf(panel3!)).toBe(1);
 
         dockview.moveToPrevious({ includePanel: true });
         expect(dockview.activeGroup).toBe(group2);
-        expect(dockview.activeGroup.model.activePanel).toBe(panel1);
+        expect(dockview.activeGroup!.model.activePanel).toBe(panel1);
 
         dockview.moveToNext({ includePanel: true });
         expect(dockview.activeGroup).toBe(group2);
-        expect(dockview.activeGroup.model.activePanel).toBe(panel3);
+        expect(dockview.activeGroup!.model.activePanel).toBe(panel3);
 
         dockview.moveToPrevious({ includePanel: false });
         expect(dockview.activeGroup).toBe(group1);
-        expect(dockview.activeGroup.model.activePanel).toBe(panel4);
+        expect(dockview.activeGroup!.model.activePanel).toBe(panel4);
 
         dockview.moveToPrevious({ includePanel: true });
         expect(dockview.activeGroup).toBe(group1);
-        expect(dockview.activeGroup.model.activePanel).toBe(panel2);
+        expect(dockview.activeGroup!.model.activePanel).toBe(panel2);
 
         dockview.moveToNext({ includePanel: false });
         expect(dockview.activeGroup).toBe(group2);
-        expect(dockview.activeGroup.model.activePanel).toBe(panel3);
+        expect(dockview.activeGroup!.model.activePanel).toBe(panel3);
     });
 
     test('remove group', () => {
@@ -1517,6 +1517,175 @@ describe('dockviewComponent', () => {
         expect(panel2Spy).toBeCalledTimes(1);
     });
 
+    test('fromJSON events should still fire', () => {
+        jest.useFakeTimers();
+
+        dockview.layout(1000, 1000);
+
+        let addGroup: GroupPanel[] = [];
+        let removeGroup: GroupPanel[] = [];
+        let activeGroup: (GroupPanel | undefined)[] = [];
+        let addPanel: IDockviewPanel[] = [];
+        let removePanel: IDockviewPanel[] = [];
+        let activePanel: (IDockviewPanel | undefined)[] = [];
+        let layoutChange = 0;
+        let layoutChangeFromJson = 0;
+
+        const disposable = new CompositeDisposable(
+            dockview.onDidAddGroup((panel) => {
+                addGroup.push(panel);
+            }),
+            dockview.onDidRemoveGroup((panel) => {
+                removeGroup.push(panel);
+            }),
+            dockview.onDidActiveGroupChange((event) => {
+                activeGroup.push(event);
+            }),
+            dockview.onDidAddPanel((panel) => {
+                addPanel.push(panel);
+            }),
+            dockview.onDidRemovePanel((panel) => {
+                removePanel.push(panel);
+            }),
+            dockview.onDidActivePanelChange((event) => {
+                activePanel.push(event);
+            }),
+            dockview.onDidLayoutChange(() => {
+                layoutChange++;
+            }),
+            dockview.onDidLayoutFromJSON(() => {
+                layoutChangeFromJson++;
+            })
+        );
+
+        dockview.deserializer = new ReactPanelDeserialzier(dockview);
+        dockview.fromJSON({
+            activeGroup: 'group-1',
+            grid: {
+                root: {
+                    type: 'branch',
+                    data: [
+                        {
+                            type: 'leaf',
+                            data: {
+                                views: ['panel1'],
+                                id: 'group-1',
+                                activeView: 'panel1',
+                            },
+                            size: 500,
+                        },
+                        {
+                            type: 'branch',
+                            data: [
+                                {
+                                    type: 'leaf',
+                                    data: {
+                                        views: ['panel2', 'panel3'],
+                                        id: 'group-2',
+                                    },
+                                    size: 500,
+                                },
+                                {
+                                    type: 'leaf',
+                                    data: { views: ['panel4'], id: 'group-3' },
+                                    size: 500,
+                                },
+                            ],
+                            size: 250,
+                        },
+                        {
+                            type: 'leaf',
+                            data: { views: ['panel5'], id: 'group-4' },
+                            size: 250,
+                        },
+                    ],
+                    size: 1000,
+                },
+                height: 1000,
+                width: 1000,
+                orientation: Orientation.VERTICAL,
+            },
+            panels: {
+                panel1: {
+                    id: 'panel1',
+                    view: { content: { id: 'default' } },
+                    title: 'panel1',
+                },
+                panel2: {
+                    id: 'panel2',
+                    view: { content: { id: 'default' } },
+                    title: 'panel2',
+                },
+                panel3: {
+                    id: 'panel3',
+                    view: { content: { id: 'default' } },
+                    title: 'panel3',
+                },
+                panel4: {
+                    id: 'panel4',
+                    view: { content: { id: 'default' } },
+                    title: 'panel4',
+                },
+                panel5: {
+                    id: 'panel5',
+                    view: { content: { id: 'default' } },
+                    title: 'panel5',
+                },
+            },
+            options: { tabHeight: 25 },
+        });
+
+        jest.runAllTimers();
+
+        console.log(activePanel.map((_) => _?.id).join(' '));
+
+        expect(addGroup.length).toBe(4);
+        expect(removeGroup.length).toBe(0);
+        expect(activeGroup.length).toBe(1);
+        expect(addPanel.length).toBe(5);
+        expect(removePanel.length).toBe(0);
+        expect(activePanel.length).toBe(5);
+        expect(layoutChange).toBe(1);
+        expect(layoutChangeFromJson).toBe(1);
+
+        addGroup = [];
+        removeGroup = [];
+        activeGroup = [];
+        addPanel = [];
+        removePanel = [];
+        activePanel = [];
+        layoutChange = 0;
+        layoutChangeFromJson = 0;
+
+        dockview.fromJSON({
+            grid: {
+                root: {
+                    type: 'branch',
+                    data: [],
+                    size: 1000,
+                },
+                height: 1000,
+                width: 1000,
+                orientation: Orientation.VERTICAL,
+            },
+            panels: {},
+            options: { tabHeight: 25 },
+        });
+
+        jest.runAllTimers();
+
+        expect(addGroup.length).toBe(0);
+        expect(removeGroup.length).toBe(4);
+        expect(activeGroup.length).toBe(1);
+        expect(addPanel.length).toBe(0);
+        expect(removePanel.length).toBe(5);
+        expect(activePanel.length).toBe(1);
+        expect(layoutChange).toBe(1);
+        expect(layoutChangeFromJson).toBe(1);
+
+        return disposable.dispose();
+    });
+
     // group is disposed of when dockview is disposed
     // watermark is disposed of when removed
     // watermark is disposed of when dockview is disposed

packages/dockview/src/__tests__/gridview/gridviewComponent.spec.ts

@@ -1761,4 +1761,126 @@ describe('gridview', () => {
         expect(panel1Spy).toHaveBeenCalledTimes(1);
         expect(panel2Spy).toHaveBeenCalledTimes(1);
     });
+
+    test('fromJSON  events should still fire', () => {
+        jest.useFakeTimers();
+
+        const gridview = new GridviewComponent(container, {
+            proportionalLayout: true,
+            orientation: Orientation.HORIZONTAL,
+            components: { default: TestGridview },
+        });
+
+        let addGroup: GridviewPanel[] = [];
+        let removeGroup: GridviewPanel[] = [];
+        let activeGroup: (GridviewPanel | undefined)[] = [];
+        let layoutChange = 0;
+        let layoutChangeFromJson = 0;
+
+        const disposable = new CompositeDisposable(
+            gridview.onDidAddGroup((panel) => {
+                addGroup.push(panel);
+            }),
+            gridview.onDidRemoveGroup((panel) => {
+                removeGroup.push(panel);
+            }),
+            gridview.onDidActiveGroupChange((event) => {
+                activeGroup.push(event);
+            }),
+            gridview.onDidLayoutChange(() => {
+                layoutChange++;
+            }),
+            gridview.onDidLayoutFromJSON(() => {
+                layoutChangeFromJson++;
+            })
+        );
+
+        gridview.fromJSON({
+            grid: {
+                height: 400,
+                width: 800,
+                orientation: Orientation.HORIZONTAL,
+                root: {
+                    type: 'branch',
+                    size: 400,
+                    data: [
+                        {
+                            type: 'leaf',
+                            size: 200,
+                            data: {
+                                id: 'panel_1',
+                                component: 'default',
+                                snap: false,
+                            },
+                        },
+                        {
+                            type: 'branch',
+                            size: 400,
+                            data: [
+                                {
+                                    type: 'leaf',
+                                    size: 250,
+                                    data: {
+                                        id: 'panel_2',
+                                        component: 'default',
+                                        snap: false,
+                                    },
+                                },
+                                {
+                                    type: 'leaf',
+                                    size: 150,
+                                    data: {
+                                        id: 'panel_3',
+                                        component: 'default',
+                                        snap: false,
+                                    },
+                                },
+                            ],
+                        },
+                        {
+                            type: 'leaf',
+                            size: 200,
+                            data: {
+                                id: 'panel_4',
+                                component: 'default',
+                                snap: false,
+                            },
+                        },
+                    ],
+                },
+            },
+            activePanel: 'panel_1',
+        });
+
+        jest.runAllTimers();
+
+        expect(addGroup.length).toBe(4);
+        expect(removeGroup.length).toBe(0);
+        expect(activeGroup.length).toBe(1);
+        expect(activeGroup[0]).toEqual(gridview.getPanel('panel_1'));
+        expect(layoutChange).toBe(1);
+        expect(layoutChangeFromJson).toBe(1);
+
+        addGroup = [];
+        activeGroup = [];
+
+        gridview.fromJSON({
+            grid: {
+                height: 0,
+                width: 0,
+                root: { type: 'branch', data: [] },
+                orientation: Orientation.HORIZONTAL,
+            },
+        });
+
+        jest.runAllTimers();
+
+        expect(addGroup.length).toBe(0);
+        expect(removeGroup.length).toBe(4);
+        expect(activeGroup.length).toBe(1);
+        expect(layoutChange).toBe(2);
+        expect(layoutChangeFromJson).toBe(2);
+
+        return disposable.dispose();
+    });
 });

packages/dockview/src/__tests__/groupview/groupview.spec.ts

@@ -560,7 +560,7 @@ describe('groupview', () => {
 
         const panel3 = new TestPanel('id_2', null);
 
-        cut.openPanel(panel3, { skipSetActive: true });
+        cut.openPanel(panel3, { skipSetPanelActive: true });
         expect(contentContainer.length).toBe(1);
         expect(contentContainer.item(0)).toBe(panel2.view.content.element);
 

packages/dockview/src/dockview/deserializer.ts

@@ -1,52 +1,6 @@
-import {
-    IGridView,
-    ISerializedLeafNode,
-    IViewDeserializer,
-} from '../gridview/gridview';
 import { GroupviewPanelState, IDockviewPanel } from '../groupview/groupPanel';
-import { GroupPanelViewState } from '../groupview/groupview';
 import { GroupPanel } from '../groupview/groupviewPanel';
-import { DockviewComponent } from './dockviewComponent';
 
 export interface IPanelDeserializer {
     fromJSON(panelData: GroupviewPanelState, group: GroupPanel): IDockviewPanel;
 }
-
-export interface PanelDeserializerOptions {
-    createPanel: (id: string, group: GroupPanel) => IDockviewPanel;
-}
-
-export class DefaultDeserializer implements IViewDeserializer {
-    constructor(
-        private readonly layout: DockviewComponent,
-        private panelDeserializer: PanelDeserializerOptions
-    ) {}
-
-    public fromJSON(node: ISerializedLeafNode<GroupPanelViewState>): IGridView {
-        const data = node.data;
-        const children = data.views;
-        const active = data.activeView;
-
-        const group = this.layout.createGroup({
-            id: data.id,
-            locked: !!data.locked,
-            hideHeader: !!data.hideHeader,
-        });
-
-        for (const child of children) {
-            const panel = this.panelDeserializer.createPanel(child, group);
-
-            const isActive = typeof active === 'string' && active === panel.id;
-
-            group.model.openPanel(panel, {
-                skipSetActive: !isActive,
-            });
-        }
-
-        if (!group.activePanel && group.panels.length > 0) {
-            group.model.openPanel(group.panels[group.panels.length - 1]);
-        }
-
-        return group;
-    }
-}

packages/dockview/src/gridview/baseComponentGridview.ts

@@ -82,7 +82,7 @@ export abstract class BaseGrid<T extends IGridPanelView>
     private readonly _onDidRemoveGroup = new Emitter<T>();
     readonly onDidRemoveGroup: Event<T> = this._onDidRemoveGroup.event;
 
-    private readonly _onDidAddGroup = new Emitter<T>();
+    protected readonly _onDidAddGroup = new Emitter<T>();
     readonly onDidAddGroup: Event<T> = this._onDidAddGroup.event;
 
     private readonly _onDidActiveGroupChange = new Emitter<T | undefined>();
@@ -150,7 +150,7 @@ export abstract class BaseGrid<T extends IGridPanelView>
 
         this.addDisposables(
             this.gridview.onDidChange(() => {
-                this._onDidLayoutChange.fire();
+                this._bufferOnDidLayoutChange.fire();
             })
         );
 

packages/dockview/src/gridview/gridviewComponent.ts

@@ -175,12 +175,18 @@ export class GridviewComponent
     public fromJSON(serializedGridview: SerializedGridview) {
         const { grid, activePanel } = serializedGridview;
 
+        const hasActiveGroup = this.activeGroup;
+
         const groups = Array.from(this._groups.values()); // reassign since group panels will mutate
         for (const group of groups) {
             group.disposable.dispose();
             this.doRemoveGroup(group.value, { skipActive: true });
         }
 
+        if (hasActiveGroup) {
+            this.doSetGroupActive(undefined);
+        }
+
         this.gridview.clear();
 
         const queue: Function[] = [];
@@ -216,6 +222,8 @@ export class GridviewComponent
                     })
                 );
 
+                this._onDidAddGroup.fire(view);
+
                 this.registerPanel(view);
 
                 return view;

packages/dockview/src/groupview/groupview.ts

@@ -400,7 +400,8 @@ export class Groupview extends CompositeDisposable implements IGroupview {
         options: {
             index?: number;
             skipFocus?: boolean;
-            skipSetActive?: boolean;
+            skipSetPanelActive?: boolean;
+            skipSetGroupActive?: boolean;
         } = {}
     ) {
         if (
@@ -410,20 +411,26 @@ export class Groupview extends CompositeDisposable implements IGroupview {
             options.index = this.panels.length;
         }
 
-        const skipSetActive = !!options.skipSetActive;
+        const skipSetPanelActive = !!options.skipSetPanelActive;
+        const skipSetGroupActive = !!options.skipSetGroupActive;
 
         // ensure the group is updated before we fire any events
         panel.updateParentGroup(this.parent, true);
 
-        if (!skipSetActive && this._activePanel === panel) {
+        if (this._activePanel === panel) {
-            this.accessor.doSetGroupActive(this.parent);
+            if (!skipSetGroupActive) {
+                this.accessor.doSetGroupActive(this.parent);
+            }
             return;
         }
 
-        this.doAddPanel(panel, options.index, skipSetActive);
+        this.doAddPanel(panel, options.index, skipSetPanelActive);
 
-        if (!skipSetActive) {
+        if (!skipSetPanelActive) {
             this.doSetActivePanel(panel);
+        }
+
+        if (!skipSetGroupActive) {
             this.accessor.doSetGroupActive(this.parent, !!options.skipFocus);
         }