Outline/src/pages/measure/components/graph/ResultLayer.tsx

import { useEffect, useRef } from "react";
import { createWebSocket, sharedWsUrl } from "../../../../services/socket";

const wsClient = createWebSocket(sharedWsUrl);

const pointArr: { x: number; y: number }[] = [];

export default function ResultLayer(props: {
	width: number;
	height: number;
	leftPadding: number;
	rightPadding: number;
	topPadding: number;
	bottomPadding: number;
	columns: number;
	rows: number;
	visibility: 'hidden' | 'visible'; 
}) {
	console.log('props---', props)
	const xStartPx = props.leftPadding;
	const xEndPx = props.width - props.rightPadding;
	const xStepPx = (props.width - props.leftPadding - props.rightPadding) / props.columns;
	const yStartPx = props.topPadding;
	// const yEndPx = props.height - props.bottomPadding;
	const yStepPx = (props.height - props.topPadding - props.bottomPadding) / props.rows;

	const unitPx = xStepPx / 10;
	// const pointsPx = points.map(p => ({ x: p.x * unitPx, y: p.y * unitPx + 4 })); // 特意偏移

	const canvasRef = useRef<HTMLCanvasElement | null>(null);

	// const [rtPoints, setRtPoints] = useState<{ x: number; y: number }[]>([]);

	// const draw = useCallback(
	// 	(ctx: CanvasRenderingContext2D) => {
	// 		for (let idx = 0; idx < pointsPx.length; idx++) {
	// 			if (idx === 0) {
	// 				ctx.moveTo(pointsPx[idx].x, pointsPx[idx].y);
	// 			} else {
	// 				ctx.lineTo(pointsPx[idx].x, pointsPx[idx].y);
	// 			}
	// 		}
	// 		ctx.stroke();
	// 	},
	// 	[pointsPx, xEndPx, xStartPx, yStartPx, yStepPx]
	// );

	useEffect(() => {
		const subscription = wsClient.dataOb.subscribe(data => {
			let isRight = false;
			if(data.path === "/measurement-task/measurement-task"){

			}
			if (data.path === "/measurement-task/event") {
				const canvas = canvasRef.current;
				if (!canvas) return;

				const ctx = canvas.getContext("2d");
				if (!ctx) return;
				console.log('data.data---', data.data)
				//@ts-ignore
				if (data.data === "START_RECORD_LEFT") {
					// setRtPoints([]);
					pointArr.length = 0;
					ctx.resetTransform();
					ctx.clearRect(0, 0, canvas.width, canvas.height);
					setTimeout(() => {
						ctx.strokeStyle = "blue";
						const xOffset = (xEndPx - xStartPx) / 2;
						const yOffset = yStepPx * 2;
						ctx.translate(xStartPx + xOffset, yStartPx + yOffset);
						ctx.beginPath();
					}, 0);
					//@ts-ignore
				} else if (data.data === "START_RECORD_RIGHT") {
					// pointArr.length = 0;
					isRight = true;
				}
			} else if (data.path === "/measurement-task/point-report") {
				// console.log(data.data);
				// setRtPoints(rtPoints.concat([data.data]));
				if(isRight){
					pointArr.length = 0
				}
				//@ts-ignore
				pointArr.push(data.data);

				const canvas = canvasRef.current;
				if (!canvas) return;

				const ctx = canvas.getContext("2d");
				if (!ctx) return;

				const pointsPx = pointArr.map(p => ({ x: p.x * unitPx, y: p.y * unitPx }));

				for (let idx = 0; idx < pointsPx.length; idx++) {
					if (idx === 0) {
						ctx.moveTo(pointsPx[idx].x, pointsPx[idx].y+6);
					} else {
						ctx.lineTo(pointsPx[idx].x, pointsPx[idx].y+6);
					}
				}
				// ctx.stroke();
			}
		});
		wsClient.connect();
		return () => subscription.unsubscribe();
	}, [unitPx, xEndPx, xStartPx, yStartPx, yStepPx]);

	return (
		<div style={{visibility: props.visibility}}>
			<canvas ref={canvasRef} width={props.width} height={props.height}></canvas>
		</div>
	);
}