feat: dockview添加就近隐藏

Author: zhaijunlei955

src/components/BootstrapBlazor.DockView/wwwroot/js/dockview-core.esm.js

@@ -7229,6 +7229,7 @@ class Overlay extends CompositeDisposable {
         this.onDidChangeEnd = this._onDidChangeEnd.event;
         this.addDisposables(this._onDidChange, this._onDidChangeEnd);
         this._element.className = 'dv-resize-container';
+        this.options.className && this._element.classList.add(this.options.className);
         this._isVisible = true;
         this.setupResize('top');
         this.setupResize('bottom');
@@ -8802,8 +8803,7 @@ class DockviewComponent extends BaseGrid {
             };
         }
         const anchoredBox = getAnchoredBox();
-        const overlay = new Overlay(Object.assign(Object.assign({ container: this.gridview.element, content: group.element }, anchoredBox), {
-            minimumInViewportWidth: this.options.floatingGroupBounds === 'boundedWithinViewport'
+        const overlay = new Overlay(Object.assign(Object.assign({ container: this.gridview.element, content: group.element, className: options === null || options === void 0 ? void 0 : options.className }, anchoredBox), { minimumInViewportWidth: this.options.floatingGroupBounds === 'boundedWithinViewport'
                 ? undefined
                 : (_c = (_b = this.options.floatingGroupBounds) === null || _b === void 0 ? void 0 : _b.minimumWidthWithinViewport) !== null && _c !== void 0 ? _c : DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE, minimumInViewportHeight: this.options.floatingGroupBounds === 'boundedWithinViewport'
                     ? undefined

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

@@ -38,7 +38,7 @@ const addGroupWithPanel = (dockview, panel, panels, index) => {
 
 const addPanelWidthGroupId = (dockview, panel, index) => {
     let group = dockview.api.getGroup(panel.groupId)
-    let { rect = {}, packup, floatType, drawer } = panel.params || {}
+    let { rect = {}, packup, floatType, drawer, direction = 'left' } = panel.params || {}
     if (!group) {
         group = dockview.createGroup({ id: panel.groupId })
         // const floatingGroupPosition = isMaximized ? {
@@ -72,7 +72,7 @@ const addPanelWidthGroupId = (dockview, panel, index) => {
         observeOverlayChange(overlay, group)
         createGroupActions(group, floatType);
         if (floatType == 'drawer') {
-            setTimeout(() => createDrawerHandle(group), 0);
+            setTimeout(() => createDrawerHandle(group, direction == 'right'), 0);
         }
         // const floatingGroup = createFloatingGroup(group, floatingGroupRect)
         const autoHideBtn = group.header.rightActionsContainer.querySelector('.bb-dockview-control-icon-autohide')
@@ -326,19 +326,27 @@ const autoHide = group => {
         if (!canFloat(group)) return;
         // 1、点击图标创建浮动窗口并隐藏
         const { drawer = { width: 300, visible: true } } = group.getParams()
+
+        const left = getOffsetFromDockview(group.element)
+        const width = group.element.offsetWidth
+        const dockviewWidth = dockview.element.offsetWidth
+        const isRight = ((left + width) == dockviewWidth && left > 0) || left > (dockviewWidth / 2)
+
         const rect = {
             position: {
-                left: -9999,
+                [isRight ? 'right' : 'left']: 0,
                 top: 0
             },
             width: drawer.width,
-            height: '100%'
+            height: '100%',
+            className: 'dv-resize-container-drawer'
         }
-        group.setParams({ drawer, floatType: 'drawer' })
+        group.setParams({ drawer, floatType: 'drawer', direction: isRight ? 'right' : 'left' })
+
         const floatingGroup = createFloatingGroup(group, rect, 'drawer')
         if (floatingGroup) {
             setTimeout(() => {
-                createDrawerHandle(floatingGroup)
+                createDrawerHandle(floatingGroup, isRight)
             }, 0);
             setTimeout(() => {
                 saveConfig(dockview)
@@ -347,60 +355,75 @@ const autoHide = group => {
     }
 }
 
-const createDrawerHandle = (floatingGroup) => {
+function getOffsetFromDockview(element) {
+    let offsetLeft = element.offsetLeft;
+    let parent = element.offsetParent;
+    while (parent && !parent.classList.contains('dv-dockview')) {
+        offsetLeft += parent.offsetLeft;
+        parent = parent.offsetParent;
+    }
+    return offsetLeft
+}
+
+const createDrawerHandle = (floatingGroup, isRight) => {
+    const className = isRight ? 'bb-resize-container-right' : 'bb-resize-container-left'
     floatingGroup.element.parentElement.classList.add('dv-resize-container-drawer')
-    createDrawerBtn(floatingGroup)
+    floatingGroup.element.parentElement.classList.add(className)
+    createDrawerBtn(floatingGroup, isRight)
 }
 
-const createDrawerBtn = floatingGroup => {
+const createDrawerBtn = (floatingGroup, isRight) => {
     const dockview = floatingGroup.api.accessor
     const btn = document.createElement('div')
     const title = floatingGroup.activePanel?.title || floatingGroup.panels[0]?.title
     btn.innerHTML = title
     btn.setAttribute('groupid', dockview.id + '_' + floatingGroup.id)
     btn.classList.add('drawer-btn')
-    if (floatingGroup.element.parentElement.style.left == '-1px') {
+    if (floatingGroup.element.parentElement.classList.contains('active')) {
         btn.classList.add('active')
     }
 
     btn.addEventListener('click', () => {
         const fgWrapper = floatingGroup.element.parentElement
         const activePanel = floatingGroup.activePanel
         const parentElement = activePanel.view.content.element.parentElement
+        const direction = fgWrapper.style.left == 'auto' ? 'right' : 'left'
         dockview.floatingGroups.forEach(item => {
             const params = item.group.getParams()
             if (params.floatType == 'drawer' && item.group != floatingGroup) {
-                item.group.element.parentElement.style.left = '-9999px'
+                item.group.element.parentElement.classList.remove('active')
                 if (activePanel?.renderer == 'always' && parentElement) {
-                    parentElement.style.left = '-9999px'
+                    parentElement.classList.remove('active');
                 }
             }
         })
-            ;[...btn.parentElement.children].forEach(btnEle => {
-                btnEle.classList.remove('active')
-            })
-        if (fgWrapper.style.left == '-1px') {
-            fgWrapper.style.left = '-9999px'
+        btn.parentElement.parentElement.querySelectorAll('&>aside>.drawer-btn').forEach(btnEle => {
+            btnEle.classList.remove('active')
+        })
+
+        if (fgWrapper.classList.contains('active')) {
+            fgWrapper.classList.remove('active')
             if (activePanel?.renderer == 'always' && parentElement) {
-                parentElement.style.left = '-9999px'
+                parentElement.classList.remove('active')
             }
         } else {
             btn.classList.add('active')
-            fgWrapper.style.left = '-1px'
+            fgWrapper.classList.add('active')
             if (parentElement) {
-                parentElement.style.left = '0'
+                parentElement.classList.add('active')
             }
         }
         saveConfig(dockview)
     })
     const dvEleBox = dockview.element.parentElement
-    let btnWrapper = [...dvEleBox.children].find(item => item.classList.contains('bb-dockview-btn-wrapper'))
+    const className = `bb-dockview-btn-wrapper-${isRight ? 'right' : 'left'}`
+    let btnWrapper = dvEleBox.querySelector(`&>.${className}`)
     if (!btnWrapper) {
-        btnWrapper = document.createElement('div')
-        btnWrapper.className = 'bb-dockview-btn-wrapper'
-        dvEleBox.prepend(btnWrapper)
+        btnWrapper = document.createElement('aside')
+        btnWrapper.className = className + ' bb-dockview-btn-wrapper'
     }
     btnWrapper.append(btn)
+    isRight ? dvEleBox.append(btnWrapper) : dvEleBox.prepend(btnWrapper)
 }
 
 const removeDrawerBtn = group => {
@@ -508,7 +531,10 @@ const observeOverlayChange = (overlay, group) => {
             const parentEle = group.element.parentElement
             parentEle.style.height = `${parentEle.getBoundingClientRect().height}px`
             parentEle.classList.remove('dv-resize-container-drawer')
+            parentEle.classList.remove('bb-resize-container-right')
+            parentEle.classList.remove('bb-resize-container-left')
             group.removePropsOfParams('floatType')
+            group.removePropsOfParams('direction')
             group.header.rightActionsContainer.classList.remove('bb-show-autohide')
             group.header.rightActionsContainer.classList.add('bb-show-float')
             group.header.rightActionsContainer.querySelector('.bb-dockview-control-icon-down').style.display = 'block'
@@ -561,6 +587,7 @@ const dock = (group, floatType) => {
     if (floatType == 'drawer') {
         group.setParams({ drawer: { ...drawer, width: rect.width } })
         group.removePropsOfParams('floatType')
+        group.removePropsOfParams('direction')
         removeDrawerBtn(group)
     }
     else {

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

@@ -107,9 +107,9 @@ const initDockview = (dockview, options, template) => {
                 //     saveConfig(dockview);
                 // })
                 observeOverlayChange(fg.overlay, fg.group)
-                const { floatType } = fg.group.getParams();
+                const { floatType, direction } = fg.group.getParams();
                 if (floatType == 'drawer') {
-                    createDrawerHandle(fg.group)
+                    createDrawerHandle(fg.group, direction == 'right')
                 }
                 else {
                     const autoHideBtn = fg.group.header.rightActionsContainer.querySelector('.bb-dockview-control-icon-autohide')
@@ -123,6 +123,14 @@ 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').forEach(item => {
+                    item.classList.remove('active')
+                })
+                this.closest('.bb-dockview').querySelectorAll('&>.bb-dockview-btn-wrapper>.drawer-btn').forEach(item => {
+                    item.classList.remove('active')
+                })
+            })
             dockview._inited = true;
             dockview._initialized?.fire();
         }, 100);