refactor: 更新是否触发面板可见回调事件逻辑

Author: ArgoZhang

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

@@ -54,16 +54,6 @@ DockviewComponent.prototype.removeGroup = function(...args) {
             panel.api.close()
         })
         this.setVisible(group, false)
-
-        // let delPanelsStr = localStorage.getItem(this.params.options.localStorageKey + '-panels')
-        // let delPanels = delPanelsStr ? JSON.parse(delPanelsStr) : delPanelsStr
-        // delPanels = delPanels?.map(panel => {
-        //     if (panel.groupId == group.id) {
-        //         panel.groupInvisible = true
-        //     }
-        //     return panel
-        // })
-        // delPanels && localStorage.setItem(this.params.options.localStorageKey + '-panels', JSON.stringify(delPanels))
     }
     else if (type == 'floating') {
         removeDrawerBtn(group)
@@ -72,11 +62,10 @@ DockviewComponent.prototype.removeGroup = function(...args) {
 }
 
 const closePanel = DockviewGroupPanelModel.prototype.closePanel;
-DockviewGroupPanelModel.prototype.closePanel = function(panel) {
-    console.log(panel);
+DockviewGroupPanelModel.prototype.closePanel = function(panel, triggerVisibleChangedCallback = true) {
     if (!panel.group.locked) {
         closePanel.call(this, panel);
-        if (!this.accessor.isClearing && this.accessor.isUpdating !== true) {
+        if (triggerVisibleChangedCallback) {
             this.accessor._panelVisibleChanged?.fire({ key: panel.params.key, status: false });
         }
     }

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

@@ -1,4 +1,4 @@
-import { getIcons, getIcon } from "./dockview-icon.js"
+import { getIcons, getIcon } from "./dockview-icon.js"
 import { deletePanel, findContentFromPanels, moveAlwaysRenderPanel } from "./dockview-panel.js"
 import { saveConfig } from "./dockview-config.js"
 import { observeGroup } from "./dockview-utils.js"
@@ -41,18 +41,6 @@ const addPanelWidthGroupId = (dockview, panel, index) => {
     let { rect = {}, packup, floatType, drawer, direction = 'left' } = panel.params || {}
     if (!group) {
         group = dockview.createGroup({ id: panel.groupId })
-        // const floatingGroupPosition = isMaximized ? {
-        //     x: 0, y: 0,
-        //     width: dockview.width,
-        //     height: dockview.height
-        // } : {
-        //     x: currentPosition?.left || 0,
-        //     y: currentPosition?.top || 0,
-        //     width: currentPosition?.width,
-        //     height: currentPosition?.height
-        // }
-        // dockview.addFloatingGroup(group, floatingGroupPosition, { skipRemoveGroup: true })
-        // createGroupActions(group);
         const width = dockview.width > 500 ? 500 : (dockview.width - 10)
         const height = dockview.height > 460 ? 460 : (dockview.height - 10)
         const left = (dockview.width - width) / 2
@@ -74,23 +62,16 @@ const addPanelWidthGroupId = (dockview, panel, index) => {
         if (floatType == 'drawer') {
             setTimeout(() => createDrawerHandle(group, direction == 'right'), 0);
         }
-        // const floatingGroup = createFloatingGroup(group, floatingGroupRect)
-        const autoHideBtn = group.header.rightActionsContainer.querySelector('.bb-dockview-control-icon-autohide')
-        if (autoHideBtn) {
-            // autoHideBtn.style.display = 'none'
-        }
-
-        // saveConfig(dockview)
     }
     else {
         if (group.api.location.type === 'grid') {
             let isVisible = dockview.isVisible(group)
             if (isVisible === false) {
                 dockview.setVisible(group, true)
-                // isMaximized && group.api.maximize();
             }
         }
     }
+
     dockview.addPanel({
         id: panel.id,
         title: panel.title,
@@ -99,11 +80,10 @@ const addPanelWidthGroupId = (dockview, panel, index) => {
         position: { referenceGroup: group, index: index || 0 },
         params: { ...panel.params, rect, packup, visible: true }
     })
-    dockview.isUpdating !== true && dockview._panelVisibleChanged?.fire({ key: panel.params.key, status: true });
 }
 
 const addPanelWidthCreatGroup = (dockview, panel, panels) => {
-    let { position = {}, currentPosition, packupHeight, isPackup, isMaximized } = panel.params || {}
+    let { position = {}, packupHeight, isPackup, isMaximized } = panel.params || {}
     let brothers = panels.filter(p => p.params.parentId == panel.params.parentId && p.id != panel.id)
     let group, direction
     if (brothers.length > 0 && brothers[0].params.parentType == 'group') {
@@ -138,7 +118,6 @@ const addPanelWidthCreatGroup = (dockview, panel, panels) => {
     }
     if (direction) option.position.direction = direction
     dockview.addPanel(option);
-    dockview.isUpdating !== true && dockview._panelVisibleChanged?.fire({ key: panel.params.key, status: true });
 }
 
 const getOrientation = function (child, group) {
@@ -178,37 +157,6 @@ 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;

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

@@ -122,20 +122,11 @@ const initDockview = (dockview, options, template) => {
                 fg.group.element.parentElement.style.inset = [top, right, bottom, left]
                     .map(item => typeof item == 'number' ? (item + 'px') : 'auto').join(' ')
 
-                // fg.overlay.onDidChangeEnd(e => {
-                //     saveConfig(dockview);
-                // })
                 observeOverlayChange(fg.overlay, fg.group)
                 const { floatType, direction } = fg.group.getParams();
                 if (floatType == 'drawer') {
                     createDrawerHandle(fg.group, direction == 'right')
                 }
-                else {
-                    const autoHideBtn = fg.group.header.rightActionsContainer.querySelector('.bb-dockview-control-icon-autohide')
-                    if (autoHideBtn) {
-                        // autoHideBtn.style.display = 'none'
-                    }
-                }
                 observeFloatingGroupLocationChange(fg.group)
             })
 
@@ -245,7 +236,6 @@ const toggleComponent = (dockview, options) => {
             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;
-            // const index = panel && panel.params.index
             addGroupWithPanel(dockview, panel, panels, indexOfOptions);
         }
         else {
@@ -263,7 +253,7 @@ const toggleComponent = (dockview, options) => {
         if (pan === void 0) {
             item.group.delPanelIndex = item.group.panels.findIndex(p => p.params.key == item.params.key);
             const group = item.group;
-            group.model.closePanel(item)
+            group.model.closePanel(item, false)
             if (group.panels.length === 0) {
                 dockview.setVisible(group, false)
             }