39 lines
850 B
TypeScript
39 lines
850 B
TypeScript
import { Graphics } from "pixi.js";
|
|
import { useCallback } from "react";
|
|
import { PATH_COLOR, PATH_WIDTH } from "./Constants";
|
|
import { coordinatesToLocal } from "./utils";
|
|
|
|
|
|
interface TravelPathProps {
|
|
points: {x: number, y: number}[];
|
|
}
|
|
|
|
export function TravelPath({
|
|
points
|
|
}: Readonly<TravelPathProps>) {
|
|
|
|
const draw = useCallback((g: Graphics) => {
|
|
g.clear();
|
|
const coordStart = coordinatesToLocal(points[0].x, points[0].y);
|
|
g.moveTo(coordStart.x, coordStart.y);
|
|
for (let i = 1; i < points.length - 1; i++) {
|
|
const coordinates = coordinatesToLocal(points[i].x, points[i].y);
|
|
g.lineTo(coordinates.x, coordinates.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}
|
|
/>
|
|
);
|
|
} |