Merge branch 'feat/MIN-55-boolean' into 'development'

feat(vector-map): implement reaction operator drawing

Closes MIN-55

See merge request !290

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

@@ -7,6 +7,7 @@ import { Arrow, ArrowType, Color } from '@/types/models';
 import { UsePointToProjectionResult } from '@/utils/map/usePointToProjection';
 import getShapePolygon from '@/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/getShapePolygon';
 import Polygon from 'ol/geom/Polygon';
+import { WHITE_COLOR } from '@/components/Map/MapViewer/MapViewerVector/MapViewerVector.constants';
 
 export default function getArrowFeature({
   arrowTypes,
@@ -48,7 +49,7 @@ export default function getArrowFeature({
       geometry: arrowPolygon,
       zIndex,
       borderColor: color,
-      fillColor: shape.fill === false ? undefined : color,
+      fillColor: shape.fill === false ? WHITE_COLOR : color,
       lineWidth,
     });
     arrowPolygon.rotate(rotation, pointToProjection({ x, y }));

src/components/Map/MapViewer/MapViewerVector/utils/shapes/reaction/Reaction.test.ts

@@ -39,7 +39,7 @@ describe('Layer', () => {
   it('should initialize a Reaction class', () => {
     const reaction = new Reaction(props);
 
-    expect(reaction.features.length).toBe(8);
+    expect(reaction.features.length).toBe(10);
     expect(reaction.features).toBeInstanceOf(Array<Feature>);
   });
 });

src/components/Map/MapViewer/MapViewerVector/utils/shapes/reaction/Reaction.ts

@@ -2,7 +2,7 @@
 import { ArrowType, Line, LineType, Operator, ReactionProduct, Shape } from '@/types/models';
 import { UsePointToProjectionResult } from '@/utils/map/usePointToProjection';
 import { Feature } from 'ol';
-import { LineString, MultiPolygon } from 'ol/geom';
+import { Circle, LineString, MultiPolygon } from 'ol/geom';
 import getRotation from '@/components/Map/MapViewer/MapViewerVector/utils/shapes/coords/getRotation';
 import getStyle from '@/components/Map/MapViewer/MapViewerVector/utils/shapes/style/getStyle';
 import getArrowFeature from '@/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/getArrowFeature';
@@ -12,6 +12,8 @@ import Style from 'ol/style/Style';
 import { WHITE_COLOR } from '@/components/Map/MapViewer/MapViewerVector/MapViewerVector.constants';
 import { FeatureLike } from 'ol/Feature';
 import { MapInstance } from '@/types/map';
+import getTextStyle from '@/components/Map/MapViewer/MapViewerVector/utils/shapes/text/getTextStyle';
+import { rgbToHex } from '@/components/Map/MapViewer/MapViewerVector/utils/shapes/style/rgbToHex';
 
 export interface ReactionProps {
   line: Line;
@@ -95,6 +97,7 @@ export default class Reaction {
       lineFeature = this.getLineFeature(operator.line);
       this.features.push(lineFeature.lineFeature);
       this.features.push(...lineFeature.arrowsFeatures);
+      this.features.push(this.getOperator(operator));
     });
   }
 
@@ -239,6 +242,55 @@ export default class Reaction {
     return squareFeature;
   }
 
+  protected getOperator(operator: Operator): Feature<Circle> {
+    const firstSegment = operator.line.segments[0];
+    let radius: number;
+
+    if (operator.operatorText) {
+      radius = Math.abs(
+        this.pointToProjection({ x: 0, y: 0 })[0] - this.pointToProjection({ x: 6, y: 0 })[0],
+      );
+    } else {
+      radius = Math.abs(
+        this.pointToProjection({ x: 0, y: 0 })[0] - this.pointToProjection({ x: 1.8, y: 0 })[0],
+      );
+    }
+
+    const circle = new Circle(
+      this.pointToProjection({ x: firstSegment.x1, y: firstSegment.y1 }),
+      radius,
+    );
+
+    const circleStyle = getStyle({
+      geometry: circle,
+      zIndex: this.zIndex + 1,
+      lineWidth: 1,
+      borderColor: this.line.color,
+      fillColor: this.line.color,
+    });
+
+    if (operator.operatorText) {
+      circleStyle.getFill()?.setColor(rgbToHex(WHITE_COLOR));
+      const textStyle = getTextStyle({
+        text: operator.operatorText,
+        fontSize: 10,
+        color: '#000000FF',
+        zIndex: this.zIndex,
+        horizontalAlign: 'CENTER',
+      }).getText();
+      if (textStyle) {
+        circleStyle.setText(textStyle);
+      }
+    }
+    const circleFeature = new Feature({
+      geometry: circle,
+      style: circleStyle,
+      lineWidth: 1,
+    });
+    circleFeature.setStyle(this.getStyle.bind(this));
+    return circleFeature;
+  }
+
   protected getStyle(feature: FeatureLike, resolution: number): Style | Array<Style> | void {
     const minResolution = this.mapInstance?.getView().getMinResolution();
     const style = feature.get('style');