Merge pull request #649 from mathuo/613-gap-between-panels-leads-to-some-panels-size-overflow-2

bug: fix dockview  option

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

@@ -5604,4 +5604,37 @@ describe('dockviewComponent', () => {
         query = queryByTestId(container, 'watermark-component');
         expect(query).toBeFalsy();
     });
+
+    describe('updateOptions', () => {
+        test('gap', () => {
+            const container = document.createElement('div');
+
+            const dockview = new DockviewComponent({
+                parentElement: container,
+                createComponent(options) {
+                    switch (options.name) {
+                        case 'default':
+                            return new PanelContentPartTest(
+                                options.id,
+                                options.name
+                            );
+                        default:
+                            throw new Error(`unsupported`);
+                    }
+                },
+                gap: 6,
+            });
+
+            expect(dockview.gap).toBe(6);
+
+            dockview.updateOptions({ gap: 10 });
+            expect(dockview.gap).toBe(10);
+
+            dockview.updateOptions({});
+            expect(dockview.gap).toBe(10);
+
+            dockview.updateOptions({ gap: 15 });
+            expect(dockview.gap).toBe(15);
+        });
+    });
 });

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

@@ -596,6 +596,10 @@ export class DockviewApi implements CommonApi<SerializedDockview> {
         return this.component.totalPanels;
     }
 
+    get gap(): number {
+        return this.component.gap;
+    }
+
     /**
      * Invoked when the active group changes. May be undefined if no group is active.
      */

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

@@ -186,6 +186,7 @@ export interface IDockviewComponent extends IBaseGrid<DockviewGroupPanel> {
     readonly totalPanels: number;
     readonly panels: IDockviewPanel[];
     readonly orientation: Orientation;
+    readonly gap: number;
     readonly onDidDrop: Event<DockviewDidDropEvent>;
     readonly onWillDrop: Event<DockviewWillDropEvent>;
     readonly onWillShowOverlay: Event<WillShowOverlayLocationEvent>;
@@ -349,6 +350,10 @@ export class DockviewComponent
         return this._api;
     }
 
+    get gap(): number {
+        return this.gridview.margin;
+    }
+
     constructor(options: DockviewComponentOptions) {
         super({
             proportionalLayout: true,
@@ -1033,7 +1038,11 @@ export class DockviewComponent
             this._rootDropTarget.setOverlayModel(options.rootOverlayModel!);
         }
 
-        if (this.gridview.margin !== 0 && options.gap === undefined) {
+        if (
+            //  if explicitly set as `undefined`
+            'gap' in options &&
+            options.gap === undefined
+        ) {
             this.gridview.margin = 0;
         }