Move slider position computation into ScrollbarState (#6710)

src/vs/base/browser/ui/scrollbar/abstractScrollbar.ts

@@ -197,31 +197,32 @@ export abstract class AbstractScrollbar extends Widget {
 
 	private _onMouseDown(e: IMouseEvent): void {
 		let domNodePosition = DomUtils.getDomNodePagePosition(this.domNode.domNode);
-		let desiredSliderPosition = this._mouseDownRelativePosition(e, domNodePosition) - this._scrollbarState.getArrowSize() - this._scrollbarState.getSliderSize() / 2;
-		this.setDesiredScrollPosition(this._scrollbarState.convertSliderPositionToScrollPosition(desiredSliderPosition));
+		this.setDesiredScrollPosition(this._scrollbarState.getDesiredScrollPositionFromOffset(this._mouseDownRelativePosition(e, domNodePosition)));
 		this._sliderMouseDown(e);
 	}
 
 	private _sliderMouseDown(e: IMouseEvent): void {
 		if (e.leftButton) {
-			let initialMouseOrthogonalPosition = this._sliderOrthogonalMousePosition(e);
-			let initialScrollPosition = this._getScrollPosition();
-			let draggingDelta = this._sliderMousePosition(e) - this._scrollbarState.getSliderPosition();
+			const initialMousePosition = this._sliderMousePosition(e);
+			const initialMouseOrthogonalPosition = this._sliderOrthogonalMousePosition(e);
+			const initialScrollbarState = this._scrollbarState.clone();
 			this.slider.toggleClassName('active', true);
 
 			this._mouseMoveMonitor.startMonitoring(
 				standardMouseMoveMerger,
 				(mouseMoveData: IStandardMouseMoveEventData) => {
-					let mouseOrthogonalPosition = this._sliderOrthogonalMousePosition(mouseMoveData);
-					let mouseOrthogonalDelta = Math.abs(mouseOrthogonalPosition - initialMouseOrthogonalPosition);
-					// console.log(initialMouseOrthogonalPosition + ' -> ' + mouseOrthogonalPosition + ': ' + mouseOrthogonalDelta);
+					const mouseOrthogonalPosition = this._sliderOrthogonalMousePosition(mouseMoveData);
+					const mouseOrthogonalDelta = Math.abs(mouseOrthogonalPosition - initialMouseOrthogonalPosition);
+
 					if (Platform.isWindows && mouseOrthogonalDelta > MOUSE_DRAG_RESET_DISTANCE) {
 						// The mouse has wondered away from the scrollbar => reset dragging
-						this.setDesiredScrollPosition(initialScrollPosition);
-					} else {
-						let desiredSliderPosition = this._sliderMousePosition(mouseMoveData) - draggingDelta;
-						this.setDesiredScrollPosition(this._scrollbarState.convertSliderPositionToScrollPosition(desiredSliderPosition));
+						this.setDesiredScrollPosition(initialScrollbarState.getScrollPosition());
+						return;
 					}
+
+					const mousePosition = this._sliderMousePosition(mouseMoveData);
+					const mouseDelta = mousePosition - initialMousePosition;
+					this.setDesiredScrollPosition(initialScrollbarState.getDesiredScrollPositionFromDelta(mouseDelta));
 				},
 				() => {
 					this.slider.toggleClassName('active', false);

src/vs/base/browser/ui/scrollbar/scrollbarState.ts

@@ -92,6 +92,14 @@ export class ScrollbarState {
 		this._refreshComputedValues();
 	}
 
+	public clone(): ScrollbarState {
+		let r = new ScrollbarState(this._arrowSize, this._scrollbarSize, this._oppositeScrollbarSize);
+		r.setVisibleSize(this._visibleSize);
+		r.setScrollSize(this._scrollSize);
+		r.setScrollPosition(this._scrollPosition);
+		return r;
+	}
+
 	public setVisibleSize(visibleSize: number): boolean {
 		let iVisibleSize = Math.round(visibleSize);
 		if (this._visibleSize !== iVisibleSize) {
@@ -178,6 +186,10 @@ export class ScrollbarState {
 		return this._arrowSize;
 	}
 
+	public getScrollPosition(): number {
+		return this._scrollPosition;
+	}
+
 	public getRectangleLargeSize(): number {
 		return this._computedAvailableSize;
 	}
@@ -202,7 +214,24 @@ export class ScrollbarState {
 		return (this._computedSliderPosition + this._computedSliderSize / 2);
 	}
 
-	public convertSliderPositionToScrollPosition(desiredSliderPosition: number): number {
+	private _convertSliderPositionToScrollPosition(desiredSliderPosition: number): number {
 		return desiredSliderPosition / this._computedRatio;
 	}
+
+	/**
+	 * Compute a desired `scrollPosition` such that `offset` ends up in the center of the slider.
+	 * `offset` is based on the same coordinate system as the `sliderPosition`.
+	 */
+	public getDesiredScrollPositionFromOffset(offset: number): number {
+		let desiredSliderPosition = offset - this._arrowSize - this._computedSliderSize / 2;
+		return this._convertSliderPositionToScrollPosition(desiredSliderPosition);
+	}
+
+	/**
+	 * Compute a desired `scrollPosition` such that the slider moves by `delta`.
+	 */
+	public getDesiredScrollPositionFromDelta(delta: number): number {
+		let desiredSliderPosition = this._computedSliderPosition + delta;
+		return this._convertSliderPositionToScrollPosition(desiredSliderPosition);
+	}
 }