feat: persist grid gap

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

@@ -121,6 +121,7 @@ export interface SerializedDockview {
         width: number;
         orientation: Orientation;
     };
+    gridGap?: number;
     panels: Record<string, GroupviewPanelState>;
     activeGroup?: string;
     floatingGroups?: SerializedFloatingGroup[];
@@ -1216,6 +1217,12 @@ export class DockviewComponent
             result.popoutGroups = popoutGroups;
         }
 
+        const gap = this.gap;
+
+        if (gap !== 0) {
+            result.gridGap = gap;
+        }
+
         return result;
     }
 
@@ -1232,6 +1239,8 @@ export class DockviewComponent
             throw new Error('root must be of type branch');
         }
 
+        this.gridview.margin = data.gridGap ?? 0;
+
         try {
             // take note of the existing dimensions
             const width = this.width;

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

@@ -103,6 +103,8 @@ export const GridActions = (props: {
         if (state) {
             try {
                 props.api?.fromJSON(JSON.parse(state));
+
+                setGap(props.api?.gap ?? 0);
             } catch (err) {
                 console.error('failed to load state', err);
                 localStorage.removeItem('dv-demo-state');
@@ -154,10 +156,6 @@ export const GridActions = (props: {
 
     const [gap, setGap] = React.useState(0);
 
-    React.useEffect(() => {
-        props.api?.setGap(gap);
-    }, [gap, props.api]);
-
     return (
         <div className="action-container">
             <div className="button-group">
@@ -208,7 +206,11 @@ export const GridActions = (props: {
                     max={99}
                     step={1}
                     value={gap}
-                    onChange={(event) => setGap(Number(event.target.value))}
+                    onChange={(event) => {
+                        const value = Number(event.target.value);
+                        setGap(value);
+                        props.api?.setGap(value);
+                    }}
                 />
             </div>
         </div>