feat: offscreen poc

package.json

@@ -89,6 +89,7 @@
   },
   "dependencies": {
     "color": "^4.2.3",
+    "comlink": "4.4.1",
     "date-fns": "^2.30.0",
     "rxjs": "^7.5.7"
   },

src/chart/bootstrap.ts

@@ -59,6 +59,7 @@ import { clearerSafe } from './utils/function.utils';
 import { merge } from './utils/merge.utils';
 import { DeepPartial } from './utils/object.utils';
 import { HitTestComponent } from './components/hit-test/hit-test.component';
+import { isOffscreenWorkerAvailable } from './canvas/offscreen/init-offscreen';
 
 export type FitType = 'studies' | 'orders' | 'positions';
 
@@ -190,38 +191,70 @@ export default class ChartBootstrap {
 			this.canvasModels,
 			config,
 		);
-		this.chartResizeHandler = chartResizeHandler;
-		chartResizeHandler.subscribeResize();
-		this.components.push(chartResizeHandler.unsubscribeAnimationUpdate.bind(chartResizeHandler));
-		const drawingManager = new DrawingManager(eventBus, chartResizeHandler);
-		this.drawingManager = drawingManager;
+
+		const offscreenEnabled = isOffscreenWorkerAvailable && config.experimental.offscreen.enabled;
+
+		const backgroundCanvasModel = createCanvasModel(
+			eventBus,
+			elements.backgroundCanvas,
+			config,
+			this.canvasModels,
+			elements.chartResizer,
+			{
+				offscreen: offscreenEnabled,
+				offscreenBufferSize: config.experimental.offscreen.bufferSizes.backgroundCanvas,
+			},
+		);
+		this.backgroundCanvasModel = backgroundCanvasModel;
 		const mainCanvasModel = createMainCanvasModel(
 			eventBus,
 			elements.mainCanvas,
 			elements.chartResizer,
 			this.config.components.chart.type,
-			this.config,
-			drawingManager,
+			config,
 			this.canvasModels,
+			{ offscreen: offscreenEnabled, offscreenBufferSize: config.experimental.offscreen.bufferSizes.mainCanvas },
 		);
 		this.mainCanvasModel = mainCanvasModel;
 		this.dynamicObjectsCanvasModel = createCanvasModel(
 			eventBus,
 			elements.dynamicObjectsCanvas,
 			config,
-			drawingManager,
 			this.canvasModels,
 			elements.chartResizer,
+			{ offscreen: offscreenEnabled, offscreenBufferSize: config.experimental.offscreen.bufferSizes.dynamicObjectsCanvas },
+		);
+		const crossToolCanvasModel = createCanvasModel(
+			eventBus,
+			elements.crossToolCanvas,
+			config,
+			this.canvasModels,
+			elements.chartResizer,
+			{ offscreen: offscreenEnabled, offscreenBufferSize: config.experimental.offscreen.bufferSizes.crossToolCanvas },
 		);
+		const snapshotCanvasModel = createCanvasModel(
+			eventBus,
+			elements.snapshotCanvas,
+			config,
+			this.canvasModels,
+			elements.chartResizer,
+			{ offscreen: offscreenEnabled, offscreenBufferSize: config.experimental.offscreen.bufferSizes.snapshotCanvas },
+		);
+		this.chartResizeHandler = chartResizeHandler;
+		chartResizeHandler.subscribeResize();
+		this.components.push(chartResizeHandler.unsubscribeAnimationUpdate.bind(chartResizeHandler));
+		const drawingManager = new DrawingManager(config, eventBus, chartResizeHandler, this.canvasModels);
+		this.drawingManager = drawingManager;
+
 		const dataSeriesCanvasClearDrawer = new ClearCanvasDrawer(this.dynamicObjectsCanvasModel);
 		drawingManager.addDrawer(dataSeriesCanvasClearDrawer, 'SERIES_CLEAR');
 		const yAxisLabelsCanvasModel = createCanvasModel(
 			eventBus,
 			elements.yAxisLabelsCanvas,
 			config,
-			drawingManager,
 			this.canvasModels,
 			elements.chartResizer,
+			{ offscreen: offscreenEnabled, offscreenBufferSize: config.experimental.offscreen.bufferSizes.yAxisLabelsCanvas },
 		);
 		const canvasBoundsContainer = new CanvasBoundsContainer(
 			config,
@@ -246,7 +279,6 @@ export default class ChartBootstrap {
 			elements.hitTestCanvas,
 			canvasInputListener,
 			canvasBoundsContainer,
-			drawingManager,
 			config,
 			this.canvasModels,
 			elements.chartResizer,
@@ -266,20 +298,6 @@ export default class ChartBootstrap {
 		this.scaleModel = scaleModel;
 		//#endregion
 
-		const backgroundCanvasModel = createCanvasModel(
-			eventBus,
-			elements.backgroundCanvas,
-			config,
-			drawingManager,
-			this.canvasModels,
-			elements.chartResizer,
-			{
-				// can be read frequently, see {redrawBackgroundArea} function
-				willReadFrequently: true,
-			},
-		);
-		this.backgroundCanvasModel = backgroundCanvasModel;
-
 		this.cursorHandler = new CursorHandler(
 			elements.canvasArea,
 			canvasInputListener,
@@ -409,14 +427,6 @@ export default class ChartBootstrap {
 			drawingManager,
 		);
 		this.chartComponents.push(this.watermarkComponent);
-		const crossToolCanvasModel = createCanvasModel(
-			eventBus,
-			elements.crossToolCanvas,
-			config,
-			drawingManager,
-			this.canvasModels,
-			elements.chartResizer,
-		);
 		this.highlightsComponent = new HighlightsComponent(
 			eventBus,
 			config,
@@ -521,14 +531,6 @@ export default class ChartBootstrap {
 
 		this.chartComponents.push(this.crossToolComponent);
 		// Snapshot component
-		const snapshotCanvasModel = createCanvasModel(
-			eventBus,
-			elements.snapshotCanvas,
-			config,
-			drawingManager,
-			this.canvasModels,
-			elements.chartResizer,
-		);
 		const snapshotComponent = new SnapshotComponent(this.elements, snapshotCanvasModel);
 		this.snapshotComponent = snapshotComponent;
 		this.chartComponents.push(snapshotComponent);

src/chart/canvas/canvas-bounds-container.ts

@@ -120,7 +120,7 @@ export class CanvasBoundsContainer {
 			this.updateCanvasOnPageLocation(calculatedBCR);
 			this.recalculateBounds();
 		});
-		this.yAxisBoundsContainer = new YAxisBoundsContainer(this.config, this.canvasModel);
+		this.yAxisBoundsContainer = new YAxisBoundsContainer(this.config);
 	}
 
 	public updateYAxisWidths() {
@@ -438,7 +438,7 @@ export class CanvasBoundsContainer {
 	getXAxisHeight() {
 		if (!this.xAxisHeight) {
 			const font = this.config.components.xAxis.fontSize + 'px ' + this.config.components.xAxis.fontFamily;
-			const fontHeight = calculateSymbolHeight(font, this.canvasModel.ctx);
+			const fontHeight = calculateSymbolHeight(font);
 			this.xAxisHeight =
 				fontHeight +
 				(this.config.components.xAxis.padding.top ?? 0) +

src/chart/canvas/cursor.handler.ts

@@ -43,8 +43,8 @@ export class CursorHandler extends ChartBaseElement {
 		this.canvasInputListener
 			.observeMouseMoveNoDrag()
 			.pipe(throttleTime(100, animationFrameScheduler, { trailing: true }))
-			.subscribe(point => {
-				const cursorFromHT = this.hitTestCanvasModel.resolveCursor(point);
+			.subscribe(async point => {
+				const cursorFromHT = await this.hitTestCanvasModel.resolveCursor(point);
 				if (cursorFromHT !== undefined) {
 					this.updateCursor(cursorFromHT);
 					return;

src/chart/canvas/offscreen/canvas-ctx.mapper.js

@@ -0,0 +1,90 @@
+// #region canvas commands encodings - see commands mappings to methods below
+export const FONT = 0;
+export const WIDTH = 1;
+export const HEIGHT = 2;
+export const FILL_STYLE = 3;
+export const STROKE_STYLE = 4;
+export const LINE_WIDTH = 5;
+export const LINE_CAP = 6;
+export const SAVE = 7;
+export const RESTORE = 8;
+export const MEASURE_TEXT = 9;
+export const CLEAR_RECT = 10;
+export const FILL_RECT = 11;
+export const STROKE_TEXT = 12;
+export const SET_LINE_DASH = 13;
+export const FILL_TEXT = 14;
+export const RECT = 15;
+export const CLIP = 16;
+export const QUADRATIC_CURVE_TO = 17;
+export const BEZIER_CURVE_TO = 18;
+export const BEGIN_PATH = 19;
+export const MOVE_TO = 20;
+export const LINE_TO = 21;
+export const STROKE = 22;
+export const FILL = 23;
+export const CLOSE_PATH = 24;
+export const STROKE_RECT = 25;
+export const SCALE = 26;
+export const NOP = 27;
+export const ARC = 28;
+// custom method
+export const SET_LINE_DASH_FLAT = 29;
+// custom method
+export const SET_GRADIENT_FILL_STYLE = 30;
+// custom method
+export const REDRAW_BACKGROUND_AREA = 31;
+export const TRANSLATE = 32;
+export const TEXT_BASELINE = 33;
+export const TEXT_ALIGN = 34;
+export const ROTATE = 35;
+export const LINE_JOIN = 36;
+export const DIRECTION = 37;
+export const FONT_KERNING = 38;
+
+// Special command which indicates the end of canvas commands inside the buffer
+export const END_OF_FILE = 0xdead;
+// #endregion
+
+// Map from command number to canvas context method name
+export const num2Ctx = [
+	'font',
+	'width',
+	'height',
+	'fillStyle',
+	'strokeStyle',
+	'lineWidth',
+	'lineCap',
+	'save',
+	'restore',
+	'measureText',
+	'clearRect',
+	'fillRect',
+	'strokeText',
+	'setLineDash',
+	'fillText',
+	'rect',
+	'clip',
+	'quadraticCurveTo',
+	'bezierCurveTo',
+	'beginPath',
+	'moveTo',
+	'lineTo',
+	'stroke',
+	'fill',
+	'closePath',
+	'strokeRect',
+	'scale',
+	'nop',
+	'arc',
+	'setLineDashFlat',
+	'setGradientFillStyle',
+	'redrawBackgroundArea',
+	'translate',
+	'textBaseline',
+	'textAlign',
+	'rotate',
+	'lineJoin',
+	'direction',
+	'fontKerning',
+];