Add set canvas element

CHANGELOG.md

@@ -7,6 +7,10 @@
 - Do not calculate disabled markers to the color normalization. 
 - More precise TS type for transform matrix in event handlers. 
 
+### Added
+
+- The canvas cahange options to the htmlcanvas plugin.
+
 ## [0.11.0] - 2024-05-23
 
 ### Fixed

src/apps/weblib/ts-api/plugins/htmlcanvas.ts

@@ -20,6 +20,7 @@ export interface HtmlCanvasApi extends PluginApi {
 	get element(): HTMLCanvasElement
 	/** Returns the actual canvas context */
 	get context(): CanvasRenderingContext2D
+	set element(element: HTMLCanvasElement)
 	clientToCanvas(clientPos: Geom.Point): Geom.Point
 	canvasToClient(renderPos: Geom.Point): Geom.Point
 }
@@ -29,9 +30,9 @@ export class HtmlCanvas implements Plugin, HtmlCanvasAlternative {
 	private _container?: HTMLElement
 	private _offscreenCanvas: HTMLCanvasElement
 	private _offscreenContext: CanvasRenderingContext2D
-	private _mainCanvas: HTMLCanvasElement
-	private _context: CanvasRenderingContext2D
-	private _resizeObserver: ResizeObserver
+	private _mainCanvas!: HTMLCanvasElement
+	private _context!: CanvasRenderingContext2D
+	private _resizeObserver!: ResizeObserver
 	private _resizeHandler: () => void
 	private _prevUpdateHash: string = ''
 	private _scaleFactor: number = 1
@@ -44,6 +45,7 @@ export class HtmlCanvas implements Plugin, HtmlCanvasAlternative {
 		return {
 			element: this.element,
 			context: this.context,
+			setElement: this._setElement.bind(this),
 			clientToCanvas: this._clientToCanvas.bind(this),
 			canvasToClient: this._canvasToClient.bind(this)
 		}
@@ -102,20 +104,30 @@ export class HtmlCanvas implements Plugin, HtmlCanvasAlternative {
 	}
 
 	constructor(options: CanvasOptions) {
-		this._mainCanvas = this._toCanvasElement(options.element)
 		this._offscreenCanvas = document.createElement<'canvas'>('canvas')
 		const offCtx = this._offscreenCanvas.getContext('2d')
 		if (!offCtx) throw Error('Cannot get rendering context of internal canvas')
 		this._offscreenContext = offCtx
+		this._resizeHandler = (): void => {
+			this._update(true)
+		}
+		this._setCanvas(options.element)
+		window.addEventListener('resize', this._resizeHandler)
+	}
+
+	private _setCanvas(element: HTMLElement): void {
+		this._mainCanvas = this._toCanvasElement(element)
+		this._prevUpdateHash = ''
 		const ctx = this._mainCanvas.getContext('2d')
 		if (!ctx) throw Error('Cannot get rendering context of canvas')
 		this._context = ctx
 		this._calcSize()
 		this._resizeObserver = this._createResizeObserverFor(this._mainCanvas)
-		this._resizeHandler = (): void => {
-			this._update(true)
-		}
-		window.addEventListener('resize', this._resizeHandler)
+	}
+
+	private _setElement(element: HTMLCanvasElement): void {
+		this.element = element
+
 	}
 
 	unregister(): void {
@@ -128,6 +140,11 @@ export class HtmlCanvas implements Plugin, HtmlCanvasAlternative {
 		return this._mainCanvas
 	}
 
+	set element(element: HTMLCanvasElement) {
+		this.unregister()
+		this._setCanvas(element)
+	}
+
 	get context(): CanvasRenderingContext2D {
 		return this._offscreenContext
 	}