@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.
- package/README.MD +13 -89
- package/dist/color/abstract.d.ts +6 -5
- package/dist/color/abstract.js +4 -0
- package/dist/color/hsl.d.ts +8 -8
- package/dist/color/hsl.js +17 -22
- package/dist/color/hsv.d.ts +8 -7
- package/dist/color/hsv.js +10 -11
- package/dist/color/index.d.ts +5 -5
- package/dist/color/index.js +16 -13
- package/dist/color/random.d.ts +1 -1
- package/dist/color/random.js +3 -2
- package/dist/color/rgb.d.ts +8 -8
- package/dist/color/rgb.js +25 -50
- package/dist/color/utils.js +1 -0
- package/dist/guess_style/guess_style.d.ts +1 -1
- package/dist/guess_style/guess_style.js +6 -5
- package/dist/guess_style/index.d.ts +2 -2
- package/dist/guess_style/index.js +2 -1
- package/dist/index.d.ts +15 -11
- package/dist/index.js +11 -3
- package/dist/lib/utils.js +2 -1
- package/dist/shortbread/index.d.ts +2 -2
- package/dist/shortbread/index.js +3 -2
- package/dist/shortbread/layers.d.ts +2 -2
- package/dist/shortbread/layers.js +1 -0
- package/dist/shortbread/properties.js +1 -0
- package/dist/shortbread/template.js +1 -0
- package/dist/style_builder/decorator.d.ts +3 -3
- package/dist/style_builder/decorator.js +4 -3
- package/dist/style_builder/recolor.d.ts +1 -1
- package/dist/style_builder/recolor.js +2 -1
- package/dist/style_builder/style_builder.d.ts +11 -11
- package/dist/style_builder/style_builder.js +14 -11
- package/dist/style_builder/types.d.ts +100 -19
- package/dist/style_builder/types.js +2 -0
- package/dist/styles/colorful.d.ts +5 -88
- package/dist/styles/colorful.js +2 -1
- package/dist/styles/eclipse.d.ts +1 -1
- package/dist/styles/eclipse.js +2 -1
- package/dist/styles/empty.d.ts +4 -9
- package/dist/styles/empty.js +4 -9
- package/dist/styles/graybeard.d.ts +1 -1
- package/dist/styles/graybeard.js +2 -1
- package/dist/styles/index.d.ts +10 -27
- package/dist/styles/index.js +6 -5
- package/dist/styles/neutrino.d.ts +5 -30
- package/dist/styles/neutrino.js +35 -4
- package/dist/types/index.d.ts +5 -5
- package/dist/types/index.js +3 -2
- package/dist/types/maplibre.js +1 -0
- package/dist/types/tilejson.d.ts +1 -1
- package/dist/types/tilejson.js +1 -0
- package/dist/types/vector_layer.js +1 -0
- package/package.json +11 -8
- package/dist/style_builder/index.d.ts +0 -1
- 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
|
-

|
|
14
|
-
|
|
15
10
|
# Styles
|
|
16
11
|
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
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
|
-
|
|
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
|
|
package/dist/color/abstract.d.ts
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import type { HSL } from './hsl
|
|
2
|
-
import type { HSV } from './hsv
|
|
3
|
-
import { RandomColorOptions } from './random
|
|
4
|
-
import type { RGB } from './rgb
|
|
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: (
|
|
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
|
}
|
package/dist/color/abstract.js
CHANGED
package/dist/color/hsl.d.ts
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import { Color } from './abstract
|
|
2
|
-
import { HSV } from './hsv
|
|
3
|
-
import { RGB } from './rgb
|
|
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(
|
|
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
|
|
2
|
-
import { HSV } from './hsv
|
|
3
|
-
import { RGB } from './rgb
|
|
4
|
-
import { clamp, formatFloat, mod } from './utils
|
|
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
|
|
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(
|
|
76
|
-
|
|
77
|
-
|
|
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 =
|
|
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: "${
|
|
83
|
+
throw new Error(`Invalid HSL color string: "${input}"`);
|
|
86
84
|
}
|
|
87
85
|
invertLuminosity() {
|
|
88
|
-
this.
|
|
89
|
-
return this;
|
|
86
|
+
return new HSL(this.h, this.s, 100 - this.l, this.a);
|
|
90
87
|
}
|
|
91
88
|
rotateHue(offset) {
|
|
92
|
-
|
|
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.
|
|
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
|
|
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
|
package/dist/color/hsv.d.ts
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import { Color } from './abstract
|
|
2
|
-
import { HSL } from './hsl
|
|
3
|
-
import { RGB } from './rgb
|
|
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
|
|
2
|
-
import { HSL } from './hsl
|
|
3
|
-
import { RGB } from './rgb
|
|
4
|
-
import { clamp, mod } from './utils
|
|
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
|
|
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
|
|
99
|
-
|
|
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
|
package/dist/color/index.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
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
|
|
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 };
|
package/dist/color/index.js
CHANGED
|
@@ -1,22 +1,24 @@
|
|
|
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 (
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
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(
|
|
16
|
+
return RGB.parse(input);
|
|
15
17
|
case 'hsl(':
|
|
16
18
|
case 'hsla(':
|
|
17
|
-
return HSL.parse(
|
|
19
|
+
return HSL.parse(input);
|
|
18
20
|
default:
|
|
19
|
-
throw Error('Unknown color format: ' +
|
|
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
|
package/dist/color/random.d.ts
CHANGED
package/dist/color/random.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { HSV } from './hsv
|
|
2
|
-
import { mod } from './utils
|
|
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
|
package/dist/color/rgb.d.ts
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import { HSL } from './hsl
|
|
2
|
-
import { HSV } from './hsv
|
|
3
|
-
import { Color } from './abstract
|
|
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(
|
|
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
|
|
2
|
-
import { HSV } from './hsv
|
|
3
|
-
import { Color } from './abstract
|
|
4
|
-
import { clamp, formatFloat } from './utils
|
|
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
|
|
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(
|
|
117
|
-
|
|
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 =
|
|
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 =
|
|
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
|
-
|
|
136
|
-
match =
|
|
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 =
|
|
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: "${
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
197
|
-
|
|
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
|
|
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
|
|
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
|
|
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
|
package/dist/color/utils.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { TileJSONSpecification } from '../types/index
|
|
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
|
|
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
|
|
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
|
|
2
|
-
export { guessStyle } from './guess_style
|
|
1
|
+
export type { GuessStyleOptions } from './guess_style';
|
|
2
|
+
export { guessStyle } from './guess_style';
|
|
@@ -1 +1,2 @@
|
|
|
1
|
-
export { guessStyle } from './guess_style
|
|
1
|
+
export { guessStyle } from './guess_style';
|
|
2
|
+
//# sourceMappingURL=index.js.map
|
package/dist/index.d.ts
CHANGED
|
@@ -1,11 +1,15 @@
|
|
|
1
|
-
export type
|
|
2
|
-
export
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
export type {
|
|
9
|
-
export type {
|
|
10
|
-
export {
|
|
11
|
-
export {
|
|
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';
|