From 870ef74ef258b197137f545f22664a426c474afd Mon Sep 17 00:00:00 2001 From: jcardus Date: Sun, 30 Jun 2024 17:57:12 +0100 Subject: [PATCH] split MapRoutePath --- src/map/MapRouteCoordinates.js | 92 ++++++++++++++++++++++++++++++ src/map/MapRoutePath.js | 75 ++++++++---------------- src/reports/CombinedReportPage.jsx | 5 +- 3 files changed, 118 insertions(+), 54 deletions(-) create mode 100644 src/map/MapRouteCoordinates.js diff --git a/src/map/MapRouteCoordinates.js b/src/map/MapRouteCoordinates.js new file mode 100644 index 0000000000..1e3f934f5c --- /dev/null +++ b/src/map/MapRouteCoordinates.js @@ -0,0 +1,92 @@ +import { useTheme } from '@mui/styles'; +import { useId, useEffect } from 'react'; +import { useSelector } from 'react-redux'; +import { map } from './core/MapView'; + +const MapRouteCoordinates = ({ name, coordinates, deviceId }) => { + const id = useId(); + + const theme = useTheme(); + + const reportColor = useSelector((state) => { + const attributes = state.devices.items[deviceId]?.attributes; + if (attributes) { + const color = attributes['web.reportColor']; + if (color) { + return color; + } + } + return theme.palette.geometry.main; + }); + + useEffect(() => { + map.addSource(id, { + type: 'geojson', + data: { + type: 'Feature', + geometry: { + type: 'LineString', + coordinates: [], + }, + }, + }); + map.addLayer({ + source: id, + id: `${id}-line`, + type: 'line', + layout: { + 'line-join': 'round', + 'line-cap': 'round', + }, + paint: { + 'line-color': ['get', 'color'], + 'line-width': 2, + }, + }); + if (name) { + map.addLayer({ + source: id, + id: `${id}-title`, + type: 'symbol', + layout: { + 'text-field': '{name}', + 'text-size': 12, + }, + paint: { + 'text-halo-color': 'white', + 'text-halo-width': 1, + }, + }); + } + + return () => { + if (map.getLayer(`${id}-title`)) { + map.removeLayer(`${id}-title`); + } + if (map.getLayer(`${id}-line`)) { + map.removeLayer(`${id}-line`); + } + if (map.getSource(id)) { + map.removeSource(id); + } + }; + }, []); + + useEffect(() => { + map.getSource(id)?.setData({ + type: 'Feature', + geometry: { + type: 'LineString', + coordinates, + }, + properties: { + name, + color: reportColor, + }, + }); + }, [theme, coordinates]); + + return null; +}; + +export default MapRouteCoordinates; diff --git a/src/map/MapRoutePath.js b/src/map/MapRoutePath.js index 39a9ad5f27..cf55d290b0 100644 --- a/src/map/MapRoutePath.js +++ b/src/map/MapRoutePath.js @@ -1,28 +1,13 @@ import { useTheme } from '@mui/styles'; import { useId, useEffect } from 'react'; -import { useSelector } from 'react-redux'; import { map } from './core/MapView'; import { getSpeedColor } from '../common/util/colors'; -const MapRoutePath = ({ name, positions, coordinates }) => { +const MapRoutePath = ({ name, positions }) => { const id = useId(); const theme = useTheme(); - const reportColor = useSelector((state) => { - const position = positions?.find(() => true); - if (position) { - const attributes = state.devices.items[position.deviceId]?.attributes; - if (attributes) { - const color = attributes['web.reportColor']; - if (color) { - return color; - } - } - } - return theme.palette.geometry.main; - }); - useEffect(() => { map.addSource(id, { type: 'geojson', @@ -77,50 +62,36 @@ const MapRoutePath = ({ name, positions, coordinates }) => { }, []); useEffect(() => { - if (!coordinates) { - coordinates = positions.map((item) => [item.longitude, item.latitude]); - const speeds = positions.map((item) => item.speed); - const maxSpeed = speeds.reduce((a, b) => Math.max(a, b), -Infinity); - const features = []; - for (let i = 0; i < coordinates.length - 1; i += 1) { - features.push({ - type: 'Feature', - geometry: { - type: 'LineString', - coordinates: [coordinates[i], coordinates[i + 1]], - }, - properties: { - color: getSpeedColor( - theme.palette.success.main, - theme.palette.warning.main, - theme.palette.error.main, - speeds[i + 1], - maxSpeed, - ), - }, - }); - } - map.getSource(id)?.setData({ - type: 'FeatureCollection', - features, - properties: { - name, - }, - }); - } else { - map.getSource(id)?.setData({ + const coordinates = positions.map((item) => [item.longitude, item.latitude]); + const speeds = positions.map((item) => item.speed); + const maxSpeed = speeds.reduce((a, b) => Math.max(a, b), -Infinity); + const features = []; + for (let i = 0; i < coordinates.length - 1; i += 1) { + features.push({ type: 'Feature', geometry: { type: 'LineString', - coordinates, + coordinates: [coordinates[i], coordinates[i + 1]], }, properties: { - name, - color: reportColor, + color: getSpeedColor( + theme.palette.success.main, + theme.palette.warning.main, + theme.palette.error.main, + speeds[i + 1], + maxSpeed, + ), }, }); } - }, [theme, positions, coordinates, reportColor]); + map.getSource(id)?.setData({ + type: 'FeatureCollection', + features, + properties: { + name, + }, + }); + }, [theme, positions]); return null; }; diff --git a/src/reports/CombinedReportPage.jsx b/src/reports/CombinedReportPage.jsx index 32ad5df0f8..f90aad25cf 100644 --- a/src/reports/CombinedReportPage.jsx +++ b/src/reports/CombinedReportPage.jsx @@ -9,7 +9,6 @@ import PageLayout from '../common/components/PageLayout'; import ReportsMenu from './components/ReportsMenu'; import { useCatch } from '../reactHelper'; import MapView from '../map/core/MapView'; -import MapRoutePath from '../map/MapRoutePath'; import useReportStyles from './common/useReportStyles'; import TableShimmer from '../common/components/TableShimmer'; import MapCamera from '../map/MapCamera'; @@ -17,6 +16,7 @@ import MapGeofence from '../map/MapGeofence'; import { formatTime } from '../common/util/formatter'; import { prefixString } from '../common/util/stringUtils'; import MapMarkers from '../map/MapMarkers'; +import MapRouteCoordinates from '../map/MapRouteCoordinates'; const CombinedReportPage = () => { const classes = useReportStyles(); @@ -60,10 +60,11 @@ const CombinedReportPage = () => { {items.map((item) => ( - ))}