@versatiles/style 5.2.2 → 5.2.4

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.
Files changed (56) hide show
  1. package/README.MD +13 -89
  2. package/dist/color/abstract.d.ts +6 -5
  3. package/dist/color/abstract.js +4 -0
  4. package/dist/color/hsl.d.ts +8 -8
  5. package/dist/color/hsl.js +17 -22
  6. package/dist/color/hsv.d.ts +8 -7
  7. package/dist/color/hsv.js +10 -11
  8. package/dist/color/index.d.ts +5 -5
  9. package/dist/color/index.js +16 -13
  10. package/dist/color/random.d.ts +1 -1
  11. package/dist/color/random.js +3 -2
  12. package/dist/color/rgb.d.ts +8 -8
  13. package/dist/color/rgb.js +25 -50
  14. package/dist/color/utils.js +1 -0
  15. package/dist/guess_style/guess_style.d.ts +1 -1
  16. package/dist/guess_style/guess_style.js +6 -5
  17. package/dist/guess_style/index.d.ts +2 -2
  18. package/dist/guess_style/index.js +2 -1
  19. package/dist/index.d.ts +15 -11
  20. package/dist/index.js +11 -3
  21. package/dist/lib/utils.js +2 -1
  22. package/dist/shortbread/index.d.ts +2 -2
  23. package/dist/shortbread/index.js +3 -2
  24. package/dist/shortbread/layers.d.ts +2 -2
  25. package/dist/shortbread/layers.js +1 -0
  26. package/dist/shortbread/properties.js +1 -0
  27. package/dist/shortbread/template.js +1 -0
  28. package/dist/style_builder/decorator.d.ts +3 -3
  29. package/dist/style_builder/decorator.js +4 -3
  30. package/dist/style_builder/recolor.d.ts +1 -1
  31. package/dist/style_builder/recolor.js +2 -1
  32. package/dist/style_builder/style_builder.d.ts +11 -11
  33. package/dist/style_builder/style_builder.js +14 -11
  34. package/dist/style_builder/types.d.ts +100 -19
  35. package/dist/style_builder/types.js +2 -0
  36. package/dist/styles/colorful.d.ts +5 -88
  37. package/dist/styles/colorful.js +2 -1
  38. package/dist/styles/eclipse.d.ts +1 -1
  39. package/dist/styles/eclipse.js +2 -1
  40. package/dist/styles/empty.d.ts +4 -9
  41. package/dist/styles/empty.js +4 -9
  42. package/dist/styles/graybeard.d.ts +1 -1
  43. package/dist/styles/graybeard.js +2 -1
  44. package/dist/styles/index.d.ts +10 -27
  45. package/dist/styles/index.js +6 -5
  46. package/dist/styles/neutrino.d.ts +5 -30
  47. package/dist/styles/neutrino.js +35 -4
  48. package/dist/types/index.d.ts +5 -5
  49. package/dist/types/index.js +3 -2
  50. package/dist/types/maplibre.js +1 -0
  51. package/dist/types/tilejson.d.ts +1 -1
  52. package/dist/types/tilejson.js +1 -0
  53. package/dist/types/vector_layer.js +1 -0
  54. package/package.json +11 -8
  55. package/dist/style_builder/index.d.ts +0 -1
  56. package/dist/style_builder/index.js +0 -1
package/README.MD CHANGED
@@ -5,19 +5,17 @@
5
5
 
6
6
  # VersaTiles Style
7
7
 
8
- > [!WARNING]
9
- > We are currently migrating to the [VersaTiles Frontend Specification](https://github.com/versatiles-org/versatiles-documentation/blob/main/compendium/specification_frontend.md). While this is good for the long term, it does mean that there will be breaking changes in the short term. You can find the [old v4.4.1 release here](https://github.com/versatiles-org/versatiles-style/releases/tag/v4.4.1).
10
-
11
8
  Generates styles and sprites for MapLibre.
12
9
 
13
- ![Example: Colorful Style](docs/colorful.png)
14
-
15
10
  # Styles
16
11
 
17
- * Colorful - colorful, full featured map
18
- * Graybeard - gray, full featured map
19
- * Eclipse - dark, full featured map
20
- * Neutrino - light basemap
12
+ style name | preview
13
+ -----------|--------------------------------------------------------------------------
14
+ colorful | <img width="384" src="screenshots/colorful.png" alt="colorful style" />
15
+ graybeard | <img width="384" src="screenshots/graybeard.png" alt="graybeard style" />
16
+ eclipse | <img width="384" src="screenshots/eclipse.png" alt="eclipse style" />
17
+ neutrino | <img width="384" src="screenshots/neutrino.png" alt="neutrino style" />
18
+
21
19
 
22
20
  # Use styles for versatiles.org
23
21
 
@@ -78,93 +76,19 @@ writeFileSync('style.json', JSON.stringify(style));
78
76
  ### Methods for generating styles
79
77
 
80
78
  This library provides:
81
- - `style = colorful(options);`
82
- - `style = eclipse(options);`
83
- - `style = graybeard(options);`
84
- - `style = neutrino(options);`
85
-
86
- Where `options` is an optional object:
87
-
88
- ```javascript
89
- const options: StyleBuilderOptions<Colorful> = {
90
- // The base URL for loading external resources like tiles, sprites, and fonts.
91
- // Default: document.location.origin (in the browser), or 'https://tiles.versatiles.org'
92
- baseUrl?: string;
93
-
94
- // The URL template for loading font glyphs, formatted with '{fontstack}' and '{range}' placeholders.
95
- // Default: '/assets/glyphs/{fontstack}/{range}.pbf'
96
- glyphs?: string;
97
-
98
- // The URL for loading sprite images and metadata.
99
- // Default: [{ id: 'basics', url: '/assets/sprites/basics/sprites' }]
100
- sprite?: string | { id: string; url: string }[];
101
-
102
- // An array of URL templates for loading map tiles, using '{z}', '{x}', and '{y}' placeholders.
103
- // Default: ['/tiles/osm/{z}/{x}/{y}']
104
- tiles?: string[];
105
-
106
- // If set to true, hides all map labels.
107
- // Default: false
108
- hideLabels?: boolean;
109
-
110
- // Set the language ('en', 'de') of all map labels.
111
- // A null value means that the language of the country in which the label is drawn will be used.
112
- // Default: null
113
- language?: Language;
114
-
115
- // An object specifying overrides for default color values, keyed by the color names.
116
- colors?: Partial<StyleBuilderColorStrings<T>>;
117
-
118
- // An object specifying overrides for default font names, keyed by the font names.
119
- fonts?: Partial<StyleBuilderFontStrings<T>>;
120
-
121
- // Options for color adjustments and transformations applied to the entire style.
122
- recolor?: RecolorOptions;
123
- }
79
+ - `style = colorful(options);` [documentation](https://github.com/versatiles-org/versatiles-style/blob/main/docs/functions/colorful.md)
80
+ - `style = eclipse(options);` [documentation](https://github.com/versatiles-org/versatiles-style/blob/main/docs/functions/eclipse.md)
81
+ - `style = graybeard(options);` [documentation](https://github.com/versatiles-org/versatiles-style/blob/main/docs/functions/graybeard.md)
82
+ - `style = neutrino(options);` [documentation](https://github.com/versatiles-org/versatiles-style/blob/main/docs/functions/neutrino.md)
124
83
 
125
- export interface RecolorOptions {
126
- // If true, inverts all colors.
127
- invertBrightness?: boolean;
128
-
129
- // Rotate the hue of all colors (in degrees).
130
- rotate?: number;
131
-
132
- // Adjusts the saturation level of all colors. Positive values increase saturation, negative values decrease it.
133
- saturate?: number;
134
-
135
- // Adjusts the gamma of all colors. Affects the brightness in a non-linear manner.
136
- gamma?: number;
137
-
138
- // Adjusts the contrast of all colors. Higher values produce more contrast.
139
- contrast?: number;
140
-
141
- // Adjusts the brightness of all colors. Positive values make it brighter, negative values make it darker.
142
- brightness?: number;
143
-
144
- // Specifies the intensity of the tinting effect. Ranges from 0 (no effect) to 1 (full effect).
145
- tint?: number;
146
-
147
- // Specifies the color used for tinting, in a string format (e.g., '#FF0000').
148
- tintColor?: string;
149
- }
150
- ```
84
+ [Where `options` is an optional object](https://github.com/versatiles-org/versatiles-style/blob/main/docs/interfaces/StyleBuilderOptions.md)
151
85
 
152
86
  ### Method: `guessStyle(options)`
153
87
 
154
88
  ```javascript
155
89
  const style = guessStyle(options);
156
90
  ```
157
-
158
-
159
- GuessStyleOptions
160
-
161
- <sup><a href="https://github.com/versatiles-org/versatiles-style/blob/be6dcfe/src/lib/style_guesser.ts#L13">\[src]</a></sup>
162
-
163
- **Parameters:**
164
-
165
- * <code>opt: TileJSONOption</code>
166
-
167
- **Returns:** <code>MaplibreStyle</code>
91
+ [documentation](https://github.com/versatiles-org/versatiles-style/blob/main/docs/functions/guessStyle.md)
168
92
 
169
93
  # Build
170
94
 
@@ -1,9 +1,9 @@
1
- import type { HSL } from './hsl.js';
2
- import type { HSV } from './hsv.js';
3
- import { RandomColorOptions } from './random.js';
4
- import type { RGB } from './rgb.js';
1
+ import type { HSL } from './hsl';
2
+ import type { HSV } from './hsv';
3
+ import { RandomColorOptions } from './random';
4
+ import type { RGB } from './rgb';
5
5
  export declare abstract class Color {
6
- static parse: (str: string) => Color;
6
+ static parse: (input: Color | string) => Color;
7
7
  static HSL: typeof HSL;
8
8
  static HSV: typeof HSV;
9
9
  static RGB: typeof RGB;
@@ -29,5 +29,6 @@ export declare abstract class Color {
29
29
  lighten(value: number): RGB;
30
30
  darken(value: number): RGB;
31
31
  tint(value: number, tintColor: Color): RGB;
32
+ setHue(value: number): HSV;
32
33
  abstract fade(value: number): Color;
33
34
  }
@@ -46,4 +46,8 @@ export class Color {
46
46
  tint(value, tintColor) {
47
47
  return this.toRGB().tint(value, tintColor);
48
48
  }
49
+ setHue(value) {
50
+ return this.toHSV().setHue(value);
51
+ }
49
52
  }
53
+ //# sourceMappingURL=abstract.js.map
@@ -1,11 +1,11 @@
1
- import { Color } from './abstract.js';
2
- import { HSV } from './hsv.js';
3
- import { RGB } from './rgb.js';
1
+ import { Color } from './abstract';
2
+ import { HSV } from './hsv';
3
+ import { RGB } from './rgb';
4
4
  export declare class HSL extends Color {
5
- h: number;
6
- s: number;
7
- l: number;
8
- a: number;
5
+ readonly h: number;
6
+ readonly s: number;
7
+ readonly l: number;
8
+ readonly a: number;
9
9
  constructor(h: number, s: number, l: number, a?: number);
10
10
  asArray(): [number, number, number, number];
11
11
  round(): HSL;
@@ -15,7 +15,7 @@ export declare class HSL extends Color {
15
15
  toHSL(): HSL;
16
16
  asHSV(): HSV;
17
17
  asRGB(): RGB;
18
- static parse(str: string): HSL;
18
+ static parse(input: string | Color): HSL;
19
19
  invertLuminosity(): HSL;
20
20
  rotateHue(offset: number): HSL;
21
21
  saturate(ratio: number): HSL;
package/dist/color/hsl.js CHANGED
@@ -1,7 +1,7 @@
1
- import { Color } from './abstract.js';
2
- import { HSV } from './hsv.js';
3
- import { RGB } from './rgb.js';
4
- import { clamp, formatFloat, mod } from './utils.js';
1
+ import { Color } from './abstract';
2
+ import { HSV } from './hsv';
3
+ import { RGB } from './rgb';
4
+ import { clamp, formatFloat, mod } from './utils';
5
5
  export class HSL extends Color {
6
6
  h = 0; // between 0 and 360
7
7
  s = 0; // between 0 and 100
@@ -18,11 +18,7 @@ export class HSL extends Color {
18
18
  return [this.h, this.s, this.l, this.a];
19
19
  }
20
20
  round() {
21
- this.h = Math.round(this.h);
22
- this.s = Math.round(this.s);
23
- this.l = Math.round(this.l);
24
- this.a = Math.round(this.a * 1000) / 1000;
25
- return this;
21
+ return new HSL(Math.round(this.h), Math.round(this.s), Math.round(this.l), Math.round(this.a * 1000) / 1000);
26
22
  }
27
23
  clone() {
28
24
  return new HSL(this.h, this.s, this.l, this.a);
@@ -72,32 +68,31 @@ export class HSL extends Color {
72
68
  // Convert to RGB in the 0-255 range and return
73
69
  return new RGB(255 * hueToRgb(h + 1 / 3), 255 * hueToRgb(h), 255 * hueToRgb(h - 1 / 3), this.a);
74
70
  }
75
- static parse(str) {
76
- str = str.replace(/\s+/g, '').toLowerCase();
77
- let match = str.match(/^hsl\((?<h>[-+0-9.]+)(?:deg)?,(?<s>[-+0-9.]+)%,(?<l>[-+0-9.]+)%\)$/);
71
+ static parse(input) {
72
+ if (input instanceof Color)
73
+ return input.asHSL();
74
+ input = input.replace(/\s+/g, '').toLowerCase();
75
+ let match = input.match(/^hsl\((?<h>[-+0-9.]+)(?:deg)?,(?<s>[-+0-9.]+)%,(?<l>[-+0-9.]+)%\)$/);
78
76
  if (match) {
79
77
  return new HSL(parseFloat(match.groups.h), parseFloat(match.groups.s), parseFloat(match.groups.l));
80
78
  }
81
- match = str.match(/^hsla\((?<h>[-+0-9.]+)(?:deg)?,(?<s>[-+0-9.]+)%,(?<l>[-+0-9.]+)%,(?<a>[-+0-9.]+)\)$/);
79
+ match = input.match(/^hsla\((?<h>[-+0-9.]+)(?:deg)?,(?<s>[-+0-9.]+)%,(?<l>[-+0-9.]+)%,(?<a>[-+0-9.]+)\)$/);
82
80
  if (match) {
83
81
  return new HSL(parseFloat(match.groups.h), parseFloat(match.groups.s), parseFloat(match.groups.l), parseFloat(match.groups.a));
84
82
  }
85
- throw new Error(`Invalid HSL color string: "${str}"`);
83
+ throw new Error(`Invalid HSL color string: "${input}"`);
86
84
  }
87
85
  invertLuminosity() {
88
- this.l = 100 - this.l;
89
- return this;
86
+ return new HSL(this.h, this.s, 100 - this.l, this.a);
90
87
  }
91
88
  rotateHue(offset) {
92
- this.h = mod(this.h + offset, 360);
93
- return this;
89
+ return new HSL(mod(this.h + offset, 360), this.s, this.l, this.a);
94
90
  }
95
91
  saturate(ratio) {
96
- this.s = clamp(this.s * (1 + ratio), 0, 100);
97
- return this;
92
+ return new HSL(this.h, clamp(this.s * (1 + ratio), 0, 100), this.l, this.a);
98
93
  }
99
94
  fade(value) {
100
- this.a *= 1 - value;
101
- return this;
95
+ return new HSL(this.h, this.s, this.l, this.a * (1 - value));
102
96
  }
103
97
  }
98
+ //# sourceMappingURL=hsl.js.map
@@ -1,11 +1,11 @@
1
- import { Color } from './abstract.js';
2
- import { HSL } from './hsl.js';
3
- import { RGB } from './rgb.js';
1
+ import { Color } from './abstract';
2
+ import { HSL } from './hsl';
3
+ import { RGB } from './rgb';
4
4
  export declare class HSV extends Color {
5
- h: number;
6
- s: number;
7
- v: number;
8
- a: number;
5
+ readonly h: number;
6
+ readonly s: number;
7
+ readonly v: number;
8
+ readonly a: number;
9
9
  constructor(h: number, s: number, v: number, a?: number);
10
10
  asArray(): [number, number, number, number];
11
11
  round(): HSV;
@@ -16,4 +16,5 @@ export declare class HSV extends Color {
16
16
  toHSV(): HSV;
17
17
  asRGB(): RGB;
18
18
  fade(value: number): HSV;
19
+ setHue(value: number): HSV;
19
20
  }
package/dist/color/hsv.js CHANGED
@@ -1,7 +1,7 @@
1
- import { Color } from './abstract.js';
2
- import { HSL } from './hsl.js';
3
- import { RGB } from './rgb.js';
4
- import { clamp, mod } from './utils.js';
1
+ import { Color } from './abstract';
2
+ import { HSL } from './hsl';
3
+ import { RGB } from './rgb';
4
+ import { clamp, mod } from './utils';
5
5
  export class HSV extends Color {
6
6
  h = 0; // between 0 and 360
7
7
  s = 0; // between 0 and 100
@@ -18,11 +18,7 @@ export class HSV extends Color {
18
18
  return [this.h, this.s, this.v, this.a];
19
19
  }
20
20
  round() {
21
- this.h = Math.round(this.h);
22
- this.s = Math.round(this.s);
23
- this.v = Math.round(this.v);
24
- this.a = Math.round(this.a * 1000) / 1000;
25
- return this;
21
+ return new HSV(Math.round(this.h), Math.round(this.s), Math.round(this.v), Math.round(this.a * 1000) / 1000);
26
22
  }
27
23
  asString() {
28
24
  return this.asHSL().asString();
@@ -95,7 +91,10 @@ export class HSV extends Color {
95
91
  return new RGB(r * 255, g * 255, b * 255, this.a);
96
92
  }
97
93
  fade(value) {
98
- this.a *= 1 - value;
99
- return this;
94
+ return new HSV(this.h, this.s, this.v, this.a * (1 - value));
95
+ }
96
+ setHue(value) {
97
+ return new HSV(value, this.s, this.v, this.a);
100
98
  }
101
99
  }
100
+ //# sourceMappingURL=hsv.js.map
@@ -1,6 +1,6 @@
1
- import { Color } from './abstract.js';
2
- export type { RandomColorOptions } from './random.js';
3
- export type { HSL } from './hsl.js';
4
- export type { HSV } from './hsv.js';
5
- export type { RGB } from './rgb.js';
1
+ import { Color } from './abstract';
2
+ export type { RandomColorOptions } from './random';
3
+ export type { HSL } from './hsl';
4
+ export type { HSV } from './hsv';
5
+ export type { RGB } from './rgb';
6
6
  export { Color };
@@ -1,22 +1,24 @@
1
- import { Color } from './abstract.js';
2
- import { HSL } from './hsl.js';
3
- import { HSV } from './hsv.js';
4
- import randomColor from './random.js';
5
- import { RGB } from './rgb.js';
6
- Color.parse = function (str) {
7
- str = str.trim().toLowerCase();
8
- if (str.startsWith('#'))
9
- return RGB.parse(str);
10
- const prefix = str.replace(/\d.*/, '').trim().toLowerCase();
1
+ import { Color } from './abstract';
2
+ import { HSL } from './hsl';
3
+ import { HSV } from './hsv';
4
+ import randomColor from './random';
5
+ import { RGB } from './rgb';
6
+ Color.parse = function (input) {
7
+ if (input instanceof Color)
8
+ return input;
9
+ input = input.trim().toLowerCase();
10
+ if (input.startsWith('#'))
11
+ return RGB.parse(input);
12
+ const prefix = input.replace(/\d.*/, '').trim().toLowerCase();
11
13
  switch (prefix) {
12
14
  case 'rgb(':
13
15
  case 'rgba(':
14
- return RGB.parse(str);
16
+ return RGB.parse(input);
15
17
  case 'hsl(':
16
18
  case 'hsla(':
17
- return HSL.parse(str);
19
+ return HSL.parse(input);
18
20
  default:
19
- throw Error('Unknown color format: ' + str);
21
+ throw Error('Unknown color format: ' + input);
20
22
  }
21
23
  };
22
24
  Color.HSL = HSL;
@@ -24,3 +26,4 @@ Color.HSV = HSV;
24
26
  Color.RGB = RGB;
25
27
  Color.random = randomColor;
26
28
  export { Color };
29
+ //# sourceMappingURL=index.js.map
@@ -1,4 +1,4 @@
1
- import { HSV } from './hsv.js';
1
+ import { HSV } from './hsv';
2
2
  export interface RandomColorOptions {
3
3
  seed?: string;
4
4
  hue?: number | string;
@@ -1,5 +1,5 @@
1
- import { HSV } from './hsv.js';
2
- import { mod } from './utils.js';
1
+ import { HSV } from './hsv';
2
+ import { mod } from './utils';
3
3
  let colorDictionary = new Map();
4
4
  export default function randomColor(options) {
5
5
  if (colorDictionary.size === 0)
@@ -131,3 +131,4 @@ function getColorInfo(hue) {
131
131
  }
132
132
  throw Error('Color hue value not found');
133
133
  }
134
+ //# sourceMappingURL=random.js.map
@@ -1,11 +1,11 @@
1
- import { HSL } from './hsl.js';
2
- import { HSV } from './hsv.js';
3
- import { Color } from './abstract.js';
1
+ import { HSL } from './hsl';
2
+ import { HSV } from './hsv';
3
+ import { Color } from './abstract';
4
4
  export declare class RGB extends Color {
5
- r: number;
6
- g: number;
7
- b: number;
8
- a: number;
5
+ readonly r: number;
6
+ readonly g: number;
7
+ readonly b: number;
8
+ readonly a: number;
9
9
  constructor(r: number, g: number, b: number, a?: number);
10
10
  clone(): RGB;
11
11
  asArray(): [number, number, number, number];
@@ -16,7 +16,7 @@ export declare class RGB extends Color {
16
16
  asHSV(): HSV;
17
17
  asRGB(): RGB;
18
18
  toRGB(): RGB;
19
- static parse(str: string): RGB;
19
+ static parse(input: string | Color): RGB;
20
20
  gamma(value: number): RGB;
21
21
  invert(): RGB;
22
22
  contrast(value: number): RGB;
package/dist/color/rgb.js CHANGED
@@ -1,7 +1,7 @@
1
- import { HSL } from './hsl.js';
2
- import { HSV } from './hsv.js';
3
- import { Color } from './abstract.js';
4
- import { clamp, formatFloat } from './utils.js';
1
+ import { HSL } from './hsl';
2
+ import { HSV } from './hsv';
3
+ import { Color } from './abstract';
4
+ import { clamp, formatFloat } from './utils';
5
5
  export class RGB extends Color {
6
6
  r = 0; // between 0 and 255
7
7
  g = 0; // between 0 and 255
@@ -21,11 +21,7 @@ export class RGB extends Color {
21
21
  return [this.r, this.g, this.b, this.a];
22
22
  }
23
23
  round() {
24
- this.r = Math.round(this.r);
25
- this.g = Math.round(this.g);
26
- this.b = Math.round(this.b);
27
- this.a = Math.round(this.a * 1000) / 1000;
28
- return this;
24
+ return new RGB(Math.round(this.r), Math.round(this.g), Math.round(this.b), Math.round(this.a * 1000) / 1000);
29
25
  }
30
26
  asString() {
31
27
  if (this.a === 1) {
@@ -113,10 +109,12 @@ export class RGB extends Color {
113
109
  toRGB() {
114
110
  return this;
115
111
  }
116
- static parse(str) {
117
- str = str.toLowerCase().replaceAll(/[^0-9a-z.#,()]/g, '');
112
+ static parse(input) {
113
+ if (input instanceof Color)
114
+ return input.asRGB();
115
+ input = input.toLowerCase().replaceAll(/[^0-9a-z.#,()]/g, '');
118
116
  let match;
119
- match = str.match(/^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})?$/);
117
+ match = input.match(/^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})?$/);
120
118
  if (match) {
121
119
  const r = parseInt(match[1], 16);
122
120
  const g = parseInt(match[2], 16);
@@ -124,7 +122,7 @@ export class RGB extends Color {
124
122
  const a = match[4] ? parseInt(match[4], 16) / 255 : 1;
125
123
  return new RGB(r, g, b, a);
126
124
  }
127
- match = str.match(/^#([0-9a-f])([0-9a-f])([0-9a-f])([0-9a-f])?$/);
125
+ match = input.match(/^#([0-9a-f])([0-9a-f])([0-9a-f])([0-9a-f])?$/);
128
126
  if (match) {
129
127
  const r = parseInt(match[1], 16) * 17;
130
128
  const g = parseInt(match[2], 16) * 17;
@@ -132,15 +130,15 @@ export class RGB extends Color {
132
130
  const a = match[4] ? parseInt(match[4], 16) / 15 : 1;
133
131
  return new RGB(r, g, b, a);
134
132
  }
135
- str = str.trim().toLowerCase().replaceAll(' ', '');
136
- match = str.match(/^rgb\((\d+),(\d+),(\d+)\)$/);
133
+ input = input.trim().toLowerCase().replaceAll(' ', '');
134
+ match = input.match(/^rgb\((\d+),(\d+),(\d+)\)$/);
137
135
  if (match) {
138
136
  const r = parseInt(match[1]);
139
137
  const g = parseInt(match[2]);
140
138
  const b = parseInt(match[3]);
141
139
  return new RGB(r, g, b);
142
140
  }
143
- match = str.match(/^rgba\((\d+),(\d+),(\d+),([.\d]+)\)$/);
141
+ match = input.match(/^rgba\((\d+),(\d+),(\d+),([.\d]+)\)$/);
144
142
  if (match) {
145
143
  const r = parseInt(match[1]);
146
144
  const g = parseInt(match[2]);
@@ -148,33 +146,24 @@ export class RGB extends Color {
148
146
  const a = parseFloat(match[4]);
149
147
  return new RGB(r, g, b, a);
150
148
  }
151
- throw new Error(`Invalid RGB color string: "${str}"`);
149
+ throw new Error(`Invalid RGB color string: "${input}"`);
152
150
  }
153
151
  gamma(value) {
154
152
  if (value < 1e-3)
155
153
  value = 1e-3;
156
154
  if (value > 1e3)
157
155
  value = 1e3;
158
- this.r = Math.pow(this.r / 255, value) * 255;
159
- this.g = Math.pow(this.g / 255, value) * 255;
160
- this.b = Math.pow(this.b / 255, value) * 255;
161
- return this;
156
+ return new RGB(Math.pow(this.r / 255, value) * 255, Math.pow(this.g / 255, value) * 255, Math.pow(this.b / 255, value) * 255, this.a);
162
157
  }
163
158
  invert() {
164
- this.r = 255 - this.r;
165
- this.g = 255 - this.g;
166
- this.b = 255 - this.b;
167
- return this;
159
+ return new RGB(255 - this.r, 255 - this.g, 255 - this.b, this.a);
168
160
  }
169
161
  contrast(value) {
170
162
  if (value < 0)
171
163
  value = 0;
172
164
  if (value > 1e6)
173
165
  value = 1e6;
174
- this.r = clamp((this.r - 127.5) * value + 127.5, 0, 255);
175
- this.g = clamp((this.g - 127.5) * value + 127.5, 0, 255);
176
- this.b = clamp((this.b - 127.5) * value + 127.5, 0, 255);
177
- return this;
166
+ return new RGB(clamp((this.r - 127.5) * value + 127.5, 0, 255), clamp((this.g - 127.5) * value + 127.5, 0, 255), clamp((this.b - 127.5) * value + 127.5, 0, 255), this.a);
178
167
  }
179
168
  brightness(value) {
180
169
  if (value < -1)
@@ -183,38 +172,24 @@ export class RGB extends Color {
183
172
  value = 1;
184
173
  const a = 1 - Math.abs(value);
185
174
  const b = (value < 0) ? 0 : 255 * value;
186
- this.r = this.r * a + b;
187
- this.g = this.g * a + b;
188
- this.b = this.b * a + b;
189
- return this;
175
+ return new RGB(this.r * a + b, this.g * a + b, this.b * a + b, this.a);
190
176
  }
191
177
  tint(value, tintColor) {
192
178
  if (value < 0)
193
179
  value = 0;
194
180
  if (value > 1)
195
181
  value = 1;
196
- const hsv = this.asHSV();
197
- hsv.h = tintColor.toHSV().h;
198
- const rgbNew = hsv.toRGB();
199
- rgbNew.r = this.r * (1 - value) + value * rgbNew.r;
200
- rgbNew.g = this.g * (1 - value) + value * rgbNew.g;
201
- rgbNew.b = this.b * (1 - value) + value * rgbNew.b;
202
- return rgbNew;
182
+ const rgbNew = this.setHue(tintColor.toHSV().h).toRGB();
183
+ return new RGB(this.r * (1 - value) + value * rgbNew.r, this.g * (1 - value) + value * rgbNew.g, this.b * (1 - value) + value * rgbNew.b, this.a);
203
184
  }
204
185
  lighten(ratio) {
205
- this.r = clamp(255 - (255 - this.r) * (1 - ratio), 0, 255);
206
- this.g = clamp(255 - (255 - this.g) * (1 - ratio), 0, 255);
207
- this.b = clamp(255 - (255 - this.b) * (1 - ratio), 0, 255);
208
- return this;
186
+ return new RGB(clamp(255 - (255 - this.r) * (1 - ratio), 0, 255), clamp(255 - (255 - this.g) * (1 - ratio), 0, 255), clamp(255 - (255 - this.b) * (1 - ratio), 0, 255), this.a);
209
187
  }
210
188
  darken(ratio) {
211
- this.r = clamp(this.r * (1 - ratio), 0, 255);
212
- this.g = clamp(this.g * (1 - ratio), 0, 255);
213
- this.b = clamp(this.b * (1 - ratio), 0, 255);
214
- return this;
189
+ return new RGB(clamp(this.r * (1 - ratio), 0, 255), clamp(this.g * (1 - ratio), 0, 255), clamp(this.b * (1 - ratio), 0, 255), this.a);
215
190
  }
216
191
  fade(value) {
217
- this.a *= 1 - value;
218
- return this;
192
+ return new RGB(this.r, this.g, this.b, this.a * (1 - value));
219
193
  }
220
194
  }
195
+ //# sourceMappingURL=rgb.js.map
@@ -7,3 +7,4 @@ export function mod(num, max) {
7
7
  export function formatFloat(num, precision) {
8
8
  return num.toFixed(precision).replace(/0+$/, '').replace(/\.$/, '');
9
9
  }
10
+ //# sourceMappingURL=utils.js.map
@@ -1,4 +1,4 @@
1
- import type { TileJSONSpecification } from '../types/index.js';
1
+ import type { TileJSONSpecification } from '../types/index';
2
2
  import type { SpriteSpecification, StyleSpecification } from '@maplibre/maplibre-gl-style-spec';
3
3
  export interface GuessStyleOptions {
4
4
  baseUrl?: string;
@@ -1,8 +1,8 @@
1
- import { isTileJSONSpecification } from '../types/index.js';
2
- import { deepClone, resolveUrl } from '../lib/utils.js';
3
- import { colorful } from '../styles/index.js';
4
- import { Color } from '../color/index.js';
5
- import { isRasterTileJSONSpecification } from '../types/tilejson.js';
1
+ import { isTileJSONSpecification } from '../types/index';
2
+ import { deepClone, resolveUrl } from '../lib/utils';
3
+ import { colorful } from '../styles/index';
4
+ import { Color } from '../color/index';
5
+ import { isRasterTileJSONSpecification } from '../types/tilejson';
6
6
  export function guessStyle(tileJSON, options) {
7
7
  tileJSON = deepClone(tileJSON);
8
8
  if (options && options.baseUrl) {
@@ -144,3 +144,4 @@ function sourceFromSpec(spec, type) {
144
144
  source.scheme = spec.scheme;
145
145
  return source;
146
146
  }
147
+ //# sourceMappingURL=guess_style.js.map
@@ -1,2 +1,2 @@
1
- export type { GuessStyleOptions } from './guess_style.js';
2
- export { guessStyle } from './guess_style.js';
1
+ export type { GuessStyleOptions } from './guess_style';
2
+ export { guessStyle } from './guess_style';
@@ -1 +1,2 @@
1
- export { guessStyle } from './guess_style.js';
1
+ export { guessStyle } from './guess_style';
2
+ //# sourceMappingURL=index.js.map
package/dist/index.d.ts CHANGED
@@ -1,11 +1,15 @@
1
- export type * from './styles/index.js';
2
- export * as styles from './styles/index.js';
3
- export type { GuessStyleOptions } from './guess_style/index.js';
4
- export type { RGB, HSL, HSV, RandomColorOptions } from './color/index.js';
5
- export type { TileJSONSpecification, TileJSONSpecificationRaster, TileJSONSpecificationVector } from './types/tilejson.js';
6
- export type { VectorLayer } from './types/index.js';
7
- export type { StyleBuilderOptions, StyleBuilderColorStrings, StyleBuilderFontStrings, Language, StyleBuilderColorKeys, StyleBuilderFontKeys } from './style_builder/types.js';
8
- export type { RecolorOptions } from './style_builder/recolor.js';
9
- export type { StyleBuilder } from './style_builder/style_builder.js';
10
- export { guessStyle } from './guess_style/index.js';
11
- export { Color } from './color/index.js';
1
+ export { colorful, eclipse, graybeard, neutrino, type StyleBuilderFunction } from './styles/index';
2
+ export declare const styles: {
3
+ colorful: import("./styles/index").StyleBuilderFunction;
4
+ eclipse: import("./styles/index").StyleBuilderFunction;
5
+ graybeard: import("./styles/index").StyleBuilderFunction;
6
+ neutrino: import("./styles/index").StyleBuilderFunction;
7
+ };
8
+ export type { GuessStyleOptions } from './guess_style/index';
9
+ export type { RGB, HSL, HSV, RandomColorOptions } from './color/index';
10
+ export type { TileJSONSpecification, TileJSONSpecificationRaster, TileJSONSpecificationVector } from './types/tilejson';
11
+ export type { VectorLayer } from './types/index';
12
+ export type { StyleBuilderOptions, Language, StyleBuilderColors, StyleBuilderColorsEnsured, StyleBuilderFonts } from './style_builder/types';
13
+ export type { RecolorOptions } from './style_builder/recolor';
14
+ export { guessStyle } from './guess_style/index';
15
+ export { Color } from './color/index';