extract watermark into TextWatermark primitive 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,12 @@ 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,
+	},
 ];

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

@@ -490,7 +490,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);
 				}
@@ -563,12 +562,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,11 @@ export const customSeriesDefaultOptions: CustomSeriesOptions = {
 
 export { createChart, createChartEx, defaultHorzScaleBehavior } from './api/create-chart';
 
+/*
+	Plugins
+*/
+export { TextWatermark } from './plugins/text-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/text-watermark/options.ts

@@ -0,0 +1,93 @@
+import { defaultFontFamily } from '../../helpers/make-font';
+
+import { HorzAlign, VertAlign } from '../types';
+
+export interface TextWatermarkOptions {
+	/**
+	 * Display the watermark.
+	 *
+	 * @defaultValue `true`
+	 */
+	visible: boolean;
+
+	/**
+	 * Horizontal alignment inside the chart area.
+	 *
+	 * @defaultValue `'center'`
+	 */
+	horzAlign: HorzAlign;
+
+	/**
+	 * Vertical alignment inside the chart area.
+	 *
+	 * @defaultValue `'center'`
+	 */
+	vertAlign: VertAlign;
+
+	/**
+	 * Text to be displayed within the watermark. Each item
+	 * in the array is treated as new line.
+	 *
+	 * @defaultValue `[]`
+	 */
+	lines: TextWatermarkLineOptions[];
+}
+
+export interface TextWatermarkLineOptions {
+	/**
+	 * Watermark color.
+	 *
+	 * @defaultValue `'rgba(0, 0, 0, 0.5)'`
+	 */
+
+	color: string;
+	/**
+	 * Text of the watermark. Word wrapping is not supported.
+	 *
+	 * @defaultValue `''`
+	 */
+	text: string;
+
+	/**
+	 * Font size in pixels.
+	 *
+	 * @defaultValue `48`
+	 */
+	fontSize: number;
+
+	/**
+	 * Line height in pixels.
+	 *
+	 * @defaultValue `1.2 * fontSize`
+	 */
+	lineHeight?: number;
+
+	/**
+	 * Font family.
+	 *
+	 * @defaultValue `-apple-system, BlinkMacSystemFont, 'Trebuchet MS', Roboto, Ubuntu, sans-serif`
+	 */
+	fontFamily: string;
+
+	/**
+	 * Font style.
+	 *
+	 * @defaultValue `''`
+	 */
+	fontStyle: string;
+}
+
+export const textWatermarkOptionsDefaults: TextWatermarkOptions = {
+	visible: true,
+	horzAlign: 'center',
+	vertAlign: 'center',
+	lines: [],
+};
+
+export const textWatermarkLineOptionsDefaults: TextWatermarkLineOptions = {
+	color: 'rgba(0, 0, 0, 0.5)',
+	fontSize: 48,
+	fontFamily: defaultFontFamily,
+	fontStyle: '',
+	text: '',
+};