feat(vector-map): add drawing compartments

Closes MIN-27

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

@@ -16,6 +16,8 @@ import { modelElementsSelector } from '@/redux/modelElements/modelElements.selec
 import { currentModelIdSelector } from '@/redux/models/models.selectors';
 import { getModelElements } from '@/redux/modelElements/modelElements.thunks';
 import { useAppDispatch } from '@/redux/hooks/useAppDispatch';
+import CompartmentSquare from '@/components/Map/MapViewer/MapViewerVector/utils/shapes/CompartmentSquare';
+import CompartmentCircle from '@/components/Map/MapViewer/MapViewerVector/utils/shapes/CompartmentCircle';
 
 export const useOlMapReactionsLayer = ({
   mapInstance,
@@ -33,10 +35,10 @@ export const useOlMapReactionsLayer = ({
   const shapes = useSelector(bioShapesSelector);
   const lineTypes = useSelector(lineTypesSelector);
 
-  const elements: Array<MapElement> = useMemo(() => {
+  const elements: Array<MapElement | CompartmentCircle | CompartmentSquare> = useMemo(() => {
     if (!modelElements || !shapes) return [];
 
-    const validElements: Array<MapElement> = [];
+    const validElements: Array<MapElement | CompartmentCircle | CompartmentSquare> = [];
     modelElements.content.forEach(element => {
       const shape = shapes.find(bioShape => bioShape.sboTerm === element.sboTerm);
       if (shape) {
@@ -60,6 +62,7 @@ export const useOlMapReactionsLayer = ({
             nameVerticalAlign: element.nameVerticalAlign as VerticalAlign,
             nameHorizontalAlign: element.nameHorizontalAlign as HorizontalAlign,
             text: element.name,
+            fontSize: element.fontSize,
             pointToProjection,
             mapInstance,
             modifications: element.modificationResidues,
@@ -67,6 +70,35 @@ export const useOlMapReactionsLayer = ({
             bioShapes: shapes,
           }),
         );
+      } else if (element.sboTerm === 'SBO:0000290') {
+        const compartmentProps = {
+          x: element.x,
+          y: element.y,
+          nameX: element.nameX,
+          nameY: element.nameY,
+          nameHeight: element.nameHeight,
+          nameWidth: element.nameWidth,
+          width: element.width,
+          height: element.height,
+          zIndex: element.z,
+          innerWidth: element.innerWidth,
+          outerWidth: element.outerWidth,
+          thickness: element.thickness,
+          fontColor: element.fontColor,
+          fillColor: element.fillColor,
+          borderColor: element.borderColor,
+          nameVerticalAlign: element.nameVerticalAlign as VerticalAlign,
+          nameHorizontalAlign: element.nameHorizontalAlign as HorizontalAlign,
+          text: element.name,
+          fontSize: element.fontSize,
+          pointToProjection,
+          mapInstance,
+        };
+        if (element.shape === 'OVAL_COMPARTMENT') {
+          validElements.push(new CompartmentCircle(compartmentProps));
+        } else if (element.shape === 'SQUARE_COMPARTMENT') {
+          validElements.push(new CompartmentSquare(compartmentProps));
+        }
       }
     });
     return validElements;