feat: optimize mouse events and memoize canvas

src/components/recorder/canvas.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef } from 'react';
+import React, { memo, useCallback, useEffect, useRef } from 'react';
 import { useSocketStore } from '../../context/socket';
 import { useGlobalInfoStore } from "../../context/globalInfo";
 import { useActionContext } from '../../context/browserActions';
@@ -38,6 +38,9 @@ const Canvas = ({ width, height, onCreateRef }: CanvasProps) => {
     const getTextRef = useRef(getText);
     const getListRef = useRef(getList);
 
+    const MOUSE_MOVE_THROTTLE = 16; // ~60fps
+    const lastMouseMoveTime = useRef(0);
+
     const [datePickerInfo, setDatePickerInfo] = React.useState<{
         coordinates: Coordinates;
         selector: string;
@@ -134,29 +137,38 @@ const Canvas = ({ width, height, onCreateRef }: CanvasProps) => {
                     }
                     notifyLastAction('click');
                     break;
-                case 'mousemove':
+                case 'mousemove': {
-                    if (lastMousePosition.current.x !== clickCoordinates.x ||
+                    const now = performance.now();
-                        lastMousePosition.current.y !== clickCoordinates.y) {
+                    if (now - lastMouseMoveTime.current < MOUSE_MOVE_THROTTLE) {
+                        return; 
+                    }
+                    lastMouseMoveTime.current = now;
+                    
+                    const dx = Math.abs(lastMousePosition.current.x - clickCoordinates.x);
+                    const dy = Math.abs(lastMousePosition.current.y - clickCoordinates.y);
+                    if (dx > 1 || dy > 1) {
                         lastMousePosition.current = {
                             x: clickCoordinates.x,
                             y: clickCoordinates.y,
                         };
-                        socket.emit('input:mousemove', {
+                        socket.emit('input:mousemove', clickCoordinates);
-                            x: clickCoordinates.x,
-                            y: clickCoordinates.y,
-                        });
                         notifyLastAction('move');
                     }
                     break;
-                case 'wheel':
+                }
+                
+                // Optimize wheel events
+                case 'wheel': {
                     const wheelEvent = event as WheelEvent;
-                    const deltas = {
+                    const deltaX = Math.round(wheelEvent.deltaX / 10) * 10;
-                        deltaX: Math.round(wheelEvent.deltaX),
+                    const deltaY = Math.round(wheelEvent.deltaY / 10) * 10;
-                        deltaY: Math.round(wheelEvent.deltaY),
+                    
-                    };
+                    if (Math.abs(deltaX) > 5 || Math.abs(deltaY) > 5) {
-                    socket.emit('input:wheel', deltas);
+                        socket.emit('input:wheel', { deltaX, deltaY });
-                    notifyLastAction('scroll');
+                        notifyLastAction('scroll');
+                    }
                     break;
+                }
                 default:
                     console.log('Default mouseEvent registered');
                     return;
@@ -222,9 +234,14 @@ const Canvas = ({ width, height, onCreateRef }: CanvasProps) => {
             <canvas
                 tabIndex={0}
                 ref={canvasRef}
-                height={400}
+                height={height}
-                width={900}
+                width={width}
-                style={{ display: 'block' }}
+                style={{ 
+                    display: 'block',
+                    imageRendering: 'crisp-edges', 
+                    willChange: 'transform', 
+                    transform: 'translateZ(0)' 
+                }}
             />
             {datePickerInfo && (
                 <DatePicker
@@ -261,4 +278,4 @@ const Canvas = ({ width, height, onCreateRef }: CanvasProps) => {
 };
 
 
-export default Canvas;
+export default memo(Canvas);