fix: custom params parsed as 'param' react prop

packages/dockview/src/dockview/components/watermark/watermark.ts

@@ -1,6 +1,6 @@
 import {
     GroupPanelPartInitParameters,
-    WatermarkPart,
+    IWatermarkRenderer,
 } from '../../../groupview/types';
 import { ActionContainer } from '../../../actionbar/actionsContainer';
 import { addDisposableListener } from '../../../events';
@@ -8,7 +8,9 @@ import { toggleClass } from '../../../dom';
 import { CompositeDisposable } from '../../../lifecycle';
 import { GroupviewPanel } from '../../../groupview/groupviewPanel';
 
-export class Watermark extends CompositeDisposable implements WatermarkPart {
+export class Watermark
+    extends CompositeDisposable
+    implements IWatermarkRenderer {
     private _element: HTMLElement;
     private group: GroupviewPanel | undefined;
     private params: GroupPanelPartInitParameters | undefined;

packages/dockview/src/dockview/dockviewComponent.ts

@@ -22,7 +22,7 @@ import { timeoutAsPromise } from '../async';
 import {
     IContentRenderer,
     ITabRenderer,
-    WatermarkPart,
+    IWatermarkRenderer,
 } from '../groupview/types';
 import { debounce } from '../functions';
 import { sequentialNumberGenerator } from '../math';
@@ -101,7 +101,7 @@ export interface IDockviewComponent extends IBaseGrid<GroupviewPanel> {
     addPanel(options: AddPanelOptions): IGroupPanel;
     getGroupPanel: (id: string) => IGroupPanel | undefined;
     fireMouseEvent(event: LayoutMouseEvent): void;
-    createWatermarkComponent(): WatermarkPart;
+    createWatermarkComponent(): IWatermarkRenderer;
     setTabHeight(height: number | undefined): void;
     getTabHeight(): number | undefined;
     totalPanels: number;
@@ -607,7 +607,7 @@ export class DockviewComponent
         return panel;
     }
 
-    createWatermarkComponent(): WatermarkPart {
+    createWatermarkComponent(): IWatermarkRenderer {
         return createComponent(
             'watermark-id',
             'watermark-name',

packages/dockview/src/dockview/options.ts

@@ -6,7 +6,7 @@ import {
     IContentRenderer,
     ITabRenderer,
     WatermarkConstructor,
-    WatermarkPart,
+    IWatermarkRenderer,
 } from '../groupview/types';
 import { GroupviewPanel } from '../groupview/groupviewPanel';
 import { ISplitviewStyles, Orientation } from '../splitview/core/splitview';
@@ -15,7 +15,7 @@ import { FrameworkFactory } from '../types';
 export interface GroupPanelFrameworkComponentFactory {
     content: FrameworkFactory<IContentRenderer>;
     tab: FrameworkFactory<ITabRenderer>;
-    watermark: FrameworkFactory<WatermarkPart>;
+    watermark: FrameworkFactory<IWatermarkRenderer>;
 }
 
 export interface TabContextMenuEvent {

packages/dockview/src/gridview/basePanelView.ts

@@ -98,7 +98,13 @@ export abstract class BasePanelView<T extends PanelApiImpl>
     }
 
     update(params: PanelUpdateEvent) {
-        this.params = { ...this.params, params: params.params };
+        this.params = {
+            ...this.params,
+            params: {
+                ...this.params?.params,
+                ...params.params,
+            },
+        };
         this.part?.update(this.params.params);
     }
 

packages/dockview/src/groupview/groupview.ts

@@ -20,7 +20,7 @@ import { PanelInitParameters, PanelUpdateEvent } from '../panel/types';
 import { IGroupPanel } from './groupPanel';
 import { ContentContainer, IContentContainer } from './panel/content';
 import { ITabsContainer, TabsContainer } from './titlebar/tabsContainer';
-import { WatermarkPart } from './types';
+import { IWatermarkRenderer } from './types';
 import { GroupviewPanel } from './groupviewPanel';
 
 export enum GroupChangeKind {
@@ -120,7 +120,7 @@ export class Groupview extends CompositeDisposable implements IGroupview {
     private readonly contentContainer: IContentContainer;
     private readonly dropTarget: Droptarget;
     private _activePanel?: IGroupPanel;
-    private watermark?: WatermarkPart;
+    private watermark?: IWatermarkRenderer;
     private _isGroupActive = false;
 
     private mostRecentlyUsed: IGroupPanel[] = [];

packages/dockview/src/groupview/types.ts

@@ -24,11 +24,10 @@ export interface GroupPanelContentPartInitParameters
     tab: WrappedTab;
 }
 
-export interface WatermarkPart extends IDisposable {
+export interface IWatermarkRenderer extends IPanel {
-    readonly id: string;
+    readonly element: HTMLElement;
     init: (params: GroupPanelPartInitParameters) => void;
     updateParentGroup(group: GroupviewPanel, visible: boolean): void;
-    element: HTMLElement;
 }
 
 export interface ITabRenderer extends IPanel {
@@ -67,5 +66,5 @@ export interface PanelContentPartConstructor {
 }
 
 export interface WatermarkConstructor {
-    new (): WatermarkPart;
+    new (): IWatermarkRenderer;
 }

packages/dockview/src/react/dockview/reactContentPart.ts

@@ -121,7 +121,7 @@ export class ReactPanelContentPart implements IContentRenderer {
             this.parameters.params = params.params;
         }
 
-        this.part?.update(params.params);
+        this.part?.update({ params: this.parameters?.params || {} });
     }
 
     public updateParentGroup(

packages/dockview/src/react/dockview/reactHeaderPart.ts

@@ -11,7 +11,7 @@ import { IGroupPanelBaseProps } from './dockview';
 export class ReactPanelHeaderPart implements ITabRenderer {
     private _element: HTMLElement;
     private part?: ReactPart<IGroupPanelBaseProps>;
-    private params: GroupPanelPartInitParameters | undefined;
+    private parameters: GroupPanelPartInitParameters | undefined;
 
     get element() {
         return this._element;
@@ -30,7 +30,7 @@ export class ReactPanelHeaderPart implements ITabRenderer {
     }
 
     public init(parameters: GroupPanelPartInitParameters): void {
-        this.params = parameters;
+        this.parameters = parameters;
 
         this.part = new ReactPart(
             this.element,
@@ -45,9 +45,14 @@ export class ReactPanelHeaderPart implements ITabRenderer {
     }
 
     public update(event: PanelUpdateEvent) {
-        if (this.params) {
+        if (this.parameters) {
-            this.params.params = { ...this.params?.params, ...event.params };
+            this.parameters.params = {
+                ...this.parameters?.params,
+                ...event.params,
+            };
         }
+
+        this.part?.update({ params: this.parameters?.params || {} });
     }
 
     public toJSON() {

packages/dockview/src/react/dockview/reactWatermarkPart.ts

@@ -1,22 +1,24 @@
 import * as React from 'react';
 import {
     GroupPanelPartInitParameters,
-    WatermarkPart,
+    IWatermarkRenderer,
 } from '../../groupview/types';
 import { GroupviewPanel } from '../../groupview/groupviewPanel';
 import { ReactPart, ReactPortalStore } from '../react';
 import { IGroupPanelBaseProps } from './dockview';
+import { PanelUpdateEvent } from '../../panel/types';
 
 interface IWatermarkPanelProps extends IGroupPanelBaseProps {
     close: () => void;
 }
 
-export class ReactWatermarkPart implements WatermarkPart {
+export class ReactWatermarkPart implements IWatermarkRenderer {
     private _element: HTMLElement;
     private part?: ReactPart<IWatermarkPanelProps>;
     private _groupRef: { value: GroupviewPanel | undefined } = {
         value: undefined,
     };
+    private parameters: GroupPanelPartInitParameters | undefined;
 
     get element() {
         return this._element;
@@ -32,7 +34,9 @@ export class ReactWatermarkPart implements WatermarkPart {
         this._element.style.width = '100%';
     }
 
-    public init(parameters: GroupPanelPartInitParameters): void {
+    init(parameters: GroupPanelPartInitParameters): void {
+        this.parameters = parameters;
+
         this.part = new ReactPart(
             this.element,
             this.reactPortalStore,
@@ -52,25 +56,34 @@ export class ReactWatermarkPart implements WatermarkPart {
         );
     }
 
-    public toJSON() {
+    focus() {
+        // noop
+    }
+
+    update(params: PanelUpdateEvent) {
+        if (this.parameters) {
+            this.parameters.params = params.params;
+        }
+
+        this.part?.update({ params: this.parameters?.params || {} });
+    }
+
+    toJSON() {
         return {
             id: this.id,
         };
     }
 
-    public layout(width: number, height: number) {
+    layout(width: number, height: number) {
         // noop - retrieval from api
     }
 
-    public updateParentGroup(
+    updateParentGroup(group: GroupviewPanel, isPanelVisible: boolean): void {
-        group: GroupviewPanel,
-        isPanelVisible: boolean
-    ): void {
         // noop - retrieval from api
         this._groupRef.value = group;
     }
 
-    public dispose() {
+    dispose() {
         this.part?.dispose();
     }
 }