131 lines
3.9 KiB
TypeScript
131 lines
3.9 KiB
TypeScript
"use client";
|
|
|
|
import type { Map as MapLibreMap, MapLayerMouseEvent } from "maplibre-gl";
|
|
import type { RefObject } from "react";
|
|
import { useEffect } from "react";
|
|
import type { DetailFeature } from "../types";
|
|
import {
|
|
getFeatureId,
|
|
getWaterNetworkSourceId,
|
|
toDetailFeature
|
|
} from "../map/feature-adapter";
|
|
import { INTERACTIVE_HIT_LAYER_IDS } from "../map/layers";
|
|
import type { WaterNetworkSourceId } from "../map/sources";
|
|
|
|
const HOVER_LAYER_IDS: Record<WaterNetworkSourceId, readonly string[]> = {
|
|
conduits: ["pipes-hover-outline", "pipes-hover"],
|
|
junctions: ["junctions-hover"],
|
|
orifices: ["orifices-hover-outline", "orifices-hover"],
|
|
pumps: ["pumps-hover-outline", "pumps-hover"],
|
|
outfalls: ["outfalls-hover"]
|
|
};
|
|
|
|
const SELECTED_LAYER_IDS: Record<WaterNetworkSourceId, readonly string[]> = {
|
|
conduits: ["pipes-selected-halo", "pipes-selected-outline", "pipes-selected"],
|
|
junctions: ["junctions-selected-halo", "junctions-selected"],
|
|
orifices: ["orifices-selected-halo", "orifices-selected-outline", "orifices-selected"],
|
|
pumps: ["pumps-selected-halo", "pumps-selected-outline", "pumps-selected"],
|
|
outfalls: ["outfalls-selected-halo", "outfalls-selected"]
|
|
};
|
|
|
|
type UseMapInteractionsOptions = {
|
|
mapRef: RefObject<MapLibreMap | null>;
|
|
mapReady: boolean;
|
|
onSelectFeature: (feature: DetailFeature) => void;
|
|
selectedFeature: DetailFeature | null;
|
|
};
|
|
|
|
export function useMapInteractions({
|
|
mapRef,
|
|
mapReady,
|
|
onSelectFeature,
|
|
selectedFeature
|
|
}: UseMapInteractionsOptions) {
|
|
useEffect(() => {
|
|
const map = mapRef.current;
|
|
if (!mapReady || !map) {
|
|
return;
|
|
}
|
|
|
|
const activeMap = map;
|
|
let hoveredFeature: { id: string; sourceId: WaterNetworkSourceId } | null = null;
|
|
|
|
function clearHoveredFeature() {
|
|
if (!hoveredFeature) {
|
|
return;
|
|
}
|
|
|
|
HOVER_LAYER_IDS[hoveredFeature.sourceId].forEach((layerId) => {
|
|
activeMap.setFilter(layerId, ["==", ["get", "id"], ""]);
|
|
});
|
|
hoveredFeature = null;
|
|
}
|
|
|
|
function handleMouseMove(event: MapLayerMouseEvent) {
|
|
const feature = event.features?.[0];
|
|
if (!feature) {
|
|
return;
|
|
}
|
|
|
|
activeMap.getCanvas().style.cursor = "pointer";
|
|
const id = getFeatureId(feature);
|
|
const sourceId = getWaterNetworkSourceId(feature);
|
|
if (!id || !sourceId) {
|
|
clearHoveredFeature();
|
|
return;
|
|
}
|
|
|
|
if (hoveredFeature?.id === id && hoveredFeature.sourceId === sourceId) {
|
|
return;
|
|
}
|
|
|
|
clearHoveredFeature();
|
|
HOVER_LAYER_IDS[sourceId].forEach((layerId) => {
|
|
activeMap.setFilter(layerId, ["==", ["get", "id"], id]);
|
|
});
|
|
hoveredFeature = { id, sourceId };
|
|
}
|
|
|
|
function handleMouseLeave() {
|
|
activeMap.getCanvas().style.cursor = "";
|
|
clearHoveredFeature();
|
|
}
|
|
|
|
function handleClick(event: MapLayerMouseEvent) {
|
|
const feature = event.features?.[0];
|
|
if (feature) {
|
|
onSelectFeature(toDetailFeature(feature));
|
|
}
|
|
}
|
|
|
|
activeMap.on("mousemove", INTERACTIVE_HIT_LAYER_IDS, handleMouseMove);
|
|
activeMap.on("mouseleave", INTERACTIVE_HIT_LAYER_IDS, handleMouseLeave);
|
|
activeMap.on("click", INTERACTIVE_HIT_LAYER_IDS, handleClick);
|
|
|
|
return () => {
|
|
activeMap.off("mousemove", INTERACTIVE_HIT_LAYER_IDS, handleMouseMove);
|
|
activeMap.off("mouseleave", INTERACTIVE_HIT_LAYER_IDS, handleMouseLeave);
|
|
activeMap.off("click", INTERACTIVE_HIT_LAYER_IDS, handleClick);
|
|
};
|
|
}, [mapRef, mapReady, onSelectFeature]);
|
|
|
|
useEffect(() => {
|
|
const map = mapRef.current;
|
|
if (!mapReady || !map) {
|
|
return;
|
|
}
|
|
|
|
Object.values(SELECTED_LAYER_IDS).flat().forEach((layerId) => {
|
|
map.setFilter(layerId, ["==", ["get", "id"], ""]);
|
|
});
|
|
|
|
if (!selectedFeature?.id) {
|
|
return;
|
|
}
|
|
|
|
SELECTED_LAYER_IDS[selectedFeature.layer].forEach((layerId) => {
|
|
map.setFilter(layerId, ["==", ["get", "id"], selectedFeature.id]);
|
|
});
|
|
}, [mapReady, mapRef, selectedFeature]);
|
|
}
|