47 lines
1.2 KiB
TypeScript
47 lines
1.2 KiB
TypeScript
import maplibregl from "maplibre-gl";
|
|
import { Geometry } from "@/lib/useEditorState";
|
|
|
|
type ModeGetter = () => "idle" | "draw" | "select" | "add-point";
|
|
|
|
export function initPoint(
|
|
map: maplibregl.Map,
|
|
getMode: ModeGetter,
|
|
onComplete: (geometry: Geometry) => void
|
|
) {
|
|
/**
|
|
* Add a new point when in add-point mode.
|
|
*/
|
|
function onClick(e: maplibregl.MapLayerMouseEvent) {
|
|
if (getMode() !== "add-point") return;
|
|
|
|
const geometry: Geometry = {
|
|
type: "Point",
|
|
coordinates: [e.lngLat.lng, e.lngLat.lat],
|
|
};
|
|
|
|
onComplete?.(geometry);
|
|
}
|
|
|
|
function onMove() {
|
|
const canvas = map.getCanvas();
|
|
if (getMode() === "add-point") {
|
|
canvas.style.cursor = "crosshair";
|
|
return;
|
|
}
|
|
if (canvas.style.cursor === "crosshair") {
|
|
canvas.style.cursor = "";
|
|
}
|
|
}
|
|
|
|
map.on("click", onClick);
|
|
map.on("mousemove", onMove);
|
|
|
|
return () => {
|
|
map.off("click", onClick);
|
|
map.off("mousemove", onMove);
|
|
if (map.getCanvas().style.cursor === "crosshair") {
|
|
map.getCanvas().style.cursor = "";
|
|
}
|
|
};
|
|
}
|