From 6ae8aeacc0e2f3b9e3797ec001bc3b804403ea16 Mon Sep 17 00:00:00 2001 From: Dustin Carlino Date: Mon, 13 May 2024 13:10:11 +0100 Subject: [PATCH] Use MapEvents in a few places. It can't be applied everywhere we manage map callbacks, because some are .ts files (without a clear lifetime) and others are not in the component tree under the map. --- package-lock.json | 39 ++++++++++++++++++--- package.json | 2 +- src/lib/common/LineMeasureController.svelte | 20 ++++------- src/lib/draw/route/SplitRouteMode.svelte | 21 +++++------ 4 files changed, 50 insertions(+), 32 deletions(-) diff --git a/package-lock.json b/package-lock.json index 8522ca73d..0da23f130 100644 --- a/package-lock.json +++ b/package-lock.json @@ -29,7 +29,7 @@ "read-excel-file": "^5.7.1", "route-snapper": "^0.3.0", "svelte": "^4.2.10", - "svelte-maplibre": "^0.8.2", + "svelte-maplibre": "^0.9.2", "uuid": "^9.0.1" }, "devDependencies": { @@ -2564,6 +2564,35 @@ "svelte": "^4.0.0" } }, + "node_modules/maplibre-draw-polygon/node_modules/svelte-maplibre": { + "version": "0.8.5", + "resolved": "https://registry.npmjs.org/svelte-maplibre/-/svelte-maplibre-0.8.5.tgz", + "integrity": "sha512-BMLlrENxFC7ezMf4l9HJJEvDSGpoA8SLcVjyV87nV/aN6OCLh5PAjMBtE4Yck7phynrZininzmV4Q13LAD3bjg==", + "dependencies": { + "d3-geo": "^3.1.0", + "just-compare": "^2.3.0", + "just-flush": "^2.3.0", + "maplibre-gl": "^4.0.0", + "pmtiles": "^3.0.3" + }, + "peerDependencies": { + "@deck.gl/core": "^8.8.0", + "@deck.gl/layers": "^8.8.0", + "@deck.gl/mapbox": "^8.8.0", + "svelte": "^3.54.0 || ^4.0.0" + }, + "peerDependenciesMeta": { + "@deck.gl/core": { + "optional": true + }, + "@deck.gl/layers": { + "optional": true + }, + "@deck.gl/mapbox": { + "optional": true + } + } + }, "node_modules/maplibre-gl": { "version": "4.0.2", "resolved": "https://registry.npmjs.org/maplibre-gl/-/maplibre-gl-4.0.2.tgz", @@ -3364,9 +3393,9 @@ } }, "node_modules/svelte-maplibre": { - "version": "0.8.2", - "resolved": "https://registry.npmjs.org/svelte-maplibre/-/svelte-maplibre-0.8.2.tgz", - "integrity": "sha512-l4FW7VE/1/uUUyk639gtvYyK0QbNw3roRq9ouxPDS+DAW8gwpxlnDwYTtjEO+Yq7TK6xOjimJtKOG3KES8e7Uw==", + "version": "0.9.2", + "resolved": "https://registry.npmjs.org/svelte-maplibre/-/svelte-maplibre-0.9.2.tgz", + "integrity": "sha512-zMLmqEk2OqIsfCEc5l59xWJG4vLBrHFp8Q/hzfxOc21LqtjTRS6PBB5ZpXNFOIrTRBlPk3jeJguborz+yW1vGA==", "dependencies": { "d3-geo": "^3.1.0", "just-compare": "^2.3.0", @@ -3378,7 +3407,7 @@ "@deck.gl/core": "^8.8.0", "@deck.gl/layers": "^8.8.0", "@deck.gl/mapbox": "^8.8.0", - "svelte": "^3.54.0 || ^4.0.0" + "svelte": "^3.54.0 || ^4.0.0 || ^5.0.0" }, "peerDependenciesMeta": { "@deck.gl/core": { diff --git a/package.json b/package.json index 126819578..15aeacb69 100644 --- a/package.json +++ b/package.json @@ -55,7 +55,7 @@ "read-excel-file": "^5.7.1", "route-snapper": "^0.3.0", "svelte": "^4.2.10", - "svelte-maplibre": "^0.8.2", + "svelte-maplibre": "^0.9.2", "uuid": "^9.0.1" } } diff --git a/src/lib/common/LineMeasureController.svelte b/src/lib/common/LineMeasureController.svelte index 68a9ef158..04f3b1d7e 100644 --- a/src/lib/common/LineMeasureController.svelte +++ b/src/lib/common/LineMeasureController.svelte @@ -6,9 +6,7 @@ import { CollapsibleCard, SecondaryButton } from "govuk-svelte"; import { emptyGeojson, layerId } from "lib/maplibre"; import { LngLat, MapMouseEvent } from "maplibre-gl"; - import { map } from "stores"; - import { onDestroy, onMount } from "svelte"; - import { GeoJSON, LineLayer } from "svelte-maplibre"; + import { GeoJSON, LineLayer, MapEvents } from "svelte-maplibre"; let isInactive = true; let waypoints: any[] = []; @@ -18,7 +16,7 @@ let drawGj = emptyGeojson(); - function handleMapClickEvent(e: MapMouseEvent) { + function handleMapClickEvent(e: CustomEvent) { if (isInactive) { return; } @@ -26,13 +24,13 @@ if (!isShiftDown) { waypoints.push({ id: nextId++, - lngLat: e.lngLat, + lngLat: e.detail.lngLat, }); waypoints = waypoints; waypointsUpdated(); } if (isShiftDown && waypoints.length > 0) { - findAndRemoveNeareastWaypoint(e.lngLat); + findAndRemoveNeareastWaypoint(e.detail.lngLat); waypointsUpdated(); } @@ -113,14 +111,6 @@ lineToMeasure = undefined; drawGj = emptyGeojson(); } - - onMount(() => { - $map.on("click", handleMapClickEvent); - }); - - onDestroy(() => { - $map.off("click", handleMapClickEvent); - }); {#if isInactive} @@ -165,6 +155,8 @@ {/if} + + { // Use a fallback icon in case the image fails $map.getCanvas().style.cursor = `url(${splitIcon}), crosshair`; - - $map.on("mousemove", onMouseMove); - $map.on("click", onClick); }); onDestroy(() => { $map.getCanvas().style.cursor = "inherit"; - - $map.off("mousemove", onMouseMove); - $map.off("click", onClick); }); let snappedCursor: Feature | null = null; @@ -48,17 +42,18 @@ snappedCursorGj = gj; } - function onMouseMove(e: MapMouseEvent) { + function onMouseMove(e: CustomEvent) { snappedCursor = null; snappedIndex = null; - let cursor = cursorFeature(e.lngLat.toArray()); + let cursor = cursorFeature(e.detail.lngLat.toArray()); const nearbyPoint: [number, number] = [ - e.point.x - snapDistancePixels, - e.point.y, + e.detail.point.x - snapDistancePixels, + e.detail.point.y, ]; const thresholdKm = - $map.unproject(e.point).distanceTo($map.unproject(nearbyPoint)) / 1000.0; + $map.unproject(e.detail.point).distanceTo($map.unproject(nearbyPoint)) / + 1000.0; // Are we snapped to anything? let candidates: [number, Position, number][] = []; @@ -246,6 +241,8 @@ + +