Merge pull request #13571 from rycgar/justify-text

Add `justify` option for text style

src/ol/render/canvas.js

@@ -56,6 +56,7 @@ import {getFontParameters} from '../css.js';
  * @typedef {Object} TextState
  * @property {string} font Font.
  * @property {string} [textAlign] TextAlign.
+ * @property {string} [justify] Justify.
  * @property {string} textBaseline TextBaseline.
  * @property {string} [placement] Placement.
  * @property {number} [maxAngle] MaxAngle.

src/ol/render/canvas/Executor.js

@@ -239,10 +239,12 @@ class Executor {
       textState.scale[1] * pixelRatio,
     ];
     const textIsArray = Array.isArray(text);
-    const align = horizontalTextAlign(
-      textIsArray ? text[0] : text,
-      textState.textAlign || defaultTextAlign
-    );
+    const align = textState.justify
+      ? TEXT_ALIGN[textState.justify]
+      : horizontalTextAlign(
+          Array.isArray(text) ? text[0] : text,
+          textState.textAlign || defaultTextAlign
+        );
     const strokeWidth =
       strokeKey && strokeState.lineWidth ? strokeState.lineWidth : 0;
 

src/ol/render/canvas/TextBuilder.js

@@ -211,6 +211,7 @@ class CanvasTextBuilder extends CanvasBuilder {
       }
       this.beginGeometry(geometry, feature);
       const textAlign = textState.textAlign;
+      // No `justify` support for line placement.
       let flatOffset = 0;
       let flatEnd;
       for (let o = 0, oo = ends.length; o < oo; ++o) {
@@ -449,6 +450,7 @@ class CanvasTextBuilder extends CanvasBuilder {
       this.textStates[textKey] = {
         font: textState.font,
         textAlign: textState.textAlign || defaultTextAlign,
+        justify: textState.justify,
         textBaseline: textState.textBaseline || defaultTextBaseline,
         scale: textState.scale,
       };
@@ -581,6 +583,7 @@ class CanvasTextBuilder extends CanvasBuilder {
       textState.maxAngle = textStyle.getMaxAngle();
       textState.placement = textStyle.getPlacement();
       textState.textAlign = textStyle.getTextAlign();
+      textState.justify = textStyle.getJustify();
       textState.textBaseline =
         textStyle.getTextBaseline() || defaultTextBaseline;
       textState.backgroundFill = textStyle.getBackgroundFill();
@@ -617,6 +620,7 @@ class CanvasTextBuilder extends CanvasBuilder {
         textState.font +
         textState.scale +
         (textState.textAlign || '?') +
+        (textState.justify || '?') +
         (textState.textBaseline || '?');
       this.fillKey_ = fillState
         ? typeof fillState.fillStyle == 'string'

src/ol/style/Text.js

@@ -35,6 +35,10 @@ const DEFAULT_FILL_COLOR = '#333';
  * @property {string} [textAlign] Text alignment. Possible values: 'left', 'right', 'center', 'end' or 'start'.
  * Default is 'center' for `placement: 'point'`. For `placement: 'line'`, the default is to let the renderer choose a
  * placement where `maxAngle` is not exceeded.
+ * @property {string} [justify] Text justification within the text box.
+ * If not set, text is justified towards the `textAlign` anchor.
+ * Otherwise, use options `'left'`, `'center'`, or `'right'` to justify the text within the text box.
+ * **Note:** `justify` is ignored for immediate rendering and also for `placement: 'line'`.
  * @property {string} [textBaseline='middle'] Text base line. Possible values: 'bottom', 'top', 'middle', 'alphabetic',
  * 'hanging', 'ideographic'.
  * @property {import("./Fill.js").default} [fill] Fill style. If none is provided, we'll use a dark fill-style (#333).
@@ -101,6 +105,12 @@ class Text {
      */
     this.textAlign_ = options.textAlign;
 
+    /**
+     * @private
+     * @type {string|undefined}
+     */
+    this.justify_ = options.justify;
+
     /**
      * @private
      * @type {string|undefined}
@@ -194,6 +204,7 @@ class Text {
       scale: Array.isArray(scale) ? scale.slice() : scale,
       text: this.getText(),
       textAlign: this.getTextAlign(),
+      justify: this.getJustify(),
       textBaseline: this.getTextBaseline(),
       fill: this.getFill() ? this.getFill().clone() : undefined,
       stroke: this.getStroke() ? this.getStroke().clone() : undefined,
@@ -334,6 +345,15 @@ class Text {
     return this.textAlign_;
   }
 
+  /**
+   * Get the justification.
+   * @return {string|undefined} Justification.
+   * @api
+   */
+  getJustify() {
+    return this.justify_;
+  }
+
   /**
    * Get the text baseline.
    * @return {string|undefined} Text baseline.
@@ -501,6 +521,16 @@ class Text {
     this.textAlign_ = textAlign;
   }
 
+  /**
+   * Set the justification.
+   *
+   * @param {string|undefined} justify Justification.
+   * @api
+   */
+  setJustify(justify) {
+    this.justify_ = justify;
+  }
+
   /**
    * Set the text baseline.
    *