// ----------------- initialize & clean-up
/**
* Creates the container dom node for the scrollbar & hooks up the events
*/
protected _createDomNode(): void {
this.domNode = createFastDomNode(document.createElement('div'));
if (!this._forbidTranslate3dUse && Browser.canUseTranslate3d) {
// Put the scrollbar in its own layer
this.domNode.setTransform('translate3d(0px, 0px, 0px)');
}
this._visibilityController.setDomNode(this.domNode);
this.domNode.setPosition('absolute');
this.onmousedown(this.domNode.domNode, (e) => this._domNodeMouseDown(e));
}
constructor(context: ViewContext, isSecondary: boolean) {
this._context = context;
this._isSecondary = isSecondary;
this._cursorStyle = this._context.configuration.editor.viewInfo.cursorStyle;
this._lineHeight = this._context.configuration.editor.lineHeight;
this._typicalHalfwidthCharacterWidth = this._context.configuration.editor.fontInfo.typicalHalfwidthCharacterWidth;
this._isVisible = true;
// Create the dom node
this._domNode = createFastDomNode(document.createElement('div'));
if (this._isSecondary) {
this._domNode.setClassName('cursor secondary');
} else {
this._domNode.setClassName('cursor');
}
this._domNode.setHeight(this._lineHeight);
this._domNode.setTop(0);
this._domNode.setLeft(0);
this._domNode.setAttribute('role', 'presentation');
this._domNode.setAttribute('aria-hidden', 'true');
Configuration.applyFontInfo(this._domNode, this._context.configuration.editor.fontInfo);
this._domNode.setDisplay('none');
this.updatePosition(new Position(1, 1));
this._isInEditableRange = true;
this._lastRenderedContent = '';
this._renderData = null;
}
public setDomNode(domNode: FastDomNode): 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: 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 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 {
position: this._position,
contentTop: top,
contentLeft: this._renderData.left,
height: this._lineHeight,
width: 2
};
}
public render(ctx: IRestrictedRenderingContext): void {
if (this._canUseTranslate3d) {
let transform = 'translate3d(0px, ' + ctx.linesViewportData.visibleRangesDeltaTop + 'px, 0px)';
StyleMutator.setTransform(this.domNode, transform);
StyleMutator.setTop(this.domNode, 0);
} else {
StyleMutator.setTransform(this.domNode, '');
StyleMutator.setTop(this.domNode, ctx.linesViewportData.visibleRangesDeltaTop);
}
let height = Math.min(this._layoutProvider.getTotalHeight(), 1000000);
StyleMutator.setHeight(this.domNode, height);
StyleMutator.setWidth(this.domNode, this._contentLeft);
this._glyphMarginBackgroundDomNode.setLeft(this._glyphMarginLeft);
this._glyphMarginBackgroundDomNode.setWidth(this._glyphMarginWidth);
this._glyphMarginBackgroundDomNode.setHeight(height);
}
constructor(opts:AbstractScrollbarOptions) {
super();
this._forbidTranslate3dUse = opts.forbidTranslate3dUse;
this._lazyRender = opts.lazyRender;
this._host = opts.host;
this._scrollable = opts.scrollable;
this._scrollbarState = opts.scrollbarState;
this._visibilityController = this._register(new ScrollbarVisibilityController(opts.visibility, 'visible scrollbar ' + opts.extraScrollbarClassName, 'invisible scrollbar ' + opts.extraScrollbarClassName));
this._mouseMoveMonitor = this._register(new GlobalMouseMoveMonitor<IStandardMouseMoveEventData>());
this._shouldRender = true;
this.domNode = createFastDomNode(document.createElement('div'));
if (!this._forbidTranslate3dUse && Browser.canUseTranslate3d) {
// Put the scrollbar in its own layer
this.domNode.setTransform('translate3d(0px, 0px, 0px)');
}
this._visibilityController.setDomNode(this.domNode);
this.domNode.setPosition('absolute');
this.onmousedown(this.domNode.domNode, (e) => this._domNodeMouseDown(e));
}
public _createDomNode(): HTMLElement {
let domNode = document.createElement('div');
domNode.className = ClassNames.MARGIN + ' monaco-editor-background';
domNode.style.position = 'absolute';
domNode.setAttribute('role', 'presentation');
domNode.setAttribute('aria-hidden', 'true');
this._glyphMarginBackgroundDomNode = createFastDomNode(document.createElement('div'));
this._glyphMarginBackgroundDomNode.setClassName(ClassNames.GLYPH_MARGIN);
domNode.appendChild(this._glyphMarginBackgroundDomNode.domNode);
return domNode;
}
