feat(vector-map): text placement for modifications

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

 /* eslint-disable no-magic-numbers */
-import { Style, Text } from 'ol/style';
+import { Style } from 'ol/style';
 import { UsePointToProjectionResult } from '@/utils/map/usePointToProjection';
 import getStroke from '@/components/Map/MapViewer/MapViewerVector/utils/shapes/style/getStroke';
 import getFill from '@/components/Map/MapViewer/MapViewerVector/utils/shapes/style/getFill';
@@ -18,6 +18,8 @@ import {
 } from '@/components/Map/MapViewer/MapViewerVector/MapViewerVector.constants';
 import BaseMultiPolygon from '@/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/BaseMultiPolygon';
 import getStyle from '@/components/Map/MapViewer/MapViewerVector/utils/shapes/style/getStyle';
+import getTextCoords from '@/components/Map/MapViewer/MapViewerVector/utils/shapes/text/getTextCoords';
+import getTextStyle from '@/components/Map/MapViewer/MapViewerVector/utils/shapes/text/getTextStyle';
 
 export type MapElementProps = {
   shapes: Array<Shape>;
@@ -175,24 +177,37 @@ export default class MapElement extends BaseMultiPolygon {
         fill: getFill({ color: rgbToHex(modification.fillColor) }),
         zIndex: modification.z,
       });
-      const modificationText = modification.stateAbbreviation
-        ? modification.stateAbbreviation
-        : modification.name;
-      if (modificationText) {
-        modificationStyle.setText(
-          new Text({
-            text: modificationText,
-            font: `${modification.fontSize}pt Arial`,
-            textAlign: 'center',
-            textBaseline: 'middle',
-            fill: getFill({ color: '#000' }),
-            overflow: true,
-          }),
-        );
-        this.polygonsTexts.push(modificationText);
-      }
       this.styles.push(modificationStyle);
     });
+    const modificationText = modification.stateAbbreviation
+      ? modification.stateAbbreviation
+      : modification.name;
+    if (modificationText) {
+      const modificationTextCoords = getTextCoords({
+        x: modification.nameX,
+        y: modification.nameY,
+        width: modification.nameWidth,
+        height: modification.nameHeight,
+        fontSize: modification.fontSize,
+        verticalAlign: modification.nameVerticalAlign,
+        horizontalAlign: modification.nameHorizontalAlign,
+        pointToProjection: this.pointToProjection,
+      });
+      const modificationTextPolygon = new Polygon([
+        [modificationTextCoords, modificationTextCoords],
+      ]);
+      const modificationTextStyle = getTextStyle({
+        text: modificationText,
+        fontSize: modification.fontSize,
+        color: rgbToHex(BLACK_COLOR),
+        zIndex: modification.z,
+        horizontalAlign: modification.nameHorizontalAlign,
+      });
+      modificationTextStyle.setGeometry(modificationTextPolygon);
+      this.styles.push(modificationTextStyle);
+      this.polygonsTexts.push(modificationText);
+      this.polygons.push(modificationTextPolygon);
+    }
   }
 
   drawActiveBorder(homodimerShift: number, homodimerOffset: number): void {

src/models/modelElementModificationSchema.ts

@@ -10,6 +10,12 @@ export const modelElementModificationSchema = z.object({
   z: z.number(),
   width: z.number(),
   height: z.number(),
+  nameX: z.number(),
+  nameY: z.number(),
+  nameWidth: z.number(),
+  nameHeight: z.number(),
+  nameVerticalAlign: z.enum(['TOP', 'MIDDLE', 'BOTTOM']),
+  nameHorizontalAlign: z.enum(['LEFT', 'RIGHT', 'CENTER', 'END', 'START']),
   species: z.number(),
   borderColor: colorSchema,
   fillColor: colorSchema,