iTowns/itowns | Build 9486705576 | 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

1✔

26

    if (property.stops) {

1✔

27

        const stops = property.stops;

1✔

28

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

1✔

29

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

1✔

30

            const stop = stops[i];

1✔

31

1✔

32

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

1✔

33

                property = stop[1];

1✔

34

                break;

1✔

35

1✔

36

1✔

37

1✔

38

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

1✔

39

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

1✔

40

1✔

41

    if (property instanceof Function) {

1✔

42

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

236✔

43

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

236✔

44

        // `context.properties` property.

6✔

45

        return property(ctx.properties, ctx);

6✔

46

6✔

47

    return property;

6✔

48

6✔

49

6✔

50

function rgba2rgb(orig) {

6✔

53

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

236✔

54

        return { color: orig };

236✔

55

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

236✔

57

        if (!result) {

3✔

58

            return { color: orig, opacity: 1.0 };

3✔

59

        } else if (result[7]) {

3✔

60

            let opacity = 1.0;

3✔

61

            if (result[9]) {

236✔

64

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

14✔

65

        } else if (result[0]) {

14✔

66

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

14✔

67

14✔

68

14✔

69

14✔

70

14✔

71

function readVectorProperty(property, options) {

14✔

72

    if (property != undefined) {

3✔

73

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

14✔

77

4✔

78

4✔

79

4✔

80

4✔

81

async function loadImage(source) {

4✔

82

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

11✔

83

    if (!promise) {

7✔

84

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

7✔

85

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

7✔

86

14✔

87

    return (await promise).image;

1✔

88

148✔

89

148✔

90

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

148✔

93

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

1✔

94

    ctx.drawImage(img,

2✔

95

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

2✔

96

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

2✔

97

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

2✔

98

2✔

99

2✔

100

function replaceWhitePxl(imgd, color, id) {

1✔

101

    if (!color) {

3✔

102

        return imgd;

3✔

103

3✔

104

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

3✔

105

    if (!imgdColored) {

2✔

106

        const pix = imgd.data;

3✔

107

        const newColor = new Color(color);

3✔

108

        const colorToChange = new Color('white');

3✔

109

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

3✔

110

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

3✔

111

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

3✔

112

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

1✔

113

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

2✔

114

1✔

115

        cacheStyle.set(imgd, id, color);

1✔

116

        return imgd;

1✔

117

1✔

118

    return imgdColored;

1✔

119

1✔

120

1✔

121

const textAnchorPosition = {

1✔

122

    left: [0, -0.5],

1✔

123

    right: [-1, -0.5],

1✔

124

    top: [-0.5, 0],

1✔

125

    bottom: [-0.5, -1],

1✔

126

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

1✔

127

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

100✔

128

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

100✔

129

    center: [-0.5, -0.5],

100✔

130

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

100✔

131

};

100✔

132

100✔

133

/**

100✔

134

 * 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✔

135

 * by generating its getter and setter.

1✔

137

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

1✔

138

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

1✔

139

 * the default fallback value (`defaultValue`).

1✔

140

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

1✔

141

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

1✔

142

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

1✔

143

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

1✔

144

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

1✔

145

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

1✔

146

*/

1✔

147

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

1✔

148

    let property;

1✔

149

    Object.defineProperty(

1✔

150

        style[category],

1✔

151

        parameter,

1✔

152

1✔

153

            enumerable: true,

1✔

154

            get: () => {

1✔

155

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

1✔

156

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

1✔

157

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

1✔

158

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

4,667✔

159

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

4,667✔

160

                if (defaultValue instanceof Function) {

1,558✔

161

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

1,558✔

162

1,558✔

163

                return defaultValue;

236✔

164

},

236✔

165

            set: (v) => {

1,558✔

166

                property = v;

1,038✔

167

},

1,558✔

171

/**

1,558✔

172

 * @class

1,558✔

174

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

1,558✔

175

 * properties and its coordinates (for base_altitude).

4,667✔

176

751✔

177

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

1✔

178

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

1✔

179

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

1✔

180

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

1✔

181

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

1✔

182

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

1✔

183

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

1✔

184

 *                                  setLocalCoordinatesFromArray().

1✔

185

 * private properties:

1✔

186

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

1✔

187

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

1✔

188

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

1✔

189

 *                                      from the local coordinates?

1✔

190

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

1✔

191

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

1✔

192

*/

1✔

193

export class StyleContext {

1✔

194

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

1✔

195

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

1✔

196

    #worldCoordsComputed = true;

1✔

197

    #feature = {};

1✔

198

    #geometry = {};

1✔

199

1✔

200

    setZoom(zoom) {

1✔

201

        this.zoom = zoom;

1✔

202

1✔

203

1✔

204

    setFeature(f) {

1✔

205

        this.#feature = f;

1✔

206

114✔

207

114✔

208

    setGeometry(g) {

114✔

209

        this.#geometry = g;

114✔

210

114✔

211

114✔

212

    setCollection(c) {

114✔

213

        this.collection = c;

114✔

214

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

114✔

215

114✔

216

114✔

217

    setLocalCoordinatesFromArray(vertices, offset) {

114✔

218

        this.#worldCoordsComputed = false;

114✔

219

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

114✔

220

114✔

221

14✔

222

    get properties() {

14✔

223

        return this.#geometry.properties;

14✔

224

14✔

225

14✔

226

    get type() {

114✔

227

        return this.#feature.type;

120✔

228

120✔

229

    get featureStyle() {

120✔

230

        let featureStyle = this.#feature.style;

120✔

231

        if (featureStyle instanceof Function) {

114✔

232

            featureStyle = featureStyle(this.properties, this);

114✔

233

248✔

234

        return featureStyle;

248✔

235

248✔

236

114✔

237

    get coordinates() {

114✔

238

        if (!this.#worldCoordsComputed) {

961✔

239

            this.#worldCoordsComputed = true;

961✔

240

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

114✔

241

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

168✔

242

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

120✔

243

120✔

244

120✔

245

        return this.#worldCoord;

120✔

246

120✔

247

120✔

248

120✔

249

function _addIcon(icon, domElement, opt) {

120✔

250

    const cIcon = icon.cloneNode();

31✔

251

31✔

252

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

168✔

253

137✔

254

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

1✔

255

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

13✔

256

    cIcon.style.color = opt.color;

13✔

257

    cIcon.style.opacity = opt.opacity;

13✔

258

    cIcon.style.position = 'absolute';

13✔

259

    cIcon.style.top = '0';

13✔

260

    cIcon.style.left = '0';

13✔

261

13✔

262

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

13✔

263

        case 'left':

13✔

264

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

13✔

265

            break;

13✔

266

        case 'right':

13✔

267

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

13✔

268

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

13✔

269

            break;

1✔

270

        case 'top':

1✔

271

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

1✔

272

            break;

1✔

273

        case 'bottom':

13✔

274

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

1✔

275

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

13✔

276

            break;

1✔

277

        case 'bottom-left':

1✔

278

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

13✔

279

            break;

1✔

280

        case 'bottom-right':

1✔

281

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

13✔

282

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

1✔

283

            break;

1✔

284

        case 'top-left':

13✔

285

            break;

1✔

286

        case 'top-right':

13✔

287

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

1✔

288

            break;

13✔

289

        case 'center':

13✔

290

        default:

5✔

291

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

5✔

292

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

13✔

293

            break;

13✔

294

13✔

295

13✔

296

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

13✔

297

    domElement.appendChild(cIcon);

1✔

298

    return cIcon;

1✔

299

1✔

300

1✔

301

/**

1✔

302

 * @typedef {Object} StyleOptions

1✔

303

 * @memberof StyleOptions

1✔

304

1✔

305

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

1✔

306

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

1✔

307

1✔

308

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

1✔

309

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

1✔

310

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

1✔

311

1✔

312

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

1✔

313

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

1✔

314

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

1✔

315

 * Default is no value, which means no fill.

1✔

316

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

1✔

317

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

1✔

318

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

1✔

319

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

1✔

320

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

1✔

321

 * for how to use.

1✔

322

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

1✔

323

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

1✔

324

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

1✔

325

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

1✔

326

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

1✔

327

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

1✔

328

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

1✔

329

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

1✔

330

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

1✔

331

 * for each coordinate.

1✔

332

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

1✔

333

 * then the altitude value is set to 0.

1✔

334

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

1✔

335

 * polygons will be extruded by the specified amount

1✔

336

1✔

337

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

1✔

338

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

1✔

339

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

1✔

340

 * Default is no value, which means no stroke.

1✔

341

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

1✔

342

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

1✔

343

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

1✔

344

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

1✔

345

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

1✔

346

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

1✔

347

 * for each coordinate.

1✔

348

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

1✔

349

 * then the altitude value is set to 0.

1✔

350

1✔

351

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

1✔

352

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

1✔

353

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

1✔

354

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

1✔

355

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

1✔

356

 * is `2.0`.

1✔

357

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

1✔

358

 * any [valid color

1✔

359

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

1✔

360

 * Not supported for a `GeometryLayer`.

1✔

361

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

1✔

362

 * is `0.0` (no border).

1✔

363

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

1✔

364

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

1✔

365

 * Not supported for `GeometryLayer`.

1✔

366

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

1✔

367

 * for each coordinate.

1✔

368

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

1✔

369

 * then the altitude value is set to 0.

1✔

370

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

1✔

371

1✔

372

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

1✔

373

 * for Lines and Polygons features.)

1✔

374

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

1✔

375

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

1✔

376

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

1✔

377

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

1✔

378

 * text will be displayed.

1✔

379

1✔

380

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

1✔

381

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

1✔

382

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

1✔

383

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

1✔

384

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

1✔

385

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

1✔

386

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

1✔

387

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

1✔

388

 * Default is `#000000`.

1✔

389

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

1✔

390

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

1✔

391

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

1✔

392

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

1✔

393

1✔

394

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

1✔

395

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

1✔

396

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

1✔

397

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

1✔

398

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

1✔

399

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

1✔

400

 * is `[0, 0]`.

1✔

401

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

1✔

402

 * Default is `2`.

1✔

403

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

1✔

404

 * `16`.

1✔

405

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

1✔

406

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

1✔

407

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

1✔

408

 * Default is `0`.

1✔

409

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

1✔

410

 * property

1✔

411

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

1✔

412

 * Default is `none`.

1✔

413

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

1✔

414

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

1✔

415

 * Default is `center`.

1✔

416

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

1✔

417

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

1✔

418

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

1✔

419

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

1✔

420

 * Arial Unicode MS Regular, sans-serif`.

1✔

421

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

1✔

422

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

1✔

423

 * Default is `#000000`.

1✔

424

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

1✔

425

 * Default is `0`.

1✔

426

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

1✔

427

 * Default is `0`.

1✔

428

1✔

429

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

1✔

430

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

1✔

431

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

1✔

432

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

1✔

433

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

1✔

434

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

1✔

435

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

1✔

436

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

1✔

437

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

1✔

438

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

1✔

439

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

1✔

440

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

1✔

441

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

1✔

442

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

1✔

443

*/

1✔

444

1✔

445

/**

1✔

446

 * @description An object that can contain any properties

1✔

447

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

1✔

448

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

1✔

449

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

1✔

450

 * @hideconstructor

1✔

451

*/

1✔

452

export class StyleOptions {}

1✔

453

1✔

454

/**

1✔

455

 * @class

1✔

456

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

1✔

457

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

1✔

458

 * them in textures that will be placed onto tiles.

1✔

459

1✔

460

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

1✔

461

 * main components in a `Style` object:

1✔

462

 * - `fill` is for all fillings and polygons

1✔

463

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

1✔

464

 * - `point` is for all points

1✔

465

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

1✔

466

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

1✔

467

1✔

468

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

1✔

469

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

1✔

470

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

1✔

471

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

1✔

472

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

1✔

473

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

1✔

474

1✔

475

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

1✔

476

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

1✔

477

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

1✔

478

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

1✔

479

 * any [valid color

1✔

480

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

1✔

481

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

1✔

482

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

1✔

483

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

1✔

484

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

1✔

485

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

1✔

486

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

1✔

487

 * for how to use.

1✔

488

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

1✔

489

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

1✔

490

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

1✔

491

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

1✔

492

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

1✔

493

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

1✔

494

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

1✔

495

 * for each coordinate.

1✔

496

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

1✔

497

 * then the altitude value is set to 0.

1✔

498

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

1✔

499

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

1✔

500

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

1✔

501

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

1✔

502

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

1✔

503

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

1✔

504

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

1✔

505

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

1✔

506

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

1✔

507

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

1✔

508

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

1✔

509

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

1✔

510

 * for each coordinate.

1✔

511

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

1✔

512

 * then the altitude value is set to 0.

1✔

513

1✔

514

 * @property {Object} point - Point style.

1✔

515

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

1✔

516

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

1✔

517

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

1✔

518

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

1✔

519

 * is `2.0`.

1✔

520

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

1✔

521

 * any [valid color

1✔

522

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

1✔

523

 * Not supported for `GeometryLayer`.

1✔

524

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

1✔

525

 * is `0.0` (no border).

1✔

526

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

1✔

527

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

1✔

528

 * Not supported for `GeometryLayer`.

1✔

529

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

1✔

530

 * for each coordinate.

1✔

531

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

1✔

532

 * then the altitude value is set to 0.

1✔

533

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

1✔

534

1✔

535

1✔

536

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

1✔

537

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

1✔

538

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

1✔

539

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

1✔

540

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

1✔

541

 * text will be displayed.

1✔

542

1✔

543

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

1✔

544

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

1✔

545

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

1✔

546

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

1✔

547

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

1✔

548

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

1✔

549

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

1✔

550

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

1✔

551

 * Default is `#000000`.

1✔

552

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

1✔

553

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

1✔

554

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

1✔

555

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

1✔

556

1✔

557

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

1✔

558

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

1✔

559

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

1✔

560

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

1✔

561

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

1✔

562

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

1✔

563

 * is `[0, 0]`.

1✔

564

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

1✔

565

 * Default is `2`.

1✔

566

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

1✔

567

 * `16`.

1✔

568

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

1✔

569

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

1✔

570

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

1✔

571

 * Default is `0`.

1✔

572

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

1✔

573

 * property

1✔

574

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

1✔

575

 * Default is `none`.

1✔

576

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

1✔

577

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

1✔

578

 * Default is `center`.

1✔

579

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

1✔

580

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

1✔

581

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

1✔

582

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

1✔

583

 * Arial Unicode MS Regular, sans-serif`.

1✔

584

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

1✔

585

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

1✔

586

 * Default is `#000000`.

1✔

587

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

1✔

588

 * Default is `0`.

1✔

589

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

1✔

590

 * Default is `0`.

1✔

591

1✔

592

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

1✔

593

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

1✔

594

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

1✔

595

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

1✔

596

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

1✔

597

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

1✔

598

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

1✔

599

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

1✔

600

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

1✔

601

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

1✔

602

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

1✔

603

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

1✔

604

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

1✔

605

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

1✔

606

1✔

607

 * @example

1✔

608

 * const style = new itowns.Style({

1✔

609

 *      stroke: { color: 'red' },

1✔

610

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

1✔

611

 * });

1✔

612

1✔

613

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

1✔

614

1✔

615

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

1✔

616

 *      source: source,

1✔

617

 *      style: style,

1✔

618

 * });

1✔

619

1✔

620

 * view.addLayer(layer);

1✔

621

*/

1✔

622

1✔

623

class Style {

1✔

624

/**

1✔

625

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

1✔

626

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

1✔

627

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

1✔

628

     * @constructor

111✔

629

*/

111✔

630

    constructor(params = {}) {

111✔

631

        this.isStyle = true;

111✔

632

        this.context = new StyleContext();

111✔

633

111✔

634

        this.order = params.order || 0;

111✔

635

111✔

636

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

111✔

637

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

111✔

638

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

111✔

639

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

111✔

640

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

111✔

641

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

111✔

642

111✔

643

        this.zoom = {};

111✔

644

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

111✔

645

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

111✔

646

111✔

647

        this.fill = {};

111✔

648

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

111✔

649

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

111✔

650

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

111✔

651

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

111✔

652

        if (params.fill.extrusion_height) {

4✔

653

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

111✔

654

111✔

655

111✔

656

        this.stroke = {};

111✔

657

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

111✔

658

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

111✔

659

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

111✔

660

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

111✔

661

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

111✔

662

111✔

663

        this.point = {};

111✔

664

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

111✔

665

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

111✔

666

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

111✔

667

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

111✔

668

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

111✔

669

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

111✔

670

        if (params.point.model) {

111✔

671

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

111✔

672

111✔

673

111✔

674

        this.text = {};

111✔

675

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

111✔

676

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

111✔

677

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

111✔

678

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

111✔

679

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

111✔

680

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

111✔

681

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

111✔

682

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

111✔

683

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

111✔

684

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

111✔

685

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

111✔

686

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

111✔

687

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

111✔

688

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

111✔

689

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

111✔

690

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

111✔

695

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

111✔

696

        if (params.icon.key) {

111✔

697

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

111✔

698

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

111✔

699

111✔

700

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

111✔

701

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

111✔

702

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

1✔

703

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

1✔

704

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

1✔

705

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

18✔

706

18✔

707

18✔

708

/**

18✔

709

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

18✔

710

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

18✔

711

18✔

712

     * @return {Style} This style.

1✔

713

*/

1✔

714

    copy(style) {

1✔

715

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

1✔

716

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

1✔

717

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

17✔

718

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

1✔

719

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

1✔

720

        return this;

1✔

721

1✔

722

1✔

723

/**

1✔

724

         * Clones this style.

1✔

725

1✔

726

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

1✔

727

*/

1✔

728

    clone() {

1✔

729

        const clone = new Style();

1✔

730

        return clone.copy(this);

1✔

731

250✔

732

250✔

733

    setContext(ctx) {

250✔

734

        this.context = ctx;

250✔

735

250✔

736

250✔

737

/**

250✔

738

     * set Style from (geojson-like) properties.

250✔

739

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

250✔

741

49✔

744

    static setFromProperties(properties, featCtx) {

49✔

747

        if (type === FEATURE_TYPES.POINT) {

49✔

748

            const point = {

49✔

749

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

49✔

750

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

49✔

751

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

49✔

753

};

49✔

754

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

49✔

757

            const text = {

49✔

758

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

49✔

761

};

49✔

763

                style.text = text;

49✔

764

49✔

765

            const icon = {

49✔

766

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

49✔

767

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

250✔

768

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

201✔

770

};

201✔

771

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

201✔

774

        } else {

201✔

775

            const stroke = {

201✔

776

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

201✔

777

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

201✔

780

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

195✔

781

                style.stroke = stroke;

195✔

782

1✔

783

            if (type !== FEATURE_TYPES.LINE) {

250✔

784

                const fill = {

1✔

785

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

1✔

786

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

1✔

787

};

1✔

788

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

1✔

789

                    style.fill = fill;

1✔

790

19✔

791

19✔

792

19✔

793

        return style;

19✔

794

19✔

795

9✔

796

/**

9✔

797

     * set Style from vector tile layer properties.

19✔

798

     * @param {Object} layer vector tile layer.

19✔

800

     * @param {Number} [order=0]

19✔

801

     * @param {Boolean} [symbolToCircle=false]

19✔

802

19✔

803

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

19✔

804

*/

19✔

805

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

19✔

806

        const style = {

11✔

807

            fill: {},

11✔

808

            stroke: {},

11✔

809

            point: {},

11✔

810

            text: {},

2✔

811

            icon: {},

11✔

812

};

11✔

813

11✔

814

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

11✔

815

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

11✔

816

11✔

817

        style.order = order;

11✔

818

6✔

819

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

11✔

820

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

11✔

821

            style.fill.color = color;

1✔

826

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

11✔

827

                        source: sprites.source,

2✔

828

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

2✔

829

};

2✔

830

                } catch (err) {

2✔

831

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

2✔

832

                    throw err;

19✔

833

8✔

834

1✔

835

1✔

836

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

1✔

837

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

1✔

838

                style.stroke.color = color;

1✔

839

                style.stroke.opacity = opacity;

1✔

840

                style.stroke.width = 1.0;

1✔

841

                style.stroke.dasharray = [];

1✔

842

1✔

843

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

1✔

844

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

8✔

845

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

7✔

846

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

1✔

847

            style.stroke.color = color;

1✔

848

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

1✔

849

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

1✔

850

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

7✔

851

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

6✔

852

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

6✔

853

            style.point.color = color;

6✔

856

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

6✔

857

            // overlapping order

6✔

858

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

6✔

859

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

6✔

860

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

6✔

861

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

6✔

862

                style.text.zOrder = 'Y';

6✔

863

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

6✔

864

                style.text.zOrder = 0;

6✔

865

6✔

866

6✔

867

            // position

6✔

868

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

6✔

869

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

6✔

870

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

6✔

871

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

6✔

872

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

6✔

873

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

6✔

874

6✔

875

            // content

6✔

876

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

6✔

878

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

6✔

879

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

6✔

884

            style.text.color = color;

6✔

885

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

6✔

886

5✔

887

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

5✔

888

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

2✔

889

            if (haloColor) {

2✔

890

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

2✔

891

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

2✔

892

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

1✔

897

            if (iconImg) {

1✔

898

                try {

2✔

899

                    style.icon.id = iconImg;

2✔

900

                    if (iconImg.stops) {

2✔

901

                        const iconCropValue = {

5✔

902

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

3✔

903

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

3✔

907

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

5✔

908

                                        cropValues = sprites[id];

5✔

909

                                        return sprites[id];

5✔

910

};

5✔

911

5✔

912

                                return [stop[0], cropValues];

5✔

913

}),

5✔

914

};

5✔

919

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

19✔

920

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

19✔

921

                                style.icon.cropValues = sprites[id];

19✔

922

                                return sprites[id];

19✔

923

};

19✔

924

19✔

925

19✔

926

                    style.icon.source = sprites.source;

19✔

927

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

1✔

928

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

1✔

929

                    style.icon.color = color;

1✔

930

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

1✔

931

                } catch (err) {

1✔

932

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

1✔

933

                    throw err;

3✔

934

3✔

935

3✔

936

3✔

937

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

3✔

938

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

3✔

939

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

3✔

940

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

3✔

941

        style.zoom = {

1✔

942

            min: layer.minzoom || 0,

4✔

943

            max: layer.maxzoom || 24,

4✔

944

};

4✔

945

        return style;

4✔

946

2✔

947

2✔

948

/**

2✔

950

     * @param {CanvasRenderingContext2D} txtrCtx The Context 2D of the texture canvas.

4✔

952

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

4✔

953

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

4✔

954

*/

4✔

956

        const context = this.context;

4✔

957

        // draw line or edge of polygon

4✔

958

        if (this.stroke) {

1✔

959

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

5✔

960

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

5✔

961

5✔

962

5✔

963

        // fill inside of polygon

5✔

964

        if (canBeFilled && this.fill) {

5✔

965

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

1✔

970

    _applyStrokeToPolygon(txtrCtx, invCtxScale, polygon) {

1✔

971

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

1✔

972

            txtrCtx.strokeStyle = this.stroke.color;

1✔

973

1✔

978

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

5✔

979

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

5✔

980

            txtrCtx.globalAlpha = alpha;

5✔

981

5✔

982

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

1✔

983

            txtrCtx.lineCap = this.stroke.lineCap;

1✔

984

1✔

985

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

1✔

986

        txtrCtx.stroke(polygon);

1✔

987

1✔

988

1✔

989

    async _applyFillToPolygon(txtrCtx, invCtxScale, polygon) {

1✔

990

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

1✔

991

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

1✔

994

            const cropValues = this.fill.pattern.cropValues;

22✔

995

            if (this.fill.pattern.source) {

22✔

996

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

22✔

997

22✔

998

            cropImage(img, cropValues);

22✔

999

22✔

1000

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

22✔

1001

            if (txtrCtx.fillStyle.setTransform) {

22✔

1002

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

22✔

1003

            } else {

22✔

1004

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

22✔

1005

22✔

1006

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

22✔

1007

            txtrCtx.fillStyle = this.fill.color;

14✔

1008

14✔

1009

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

14✔

1010

            txtrCtx.globalAlpha = this.fill.opacity;

14✔

1011

14✔

1012

        txtrCtx.fill(polygon);

14✔

1013

14✔

1014

14✔

1015

/**

14✔

1016

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

22✔

1017

     * properties of this style.

22✔

1018

9✔

1019

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

22✔

1020

13✔

1021

     * @returns {undefined|Promise<HTMLImageElement>}

13✔

1022

     *          for a text label: undefined.

13✔

1023

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

13✔

1024

*/

13✔

1025

    async applyToHTML(domElement) {

13✔

1026

        if (arguments.length > 1) {

13✔

1027

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

22✔

1028

11✔

1029

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

22✔

1030

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

2✔

1031

2✔

1032

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

2✔

1033

        if (this.text.size > 0) {

2✔

1034

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

2✔

1035

2✔

1036

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

2✔

1037

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

2✔

1038

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

1✔

1039

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

1✔

1040

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

1✔

1041

1✔

1042

        if (this.text.haloWidth > 0) {

1✔

1043

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

1✔

1044

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

1✔

1045

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

8✔

1055

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

1✔

1056

            const opt = {

1✔

1057

                size: this.icon.size,

1✔

1058

                color: this.icon.color,

1✔

1059

                opacity: this.icon.opacity,

1✔

1060

                anchor: this.icon.anchor,

1✔

1061

};

1✔

1062

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

1✔

1063

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

1✔

1064

});

1✔

1065

1✔

1066

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

1✔

1067

            icon.src = this.icon.source;

1✔

1068

        } else {

1✔

1069

            const cropValues = this.icon.cropValues;

1✔

1070

            const color = this.icon.color;

1✔

1071

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

1✔

1072

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

1✔

1073

            const imgd = cropImage(img, cropValues);

1✔

1074

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

1✔

1075

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

1✔

1076

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

1✔

1077

1✔

1078

        return iconPromise;

1✔

1079

1✔

1080

1✔

1081

/**

1✔

1082

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

1✔

1083

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

1✔

1084

1✔

1085

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

1✔

1086

*/

1✔

1087

    getTextAnchorPosition() {

1✔

1088

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

1✔

1089

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

1✔

1090

                return textAnchorPosition[this.text.anchor];

1✔

1091

            } else {

1✔

1092

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

1✔

1093

                return textAnchorPosition.center;

1✔

1094

1✔

1095

        } else {

1✔

1096

            return this.text.anchor;

1✔

1097

1✔

1098

1✔

1099

1✔

1100

1✔

1101

// Add custom style sheet with iTowns specifics

1✔

1102

const CustomStyle = {

1✔

1103

    itowns_stroke_single_before,

1✔

1104

};

1✔

1105

1✔

1106

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

1✔

1107

customStyleSheet.type = 'text/css';

1✔

1108

1✔

1109

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

1✔

1110

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

1✔

1111

});

1✔

1112

1✔

1113

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

1✔

1114

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

1✔

1115

1✔

1116

1✔

1117

export default Style;

1✔

iTowns / itowns / 9486705576

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

iTowns / itowns / 9486705576

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