Merge pull request #1663 from tradingview/extract-watermark-into-plugin

Extract watermark into plugin

.size-limit.js

@@ -30,7 +30,7 @@ export default [
 		brotli: true,
 	},
 	{
-		name: 'Standalone-ESM',
+		name: 'ESM Standalone',
 		path: 'dist/lightweight-charts.standalone.production.mjs',
 		limit: '50.00 KB',
 		import: '*',
@@ -42,4 +42,20 @@ export default [
 		limit: '50.00 KB',
 		brotli: true,
 	},
+	{
+		name: 'Plugin: Text Watermark',
+		path: 'dist/lightweight-charts.production.mjs',
+		import: '{ TextWatermark }',
+		ignore: ['fancy-canvas'],
+		limit: '2.00 KB',
+		brotli: true,
+	},
+	{
+		name: 'Plugin: Image Watermark',
+		path: 'dist/lightweight-charts.production.mjs',
+		import: '{ ImageWatermark }',
+		ignore: ['fancy-canvas'],
+		limit: '2.00 KB',
+		brotli: true,
+	},
 ];

src/api/options/chart-options-defaults.ts

@@ -7,7 +7,6 @@ import { gridOptionsDefaults } from './grid-options-defaults';
 import { layoutOptionsDefaults } from './layout-options-defaults';
 import { priceScaleOptionsDefaults } from './price-scale-options-defaults';
 import { timeScaleOptionsDefaults } from './time-scale-options-defaults';
-import { watermarkOptionsDefaults } from './watermark-options-defaults';
 
 export function chartOptionsDefaults<HorzScaleItem>(): ChartOptionsInternal<HorzScaleItem> {
 	return {
@@ -29,7 +28,6 @@ export function chartOptionsDefaults<HorzScaleItem>(): ChartOptionsInternal<Horz
 			visible: true,
 		},
 		timeScale: timeScaleOptionsDefaults,
-		watermark: watermarkOptionsDefaults,
 		localization: {
 			locale: isRunningOnClientSide ? navigator.language : '',
 			dateFormat: 'dd MMM \'yy',

src/gui/pane-widget.ts

@@ -493,7 +493,6 @@ export class PaneWidget implements IDestroyable, MouseEventHandlers {
 				if (this._state) {
 					this._drawSources(target, sourceBottomPaneViews);
 					this._drawGrid(target);
-					this._drawWatermark(target);
 					this._drawSources(target, sourcePaneViews);
 					this._drawSources(target, sourceLabelPaneViews);
 				}
@@ -566,12 +565,6 @@ export class PaneWidget implements IDestroyable, MouseEventHandlers {
 		}
 	}
 
-	private _drawWatermark(target: CanvasRenderingTarget2D): void {
-		const source = this._model().watermarkSource();
-		this._drawSourceImpl(target, sourcePaneViews, drawBackground, source);
-		this._drawSourceImpl(target, sourcePaneViews, drawForeground, source);
-	}
-
 	private _drawCrosshair(target: CanvasRenderingTarget2D): void {
 		this._drawSourceImpl(target, sourcePaneViews, drawForeground, this._model().crosshairSource());
 	}

src/index.ts

@@ -21,6 +21,12 @@ export const customSeriesDefaultOptions: CustomSeriesOptions = {
 
 export { createChart, createChartEx, defaultHorzScaleBehavior } from './api/create-chart';
 
+/*
+	Plugins
+*/
+export { TextWatermark } from './plugins/text-watermark/primitive';
+export { ImageWatermark } from './plugins/image-watermark/primitive';
+
 /**
  * Returns the current version as a string. For example `'3.3.0'`.
  */

src/model/chart-model.ts

@@ -30,7 +30,6 @@ import { SeriesOptionsMap, SeriesType } from './series-options';
 import { LogicalRange, TimePointIndex, TimeScalePoint } from './time-data';
 import { HorzScaleOptions, ITimeScale, TimeScale } from './time-scale';
 import { TouchMouseEventData } from './touch-mouse-event-data';
-import { Watermark, WatermarkOptions } from './watermark';
 
 /**
  * Represents options for how the chart is scrolled by the mouse and touch gestures.
@@ -268,16 +267,6 @@ export interface ChartOptionsBase {
 	 */
 	autoSize: boolean;
 
-	/**
-	 * Watermark options.
-	 *
-	 * A watermark is a background label that includes a brief description of the drawn data. Any text can be added to it.
-	 *
-	 * Please make sure you enable it and set an appropriate font color and size to make your watermark visible in the background of the chart.
-	 * We recommend a semi-transparent color and a large font. Also note that watermark position can be aligned vertically and horizontally.
-	 */
-	watermark: WatermarkOptions;
-
 	/**
 	 * Layout options
 	 */
@@ -420,7 +409,6 @@ export interface IChartModelBase {
 	setHoveredSource(source: HoveredSource | null): void;
 
 	crosshairSource(): Crosshair;
-	watermarkSource(): Watermark;
 
 	startScrollPrice(pane: Pane, priceScale: PriceScale, x: number): void;
 	scrollPriceTo(pane: Pane, priceScale: PriceScale, x: number): void;
@@ -461,7 +449,6 @@ export class ChartModel<HorzScaleItem> implements IDestroyable, IChartModelBase
 	private readonly _panes: Pane[] = [];
 	private readonly _crosshair: Crosshair;
 	private readonly _magnet: Magnet;
-	private readonly _watermark: Watermark;
 
 	private _serieses: Series<SeriesType>[] = [];
 
@@ -486,7 +473,6 @@ export class ChartModel<HorzScaleItem> implements IDestroyable, IChartModelBase
 		this._timeScale = new TimeScale(this, options.timeScale, this._options.localization, horzScaleBehavior);
 		this._crosshair = new Crosshair(this, options.crosshair);
 		this._magnet = new Magnet(options.crosshair);
-		this._watermark = new Watermark(this, options.watermark);
 
 		this._getOrCreatePane(0);
 		this._panes[0].setStretchFactor(DEFAULT_STRETCH_FACTOR * 2);
@@ -604,10 +590,6 @@ export class ChartModel<HorzScaleItem> implements IDestroyable, IChartModelBase
 		return this._panes;
 	}
 
-	public watermarkSource(): Watermark {
-		return this._watermark;
-	}
-
 	public crosshairSource(): Crosshair {
 		return this._crosshair;
 	}
@@ -887,7 +869,6 @@ export class ChartModel<HorzScaleItem> implements IDestroyable, IChartModelBase
 	}
 
 	public recalculateAllPanes(): void {
-		this._watermark.updateAllViews();
 		this._panes.forEach((p: Pane) => p.recalculate());
 		this.updateCrosshair();
 	}

src/plugins/image-watermark/options.ts

@@ -0,0 +1,33 @@
+export interface ImageWatermarkOptions {
+	/**
+	 * Maximum width for the image watermark.
+	 *
+	 * @defaultValue undefined
+	 */
+	maxWidth?: number;
+	/**
+	 * Maximum height for the image watermark.
+	 *
+	 * @defaultValue undefined
+	 */
+	maxHeight?: number;
+	/**
+	 * Padding to maintain around the image watermark relative
+	 * to the chart pane edges.
+	 *
+	 * @defaultValue 0
+	 */
+	padding: number;
+	/**
+	 * The alpha (opacity) for the image watermark. Where `1` is fully
+	 * opaque (visible) and `0` is fully transparent.
+	 *
+	 * @defaultValue 1
+	 */
+	alpha: number;
+}
+
+export const imageWatermarkOptionsDefaults: ImageWatermarkOptions = {
+	alpha: 1,
+	padding: 0,
+};

src/plugins/image-watermark/pane-renderer.ts

@@ -0,0 +1,43 @@
+import {
+	CanvasRenderingTarget2D,
+	MediaCoordinatesRenderingScope,
+} from 'fancy-canvas';
+
+import { IPrimitivePaneRenderer } from '../../model/ipane-primitive';
+
+import { ImageWatermarkOptions } from './options';
+
+export interface Placement {
+	x: number;
+	y: number;
+	height: number;
+	width: number;
+}
+
+export interface ImageWatermarkRendererOptions extends ImageWatermarkOptions {
+	placement: Placement | null;
+	imgElement: HTMLImageElement | null;
+}
+
+export class ImageWatermarkRenderer implements IPrimitivePaneRenderer {
+	private _data: ImageWatermarkRendererOptions;
+
+	public constructor(data: ImageWatermarkRendererOptions) {
+		this._data = data;
+	}
+
+	public draw(target: CanvasRenderingTarget2D): void {
+		target.useMediaCoordinateSpace((scope: MediaCoordinatesRenderingScope) => {
+			const ctx = scope.context;
+			const pos = this._data.placement;
+			if (!pos) {
+				return;
+			}
+			if (!this._data.imgElement) {
+				throw new Error(`Image element missing.`);
+			}
+			ctx.globalAlpha = this._data.alpha ?? 1;
+			ctx.drawImage(this._data.imgElement, pos.x, pos.y, pos.width, pos.height);
+		});
+	}
+}