diff --git a/CHANGELOG.md b/CHANGELOG.md index 244d610e6..003187198 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,7 @@ - Do not calculate disabled markers to the color normalization. - More precise TS type for transform matrix in event handlers. +- Add missing canvas change function in htmlcanvas plugin. - On split charts the first range was not part of the separation calculation. - When the first marker was disabled it was calculated as an enabled marker on the XY normalization. diff --git a/src/apps/weblib/ts-api/plugins/htmlcanvas.ts b/src/apps/weblib/ts-api/plugins/htmlcanvas.ts index 7159d6d64..8086c1ee8 100644 --- a/src/apps/weblib/ts-api/plugins/htmlcanvas.ts +++ b/src/apps/weblib/ts-api/plugins/htmlcanvas.ts @@ -18,6 +18,8 @@ export type Event = Events.Event & { export interface HtmlCanvasApi extends PluginApi { /** Returns the underlying canvas element. */ get element(): HTMLCanvasElement + /** Update the underlying canvas element. */ + set element(element: HTMLCanvasElement) /** Returns the actual canvas context */ get context(): CanvasRenderingContext2D clientToCanvas(clientPos: Geom.Point): Geom.Point @@ -29,9 +31,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 @@ -41,8 +43,15 @@ export class HtmlCanvas implements Plugin, HtmlCanvasAlternative { meta = { name: 'htmlCanvas' } get api(): HtmlCanvasApi { + // eslint-disable-next-line @typescript-eslint/no-this-alias + const self = this return { - element: this.element, + get element(): HTMLCanvasElement { + return self._mainCanvas + }, + set element(newCanvasElement: HTMLCanvasElement) { + self._setCanvas(newCanvasElement) + }, context: this.context, clientToCanvas: this._clientToCanvas.bind(this), canvasToClient: this._canvasToClient.bind(this) @@ -102,20 +111,25 @@ 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) } unregister(): void { @@ -128,6 +142,10 @@ export class HtmlCanvas implements Plugin, HtmlCanvasAlternative { return this._mainCanvas } + set element(element: HTMLCanvasElement) { + this._setCanvas(element) + } + get context(): CanvasRenderingContext2D { return this._offscreenContext }