Merge pull request #105 from mathuo/104-api-enhancements

feat: api enhancements

packages/dockview-demo/src/layout-grid/activitybar.tsx

@@ -23,10 +23,10 @@ export const Activitybar = (props: IGridviewPanelProps) => {
 
         const sidebarPanel = api.getPanel('sidebar');
         if (sidebarPanel.api.isVisible) {
-            api.setVisible(sidebarPanel, false);
+            sidebarPanel.api.setVisible(false);
         } else {
             event.preventDefault(); // prevent focus
-            api.setVisible(sidebarPanel, true);
+            sidebarPanel.api.setVisible(true);
             sidebarPanel.focus();
         }
     };

packages/dockview-demo/src/layout-grid/panels/exampleFunctions.tsx

@@ -30,8 +30,10 @@ export const ExampleFunctions = (
                     isPanelVisible: x.isVisible,
                 }));
             }),
-            props.api.onFocusEvent(() => {
-                input.current.focus();
+            props.api.onDidFocusChange(({ isFocused }) => {
+                if (isFocused) {
+                    input.current.focus();
+                }
             })
         );
 

packages/dockview-demo/src/layout-grid/sidebar.tsx

@@ -64,8 +64,10 @@ export const Sidebar = (props: IGridviewPanelProps) => {
             props.api.onDidVisibilityChange((event) => {
                 console.log(event);
             }),
-            props.api.onFocusEvent(() => {
-                api.current.focus();
+            props.api.onDidFocusChange(({ isFocused }) => {
+                if (isFocused) {
+                    api.current.focus();
+                }
             })
         );
 

packages/dockview-demo/src/layout-grid/splitPanel.tsx

@@ -29,8 +29,10 @@ const components = {
                 props.api.onDidActiveChange((event) => {
                     setActive(event.isActive);
                 }),
-                props.api.onFocusEvent(() => {
-                    ref.current.focus();
+                props.api.onDidFocusChange(({ isFocused }) => {
+                    if (isFocused) {
+                        ref.current.focus();
+                    }
                 })
             );
 
@@ -65,8 +67,10 @@ export const SplitPanel = (props: IDockviewPanelProps) => {
             props.api.onDidDimensionsChange((event) => {
                 api.current?.layout(event.width, event.height - 25);
             }),
-            props.api.onFocusEvent(() => {
-                api.current.focus();
+            props.api.onDidFocusChange(({ isFocused }) => {
+                if (isFocused) {
+                    api.current.focus();
+                }
             })
         );
 

packages/dockview-demo/src/panels/splitview/splitview.tsx

@@ -227,7 +227,7 @@ export const Common = (
 
     const toggleVisibility = (i: number) => () => {
         const panel = api.current.panels[i];
-        api.current.setVisible(panel, !panel.api.isVisible);
+        panel.api.setVisible(panel.api.isVisible);
         setDimensions((dimensions) => ({
             ...dimensions,
             visibility: api.current.panels.map((_) => _.api.isVisible),

packages/dockview-demo/src/services/widgets.tsx

@@ -161,11 +161,11 @@ export const Activitybar = (props: IGridviewPanelProps) => {
             const sidebarPanel = api.getPanel('sidebar');
             if (sidebarPanel.api.isVisible) {
                 if (!alwaysOpen && selectedActive) {
-                    api.setVisible(sidebarPanel, false);
+                    sidebarPanel.api.setVisible(false);
                 }
             } else {
                 event.preventDefault(); // prevent focus
-                api.setVisible(sidebarPanel, true);
+                sidebarPanel.api.setVisible(true);
                 sidebarPanel.focus();
             }
 
@@ -234,7 +234,7 @@ export const Activitybar = (props: IGridviewPanelProps) => {
 
         const sidebarPanel = api.getPanel('sidebar');
         if (!sidebarPanel.api.isVisible) {
-            api.setVisible(sidebarPanel, true);
+            sidebarPanel.api.setVisible(true);
             sidebarPanel.focus();
         }
 

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

@@ -41,11 +41,11 @@ describe('api', () => {
         expect(api.height).toBe(0);
         expect(api.width).toBe(0);
 
-        api._onDidPanelDimensionChange.fire({ height: 10, width: 20 });
+        api._onDidDimensionChange.fire({ height: 10, width: 20 });
         expect(api.height).toBe(10);
         expect(api.width).toBe(20);
 
-        api._onDidPanelDimensionChange.fire({ height: 20, width: 10 });
+        api._onDidDimensionChange.fire({ height: 20, width: 10 });
         expect(api.height).toBe(20);
         expect(api.width).toBe(10);
     });

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

@@ -100,10 +100,6 @@ export class SplitviewApi implements CommonApi<SerializedSplitview> {
         this.component.removePanel(panel, sizing);
     }
 
-    setVisible(panel: ISplitviewPanel, isVisible: boolean): void {
-        this.component.setVisible(panel, isVisible);
-    }
-
     focus(): void {
         this.component.focus();
     }
@@ -112,10 +108,6 @@ export class SplitviewApi implements CommonApi<SerializedSplitview> {
         return this.component.getPanel(id);
     }
 
-    setActive(panel: ISplitviewPanel): void {
-        this.component.setActive(panel);
-    }
-
     layout(width: number, height: number): void {
         return this.component.layout(width, height);
     }
@@ -310,18 +302,6 @@ export class GridviewApi implements CommonApi<SerializedGridview> {
         return this.component.getPanel(id);
     }
 
-    toggleVisibility(panel: IGridviewPanel): void {
-        this.component.toggleVisibility(panel);
-    }
-
-    setVisible(panel: IGridviewPanel, visible: boolean): void {
-        this.component.setVisible(panel, visible);
-    }
-
-    setActive(panel: IGridviewPanel): void {
-        this.component.setActive(panel);
-    }
-
     fromJSON(data: SerializedGridview): void {
         return this.component.fromJSON(data);
     }

packages/dockview/src/api/panelApi.ts

@@ -23,8 +23,6 @@ export interface PanelApi {
     readonly onDidFocusChange: Event<FocusEvent>;
     readonly onDidVisibilityChange: Event<VisibilityEvent>;
     readonly onDidActiveChange: Event<ActiveEvent>;
-    readonly onFocusEvent: Event<void>;
-    //
     setVisible(isVisible: boolean): void;
     setActive(): void;
     /**
@@ -63,11 +61,10 @@ export class PanelApiImpl extends CompositeDisposable implements PanelApi {
     private _width = 0;
     private _height = 0;
 
-    readonly _onDidPanelDimensionChange =
-        new Emitter<PanelDimensionChangeEvent>({
-            replay: true,
-        });
-    readonly onDidDimensionsChange = this._onDidPanelDimensionChange.event;
+    readonly _onDidDimensionChange = new Emitter<PanelDimensionChangeEvent>({
+        replay: true,
+    });
+    readonly onDidDimensionsChange = this._onDidDimensionChange.event;
     //
     readonly _onDidChangeFocus = new Emitter<FocusEvent>({
         replay: true,
@@ -121,7 +118,7 @@ export class PanelApiImpl extends CompositeDisposable implements PanelApi {
         super();
 
         this.addDisposables(
-            this._onDidPanelDimensionChange,
+            this._onDidDimensionChange,
             this._onDidChangeFocus,
             this._onDidVisibilityChange,
             this._onDidActiveChange,

packages/dockview/src/dockview/dockviewComponent.ts

@@ -669,7 +669,7 @@ export class DockviewComponent
         }
 
         const view = new GroupPanel(this, id, options);
-        view.init({ params: {}, containerApi: <any>null }); // required to initialized .part and allow for correct disposal of group
+        view.init({ params: {}, accessor: <any>null }); // required to initialized .part and allow for correct disposal of group
 
         if (!this._groups.has(view.id)) {
             const disposable = new CompositeDisposable(

packages/dockview/src/dockview/dockviewGroupPanel.ts

@@ -169,7 +169,7 @@ export class DockviewGroupPanel
 
     public layout(width: number, height: number) {
         // the obtain the correct dimensions of the content panel we must deduct the tab height
-        this.api._onDidPanelDimensionChange.fire({
+        this.api._onDidDimensionChange.fire({
             width,
             height: height - (this.group.model.header.height || 0),
         });

packages/dockview/src/gridview/basePanelView.ts

@@ -90,7 +90,7 @@ export abstract class BasePanelView<T extends PanelApiImpl>
     layout(width: number, height: number) {
         this._width = width;
         this._height = height;
-        this.api._onDidPanelDimensionChange.fire({ width, height });
+        this.api._onDidDimensionChange.fire({ width, height });
 
         if (this.part) {
             if (this._params) {

packages/dockview/src/gridview/gridviewComponent.ts

@@ -22,7 +22,6 @@ import {
     IGridviewPanel,
 } from './gridviewPanel';
 import { BaseComponentOptions } from '../panel/types';
-import { GridviewApi } from '../api/component.api';
 import { Orientation, Sizing } from '../splitview/core/splitview';
 import { createComponent } from '../panel/componentFactory';
 import { Emitter, Event } from '../events';
@@ -64,7 +63,6 @@ export interface IGridviewComponent extends IBaseGrid<GridviewPanel> {
     updateOptions(options: Partial<GridviewComponentUpdateOptions>): void;
     addPanel(options: AddComponentOptions): IGridviewPanel;
     removePanel(panel: IGridviewPanel, sizing?: Sizing): void;
-    toggleVisibility(panel: IGridviewPanel): void;
     focus(): void;
     fromJSON(serializedGridview: SerializedGridview): void;
     toJSON(): SerializedGridview;
@@ -170,10 +168,6 @@ export class GridviewComponent
         });
     }
 
-    toggleVisibility(panel: GridviewPanel) {
-        this.setVisible(panel, !this.isVisible(panel));
-    }
-
     focus() {
         this.activeGroup?.focus();
     }
@@ -217,7 +211,7 @@ export class GridviewComponent
                         maximumHeight: data.maximumHeight,
                         priority: data.priority,
                         snap: !!data.snap,
-                        containerApi: new GridviewApi(this),
+                        accessor: this,
                         isVisible: node.visible,
                     })
                 );
@@ -322,7 +316,7 @@ export class GridviewComponent
             maximumHeight: options.maximumHeight,
             priority: options.priority,
             snap: !!options.snap,
-            containerApi: new GridviewApi(this),
+            accessor: this,
             isVisible: true,
         });
 

packages/dockview/src/gridview/gridviewPanel.ts

@@ -1,5 +1,8 @@
 import { PanelInitParameters } from '../panel/types';
-import { IGridPanelComponentView } from './gridviewComponent';
+import {
+    GridviewComponent,
+    IGridPanelComponentView,
+} from './gridviewComponent';
 import { FunctionOrValue } from '../types';
 import {
     BasePanelView,
@@ -10,7 +13,6 @@ import { GridviewPanelApiImpl } from '../api/gridviewPanelApi';
 import { LayoutPriority } from '../splitview/core/splitview';
 import { Emitter, Event } from '../events';
 import { IViewSize } from './gridview';
-import { GridviewApi } from '../api/component.api';
 
 export interface GridviewInitParameters extends PanelInitParameters {
     minimumWidth?: number;
@@ -19,7 +21,7 @@ export interface GridviewInitParameters extends PanelInitParameters {
     maximumHeight?: number;
     priority?: LayoutPriority;
     snap?: boolean;
-    containerApi: GridviewApi;
+    accessor: GridviewComponent;
     isVisible?: boolean;
 }
 
@@ -132,12 +134,12 @@ export abstract class GridviewPanel
             this._onDidChange,
             this.api.onVisibilityChange((event) => {
                 const { isVisible } = event;
-                const { containerApi } = this._params as GridviewInitParameters;
-                containerApi.setVisible(this, isVisible);
+                const { accessor } = this._params as GridviewInitParameters;
+                accessor.setVisible(this, isVisible);
             }),
             this.api.onActiveChange(() => {
-                const { containerApi } = this._params as GridviewInitParameters;
-                containerApi.setActive(this);
+                const { accessor } = this._params as GridviewInitParameters;
+                accessor.setActive(this);
             }),
             this.api.onDidConstraintsChangeInternal((event) => {
                 if (

packages/dockview/src/react/gridview/view.ts

@@ -1,3 +1,4 @@
+import { GridviewApi } from '../../api/component.api';
 import {
     GridviewPanel,
     GridviewInitParameters,
@@ -24,8 +25,9 @@ export class ReactGridPanelView extends GridviewPanel {
             {
                 params: this._params?.params || {},
                 api: this.api,
-                containerApi: (this._params as GridviewInitParameters)
-                    .containerApi,
+                containerApi: new GridviewApi(
+                    (this._params as GridviewInitParameters).accessor
+                ),
             }
         );
     }

packages/dockview/src/react/splitview/view.ts

@@ -1,3 +1,4 @@
+import { SplitviewApi } from '../../api/component.api';
 import { PanelViewInitParameters } from '../../splitview/core/options';
 import { SplitviewPanel } from '../../splitview/splitviewPanel';
 import { ReactPart, ReactPortalStore } from '../react';
@@ -21,8 +22,9 @@ export class ReactPanelView extends SplitviewPanel {
             {
                 params: this._params?.params || {},
                 api: this.api,
-                containerApi: (this._params as PanelViewInitParameters)
-                    .containerApi,
+                containerApi: new SplitviewApi(
+                    (this._params as PanelViewInitParameters).accessor
+                ),
             }
         );
     }

packages/dockview/src/splitview/core/options.ts

@@ -2,14 +2,14 @@ import { IPanel, PanelInitParameters } from '../../panel/types';
 import { IView, SplitViewOptions, LayoutPriority } from './splitview';
 import { FrameworkFactory } from '../../types';
 import { SplitviewPanel } from '../splitviewPanel';
-import { SplitviewApi } from '../../api/component.api';
+import { SplitviewComponent } from '../splitviewComponent';
 
 export interface PanelViewInitParameters extends PanelInitParameters {
     minimumSize?: number;
     maximumSize?: number;
     snap?: boolean;
     priority?: LayoutPriority;
-    containerApi: SplitviewApi;
+    accessor: SplitviewComponent;
 }
 
 export interface ISerializableView extends IView, IPanel {

packages/dockview/src/splitview/splitviewComponent.ts

@@ -14,7 +14,6 @@ import {
 import { SplitviewComponentOptions } from './core/options';
 import { BaseComponentOptions } from '../panel/types';
 import { Emitter, Event } from '../events';
-import { SplitviewApi } from '../api/component.api';
 import { SplitviewPanel, ISplitviewPanel } from './splitviewPanel';
 import { createComponent } from '../panel/componentFactory';
 
@@ -70,7 +69,6 @@ export interface ISplitviewComponent extends IDisposable {
     fromJSON(serializedSplitview: SerializedSplitview): void;
     focus(): void;
     getPanel(id: string): ISplitviewPanel | undefined;
-    setActive(view: ISplitviewPanel, skipFocus?: boolean): void;
     removePanel(panel: ISplitviewPanel, sizing?: Sizing): void;
     setVisible(panel: ISplitviewPanel, visible: boolean): void;
     movePanel(from: number, to: number): void;
@@ -279,7 +277,7 @@ export class SplitviewComponent
             maximumSize: options.maximumSize,
             snap: options.snap,
             priority: options.priority,
-            containerApi: new SplitviewApi(this),
+            accessor: this,
         });
 
         const size: Sizing | number =
@@ -380,7 +378,7 @@ export class SplitviewComponent
                             maximumSize: data.maximumSize,
                             snap: view.snap,
                             priority: view.priority,
-                            containerApi: new SplitviewApi(this),
+                            accessor: this,
                         });
                     });
 

packages/dockview/src/splitview/splitviewPanel.ts

@@ -85,14 +85,12 @@ export abstract class SplitviewPanel
             this._onDidChange,
             this.api.onVisibilityChange((event) => {
                 const { isVisible } = event;
-                const { containerApi } = this
-                    ._params as PanelViewInitParameters;
-                containerApi.setVisible(this, isVisible);
+                const { accessor } = this._params as PanelViewInitParameters;
+                accessor.setVisible(this, isVisible);
             }),
             this.api.onActiveChange(() => {
-                const { containerApi } = this
-                    ._params as PanelViewInitParameters;
-                containerApi.setActive(this);
+                const { accessor } = this._params as PanelViewInitParameters;
+                accessor.setActive(this);
             }),
             this.api.onDidConstraintsChangeInternal((event) => {
                 if (