fix: 添加js消除多余的线条

Author: zhaijunlei955

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

@@ -300,6 +300,12 @@
     z-index: -1 !important;
 }
 
-.dv-split-view-container.dv-vertical .dv-view:not(.visible) + .dv-view:before {
+/* .dv-split-view-container.dv-vertical .dv-view:not(.visible) + .dv-view:before {
     height: 0;
-}
+} */
+
+.bb-dockview .dv-split-view-container.dv-vertical > .dv-view-container > .dv-view:not(:first-child):not(.visible):before,
+.bb-dockview .dv-split-view-container.dv-vertical > .dv-view-container > .dv-view:first-child:not(.visible) + .dv-view.visible:before,
+.bb-dockview .dv-split-view-container.dv-vertical > .dv-view-container > .dv-view.first-visible::before {
+    height: 0;
+}

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

@@ -1,6 +1,7 @@
 import { DockviewComponent, DockviewGroupPanel, DockviewGroupPanelModel, getGridLocation, getRelativeLocation, DockviewEmitter } from "./dockview-core.esm.js"
 import { getConfigFromStorage, saveConfig } from "./dockview-config.js"
 import { disposeGroup, removeDrawerBtn } from "./dockview-group.js"
+import { markFirstVisibleElement } from "./dockview-utils.js"
 
 DockviewComponent.prototype.on = function(eventType, callback) {
     this['_' + eventType] = new DockviewEmitter();
@@ -84,7 +85,7 @@ DockviewGroupPanelModel.prototype.closePanel = function(panel, triggerVisibleCha
 
 const setVisible = DockviewComponent.prototype.setVisible
 DockviewComponent.prototype.setVisible = function(...args) {
-    setVisible.apply(this, args)
+    setVisible.apply(this, args);
     const branch = getBranchByGroup(args[0])
     const { orientation, splitview: { sashes } } = branch
 
@@ -110,6 +111,7 @@ DockviewComponent.prototype.setVisible = function(...args) {
             }
         });
     }
+    markFirstVisibleElement(args[0])
 }
 function getBranchByGroup(group) {
     const groupEle = group.element

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

@@ -1,7 +1,7 @@
-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"
+import { observeGroup, markFirstVisibleElement } from "./dockview-utils.js"
 import EventHandler from '../../BootstrapBlazor/modules/event-handler.js'
 
 const onAddGroup = group => {
@@ -20,7 +20,8 @@ const onAddGroup = group => {
         saveConfig(dockview)
     })
     group.model.contentContainer.dropTarget.onDrop(() => {
-        saveConfig(dockview)
+        saveConfig(dockview);
+        markFirstVisibleElement(group)
     })
     createGroupActions(group);
     dockview._inited && observeGroup(group)

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

@@ -83,6 +83,9 @@ const initDockview = (dockview, options, template) => {
     })
 
     dockview.onDidLayoutFromJSON(() => {
+        dockview.groups.forEach(group => {
+            markFirstVisibleElement(group);
+        })
         const handler = setTimeout(() => {
             clearTimeout(handler);
             const panels = dockview.panels;
@@ -267,5 +270,16 @@ const toggleGroupLock = (dockview, options) => {
         toggleLock(group, group.header.rightActionsContainer, options.lock)
     })
 }
+export const markFirstVisibleElement = group => {
+    if (!group) return
+    const viewContainerEle = group.element.parentElement.parentElement;
+    const className = 'first-visible';
+    [...viewContainerEle.children].forEach(ele => {
+        if (ele.classList.contains(className)) {
+            ele.classList.remove(className)
+        }
+    })
+    viewContainerEle.querySelector('.visible')?.classList.add(className);
+}
 
 export { cerateDockview };