fix(DockView): update keep active panel logic

src/Extensions/Components/BootstrapBlazor.DockView/BootstrapBlazor.DockView.csproj

@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>8.0.3</Version>
+    <Version>8.0.4</Version>
   </PropertyGroup>
 
   <PropertyGroup>

src/Extensions/Components/BootstrapBlazor.DockView/wwwroot/js/dockview-extensions.js

@@ -9,7 +9,7 @@ DockviewComponent.prototype.on = function (eventType, callback) {
 
 const dispose = DockviewComponent.prototype.dispose;
 DockviewComponent.prototype.dispose = function () {
-    this.params.observer.disconnect();
+    this.params.observer?.disconnect();
     saveConfig(this);
     dispose.call(this);
 }

src/Extensions/Components/BootstrapBlazor.DockView/wwwroot/js/dockview-group.js

@@ -204,7 +204,7 @@ const getMaximizeState = (group) => {
     const type = group.model.location.type
     return type === 'grid'
         ? group.api.isMaximized()
-        : (type === 'floating' ? group.activePanel.params.isMaximized : false)
+        : (type === 'floating' ? group.activePanel?.params.isMaximized : false)
 }
 
 const showFloat = (dockview, group) => {
@@ -249,12 +249,21 @@ const addActionEvent = group => {
             close(group, actionContainer, true);
         }
         else if (e.target.classList.contains('dv-default-tab-content')) {
-            const liEle = e.target.closest('li');
-            const tabEle = tabsContainer.children[0]
-            liEle.tabWidth = tabEle.offsetWidth;
-
-            liEle.children[0].appendChild(tabEle);
-            tabsContainer.append(e.target.closest('.tab'));
+            // const liEle = e.target.closest('li');
+            // const tabEle = tabsContainer.children[0]
+            // liEle.tabWidth = tabEle.offsetWidth;
+
+            // liEle.children[0].appendChild(tabEle);
+            const targetTabEle = e.target.closest('.tab')
+            // tabsContainer.append(targetTabEle);
+            group.api.accessor.moveGroupOrPanel({
+                from: { groupId: group.id, panelId: group.panels.find(p => p.view.tab.element.parentElement == targetTabEle).id },
+                to: {
+                    group,
+                    position: 'center',
+                    index: 0,
+                },
+            });
         }
     });
 }

src/Extensions/Components/BootstrapBlazor.DockView/wwwroot/js/dockview-panel.js

@@ -4,6 +4,11 @@ import { getIcon } from "./dockview-icon.js"
 const onAddPanel = panel => {
     updateCloseButton(panel);
     updateTitle(panel);
+    panel.api.onDidActiveChange(({isActive}) => {
+        if(isActive && panel.group.panels.length > 1) {
+            saveConfig(panel.accessor)
+        }
+    })
 }
 
 const onRemovePanel = event => {

src/Extensions/Components/BootstrapBlazor.DockView/wwwroot/js/dockview-utils.js

@@ -90,8 +90,9 @@ const initDockview = (dockview, options, template) => {
             dockview._inited = true;
             dockview._initialized?.fire()
             dockview.groups.forEach(group => {
+                // setWidth(group.model.header.element, dockview)
                 if (dockview.params.observer === null) {
-                    dockview.params.observer = new ResizeObserver(observerList => setWidth(observerList, dockview));
+                    dockview.params.observer = new ResizeObserver(observerList => resizeObserverHandle(observerList, dockview));
                 }
                 dockview.params.observer.observe(group.header.element)
                 dockview.params.observer.observe(group.header.tabContainer)
@@ -113,52 +114,61 @@ const initDockview = (dockview, options, template) => {
     dockview._rootDropTarget.onDrop(() => {
         saveConfig(dockview)
     })
+
 }
-const setWidth = (observerList, dockview) => {
-    setTimeout(() => {
-        observerList.forEach(({ target }) => {
-            let header, tabsContainer
-            if (target.classList.contains('tabs-container')) {
-                header = target.parentElement
-                tabsContainer = target
-            }
-            else {
-                header = target
-                tabsContainer = header.querySelector('.tabs-container')
-            }
-            if(header.offsetWidth == 0) return
-            let voidWidth = header.querySelector('.void-container').offsetWidth
-            let dropdown = header.querySelector('.right-actions-container>.dropdown')
-            if (!dropdown) return
-            let dropMenu = dropdown.querySelector('.dropdown-menu')
-            if (voidWidth === 0) {
-                if (tabsContainer.children.length <= 1) return
-                const inactiveTabs = header.querySelectorAll('.tabs-container>.tab')
-                const lastTab = inactiveTabs[inactiveTabs.length - 1]
-                const aEle = document.createElement('a')
-                const liEle = document.createElement('li')
-                aEle.className = 'dropdown-item'
-                liEle.tabWidth = lastTab.offsetWidth;
-                aEle.append(lastTab)
-                liEle.append(aEle)
-                dropMenu.insertAdjacentElement("afterbegin", liEle)
-                if(lastTab.classList.contains('active-tab')){
-                    const group = dockview.groups.find(g => g.element === header.parentElement)
-                    group.panels[0].api.setActive()
-                }
-            }
-            else {
-                let firstLi = dropMenu.querySelector('li:has(.tab)') || dropMenu.children[0]
-                if (firstLi) {
-                    let firstTab = firstLi.querySelector('.tab')
-                    if (voidWidth > firstLi.tabWidth || tabsContainer.children.length == 0) {
-                        firstTab && tabsContainer.append(firstTab)
-                        firstLi.remove()
-                    }
-                }
+
+const resizeObserverHandle = (observerList, dockview) => {
+    observerList.forEach(({ target }) => {
+        setWidth(target, dockview)
+    })
+}
+const setWidth = (target, dockview) => {
+    let header, tabsContainer
+    if (target.classList.contains('tabs-container')) {
+        header = target.parentElement
+        tabsContainer = target
+    }
+    else {
+        header = target
+        tabsContainer = header.querySelector('.tabs-container')
+    }
+    if(header.offsetWidth == 0) return
+    let voidWidth = header.querySelector('.void-container').offsetWidth
+    let dropdown = header.querySelector('.right-actions-container>.dropdown')
+    if (!dropdown) return
+    let dropMenu = dropdown.querySelector('.dropdown-menu')
+    if (voidWidth === 0) {
+        if (tabsContainer.children.length <= 1) return
+        const inactiveTabs = header.querySelectorAll('.tabs-container>.tab')
+        const lastTab = inactiveTabs[inactiveTabs.length - 1]
+        const aEle = document.createElement('a')
+        const liEle = document.createElement('li')
+        aEle.className = 'dropdown-item'
+        liEle.tabWidth = lastTab.offsetWidth;
+        aEle.append(lastTab)
+        liEle.append(aEle)
+        dropMenu.insertAdjacentElement("afterbegin", liEle)
+        // if(lastTab.classList.contains('active-tab')){
+        //     const group = dockview.groups.find(g => g.element === header.parentElement)
+        //     group.panels[0].api.setActive()
+        // }
+    }
+    else {
+        let firstLi = dropMenu.querySelector('li:has(.tab)') || dropMenu.children[0]
+        if (firstLi) {
+            let firstTab = firstLi.querySelector('.tab')
+            if (voidWidth > firstLi.tabWidth || tabsContainer.children.length == 0) {
+                firstTab && tabsContainer.append(firstTab)
+                firstLi.remove()
             }
-        })
-    }, 0);
+        }
+    }
+    setTimeout(() => {
+        if([...tabsContainer.children].every(tab => !tab.classList.contains('active-tab'))){
+            const group = dockview.groups.find(g => g.element === header.parentElement)
+            group.panels[0].api.setActive()
+        }
+    }, 100);
 }
 
 const toggleComponent = (dockview, options) => {
@@ -169,7 +179,8 @@ const toggleComponent = (dockview, options) => {
         if (pan === void 0) {
             const panel = findContentFromPanels(dockview.params.panels, p);
             const groupPanels = panels.filter(p1 => p1.params.parentId == p.params.parentId)
-            const indexOfOptions = groupPanels.findIndex(p => p.id == panel.id)
+            let indexOfOptions = groupPanels.findIndex(p => p.params.key == panel.params.key)
+            indexOfOptions =  indexOfOptions == -1 ? 0 : indexOfOptions
             const index = panel && panel.params.index
             addGroupWithPanel(dockview, panel || p, panels, index ?? indexOfOptions);
         }