149 lines
3.9 KiB
TypeScript
149 lines
3.9 KiB
TypeScript
import { FederatedMouseEvent, Graphics } from "pixi.js";
|
|
import {
|
|
BACKGROUND_COLOR,
|
|
PATH_COLOR,
|
|
STATION_RADIUS,
|
|
STATION_OUTLINE_WIDTH,
|
|
UP_SCALE,
|
|
} from "./Constants";
|
|
import { useTransform } from "./TransformContext";
|
|
import { useCallback, useEffect, useRef, useState } from "react";
|
|
import { StationData } from "./types";
|
|
import { useMapData } from "./MapDataContext";
|
|
import { coordinatesToLocal } from "./utils";
|
|
import { observer } from "mobx-react-lite";
|
|
import { languageStore } from "@stores";
|
|
|
|
interface StationProps {
|
|
station: StationData;
|
|
ruLabel: string | null;
|
|
}
|
|
|
|
export const Station = observer(
|
|
({ station, ruLabel }: Readonly<StationProps>) => {
|
|
const draw = useCallback((g: Graphics) => {
|
|
g.clear();
|
|
const coordinates = coordinatesToLocal(
|
|
station.latitude,
|
|
station.longitude
|
|
);
|
|
g.circle(
|
|
coordinates.x * UP_SCALE,
|
|
coordinates.y * UP_SCALE,
|
|
STATION_RADIUS
|
|
);
|
|
g.fill({ color: PATH_COLOR });
|
|
g.stroke({ color: BACKGROUND_COLOR, width: STATION_OUTLINE_WIDTH });
|
|
}, []);
|
|
|
|
return (
|
|
<pixiContainer>
|
|
<pixiGraphics draw={draw} />
|
|
<StationLabel station={station} ruLabel={ruLabel} />
|
|
</pixiContainer>
|
|
);
|
|
}
|
|
);
|
|
|
|
export const StationLabel = observer(
|
|
({ station, ruLabel }: Readonly<StationProps>) => {
|
|
const { language } = languageStore;
|
|
const { rotation, scale } = useTransform();
|
|
const { setStationOffset } = useMapData();
|
|
|
|
const [position, setPosition] = useState({
|
|
x: station.offset_x,
|
|
y: station.offset_y,
|
|
});
|
|
const [isDragging, setIsDragging] = useState(false);
|
|
const [startPosition, setStartPosition] = useState({ x: 0, y: 0 });
|
|
const [startMousePosition, setStartMousePosition] = useState({
|
|
x: 0,
|
|
y: 0,
|
|
});
|
|
|
|
if (!station) {
|
|
console.error("station is null");
|
|
return null;
|
|
}
|
|
|
|
const handlePointerDown = (e: FederatedMouseEvent) => {
|
|
setIsDragging(true);
|
|
setStartPosition({
|
|
x: position.x,
|
|
y: position.y,
|
|
});
|
|
setStartMousePosition({
|
|
x: e.globalX,
|
|
y: e.globalY,
|
|
});
|
|
|
|
e.stopPropagation();
|
|
};
|
|
const handlePointerMove = (e: FederatedMouseEvent) => {
|
|
if (!isDragging) return;
|
|
const dx = e.globalX - startMousePosition.x;
|
|
const dy = e.globalY - startMousePosition.y;
|
|
const newPosition = {
|
|
x: startPosition.x + dx,
|
|
y: startPosition.y + dy,
|
|
};
|
|
setPosition(newPosition);
|
|
setStationOffset(station.id, newPosition.x, newPosition.y);
|
|
e.stopPropagation();
|
|
};
|
|
|
|
const handlePointerUp = (e: FederatedMouseEvent) => {
|
|
setIsDragging(false);
|
|
e.stopPropagation();
|
|
};
|
|
const coordinates = coordinatesToLocal(station.latitude, station.longitude);
|
|
|
|
return (
|
|
<pixiContainer
|
|
eventMode="static"
|
|
interactive
|
|
onPointerDown={handlePointerDown}
|
|
onGlobalPointerMove={handlePointerMove}
|
|
onPointerUp={handlePointerUp}
|
|
onPointerUpOutside={handlePointerUp}
|
|
width={48}
|
|
height={48}
|
|
x={coordinates.x * UP_SCALE}
|
|
y={coordinates.y * UP_SCALE}
|
|
rotation={-rotation}
|
|
>
|
|
<pixiText
|
|
anchor={{ x: 0.5, y: 0.5 }}
|
|
text={station.name}
|
|
position={{
|
|
x: position.x / scale,
|
|
y: position.y / scale,
|
|
}}
|
|
style={{
|
|
fontSize: 26,
|
|
fontWeight: "bold",
|
|
fill: "#ffffff",
|
|
}}
|
|
/>
|
|
|
|
{ruLabel && (
|
|
<pixiText
|
|
anchor={{ x: 0.5, y: -1 }}
|
|
text={ruLabel}
|
|
position={{
|
|
x: position.x / scale,
|
|
y: position.y / scale,
|
|
}}
|
|
style={{
|
|
fontSize: 16,
|
|
fontWeight: "bold",
|
|
fill: "#CCCCCC",
|
|
}}
|
|
/>
|
|
)}
|
|
</pixiContainer>
|
|
);
|
|
}
|
|
);
|