diff --git a/src/helpers/coordinateMapper.ts b/src/helpers/coordinateMapper.ts index c4a0b379..f53f89d5 100644 --- a/src/helpers/coordinateMapper.ts +++ b/src/helpers/coordinateMapper.ts @@ -8,8 +8,10 @@ export class CoordinateMapper { private browserWidth: number; private browserHeight: number; + private lastBrowserRect: { left: number, top: number, right: number, bottom: number } | null = null; + private lastCanvasRect: DOMRect | null = null; + constructor() { - // Use responsive dimensions instead of hardcoded values const dimensions = getResponsiveDimensions(); this.canvasWidth = dimensions.canvasWidth; this.canvasHeight = dimensions.canvasHeight; @@ -32,18 +34,36 @@ export class CoordinateMapper { } mapBrowserRectToCanvas(rect: DOMRect): DOMRect { + if (this.lastBrowserRect && + this.lastBrowserRect.left === rect.left && + this.lastBrowserRect.top === rect.top && + this.lastBrowserRect.right === rect.right && + this.lastBrowserRect.bottom === rect.bottom) { + return this.lastCanvasRect!; + } + const topLeft = this.mapBrowserToCanvas({ x: rect.left, y: rect.top }); const bottomRight = this.mapBrowserToCanvas({ x: rect.right, y: rect.bottom }); const width = bottomRight.x - topLeft.x; const height = bottomRight.y - topLeft.y; - return new DOMRect( + const result = new DOMRect( topLeft.x, topLeft.y, width, height ); + + this.lastBrowserRect = { + left: rect.left, + top: rect.top, + right: rect.right, + bottom: rect.bottom + }; + this.lastCanvasRect = result; + + return result; } mapCanvasRectToBrowser(rect: DOMRect): DOMRect { @@ -66,6 +86,9 @@ export class CoordinateMapper { if (canvasHeight) this.canvasHeight = canvasHeight; if (browserWidth) this.browserWidth = browserWidth; if (browserHeight) this.browserHeight = browserHeight; + + this.lastBrowserRect = null; + this.lastCanvasRect = null; } }