Merge pull request #13901 from MoonE/text-types

Make Text options typesafe

src/ol/format/KML.js

@@ -937,6 +937,7 @@ class KML extends XMLFeature {
  */
 function createNameStyleFunction(foundStyle, name) {
   const textOffset = [0, 0];
+  /** @type {CanvasTextAlign} */
   let textAlign = 'start';
   const imageStyle = foundStyle.getImage();
   if (imageStyle) {

src/ol/render/canvas.js

@@ -58,10 +58,10 @@ import {getFontParameters} from '../css.js';
 /**
  * @typedef {Object} TextState
  * @property {string} font Font.
- * @property {string} [textAlign] TextAlign.
+ * @property {CanvasTextAlign} [textAlign] TextAlign.
- * @property {string} [justify] Justify.
+ * @property {import("../style/Text.js").TextJustify} [justify] Justify.
- * @property {string} textBaseline TextBaseline.
+ * @property {CanvasTextBaseline} textBaseline TextBaseline.
- * @property {import('../style/Text.js').TextPlacement} [placement] Placement.
+ * @property {import("../style/Text.js").TextPlacement} [placement] Placement.
  * @property {number} [maxAngle] MaxAngle.
  * @property {boolean} [overflow] Overflow.
  * @property {import("../style/Fill.js").default} [backgroundFill] BackgroundFill.
@@ -134,13 +134,13 @@ export const defaultStrokeStyle = '#000';
 
 /**
  * @const
- * @type {string}
+ * @type {CanvasTextAlign}
  */
 export const defaultTextAlign = 'center';
 
 /**
  * @const
- * @type {string}
+ * @type {CanvasTextBaseline}
  */
 export const defaultTextBaseline = 'middle';
 

src/ol/render/canvas/Executor.js

@@ -91,7 +91,7 @@ const rtlRegEx = new RegExp(
 
 /**
  * @param {string} text Text.
- * @param {string} align Alignment.
+ * @param {CanvasTextAlign} align Alignment.
  * @return {number} Text alignment.
  */
 function horizontalTextAlign(text, align) {

src/ol/render/canvas/Immediate.js

@@ -947,10 +947,8 @@ class CanvasImmediateRenderer extends VectorContext {
       : defaultTextAlign;
     if (!contextTextState) {
       context.font = textState.font;
-      context.textAlign = /** @type {CanvasTextAlign} */ (textAlign);
+      context.textAlign = textAlign;
-      context.textBaseline = /** @type {CanvasTextBaseline} */ (
+      context.textBaseline = textState.textBaseline;
-        textState.textBaseline
-      );
       this.contextTextState_ = {
         font: textState.font,
         textAlign: textAlign,
@@ -962,16 +960,12 @@ class CanvasImmediateRenderer extends VectorContext {
         context.font = textState.font;
       }
       if (contextTextState.textAlign != textAlign) {
-        contextTextState.textAlign = /** @type {CanvasTextAlign} */ (textAlign);
+        contextTextState.textAlign = textAlign;
-        context.textAlign = /** @type {CanvasTextAlign} */ (textAlign);
+        context.textAlign = textAlign;
       }
       if (contextTextState.textBaseline != textState.textBaseline) {
-        contextTextState.textBaseline = /** @type {CanvasTextBaseline} */ (
+        contextTextState.textBaseline = textState.textBaseline;
-          textState.textBaseline
+        context.textBaseline = textState.textBaseline;
-        );
-        context.textBaseline = /** @type {CanvasTextBaseline} */ (
-          textState.textBaseline
-        );
       }
     }
   }

src/ol/style/Text.js

@@ -12,6 +12,10 @@ import {toSize} from '../size.js';
  * {@link module:ol/geom/MultiPolygon~MultiPolygon}.
  */
 
+/**
+ * @typedef {'left' | 'center' | 'right'} TextJustify
+ */
+
 /**
  * The default fill color to use if no fill was set at construction time; a
  * blackish `#333`.
@@ -22,8 +26,8 @@ const DEFAULT_FILL_COLOR = '#333';
 
 /**
  * @typedef {Object} Options
- * @property {string} [font] Font style as CSS 'font' value, see:
+ * @property {string} [font] Font style as CSS `font` value, see:
- * https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/font. Default is '10px sans-serif'
+ * https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/font. Default is `'10px sans-serif'`
  * @property {number} [maxAngle=Math.PI/4] When `placement` is set to `'line'`, allow a maximum angle between adjacent characters.
  * The expected value is in radians, and the default is 45° (`Math.PI / 4`).
  * @property {number} [offsetX=0] Horizontal text offset in pixels. A positive will shift the text right.
@@ -39,15 +43,15 @@ const DEFAULT_FILL_COLOR = '#333';
  * render and the font to use (or `''` to use the text style's font). A line break has to be a separate tuple (i.e. `'\n', ''`).
  * **Example:** `['foo', 'bold 10px sans-serif', ' bar', 'italic 10px sans-serif', ' baz', '']` will yield "**foo** *bar* baz".
  * **Note:** Rich text is not supported for the immediate rendering API.
- * @property {string} [textAlign] Text alignment. Possible values: 'left', 'right', 'center', 'end' or 'start'.
+ * @property {CanvasTextAlign} [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
+ * 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.
+ * @property {TextJustify} [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',
+ * @property {CanvasTextBaseline} [textBaseline='middle'] Text base line. Possible values: `'bottom'`, `'top'`, `'middle'`, `'alphabetic'`,
- * 'hanging', 'ideographic'.
+ * `'hanging'`, `'ideographic'`.
  * @property {import("./Fill.js").default} [fill] Fill style. If none is provided, we'll use a dark fill-style (#333).
  * @property {import("./Stroke.js").default} [stroke] Stroke style.
  * @property {import("./Fill.js").default} [backgroundFill] Fill style for the text background when `placement` is
@@ -108,19 +112,19 @@ class Text {
 
     /**
      * @private
-     * @type {string|undefined}
+     * @type {CanvasTextAlign|undefined}
      */
     this.textAlign_ = options.textAlign;
 
     /**
      * @private
-     * @type {string|undefined}
+     * @type {TextJustify|undefined}
      */
     this.justify_ = options.justify;
 
     /**
      * @private
-     * @type {string|undefined}
+     * @type {CanvasTextBaseline|undefined}
      */
     this.textBaseline_ = options.textBaseline;
 
@@ -345,7 +349,7 @@ class Text {
 
   /**
    * Get the text alignment.
-   * @return {string|undefined} Text align.
+   * @return {CanvasTextAlign|undefined} Text align.
    * @api
    */
   getTextAlign() {
@@ -354,7 +358,7 @@ class Text {
 
   /**
    * Get the justification.
-   * @return {string|undefined} Justification.
+   * @return {TextJustify|undefined} Justification.
    * @api
    */
   getJustify() {
@@ -363,7 +367,7 @@ class Text {
 
   /**
    * Get the text baseline.
-   * @return {string|undefined} Text baseline.
+   * @return {CanvasTextBaseline|undefined} Text baseline.
    * @api
    */
   getTextBaseline() {
@@ -521,7 +525,7 @@ class Text {
   /**
    * Set the text alignment.
    *
-   * @param {string|undefined} textAlign Text align.
+   * @param {CanvasTextAlign|undefined} textAlign Text align.
    * @api
    */
   setTextAlign(textAlign) {
@@ -531,7 +535,7 @@ class Text {
   /**
    * Set the justification.
    *
-   * @param {string|undefined} justify Justification.
+   * @param {TextJustify|undefined} justify Justification.
    * @api
    */
   setJustify(justify) {
@@ -541,7 +545,7 @@ class Text {
   /**
    * Set the text baseline.
    *
-   * @param {string|undefined} textBaseline Text baseline.
+   * @param {CanvasTextBaseline|undefined} textBaseline Text baseline.
    * @api
    */
   setTextBaseline(textBaseline) {