fix: 修复renderer为always时floatGroup的tab下拉列表被挡住了

Author: zhaijunlei955

src/components/BootstrapBlazor.DockView/wwwroot/js/dockview-extensions.js

@@ -10,6 +10,11 @@ DockviewComponent.prototype.on = function (eventType, callback) {
 const dispose = DockviewComponent.prototype.dispose;
 DockviewComponent.prototype.dispose = function () {
     this.params.observer?.disconnect();
+    this.groups.forEach(group => {
+        if (group.mutationObserver) {
+            group.mutationObserver.disconnect();
+        }
+    })
     saveConfig(this);
     dispose.call(this);
 }

src/components/BootstrapBlazor.DockView/wwwroot/js/dockview-group.js

@@ -167,6 +167,13 @@ const createGroupActions = (group, groupType) => {
         if (item.name !== 'bar') {
             const icon = getIcon(item.name);
             actionContainer.append(icon);
+            if(icon.classList.contains('bb-dockview-control-icon-dropdown')){
+                setTimeout(() => {
+                    if (group.model.location.type == 'floating' && group.panels.some(panel => panel.renderer == 'always')) {
+                        observeDisplayChange(icon, group)
+                    }
+                }, 0)
+            }
         }
     });
     setTimeout(() => {
@@ -178,13 +185,47 @@ const createGroupActions = (group, groupType) => {
     }, 0)
     addActionEvent(group, actionContainer);
 }
+const observeDisplayChange = (icon, group) => {
+    const dockview = group.api.accessor
+    const element = icon.querySelector('.dropdown-menu')
+    const mutationObserver = new MutationObserver((mutations) => {
+        mutations.forEach(mutation => {
+            if (mutation.attributeName == 'class') {
+                if(mutation.target.classList.contains('show')) {
+                    const currentPanelEle = group.activePanel.view.content.element.parentElement
+                    const childEle = currentPanelEle.children[0]
+                    group.element.querySelector('&>.dv-content-container').append(childEle)
+                    currentPanelEle.style.zIndex = -1
+                    childEle.wrapperEle = currentPanelEle
+                }
+                else {
+                    const panelEleList = [...group.element.querySelector('&>.dv-content-container').children].map(item => {
+                        const wrapperEle = item.wrapperEle
+                        delete item.wrapperEle
+                        wrapperEle.append(item)
+                        return wrapperEle
+                    })
+                    group.element.parentElement.parentElement.append(...panelEleList)
+                }
+            }
+        })
+    });
+    group.mutationObserver = mutationObserver
+    mutationObserver.observe(element, {
+        attributes: true,
+        attributeFilter: ["class"],
+    });
+}
 
 const disposeGroup = group => {
     const { observer } = group.api.accessor.params;
     if (observer) {
         observer.unobserve(group.header.element);
         observer.unobserve(group.header.tabs._tabsList);
     }
+    if (group.mutationObserver) {
+        group.mutationObserver.disconnect();
+    }
     removeActionEvent(group);
 }