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

feat: dont use getMappedCoordinates

Browse Source
This commit is contained in:
karishmas6
2024-10-18 16:48:26 +05:30
parent 08750972da
commit 752e3c318e
1 changed files with 18 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
src/components/atoms/canvas.tsx
View File

@@ -45,34 +45,35 @@ const Canvas = ({ width, height, onCreateRef }: CanvasProps) => {
}, [getText, getList]); }, [getText, getList]);
const onMouseEvent = useCallback((event: MouseEvent) => { const onMouseEvent = useCallback((event: MouseEvent) => {
if (socket) { if (socket && canvasRef.current) {
const coordinates = { // Get the canvas bounding rectangle
x: event.clientX, const rect = canvasRef.current.getBoundingClientRect();
y: event.clientY, const clickCoordinates = {
} x: event.clientX - rect.left, // Use relative x coordinate
y: event.clientY - rect.top, // Use relative y coordinate
};
switch (event.type) { switch (event.type) {
case 'mousedown': case 'mousedown':
const clickCoordinates = getMappedCoordinates(event, canvasRef.current, width, height);
if (getTextRef.current === true) { if (getTextRef.current === true) {
console.log('Capturing Text...'); console.log('Capturing Text...');
} else if (getListRef.current === true){ } else if (getListRef.current === true) {
console.log('Capturing List...'); console.log('Capturing List...');
}else { } else {
socket.emit('input:mousedown', clickCoordinates); socket.emit('input:mousedown', clickCoordinates);
} }
notifyLastAction('click'); notifyLastAction('click');
break; break;
case 'mousemove': case 'mousemove':
const coordinates = getMappedCoordinates(event, canvasRef.current, width, height); if (lastMousePosition.current.x !== clickCoordinates.x ||
if (lastMousePosition.current.x !== coordinates.x || lastMousePosition.current.y !== clickCoordinates.y) {
lastMousePosition.current.y !== coordinates.y) {
lastMousePosition.current = { lastMousePosition.current = {
x: coordinates.x, x: clickCoordinates.x,
y: coordinates.y, y: clickCoordinates.y,
}; };
socket.emit('input:mousemove', { socket.emit('input:mousemove', {
x: coordinates.x, x: clickCoordinates.x,
y: coordinates.y, y: clickCoordinates.y,
}); });
notifyLastAction('move'); notifyLastAction('move');
} }
@@ -140,8 +141,8 @@ const Canvas = ({ width, height, onCreateRef }: CanvasProps) => {
<canvas <canvas
tabIndex={0} tabIndex={0}
ref={canvasRef} ref={canvasRef}
height={720} height={500}
width={1280} width={900}
/> />
); );