feat(vector-map): add drawing for reaction modifiers lines

src/components/Map/MapViewer/MapViewerVector/utils/config/reactionsLayer/useOlMapReactionsLayer.ts

@@ -58,6 +58,7 @@ export const useOlMapReactionsLayer = ({
         line: reaction.line,
         products: reaction.products,
         reactants: reaction.reactants,
+        modifiers: reaction.modifiers,
         operators: reaction.operators,
         zIndex: reaction.z,
         lineTypes,

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

@@ -26,6 +26,7 @@ describe('Layer', () => {
       line: newReactionFixture.line,
       products: newReactionFixture.products,
       reactants: newReactionFixture.reactants,
+      modifiers: newReactionFixture.modifiers,
       operators: newReactionFixture.operators,
       shapes: shapesFixture,
       zIndex: newReactionFixture.z,
@@ -39,7 +40,7 @@ describe('Layer', () => {
   it('should initialize a Reaction class', () => {
     const reaction = new Reaction(props);
 
-    expect(reaction.features.length).toBe(10);
+    expect(reaction.features.length).toBe(12);
     expect(reaction.features).toBeInstanceOf(Array<Feature>);
   });
 });

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

@@ -19,6 +19,7 @@ export interface ReactionProps {
   line: Line;
   products: Array<ReactionProduct>;
   reactants: Array<ReactionProduct>;
+  modifiers: Array<ReactionProduct>;
   operators: Array<Operator>;
   zIndex: number;
   lineTypes: Array<LineType>;
@@ -35,6 +36,8 @@ export default class Reaction {
 
   reactants: Array<ReactionProduct>;
 
+  modifiers: Array<ReactionProduct>;
+
   operators: Array<Operator>;
 
   zIndex: number;
@@ -55,6 +58,7 @@ export default class Reaction {
     line,
     products,
     reactants,
+    modifiers,
     operators,
     zIndex,
     lineTypes,
@@ -66,6 +70,7 @@ export default class Reaction {
     this.line = line;
     this.products = products;
     this.reactants = reactants;
+    this.modifiers = modifiers;
     this.operators = operators;
     this.zIndex = zIndex;
     this.lineTypes = lineTypes;
@@ -99,6 +104,11 @@ export default class Reaction {
       this.features.push(...lineFeature.arrowsFeatures);
       this.features.push(this.getOperator(operator));
     });
+    this.modifiers.forEach(modifier => {
+      lineFeature = this.getLineFeature(modifier.line);
+      this.features.push(lineFeature.lineFeature);
+      this.features.push(...lineFeature.arrowsFeatures);
+    });
   }
 
   private getLineFeature(line: Line): {