feat(DockView): add onPanelVisibleChanged event

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)
         }
     }
 }

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 },

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);
     }

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;