vodorod/parcer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: map coords for canvas

Browse Source
This commit is contained in:
Rohit
2025-03-14 12:39:09 +05:30
parent 7b715284bf
commit 592ab6bd33
1 changed files with 33 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
src/components/recorder/canvas.tsx
View File

@@ -6,6 +6,8 @@ import DatePicker from '../pickers/DatePicker';
import Dropdown from '../pickers/Dropdown';
import TimePicker from '../pickers/TimePicker';
import DateTimeLocalPicker from '../pickers/DateTimeLocalPicker';
import { VIEWPORT_H, VIEWPORT_W } from '../../constants/const';
import { coordinateMapper } from '../../helpers/coordinateMapper';
interface CreateRefCallback {
(ref: React.RefObject<HTMLCanvasElement>): void;
@@ -76,10 +78,18 @@ const Canvas = ({ width, height, onCreateRef }: CanvasProps) => {
getListRef.current = getList;
}, [getText, getList]);
useEffect(() => {
coordinateMapper.updateDimensions(VIEWPORT_W, VIEWPORT_H);
}, []);
useEffect(() => {
if (socket) {
socket.on('showDatePicker', (info: { coordinates: Coordinates, selector: string }) => {
setDatePickerInfo(info);
const canvasCoords = coordinateMapper.mapBrowserToCanvas(info.coordinates);
setDatePickerInfo({
...info,
coordinates: canvasCoords
});
});
socket.on('showDropdown', (info: {
@@ -92,15 +102,27 @@ const Canvas = ({ width, height, onCreateRef }: CanvasProps) => {
selected: boolean;
}>;
}) => {
setDropdownInfo(info);
const canvasCoords = coordinateMapper.mapBrowserToCanvas(info.coordinates);
setDropdownInfo({
...info,
coordinates: canvasCoords
});
});
socket.on('showTimePicker', (info: { coordinates: Coordinates, selector: string }) => {
setTimePickerInfo(info);
const canvasCoords = coordinateMapper.mapBrowserToCanvas(info.coordinates);
setTimePickerInfo({
...info,
coordinates: canvasCoords
});
});
socket.on('showDateTimePicker', (info: { coordinates: Coordinates, selector: string }) => {
setDateTimeLocalInfo(info);
const canvasCoords = coordinateMapper.mapBrowserToCanvas(info.coordinates);
setDateTimeLocalInfo({
...info,
coordinates: canvasCoords
});
});
return () => {
@@ -114,13 +136,14 @@ const Canvas = ({ width, height, onCreateRef }: CanvasProps) => {
const onMouseEvent = useCallback((event: MouseEvent) => {
if (socket && canvasRef.current) {
// Get the canvas bounding rectangle
const rect = canvasRef.current.getBoundingClientRect();
const clickCoordinates = {
x: event.clientX - rect.left, // Use relative x coordinate
y: event.clientY - rect.top, // Use relative y coordinate
};
const browserCoordinates = coordinateMapper.mapCanvasToBrowser(clickCoordinates);
switch (event.type) {
case 'mousedown':
if (getTextRef.current === true) {
@@ -128,7 +151,7 @@ const Canvas = ({ width, height, onCreateRef }: CanvasProps) => {
} else if (getListRef.current === true) {
console.log('Capturing List...');
} else {
socket.emit('input:mousedown', clickCoordinates);
socket.emit('input:mousedown', browserCoordinates);
}
notifyLastAction('click');
break;
@@ -146,7 +169,7 @@ const Canvas = ({ width, height, onCreateRef }: CanvasProps) => {
x: clickCoordinates.x,
y: clickCoordinates.y,
};
socket.emit('input:mousemove', clickCoordinates);
socket.emit('input:mousemove', browserCoordinates);
notifyLastAction('move');
}
break;
@@ -173,9 +196,11 @@ const Canvas = ({ width, height, onCreateRef }: CanvasProps) => {
const onKeyboardEvent = useCallback((event: KeyboardEvent) => {
if (socket) {
const browserCoordinates = coordinateMapper.mapCanvasToBrowser(lastMousePosition.current);
switch (event.type) {
case 'keydown':
socket.emit('input:keydown', { key: event.key, coordinates: lastMousePosition.current });
socket.emit('input:keydown', { key: event.key, coordinates: browserCoordinates });
notifyLastAction(`${event.key} pressed`);
break;
case 'keyup':