From dd81baabe26744b2c1178e2f9087c991a9b69444 Mon Sep 17 00:00:00 2001 From: Paul Chavard Date: Fri, 26 Apr 2024 19:54:37 +0200 Subject: [PATCH] chore(ts): improuve some types --- .../MapEditor/components/CadastreLayer.tsx | 2 +- .../MapEditor/components/DrawLayer.tsx | 55 +++++++++++++------ .../MapReader/components/GeoJSONLayer.tsx | 10 ++-- .../components/shared/maplibre/hooks.ts | 14 +++-- 4 files changed, 53 insertions(+), 28 deletions(-) diff --git a/app/javascript/components/MapEditor/components/CadastreLayer.tsx b/app/javascript/components/MapEditor/components/CadastreLayer.tsx index f2f0b7086..c8203d032 100644 --- a/app/javascript/components/MapEditor/components/CadastreLayer.tsx +++ b/app/javascript/components/MapEditor/components/CadastreLayer.tsx @@ -87,7 +87,7 @@ export function CadastreLayer({ }); const onHighlight = useCallback( - ({ detail }) => { + ({ detail }: CustomEvent<{ cid: string; highlight: boolean }>) => { highlightFeature(detail.cid, detail.highlight); }, [highlightFeature] diff --git a/app/javascript/components/MapEditor/components/DrawLayer.tsx b/app/javascript/components/MapEditor/components/DrawLayer.tsx index 82f6223ef..63d29767c 100644 --- a/app/javascript/components/MapEditor/components/DrawLayer.tsx +++ b/app/javascript/components/MapEditor/components/DrawLayer.tsx @@ -1,7 +1,7 @@ import { useCallback, useRef, useEffect } from 'react'; -import type { LngLatBoundsLike } from 'maplibre-gl'; +import type { LngLatBoundsLike, LngLatLike } from 'maplibre-gl'; import DrawControl from '@mapbox/mapbox-gl-draw'; -import type { FeatureCollection } from 'geojson'; +import type { FeatureCollection, Feature, Point } from 'geojson'; import { useMapLibre } from '../../shared/maplibre/MapLibre'; import { @@ -78,15 +78,24 @@ export function DrawLayer({ // eslint-disable-next-line react-hooks/exhaustive-deps }, [map, enabled]); - const onSetId = useCallback(({ detail }) => { - drawRef.current?.setFeatureProperty(detail.lid, 'id', detail.id); - }, []); - const onAddFeature = useCallback(({ detail }) => { - drawRef.current?.add(detail.feature); - }, []); - const onDeleteFature = useCallback(({ detail }) => { - drawRef.current?.delete(detail.id); - }, []); + const onSetId = useCallback( + ({ detail }: CustomEvent<{ lid: string; id: string }>) => { + drawRef.current?.setFeatureProperty(detail.lid, 'id', detail.id); + }, + [] + ); + const onAddFeature = useCallback( + ({ detail }: CustomEvent<{ feature: Feature }>) => { + drawRef.current?.add(detail.feature); + }, + [] + ); + const onDeleteFature = useCallback( + ({ detail }: CustomEvent<{ id: string }>) => { + drawRef.current?.delete(detail.id); + }, + [] + ); useMapEvent('draw.create', createFeatures); useMapEvent('draw.update', updateFeatures); @@ -122,7 +131,7 @@ function useExternalEvents( const flyTo = useFlyTo(); const onFeatureFocus = useCallback( - ({ detail }) => { + ({ detail }: CustomEvent<{ id: string; bbox: LngLatBoundsLike }>) => { const { id, bbox } = detail; if (id) { const feature = findFeature(featureCollection, id); @@ -137,16 +146,26 @@ function useExternalEvents( ); const onZoomFocus = useCallback( - ({ detail }) => { + ({ + detail + }: CustomEvent<{ + feature: Feature; + featureCollection: FeatureCollection; + }>) => { if (detail.feature && detail.featureCollection == featureCollection) { - flyTo(17, detail.feature.geometry.coordinates); + flyTo(17, detail.feature.geometry.coordinates as LngLatLike); } }, [flyTo, featureCollection] ); const onFeatureCreate = useCallback( - ({ detail }) => { + ({ + detail + }: CustomEvent<{ + feature: Feature; + featureCollection: FeatureCollection; + }>) => { const { feature } = detail; const { geometry, properties } = feature; if ( @@ -164,7 +183,9 @@ function useExternalEvents( ); const onFeatureUpdate = useCallback( - ({ detail }) => { + ({ + detail + }: CustomEvent<{ id: string; properties: Feature['properties'] }>) => { const { id, properties } = detail; const feature = findFeature(featureCollection, id); @@ -177,7 +198,7 @@ function useExternalEvents( ); const onFeatureDelete = useCallback( - ({ detail }) => { + ({ detail }: CustomEvent<{ id: string }>) => { const { id } = detail; const feature = findFeature(featureCollection, id); diff --git a/app/javascript/components/MapReader/components/GeoJSONLayer.tsx b/app/javascript/components/MapReader/components/GeoJSONLayer.tsx index 50024e16a..add1dca03 100644 --- a/app/javascript/components/MapReader/components/GeoJSONLayer.tsx +++ b/app/javascript/components/MapReader/components/GeoJSONLayer.tsx @@ -1,6 +1,6 @@ import React, { useCallback, useEffect, useMemo } from 'react'; -import { Popup, LngLatBoundsLike } from 'maplibre-gl'; -import type { Feature, FeatureCollection } from 'geojson'; +import { Popup, LngLatBoundsLike, LngLatLike } from 'maplibre-gl'; +import type { Feature, FeatureCollection, Point } from 'geojson'; import { useMapLibre } from '../../shared/maplibre/MapLibre'; import { @@ -102,7 +102,7 @@ function useExternalEvents(featureCollection: FeatureCollection) { const fitBounds = useFitBounds(); const flyTo = useFlyTo(); const onFeatureFocus = useCallback( - ({ detail }) => { + ({ detail }: CustomEvent<{ id: string }>) => { const { id } = detail; const feature = findFeature(featureCollection, id); if (feature) { @@ -112,10 +112,10 @@ function useExternalEvents(featureCollection: FeatureCollection) { [featureCollection, fitBounds] ); const onZoomFocus = useCallback( - ({ detail }) => { + ({ detail }: CustomEvent<{ feature: Feature }>) => { const { feature } = detail; if (feature) { - flyTo(17, feature.geometry.coordinates); + flyTo(17, feature.geometry.coordinates as LngLatLike); } }, [flyTo] diff --git a/app/javascript/components/shared/maplibre/hooks.ts b/app/javascript/components/shared/maplibre/hooks.ts index 9b5acb875..84f0542a1 100644 --- a/app/javascript/components/shared/maplibre/hooks.ts +++ b/app/javascript/components/shared/maplibre/hooks.ts @@ -9,7 +9,8 @@ import type { LngLatBoundsLike, LngLat, MapLayerEventType, - Style + Style, + LngLatLike } from 'maplibre-gl'; import type { Feature, Geometry } from 'geojson'; @@ -39,17 +40,20 @@ export function useFitBoundsNoFly() { export function useFlyTo() { const map = useMapLibre(); return useCallback( - (zoom: number, center: [number, number]) => { + (zoom: number, center: LngLatLike) => { map.flyTo({ zoom, center }); }, [map] ); } -export function useEvent(eventName: string, callback: EventListener) { +export function useEvent( + eventName: string, + callback: (event: CustomEvent) => void +) { return useEffect(() => { - addEventListener(eventName, callback); - return () => removeEventListener(eventName, callback); + addEventListener(eventName, callback as EventListener); + return () => removeEventListener(eventName, callback as EventListener); }, [eventName, callback]); }