feat: experimental work

Author: mathuo

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

@@ -854,8 +854,11 @@ export class DockviewApi implements CommonApi<SerializedDockview> {
     /**
      * Create a component from a serialized object.
      */
-    fromJSON(data: SerializedDockview): void {
-        this.component.fromJSON(data);
+    fromJSON(
+        data: SerializedDockview,
+        options?: { keepExistingPanels: boolean }
+    ): void {
+        this.component.fromJSON(data, options);
     }
 
     /**

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

@@ -147,6 +147,7 @@ type MoveGroupOrPanelOptions = {
         position: Position;
         index?: number;
     };
+    keepEmptyGroups?: boolean;
 };
 
 export interface FloatingGroupOptions {
@@ -219,6 +220,7 @@ export interface IDockviewComponent extends IBaseGrid<DockviewGroupPanel> {
             onWillClose?: (event: { id: string; window: Window }) => void;
         }
     ): Promise<boolean>;
+    fromJSON(data: any, options?: { keepExistingPanels: boolean }): void;
 }
 
 export class DockviewComponent
@@ -1219,7 +1221,41 @@ export class DockviewComponent
         return result;
     }
 
-    fromJSON(data: SerializedDockview): void {
+    fromJSON(
+        data: SerializedDockview,
+        options?: { keepExistingPanels: boolean }
+    ): void {
+        const existingPanels = new Map<string, IDockviewPanel>();
+        const tempGroup = this.createGroup();
+        this._groups.delete(tempGroup.api.id);
+
+        if (options?.keepExistingPanels) {
+            const newPanels = Object.keys(data.panels);
+
+            for (const panel of this.panels) {
+                if (newPanels.includes(panel.api.id)) {
+                    existingPanels.set(panel.api.id, panel);
+                }
+            }
+
+            this.movingLock(() => {
+                Array.from(existingPanels.values()).forEach((panel) => {
+                    this.moveGroupOrPanel({
+                        from: {
+                            groupId: panel.api.group.api.id,
+                            panelId: panel.api.id,
+                        },
+                        to: {
+                            group: tempGroup,
+                            position: 'center',
+                        },
+                        keepEmptyGroups: true,
+                    });
+                    // panel.api.moveTo({ group: tempGroup });
+                });
+            });
+        }
+
         this.clear();
 
         if (typeof data !== 'object' || data === null) {
@@ -1260,11 +1296,23 @@ export class DockviewComponent
                      * In running this section first we avoid firing lots of 'add' events in the event of a failure
                      * due to a corruption of input data.
                      */
-                    const panel = this._deserializer.fromJSON(
-                        panels[child],
-                        group
-                    );
-                    createdPanels.push(panel);
+
+                    const existingPanel = existingPanels.get(child);
+
+                    if (existingPanel) {
+                        this.movingLock(() => {
+                            tempGroup.model.removePanel(existingPanel);
+                        });
+
+                        createdPanels.push(existingPanel);
+                        existingPanel.updateFromStateModel(panels[child]);
+                    } else {
+                        const panel = this._deserializer.fromJSON(
+                            panels[child],
+                            group
+                        );
+                        createdPanels.push(panel);
+                    }
                 }
 
                 this._onDidAddGroup.fire(group);
@@ -1276,10 +1324,21 @@ export class DockviewComponent
                         typeof activeView === 'string' &&
                         activeView === panel.id;
 
-                    group.model.openPanel(panel, {
-                        skipSetActive: !isActive,
-                        skipSetGroupActive: true,
-                    });
+                    const hasExisting = existingPanels.has(panel.api.id);
+
+                    if (hasExisting) {
+                        this.movingLock(() => {
+                            group.model.openPanel(panel, {
+                                skipSetActive: !isActive,
+                                skipSetGroupActive: true,
+                            });
+                        });
+                    } else {
+                        group.model.openPanel(panel, {
+                            skipSetActive: !isActive,
+                            skipSetGroupActive: true,
+                        });
+                    }
                 }
 
                 if (!group.activePanel && group.panels.length > 0) {
@@ -1952,7 +2011,7 @@ export class DockviewComponent
                 throw new Error(`No panel with id ${sourceItemId}`);
             }
 
-            if (sourceGroup.model.size === 0) {
+            if (!options.keepEmptyGroups && sourceGroup.model.size === 0) {
                 // remove the group and do not set a new group as active
                 this.doRemoveGroup(sourceGroup, { skipActive: true });
             }

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

@@ -27,6 +27,7 @@ export interface IDockviewPanel extends IDisposable, IPanel {
         group: DockviewGroupPanel,
         options?: { skipSetActive?: boolean }
     ): void;
+    updateFromStateModel(state: GroupviewPanelState): void;
     init(params: IGroupPanelInitParameters): void;
     toJSON(): GroupviewPanelState;
     setTitle(title: string): void;
@@ -45,10 +46,10 @@ export class DockviewPanel
     private _title: string | undefined;
     private _renderer: DockviewPanelRenderer | undefined;
 
-    private readonly _minimumWidth: number | undefined;
-    private readonly _minimumHeight: number | undefined;
-    private readonly _maximumWidth: number | undefined;
-    private readonly _maximumHeight: number | undefined;
+    private _minimumWidth: number | undefined;
+    private _minimumHeight: number | undefined;
+    private _maximumWidth: number | undefined;
+    private _maximumHeight: number | undefined;
 
     get params(): Parameters | undefined {
         return this._params;
@@ -209,6 +210,20 @@ export class DockviewPanel
         });
     }
 
+    updateFromStateModel(state: GroupviewPanelState): void {
+        this._maximumHeight = state.maximumHeight;
+        this._minimumHeight = state.minimumHeight;
+        this._maximumWidth = state.maximumWidth;
+        this._minimumWidth = state.minimumWidth;
+
+        this.update({ params: state.params ?? {} });
+        this.setTitle(state.title ?? this.id);
+        this.setRenderer(state.renderer ?? this.accessor.renderer);
+
+        // state.contentComponent;
+        // state.tabComponent;
+    }
+
     public updateParentGroup(
         group: DockviewGroupPanel,
         options?: { skipSetActive?: boolean }

packages/docs/sandboxes/react/dockview/demo-dockview/src/app.tsx

@@ -35,6 +35,12 @@ const components = {
         const isDebug = React.useContext(DebugContext);
         const metadata = usePanelApiMetadata(props.api);
 
+        const [firstRender, setFirstRender] = React.useState<string>('');
+
+        React.useEffect(() => {
+            setFirstRender(new Date().toISOString());
+        }, []);
+
         return (
             <div
                 style={{
@@ -59,6 +65,8 @@ const components = {
                     {props.api.title}
                 </span>
 
+                <div>{firstRender}</div>
+
                 {isDebug && (
                     <div style={{ fontSize: '0.8em' }}>
                         <Option

packages/docs/sandboxes/react/dockview/demo-dockview/src/gridActions.tsx

@@ -110,6 +110,22 @@ export const GridActions = (props: {
         }
     };
 
+    const onLoad2 = () => {
+        const state = localStorage.getItem('dv-demo-state');
+        if (state) {
+            try {
+                props.api?.fromJSON(JSON.parse(state), {
+                    keepExistingPanels: true,
+                });
+
+                setGap(props.api?.gap ?? 0);
+            } catch (err) {
+                console.error('failed to load state', err);
+                localStorage.removeItem('dv-demo-state');
+            }
+        }
+    };
+
     const onSave = () => {
         if (props.api) {
             console.log(props.api.toJSON());
@@ -192,6 +208,9 @@ export const GridActions = (props: {
             <button className="text-button" onClick={onLoad}>
                 Load
             </button>
+            <button className="text-button" onClick={onLoad2}>
+                Load2
+            </button>
             <button className="text-button" onClick={onSave}>
                 Save
             </button>