TypeScript FastDomNode.setLeft方法代碼示例

	public render(ctx: RestrictedRenderingContext): void {
		let data = this._renderData;

		let keys = Object.keys(this._widgets);
		for (let i = 0, len = keys.length; i < len; i++) {
			const widgetId = keys[i];
			const widget = this._widgets[widgetId];
			const domNode = widget.domNode;

			if (data.hasOwnProperty(widgetId)) {
				if (widget.allowEditorOverflow) {
					domNode.setTop(data[widgetId].top);
					domNode.setLeft(data[widgetId].left);
				} else {
					domNode.setTop(data[widgetId].top + ctx.scrollTop - ctx.bigNumbersDelta);
					domNode.setLeft(data[widgetId].left);
				}
				if (!widget.isVisible) {
					domNode.setVisibility('inherit');
					domNode.setAttribute('monaco-visible-content-widget', 'true');
					widget.isVisible = true;
				}
			} else {
				if (widget.isVisible) {
					domNode.removeAttribute('monaco-visible-content-widget');
					widget.isVisible = false;
					domNode.setVisibility('hidden');
				}
			}
		}
	}

	public render(ctx: RestrictedRenderingContext): void {
		if (!this._renderData) {
			// This widget should be invisible
			if (this._isVisible) {
				this.domNode.removeAttribute('monaco-visible-content-widget');
				this._isVisible = false;
				this.domNode.setVisibility('hidden');
			}
			return;
		}

		// This widget should be visible
		if (this.allowEditorOverflow) {
			this.domNode.setTop(this._renderData.top);
			this.domNode.setLeft(this._renderData.left);
		} else {
			this.domNode.setTop(this._renderData.top + ctx.scrollTop - ctx.bigNumbersDelta);
			this.domNode.setLeft(this._renderData.left);
		}

		if (!this._isVisible) {
			this.domNode.setVisibility('inherit');
			this.domNode.setAttribute('monaco-visible-content-widget', 'true');
			this._isVisible = true;
		}
	}

	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 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
		};
	}

	private _setLayout(): void {
		const layoutInfo = this._context.configuration.editor.layoutInfo;

		this.scrollbarDomNode.setLeft(layoutInfo.contentLeft);
		this.scrollbarDomNode.setWidth(layoutInfo.contentWidth + layoutInfo.minimapWidth);
		this.scrollbarDomNode.setHeight(layoutInfo.contentHeight);
	}

	public render(ctx: RestrictedRenderingContext): 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;
		}

		this._domNode.setClassName('cursor ' + this._renderData.textContentClassName);

		this._domNode.setDisplay('block');
		this._domNode.setTop(this._renderData.top);
		this._domNode.setLeft(this._renderData.left);
		this._domNode.setWidth(this._renderData.width);
		this._domNode.setLineHeight(this._renderData.height);
		this._domNode.setHeight(this._renderData.height);

		return {
			domNode: this._domNode.domNode,
			position: this._position,
			contentLeft: this._renderData.left,
			height: this._renderData.height,
			width: 2
		};
	}

	/**
	 * 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();
			}
		});
	}

	private createTextArea(): void {
		// Text Area (The focus will always be in the textarea when the cursor is blinking)
		this.textArea = createFastDomNode(document.createElement('textarea'));
		PartFingerprints.write(this.textArea.domNode, PartFingerprint.TextArea);
		this.textArea.setClassName(editorBrowser.ClassNames.TEXTAREA);
		this.textArea.setAttribute('wrap', 'off');
		this.textArea.setAttribute('autocorrect', 'off');
		this.textArea.setAttribute('autocapitalize', 'off');
		this.textArea.setAttribute('spellcheck', 'false');
		this.textArea.setAttribute('aria-label', this._context.configuration.editor.viewInfo.ariaLabel);
		this.textArea.setAttribute('role', 'textbox');
		this.textArea.setAttribute('aria-multiline', 'true');
		this.textArea.setAttribute('aria-haspopup', 'false');
		this.textArea.setAttribute('aria-autocomplete', 'both');

		this.textArea.setTop(0);
		this.textArea.setLeft(0);

		this.listenersToDispose.push(dom.addDisposableListener(this.textArea.domNode, 'focus', () => this._setHasFocus(true)));
		this.listenersToDispose.push(dom.addDisposableListener(this.textArea.domNode, 'blur', () => this._setHasFocus(false)));

		// On top of the text area, we position a dom node to cover it up
		// (there have been reports of tiny blinking cursors)
		// (in WebKit the textarea is 1px by 1px because it cannot handle input to a 0x0 textarea)
		this.textAreaCover = createFastDomNode(document.createElement('div'));
		if (this._context.configuration.editor.viewInfo.glyphMargin) {
			this.textAreaCover.setClassName('monaco-editor-background ' + editorBrowser.ClassNames.GLYPH_MARGIN + ' ' + editorBrowser.ClassNames.TEXTAREA_COVER);
		} else {
			if (this._context.configuration.editor.viewInfo.renderLineNumbers) {
				this.textAreaCover.setClassName('monaco-editor-background ' + editorBrowser.ClassNames.LINE_NUMBERS + ' ' + editorBrowser.ClassNames.TEXTAREA_COVER);
			} else {
				this.textAreaCover.setClassName('monaco-editor-background ' + editorBrowser.ClassNames.TEXTAREA_COVER);
			}
		}
		this.textAreaCover.setPosition('absolute');
		this.textAreaCover.setWidth(1);
		this.textAreaCover.setHeight(1);
		this.textAreaCover.setTop(0);
		this.textAreaCover.setLeft(0);
	}

	private _setLayout(): void {
		const layoutInfo = this._context.configuration.editor.layoutInfo;

		this.scrollbarDomNode.setLeft(layoutInfo.contentLeft);

		const side = this._context.configuration.editor.viewInfo.minimap.side;
		if (side === 'right') {
			this.scrollbarDomNode.setWidth(layoutInfo.contentWidth + layoutInfo.minimapWidth);
		} else {
			this.scrollbarDomNode.setWidth(layoutInfo.contentWidth);
		}
		this.scrollbarDomNode.setHeight(layoutInfo.contentHeight);
	}

	/**
	 * Creates the slider dom node, adds it to the container & hooks up the events
	 */
	protected _createSlider(top: number, left: number, width: number, height: number): void {
		this.slider = createFastDomNode(document.createElement('div'));
		this.slider.setClassName('slider');
		this.slider.setPosition('absolute');
		this.slider.setTop(top);
		this.slider.setLeft(left);
		this.slider.setWidth(width);
		this.slider.setHeight(height);

		this.domNode.domNode.appendChild(this.slider.domNode);

		this.onmousedown(this.slider.domNode, (e) => this._sliderMouseDown(e));
	}