140 lines
3.2 KiB
TypeScript
140 lines
3.2 KiB
TypeScript
import {
|
|
ONE_PERCENT_OF_VIEWPORT_H,
|
|
ONE_PERCENT_OF_VIEWPORT_W,
|
|
} from "../constants/const";
|
|
import { Coordinates } from '../components/recorder/Canvas';
|
|
|
|
export const throttle = (callback: any, limit: number) => {
|
|
let wait = false;
|
|
return (...args: any[]) => {
|
|
if (!wait) {
|
|
callback(...args);
|
|
wait = true;
|
|
setTimeout(function () {
|
|
wait = false;
|
|
}, limit);
|
|
}
|
|
}
|
|
}
|
|
|
|
export const getMappedCoordinates = (
|
|
event: MouseEvent,
|
|
canvas: HTMLCanvasElement | null,
|
|
browserWidth: number,
|
|
browserHeight: number,
|
|
): Coordinates => {
|
|
const clientCoordinates = getCoordinates(event, canvas);
|
|
const mappedX = mapPixelFromSmallerToLarger(
|
|
browserWidth / 100,
|
|
ONE_PERCENT_OF_VIEWPORT_W,
|
|
clientCoordinates.x,
|
|
);
|
|
const mappedY = mapPixelFromSmallerToLarger(
|
|
browserHeight / 100,
|
|
ONE_PERCENT_OF_VIEWPORT_H,
|
|
clientCoordinates.y,
|
|
);
|
|
|
|
return {
|
|
x: mappedX,
|
|
y: mappedY
|
|
};
|
|
};
|
|
|
|
const getCoordinates = (event: MouseEvent, canvas: HTMLCanvasElement | null): Coordinates => {
|
|
if (!canvas) {
|
|
return { x: 0, y: 0 };
|
|
}
|
|
return {
|
|
x: event.pageX - canvas.offsetLeft,
|
|
y: event.pageY - canvas.offsetTop
|
|
};
|
|
};
|
|
|
|
export const mapRect = (
|
|
rect: DOMRect,
|
|
browserWidth: number,
|
|
browserHeight: number,
|
|
) => {
|
|
const mappedX = mapPixelFromSmallerToLarger(
|
|
browserWidth / 100,
|
|
ONE_PERCENT_OF_VIEWPORT_W,
|
|
rect.x,
|
|
);
|
|
const mappedLeft = mapPixelFromSmallerToLarger(
|
|
browserWidth / 100,
|
|
ONE_PERCENT_OF_VIEWPORT_W,
|
|
rect.left,
|
|
);
|
|
const mappedRight = mapPixelFromSmallerToLarger(
|
|
browserWidth / 100,
|
|
ONE_PERCENT_OF_VIEWPORT_W,
|
|
rect.right,
|
|
);
|
|
const mappedWidth = mapPixelFromSmallerToLarger(
|
|
browserWidth / 100,
|
|
ONE_PERCENT_OF_VIEWPORT_W,
|
|
rect.width,
|
|
);
|
|
const mappedY = mapPixelFromSmallerToLarger(
|
|
browserHeight / 100,
|
|
ONE_PERCENT_OF_VIEWPORT_H,
|
|
rect.y,
|
|
);
|
|
const mappedTop = mapPixelFromSmallerToLarger(
|
|
browserHeight / 100,
|
|
ONE_PERCENT_OF_VIEWPORT_H,
|
|
rect.top,
|
|
);
|
|
const mappedBottom = mapPixelFromSmallerToLarger(
|
|
browserHeight / 100,
|
|
ONE_PERCENT_OF_VIEWPORT_H,
|
|
rect.bottom,
|
|
);
|
|
const mappedHeight = mapPixelFromSmallerToLarger(
|
|
browserHeight / 100,
|
|
ONE_PERCENT_OF_VIEWPORT_H,
|
|
rect.height,
|
|
);
|
|
|
|
console.log('Mapped:', {
|
|
x: mappedX,
|
|
y: mappedY,
|
|
width: mappedWidth,
|
|
height: mappedHeight,
|
|
top: mappedTop,
|
|
right: mappedRight,
|
|
bottom: mappedBottom,
|
|
left: mappedLeft,
|
|
})
|
|
|
|
return {
|
|
x: mappedX,
|
|
y: mappedY,
|
|
width: mappedWidth,
|
|
height: mappedHeight,
|
|
top: mappedTop,
|
|
right: mappedRight,
|
|
bottom: mappedBottom,
|
|
left: mappedLeft,
|
|
};
|
|
};
|
|
|
|
const mapPixelFromSmallerToLarger = (
|
|
onePercentOfSmallerScreen: number,
|
|
onePercentOfLargerScreen: number,
|
|
pixel: number
|
|
): number => {
|
|
const xPercentOfScreen = pixel / onePercentOfSmallerScreen;
|
|
return xPercentOfScreen * onePercentOfLargerScreen;
|
|
};
|
|
|
|
const mapPixelFromLargerToSmaller = (
|
|
onePercentOfSmallerScreen: number,
|
|
onePercentOfLargerScreen: number,
|
|
pixel: number
|
|
): number => {
|
|
const xPercentOfScreen = pixel / onePercentOfLargerScreen;
|
|
return Math.round(xPercentOfScreen * onePercentOfSmallerScreen);
|
|
};
|