Allow the user to choose the text anchor for labels

src/components/Modals/LayerSettings.tsx

@@ -187,6 +187,22 @@ function makeSettingsLabels(
   const rendererParameters = props.rendererParameters as LabelsParameters;
   const isProportional = !!props.rendererParameters.proportional;
 
+  const redrawLabels = () => {
+    // We redraw the labels by toggling the visibility of the layer
+    setLayersDescriptionStoreBase(
+      produce((draft: LayersDescriptionStoreType) => {
+        const layer = draft.layers.find((l) => l.id === props.id) as LayerDescriptionLabels;
+        layer.visible = false;
+      }),
+    );
+    setLayersDescriptionStoreBase(
+      produce((draft: LayersDescriptionStoreType) => {
+        const layer = draft.layers.find((l) => l.id === props.id) as LayerDescriptionLabels;
+        layer.visible = true;
+      }),
+    );
+  };
+
   return <>
     <InputFieldSelect
       disabled={true}
@@ -306,6 +322,27 @@ function makeSettingsLabels(
         );
       }}
     />
+    <InputFieldSelect
+      label={LL().LayerSettings.TextAnchor()}
+      value={rendererParameters.default.textAnchor}
+      onChange={(v) => {
+        updateProp(props.id, ['rendererParameters', 'default', 'textAnchor'], v);
+        // Update the textAnchor properties for each "specific" parameters
+        setLayersDescriptionStoreBase(
+          produce((draft: LayersDescriptionStoreType) => {
+            const layer = draft.layers.find((l) => l.id === props.id) as LayerDescriptionLabels;
+            Object.keys((layer.rendererParameters as LabelsParameters).specific).forEach((k) => {
+              // eslint-disable-next-line no-param-reassign
+              layer.rendererParameters.specific[+k].textAnchor = v as 'start' | 'middle' | 'end';
+            });
+          }),
+        );
+      }}
+    >
+      <option value="start">{LL().LayerSettings.TextAnchorStart()}</option>
+      <option value="middle">{LL().LayerSettings.TextAnchorMiddle()}</option>
+      <option value="end">{LL().LayerSettings.TextAnchorEnd()}</option>
+    </InputFieldSelect>
     <InputFieldNumber
       label={ LL().LayerSettings.XOffset() }
       value={rendererParameters.default.textOffset[0]}
@@ -323,6 +360,7 @@ function makeSettingsLabels(
               });
             }),
           );
+          redrawLabels();
         }
       }
       min={-100}
@@ -346,6 +384,7 @@ function makeSettingsLabels(
               });
             }),
           );
+          redrawLabels();
         }
       }
       min={-100}

src/global.d.ts

@@ -459,7 +459,7 @@ export interface SingleLabelParameters {
   // The font weight of the labels
   fontWeight: 'normal' | 'bold',
   // The text anchor of the labels
-  textAnchor: string,
+  textAnchor: 'start' | 'middle' | 'end',
   // The text alignment of the labels
   textAlignment: string,
   // The text offset of the labels

src/i18n/en/index.ts

@@ -935,6 +935,10 @@ const en = {
     TextColor: 'Text color',
     XOffset: 'X offset',
     YOffset: 'Y offset',
+    TextAnchor: 'Text anchor',
+    TextAnchorStart: 'Start',
+    TextAnchorMiddle: 'Middle',
+    TextAnchorEnd: 'End',
     FontStyle: 'Font style',
     FontWeight: 'Font weight',
     BufferAroundText: 'Buffer around text',

src/i18n/fr/index.ts

@@ -935,6 +935,10 @@ const fr = {
     TextColor: 'Couleur du texte',
     XOffset: 'Décalage en X',
     YOffset: 'Décalage en Y',
+    TextAnchor: 'Ancrage du texte',
+    TextAnchorStart: 'Début',
+    TextAnchorMiddle: 'Milieu',
+    TextAnchorEnd: 'Fin',
     FontStyle: 'Style de police',
     FontWeight: 'Épaisseur de police',
     BufferAroundText: 'Tampon autour du texte',

src/i18n/i18n-types.ts

@@ -3280,6 +3280,22 @@ type RootTranslation = {
 		 * Y​ ​o​f​f​s​e​t
 		 */
 		YOffset: string
+		/**
+		 * T​e​x​t​ ​a​n​c​h​o​r
+		 */
+		TextAnchor: string
+		/**
+		 * S​t​a​r​t
+		 */
+		TextAnchorStart: string
+		/**
+		 * M​i​d​d​l​e
+		 */
+		TextAnchorMiddle: string
+		/**
+		 * E​n​d
+		 */
+		TextAnchorEnd: string
 		/**
 		 * F​o​n​t​ ​s​t​y​l​e
 		 */
@@ -7612,6 +7628,22 @@ export type TranslationFunctions = {
 		 * Y offset
 		 */
 		YOffset: () => LocalizedString
+		/**
+		 * Text anchor
+		 */
+		TextAnchor: () => LocalizedString
+		/**
+		 * Start
+		 */
+		TextAnchorStart: () => LocalizedString
+		/**
+		 * Middle
+		 */
+		TextAnchorMiddle: () => LocalizedString
+		/**
+		 * End
+		 */
+		TextAnchorEnd: () => LocalizedString
 		/**
 		 * Font style
 		 */