chore: cleanup
This commit is contained in:
@@ -4,13 +4,11 @@ import { useGlobalInfoStore } from "../../context/globalInfo";
|
|||||||
import { useActionContext } from '../../context/browserActions';
|
import { useActionContext } from '../../context/browserActions';
|
||||||
import { FrontendPerformanceMonitor } from '../../../perf/performance';
|
import { FrontendPerformanceMonitor } from '../../../perf/performance';
|
||||||
|
|
||||||
// Lazy load components that aren't always needed
|
|
||||||
const DatePicker = React.lazy(() => import('./DatePicker'));
|
const DatePicker = React.lazy(() => import('./DatePicker'));
|
||||||
const Dropdown = React.lazy(() => import('./Dropdown'));
|
const Dropdown = React.lazy(() => import('./Dropdown'));
|
||||||
const TimePicker = React.lazy(() => import('./TimePicker'));
|
const TimePicker = React.lazy(() => import('./TimePicker'));
|
||||||
const DateTimeLocalPicker = React.lazy(() => import('./DateTimeLocalPicker'));
|
const DateTimeLocalPicker = React.lazy(() => import('./DateTimeLocalPicker'));
|
||||||
|
|
||||||
// High-performance RAF scheduler
|
|
||||||
class RAFScheduler {
|
class RAFScheduler {
|
||||||
private queue: Set<() => void> = new Set();
|
private queue: Set<() => void> = new Set();
|
||||||
private isProcessing: boolean = false;
|
private isProcessing: boolean = false;
|
||||||
@@ -56,7 +54,6 @@ class RAFScheduler {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Enhanced event debouncer with priority queue
|
|
||||||
class EventDebouncer {
|
class EventDebouncer {
|
||||||
private highPriorityQueue: Array<() => void> = [];
|
private highPriorityQueue: Array<() => void> = [];
|
||||||
private lowPriorityQueue: Array<() => void> = [];
|
private lowPriorityQueue: Array<() => void> = [];
|
||||||
@@ -150,19 +147,16 @@ interface CanvasProps {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const Canvas = React.memo(({ width, height, onCreateRef }: CanvasProps) => {
|
const Canvas = React.memo(({ width, height, onCreateRef }: CanvasProps) => {
|
||||||
// Core refs and state
|
|
||||||
const canvasRef = useRef<HTMLCanvasElement>(null);
|
const canvasRef = useRef<HTMLCanvasElement>(null);
|
||||||
const { socket } = useSocketStore();
|
const { socket } = useSocketStore();
|
||||||
const { setLastAction } = useGlobalInfoStore();
|
const { setLastAction } = useGlobalInfoStore();
|
||||||
const { getText, getList } = useActionContext();
|
const { getText, getList } = useActionContext();
|
||||||
|
|
||||||
// Performance optimization instances
|
|
||||||
const scheduler = useRef(new RAFScheduler());
|
const scheduler = useRef(new RAFScheduler());
|
||||||
const debouncer = useRef(new EventDebouncer(scheduler.current));
|
const debouncer = useRef(new EventDebouncer(scheduler.current));
|
||||||
const measurementCache = useRef(new MeasurementCache(50));
|
const measurementCache = useRef(new MeasurementCache(50));
|
||||||
const performanceMonitor = useRef(new FrontendPerformanceMonitor());
|
const performanceMonitor = useRef(new FrontendPerformanceMonitor());
|
||||||
|
|
||||||
// Consolidated refs
|
|
||||||
const refs = useRef({
|
const refs = useRef({
|
||||||
getText,
|
getText,
|
||||||
getList,
|
getList,
|
||||||
@@ -171,7 +165,6 @@ const Canvas = React.memo(({ width, height, onCreateRef }: CanvasProps) => {
|
|||||||
context: null as CanvasRenderingContext2D | null,
|
context: null as CanvasRenderingContext2D | null,
|
||||||
});
|
});
|
||||||
|
|
||||||
// Optimized state management
|
|
||||||
const [state, dispatch] = React.useReducer((state: any, action: any) => {
|
const [state, dispatch] = React.useReducer((state: any, action: any) => {
|
||||||
switch (action.type) {
|
switch (action.type) {
|
||||||
case 'BATCH_UPDATE':
|
case 'BATCH_UPDATE':
|
||||||
@@ -186,7 +179,6 @@ const Canvas = React.memo(({ width, height, onCreateRef }: CanvasProps) => {
|
|||||||
dateTimeLocalInfo: null
|
dateTimeLocalInfo: null
|
||||||
});
|
});
|
||||||
|
|
||||||
// Optimized coordinate calculation
|
|
||||||
const getEventCoordinates = useCallback((event: MouseEvent): { x: number; y: number } => {
|
const getEventCoordinates = useCallback((event: MouseEvent): { x: number; y: number } => {
|
||||||
if (!canvasRef.current) return { x: 0, y: 0 };
|
if (!canvasRef.current) return { x: 0, y: 0 };
|
||||||
|
|
||||||
@@ -202,7 +194,6 @@ const Canvas = React.memo(({ width, height, onCreateRef }: CanvasProps) => {
|
|||||||
};
|
};
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
// High-performance mouse handler
|
|
||||||
const handleMouseEvent = useCallback((event: MouseEvent) => {
|
const handleMouseEvent = useCallback((event: MouseEvent) => {
|
||||||
if (!socket || !canvasRef.current) return;
|
if (!socket || !canvasRef.current) return;
|
||||||
|
|
||||||
@@ -247,7 +238,6 @@ const Canvas = React.memo(({ width, height, onCreateRef }: CanvasProps) => {
|
|||||||
}
|
}
|
||||||
}, [socket, getEventCoordinates]);
|
}, [socket, getEventCoordinates]);
|
||||||
|
|
||||||
// Optimized keyboard handler
|
|
||||||
const handleKeyboardEvent = useCallback((event: KeyboardEvent) => {
|
const handleKeyboardEvent = useCallback((event: KeyboardEvent) => {
|
||||||
if (!socket) return;
|
if (!socket) return;
|
||||||
|
|
||||||
@@ -303,12 +293,11 @@ const Canvas = React.memo(({ width, height, onCreateRef }: CanvasProps) => {
|
|||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const intervalId = setInterval(() => {
|
const intervalId = setInterval(() => {
|
||||||
console.log('Performance Report:', performanceMonitor.current.getPerformanceReport());
|
console.log('Performance Report:', performanceMonitor.current.getPerformanceReport());
|
||||||
}, 20000); // Reduced frequency
|
}, 20000);
|
||||||
|
|
||||||
return () => clearInterval(intervalId);
|
return () => clearInterval(intervalId);
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
// Socket events
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!socket) return;
|
if (!socket) return;
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user