Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

bug: fix options init #888

Merged
merged 1 commit into from
Mar 18, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -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);
});
});
});
124 changes: 63 additions & 61 deletions packages/dockview-core/src/dockview/dockviewComponent.ts
Original file line number Diff line number Diff line change
Expand Up @@ -412,11 +412,11 @@ export class DockviewComponent
className: options.className,
});

this.popupService = new PopupService(this.element);

this.updateDropTargetModel(options);
this._options = options;

this.popupService = new PopupService(this.element);
this._themeClassnames = new Classnames(this.element);
this._api = new DockviewApi(this);

this.rootDropTargetContainer = new DropTargetAnchorContainer(
this.element,
Expand All @@ -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));
}
Expand Down Expand Up @@ -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') {
Expand Down Expand Up @@ -621,10 +620,6 @@ export class DockviewComponent
}),
this._rootDropTarget
);

this._api = new DockviewApi(this);

this.updateWatermark();
}

override setVisible(panel: DockviewGroupPanel, visible: boolean): void {
Expand Down Expand Up @@ -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':
Expand Down Expand Up @@ -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}`);
}
Expand Down