preview

src/pages/route-preview/TravelPath.tsx

@@ -0,0 +1,36 @@
+import { Graphics } from "pixi.js";
+import { useCallback } from "react";
+import { PATH_COLOR, PATH_WIDTH } from "./Constants";
+
+
+interface TravelPathProps {
+	points: {x: number, y: number}[];
+}
+
+export function TravelPath({
+	points
+}: Readonly<TravelPathProps>) {
+
+	const draw = useCallback((g: Graphics) => {
+		g.clear();
+		g.moveTo(points[0].x, points[0].y);
+		for (let i = 1; i < points.length - 1; i++) {
+			g.lineTo(points[i].x, points[i].y);
+		}
+		g.stroke({
+			color: PATH_COLOR,
+			width: PATH_WIDTH
+		});
+	}, [points]);
+
+	if(points.length === 0) {
+		console.error("points is empty");
+		return null;
+	}
+
+	return (
+		<pixiGraphics
+		draw={draw}
+		/>
+	);
+}