Skip to content

Commit bde3959

Browse files
zhaijunlei955zhaijunlei955
committed
feat: update dockview to V4.2.1
1 parent 1a403f9 commit bde3959

2 files changed

Lines changed: 156 additions & 157 deletions

File tree

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

Lines changed: 117 additions & 117 deletions
Original file line numberDiff line numberDiff line change
@@ -248,10 +248,10 @@
248248
opacity: 0;
249249
transition: none;
250250
}
251-
.dockview-theme-dracula .dv-groupview.dv-active-group > .dv-tabs-and-actions-container > .dv-scrollable > .dv-tabs-container > .dv-tab.dv-active-tab {
251+
.dockview-theme-dracula .dv-groupview.dv-active-group > .dv-tabs-and-actions-container .dv-tabs-container > .dv-tab.dv-active-tab {
252252
position: relative;
253253
}
254-
.dockview-theme-dracula .dv-groupview.dv-active-group > .dv-tabs-and-actions-container > .dv-scrollable > .dv-tabs-container > .dv-tab.dv-active-tab::after {
254+
.dockview-theme-dracula .dv-groupview.dv-active-group > .dv-tabs-and-actions-container .dv-tabs-container > .dv-tab.dv-active-tab::after {
255255
position: absolute;
256256
left: 0px;
257257
top: 0px;
@@ -261,10 +261,10 @@
261261
background-color: #94527e;
262262
z-index: 999;
263263
}
264-
.dockview-theme-dracula .dv-groupview.dv-inactive-group > .dv-tabs-and-actions-container > .dv-scrollable > .dv-tabs-container > .dv-tab.dv-active-tab {
264+
.dockview-theme-dracula .dv-groupview.dv-inactive-group > .dv-tabs-and-actions-container .dv-tabs-container > .dv-tab.dv-active-tab {
265265
position: relative;
266266
}
267-
.dockview-theme-dracula .dv-groupview.dv-inactive-group > .dv-tabs-and-actions-container > .dv-scrollable > .dv-tabs-container > .dv-tab.dv-active-tab::after {
267+
.dockview-theme-dracula .dv-groupview.dv-inactive-group > .dv-tabs-and-actions-container .dv-tabs-container > .dv-tab.dv-active-tab::after {
268268
position: absolute;
269269
left: 0px;
270270
bottom: 0px;
@@ -576,6 +576,62 @@
576576
.dockview-theme-light-spaced .dv-resize-container .dv-groupview {
577577
border: 2px solid rgba(255, 255, 255, 0.1);
578578
}
579+
.dv-dockview {
580+
position: relative;
581+
background-color: var(--dv-group-view-background-color);
582+
}
583+
.dv-dockview .dv-watermark-container {
584+
position: absolute;
585+
top: 0px;
586+
left: 0px;
587+
height: 100%;
588+
width: 100%;
589+
z-index: 1;
590+
}
591+
.dv-dockview .dv-overlay-render-container {
592+
position: relative;
593+
}
594+
595+
.dv-groupview.dv-active-group > .dv-tabs-and-actions-container .dv-tabs-container > .dv-tab.dv-active-tab {
596+
background-color: var(--dv-activegroup-visiblepanel-tab-background-color);
597+
color: var(--dv-activegroup-visiblepanel-tab-color);
598+
}
599+
.dv-groupview.dv-active-group > .dv-tabs-and-actions-container .dv-tabs-container > .dv-tab.dv-inactive-tab {
600+
background-color: var(--dv-activegroup-hiddenpanel-tab-background-color);
601+
color: var(--dv-activegroup-hiddenpanel-tab-color);
602+
}
603+
.dv-groupview.dv-inactive-group > .dv-tabs-and-actions-container .dv-tabs-container > .dv-tab.dv-active-tab {
604+
background-color: var(--dv-inactivegroup-visiblepanel-tab-background-color);
605+
color: var(--dv-inactivegroup-visiblepanel-tab-color);
606+
}
607+
.dv-groupview.dv-inactive-group > .dv-tabs-and-actions-container .dv-tabs-container > .dv-tab.dv-inactive-tab {
608+
background-color: var(--dv-inactivegroup-hiddenpanel-tab-background-color);
609+
color: var(--dv-inactivegroup-hiddenpanel-tab-color);
610+
}
611+
612+
/**
613+
* when a tab is dragged we lose the above stylings because they are conditional on parent elements
614+
* therefore we also set some stylings for the dragging event
615+
**/
616+
.dv-tab.dv-tab-dragging {
617+
background-color: var(--dv-activegroup-visiblepanel-tab-background-color);
618+
color: var(--dv-activegroup-visiblepanel-tab-color);
619+
}
620+
.dv-groupview {
621+
display: flex;
622+
flex-direction: column;
623+
height: 100%;
624+
background-color: var(--dv-group-view-background-color);
625+
overflow: hidden;
626+
}
627+
.dv-groupview:focus {
628+
outline: none;
629+
}
630+
.dv-groupview > .dv-content-container {
631+
flex-grow: 1;
632+
min-height: 0;
633+
outline: none;
634+
}
579635
.dv-drop-target {
580636
position: relative;
581637
--dv-transition-duration: 70ms;
@@ -630,62 +686,6 @@
630686
background-color: var(--dv-drag-over-background-color);
631687
opacity: 1;
632688
}
633-
.dv-dockview {
634-
position: relative;
635-
background-color: var(--dv-group-view-background-color);
636-
}
637-
.dv-dockview .dv-watermark-container {
638-
position: absolute;
639-
top: 0px;
640-
left: 0px;
641-
height: 100%;
642-
width: 100%;
643-
z-index: 1;
644-
}
645-
.dv-dockview .dv-overlay-render-container {
646-
position: relative;
647-
}
648-
649-
.dv-groupview.dv-active-group > .dv-tabs-and-actions-container > .dv-scrollable > .dv-tabs-container > .dv-tab.dv-active-tab {
650-
background-color: var(--dv-activegroup-visiblepanel-tab-background-color);
651-
color: var(--dv-activegroup-visiblepanel-tab-color);
652-
}
653-
.dv-groupview.dv-active-group > .dv-tabs-and-actions-container > .dv-scrollable > .dv-tabs-container > .dv-tab.dv-inactive-tab {
654-
background-color: var(--dv-activegroup-hiddenpanel-tab-background-color);
655-
color: var(--dv-activegroup-hiddenpanel-tab-color);
656-
}
657-
.dv-groupview.dv-inactive-group > .dv-tabs-and-actions-container > .dv-scrollable > .dv-tabs-container > .dv-tab.dv-active-tab {
658-
background-color: var(--dv-inactivegroup-visiblepanel-tab-background-color);
659-
color: var(--dv-inactivegroup-visiblepanel-tab-color);
660-
}
661-
.dv-groupview.dv-inactive-group > .dv-tabs-and-actions-container > .dv-scrollable > .dv-tabs-container > .dv-tab.dv-inactive-tab {
662-
background-color: var(--dv-inactivegroup-hiddenpanel-tab-background-color);
663-
color: var(--dv-inactivegroup-hiddenpanel-tab-color);
664-
}
665-
666-
/**
667-
* when a tab is dragged we lose the above stylings because they are conditional on parent elements
668-
* therefore we also set some stylings for the dragging event
669-
**/
670-
.dv-tab.dv-tab-dragging {
671-
background-color: var(--dv-activegroup-visiblepanel-tab-background-color);
672-
color: var(--dv-activegroup-visiblepanel-tab-color);
673-
}
674-
.dv-groupview {
675-
display: flex;
676-
flex-direction: column;
677-
height: 100%;
678-
background-color: var(--dv-group-view-background-color);
679-
overflow: hidden;
680-
}
681-
.dv-groupview:focus {
682-
outline: none;
683-
}
684-
.dv-groupview > .dv-content-container {
685-
flex-grow: 1;
686-
min-height: 0;
687-
outline: none;
688-
}
689689
.dv-root-wrapper {
690690
height: 100%;
691691
width: 100%;
@@ -1023,6 +1023,63 @@
10231023
pointer-events: none;
10241024
background-color: var(--dv-separator-border);
10251025
}
1026+
.dv-dragged {
1027+
transform: translate3d(0px, 0px, 0px); /* forces tab to be drawn on a separate layer (see https://github.com/microsoft/vscode/issues/18733) */
1028+
}
1029+
1030+
.dv-tab {
1031+
flex-shrink: 0;
1032+
}
1033+
.dv-tab:focus-within, .dv-tab:focus {
1034+
position: relative;
1035+
}
1036+
.dv-tab:focus-within::after, .dv-tab:focus::after {
1037+
position: absolute;
1038+
content: "";
1039+
height: 100%;
1040+
width: 100%;
1041+
top: 0px;
1042+
left: 0px;
1043+
pointer-events: none;
1044+
outline: 1px solid var(--dv-tab-divider-color) !important;
1045+
outline-offset: -1px;
1046+
z-index: 5;
1047+
}
1048+
.dv-tab.dv-tab-dragging .dv-default-tab-action {
1049+
background-color: var(--dv-activegroup-visiblepanel-tab-color);
1050+
}
1051+
.dv-tab.dv-active-tab .dv-default-tab .dv-default-tab-action {
1052+
visibility: visible;
1053+
}
1054+
.dv-tab.dv-inactive-tab .dv-default-tab .dv-default-tab-action {
1055+
visibility: hidden;
1056+
}
1057+
.dv-tab.dv-inactive-tab .dv-default-tab:hover .dv-default-tab-action {
1058+
visibility: visible;
1059+
}
1060+
.dv-tab .dv-default-tab {
1061+
position: relative;
1062+
height: 100%;
1063+
display: flex;
1064+
align-items: center;
1065+
white-space: nowrap;
1066+
text-overflow: ellipsis;
1067+
}
1068+
.dv-tab .dv-default-tab .dv-default-tab-content {
1069+
flex-grow: 1;
1070+
margin-right: 4px;
1071+
}
1072+
.dv-tab .dv-default-tab .dv-default-tab-action {
1073+
padding: 4px;
1074+
display: flex;
1075+
align-items: center;
1076+
justify-content: center;
1077+
box-sizing: border-box;
1078+
}
1079+
.dv-tab .dv-default-tab .dv-default-tab-action:hover {
1080+
border-radius: 2px;
1081+
background-color: var(--dv-icon-hover-background-color);
1082+
}
10261083
.dv-watermark {
10271084
display: flex;
10281085
height: 100%;
@@ -1132,61 +1189,4 @@
11321189
}
11331190
.dv-tabs-and-actions-container .dv-right-actions-container {
11341191
display: flex;
1135-
}
1136-
.dv-dragged {
1137-
transform: translate3d(0px, 0px, 0px); /* forces tab to be drawn on a separate layer (see https://github.com/microsoft/vscode/issues/18733) */
1138-
}
1139-
1140-
.dv-tab {
1141-
flex-shrink: 0;
1142-
}
1143-
.dv-tab:focus-within, .dv-tab:focus {
1144-
position: relative;
1145-
}
1146-
.dv-tab:focus-within::after, .dv-tab:focus::after {
1147-
position: absolute;
1148-
content: "";
1149-
height: 100%;
1150-
width: 100%;
1151-
top: 0px;
1152-
left: 0px;
1153-
pointer-events: none;
1154-
outline: 1px solid var(--dv-tab-divider-color) !important;
1155-
outline-offset: -1px;
1156-
z-index: 5;
1157-
}
1158-
.dv-tab.dv-tab-dragging .dv-default-tab-action {
1159-
background-color: var(--dv-activegroup-visiblepanel-tab-color);
1160-
}
1161-
.dv-tab.dv-active-tab .dv-default-tab .dv-default-tab-action {
1162-
visibility: visible;
1163-
}
1164-
.dv-tab.dv-inactive-tab .dv-default-tab .dv-default-tab-action {
1165-
visibility: hidden;
1166-
}
1167-
.dv-tab.dv-inactive-tab .dv-default-tab:hover .dv-default-tab-action {
1168-
visibility: visible;
1169-
}
1170-
.dv-tab .dv-default-tab {
1171-
position: relative;
1172-
height: 100%;
1173-
display: flex;
1174-
align-items: center;
1175-
white-space: nowrap;
1176-
text-overflow: ellipsis;
1177-
}
1178-
.dv-tab .dv-default-tab .dv-default-tab-content {
1179-
flex-grow: 1;
1180-
margin-right: 4px;
1181-
}
1182-
.dv-tab .dv-default-tab .dv-default-tab-action {
1183-
padding: 4px;
1184-
display: flex;
1185-
align-items: center;
1186-
justify-content: center;
1187-
box-sizing: border-box;
1188-
}
1189-
.dv-tab .dv-default-tab .dv-default-tab-action:hover {
1190-
border-radius: 2px;
1191-
background-color: var(--dv-icon-hover-background-color);
11921192
}

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

Lines changed: 39 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/**
22
* dockview-core
3-
* @version 4.2.0
3+
* @version 4.2.1
44
* @link https://github.com/mathuo/dockview
55
* @license MIT
66
*/
@@ -5450,7 +5450,7 @@ class TabsContainer extends CompositeDisposable {
54505450
this._element.appendChild(this.leftActionsContainer);
54515451
this._element.appendChild(this.voidContainer.element);
54525452
this._element.appendChild(this.rightActionsContainer);
5453-
this.addDisposables(accessor.onDidOptionsChange(() => {
5453+
this.addDisposables(this.tabs.onDrop((e) => this._onDrop.fire(e)), this.tabs.onWillShowOverlay((e) => this._onWillShowOverlay.fire(e)), accessor.onDidOptionsChange(() => {
54545454
this.tabs.showTabsOverflowControl =
54555455
!accessor.options.disableTabsOverflowList;
54565456
}), this.tabs.onOverflowTabsChange((event) => {
@@ -8320,13 +8320,48 @@ class DockviewComponent extends BaseGrid {
83208320
this._onDidActiveGroupChange = new Emitter();
83218321
this.onDidActiveGroupChange = this._onDidActiveGroupChange.event;
83228322
this._moving = false;
8323+
this._options = options;
83238324
this.popupService = new PopupService(this.element);
8324-
this.updateDropTargetModel(options);
83258325
this._themeClassnames = new Classnames(this.element);
8326+
this._api = new DockviewApi(this);
83268327
this.rootDropTargetContainer = new DropTargetAnchorContainer(this.element, { disabled: true });
83278328
this.overlayRenderContainer = new OverlayRenderContainer(this.gridview.element, this);
8329+
this._rootDropTarget = new Droptarget(this.element, {
8330+
className: 'dv-drop-target-edge',
8331+
canDisplayOverlay: (event, position) => {
8332+
const data = getPanelData();
8333+
if (data) {
8334+
if (data.viewId !== this.id) {
8335+
return false;
8336+
}
8337+
if (position === 'center') {
8338+
// center drop target is only allowed if there are no panels in the grid
8339+
// floating panels are allowed
8340+
return this.gridview.length === 0;
8341+
}
8342+
return true;
8343+
}
8344+
if (position === 'center' && this.gridview.length !== 0) {
8345+
/**
8346+
* for external events only show the four-corner drag overlays, disable
8347+
* the center position so that external drag events can fall through to the group
8348+
* and panel drop target handlers
8349+
*/
8350+
return false;
8351+
}
8352+
const firedEvent = new DockviewUnhandledDragOverEvent(event, 'edge', position, getPanelData);
8353+
this._onUnhandledDragOverEvent.fire(firedEvent);
8354+
return firedEvent.isAccepted;
8355+
},
8356+
acceptedTargetZones: ['top', 'bottom', 'left', 'right', 'center'],
8357+
overlayModel: (_c = options.rootOverlayModel) !== null && _c !== void 0 ? _c : DEFAULT_ROOT_OVERLAY_MODEL,
8358+
getOverrideTarget: () => { var _a; return (_a = this.rootDropTargetContainer) === null || _a === void 0 ? void 0 : _a.model; },
8359+
});
8360+
this.updateDropTargetModel(options);
83288361
toggleClass(this.gridview.element, 'dv-dockview', true);
83298362
toggleClass(this.element, 'dv-debug', !!options.debug);
8363+
this.updateTheme();
8364+
this.updateWatermark();
83308365
if (options.debug) {
83318366
this.addDisposables(new StrictEventsSequencing(this));
83328367
}
@@ -8362,41 +8397,7 @@ class DockviewComponent extends BaseGrid {
83628397
for (const group of [...this._popoutGroups]) {
83638398
group.disposable.dispose();
83648399
}
8365-
}));
8366-
this._options = options;
8367-
this.updateTheme();
8368-
this._rootDropTarget = new Droptarget(this.element, {
8369-
className: 'dv-drop-target-edge',
8370-
canDisplayOverlay: (event, position) => {
8371-
const data = getPanelData();
8372-
if (data) {
8373-
if (data.viewId !== this.id) {
8374-
return false;
8375-
}
8376-
if (position === 'center') {
8377-
// center drop target is only allowed if there are no panels in the grid
8378-
// floating panels are allowed
8379-
return this.gridview.length === 0;
8380-
}
8381-
return true;
8382-
}
8383-
if (position === 'center' && this.gridview.length !== 0) {
8384-
/**
8385-
* for external events only show the four-corner drag overlays, disable
8386-
* the center position so that external drag events can fall through to the group
8387-
* and panel drop target handlers
8388-
*/
8389-
return false;
8390-
}
8391-
const firedEvent = new DockviewUnhandledDragOverEvent(event, 'edge', position, getPanelData);
8392-
this._onUnhandledDragOverEvent.fire(firedEvent);
8393-
return firedEvent.isAccepted;
8394-
},
8395-
acceptedTargetZones: ['top', 'bottom', 'left', 'right', 'center'],
8396-
overlayModel: (_c = this.options.rootOverlayModel) !== null && _c !== void 0 ? _c : DEFAULT_ROOT_OVERLAY_MODEL,
8397-
getOverrideTarget: () => { var _a; return (_a = this.rootDropTargetContainer) === null || _a === void 0 ? void 0 : _a.model; },
8398-
});
8399-
this.addDisposables(this._rootDropTarget, this._rootDropTarget.onWillShowOverlay((event) => {
8400+
}), this._rootDropTarget, this._rootDropTarget.onWillShowOverlay((event) => {
84008401
if (this.gridview.length > 0 && event.position === 'center') {
84018402
// option only available when no panels in primary grid
84028403
return;
@@ -8451,8 +8452,6 @@ class DockviewComponent extends BaseGrid {
84518452
}));
84528453
}
84538454
}), this._rootDropTarget);
8454-
this._api = new DockviewApi(this);
8455-
this.updateWatermark();
84568455
}
84578456
setVisible(panel, visible) {
84588457
switch (panel.api.location.type) {

0 commit comments

Comments
 (0)