From 24536853d319c02e82c8a23225fb668f5c8564cb Mon Sep 17 00:00:00 2001
From: mathuo <6710312+mathuo@users.noreply.github.com>
Date: Fri, 15 Nov 2024 21:26:41 +0000
Subject: [PATCH] feat: persist grid gap

---
 .../dockview-core/src/dockview/dockviewComponent.ts  |  9 +++++++++
 .../react/dockview/demo-dockview/src/gridActions.tsx | 12 +++++++-----
 2 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/packages/dockview-core/src/dockview/dockviewComponent.ts b/packages/dockview-core/src/dockview/dockviewComponent.ts
index 5a20f5b84..dca03c01d 100644
--- a/packages/dockview-core/src/dockview/dockviewComponent.ts
+++ b/packages/dockview-core/src/dockview/dockviewComponent.ts
@@ -121,6 +121,7 @@ export interface SerializedDockview {
         width: number;
         orientation: Orientation;
     };
+    gap?: 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.gap = gap;
+        }
+
         return result;
     }
 
@@ -1232,6 +1239,8 @@ export class DockviewComponent
             throw new Error('root must be of type branch');
         }
 
+        this.gridview.margin = data.gap ?? 0;
+
         try {
             // take note of the existing dimensions
             const width = this.width;
diff --git a/packages/docs/sandboxes/react/dockview/demo-dockview/src/gridActions.tsx b/packages/docs/sandboxes/react/dockview/demo-dockview/src/gridActions.tsx
index 8feed27c9..bef781509 100644
--- a/packages/docs/sandboxes/react/dockview/demo-dockview/src/gridActions.tsx
+++ b/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>