@versatiles/style 5.5.2 → 5.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.MD +36 -33
- package/dist/index.d.ts +539 -65
- package/dist/index.js +782 -217
- package/dist/index.js.map +1 -1
- package/package.json +26 -25
- package/src/color/abstract.ts +145 -26
- package/src/color/hsl.ts +88 -5
- package/src/color/hsv.ts +73 -5
- package/src/color/index.test.ts +0 -20
- package/src/color/index.ts +0 -3
- package/src/color/random.test.ts +21 -0
- package/src/color/rgb.test.ts +40 -72
- package/src/color/rgb.ts +152 -7
- package/src/color/utils.ts +10 -4
- package/src/guess_style/guess_style.test.ts +1 -1
- package/src/guess_style/guess_style.ts +42 -2
- package/src/index.test.ts +2 -1
- package/src/index.ts +89 -4
- package/src/shortbread/layers.ts +30 -5
- package/src/style_builder/recolor.test.ts +46 -0
- package/src/style_builder/recolor.ts +161 -34
- package/src/style_builder/style_builder.test.ts +2 -0
- package/src/style_builder/style_builder.ts +8 -9
- package/src/style_builder/types.ts +23 -58
- package/src/styles/colorful.ts +36 -7
- package/src/styles/index.ts +2 -0
- package/src/styles/shadow.ts +11 -0
package/dist/index.d.ts
CHANGED
|
@@ -1,218 +1,666 @@
|
|
|
1
1
|
import { SpriteSpecification, StyleSpecification } from '@maplibre/maplibre-gl-style-spec';
|
|
2
|
+
export { SpriteSpecification } from '@maplibre/maplibre-gl-style-spec';
|
|
2
3
|
|
|
4
|
+
/**
|
|
5
|
+
* Represents an RGB color with optional alpha transparency.
|
|
6
|
+
*
|
|
7
|
+
* @extends Color
|
|
8
|
+
*/
|
|
3
9
|
declare class RGB extends Color {
|
|
10
|
+
/**
|
|
11
|
+
* Red component (0-255).
|
|
12
|
+
*/
|
|
4
13
|
readonly r: number;
|
|
14
|
+
/**
|
|
15
|
+
* Green component (0-255).
|
|
16
|
+
*/
|
|
5
17
|
readonly g: number;
|
|
18
|
+
/**
|
|
19
|
+
* Blue component (0-255).
|
|
20
|
+
*/
|
|
6
21
|
readonly b: number;
|
|
22
|
+
/**
|
|
23
|
+
* Alpha component (0-1).
|
|
24
|
+
*/
|
|
7
25
|
readonly a: number;
|
|
26
|
+
/**
|
|
27
|
+
* Creates an instance of RGB.
|
|
28
|
+
*
|
|
29
|
+
* @param r - Red component (0-255).
|
|
30
|
+
* @param g - Green component (0-255).
|
|
31
|
+
* @param b - Blue component (0-255).
|
|
32
|
+
* @param a - Alpha component (0-1), defaults to 1.
|
|
33
|
+
*/
|
|
8
34
|
constructor(r: number, g: number, b: number, a?: number);
|
|
35
|
+
/**
|
|
36
|
+
* Creates a clone of the current RGB color.
|
|
37
|
+
*
|
|
38
|
+
* @returns A new RGB instance with the same color values.
|
|
39
|
+
*/
|
|
9
40
|
clone(): RGB;
|
|
41
|
+
/**
|
|
42
|
+
* Returns the RGB color as an array.
|
|
43
|
+
*
|
|
44
|
+
* @returns An array containing the red, green, blue, and alpha components.
|
|
45
|
+
*/
|
|
10
46
|
asArray(): [number, number, number, number];
|
|
47
|
+
/**
|
|
48
|
+
* Rounds the RGB color components to the nearest integer.
|
|
49
|
+
*
|
|
50
|
+
* @returns A new RGB instance with rounded color values.
|
|
51
|
+
*/
|
|
11
52
|
round(): RGB;
|
|
53
|
+
/**
|
|
54
|
+
* Returns the RGB color as a string.
|
|
55
|
+
*
|
|
56
|
+
* @returns A string representation of the RGB color in either `rgb` or `rgba` format.
|
|
57
|
+
*/
|
|
12
58
|
asString(): string;
|
|
59
|
+
/**
|
|
60
|
+
* Returns the RGB color as a hexadecimal string.
|
|
61
|
+
*
|
|
62
|
+
* @returns A string representation of the RGB color in hexadecimal format.
|
|
63
|
+
*/
|
|
13
64
|
asHex(): string;
|
|
65
|
+
/**
|
|
66
|
+
* Converts the RGB color to an HSL color.
|
|
67
|
+
*
|
|
68
|
+
* @returns An HSL instance representing the same color.
|
|
69
|
+
*/
|
|
14
70
|
asHSL(): HSL;
|
|
71
|
+
/**
|
|
72
|
+
* Converts the RGB color to an HSV color.
|
|
73
|
+
*
|
|
74
|
+
* @returns An HSV instance representing the same color.
|
|
75
|
+
*/
|
|
15
76
|
asHSV(): HSV;
|
|
77
|
+
/**
|
|
78
|
+
* Returns the RGB color.
|
|
79
|
+
*
|
|
80
|
+
* @returns The current RGB instance.
|
|
81
|
+
*/
|
|
16
82
|
asRGB(): RGB;
|
|
83
|
+
/**
|
|
84
|
+
* Returns the RGB color.
|
|
85
|
+
*
|
|
86
|
+
* @returns The current RGB instance.
|
|
87
|
+
*/
|
|
17
88
|
toRGB(): RGB;
|
|
89
|
+
/**
|
|
90
|
+
* Parses a string or Color instance into an RGB color.
|
|
91
|
+
*
|
|
92
|
+
* @param input - The input string or Color instance to parse.
|
|
93
|
+
* @returns A new RGB instance representing the parsed color.
|
|
94
|
+
* @throws Will throw an error if the input string is not a valid RGB color string.
|
|
95
|
+
*/
|
|
18
96
|
static parse(input: string | Color): RGB;
|
|
97
|
+
/**
|
|
98
|
+
* Adjusts the gamma of the RGB color.
|
|
99
|
+
*
|
|
100
|
+
* @param value - The gamma value to apply.
|
|
101
|
+
* @returns A new RGB instance with the adjusted gamma.
|
|
102
|
+
*/
|
|
19
103
|
gamma(value: number): RGB;
|
|
104
|
+
/**
|
|
105
|
+
* Inverts the RGB color.
|
|
106
|
+
*
|
|
107
|
+
* @returns A new RGB instance with the inverted color values.
|
|
108
|
+
*/
|
|
20
109
|
invert(): RGB;
|
|
110
|
+
/**
|
|
111
|
+
* Adjusts the contrast of the RGB color.
|
|
112
|
+
*
|
|
113
|
+
* @param value - The contrast value to apply.
|
|
114
|
+
* @returns A new RGB instance with the adjusted contrast.
|
|
115
|
+
*/
|
|
21
116
|
contrast(value: number): RGB;
|
|
117
|
+
/**
|
|
118
|
+
* Adjusts the brightness of the RGB color.
|
|
119
|
+
*
|
|
120
|
+
* @param value - The brightness value to apply.
|
|
121
|
+
* @returns A new RGB instance with the adjusted brightness.
|
|
122
|
+
*/
|
|
22
123
|
brightness(value: number): RGB;
|
|
124
|
+
/**
|
|
125
|
+
* Tints the RGB color with another color.
|
|
126
|
+
*
|
|
127
|
+
* @param value - The tint value to apply.
|
|
128
|
+
* @param tintColor - The color to use for tinting.
|
|
129
|
+
* @returns A new RGB instance with the applied tint.
|
|
130
|
+
*/
|
|
23
131
|
tint(value: number, tintColor: Color): RGB;
|
|
132
|
+
/**
|
|
133
|
+
* Blends the RGB color with another color.
|
|
134
|
+
*
|
|
135
|
+
* @param value - The blend value to apply.
|
|
136
|
+
* @param blendColor - The color to blend with.
|
|
137
|
+
* @returns A new RGB instance with the blended color.
|
|
138
|
+
*/
|
|
139
|
+
blend(value: number, blendColor: Color): RGB;
|
|
140
|
+
/**
|
|
141
|
+
* Lightens the RGB color.
|
|
142
|
+
*
|
|
143
|
+
* @param ratio - The ratio to lighten the color by.
|
|
144
|
+
* @returns A new RGB instance with the lightened color.
|
|
145
|
+
*/
|
|
24
146
|
lighten(ratio: number): RGB;
|
|
147
|
+
/**
|
|
148
|
+
* Darkens the RGB color.
|
|
149
|
+
*
|
|
150
|
+
* @param ratio - The ratio to darken the color by.
|
|
151
|
+
* @returns A new RGB instance with the darkened color.
|
|
152
|
+
*/
|
|
25
153
|
darken(ratio: number): RGB;
|
|
154
|
+
/**
|
|
155
|
+
* Fades the RGB color by reducing its alpha value.
|
|
156
|
+
*
|
|
157
|
+
* @param value - The fade value to apply.
|
|
158
|
+
* @returns A new RGB instance with the faded color.
|
|
159
|
+
*/
|
|
26
160
|
fade(value: number): RGB;
|
|
27
161
|
}
|
|
28
162
|
|
|
163
|
+
/**
|
|
164
|
+
* Represents a color in the HSV (Hue, Saturation, Value) color space.
|
|
165
|
+
* Extends the base `Color` class.
|
|
166
|
+
*/
|
|
29
167
|
declare class HSV extends Color {
|
|
168
|
+
/**
|
|
169
|
+
* The hue component of the color, in the range [0, 360].
|
|
170
|
+
*/
|
|
30
171
|
readonly h: number;
|
|
172
|
+
/**
|
|
173
|
+
* The saturation component of the color, in the range [0, 100].
|
|
174
|
+
*/
|
|
31
175
|
readonly s: number;
|
|
176
|
+
/**
|
|
177
|
+
* The value (brightness) component of the color, in the range [0, 100].
|
|
178
|
+
*/
|
|
32
179
|
readonly v: number;
|
|
180
|
+
/**
|
|
181
|
+
* The alpha (opacity) component of the color, in the range [0, 1].
|
|
182
|
+
*/
|
|
33
183
|
readonly a: number;
|
|
184
|
+
/**
|
|
185
|
+
* Constructs a new HSV color.
|
|
186
|
+
* @param h - The hue component, in the range [0, 360].
|
|
187
|
+
* @param s - The saturation component, in the range [0, 100].
|
|
188
|
+
* @param v - The value (brightness) component, in the range [0, 100].
|
|
189
|
+
* @param a - The alpha (opacity) component, in the range [0, 1]. Defaults to 1.
|
|
190
|
+
*/
|
|
34
191
|
constructor(h: number, s: number, v: number, a?: number);
|
|
192
|
+
/**
|
|
193
|
+
* Returns the HSV color as an array of numbers.
|
|
194
|
+
* @returns An array containing the hue, saturation, value, and alpha components.
|
|
195
|
+
*/
|
|
35
196
|
asArray(): [number, number, number, number];
|
|
197
|
+
/**
|
|
198
|
+
* Returns a new HSV color with the components rounded to the nearest integer.
|
|
199
|
+
* @returns A new HSV color with rounded components.
|
|
200
|
+
*/
|
|
36
201
|
round(): HSV;
|
|
202
|
+
/**
|
|
203
|
+
* Returns the color as a string representation.
|
|
204
|
+
* @returns A string representation of the color.
|
|
205
|
+
*/
|
|
37
206
|
asString(): string;
|
|
207
|
+
/**
|
|
208
|
+
* Creates a new HSV color that is a copy of the current color.
|
|
209
|
+
* @returns A new HSV color that is a clone of the current color.
|
|
210
|
+
*/
|
|
38
211
|
clone(): HSV;
|
|
212
|
+
/**
|
|
213
|
+
* Converts the HSV color to an HSL color.
|
|
214
|
+
* @returns An HSL representation of the color.
|
|
215
|
+
*/
|
|
39
216
|
asHSL(): HSL;
|
|
217
|
+
/**
|
|
218
|
+
* Returns the current HSV color.
|
|
219
|
+
* @returns The current HSV color.
|
|
220
|
+
*/
|
|
40
221
|
asHSV(): HSV;
|
|
222
|
+
/**
|
|
223
|
+
* Returns the current HSV color.
|
|
224
|
+
* @returns The current HSV color.
|
|
225
|
+
*/
|
|
41
226
|
toHSV(): HSV;
|
|
227
|
+
/**
|
|
228
|
+
* Converts the HSV color to an RGB color.
|
|
229
|
+
* @returns An RGB representation of the color.
|
|
230
|
+
*/
|
|
42
231
|
asRGB(): RGB;
|
|
232
|
+
/**
|
|
233
|
+
* Fades the color by a given value.
|
|
234
|
+
* @param value - The amount to fade the color by, in the range [0, 1].
|
|
235
|
+
* @returns A new HSV color with the alpha component faded by the given value.
|
|
236
|
+
*/
|
|
43
237
|
fade(value: number): HSV;
|
|
238
|
+
/**
|
|
239
|
+
* Sets the hue component of the color.
|
|
240
|
+
* @param value - The new hue value, in the range [0, 360].
|
|
241
|
+
* @returns A new HSV color with the updated hue component.
|
|
242
|
+
*/
|
|
44
243
|
setHue(value: number): HSV;
|
|
45
244
|
}
|
|
46
245
|
|
|
246
|
+
/**
|
|
247
|
+
* Represents a color in the HSL (Hue, Saturation, Lightness) color space.
|
|
248
|
+
* Extends the base `Color` class.
|
|
249
|
+
*/
|
|
47
250
|
declare class HSL extends Color {
|
|
251
|
+
/**
|
|
252
|
+
* The hue component of the color, in the range [0, 360].
|
|
253
|
+
*/
|
|
48
254
|
readonly h: number;
|
|
255
|
+
/**
|
|
256
|
+
* The saturation component of the color, in the range [0, 100].
|
|
257
|
+
*/
|
|
49
258
|
readonly s: number;
|
|
259
|
+
/**
|
|
260
|
+
* The lightness component of the color, in the range [0, 100].
|
|
261
|
+
*/
|
|
50
262
|
readonly l: number;
|
|
263
|
+
/**
|
|
264
|
+
* The alpha (opacity) component of the color, in the range [0, 1].
|
|
265
|
+
*/
|
|
51
266
|
readonly a: number;
|
|
267
|
+
/**
|
|
268
|
+
* Creates a new HSL color.
|
|
269
|
+
* @param h - The hue component, in the range [0, 360].
|
|
270
|
+
* @param s - The saturation component, in the range [0, 100].
|
|
271
|
+
* @param l - The lightness component, in the range [0, 100].
|
|
272
|
+
* @param a - The alpha (opacity) component, in the range [0, 1]. Defaults to 1.
|
|
273
|
+
*/
|
|
52
274
|
constructor(h: number, s: number, l: number, a?: number);
|
|
275
|
+
/**
|
|
276
|
+
* Returns the HSL color as an array of numbers.
|
|
277
|
+
* @returns An array containing the hue, saturation, lightness, and alpha components.
|
|
278
|
+
*/
|
|
53
279
|
asArray(): [number, number, number, number];
|
|
280
|
+
/**
|
|
281
|
+
* Returns a new HSL color with rounded components.
|
|
282
|
+
* @returns A new HSL color with rounded hue, saturation, lightness, and alpha components.
|
|
283
|
+
*/
|
|
54
284
|
round(): HSL;
|
|
285
|
+
/**
|
|
286
|
+
* Creates a copy of the current HSL color.
|
|
287
|
+
* @returns A new HSL color with the same components as the current color.
|
|
288
|
+
*/
|
|
55
289
|
clone(): HSL;
|
|
290
|
+
/**
|
|
291
|
+
* Returns the HSL color as a CSS-compatible string.
|
|
292
|
+
* @returns A string representing the HSL color in CSS format.
|
|
293
|
+
*/
|
|
56
294
|
asString(): string;
|
|
295
|
+
/**
|
|
296
|
+
* Returns the current HSL color.
|
|
297
|
+
* @returns The current HSL color.
|
|
298
|
+
*/
|
|
57
299
|
asHSL(): HSL;
|
|
300
|
+
/**
|
|
301
|
+
* Returns the current HSL color.
|
|
302
|
+
* @returns The current HSL color.
|
|
303
|
+
*/
|
|
58
304
|
toHSL(): HSL;
|
|
305
|
+
/**
|
|
306
|
+
* Converts the HSL color to an HSV color.
|
|
307
|
+
* @returns A new HSV color representing the same color.
|
|
308
|
+
*/
|
|
59
309
|
asHSV(): HSV;
|
|
310
|
+
/**
|
|
311
|
+
* Converts the HSL color to an RGB color.
|
|
312
|
+
* @returns A new RGB color representing the same color.
|
|
313
|
+
*/
|
|
60
314
|
asRGB(): RGB;
|
|
315
|
+
/**
|
|
316
|
+
* Parses a string or Color object into an HSL color.
|
|
317
|
+
* @param input - The input string or Color object to parse.
|
|
318
|
+
* @returns A new HSL color parsed from the input.
|
|
319
|
+
* @throws Will throw an error if the input string is not a valid HSL color string.
|
|
320
|
+
*/
|
|
61
321
|
static parse(input: string | Color): HSL;
|
|
322
|
+
/**
|
|
323
|
+
* Inverts the lightness component of the HSL color.
|
|
324
|
+
* @returns A new HSL color with the lightness component inverted.
|
|
325
|
+
*/
|
|
62
326
|
invertLuminosity(): HSL;
|
|
327
|
+
/**
|
|
328
|
+
* Rotates the hue component of the HSL color by a given offset.
|
|
329
|
+
* @param offset - The amount to rotate the hue by, in degrees.
|
|
330
|
+
* @returns A new HSL color with the hue rotated by the given offset.
|
|
331
|
+
*/
|
|
63
332
|
rotateHue(offset: number): HSL;
|
|
333
|
+
/**
|
|
334
|
+
* Increases the saturation of the HSL color by a given ratio.
|
|
335
|
+
* @param ratio - The ratio by which to increase the saturation.
|
|
336
|
+
* @returns A new HSL color with increased saturation.
|
|
337
|
+
*/
|
|
64
338
|
saturate(ratio: number): HSL;
|
|
339
|
+
/**
|
|
340
|
+
* Decreases the alpha (opacity) of the HSL color by a given value.
|
|
341
|
+
* @param value - The value by which to decrease the alpha.
|
|
342
|
+
* @returns A new HSL color with decreased alpha.
|
|
343
|
+
*/
|
|
65
344
|
fade(value: number): HSL;
|
|
66
345
|
}
|
|
67
346
|
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
347
|
+
/**
|
|
348
|
+
* The abstract `Color` class provides a blueprint for color manipulation and conversion.
|
|
349
|
+
* It includes methods for converting between different color models ({@link HSL}, {@link HSV}, {@link RGB}),
|
|
350
|
+
* as well as various color transformations such as inversion, rotation, saturation, and blending.
|
|
351
|
+
*
|
|
352
|
+
* @abstract
|
|
353
|
+
*/
|
|
354
|
+
/**
|
|
355
|
+
* Abstract class representing a color.
|
|
356
|
+
*/
|
|
76
357
|
declare abstract class Color {
|
|
358
|
+
/**
|
|
359
|
+
* Parses a color from a string or another Color instance.
|
|
360
|
+
* @param input - The input color as a string or Color instance.
|
|
361
|
+
* @returns The parsed Color instance.
|
|
362
|
+
*/
|
|
77
363
|
static parse: (input: Color | string) => Color;
|
|
364
|
+
/**
|
|
365
|
+
* The HSL color model.
|
|
366
|
+
*/
|
|
78
367
|
static HSL: typeof HSL;
|
|
368
|
+
/**
|
|
369
|
+
* The HSV color model.
|
|
370
|
+
*/
|
|
79
371
|
static HSV: typeof HSV;
|
|
372
|
+
/**
|
|
373
|
+
* The RGB color model.
|
|
374
|
+
*/
|
|
80
375
|
static RGB: typeof RGB;
|
|
81
|
-
|
|
376
|
+
/**
|
|
377
|
+
* Creates a clone of the current color instance.
|
|
378
|
+
* @returns A new Color instance that is a clone of the current instance.
|
|
379
|
+
*/
|
|
82
380
|
abstract clone(): Color;
|
|
381
|
+
/**
|
|
382
|
+
* Converts the color to a hexadecimal string.
|
|
383
|
+
* @returns The hexadecimal representation of the color.
|
|
384
|
+
*/
|
|
83
385
|
asHex(): string;
|
|
386
|
+
/**
|
|
387
|
+
* Converts the color to a string representation.
|
|
388
|
+
* @returns The string representation of the color.
|
|
389
|
+
*/
|
|
84
390
|
abstract asString(): string;
|
|
391
|
+
/**
|
|
392
|
+
* Rounds the color values.
|
|
393
|
+
* @returns A new Color instance with rounded values.
|
|
394
|
+
*/
|
|
85
395
|
abstract round(): Color;
|
|
396
|
+
/**
|
|
397
|
+
* Converts the color to an array of numbers.
|
|
398
|
+
* @returns An array representing the color.
|
|
399
|
+
*/
|
|
86
400
|
abstract asArray(): number[];
|
|
401
|
+
/**
|
|
402
|
+
* Converts the color to the HSL color model.
|
|
403
|
+
* @returns The HSL representation of the color.
|
|
404
|
+
*/
|
|
87
405
|
abstract asHSL(): HSL;
|
|
406
|
+
/**
|
|
407
|
+
* Converts the color to the HSV color model.
|
|
408
|
+
* @returns The HSV representation of the color.
|
|
409
|
+
*/
|
|
88
410
|
abstract asHSV(): HSV;
|
|
411
|
+
/**
|
|
412
|
+
* Converts the color to the RGB color model.
|
|
413
|
+
* @returns The RGB representation of the color.
|
|
414
|
+
*/
|
|
89
415
|
abstract asRGB(): RGB;
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
416
|
+
/**
|
|
417
|
+
* Inverts the luminosity of the color.
|
|
418
|
+
* @returns A new HSL color with inverted luminosity.
|
|
419
|
+
*/
|
|
93
420
|
invertLuminosity(): HSL;
|
|
421
|
+
/**
|
|
422
|
+
* Rotates the hue of the color by a given offset.
|
|
423
|
+
* @param offset - The amount to rotate the hue.
|
|
424
|
+
* @returns A new HSL color with the hue rotated.
|
|
425
|
+
*/
|
|
94
426
|
rotateHue(offset: number): HSL;
|
|
427
|
+
/**
|
|
428
|
+
* Saturates the color by a given ratio.
|
|
429
|
+
* @param ratio - The ratio to saturate the color.
|
|
430
|
+
* @returns A new HSL color with increased saturation.
|
|
431
|
+
*/
|
|
95
432
|
saturate(ratio: number): HSL;
|
|
433
|
+
/**
|
|
434
|
+
* Applies gamma correction to the color.
|
|
435
|
+
* @param value - The gamma correction value.
|
|
436
|
+
* @returns A new RGB color with gamma correction applied.
|
|
437
|
+
*/
|
|
96
438
|
gamma(value: number): RGB;
|
|
439
|
+
/**
|
|
440
|
+
* Inverts the color.
|
|
441
|
+
* @returns A new RGB color with inverted values.
|
|
442
|
+
*/
|
|
97
443
|
invert(): RGB;
|
|
444
|
+
/**
|
|
445
|
+
* Adjusts the contrast of the color.
|
|
446
|
+
* @param value - The contrast adjustment value.
|
|
447
|
+
* @returns A new RGB color with adjusted contrast.
|
|
448
|
+
*/
|
|
98
449
|
contrast(value: number): RGB;
|
|
450
|
+
/**
|
|
451
|
+
* Adjusts the brightness of the color.
|
|
452
|
+
* @param value - The brightness adjustment value.
|
|
453
|
+
* @returns A new RGB color with adjusted brightness.
|
|
454
|
+
*/
|
|
99
455
|
brightness(value: number): RGB;
|
|
456
|
+
/**
|
|
457
|
+
* Lightens the color by a given value.
|
|
458
|
+
* @param value - The amount to lighten the color.
|
|
459
|
+
* @returns A new RGB color that is lightened.
|
|
460
|
+
*/
|
|
100
461
|
lighten(value: number): RGB;
|
|
462
|
+
/**
|
|
463
|
+
* Darkens the color by a given value.
|
|
464
|
+
* @param value - The amount to darken the color.
|
|
465
|
+
* @returns A new RGB color that is darkened.
|
|
466
|
+
*/
|
|
101
467
|
darken(value: number): RGB;
|
|
468
|
+
/**
|
|
469
|
+
* Tints the color by blending it with another color.
|
|
470
|
+
* @param value - The blend ratio.
|
|
471
|
+
* @param tintColor - The color to blend with.
|
|
472
|
+
* @returns A new RGB color that is tinted.
|
|
473
|
+
*/
|
|
102
474
|
tint(value: number, tintColor: Color): RGB;
|
|
475
|
+
/**
|
|
476
|
+
* Blends the color with another color.
|
|
477
|
+
* @param value - The blend ratio.
|
|
478
|
+
* @param blendColor - The color to blend with.
|
|
479
|
+
* @returns A new RGB color that is blended.
|
|
480
|
+
*/
|
|
481
|
+
blend(value: number, blendColor: Color): RGB;
|
|
482
|
+
/**
|
|
483
|
+
* Sets the hue of the color.
|
|
484
|
+
* @param value - The new hue value.
|
|
485
|
+
* @returns A new HSV color with the hue set.
|
|
486
|
+
*/
|
|
103
487
|
setHue(value: number): HSV;
|
|
488
|
+
/**
|
|
489
|
+
* Fades the color by a given value.
|
|
490
|
+
* @param value - The fade value.
|
|
491
|
+
* @returns A new Color instance that is faded.
|
|
492
|
+
*/
|
|
104
493
|
abstract fade(value: number): Color;
|
|
105
494
|
}
|
|
106
495
|
|
|
496
|
+
/**
|
|
497
|
+
* Module for applying various color transformations such as hue rotation, saturation, contrast, brightness,
|
|
498
|
+
* tinting, and blending. These transformations are defined through the `RecolorOptions` interface.
|
|
499
|
+
*/
|
|
500
|
+
|
|
501
|
+
/**
|
|
502
|
+
* Configuration options for recoloring all map colors.
|
|
503
|
+
*
|
|
504
|
+
* The transformations (if specified) are done in the following order:
|
|
505
|
+
* 1. [Invert brightness](#invertbrightness)
|
|
506
|
+
* 2. [Rotate hue](#rotate)
|
|
507
|
+
* 3. [Saturate](#saturate)
|
|
508
|
+
* 4. [Gamma correction](#gamma)
|
|
509
|
+
* 5. [Contrast adjustment](#contrast)
|
|
510
|
+
* 6. [Brightness adjustment](#brightness)
|
|
511
|
+
* 7. [Tinting](#tint)
|
|
512
|
+
* 8. [Blending](#blend)
|
|
513
|
+
*
|
|
514
|
+
* Usage Examples
|
|
515
|
+
*
|
|
516
|
+
* ```typescript
|
|
517
|
+
* const style = VersaTilesStyle.colorful({
|
|
518
|
+
* recolor: {
|
|
519
|
+
* rotate: 180,
|
|
520
|
+
* saturate: 0.5,
|
|
521
|
+
* brightness: 0.2,
|
|
522
|
+
* }
|
|
523
|
+
* };
|
|
524
|
+
* ```
|
|
525
|
+
*
|
|
526
|
+
* If you want do make you map simply brighter or darker, you can use the `blend` option:
|
|
527
|
+
* ```typescript
|
|
528
|
+
* const style = VersaTilesStyle.colorful({
|
|
529
|
+
* recolor: {
|
|
530
|
+
* blend: 0.5,
|
|
531
|
+
* blendColor: '#000000', // to blend all colors with black
|
|
532
|
+
* // or blendColor: '#FFFFFF', // to blend all colors with white
|
|
533
|
+
* }
|
|
534
|
+
* };
|
|
535
|
+
* ```
|
|
536
|
+
*
|
|
537
|
+
*/
|
|
107
538
|
interface RecolorOptions {
|
|
539
|
+
/**
|
|
540
|
+
* If true, inverts all colors' brightness.
|
|
541
|
+
* See also {@link HSL.invertLuminosity}
|
|
542
|
+
*/
|
|
108
543
|
invertBrightness?: boolean;
|
|
544
|
+
/**
|
|
545
|
+
* Rotate the hue of all colors in degrees (0-360).
|
|
546
|
+
* See also {@link HSL.rotateHue}
|
|
547
|
+
*/
|
|
109
548
|
rotate?: number;
|
|
549
|
+
/**
|
|
550
|
+
* Adjust the saturation level. Positive values increase, negative values decrease saturation.
|
|
551
|
+
* |value|effect |
|
|
552
|
+
* |----:|-----------------|
|
|
553
|
+
* | -1|grayscale |
|
|
554
|
+
* | 0|no effect |
|
|
555
|
+
* | 1|double saturation|
|
|
556
|
+
*
|
|
557
|
+
* See also {@link HSL.saturate}
|
|
558
|
+
*/
|
|
110
559
|
saturate?: number;
|
|
560
|
+
/**
|
|
561
|
+
* Adjust the gamma (non-linear brightness adjustment).
|
|
562
|
+
* Defaults to 1.
|
|
563
|
+
* See also {@link RGB.gamma}
|
|
564
|
+
*/
|
|
111
565
|
gamma?: number;
|
|
566
|
+
/**
|
|
567
|
+
* Adjust the contrast level.
|
|
568
|
+
* Values > 1 increase contrast, values < 1 decrease it.
|
|
569
|
+
* Defaults to 1.
|
|
570
|
+
* See also {@link RGB.contrast}
|
|
571
|
+
*/
|
|
112
572
|
contrast?: number;
|
|
573
|
+
/**
|
|
574
|
+
* Adjust the brightness level.
|
|
575
|
+
* Positive values make it brighter, negative values make it darker.
|
|
576
|
+
* Defaults to 0.
|
|
577
|
+
* See also {@link RGB.brightness}
|
|
578
|
+
*/
|
|
113
579
|
brightness?: number;
|
|
580
|
+
/**
|
|
581
|
+
* Intensity of the tinting effect (0 = none, 1 = full effect).
|
|
582
|
+
* See also {@link RGB.tint}
|
|
583
|
+
*/
|
|
114
584
|
tint?: number;
|
|
585
|
+
/**
|
|
586
|
+
* The tinting color in hex format (default: '#FF0000').
|
|
587
|
+
* See also {@link RGB.tint}
|
|
588
|
+
*/
|
|
115
589
|
tintColor?: string;
|
|
590
|
+
/**
|
|
591
|
+
* Intensity of the blending effect (0 = none, 1 = full effect).
|
|
592
|
+
* See also {@link RGB.blend}
|
|
593
|
+
*/
|
|
594
|
+
blend?: number;
|
|
595
|
+
/**
|
|
596
|
+
* The blending color in hex format (default: '#000000').
|
|
597
|
+
* See also {@link RGB.blend}
|
|
598
|
+
*/
|
|
599
|
+
blendColor?: string;
|
|
116
600
|
}
|
|
117
601
|
|
|
118
602
|
/** Represents language suffixes used in map styles. */
|
|
119
603
|
type Language = 'de' | 'en' | null;
|
|
120
|
-
/**
|
|
604
|
+
/**
|
|
605
|
+
* Options for configuring the style builder.
|
|
606
|
+
*/
|
|
121
607
|
interface StyleBuilderOptions {
|
|
122
608
|
/**
|
|
123
609
|
* The base URL for loading external resources like tiles, sprites, and fonts.
|
|
124
|
-
*
|
|
610
|
+
* @default document.location.origin (in the browser), or 'https://tiles.versatiles.org'
|
|
125
611
|
*/
|
|
126
612
|
baseUrl?: string;
|
|
127
613
|
/**
|
|
128
614
|
* The bounding box for the map, formatted as [sw.lng, sw.lat, ne.lng, ne.lat].
|
|
129
|
-
*
|
|
615
|
+
* @default [-180, -85.0511287798066, 180, 85.0511287798066]
|
|
130
616
|
*/
|
|
131
617
|
bounds?: [number, number, number, number];
|
|
132
618
|
/**
|
|
133
619
|
* The URL template for loading font glyphs, formatted with '{fontstack}' and '{range}' placeholders.
|
|
134
|
-
*
|
|
620
|
+
* @default '/assets/glyphs/{fontstack}/{range}.pbf'
|
|
135
621
|
*/
|
|
136
622
|
glyphs?: string;
|
|
137
623
|
/**
|
|
138
624
|
* The URL for loading sprite images and metadata.
|
|
139
|
-
*
|
|
625
|
+
* @default [{ id: 'basics', url: '/assets/sprites/basics/sprites' }]
|
|
140
626
|
*/
|
|
141
627
|
sprite?: SpriteSpecification;
|
|
142
628
|
/**
|
|
143
629
|
* An array of URL templates for loading map tiles, using '{z}', '{x}', and '{y}' placeholders.
|
|
144
|
-
*
|
|
630
|
+
* @default ['/tiles/osm/{z}/{x}/{y}']
|
|
145
631
|
*/
|
|
146
632
|
tiles?: string[];
|
|
147
633
|
/**
|
|
148
634
|
* If set to true, hides all map labels.
|
|
149
|
-
*
|
|
635
|
+
* @default false
|
|
150
636
|
*/
|
|
151
637
|
hideLabels?: boolean;
|
|
152
638
|
/**
|
|
153
639
|
* Set the language ('en', 'de') of all map labels.
|
|
154
640
|
* A null value means that the language of the country in which the label is drawn will be used.
|
|
155
|
-
*
|
|
641
|
+
* See also: {@link Language}
|
|
642
|
+
* @default null
|
|
156
643
|
*/
|
|
157
644
|
language?: Language;
|
|
158
645
|
/**
|
|
159
646
|
* An object specifying overrides for default color values, keyed by the color names.
|
|
647
|
+
* See also: {@link StyleBuilderColors}
|
|
160
648
|
*/
|
|
161
649
|
colors?: Partial<StyleBuilderColors>;
|
|
162
650
|
/**
|
|
163
651
|
* An object specifying overrides for default font names, keyed by the font names.
|
|
652
|
+
* See also: {@link StyleBuilderFonts}
|
|
164
653
|
*/
|
|
165
654
|
fonts?: Partial<StyleBuilderFonts>;
|
|
166
655
|
/**
|
|
167
656
|
* Options for color adjustments and transformations applied to the entire style.
|
|
657
|
+
* See also: {@link RecolorOptions}
|
|
168
658
|
*/
|
|
169
659
|
recolor?: RecolorOptions;
|
|
170
660
|
}
|
|
661
|
+
type StyleBuilderColorKey = 'agriculture' | 'boundary' | 'building' | 'buildingbg' | 'burial' | 'commercial' | 'construction' | 'cycle' | 'danger' | 'disputed' | 'education' | 'foot' | 'glacier' | 'grass' | 'hospital' | 'industrial' | 'label' | 'labelHalo' | 'land' | 'leisure' | 'motorway' | 'motorwaybg' | 'park' | 'parking' | 'poi' | 'prison' | 'rail' | 'residential' | 'rock' | 'sand' | 'shield' | 'street' | 'streetbg' | 'subway' | 'symbol' | 'trunk' | 'trunkbg' | 'waste' | 'water' | 'wetland' | 'wood';
|
|
171
662
|
/** Records string values for color properties in a style builder. */
|
|
172
|
-
|
|
173
|
-
agriculture: Color | string;
|
|
174
|
-
boundary: Color | string;
|
|
175
|
-
building: Color | string;
|
|
176
|
-
buildingbg: Color | string;
|
|
177
|
-
burial: Color | string;
|
|
178
|
-
commercial: Color | string;
|
|
179
|
-
construction: Color | string;
|
|
180
|
-
cycle: Color | string;
|
|
181
|
-
danger: Color | string;
|
|
182
|
-
disputed: Color | string;
|
|
183
|
-
education: Color | string;
|
|
184
|
-
foot: Color | string;
|
|
185
|
-
glacier: Color | string;
|
|
186
|
-
grass: Color | string;
|
|
187
|
-
hospital: Color | string;
|
|
188
|
-
industrial: Color | string;
|
|
189
|
-
label: Color | string;
|
|
190
|
-
labelHalo: Color | string;
|
|
191
|
-
land: Color | string;
|
|
192
|
-
leisure: Color | string;
|
|
193
|
-
motorway: Color | string;
|
|
194
|
-
motorwaybg: Color | string;
|
|
195
|
-
park: Color | string;
|
|
196
|
-
parking: Color | string;
|
|
197
|
-
poi: Color | string;
|
|
198
|
-
prison: Color | string;
|
|
199
|
-
rail: Color | string;
|
|
200
|
-
residential: Color | string;
|
|
201
|
-
rock: Color | string;
|
|
202
|
-
sand: Color | string;
|
|
203
|
-
shield: Color | string;
|
|
204
|
-
street: Color | string;
|
|
205
|
-
streetbg: Color | string;
|
|
206
|
-
subway: Color | string;
|
|
207
|
-
symbol: Color | string;
|
|
208
|
-
trunk: Color | string;
|
|
209
|
-
trunkbg: Color | string;
|
|
210
|
-
waste: Color | string;
|
|
211
|
-
water: Color | string;
|
|
212
|
-
wetland: Color | string;
|
|
213
|
-
wood: Color | string;
|
|
214
|
-
}
|
|
215
|
-
type StyleBuilderColorsEnsured = Record<keyof StyleBuilderColors, Color>;
|
|
663
|
+
type StyleBuilderColors<T = Color | string> = Record<StyleBuilderColorKey, T>;
|
|
216
664
|
/** Records string values for font properties in a style builder. */
|
|
217
665
|
type StyleBuilderFonts = {
|
|
218
666
|
regular: string;
|
|
@@ -226,6 +674,7 @@ interface StyleBuilderFunction {
|
|
|
226
674
|
declare const colorful: StyleBuilderFunction;
|
|
227
675
|
declare const eclipse: StyleBuilderFunction;
|
|
228
676
|
declare const graybeard: StyleBuilderFunction;
|
|
677
|
+
declare const shadow: StyleBuilderFunction;
|
|
229
678
|
declare const neutrino: StyleBuilderFunction;
|
|
230
679
|
|
|
231
680
|
/** Represents the structure of a vector layer in a TileJSON specification. */
|
|
@@ -263,18 +712,43 @@ interface TileJSONSpecificationVector extends TileJSONSpecificationRaster {
|
|
|
263
712
|
/** Represents a TileJSON specification, which can be either raster or vector. */
|
|
264
713
|
type TileJSONSpecification = TileJSONSpecificationRaster | TileJSONSpecificationVector;
|
|
265
714
|
|
|
715
|
+
/**
|
|
716
|
+
* Options for guessing the style of a map.
|
|
717
|
+
*/
|
|
266
718
|
interface GuessStyleOptions {
|
|
719
|
+
/**
|
|
720
|
+
* Base URL to resolve URLs for tile sources, glyphs, and sprites.
|
|
721
|
+
*/
|
|
267
722
|
baseUrl?: string;
|
|
723
|
+
/**
|
|
724
|
+
* URL template for glyphs.
|
|
725
|
+
*/
|
|
268
726
|
glyphs?: string;
|
|
727
|
+
/**
|
|
728
|
+
* URL template for sprites. See also {@link SpriteSpecification}.
|
|
729
|
+
*/
|
|
269
730
|
sprite?: SpriteSpecification;
|
|
270
731
|
}
|
|
732
|
+
/**
|
|
733
|
+
* Generates a style specification based on the provided TileJSON specification and optional parameters.
|
|
734
|
+
*
|
|
735
|
+
* @param {TileJSONSpecification} tileJSON - The TileJSON specification to generate the style from.
|
|
736
|
+
* @param {GuessStyleOptions} [options] - Optional parameters to customize the style generation.
|
|
737
|
+
* @param {string} [options.baseUrl] - Base URL to resolve tile URLs.
|
|
738
|
+
* @param {string} [options.glyphs] - URL template for glyphs.
|
|
739
|
+
* @param {string} [options.sprite] - URL template for sprites.
|
|
740
|
+
* @returns {StyleSpecification} The generated style specification.
|
|
741
|
+
* @throws {Error} If the provided TileJSON specification is invalid.
|
|
742
|
+
*/
|
|
271
743
|
declare function guessStyle(tileJSON: TileJSONSpecification, options?: GuessStyleOptions): StyleSpecification;
|
|
272
744
|
|
|
273
745
|
declare const styles: {
|
|
274
746
|
colorful: StyleBuilderFunction;
|
|
275
747
|
eclipse: StyleBuilderFunction;
|
|
276
748
|
graybeard: StyleBuilderFunction;
|
|
749
|
+
shadow: StyleBuilderFunction;
|
|
277
750
|
neutrino: StyleBuilderFunction;
|
|
278
751
|
};
|
|
279
752
|
|
|
280
|
-
export { Color,
|
|
753
|
+
export { Color, HSL, HSV, RGB, colorful, eclipse, graybeard, guessStyle, neutrino, shadow, styles };
|
|
754
|
+
export type { GuessStyleOptions, Language, RecolorOptions, StyleBuilderColorKey, StyleBuilderColors, StyleBuilderFonts, StyleBuilderFunction, StyleBuilderOptions, TileJSONSpecification, TileJSONSpecificationRaster, TileJSONSpecificationVector, VectorLayer };
|