Merge pull request #549 from mathuo/542-access-panel-contentcomponent-via-the-panel-api

feat: expose component string

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

@@ -5,7 +5,7 @@ describe('api', () => {
     let api: PanelApiImpl;
 
     beforeEach(() => {
-        api = new PanelApiImpl('dummy_id');
+        api = new PanelApiImpl('dummy_id', 'fake-component');
     });
 
     test('updateParameters', () => {

packages/dockview-core/src/__tests__/api/dockviewPanelApi.spec.ts

@@ -31,7 +31,8 @@ describe('groupPanelApi', () => {
         const cut = new DockviewPanelApiImpl(
             panel,
             group,
-            <DockviewComponent>accessor
+            <DockviewComponent>accessor,
+            'fake-component'
         );
 
         cut.setTitle('test_title');
@@ -59,7 +60,8 @@ describe('groupPanelApi', () => {
         const cut = new DockviewPanelApiImpl(
             <DockviewPanel>groupPanel,
             <DockviewGroupPanel>groupViewPanel,
-            <DockviewComponent>accessor
+            <DockviewComponent>accessor,
+            'fake-component'
         );
 
         cut.updateParameters({ keyA: 'valueA' });
@@ -89,7 +91,8 @@ describe('groupPanelApi', () => {
         const cut = new DockviewPanelApiImpl(
             <DockviewPanel>groupPanel,
             <DockviewGroupPanel>groupViewPanel,
-            <DockviewComponent>accessor
+            <DockviewComponent>accessor,
+            'fake-component'
         );
 
         let events = 0;

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

@@ -34,9 +34,18 @@ describe('dockviewPanel', () => {
         });
         const model = <IDockviewPanelModel>new panelModelMock();
 
-        const cut = new DockviewPanel('fake-id', accessor, api, group, model, {
+        const cut = new DockviewPanel(
+            'fake-id',
+            'fake-component',
+            undefined,
+            accessor,
+            api,
+            group,
+            model,
+            {
                 renderer: 'onlyWhenVisibile',
-        });
+            }
+        );
 
         let latestTitle: string | undefined = undefined;
 
@@ -84,9 +93,18 @@ describe('dockviewPanel', () => {
         });
         const model = <IDockviewPanelModel>new panelModelMock();
 
-        const cut = new DockviewPanel('fake-id', accessor, api, group, model, {
+        const cut = new DockviewPanel(
+            'fake-id',
+            'fake-component',
+            undefined,
+            accessor,
+            api,
+            group,
+            model,
+            {
                 renderer: 'onlyWhenVisibile',
-        });
+            }
+        );
 
         cut.init({ title: 'myTitle', params: {} });
         expect(cut.title).toBe('myTitle');
@@ -130,9 +148,18 @@ describe('dockviewPanel', () => {
         });
         const model = <IDockviewPanelModel>new panelModelMock();
 
-        const cut = new DockviewPanel('fake-id', accessor, api, group, model, {
+        const cut = new DockviewPanel(
+            'fake-id',
+            'fake-component',
+            undefined,
+            accessor,
+            api,
+            group,
+            model,
+            {
                 renderer: 'onlyWhenVisibile',
-        });
+            }
+        );
 
         cut.init({ params: {}, title: 'title' });
 
@@ -167,9 +194,18 @@ describe('dockviewPanel', () => {
         });
         const model = <IDockviewPanelModel>new panelModelMock();
 
-        const cut = new DockviewPanel('fake-id', accessor, api, group, model, {
+        const cut = new DockviewPanel(
+            'fake-id',
+            'fake-component',
+            undefined,
+            accessor,
+            api,
+            group,
+            model,
+            {
                 renderer: 'onlyWhenVisibile',
-        });
+            }
+        );
 
         expect(cut.params).toEqual(undefined);
 
@@ -205,9 +241,18 @@ describe('dockviewPanel', () => {
         });
         const model = <IDockviewPanelModel>new panelModelMock();
 
-        const cut = new DockviewPanel('fake-id', accessor, api, group, model, {
+        const cut = new DockviewPanel(
+            'fake-id',
+            'fake-component',
+            undefined,
+            accessor,
+            api,
+            group,
+            model,
+            {
                 renderer: 'onlyWhenVisibile',
-        });
+            }
+        );
 
         cut.api.setSize({ height: 123, width: 456 });
 
@@ -241,9 +286,18 @@ describe('dockviewPanel', () => {
         });
         const model = <IDockviewPanelModel>new panelModelMock();
 
-        const cut = new DockviewPanel('fake-id', accessor, api, group, model, {
+        const cut = new DockviewPanel(
+            'fake-id',
+            'fake-component',
+            undefined,
+            accessor,
+            api,
+            group,
+            model,
+            {
                 renderer: 'onlyWhenVisibile',
-        });
+            }
+        );
 
         cut.init({ params: { a: '1', b: '2' }, title: 'A title' });
         expect(cut.params).toEqual({ a: '1', b: '2' });

packages/dockview-core/src/api/dockviewGroupPanelApi.ts

@@ -42,7 +42,7 @@ export class DockviewGroupPanelApiImpl extends GridviewPanelApiImpl {
     }
 
     constructor(id: string, private readonly accessor: DockviewComponent) {
-        super(id);
+        super(id, '__dockviewgroup__');
 
         this.addDisposables(this._onDidLocationChange);
     }

packages/dockview-core/src/api/dockviewPanelApi.ts

@@ -63,6 +63,7 @@ export class DockviewPanelApiImpl
     implements DockviewPanelApi
 {
     private _group: DockviewGroupPanel;
+    private _tabComponent: string | undefined;
 
     readonly _onDidTitleChange = new Emitter<TitleEvent>();
     readonly onDidTitleChange = this._onDidTitleChange.event;
@@ -119,12 +120,20 @@ export class DockviewPanelApiImpl
         return this._group;
     }
 
+    get tabComponent(): string | undefined {
+        return this._tabComponent;
+    }
+
     constructor(
         private panel: DockviewPanel,
         group: DockviewGroupPanel,
-        private readonly accessor: DockviewComponent
+        private readonly accessor: DockviewComponent,
+        component: string,
+        tabComponent?: string
     ) {
-        super(panel.id);
+        super(panel.id, component);
+
+        this._tabComponent = tabComponent;
 
         this.initialize(panel);
 

packages/dockview-core/src/api/gridviewPanelApi.ts

@@ -44,8 +44,8 @@ export class GridviewPanelApiImpl
     private readonly _onDidSizeChange = new Emitter<SizeEvent>();
     readonly onDidSizeChange: Event<SizeEvent> = this._onDidSizeChange.event;
 
-    constructor(id: string, panel?: IPanel) {
+    constructor(id: string, component: string, panel?: IPanel) {
-        super(id);
+        super(id, component);
 
         this.addDisposables(
             this._onDidConstraintsChangeInternal,

packages/dockview-core/src/api/panelApi.ts

@@ -125,7 +125,7 @@ export class PanelApiImpl extends CompositeDisposable implements PanelApi {
         return this._height;
     }
 
-    constructor(readonly id: string) {
+    constructor(readonly id: string, readonly component: string) {
         super();
 
         this.addDisposables(

packages/dockview-core/src/api/paneviewPanelApi.ts

@@ -35,8 +35,8 @@ export class PaneviewPanelApiImpl
         this._pane = pane;
     }
 
-    constructor(id: string) {
+    constructor(id: string, component: string) {
-        super(id);
+        super(id, component);
 
         this.addDisposables(
             this._onDidExpansionChange,

packages/dockview-core/src/api/splitviewPanelApi.ts

@@ -45,8 +45,8 @@ export class SplitviewPanelApiImpl
         this._onDidSizeChange.event;
     //
 
-    constructor(id: string) {
+    constructor(id: string, component: string) {
-        super(id);
+        super(id, component);
 
         this.addDisposables(
             this._onDidConstraintsChangeInternal,

packages/dockview-core/src/dockview/deserializer.ts

@@ -49,6 +49,8 @@ export class DefaultDockviewDeserialzier implements IPanelDeserializer {
 
         const panel = new DockviewPanel(
             panelId,
+            contentComponent,
+            tabComponent,
             this.accessor,
             new DockviewApi(this.accessor),
             group,

packages/dockview-core/src/dockview/dockviewComponent.ts

@@ -2211,6 +2211,8 @@ export class DockviewComponent
 
         const panel = new DockviewPanel(
             options.id,
+            contentComponent,
+            tabComponent,
             this,
             this._api,
             group,

packages/dockview-core/src/dockview/dockviewPanel.ts

@@ -58,6 +58,8 @@ export class DockviewPanel
 
     constructor(
         public readonly id: string,
+        component: string,
+        tabComponent: string | undefined,
         private readonly accessor: DockviewComponent,
         private readonly containerApi: DockviewApi,
         group: DockviewGroupPanel,
@@ -68,7 +70,13 @@ export class DockviewPanel
         this._renderer = options.renderer;
         this._group = group;
 
-        this.api = new DockviewPanelApiImpl(this, this._group, accessor);
+        this.api = new DockviewPanelApiImpl(
+            this,
+            this._group,
+            accessor,
+            component,
+            tabComponent
+        );
 
         this.addDisposables(
             this.api.onActiveChange(() => {

packages/dockview-core/src/gridview/gridviewPanel.ts

@@ -140,7 +140,7 @@ export abstract class GridviewPanel<
         },
         api?: T
     ) {
-        super(id, component, api ?? <T>new GridviewPanelApiImpl(id));
+        super(id, component, api ?? <T>new GridviewPanelApiImpl(id, component));
 
         if (typeof options?.minimumWidth === 'number') {
             this._minimumWidth = options.minimumWidth;

packages/dockview-core/src/paneview/paneviewPanel.ts

@@ -164,7 +164,7 @@ export abstract class PaneviewPanel
         isExpanded: boolean,
         isHeaderVisible: boolean
     ) {
-        super(id, component, new PaneviewPanelApiImpl(id));
+        super(id, component, new PaneviewPanelApiImpl(id, component));
         this.api.pane = this; // TODO cannot use 'this' before 'super'
         this.api.initialize(this);
 

packages/dockview-core/src/splitview/splitviewPanel.ts

@@ -83,7 +83,7 @@ export abstract class SplitviewPanel
     }
 
     constructor(id: string, componentName: string) {
-        super(id, componentName, new SplitviewPanelApiImpl(id));
+        super(id, componentName, new SplitviewPanelApiImpl(id, componentName));
 
         this.api.initialize(this);