From e3d39fd2ed9acd47425ab033f5e1baaa0c263eae Mon Sep 17 00:00:00 2001 From: mathuo <6710312+mathuo@users.noreply.github.com> Date: Tue, 18 Mar 2025 19:38:32 +0000 Subject: [PATCH] bug: fix options init --- .../dockview/dockviewComponent.spec.ts | 27 ++++ .../src/dockview/dockviewComponent.ts | 124 +++++++++--------- 2 files changed, 90 insertions(+), 61 deletions(-) diff --git a/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts b/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts index 6de544ee0..61c7d4480 100644 --- a/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts +++ b/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts @@ -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); + }); + }); }); diff --git a/packages/dockview-core/src/dockview/dockviewComponent.ts b/packages/dockview-core/src/dockview/dockviewComponent.ts index e0f124320..0d0097bf4 100644 --- a/packages/dockview-core/src/dockview/dockviewComponent.ts +++ b/packages/dockview-core/src/dockview/dockviewComponent.ts @@ -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}`); }