feat: serialization of maximized views

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

@@ -265,11 +265,16 @@ export interface IViewDeserializer {
     fromJSON: (data: ISerializedLeafNode) => IGridView;
 }
 
+export interface SerializedNodeDescriptor {
+    location: number[];
+}
+
 export interface SerializedGridview<T> {
     root: SerializedGridObject<T>;
     width: number;
     height: number;
     orientation: Orientation;
+    maximizedNode?: SerializedNodeDescriptor;
 }
 
 export class Gridview implements IDisposable {
@@ -446,22 +451,51 @@ export class Gridview implements IDisposable {
     }
 
     public serialize(): SerializedGridview<any> {
+        const maximizedView = this.maximizedView();
+
+        let maxmizedViewLocation: number[] | undefined;
+
+        if (maximizedView) {
+            /**
+             * The minimum information we can get away with in order to serialize a maxmized view is it's location within the grid
+             * which is represented as a branch of indices
+             */
+            maxmizedViewLocation = getGridLocation(maximizedView.element);
+        }
+
         if (this.hasMaximizedView()) {
             /**
-             * do not persist maximized view state
-             * firstly exit any maximized views to ensure the correct dimensions are persisted
+             * the saved layout cannot be in its maxmized state otherwise all of the underlying
+             * view dimensions will be wrong
+             *
+             * To counteract this we temporaily remove the maximized view to compute the serialized output
+             * of the grid before adding back the maxmized view as to not alter the layout from the users
+             * perspective when `.toJSON()` is called
              */
             this.exitMaximizedView();
         }
 
         const root = serializeBranchNode(this.getView(), this.orientation);
 
-        return {
+        const resullt: SerializedGridview<any> = {
             root,
             width: this.width,
             height: this.height,
             orientation: this.orientation,
         };
+
+        if (maxmizedViewLocation) {
+            resullt.maximizedNode = {
+                location: maxmizedViewLocation,
+            };
+        }
+
+        if (maximizedView) {
+            // replace any maximzied view that was removed for serialization purposes
+            this.maximizeView(maximizedView);
+        }
+
+        return resullt;
     }
 
     public dispose(): void {
@@ -502,6 +536,24 @@ export class Gridview implements IDisposable {
             deserializer,
             height
         );
+
+        /**
+         * The deserialied layout must be positioned through this.layout(...)
+         * before any maximizedNode can be positioned
+         */
+        this.layout(json.width, json.height);
+
+        if (json.maximizedNode) {
+            const location = json.maximizedNode.location;
+
+            const [_, node] = this.getNode(location);
+
+            if (!(node instanceof LeafNode)) {
+                return;
+            }
+
+            this.maximizeView(node.view);
+        }
     }
 
     private _deserialize(

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

@@ -112,11 +112,10 @@ export const GridActions = (props: {
 
     const onSave = () => {
         if (props.api) {
-            console.log(props.api.toJSON());
-            localStorage.setItem(
-                'dv-demo-state',
-                JSON.stringify(props.api.toJSON())
-            );
+            const state = props.api.toJSON();
+            console.log(state);
+
+            localStorage.setItem('dv-demo-state', JSON.stringify(state));
         }
     };