Merge pull request tradingview#1977 from tradingview/feature/include-top-layer-to-screenshot

add ability to include top layer to screenshot

Author: illetid

src/api/chart-api.ts

@@ -7,6 +7,7 @@ import { warn } from '../helpers/logger';
 import { clone, DeepPartial, isBoolean, merge } from '../helpers/strict-type-checks';
 
 import { ChartOptionsImpl, ChartOptionsInternal } from '../model/chart-model';
+import { CrosshairMode } from '../model/crosshair';
 import { DataUpdatesConsumer, isFulfilledData, SeriesDataItemTypeMap, WhitespaceData } from '../model/data-consumer';
 import { DataLayer, DataUpdateResponse, SeriesChanges } from '../model/data-layer';
 import { CustomData, ICustomSeriesPaneView } from '../model/icustom-series';
@@ -285,8 +286,29 @@ export class ChartApi<HorzScaleItem> implements IChartApiBase<HorzScaleItem>, Da
 		return this._chartWidget.options() as Readonly<ChartOptionsImpl<HorzScaleItem>>;
 	}
 
-	public takeScreenshot(): HTMLCanvasElement {
-		return this._chartWidget.takeScreenshot();
+	public takeScreenshot(addTopLayer: boolean = false, includeCrosshair: boolean = false): HTMLCanvasElement {
+		let crosshairMode: CrosshairMode | undefined;
+		let screenshotCanvas: HTMLCanvasElement;
+		try {
+			if (!includeCrosshair) {
+				crosshairMode = this._chartWidget.model().options().crosshair.mode;
+				this._chartWidget.applyOptions({
+					crosshair: {
+						mode: CrosshairMode.Hidden,
+					},
+				});
+			}
+			screenshotCanvas = this._chartWidget.takeScreenshot(addTopLayer);
+		} finally {
+			if (!includeCrosshair && crosshairMode !== undefined) {
+				this._chartWidget.model().applyOptions({
+					crosshair: {
+						mode: crosshairMode,
+					},
+				});
+			}
+		}
+		return screenshotCanvas;
 	}
 
 	public addPane(preserveEmptyPane: boolean = false): IPaneApi<HorzScaleItem> {

src/api/ichart-api.ts

@@ -272,9 +272,11 @@ export interface IChartApiBase<HorzScaleItem = Time> {
 	/**
 	 * Make a screenshot of the chart with all the elements excluding crosshair.
 	 *
+	 * @param addTopLayer - if true, the top layer and primitives will be included in the screenshot (default: false)
+	 * @param includeCrosshair - works only if addTopLayer is enabled. If true, the crosshair will be included in the screenshot (default: false)
 	 * @returns A canvas with the chart drawn on. Any `Canvas` methods like `toDataURL()` or `toBlob()` can be used to serialize the result.
 	 */
-	takeScreenshot(): HTMLCanvasElement;
+	takeScreenshot(addTopLayer?: boolean, includeCrosshair?: boolean): HTMLCanvasElement;
 
 	/**
 	 * Add a pane to the chart

src/gui/chart-widget.ts

@@ -262,7 +262,7 @@ export class ChartWidget<HorzScaleItem> implements IDestroyable, IChartWidgetBas
 		return this._crosshairMoved;
 	}
 
-	public takeScreenshot(): HTMLCanvasElement {
+	public takeScreenshot(addTopLayer: boolean = false): HTMLCanvasElement {
 		if (this._invalidateMask !== null) {
 			this._drawImpl(this._invalidateMask, performance.now());
 			this._invalidateMask = null;
@@ -274,7 +274,7 @@ export class ChartWidget<HorzScaleItem> implements IDestroyable, IChartWidgetBas
 		screenshotCanvas.height = screeshotBitmapSize.height;
 
 		const ctx = ensureNotNull(screenshotCanvas.getContext('2d'));
-		this._traverseLayout(ctx);
+		this._traverseLayout(ctx, addTopLayer);
 
 		return screenshotCanvas;
 	}
@@ -357,9 +357,10 @@ export class ChartWidget<HorzScaleItem> implements IDestroyable, IChartWidgetBas
 	 * draws the screenshot (if rendering context is passed) and returns the screenshot bitmap size
 	 *
 	 * @param ctx - if passed, used to draw the screenshot of widget
+	 * @param addTopLayer - if true, the top layer with crosshair and primitives will be drawn
 	 * @returns screenshot bitmap size
 	 */
-	private _traverseLayout(ctx: CanvasRenderingContext2D | null): Size {
+	private _traverseLayout(ctx: CanvasRenderingContext2D | null, addTopLayer?: boolean): Size {
 		let totalWidth = 0;
 		let totalHeight = 0;
 
@@ -372,7 +373,7 @@ export class ChartWidget<HorzScaleItem> implements IDestroyable, IChartWidgetBas
 				const priceAxisWidget = ensureNotNull(position === 'left' ? paneWidget.leftPriceAxisWidget() : paneWidget.rightPriceAxisWidget());
 				const bitmapSize = priceAxisWidget.getBitmapSize();
 				if (ctx !== null) {
-					priceAxisWidget.drawBitmap(ctx, targetX, targetY);
+					priceAxisWidget.drawBitmap(ctx, targetX, targetY, addTopLayer);
 				}
 				targetY += bitmapSize.height;
 				if (paneIndex < this._paneWidgets.length - 1) {
@@ -396,7 +397,7 @@ export class ChartWidget<HorzScaleItem> implements IDestroyable, IChartWidgetBas
 			const paneWidget = this._paneWidgets[paneIndex];
 			const bitmapSize = paneWidget.getBitmapSize();
 			if (ctx !== null) {
-				paneWidget.drawBitmap(ctx, totalWidth, totalHeight);
+				paneWidget.drawBitmap(ctx, totalWidth, totalHeight, addTopLayer);
 			}
 			totalHeight += bitmapSize.height;
 			if (paneIndex < this._paneWidgets.length - 1) {
@@ -434,7 +435,7 @@ export class ChartWidget<HorzScaleItem> implements IDestroyable, IChartWidgetBas
 					targetX = ensureNotNull(firstPane.leftPriceAxisWidget()).getBitmapSize().width;
 				}
 
-				this._timeAxisWidget.drawBitmap(ctx, targetX, totalHeight);
+				this._timeAxisWidget.drawBitmap(ctx, targetX, totalHeight, addTopLayer);
 				targetX += timeAxisBitmapSize.width;
 
 				if (this._isRightAxisVisible()) {

src/gui/pane-widget.ts

@@ -453,10 +453,17 @@ export class PaneWidget implements IDestroyable, MouseEventHandlers {
 		return this._canvasBinding.bitmapSize;
 	}
 
-	public drawBitmap(ctx: CanvasRenderingContext2D, x: number, y: number): void {
+	public drawBitmap(ctx: CanvasRenderingContext2D, x: number, y: number, addTopLayer?: boolean): void {
 		const bitmapSize = this.getBitmapSize();
 		if (bitmapSize.width > 0 && bitmapSize.height > 0) {
 			ctx.drawImage(this._canvasBinding.canvasElement, x, y);
+
+			if (addTopLayer) {
+				const topLayer = this._topCanvasBinding.canvasElement;
+				if (ctx !== null) {
+					ctx.drawImage(topLayer, x, y);
+				}
+			}
 		}
 	}
 

src/gui/price-axis-widget.ts

@@ -392,10 +392,15 @@ export class PriceAxisWidget implements IDestroyable {
 		return this._canvasBinding.bitmapSize;
 	}
 
-	public drawBitmap(ctx: CanvasRenderingContext2D, x: number, y: number): void {
+	public drawBitmap(ctx: CanvasRenderingContext2D, x: number, y: number, addTopLayer?: boolean): void {
 		const bitmapSize = this.getBitmapSize();
 		if (bitmapSize.width > 0 && bitmapSize.height > 0) {
 			ctx.drawImage(this._canvasBinding.canvasElement, x, y);
+
+			if (addTopLayer) {
+				const topLayer = this._topCanvasBinding.canvasElement;
+				ctx.drawImage(topLayer, x, y);
+			}
 		}
 	}
 

src/gui/time-axis-widget.ts

@@ -287,10 +287,15 @@ export class TimeAxisWidget<HorzScaleItem> implements MouseEventHandlers, IDestr
 		return this._canvasBinding.bitmapSize;
 	}
 
-	public drawBitmap(ctx: CanvasRenderingContext2D, x: number, y: number): void {
+	public drawBitmap(ctx: CanvasRenderingContext2D, x: number, y: number, addTopLayer?: boolean): void {
 		const bitmapSize = this.getBitmapSize();
 		if (bitmapSize.width > 0 && bitmapSize.height > 0) {
 			ctx.drawImage(this._canvasBinding.canvasElement, x, y);
+
+			if (addTopLayer) {
+				const topLayer = this._topCanvasBinding.canvasElement;
+				ctx.drawImage(topLayer, x, y);
+			}
 		}
 	}