public setDomNode(domNode: FastDomNode<HTMLElement>): void {
this._domNode = domNode;
this._domNode.setClassName(this._invisibleClassName);
// Now that the flags & the dom node are in a consistent state, ensure the Hidden/Visible configuration
this.setShouldBeVisible(false);
}
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();
}
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 _hide(withFadeAway: boolean): void {
this._revealTimer.cancel();
if (!this._isVisible) {
return;
}
this._isVisible = false;
this._domNode.setClassName(this._invisibleClassName + (withFadeAway ? ' fade' : ''));
}
public onConfigurationChanged(e: viewEvents.ViewConfigurationChangedEvent): boolean {
if (e.lineHeight) {
this._zoneManager.setLineHeight(this._context.configuration.editor.lineHeight);
this._render();
}
if (e.pixelRatio) {
this._zoneManager.setPixelRatio(this._context.configuration.editor.pixelRatio);
this._domNode.setWidth(this._zoneManager.getDOMWidth());
this._domNode.setHeight(this._zoneManager.getDOMHeight());
this._domNode.domNode.width = this._zoneManager.getCanvasWidth();
this._domNode.domNode.height = this._zoneManager.getCanvasHeight();
this._render();
}
return true;
}
public setLayout(position: OverviewRulerPosition): void {
this._domNode.setTop(position.top);
this._domNode.setRight(position.right);
let hasChanged = false;
hasChanged = this._zoneManager.setDOMWidth(position.width) || hasChanged;
hasChanged = this._zoneManager.setDOMHeight(position.height) || hasChanged;
if (hasChanged) {
this._domNode.setWidth(this._zoneManager.getDOMWidth());
this._domNode.setHeight(this._zoneManager.getDOMHeight());
this._domNode.domNode.width = this._zoneManager.getCanvasWidth();
this._domNode.domNode.height = this._zoneManager.getCanvasHeight();
this._render();
}
}
/**
* 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.domNode.domNode.appendChild(this.slider.domNode);
this.onmousedown(this.slider.domNode, (e) => {
if (e.leftButton) {
e.preventDefault();
this._sliderMouseDown(e, () => { /*nothing to do*/ });
}
});
this.onclick(this.slider.domNode, e => {
if (e.leftButton) {
e.stopPropagation();
}
});
}
public render(ctx: IRestrictedRenderingContext): IViewCursorRenderData {
if (!this._renderData) {
this._domNode.setDisplay('none');
return null;
}
if (this._lastRenderedContent !== this._renderData.textContent) {
this._lastRenderedContent = this._renderData.textContent;
this._domNode.domNode.textContent = this._lastRenderedContent;
}
let top = this._renderData.top + ctx.viewportTop - ctx.bigNumbersDelta;
this._domNode.setDisplay('block');
this._domNode.setTop(top);
this._domNode.setLeft(this._renderData.left);
this._domNode.setWidth(this._renderData.width);
this._domNode.setLineHeight(this._lineHeight);
this._domNode.setHeight(this._lineHeight);
return {
domNode: this._domNode.domNode,
position: this._position,
contentTop: top,
contentLeft: this._renderData.left,
height: this._lineHeight,
width: 2
};
}
public onFocusChanged(e: viewEvents.ViewFocusChangedEvent): boolean {
this.domNode.toggleClassName('focused', e.isFocused);
if (e.isFocused) {
this.outgoingEvents.emitViewFocusGained();
} else {
this.outgoingEvents.emitViewFocusLost();
}
return false;
}
