refactor: 修改aside生成位置

Author: zhaijunlei955

src/components/BootstrapBlazor.DockView/wwwroot/css/dockview-bb.css

@@ -193,14 +193,23 @@
     }
 
 
-.bb-dockview {
-    display: flex;
+.bb-dockview > div:has(> .bb-dockview-aside-left > div) {
+    padding-left: calc(1.5em + .25rem);
+}
+.bb-dockview > div:has(> .bb-dockview-aside-right > div) {
+    padding-right: calc(1.5em + .25rem);
 }
+    .bb-dockview .bb-dockview-aside {
+        position: absolute;
+        height: 100%;
+        top: 0;
+    }
 
-    .bb-dockview > div {
-        flex: 1;
-        width: 1%;
-        min-width: 0;
+    .bb-dockview .bb-dockview-aside-left {
+        left: 0
+    }
+    .bb-dockview .bb-dockview-aside-right {
+        right:0
     }
 
     .bb-dockview .bb-dockview-aside > .bb-dockview-aside-button {

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

@@ -64,7 +64,7 @@ const addPanelWidthGroupId = (dockview, panel, index) => {
             floatingGroupRect = {
                 width: drawer.width || 300,
                 height: dockview.height,
-                position: { left: 0, top: 0 }
+                position: { [direction]: 0, top: 0 }
             }
         }
         dockview.addFloatingGroup(group, { ...floatingGroupRect, skipRemoveGroup: true })
@@ -329,7 +329,7 @@ const autoHide = group => {
 
         const left = getOffsetFromDockview(group.element)
         const width = group.element.offsetWidth
-        const dockviewWidth = dockview.element.offsetWidth
+        const dockviewWidth = dockview.element.querySelector('&>.dv-dockview').offsetWidth
         const isRight = ((left + width) == dockviewWidth && left > 0) || left > (dockviewWidth / 2)
 
         const rect = {
@@ -415,15 +415,15 @@ const createDrawerBtn = (floatingGroup, isRight) => {
         }
         saveConfig(dockview)
     })
-    const dvEleBox = dockview.element.parentElement
+    const dvEleBox = dockview.element
     const className = `bb-dockview-aside-${isRight ? 'right' : 'left'}`
     let btnWrapper = dvEleBox.querySelector(`&>.${className}`)
     if (!btnWrapper) {
         btnWrapper = document.createElement('aside')
         btnWrapper.className = className + ' bb-dockview-aside'
+        isRight ? dvEleBox.append(btnWrapper) : dvEleBox.prepend(btnWrapper)
     }
     btnWrapper.append(btn)
-    isRight ? dvEleBox.append(btnWrapper) : dvEleBox.prepend(btnWrapper)
 }
 
 const removeDrawerBtn = group => {