Skip to content

Commit ecd99ba

Browse files
zhaijunlei955ArgoZhang
zhaijunlei955
and
ArgoZhang
authored
feat(DocView): bump dockview v4.4.0 (#481)
* fix：修复切换布局时使用layoutConfig报错 * feat：update dockview version to v4.4.0 * fix: 修复renderer为always时floatGroup的tab下拉列表被挡住了 * fix: 修复切换数据节点时不显示的dockview的浮动窗口宽高会丢失 * chore: bump version 9.1.16 Co-Authored-By: chengKun <49547008+zhaijunlei955@users.noreply.github.com> --------- Co-authored-by: Argo Zhang <argo@live.ca>
1 parent 14f2061 commit ecd99ba

8 files changed

Lines changed: 107 additions & 23 deletions

File tree

‎src/components/BootstrapBlazor.DockView/BootstrapBlazor.DockView.csproj‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<Project Sdk="Microsoft.NET.Sdk.Razor">
22

33
<PropertyGroup>
4-
<Version>9.1.15</Version>
4+
<Version>9.1.16</Version>
55
</PropertyGroup>
66

77
<PropertyGroup>

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,10 @@
2727
--dv-tabs-and-actions-container-font-size: 12px;
2828
}
2929

30+
.bb-dockview .dv-resize-container {
31+
border: 1px solid var(--bs-border-color);
32+
}
33+
3034
.bb-dockview .bb-dockview-panel {
3135
height: 100%;
3236
width: 100%;

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1129,6 +1129,10 @@
11291129
.dv-tabs-and-actions-container .dv-right-actions-container {
11301130
display: flex;
11311131
}
1132+
.dv-watermark {
1133+
display: flex;
1134+
height: 100%;
1135+
}
11321136
.dv-dragged {
11331137
transform: translate3d(0px, 0px, 0px); /* forces tab to be drawn on a separate layer (see https://github.com/microsoft/vscode/issues/18733) */
11341138
}
@@ -1185,8 +1189,4 @@
11851189
.dv-tab .dv-default-tab .dv-default-tab-action:hover {
11861190
border-radius: 2px;
11871191
background-color: var(--dv-icon-hover-background-color);
1188-
}
1189-
.dv-watermark {
1190-
display: flex;
1191-
height: 100%;
11921192
}

‎src/components/BootstrapBlazor.DockView/wwwroot/js/dockview-config.js‎

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -317,9 +317,25 @@ const saveConfig = dockview => {
317317
const json = dockview.toJSON();
318318
if (dockview.floatingGroups && dockview.floatingGroups.length > 0) {
319319
json.floatingGroups.forEach((fg, index) => {
320-
const width = dockview.floatingGroups[index].group.width
321-
fg.position.width = fg.position.width || (width ? width + 2 : 300)
322-
fg.position.height = fg.position.height || dockview.floatingGroups[index].group.height
320+
const group = dockview.floatingGroups[index].group
321+
if (fg.position.width > 0) {
322+
group.panels.forEach(panel => {
323+
!panel.params.currentPosition && (panel.params.currentPosition = {})
324+
panel.params.currentPosition.width = fg.position.width
325+
})
326+
}
327+
else {
328+
fg.position.width = group.params.currentPosition.width || 500
329+
}
330+
if (fg.position.height > 0) {
331+
group.panels.forEach(panel => {
332+
!panel.params.currentPosition && (panel.params.currentPosition = {})
333+
panel.params.currentPosition.height = fg.position.height
334+
})
335+
}
336+
else {
337+
fg.position.height = group.params.currentPosition.height || 350
338+
}
323339
})
324340
}
325341
localStorage.setItem(dockview.params.options.localStorageKey, JSON.stringify(json));

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

Lines changed: 30 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/**
22
* dockview-core
3-
* @version 4.3.1
3+
* @version 4.4.0
44
* @link https://github.com/mathuo/dockview
55
* @license MIT
66
*/
@@ -3619,6 +3619,9 @@ class DockviewApi {
36193619
get onDidPopoutGroupPositionChange() {
36203620
return this.component.onDidPopoutGroupPositionChange;
36213621
}
3622+
get onDidOpenPopoutWindowFail() {
3623+
return this.component.onDidOpenPopoutWindowFail;
3624+
}
36223625
/**
36233626
* All panel objects.
36243627
*/
@@ -8351,6 +8354,8 @@ class DockviewComponent extends BaseGrid {
83518354
this.onDidPopoutGroupSizeChange = this._onDidPopoutGroupSizeChange.event;
83528355
this._onDidPopoutGroupPositionChange = new Emitter();
83538356
this.onDidPopoutGroupPositionChange = this._onDidPopoutGroupPositionChange.event;
8357+
this._onDidOpenPopoutWindowFail = new Emitter();
8358+
this.onDidOpenPopoutWindowFail = this._onDidOpenPopoutWindowFail.event;
83548359
this._onDidLayoutFromJSON = new Emitter();
83558360
this.onDidLayoutFromJSON = this._onDidLayoutFromJSON.event;
83568361
this._onDidActivePanelChange = new Emitter({ replay: true });
@@ -8415,7 +8420,7 @@ class DockviewComponent extends BaseGrid {
84158420
if (options.debug) {
84168421
this.addDisposables(new StrictEventsSequencing(this));
84178422
}
8418-
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(() => {
8423+
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(() => {
84198424
this.updateWatermark();
84208425
}), this.onDidAdd((event) => {
84218426
if (!this._moving) {
@@ -8565,21 +8570,14 @@ class DockviewComponent extends BaseGrid {
85658570
if (_window.isDisposed) {
85668571
return false;
85678572
}
8568-
if (popoutContainer === null) {
8569-
popoutWindowDisposable.dispose();
8570-
return false;
8571-
}
8572-
const gready = document.createElement('div');
8573-
gready.className = 'dv-overlay-render-container';
8574-
const overlayRenderContainer = new OverlayRenderContainer(gready, this);
85758573
const referenceGroup = (options === null || options === void 0 ? void 0 : options.referenceGroup)
85768574
? options.referenceGroup
85778575
: itemToPopout instanceof DockviewPanel
85788576
? itemToPopout.group
85798577
: itemToPopout;
85808578
const referenceLocation = itemToPopout.api.location.type;
85818579
/**
8582-
* The group that is being added doesn't already exist within the DOM, the most likely occurance
8580+
* The group that is being added doesn't already exist within the DOM, the most likely occurrence
85838581
* of this case is when being called from the `fromJSON(...)` method
85848582
*/
85858583
const isGroupAddedToDom = referenceGroup.element.parentElement !== null;
@@ -8592,8 +8590,28 @@ class DockviewComponent extends BaseGrid {
85928590
}
85938591
else {
85948592
group = this.createGroup({ id: groupId });
8595-
this._onDidAddGroup.fire(group);
8593+
if (popoutContainer) {
8594+
this._onDidAddGroup.fire(group);
8595+
}
85968596
}
8597+
if (popoutContainer === null) {
8598+
console.error('dockview: failed to create popout. perhaps you need to allow pop-ups for this website');
8599+
popoutWindowDisposable.dispose();
8600+
this._onDidOpenPopoutWindowFail.fire();
8601+
// if the popout window was blocked, we need to move the group back to the reference group
8602+
// and set it to visible
8603+
this.movingLock(() => moveGroupWithoutDestroying({
8604+
from: group,
8605+
to: referenceGroup,
8606+
}));
8607+
if (!referenceGroup.api.isVisible) {
8608+
referenceGroup.api.setVisible(true);
8609+
}
8610+
return false;
8611+
}
8612+
const gready = document.createElement('div');
8613+
gready.className = 'dv-overlay-render-container';
8614+
const overlayRenderContainer = new OverlayRenderContainer(gready, this);
85978615
group.model.renderContainer = overlayRenderContainer;
85988616
group.layout(_window.window.innerWidth, _window.window.innerHeight);
85998617
let floatingBox;
@@ -8750,7 +8768,7 @@ class DockviewComponent extends BaseGrid {
87508768
return true;
87518769
})
87528770
.catch((err) => {
8753-
console.error('dockview: failed to create popout window', err);
8771+
console.error('dockview: failed to create popout.', err);
87548772
return false;
87558773
});
87568774
}

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,11 @@ DockviewComponent.prototype.on = function (eventType, callback) {
1010
const dispose = DockviewComponent.prototype.dispose;
1111
DockviewComponent.prototype.dispose = function () {
1212
this.params.observer?.disconnect();
13+
this.groups.forEach(group => {
14+
if (group.mutationObserver) {
15+
group.mutationObserver.disconnect();
16+
}
17+
})
1318
saveConfig(this);
1419
dispose.call(this);
1520
}

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

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -167,6 +167,13 @@ const createGroupActions = (group, groupType) => {
167167
if (item.name !== 'bar') {
168168
const icon = getIcon(item.name);
169169
actionContainer.append(icon);
170+
if(icon.classList.contains('bb-dockview-control-icon-dropdown')){
171+
setTimeout(() => {
172+
if (group.model.location.type == 'floating' && group.panels.some(panel => panel.renderer == 'always')) {
173+
observeDisplayChange(icon, group)
174+
}
175+
}, 0)
176+
}
170177
}
171178
});
172179
setTimeout(() => {
@@ -178,13 +185,47 @@ const createGroupActions = (group, groupType) => {
178185
}, 0)
179186
addActionEvent(group, actionContainer);
180187
}
188+
const observeDisplayChange = (icon, group) => {
189+
const dockview = group.api.accessor
190+
const element = icon.querySelector('.dropdown-menu')
191+
const mutationObserver = new MutationObserver((mutations) => {
192+
mutations.forEach(mutation => {
193+
if (mutation.attributeName == 'class') {
194+
if(mutation.target.classList.contains('show')) {
195+
const currentPanelEle = group.activePanel.view.content.element.parentElement
196+
const childEle = currentPanelEle.children[0]
197+
group.element.querySelector('&>.dv-content-container').append(childEle)
198+
currentPanelEle.style.zIndex = -1
199+
childEle.wrapperEle = currentPanelEle
200+
}
201+
else {
202+
const panelEleList = [...group.element.querySelector('&>.dv-content-container').children].map(item => {
203+
const wrapperEle = item.wrapperEle
204+
delete item.wrapperEle
205+
wrapperEle.append(item)
206+
return wrapperEle
207+
})
208+
group.element.parentElement.parentElement.append(...panelEleList)
209+
}
210+
}
211+
})
212+
});
213+
group.mutationObserver = mutationObserver
214+
mutationObserver.observe(element, {
215+
attributes: true,
216+
attributeFilter: ["class"],
217+
});
218+
}
181219

182220
const disposeGroup = group => {
183221
const { observer } = group.api.accessor.params;
184222
if (observer) {
185223
observer.unobserve(group.header.element);
186224
observer.unobserve(group.header.tabs._tabsList);
187225
}
226+
if (group.mutationObserver) {
227+
group.mutationObserver.disconnect();
228+
}
188229
removeActionEvent(group);
189230
}
190231

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -45,9 +45,6 @@ const initDockview = (dockview, options, template) => {
4545
}
4646

4747
dockview.update = options => {
48-
if (options.layoutConfig) {
49-
reloadFromConfig(dockview, options);
50-
}
5148
if (dockview.params.options.lock !== options.lock) {
5249
dockview.params.options.lock = options.lock;
5350
toggleGroupLock(dockview, options);
@@ -56,6 +53,9 @@ const initDockview = (dockview, options, template) => {
5653
dockview.options.theme.className = options.theme;
5754
dockview.updateTheme();
5855
}
56+
if (options.layoutConfig) {
57+
reloadFromConfig(dockview, options);
58+
}
5959
else {
6060
toggleComponent(dockview, options);
6161
}

0 commit comments

Comments
 (0)