feat(DockView): add overflow style for floating window (#471)

* chore：update dockview to v4.3.1

* fix：dockview浮动窗口收起时内容超出隐藏

Author: zhaijunlei955

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

@@ -276,3 +276,7 @@
 .bb-dockview .dv-tab.dv-inactive-tab .dv-default-tab .dv-default-tab-action {
     visibility: visible;
 }
+
+.bb-dockview .bb-overflowHidden {
+    overflow: hidden;
+}

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

@@ -1023,67 +1023,6 @@
   pointer-events: none;
   background-color: var(--dv-separator-border);
 }
-.dv-dragged {
-  transform: translate3d(0px, 0px, 0px); /* forces tab to be drawn on a separate layer (see https://github.com/microsoft/vscode/issues/18733) */
-}
-
-.dv-tab {
-  flex-shrink: 0;
-}
-.dv-tab:focus-within, .dv-tab:focus {
-  position: relative;
-}
-.dv-tab:focus-within::after, .dv-tab:focus::after {
-  position: absolute;
-  content: "";
-  height: 100%;
-  width: 100%;
-  top: 0px;
-  left: 0px;
-  pointer-events: none;
-  outline: 1px solid var(--dv-tab-divider-color) !important;
-  outline-offset: -1px;
-  z-index: 5;
-}
-.dv-tab.dv-tab-dragging .dv-default-tab-action {
-  background-color: var(--dv-activegroup-visiblepanel-tab-color);
-}
-.dv-tab.dv-active-tab .dv-default-tab .dv-default-tab-action {
-  visibility: visible;
-}
-.dv-tab.dv-inactive-tab .dv-default-tab .dv-default-tab-action {
-  visibility: hidden;
-}
-.dv-tab.dv-inactive-tab .dv-default-tab:hover .dv-default-tab-action {
-  visibility: visible;
-}
-.dv-tab .dv-default-tab {
-  position: relative;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-.dv-tab .dv-default-tab .dv-default-tab-content {
-  flex-grow: 1;
-  margin-right: 4px;
-}
-.dv-tab .dv-default-tab .dv-default-tab-action {
-  padding: 4px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
-}
-.dv-tab .dv-default-tab .dv-default-tab-action:hover {
-  border-radius: 2px;
-  background-color: var(--dv-icon-hover-background-color);
-}
-.dv-watermark {
-  display: flex;
-  height: 100%;
-}
 .dv-tabs-overflow-dropdown-default {
   height: 100%;
   color: var(--dv-activegroup-hiddenpanel-tab-color);
@@ -1189,4 +1128,65 @@
 }
 .dv-tabs-and-actions-container .dv-right-actions-container {
   display: flex;
+}
+.dv-dragged {
+  transform: translate3d(0px, 0px, 0px); /* forces tab to be drawn on a separate layer (see https://github.com/microsoft/vscode/issues/18733) */
+}
+
+.dv-tab {
+  flex-shrink: 0;
+}
+.dv-tab:focus-within, .dv-tab:focus {
+  position: relative;
+}
+.dv-tab:focus-within::after, .dv-tab:focus::after {
+  position: absolute;
+  content: "";
+  height: 100%;
+  width: 100%;
+  top: 0px;
+  left: 0px;
+  pointer-events: none;
+  outline: 1px solid var(--dv-tab-divider-color) !important;
+  outline-offset: -1px;
+  z-index: 5;
+}
+.dv-tab.dv-tab-dragging .dv-default-tab-action {
+  background-color: var(--dv-activegroup-visiblepanel-tab-color);
+}
+.dv-tab.dv-active-tab .dv-default-tab .dv-default-tab-action {
+  visibility: visible;
+}
+.dv-tab.dv-inactive-tab .dv-default-tab .dv-default-tab-action {
+  visibility: hidden;
+}
+.dv-tab.dv-inactive-tab .dv-default-tab:hover .dv-default-tab-action {
+  visibility: visible;
+}
+.dv-tab .dv-default-tab {
+  position: relative;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.dv-tab .dv-default-tab .dv-default-tab-content {
+  flex-grow: 1;
+  margin-right: 4px;
+}
+.dv-tab .dv-default-tab .dv-default-tab-action {
+  padding: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+}
+.dv-tab .dv-default-tab .dv-default-tab-action:hover {
+  border-radius: 2px;
+  background-color: var(--dv-icon-hover-background-color);
+}
+.dv-watermark {
+  display: flex;
+  height: 100%;
 }

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

@@ -1,6 +1,6 @@
 /**
  * dockview-core
- * @version 4.2.5
+ * @version 4.3.1
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -185,7 +185,10 @@ class Emitter {
         return this._event;
     }
     fire(e) {
-        this._last = e;
+        var _a;
+        if ((_a = this.options) === null || _a === void 0 ? void 0 : _a.replay) {
+            this._last = e;
+        }
         for (const listener of this._listeners) {
             listener.callback(e);
         }
@@ -3950,9 +3953,9 @@ class Droptarget extends CompositeDisposable {
             onDragOver: (e) => {
                 var _a, _b, _c, _d, _e, _f, _g;
                 Droptarget.ACTUAL_TARGET = this;
-                const overrideTraget = (_b = (_a = this.options).getOverrideTarget) === null || _b === void 0 ? void 0 : _b.call(_a);
+                const overrideTarget = (_b = (_a = this.options).getOverrideTarget) === null || _b === void 0 ? void 0 : _b.call(_a);
                 if (this._acceptedTargetZonesSet.size === 0) {
-                    if (overrideTraget) {
+                    if (overrideTarget) {
                         return;
                     }
                     this.removeDropTarget();
@@ -3979,7 +3982,7 @@ class Droptarget extends CompositeDisposable {
                     return;
                 }
                 if (!this.options.canDisplayOverlay(e, quadrant)) {
-                    if (overrideTraget) {
+                    if (overrideTarget) {
                         return;
                     }
                     this.removeDropTarget();
@@ -3999,7 +4002,7 @@ class Droptarget extends CompositeDisposable {
                     return;
                 }
                 this.markAsUsed(e);
-                if (overrideTraget) ;
+                if (overrideTarget) ;
                 else if (!this.targetElement) {
                     this.targetElement = document.createElement('div');
                     this.targetElement.className = 'dv-drop-target-dropzone';
@@ -5108,7 +5111,7 @@ class VoidContainer extends CompositeDisposable {
             this.accessor.doSetGroupActive(this.group);
         }));
         const handler = new GroupDragHandler(this._element, accessor, group);
-        this.dropTraget = new Droptarget(this._element, {
+        this.dropTarget = new Droptarget(this._element, {
             acceptedTargetZones: ['center'],
             canDisplayOverlay: (event, position) => {
                 const data = getPanelData();
@@ -5119,12 +5122,12 @@ class VoidContainer extends CompositeDisposable {
             },
             getOverrideTarget: () => { var _a; return (_a = group.model.dropTargetContainer) === null || _a === void 0 ? void 0 : _a.model; },
         });
-        this.onWillShowOverlay = this.dropTraget.onWillShowOverlay;
+        this.onWillShowOverlay = this.dropTarget.onWillShowOverlay;
         this.addDisposables(handler, handler.onDragStart((event) => {
             this._onDragStart.fire(event);
-        }), this.dropTraget.onDrop((event) => {
+        }), this.dropTarget.onDrop((event) => {
             this._onDrop.fire(event);
-        }), this.dropTraget);
+        }), this.dropTarget);
     }
 }
 
@@ -8350,7 +8353,7 @@ class DockviewComponent extends BaseGrid {
         this.onDidPopoutGroupPositionChange = this._onDidPopoutGroupPositionChange.event;
         this._onDidLayoutFromJSON = new Emitter();
         this.onDidLayoutFromJSON = this._onDidLayoutFromJSON.event;
-        this._onDidActivePanelChange = new Emitter();
+        this._onDidActivePanelChange = new Emitter({ replay: true });
         this.onDidActivePanelChange = this._onDidActivePanelChange.event;
         this._onDidMovePanel = new Emitter();
         this.onDidMovePanel = this._onDidMovePanel.event;
@@ -8569,9 +8572,11 @@ class DockviewComponent extends BaseGrid {
             const gready = document.createElement('div');
             gready.className = 'dv-overlay-render-container';
             const overlayRenderContainer = new OverlayRenderContainer(gready, this);
-            const referenceGroup = itemToPopout instanceof DockviewPanel
-                ? itemToPopout.group
-                : itemToPopout;
+            const referenceGroup = (options === null || options === void 0 ? void 0 : options.referenceGroup)
+                ? options.referenceGroup
+                : itemToPopout instanceof DockviewPanel
+                    ? itemToPopout.group
+                    : itemToPopout;
             const referenceLocation = itemToPopout.api.location.type;
             /**
              * The group that is being added doesn't already exist within the DOM, the most likely occurance
@@ -9063,7 +9068,7 @@ class DockviewComponent extends BaseGrid {
         return result;
     }
     fromJSON(data) {
-        var _a, _b, _c;
+        var _a, _b;
         this.clear();
         if (typeof data !== 'object' || data === null) {
             throw new Error('serialized layout must be a non-null object');
@@ -9135,12 +9140,11 @@ class DockviewComponent extends BaseGrid {
             for (const serializedPopoutGroup of serializedPopoutGroups) {
                 const { data, position, gridReferenceGroup, url } = serializedPopoutGroup;
                 const group = createGroupFromSerializedState(data);
-                this.addPopoutGroup((_c = (gridReferenceGroup
-                    ? this.getPanel(gridReferenceGroup)
-                    : undefined)) !== null && _c !== void 0 ? _c : group, {
+                this.addPopoutGroup(group, {
                     position: position !== null && position !== void 0 ? position : undefined,
-                    overridePopoutGroup: gridReferenceGroup
-                        ? group
+                    overridePopoutGroup: gridReferenceGroup ? group : undefined,
+                    referenceGroup: gridReferenceGroup
+                        ? this.getPanel(gridReferenceGroup)
                         : undefined,
                     popoutUrl: url,
                 });

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

@@ -172,6 +172,9 @@ const createGroupActions = (group, groupType) => {
     setTimeout(() => {
         groupType = groupType || group.getParams()?.floatType
         resetActionStates(group, actionContainer, groupType);
+        if (showUp(group) && getUpState(group)) {
+            group.panels.forEach(panel => panel.view.content.element.classList.add('bb-overflowHidden'))
+        }
     }, 0)
     addActionEvent(group, actionContainer);
 }
@@ -618,6 +621,7 @@ const down = (group, actionContainer) => {
             parentEle.style.bottom = parseFloat(bottom) - (packup.height - tabHeight) + 'px'
         }
         actionContainer.classList.add('bb-up');
+        group.panels.forEach(panel => panel.view.content.element.classList.remove('bb-overflowHidden'))
     }
     else {
         group.setParams({ packup: { isPackup: true, height: parseFloat(height) } });
@@ -626,6 +630,7 @@ const down = (group, actionContainer) => {
             parentEle.style.bottom = parseFloat(bottom) + (parseFloat(height) - tabHeight) + 'px'
         }
         actionContainer.classList.remove('bb-up')
+        group.panels.forEach(panel => panel.view.content.element.classList.add('bb-overflowHidden'))
     }
     saveConfig(group.api.accessor)
 }