iTowns/itowns | Build 9321240616 | 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 != undefined) {

1✔

24

        if (property.expression) {

1✔

25

            return property.expression.evaluate(ctx);

1✔

26

        } else 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) {

174✔

39

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

1✔

40

155✔

51

function rgba2rgb(orig) {

155✔

52

    if (!orig) {

155✔

53

        return {};

155✔

54

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

155✔

55

        return { color: orig };

20✔

60

        } else if (result[7]) {

155✔

61

            let opacity = 1.0;

1✔

62

            if (result[9]) {

26✔

64

14✔

65

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

14✔

66

        } else if (result[0]) {

14✔

67

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

14✔

68

3✔

69

3✔

70

3✔

71

3✔

72

function readVectorProperty(property, options) {

14✔

73

    if (property != undefined) {

11✔

76

        } else {

4✔

77

            return property;

4✔

78

4✔

79

4✔

80

4✔

81

4✔

82

async function loadImage(source) {

11✔

83

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

7✔

84

    if (!promise) {

7✔

85

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

7✔

86

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

1✔

87

148✔

88

    return (await promise).image;

148✔

89

25✔

90

25✔

92

    canvas.width = cropValues.width;

25✔

93

    canvas.height = cropValues.height;

148✔

94

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

1✔

95

    ctx.drawImage(img,

2✔

96

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

2✔

97

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

2✔

98

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

1✔

99

3✔

100

3✔

101

function replaceWhitePxl(imgd, color, id) {

3✔

102

    if (!color) {

3✔

103

        return imgd;

3✔

104

2✔

105

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

3✔

106

    if (!imgdColored) {

3✔

107

        const pix = imgd.data;

3✔

108

        const newColor = new Color(color);

3✔

109

        const colorToChange = new Color('white');

3✔

110

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

3✔

111

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

3✔

112

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

3✔

113

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

1✔

114

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

2✔

115

1✔

116

        cacheStyle.set(imgd, id, color);

1✔

117

        return imgd;

1✔

118

1✔

119

    return imgdColored;

1✔

120

1✔

121

1✔

122

const textAnchorPosition = {

1✔

123

    left: [0, -0.5],

1✔

124

    right: [-1, -0.5],

1✔

125

    top: [-0.5, 0],

1✔

126

    bottom: [-0.5, -1],

100✔

127

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

100✔

128

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

100✔

129

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

100✔

130

    center: [-0.5, -0.5],

100✔

131

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

100✔

132

};

100✔

133

100✔

134

/**

100✔

135

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

137

 * The getter is in charge of returning the right style value from the following ones if they are defined (in that specific order):

1✔

138

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

1✔

139

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

1✔

140

 * the default fallback value (`defaultValue`).

1✔

141

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

1✔

142

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

1✔

143

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

1✔

144

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

1✔

145

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

1✔

146

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

1✔

147

*/

1✔

148

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

1✔

149

    let property;

1✔

150

    Object.defineProperty(

1✔

151

        style[category],

1✔

152

        parameter,

1✔

153

1✔

154

            enumerable: true,

1✔

155

            get: () => {

1✔

156

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

1✔

157

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

1✔

158

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

1✔

159

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

4,582✔

160

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

4,582✔

161

                if (defaultValue instanceof Function) {

1,534✔

162

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

1,534✔

163

155✔

164

                return defaultValue;

1,534✔

165

},

1,029✔

167

                property = v;

1,534✔

168

},

1,534✔

174

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

1,534✔

175

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

4,582✔

176

 * properties and its coordinates (for base_altitude).

1✔

177

1✔

178

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

1✔

179

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

1✔

180

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

1✔

181

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

1✔

182

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

1✔

183

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

1✔

184

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

1✔

185

 *                                  setLocalCoordinatesFromArray().

1✔

186

 * private properties:

1✔

187

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

1✔

188

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

1✔

189

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

1✔

190

 *                                      from the local coordinates?

1✔

191

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

1✔

192

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

1✔

193

*/

1✔

194

export class StyleContext {

1✔

195

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

1✔

196

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

1✔

197

    #worldCoordsComputed = true;

1✔

198

    #feature = {};

1✔

199

    #geometry = {};

1✔

200

1✔

201

    setZoom(zoom) {

1✔

202

        this.zoom = zoom;

1✔

203

1✔

204

112✔

205

    setFeature(f) {

112✔

206

        this.#feature = f;

112✔

207

112✔

208

112✔

209

    setGeometry(g) {

112✔

210

        this.#geometry = g;

112✔

211

112✔

212

112✔

213

    setCollection(c) {

112✔

214

        this.collection = c;

112✔

215

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

112✔

216

3✔

217

3✔

218

    setLocalCoordinatesFromArray(vertices, offset) {

112✔

219

        this.#worldCoordsComputed = false;

112✔

220

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

112✔

221

14✔

222

14✔

223

    get properties() {

14✔

224

        return this.#geometry.properties;

112✔

225

120✔

226

120✔

227

    get type() {

120✔

228

        return this.#feature.type;

120✔

229

120✔

230

    get featureStyle() {

120✔

231

        let featureStyle = this.#feature.style;

112✔

232

        if (featureStyle instanceof Function) {

424✔

233

            featureStyle = featureStyle(this.properties, this);

112✔

234

1,029✔

235

        return featureStyle;

1,029✔

236

1,029✔

237

1,029✔

238

    get coordinates() {

1,029✔

239

        if (!this.#worldCoordsComputed) {

1,029✔

240

            this.#worldCoordsComputed = true;

248✔

241

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

112✔

242

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

120✔

243

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

120✔

244

120✔

245

120✔

246

        return this.#worldCoord;

120✔

247

31✔

248

31✔

249

31✔

250

function _addIcon(icon, domElement, opt) {

31✔

251

    const cIcon = icon.cloneNode();

174✔

252

143✔

253

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

1✔

254

13✔

255

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

13✔

256

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

13✔

257

    cIcon.style.color = opt.color;

13✔

258

    cIcon.style.opacity = opt.opacity;

13✔

259

    cIcon.style.position = 'absolute';

13✔

260

    cIcon.style.top = '0';

13✔

261

    cIcon.style.left = '0';

13✔

262

13✔

263

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

13✔

264

        case 'left':

13✔

265

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

13✔

266

            break;

13✔

267

        case 'right':

1✔

268

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

13✔

269

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

1✔

270

            break;

1✔

271

        case 'top':

1✔

272

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

13✔

273

            break;

1✔

274

        case 'bottom':

1✔

275

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

13✔

276

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

1✔

277

            break;

1✔

278

        case 'bottom-left':

13✔

279

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

1✔

280

            break;

13✔

281

        case 'bottom-right':

1✔

282

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

1✔

283

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

13✔

284

            break;

1✔

285

        case 'top-left':

13✔

286

            break;

1✔

287

        case 'top-right':

1✔

288

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

13✔

289

            break;

5✔

290

        case 'center':

5✔

291

        default:

5✔

292

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

13✔

293

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

13✔

294

            break;

13✔

295

13✔

296

13✔

297

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

1✔

298

    domElement.appendChild(cIcon);

1✔

299

    return cIcon;

1✔

300

1✔

301

1✔

302

/**

1✔

303

 * @typedef {Object} StyleOptions

1✔

304

 * @memberof StyleOptions

1✔

305

1✔

306

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

1✔

307

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

1✔

308

1✔

309

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

1✔

310

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

1✔

311

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

1✔

312

1✔

313

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

1✔

314

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

1✔

315

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

1✔

316

 * Default is no value, which means no fill.

1✔

317

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

1✔

318

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

1✔

319

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

1✔

320

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

1✔

321

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

1✔

322

 * for how to use.

1✔

323

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

1✔

324

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

1✔

325

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

1✔

326

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

1✔

327

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

1✔

328

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

1✔

329

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

1✔

330

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

1✔

331

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

1✔

332

 * for each coordinate.

1✔

333

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

1✔

334

 * then the altitude value is set to 0.

1✔

335

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

1✔

336

 * polygons will be extruded by the specified amount

1✔

337

1✔

338

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

1✔

339

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

1✔

340

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

1✔

341

 * Default is no value, which means no stroke.

1✔

342

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

1✔

343

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

1✔

344

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

1✔

345

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

1✔

346

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

1✔

347

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

1✔

348

 * for each coordinate.

1✔

349

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

1✔

350

 * then the altitude value is set to 0.

1✔

351

1✔

352

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

1✔

353

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

1✔

354

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

1✔

355

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

1✔

356

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

1✔

357

 * is `2.0`.

1✔

358

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

1✔

359

 * any [valid color

1✔

360

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

1✔

361

 * Not supported for a `GeometryLayer`.

1✔

362

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

1✔

363

 * is `0.0` (no border).

1✔

364

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

1✔

365

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

1✔

366

 * Not supported for `GeometryLayer`.

1✔

367

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

1✔

368

 * for each coordinate.

1✔

369

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

1✔

370

 * then the altitude value is set to 0.

1✔

371

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

1✔

372

1✔

373

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

1✔

374

 * for Lines and Polygons features.)

1✔

375

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

1✔

376

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

1✔

377

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

1✔

378

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

1✔

379

 * text will be displayed.

1✔

380

1✔

381

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

1✔

382

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

1✔

383

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

1✔

384

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

1✔

385

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

1✔

386

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

1✔

387

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

1✔

388

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

1✔

389

 * Default is `#000000`.

1✔

390

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

1✔

391

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

1✔

392

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

1✔

393

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

1✔

394

1✔

395

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

1✔

396

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

1✔

397

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

1✔

398

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

1✔

399

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

1✔

400

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

1✔

401

 * is `[0, 0]`.

1✔

402

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

1✔

403

 * Default is `2`.

1✔

404

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

1✔

405

 * `16`.

1✔

406

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

1✔

407

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

1✔

408

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

1✔

409

 * Default is `0`.

1✔

410

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

1✔

411

 * property

1✔

412

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

1✔

413

 * Default is `none`.

1✔

414

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

1✔

415

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

1✔

416

 * Default is `center`.

1✔

417

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

1✔

418

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

1✔

419

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

1✔

420

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

1✔

421

 * Arial Unicode MS Regular, sans-serif`.

1✔

422

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

1✔

423

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

1✔

424

 * Default is `#000000`.

1✔

425

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

1✔

426

 * Default is `0`.

1✔

427

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

1✔

428

 * Default is `0`.

1✔

429

1✔

430

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

1✔

431

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

1✔

432

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

1✔

433

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

1✔

434

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

1✔

435

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

1✔

436

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

1✔

437

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

1✔

438

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

1✔

439

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

1✔

440

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

1✔

441

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

1✔

442

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

1✔

443

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

1✔

444

*/

1✔

445

1✔

446

/**

1✔

447

 * @description An object that can contain any properties

1✔

448

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

1✔

449

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

1✔

450

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

1✔

451

 * @hideconstructor

1✔

452

*/

1✔

453

export class StyleOptions {}

1✔

454

1✔

455

/**

1✔

456

 * @class

1✔

457

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

1✔

458

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

1✔

459

 * them in textures that will be placed onto tiles.

1✔

460

1✔

461

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

1✔

462

 * main components in a `Style` object:

1✔

463

 * - `fill` is for all fillings and polygons

1✔

464

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

1✔

465

 * - `point` is for all points

1✔

466

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

1✔

467

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

1✔

468

1✔

469

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

1✔

470

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

1✔

471

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

1✔

472

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

1✔

473

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

1✔

474

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

1✔

475

1✔

476

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

1✔

477

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

1✔

478

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

1✔

479

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

1✔

480

 * any [valid color

1✔

481

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

1✔

482

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

1✔

483

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

1✔

484

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

1✔

485

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

1✔

486

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

1✔

487

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

1✔

488

 * for how to use.

1✔

489

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

1✔

490

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

1✔

491

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

1✔

492

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

1✔

493

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

1✔

494

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

1✔

495

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

1✔

496

 * for each coordinate.

1✔

497

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

1✔

498

 * then the altitude value is set to 0.

1✔

499

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

1✔

500

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

1✔

501

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

1✔

502

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

1✔

503

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

1✔

504

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

1✔

505

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

1✔

506

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

1✔

507

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

1✔

508

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

1✔

509

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

1✔

510

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

1✔

511

 * for each coordinate.

1✔

512

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

1✔

513

 * then the altitude value is set to 0.

1✔

514

1✔

515

 * @property {Object} point - Point style.

1✔

516

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

1✔

517

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

1✔

518

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

1✔

519

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

1✔

520

 * is `2.0`.

1✔

521

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

1✔

522

 * any [valid color

1✔

523

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

1✔

524

 * Not supported for `GeometryLayer`.

1✔

525

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

1✔

526

 * is `0.0` (no border).

1✔

527

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

1✔

528

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

1✔

529

 * Not supported for `GeometryLayer`.

1✔

530

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

1✔

531

 * for each coordinate.

1✔

532

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

1✔

533

 * then the altitude value is set to 0.

1✔

534

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

1✔

535

1✔

536

1✔

537

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

1✔

538

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

1✔

539

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

1✔

540

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

1✔

541

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

1✔

542

 * text will be displayed.

1✔

543

1✔

544

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

1✔

545

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

1✔

546

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

1✔

547

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

1✔

548

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

1✔

549

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

1✔

550

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

1✔

551

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

1✔

552

 * Default is `#000000`.

1✔

553

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

1✔

554

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

1✔

555

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

1✔

556

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

1✔

557

1✔

558

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

1✔

559

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

1✔

560

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

1✔

561

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

1✔

562

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

1✔

563

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

1✔

564

 * is `[0, 0]`.

1✔

565

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

1✔

566

 * Default is `2`.

1✔

567

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

1✔

568

 * `16`.

1✔

569

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

1✔

570

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

1✔

571

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

1✔

572

 * Default is `0`.

1✔

573

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

1✔

574

 * property

1✔

575

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

1✔

576

 * Default is `none`.

1✔

577

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

1✔

578

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

1✔

579

 * Default is `center`.

1✔

580

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

1✔

581

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

1✔

582

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

1✔

583

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

1✔

584

 * Arial Unicode MS Regular, sans-serif`.

1✔

585

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

1✔

586

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

1✔

587

 * Default is `#000000`.

1✔

588

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

1✔

589

 * Default is `0`.

1✔

590

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

1✔

591

 * Default is `0`.

1✔

592

1✔

593

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

1✔

594

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

1✔

595

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

1✔

596

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

1✔

597

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

1✔

598

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

1✔

599

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

1✔

600

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

1✔

601

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

1✔

602

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

1✔

603

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

1✔

604

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

1✔

605

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

1✔

606

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

1✔

607

1✔

608

 * @example

1✔

609

 * const style = new itowns.Style({

1✔

610

 *      stroke: { color: 'red' },

1✔

611

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

1✔

612

 * });

1✔

613

1✔

614

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

1✔

615

1✔

616

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

1✔

617

 *      source: source,

1✔

618

 *      style: style,

1✔

619

 * });

1✔

620

1✔

621

 * view.addLayer(layer);

1✔

622

*/

1✔

623

1✔

624

class Style {

1✔

625

/**

1✔

626

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

1✔

627

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

1✔

628

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

109✔

629

     * @constructor

109✔

630

*/

7✔

631

    constructor(params = {}) {

109✔

632

        this.isStyle = true;

109✔

633

        this.context = new StyleContext();

109✔

634

109✔

635

        this.order = params.order || 0;

109✔

636

109✔

637

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

109✔

638

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

109✔

639

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

109✔

640

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

109✔

641

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

109✔

642

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

109✔

643

109✔

644

        this.zoom = {};

109✔

645

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

109✔

646

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

109✔

647

109✔

648

        this.fill = {};

109✔

649

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

109✔

650

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

109✔

651

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

109✔

652

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

109✔

653

        if (params.fill.extrusion_height) {

109✔

654

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

109✔

655

109✔

656

109✔

657

        this.stroke = {};

109✔

658

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

109✔

659

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

109✔

660

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

109✔

661

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

109✔

662

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

109✔

663

109✔

664

        this.point = {};

109✔

665

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

109✔

666

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

109✔

667

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

109✔

668

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

109✔

669

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

109✔

670

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

109✔

671

        if (params.point.model) {

109✔

672

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

109✔

673

109✔

674

109✔

675

        this.text = {};

109✔

676

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

109✔

677

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

109✔

678

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

109✔

679

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

109✔

680

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

109✔

681

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

109✔

682

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

109✔

683

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

109✔

684

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

109✔

685

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

109✔

686

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

109✔

687

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

109✔

688

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

109✔

689

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

109✔

690

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

109✔

691

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

109✔

693

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

109✔

694

109✔

695

        this.icon = {};

109✔

696

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

109✔

697

        if (params.icon.key) {

109✔

698

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

109✔

699

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

109✔

700

109✔

701

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

109✔

702

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

109✔

703

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

1✔

704

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

1✔

705

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

1✔

706

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

18✔

707

18✔

708

18✔

709

/**

18✔

710

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

18✔

711

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

1✔

712

1✔

713

     * @return {Style} This style.

1✔

714

*/

1✔

715

    copy(style) {

1✔

716

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

1✔

717

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

17✔

718

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

1✔

719

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

1✔

720

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

1✔

721

        return this;

1✔

722

1✔

723

1✔

724

/**

1✔

725

         * Clones this style.

1✔

726

1✔

727

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

1✔

728

*/

1✔

729

    clone() {

1✔

730

        const clone = new Style();

1✔

731

        return clone.copy(this);

250✔

732

250✔

733

250✔

734

    setContext(ctx) {

250✔

735

        this.context = ctx;

250✔

736

250✔

737

250✔

738

/**

250✔

739

     * set Style from (geojson-like) properties.

250✔

741

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

49✔

743

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

49✔

744

*/

49✔

746

        const type = featCtx.type;

49✔

747

        const style = {};

49✔

748

        if (type === FEATURE_TYPES.POINT) {

49✔

749

            const point = {

49✔

750

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

49✔

751

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

49✔

753

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

49✔

756

                style.point = point;

49✔

757

49✔

758

            const text = {

49✔

763

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

49✔

764

                style.text = text;

49✔

765

1✔

766

            const icon = {

1✔

767

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

49✔

768

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

250✔

770

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

201✔

773

                style.icon = icon;

201✔

774

201✔

775

        } else {

201✔

776

            const stroke = {

1✔

777

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

201✔

778

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

195✔

780

};

195✔

781

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

195✔

782

                style.stroke = stroke;

250✔

783

250✔

784

            if (type !== FEATURE_TYPES.LINE) {

1✔

785

                const fill = {

1✔

786

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

1✔

787

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

1✔

788

};

1✔

789

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

1✔

790

                    style.fill = fill;

19✔

791

19✔

792

19✔

793

9✔

794

        return style;

19✔

795

19✔

796

19✔

797

/**

19✔

798

     * set Style from vector tile layer properties.

19✔

800

     * @param {Object} sprites vector tile layer.

19✔

801

     * @param {Number} [order=0]

19✔

802

     * @param {Boolean} [symbolToCircle=false]

19✔

803

19✔

804

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

19✔

805

*/

19✔

806

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

19✔

807

        const style = {

11✔

808

            fill: {},

11✔

809

            stroke: {},

11✔

810

            point: {},

11✔

811

            text: {},

11✔

812

            icon: {},

11✔

813

};

11✔

814

11✔

815

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

11✔

816

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

11✔

817

11✔

818

        style.order = order;

11✔

819

11✔

820

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

1✔

821

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

1✔

825

                try {

1✔

826

                    style.fill.pattern = {

11✔

827

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

11✔

828

                        source: sprites.source,

2✔

829

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

2✔

830

};

2✔

831

                } catch (err) {

2✔

832

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

19✔

833

                    throw err;

8✔

834

1✔

835

1✔

836

1✔

837

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

1✔

838

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

1✔

839

                style.stroke.color = color;

1✔

840

                style.stroke.opacity = opacity;

1✔

841

                style.stroke.width = 1.0;

1✔

842

                style.stroke.dasharray = [];

1✔

843

1✔

844

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

1✔

845

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

8✔

846

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

1✔

847

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

1✔

848

            style.stroke.color = color;

1✔

849

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

1✔

850

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

7✔

851

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

6✔

852

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

6✔

853

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

6✔

855

            style.point.opacity = opacity;

5✔

857

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

6✔

858

            // overlapping order

6✔

859

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

6✔

860

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

6✔

861

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

6✔

862

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

6✔

863

                style.text.zOrder = 'Y';

6✔

864

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

6✔

865

                style.text.zOrder = 0;

6✔

866

6✔

867

6✔

868

            // position

6✔

869

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

6✔

870

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

6✔

871

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

6✔

872

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

6✔

873

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

6✔

874

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

6✔

875

6✔

876

            // content

6✔

877

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

6✔

879

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

6✔

884

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

6✔

885

            style.text.color = color;

6✔

886

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

6✔

887

2✔

888

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

2✔

889

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

2✔

890

            if (haloColor) {

2✔

891

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

2✔

896

            // additional icon

1✔

897

            const iconImg = readVectorProperty(layer.layout['icon-image']);

2✔

898

            if (iconImg) {

2✔

899

                try {

2✔

900

                    if (iconImg.stops) {

5✔

901

                        style.icon.id = iconImg;

3✔

902

                        const iconCropValue = {

3✔

903

                            base: iconImg.base,

3✔

904

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

1✔

907

                                    cropValues = function _(p) {

5✔

908

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

5✔

909

                                        cropValues = sprites[id];

5✔

910

                                        return sprites[id];

5✔

911

};

5✔

912

5✔

913

                                return [stop[0], cropValues];

5✔

914

}),

5✔

919

                        style.icon.cropValues = sprites[iconImg];

19✔

920

                        if (iconImg[0].includes('{')) {

19✔

921

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

19✔

922

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

19✔

923

                                style.icon.cropValues = sprites[id];

19✔

924

                                return sprites[id];

19✔

925

};

19✔

926

19✔

927

1✔

928

                    style.icon.source = sprites.source;

1✔

929

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

1✔

930

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

1✔

931

                    style.icon.color = color;

1✔

932

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

1✔

933

                } catch (err) {

3✔

934

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

3✔

935

                    throw err;

3✔

936

3✔

937

3✔

938

3✔

939

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

3✔

940

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

3✔

941

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

1✔

942

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

4✔

943

        style.zoom = {

4✔

944

            min: layer.minzoom || 0,

2✔

945

            max: layer.maxzoom || 24,

4✔

946

};

4✔

948

4✔

949

4✔

950

/**

4✔

951

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

4✔

953

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

4✔

954

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

4✔

956

*/

4✔

957

    applyToCanvasPolygon(txtrCtx, polygon, invCtxScale, canBeFilled) {

4✔

958

        const context = this.context;

1✔

959

        // draw line or edge of polygon

5✔

960

        if (this.stroke) {

5✔

961

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

5✔

962

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

5✔

963

1✔

964

1✔

965

        // fill inside of polygon

1✔

966

        if (canBeFilled && this.fill) {

1✔

968

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

1✔

969

1✔

970

1✔

971

1✔

972

    _applyStrokeToPolygon(txtrCtx, invCtxScale, polygon) {

1✔

973

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

1✔

977

        if (txtrCtx.lineWidth !== width) {

5✔

978

            txtrCtx.lineWidth = width;

4✔

979

2✔

980

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

5✔

981

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

1✔

982

            txtrCtx.globalAlpha = alpha;

1✔

983

1✔

984

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

1✔

985

            txtrCtx.lineCap = this.stroke.lineCap;

1✔

986

1✔

987

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

1✔

988

        txtrCtx.stroke(polygon);

1✔

989

1✔

990

1✔

991

    async _applyFillToPolygon(txtrCtx, invCtxScale, polygon) {

1✔

992

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

1✔

994

        if (this.fill.pattern) {

22✔

995

            let img = this.fill.pattern;

22✔

996

            const cropValues = this.fill.pattern.cropValues;

22✔

997

            if (this.fill.pattern.source) {

22✔

998

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

22✔

999

22✔

1000

            cropImage(img, cropValues);

22✔

1001

22✔

1002

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

22✔

1003

            if (txtrCtx.fillStyle.setTransform) {

22✔

1004

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

22✔

1005

            } else {

22✔

1006

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

22✔

1007

14✔

1008

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

14✔

1009

            txtrCtx.fillStyle = this.fill.color;

14✔

1010

14✔

1011

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

14✔

1012

            txtrCtx.globalAlpha = this.fill.opacity;

14✔

1013

14✔

1014

        txtrCtx.fill(polygon);

22✔

1015

22✔

1016

22✔

1017

/**

22✔

1018

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

22✔

1019

     * properties of this style.

13✔

1020

13✔

1021

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

13✔

1022

13✔

1023

     * @returns {undefined|Promise<HTMLImageElement>}

13✔

1024

     *          for a text label: undefined.

13✔

1025

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

13✔

1027

    async applyToHTML(domElement) {

13✔

1028

        if (arguments.length > 1) {

22✔

1029

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

22✔

1030

2✔

1031

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

2✔

1032

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

2✔

1033

2✔

1034

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

2✔

1035

        if (this.text.size > 0) {

2✔

1036

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

2✔

1037

2✔

1038

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

2✔

1039

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

1✔

1040

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

1✔

1041

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

1✔

1042

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

1✔

1043

1✔

1044

        if (this.text.haloWidth > 0) {

1✔

1045

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

8✔

1046

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

8✔

1055

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

1✔

1056

1✔

1057

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

1✔

1058

            const opt = {

1✔

1059

                size: this.icon.size,

1✔

1060

                color: this.icon.color,

1✔

1061

                opacity: this.icon.opacity,

1✔

1062

                anchor: this.icon.anchor,

1✔

1063

};

1✔

1064

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

1✔

1065

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

1✔

1066

});

1✔

1067

1✔

1068

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

1✔

1069

            icon.src = this.icon.source;

1✔

1070

        } else {

1✔

1071

            const cropValues = this.icon.cropValues;

1✔

1072

            const color = this.icon.color;

1✔

1073

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

1✔

1074

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

1✔

1075

            const imgd = cropImage(img, cropValues);

1✔

1076

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

1✔

1077

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

1✔

1078

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

1✔

1079

1✔

1080

        return iconPromise;

1✔

1081

1✔

1082

1✔

1083

/**

1✔

1084

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

1✔

1085

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

1✔

1086

1✔

1087

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

1✔

1088

*/

1✔

1089

    getTextAnchorPosition() {

1✔

1090

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

1✔

1091

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

1✔

1092

                return textAnchorPosition[this.text.anchor];

1✔

1093

            } else {

1✔

1094

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

1✔

1095

                return textAnchorPosition.center;

1✔

1096

1✔

1097

        } else {

1✔

1098

            return this.text.anchor;

1✔

1099

1✔

1100

1✔

1101

1✔

1102

1✔

1103

// Add custom style sheet with iTowns specifics

1✔

1104

const CustomStyle = {

1✔

1105

    itowns_stroke_single_before,

1✔

1106

};

1✔

1107

1✔

1108

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

1✔

1109

customStyleSheet.type = 'text/css';

1✔

1110

1✔

1111

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

1✔

1112

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

1✔

1113

});

1✔

1114

1✔

1115

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

1✔

1116

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

1✔

1117

1✔

1118

1✔

1119

export default Style;

1✔

iTowns / itowns / 9321240616

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

iTowns / itowns / 9321240616

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