feat(vector-map): implement reactions of three elements

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,
+        operators: reaction.operators,
         zIndex: reaction.z,
         lineTypes,
         arrowTypes,

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,
+      operators: newReactionFixture.operators,
       shapes: shapesFixture,
       zIndex: newReactionFixture.z,
       pointToProjection: jest.fn(() => [10, 10]),
@@ -38,7 +39,7 @@ describe('Layer', () => {
   it('should initialize a Reaction class', () => {
     const reaction = new Reaction(props);
 
-    expect(reaction.features.length).toBe(6);
+    expect(reaction.features.length).toBe(8);
     expect(reaction.features).toBeInstanceOf(Array<Feature>);
   });
 });

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

 /* eslint-disable no-magic-numbers */
-import { ArrowType, Line, LineType, ReactionProduct, Shape } from '@/types/models';
+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';
@@ -17,6 +17,7 @@ export interface ReactionProps {
   line: Line;
   products: Array<ReactionProduct>;
   reactants: Array<ReactionProduct>;
+  operators: Array<Operator>;
   zIndex: number;
   lineTypes: Array<LineType>;
   arrowTypes: Array<ArrowType>;
@@ -32,6 +33,8 @@ export default class Reaction {
 
   reactants: Array<ReactionProduct>;
 
+  operators: Array<Operator>;
+
   zIndex: number;
 
   lineTypes: Array<LineType>;
@@ -50,6 +53,7 @@ export default class Reaction {
     line,
     products,
     reactants,
+    operators,
     zIndex,
     lineTypes,
     arrowTypes,
@@ -60,6 +64,7 @@ export default class Reaction {
     this.line = line;
     this.products = products;
     this.reactants = reactants;
+    this.operators = operators;
     this.zIndex = zIndex;
     this.lineTypes = lineTypes;
     this.arrowTypes = arrowTypes;
@@ -86,6 +91,11 @@ export default class Reaction {
       this.features.push(lineFeature.lineFeature);
       this.features.push(...lineFeature.arrowsFeatures);
     });
+    this.operators.forEach(operator => {
+      lineFeature = this.getLineFeature(operator.line);
+      this.features.push(lineFeature.lineFeature);
+      this.features.push(...lineFeature.arrowsFeatures);
+    });
   }
 
   private getLineFeature(line: Line): {
@@ -206,6 +216,8 @@ export default class Reaction {
       const squareStyle = getStyle({
         geometry: squarePolygon,
         fillColor: WHITE_COLOR,
+        lineWidth: this.line.width,
+        borderColor: this.line.color,
         zIndex: this.zIndex + 1,
       });
       squarePolygon.rotate(
@@ -221,7 +233,7 @@ export default class Reaction {
     const squareFeature = new Feature({
       geometry: new MultiPolygon(polygons),
       style: styles,
-      lineWidth: 1,
+      lineWidth: this.line.width,
     });
     squareFeature.setStyle(this.getStyle.bind(this));
     return squareFeature;

src/models/newReactionSchema.ts

@@ -2,6 +2,7 @@ import { z } from 'zod';
 import { lineSchema } from '@/models/lineSchema';
 import { reactionProduct } from '@/models/reactionProduct';
 import { referenceSchema } from '@/models/referenceSchema';
+import { operatorSchema } from '@/models/operatorSchema';
 
 export const newReactionSchema = z.object({
   id: z.number(),
@@ -18,7 +19,7 @@ export const newReactionSchema = z.object({
   modifiers: z.array(reactionProduct),
   name: z.string(),
   notes: z.string(),
-  operators: z.array(z.unknown()),
+  operators: z.array(operatorSchema),
   processCoordinates: z.null(),
   products: z.array(reactionProduct),
   reactants: z.array(reactionProduct),

src/models/operatorSchema.ts

@@ -5,7 +5,7 @@ export const operatorSchema = z.object({
   id: z.number(),
   line: lineSchema,
   inputs: z.array(z.object({ id: z.number() })),
-  outputs: z.any().optional(),
+  outputs: z.array(z.object({ id: z.number() })),
   operatorText: z.string(),
   reactantOperator: z.boolean(),
   productOperator: z.boolean(),

src/types/models.ts

@@ -82,6 +82,7 @@ import { shapeRelAbsSchema } from '@/models/shapeRelAbsSchema';
 import { shapeRelAbsBezierPointSchema } from '@/models/shapeRelAbsBezierPointSchema';
 import { newReactionSchema } from '@/models/newReactionSchema';
 import { reactionProduct } from '@/models/reactionProduct';
+import { operatorSchema } from '@/models/operatorSchema';
 
 export type Project = z.infer<typeof projectSchema>;
 export type OverviewImageView = z.infer<typeof overviewImageView>;
@@ -121,6 +122,7 @@ export type Reaction = z.infer<typeof reactionSchema>;
 export type NewReaction = z.infer<typeof newReactionSchema>;
 const newReactionsSchema = pageableSchema(newReactionSchema);
 export type NewReactions = z.infer<typeof newReactionsSchema>;
+export type Operator = z.infer<typeof operatorSchema>;
 export type ReactionProduct = z.infer<typeof reactionProduct>;
 export type Reference = z.infer<typeof referenceSchema>;
 export type ReactionLine = z.infer<typeof reactionLineSchema>;