Merge pull request #357 from mathuo/356-nested-gridview-bug

bug: fix incorrect view disposal

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

@@ -4,6 +4,7 @@ import {
     Gridview,
     IGridView,
     IViewSize,
+    SerializedGridview,
     orthogonal,
 } from '../../gridview/gridview';
 import { Orientation, Sizing } from '../../splitview/splitview';
@@ -18,8 +19,9 @@ class MockGridview implements IGridView {
     >().event;
     element: HTMLElement = document.createElement('div');
 
-    constructor() {
+    constructor(private id?: string) {
         this.element.className = 'mock-grid-view';
+        this.element.id = `${id ?? ''}`;
     }
 
     layout(width: number, height: number): void {
@@ -27,6 +29,9 @@ class MockGridview implements IGridView {
     }
 
     toJSON(): object {
+        if (this.id) {
+            return { id: this.id };
+        }
         return {};
     }
 }
@@ -723,4 +728,36 @@ describe('gridview', () => {
             width: 1000,
         });
     });
+
+    test('re-structuring deep gridivew where a branchnode becomes of length one and is coverted to a leaf node', () => {
+        const gridview = new Gridview(
+            false,
+            { separatorBorder: '' },
+            Orientation.HORIZONTAL
+        );
+        gridview.layout(1000, 1000);
+
+        const view1 = new MockGridview('1');
+        const view2 = new MockGridview('2');
+        const view3 = new MockGridview('3');
+        const view4 = new MockGridview('4');
+        const view5 = new MockGridview('5');
+        const view6 = new MockGridview('6');
+
+        gridview.addView(view1, Sizing.Distribute, [0]);
+
+        gridview.addView(view2, Sizing.Distribute, [1]);
+        gridview.addView(view3, Sizing.Distribute, [1, 0]);
+        gridview.addView(view4, Sizing.Distribute, [1, 1, 0]);
+        gridview.addView(view5, Sizing.Distribute, [1, 1, 0, 0]);
+        gridview.addView(view6, Sizing.Distribute, [1, 1, 0, 0, 0]);
+
+        let el = gridview.element.querySelectorAll('.mock-grid-view');
+        expect(el.length).toBe(6);
+
+        gridview.remove(view2);
+
+        el = gridview.element.querySelectorAll('.mock-grid-view');
+        expect(el.length).toBe(5);
+    });
 });

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

@@ -750,6 +750,15 @@ export class Gridview implements IDisposable {
                 const child = sibling.children[i];
                 grandParent.addChild(child, child.size, parentIndex + i);
             }
+
+            /**
+             * clean down the branch node since we need to dipose of it and
+             * when .dispose() it called on a branch it will dispose of any
+             * views it is holding onto.
+             */
+            while (sibling.children.length > 0) {
+                sibling.removeChild(0);
+            }
         } else {
             // otherwise create a new leaf node and add that to the grandparent