94 lines
2.9 KiB
TypeScript
94 lines
2.9 KiB
TypeScript
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(); |