Skip to content

Commit

Permalink
Respond to layout changes
Browse files Browse the repository at this point in the history 
This seems to work fairly well.

I think a follow up change I'll make is maybe redoing this to leverage CSS variables instead... like how it's done in the debugToolBar which looks cleaner, but that can come later.

Fixes #237627
  • Loading branch information
@TylerLeonhardt
TylerLeonhardt committed Jan 17, 2025
1 parent f672ef9 commit 9d59d1c
Showing 1 changed file with 52 additions and 41 deletions.
93 changes: 52 additions & 41 deletions src/vs/platform/quickinput/browser/quickInputController.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -908,6 +908,7 @@ class QuickInputDragAndDropController extends Disposable {
@IContextKeyService private readonly _contextKeyService: IContextKeyService
) {
super();
this._registerLayoutListener();
this.registerMouseListeners();
}

Expand Down Expand Up @@ -936,9 +937,21 @@ class QuickInputDragAndDropController extends Disposable {
}
}

private _registerLayoutListener() {
this._layoutService.onDidLayoutActiveContainer((e) => {
const state = this.dndViewState.get();
const dragAreaRect = this._quickInputContainer.getBoundingClientRect();
if (state?.top && state?.left) {
const a = Math.round(state.left * 1e2) / 1e2;
const b = e.width;
const c = dragAreaRect.width;
const d = a * b - c / 2;
this._layout(state.top * e.height, d);
}
});
}

private registerMouseListeners(): void {
let top: number | undefined;
let left: number | undefined;
const dragArea = this._quickInputContainer;

// Double click
Expand All @@ -953,10 +966,7 @@ class QuickInputDragAndDropController extends Disposable {
return;
}

top = undefined;
left = undefined;

this.dndViewState.set({ top, left, done: true }, undefined);
this.dndViewState.set({ top: undefined, left: undefined, done: true }, undefined);
}));

// Mouse down
Expand All @@ -974,13 +984,7 @@ class QuickInputDragAndDropController extends Disposable {
const dragOffsetX = originEvent.browserEvent.clientX - dragAreaRect.left;
const dragOffsetY = originEvent.browserEvent.clientY - dragAreaRect.top;

// Snap lines
let isMovingQuickInput = false;
const snapCoordinateYTop = this._getTopSnapValue();
const snapCoordinateY = this._getCenterYSnapValue();
const snapCoordinateX = this._getCenterXSnapValue();

// Mouse move
const mouseMoveListener = dom.addDisposableGenericMouseMoveListener(activeWindow, (e: MouseEvent) => {
const mouseMoveEvent = new StandardMouseEvent(activeWindow, e);
mouseMoveEvent.preventDefault();
Expand All @@ -989,36 +993,8 @@ class QuickInputDragAndDropController extends Disposable {
isMovingQuickInput = true;
}

let topCoordinate = e.clientY - dragOffsetY;
// Make sure the quick input is not moved outside the container
topCoordinate = Math.max(0, Math.min(topCoordinate, this._container.clientHeight - this._quickInputContainer.clientHeight));
const snappingToTop = Math.abs(topCoordinate - snapCoordinateYTop) < this._snapThreshold;
topCoordinate = snappingToTop ? snapCoordinateYTop : topCoordinate;
const snappingToCenter = Math.abs(topCoordinate - snapCoordinateY) < this._snapThreshold;
topCoordinate = snappingToCenter ? snapCoordinateY : topCoordinate;
top = topCoordinate / this._container.clientHeight;

let leftCoordinate = e.clientX - dragOffsetX;
// Make sure the quick input is not moved outside the container
leftCoordinate = Math.max(0, Math.min(leftCoordinate, this._container.clientWidth - this._quickInputContainer.clientWidth));
const snappingToCenterX = Math.abs(leftCoordinate - snapCoordinateX) < this._snapThreshold;
leftCoordinate = snappingToCenterX ? snapCoordinateX : leftCoordinate;
left = (leftCoordinate + (this._quickInputContainer.clientWidth / 2)) / this._container.clientWidth;

this.dndViewState.set({ top, left, done: false }, undefined);
if (snappingToCenterX) {
if (snappingToTop) {
this._quickInputAlignmentContext.set('top');
return;
} else if (snappingToCenter) {
this._quickInputAlignmentContext.set('center');
return;
}
}
this._quickInputAlignmentContext.set(undefined);
this._layout(e.clientY - dragOffsetY, e.clientX - dragOffsetX);
});

// Mouse up
const mouseUpListener = dom.addDisposableGenericMouseUpListener(activeWindow, (e: MouseEvent) => {
if (isMovingQuickInput) {
// Save position
Expand All @@ -1033,6 +1009,41 @@ class QuickInputDragAndDropController extends Disposable {
}));
}

private _layout(topCoordinate: number, leftCoordinate: number) {
const snapCoordinateYTop = this._getTopSnapValue();
const snapCoordinateY = this._getCenterYSnapValue();
const snapCoordinateX = this._getCenterXSnapValue();
// Make sure the quick input is not moved outside the container
topCoordinate = Math.max(0, Math.min(topCoordinate, this._container.clientHeight - this._quickInputContainer.clientHeight));
const snappingToTop = Math.abs(topCoordinate - snapCoordinateYTop) < this._snapThreshold;
topCoordinate = snappingToTop ? snapCoordinateYTop : topCoordinate;
const snappingToCenter = Math.abs(topCoordinate - snapCoordinateY) < this._snapThreshold;
topCoordinate = snappingToCenter ? snapCoordinateY : topCoordinate;
const top = topCoordinate / this._container.clientHeight;

// Make sure the quick input is not moved outside the container
leftCoordinate = Math.max(0, Math.min(leftCoordinate, this._container.clientWidth - this._quickInputContainer.clientWidth));
const snappingToCenterX = Math.abs(leftCoordinate - snapCoordinateX) < this._snapThreshold;
leftCoordinate = snappingToCenterX ? snapCoordinateX : leftCoordinate;

const b = this._container.clientWidth;
const c = this._quickInputContainer.clientWidth;
const d = leftCoordinate;
const left = (d + c / 2) / b;

this.dndViewState.set({ top, left, done: false }, undefined);
if (snappingToCenterX) {
if (snappingToTop) {
this._quickInputAlignmentContext.set('top');
return;
} else if (snappingToCenter) {
this._quickInputAlignmentContext.set('center');
return;
}
}
this._quickInputAlignmentContext.set(undefined);
}

private _getTopSnapValue() {
return this._layoutService.activeContainerOffset.quickPickTop;
}
Expand Down

0 comments on commit 9d59d1c

Please sign in to comment.