@versatiles/style 5.0.0 → 5.2.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/LICENSE +21 -0
- package/dist/browser.d.ts +2 -0
- package/dist/browser.js +2 -0
- package/dist/color/abstract.d.ts +32 -0
- package/dist/color/abstract.js +49 -0
- package/dist/color/hsl.d.ts +22 -0
- package/dist/color/hsl.js +101 -0
- package/dist/color/hsv.d.ts +18 -0
- package/dist/color/hsv.js +94 -0
- package/dist/color/index.d.ts +3 -0
- package/dist/color/index.js +27 -0
- package/dist/{guess_style/random_color.d.ts → color/random.d.ts} +2 -2
- package/dist/color/random.js +127 -0
- package/dist/color/rgb.d.ts +27 -0
- package/dist/color/rgb.js +213 -0
- package/dist/color/utils.d.ts +3 -0
- package/dist/color/utils.js +9 -0
- package/dist/guess_style/guess_style.js +3 -4
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1 -0
- package/dist/lib/utils.js +3 -4
- package/dist/shortbread/layers.js +14 -3
- package/dist/style_builder/decorator.d.ts +1 -1
- package/dist/style_builder/decorator.js +3 -4
- package/dist/style_builder/recolor.d.ts +2 -1
- package/dist/style_builder/recolor.js +15 -49
- package/dist/style_builder/style_builder.d.ts +1 -1
- package/dist/style_builder/style_builder.js +8 -5
- package/dist/style_builder/types.d.ts +1 -1
- package/dist/styles/colorful.js +49 -8
- package/dist/styles/eclipse.js +1 -4
- package/dist/styles/graybeard.js +1 -1
- package/dist/styles/neutrino.js +6 -6
- package/package.json +15 -17
- package/dist/guess_style/random_color.js +0 -148
package/dist/styles/neutrino.js
CHANGED
|
@@ -293,7 +293,7 @@ export default class Neutrino extends StyleBuilder {
|
|
|
293
293
|
size: { 5: 8, 8: 12 },
|
|
294
294
|
},
|
|
295
295
|
'label-place-*': {
|
|
296
|
-
color: colors.label.
|
|
296
|
+
color: colors.label.rotateHue(-15).saturate(1).darken(0.05),
|
|
297
297
|
font: fonts.regular,
|
|
298
298
|
textHaloColor: colors.label.lighten(0.5),
|
|
299
299
|
textHaloWidth: 0.1,
|
|
@@ -329,24 +329,24 @@ export default class Neutrino extends StyleBuilder {
|
|
|
329
329
|
minzoom: 11,
|
|
330
330
|
size: { 11: 11, 13: 14 },
|
|
331
331
|
textTransform: 'uppercase',
|
|
332
|
-
color: colors.label.
|
|
332
|
+
color: colors.label.rotateHue(-30).saturate(1).darken(0.05),
|
|
333
333
|
},
|
|
334
334
|
'label-place-quarter': {
|
|
335
335
|
minzoom: 13,
|
|
336
336
|
size: { 13: 13 },
|
|
337
337
|
textTransform: 'uppercase',
|
|
338
|
-
color: colors.label.
|
|
338
|
+
color: colors.label.rotateHue(-40).saturate(1).darken(0.05),
|
|
339
339
|
},
|
|
340
340
|
'label-place-neighbourhood': {
|
|
341
341
|
minzoom: 14,
|
|
342
342
|
size: { 14: 12 },
|
|
343
343
|
textTransform: 'uppercase',
|
|
344
|
-
color: colors.label.
|
|
344
|
+
color: colors.label.rotateHue(-50).saturate(1).darken(0.05),
|
|
345
345
|
},
|
|
346
346
|
'label-motorway-shield': {
|
|
347
347
|
color: colors.label,
|
|
348
348
|
font: fonts.regular,
|
|
349
|
-
textHaloColor: colors.label.
|
|
349
|
+
textHaloColor: colors.label.saturate(-0.5).lighten(0.1),
|
|
350
350
|
textHaloWidth: 0.1,
|
|
351
351
|
textHaloBlur: 1,
|
|
352
352
|
symbolPlacement: 'line',
|
|
@@ -357,7 +357,7 @@ export default class Neutrino extends StyleBuilder {
|
|
|
357
357
|
'label-street-*': {
|
|
358
358
|
color: colors.label,
|
|
359
359
|
font: fonts.regular,
|
|
360
|
-
textHaloColor: colors.label.
|
|
360
|
+
textHaloColor: colors.label.saturate(-0.5).lighten(0.1),
|
|
361
361
|
textHaloWidth: 0.1,
|
|
362
362
|
textHaloBlur: 1,
|
|
363
363
|
symbolPlacement: 'line',
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@versatiles/style",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.2.0",
|
|
4
4
|
"description": "Generate StyleJSON for MapLibre",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -29,45 +29,43 @@
|
|
|
29
29
|
"license": "MIT",
|
|
30
30
|
"type": "module",
|
|
31
31
|
"dependencies": {
|
|
32
|
-
"
|
|
33
|
-
"brace-expansion": "^4.0.0",
|
|
34
|
-
"color": "^4.2.3"
|
|
32
|
+
"brace-expansion": "^4.0.0"
|
|
35
33
|
},
|
|
36
34
|
"files": [
|
|
37
35
|
"dist/**/*.js",
|
|
38
36
|
"dist/**/*.d.ts"
|
|
39
37
|
],
|
|
40
38
|
"devDependencies": {
|
|
41
|
-
"@maplibre/maplibre-gl-style-spec": "^
|
|
42
|
-
"@rollup/plugin-commonjs": "^28.0.
|
|
43
|
-
"@rollup/plugin-node-resolve": "^
|
|
39
|
+
"@maplibre/maplibre-gl-style-spec": "^23.1.0",
|
|
40
|
+
"@rollup/plugin-commonjs": "^28.0.2",
|
|
41
|
+
"@rollup/plugin-node-resolve": "^16.0.0",
|
|
44
42
|
"@rollup/plugin-terser": "^0.4.4",
|
|
45
|
-
"@rollup/plugin-typescript": "^12.1.
|
|
43
|
+
"@rollup/plugin-typescript": "^12.1.2",
|
|
46
44
|
"@types/bin-pack": "^1.0.3",
|
|
47
45
|
"@types/brace-expansion": "^1.1.2",
|
|
48
46
|
"@types/inquirer": "^9.0.7",
|
|
49
47
|
"@types/jest": "^29.5.14",
|
|
50
|
-
"@types/node": "^22.
|
|
48
|
+
"@types/node": "^22.10.7",
|
|
51
49
|
"@types/tar-stream": "^3.1.3",
|
|
52
|
-
"@typescript-eslint/eslint-plugin": "^8.
|
|
53
|
-
"@typescript-eslint/parser": "^8.
|
|
50
|
+
"@typescript-eslint/eslint-plugin": "^8.20.0",
|
|
51
|
+
"@typescript-eslint/parser": "^8.20.0",
|
|
54
52
|
"@versatiles/container": "^1.2.3",
|
|
55
53
|
"@versatiles/release-tool": "^1.2.6",
|
|
56
54
|
"bin-pack": "^1.0.2",
|
|
57
|
-
"eslint": "^9.
|
|
58
|
-
"inquirer": "^12.
|
|
55
|
+
"eslint": "^9.18.0",
|
|
56
|
+
"inquirer": "^12.3.2",
|
|
59
57
|
"jest": "^29.7.0",
|
|
60
58
|
"jest-environment-jsdom": "^29.7.0",
|
|
61
59
|
"jest-ts-webcompat-resolver": "^1.0.0",
|
|
62
|
-
"npm-check-updates": "^17.1.
|
|
63
|
-
"rollup": "^4.
|
|
60
|
+
"npm-check-updates": "^17.1.14",
|
|
61
|
+
"rollup": "^4.30.1",
|
|
64
62
|
"rollup-plugin-dts": "^6.1.1",
|
|
65
63
|
"sharp": "^0.33.5",
|
|
66
64
|
"tar-stream": "^3.1.7",
|
|
67
65
|
"ts-jest": "^29.2.5",
|
|
68
66
|
"ts-node": "^10.9.2",
|
|
69
67
|
"tsx": "^4.19.2",
|
|
70
|
-
"typescript": "^5.
|
|
71
|
-
"typescript-eslint": "^8.
|
|
68
|
+
"typescript": "^5.7.3",
|
|
69
|
+
"typescript-eslint": "^8.20.0"
|
|
72
70
|
}
|
|
73
71
|
}
|
|
@@ -1,148 +0,0 @@
|
|
|
1
|
-
export default function randomColorGenerator(startSeed) {
|
|
2
|
-
let seed = inputToSeed(startSeed);
|
|
3
|
-
const colorDictionary = initColorDictionary();
|
|
4
|
-
return randomColor;
|
|
5
|
-
function randomColor(options) {
|
|
6
|
-
options ??= {};
|
|
7
|
-
if (options.seed != null) {
|
|
8
|
-
seed = inputToSeed(options.seed);
|
|
9
|
-
}
|
|
10
|
-
options.opacity ??= 1;
|
|
11
|
-
const H = pickHue(options);
|
|
12
|
-
const S = pickSaturation(H, options);
|
|
13
|
-
const V = pickBrightness(H, S, options);
|
|
14
|
-
const hsl = HSVtoHSL([H, S, V]).map(v => v.toFixed(0));
|
|
15
|
-
if (options.opacity === 1) {
|
|
16
|
-
return `hsl(${hsl[0]},${hsl[1]}%,${hsl[2]}%)`;
|
|
17
|
-
}
|
|
18
|
-
else {
|
|
19
|
-
return `hsla(${hsl[0]},${hsl[1]}%,${hsl[2]}%,${options.opacity})`;
|
|
20
|
-
}
|
|
21
|
-
}
|
|
22
|
-
function pickHue(options) {
|
|
23
|
-
let hue = randomWithin(getHueRange(options.hue));
|
|
24
|
-
if (hue < 0)
|
|
25
|
-
hue = 360 + hue;
|
|
26
|
-
return hue;
|
|
27
|
-
}
|
|
28
|
-
function pickSaturation(hue, options) {
|
|
29
|
-
if (options.hue === 'monochrome')
|
|
30
|
-
return 0;
|
|
31
|
-
if (options.luminosity === 'random')
|
|
32
|
-
return randomWithin([0, 100]);
|
|
33
|
-
const { saturationRange } = getColorInfo(hue);
|
|
34
|
-
let [sMin, sMax] = saturationRange;
|
|
35
|
-
if (options.saturation === 'strong')
|
|
36
|
-
return sMax;
|
|
37
|
-
switch (options.luminosity) {
|
|
38
|
-
case 'bright':
|
|
39
|
-
sMin = 55;
|
|
40
|
-
break;
|
|
41
|
-
case 'dark':
|
|
42
|
-
sMin = sMax - 10;
|
|
43
|
-
break;
|
|
44
|
-
case 'light':
|
|
45
|
-
sMax = 55;
|
|
46
|
-
break;
|
|
47
|
-
default:
|
|
48
|
-
}
|
|
49
|
-
return randomWithin([sMin, sMax]);
|
|
50
|
-
}
|
|
51
|
-
function pickBrightness(h, s, options) {
|
|
52
|
-
let bMin = getMinimumBrightness(h, s), bMax = 100;
|
|
53
|
-
switch (options.luminosity) {
|
|
54
|
-
case 'dark':
|
|
55
|
-
bMax = Math.min(100, bMin + 20);
|
|
56
|
-
break;
|
|
57
|
-
case 'light':
|
|
58
|
-
bMin = (bMax + bMin) / 2;
|
|
59
|
-
break;
|
|
60
|
-
case 'random':
|
|
61
|
-
bMin = 0;
|
|
62
|
-
bMax = 100;
|
|
63
|
-
break;
|
|
64
|
-
default:
|
|
65
|
-
}
|
|
66
|
-
return randomWithin([bMin, bMax]);
|
|
67
|
-
}
|
|
68
|
-
function getMinimumBrightness(h, s) {
|
|
69
|
-
const { lowerBounds } = getColorInfo(h);
|
|
70
|
-
for (let i = 0; i < lowerBounds.length - 1; i++) {
|
|
71
|
-
const [s1, v1] = lowerBounds[i];
|
|
72
|
-
const [s2, v2] = lowerBounds[i + 1];
|
|
73
|
-
if (s >= s1 && s <= s2) {
|
|
74
|
-
const m = (v2 - v1) / (s2 - s1), b = v1 - m * s1;
|
|
75
|
-
return m * s + b;
|
|
76
|
-
}
|
|
77
|
-
}
|
|
78
|
-
return 0;
|
|
79
|
-
}
|
|
80
|
-
function getHueRange(hue) {
|
|
81
|
-
if (typeof hue === 'number') {
|
|
82
|
-
if (hue < 360 && hue > 0)
|
|
83
|
-
return [hue, hue];
|
|
84
|
-
}
|
|
85
|
-
if (typeof hue === 'string') {
|
|
86
|
-
const color = colorDictionary[hue];
|
|
87
|
-
if (color?.hueRange)
|
|
88
|
-
return color.hueRange;
|
|
89
|
-
}
|
|
90
|
-
return [0, 360];
|
|
91
|
-
}
|
|
92
|
-
function getColorInfo(hue) {
|
|
93
|
-
// Maps red colors to make picking hue easier
|
|
94
|
-
if (hue >= 334 && hue <= 360)
|
|
95
|
-
hue -= 360;
|
|
96
|
-
for (const colorName in colorDictionary) {
|
|
97
|
-
const color = colorDictionary[colorName];
|
|
98
|
-
if (color.hueRange && hue >= color.hueRange[0] && hue <= color.hueRange[1]) {
|
|
99
|
-
return colorDictionary[colorName];
|
|
100
|
-
}
|
|
101
|
-
}
|
|
102
|
-
throw Error('Color not found');
|
|
103
|
-
}
|
|
104
|
-
function randomWithin(range) {
|
|
105
|
-
//Seeded random algorithm from http://indiegamr.com/generate-repeatable-random-numbers-in-js/
|
|
106
|
-
const max = range[1] || 1;
|
|
107
|
-
const min = range[0] || 0;
|
|
108
|
-
seed = (seed * 9301 + 49297) % 233280;
|
|
109
|
-
const rnd = seed / 233280.0;
|
|
110
|
-
return Math.floor(min + rnd * (max - min));
|
|
111
|
-
}
|
|
112
|
-
function initColorDictionary() {
|
|
113
|
-
const dic = {};
|
|
114
|
-
const defineColor = (name, hueRange, lowerBounds) => {
|
|
115
|
-
const [greyest] = lowerBounds;
|
|
116
|
-
const colorful = lowerBounds[lowerBounds.length - 1];
|
|
117
|
-
dic[name] = {
|
|
118
|
-
hueRange,
|
|
119
|
-
lowerBounds,
|
|
120
|
-
saturationRange: [greyest[0], colorful[0]],
|
|
121
|
-
brightnessRange: [colorful[1], greyest[1]],
|
|
122
|
-
};
|
|
123
|
-
};
|
|
124
|
-
defineColor('monochrome', null, [[0, 0], [100, 0]]);
|
|
125
|
-
defineColor('red', [-26, 18], [[20, 100], [30, 92], [40, 89], [50, 85], [60, 78], [70, 70], [80, 60], [90, 55], [100, 50]]);
|
|
126
|
-
defineColor('orange', [18, 46], [[20, 100], [30, 93], [40, 88], [50, 86], [60, 85], [70, 70], [100, 70]]);
|
|
127
|
-
defineColor('yellow', [46, 62], [[25, 100], [40, 94], [50, 89], [60, 86], [70, 84], [80, 82], [90, 80], [100, 75]]);
|
|
128
|
-
defineColor('green', [62, 178], [[30, 100], [40, 90], [50, 85], [60, 81], [70, 74], [80, 64], [90, 50], [100, 40]]);
|
|
129
|
-
defineColor('blue', [178, 257], [[20, 100], [30, 86], [40, 80], [50, 74], [60, 60], [70, 52], [80, 44], [90, 39], [100, 35]]);
|
|
130
|
-
defineColor('purple', [257, 282], [[20, 100], [30, 87], [40, 79], [50, 70], [60, 65], [70, 59], [80, 52], [90, 45], [100, 42]]);
|
|
131
|
-
defineColor('pink', [282, 334], [[20, 100], [30, 90], [40, 86], [60, 84], [80, 80], [90, 75], [100, 73]]);
|
|
132
|
-
return dic;
|
|
133
|
-
}
|
|
134
|
-
function HSVtoHSL(hsv) {
|
|
135
|
-
const s = hsv[1] / 100, v = hsv[2] / 100, k = (2 - s) * v;
|
|
136
|
-
return [hsv[0], 100 * s * v / (k < 1 ? k : 2 - k), 100 * k / 2];
|
|
137
|
-
}
|
|
138
|
-
function inputToSeed(input) {
|
|
139
|
-
if (input == null)
|
|
140
|
-
return 0;
|
|
141
|
-
if (typeof input === 'number')
|
|
142
|
-
return input;
|
|
143
|
-
let i = 0;
|
|
144
|
-
for (let p = 0; p < input.length; p++)
|
|
145
|
-
i = (i * 0x101 + input.charCodeAt(p)) % 0x100000000;
|
|
146
|
-
return i;
|
|
147
|
-
}
|
|
148
|
-
}
|