Move olx.style.TextOptions to ol/style/Text

This commit is contained in:
Michael Kuenzli
2018-04-17 16:51:05 +02:00
parent 2d620e5537
commit 1e17ddb8d6
2 changed files with 32 additions and 175 deletions

View File

@@ -49,180 +49,6 @@ olx.render.State.prototype.resolution;
olx.render.State.prototype.rotation; olx.render.State.prototype.rotation;
/**
* @typedef {{font: (string|undefined),
* maxAngle: (number|undefined),
* offsetX: (number|undefined),
* offsetY: (number|undefined),
* overflow: (boolean|undefined),
* placement: (module:ol/style/Text~TextPlacement|string|undefined),
* scale: (number|undefined),
* rotateWithView: (boolean|undefined),
* rotation: (number|undefined),
* text: (string|undefined),
* textAlign: (string|undefined),
* textBaseline: (string|undefined),
* fill: (module:ol/style/Fill~Fill|undefined),
* stroke: (module:ol/style/Stroke~Stroke|undefined),
* backgroundFill: (module:ol/style/Fill~Fill|undefined),
* backgroundStroke: (module:ol/style/Stroke~Stroke|undefined),
* padding: (Array.<number>|undefined)}}
*/
olx.style.TextOptions;
/**
* Font style as CSS 'font' value, see:
* {@link https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/font}.
* Default is '10px sans-serif'
* @type {string|undefined}
* @api
*/
olx.style.TextOptions.prototype.font;
/**
* 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`).
* @type {number|undefined}
* @api
*/
olx.style.TextOptions.prototype.maxAngle;
/**
* Horizontal text offset in pixels. A positive will shift the text right.
* Default is `0`.
* @type {number|undefined}
* @api
*/
olx.style.TextOptions.prototype.offsetX;
/**
* Vertical text offset in pixels. A positive will shift the text down. Default
* is `0`.
* @type {number|undefined}
* @api
*/
olx.style.TextOptions.prototype.offsetY;
/**
* For polygon labels or when `placement` is set to `'line'`, allow text to
* exceed the width of the polygon at the label position or the length of
* the path that it follows. Default is `false`.
* @type {boolean|undefined}
* @api
*/
olx.style.TextOptions.prototype.overflow;
/**
* Text placement.
* @type {module:ol/style/Text~TextPlacement|undefined}
* @api
*/
olx.style.TextOptions.prototype.placement;
/**
* Scale.
* @type {number|undefined}
* @api
*/
olx.style.TextOptions.prototype.scale;
/**
* Whether to rotate the text with the view. Default is `false`.
* @type {boolean|undefined}
* @api
*/
olx.style.TextOptions.prototype.rotateWithView;
/**
* Rotation in radians (positive rotation clockwise). Default is `0`.
* @type {number|undefined}
* @api
*/
olx.style.TextOptions.prototype.rotation;
/**
* Text content.
* @type {string|undefined}
* @api
*/
olx.style.TextOptions.prototype.text;
/**
* 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.
* @type {string|undefined}
* @api
*/
olx.style.TextOptions.prototype.textAlign;
/**
* Text base line. Possible values: 'bottom', 'top', 'middle', 'alphabetic',
* 'hanging', 'ideographic'. Default is 'middle'.
* @type {string|undefined}
* @api
*/
olx.style.TextOptions.prototype.textBaseline;
/**
* Fill style. If none is provided, we'll use a dark fill-style (#333).
* @type {module:ol/style/Fill~Fill|undefined}
* @api
*/
olx.style.TextOptions.prototype.fill;
/**
* Stroke style.
* @type {module:ol/style/Stroke~Stroke|undefined}
* @api
*/
olx.style.TextOptions.prototype.stroke;
/**
* Fill style for the text background when `placement` is `'point'`. Default is
* no fill.
* @type {module:ol/style/Fill~Fill|undefined}
* @api
*/
olx.style.TextOptions.prototype.backgroundFill;
/**
* Stroke style for the text background when `placement` is `'point'`. Default
* is no stroke.
* @type {module:ol/style/Stroke~Stroke|undefined}
* @api
*/
olx.style.TextOptions.prototype.backgroundStroke;
/**
* Padding in pixels around the text for decluttering and background. The order
* of values in the array is `[top, right, bottom, left]`. Default is
* `[0, 0, 0, 0]`.
* @type {Array.<number>|undefined}
* @api
*/
olx.style.TextOptions.prototype.padding;
/** /**
* @typedef {{geometry: (undefined|string|module:ol/geom/Geometry~Geometry|ol.StyleGeometryFunction), * @typedef {{geometry: (undefined|string|module:ol/geom/Geometry~Geometry|ol.StyleGeometryFunction),
* fill: (module:ol/style/Fill~Fill|undefined), * fill: (module:ol/style/Fill~Fill|undefined),

View File

@@ -14,12 +14,43 @@ import TextPlacement from '../style/TextPlacement.js';
const DEFAULT_FILL_COLOR = '#333'; const DEFAULT_FILL_COLOR = '#333';
/**
* @typedef {Object} Options
* @property {string} [font] Font style as CSS 'font' value, see:
* {@link https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/font}. Default is '10px sans-serif'
* @property {number} [maxAngle] 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.
* @property {number} [offsetY=0] Vertical text offset in pixels. A positive will shift the text down.
* @property {boolean} [overflow=false] For polygon labels or when `placement` is set to `'line'`, allow text to exceed
* the width of the polygon at the label position or the length of the path that it follows.
* @property {module:ol/style/Text~TextPlacement|string} [placement] Text placement.
* @property {number} [scale] Scale.
* @property {boolean} [rotateWithView=false] Whether to rotate the text with the view.
* @property {number} rotation=0 Rotation in radians (positive rotation clockwise).
* @property {string} [text] Text content.
* @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} [textBaseline='middle'] Text base line. Possible values: 'bottom', 'top', 'middle', 'alphabetic',
* 'hanging', 'ideographic'.
* @property {module:ol/style/Fill~Fill} [fill] Fill style. If none is provided, we'll use a dark fill-style (#333).
* @property {module:ol/style/Stroke~Stroke} [stroke] Stroke style.
* @property {module:ol/style/Fill~Fill} [backgroundFill] Fill style for the text background when `placement` is
* `'point'`. Default is no fill.
* @property {module:ol/style/Stroke~Stroke} [backgroundStroke] Stroke style for the text background when `placement`
* is `'point'`. Default is no stroke.
* @property {Array.<number>} [padding=[0, 0, 0, 0]] Padding in pixels around the text for decluttering and background. The order of
* values in the array is `[top, right, bottom, left]`.
*/
/** /**
* @classdesc * @classdesc
* Set text style for vector features. * Set text style for vector features.
* *
* @constructor * @constructor
* @param {olx.style.TextOptions=} opt_options Options. * @param {module:ol/style/Text~Options=} opt_options Options.
* @api * @api
*/ */
const Text = function(opt_options) { const Text = function(opt_options) {