TypeScript fastDomNode.FastDomNode類代碼示例

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

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

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