diff --git a/src/components/BootstrapBlazor.DockView/BootstrapBlazor.DockView.csproj b/src/components/BootstrapBlazor.DockView/BootstrapBlazor.DockView.csproj index e76a4763..699e9660 100644 --- a/src/components/BootstrapBlazor.DockView/BootstrapBlazor.DockView.csproj +++ b/src/components/BootstrapBlazor.DockView/BootstrapBlazor.DockView.csproj @@ -1,7 +1,7 @@  - 9.1.10 + 9.1.11 diff --git a/src/components/BootstrapBlazor.DockView/Components/DockViewV2.razor.js b/src/components/BootstrapBlazor.DockView/Components/DockViewV2.razor.js index 06440b21..ab91fbee 100644 --- a/src/components/BootstrapBlazor.DockView/Components/DockViewV2.razor.js +++ b/src/components/BootstrapBlazor.DockView/Components/DockViewV2.razor.js @@ -10,7 +10,7 @@ export async function init(id, invoke, options) { return; } - if(options.theme === 'dockview-theme-light') { + if (options.theme === 'dockview-theme-light') { let theme = getTheme(); if (theme === 'dark') { options.theme = `dockview-theme-dark`; diff --git a/src/components/BootstrapBlazor.DockView/wwwroot/css/dockview-bb.css b/src/components/BootstrapBlazor.DockView/wwwroot/css/dockview-bb.css index 8b9957e5..d1feb74b 100644 --- a/src/components/BootstrapBlazor.DockView/wwwroot/css/dockview-bb.css +++ b/src/components/BootstrapBlazor.DockView/wwwroot/css/dockview-bb.css @@ -248,7 +248,8 @@ height: 100% !important; } - .bb-dockview .dv-resize-container-drawer:not(.active) { + .bb-dockview .dv-resize-container-drawer:not(.active), + .bb-dockview .dv-render-overlay-float-drawer:not(.active) { z-index: -1 !important; } diff --git a/src/components/BootstrapBlazor.DockView/wwwroot/css/dockview.css b/src/components/BootstrapBlazor.DockView/wwwroot/css/dockview.css index 5ad7a259..0897f57b 100644 --- a/src/components/BootstrapBlazor.DockView/wwwroot/css/dockview.css +++ b/src/components/BootstrapBlazor.DockView/wwwroot/css/dockview.css @@ -576,6 +576,60 @@ .dockview-theme-light-spaced .dv-resize-container .dv-groupview { border: 2px solid rgba(255, 255, 255, 0.1); } +.dv-drop-target { + position: relative; + --dv-transition-duration: 70ms; +} +.dv-drop-target > .dv-drop-target-dropzone { + position: absolute; + left: 0px; + top: 0px; + height: 100%; + width: 100%; + z-index: 1000; + pointer-events: none; +} +.dv-drop-target > .dv-drop-target-dropzone > .dv-drop-target-selection { + position: relative; + box-sizing: border-box; + height: 100%; + width: 100%; + border: var(--dv-drag-over-border); + background-color: var(--dv-drag-over-background-color); + transition: top var(--dv-transition-duration) ease-out, left var(--dv-transition-duration) ease-out, width var(--dv-transition-duration) ease-out, height var(--dv-transition-duration) ease-out, opacity var(--dv-transition-duration) ease-out; + will-change: transform; + pointer-events: none; +} +.dv-drop-target > .dv-drop-target-dropzone > .dv-drop-target-selection.dv-drop-target-top.dv-drop-target-small-vertical { + border-top: 1px solid var(--dv-drag-over-border-color); +} +.dv-drop-target > .dv-drop-target-dropzone > .dv-drop-target-selection.dv-drop-target-bottom.dv-drop-target-small-vertical { + border-bottom: 1px solid var(--dv-drag-over-border-color); +} +.dv-drop-target > .dv-drop-target-dropzone > .dv-drop-target-selection.dv-drop-target-left.dv-drop-target-small-horizontal { + border-left: 1px solid var(--dv-drag-over-border-color); +} +.dv-drop-target > .dv-drop-target-dropzone > .dv-drop-target-selection.dv-drop-target-right.dv-drop-target-small-horizontal { + border-right: 1px solid var(--dv-drag-over-border-color); +} +.dv-drop-target-container { + position: absolute; + z-index: 9999; + top: 0px; + left: 0px; + height: 100%; + width: 100%; + pointer-events: none; + overflow: hidden; + --dv-transition-duration: 300ms; +} +.dv-drop-target-container .dv-drop-target-anchor { + position: relative; + border: var(--dv-drag-over-border); + transition: opacity var(--dv-transition-duration) ease-in, top var(--dv-transition-duration) ease-out, left var(--dv-transition-duration) ease-out, width var(--dv-transition-duration) ease-out, height var(--dv-transition-duration) ease-out; + background-color: var(--dv-drag-over-background-color); + opacity: 1; +} .dv-dockview { position: relative; background-color: var(--dv-group-view-background-color); @@ -632,60 +686,6 @@ min-height: 0; outline: none; } -.dv-drop-target { - position: relative; - --dv-transition-duration: 70ms; -} -.dv-drop-target > .dv-drop-target-dropzone { - position: absolute; - left: 0px; - top: 0px; - height: 100%; - width: 100%; - z-index: 1000; - pointer-events: none; -} -.dv-drop-target > .dv-drop-target-dropzone > .dv-drop-target-selection { - position: relative; - box-sizing: border-box; - height: 100%; - width: 100%; - border: var(--dv-drag-over-border); - background-color: var(--dv-drag-over-background-color); - transition: top var(--dv-transition-duration) ease-out, left var(--dv-transition-duration) ease-out, width var(--dv-transition-duration) ease-out, height var(--dv-transition-duration) ease-out, opacity var(--dv-transition-duration) ease-out; - will-change: transform; - pointer-events: none; -} -.dv-drop-target > .dv-drop-target-dropzone > .dv-drop-target-selection.dv-drop-target-top.dv-drop-target-small-vertical { - border-top: 1px solid var(--dv-drag-over-border-color); -} -.dv-drop-target > .dv-drop-target-dropzone > .dv-drop-target-selection.dv-drop-target-bottom.dv-drop-target-small-vertical { - border-bottom: 1px solid var(--dv-drag-over-border-color); -} -.dv-drop-target > .dv-drop-target-dropzone > .dv-drop-target-selection.dv-drop-target-left.dv-drop-target-small-horizontal { - border-left: 1px solid var(--dv-drag-over-border-color); -} -.dv-drop-target > .dv-drop-target-dropzone > .dv-drop-target-selection.dv-drop-target-right.dv-drop-target-small-horizontal { - border-right: 1px solid var(--dv-drag-over-border-color); -} -.dv-drop-target-container { - position: absolute; - z-index: 9999; - top: 0px; - left: 0px; - height: 100%; - width: 100%; - pointer-events: none; - overflow: hidden; - --dv-transition-duration: 300ms; -} -.dv-drop-target-container .dv-drop-target-anchor { - position: relative; - border: var(--dv-drag-over-border); - transition: opacity var(--dv-transition-duration) ease-in, top var(--dv-transition-duration) ease-out, left var(--dv-transition-duration) ease-out, width var(--dv-transition-duration) ease-out, height var(--dv-transition-duration) ease-out; - background-color: var(--dv-drag-over-background-color); - opacity: 1; -} .dv-root-wrapper { height: 100%; width: 100%; @@ -1080,10 +1080,6 @@ 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 +1185,8 @@ } .dv-tabs-and-actions-container .dv-right-actions-container { display: flex; +} +.dv-watermark { + display: flex; + height: 100%; } \ No newline at end of file diff --git a/src/components/BootstrapBlazor.DockView/wwwroot/js/dockview-core.esm.js b/src/components/BootstrapBlazor.DockView/wwwroot/js/dockview-core.esm.js index fc74b43d..45451606 100644 --- a/src/components/BootstrapBlazor.DockView/wwwroot/js/dockview-core.esm.js +++ b/src/components/BootstrapBlazor.DockView/wwwroot/js/dockview-core.esm.js @@ -1,6 +1,6 @@ -/** +/** * dockview-core - * @version 4.2.1 + * @version 4.2.3 * @link https://github.com/mathuo/dockview * @license MIT */ @@ -7816,45 +7816,45 @@ class OverlayRenderContainer extends CompositeDisposable { focusContainer.style.zIndex = ''; // reset the z-index, perhaps CSS will take over here } }; - const disposable = new CompositeDisposable(observerDisposable, + const disposable = new CompositeDisposable(observerDisposable, + /** + * since container is positioned absoutely we must explicitly forward + * the dnd events for the expect behaviours to continue to occur in terms of dnd + * + * the dnd observer does not need to be conditional on whether the panel is visible since + * non-visible panels are 'display: none' and in such case the dnd observer will not fire. + */ + new DragAndDropObserver(focusContainer, { + onDragEnd: (e) => { + referenceContainer.dropTarget.dnd.onDragEnd(e); + }, + onDragEnter: (e) => { + referenceContainer.dropTarget.dnd.onDragEnter(e); + }, + onDragLeave: (e) => { + referenceContainer.dropTarget.dnd.onDragLeave(e); + }, + onDrop: (e) => { + referenceContainer.dropTarget.dnd.onDrop(e); + }, + onDragOver: (e) => { + referenceContainer.dropTarget.dnd.onDragOver(e); + }, + }), panel.api.onDidVisibilityChange(() => { /** - * since container is positioned absoutely we must explicitly forward - * the dnd events for the expect behaviours to continue to occur in terms of dnd - * - * the dnd observer does not need to be conditional on whether the panel is visible since - * non-visible panels are 'display: none' and in such case the dnd observer will not fire. + * Control the visibility of the content, however even when not visible (display: none) + * the content is still maintained within the DOM hence DOM specific attributes + * such as scroll position are maintained when next made visible. */ - new DragAndDropObserver(focusContainer, { - onDragEnd: (e) => { - referenceContainer.dropTarget.dnd.onDragEnd(e); - }, - onDragEnter: (e) => { - referenceContainer.dropTarget.dnd.onDragEnter(e); - }, - onDragLeave: (e) => { - referenceContainer.dropTarget.dnd.onDragLeave(e); - }, - onDrop: (e) => { - referenceContainer.dropTarget.dnd.onDrop(e); - }, - onDragOver: (e) => { - referenceContainer.dropTarget.dnd.onDragOver(e); - }, - }), panel.api.onDidVisibilityChange(() => { - /** - * Control the visibility of the content, however even when not visible (display: none) - * the content is still maintained within the DOM hence DOM specific attributes - * such as scroll position are maintained when next made visible. - */ - visibilityChanged(); - }), panel.api.onDidDimensionsChange(() => { - if (!panel.api.isVisible) { - return; - } - resize(); - }), panel.api.onDidLocationChange(() => { - correctLayerPosition(); - })); + visibilityChanged(); + }), panel.api.onDidDimensionsChange(() => { + if (!panel.api.isVisible) { + return; + } + resize(); + }), panel.api.onDidLocationChange(() => { + correctLayerPosition(); + })); this.map[panel.api.id].destroy = Disposable.from(() => { var _a; if (panel.view.content.element.parentElement === focusContainer) { @@ -7896,7 +7896,7 @@ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE. ***************************************************************************** */ -/* global Reflect, Promise, SuppressedError, Symbol */ +/* global Reflect, Promise, SuppressedError, Symbol, Iterator */ function __awaiter(thisArg, _arguments, P, generator) { @@ -7959,8 +7959,8 @@ class PopoutWindow extends CompositeDisposable { } } open() { - var _a, _b; return __awaiter(this, void 0, void 0, function* () { + var _a, _b; if (this._window) { throw new Error('instance of popout window is already open'); } @@ -8497,7 +8497,7 @@ class DockviewComponent extends BaseGrid { const box = getBox(); const groupId = (_b = (_a = options === null || options === void 0 ? void 0 : options.overridePopoutGroup) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : this.getNextGroupId(); const _window = new PopoutWindow(`${this.id}-${groupId}`, // unique id - theme !== null && theme !== void 0 ? theme : '', { + theme !== null && theme !== void 0 ? theme : '', { url: (_e = (_c = options === null || options === void 0 ? void 0 : options.popoutUrl) !== null && _c !== void 0 ? _c : (_d = this.options) === null || _d === void 0 ? void 0 : _d.popoutUrl) !== null && _e !== void 0 ? _e : '/popout.html', left: window.screenX + box.left, top: window.screenY + box.top, @@ -8512,196 +8512,196 @@ class DockviewComponent extends BaseGrid { return _window .open() .then((popoutContainer) => { - var _a; - if (_window.isDisposed) { - return false; + var _a; + if (_window.isDisposed) { + return false; + } + if (popoutContainer === null) { + popoutWindowDisposable.dispose(); + return false; + } + 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 referenceLocation = itemToPopout.api.location.type; + /** + * The group that is being added doesn't already exist within the DOM, the most likely occurance + * of this case is when being called from the `fromJSON(...)` method + */ + const isGroupAddedToDom = referenceGroup.element.parentElement !== null; + let group; + if (!isGroupAddedToDom) { + group = referenceGroup; + } + else if (options === null || options === void 0 ? void 0 : options.overridePopoutGroup) { + group = options.overridePopoutGroup; + } + else { + group = this.createGroup({ id: groupId }); + this._onDidAddGroup.fire(group); + } + group.model.renderContainer = overlayRenderContainer; + group.layout(_window.window.innerWidth, _window.window.innerHeight); + let floatingBox; + if (!(options === null || options === void 0 ? void 0 : options.overridePopoutGroup) && isGroupAddedToDom) { + if (itemToPopout instanceof DockviewPanel) { + this.movingLock(() => { + const panel = referenceGroup.model.removePanel(itemToPopout); + group.model.openPanel(panel); + }); } - if (popoutContainer === null) { - popoutWindowDisposable.dispose(); - return false; + else { + this.movingLock(() => moveGroupWithoutDestroying({ + from: referenceGroup, + to: group, + })); + switch (referenceLocation) { + case 'grid': + referenceGroup.api.setVisible(false); + break; + case 'floating': + case 'popout': + floatingBox = (_a = this._floatingGroups + .find((value) => value.group.api.id === + itemToPopout.api.id)) === null || _a === void 0 ? void 0 : _a.overlay.toJSON(); + this.removeGroup(referenceGroup); + break; + } } - 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 referenceLocation = itemToPopout.api.location.type; - /** - * The group that is being added doesn't already exist within the DOM, the most likely occurance - * of this case is when being called from the `fromJSON(...)` method - */ - const isGroupAddedToDom = referenceGroup.element.parentElement !== null; - let group; - if (!isGroupAddedToDom) { - group = referenceGroup; + } + popoutContainer.classList.add('dv-dockview'); + popoutContainer.style.overflow = 'hidden'; + popoutContainer.appendChild(gready); + popoutContainer.appendChild(group.element); + const anchor = document.createElement('div'); + const dropTargetContainer = new DropTargetAnchorContainer(anchor, { disabled: this.rootDropTargetContainer.disabled }); + popoutContainer.appendChild(anchor); + group.model.dropTargetContainer = dropTargetContainer; + group.model.location = { + type: 'popout', + getWindow: () => _window.window, + popoutUrl: options === null || options === void 0 ? void 0 : options.popoutUrl, + }; + if (isGroupAddedToDom && + itemToPopout.api.location.type === 'grid') { + itemToPopout.api.setVisible(false); + } + this.doSetGroupAndPanelActive(group); + popoutWindowDisposable.addDisposables(group.api.onDidActiveChange((event) => { + var _a; + if (event.isActive) { + (_a = _window.window) === null || _a === void 0 ? void 0 : _a.focus(); } - else if (options === null || options === void 0 ? void 0 : options.overridePopoutGroup) { - group = options.overridePopoutGroup; + }), group.api.onWillFocus(() => { + var _a; + (_a = _window.window) === null || _a === void 0 ? void 0 : _a.focus(); + })); + let returnedGroup; + const isValidReferenceGroup = isGroupAddedToDom && + referenceGroup && + this.getPanel(referenceGroup.id); + const value = { + window: _window, + popoutGroup: group, + referenceGroup: isValidReferenceGroup + ? referenceGroup.id + : undefined, + disposable: { + dispose: () => { + popoutWindowDisposable.dispose(); + return returnedGroup; + }, + }, + }; + const _onDidWindowPositionChange = onDidWindowMoveEnd(_window.window); + popoutWindowDisposable.addDisposables(_onDidWindowPositionChange, onDidWindowResizeEnd(_window.window, () => { + this._onDidPopoutGroupSizeChange.fire({ + width: _window.window.innerWidth, + height: _window.window.innerHeight, + group, + }); + }), _onDidWindowPositionChange.event(() => { + this._onDidPopoutGroupPositionChange.fire({ + screenX: _window.window.screenX, + screenY: _window.window.screenX, + group, + }); + }), + /** + * ResizeObserver seems slow here, I do not know why but we don't need it + * since we can reply on the window resize event as we will occupy the full + * window dimensions + */ + addDisposableListener(_window.window, 'resize', () => { + group.layout(_window.window.innerWidth, _window.window.innerHeight); + }), overlayRenderContainer, Disposable.from(() => { + if (this.isDisposed) { + return; // cleanup may run after instance is disposed } - else { - group = this.createGroup({ id: groupId }); - this._onDidAddGroup.fire(group); + if (isGroupAddedToDom && + this.getPanel(referenceGroup.id)) { + this.movingLock(() => moveGroupWithoutDestroying({ + from: group, + to: referenceGroup, + })); + if (!referenceGroup.api.isVisible) { + referenceGroup.api.setVisible(true); + } + if (this.getPanel(group.id)) { + this.doRemoveGroup(group, { + skipPopoutAssociated: true, + }); + } } - group.model.renderContainer = overlayRenderContainer; - group.layout(_window.window.innerWidth, _window.window.innerHeight); - let floatingBox; - if (!(options === null || options === void 0 ? void 0 : options.overridePopoutGroup) && isGroupAddedToDom) { - if (itemToPopout instanceof DockviewPanel) { - this.movingLock(() => { - const panel = referenceGroup.model.removePanel(itemToPopout); - group.model.openPanel(panel); + else if (this.getPanel(group.id)) { + group.model.renderContainer = + this.overlayRenderContainer; + group.model.dropTargetContainer = + this.rootDropTargetContainer; + returnedGroup = group; + const alreadyRemoved = !this._popoutGroups.find((p) => p.popoutGroup === group); + if (alreadyRemoved) { + /** + * If this popout group was explicitly removed then we shouldn't run the additional + * steps. To tell if the running of this disposable is the result of this popout group + * being explicitly removed we can check if this popout group is still referenced in + * the `this._popoutGroups` list. + */ + return; + } + if (floatingBox) { + this.addFloatingGroup(group, { + height: floatingBox.height, + width: floatingBox.width, + position: floatingBox, }); } else { - this.movingLock(() => moveGroupWithoutDestroying({ - from: referenceGroup, - to: group, - })); - switch (referenceLocation) { - case 'grid': - referenceGroup.api.setVisible(false); - break; - case 'floating': - case 'popout': - floatingBox = (_a = this._floatingGroups - .find((value) => value.group.api.id === - itemToPopout.api.id)) === null || _a === void 0 ? void 0 : _a.overlay.toJSON(); - this.removeGroup(referenceGroup); - break; - } + this.doRemoveGroup(group, { + skipDispose: true, + skipActive: true, + skipPopoutReturn: true, + }); + group.model.location = { type: 'grid' }; + this.movingLock(() => { + // suppress group add events since the group already exists + this.doAddGroup(group, [0]); + }); } + this.doSetGroupAndPanelActive(group); } - popoutContainer.classList.add('dv-dockview'); - popoutContainer.style.overflow = 'hidden'; - popoutContainer.appendChild(gready); - popoutContainer.appendChild(group.element); - const anchor = document.createElement('div'); - const dropTargetContainer = new DropTargetAnchorContainer(anchor, { disabled: this.rootDropTargetContainer.disabled }); - popoutContainer.appendChild(anchor); - group.model.dropTargetContainer = dropTargetContainer; - group.model.location = { - type: 'popout', - getWindow: () => _window.window, - popoutUrl: options === null || options === void 0 ? void 0 : options.popoutUrl, - }; - if (isGroupAddedToDom && - itemToPopout.api.location.type === 'grid') { - itemToPopout.api.setVisible(false); - } - this.doSetGroupAndPanelActive(group); - popoutWindowDisposable.addDisposables(group.api.onDidActiveChange((event) => { - var _a; - if (event.isActive) { - (_a = _window.window) === null || _a === void 0 ? void 0 : _a.focus(); - } - }), group.api.onWillFocus(() => { - var _a; - (_a = _window.window) === null || _a === void 0 ? void 0 : _a.focus(); - })); - let returnedGroup; - const isValidReferenceGroup = isGroupAddedToDom && - referenceGroup && - this.getPanel(referenceGroup.id); - const value = { - window: _window, - popoutGroup: group, - referenceGroup: isValidReferenceGroup - ? referenceGroup.id - : undefined, - disposable: { - dispose: () => { - popoutWindowDisposable.dispose(); - return returnedGroup; - }, - }, - }; - const _onDidWindowPositionChange = onDidWindowMoveEnd(_window.window); - popoutWindowDisposable.addDisposables(_onDidWindowPositionChange, onDidWindowResizeEnd(_window.window, () => { - this._onDidPopoutGroupSizeChange.fire({ - width: _window.window.innerWidth, - height: _window.window.innerHeight, - group, - }); - }), _onDidWindowPositionChange.event(() => { - this._onDidPopoutGroupPositionChange.fire({ - screenX: _window.window.screenX, - screenY: _window.window.screenX, - group, - }); - }), - /** - * ResizeObserver seems slow here, I do not know why but we don't need it - * since we can reply on the window resize event as we will occupy the full - * window dimensions - */ - addDisposableListener(_window.window, 'resize', () => { - group.layout(_window.window.innerWidth, _window.window.innerHeight); - }), overlayRenderContainer, Disposable.from(() => { - if (this.isDisposed) { - return; // cleanup may run after instance is disposed - } - if (isGroupAddedToDom && - this.getPanel(referenceGroup.id)) { - this.movingLock(() => moveGroupWithoutDestroying({ - from: group, - to: referenceGroup, - })); - if (!referenceGroup.api.isVisible) { - referenceGroup.api.setVisible(true); - } - if (this.getPanel(group.id)) { - this.doRemoveGroup(group, { - skipPopoutAssociated: true, - }); - } - } - else if (this.getPanel(group.id)) { - group.model.renderContainer = - this.overlayRenderContainer; - group.model.dropTargetContainer = - this.rootDropTargetContainer; - returnedGroup = group; - const alreadyRemoved = !this._popoutGroups.find((p) => p.popoutGroup === group); - if (alreadyRemoved) { - /** - * If this popout group was explicitly removed then we shouldn't run the additional - * steps. To tell if the running of this disposable is the result of this popout group - * being explicitly removed we can check if this popout group is still referenced in - * the `this._popoutGroups` list. - */ - return; - } - if (floatingBox) { - this.addFloatingGroup(group, { - height: floatingBox.height, - width: floatingBox.width, - position: floatingBox, - }); - } - else { - this.doRemoveGroup(group, { - skipDispose: true, - skipActive: true, - skipPopoutReturn: true, - }); - group.model.location = { type: 'grid' }; - this.movingLock(() => { - // suppress group add events since the group already exists - this.doAddGroup(group, [0]); - }); - } - this.doSetGroupAndPanelActive(group); - } - })); - this._popoutGroups.push(value); - this.updateWatermark(); - return true; - }) + })); + this._popoutGroups.push(value); + this.updateWatermark(); + return true; + }) .catch((err) => { - console.error('dockview: failed to create popout window', err); - return false; - }); + console.error('dockview: failed to create popout window', err); + return false; + }); } addFloatingGroup(item, options) { var _a, _b, _c, _d, _e; @@ -8806,9 +8806,8 @@ class DockviewComponent extends BaseGrid { 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 - : (_e = (_d = this.options.floatingGroupBounds) === null || _d === void 0 ? void 0 : _d.minimumHeightWithinViewport) !== null && _e !== void 0 ? _e : DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE - })); + ? undefined + : (_e = (_d = this.options.floatingGroupBounds) === null || _d === void 0 ? void 0 : _d.minimumHeightWithinViewport) !== null && _e !== void 0 ? _e : DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE })); const el = group.element.querySelector('.dv-void-container'); if (!el) { throw new Error('failed to find drag handle'); diff --git a/src/components/BootstrapBlazor.DockView/wwwroot/js/dockview-group.js b/src/components/BootstrapBlazor.DockView/wwwroot/js/dockview-group.js index 8297e89e..a2d4d939 100644 --- a/src/components/BootstrapBlazor.DockView/wwwroot/js/dockview-group.js +++ b/src/components/BootstrapBlazor.DockView/wwwroot/js/dockview-group.js @@ -369,6 +369,7 @@ const createDrawerHandle = (floatingGroup, isRight) => { const className = isRight ? 'bb-resize-container-right' : 'bb-resize-container-left' floatingGroup.element.parentElement.classList.add('dv-resize-container-drawer') floatingGroup.element.parentElement.classList.add(className) + floatingGroup.activePanel.view.content.element.parentElement.classList.add('dv-render-overlay-float-drawer') createDrawerBtn(floatingGroup, isRight) } @@ -393,7 +394,7 @@ const createDrawerBtn = (floatingGroup, isRight) => { if (params.floatType == 'drawer' && item.group != floatingGroup) { item.group.element.parentElement.classList.remove('active') if (activePanel?.renderer == 'always' && parentElement) { - parentElement.classList.remove('active'); + item.group.activePanel.view.content.element.parentElement.classList.remove('active'); } } }) @@ -533,6 +534,8 @@ const observeOverlayChange = (overlay, group) => { parentEle.classList.remove('dv-resize-container-drawer') parentEle.classList.remove('bb-resize-container-right') parentEle.classList.remove('bb-resize-container-left') + group.activePanel.view.content.element.parentElement.classList.remove('active') + group.activePanel.view.content.element.parentElement.classList.remove('dv-render-overlay-float-drawer') group.removePropsOfParams('floatType') group.removePropsOfParams('direction') group.header.rightActionsContainer.classList.remove('bb-show-autohide') @@ -589,6 +592,8 @@ const dock = (group, floatType) => { group.removePropsOfParams('floatType') group.removePropsOfParams('direction') removeDrawerBtn(group) + group.activePanel.view.content.element.parentElement.classList.remove('active') + group.activePanel.view.content.element.parentElement.classList.remove('dv-render-overlay-float-drawer') } else { group.setParams({ rect }) diff --git a/src/components/BootstrapBlazor.DockView/wwwroot/js/dockview-utils.js b/src/components/BootstrapBlazor.DockView/wwwroot/js/dockview-utils.js index ff4235ca..2568a408 100644 --- a/src/components/BootstrapBlazor.DockView/wwwroot/js/dockview-utils.js +++ b/src/components/BootstrapBlazor.DockView/wwwroot/js/dockview-utils.js @@ -124,7 +124,7 @@ const initDockview = (dockview, options, template) => { observeGroup(group) }) dockview.element.querySelector('&>.dv-dockview>.dv-branch-node').addEventListener('click', function (e) { - this.parentElement.querySelectorAll('&>.dv-resize-container-drawer').forEach(item => { + this.parentElement.querySelectorAll('&>.dv-resize-container-drawer, &>.dv-render-overlay-float-drawer').forEach(item => { item.classList.remove('active') }) this.closest('.bb-dockview').querySelectorAll('&>.bb-dockview-aside>.bb-dockview-aside-button').forEach(item => {