From 4eff83e9a043b5572d1f88a80c4a5c711c2fe1b8 Mon Sep 17 00:00:00 2001 From: mathuo <6710312+mathuo@users.noreply.github.com> Date: Mon, 10 Mar 2025 21:35:17 +0000 Subject: [PATCH] bug: remove element after dispose --- .../gridview/gridviewComponent.spec.ts | 60 +++++++++---------- .../paneview/paneviewComponent.spec.ts | 1 + .../splitview/splitviewComponent.spec.ts | 1 + .../src/paneview/paneviewComponent.ts | 2 + .../src/splitview/splitviewComponent.ts | 2 + 5 files changed, 36 insertions(+), 30 deletions(-) diff --git a/packages/dockview-core/src/__tests__/gridview/gridviewComponent.spec.ts b/packages/dockview-core/src/__tests__/gridview/gridviewComponent.spec.ts index 5f9febc5c..3063c692d 100644 --- a/packages/dockview-core/src/__tests__/gridview/gridviewComponent.spec.ts +++ b/packages/dockview-core/src/__tests__/gridview/gridviewComponent.spec.ts @@ -58,7 +58,7 @@ describe('gridview', () => { const gridview = new GridviewComponent(container, { proportionalLayout: false, orientation: Orientation.VERTICAL, - createComponent: (options) => { + createComponent: (options) => { switch (options.name) { case 'default': return new TestGridview(options.id, options.name); @@ -84,7 +84,7 @@ describe('gridview', () => { const gridview = new GridviewComponent(container, { proportionalLayout: false, orientation: Orientation.VERTICAL, - createComponent: (options) => { + createComponent: (options) => { switch (options.name) { case 'default': return new TestGridview(options.id, options.name); @@ -121,7 +121,7 @@ describe('gridview', () => { const gridview = new GridviewComponent(container, { proportionalLayout: false, orientation: Orientation.VERTICAL, - createComponent: (options) => { + createComponent: (options) => { switch (options.name) { case 'default': return new TestGridview(options.id, options.name); @@ -188,7 +188,7 @@ describe('gridview', () => { const gridview = new GridviewComponent(container, { proportionalLayout: false, orientation: Orientation.VERTICAL, - createComponent: (options) => { + createComponent: (options) => { switch (options.name) { case 'default': return new TestGridview(options.id, options.name); @@ -322,7 +322,7 @@ describe('gridview', () => { const gridview = new GridviewComponent(container, { proportionalLayout: false, orientation: Orientation.VERTICAL, - createComponent: (options) => { + createComponent: (options) => { switch (options.name) { case 'default': return new TestGridview(options.id, options.name); @@ -365,7 +365,7 @@ describe('gridview', () => { const gridview = new GridviewComponent(container, { proportionalLayout: false, orientation: Orientation.VERTICAL, - createComponent: (options) => { + createComponent: (options) => { switch (options.name) { case 'default': return new TestGridview(options.id, options.name); @@ -495,7 +495,7 @@ describe('gridview', () => { const gridview = new GridviewComponent(container, { proportionalLayout: false, orientation: Orientation.VERTICAL, - createComponent: (options) => { + createComponent: (options) => { switch (options.name) { case 'default': return new TestGridview(options.id, options.name); @@ -524,14 +524,14 @@ describe('gridview', () => { gridview.dispose(); - expect(container.childNodes.length).toBe(0); + expect(container.children.length).toBe(0); }); test('#1/VERTICAL', () => { const gridview = new GridviewComponent(container, { proportionalLayout: true, orientation: Orientation.VERTICAL, - createComponent: (options) => { + createComponent: (options) => { switch (options.name) { case 'default': return new TestGridview(options.id, options.name); @@ -596,7 +596,7 @@ describe('gridview', () => { const gridview = new GridviewComponent(container, { proportionalLayout: true, orientation: Orientation.HORIZONTAL, - createComponent: (options) => { + createComponent: (options) => { switch (options.name) { case 'default': return new TestGridview(options.id, options.name); @@ -661,7 +661,7 @@ describe('gridview', () => { const gridview = new GridviewComponent(container, { proportionalLayout: true, orientation: Orientation.HORIZONTAL, - createComponent: (options) => { + createComponent: (options) => { switch (options.name) { case 'default': return new TestGridview(options.id, options.name); @@ -744,7 +744,7 @@ describe('gridview', () => { const gridview = new GridviewComponent(container, { proportionalLayout: true, orientation: Orientation.HORIZONTAL, - createComponent: (options) => { + createComponent: (options) => { switch (options.name) { case 'default': return new TestGridview(options.id, options.name); @@ -845,7 +845,7 @@ describe('gridview', () => { const gridview = new GridviewComponent(container, { proportionalLayout: true, orientation: Orientation.VERTICAL, - createComponent: (options) => { + createComponent: (options) => { switch (options.name) { case 'default': return new TestGridview(options.id, options.name); @@ -946,7 +946,7 @@ describe('gridview', () => { const gridview = new GridviewComponent(container, { proportionalLayout: false, orientation: Orientation.VERTICAL, - createComponent: (options) => { + createComponent: (options) => { switch (options.name) { case 'default': return new TestGridview(options.id, options.name); @@ -1047,7 +1047,7 @@ describe('gridview', () => { const gridview = new GridviewComponent(container, { proportionalLayout: true, orientation: Orientation.VERTICAL, - createComponent: (options) => { + createComponent: (options) => { switch (options.name) { case 'default': return new TestGridview(options.id, options.name); @@ -1178,7 +1178,7 @@ describe('gridview', () => { const gridview = new GridviewComponent(container, { proportionalLayout: true, orientation: Orientation.VERTICAL, - createComponent: (options) => { + createComponent: (options) => { switch (options.name) { case 'default': return new TestGridview(options.id, options.name); @@ -1309,7 +1309,7 @@ describe('gridview', () => { const gridview = new GridviewComponent(container, { proportionalLayout: true, orientation: Orientation.VERTICAL, - createComponent: (options) => { + createComponent: (options) => { switch (options.name) { case 'default': return new TestGridview(options.id, options.name); @@ -1442,7 +1442,7 @@ describe('gridview', () => { const gridview = new GridviewComponent(container, { proportionalLayout: true, orientation: Orientation.HORIZONTAL, - createComponent: (options) => { + createComponent: (options) => { switch (options.name) { case 'default': return new TestGridview(options.id, options.name); @@ -1573,7 +1573,7 @@ describe('gridview', () => { const gridview = new GridviewComponent(container, { proportionalLayout: false, orientation: Orientation.HORIZONTAL, - createComponent: (options) => { + createComponent: (options) => { switch (options.name) { case 'default': return new TestGridview(options.id, options.name); @@ -1704,7 +1704,7 @@ describe('gridview', () => { const gridview = new GridviewComponent(container, { proportionalLayout: true, orientation: Orientation.HORIZONTAL, - createComponent: (options) => { + createComponent: (options) => { switch (options.name) { case 'default': return new TestGridview(options.id, options.name); @@ -1838,7 +1838,7 @@ describe('gridview', () => { const gridview = new GridviewComponent(container, { proportionalLayout: false, orientation: Orientation.VERTICAL, - createComponent: (options) => { + createComponent: (options) => { switch (options.name) { case 'default': return new TestGridview(options.id, options.name); @@ -1875,7 +1875,7 @@ describe('gridview', () => { const gridview = new GridviewComponent(container, { proportionalLayout: false, orientation: Orientation.VERTICAL, - createComponent: (options) => { + createComponent: (options) => { switch (options.name) { case 'default': return new TestGridview(options.id, options.name); @@ -1911,7 +1911,7 @@ describe('gridview', () => { const gridview = new GridviewComponent(container, { proportionalLayout: false, orientation: Orientation.VERTICAL, - createComponent: (options) => { + createComponent: (options) => { switch (options.name) { case 'default': return new TestGridview(options.id, options.name); @@ -1956,7 +1956,7 @@ describe('gridview', () => { const gridview = new GridviewComponent(container, { proportionalLayout: true, orientation: Orientation.HORIZONTAL, - createComponent: (options) => { + createComponent: (options) => { switch (options.name) { case 'default': return new TestGridview(options.id, options.name); @@ -2085,7 +2085,7 @@ describe('gridview', () => { const gridview = new GridviewComponent(container, { proportionalLayout: true, orientation: Orientation.VERTICAL, - createComponent: (options) => { + createComponent: (options) => { switch (options.name) { case 'default': return new TestGridview(options.id, options.name); @@ -2218,7 +2218,7 @@ describe('gridview', () => { const gridview = new GridviewComponent(container, { proportionalLayout: true, orientation: Orientation.VERTICAL, - createComponent: (options) => { + createComponent: (options) => { switch (options.name) { case 'default': return new TestGridview(options.id, options.name); @@ -2500,7 +2500,7 @@ describe('gridview', () => { const gridview = new GridviewComponent(container, { proportionalLayout: true, orientation: Orientation.VERTICAL, - createComponent: (options) => { + createComponent: (options) => { switch (options.name) { case 'default': return new TestGridview(options.id, options.name); @@ -2864,7 +2864,7 @@ describe('gridview', () => { const gridview = new GridviewComponent(container, { proportionalLayout: true, orientation: Orientation.HORIZONTAL, - createComponent: (options) => { + createComponent: (options) => { switch (options.name) { case 'default': return new TestGridview(options.id, options.name); @@ -2881,7 +2881,7 @@ describe('gridview', () => { const gridview = new GridviewComponent(container, { proportionalLayout: true, orientation: Orientation.HORIZONTAL, - createComponent: (options) => { + createComponent: (options) => { switch (options.name) { case 'default': return new TestGridview(options.id, options.name); @@ -2899,7 +2899,7 @@ describe('gridview', () => { const gridview = new GridviewComponent(container, { proportionalLayout: true, orientation: Orientation.HORIZONTAL, - createComponent: (options) => { + createComponent: (options) => { switch (options.name) { case 'default': return new TestGridview(options.id, options.name); diff --git a/packages/dockview-core/src/__tests__/paneview/paneviewComponent.spec.ts b/packages/dockview-core/src/__tests__/paneview/paneviewComponent.spec.ts index 8cfc7fc2e..a30f73fd5 100644 --- a/packages/dockview-core/src/__tests__/paneview/paneviewComponent.spec.ts +++ b/packages/dockview-core/src/__tests__/paneview/paneviewComponent.spec.ts @@ -86,6 +86,7 @@ describe('componentPaneview', () => { paneview.dispose(); expect(container.parentElement).toBe(root); + expect(container.children.length).toBe(0); }); test('vertical panels', () => { diff --git a/packages/dockview-core/src/__tests__/splitview/splitviewComponent.spec.ts b/packages/dockview-core/src/__tests__/splitview/splitviewComponent.spec.ts index 90d0b3986..6c034091c 100644 --- a/packages/dockview-core/src/__tests__/splitview/splitviewComponent.spec.ts +++ b/packages/dockview-core/src/__tests__/splitview/splitviewComponent.spec.ts @@ -46,6 +46,7 @@ describe('componentSplitview', () => { splitview.dispose(); expect(container.parentElement).toBe(root); + expect(container.children.length).toBe(0); }); test('event leakage', () => { diff --git a/packages/dockview-core/src/paneview/paneviewComponent.ts b/packages/dockview-core/src/paneview/paneviewComponent.ts index b47ca0181..4856fb1ad 100644 --- a/packages/dockview-core/src/paneview/paneviewComponent.ts +++ b/packages/dockview-core/src/paneview/paneviewComponent.ts @@ -476,6 +476,8 @@ export class PaneviewComponent extends Resizable implements IPaneviewComponent { } this._viewDisposables.clear(); + this.element.remove(); + this.paneview.dispose(); } } diff --git a/packages/dockview-core/src/splitview/splitviewComponent.ts b/packages/dockview-core/src/splitview/splitviewComponent.ts index a165ba4b3..b97855f58 100644 --- a/packages/dockview-core/src/splitview/splitviewComponent.ts +++ b/packages/dockview-core/src/splitview/splitviewComponent.ts @@ -425,6 +425,8 @@ export class SplitviewComponent view.dispose(); } + this.element.remove(); + super.dispose(); } }