feat: add replayer func client side

legacy/src/coordinateMapper.ts

@@ -0,0 +1,94 @@
+import { BROWSER_DEFAULT_HEIGHT, BROWSER_DEFAULT_WIDTH } from "../constants/const";
+import { getResponsiveDimensions } from "./dimensionUtils";
+
+export class CoordinateMapper {
+  private canvasWidth: number;
+  private canvasHeight: number;
+  private browserWidth: number;
+  private browserHeight: number;
+  
+  private lastBrowserRect: { left: number, top: number, right: number, bottom: number } | null = null;
+  private lastCanvasRect: DOMRect | null = null;
+  
+  constructor() {
+    const dimensions = getResponsiveDimensions();
+    this.canvasWidth = dimensions.canvasWidth;
+    this.canvasHeight = dimensions.canvasHeight;
+    this.browserWidth = BROWSER_DEFAULT_WIDTH;
+    this.browserHeight = BROWSER_DEFAULT_HEIGHT;
+  }
+  
+  mapCanvasToBrowser(coord: { x: number, y: number }): { x: number, y: number } {
+    return {
+      x: (coord.x / this.canvasWidth) * this.browserWidth,
+      y: (coord.y / this.canvasHeight) * this.browserHeight
+    };
+  }
+  
+  mapBrowserToCanvas(coord: { x: number, y: number }): { x: number, y: number } {
+    return {
+      x: (coord.x / this.browserWidth) * this.canvasWidth,
+      y: (coord.y / this.browserHeight) * this.canvasHeight
+    };
+  }
+  
+  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;
+    
+    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 {
+    const topLeft = this.mapCanvasToBrowser({ x: rect.left, y: rect.top });
+    const bottomRight = this.mapCanvasToBrowser({ x: rect.right, y: rect.bottom });
+    
+    const width = bottomRight.x - topLeft.x;
+    const height = bottomRight.y - topLeft.y;
+    
+    return new DOMRect(
+      topLeft.x,
+      topLeft.y,
+      width,
+      height
+    );
+  }
+  
+  updateDimensions(canvasWidth?: number, canvasHeight?: number, browserWidth?: number, browserHeight?: number) {
+    if (canvasWidth) this.canvasWidth = canvasWidth;
+    if (canvasHeight) this.canvasHeight = canvasHeight;
+    if (browserWidth) this.browserWidth = browserWidth;
+    if (browserHeight) this.browserHeight = browserHeight;
+    
+    this.lastBrowserRect = null;
+    this.lastCanvasRect = null;
+  }
+}
+
+export const coordinateMapper = new CoordinateMapper();