Merge branch 'bugfix/MIN-152-correct-text-coords' into 'development'

bugfix(text): set correct text coords

Closes MIN-152

See merge request !422

src/components/Map/MapViewer/utils/shapes/elements/BaseMultiPolygon.ts

@@ -197,9 +197,11 @@ export default abstract class BaseMultiPolygon {
 
   protected drawText(): void {
     if (this.text) {
+      const lines = this.text.split(/\r\n|\r|\n/).length;
       const textCoords = getTextCoords({
         x: this.nameX,
         y: this.nameY,
+        lines,
         width: this.nameWidth,
         height: this.nameHeight,
         fontSize: this.fontSize,

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

@@ -363,9 +363,11 @@ export default class MapElement extends BaseMultiPolygon {
       ? modification.stateAbbreviation
       : modification.name;
     if (modificationText) {
+      const lines = modificationText.split(/\r\n|\r|\n/).length;
       const modificationTextCoords = getTextCoords({
         x: modification.nameX,
         y: modification.nameY,
+        lines,
         width: modification.nameWidth,
         height: modification.nameHeight,
         fontSize: modification.fontSize,

src/components/Map/MapViewer/utils/shapes/layer/elements/LayerText.ts

@@ -134,9 +134,11 @@ export default class LayerText {
     this.mapSize = mapSize;
     this.pointToProjection = pointToProjection;
 
+    const lines = this.text.split(/\r\n|\r|\n/).length;
     const textCoords = getTextCoords({
       x,
       y,
+      lines,
       height,
       width,
       fontSize,
@@ -293,10 +295,12 @@ export default class LayerText {
     if (geometry && geometry instanceof Polygon) {
       const polygonExtent = geometry.getExtent();
       if (polygonExtent) {
+        const lines = this.text.split(/\r\n|\r|\n/).length;
         const boundingBox = getBoundingBoxFromExtent(polygonExtent, this.mapSize);
         const textCoords = getTextCoords({
           x: boundingBox.x,
           y: boundingBox.y,
+          lines,
           height: boundingBox.height,
           width: boundingBox.width,
           fontSize: this.fontSize,

src/components/Map/MapViewer/utils/shapes/text/getTextCoords.ts

@@ -6,6 +6,7 @@ import { Coordinate } from 'ol/coordinate';
 export default function getTextCoords({
   x,
   y,
+  lines = 1,
   height,
   width,
   fontSize,
@@ -16,6 +17,7 @@ export default function getTextCoords({
 }: {
   x: number;
   y: number;
+  lines?: number;
   height: number;
   width: number;
   fontSize: number;
@@ -28,12 +30,11 @@ export default function getTextCoords({
   const maxX = x + width;
   const minY = y;
   const maxY = y + height;
-
   let textY = (minY + maxY) / 2;
   if (verticalAlign === 'TOP') {
-    textY = minY + (fontSize * 4) / 6;
+    textY = minY + fontSize / 2 + (fontSize * (lines - 1)) / 2;
   } else if (verticalAlign === 'BOTTOM') {
-    textY = maxY - (fontSize * 4) / 6;
+    textY = maxY - fontSize / 2;
   }
 
   let textX = (minX + maxX) / 2;