iTowns/itowns | Build 9485406633 | src/Core/Style.js | Coveralls

1

import { FEATURE_TYPES } from 'Core/Feature';

1✔

2

import Cache from 'Core/Scheduler/Cache';

1✔

3

import Fetcher from 'Provider/Fetcher';

1✔

4

import * as mapbox from '@mapbox/mapbox-gl-style-spec';

1✔

5

import { Color } from 'three';

1✔

6

import { deltaE } from 'Renderer/Color';

1✔

7

import Coordinates from 'Core/Geographic/Coordinates';

1✔

8

1✔

9

import itowns_stroke_single_before from './StyleChunk/itowns_stroke_single_before.css';

1✔

10

1✔

11

export const cacheStyle = new Cache();

1✔

12

1✔

13

const matrix = document.createElementNS('http://www.w3.org/2000/svg', 'svg').createSVGMatrix();

1✔

14

const canvas = document.createElement('canvas');

1✔

15

1✔

16

const inv255 = 1 / 255;

1✔

17

1✔

18

function baseAltitudeDefault(properties, ctx) {

1✔

19

    return ctx?.coordinates?.z || 0;

1✔

20

1✔

21

1✔

22

export function readExpression(property, ctx) {

1✔

23

    if (property.expression) {

1✔

24

        return property.expression.evaluate(ctx);

1✔

25

    } else if (property.stops) {

1✔

26

        const stops = property.stops;

1✔

27

        property = property.stops[0][1];

1✔

28

        for (let i = stops.length - 1; i >= 0; i--) {

1✔

29

            const stop = stops[i];

1✔

30

1✔

31

            if (ctx.zoom >= stop[0]) {

1✔

32

                property = stop[1];

1✔

33

                break;

1✔

34

1✔

35

1✔

36

    } else if (property instanceof Function) {

1✔

37

        // TOBREAK: Pass the current `context` as a unique parameter.

1✔

38

        // In this proposal, metadata will be accessed in the callee by the

1✔

39

        // `context.properties` property.

236✔

40

        return property(ctx.properties, ctx);

236✔

41

3✔

42

    if (typeof property === 'string' || property instanceof String) {

236✔

43

        return property.replace(/\{(.+?)\}/g, (a, b) => (ctx.properties[b] || '')).trim();

3✔

44

3✔

45

    return property;

3✔

46

3✔

47

3✔

48

function rgba2rgb(orig) {

3✔

51

    } else if (orig.stops || orig.expression) {

233✔

52

        return { color: orig };

230✔

53

    } else if (typeof orig == 'string') {

3✔

54

        const result = orig.match(/(?:((hsl|rgb)a? *\(([\d.%]+(?:deg|g?rad|turn)?)[ ,]*([\d.%]+)[ ,]*([\d.%]+)[ ,/]*([\d.%]*)\))|(#((?:[\d\w]{3}){1,2})([\d\w]{1,2})?))/i);

236✔

55

        if (!result) {

230✔

56

            return { color: orig, opacity: 1.0 };

236✔

57

        } else if (result[7]) {

77✔

59

            if (result[9]) {

236✔

62

            return { color: `#${result[8]}`, opacity };

14✔

63

        } else if (result[0]) {

14✔

64

            return { color: `${result[2]}(${result[3]},${result[4]},${result[5]})`, opacity: (Number(result[6]) || 1.0) };

14✔

65

14✔

66

14✔

67

14✔

68

14✔

69

function readVectorProperty(property, options) {

14✔

70

    if (property != undefined) {

3✔

71

        if (mapbox.expression.isExpression(property)) {

14✔

76

4✔

77

4✔

78

4✔

79

async function loadImage(source) {

4✔

80

    let promise = cacheStyle.get(source, 'null');

11✔

81

    if (!promise) {

7✔

82

        promise = Fetcher.texture(source, { crossOrigin: 'anonymous' });

7✔

83

        cacheStyle.set(promise, source, 'null');

7✔

84

7✔

85

    return (await promise).image;

1✔

86

148✔

87

148✔

88

function cropImage(img, cropValues = { width: img.naturalWidth, height: img.naturalHeight }) {

148✔

91

    const ctx = canvas.getContext('2d', { willReadFrequently: true });

1✔

92

    ctx.drawImage(img,

2✔

93

        cropValues.x || 0, cropValues.y || 0, cropValues.width, cropValues.height,

2✔

94

        0, 0, cropValues.width, cropValues.height);

2✔

95

    return ctx.getImageData(0, 0, cropValues.width, cropValues.height);

2✔

96

2✔

97

2✔

98

function replaceWhitePxl(imgd, color, id) {

1✔

99

    if (!color) {

3✔

100

        return imgd;

3✔

101

3✔

102

    const imgdColored = cacheStyle.get(id, color);

3✔

103

    if (!imgdColored) {

2✔

104

        const pix = imgd.data;

3✔

105

        const newColor = new Color(color);

3✔

106

        const colorToChange = new Color('white');

3✔

107

        for (let i = 0, n = pix.length; i < n; i += 4) {

3✔

108

            const d = deltaE(pix.slice(i, i + 3), colorToChange) / 100;

3✔

109

            pix[i] = (pix[i] * d +  newColor.r * 255 * (1 - d));

3✔

110

            pix[i + 1] = (pix[i + 1] * d +  newColor.g * 255 * (1 - d));

1✔

111

            pix[i + 2] = (pix[i + 2] * d +  newColor.b * 255 * (1 - d));

2✔

112

1✔

113

        cacheStyle.set(imgd, id, color);

1✔

114

        return imgd;

1✔

115

1✔

116

    return imgdColored;

1✔

117

1✔

118

1✔

119

const textAnchorPosition = {

1✔

120

    left: [0, -0.5],

1✔

121

    right: [-1, -0.5],

1✔

122

    top: [-0.5, 0],

1✔

123

    bottom: [-0.5, -1],

1✔

124

    'top-right': [-1, 0],

1✔

125

    'bottom-left': [0, -1],

100✔

126

    'bottom-right': [-1, -1],

100✔

127

    center: [-0.5, -0.5],

100✔

128

    'top-left': [0, 0],

100✔

129

};

100✔

130

100✔

131

/**

100✔

132

 * Defines a property for the given Style for a specific parameter in a given category (one of fill, stroke, point, text, icon or zoom),

1✔

133

 * by generating its getter and setter.

1✔

135

 * the value set by the user (`userValue`)

1✔

136

 * the value read from the data source (`dataValue`)

1✔

137

 * the default fallback value (`defaultValue`).

1✔

138

 * The setter can be called to change dynamically the value.

1✔

139

 * @param {Style} style - The Style instance to set.

1✔

140

 * @param {string} category - The category (fill, stroke, point, test, icon or zoom) to set.

1✔

141

 * @param {string} parameter - The parameter of the category to set.

1✔

142

 * @param {All} userValue - The value given by the user (if any). Can be undefined.

1✔

143

 * @param {All} [defaultValue] - The default value to return (if needed).

1✔

144

*/

1✔

145

function defineStyleProperty(style, category, parameter, userValue, defaultValue) {

1✔

146

    let property;

1✔

147

    Object.defineProperty(

1✔

148

        style[category],

1✔

149

        parameter,

1✔

150

1✔

151

            enumerable: true,

1✔

152

            get: () => {

1✔

153

                // != to check for 'undefined' and 'null' value)

1✔

154

                if (property != undefined) { return property; }

1✔

155

                if (userValue != undefined) { return readExpression(userValue, style.context); }

1✔

156

                const dataValue = style.context.featureStyle?.[category]?.[parameter];

4,667✔

157

                if (dataValue != undefined) { return readExpression(dataValue, style.context); }

4,667✔

158

                if (defaultValue instanceof Function) {

1,558✔

159

                    return defaultValue(style.context.properties, style.context);

1,558✔

160

1,274✔

161

                return defaultValue;

236✔

162

},

236✔

163

            set: (v) => {

1,558✔

164

                property = v;

1,038✔

165

},

1,558✔

170

 * @class

1,558✔

172

 * type of feature and what is needed (fill, stroke or draw a point, etc.) as well as where to get its

1,558✔

173

 * properties and its coordinates (for base_altitude).

4,667✔

174

751✔

175

 * @property {number}               zoom Current zoom to display the FeatureGeometry.

1✔

176

 * @property {Object}               collection The FeatureCollection to which the FeatureGeometry is attached.

1✔

177

 * @property {Object}               properties Properties of the FeatureGeometry.

1✔

178

 * @property {string}               type Geometry type of the feature. Can be `point`, `line`, or `polygon`.

1✔

179

 * @property {StyleOptions|Function}featureStyle StyleOptions object (or a function returning one) to get style

1✔

180

 *                                  information at feature and FeatureGeometry level from the data parsed.

1✔

181

 * @property {Coordinates}          coordinates The coordinates (in world space) of the last vertex (x, y, z) set with

1✔

182

 *                                  setLocalCoordinatesFromArray().

1✔

183

 * private properties:

1✔

184

 * @property {Coordinates}          worldCoord @private Coordinates object to store coordinates in world space.

1✔

185

 * @property {Coordinates}          localCoordinates @private Coordinates object to store coordinates in local space.

1✔

186

 * @property {boolean}              worldCoordsComputed @private Have the world coordinates already been computed

1✔

187

 *                                      from the local coordinates?

1✔

188

 * @property {Feature}              feature  @private The itowns feature of interest.

1✔

189

 * @property {FeatureGeometry}      geometry  @private The FeatureGeometry to compute the style.

1✔

190

*/

1✔

191

export class StyleContext {

1✔

192

    #worldCoord = new Coordinates('EPSG:4326', 0, 0, 0);

1✔

193

    #localCoordinates = new Coordinates('EPSG:4326', 0, 0, 0);

1✔

194

    #worldCoordsComputed = true;

1✔

195

    #feature = {};

1✔

196

    #geometry = {};

1✔

197

1✔

198

    setZoom(zoom) {

1✔

199

        this.zoom = zoom;

1✔

200

1✔

201

1✔

202

    setFeature(f) {

1✔

203

        this.#feature = f;

1✔

204

1✔

205

114✔

206

    setGeometry(g) {

114✔

207

        this.#geometry = g;

114✔

208

114✔

209

114✔

210

    setCollection(c) {

114✔

211

        this.collection = c;

114✔

212

        this.#localCoordinates.setCrs(c.crs);

114✔

213

114✔

214

114✔

215

    setLocalCoordinatesFromArray(vertices, offset) {

114✔

216

        this.#worldCoordsComputed = false;

114✔

217

        return this.#localCoordinates.setFromArray(vertices, offset);

114✔

218

31✔

219

114✔

220

    get properties() {

114✔

221

        return this.#geometry.properties;

14✔

222

14✔

223

14✔

224

    get type() {

14✔

225

        return this.#feature.type;

114✔

226

120✔

227

    get featureStyle() {

120✔

228

        let featureStyle = this.#feature.style;

120✔

229

        if (featureStyle instanceof Function) {

120✔

230

            featureStyle = featureStyle(this.properties, this);

114✔

231

114✔

232

        return featureStyle;

248✔

233

248✔

234

248✔

235

    get coordinates() {

114✔

236

        if (!this.#worldCoordsComputed) {

961✔

237

            this.#worldCoordsComputed = true;

961✔

238

            this.#worldCoord.copy(this.#localCoordinates).applyMatrix4(this.collection.matrixWorld);

114✔

239

            if (this.#localCoordinates.crs == 'EPSG:4978') {

168✔

240

                return this.#worldCoord.as('EPSG:4326', this.#worldCoord);

120✔

241

120✔

242

120✔

243

        return this.#worldCoord;

120✔

244

120✔

245

120✔

246

120✔

247

function _addIcon(icon, domElement, opt) {

120✔

248

    const cIcon = icon.cloneNode();

31✔

249

31✔

250

    cIcon.setAttribute('class', 'itowns-icon');

168✔

251

137✔

252

    cIcon.width = icon.width * opt.size;

1✔

253

    cIcon.height = icon.height * opt.size;

13✔

254

    cIcon.style.color = opt.color;

13✔

255

    cIcon.style.opacity = opt.opacity;

13✔

256

    cIcon.style.position = 'absolute';

13✔

257

    cIcon.style.top = '0';

13✔

258

    cIcon.style.left = '0';

13✔

259

13✔

260

    switch (opt.anchor) { // center by default

13✔

261

        case 'left':

13✔

262

            cIcon.style.top = `${-0.5 * cIcon.height}px`;

13✔

263

            break;

13✔

264

        case 'right':

13✔

265

            cIcon.style.top = `${-0.5 * cIcon.height}px`;

13✔

266

            cIcon.style.left = `${-cIcon.width}px`;

13✔

267

            break;

1✔

268

        case 'top':

1✔

269

            cIcon.style.left = `${-0.5 * cIcon.width}px`;

1✔

270

            break;

1✔

271

        case 'bottom':

13✔

272

            cIcon.style.top = `${-cIcon.height}px`;

1✔

273

            cIcon.style.left = `${-0.5 * cIcon.width}px`;

13✔

274

            break;

1✔

275

        case 'bottom-left':

1✔

276

            cIcon.style.top = `${-cIcon.height}px`;

13✔

277

            break;

1✔

278

        case 'bottom-right':

1✔

279

            cIcon.style.top = `${-cIcon.height}px`;

13✔

280

            cIcon.style.left = `${-cIcon.width}px`;

1✔

281

            break;

1✔

282

        case 'top-left':

1✔

283

            break;

13✔

284

        case 'top-right':

13✔

285

            cIcon.style.left = `${-cIcon.width}px`;

1✔

286

            break;

13✔

287

        case 'center':

13✔

288

        default:

5✔

289

            cIcon.style.top = `${-0.5 * cIcon.height}px`;

5✔

290

            cIcon.style.left = `${-0.5 * cIcon.width}px`;

13✔

291

            break;

13✔

292

13✔

293

13✔

294

    cIcon.style['z-index'] = -1;

13✔

295

    domElement.appendChild(cIcon);

1✔

296

    return cIcon;

1✔

297

1✔

298

1✔

299

/**

1✔

300

 * @typedef {Object} StyleOptions

1✔

301

 * @memberof StyleOptions

1✔

302

1✔

303

 * @property {Number} [order] - Order of the features that will be associated to

1✔

304

 * the style. It can helps sorting and prioritizing features if needed.

1✔

305

1✔

306

 * @property {Object} [zoom] - Level on which to display the feature

1✔

307

 * @property {Number} [zoom.max] - max level

1✔

308

 * @property {Number} [zoom.min] - min level

1✔

309

1✔

310

 * @property {Object} [fill] - Fill style for polygons.

1✔

311

 * @property {String|Function|THREE.Color} [fill.color] - Defines the main fill color. Can be

1✔

312

 * any [valid color string](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value).

1✔

313

 * Default is no value, which means no fill.

1✔

314

 * If the `Layer` is a `GeometryLayer` you can use `THREE.Color`.

1✔

315

 * @property {Image|Canvas|String|Object|Function} [fill.pattern] - Defines a pattern to fill the

1✔

316

 * surface with. It can be an `Image` to use directly, an url to fetch the pattern or an object containing

1✔

317

 * the url of the image to fetch and the transformation to apply.

1✔

318

 * from. See [this example] (http://www.itowns-project.org/itowns/examples/#source_file_geojson_raster)

1✔

319

 * for how to use.

1✔

320

 * @property {Image|String} [fill.pattern.source] - The image or the url to fetch the pattern image

1✔

321

 * @property {Object} [fill.pattern.cropValues] - The x, y, width and height (in pixel) of the sub image to use.

1✔

322

 * @property {THREE.Color} [fill.pattern.color] - Can be any [valid color string]

1✔

323

 * (https://developer.mozilla.org/en-US/docs/Web/CSS/color_value).

1✔

324

 * It will change the color of the white pixels of the source image.

1✔

325

 * @property {Number|Function} [fill.opacity] - The opacity of the color or of the

1✔

326

 * pattern. Can be between `0.0` and `1.0`. Default is `1.0`.

1✔

327

 * For a `GeometryLayer`, this opacity property isn't used.

1✔

328

 * @property {Number|Function} [fill.base_altitude] - `GeometryLayer` style option, defines altitude

1✔

329

 * for each coordinate.

1✔

330

 * If `base_altitude` is `undefined`, the original altitude is kept, and if it doesn't exist

1✔

331

 * then the altitude value is set to 0.

1✔

332

 * @property {Number|Function} [fill.extrusion_height] - `GeometryLayer` style option, if defined,

1✔

333

 * polygons will be extruded by the specified amount

1✔

334

1✔

335

 * @property {Object} [stroke] - Lines and polygons edges.

1✔

336

 * @property {String|Function|THREE.Color} [stroke.color] The color of the line. Can be any [valid

1✔

337

 * color string](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value).

1✔

338

 * Default is no value, which means no stroke.

1✔

339

 * If the `Layer` is a `GeometryLayer` you can use `THREE.Color`.

1✔

340

 * @property {Number|Function} [stroke.opacity] - The opacity of the line. Can be between

1✔

341

 * `0.0` and `1.0`. Default is `1.0`.

1✔

342

 * For a `GeometryLayer`, this opacity property isn't used.

1✔

343

 * @property {Number|Function} [stroke.width] - The width of the line. Default is `1.0`.

1✔

344

 * @property {Number|Function} [stroke.base_altitude] - `GeometryLayer` style option, defines altitude

1✔

345

 * for each coordinate.

1✔

346

 * If `base_altitude` is `undefined`, the original altitude is kept, and if it doesn't exist

1✔

347

 * then the altitude value is set to 0.

1✔

348

1✔

349

 * @property {Object} [point] - Point style.

1✔

350

 * @property {String|Function} [point.color] - The color of the point. Can be any [valid

1✔

351

 * color string](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value).

1✔

352

 * Default is no value, which means points won't be displayed.

1✔

353

 * @property {Number|Function} [point.radius] - The radius of the point, in pixel. Default

1✔

354

 * is `2.0`.

1✔

355

 * @property {String|Function} [point.line] - The color of the border of the point. Can be

1✔

356

 * any [valid color

1✔

357

 * string](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value).

1✔

358

 * Not supported for a `GeometryLayer`.

1✔

359

 * @property {Number|Function} [point.width] - The width of the border, in pixel. Default

1✔

360

 * is `0.0` (no border).

1✔

361

 * @property {Number|Function} [point.opacity] - The opacity of the point. Can be between

1✔

362

 * `0.0` and `1.0`. Default is `1.0`.

1✔

363

 * Not supported for `GeometryLayer`.

1✔

364

 * @property {Number|Function} [point.base_altitude] - `GeometryLayer` style option, defines altitude

1✔

365

 * for each coordinate.

1✔

366

 * If `base_altitude` is `undefined`, the original altitude is kept, and if it doesn't exist

1✔

367

 * then the altitude value is set to 0.

1✔

368

 * @property {Object} [point.model] - 3D model to instantiate at each point position.

1✔

369

1✔

370

 * @property {Object} [text] - All things {@link Label} related. (Supported for Points features, not yet

1✔

371

 * for Lines and Polygons features.)

1✔

372

 * @property {String|Function} [text.field] - A string representing a property key of

1✔

373

 * a `FeatureGeometry` enclosed in brackets, that will be replaced by the value of the

1✔

374

 * property for each geometry. For example, if each geometry contains a `name` property,

1✔

375

 * `text.field` can be set to `{name}`. Default is no value, indicating that no

1✔

376

 * text will be displayed.

1✔

377

1✔

378

 * It's also possible to create more complex expressions. For example, you can combine

1✔

379

 * text that will always be displayed (e.g. `foo`) and variable properties (e.g. `{bar}`)

1✔

380

 * like the following: `foo {bar}`. You can also use multiple variables in one field.

1✔

381

 * Let's say for instance that you have two properties latin name and local name of a

1✔

382

 * place, you can write something like `{name_latin} - {name_local}` which can result

1✔

383

 * in `Marrakesh - مراكش` for example.

1✔

384

 * @property {String|Function} [text.color] - The color of the text. Can be any [valid

1✔

385

 * color string](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value).

1✔

386

 * Default is `#000000`.

1✔

387

 * @property {String|Number[]|Function} [text.anchor] - The anchor of the text compared to its

1✔

388

 * position (see {@link Label} for the position). Can be one of the following values: `top`,

1✔

389

 * `left`, `bottom`, `right`, `center`, `top-left`, `top-right`, `bottom-left`

1✔

390

 * or `bottom-right`. Default is `center`.

1✔

391

1✔

392

 * It can also be defined as an Array of two numbers. Each number defines an offset (in

1✔

393

 * fraction of the label width and height) between the label position and the top-left

1✔

394

 * corner of the text. The first value is the horizontal offset, and the second is the

1✔

395

 * vertical offset. For example, `[-0.5, -0.5]` will be equivalent to `center`.

1✔

396

 * @property {Array|Function} [text.offset] - The offset of the text, depending on its

1✔

397

 * anchor, in pixels. First value is from `left`, second is from `top`. Default

1✔

398

 * is `[0, 0]`.

1✔

399

 * @property {Number|Function} [text.padding] - The padding outside the text, in pixels.

1✔

400

 * Default is `2`.

1✔

401

 * @property {Number|Function} [text.size] - The size of the font, in pixels. Default is

1✔

402

 * `16`.

1✔

403

 * @property {Number|Function} [text.wrap] - The maximum width, in pixels, before the text

1✔

404

 * is wrapped, because the string is too long. Default is `10`.

1✔

405

 * @property {Number|Function} [text.spacing] - The spacing between the letters, in `em`.

1✔

406

 * Default is `0`.

1✔

407

 * @property {String|Function} [text.transform] - A value corresponding to the [CSS

1✔

408

 * property

1✔

409

 * `text-transform`](https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform).

1✔

410

 * Default is `none`.

1✔

411

 * @property {String|Function} [text.justify] - A value corresponding to the [CSS property

1✔

412

 * `text-align`](https://developer.mozilla.org/en-US/docs/Web/CSS/text-align).

1✔

413

 * Default is `center`.

1✔

414

 * @property {Number|Function} [text.opacity] - The opacity of the text. Can be between

1✔

415

 * `0.0` and `1.0`. Default is `1.0`.

1✔

416

 * @property {Array|Function} [text.font] - A list (as an array of string) of font family

1✔

417

 * names, prioritized in the order it is set. Default is `Open Sans Regular,

1✔

418

 * Arial Unicode MS Regular, sans-serif`.

1✔

419

 * @property {String|Function} [text.haloColor] - The color of the halo. Can be any [valid

1✔

420

 * color string](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value).

1✔

421

 * Default is `#000000`.

1✔

422

 * @property {Number|Function} [text.haloWidth] - The width of the halo, in pixels.

1✔

423

 * Default is `0`.

1✔

424

 * @property {Number|Function} [text.haloBlur] - The blur value of the halo, in pixels.

1✔

425

 * Default is `0`.

1✔

426

1✔

427

 * @property {Object} [icon] - Defines the appearance of icons attached to label.

1✔

428

 * @property {String} [icon.source] - The url of the icons' image file.

1✔

429

 * @property {String} [icon.id] - The id of the icons' sub-image in a vector tile data set.

1✔

430

 * @property {String} [icon.cropValues] - the x, y, width and height (in pixel) of the sub image to use.

1✔

431

 * @property {String} [icon.anchor] - The anchor of the icon compared to the label position.

1✔

432

 * Can be `left`, `bottom`, `right`, `center`, `top-left`, `top-right`, `bottom-left`

1✔

433

 * or `bottom-right`. Default is `center`.

1✔

434

 * @property {Number} [icon.size] - If the icon's image is passed with `icon.source` and/or

1✔

435

 * `icon.id`, its size when displayed on screen is multiplied by `icon.size`. Default is `1`.

1✔

436

 * @property {String|Function} [icon.color] - The color of the icon. Can be any [valid

1✔

437

 * color string](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value).

1✔

438

 * It will change the color of the white pixels of the icon source image.

1✔

439

 * @property {Number|Function} [icon.opacity] - The opacity of the icon. Can be between

1✔

440

 * `0.0` and `1.0`. Default is `1.0`.

1✔

441

*/

1✔

442

1✔

443

/**

1✔

444

 * @description An object that can contain any properties

1✔

445

 * (order, zoom, fill, stroke, point, text or/and icon)

1✔

446

 * and sub properties of a Style.<br/>

1✔

447

 * Used for the instanciation of a {@link Style}.

1✔

448

 * @hideconstructor

1✔

449

*/

1✔

450

export class StyleOptions {}

1✔

451

1✔

452

/**

1✔

453

 * @class

1✔

454

 * @classdesc A Style is a class that defines the visual appearance of {@link

1✔

455

 * FeatureCollection} and {@link Feature}. It is taken into account when drawing

1✔

456

 * them in textures that will be placed onto tiles.

1✔

457

1✔

458

 * As there are five basic elements present in `Features`, there are also five

1✔

459

 * main components in a `Style` object:

1✔

460

 * - `fill` is for all fillings and polygons

1✔

461

 * - `stroke` is for all lines and polygons edges

1✔

462

 * - `point` is for all points

1✔

463

 * - `text` contains all {@link Label} related things

1✔

464

 * - `icon` defines the appearance of icons attached to label.

1✔

465

1✔

466

 * Many style property can be set to functions. When that is the case, the function's

1✔

467

 * return type must necessarily be the same as the types (other than function) of the property.

1✔

468

 * For instance, if the `fill.pattern` property is set to a function, this function must return

1✔

469

 * an `Image`, a `Canvas`, or `String`.

1✔

470

 * The first parameter of functions used to set `Style` properties is always an object containing

1✔

471

 * the properties of the features displayed with the current `Style` instance.

1✔

472

1✔

473

 * @property {Number} order - Order of the features that will be associated to

1✔

474

 * the style. It can helps sorting and prioritizing features if needed.

1✔

475

 * @property {Object} fill - Polygons and fillings style.

1✔

476

 * @property {String|Function|THREE.Color} fill.color - Defines the main color of the filling. Can be

1✔

477

 * any [valid color

1✔

478

 * string](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value).

1✔

479

 * Default is no value, indicating that no filling needs to be done.

1✔

480

 * If the `Layer` is a `GeometryLayer` you can use `THREE.Color`.

1✔

481

 * @property {Image|Canvas|String|Object|Function} [fill.pattern] - Defines a pattern to fill the

1✔

482

 * surface with. It can be an `Image` to use directly, an url to fetch the pattern or an object containing

1✔

483

 * the url of the image to fetch and the transformation to apply.

1✔

484

 * from. See [this example] (http://www.itowns-project.org/itowns/examples/#source_file_geojson_raster)

1✔

485

 * for how to use.

1✔

486

 * @property {Image|String} [fill.pattern.source] - The image or the url to fetch the pattern image

1✔

487

 * @property {Object} [fill.pattern.cropValues] - The x, y, width and height (in pixel) of the sub image to use.

1✔

488

 * @property {THREE.Color} [fill.pattern.color] - Can be any [valid color string]

1✔

489

 * @property {Number|Function} fill.opacity - The opacity of the color or of the

1✔

490

 * pattern. Can be between `0.0` and `1.0`. Default is `1.0`.

1✔

491

 * For a `GeometryLayer`, this opacity property isn't used.

1✔

492

 * @property {Number|Function} fill.base_altitude - Only for {@link GeometryLayer}, defines altitude

1✔

493

 * for each coordinate.

1✔

494

 * If `base_altitude` is `undefined`, the original altitude is kept, and if it doesn't exist

1✔

495

 * then the altitude value is set to 0.

1✔

496

 * @property {Number|Function} [fill.extrusion_height] - Only for {@link GeometryLayer} and if user sets it.

1✔

497

 * If defined, polygons will be extruded by the specified amount.

1✔

498

 * @property {Object} stroke - Lines and polygons edges.

1✔

499

 * @property {String|Function|THREE.Color} stroke.color The color of the line. Can be any [valid

1✔

500

 * color string](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value).

1✔

501

 * Default is no value, indicating that no stroke needs to be done.

1✔

502

 * If the `Layer` is a `GeometryLayer` you can use `THREE.Color`.

1✔

503

 * @property {Number|Function} stroke.opacity - The opacity of the line. Can be between

1✔

504

 * `0.0` and `1.0`. Default is `1.0`.

1✔

505

 * For a `GeometryLayer`, this opacity property isn't used.

1✔

506

 * @property {Number|Function} stroke.width - The width of the line. Default is `1.0`.

1✔

507

 * @property {Number|Function} stroke.base_altitude - Only for {@link GeometryLayer}, defines altitude

1✔

508

 * for each coordinate.

1✔

509

 * If `base_altitude` is `undefined`, the original altitude is kept, and if it doesn't exist

1✔

510

 * then the altitude value is set to 0.

1✔

511

1✔

512

 * @property {Object} point - Point style.

1✔

513

 * @property {String|Function} point.color - The color of the point. Can be any [valid

1✔

514

 * color string](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value).

1✔

515

 * Default is no value, indicating that no point will be shown.

1✔

516

 * @property {Number|Function} point.radius - The radius of the point, in pixel. Default

1✔

517

 * is `2.0`.

1✔

518

 * @property {String|Function} point.line - The color of the border of the point. Can be

1✔

519

 * any [valid color

1✔

520

 * string](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value).

1✔

521

 * Not supported for `GeometryLayer`.

1✔

522

 * @property {Number|Function} point.width - The width of the border, in pixel. Default

1✔

523

 * is `0.0` (no border).

1✔

524

 * @property {Number|Function} point.opacity - The opacity of the point. Can be between

1✔

525

 * `0.0` and `1.0`. Default is `1.0`.

1✔

526

 * Not supported for `GeometryLayer`.

1✔

527

 * @property {Number|Function} point.base_altitude - Only for {@link GeometryLayer}, defines altitude

1✔

528

 * for each coordinate.

1✔

529

 * If `base_altitude` is `undefined`, the original altitude is kept, and if it doesn't exist

1✔

530

 * then the altitude value is set to 0.

1✔

531

 * @property {Object} point.model - 3D model to instantiate at each point position

1✔

532

1✔

533

1✔

534

 * @property {Object} text - All things {@link Label} related.

1✔

535

 * @property {String|Function} text.field - A string representing a property key of

1✔

536

 * a `FeatureGeometry` enclosed in brackets, that will be replaced by the value of the

1✔

537

 * property for each geometry. For example, if each geometry contains a `name` property,

1✔

538

 * `text.field` can be set to `{name}`. Default is no value, indicating that no

1✔

539

 * text will be displayed.

1✔

540

1✔

541

 * It's also possible to create more complex expressions. For example, you can combine

1✔

542

 * text that will always be displayed (e.g. `foo`) and variable properties (e.g. `{bar}`)

1✔

543

 * like the following: `foo {bar}`. You can also use multiple variables in one field.

1✔

544

 * Let's say for instance that you have two properties latin name and local name of a

1✔

545

 * place, you can write something like `{name_latin} - {name_local}` which can result

1✔

546

 * in `Marrakesh - مراكش` for example.

1✔

547

 * @property {String|Function} text.color - The color of the text. Can be any [valid

1✔

548

 * color string](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value).

1✔

549

 * Default is `#000000`.

1✔

550

 * @property {String|Number[]|Function} text.anchor - The anchor of the text relative to its

1✔

551

 * position (see {@link Label} for the position). Can be one of the following values: `top`,

1✔

552

 * `left`, `bottom`, `right`, `center`, `top-left`, `top-right`, `bottom-left`

1✔

553

 * or `bottom-right`. Default is `center`.

1✔

554

1✔

555

 * It can also be defined as an Array of two numbers. Each number defines an offset (in

1✔

556

 * fraction of the label width and height) between the label position and the top-left

1✔

557

 * corner of the text. The first value is the horizontal offset, and the second is the

1✔

558

 * vertical offset. For example, `[-0.5, -0.5]` will be equivalent to `center`.

1✔

559

 * @property {Array|Function} text.offset - The offset of the text, depending on its

1✔

560

 * anchor, in pixels. First value is from `left`, second is from `top`. Default

1✔

561

 * is `[0, 0]`.

1✔

562

 * @property {Number|Function} text.padding - The padding outside the text, in pixels.

1✔

563

 * Default is `2`.

1✔

564

 * @property {Number|Function} text.size - The size of the font, in pixels. Default is

1✔

565

 * `16`.

1✔

566

 * @property {Number|Function} text.wrap - The maximum width, in pixels, before the text

1✔

567

 * is wrapped, because the string is too long. Default is `10`.

1✔

568

 * @property {Number|Function} text.spacing - The spacing between the letters, in `em`.

1✔

569

 * Default is `0`.

1✔

570

 * @property {String|Function} text.transform - A value corresponding to the [CSS

1✔

571

 * property

1✔

572

 * `text-transform`](https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform).

1✔

573

 * Default is `none`.

1✔

574

 * @property {String|Function} text.justify - A value corresponding to the [CSS property

1✔

575

 * `text-align`](https://developer.mozilla.org/en-US/docs/Web/CSS/text-align).

1✔

576

 * Default is `center`.

1✔

577

 * @property {Number|Function} text.opacity - The opacity of the text. Can be between

1✔

578

 * `0.0` and `1.0`. Default is `1.0`.

1✔

579

 * @property {Array|Function} text.font - A list (as an array of string) of font family

1✔

580

 * names, prioritized in the order it is set. Default is `Open Sans Regular,

1✔

581

 * Arial Unicode MS Regular, sans-serif`.

1✔

582

 * @property {String|Function} text.haloColor - The color of the halo. Can be any [valid

1✔

583

 * color string](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value).

1✔

584

 * Default is `#000000`.

1✔

585

 * @property {Number|Function} text.haloWidth - The width of the halo, in pixels.

1✔

586

 * Default is `0`.

1✔

587

 * @property {Number|Function} text.haloBlur - The blur value of the halo, in pixels.

1✔

588

 * Default is `0`.

1✔

589

1✔

590

 * @property {Object} icon - Defines the appearance of icons attached to label.

1✔

591

 * @property {String} icon.source - The url of the icons' image file.

1✔

592

 * @property {String} icon.id - The id of the icons' sub-image in a vector tile data set.

1✔

593

 * @property {String} icon.cropValues - the x, y, width and height (in pixel) of the sub image to use.

1✔

594

 * @property {String} icon.anchor - The anchor of the icon compared to the label position.

1✔

595

 * Can be `left`, `bottom`, `right`, `center`, `top-left`, `top-right`, `bottom-left`

1✔

596

 * or `bottom-right`. Default is `center`.

1✔

597

 * @property {Number} icon.size - If the icon's image is passed with `icon.source` and/or

1✔

598

 * `icon.id`, its size when displayed on screen is multiplied by `icon.size`. Default is `1`.

1✔

599

 * @property {String|Function} icon.color - The color of the icon. Can be any [valid

1✔

600

 * color string](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value).

1✔

601

 * It will change the color of the white pixels of the icon source image.

1✔

602

 * @property {Number|Function} icon.opacity - The opacity of the icon. Can be between

1✔

603

 * `0.0` and `1.0`. Default is `1.0`.

1✔

604

1✔

605

 * @example

1✔

606

 * const style = new itowns.Style({

1✔

607

 *      stroke: { color: 'red' },

1✔

608

 *      point: { color: 'white', line: 'red' },

1✔

609

 * });

1✔

610

1✔

611

 * const source = new itowns.FileSource(...);

1✔

612

1✔

613

 * const layer = new itowns.ColorLayer('foo', {

1✔

614

 *      source: source,

1✔

615

 *      style: style,

1✔

616

 * });

1✔

617

1✔

618

 * view.addLayer(layer);

1✔

619

*/

1✔

620

1✔

621

class Style {

1✔

622

/**

1✔

623

     * @param {StyleOptions} [params={}] An object that contain any properties

1✔

624

     * (order, zoom, fill, stroke, point, text or/and icon)

1✔

625

     * and sub properties of a Style (@see {@link StyleOptions}).

1✔

626

     * @constructor

111✔

627

*/

111✔

628

    constructor(params = {}) {

111✔

629

        this.isStyle = true;

111✔

630

        this.context = new StyleContext();

111✔

631

111✔

632

        this.order = params.order || 0;

111✔

633

111✔

634

        params.zoom = params.zoom || {};

111✔

635

        params.fill = params.fill || {};

111✔

636

        params.stroke = params.stroke || {};

111✔

637

        params.point = params.point || {};

111✔

638

        params.text = params.text || {};

111✔

639

        params.icon = params.icon || {};

111✔

640

111✔

641

        this.zoom = {};

111✔

642

        defineStyleProperty(this, 'zoom', 'min', params.zoom.min);

111✔

643

        defineStyleProperty(this, 'zoom', 'max', params.zoom.max);

111✔

644

111✔

645

        this.fill = {};

111✔

646

        defineStyleProperty(this, 'fill', 'color', params.fill.color);

111✔

647

        defineStyleProperty(this, 'fill', 'opacity', params.fill.opacity, 1.0);

111✔

648

        defineStyleProperty(this, 'fill', 'pattern', params.fill.pattern);

111✔

649

        defineStyleProperty(this, 'fill', 'base_altitude', params.fill.base_altitude, baseAltitudeDefault);

111✔

650

        if (params.fill.extrusion_height) {

4✔

651

            defineStyleProperty(this, 'fill', 'extrusion_height', params.fill.extrusion_height);

111✔

652

111✔

653

111✔

654

        this.stroke = {};

111✔

655

        defineStyleProperty(this, 'stroke', 'color', params.stroke.color);

111✔

656

        defineStyleProperty(this, 'stroke', 'opacity', params.stroke.opacity, 1.0);

111✔

657

        defineStyleProperty(this, 'stroke', 'width', params.stroke.width, 1.0);

111✔

658

        defineStyleProperty(this, 'stroke', 'dasharray', params.stroke.dasharray, []);

111✔

659

        defineStyleProperty(this, 'stroke', 'base_altitude', params.stroke.base_altitude, baseAltitudeDefault);

111✔

660

111✔

661

        this.point = {};

111✔

662

        defineStyleProperty(this, 'point', 'color', params.point.color);

111✔

663

        defineStyleProperty(this, 'point', 'line', params.point.line);

111✔

664

        defineStyleProperty(this, 'point', 'opacity', params.point.opacity, 1.0);

111✔

665

        defineStyleProperty(this, 'point', 'radius', params.point.radius, 2.0);

111✔

666

        defineStyleProperty(this, 'point', 'width', params.point.width, 0.0);

111✔

667

        defineStyleProperty(this, 'point', 'base_altitude', params.point.base_altitude, baseAltitudeDefault);

111✔

668

        if (params.point.model) {

111✔

669

            defineStyleProperty(this, 'point', 'model', params.point.model);

111✔

670

111✔

671

111✔

672

        this.text = {};

111✔

673

        defineStyleProperty(this, 'text', 'field', params.text.field);

111✔

674

        defineStyleProperty(this, 'text', 'zOrder', params.text.zOrder, 'auto');

111✔

675

        defineStyleProperty(this, 'text', 'color', params.text.color, '#000000');

111✔

676

        defineStyleProperty(this, 'text', 'anchor', params.text.anchor, 'center');

111✔

677

        defineStyleProperty(this, 'text', 'offset', params.text.offset, [0, 0]);

111✔

678

        defineStyleProperty(this, 'text', 'padding', params.text.padding, 2);

111✔

679

        defineStyleProperty(this, 'text', 'size', params.text.size, 16);

111✔

680

        defineStyleProperty(this, 'text', 'placement', params.text.placement, 'point');

111✔

681

        defineStyleProperty(this, 'text', 'rotation', params.text.rotation, 'auto');

111✔

682

        defineStyleProperty(this, 'text', 'wrap', params.text.wrap, 10);

111✔

683

        defineStyleProperty(this, 'text', 'spacing', params.text.spacing, 0);

111✔

684

        defineStyleProperty(this, 'text', 'transform', params.text.transform, 'none');

111✔

685

        defineStyleProperty(this, 'text', 'justify', params.text.justify, 'center');

111✔

686

        defineStyleProperty(this, 'text', 'opacity', params.text.opacity, 1.0);

111✔

687

        defineStyleProperty(this, 'text', 'font', params.text.font, ['Open Sans Regular', 'Arial Unicode MS Regular', 'sans-serif']);

111✔

688

        defineStyleProperty(this, 'text', 'haloColor', params.text.haloColor, '#000000');

111✔

693

        defineStyleProperty(this, 'icon', 'source', params.icon.source);

111✔

694

        if (params.icon.key) {

111✔

695

            console.warn("'icon.key' is deprecated: use 'icon.id' instead");

111✔

696

            params.icon.id = params.icon.key;

111✔

697

111✔

698

        defineStyleProperty(this, 'icon', 'id', params.icon.id);

111✔

699

        defineStyleProperty(this, 'icon', 'cropValues', params.icon.cropValues);

111✔

700

        defineStyleProperty(this, 'icon', 'anchor', params.icon.anchor, 'center');

1✔

701

        defineStyleProperty(this, 'icon', 'size', params.icon.size, 1);

1✔

702

        defineStyleProperty(this, 'icon', 'color', params.icon.color);

1✔

703

        defineStyleProperty(this, 'icon', 'opacity', params.icon.opacity, 1.0);

18✔

704

18✔

705

18✔

706

/**

18✔

707

     * Copies the content of the target style into this style.

18✔

708

     * @param {Style} style - The style to copy.

18✔

709

18✔

710

     * @return {Style} This style.

1✔

711

*/

1✔

712

    copy(style) {

1✔

713

        Object.assign(this.fill, style.fill);

1✔

714

        Object.assign(this.stroke, style.stroke);

1✔

715

        Object.assign(this.point, style.point);

17✔

716

        Object.assign(this.text, style.text);

1✔

717

        Object.assign(this.icon, style.icon);

1✔

718

        return this;

1✔

719

1✔

720

1✔

721

/**

1✔

722

         * Clones this style.

1✔

723

1✔

724

         * @return {Style} The new style, cloned from this one.

1✔

725

*/

1✔

726

    clone() {

1✔

727

        const clone = new Style();

1✔

728

        return clone.copy(this);

1✔

729

1✔

730

250✔

731

    setContext(ctx) {

250✔

732

        this.context = ctx;

250✔

733

250✔

734

250✔

735

/**

250✔

736

     * set Style from (geojson-like) properties.

250✔

737

     * @param {Object} properties (geojson-like) properties.

250✔

739

49✔

742

    static setFromProperties(properties, featCtx) {

49✔

745

        if (type === FEATURE_TYPES.POINT) {

49✔

746

            const point = {

49✔

747

                ...(properties.fill !== undefined && { color: properties.fill }),

49✔

748

                ...(properties['fill-opacity'] !== undefined && { opacity: properties['fill-opacity'] }),

49✔

749

                ...(properties.stroke !== undefined && { line: properties.stroke }),

49✔

751

};

49✔

752

            if (Object.keys(point).length) {

49✔

755

            const text = {

49✔

756

                ...(properties['label-color'] !== undefined && { color: properties['label-color'] }),

49✔

759

};

49✔

761

                style.text = text;

49✔

762

49✔

763

            const icon = {

49✔

764

                ...(properties.icon !== undefined && { source: properties.icon }),

49✔

765

                ...(properties['icon-scale'] !== undefined && { size: properties['icon-scale'] }),

250✔

766

                ...(properties['icon-opacity'] !== undefined && { opacity: properties['icon-opacity'] }),

201✔

768

};

201✔

769

            if (Object.keys(icon).length) {

201✔

773

            const stroke = {

201✔

774

                ...(properties.stroke !== undefined && { color: properties.stroke }),

201✔

775

                ...(properties['stroke-width'] !== undefined && { width: properties['stroke-width'] }),

201✔

778

            if (Object.keys(stroke).length) {

195✔

779

                style.stroke = stroke;

195✔

780

1✔

781

            if (type !== FEATURE_TYPES.LINE) {

250✔

782

                const fill = {

1✔

783

                    ...(properties.fill !== undefined && { color: properties.fill }),

1✔

784

                    ...(properties['fill-opacity'] !== undefined && { opacity: properties['fill-opacity'] }),

1✔

785

};

1✔

786

                if (Object.keys(fill).length) {

1✔

787

                    style.fill = fill;

1✔

788

19✔

789

19✔

790

19✔

791

        return style;

19✔

792

19✔

793

19✔

794

/**

19✔

795

     * set Style from vector tile layer properties.

19✔

796

     * @param {Object} layer vector tile layer.

19✔

798

     * @param {Number} [order=0]

19✔

799

     * @param {Boolean} [symbolToCircle=false]

19✔

800

19✔

801

     * @returns {StyleOptions} containing all properties for itowns.Style

19✔

802

*/

19✔

803

    static setFromVectorTileLayer(layer, sprites, order = 0, symbolToCircle = false) {

19✔

804

        const style = {

11✔

805

            fill: {},

11✔

806

            stroke: {},

11✔

807

            point: {},

11✔

808

            text: {},

2✔

809

            icon: {},

11✔

810

};

11✔

811

11✔

812

        layer.layout = layer.layout || {};

11✔

813

        layer.paint = layer.paint || {};

11✔

814

11✔

815

        style.order = order;

11✔

816

11✔

817

        if (layer.type === 'fill') {

11✔

818

            const { color, opacity } = rgba2rgb(readVectorProperty(layer.paint['fill-color'] || layer.paint['fill-pattern'], { type: 'color' }));

11✔

819

            style.fill.color = color;

1✔

824

                        id: layer.paint['fill-pattern'],

11✔

825

                        source: sprites.source,

11✔

826

                        cropValues: sprites[layer.paint['fill-pattern']],

2✔

827

};

2✔

828

                } catch (err) {

2✔

829

                    err.message = `VTlayer '${layer.id}': argument sprites must not be null when using layer.paint['fill-pattern']`;

2✔

830

                    throw err;

19✔

831

8✔

832

8✔

833

1✔

834

            if (layer.paint['fill-outline-color']) {

1✔

835

                const { color, opacity } = rgba2rgb(readVectorProperty(layer.paint['fill-outline-color'], { type: 'color' }));

1✔

836

                style.stroke.color = color;

1✔

837

                style.stroke.opacity = opacity;

1✔

838

                style.stroke.width = 1.0;

1✔

839

                style.stroke.dasharray = [];

1✔

840

1✔

841

        } else if (layer.type === 'line') {

1✔

842

            const prepare = readVectorProperty(layer.paint['line-color'], { type: 'color' });

8✔

843

            const { color, opacity } = rgba2rgb(prepare);

7✔

844

            style.stroke.dasharray = readVectorProperty(layer.paint['line-dasharray']);

1✔

845

            style.stroke.color = color;

1✔

846

            style.stroke.lineCap = layer.layout['line-cap'];

1✔

847

            style.stroke.width = readVectorProperty(layer.paint['line-width']);

1✔

848

            style.stroke.opacity = readVectorProperty(layer.paint['line-opacity']) || opacity;

7✔

849

        } else if (layer.type === 'circle' || symbolToCircle) {

6✔

850

            const { color, opacity } = rgba2rgb(readVectorProperty(layer.paint['circle-color'], { type: 'color' }));

6✔

851

            style.point.color = color;

6✔

854

        } else if (layer.type === 'symbol') {

6✔

855

            // overlapping order

6✔

856

            style.text.zOrder = readVectorProperty(layer.layout['symbol-z-order']);

6✔

857

            if (style.text.zOrder == 'auto') {

6✔

858

                style.text.zOrder = readVectorProperty(layer.layout['symbol-sort-key']) || 'Y';

6✔

859

            } else if (style.text.zOrder == 'viewport-y') {

6✔

860

                style.text.zOrder = 'Y';

6✔

861

            } else if (style.text.zOrder == 'source') {

6✔

862

                style.text.zOrder = 0;

6✔

863

6✔

864

6✔

865

            // position

6✔

866

            style.text.anchor = readVectorProperty(layer.layout['text-anchor']);

6✔

867

            style.text.offset = readVectorProperty(layer.layout['text-offset']);

6✔

868

            style.text.padding = readVectorProperty(layer.layout['text-padding']);

6✔

869

            style.text.size = readVectorProperty(layer.layout['text-size']);

6✔

870

            style.text.placement = readVectorProperty(layer.layout['symbol-placement']);

6✔

871

            style.text.rotation = readVectorProperty(layer.layout['text-rotation-alignment']);

6✔

872

6✔

873

            // content

6✔

874

            style.text.field = readVectorProperty(layer.layout['text-field']);

6✔

876

            style.text.spacing = readVectorProperty(layer.layout['text-letter-spacing']);

6✔

877

            style.text.transform = readVectorProperty(layer.layout['text-transform']);

6✔

883

            style.text.opacity = readVectorProperty(layer.paint['text-opacity']) || (opacity !== undefined && opacity);

6✔

884

5✔

885

            style.text.font = readVectorProperty(layer.layout['text-font']);

5✔

886

            const haloColor = readVectorProperty(layer.paint['text-halo-color'], { type: 'color' });

2✔

887

            if (haloColor) {

2✔

888

                style.text.haloColor = haloColor.color || haloColor;

2✔

889

                style.text.haloWidth = readVectorProperty(layer.paint['text-halo-width']);

2✔

890

                style.text.haloBlur = readVectorProperty(layer.paint['text-halo-blur']);

1✔

895

            if (iconImg) {

1✔

896

                try {

2✔

897

                    style.icon.id = iconImg;

2✔

898

                    if (iconImg.stops) {

2✔

899

                        const iconCropValue = {

2✔

900

                            ...(iconImg.base !== undefined && { base: iconImg.base }),

5✔

901

                            stops: iconImg.stops.map((stop) => {

3✔

905

                                        const id = stop[1].replace(/\{(.+?)\}/g, (a, b) => (p[b] || '')).trim();

5✔

906

                                        cropValues = sprites[id];

5✔

907

                                        return sprites[id];

5✔

908

};

5✔

909

5✔

910

                                return [stop[0], cropValues];

5✔

911

}),

5✔

912

};

5✔

917

                            style.icon.cropValues = function _(p) {

19✔

918

                                const id = iconImg.replace(/\{(.+?)\}/g, (a, b) => (p[b] || '')).trim();

19✔

919

                                style.icon.cropValues = sprites[id];

19✔

920

                                return sprites[id];

19✔

921

};

19✔

922

19✔

923

19✔

924

                    style.icon.source = sprites.source;

19✔

925

                    style.icon.size = readVectorProperty(layer.layout['icon-size']) || 1;

1✔

926

                    const { color, opacity } = rgba2rgb(readVectorProperty(layer.paint['icon-color'], { type: 'color' }));

1✔

927

                    style.icon.color = color;

1✔

928

                    style.icon.opacity = readVectorProperty(layer.paint['icon-opacity']) || (opacity !== undefined && opacity);

1✔

929

                } catch (err) {

1✔

930

                    err.message = `VTlayer '${layer.id}': argument sprites must not be null when using layer.layout['icon-image']`;

1✔

931

                    throw err;

3✔

932

3✔

933

3✔

934

3✔

935

        // VectorTileSet: by default minZoom = 0 and maxZoom = 24

3✔

936

        // https://docs.mapbox.com/style-spec/reference/layers/#maxzoom and #minzoom

3✔

937

        // Should be move to layer properties, when (if) one mapBox layer will be considered as several itowns layers.

3✔

938

        // issue https://github.com/iTowns/itowns/issues/2153 (last point)

3✔

939

        style.zoom = {

1✔

940

            min: layer.minzoom || 0,

4✔

941

            max: layer.maxzoom || 24,

4✔

942

};

4✔

943

        return style;

4✔

944

2✔

945

2✔

946

/**

2✔

947

     * Applies the style.fill to a polygon of the texture canvas.

4✔

950

     * @param {Number} invCtxScale The ratio to scale line width and radius circle.

4✔

951

     * @param {Boolean} canBeFilled - true if feature.type == FEATURE_TYPES.POLYGON.

4✔

952

*/

4✔

954

        const context = this.context;

4✔

955

        // draw line or edge of polygon

4✔

956

        if (this.stroke) {

1✔

957

            // TO DO add possibility of using a pattern (https://github.com/iTowns/itowns/issues/2210)

5✔

958

            this._applyStrokeToPolygon(txtrCtx, invCtxScale, polygon, context);

5✔

959

5✔

960

5✔

961

        // fill inside of polygon

5✔

962

        if (canBeFilled && this.fill) {

5✔

963

            // canBeFilled can be move to StyleContext in the later PR

1✔

968

    _applyStrokeToPolygon(txtrCtx, invCtxScale, polygon) {

1✔

969

        if (txtrCtx.strokeStyle !== this.stroke.color) {

1✔

970

            txtrCtx.strokeStyle = this.stroke.color;

1✔

971

1✔

976

        const alpha = this.stroke.opacity == undefined ? 1.0 : this.stroke.opacity;

5✔

977

        if (alpha !== txtrCtx.globalAlpha && typeof alpha == 'number') {

5✔

978

            txtrCtx.globalAlpha = alpha;

5✔

979

5✔

980

        if (txtrCtx.lineCap !== this.stroke.lineCap) {

1✔

981

            txtrCtx.lineCap = this.stroke.lineCap;

1✔

982

1✔

983

        txtrCtx.setLineDash(this.stroke.dasharray.map(a => a * invCtxScale * 2));

1✔

984

        txtrCtx.stroke(polygon);

1✔

985

1✔

986

1✔

987

    async _applyFillToPolygon(txtrCtx, invCtxScale, polygon) {

1✔

988

        // if (this.fill.pattern && txtrCtx.fillStyle.src !== this.fill.pattern.src) {

1✔

989

        // need doc for the txtrCtx.fillStyle.src that seems to always be undefined

1✔

992

            const cropValues = this.fill.pattern.cropValues;

22✔

993

            if (this.fill.pattern.source) {

22✔

994

                img = await loadImage(this.fill.pattern.source);

22✔

995

22✔

996

            cropImage(img, cropValues);

22✔

997

22✔

998

            txtrCtx.fillStyle = txtrCtx.createPattern(canvas, 'repeat');

22✔

999

            if (txtrCtx.fillStyle.setTransform) {

22✔

1000

                txtrCtx.fillStyle.setTransform(matrix.scale(invCtxScale));

22✔

1001

            } else {

22✔

1002

                console.warn('Raster pattern isn\'t completely supported on Ie and edge', txtrCtx.fillStyle);

22✔

1003

22✔

1004

        } else if (txtrCtx.fillStyle !== this.fill.color) {

22✔

1005

            txtrCtx.fillStyle = this.fill.color;

14✔

1006

14✔

1007

        if (this.fill.opacity !== txtrCtx.globalAlpha) {

14✔

1008

            txtrCtx.globalAlpha = this.fill.opacity;

14✔

1009

14✔

1010

        txtrCtx.fill(polygon);

14✔

1011

14✔

1012

14✔

1013

/**

14✔

1014

     * Applies this style to a DOM element. Limited to the `text` and `icon`

22✔

1015

     * properties of this style.

22✔

1016

9✔

1017

     * @param {Element} domElement - The element to set the style to.

22✔

1018

13✔

1019

     * @returns {undefined|Promise<HTMLImageElement>}

13✔

1020

     *          for a text label: undefined.

13✔

1021

     *          for an icon: a Promise resolving with the HTMLImageElement containing the image.

13✔

1022

*/

13✔

1023

    async applyToHTML(domElement) {

13✔

1024

        if (arguments.length > 1) {

13✔

1025

            console.warn('Deprecated argument sprites. Sprites must be configured in style.');

22✔

1026

11✔

1027

        domElement.style.padding = `${this.text.padding}px`;

22✔

1028

        domElement.style.maxWidth = `${this.text.wrap}em`;

2✔

1029

2✔

1030

        domElement.style.color = this.text.color;

2✔

1031

        if (this.text.size > 0) {

2✔

1032

            domElement.style.fontSize = `${this.text.size}px`;

2✔

1033

2✔

1034

        domElement.style.fontFamily = this.text.font.join(',');

2✔

1035

        domElement.style.textTransform = this.text.transform;

2✔

1036

        domElement.style.letterSpacing = `${this.text.spacing}em`;

22✔

1037

        domElement.style.textAlign = this.text.justify;

1✔

1038

        domElement.style['white-space'] = 'pre-line';

1✔

1039

1✔

1040

        if (this.text.haloWidth > 0) {

1✔

1041

            domElement.style.setProperty('--text_stroke_display', 'block');

1✔

1042

            domElement.style.setProperty('--text_stroke_width', `${this.text.haloWidth}px`);

1✔

1043

            domElement.style.setProperty('--text_stroke_color', this.text.haloColor);

8✔

1051

        const icon = document.createElement('img');

8✔

1053

        const iconPromise  = new Promise((resolve, reject) => {

1✔

1054

            const opt = {

1✔

1055

                size: this.icon.size,

1✔

1056

                color: this.icon.color,

1✔

1057

                opacity: this.icon.opacity,

1✔

1058

                anchor: this.icon.anchor,

1✔

1059

};

1✔

1060

            icon.onload = () => resolve(_addIcon(icon, domElement, opt));

1✔

1061

            icon.onerror = err => reject(err);

1✔

1062

});

1✔

1063

1✔

1064

        if (!this.icon.cropValues && !this.icon.color) {

1✔

1065

            icon.src = this.icon.source;

1✔

1066

        } else {

1✔

1067

            const cropValues = this.icon.cropValues;

1✔

1068

            const color = this.icon.color;

1✔

1069

            const id = this.icon.id || this.icon.source;

1✔

1070

            const img = await loadImage(this.icon.source);

1✔

1071

            const imgd = cropImage(img, cropValues);

1✔

1072

            const imgdColored = replaceWhitePxl(imgd, color, id);

1✔

1073

            canvas.getContext('2d').putImageData(imgdColored, 0, 0);

1✔

1074

            icon.src = canvas.toDataURL('image/png');

1✔

1075

1✔

1076

        return iconPromise;

1✔

1077

1✔

1078

1✔

1079

/**

1✔

1080

     * Gets the values corresponding to the anchor of the text. It is

1✔

1081

     * proportions, to use with a `translate()` and a `transform` property.

1✔

1082

1✔

1083

     * @return {Number[]} Two percentage values, for x and y respectively.

1✔

1084

*/

1✔

1085

    getTextAnchorPosition() {

1✔

1086

        if (typeof this.text.anchor === 'string') {

1✔

1087

            if (Object.keys(textAnchorPosition).includes(this.text.anchor)) {

1✔

1088

                return textAnchorPosition[this.text.anchor];

1✔

1089

            } else {

1✔

1090

                console.error(`${this.text.anchor} is not a valid input for Style.text.anchor parameter.`);

1✔

1091

                return textAnchorPosition.center;

1✔

1092

1✔

1093

        } else {

1✔

1094

            return this.text.anchor;

1✔

1095

1✔

1096

1✔

1097

1✔

1098

1✔

1099

// Add custom style sheet with iTowns specifics

1✔

1100

const CustomStyle = {

1✔

1101

    itowns_stroke_single_before,

1✔

1102

};

1✔

1103

1✔

1104

const customStyleSheet = document.createElement('style');

1✔

1105

customStyleSheet.type = 'text/css';

1✔

1106

1✔

1107

Object.keys(CustomStyle).forEach((key) => {

1✔

1108

    customStyleSheet.innerHTML += `${CustomStyle[key]}\n\n`;

1✔

1109

});

1✔

1110

1✔

1111

if (typeof document !== 'undefined') {

1✔

1112

    document.getElementsByTagName('head')[0].appendChild(customStyleSheet);

1✔

1113

1✔

1114

1✔

1115

export default Style;

1✔

iTowns / itowns / 9485406633

Source File
Press 'n' to go to next uncovered line, 'b' for previous

iTowns / itowns / 9485406633

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous