From 0aaf14e1125f10c2d7ecfcdcf908694b1bcbdd36 Mon Sep 17 00:00:00 2001 From: Timothy Armes Date: Tue, 1 Oct 2024 15:07:35 +0200 Subject: [PATCH] Improve leaflet type handing --- leaflet.d.ts | 39 ++++++++++++++++++++++++++++++++++-- package.json | 3 +-- src/components/Map.tsx | 15 +------------- src/components/MapEvents.tsx | 31 ++++++++++++++-------------- yarn.lock | 14 ------------- 5 files changed, 54 insertions(+), 48 deletions(-) diff --git a/leaflet.d.ts b/leaflet.d.ts index 47dba1e..7374df6 100644 --- a/leaflet.d.ts +++ b/leaflet.d.ts @@ -1,7 +1,10 @@ import * as L from "leaflet"; -// For some reason, @types/leaflet.markercluster isn't being recognized -// I'm including it here by hand +declare module "leaflet.smooth_marker_bouncing"; + +// For some reason, @types/leaflet.markercluster isn't being recognized when added as a package + +// I'm including it here by hand, and also including types for BouncingMarker and leaflet-gesture-handling declare module "leaflet" { class MarkerCluster extends Marker { /* @@ -329,4 +332,36 @@ declare module "leaflet" { function markerClusterGroup( options?: MarkerClusterGroupOptions, ): MarkerClusterGroup; + + // These have been added by hand and aren't part of the @types/leaflet.markercluster that the above is a copy of + + interface Map { + gestureHandling?: { + enable(): void; + disable(): void; + }; + } + + interface MapOptions { + gestureHandlingOptions?: { + duration?: number; + text?: { + touch: string; + scroll: string; + scrollMac: string; + }; + }; + } + + // Declare a class type that adds in methods etc. defined by leaflet.smooth_marker_bouncing + declare class BouncingMarker extends Marker { + isBouncing(): boolean; + bounce(): void; + stopBouncing(): void; + + _icon: HTMLElement; + _bouncingMotion?: { + bouncingAnimationPlaying: boolean; + }; + } } diff --git a/package.json b/package.json index 38b05fe..22cade2 100644 --- a/package.json +++ b/package.json @@ -29,8 +29,8 @@ "jotai": "^2.6.1", "leaflet": "^1.9.4", "leaflet-defaulticon-compatibility": "^0.1.2", - "leaflet-gesture-handling": "^1.2.2", "leaflet-draw": "^1.0.4", + "leaflet-gesture-handling": "^1.2.2", "leaflet.markercluster": "^1.5.3", "leaflet.smooth_marker_bouncing": "3.0.3", "lodash": "^4.17.21", @@ -67,7 +67,6 @@ "@tailwindcss/typography": "^0.5.15", "@testing-library/jest-dom": "^6.1.2", "@types/leaflet": "^1.9.12", - "@types/leaflet.markercluster": "^1.5.4", "@types/lodash": "^4.14.195", "@types/nodemailer": "^6.4.8", "@types/react": "^18.2.27", diff --git a/src/components/Map.tsx b/src/components/Map.tsx index 0387adf..b1cd651 100644 --- a/src/components/Map.tsx +++ b/src/components/Map.tsx @@ -4,7 +4,7 @@ import { useCallback, useEffect, useMemo, useRef } from "react"; import React from "react"; import { useAtomValue, useSetAtom } from "jotai"; -import L, { DomUtil, LatLngLiteral, Marker } from "leaflet"; +import L, { BouncingMarker, DomUtil, LatLngLiteral, Marker } from "leaflet"; import "leaflet-defaulticon-compatibility"; import "leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.css"; import "leaflet.smooth_marker_bouncing"; @@ -21,19 +21,6 @@ export type MarkerRef = { bounce: () => void; }; -// Declare a class type that adds in methods etc. defined by leaflet.smooth_marker_bouncing -// to keep Typescript happy -declare class BouncingMarker extends Marker { - isBouncing(): boolean; - bounce(): void; - stopBouncing(): void; - - _icon: HTMLElement; - _bouncingMotion?: { - bouncingAnimationPlaying: boolean; - }; -} - const stopBouncingMarkers = () => { const markers = // @ts-ignore diff --git a/src/components/MapEvents.tsx b/src/components/MapEvents.tsx index 74c3e89..f3dd1c6 100644 --- a/src/components/MapEvents.tsx +++ b/src/components/MapEvents.tsx @@ -52,27 +52,26 @@ export const MapEvents = ({ map.addHandler("gestureHandling", GestureHandling); - // @ts-expect-error Typescript does not see additional handler here - map.gestureHandling.enable(); - }, [map]); + map.gestureHandling?.enable(); + }, [bounds, map]); useEffect(() => { - console.log("setting map language", locale); - // @ts-expect-error Typescript does not see additional handler here - map.options.gestureHandlingOptions.text = { - touch: t("touch"), - scroll: t("scroll"), - scrollMac: t("scrollMac"), - }; + if ( + "gestureHandlingOptions" in map.options && + map.options.gestureHandlingOptions + ) { + map.options.gestureHandlingOptions.text = { + touch: t("touch"), + scroll: t("scroll"), + scrollMac: t("scrollMac"), + }; + } // We need to toggle the handler to update the text on prod. No idea why. - // @ts-expect-error Typescript does not see additional handler here - map.gestureHandling.disable(); - - // @ts-expect-error Typescript does not see additional handler here - map.gestureHandling.enable(); - }, [map, locale]); + map.gestureHandling?.disable(); + map.gestureHandling?.enable(); + }, [map, locale, t]); return null; }; diff --git a/yarn.lock b/yarn.lock index a9d63f6..58f28fe 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1947,20 +1947,6 @@ resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee" integrity sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ== -"@types/leaflet.markercluster@^1.5.4": - version "1.5.4" - resolved "https://registry.yarnpkg.com/@types/leaflet.markercluster/-/leaflet.markercluster-1.5.4.tgz#2ab43417cf3f6a42d0f1baf4e1c8f659cf1dc3a1" - integrity sha512-tfMP8J62+wfsVLDLGh5Zh1JZxijCaBmVsMAX78MkLPwvPitmZZtSin5aWOVRhZrCS+pEOZwNzexbfWXlY+7yjg== - dependencies: - "@types/leaflet" "*" - -"@types/leaflet@*": - version "1.9.9" - resolved "https://registry.yarnpkg.com/@types/leaflet/-/leaflet-1.9.9.tgz#5e469f1443c6796b59ad8300495bd82797345356" - integrity sha512-o0qD9ReJzWpGNIAY0O32NkpfM6rhV4sxnwVkz7x7Ah4Zy9sP+2T9Q3byccL5la1ZX416k+qiyvt8ksBavPPY7A== - dependencies: - "@types/geojson" "*" - "@types/leaflet@^1.9.12": version "1.9.12" resolved "https://registry.yarnpkg.com/@types/leaflet/-/leaflet-1.9.12.tgz#a6626a0b3fba36fd34723d6e95b22e8024781ad6"