@xterm/xterm 5.6.0-beta.5 → 5.6.0-beta.51

package/src/vs/base/browser/touch.ts

@@ -0,0 +1,372 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import * as DomUtils from 'vs/base/browser/dom';
+import { mainWindow } from 'vs/base/browser/window';
+import * as arrays from 'vs/base/common/arrays';
+import { memoize } from 'vs/base/common/decorators';
+import { Event as EventUtils } from 'vs/base/common/event';
+import { Disposable, IDisposable, markAsSingleton, toDisposable } from 'vs/base/common/lifecycle';
+import { LinkedList } from 'vs/base/common/linkedList';
+
+export namespace EventType {
+	export const Tap = '-xterm-gesturetap';
+	export const Change = '-xterm-gesturechange';
+	export const Start = '-xterm-gesturestart';
+	export const End = '-xterm-gesturesend';
+	export const Contextmenu = '-xterm-gesturecontextmenu';
+}
+
+interface TouchData {
+	id: number;
+	initialTarget: EventTarget;
+	initialTimeStamp: number;
+	initialPageX: number;
+	initialPageY: number;
+	rollingTimestamps: number[];
+	rollingPageX: number[];
+	rollingPageY: number[];
+}
+
+export interface GestureEvent extends MouseEvent {
+	initialTarget: EventTarget | undefined;
+	translationX: number;
+	translationY: number;
+	pageX: number;
+	pageY: number;
+	tapCount: number;
+}
+
+interface Touch {
+	identifier: number;
+	screenX: number;
+	screenY: number;
+	clientX: number;
+	clientY: number;
+	pageX: number;
+	pageY: number;
+	radiusX: number;
+	radiusY: number;
+	rotationAngle: number;
+	force: number;
+	target: Element;
+}
+
+interface TouchList {
+	[i: number]: Touch;
+	length: number;
+	item(index: number): Touch;
+	identifiedTouch(id: number): Touch;
+}
+
+interface TouchEvent extends Event {
+	touches: TouchList;
+	targetTouches: TouchList;
+	changedTouches: TouchList;
+}
+
+export class Gesture extends Disposable {
+
+	private static readonly SCROLL_FRICTION = -0.005;
+	private static INSTANCE: Gesture;
+	private static readonly HOLD_DELAY = 700;
+
+	private dispatched = false;
+	private readonly targets = new LinkedList<HTMLElement>();
+	private readonly ignoreTargets = new LinkedList<HTMLElement>();
+	private handle: IDisposable | null;
+
+	private readonly activeTouches: { [id: number]: TouchData };
+
+	private _lastSetTapCountTime: number;
+
+	private static readonly CLEAR_TAP_COUNT_TIME = 400; // ms
+
+
+	private constructor() {
+		super();
+
+		this.activeTouches = {};
+		this.handle = null;
+		this._lastSetTapCountTime = 0;
+
+		this._register(EventUtils.runAndSubscribe(DomUtils.onDidRegisterWindow, ({ window, disposables }) => {
+			disposables.add(DomUtils.addDisposableListener(window.document, 'touchstart', (e: TouchEvent) => this.onTouchStart(e), { passive: false }));
+			disposables.add(DomUtils.addDisposableListener(window.document, 'touchend', (e: TouchEvent) => this.onTouchEnd(window, e)));
+			disposables.add(DomUtils.addDisposableListener(window.document, 'touchmove', (e: TouchEvent) => this.onTouchMove(e), { passive: false }));
+		}, { window: mainWindow, disposables: this._store }));
+	}
+
+	public static addTarget(element: HTMLElement): IDisposable {
+		if (!Gesture.isTouchDevice()) {
+			return Disposable.None;
+		}
+		if (!Gesture.INSTANCE) {
+			Gesture.INSTANCE = markAsSingleton(new Gesture());
+		}
+
+		const remove = Gesture.INSTANCE.targets.push(element);
+		return toDisposable(remove);
+	}
+
+	public static ignoreTarget(element: HTMLElement): IDisposable {
+		if (!Gesture.isTouchDevice()) {
+			return Disposable.None;
+		}
+		if (!Gesture.INSTANCE) {
+			Gesture.INSTANCE = markAsSingleton(new Gesture());
+		}
+
+		const remove = Gesture.INSTANCE.ignoreTargets.push(element);
+		return toDisposable(remove);
+	}
+
+	@memoize
+	static isTouchDevice(): boolean {
+		// `'ontouchstart' in window` always evaluates to true with typescript's modern typings. This causes `window` to be
+		// `never` later in `window.navigator`. That's why we need the explicit `window as Window` cast
+		return 'ontouchstart' in mainWindow || navigator.maxTouchPoints > 0;
+	}
+
+	public override dispose(): void {
+		if (this.handle) {
+			this.handle.dispose();
+			this.handle = null;
+		}
+
+		super.dispose();
+	}
+
+	private onTouchStart(e: TouchEvent): void {
+		const timestamp = Date.now(); // use Date.now() because on FF e.timeStamp is not epoch based.
+
+		if (this.handle) {
+			this.handle.dispose();
+			this.handle = null;
+		}
+
+		for (let i = 0, len = e.targetTouches.length; i < len; i++) {
+			const touch = e.targetTouches.item(i);
+
+			this.activeTouches[touch.identifier] = {
+				id: touch.identifier,
+				initialTarget: touch.target,
+				initialTimeStamp: timestamp,
+				initialPageX: touch.pageX,
+				initialPageY: touch.pageY,
+				rollingTimestamps: [timestamp],
+				rollingPageX: [touch.pageX],
+				rollingPageY: [touch.pageY]
+			};
+
+			const evt = this.newGestureEvent(EventType.Start, touch.target);
+			evt.pageX = touch.pageX;
+			evt.pageY = touch.pageY;
+			this.dispatchEvent(evt);
+		}
+
+		if (this.dispatched) {
+			e.preventDefault();
+			e.stopPropagation();
+			this.dispatched = false;
+		}
+	}
+
+	private onTouchEnd(targetWindow: Window, e: TouchEvent): void {
+		const timestamp = Date.now(); // use Date.now() because on FF e.timeStamp is not epoch based.
+
+		const activeTouchCount = Object.keys(this.activeTouches).length;
+
+		for (let i = 0, len = e.changedTouches.length; i < len; i++) {
+
+			const touch = e.changedTouches.item(i);
+
+			if (!this.activeTouches.hasOwnProperty(String(touch.identifier))) {
+				console.warn('move of an UNKNOWN touch', touch);
+				continue;
+			}
+
+			const data = this.activeTouches[touch.identifier],
+				holdTime = Date.now() - data.initialTimeStamp;
+
+			if (holdTime < Gesture.HOLD_DELAY
+				&& Math.abs(data.initialPageX - arrays.tail(data.rollingPageX)!) < 30
+				&& Math.abs(data.initialPageY - arrays.tail(data.rollingPageY)!) < 30) {
+
+				const evt = this.newGestureEvent(EventType.Tap, data.initialTarget);
+				evt.pageX = arrays.tail(data.rollingPageX)!;
+				evt.pageY = arrays.tail(data.rollingPageY)!;
+				this.dispatchEvent(evt);
+
+			} else if (holdTime >= Gesture.HOLD_DELAY
+				&& Math.abs(data.initialPageX - arrays.tail(data.rollingPageX)!) < 30
+				&& Math.abs(data.initialPageY - arrays.tail(data.rollingPageY)!) < 30) {
+
+				const evt = this.newGestureEvent(EventType.Contextmenu, data.initialTarget);
+				evt.pageX = arrays.tail(data.rollingPageX)!;
+				evt.pageY = arrays.tail(data.rollingPageY)!;
+				this.dispatchEvent(evt);
+
+			} else if (activeTouchCount === 1) {
+				const finalX = arrays.tail(data.rollingPageX)!;
+				const finalY = arrays.tail(data.rollingPageY)!;
+
+				const deltaT = arrays.tail(data.rollingTimestamps)! - data.rollingTimestamps[0];
+				const deltaX = finalX - data.rollingPageX[0];
+				const deltaY = finalY - data.rollingPageY[0];
+
+				// We need to get all the dispatch targets on the start of the inertia event
+				const dispatchTo = [...this.targets].filter(t => data.initialTarget instanceof Node && t.contains(data.initialTarget));
+				this.inertia(targetWindow, dispatchTo, timestamp,	// time now
+					Math.abs(deltaX) / deltaT,						// speed
+					deltaX > 0 ? 1 : -1,							// x direction
+					finalX,											// x now
+					Math.abs(deltaY) / deltaT,  					// y speed
+					deltaY > 0 ? 1 : -1,							// y direction
+					finalY											// y now
+				);
+			}
+
+
+			this.dispatchEvent(this.newGestureEvent(EventType.End, data.initialTarget));
+			// forget about this touch
+			delete this.activeTouches[touch.identifier];
+		}
+
+		if (this.dispatched) {
+			e.preventDefault();
+			e.stopPropagation();
+			this.dispatched = false;
+		}
+	}
+
+	private newGestureEvent(type: string, initialTarget?: EventTarget): GestureEvent {
+		const event = document.createEvent('CustomEvent') as unknown as GestureEvent;
+		event.initEvent(type, false, true);
+		event.initialTarget = initialTarget;
+		event.tapCount = 0;
+		return event;
+	}
+
+	private dispatchEvent(event: GestureEvent): void {
+		if (event.type === EventType.Tap) {
+			const currentTime = (new Date()).getTime();
+			let setTapCount = 0;
+			if (currentTime - this._lastSetTapCountTime > Gesture.CLEAR_TAP_COUNT_TIME) {
+				setTapCount = 1;
+			} else {
+				setTapCount = 2;
+			}
+
+			this._lastSetTapCountTime = currentTime;
+			event.tapCount = setTapCount;
+		} else if (event.type === EventType.Change || event.type === EventType.Contextmenu) {
+			// tap is canceled by scrolling or context menu
+			this._lastSetTapCountTime = 0;
+		}
+
+		if (event.initialTarget instanceof Node) {
+			for (const ignoreTarget of this.ignoreTargets) {
+				if (ignoreTarget.contains(event.initialTarget)) {
+					return;
+				}
+			}
+
+			const targets: [number, HTMLElement][] = [];
+			for (const target of this.targets) {
+				if (target.contains(event.initialTarget)) {
+					let depth = 0;
+					let now: Node | null = event.initialTarget;
+					while (now && now !== target) {
+						depth++;
+						now = now.parentElement;
+					}
+					targets.push([depth, target]);
+				}
+			}
+
+			targets.sort((a, b) => a[0] - b[0]);
+
+			for (const [_, target] of targets) {
+				target.dispatchEvent(event);
+				this.dispatched = true;
+			}
+		}
+	}
+
+	private inertia(targetWindow: Window, dispatchTo: readonly EventTarget[], t1: number, vX: number, dirX: number, x: number, vY: number, dirY: number, y: number): void {
+		this.handle = DomUtils.scheduleAtNextAnimationFrame(targetWindow, () => {
+			const now = Date.now();
+
+			// velocity: old speed + accel_over_time
+			const deltaT = now - t1;
+			let delta_pos_x = 0, delta_pos_y = 0;
+			let stopped = true;
+
+			vX += Gesture.SCROLL_FRICTION * deltaT;
+			vY += Gesture.SCROLL_FRICTION * deltaT;
+
+			if (vX > 0) {
+				stopped = false;
+				delta_pos_x = dirX * vX * deltaT;
+			}
+
+			if (vY > 0) {
+				stopped = false;
+				delta_pos_y = dirY * vY * deltaT;
+			}
+
+			// dispatch translation event
+			const evt = this.newGestureEvent(EventType.Change);
+			evt.translationX = delta_pos_x;
+			evt.translationY = delta_pos_y;
+			dispatchTo.forEach(d => d.dispatchEvent(evt));
+
+			if (!stopped) {
+				this.inertia(targetWindow, dispatchTo, now, vX, dirX, x + delta_pos_x, vY, dirY, y + delta_pos_y);
+			}
+		});
+	}
+
+	private onTouchMove(e: TouchEvent): void {
+		const timestamp = Date.now(); // use Date.now() because on FF e.timeStamp is not epoch based.
+
+		for (let i = 0, len = e.changedTouches.length; i < len; i++) {
+
+			const touch = e.changedTouches.item(i);
+
+			if (!this.activeTouches.hasOwnProperty(String(touch.identifier))) {
+				console.warn('end of an UNKNOWN touch', touch);
+				continue;
+			}
+
+			const data = this.activeTouches[touch.identifier];
+
+			const evt = this.newGestureEvent(EventType.Change, data.initialTarget);
+			evt.translationX = touch.pageX - arrays.tail(data.rollingPageX)!;
+			evt.translationY = touch.pageY - arrays.tail(data.rollingPageY)!;
+			evt.pageX = touch.pageX;
+			evt.pageY = touch.pageY;
+			this.dispatchEvent(evt);
+
+			// only keep a few data points, to average the final speed
+			if (data.rollingPageX.length > 3) {
+				data.rollingPageX.shift();
+				data.rollingPageY.shift();
+				data.rollingTimestamps.shift();
+			}
+
+			data.rollingPageX.push(touch.pageX);
+			data.rollingPageY.push(touch.pageY);
+			data.rollingTimestamps.push(timestamp);
+		}
+
+		if (this.dispatched) {
+			e.preventDefault();
+			e.stopPropagation();
+			this.dispatched = false;
+		}
+	}
+}

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

@@ -0,0 +1,303 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import * as dom from 'vs/base/browser/dom';
+import { createFastDomNode, FastDomNode } from 'vs/base/browser/fastDomNode';
+import { GlobalPointerMoveMonitor } from 'vs/base/browser/globalPointerMoveMonitor';
+import { StandardWheelEvent } from 'vs/base/browser/mouseEvent';
+import { ScrollbarArrow, ScrollbarArrowOptions } from 'vs/base/browser/ui/scrollbar/scrollbarArrow';
+import { ScrollbarState } from 'vs/base/browser/ui/scrollbar/scrollbarState';
+import { ScrollbarVisibilityController } from 'vs/base/browser/ui/scrollbar/scrollbarVisibilityController';
+import { Widget } from 'vs/base/browser/ui/widget';
+import * as platform from 'vs/base/common/platform';
+import { INewScrollPosition, Scrollable, ScrollbarVisibility } from 'vs/base/common/scrollable';
+
+/**
+ * The orthogonal distance to the slider at which dragging "resets". This implements "snapping"
+ */
+const POINTER_DRAG_RESET_DISTANCE = 140;
+
+export interface ISimplifiedPointerEvent {
+	buttons: number;
+	pageX: number;
+	pageY: number;
+}
+
+export interface ScrollbarHost {
+	onMouseWheel(mouseWheelEvent: StandardWheelEvent): void;
+	onDragStart(): void;
+	onDragEnd(): void;
+}
+
+export interface AbstractScrollbarOptions {
+	lazyRender: boolean;
+	host: ScrollbarHost;
+	scrollbarState: ScrollbarState;
+	visibility: ScrollbarVisibility;
+	extraScrollbarClassName: string;
+	scrollable: Scrollable;
+	scrollByPage: boolean;
+}
+
+export abstract class AbstractScrollbar extends Widget {
+
+	protected _host: ScrollbarHost;
+	protected _scrollable: Scrollable;
+	protected _scrollByPage: boolean;
+	private _lazyRender: boolean;
+	protected _scrollbarState: ScrollbarState;
+	protected _visibilityController: ScrollbarVisibilityController;
+	private _pointerMoveMonitor: GlobalPointerMoveMonitor;
+
+	public domNode: FastDomNode<HTMLElement>;
+	public slider!: FastDomNode<HTMLElement>;
+
+	protected _shouldRender: boolean;
+
+	constructor(opts: AbstractScrollbarOptions) {
+		super();
+		this._lazyRender = opts.lazyRender;
+		this._host = opts.host;
+		this._scrollable = opts.scrollable;
+		this._scrollByPage = opts.scrollByPage;
+		this._scrollbarState = opts.scrollbarState;
+		this._visibilityController = this._register(new ScrollbarVisibilityController(opts.visibility, 'visible scrollbar ' + opts.extraScrollbarClassName, 'invisible scrollbar ' + opts.extraScrollbarClassName));
+		this._visibilityController.setIsNeeded(this._scrollbarState.isNeeded());
+		this._pointerMoveMonitor = this._register(new GlobalPointerMoveMonitor());
+		this._shouldRender = true;
+		this.domNode = createFastDomNode(document.createElement('div'));
+		this.domNode.setAttribute('role', 'presentation');
+		this.domNode.setAttribute('aria-hidden', 'true');
+
+		this._visibilityController.setDomNode(this.domNode);
+		this.domNode.setPosition('absolute');
+
+		this._register(dom.addDisposableListener(this.domNode.domNode, dom.EventType.POINTER_DOWN, (e: PointerEvent) => this._domNodePointerDown(e)));
+	}
+
+	// ----------------- creation
+
+	/**
+	 * Creates the dom node for an arrow & adds it to the container
+	 */
+	protected _createArrow(opts: ScrollbarArrowOptions): void {
+		const arrow = this._register(new ScrollbarArrow(opts));
+		this.domNode.domNode.appendChild(arrow.bgDomNode);
+		this.domNode.domNode.appendChild(arrow.domNode);
+	}
+
+	/**
+	 * Creates the slider dom node, adds it to the container & hooks up the events
+	 */
+	protected _createSlider(top: number, left: number, width: number | undefined, height: number | undefined): void {
+		this.slider = createFastDomNode(document.createElement('div'));
+		this.slider.setClassName('slider');
+		this.slider.setPosition('absolute');
+		this.slider.setTop(top);
+		this.slider.setLeft(left);
+		if (typeof width === 'number') {
+			this.slider.setWidth(width);
+		}
+		if (typeof height === 'number') {
+			this.slider.setHeight(height);
+		}
+		this.slider.setLayerHinting(true);
+		this.slider.setContain('strict');
+
+		this.domNode.domNode.appendChild(this.slider.domNode);
+
+		this._register(dom.addDisposableListener(
+			this.slider.domNode,
+			dom.EventType.POINTER_DOWN,
+			(e: PointerEvent) => {
+				if (e.button === 0) {
+					e.preventDefault();
+					this._sliderPointerDown(e);
+				}
+			}
+		));
+
+		this.onclick(this.slider.domNode, e => {
+			if (e.leftButton) {
+				e.stopPropagation();
+			}
+		});
+	}
+
+	// ----------------- Update state
+
+	protected _onElementSize(visibleSize: number): boolean {
+		if (this._scrollbarState.setVisibleSize(visibleSize)) {
+			this._visibilityController.setIsNeeded(this._scrollbarState.isNeeded());
+			this._shouldRender = true;
+			if (!this._lazyRender) {
+				this.render();
+			}
+		}
+		return this._shouldRender;
+	}
+
+	protected _onElementScrollSize(elementScrollSize: number): boolean {
+		if (this._scrollbarState.setScrollSize(elementScrollSize)) {
+			this._visibilityController.setIsNeeded(this._scrollbarState.isNeeded());
+			this._shouldRender = true;
+			if (!this._lazyRender) {
+				this.render();
+			}
+		}
+		return this._shouldRender;
+	}
+
+	protected _onElementScrollPosition(elementScrollPosition: number): boolean {
+		if (this._scrollbarState.setScrollPosition(elementScrollPosition)) {
+			this._visibilityController.setIsNeeded(this._scrollbarState.isNeeded());
+			this._shouldRender = true;
+			if (!this._lazyRender) {
+				this.render();
+			}
+		}
+		return this._shouldRender;
+	}
+
+	// ----------------- rendering
+
+	public beginReveal(): void {
+		this._visibilityController.setShouldBeVisible(true);
+	}
+
+	public beginHide(): void {
+		this._visibilityController.setShouldBeVisible(false);
+	}
+
+	public render(): void {
+		if (!this._shouldRender) {
+			return;
+		}
+		this._shouldRender = false;
+
+		this._renderDomNode(this._scrollbarState.getRectangleLargeSize(), this._scrollbarState.getRectangleSmallSize());
+		this._updateSlider(this._scrollbarState.getSliderSize(), this._scrollbarState.getArrowSize() + this._scrollbarState.getSliderPosition());
+	}
+	// ----------------- DOM events
+
+	private _domNodePointerDown(e: PointerEvent): void {
+		if (e.target !== this.domNode.domNode) {
+			return;
+		}
+		this._onPointerDown(e);
+	}
+
+	public delegatePointerDown(e: PointerEvent): void {
+		const domTop = this.domNode.domNode.getClientRects()[0].top;
+		const sliderStart = domTop + this._scrollbarState.getSliderPosition();
+		const sliderStop = domTop + this._scrollbarState.getSliderPosition() + this._scrollbarState.getSliderSize();
+		const pointerPos = this._sliderPointerPosition(e);
+		if (sliderStart <= pointerPos && pointerPos <= sliderStop) {
+			// Act as if it was a pointer down on the slider
+			if (e.button === 0) {
+				e.preventDefault();
+				this._sliderPointerDown(e);
+			}
+		} else {
+			// Act as if it was a pointer down on the scrollbar
+			this._onPointerDown(e);
+		}
+	}
+
+	private _onPointerDown(e: PointerEvent): void {
+		let offsetX: number;
+		let offsetY: number;
+		if (e.target === this.domNode.domNode && typeof e.offsetX === 'number' && typeof e.offsetY === 'number') {
+			offsetX = e.offsetX;
+			offsetY = e.offsetY;
+		} else {
+			const domNodePosition = dom.getDomNodePagePosition(this.domNode.domNode);
+			offsetX = e.pageX - domNodePosition.left;
+			offsetY = e.pageY - domNodePosition.top;
+		}
+
+		const offset = this._pointerDownRelativePosition(offsetX, offsetY);
+		this._setDesiredScrollPositionNow(
+			this._scrollByPage
+				? this._scrollbarState.getDesiredScrollPositionFromOffsetPaged(offset)
+				: this._scrollbarState.getDesiredScrollPositionFromOffset(offset)
+		);
+
+		if (e.button === 0) {
+			// left button
+			e.preventDefault();
+			this._sliderPointerDown(e);
+		}
+	}
+
+	private _sliderPointerDown(e: PointerEvent): void {
+		if (!e.target || !(e.target instanceof Element)) {
+			return;
+		}
+		const initialPointerPosition = this._sliderPointerPosition(e);
+		const initialPointerOrthogonalPosition = this._sliderOrthogonalPointerPosition(e);
+		const initialScrollbarState = this._scrollbarState.clone();
+		this.slider.toggleClassName('active', true);
+
+		this._pointerMoveMonitor.startMonitoring(
+			e.target,
+			e.pointerId,
+			e.buttons,
+			(pointerMoveData: PointerEvent) => {
+				const pointerOrthogonalPosition = this._sliderOrthogonalPointerPosition(pointerMoveData);
+				const pointerOrthogonalDelta = Math.abs(pointerOrthogonalPosition - initialPointerOrthogonalPosition);
+
+				if (platform.isWindows && pointerOrthogonalDelta > POINTER_DRAG_RESET_DISTANCE) {
+					// The pointer has wondered away from the scrollbar => reset dragging
+					this._setDesiredScrollPositionNow(initialScrollbarState.getScrollPosition());
+					return;
+				}
+
+				const pointerPosition = this._sliderPointerPosition(pointerMoveData);
+				const pointerDelta = pointerPosition - initialPointerPosition;
+				this._setDesiredScrollPositionNow(initialScrollbarState.getDesiredScrollPositionFromDelta(pointerDelta));
+			},
+			() => {
+				this.slider.toggleClassName('active', false);
+				this._host.onDragEnd();
+			}
+		);
+
+		this._host.onDragStart();
+	}
+
+	private _setDesiredScrollPositionNow(_desiredScrollPosition: number): void {
+
+		const desiredScrollPosition: INewScrollPosition = {};
+		this.writeScrollPosition(desiredScrollPosition, _desiredScrollPosition);
+
+		this._scrollable.setScrollPositionNow(desiredScrollPosition);
+	}
+
+	public updateScrollbarSize(scrollbarSize: number): void {
+		this._updateScrollbarSize(scrollbarSize);
+		this._scrollbarState.setScrollbarSize(scrollbarSize);
+		this._shouldRender = true;
+		if (!this._lazyRender) {
+			this.render();
+		}
+	}
+
+	public isNeeded(): boolean {
+		return this._scrollbarState.isNeeded();
+	}
+
+	// ----------------- Overwrite these
+
+	protected abstract _renderDomNode(largeSize: number, smallSize: number): void;
+	protected abstract _updateSlider(sliderSize: number, sliderPosition: number): void;
+
+	protected abstract _pointerDownRelativePosition(offsetX: number, offsetY: number): number;
+	protected abstract _sliderPointerPosition(e: ISimplifiedPointerEvent): number;
+	protected abstract _sliderOrthogonalPointerPosition(e: ISimplifiedPointerEvent): number;
+	protected abstract _updateScrollbarSize(size: number): void;
+
+	public abstract writeScrollPosition(target: INewScrollPosition, scrollPosition: number): void;
+}