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

import { useCallback, useEffect, useRef, useState } from "react";
import points from "../../../../utils/measure.json";
import { createWebSocket, sharedWsUrl } from "../../../../services/socket";
const wsClient = createWebSocket(sharedWsUrl);
console.log(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'; 
}) {
	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 => {
			if (data.path === "/measurement-task/get-task-state") {
				const canvas = canvasRef.current;
				if (!canvas) return;

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

				if ('event' in data.data && data.data.event === "START_RECORD_SIG") {
					// 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);
				} else if ('event' in data.data && data.data.event === "END_RECORD_SIG") {
					//
				}
			} else if (data.path === "/measurement-task/profile-record-ctrl-sig") {
				// console.log(data.data);
				// setRtPoints(rtPoints.concat([data.data]));
				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();
	}, [rtPoints, unitPx, xEndPx, xStartPx, yStartPx, yStepPx]);

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