Merge branch '275-color-of-line-created-in-plugin-is-ignored' into 'development'

Resolve "color of line created in plugin is ignored"

Closes #275

See merge request !214

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(
     () =>

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;