diff --git a/src/components/BootstrapBlazor.DockView/BootstrapBlazor.DockView.csproj b/src/components/BootstrapBlazor.DockView/BootstrapBlazor.DockView.csproj index 89d7223d..8ae909d2 100644 --- a/src/components/BootstrapBlazor.DockView/BootstrapBlazor.DockView.csproj +++ b/src/components/BootstrapBlazor.DockView/BootstrapBlazor.DockView.csproj @@ -1,7 +1,7 @@  - 9.1.15 + 9.1.16 diff --git a/src/components/BootstrapBlazor.DockView/wwwroot/css/dockview-bb.css b/src/components/BootstrapBlazor.DockView/wwwroot/css/dockview-bb.css index 6c949a69..85b53f60 100644 --- a/src/components/BootstrapBlazor.DockView/wwwroot/css/dockview-bb.css +++ b/src/components/BootstrapBlazor.DockView/wwwroot/css/dockview-bb.css @@ -27,6 +27,10 @@ --dv-tabs-and-actions-container-font-size: 12px; } + .bb-dockview .dv-resize-container { + border: 1px solid var(--bs-border-color); + } + .bb-dockview .bb-dockview-panel { height: 100%; width: 100%; diff --git a/src/components/BootstrapBlazor.DockView/wwwroot/css/dockview.css b/src/components/BootstrapBlazor.DockView/wwwroot/css/dockview.css index 54e87001..5f8efe2d 100644 --- a/src/components/BootstrapBlazor.DockView/wwwroot/css/dockview.css +++ b/src/components/BootstrapBlazor.DockView/wwwroot/css/dockview.css @@ -1129,6 +1129,10 @@ .dv-tabs-and-actions-container .dv-right-actions-container { display: flex; } +.dv-watermark { + display: flex; + height: 100%; +} .dv-dragged { transform: translate3d(0px, 0px, 0px); /* forces tab to be drawn on a separate layer (see https://github.com/microsoft/vscode/issues/18733) */ } @@ -1185,8 +1189,4 @@ .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%; } \ No newline at end of file diff --git a/src/components/BootstrapBlazor.DockView/wwwroot/js/dockview-config.js b/src/components/BootstrapBlazor.DockView/wwwroot/js/dockview-config.js index 714c5303..88ef80a6 100644 --- a/src/components/BootstrapBlazor.DockView/wwwroot/js/dockview-config.js +++ b/src/components/BootstrapBlazor.DockView/wwwroot/js/dockview-config.js @@ -317,9 +317,25 @@ const saveConfig = dockview => { const json = dockview.toJSON(); if (dockview.floatingGroups && dockview.floatingGroups.length > 0) { json.floatingGroups.forEach((fg, index) => { - const width = dockview.floatingGroups[index].group.width - fg.position.width = fg.position.width || (width ? width + 2 : 300) - fg.position.height = fg.position.height || dockview.floatingGroups[index].group.height + const group = dockview.floatingGroups[index].group + if (fg.position.width > 0) { + group.panels.forEach(panel => { + !panel.params.currentPosition && (panel.params.currentPosition = {}) + panel.params.currentPosition.width = fg.position.width + }) + } + else { + fg.position.width = group.params.currentPosition.width || 500 + } + if (fg.position.height > 0) { + group.panels.forEach(panel => { + !panel.params.currentPosition && (panel.params.currentPosition = {}) + panel.params.currentPosition.height = fg.position.height + }) + } + else { + fg.position.height = group.params.currentPosition.height || 350 + } }) } localStorage.setItem(dockview.params.options.localStorageKey, JSON.stringify(json)); 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 3f09b01c..252c6d9c 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.3.1 + * @version 4.4.0 * @link https://github.com/mathuo/dockview * @license MIT */ @@ -3619,6 +3619,9 @@ class DockviewApi { get onDidPopoutGroupPositionChange() { return this.component.onDidPopoutGroupPositionChange; } + get onDidOpenPopoutWindowFail() { + return this.component.onDidOpenPopoutWindowFail; + } /** * All panel objects. */ @@ -8351,6 +8354,8 @@ class DockviewComponent extends BaseGrid { this.onDidPopoutGroupSizeChange = this._onDidPopoutGroupSizeChange.event; this._onDidPopoutGroupPositionChange = new Emitter(); this.onDidPopoutGroupPositionChange = this._onDidPopoutGroupPositionChange.event; + this._onDidOpenPopoutWindowFail = new Emitter(); + this.onDidOpenPopoutWindowFail = this._onDidOpenPopoutWindowFail.event; this._onDidLayoutFromJSON = new Emitter(); this.onDidLayoutFromJSON = this._onDidLayoutFromJSON.event; this._onDidActivePanelChange = new Emitter({ replay: true }); @@ -8415,7 +8420,7 @@ class DockviewComponent extends BaseGrid { if (options.debug) { this.addDisposables(new StrictEventsSequencing(this)); } - this.addDisposables(this.rootDropTargetContainer, this.overlayRenderContainer, this._onWillDragPanel, this._onWillDragGroup, this._onWillShowOverlay, this._onDidActivePanelChange, this._onDidAddPanel, this._onDidRemovePanel, this._onDidLayoutFromJSON, this._onDidDrop, this._onWillDrop, this._onDidMovePanel, this._onDidAddGroup, this._onDidRemoveGroup, this._onDidActiveGroupChange, this._onUnhandledDragOverEvent, this._onDidMaximizedGroupChange, this._onDidOptionsChange, this._onDidPopoutGroupSizeChange, this._onDidPopoutGroupPositionChange, this.onDidViewVisibilityChangeMicroTaskQueue(() => { + this.addDisposables(this.rootDropTargetContainer, this.overlayRenderContainer, this._onWillDragPanel, this._onWillDragGroup, this._onWillShowOverlay, this._onDidActivePanelChange, this._onDidAddPanel, this._onDidRemovePanel, this._onDidLayoutFromJSON, this._onDidDrop, this._onWillDrop, this._onDidMovePanel, this._onDidAddGroup, this._onDidRemoveGroup, this._onDidActiveGroupChange, this._onUnhandledDragOverEvent, this._onDidMaximizedGroupChange, this._onDidOptionsChange, this._onDidPopoutGroupSizeChange, this._onDidPopoutGroupPositionChange, this._onDidOpenPopoutWindowFail, this.onDidViewVisibilityChangeMicroTaskQueue(() => { this.updateWatermark(); }), this.onDidAdd((event) => { if (!this._moving) { @@ -8565,13 +8570,6 @@ class DockviewComponent extends BaseGrid { 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 = (options === null || options === void 0 ? void 0 : options.referenceGroup) ? options.referenceGroup : itemToPopout instanceof DockviewPanel @@ -8579,7 +8577,7 @@ class DockviewComponent extends BaseGrid { : itemToPopout; const referenceLocation = itemToPopout.api.location.type; /** - * The group that is being added doesn't already exist within the DOM, the most likely occurance + * The group that is being added doesn't already exist within the DOM, the most likely occurrence * of this case is when being called from the `fromJSON(...)` method */ const isGroupAddedToDom = referenceGroup.element.parentElement !== null; @@ -8592,8 +8590,28 @@ class DockviewComponent extends BaseGrid { } else { group = this.createGroup({ id: groupId }); - this._onDidAddGroup.fire(group); + if (popoutContainer) { + this._onDidAddGroup.fire(group); + } } + if (popoutContainer === null) { + console.error('dockview: failed to create popout. perhaps you need to allow pop-ups for this website'); + popoutWindowDisposable.dispose(); + this._onDidOpenPopoutWindowFail.fire(); + // if the popout window was blocked, we need to move the group back to the reference group + // and set it to visible + this.movingLock(() => moveGroupWithoutDestroying({ + from: group, + to: referenceGroup, + })); + if (!referenceGroup.api.isVisible) { + referenceGroup.api.setVisible(true); + } + return false; + } + const gready = document.createElement('div'); + gready.className = 'dv-overlay-render-container'; + const overlayRenderContainer = new OverlayRenderContainer(gready, this); group.model.renderContainer = overlayRenderContainer; group.layout(_window.window.innerWidth, _window.window.innerHeight); let floatingBox; @@ -8750,7 +8768,7 @@ class DockviewComponent extends BaseGrid { return true; }) .catch((err) => { - console.error('dockview: failed to create popout window', err); + console.error('dockview: failed to create popout.', err); return false; }); } diff --git a/src/components/BootstrapBlazor.DockView/wwwroot/js/dockview-extensions.js b/src/components/BootstrapBlazor.DockView/wwwroot/js/dockview-extensions.js index 1c5d57b2..367b8cac 100644 --- a/src/components/BootstrapBlazor.DockView/wwwroot/js/dockview-extensions.js +++ b/src/components/BootstrapBlazor.DockView/wwwroot/js/dockview-extensions.js @@ -10,6 +10,11 @@ DockviewComponent.prototype.on = function (eventType, callback) { const dispose = DockviewComponent.prototype.dispose; DockviewComponent.prototype.dispose = function () { this.params.observer?.disconnect(); + this.groups.forEach(group => { + if (group.mutationObserver) { + group.mutationObserver.disconnect(); + } + }) saveConfig(this); dispose.call(this); } diff --git a/src/components/BootstrapBlazor.DockView/wwwroot/js/dockview-group.js b/src/components/BootstrapBlazor.DockView/wwwroot/js/dockview-group.js index 6c95ed4d..812ec864 100644 --- a/src/components/BootstrapBlazor.DockView/wwwroot/js/dockview-group.js +++ b/src/components/BootstrapBlazor.DockView/wwwroot/js/dockview-group.js @@ -167,6 +167,13 @@ const createGroupActions = (group, groupType) => { if (item.name !== 'bar') { const icon = getIcon(item.name); actionContainer.append(icon); + if(icon.classList.contains('bb-dockview-control-icon-dropdown')){ + setTimeout(() => { + if (group.model.location.type == 'floating' && group.panels.some(panel => panel.renderer == 'always')) { + observeDisplayChange(icon, group) + } + }, 0) + } } }); setTimeout(() => { @@ -178,6 +185,37 @@ const createGroupActions = (group, groupType) => { }, 0) addActionEvent(group, actionContainer); } +const observeDisplayChange = (icon, group) => { + const dockview = group.api.accessor + const element = icon.querySelector('.dropdown-menu') + const mutationObserver = new MutationObserver((mutations) => { + mutations.forEach(mutation => { + if (mutation.attributeName == 'class') { + if(mutation.target.classList.contains('show')) { + const currentPanelEle = group.activePanel.view.content.element.parentElement + const childEle = currentPanelEle.children[0] + group.element.querySelector('&>.dv-content-container').append(childEle) + currentPanelEle.style.zIndex = -1 + childEle.wrapperEle = currentPanelEle + } + else { + const panelEleList = [...group.element.querySelector('&>.dv-content-container').children].map(item => { + const wrapperEle = item.wrapperEle + delete item.wrapperEle + wrapperEle.append(item) + return wrapperEle + }) + group.element.parentElement.parentElement.append(...panelEleList) + } + } + }) + }); + group.mutationObserver = mutationObserver + mutationObserver.observe(element, { + attributes: true, + attributeFilter: ["class"], + }); +} const disposeGroup = group => { const { observer } = group.api.accessor.params; @@ -185,6 +223,9 @@ const disposeGroup = group => { observer.unobserve(group.header.element); observer.unobserve(group.header.tabs._tabsList); } + if (group.mutationObserver) { + group.mutationObserver.disconnect(); + } removeActionEvent(group); } diff --git a/src/components/BootstrapBlazor.DockView/wwwroot/js/dockview-utils.js b/src/components/BootstrapBlazor.DockView/wwwroot/js/dockview-utils.js index 3bafb2f5..a985ab6d 100644 --- a/src/components/BootstrapBlazor.DockView/wwwroot/js/dockview-utils.js +++ b/src/components/BootstrapBlazor.DockView/wwwroot/js/dockview-utils.js @@ -45,9 +45,6 @@ const initDockview = (dockview, options, template) => { } dockview.update = options => { - if (options.layoutConfig) { - reloadFromConfig(dockview, options); - } if (dockview.params.options.lock !== options.lock) { dockview.params.options.lock = options.lock; toggleGroupLock(dockview, options); @@ -56,6 +53,9 @@ const initDockview = (dockview, options, template) => { dockview.options.theme.className = options.theme; dockview.updateTheme(); } + if (options.layoutConfig) { + reloadFromConfig(dockview, options); + } else { toggleComponent(dockview, options); }