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

192✔

43

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

192✔

44

        // `context.properties` property.

2✔

45

        return property(ctx.properties, ctx);

2✔

46

2✔

47

    return property;

2✔

48

2✔

49

2✔

50

function rgba2rgb(orig) {

2✔

53

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

192✔

54

        return { color: orig };

192✔

55

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

192✔

57

        if (result === null) {

1✔

58

            return { color: orig, opacity: 1.0 };

1✔

59

        } else if (result[7]) {

1✔

60

            let opacity = 1.0;

1✔

61

            if (result[9]) {

1✔

62

                opacity = parseInt(result[9].length == 1 ? `${result[9]}${result[9]}` : result[9], 16) * inv255;

33✔

63

2✔

64

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

20✔

65

        } else if (result[1]) {

18✔

66

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

18✔

67

18✔

68

18✔

69

18✔

70

18✔

71

function readVectorProperty(property, options) {

18✔

72

    if (property != undefined) {

18✔

73

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

14✔

75

        } else {

1✔

76

            return property;

5✔

77

5✔

78

5✔

79

5✔

80

5✔

81

async function loadImage(source) {

5✔

82

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

14✔

83

    if (!promise) {

9✔

84

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

9✔

85

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

9✔

86

18✔

87

    return (await promise).image;

1✔

88

159✔

89

159✔

90

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

159✔

91

    canvas.width = cropValues.width;

34✔

92

    canvas.height = cropValues.height;

1✔

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,499✔

159

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

4,499✔

160

                if (defaultValue instanceof Function) {

812✔

161

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

812✔

162

812✔

163

                return defaultValue;

190✔

164

},

190✔

165

            set: (v) => {

812✔

166

                property = v;

551✔

167

},

812✔

168

});

812✔

169

2✔

170

2✔

171

/**

812✔

172

 * @class

812✔

173

 * @classdesc StyleContext stores metadata of one FeatureGeometry that are needed for its style computation:

812✔

174

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

812✔

175

 * properties and its coordinates (for base_altitude).

4,499✔

176

23✔

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

110✔

207

110✔

208

    setGeometry(g) {

110✔

209

        this.#geometry = g;

110✔

210

110✔

211

110✔

212

    setCollection(c) {

110✔

213

        this.collection = c;

110✔

214

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

110✔

215

110✔

216

110✔

217

    setLocalCoordinatesFromArray(vertices, offset) {

110✔

218

        this.#worldCoordsComputed = false;

110✔

219

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

110✔

220

110✔

221

14✔

222

    get properties() {

14✔

223

        return this.#geometry.properties;

14✔

224

14✔

225

14✔

226

    get type() {

110✔

227

        return this.#feature.type;

120✔

228

120✔

229

    get featureStyle() {

120✔

230

        let featureStyle = this.#feature.style;

120✔

231

        if (featureStyle instanceof Function) {

110✔

232

            featureStyle = featureStyle(this.properties, this);

110✔

233

248✔

234

        return featureStyle;

248✔

235

248✔

236

110✔

237

    get coordinates() {

110✔

238

        if (!this.#worldCoordsComputed) {

546✔

239

            this.#worldCoordsComputed = true;

546✔

240

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

110✔

241

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

120✔

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');

120✔

253

89✔

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

107✔

629

*/

107✔

630

    constructor(params = {}) {

107✔

631

        this.isStyle = true;

107✔

632

        this.context = new StyleContext();

107✔

633

107✔

634

        this.order = params.order || 0;

107✔

635

107✔

636

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

107✔

637

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

107✔

638

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

107✔

639

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

107✔

640

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

107✔

641

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

107✔

642

107✔

643

        this.zoom = {};

107✔

644

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

107✔

645

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

107✔

646

107✔

647

        this.fill = {};

107✔

648

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

107✔

649

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

107✔

650

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

107✔

651

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

107✔

652

        if (params.fill.extrusion_height) {

4✔

653

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

107✔

654

107✔

655

107✔

656

        this.stroke = {};

107✔

657

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

107✔

658

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

107✔

659

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

107✔

660

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

107✔

661

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

107✔

662

107✔

663

        this.point = {};

107✔

664

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

107✔

665

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

107✔

666

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

107✔

667

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

107✔

668

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

107✔

669

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

107✔

670

        if (params.point.model) {

107✔

671

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

107✔

672

107✔

673

107✔

674

        this.text = {};

107✔

675

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

107✔

676

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

107✔

677

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

107✔

678

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

107✔

679

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

107✔

680

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

107✔

681

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

107✔

682

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

107✔

683

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

107✔

684

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

107✔

685

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

107✔

686

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

107✔

687

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

107✔

688

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

107✔

689

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

107✔

690

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

107✔

695

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

107✔

696

        if (params.icon.key) {

107✔

697

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

107✔

698

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

107✔

699

107✔

700

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

107✔

701

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

107✔

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);

1✔

706

1✔

707

1✔

708

    setContext(ctx) {

1✔

709

        this.context = ctx;

1✔

710

1✔

711

250✔

712

/**

250✔

713

     * set Style from (geojson-like) properties.

250✔

714

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

250✔

715

     * @param {FeatureContext} featCtx the context of the feature

250✔

716

49✔

718

*/

49✔

720

        const type = featCtx.type;

49✔

721

        const style = {};

49✔

723

            const point = {

49✔

724

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

49✔

725

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

49✔

726

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

49✔

727

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

49✔

730

                style.point = point;

49✔

731

49✔

733

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

49✔

737

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

49✔

741

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

49✔

742

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

49✔

743

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

250✔

744

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

201✔

747

                style.icon = icon;

201✔

748

201✔

751

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

201✔

752

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

201✔

753

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

195✔

754

};

195✔

757

195✔

758

            if (type !== FEATURE_TYPES.LINE) {

195✔

759

                const fill = {

1✔

760

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

1✔

761

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

1✔

762

};

1✔

763

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

1✔

764

                    style.fill = fill;

1✔

765

1✔

766

1✔

767

1✔

768

        return style;

1✔

769

23✔

770

23✔

771

/**

23✔

772

     * set Style from vector tile layer properties.

23✔

773

     * @param {Object} layer vector tile layer.

23✔

774

     * @param {Object} sprites vector tile layer.

23✔

776

     * @param {Boolean} [symbolToCircle=false]

23✔

777

23✔

778

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

23✔

779

*/

23✔

780

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

23✔

781

        const style = {

23✔

782

            fill: {},

23✔

783

            stroke: {},

15✔

784

            point: {},

15✔

785

            text: {},

15✔

786

            icon: {},

15✔

787

};

15✔

788

15✔

789

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

15✔

790

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

15✔

791

15✔

792

        style.order = order;

15✔

793

15✔

794

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

15✔

795

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

15✔

796

            style.fill.color = color;

1✔

797

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

1✔

802

                        source: sprites.source,

15✔

803

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

15✔

804

};

5✔

805

                } catch (err) {

5✔

806

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

5✔

807

                    throw err;

5✔

808

5✔

809

5✔

810

5✔

811

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

23✔

812

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

1✔

813

                style.stroke.color = color;

1✔

814

                style.stroke.opacity = opacity;

1✔

815

                style.stroke.width = 1.0;

1✔

816

                style.stroke.dasharray = [];

1✔

817

1✔

818

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

1✔

819

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

1✔

820

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

8✔

821

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

7✔

822

            style.stroke.color = color;

1✔

823

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

1✔

824

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

1✔

825

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

7✔

826

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

6✔

827

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

6✔

828

            style.point.color = color;

1✔

829

            style.point.opacity = opacity;

1✔

831

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

5✔

833

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

6✔

834

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

6✔

835

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

6✔

836

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

6✔

837

                style.text.zOrder = 'Y';

6✔

838

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

6✔

839

                style.text.zOrder = 0;

6✔

840

6✔

841

6✔

842

            // position

6✔

843

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

6✔

844

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

6✔

845

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

6✔

846

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

6✔

847

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

6✔

848

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

6✔

849

6✔

850

            // content

6✔

851

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

6✔

852

            style.text.wrap = readVectorProperty(layer.layout['text-max-width']);

6✔

854

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

6✔

855

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

6✔

856

6✔

860

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

6✔

861

6✔

862

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

6✔

863

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

5✔

864

            if (haloColor) {

2✔

865

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

2✔

866

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

2✔

867

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

2✔

874

                    style.icon.id = iconImg;

1✔

875

                    if (iconImg.stops) {

2✔

876

                        const iconCropValue = {

2✔

877

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

5✔

878

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

3✔

879

                                let cropValues = sprites[stop[1]];

3✔

882

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

5✔

883

                                        cropValues = sprites[id];

5✔

884

                                        return sprites[id];

5✔

885

};

5✔

886

5✔

887

                                return [stop[0], cropValues];

5✔

888

}),

5✔

889

};

5✔

890

                        style.icon.cropValues = iconCropValue;

5✔

891

                    } else {

5✔

895

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

23✔

896

                                style.icon.cropValues = sprites[id];

23✔

897

                                return sprites[id];

23✔

898

};

23✔

899

23✔

900

23✔

901

                    style.icon.source = sprites.source;

23✔

902

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

23✔

903

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

1✔

904

                    style.icon.color = color;

1✔

905

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

1✔

906

                } catch (err) {

1✔

907

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

1✔

908

                    throw err;

3✔

909

3✔

910

3✔

911

3✔

912

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

3✔

913

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

3✔

914

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

3✔

915

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

3✔

916

        style.zoom = {

3✔

917

            min: layer.minzoom || 0,

3✔

918

            max: layer.maxzoom || 24,

1✔

919

};

4✔

920

        return style;

4✔

921

4✔

922

4✔

923

/**

4✔

924

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

4✔

926

     * @param {Path2D} polygon The current texture canvas polygon.

4✔

928

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

4✔

929

*/

4✔

932

        // draw line or edge of polygon

4✔

933

        if (this.stroke) {

4✔

934

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

1✔

935

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

5✔

936

5✔

937

5✔

938

        // fill inside of polygon

5✔

939

        if (canBeFilled && this.fill) {

5✔

940

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

5✔

941

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

1✔

942

1✔

943

1✔

944

1✔

946

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

1✔

947

            txtrCtx.strokeStyle = this.stroke.color;

1✔

948

1✔

949

        const width = (this.stroke.width || 2.0) * invCtxScale;

1✔

950

        if (txtrCtx.lineWidth !== width) {

1✔

953

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

5✔

954

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

4✔

955

            txtrCtx.globalAlpha = alpha;

5✔

956

5✔

957

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

5✔

958

            txtrCtx.lineCap = this.stroke.lineCap;

1✔

959

1✔

960

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

1✔

961

        txtrCtx.stroke(polygon);

1✔

962

1✔

963

1✔

964

    async _applyFillToPolygon(txtrCtx, invCtxScale, polygon) {

1✔

965

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

1✔

966

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

1✔

967

        if (this.fill.pattern) {

1✔

968

            let img = this.fill.pattern;

22✔

970

            if (this.fill.pattern.source) {

22✔

971

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

22✔

972

22✔

973

            cropImage(img, cropValues);

22✔

974

22✔

975

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

22✔

976

            if (txtrCtx.fillStyle.setTransform) {

22✔

977

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

22✔

978

            } else {

22✔

979

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

22✔

980

22✔

981

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

22✔

982

            txtrCtx.fillStyle = this.fill.color;

22✔

983

14✔

984

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

14✔

985

            txtrCtx.globalAlpha = this.fill.opacity;

14✔

986

14✔

987

        txtrCtx.fill(polygon);

14✔

988

14✔

989

14✔

990

/**

14✔

991

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

14✔

992

     * properties of this style.

14✔

993

14✔

994

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

22✔

995

13✔

996

     * @returns {undefined|Promise<HTMLImageElement>}

13✔

997

     *          for a text label: undefined.

13✔

998

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

13✔

999

*/

13✔

1000

    async applyToHTML(domElement) {

13✔

1001

        if (arguments.length > 1) {

13✔

1002

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

13✔

1003

13✔

1004

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

22✔

1005

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

22✔

1006

2✔

1007

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

2✔

1008

        if (this.text.size > 0) {

2✔

1009

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

2✔

1010

2✔

1011

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

2✔

1012

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

2✔

1013

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

2✔

1014

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

22✔

1015

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

1✔

1016

1✔

1017

        if (this.text.haloWidth > 0) {

1✔

1018

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

1✔

1019

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

1✔

1020

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

8✔

1021

            domElement.setAttribute('data-before', domElement.textContent);

8✔

1022

8✔

1023

8✔

1032

                size: this.icon.size,

1✔

1033

                color: this.icon.color,

1✔

1034

                opacity: this.icon.opacity,

1✔

1035

                anchor: this.icon.anchor,

1✔

1036

};

1✔

1037

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

1✔

1038

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

1✔

1039

});

1✔

1040

1✔

1041

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

1✔

1042

            icon.src = this.icon.source;

1✔

1043

        } else {

1✔

1044

            const cropValues = this.icon.cropValues;

1✔

1045

            const color = this.icon.color;

1✔

1046

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

1✔

1047

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

1✔

1048

            const imgd = cropImage(img, cropValues);

1✔

1049

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

1✔

1050

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

1✔

1051

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

1✔

1052

1✔

1053

        return iconPromise;

1✔

1054

1✔

1055

1✔

1056

/**

1✔

1057

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

1✔

1058

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

1✔

1059

1✔

1060

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

1✔

1061

*/

1✔

1062

    getTextAnchorPosition() {

1✔

1063

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

1✔

1064

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

1✔

1065

                return textAnchorPosition[this.text.anchor];

1✔

1066

            } else {

1✔

1067

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

1✔

1068

                return textAnchorPosition.center;

1✔

1069

1✔

1070

        } else {

1✔

1071

            return this.text.anchor;

1✔

1072

1✔

1073

1✔

1074

1✔

1075

1✔

1076

// Add custom style sheet with iTowns specifics

1✔

1077

const CustomStyle = {

1✔

1078

    itowns_stroke_single_before,

1✔

1079

};

1✔

1080

1✔

1081

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

1✔

1082

customStyleSheet.type = 'text/css';

1✔

1083

1✔

1084

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

1✔

1085

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

1✔

1086

});

1✔

1087

1✔

1088

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

1✔

1089

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

1✔

1090

1✔

1091

1✔

1092

export default Style;

1✔

iTowns / itowns / 9870628366

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

iTowns / itowns / 9870628366

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