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

wip: performance

Browse Source
This commit is contained in:
amhsirak
2025-03-01 20:24:57 +05:30
parent a5d8ad54c1
commit b17397d0c8
1 changed files with 15 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -6,6 +6,7 @@ import DatePicker from '../pickers/DatePicker';
import Dropdown from '../pickers/Dropdown'; import Dropdown from '../pickers/Dropdown';
import TimePicker from '../pickers/TimePicker'; import TimePicker from '../pickers/TimePicker';
import DateTimeLocalPicker from '../pickers/DateTimeLocalPicker'; import DateTimeLocalPicker from '../pickers/DateTimeLocalPicker';
import { FrontendPerformanceMonitor } from '../../../perf/performance';
interface CreateRefCallback { interface CreateRefCallback {
(ref: React.RefObject<HTMLCanvasElement>): void; (ref: React.RefObject<HTMLCanvasElement>): void;
@@ -27,6 +28,9 @@ export interface Coordinates {
const Canvas = ({ width, height, onCreateRef }: CanvasProps) => { const Canvas = ({ width, height, onCreateRef }: CanvasProps) => {
const performanceMonitor = useRef(new FrontendPerformanceMonitor());
console.log('Frontend Performance Report:', performanceMonitor.current.getPerformanceReport());
const canvasRef = useRef<HTMLCanvasElement>(null); const canvasRef = useRef<HTMLCanvasElement>(null);
const { socket } = useSocketStore(); const { socket } = useSocketStore();
const { setLastAction, lastAction } = useGlobalInfoStore(); const { setLastAction, lastAction } = useGlobalInfoStore();
@@ -110,6 +114,7 @@ const Canvas = ({ width, height, onCreateRef }: CanvasProps) => {
}, [socket]); }, [socket]);
const onMouseEvent = useCallback((event: MouseEvent) => { const onMouseEvent = useCallback((event: MouseEvent) => {
performanceMonitor.current.measureEventLatency(event);
if (socket && canvasRef.current) { if (socket && canvasRef.current) {
// Get the canvas bounding rectangle // Get the canvas bounding rectangle
const rect = canvasRef.current.getBoundingClientRect(); const rect = canvasRef.current.getBoundingClientRect();
@@ -159,6 +164,16 @@ const Canvas = ({ width, height, onCreateRef }: CanvasProps) => {
} }
}, [socket]); }, [socket]);
// performance logging
useEffect(() => {
const intervalId = setInterval(() => {
const report = performanceMonitor.current.getPerformanceReport();
console.log('Frontend Performance Report:', report);
}, 5000);
return () => clearInterval(intervalId);
}, []);
const onKeyboardEvent = useCallback((event: KeyboardEvent) => { const onKeyboardEvent = useCallback((event: KeyboardEvent) => {
if (socket) { if (socket) {
switch (event.type) { switch (event.type) {