feat(offscreen): adjust buffer sizes for complex scenes

devexperts · Dec 4, 2023 · 2220af4 · 2220af4
1 parent 22cd89e
commit 2220af4
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 9 deletions.
diff --git a/src/chart/bootstrap.ts b/src/chart/bootstrap.ts
@@ -199,6 +199,7 @@ export default class ChartBootstrap {
 				// can be read frequently, see {redrawBackgroundArea} function
 				willReadFrequently: true,
 				offscreen: config.offscreen,
+				offscreenBufferSize: 8000,
 			},
 		);
 		this.backgroundCanvasModel = backgroundCanvasModel;
@@ -209,7 +210,7 @@ export default class ChartBootstrap {
 			this.config.components.chart.type,
 			config,
 			this.canvasModels,
-			{ offscreen: config.offscreen },
+			{ offscreen: config.offscreen, offscreenBufferSize: 8000 },
 		);
 		this.mainCanvasModel = mainCanvasModel;
 		this.dynamicObjectsCanvasModel = createCanvasModel(
@@ -218,23 +219,23 @@ export default class ChartBootstrap {
 			config,
 			this.canvasModels,
 			elements.chartResizer,
-			{ offscreen: config.offscreen },
+			{ offscreen: config.offscreen, offscreenBufferSize: 20 * 100000 },
 		);
 		const crossToolCanvasModel = createCanvasModel(
 			eventBus,
 			elements.crossToolCanvas,
 			config,
 			this.canvasModels,
 			elements.chartResizer,
-			{ offscreen: config.offscreen },
+			{ offscreen: config.offscreen, offscreenBufferSize: 8000 },
 		);
 		const snapshotCanvasModel = createCanvasModel(
 			eventBus,
 			elements.snapshotCanvas,
 			config,
 			this.canvasModels,
 			elements.chartResizer,
-			{ offscreen: config.offscreen },
+			{ offscreen: config.offscreen, offscreenBufferSize: 21 * 100000 },
 		);
 		this.chartResizeHandler = chartResizeHandler;
 		chartResizeHandler.subscribeResize();
@@ -250,7 +251,7 @@ export default class ChartBootstrap {
 			config,
 			this.canvasModels,
 			elements.chartResizer,
-			{ offscreen: config.offscreen },
+			{ offscreen: config.offscreen, offscreenBufferSize: 32000 },
 		);
 		const canvasBoundsContainer = new CanvasBoundsContainer(
 			config,

diff --git a/src/chart/canvas/offscreen/canvas-offscreen-wrapper.ts b/src/chart/canvas/offscreen/canvas-offscreen-wrapper.ts
@@ -90,8 +90,8 @@ export class CanvasOffscreenContext2D implements CanvasRenderingContext2D {
 
 	private __font: string = '12px Arial';
 
-	constructor(public canvas: HTMLCanvasElement) {
-		this.buffer = new SharedArrayBuffer(8 * 100000);
+	constructor(public canvas: HTMLCanvasElement, bufferSize?: number) {
+		this.buffer = new SharedArrayBuffer(bufferSize ?? 10 * 100000);
 		this.commands = new Float64Array(this.buffer);
 		this.commit();
 	}

diff --git a/src/chart/model/canvas.model.ts b/src/chart/model/canvas.model.ts
@@ -18,7 +18,12 @@ export const MIN_SUPPORTED_CANVAS_SIZE = {
 	height: 20,
 };
 
-export type CanvasModelOptions = CanvasRenderingContext2DSettings & { offscreen?: boolean };
+export type CanvasModelOptions = CanvasRenderingContext2DSettings & {
+	offscreen?: boolean;
+	// size of SharedArrayBuffer in bytes
+	// if size is not enough, then the chart will crash on render
+	offscreenBufferSize?: number;
+};
 
 export class CanvasModel<T extends CanvasRenderingContext2D = CanvasRenderingContext2D> {
 	private readonly context: T;
@@ -232,7 +237,7 @@ export function createCanvasModel(
 }
 
 export const getCanvasContext = (canvas: HTMLCanvasElement, options?: CanvasModelOptions): CanvasRenderingContext2D => {
-	const ctx = options?.offscreen ? new CanvasOffscreenContext2D(canvas) : canvas.getContext('2d', options);
+	const ctx = options?.offscreen ? new CanvasOffscreenContext2D(canvas, options.offscreenBufferSize) : canvas.getContext('2d', options);
 	if (ctx === null) {
 		throw new Error("Couldn't get 2d context. Canvas is not supported.");
 	}

diff --git a/src/chart/model/hit-test-canvas.model.ts b/src/chart/model/hit-test-canvas.model.ts
@@ -55,6 +55,7 @@ export class HitTestCanvasModel extends CanvasModel {
 			willReadFrequently: true,
 			desynchronized: true,
 			offscreen: chartConfig.offscreen,
+			offscreenBufferSize: 15 * 1000000,
 		};
 		super(getCanvasContext(canvas, options), eventBus, canvas, canvasModels, resizer, options);
 		initCanvasWithConfig(this, chartConfig);