bug: fix options init

This commit is contained in:
mathuo 2025-03-18 19:38:32 +00:00
parent 8188fd9429
commit e3d39fd2ed
No known key found for this signature in database
GPG Key ID: C6EEDEFD6CA07281
2 changed files with 90 additions and 61 deletions

View File

@ -6776,4 +6776,31 @@ describe('dockviewComponent', () => {
expect(group2.api.id).toBe('group_2');
expect(group3.api.id).toBe('group_3');
});
describe('dndEdges', () => {
test('that can init dndEdges property', () => {
const container = document.createElement('div');
const dockview = new DockviewComponent(container, {
createComponent(options) {
switch (options.name) {
case 'default':
return new PanelContentPartTest(
options.id,
options.name
);
default:
throw new Error(`unsupported`);
}
},
dndEdges: {
size: { value: 100, type: 'pixels' },
activationSize: { value: 5, type: 'percentage' },
},
});
const api = new DockviewApi(dockview);
dockview.layout(1000, 1000);
});
});
});

View File

@ -412,11 +412,11 @@ export class DockviewComponent
className: options.className,
});
this._options = options;
this.popupService = new PopupService(this.element);
this.updateDropTargetModel(options);
this._themeClassnames = new Classnames(this.element);
this._api = new DockviewApi(this);
this.rootDropTargetContainer = new DropTargetAnchorContainer(
this.element,
@ -427,9 +427,59 @@ export class DockviewComponent
this
);
this._rootDropTarget = new Droptarget(this.element, {
className: 'dv-drop-target-edge',
canDisplayOverlay: (event, position) => {
const data = getPanelData();
if (data) {
if (data.viewId !== this.id) {
return false;
}
if (position === 'center') {
// center drop target is only allowed if there are no panels in the grid
// floating panels are allowed
return this.gridview.length === 0;
}
return true;
}
if (position === 'center' && this.gridview.length !== 0) {
/**
* for external events only show the four-corner drag overlays, disable
* the center position so that external drag events can fall through to the group
* and panel drop target handlers
*/
return false;
}
const firedEvent = new DockviewUnhandledDragOverEvent(
event,
'edge',
position,
getPanelData
);
this._onUnhandledDragOverEvent.fire(firedEvent);
return firedEvent.isAccepted;
},
acceptedTargetZones: ['top', 'bottom', 'left', 'right', 'center'],
overlayModel:
options.rootOverlayModel ?? DEFAULT_ROOT_OVERLAY_MODEL,
getOverrideTarget: () => this.rootDropTargetContainer?.model,
});
this.updateDropTargetModel(options);
toggleClass(this.gridview.element, 'dv-dockview', true);
toggleClass(this.element, 'dv-debug', !!options.debug);
this.updateTheme();
this.updateWatermark();
if (options.debug) {
this.addDisposables(new StrictEventsSequencing(this));
}
@ -507,58 +557,7 @@ export class DockviewComponent
for (const group of [...this._popoutGroups]) {
group.disposable.dispose();
}
})
);
this._options = options;
this.updateTheme();
this._rootDropTarget = new Droptarget(this.element, {
className: 'dv-drop-target-edge',
canDisplayOverlay: (event, position) => {
const data = getPanelData();
if (data) {
if (data.viewId !== this.id) {
return false;
}
if (position === 'center') {
// center drop target is only allowed if there are no panels in the grid
// floating panels are allowed
return this.gridview.length === 0;
}
return true;
}
if (position === 'center' && this.gridview.length !== 0) {
/**
* for external events only show the four-corner drag overlays, disable
* the center position so that external drag events can fall through to the group
* and panel drop target handlers
*/
return false;
}
const firedEvent = new DockviewUnhandledDragOverEvent(
event,
'edge',
position,
getPanelData
);
this._onUnhandledDragOverEvent.fire(firedEvent);
return firedEvent.isAccepted;
},
acceptedTargetZones: ['top', 'bottom', 'left', 'right', 'center'],
overlayModel:
this.options.rootOverlayModel ?? DEFAULT_ROOT_OVERLAY_MODEL,
getOverrideTarget: () => this.rootDropTargetContainer?.model,
});
this.addDisposables(
}),
this._rootDropTarget,
this._rootDropTarget.onWillShowOverlay((event) => {
if (this.gridview.length > 0 && event.position === 'center') {
@ -621,10 +620,6 @@ export class DockviewComponent
}),
this._rootDropTarget
);
this._api = new DockviewApi(this);
this.updateWatermark();
}
override setVisible(panel: DockviewGroupPanel, visible: boolean): void {
@ -1176,7 +1171,10 @@ export class DockviewComponent
this.updateWatermark();
}
private orthogonalize(position: Position, options?: GroupOptions): DockviewGroupPanel {
private orthogonalize(
position: Position,
options?: GroupOptions
): DockviewGroupPanel {
switch (position) {
case 'top':
case 'bottom':
@ -1205,7 +1203,11 @@ export class DockviewComponent
return this.createGroupAtLocation([0], undefined, options); // insert into first position
case 'bottom':
case 'right':
return this.createGroupAtLocation([this.gridview.length], undefined, options); // insert into last position
return this.createGroupAtLocation(
[this.gridview.length],
undefined,
options
); // insert into last position
default:
throw new Error(`unsupported position ${position}`);
}