feat: panel.api.setSize links to group setSize

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

@@ -1,6 +1,6 @@
+import { DockviewPanelApiImpl, TitleEvent } from '../../api/dockviewPanelApi';
 import { DockviewComponent } from '../../dockview/dockviewComponent';
-import { DockviewPanelApiImpl, TitleEvent } from '../../api/groupPanelApi';
+import { IDockviewPanel } from '../../dockview/dockviewPanel';
-import { IDockviewPanel } from '../../groupview/groupPanel';
 import { GroupPanel } from '../../groupview/groupviewPanel';
 
 describe('groupPanelApi', () => {

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

@@ -13,16 +13,16 @@ import { CompositeDisposable } from '../../lifecycle';
 import {
     GroupPanelUpdateEvent,
     GroupviewPanelState,
-    IDockviewPanel,
     IGroupPanelInitParameters,
-} from '../../groupview/groupPanel';
+} from '../../groupview/types';
 import { IGroupPanelView } from '../../dockview/defaultGroupPanelView';
+import { DefaultTab } from '../../dockview/components/tab/defaultTab';
+import { Emitter } from '../../events';
+import { IDockviewPanel } from '../../dockview/dockviewPanel';
 import {
     DockviewPanelApi,
     DockviewPanelApiImpl,
-} from '../../api/groupPanelApi';
+} from '../../api/dockviewPanelApi';
-import { DefaultTab } from '../../dockview/components/tab/defaultTab';
-import { Emitter } from '../../events';
 
 class PanelContentPartTest implements IContentRenderer {
     element: HTMLElement = document.createElement('div');

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

@@ -4,7 +4,7 @@ import { IGroupPanelView } from '../../dockview/defaultGroupPanelView';
 import { DockviewPanel } from '../../dockview/dockviewPanel';
 import { GroupPanel } from '../../groupview/groupviewPanel';
 
-describe('dockviewGroupPanel', () => {
+describe('dockviewPanel', () => {
     test('update title', () => {
         const dockviewApiMock = jest.fn<DockviewApi, []>(() => {
             return {
@@ -94,4 +94,29 @@ describe('dockviewGroupPanel', () => {
 
         expect(cut.params).toEqual({ variableA: 'A', variableB: 'B' });
     });
+
+    test('setSize propagates to underlying group', () => {
+        const dockviewApiMock = jest.fn<DockviewApi, []>(() => {
+            return {} as any;
+        });
+        const accessorMock = jest.fn<DockviewComponent, []>(() => {
+            return {} as any;
+        });
+        const groupMock = jest.fn<GroupPanel, []>(() => {
+            return {
+                api: {
+                    setSize: jest.fn(),
+                },
+            } as any;
+        });
+        const api = new dockviewApiMock();
+        const accessor = new accessorMock();
+        const group = new groupMock();
+        const cut = new DockviewPanel('fake-id', accessor, api, group);
+
+        cut.api.setSize({ height: 123, width: 456 });
+
+        expect(group.api.setSize).toBeCalledWith({ height: 123, width: 456 });
+        expect(group.api.setSize).toBeCalledTimes(1);
+    });
 });

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

@@ -1,9 +1,8 @@
 import { DockviewComponent } from '../../dockview/dockviewComponent';
 import {
     GroupviewPanelState,
-    IDockviewPanel,
     IGroupPanelInitParameters,
-} from '../../groupview/groupPanel';
+} from '../../groupview/types';
 import {
     GroupPanelPartInitParameters,
     IContentRenderer,
@@ -12,7 +11,6 @@ import {
 } from '../../groupview/types';
 import { PanelUpdateEvent } from '../../panel/types';
 import { GroupOptions, Groupview } from '../../groupview/groupview';
-import { DockviewPanelApi } from '../../api/groupPanelApi';
 import {
     DefaultGroupPanelView,
     IGroupPanelView,
@@ -21,6 +19,8 @@ import { GroupPanel } from '../../groupview/groupviewPanel';
 import { fireEvent } from '@testing-library/dom';
 import { LocalSelectionTransfer, PanelTransfer } from '../../dnd/dataTransfer';
 import { CompositeDisposable } from '../../lifecycle';
+import { DockviewPanelApi } from '../../api/dockviewPanelApi';
+import { IDockviewPanel } from '../../dockview/dockviewPanel';
 
 enum GroupChangeKind2 {
     ADD_PANEL,

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

@@ -8,8 +8,8 @@ import {
 import { CompositeDisposable } from '../../../lifecycle';
 import { PanelUpdateEvent } from '../../../panel/types';
 import { IGroupPanelView } from '../../../dockview/defaultGroupPanelView';
-import { IDockviewPanel } from '../../../groupview/groupPanel';
 import { GroupPanel } from '../../../groupview/groupviewPanel';
+import { IDockviewPanel } from '../../../dockview/dockviewPanel';
 
 class TestContentRenderer
     extends CompositeDisposable

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

@@ -15,7 +15,7 @@ import {
     SerializedGridview,
 } from '../gridview/gridviewComponent';
 import { IGridviewPanel } from '../gridview/gridviewPanel';
-import { IDockviewPanel } from '../groupview/groupPanel';
+
 import {
     AddPaneviewComponentOptions,
     SerializedPaneview,
@@ -33,6 +33,7 @@ import { ISplitviewPanel } from '../splitview/splitviewPanel';
 import { GroupPanel, IGroupviewPanel } from '../groupview/groupviewPanel';
 import { Emitter, Event } from '../events';
 import { PaneviewDropEvent } from '../react';
+import { IDockviewPanel } from '../dockview/dockviewPanel';
 
 export interface CommonApi<T = any> {
     readonly height: number;

packages/dockview/src/api/dockviewPanelApi.ts

@@ -1,8 +1,8 @@
 import { Emitter, Event } from '../events';
 import { GridviewPanelApiImpl, GridviewPanelApi } from './gridviewPanelApi';
-import { IDockviewPanel } from '../groupview/groupPanel';
 import { GroupPanel } from '../groupview/groupviewPanel';
 import { MutableDisposable } from '../lifecycle';
+import { IDockviewPanel } from '../dockview/dockviewPanel';
 
 export interface TitleEvent {
     readonly title: string;
@@ -37,13 +37,13 @@ export class DockviewPanelApiImpl
     private readonly _onDidGroupChange = new Emitter<void>();
     readonly onDidGroupChange = this._onDidGroupChange.event;
 
-    private disposable = new MutableDisposable();
+    private readonly disposable = new MutableDisposable();
 
-    get title() {
+    get title(): string {
         return this.panel.title;
     }
 
-    get isGroupActive() {
+    get isGroupActive(): boolean {
         return !!this.group?.isActive;
     }
 
@@ -84,14 +84,11 @@ export class DockviewPanelApiImpl
         );
     }
 
-    public setTitle(title: string) {
+    public setTitle(title: string): void {
         this._onDidTitleChange.fire({ title });
     }
 
     public close(): void {
-        if (!this.group) {
+        this.group.model.closePanel(this.panel);
-            throw new Error(`panel ${this.id} has no group`);
-        }
-        return this.group.model.closePanel(this.panel);
     }
 }

packages/dockview/src/api/gridviewPanelApi.ts

@@ -32,22 +32,19 @@ export class GridviewPanelApiImpl
     extends PanelApiImpl
     implements GridviewPanelApi
 {
-    readonly _onDidConstraintsChangeInternal =
+    private readonly _onDidConstraintsChangeInternal =
         new Emitter<GridConstraintChangeEvent2>();
     readonly onDidConstraintsChangeInternal: Event<GridConstraintChangeEvent2> =
         this._onDidConstraintsChangeInternal.event;
-    //
 
     readonly _onDidConstraintsChange = new Emitter<GridConstraintChangeEvent>({
         replay: true,
     });
     readonly onDidConstraintsChange: Event<GridConstraintChangeEvent> =
         this._onDidConstraintsChange.event;
-    //
 
-    readonly _onDidSizeChange = new Emitter<SizeEvent>();
+    private readonly _onDidSizeChange = new Emitter<SizeEvent>();
     readonly onDidSizeChange: Event<SizeEvent> = this._onDidSizeChange.event;
-    //
 
     constructor(id: string, panel?: IPanel) {
         super(id);
@@ -63,11 +60,11 @@ export class GridviewPanelApiImpl
         }
     }
 
-    public setConstraints(value: GridConstraintChangeEvent) {
+    public setConstraints(value: GridConstraintChangeEvent): void {
         this._onDidConstraintsChangeInternal.fire(value);
     }
 
-    public setSize(event: SizeEvent) {
+    public setSize(event: SizeEvent): void {
         this._onDidSizeChange.fire(event);
     }
 }

packages/dockview/src/dnd/droptarget.ts

@@ -4,6 +4,7 @@ import { CompositeDisposable } from '../lifecycle';
 import { DragAndDropObserver } from './dnd';
 import { clamp } from '../math';
 import { Direction } from '../gridview/baseComponentGridview';
+import { isBooleanValue } from '../types';
 
 function numberOrFallback(maybeNumber: any, fallback: number): number {
     return typeof maybeNumber === 'number' ? maybeNumber : fallback;
@@ -33,12 +34,6 @@ export interface DroptargetEvent {
 
 export type Position = 'top' | 'bottom' | 'left' | 'right' | 'center';
 
-function isBooleanValue(
-    canDisplayOverlay: CanDisplayOverlay
-): canDisplayOverlay is boolean {
-    return typeof canDisplayOverlay === 'boolean';
-}
-
 export type CanDisplayOverlay =
     | boolean
     | ((dragEvent: DragEvent, state: Position) => boolean);
@@ -103,6 +98,7 @@ export class Droptarget extends CompositeDisposable {
                     );
 
                     if (quadrant === null) {
+                        // no drop target should be displayed
                         this.removeDropTarget();
                         return;
                     }
@@ -288,7 +284,7 @@ export class Droptarget extends CompositeDisposable {
         );
     }
 
-    private removeDropTarget() {
+    private removeDropTarget(): void {
         if (this.target) {
             this._state = undefined;
             this.element.removeChild(this.target);

packages/dockview/src/dockview/defaultGroupPanelView.ts

@@ -6,7 +6,7 @@ import {
 } from '../groupview/types';
 import { GroupPanel } from '../groupview/groupviewPanel';
 import { IDisposable } from '../lifecycle';
-import { GroupPanelUpdateEvent } from '../groupview/groupPanel';
+import { GroupPanelUpdateEvent } from '../groupview/types';
 
 export interface IGroupPanelView extends IDisposable {
     readonly content: IContentRenderer;

packages/dockview/src/dockview/deserializer.ts

@@ -1,5 +1,6 @@
-import { GroupviewPanelState, IDockviewPanel } from '../groupview/groupPanel';
+import { GroupviewPanelState } from '../groupview/types';
 import { GroupPanel } from '../groupview/groupviewPanel';
+import { IDockviewPanel } from './dockviewPanel';
 
 export interface IPanelDeserializer {
     fromJSON(panelData: GroupviewPanelState, group: GroupPanel): IDockviewPanel;

packages/dockview/src/dockview/dockviewComponent.ts

@@ -6,8 +6,8 @@ import {
 } from '../gridview/gridview';
 import { directionToPosition, Droptarget, Position } from '../dnd/droptarget';
 import { tail, sequenceEquals } from '../array';
-import { GroupviewPanelState, IDockviewPanel } from '../groupview/groupPanel';
+import { GroupviewPanelState } from '../groupview/types';
-import { DockviewPanel } from './dockviewPanel';
+import { DockviewPanel, IDockviewPanel } from './dockviewPanel';
 import { CompositeDisposable } from '../lifecycle';
 import { Event, Emitter } from '../events';
 import { Watermark } from './components/watermark/watermark';

packages/dockview/src/dockview/dockviewPanel.ts

@@ -1,17 +1,35 @@
 import { DockviewApi } from '../api/component.api';
-import { DockviewPanelApiImpl } from '../api/groupPanelApi';
+import {
+    DockviewPanelApi,
+    DockviewPanelApiImpl,
+} from '../api/dockviewPanelApi';
 import {
     GroupPanelUpdateEvent,
     GroupviewPanelState,
-    IDockviewPanel,
     IGroupPanelInitParameters,
-} from '../groupview/groupPanel';
+} from '../groupview/types';
 import { GroupPanel } from '../groupview/groupviewPanel';
-import { CompositeDisposable, MutableDisposable } from '../lifecycle';
+import {
-import { Parameters } from '../panel/types';
+    CompositeDisposable,
+    IDisposable,
+    MutableDisposable,
+} from '../lifecycle';
+import { IPanel, Parameters } from '../panel/types';
 import { IGroupPanelView } from './defaultGroupPanelView';
 import { DockviewComponent } from './dockviewComponent';
 
+export interface IDockviewPanel extends IDisposable, IPanel {
+    readonly view?: IGroupPanelView;
+    readonly group: GroupPanel;
+    readonly api: DockviewPanelApi;
+    readonly title: string;
+    readonly params: Record<string, any> | undefined;
+    updateParentGroup(group: GroupPanel, isGroupActive: boolean): void;
+    init(params: IGroupPanelInitParameters): void;
+    toJSON(): GroupviewPanelState;
+    update(event: GroupPanelUpdateEvent): void;
+}
+
 export class DockviewPanel
     extends CompositeDisposable
     implements IDockviewPanel
@@ -26,11 +44,11 @@ export class DockviewPanel
 
     private _title: string;
 
-    get params() {
+    get params(): Parameters | undefined {
         return this._params;
     }
 
-    get title() {
+    get title(): string {
         return this._title;
     }
 
@@ -57,6 +75,11 @@ export class DockviewPanel
         this.addDisposables(
             this.api.onActiveChange(() => {
                 accessor.setActivePanel(this);
+            }),
+            this.api.onDidSizeChange((event) => {
+                // forward the resize event to the group since if you want to resize a panel
+                // you are actually just resizing the panels parent which is the group
+                this.group.api.setSize(event);
             })
         );
     }
@@ -74,7 +97,7 @@ export class DockviewPanel
         });
     }
 
-    focus() {
+    focus(): void {
         this.api._onFocusEvent.fire();
     }
 
@@ -90,7 +113,7 @@ export class DockviewPanel
         };
     }
 
-    setTitle(title: string) {
+    setTitle(title: string): void {
         const didTitleChange = title !== this._params?.title;
 
         if (didTitleChange) {
@@ -129,7 +152,7 @@ export class DockviewPanel
         });
     }
 
-    public updateParentGroup(group: GroupPanel, isGroupActive: boolean) {
+    public updateParentGroup(group: GroupPanel, isGroupActive: boolean): void {
         this._group = group;
         this.api.group = group;
 
@@ -148,7 +171,7 @@ export class DockviewPanel
         );
     }
 
-    public layout(width: number, height: number) {
+    public layout(width: number, height: number): void {
         // the obtain the correct dimensions of the content panel we must deduct the tab height
         this.api._onDidDimensionChange.fire({
             width,
@@ -158,7 +181,7 @@ export class DockviewPanel
         this.view?.layout(width, height);
     }
 
-    public dispose() {
+    public dispose(): void {
         this.api.dispose();
         this.mutableDisposable.dispose();
 

packages/dockview/src/dockview/options.ts

@@ -1,7 +1,6 @@
 import { DockviewApi } from '../api/component.api';
 import { Direction } from '../gridview/baseComponentGridview';
 import { IGridView } from '../gridview/gridview';
-import { IDockviewPanel } from '../groupview/groupPanel';
 import {
     IContentRenderer,
     ITabRenderer,
@@ -15,6 +14,7 @@ import { DockviewDropTargets } from '../groupview/dnd';
 import { PanelTransfer } from '../dnd/dataTransfer';
 import { IGroupControlRenderer } from '../react/dockview/groupControlsRenderer';
 import { Position } from '../dnd/droptarget';
+import { IDockviewPanel } from './dockviewPanel';
 
 export interface GroupPanelFrameworkComponentFactory {
     content: FrameworkFactory<IContentRenderer>;

packages/dockview/src/groupview/groupPanel.ts

@@ -1,41 +0,0 @@
-import { DockviewPanelApi } from '../api/groupPanelApi';
-import { IDisposable } from '../lifecycle';
-import { HeaderPartInitParameters } from './types';
-import {
-    IPanel,
-    PanelInitParameters,
-    PanelUpdateEvent,
-    Parameters,
-} from '../panel/types';
-import { GroupPanel } from './groupviewPanel';
-import { IGroupPanelView } from '../dockview/defaultGroupPanelView';
-
-export interface IGroupPanelInitParameters
-    extends PanelInitParameters,
-        HeaderPartInitParameters {
-    view: IGroupPanelView;
-}
-
-export type GroupPanelUpdateEvent = PanelUpdateEvent<{
-    params?: Parameters;
-    title?: string;
-}>;
-
-export interface IDockviewPanel extends IDisposable, IPanel {
-    readonly view?: IGroupPanelView;
-    readonly group: GroupPanel;
-    readonly api: DockviewPanelApi;
-    readonly title: string;
-    readonly params: Record<string, any> | undefined;
-    updateParentGroup(group: GroupPanel, isGroupActive: boolean): void;
-    init(params: IGroupPanelInitParameters): void;
-    toJSON(): GroupviewPanelState;
-    update(event: GroupPanelUpdateEvent): void;
-}
-
-export interface GroupviewPanelState {
-    id: string;
-    view?: any;
-    title: string;
-    params?: { [key: string]: any };
-}

packages/dockview/src/groupview/groupview.ts

@@ -8,13 +8,13 @@ import { IGridPanelView } from '../gridview/baseComponentGridview';
 import { IViewSize } from '../gridview/gridview';
 import { CompositeDisposable, IDisposable } from '../lifecycle';
 import { PanelInitParameters, PanelUpdateEvent } from '../panel/types';
-import { IDockviewPanel } from './groupPanel';
 import { ContentContainer, IContentContainer } from './panel/content';
 import { ITabsContainer, TabsContainer } from './titlebar/tabsContainer';
 import { IWatermarkRenderer } from './types';
 import { GroupPanel } from './groupviewPanel';
 import { DockviewDropTargets } from './dnd';
 import { IGroupControlRenderer } from '../react/dockview/groupControlsRenderer';
+import { IDockviewPanel } from '../dockview/dockviewPanel';
 
 export interface DndService {
     canDisplayOverlay(

packages/dockview/src/groupview/groupviewPanel.ts

@@ -6,7 +6,7 @@ import {
 } from '../api/gridviewPanelApi';
 import { Groupview, GroupOptions, IHeader } from './groupview';
 import { GridviewPanel, IGridviewPanel } from '../gridview/gridviewPanel';
-import { IDockviewPanel } from './groupPanel';
+import { IDockviewPanel } from '../dockview/dockviewPanel';
 
 export interface IGroupviewPanel extends IGridviewPanel {
     model: Groupview;

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

@@ -5,7 +5,7 @@ import {
 } from '../../lifecycle';
 import { Emitter, Event } from '../../events';
 import { trackFocus } from '../../dom';
-import { IDockviewPanel } from '../groupPanel';
+import { IDockviewPanel } from '../../dockview/dockviewPanel';
 
 export interface IContentContainer extends IDisposable {
     onDidFocus: Event<void>;

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

@@ -5,11 +5,11 @@ import {
 } from '../../lifecycle';
 import { addDisposableListener, Emitter, Event } from '../../events';
 import { ITab, Tab } from '../tab';
-import { IDockviewPanel } from '../groupPanel';
 import { DockviewComponent } from '../../dockview/dockviewComponent';
 import { GroupPanel } from '../groupviewPanel';
 import { VoidContainer } from './voidContainer';
 import { toggleClass } from '../../dom';
+import { IDockviewPanel } from '../../dockview/dockviewPanel';
 
 export interface TabDropIndexEvent {
     event: DragEvent;

packages/dockview/src/groupview/types.ts

@@ -1,9 +1,15 @@
 import { IDockviewComponent } from '../dockview/dockviewComponent';
-import { DockviewPanelApi } from '../api/groupPanelApi';
+import { DockviewPanelApi } from '../api/dockviewPanelApi';
-import { PanelInitParameters, IPanel } from '../panel/types';
+import {
+    PanelInitParameters,
+    IPanel,
+    PanelUpdateEvent,
+    Parameters,
+} from '../panel/types';
 import { DockviewApi } from '../api/component.api';
 import { GroupPanel } from './groupviewPanel';
 import { Event } from '../events';
+import { IGroupPanelView } from '../dockview/defaultGroupPanelView';
 
 export interface IRenderable {
     id: string;
@@ -67,3 +73,21 @@ export interface PanelContentPartConstructor {
 export interface WatermarkConstructor {
     new (): IWatermarkRenderer;
 }
+
+export interface IGroupPanelInitParameters
+    extends PanelInitParameters,
+        HeaderPartInitParameters {
+    view: IGroupPanelView;
+}
+
+export type GroupPanelUpdateEvent = PanelUpdateEvent<{
+    params?: Parameters;
+    title?: string;
+}>;
+
+export interface GroupviewPanelState {
+    id: string;
+    view?: any;
+    title: string;
+    params?: { [key: string]: any };
+}

packages/dockview/src/index.ts

@@ -21,7 +21,7 @@ export { PaneviewComponentOptions } from './paneview/options';
 export * from './gridview/gridviewPanel';
 export * from './splitview/splitviewPanel';
 export * from './paneview/paneviewPanel';
-export * from './groupview/groupPanel';
+export * from './groupview/types';
 
 export * from './react'; // TODO: should be conditional on whether user wants the React wrappers
 
@@ -40,7 +40,7 @@ export {
     GridviewPanelApi,
     GridConstraintChangeEvent,
 } from './api/gridviewPanelApi';
-export { TitleEvent, DockviewPanelApi } from './api/groupPanelApi';
+export { TitleEvent, DockviewPanelApi } from './api/dockviewPanelApi';
 export {
     PanelSizeEvent,
     PanelConstraintChangeEvent,

packages/dockview/src/react/deserializer.ts

@@ -1,6 +1,6 @@
 import { DockviewComponent } from '../dockview/dockviewComponent';
-import { GroupviewPanelState, IDockviewPanel } from '../groupview/groupPanel';
+import { GroupviewPanelState } from '../groupview/types';
-import { DockviewPanel } from '../dockview/dockviewPanel';
+import { DockviewPanel, IDockviewPanel } from '../dockview/dockviewPanel';
 import { IPanelDeserializer } from '../dockview/deserializer';
 import { createComponent } from '../panel/componentFactory';
 import { DockviewApi } from '../api/component.api';

packages/dockview/src/react/dockview/dockview.tsx

@@ -10,7 +10,7 @@ import {
     DockviewDndOverlayEvent,
     GroupPanelFrameworkComponentFactory,
 } from '../../dockview/options';
-import { DockviewPanelApi } from '../../api/groupPanelApi';
+import { DockviewPanelApi } from '../../api/dockviewPanelApi';
 import { ReactPortalStore, usePortalsLifecycle } from '../react';
 import { DockviewApi } from '../../api/component.api';
 import { IWatermarkPanelProps, ReactWatermarkPart } from './reactWatermarkPart';

packages/dockview/src/react/dockview/groupControlsRenderer.ts

@@ -8,7 +8,7 @@ import {
     IDisposable,
     MutableDisposable,
 } from '../../lifecycle';
-import { IDockviewPanel } from '../../groupview/groupPanel';
+import { IDockviewPanel } from '../../dockview/dockviewPanel';
 
 export interface IDockviewGroupControlProps {
     api: GroupviewPanelApi;

packages/dockview/src/types.ts

@@ -7,3 +7,7 @@ export interface FrameworkFactory<T> {
 }
 
 export type FunctionOrValue<T> = (() => T) | T;
+
+export function isBooleanValue(value: any): value is boolean {
+    return typeof value === 'boolean';
+}