From 759605342a573437a1b294a627d8e252ea0ebca9 Mon Sep 17 00:00:00 2001 From: Anton Tananaev Date: Fri, 28 Jun 2024 07:04:18 -0700 Subject: [PATCH] Revert "Merge pull request #1243 from jcardus/speed-based-color" This reverts commit cecc9dd5b9e66cdcf8ffe1d69423d3023cb3de3f, reversing changes made to c42bb2baac7e66f1fb330ffbf941c1ce09b19737. --- src/common/util/colors.js | 23 ----------------------- src/map/MapRoutePath.js | 29 +++++++++-------------------- src/map/MapRoutePoints.js | 15 ++++----------- src/map/core/preloadImages.js | 2 ++ src/resources/images/arrow.svg | 4 ++++ 5 files changed, 19 insertions(+), 54 deletions(-) delete mode 100644 src/common/util/colors.js create mode 100644 src/resources/images/arrow.svg diff --git a/src/common/util/colors.js b/src/common/util/colors.js deleted file mode 100644 index 1cb35c04fe..0000000000 --- a/src/common/util/colors.js +++ /dev/null @@ -1,23 +0,0 @@ -import { decomposeColor } from '@mui/material'; - -export const interpolateColor = (color1, color2, factor) => { - if (factor > 1) factor = 1; - if (factor < 0) factor = 0; - - const c1 = decomposeColor(color1).values; - const c2 = decomposeColor(color2).values; - - const r = Math.round(c1[0] + factor * (c2[0] - c1[0])); - const g = Math.round(c1[1] + factor * (c2[1] - c1[1])); - const b = Math.round(c1[2] + factor * (c2[2] - c1[2])); - - return `rgb(${r}, ${g}, ${b})`; -}; - -export const getSpeedColor = (color1, color2, color3, speed, max) => { - const factor = speed / max; - if (factor <= 0.5) { - return interpolateColor(color1, color2, factor * 2); - } - return interpolateColor(color2, color3, (factor - 0.5) * 2); -}; diff --git a/src/map/MapRoutePath.js b/src/map/MapRoutePath.js index cbba5357cc..202691401b 100644 --- a/src/map/MapRoutePath.js +++ b/src/map/MapRoutePath.js @@ -2,7 +2,6 @@ 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 id = useId(); @@ -80,26 +79,16 @@ const MapRoutePath = ({ name, positions, coordinates }) => { if (!coordinates) { coordinates = positions.map((item) => [item.longitude, item.latitude]); } - const maxSpeed = positions.map((p) => p.speed).reduce((a, b) => Math.max(a, b), -Infinity); - const features = []; - for (let i = 0; i < positions.length - 1; i += 1) { - const p1 = positions[i]; - const p2 = positions[i + 1]; - features.push({ - type: 'Feature', - geometry: { - type: 'LineString', - coordinates: [[p1.longitude, p1.latitude], [p2.longitude, p2.latitude]], - }, - properties: { - color: getSpeedColor(theme.palette.success.main, theme.palette.warning.main, theme.palette.error.main, p1.speed, maxSpeed), - }, - }); - } - map.getSource(id)?.setData({ - type: 'FeatureCollection', - features, + type: 'Feature', + geometry: { + type: 'LineString', + coordinates, + }, + properties: { + name, + color: reportColor, + }, }); }, [theme, positions, coordinates, reportColor]); diff --git a/src/map/MapRoutePoints.js b/src/map/MapRoutePoints.js index 929a0d5069..e329da8118 100644 --- a/src/map/MapRoutePoints.js +++ b/src/map/MapRoutePoints.js @@ -1,11 +1,8 @@ import { useId, useCallback, useEffect } from 'react'; -import { useTheme } from '@mui/styles'; import { map } from './core/MapView'; -import { getSpeedColor } from '../common/util/colors'; const MapRoutePoints = ({ positions, onClick }) => { const id = useId(); - const theme = useTheme(); const onMouseEnter = () => map.getCanvas().style.cursor = 'pointer'; const onMouseLeave = () => map.getCanvas().style.cursor = ''; @@ -30,13 +27,11 @@ const MapRoutePoints = ({ positions, onClick }) => { id, type: 'symbol', source: id, - paint: { - 'text-color': ['get', 'color'], - }, layout: { - 'text-field': '▲', - 'text-allow-overlap': true, - 'text-rotate': ['get', 'rotation'], + 'icon-image': 'arrow', + 'icon-allow-overlap': true, + 'icon-rotate': ['get', 'rotation'], + 'icon-rotation-alignment': 'map', }, }); @@ -59,7 +54,6 @@ const MapRoutePoints = ({ positions, onClick }) => { }, [onMarkerClick]); useEffect(() => { - const maxSpeed = positions.map((p) => p.speed).reduce((a, b) => Math.max(a, b), -Infinity); map.getSource(id)?.setData({ type: 'FeatureCollection', features: positions.map((position, index) => ({ @@ -72,7 +66,6 @@ const MapRoutePoints = ({ positions, onClick }) => { index, id: position.id, rotation: position.course, - color: getSpeedColor(theme.palette.success.main, theme.palette.warning.main, theme.palette.error.main, position.speed, maxSpeed), }, })), }); diff --git a/src/map/core/preloadImages.js b/src/map/core/preloadImages.js index 19c3c35ea6..a0056d4c3b 100644 --- a/src/map/core/preloadImages.js +++ b/src/map/core/preloadImages.js @@ -2,6 +2,7 @@ import { grey } from '@mui/material/colors'; import createPalette from '@mui/material/styles/createPalette'; import { loadImage, prepareIcon } from './mapUtil'; +import arrowSvg from '../../resources/images/arrow.svg'; import directionSvg from '../../resources/images/direction.svg'; import backgroundSvg from '../../resources/images/background.svg'; import animalSvg from '../../resources/images/icon/animal.svg'; @@ -64,6 +65,7 @@ export default async () => { const background = await loadImage(backgroundSvg); mapImages.background = await prepareIcon(background); mapImages.direction = await prepareIcon(await loadImage(directionSvg)); + mapImages.arrow = await prepareIcon(await loadImage(arrowSvg)); await Promise.all(Object.keys(mapIcons).map(async (category) => { const results = []; ['info', 'success', 'error', 'neutral'].forEach((color) => { diff --git a/src/resources/images/arrow.svg b/src/resources/images/arrow.svg new file mode 100644 index 0000000000..d0f30a2efe --- /dev/null +++ b/src/resources/images/arrow.svg @@ -0,0 +1,4 @@ + + + +