fix(temp): revert to old canvas

src/components/atoms/canvas.tsx

@@ -1,147 +1,21 @@
-import React, { useCallback, useEffect, useRef, useMemo, Suspense } from 'react';
+import React, { useCallback, useEffect, useRef } from 'react';
 import { useSocketStore } from '../../context/socket';
+import { getMappedCoordinates } from "../../helpers/inputHelpers";
 import { useGlobalInfoStore } from "../../context/globalInfo";
 import { useActionContext } from '../../context/browserActions';
-const DatePicker = React.lazy(() => import('./DatePicker'));
+import DatePicker from './DatePicker';
-const Dropdown = React.lazy(() => import('./Dropdown'));
+import Dropdown from './Dropdown';
-const TimePicker = React.lazy(() => import('./TimePicker'));
+import TimePicker from './TimePicker';
-const DateTimeLocalPicker = React.lazy(() => import('./DateTimeLocalPicker'));
+import DateTimeLocalPicker from './DateTimeLocalPicker';
 
-class RAFScheduler {
+interface CreateRefCallback {
-    private queue: Set<() => void> = new Set();
+    (ref: React.RefObject<HTMLCanvasElement>): void;
-    private isProcessing: boolean = false;
-    private frameId: number | null = null;
-
-    schedule(callback: () => void): void {
-        this.queue.add(callback);
-        if (!this.isProcessing) {
-            this.process();
-        }
-    }
-
-    private process = (): void => {
-        this.isProcessing = true;
-        this.frameId = requestAnimationFrame(() => {
-            const callbacks = Array.from(this.queue);
-            this.queue.clear();
-
-            callbacks.forEach(callback => {
-                try {
-                    callback();
-                } catch (error) {
-                    console.error('RAF Scheduler error:', error);
-                }
-            });
-
-            this.isProcessing = false;
-            this.frameId = null;
-
-            if (this.queue.size > 0) {
-                this.process();
-            }
-        });
-    }
-
-    clear(): void {
-        this.queue.clear();
-        if (this.frameId !== null) {
-            cancelAnimationFrame(this.frameId);
-            this.frameId = null;
-        }
-        this.isProcessing = false;
-    }
-}
-
-class EventDebouncer {
-    private highPriorityQueue: Array<() => void> = [];
-    private lowPriorityQueue: Array<() => void> = [];
-    private processing: boolean = false;
-    private scheduler: RAFScheduler;
-
-    constructor(scheduler: RAFScheduler) {
-        this.scheduler = scheduler;
-    }
-
-    add(callback: () => void, highPriority: boolean = false): void {
-        if (highPriority) {
-            this.highPriorityQueue.push(callback);
-        } else {
-            this.lowPriorityQueue.push(callback);
-        }
-
-        if (!this.processing) {
-            this.process();
-        }
-    }
-
-    private process(): void {
-        this.processing = true;
-        this.scheduler.schedule(() => {
-            while (this.highPriorityQueue.length > 0) {
-                const callback = this.highPriorityQueue.shift();
-                callback?.();
-            }
-
-            if (this.lowPriorityQueue.length > 0) {
-                const callback = this.lowPriorityQueue.shift();
-                callback?.();
-
-                if (this.lowPriorityQueue.length > 0) {
-                    this.process();
-                }
-            }
-
-            this.processing = false;
-        });
-    }
-
-    clear(): void {
-        this.highPriorityQueue = [];
-        this.lowPriorityQueue = [];
-        this.processing = false;
-    }
-}
-
-// Optimized measurement cache with LRU
-class MeasurementCache {
-    private cache: Map<HTMLElement, DOMRect>;
-    private maxSize: number;
-
-    constructor(maxSize: number = 100) {
-        this.cache = new Map();
-        this.maxSize = maxSize;
-    }
-
-    get(element: HTMLElement): DOMRect | undefined {
-        const cached = this.cache.get(element);
-        if (cached) {
-            // Refresh the entry
-            this.cache.delete(element);
-            this.cache.set(element, cached);
-        }
-        return cached;
-    }
-
-    set(element: HTMLElement, rect: DOMRect): void {
-        if (this.cache.size >= this.maxSize) {
-            // Remove oldest entry
-            const firstKey = this.cache.keys().next().value;
-            if (firstKey !== undefined) {
-                this.cache.delete(firstKey);
-            }
-        }
-        this.cache.set(element, rect);
-    }
-
-    clear(): void {
-        this.cache.clear();
-    }
 }
 
 interface CanvasProps {
     width: number;
     height: number;
-    onCreateRef: (ref: React.RefObject<HTMLCanvasElement>) => void;
+    onCreateRef: CreateRefCallback;
 }
 
 /**
@@ -152,229 +26,225 @@ export interface Coordinates {
     y: number;
 };
 
-const Canvas = React.memo(({ width, height, onCreateRef }: CanvasProps) => {
+const Canvas = ({ width, height, onCreateRef }: CanvasProps) => {
+
     const canvasRef = useRef<HTMLCanvasElement>(null);
     const { socket } = useSocketStore();
     const { setLastAction, lastAction } = useGlobalInfoStore();
     const { getText, getList } = useActionContext();
+    const getTextRef = useRef(getText);
+    const getListRef = useRef(getList);
 
-    const scheduler = useRef(new RAFScheduler());
+    const [datePickerInfo, setDatePickerInfo] = React.useState<{
-    const debouncer = useRef(new EventDebouncer(scheduler.current));
+        coordinates: Coordinates;
-    const measurementCache = useRef(new MeasurementCache(50));
+        selector: string;
-    //const performanceMonitor = useRef(new FrontendPerformanceMonitor());
+    } | null>(null);
 
-    const refs = useRef({
+    const [dropdownInfo, setDropdownInfo] = React.useState<{
-        getText,
+        coordinates: Coordinates;
-        getList,
+        selector: string;
-        lastMousePosition: { x: 0, y: 0 },
+        options: Array<{
-        lastFrameTime: 0,
+            value: string;
-        context: null as CanvasRenderingContext2D | null,
+            text: string;
-    });
+            disabled: boolean;
+            selected: boolean;
+        }>;
+    } | null>(null);
 
-    const [state, dispatch] = React.useReducer((state: any, action: any) => {
+    const [timePickerInfo, setTimePickerInfo] = React.useState<{
-        switch (action.type) {
+        coordinates: Coordinates;
-            case 'BATCH_UPDATE':
+        selector: string;
-                return { ...state, ...action.payload };
+    } | null>(null);
-            default:
+
-                return state;
+    const [dateTimeLocalInfo, setDateTimeLocalInfo] = React.useState<{
+        coordinates: Coordinates;
+        selector: string;
+    } | null>(null);
+
+    const notifyLastAction = (action: string) => {
+        if (lastAction !== action) {
+            setLastAction(action);
         }
-    }, {
-        datePickerInfo: null,
-        dropdownInfo: null,
-        timePickerInfo: null,
-        dateTimeLocalInfo: null
-    });
-
-    const getEventCoordinates = useCallback((event: MouseEvent): { x: number; y: number } => {
-        if (!canvasRef.current) return { x: 0, y: 0 };
-
-        let rect = measurementCache.current.get(canvasRef.current);
-        if (!rect) {
-            rect = canvasRef.current.getBoundingClientRect();
-            measurementCache.current.set(canvasRef.current, rect);
-        }
-
-        return {
-            x: event.clientX - rect.left,
-            y: event.clientY - rect.top
     };
-    }, []);
 
-    const handleMouseEvent = useCallback((event: MouseEvent) => {
+    const lastMousePosition = useRef<Coordinates>({ x: 0, y: 0 });
-        if (!socket || !canvasRef.current) return;
 
-        //performanceMonitor.current.measureEventLatency(event);
+    useEffect(() => {
-        const coordinates = getEventCoordinates(event);
+        getTextRef.current = getText;
+        getListRef.current = getList;
+    }, [getText, getList]);
+
+    useEffect(() => {
+        if (socket) {
+            socket.on('showDatePicker', (info: {coordinates: Coordinates, selector: string}) => {
+                setDatePickerInfo(info);
+            });
+
+            socket.on('showDropdown', (info: {
+                coordinates: Coordinates,
+                selector: string,
+                options: Array<{
+                    value: string;
+                    text: string;
+                    disabled: boolean;
+                    selected: boolean;
+                }>;
+            }) => {
+                setDropdownInfo(info);
+            });
+
+            socket.on('showTimePicker', (info: {coordinates: Coordinates, selector: string}) => {
+                setTimePickerInfo(info);
+            });
+
+            socket.on('showDateTimePicker', (info: {coordinates: Coordinates, selector: string}) => {
+                setDateTimeLocalInfo(info);
+            });
+
+            return () => {
+                socket.off('showDatePicker');
+                socket.off('showDropdown');
+                socket.off('showTimePicker');
+                socket.off('showDateTimePicker');
+            };
+        }
+    }, [socket]);
+
+    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
+            };
 
             switch (event.type) {
                 case 'mousedown':
-                debouncer.current.add(() => {
+                    if (getTextRef.current === true) {
-                    if (refs.current.getText) {
                         console.log('Capturing Text...');
-                    } else if (refs.current.getList) {
+                    } else if (getListRef.current === true) {
                         console.log('Capturing List...');
                     } else {
-                        socket.emit('input:mousedown', coordinates);
+                        socket.emit('input:mousedown', clickCoordinates);
                     }
-                    setLastAction('click');
+                    notifyLastAction('click');
-                }, true); // High priority
                     break;
-
                 case 'mousemove':
-                if (refs.current.lastMousePosition.x !== coordinates.x ||
+                    if (lastMousePosition.current.x !== clickCoordinates.x ||
-                    refs.current.lastMousePosition.y !== coordinates.y) {
+                        lastMousePosition.current.y !== clickCoordinates.y) {
-                    debouncer.current.add(() => {
+                        lastMousePosition.current = {
-                        refs.current.lastMousePosition = coordinates;
+                            x: clickCoordinates.x,
-                        socket.emit('input:mousemove', coordinates);
+                            y: clickCoordinates.y,
-                        setLastAction('move');
+                        };
+                        socket.emit('input:mousemove', {
+                            x: clickCoordinates.x,
+                            y: clickCoordinates.y,
                         });
+                        notifyLastAction('move');
                     }
                     break;
-
                 case 'wheel':
                     const wheelEvent = event as WheelEvent;
-                debouncer.current.add(() => {
+                    const deltas = {
-                    socket.emit('input:wheel', {
                         deltaX: Math.round(wheelEvent.deltaX),
-                        deltaY: Math.round(wheelEvent.deltaY)
+                        deltaY: Math.round(wheelEvent.deltaY),
-                    });
+                    };
-                    setLastAction('scroll');
+                    socket.emit('input:wheel', deltas);
-                });
+                    notifyLastAction('scroll');
                     break;
+                default:
+                    console.log('Default mouseEvent registered');
+                    return;
             }
-    }, [socket, getEventCoordinates]);
+        }
+    }, [socket]);
 
-    const handleKeyboardEvent = useCallback((event: KeyboardEvent) => {
+    const onKeyboardEvent = useCallback((event: KeyboardEvent) => {
-        if (!socket) return;
+        if (socket) {
-
-        debouncer.current.add(() => {
             switch (event.type) {
                 case 'keydown':
-                    socket.emit('input:keydown', {
+                    socket.emit('input:keydown', { key: event.key, coordinates: lastMousePosition.current });
-                        key: event.key,
+                    notifyLastAction(`${event.key} pressed`);
-                        coordinates: refs.current.lastMousePosition
-                    });
-                    setLastAction(`${event.key} pressed`);
                     break;
                 case 'keyup':
                     socket.emit('input:keyup', event.key);
                     break;
+                default:
+                    console.log('Default keyEvent registered');
+                    return;
+            }
         }
-        }, event.type === 'keydown'); // High priority for keydown
     }, [socket]);
 
-    // Setup and cleanup
+
     useEffect(() => {
-        if (!canvasRef.current) return;
+        if (canvasRef.current) {
-
-        const canvas = canvasRef.current;
-        refs.current.context = canvas.getContext('2d', {
-            alpha: false,
-            desynchronized: true
-        });
-
             onCreateRef(canvasRef);
-
+            canvasRef.current.addEventListener('mousedown', onMouseEvent);
-        const options = { passive: true };
+            canvasRef.current.addEventListener('mousemove', onMouseEvent);
-        canvas.addEventListener('mousedown', handleMouseEvent, options);
+            canvasRef.current.addEventListener('wheel', onMouseEvent, { passive: true });
-        canvas.addEventListener('mousemove', handleMouseEvent, options);
+            canvasRef.current.addEventListener('keydown', onKeyboardEvent);
-        canvas.addEventListener('wheel', handleMouseEvent, options);
+            canvasRef.current.addEventListener('keyup', onKeyboardEvent);
-        canvas.addEventListener('keydown', handleKeyboardEvent, options);
-        canvas.addEventListener('keyup', handleKeyboardEvent, options);
 
             return () => {
-            canvas.removeEventListener('mousedown', handleMouseEvent);
+                if (canvasRef.current) {
-            canvas.removeEventListener('mousemove', handleMouseEvent);
+                    canvasRef.current.removeEventListener('mousedown', onMouseEvent);
-            canvas.removeEventListener('wheel', handleMouseEvent);
+                    canvasRef.current.removeEventListener('mousemove', onMouseEvent);
-            canvas.removeEventListener('keydown', handleKeyboardEvent);
+                    canvasRef.current.removeEventListener('wheel', onMouseEvent);
-            canvas.removeEventListener('keyup', handleKeyboardEvent);
+                    canvasRef.current.removeEventListener('keydown', onKeyboardEvent);
+                    canvasRef.current.removeEventListener('keyup', onKeyboardEvent);
+                }
 
-            scheduler.current.clear();
-            debouncer.current.clear();
-            measurementCache.current.clear();
             };
-    }, [handleMouseEvent, handleKeyboardEvent, onCreateRef]);
+        } else {
+            console.log('Canvas not initialized');
+        }
 
-    // Performance monitoring
+    }, [onMouseEvent]);
-    // useEffect(() => {
-    //     const intervalId = setInterval(() => {
-    //         console.log('Performance Report:', performanceMonitor.current.getPerformanceReport());
-    //     }, 20000);
-
-    //     return () => clearInterval(intervalId);
-    // }, []);
-
-    useEffect(() => {
-        if (!socket) return;
-
-        const handlers = {
-            showDatePicker: (info: any) => dispatch({ type: 'BATCH_UPDATE', payload: { datePickerInfo: info } }),
-            showDropdown: (info: any) => dispatch({ type: 'BATCH_UPDATE', payload: { dropdownInfo: info } }),
-            showTimePicker: (info: any) => dispatch({ type: 'BATCH_UPDATE', payload: { timePickerInfo: info } }),
-            showDateTimePicker: (info: any) => dispatch({ type: 'BATCH_UPDATE', payload: { dateTimeLocalInfo: info } })
-        };
-
-        Object.entries(handlers).forEach(([event, handler]) => socket.on(event, handler));
-        return () => {
-            Object.keys(handlers).forEach(event => socket.off(event));
-        };
-    }, [socket]);
-
-    const memoizedDimensions = useMemo(() => ({
-        width: width || 900,
-        height: height || 400
-    }), [width, height]);
 
     return (
-        <div className="relative bg-white rounded-b-md overflow-hidden">
+        <div style={{ borderRadius: '0px 0px 5px 5px', overflow: 'hidden', backgroundColor: 'white' }}>
             <canvas
                 tabIndex={0}
                 ref={canvasRef}
-                height={memoizedDimensions.height}
+                height={400}
-                width={memoizedDimensions.width}
+                width={900}
-                className="block"
+                style={{ display: 'block' }}
             />
-            <Suspense fallback={null}>
+            {datePickerInfo && (
-                {state.datePickerInfo && (
                 <DatePicker
-                        coordinates={state.datePickerInfo.coordinates}
+                    coordinates={datePickerInfo.coordinates}
-                        selector={state.datePickerInfo.selector}
+                    selector={datePickerInfo.selector}
-                        onClose={() => dispatch({
+                    onClose={() => setDatePickerInfo(null)}
-                            type: 'BATCH_UPDATE',
-                            payload: { datePickerInfo: null }
-                        })}
                 />
             )}
-                {state.dropdownInfo && (
+            {dropdownInfo && (
                 <Dropdown
-                        coordinates={state.dropdownInfo.coordinates}
+                    coordinates={dropdownInfo.coordinates}
-                        selector={state.dropdownInfo.selector}
+                    selector={dropdownInfo.selector}
-                        options={state.dropdownInfo.options}
+                    options={dropdownInfo.options}
-                        onClose={() => dispatch({
+                    onClose={() => setDropdownInfo(null)}
-                            type: 'BATCH_UPDATE',
-                            payload: { dropdownInfo: null }
-                        })}
                 />
             )}
-                {state.timePickerInfo && (
+            {timePickerInfo && (
                 <TimePicker
-                        coordinates={state.timePickerInfo.coordinates}
+                    coordinates={timePickerInfo.coordinates}
-                        selector={state.timePickerInfo.selector}
+                    selector={timePickerInfo.selector}
-                        onClose={() => dispatch({ type: 'SET_TIME_PICKER', payload: null })}
+                    onClose={() => setTimePickerInfo(null)}
                 />
             )}
-                {state.dateTimeLocalInfo && (
+            {dateTimeLocalInfo && (
                 <DateTimeLocalPicker
-                        coordinates={state.dateTimeLocalInfo.coordinates}
+                    coordinates={dateTimeLocalInfo.coordinates}
-                        selector={state.dateTimeLocalInfo.selector}
+                    selector={dateTimeLocalInfo.selector}
-                        onClose={() => dispatch({ type: 'SET_DATETIME_PICKER', payload: null })}
+                    onClose={() => setDateTimeLocalInfo(null)}
                 />
             )}
-            </Suspense>
         </div>
     );
-});
 
-Canvas.displayName = 'Canvas';
+};
+
 
 export default Canvas;