TypeScript scrollableElement.ScrollableElement类代码示例

	public onConfigurationChanged(e: viewEvents.ViewConfigurationChangedEvent): boolean {
		const viewInfo = this._context.configuration.editor.viewInfo;

		this.scrollbar.updateClassName(ClassNames.SCROLLABLE_ELEMENT + ' ' + viewInfo.theme);
		if (e.viewInfo.scrollbar || e.viewInfo.canUseTranslate3d) {
			let newOpts: ScrollableElementChangeOptions = {
				canUseTranslate3d: viewInfo.canUseTranslate3d,
				handleMouseWheel: viewInfo.scrollbar.handleMouseWheel,
				mouseWheelScrollSensitivity: viewInfo.scrollbar.mouseWheelScrollSensitivity
			};
			this.scrollbar.updateOptions(newOpts);
		}
		if (e.layoutInfo) {
			this._setLayout();
		}
		return true;
	}

	constructor(
		container: HTMLElement,
		private delegate: IDelegate<T>,
		renderers: IRenderer<T, any>[],
		options: IListViewOptions = DefaultOptions
	) {
		this.items = [];
		this.itemId = 0;
		this.rangeMap = new RangeMap();
		this.renderers = toObject<IRenderer<T, any>, IRenderer<T, any>>(renderers, r => r.templateId);
		this.cache = new RowCache(this.renderers);

		this.lastRenderTop = 0;
		this.lastRenderHeight = 0;

		this._domNode = document.createElement('div');
		this._domNode.className = 'monaco-list';

		this.rowsContainer = document.createElement('div');
		this.rowsContainer.className = 'monaco-list-rows';
		this.gesture = new Gesture(this.rowsContainer);

		this.scrollableElement = new ScrollableElement(this.rowsContainer, {
			canUseTranslate3d: false,
			alwaysConsumeMouseWheel: true,
			horizontal: ScrollbarVisibility.Hidden,
			vertical: ScrollbarVisibility.Auto,
			useShadows: getOrDefault(options, o => o.useShadows, DefaultOptions.useShadows),
			saveLastScrollTimeOnClassName: 'monaco-list-row'
		});

		this._domNode.appendChild(this.scrollableElement.getDomNode());
		container.appendChild(this._domNode);

		this.disposables = [this.rangeMap, this.gesture, this.scrollableElement];

		this.scrollableElement.onScroll(this.onScroll, this, this.disposables);
		domEvent(this.rowsContainer, TouchEventType.Change)(this.onTouchChange, this, this.disposables);

		this.layout();
	}

	constructor(
		container: HTMLElement,
		private delegate: IDelegate<T>,
		renderers: IRenderer<T, any>[]
	) {
		this.items = [];
		this.itemId = 0;
		this.rangeMap = new RangeMap();
		this.renderers = toObject<IRenderer<T, any>, IRenderer<T, any>>(renderers, r => r.templateId);
		this.cache = new RowCache(this.renderers);

		this.lastRenderTop = 0;
		this.lastRenderHeight = 0;

		this._domNode = document.createElement('div');
		this._domNode.className = 'monaco-list';
		this._domNode.tabIndex = 0;

		this.rowsContainer = document.createElement('div');
		this.rowsContainer.className = 'monaco-list-rows';
		this.gesture = new Gesture(this.rowsContainer);

		this.scrollableElement = new ScrollableElement(this.rowsContainer, {
			forbidTranslate3dUse: true,
			horizontal: 'hidden',
			vertical: 'auto',
			useShadows: false,
			saveLastScrollTimeOnClassName: 'monaco-list-row'
		});
		this.scrollableElement.onScroll((e) => {
			this.render(e.scrollTop, e.height);
		});

		this._domNode.appendChild(this.scrollableElement.getDomNode());
		container.appendChild(this._domNode);

		this.toDispose = [this.rangeMap, this.gesture, this.scrollableElement];

		this.layout();
	}

	public onConfigurationChanged(e: viewEvents.ViewConfigurationChangedEvent): boolean {
		if (e.viewInfo) {
			const editor = this._context.configuration.editor;
			let newOpts: ScrollableElementChangeOptions = {
				handleMouseWheel: editor.viewInfo.scrollbar.handleMouseWheel,
				mouseWheelScrollSensitivity: editor.viewInfo.scrollbar.mouseWheelScrollSensitivity
			};
			this.scrollbar.updateOptions(newOpts);
		}
		if (e.layoutInfo) {
			this._setLayout();
		}
		return true;
	}

	splice(start: number, deleteCount: number, elements: T[] = []): T[] {
		const previousRenderRange = this.getRenderRange(this.lastRenderTop, this.lastRenderHeight);
		each(previousRenderRange, i => this.removeItemFromDOM(this.items[i]));

		const inserted = elements.map<IItem<T>>(element => ({
			id: String(this.itemId++),
			element,
			size: this.delegate.getHeight(element),
			templateId: this.delegate.getTemplateId(element),
			row: null
		}));

		this.rangeMap.splice(start, deleteCount, ...inserted);

		const deleted = this.items.splice(start, deleteCount, ...inserted);

		const renderRange = this.getRenderRange(this.lastRenderTop, this.lastRenderHeight);
		each(renderRange, i => this.insertItemInDOM(this.items[i], i));

		const scrollHeight = this.getContentHeight();
		this.rowsContainer.style.height = `${scrollHeight}px`;
		this.scrollableElement.updateState({ scrollHeight });

		return deleted.map(i => i.element);
	}

	splice(start: number, deleteCount: number, ...elements: T[]): T[] {
		const before = this.getRenderedItemRanges();
		const inserted = elements.map<IItem<T>>(element => ({
			id: String(this.itemId++),
			element,
			size: this.delegate.getHeight(element),
			templateId: this.delegate.getTemplateId(element),
			row: null
		}));

		this.rangeMap.splice(start, deleteCount, ...inserted);
		const deleted = this.items.splice(start, deleteCount, ...inserted);

		const after = this.getRenderedItemRanges();
		const lcs = new LcsDiff(toSequence(before), toSequence(after), null);
		const diffs = lcs.ComputeDiff();

		for (const diff of diffs) {
			for (let i = 0; i < diff.originalLength; i++) {
				this.removeItemFromDOM(before[diff.originalStart + i].item);
			}

			for (let i = 0; i < diff.modifiedLength; i++) {
				this.insertItemInDOM(after[diff.modifiedStart + i].item, after[0].index + diff.modifiedStart + i);
			}
		}

		const scrollHeight = this.getContentHeight();
		this.rowsContainer.style.height = `${ scrollHeight }px`;
		this.scrollableElement.updateState({ scrollHeight });

		return deleted.map(i => i.element);
	}

	public getScrollHeight(): number {
		return this.scrollbar.getScrollHeight();
	}

	public getScrollLeft(): number {
		return this.scrollbar.getScrollLeft();
	}

	layout(height?: number): void {
		this.scrollableElement.setScrollDimensions({
			height: height || DOM.getContentHeight(this._domNode)
		});
	}

	setScrollTop(scrollTop: number): void {
		this.scrollableElement.updateState({ scrollTop });
	}