private _renderWidget(widgetData: IWidgetData): void { var _RESTORE_STYLE_TOP = 'data-editor-restoreStyleTop', domNode = widgetData.widget.getDomNode(); if (widgetData.preference === null) { if (domNode.hasAttribute(_RESTORE_STYLE_TOP)) { var previousTop = domNode.getAttribute(_RESTORE_STYLE_TOP); domNode.removeAttribute(_RESTORE_STYLE_TOP); domNode.style.top = previousTop; } return; } if (widgetData.preference === OverlayWidgetPositionPreference.TOP_RIGHT_CORNER) { if (!domNode.hasAttribute(_RESTORE_STYLE_TOP)) { domNode.setAttribute(_RESTORE_STYLE_TOP, domNode.style.top); } StyleMutator.setTop(domNode, 0); StyleMutator.setRight(domNode, (2 * this._verticalScrollbarWidth)); } else if (widgetData.preference === OverlayWidgetPositionPreference.BOTTOM_RIGHT_CORNER) { if (!domNode.hasAttribute(_RESTORE_STYLE_TOP)) { domNode.setAttribute(_RESTORE_STYLE_TOP, domNode.style.top); } var widgetHeight = domNode.clientHeight; StyleMutator.setTop(domNode, (this._editorHeight - widgetHeight - 2 * this._horizontalScrollbarHeight)); StyleMutator.setRight(domNode, (2 * this._verticalScrollbarWidth)); } else if (widgetData.preference === OverlayWidgetPositionPreference.TOP_CENTER) { if (!domNode.hasAttribute(_RESTORE_STYLE_TOP)) { domNode.setAttribute(_RESTORE_STYLE_TOP, domNode.style.top); } StyleMutator.setTop(domNode, 0); domNode.style.right = '50%'; } }
public addZone(zone: IViewZone): number { let props = this._computeWhitespaceProps(zone); let whitespaceId = this._whitespaceManager.addWhitespace(props.afterViewLineNumber, this._getZoneOrdinal(zone), props.heightInPx); let myZone: IMyViewZone = { whitespaceId: whitespaceId, delegate: zone, isVisible: false }; this._safeCallOnComputedHeight(myZone.delegate, props.heightInPx); myZone.delegate.domNode.style.position = 'absolute'; myZone.delegate.domNode.style.width = '100%'; StyleMutator.setDisplay(myZone.delegate.domNode, 'none'); myZone.delegate.domNode.setAttribute('monaco-view-zone', myZone.whitespaceId.toString()); this.domNode.appendChild(myZone.delegate.domNode); if (myZone.delegate.marginDomNode) { myZone.delegate.marginDomNode.style.position = 'absolute'; myZone.delegate.marginDomNode.style.width = '100%'; StyleMutator.setDisplay(myZone.delegate.marginDomNode, 'none'); myZone.delegate.marginDomNode.setAttribute('monaco-view-zone', myZone.whitespaceId.toString()); this.marginDomNode.appendChild(myZone.delegate.marginDomNode); } this._zones[myZone.whitespaceId.toString()] = myZone; this.setShouldRender(); return myZone.whitespaceId; }
protected _updateSlider(sliderSize: number, sliderPosition: number): void { StyleMutator.setWidth(this.slider, sliderSize); if (!this._forbidTranslate3dUse && Browser.canUseTranslate3d) { StyleMutator.setTransform(this.slider, 'translate3d(' + sliderPosition + 'px, 0px, 0px)'); } else { StyleMutator.setLeft(this.slider, sliderPosition); } }
public render(ctx:EditorBrowser.IRestrictedRenderingContext): void { if (this._isInViewport) { StyleMutator.setDisplay(this._domNode, 'block'); StyleMutator.setLeft(this._domNode, this._positionLeft); StyleMutator.setTop(this._domNode, this._positionTop + ctx.viewportTop - ctx.bigNumbersDelta); } else { StyleMutator.setDisplay(this._domNode, 'none'); } }
this._requestModificationFrame(() => { if (!myZone.delegate.domNode.hasAttribute('monaco-view-zone')) { // Do not position zone if it was removed in the meantime return; } myZone.delegate.domNode.style.position = 'absolute'; StyleMutator.setHeight(myZone.delegate.domNode, computedHeight); myZone.delegate.domNode.style.width = '100%'; StyleMutator.setDisplay(myZone.delegate.domNode, 'none'); });
private _createCursorDomNode(isSecondary: boolean): HTMLElement { var domNode = document.createElement('div'); domNode.className = 'cursor'; if (isSecondary) { domNode.className += ' secondary'; } StyleMutator.setHeight(domNode, this._lineHeight); StyleMutator.setTop(domNode, 0); StyleMutator.setLeft(domNode, 0); domNode.setAttribute('role', 'presentation'); domNode.setAttribute('aria-hidden', 'true'); return domNode; }
public render(ctx:IRestrictedRenderingContext): void { StyleMutator.setWidth(this.domNode, this._editorWidth); let keys = Object.keys(this._widgets); for (let i = 0, len = keys.length; i < len; i++) { let widgetId = keys[i]; this._renderWidget(this._widgets[widgetId]); } }
this._requestModificationFrame(() => { for (id in this._zones) { if (this._zones.hasOwnProperty(id)) { if (zone2Height.hasOwnProperty(id)) { // TODO@Alex - edit dom node properties only in render() StyleMutator.setHeight(this._zones[id].delegate.domNode, zone2Height[id]); } } } });
this._requestModificationFrame(() => { var visibleZones:{[id:string]:editorCommon.IViewWhitespaceViewportData;} = {}, i:number, len:number, hasVisibleZone = false; for (i = 0, len = visibleWhitespaces.length; i < len; i++) { visibleZones[visibleWhitespaces[i].id.toString()] = visibleWhitespaces[i]; hasVisibleZone = true; } var id:string, zone:IMyViewZone; for (id in this._zones) { if (this._zones.hasOwnProperty(id)) { zone = this._zones[id]; if (visibleZones.hasOwnProperty(id)) { // zone is visible StyleMutator.setTop(zone.delegate.domNode, (visibleZones[id].verticalOffset - ctx.bigNumbersDelta)); StyleMutator.setHeight(zone.delegate.domNode, visibleZones[id].height); if (!zone.isVisible) { StyleMutator.setDisplay(zone.delegate.domNode, 'block'); zone.delegate.domNode.setAttribute('monaco-visible-view-zone', 'true'); zone.isVisible = true; } this._safeCallOnDomNodeTop(zone.delegate, ctx.getScrolledTopFromAbsoluteTop(visibleZones[id].verticalOffset)); } else { if (zone.isVisible) { StyleMutator.setDisplay(zone.delegate.domNode, 'none'); zone.delegate.domNode.removeAttribute('monaco-visible-view-zone'); zone.isVisible = false; } this._safeCallOnDomNodeTop(zone.delegate, ctx.getScrolledTopFromAbsoluteTop(-1000000)); } } } if (hasVisibleZone) { StyleMutator.setWidth(this.domNode, ctx.scrollWidth); } });
this._requestModificationFrameBeforeRendering(() => { // update the maxWidth on widgets nodes, such that `onReadAfterForcedLayout` // below can read out the adjusted width/height of widgets let widgetId:string; for (widgetId in this._widgets) { if (this._widgets.hasOwnProperty(widgetId)) { StyleMutator.setMaxWidth(this._widgets[widgetId].widget.getDomNode(), this._contentWidth); } } });