Merge branch 'feat/MIN-46-arrow-position' into 'development'

fix(vector-map): correct arrow position on arrow layer

Closes MIN-46

See merge request !278

src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/CompartmentPathway.ts

@@ -2,7 +2,6 @@
 import { UsePointToProjectionResult } from '@/utils/map/usePointToProjection';
 import { MapInstance } from '@/types/map';
 import {
-  ColorObject,
   HorizontalAlign,
   VerticalAlign,
 } from '@/components/Map/MapViewer/MapViewerVector/MapViewerVector.types';
@@ -13,6 +12,7 @@ import {
 import Polygon from 'ol/geom/Polygon';
 import BaseMultiPolygon from '@/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/BaseMultiPolygon';
 import getStyle from '@/components/Map/MapViewer/MapViewerVector/utils/shapes/style/getStyle';
+import { Color } from '@/types/models';
 
 export type CompartmentPathwayProps = {
   x: number;
@@ -20,9 +20,9 @@ export type CompartmentPathwayProps = {
   width: number;
   height: number;
   zIndex: number;
-  fillColor?: ColorObject;
-  borderColor?: ColorObject;
-  fontColor?: ColorObject;
+  fillColor?: Color;
+  borderColor?: Color;
+  fontColor?: Color;
   outerWidth?: number;
   text?: string;
   fontSize?: number;

src/components/Map/MapViewer/MapViewerVector/utils/shapes/layer/Layer.ts

@@ -210,6 +210,25 @@ export default class Layer {
           return [pointToProjection({ x: segment.x2, y: segment.y2 })];
         })
         .flat();
+
+      const firstSegment = line.segments[0];
+      const startArrowRotation = getRotation(
+        [firstSegment.x1, firstSegment.y1],
+        [firstSegment.x2, firstSegment.y2],
+      );
+      const shortenedX1 = firstSegment.x1 + line.startArrow.length * Math.cos(startArrowRotation);
+      const shortenedY1 = firstSegment.y1 - line.startArrow.length * Math.sin(startArrowRotation);
+      points[0] = pointToProjection({ x: shortenedX1, y: shortenedY1 });
+
+      const lastSegment = line.segments[line.segments.length - 1];
+      const endArrowRotation = getRotation(
+        [lastSegment.x1, lastSegment.y1],
+        [lastSegment.x2, lastSegment.y2],
+      );
+      const shortenedX2 = lastSegment.x2 - line.endArrow.length * Math.cos(endArrowRotation);
+      const shortenedY2 = lastSegment.y2 - line.endArrow.length * Math.sin(endArrowRotation);
+      points[points.length - 1] = pointToProjection({ x: shortenedX2, y: shortenedY2 });
+
       const lineString = new LineString(points);
 
       let lineDash;
@@ -229,25 +248,47 @@ export default class Layer {
       });
       lineFeature.setStyle(lineStyle);
       linesFeatures.push(lineFeature);
-      arrowsFeatures.push(...this.getLineArrowsFeatures(line, pointToProjection));
+
+      arrowsFeatures.push(
+        ...this.getLineArrowsFeatures({
+          line,
+          pointToProjection,
+          startArrowX: firstSegment.x1,
+          startArrowY: firstSegment.y1,
+          startArrowRotation,
+          endArrowX: shortenedX2,
+          endArrowY: shortenedY2,
+          endArrowRotation,
+        }),
+      );
     });
     return { linesFeatures, arrowsFeatures };
   };
 
-  private getLineArrowsFeatures = (
-    line: LayerLine,
-    pointToProjection: UsePointToProjectionResult,
-  ): Array<Feature<MultiPolygon>> => {
+  private getLineArrowsFeatures = ({
+    line,
+    pointToProjection,
+    startArrowX,
+    startArrowY,
+    startArrowRotation,
+    endArrowX,
+    endArrowY,
+    endArrowRotation,
+  }: {
+    line: LayerLine;
+    pointToProjection: UsePointToProjectionResult;
+    startArrowX: number;
+    startArrowY: number;
+    startArrowRotation: number;
+    endArrowX: number;
+    endArrowY: number;
+    endArrowRotation: number;
+  }): Array<Feature<MultiPolygon>> => {
     const arrowsFeatures: Array<Feature<MultiPolygon>> = [];
-    const firstSegment = line.segments[0];
-    const startArrowRotation = getRotation(
-      [firstSegment.x1, firstSegment.y1],
-      [firstSegment.x2, firstSegment.y2],
-    );
     const startArrowFeature = this.getLineArrowFeature(
       line.startArrow,
-      firstSegment.x1,
-      firstSegment.y1,
+      startArrowX,
+      startArrowY,
       line.z,
       startArrowRotation,
       line.width,
@@ -257,15 +298,10 @@ export default class Layer {
       arrowsFeatures.push(startArrowFeature);
     }
 
-    const lastSegment = line.segments[line.segments.length - 1];
-    const endArrowRotation = getRotation(
-      [lastSegment.x1, lastSegment.y1],
-      [lastSegment.x2, lastSegment.y2],
-    );
     const endArrowFeature = this.getLineArrowFeature(
       line.endArrow,
-      lastSegment.x2,
-      lastSegment.y2,
+      endArrowX,
+      endArrowY,
       line.z,
       endArrowRotation,
       line.width,