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());
}
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;
}
public delegateMouseDown(browserEvent: MouseEvent): void {
let e = new StandardMouseEvent(browserEvent);
let domTop = this.domNode.domNode.getClientRects()[0].top;
let sliderStart = domTop + this._scrollbarState.getSliderPosition();
let sliderStop = domTop + this._scrollbarState.getSliderPosition() + this._scrollbarState.getSliderSize();
let mousePos = this._sliderMousePosition(e);
if (sliderStart <= mousePos && mousePos <= sliderStop) {
// Act as if it was a mouse down on the slider
this._sliderMouseDown(e);
} else {
// Act as if it was a mouse down on the scrollbar
this._onMouseDown(e);
}
}
private _sliderMouseDown(e: ISimplifiedMouseEvent, onDragFinished: () => void): void {
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) => {
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._setDesiredScrollPositionNow(initialScrollbarState.getScrollPosition());
return;
}
const mousePosition = this._sliderMousePosition(mouseMoveData);
const mouseDelta = mousePosition - initialMousePosition;
this._setDesiredScrollPositionNow(initialScrollbarState.getDesiredScrollPositionFromDelta(mouseDelta));
},
() => {
this.slider.toggleClassName('active', false);
this._host.onDragEnd();
onDragFinished();
}
);
this._host.onDragStart();
}
public delegateMouseDown(e: IMouseEvent): void {
let domTop = this.domNode.domNode.getClientRects()[0].top;
let sliderStart = domTop + this._scrollbarState.getSliderPosition();
let sliderStop = domTop + this._scrollbarState.getSliderPosition() + this._scrollbarState.getSliderSize();
let mousePos = this._sliderMousePosition(e);
if (sliderStart <= mousePos && mousePos <= sliderStop) {
// Act as if it was a mouse down on the slider
if (e.leftButton) {
e.preventDefault();
this._sliderMouseDown(e, () => { /*nothing to do*/ });
}
} else {
// Act as if it was a mouse down on the scrollbar
this._onMouseDown(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();
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);
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.slider.toggleClassName('active', false);
this._host.onDragEnd();
}
);
e.preventDefault();
this._host.onDragStart();
}
}
public render(): void {
if (!this._shouldRender) {
return;
}
this._shouldRender = false;
if (this._canUseTranslate3d) {
// Put the scrollbar in its own layer
this.domNode.setTransform('translate3d(0px, 0px, 0px)');
} else {
this.domNode.setTransform('');
}
this._renderDomNode(this._scrollbarState.getRectangleLargeSize(), this._scrollbarState.getRectangleSmallSize());
this._updateSlider(this._scrollbarState.getSliderSize(), this._scrollbarState.getArrowSize() + this._scrollbarState.getSliderPosition());
}
private _onMouseDown(e: IMouseEvent): void {
let domNodePosition = DomUtils.getDomNodePagePosition(this.domNode.domNode);
this._setDesiredScrollPositionNow(this._scrollbarState.getDesiredScrollPositionFromOffset(this._mouseDownRelativePosition(e, domNodePosition)));
if (e.leftButton) {
e.preventDefault();
this._sliderMouseDown(e, () => { /*nothing to do*/ });
}
}
(mouseMoveData: IStandardMouseMoveEventData) => {
let mouseOrthogonalPosition = this._sliderOrthogonalMousePosition(mouseMoveData);
let mouseOrthogonalDelta = Math.abs(mouseOrthogonalPosition - initialMouseOrthogonalPosition);
// console.log(initialMouseOrthogonalPosition + ' -> ' + mouseOrthogonalPosition + ': ' + mouseOrthogonalDelta);
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));
}
},
private _onMouseDown(e: IMouseEvent): void {
let offsetX: number;
let offsetY: number;
if (e.target === this.domNode.domNode && typeof e.browserEvent.offsetX === 'number' && typeof e.browserEvent.offsetY === 'number') {
offsetX = e.browserEvent.offsetX;
offsetY = e.browserEvent.offsetY;
} else {
const domNodePosition = DomUtils.getDomNodePagePosition(this.domNode.domNode);
offsetX = e.posx - domNodePosition.left;
offsetY = e.posy - domNodePosition.top;
}
this._setDesiredScrollPositionNow(this._scrollbarState.getDesiredScrollPositionFromOffset(this._mouseDownRelativePosition(offsetX, offsetY)));
if (e.leftButton) {
e.preventDefault();
this._sliderMouseDown(e, () => { /*nothing to do*/ });
}
}
