diff --git a/src/components/Map/MapViewer/utils/config/reactionsLayer/useOlMapReactionsLayer.ts b/src/components/Map/MapViewer/utils/config/reactionsLayer/useOlMapReactionsLayer.ts index 10e1d4e4d4b9ea419ce7e8411cb9e7bc4a8c59f3..a6467e9a59f2addd62f2a012a43be15c846fa518 100644 --- a/src/components/Map/MapViewer/utils/config/reactionsLayer/useOlMapReactionsLayer.ts +++ b/src/components/Map/MapViewer/utils/config/reactionsLayer/useOlMapReactionsLayer.ts @@ -14,6 +14,7 @@ import Stroke from 'ol/style/Stroke'; import Style from 'ol/style/Style'; import { useMemo } from 'react'; import { useSelector } from 'react-redux'; +import { createOverlayLineFeature } from '@/components/Map/MapViewer/utils/config/overlaysLayer/createOverlayLineFeature'; import { getLineFeature } from './getLineFeature'; const getLinePoints = ({ start, end }: Pick<MarkerLine, 'start' | 'end'>): LinePoint => [ @@ -29,21 +30,28 @@ export const useOlMapReactionsLayer = (): VectorLayer<VectorSource<Feature<Geome const reactions = useSelector(allReactionsSelectorOfCurrentMap); const markers = useSelector(markersLinesCurrentMapDataSelector); const reactionsLines = getReactionsLines(reactions); - const markerLines = markers.map(getLinePoints); const reactionsLinesFeatures = useMemo( + () => reactionsLines.map(linePoint => getLineFeature(linePoint, pointToProjection)), + [reactionsLines, pointToProjection], + ); + + const markerLinesFeatures = useMemo( () => - [...reactionsLines, ...markerLines].map(linePoint => - getLineFeature(linePoint, pointToProjection), + markers.map(marker => + createOverlayLineFeature([marker.start, marker.end] as LinePoint, { + color: marker.color, + pointToProjection, + }), ), - [reactionsLines, markerLines, pointToProjection], + [markers, pointToProjection], ); const vectorSource = useMemo(() => { return new VectorSource({ - features: [...reactionsLinesFeatures], + features: [...reactionsLinesFeatures, ...markerLinesFeatures], }); - }, [reactionsLinesFeatures]); + }, [reactionsLinesFeatures, markerLinesFeatures]); const reactionsLayer = useMemo( () => diff --git a/src/types/OLrendering.ts b/src/types/OLrendering.ts index 099a8266240819e2d64d54a185255633c64cd3ac..a117dea712eac055fab31a6b96d1965bac0cdc5e 100644 --- a/src/types/OLrendering.ts +++ b/src/types/OLrendering.ts @@ -9,9 +9,9 @@ export type OverlayBioEntityRender = { x1: number; /** bottom left corner of whole element, Ymin */ y1: number; - /** top righ corner of whole element, xMax */ + /** top right corner of whole element, xMax */ x2: number; - /** top righ corner of whole element, yMax */ + /** top right corner of whole element, yMax */ y2: number; width: number; height: number;