feat(DockView): bump version 10.0.8 (#981)

ArgoZhang · zhaijunlei955 · web-flow · commit ee30e0f20957 · 2026-04-23T09:10:40.000+08:00
* revert: 撤销 IAsyncDisposable 接口实现

* fix: 修复切换数据添加的panel的标题不对

* refactor：优化onDidVisibilityChange回调

* fix: 修复切换数据节点Template有多余的DOM

* fix: 修复切换数据时activePanel不对

* fix: 修复切换数据节点Template有多余的DOM

* chore: bump version 10.0.8

---------

Co-authored-by: zhaijunlei &lt;276318515@qq.com&gt;
diff --git a/src/components/BootstrapBlazor.DockView/BootstrapBlazor.DockView.csproj b/src/components/BootstrapBlazor.DockView/BootstrapBlazor.DockView.csproj
@@ -1,7 +1,7 @@
 ﻿<Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>10.0.8-beta06</Version>
+    <Version>10.0.8</Version>
   </PropertyGroup>
 
   <PropertyGroup>
diff --git a/src/components/BootstrapBlazor.DockView/wwwroot/js/dockview-extensions.js b/src/components/BootstrapBlazor.DockView/wwwroot/js/dockview-extensions.js
@@ -30,7 +30,6 @@ DockviewGroupPanel.prototype.getParams = function() {
 }
 
 DockviewGroupPanel.prototype.setParams = function(data) {
-    console.log('setParameter', data);
     Object.keys(data).forEach(key => {
         this.panels.forEach(panel => panel.params[key] = data[key])
     })
@@ -71,14 +70,12 @@ DockviewGroupPanelModel.prototype.closePanel = function(panel, triggerVisibleCha
         }
     }
 
-    if (moveToTemplate) {
-        if (panel.view.content.element) {
-            if (panel.titleMenuEle) {
-                panel.view.content.element.append(panel.titleMenuEle)
-            }
-            if (this.accessor.params.template) {
-                this.accessor.params.template.append(panel.view.content.element)
-            }
+    if (panel.view.content.element && moveToTemplate) {
+        if (panel.titleMenuEle) {
+            panel.view.content.element.append(panel.titleMenuEle)
+        }
+        if (this.accessor.params.template) {
+            this.accessor.params.template.append(panel.view.content.element)
         }
     }
 }
diff --git a/src/components/BootstrapBlazor.DockView/wwwroot/js/dockview-group.js b/src/components/BootstrapBlazor.DockView/wwwroot/js/dockview-group.js
@@ -76,6 +76,7 @@ const addPanelWidthGroupId = (dockview, panel, index) => {
     dockview.addPanel({
         id: panel.id,
         title: panel.title,
+        inactive: true,
         renderer: panel.renderer,
         component: panel.component,
         position: { referenceGroup: group, index: index || 0 },
@@ -112,6 +113,7 @@ const addPanelWidthCreatGroup = (dockview, panel, panels) => {
     let option = {
         id: panel.id,
         title: panel.title,
+        inactive: true,
         renderer: panel.renderer,
         component: panel.component,
         position: { referenceGroup: group },
diff --git a/src/components/BootstrapBlazor.DockView/wwwroot/js/dockview-panel.js b/src/components/BootstrapBlazor.DockView/wwwroot/js/dockview-panel.js
@@ -8,31 +8,30 @@ const onAddPanel = panel => {
     observePanelActiveChange(panel)
 }
 const observePanelActiveChange = panel => {
-    panel.api.onDidActiveChange(({ isActive }) => {
-        if (isActive && !panel.group.api.isMaximized()) {
-            saveConfig(panel.accessor)
-            if (panel.group.panels.length >= 2){
-                panel.group.panels.filter(p => p != panel.group.activePanel && p.renderer == 'onlyWhenVisible').forEach(p => {
-                    appendTemplatePanelEle(p)
-                })
+    panel.api.onDidVisibilityChange(({ isVisible }) => {
+        const dockview = panel.accessor;
+        if (dockview._isDisposed) return;
+        const renderer = dockview.params.options.renderer;
+        if (renderer === 'onlyWhenVisible' && dockview._inited) {
+            if (isVisible) {
+                saveConfig(panel.accessor)
+                const visiblePanels = dockview.groups.map(g => g.panels.find(p => p.params.isActive) || g.panels.find(p => p.api.isVisible))
+                dockview._loadTabs?.fire(visiblePanels.filter(p => Boolean(p)).map(p => p.params.key));
+            }
+            else {
+                appendTemplatePanelEle(panel)
             }
         }
-        if (isActive && panel.group.getParams().floatType == 'drawer') {
+
+        if (isVisible && panel.group.getParams().floatType == 'drawer') {
             setDrawerTitle(panel.group)
         }
-        setTimeout(function () {
+        const handler = setTimeout(function () {
+            clearTimeout(handler)
+            if (dockview._isDisposed) return;
             moveAlwaysRenderPanel(panel)
         }, 0)
     })
-    panel.api.onDidVisibilityChange(({ isVisible }) => {
-        const dockview = panel.accessor;
-        if (dockview.params.options.renderer === 'onlyWhenVisible' && dockview._inited && isVisible) {
-            setTimeout(function() {
-                const visiblePanels = dockview.groups.map(g => g.panels.find(p => p.params.isActive) || g.panels.find(p => p.api.isVisible))
-                dockview._loadTabs?.fire(visiblePanels.filter(p => Boolean(p)).map(p => p.params.key));
-            }, 0)
-        }
-    })
 }
 
 const moveAlwaysRenderPanel = panel => {
@@ -176,7 +175,7 @@ const savePanel = (dockview, panel) => {
 
 const deletePanel = (dockview, panel) => {
     const { panels, options } = dockview.params;
-    let index = panels.indexOf(panel);
+    let index = panels.findIndex(p => p.params.key === panel.params.key);
     if (index > -1) {
         panels.splice(index, 1);
     }
diff --git a/src/components/BootstrapBlazor.DockView/wwwroot/js/dockview-utils.js b/src/components/BootstrapBlazor.DockView/wwwroot/js/dockview-utils.js
@@ -88,6 +88,10 @@ const initDockview = (dockview, options, template) => {
         })
         const handler = setTimeout(() => {
             clearTimeout(handler);
+            if (dockview._isDisposed) {
+                dockview = null;
+                return;
+            }
             const panels = dockview.panels;
             const groups = dockview.groups;
             const delPanelsStr = localStorage.getItem(dockview.params.options.localStorageKey + '-panels');
@@ -133,17 +137,17 @@ const initDockview = (dockview, options, template) => {
             dockview.groups.forEach(group => {
                 observeGroup(group)
             })
-            dockview.element.querySelector('&>.dv-dockview>.dv-branch-node').addEventListener('click', function(e) {
-                this.parentElement.querySelectorAll('&>.dv-resize-container-drawer, &>.dv-render-overlay-float-drawer').forEach(item => {
+            dockview.element.querySelector('&>.dv-dockview>.dv-branch-node')?.addEventListener('click', function(e) {
+                this.parentElement.querySelectorAll('&>.dv-resize-container-drawer, &>.dv-render-overlay-float-drawer')?.forEach(item => {
                     item.classList.remove('active')
                 })
-                this.closest('.bb-dockview').querySelectorAll('&>.bb-dockview-aside>.bb-dockview-aside-button').forEach(item => {
+                this.closest('.bb-dockview').querySelectorAll('&>.bb-dockview-aside>.bb-dockview-aside-button')?.forEach(item => {
                     item.classList.remove('active')
                 })
             })
             dockview._inited = true;
             dockview._initialized?.fire();
-        }, 100);
+        }, 0);
     })
 
     dockview.gridview.onDidChange(event => {
@@ -223,16 +227,23 @@ const setWidth = (target, dockview) => {
         group.panels[0] && group.panels[0].api.setActive()
     }
 }
-
+const cleanUndefined = (obj) => Object.fromEntries(
+    Object.entries(obj).filter(([, v]) => v != null)
+);
 const toggleComponent = (dockview, options) => {
     const optionsPanels = getPanelsFromOptions(options);
     const panels = optionsPanels.filter(p => p.params.visible);
     const localPanels = dockview.panels;
     panels.forEach(p => {
         const pan = findContentFromPanels(localPanels, p);
         if (pan === void 0) {
-            const panel = findContentFromPanels(dockview.params.panels, p) || p;
-            panel.params = { ...panel.params, ...p.params };
+            const existingPanel = findContentFromPanels(dockview.params.panels, p);
+            const panel = existingPanel ?
+            {
+                ...existingPanel,
+                ...cleanUndefined(p),
+                params: { ...existingPanel.params, ...cleanUndefined(p.params) }
+            } : p;
             const groupPanels = panels.filter(p1 => p1.params.parentId == p.params.parentId);
             let indexOfOptions = groupPanels.findIndex(p => p.params.key == panel?.params.key);
             indexOfOptions = indexOfOptions == -1 ? 0 : indexOfOptions;

Original file line number	Diff line number	Diff line change
`@@ -30,7 +30,6 @@ DockviewGroupPanel.prototype.getParams = function() {`
`30`	`30`	`}`
`31`	`31`
`32`	`32`	`DockviewGroupPanel.prototype.setParams = function(data) {`
`33`		`- console.log('setParameter', data);`
`34`	`33`	`Object.keys(data).forEach(key => {`
`35`	`34`	`this.panels.forEach(panel => panel.params[key] = data[key])`
`36`	`35`	`})`
`@@ -71,14 +70,12 @@ DockviewGroupPanelModel.prototype.closePanel = function(panel, triggerVisibleCha`
`71`	`70`	`}`
`72`	`71`	`}`
`73`	`72`
`74`		`- if (moveToTemplate) {`
`75`		`- if (panel.view.content.element) {`
`76`		`- if (panel.titleMenuEle) {`
`77`		`- panel.view.content.element.append(panel.titleMenuEle)`
`78`		`- }`
`79`		`- if (this.accessor.params.template) {`
`80`		`- this.accessor.params.template.append(panel.view.content.element)`
`81`		`- }`
	`73`	`+ if (panel.view.content.element && moveToTemplate) {`
	`74`	`+ if (panel.titleMenuEle) {`
	`75`	`+ panel.view.content.element.append(panel.titleMenuEle)`
	`76`	`+ }`
	`77`	`+ if (this.accessor.params.template) {`
	`78`	`+ this.accessor.params.template.append(panel.view.content.element)`
`82`	`79`	`}`
`83`	`80`	`}`
`84`	`81`	`}`