diff --git a/src/ol/format/KML.js b/src/ol/format/KML.js index 600504f10d..5ba30be414 100644 --- a/src/ol/format/KML.js +++ b/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) { diff --git a/src/ol/render/canvas.js b/src/ol/render/canvas.js index 644158097d..01025e5d77 100644 --- a/src/ol/render/canvas.js +++ b/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 {string} [justify] Justify. - * @property {string} textBaseline TextBaseline. - * @property {import('../style/Text.js').TextPlacement} [placement] Placement. + * @property {CanvasTextAlign} [textAlign] TextAlign. + * @property {import("../style/Text.js").TextJustify} [justify] Justify. + * @property {CanvasTextBaseline} textBaseline TextBaseline. + * @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'; diff --git a/src/ol/render/canvas/Executor.js b/src/ol/render/canvas/Executor.js index fc2adc9787..09da10e950 100644 --- a/src/ol/render/canvas/Executor.js +++ b/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) { diff --git a/src/ol/render/canvas/Immediate.js b/src/ol/render/canvas/Immediate.js index 05b333cfe2..e076397a8a 100644 --- a/src/ol/render/canvas/Immediate.js +++ b/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.textBaseline = /** @type {CanvasTextBaseline} */ ( - textState.textBaseline - ); + context.textAlign = textAlign; + context.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); - context.textAlign = /** @type {CanvasTextAlign} */ (textAlign); + contextTextState.textAlign = textAlign; + context.textAlign = textAlign; } if (contextTextState.textBaseline != textState.textBaseline) { - contextTextState.textBaseline = /** @type {CanvasTextBaseline} */ ( - textState.textBaseline - ); - context.textBaseline = /** @type {CanvasTextBaseline} */ ( - textState.textBaseline - ); + contextTextState.textBaseline = textState.textBaseline; + context.textBaseline = textState.textBaseline; } } } diff --git a/src/ol/style/Text.js b/src/ol/style/Text.js index 3bc20c6545..ecd428325d 100644 --- a/src/ol/style/Text.js +++ b/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: - * https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/font. Default is '10px sans-serif' + * @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'` * @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'. - * Default is 'center' for `placement: 'point'`. For `placement: 'line'`, the default is to let the renderer choose a + * @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 * 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', - * 'hanging', 'ideographic'. + * @property {CanvasTextBaseline} [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). * @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) {