feat: refactor dockview update logic

packages/dockview-demo/src/stories/dockview/dockview.params.stories.tsx

@@ -83,7 +83,7 @@ export const Params = (props: {
         const interval = setInterval(() => {
             const panel1 = gridApi.getPanel('panel1');
 
-            panel1.update({ params: { ticker: Date.now() } });
+            panel1.update({ params: { params: { ticker: Date.now() } } });
         }, 1000);
         return () => {
             clearInterval(interval);

packages/dockview-demo/src/stories/gridview/gridview.params.stories.tsx

@@ -0,0 +1,111 @@
+import {
+    GridviewApi,
+    GridviewReact,
+    GridviewReadyEvent,
+    IGridviewPanelProps,
+    Orientation,
+    PanelCollection,
+} from 'dockview';
+import * as React from 'react';
+import { Meta } from '@storybook/react';
+
+const components: PanelCollection<IGridviewPanelProps<any>> = {
+    default: (props) => {
+        return (
+            <div style={{ padding: '10px', height: '100%' }}>hello world</div>
+        );
+    },
+    ticker: (props: IGridviewPanelProps<{ ticker: number }>) => {
+        return (
+            <div style={{ padding: '10px', height: '100%' }}>
+                {`The current ticker value is ${props.params.ticker}`}
+            </div>
+        );
+    },
+};
+
+export const Params = (props: {
+    onEvent: (name: string) => void;
+    theme: string;
+    hideBorders: boolean;
+    disableAutoResizing: boolean;
+}) => {
+    const api = React.useRef<GridviewApi>();
+
+    React.useEffect(() => {
+        if (!api.current) {
+            return () => {
+                // noop
+            };
+        }
+
+        const gridApi = api.current;
+
+        const interval = setInterval(() => {
+            const panel1 = gridApi.getPanel('panel1');
+
+            panel1.update({ params: { ticker: Date.now() } });
+        }, 1000);
+        return () => {
+            clearInterval(interval);
+        };
+    }, [api]);
+
+    const onReady = (event: GridviewReadyEvent) => {
+        api.current = event.api;
+
+        event.api.onGridEvent((e) => props.onEvent(e.kind));
+
+        event.api.addPanel({
+            id: 'panel1',
+            component: 'ticker',
+            params: {
+                ticker: 0,
+            },
+        });
+        event.api.addPanel({
+            id: 'panel2',
+            component: 'default',
+        });
+        event.api.addPanel({
+            id: 'panel3',
+            component: 'default',
+        });
+    };
+
+    return (
+        <GridviewReact
+            orientation={Orientation.HORIZONTAL}
+            className={props.theme}
+            onReady={onReady}
+            components={components}
+            hideBorders={props.hideBorders}
+            disableAutoResizing={props.disableAutoResizing}
+        />
+    );
+};
+
+export default {
+    title: 'Library/Gridview/Params',
+    component: Params,
+    decorators: [
+        (Component) => {
+            document.body.style.padding = '0px';
+            return (
+                <div style={{ height: '100vh', fontFamily: 'Arial' }}>
+                    <Component />
+                </div>
+            );
+        },
+    ],
+    args: { theme: 'dockview-theme-light' },
+    argTypes: {
+        theme: {
+            control: {
+                type: 'select',
+                options: ['dockview-theme-dark', 'dockview-theme-light'],
+            },
+        },
+        onEvent: { action: 'onEvent' },
+    },
+} as Meta;

packages/dockview-demo/src/stories/splitview/splitview.deserialization.stories.tsx

@@ -9,7 +9,7 @@ import {
 import * as React from 'react';
 import { Meta } from '@storybook/react';
 
-const components: PanelCollection = {
+const components: PanelCollection<ISplitviewPanelProps> = {
     default: (props: ISplitviewPanelProps<{ color: string }>) => {
         const resize = () => {
             props.api.setSize({ size: 300 });

packages/dockview-demo/src/stories/splitview/splitview.params.stories.tsx

@@ -0,0 +1,109 @@
+import {
+    ISplitviewPanelProps,
+    Orientation,
+    PanelCollection,
+    SplitviewApi,
+    SplitviewReact,
+    SplitviewReadyEvent,
+} from 'dockview';
+import * as React from 'react';
+import { Meta } from '@storybook/react';
+
+const components: PanelCollection<ISplitviewPanelProps<any>> = {
+    default: (props) => {
+        return (
+            <div style={{ padding: '10px', height: '100%' }}>hello world</div>
+        );
+    },
+    ticker: (props: ISplitviewPanelProps<{ ticker: number }>) => {
+        return (
+            <div style={{ padding: '10px', height: '100%' }}>
+                {`The current ticker value is ${props.params.ticker}`}
+            </div>
+        );
+    },
+};
+
+export const Params = (props: {
+    onEvent: (name: string) => void;
+    theme: string;
+    hideBorders: boolean;
+    disableAutoResizing: boolean;
+}) => {
+    const api = React.useRef<SplitviewApi>();
+
+    React.useEffect(() => {
+        if (!api.current) {
+            return () => {
+                // noop
+            };
+        }
+
+        const gridApi = api.current;
+
+        const interval = setInterval(() => {
+            const panel1 = gridApi.getPanel('panel1');
+
+            panel1.update({ params: { ticker: Date.now() } });
+        }, 1000);
+        return () => {
+            clearInterval(interval);
+        };
+    }, [api]);
+
+    const onReady = (event: SplitviewReadyEvent) => {
+        api.current = event.api;
+
+        event.api.addPanel({
+            id: 'panel1',
+            component: 'ticker',
+            params: {
+                ticker: 0,
+            },
+        });
+        event.api.addPanel({
+            id: 'panel2',
+            component: 'default',
+        });
+        event.api.addPanel({
+            id: 'panel3',
+            component: 'default',
+        });
+    };
+
+    return (
+        <SplitviewReact
+            orientation={Orientation.HORIZONTAL}
+            className={props.theme}
+            onReady={onReady}
+            components={components}
+            hideBorders={props.hideBorders}
+            disableAutoResizing={props.disableAutoResizing}
+        />
+    );
+};
+
+export default {
+    title: 'Library/Splitview/Params',
+    component: Params,
+    decorators: [
+        (Component) => {
+            document.body.style.padding = '0px';
+            return (
+                <div style={{ height: '100vh', fontFamily: 'Arial' }}>
+                    <Component />
+                </div>
+            );
+        },
+    ],
+    args: { theme: 'dockview-theme-light' },
+    argTypes: {
+        theme: {
+            control: {
+                type: 'select',
+                options: ['dockview-theme-dark', 'dockview-theme-light'],
+            },
+        },
+        onEvent: { action: 'onEvent' },
+    },
+} as Meta;

packages/dockview/src/api/groupPanelApi.ts

@@ -58,11 +58,11 @@ export class DockviewPanelApiImpl
     }
 
     get title() {
-        return this.panel.params?.title || '';
+        return this.panel.title;
     }
 
     get suppressClosable() {
-        return !!this.panel.params?.suppressClosable;
+        return !!this.panel.suppressClosable;
     }
 
     get isGroupActive() {

packages/dockview/src/react/dockview/v2/defaultGroupPanelView.ts → packages/dockview/src/dockview/defaultGroupPanelView.ts

@@ -1,22 +1,19 @@
-import {
-    DefaultTab,
-    WrappedTab,
-} from '../../../dockview/components/tab/defaultTab';
+import { DefaultTab, WrappedTab } from './components/tab/defaultTab';
 import {
     GroupPanelPartInitParameters,
     IActionsRenderer,
     IContentRenderer,
     ITabRenderer,
-} from '../../../groupview/types';
-import { GroupviewPanel } from '../../../groupview/groupviewPanel';
-import { IDisposable } from '../../../lifecycle';
-import { PanelUpdateEvent } from '../../../panel/types';
+} from '../groupview/types';
+import { GroupviewPanel } from '../groupview/groupviewPanel';
+import { IDisposable } from '../lifecycle';
+import { GroupPanelUpdateEvent } from '../groupview/groupPanel';
 
 export interface IGroupPanelView extends IDisposable {
     readonly content: IContentRenderer;
     readonly tab?: ITabRenderer;
     readonly actions?: IActionsRenderer;
-    update(event: PanelUpdateEvent): void;
+    update(event: GroupPanelUpdateEvent): void;
     layout(width: number, height: number): void;
     init(params: GroupPanelPartInitParameters): void;
     updateParentGroup(group: GroupviewPanel, isPanelVisible: boolean): void;
@@ -65,19 +62,19 @@ export class DefaultGroupPanelView implements IGroupPanelView {
     }
 
     updateParentGroup(group: GroupviewPanel, isPanelVisible: boolean): void {
-        //
+        // TODO
     }
 
     layout(width: number, height: number): void {
         this.content.layout(width, height);
     }
 
-    update(event: PanelUpdateEvent): void {
+    update(event: GroupPanelUpdateEvent): void {
         this.content.update(event);
         this.tab.update(event);
     }
 
-    toJSON() {
+    toJSON(): {} {
         return {
             content: this.content.toJSON(),
             tab:

packages/dockview/src/dockview/dockviewComponent.ts

@@ -5,11 +5,8 @@ import {
 } from '../gridview/gridview';
 import { Position } from '../dnd/droptarget';
 import { tail, sequenceEquals } from '../array';
-import {
-    GroupPanel,
-    GroupviewPanelState,
-    IGroupPanel,
-} from '../groupview/groupPanel';
+import { GroupviewPanelState, IGroupPanel } from '../groupview/groupPanel';
+import { DockviewGroupPanel } from './dockviewGroupPanel';
 import {
     CompositeDisposable,
     IDisposable,
@@ -58,7 +55,7 @@ import {
     GroupPanelViewState,
 } from '../groupview/groupview';
 import { GroupviewPanel } from '../groupview/groupviewPanel';
-import { DefaultGroupPanelView } from '../react/dockview/v2/defaultGroupPanelView';
+import { DefaultGroupPanelView } from './defaultGroupPanelView';
 
 const nextGroupId = sequentialNumberGenerator();
 
@@ -595,7 +592,10 @@ export class DockviewComponent
             tab: this.createTabComponent(options.id, options.tabComponent),
         });
 
-        const panel: IGroupPanel = new GroupPanel(options.id, this._api);
+        const panel: IGroupPanel = new DockviewGroupPanel(
+            options.id,
+            this._api
+        );
         panel.init({
             view,
             title: options.title || options.id,
@@ -704,15 +704,8 @@ export class DockviewComponent
     ): void {
         let group: GroupviewPanel;
 
-        // if (
-        //     this.groups.size === 1 &&
-        //     Array.from(this.groups.values())[0].value.size === 0
-        // ) {
-        //     group = Array.from(this.groups.values())[0].value;
-        // } else {
         group! = this.createGroup();
         this.doAddGroup(group, location);
-        // }
 
         group.group.openPanel(panel);
     }
@@ -815,7 +808,6 @@ export class DockviewComponent
                 `Duplicate group id ${options?.id}. reassigning group id to avoid errors`
             );
             id = undefined;
-            // throw new Error(`duplicate group ${options.id}`);
         }
 
         if (!id) {