TypeScript overviewZoneManager.OverviewZoneManager类代码示例

	constructor(canvasLeftOffset: number, cssClassName: string, scrollHeight: number, lineHeight: number, canUseTranslate3d: boolean, minimumHeight: number, maximumHeight: number, getVerticalOffsetForLine: (lineNumber: number) => number) {
		this._canvasLeftOffset = canvasLeftOffset;

		this._domNode = createFastDomNode(document.createElement('canvas'));

		this._domNode.setClassName(cssClassName);
		this._domNode.setPosition('absolute');

		this._lanesCount = 3;

		this._canUseTranslate3d = canUseTranslate3d;
		this._background = null;

		this._zoneManager = new OverviewZoneManager(getVerticalOffsetForLine);
		this._zoneManager.setMinimumHeight(minimumHeight);
		this._zoneManager.setMaximumHeight(maximumHeight);
		this._zoneManager.setUseDarkColor(false);
		this._zoneManager.setDOMWidth(0);
		this._zoneManager.setDOMHeight(0);
		this._zoneManager.setOuterHeight(scrollHeight);
		this._zoneManager.setLineHeight(lineHeight);

		this._zoomListener = browser.onDidChangeZoomLevel(() => {
			this._zoneManager.setPixelRatio(browser.getPixelRatio());
			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(true);
		});
		this._zoneManager.setPixelRatio(browser.getPixelRatio());
	}

	test('pixel ratio 1, dom height 300', () => {
		const LINE_COUNT = 50;
		const LINE_HEIGHT = 20;
		let manager = new OverviewZoneManager((lineNumber) => LINE_HEIGHT * lineNumber);
		manager.setDOMWidth(30);
		manager.setDOMHeight(300);
		manager.setOuterHeight(LINE_COUNT * LINE_HEIGHT);
		manager.setLineHeight(LINE_HEIGHT);
		manager.setPixelRatio(1);

		manager.setZones([
			new OverviewRulerZone(1, 1, '1'),
			new OverviewRulerZone(10, 10, '2'),
			new OverviewRulerZone(30, 31, '3'),
			new OverviewRulerZone(50, 50, '4'),
		]);

		// one line = 6, cap is at 6
		assert.deepEqual(manager.resolveColorZones(), [
			new ColorZone(6, 12, 1), //
			new ColorZone(60, 66, 2), // 60 -> 66
			new ColorZone(180, 192, 3), // 180 -> 192
			new ColorZone(294, 300, 4), // 294 -> 300
		]);
	});

	constructor(
		canvasLeftOffset: number, cssClassName: string, scrollHeight: number, lineHeight: number,
		pixelRatio: number, minimumHeight: number, maximumHeight: number,
		getVerticalOffsetForLine: (lineNumber: number) => number
	) {
		this._canvasLeftOffset = canvasLeftOffset;

		this._domNode = createFastDomNode(document.createElement('canvas'));

		this._domNode.setClassName(cssClassName);
		this._domNode.setPosition('absolute');
		this._domNode.setLayerHinting(true);

		this._lanesCount = 3;

		this._background = null;

		this._zoneManager = new OverviewZoneManager(getVerticalOffsetForLine);
		this._zoneManager.setMinimumHeight(minimumHeight);
		this._zoneManager.setMaximumHeight(maximumHeight);
		this._zoneManager.setThemeType(LIGHT);
		this._zoneManager.setDOMWidth(0);
		this._zoneManager.setDOMHeight(0);
		this._zoneManager.setOuterHeight(scrollHeight);
		this._zoneManager.setLineHeight(lineHeight);

		this._zoneManager.setPixelRatio(pixelRatio);
	}

	public render(forceRender: boolean): boolean {
		if (this._zoneManager.getOuterHeight() === 0) {
			return false;
		}

		const width = this._zoneManager.getCanvasWidth();
		const height = this._zoneManager.getCanvasHeight();

		let colorZones = this._zoneManager.resolveColorZones();
		let id2Color = this._zoneManager.getId2Color();

		let ctx = this._domNode.domNode.getContext('2d');
		if (this._background === null) {
			ctx.clearRect(0, 0, width, height);
		} else {
			ctx.fillStyle = this._background.toRGBHex();
			ctx.fillRect(0, 0, width, height);
		}

		if (colorZones.length > 0) {
			let remainingWidth = width - this._canvasLeftOffset;

			if (this._lanesCount >= 3) {
				this._renderThreeLanes(ctx, colorZones, id2Color, remainingWidth);
			} else if (this._lanesCount === 2) {
				this._renderTwoLanes(ctx, colorZones, id2Color, remainingWidth);
			} else if (this._lanesCount === 1) {
				this._renderOneLane(ctx, colorZones, id2Color, remainingWidth);
			}
		}

		return true;
	}

		this._zoomListener = browser.onDidChangeZoomLevel(() => {
			this._zoneManager.setPixelRatio(browser.getPixelRatio());
			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(true);
		});

	public setPixelRatio(pixelRatio: number, render: boolean): void {
		this._zoneManager.setPixelRatio(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();
		if (render) {
			this.render(true);
		}
	}

	public setThemeType(themeType: ThemeType, render: boolean): void {
		this._zoneManager.setThemeType(themeType);

		if (render) {
			this.render(true);
		}
	}

	public setUseDarkColor(useDarkColor: boolean, render: boolean): void {
		this._zoneManager.setUseDarkColor(useDarkColor);

		if (render) {
			this.render(true);
		}
	}

	public onScrollChanged(e: viewEvents.ViewScrollChangedEvent): boolean {
		if (e.scrollHeightChanged) {
			this._zoneManager.setOuterHeight(e.scrollHeight);
			this._render();
		}
		return true;
	}