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

packages/dockview/src/__tests__/api/component.api.spec.ts

@@ -22,6 +22,10 @@ describe('component.api', () => {
                 'onDidLayoutChange',
                 'onDidAddView',
                 'onDidRemoveView',
+                'getPanels',
+                'focus',
+                'resizeToFit',
+                'toJSON',
             ];
 
             for (const _ of list) {
@@ -33,7 +37,7 @@ describe('component.api', () => {
 
                 const cut = new SplitviewApi(<SplitviewComponent>component);
 
-                expect((cut as any)[_]).toBeFalsy();
+                (cut as any)[_];
 
                 expect(f).toBeCalledTimes(1);
             }
@@ -50,6 +54,10 @@ describe('component.api', () => {
                 'onDidLayoutChange',
                 'onDidAddView',
                 'onDidRemoveView',
+                'getPanels',
+                'focus',
+                'resizeToFit',
+                'toJSON',
             ];
 
             for (const _ of list) {
@@ -61,7 +69,7 @@ describe('component.api', () => {
 
                 const cut = new PaneviewApi(<PaneviewComponent>component);
 
-                expect((cut as any)[_]).toBeFalsy();
+                (cut as any)[_];
 
                 expect(f).toBeCalledTimes(1);
             }
@@ -80,6 +88,9 @@ describe('component.api', () => {
                 'onGridEvent',
                 'onDidLayoutChange',
                 'orientation',
+                'focus',
+                'resizeToFit',
+                'toJSON',
             ];
 
             for (const _ of list) {
@@ -91,7 +102,7 @@ describe('component.api', () => {
 
                 const cut = new GridviewApi(<GridviewComponent>component);
 
-                expect((cut as any)[_]).toBeFalsy();
+                (cut as any)[_];
 
                 expect(f).toBeCalledTimes(1);
             }
@@ -115,6 +126,10 @@ describe('component.api', () => {
                 'groups',
                 'activeGroup',
                 'activePanel',
+                'focus',
+                'closeAllGroups',
+                'resizeToFit',
+                'toJSON',
             ];
 
             for (const _ of list) {
@@ -126,7 +141,7 @@ describe('component.api', () => {
 
                 const cut = new DockviewApi(<DockviewComponent>component);
 
-                expect((cut as any)[_]).toBeFalsy();
+                (cut as any)[_];
 
                 expect(f).toBeCalledTimes(1);
             }

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

@@ -1,4 +1,7 @@
-import { IDockviewComponent } from '../../dockview/dockviewComponent';
+import {
+    IDockviewComponent,
+    DockviewComponent,
+} from '../../dockview/dockviewComponent';
 import {
     GroupviewPanelState,
     IGroupPanel,
@@ -198,13 +201,21 @@ describe('groupview', () => {
     let dockview: IDockviewComponent;
     let options: GroupOptions;
 
+    let removePanelMock: jest.Mock;
+    let removeGroupMock: jest.Mock;
+
     beforeEach(() => {
-        dockview = <IDockviewComponent>(<any>{
+        removePanelMock = jest.fn();
+        removeGroupMock = jest.fn();
+
+        dockview = (<Partial<DockviewComponent>>{
             options: {},
             createWatermarkComponent: () => new Watermark(),
             doSetGroupActive: jest.fn(),
             id: 'dockview-1',
-        });
+            removePanel: removePanelMock,
+            removeGroup: removeGroupMock,
+        }) as DockviewComponent;
 
         options = {
             tabHeight: 30,
@@ -412,4 +423,25 @@ describe('groupview', () => {
         );
         expect(viewQuery).toBeTruthy();
     });
+
+    test('closeAllPanels with panels', () => {
+        const panel1 = new TestPanel('panel1', jest.fn() as any);
+        const panel2 = new TestPanel('panel2', jest.fn() as any);
+        const panel3 = new TestPanel('panel3', jest.fn() as any);
+
+        groupview.model.openPanel(panel1);
+        groupview.model.openPanel(panel2);
+        groupview.model.openPanel(panel3);
+
+        groupview.model.closeAllPanels();
+
+        expect(removePanelMock).toBeCalledWith(panel1);
+        expect(removePanelMock).toBeCalledWith(panel2);
+        expect(removePanelMock).toBeCalledWith(panel3);
+    });
+
+    test('closeAllPanels with no panels', () => {
+        groupview.model.closeAllPanels();
+        expect(removeGroupMock).toBeCalledWith(groupview);
+    });
 });

packages/dockview/src/dockview/dockviewComponent.ts

@@ -221,11 +221,6 @@ export class DockviewComponent
             typeof options.orientation === 'string' &&
             this.options.orientation !== options.orientation;
 
-        // TODO support style update
-        // const hasStylesChanged =
-        //     typeof options.styles === 'object' &&
-        //     this.options.styles !== options.styles;
-
         this._options = { ...this.options, ...options };
 
         if (hasOrientationChanged) {
@@ -409,16 +404,14 @@ export class DockviewComponent
     }
 
     fireMouseEvent(event: LayoutMouseEvent): void {
-        switch (event.kind) {
+        if (event.kind === MouseEventKind.CONTEXT_MENU) {
-            case MouseEventKind.CONTEXT_MENU:
+            if (event.tab && event.panel) {
-                if (event.tab && event.panel) {
+                this._onTabContextMenu.fire({
-                    this._onTabContextMenu.fire({
+                    event: event.event,
-                        event: event.event,
+                    api: this._api,
-                        api: this._api,
+                    panel: event.panel,
-                        panel: event.panel,
+                });
-                    });
+            }
-                }
-                break;
         }
     }
 

packages/dockview/src/events.ts

@@ -42,8 +42,6 @@ export class Emitter<T> implements IDisposable {
                     listener(this._last);
                 }
 
-                const firstListener = this._listeners.length === 0;
-
                 this._listeners.push(listener);
 
                 return {

packages/dockview/src/gridview/gridview.ts

@@ -618,9 +618,10 @@ export class Gridview implements IDisposable {
             return node.view;
         }
 
+        const sibling = parent.children[0];
+
         if (pathToParent.length === 0) {
             // parent is root
-            const sibling = parent.children[0];
 
             if (sibling instanceof LeafNode) {
                 return node.view;
@@ -635,7 +636,6 @@ export class Gridview implements IDisposable {
         const [grandParent, ..._] = [...pathToParent].reverse();
         const [parentIndex, ...__] = [...rest].reverse();
 
-        const sibling = parent.children[0];
         const isSiblingVisible = parent.isChildVisible(0);
         parent.removeChild(0, sizing);
 

packages/dockview/src/groupview/panel/hostedPanel.ts

@@ -1,71 +0,0 @@
-import { IDisposable } from '../../lifecycle';
-import { IGroupPanel } from '../groupPanel';
-import { IRenderable } from '../types';
-
-export interface HostedPanelOptions {
-    id: string;
-    parent?: HTMLElement;
-}
-
-export class HostedPanel implements IRenderable, IDisposable {
-    private readonly _element: HTMLElement;
-
-    get element() {
-        return this._element;
-    }
-
-    get id() {
-        return this.panel.id;
-    }
-
-    constructor(
-        private readonly panel: IGroupPanel,
-        private readonly options: HostedPanelOptions
-    ) {
-        if (!options.parent) {
-            options.parent = document.getElementById('app') as HTMLElement;
-            options.parent.style.position = 'relative';
-        }
-
-        this._element = document.createElement('div');
-        this._element.style.visibility = 'hidden';
-        this._element.style.overflow = 'hidden';
-        // this._element.style.pointerEvents = 'none';
-        this._element.id = `webivew-${options.id}`;
-
-        options.parent.appendChild(this._element);
-    }
-
-    hide() {
-        this._element.style.visibility = 'hidden';
-    }
-
-    show() {
-        this._element.style.visibility = 'visible';
-    }
-
-    layout(
-        element: HTMLElement,
-        dimension?: { width: number; height: number }
-    ) {
-        if (!this.element || !this.element.parentElement) {
-            return;
-        }
-        const frameRect = element.getBoundingClientRect();
-        const containerRect =
-            this.element.parentElement.getBoundingClientRect();
-        this.element.style.position = 'absolute';
-        this.element.style.top = `${frameRect.top - containerRect.top}px`;
-        this.element.style.left = `${frameRect.left - containerRect.left}px`;
-        this.element.style.width = `${
-            dimension ? dimension.width : frameRect.width
-        }px`;
-        this.element.style.height = `${
-            dimension ? dimension.height : frameRect.height
-        }px`;
-    }
-
-    dispose() {
-        this._element.remove();
-    }
-}

packages/dockview/src/groupview/titlebar/tabsContainer.ts

@@ -261,12 +261,10 @@ export class TabsContainer
                     return;
                 }
 
-                switch (event.kind) {
+                if (event.kind === MouseEventKind.CLICK) {
-                    case MouseEventKind.CLICK:
+                    this.group.model.openPanel(panel, {
-                        this.group.model.openPanel(panel, {
+                        skipFocus: alreadyFocused,
-                            skipFocus: alreadyFocused,
+                    });
-                        });
-                        break;
                 }
             }),
             tabToAdd.onDrop((event) => {

packages/dockview/src/react/react.ts

@@ -92,7 +92,6 @@ export class ReactPart<P extends object, C extends object = {}>
             throw new Error('invalid operation: resource is already disposed');
         }
 
-        // TODO use a better check for isReactFunctionalComponent
         if (typeof this.component !== 'function') {
             /**
              * we know this isn't a React.FunctionComponent so throw an error here.
@@ -100,7 +99,7 @@ export class ReactPart<P extends object, C extends object = {}>
              * for the same reason, at least at this point we will emit a sensible stacktrace.
              */
             throw new Error(
-                'invalid operation: only functional components are supported'
+                'Invalid Operation. dockview only supports React Functional Components.'
             );
         }