From 4db25c86c8c5c1fc75f3e4028ee80acef7faba69 Mon Sep 17 00:00:00 2001
From: Denis <51781722+rycgar@users.noreply.github.com>
Date: Tue, 12 Apr 2022 19:02:12 +0200
Subject: [PATCH] Implement text justify within the label box

See: https://github.com/openlayers/openlayers/issues/13481
---
 src/ol/render/canvas.js             |  1 +
 src/ol/render/canvas/Executor.js    | 11 +++++++----
 src/ol/render/canvas/Immediate.js   |  1 +
 src/ol/render/canvas/TextBuilder.js |  4 ++++
 4 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/ol/render/canvas.js b/src/ol/render/canvas.js
index 6ec5947a58..46af528f7c 100644
--- a/src/ol/render/canvas.js
+++ b/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.
diff --git a/src/ol/render/canvas/Executor.js b/src/ol/render/canvas/Executor.js
index 1a888b0d15..a5793d55b2 100644
--- a/src/ol/render/canvas/Executor.js
+++ b/src/ol/render/canvas/Executor.js
@@ -239,10 +239,13 @@ class Executor {
       textState.scale[1] * pixelRatio,
     ];
     const textIsArray = Array.isArray(text);
-    const align = horizontalTextAlign(
-      textIsArray ? text[0] : text,
-      textState.textAlign || defaultTextAlign
-    );
+    // See: https://github.com/openlayers/openlayers/issues/13481
+    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;
 
diff --git a/src/ol/render/canvas/Immediate.js b/src/ol/render/canvas/Immediate.js
index ab7a55397a..96e8a0261f 100644
--- a/src/ol/render/canvas/Immediate.js
+++ b/src/ol/render/canvas/Immediate.js
@@ -946,6 +946,7 @@ class CanvasImmediateRenderer extends VectorContext {
     const textAlign = textState.textAlign
       ? textState.textAlign
       : defaultTextAlign;
+    // Ignore justification here, since rich-text and also `'\n'` make less sense for line placement.
     if (!contextTextState) {
       context.font = textState.font;
       context.textAlign = /** @type {CanvasTextAlign} */ (textAlign);
diff --git a/src/ol/render/canvas/TextBuilder.js b/src/ol/render/canvas/TextBuilder.js
index b7bb31708e..73aa96553d 100644
--- a/src/ol/render/canvas/TextBuilder.js
+++ b/src/ol/render/canvas/TextBuilder.js
@@ -211,6 +211,7 @@ class CanvasTextBuilder extends CanvasBuilder {
       }
       this.beginGeometry(geometry, feature);
       const textAlign = textState.textAlign;
+      // Ignore justification here, since rich-text and also `'\n'` make less sense 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'