@versatiles/style 5.2.5 → 5.2.7
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/dist/index.d.ts +274 -14
- package/dist/index.js +3650 -11
- package/dist/index.js.map +1 -0
- package/package.json +8 -7
- package/src/color/abstract.ts +83 -0
- package/src/color/hsl.test.ts +182 -0
- package/src/color/hsl.ts +122 -0
- package/src/color/hsv.test.ts +174 -0
- package/src/color/hsv.ts +100 -0
- package/src/color/index.test.ts +119 -0
- package/src/color/index.ts +38 -0
- package/src/color/random.test.ts +35 -0
- package/src/color/random.ts +165 -0
- package/src/color/rgb.test.ts +227 -0
- package/src/color/rgb.ts +248 -0
- package/src/color/utils.test.ts +86 -0
- package/src/color/utils.ts +13 -0
- package/src/guess_style/guess_style.test.ts +134 -0
- package/src/guess_style/guess_style.ts +166 -0
- package/{dist/guess_style/index.d.ts → src/guess_style/index.ts} +1 -0
- package/src/index.test.ts +77 -0
- package/src/index.ts +18 -0
- package/src/lib/utils.test.ts +197 -0
- package/src/lib/utils.ts +134 -0
- package/{dist/shortbread/index.d.ts → src/shortbread/index.ts} +1 -0
- package/src/shortbread/layers.test.ts +36 -0
- package/src/shortbread/layers.ts +564 -0
- package/src/shortbread/properties.test.ts +44 -0
- package/src/shortbread/properties.ts +142 -0
- package/src/shortbread/template.test.ts +43 -0
- package/src/shortbread/template.ts +343 -0
- package/src/style_builder/decorator.test.ts +67 -0
- package/src/style_builder/decorator.ts +135 -0
- package/src/style_builder/recolor.test.ts +306 -0
- package/src/style_builder/recolor.ts +110 -0
- package/src/style_builder/style_builder.test.ts +103 -0
- package/src/style_builder/style_builder.ts +134 -0
- package/src/style_builder/types.ts +141 -0
- package/src/styles/LICENSE.md +41 -0
- package/src/styles/colorful.ts +1041 -0
- package/src/styles/eclipse.ts +11 -0
- package/{dist/styles/empty.d.ts → src/styles/empty.ts} +7 -3
- package/src/styles/graybeard.ts +11 -0
- package/src/styles/index.ts +33 -0
- package/src/styles/neutrino.ts +429 -0
- package/{dist/types/index.d.ts → src/types/index.ts} +1 -0
- package/{dist/types/maplibre.d.ts → src/types/maplibre.ts} +3 -0
- package/src/types/tilejson.test.ts +94 -0
- package/src/types/tilejson.ts +125 -0
- package/src/types/vector_layer.test.ts +64 -0
- package/src/types/vector_layer.ts +69 -0
- package/dist/color/abstract.d.ts +0 -34
- package/dist/color/abstract.js +0 -53
- package/dist/color/hsl.d.ts +0 -23
- package/dist/color/hsl.js +0 -98
- package/dist/color/hsv.d.ts +0 -20
- package/dist/color/hsv.js +0 -100
- package/dist/color/index.d.ts +0 -6
- package/dist/color/index.js +0 -29
- package/dist/color/random.d.ts +0 -9
- package/dist/color/random.js +0 -134
- package/dist/color/rgb.d.ts +0 -28
- package/dist/color/rgb.js +0 -195
- package/dist/color/utils.d.ts +0 -3
- package/dist/color/utils.js +0 -10
- package/dist/guess_style/guess_style.d.ts +0 -8
- package/dist/guess_style/guess_style.js +0 -147
- package/dist/guess_style/index.js +0 -2
- package/dist/lib/utils.d.ts +0 -6
- package/dist/lib/utils.js +0 -126
- package/dist/shortbread/index.js +0 -3
- package/dist/shortbread/layers.d.ts +0 -5
- package/dist/shortbread/layers.js +0 -521
- package/dist/shortbread/properties.d.ts +0 -7
- package/dist/shortbread/properties.js +0 -125
- package/dist/shortbread/template.d.ts +0 -4
- package/dist/shortbread/template.js +0 -339
- package/dist/style_builder/decorator.d.ts +0 -4
- package/dist/style_builder/decorator.js +0 -127
- package/dist/style_builder/recolor.d.ts +0 -22
- package/dist/style_builder/recolor.js +0 -89
- package/dist/style_builder/style_builder.d.ts +0 -15
- package/dist/style_builder/style_builder.js +0 -106
- package/dist/style_builder/types.d.ts +0 -122
- package/dist/style_builder/types.js +0 -3
- package/dist/styles/colorful.d.ts +0 -11
- package/dist/styles/colorful.js +0 -956
- package/dist/styles/eclipse.d.ts +0 -5
- package/dist/styles/eclipse.js +0 -9
- package/dist/styles/empty.js +0 -8
- package/dist/styles/graybeard.d.ts +0 -5
- package/dist/styles/graybeard.js +0 -9
- package/dist/styles/index.d.ts +0 -11
- package/dist/styles/index.js +0 -20
- package/dist/styles/neutrino.d.ts +0 -11
- package/dist/styles/neutrino.js +0 -401
- package/dist/types/index.js +0 -3
- package/dist/types/maplibre.js +0 -2
- package/dist/types/tilejson.d.ts +0 -32
- package/dist/types/tilejson.js +0 -87
- package/dist/types/vector_layer.d.ts +0 -14
- package/dist/types/vector_layer.js +0 -51
package/dist/color/random.js
DELETED
|
@@ -1,134 +0,0 @@
|
|
|
1
|
-
import { HSV } from './hsv.js';
|
|
2
|
-
import { mod } from './utils.js';
|
|
3
|
-
let colorDictionary = new Map();
|
|
4
|
-
export default function randomColor(options) {
|
|
5
|
-
if (colorDictionary.size === 0)
|
|
6
|
-
colorDictionary = initColorDictionary();
|
|
7
|
-
options ??= {};
|
|
8
|
-
let seed = inputToSeed(options.seed);
|
|
9
|
-
const H = pickHue(options);
|
|
10
|
-
const S = pickSaturation(H, options);
|
|
11
|
-
const V = pickBrightness(H, S, options);
|
|
12
|
-
return new HSV(H, S, V, options.opacity ?? 1);
|
|
13
|
-
function pickHue(options) {
|
|
14
|
-
return mod(randomWithin(getHueRange(options.hue)), 360);
|
|
15
|
-
function getHueRange(hue) {
|
|
16
|
-
if (typeof hue === 'number') {
|
|
17
|
-
hue = mod(hue, 360);
|
|
18
|
-
return [hue, hue];
|
|
19
|
-
}
|
|
20
|
-
if (typeof hue === 'string') {
|
|
21
|
-
const color = colorDictionary.get(hue);
|
|
22
|
-
if (color?.hueRange)
|
|
23
|
-
return color.hueRange;
|
|
24
|
-
}
|
|
25
|
-
return [0, 360];
|
|
26
|
-
}
|
|
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
|
-
let [sMin, sMax] = getColorInfo(hue).saturationRange;
|
|
34
|
-
if (options.saturation === 'strong')
|
|
35
|
-
return sMax;
|
|
36
|
-
switch (options.luminosity) {
|
|
37
|
-
case 'bright':
|
|
38
|
-
sMin = 55;
|
|
39
|
-
break;
|
|
40
|
-
case 'dark':
|
|
41
|
-
sMin = sMax - 10;
|
|
42
|
-
break;
|
|
43
|
-
case 'light':
|
|
44
|
-
sMax = 55;
|
|
45
|
-
break;
|
|
46
|
-
default:
|
|
47
|
-
}
|
|
48
|
-
return randomWithin([sMin, sMax]);
|
|
49
|
-
}
|
|
50
|
-
function pickBrightness(h, s, options) {
|
|
51
|
-
let bMin = getMinimumBrightness(h, s), bMax = 100;
|
|
52
|
-
if (typeof options.luminosity === 'number') {
|
|
53
|
-
bMin = options.luminosity;
|
|
54
|
-
bMax = options.luminosity;
|
|
55
|
-
}
|
|
56
|
-
else {
|
|
57
|
-
switch (options.luminosity) {
|
|
58
|
-
case 'dark':
|
|
59
|
-
bMax = Math.min(100, bMin + 20);
|
|
60
|
-
break;
|
|
61
|
-
case 'light':
|
|
62
|
-
bMin = (bMax + bMin) / 2;
|
|
63
|
-
break;
|
|
64
|
-
case 'random':
|
|
65
|
-
bMin = 0;
|
|
66
|
-
bMax = 100;
|
|
67
|
-
break;
|
|
68
|
-
default:
|
|
69
|
-
}
|
|
70
|
-
}
|
|
71
|
-
return randomWithin([bMin, bMax]);
|
|
72
|
-
function getMinimumBrightness(h, s) {
|
|
73
|
-
const { lowerBounds } = getColorInfo(h);
|
|
74
|
-
for (let i = 0; i < lowerBounds.length - 1; i++) {
|
|
75
|
-
const [s1, v1] = lowerBounds[i];
|
|
76
|
-
const [s2, v2] = lowerBounds[i + 1];
|
|
77
|
-
if (s >= s1 && s <= s2) {
|
|
78
|
-
const m = (v2 - v1) / (s2 - s1), b = v1 - m * s1;
|
|
79
|
-
return m * s + b;
|
|
80
|
-
}
|
|
81
|
-
}
|
|
82
|
-
return 0;
|
|
83
|
-
}
|
|
84
|
-
}
|
|
85
|
-
function randomWithin(range) {
|
|
86
|
-
//Seeded random algorithm from http://indiegamr.com/generate-repeatable-random-numbers-in-js/
|
|
87
|
-
seed = (seed * 9301 + 49297) % 233280;
|
|
88
|
-
return Math.floor(range[0] + seed / 233280.0 * (range[1] - range[0]));
|
|
89
|
-
}
|
|
90
|
-
}
|
|
91
|
-
function inputToSeed(input) {
|
|
92
|
-
if (input == null)
|
|
93
|
-
return 0;
|
|
94
|
-
if (typeof input === 'number')
|
|
95
|
-
return input;
|
|
96
|
-
let i = 0;
|
|
97
|
-
for (let p = 0; p < input.length; p++)
|
|
98
|
-
i = (i * 0x101 + input.charCodeAt(p)) % 0x100000000;
|
|
99
|
-
return i;
|
|
100
|
-
}
|
|
101
|
-
function initColorDictionary() {
|
|
102
|
-
const dict = new Map();
|
|
103
|
-
const defineColor = (name, hueRange, lowerBounds) => {
|
|
104
|
-
const [greyest] = lowerBounds;
|
|
105
|
-
const colorful = lowerBounds[lowerBounds.length - 1];
|
|
106
|
-
dict.set(name, {
|
|
107
|
-
hueRange,
|
|
108
|
-
lowerBounds,
|
|
109
|
-
saturationRange: [greyest[0], colorful[0]],
|
|
110
|
-
brightnessRange: [colorful[1], greyest[1]],
|
|
111
|
-
});
|
|
112
|
-
};
|
|
113
|
-
defineColor('monochrome', null, [[0, 0], [100, 0]]);
|
|
114
|
-
defineColor('red', [-26, 18], [[20, 100], [30, 92], [40, 89], [50, 85], [60, 78], [70, 70], [80, 60], [90, 55], [100, 50]]);
|
|
115
|
-
defineColor('orange', [18, 46], [[20, 100], [30, 93], [40, 88], [50, 86], [60, 85], [70, 70], [100, 70]]);
|
|
116
|
-
defineColor('yellow', [46, 62], [[25, 100], [40, 94], [50, 89], [60, 86], [70, 84], [80, 82], [90, 80], [100, 75]]);
|
|
117
|
-
defineColor('green', [62, 178], [[30, 100], [40, 90], [50, 85], [60, 81], [70, 74], [80, 64], [90, 50], [100, 40]]);
|
|
118
|
-
defineColor('blue', [178, 257], [[20, 100], [30, 86], [40, 80], [50, 74], [60, 60], [70, 52], [80, 44], [90, 39], [100, 35]]);
|
|
119
|
-
defineColor('purple', [257, 282], [[20, 100], [30, 87], [40, 79], [50, 70], [60, 65], [70, 59], [80, 52], [90, 45], [100, 42]]);
|
|
120
|
-
defineColor('pink', [282, 334], [[20, 100], [30, 90], [40, 86], [60, 84], [80, 80], [90, 75], [100, 73]]);
|
|
121
|
-
return dict;
|
|
122
|
-
}
|
|
123
|
-
function getColorInfo(hue) {
|
|
124
|
-
hue = mod(hue, 360);
|
|
125
|
-
if (hue >= 334)
|
|
126
|
-
hue -= 360;
|
|
127
|
-
for (const color of colorDictionary.values()) {
|
|
128
|
-
if (color.hueRange && hue >= color.hueRange[0] && hue <= color.hueRange[1]) {
|
|
129
|
-
return color;
|
|
130
|
-
}
|
|
131
|
-
}
|
|
132
|
-
throw Error('Color hue value not found');
|
|
133
|
-
}
|
|
134
|
-
//# sourceMappingURL=random.js.map
|
package/dist/color/rgb.d.ts
DELETED
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
import { HSL } from './hsl.js';
|
|
2
|
-
import { HSV } from './hsv.js';
|
|
3
|
-
import { Color } from './abstract.js';
|
|
4
|
-
export declare class RGB extends Color {
|
|
5
|
-
readonly r: number;
|
|
6
|
-
readonly g: number;
|
|
7
|
-
readonly b: number;
|
|
8
|
-
readonly a: number;
|
|
9
|
-
constructor(r: number, g: number, b: number, a?: number);
|
|
10
|
-
clone(): RGB;
|
|
11
|
-
asArray(): [number, number, number, number];
|
|
12
|
-
round(): RGB;
|
|
13
|
-
asString(): string;
|
|
14
|
-
asHex(): string;
|
|
15
|
-
asHSL(): HSL;
|
|
16
|
-
asHSV(): HSV;
|
|
17
|
-
asRGB(): RGB;
|
|
18
|
-
toRGB(): RGB;
|
|
19
|
-
static parse(input: string | Color): RGB;
|
|
20
|
-
gamma(value: number): RGB;
|
|
21
|
-
invert(): RGB;
|
|
22
|
-
contrast(value: number): RGB;
|
|
23
|
-
brightness(value: number): RGB;
|
|
24
|
-
tint(value: number, tintColor: Color): RGB;
|
|
25
|
-
lighten(ratio: number): RGB;
|
|
26
|
-
darken(ratio: number): RGB;
|
|
27
|
-
fade(value: number): RGB;
|
|
28
|
-
}
|
package/dist/color/rgb.js
DELETED
|
@@ -1,195 +0,0 @@
|
|
|
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';
|
|
5
|
-
export class RGB extends Color {
|
|
6
|
-
r = 0; // between 0 and 255
|
|
7
|
-
g = 0; // between 0 and 255
|
|
8
|
-
b = 0; // between 0 and 255
|
|
9
|
-
a = 1; // between 0 and 1
|
|
10
|
-
constructor(r, g, b, a = 1) {
|
|
11
|
-
super();
|
|
12
|
-
this.r = clamp(r, 0, 255);
|
|
13
|
-
this.g = clamp(g, 0, 255);
|
|
14
|
-
this.b = clamp(b, 0, 255);
|
|
15
|
-
this.a = clamp(a, 0, 1);
|
|
16
|
-
}
|
|
17
|
-
clone() {
|
|
18
|
-
return new RGB(this.r, this.g, this.b, this.a);
|
|
19
|
-
}
|
|
20
|
-
asArray() {
|
|
21
|
-
return [this.r, this.g, this.b, this.a];
|
|
22
|
-
}
|
|
23
|
-
round() {
|
|
24
|
-
return new RGB(Math.round(this.r), Math.round(this.g), Math.round(this.b), Math.round(this.a * 1000) / 1000);
|
|
25
|
-
}
|
|
26
|
-
asString() {
|
|
27
|
-
if (this.a === 1) {
|
|
28
|
-
return `rgb(${this.r.toFixed(0)},${this.g.toFixed(0)},${this.b.toFixed(0)})`;
|
|
29
|
-
}
|
|
30
|
-
else {
|
|
31
|
-
return `rgba(${this.r.toFixed(0)},${this.g.toFixed(0)},${this.b.toFixed(0)},${formatFloat(this.a, 3)})`;
|
|
32
|
-
}
|
|
33
|
-
}
|
|
34
|
-
asHex() {
|
|
35
|
-
const r = Math.round(this.r).toString(16).padStart(2, '0');
|
|
36
|
-
const g = Math.round(this.g).toString(16).padStart(2, '0');
|
|
37
|
-
const b = Math.round(this.b).toString(16).padStart(2, '0');
|
|
38
|
-
if (this.a === 1) {
|
|
39
|
-
return `#${r}${g}${b}`.toUpperCase();
|
|
40
|
-
}
|
|
41
|
-
else {
|
|
42
|
-
const a = Math.round(this.a * 255).toString(16).padStart(2, '0');
|
|
43
|
-
return `#${r}${g}${b}${a}`.toUpperCase();
|
|
44
|
-
}
|
|
45
|
-
}
|
|
46
|
-
asHSL() {
|
|
47
|
-
const r = this.r / 255;
|
|
48
|
-
const g = this.g / 255;
|
|
49
|
-
const b = this.b / 255;
|
|
50
|
-
const min = Math.min(r, g, b);
|
|
51
|
-
const max = Math.max(r, g, b);
|
|
52
|
-
const delta = max - min;
|
|
53
|
-
let h = 0;
|
|
54
|
-
let s = 0;
|
|
55
|
-
if (max === min)
|
|
56
|
-
h = 0;
|
|
57
|
-
else if (r === max)
|
|
58
|
-
h = (g - b) / delta;
|
|
59
|
-
else if (g === max)
|
|
60
|
-
h = 2 + (b - r) / delta;
|
|
61
|
-
else if (b === max)
|
|
62
|
-
h = 4 + (r - g) / delta;
|
|
63
|
-
h = Math.min(h * 60, 360);
|
|
64
|
-
if (h < 0)
|
|
65
|
-
h += 360;
|
|
66
|
-
const l = (min + max) / 2;
|
|
67
|
-
if (max === min)
|
|
68
|
-
s = 0;
|
|
69
|
-
else if (l <= 0.5)
|
|
70
|
-
s = delta / (max + min);
|
|
71
|
-
else
|
|
72
|
-
s = delta / (2 - max - min);
|
|
73
|
-
return new HSL(h, s * 100, l * 100, this.a);
|
|
74
|
-
}
|
|
75
|
-
;
|
|
76
|
-
asHSV() {
|
|
77
|
-
const r = this.r / 255;
|
|
78
|
-
const g = this.g / 255;
|
|
79
|
-
const b = this.b / 255;
|
|
80
|
-
const v = Math.max(r, g, b);
|
|
81
|
-
const diff = v - Math.min(r, g, b);
|
|
82
|
-
let h = 0;
|
|
83
|
-
let s = 0;
|
|
84
|
-
if (diff !== 0) {
|
|
85
|
-
function diffc(c) {
|
|
86
|
-
return (v - c) / 6 / diff + 1 / 2;
|
|
87
|
-
}
|
|
88
|
-
;
|
|
89
|
-
s = diff / v;
|
|
90
|
-
const rdif = diffc(r);
|
|
91
|
-
const gdif = diffc(g);
|
|
92
|
-
const bdif = diffc(b);
|
|
93
|
-
if (r === v)
|
|
94
|
-
h = bdif - gdif;
|
|
95
|
-
else if (g === v)
|
|
96
|
-
h = (1 / 3) + rdif - bdif;
|
|
97
|
-
else if (b === v)
|
|
98
|
-
h = (2 / 3) + gdif - rdif;
|
|
99
|
-
if (h < 0)
|
|
100
|
-
h += 1;
|
|
101
|
-
else if (h > 1)
|
|
102
|
-
h -= 1;
|
|
103
|
-
}
|
|
104
|
-
return new HSV(h * 360, s * 100, v * 100, this.a);
|
|
105
|
-
}
|
|
106
|
-
asRGB() {
|
|
107
|
-
return this.clone();
|
|
108
|
-
}
|
|
109
|
-
toRGB() {
|
|
110
|
-
return this;
|
|
111
|
-
}
|
|
112
|
-
static parse(input) {
|
|
113
|
-
if (input instanceof Color)
|
|
114
|
-
return input.asRGB();
|
|
115
|
-
input = input.toLowerCase().replaceAll(/[^0-9a-z.#,()]/g, '');
|
|
116
|
-
let match;
|
|
117
|
-
match = input.match(/^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})?$/);
|
|
118
|
-
if (match) {
|
|
119
|
-
const r = parseInt(match[1], 16);
|
|
120
|
-
const g = parseInt(match[2], 16);
|
|
121
|
-
const b = parseInt(match[3], 16);
|
|
122
|
-
const a = match[4] ? parseInt(match[4], 16) / 255 : 1;
|
|
123
|
-
return new RGB(r, g, b, a);
|
|
124
|
-
}
|
|
125
|
-
match = input.match(/^#([0-9a-f])([0-9a-f])([0-9a-f])([0-9a-f])?$/);
|
|
126
|
-
if (match) {
|
|
127
|
-
const r = parseInt(match[1], 16) * 17;
|
|
128
|
-
const g = parseInt(match[2], 16) * 17;
|
|
129
|
-
const b = parseInt(match[3], 16) * 17;
|
|
130
|
-
const a = match[4] ? parseInt(match[4], 16) / 15 : 1;
|
|
131
|
-
return new RGB(r, g, b, a);
|
|
132
|
-
}
|
|
133
|
-
input = input.trim().toLowerCase().replaceAll(' ', '');
|
|
134
|
-
match = input.match(/^rgb\((\d+),(\d+),(\d+)\)$/);
|
|
135
|
-
if (match) {
|
|
136
|
-
const r = parseInt(match[1]);
|
|
137
|
-
const g = parseInt(match[2]);
|
|
138
|
-
const b = parseInt(match[3]);
|
|
139
|
-
return new RGB(r, g, b);
|
|
140
|
-
}
|
|
141
|
-
match = input.match(/^rgba\((\d+),(\d+),(\d+),([.\d]+)\)$/);
|
|
142
|
-
if (match) {
|
|
143
|
-
const r = parseInt(match[1]);
|
|
144
|
-
const g = parseInt(match[2]);
|
|
145
|
-
const b = parseInt(match[3]);
|
|
146
|
-
const a = parseFloat(match[4]);
|
|
147
|
-
return new RGB(r, g, b, a);
|
|
148
|
-
}
|
|
149
|
-
throw new Error(`Invalid RGB color string: "${input}"`);
|
|
150
|
-
}
|
|
151
|
-
gamma(value) {
|
|
152
|
-
if (value < 1e-3)
|
|
153
|
-
value = 1e-3;
|
|
154
|
-
if (value > 1e3)
|
|
155
|
-
value = 1e3;
|
|
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);
|
|
157
|
-
}
|
|
158
|
-
invert() {
|
|
159
|
-
return new RGB(255 - this.r, 255 - this.g, 255 - this.b, this.a);
|
|
160
|
-
}
|
|
161
|
-
contrast(value) {
|
|
162
|
-
if (value < 0)
|
|
163
|
-
value = 0;
|
|
164
|
-
if (value > 1e6)
|
|
165
|
-
value = 1e6;
|
|
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);
|
|
167
|
-
}
|
|
168
|
-
brightness(value) {
|
|
169
|
-
if (value < -1)
|
|
170
|
-
value = -1;
|
|
171
|
-
if (value > 1)
|
|
172
|
-
value = 1;
|
|
173
|
-
const a = 1 - Math.abs(value);
|
|
174
|
-
const b = (value < 0) ? 0 : 255 * value;
|
|
175
|
-
return new RGB(this.r * a + b, this.g * a + b, this.b * a + b, this.a);
|
|
176
|
-
}
|
|
177
|
-
tint(value, tintColor) {
|
|
178
|
-
if (value < 0)
|
|
179
|
-
value = 0;
|
|
180
|
-
if (value > 1)
|
|
181
|
-
value = 1;
|
|
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);
|
|
184
|
-
}
|
|
185
|
-
lighten(ratio) {
|
|
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);
|
|
187
|
-
}
|
|
188
|
-
darken(ratio) {
|
|
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);
|
|
190
|
-
}
|
|
191
|
-
fade(value) {
|
|
192
|
-
return new RGB(this.r, this.g, this.b, this.a * (1 - value));
|
|
193
|
-
}
|
|
194
|
-
}
|
|
195
|
-
//# sourceMappingURL=rgb.js.map
|
package/dist/color/utils.d.ts
DELETED
package/dist/color/utils.js
DELETED
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
export function clamp(num, min, max) {
|
|
2
|
-
return Math.min(Math.max(min, num), max);
|
|
3
|
-
}
|
|
4
|
-
export function mod(num, max) {
|
|
5
|
-
return ((num % max) + max) % max;
|
|
6
|
-
}
|
|
7
|
-
export function formatFloat(num, precision) {
|
|
8
|
-
return num.toFixed(precision).replace(/0+$/, '').replace(/\.$/, '');
|
|
9
|
-
}
|
|
10
|
-
//# sourceMappingURL=utils.js.map
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import type { TileJSONSpecification } from '../types/index.js';
|
|
2
|
-
import type { SpriteSpecification, StyleSpecification } from '@maplibre/maplibre-gl-style-spec';
|
|
3
|
-
export interface GuessStyleOptions {
|
|
4
|
-
baseUrl?: string;
|
|
5
|
-
glyphs?: string;
|
|
6
|
-
sprite?: SpriteSpecification;
|
|
7
|
-
}
|
|
8
|
-
export declare function guessStyle(tileJSON: TileJSONSpecification, options?: GuessStyleOptions): StyleSpecification;
|
|
@@ -1,147 +0,0 @@
|
|
|
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';
|
|
6
|
-
export function guessStyle(tileJSON, options) {
|
|
7
|
-
tileJSON = deepClone(tileJSON);
|
|
8
|
-
if (options && options.baseUrl) {
|
|
9
|
-
const { baseUrl } = options;
|
|
10
|
-
tileJSON.tiles = tileJSON.tiles.map(url => resolveUrl(baseUrl, url));
|
|
11
|
-
}
|
|
12
|
-
if (!isTileJSONSpecification(tileJSON))
|
|
13
|
-
throw Error('Invalid TileJSON specification');
|
|
14
|
-
let style;
|
|
15
|
-
if (isRasterTileJSONSpecification(tileJSON)) {
|
|
16
|
-
style = getRasterStyle(tileJSON);
|
|
17
|
-
}
|
|
18
|
-
else {
|
|
19
|
-
if (isShortbread(tileJSON)) {
|
|
20
|
-
style = getShortbreadStyle(tileJSON, {
|
|
21
|
-
baseUrl: options?.baseUrl,
|
|
22
|
-
glyphs: options?.glyphs,
|
|
23
|
-
sprite: options?.sprite,
|
|
24
|
-
});
|
|
25
|
-
}
|
|
26
|
-
else {
|
|
27
|
-
style = getInspectorStyle(tileJSON);
|
|
28
|
-
}
|
|
29
|
-
}
|
|
30
|
-
return style;
|
|
31
|
-
}
|
|
32
|
-
function isShortbread(spec) {
|
|
33
|
-
if (typeof spec !== 'object')
|
|
34
|
-
return false;
|
|
35
|
-
if (!('vector_layers' in spec))
|
|
36
|
-
return false;
|
|
37
|
-
if (!Array.isArray(spec.vector_layers))
|
|
38
|
-
return false;
|
|
39
|
-
const layerIds = new Set(spec.vector_layers.map(l => String(l.id)));
|
|
40
|
-
const shortbreadIds = ['place_labels', 'boundaries', 'boundary_labels', 'addresses', 'water_lines', 'water_lines_labels', 'dam_lines', 'dam_polygons', 'pier_lines', 'pier_polygons', 'bridges', 'street_polygons', 'streets_polygons_labels', 'ferries', 'streets', 'street_labels', 'street_labels_points', 'aerialways', 'public_transport', 'buildings', 'water_polygons', 'ocean', 'water_polygons_labels', 'land', 'sites', 'pois'];
|
|
41
|
-
return shortbreadIds.every(id => layerIds.has(id));
|
|
42
|
-
}
|
|
43
|
-
function getShortbreadStyle(spec, builderOption) {
|
|
44
|
-
return colorful({
|
|
45
|
-
tiles: spec.tiles,
|
|
46
|
-
baseUrl: builderOption.baseUrl,
|
|
47
|
-
glyphs: builderOption.glyphs,
|
|
48
|
-
sprite: builderOption.sprite,
|
|
49
|
-
});
|
|
50
|
-
}
|
|
51
|
-
function getInspectorStyle(spec) {
|
|
52
|
-
const sourceName = 'vectorSource';
|
|
53
|
-
const layers = { background: [], circle: [], line: [], fill: [] };
|
|
54
|
-
layers.background.push({ 'id': 'background', 'type': 'background', 'paint': { 'background-color': '#fff' } });
|
|
55
|
-
spec.vector_layers.forEach((vector_layer) => {
|
|
56
|
-
let luminosity = 'bright', saturation, hue;
|
|
57
|
-
if (/water|ocean|lake|sea|river/.test(vector_layer.id))
|
|
58
|
-
hue = 'blue';
|
|
59
|
-
if (/state|country|place/.test(vector_layer.id))
|
|
60
|
-
hue = 'pink';
|
|
61
|
-
if (/road|highway|transport|streets/.test(vector_layer.id))
|
|
62
|
-
hue = 'orange';
|
|
63
|
-
if (/contour|building/.test(vector_layer.id))
|
|
64
|
-
hue = 'monochrome';
|
|
65
|
-
if (vector_layer.id.includes('building'))
|
|
66
|
-
luminosity = 'dark';
|
|
67
|
-
if (/contour|landuse/.test(vector_layer.id))
|
|
68
|
-
hue = 'yellow';
|
|
69
|
-
if (/wood|forest|park|landcover|land/.test(vector_layer.id))
|
|
70
|
-
hue = 'green';
|
|
71
|
-
if (vector_layer.id.includes('point')) {
|
|
72
|
-
saturation = 'strong';
|
|
73
|
-
luminosity = 'light';
|
|
74
|
-
}
|
|
75
|
-
const color = Color.random({
|
|
76
|
-
hue,
|
|
77
|
-
luminosity,
|
|
78
|
-
saturation,
|
|
79
|
-
seed: vector_layer.id,
|
|
80
|
-
opacity: 0.6,
|
|
81
|
-
}).asString();
|
|
82
|
-
layers.circle.push({
|
|
83
|
-
id: `${sourceName}-${vector_layer.id}-circle`,
|
|
84
|
-
'source-layer': vector_layer.id,
|
|
85
|
-
source: sourceName,
|
|
86
|
-
type: 'circle',
|
|
87
|
-
filter: ['==', '$type', 'Point'],
|
|
88
|
-
paint: { 'circle-color': color, 'circle-radius': 2 },
|
|
89
|
-
});
|
|
90
|
-
layers.line.push({
|
|
91
|
-
id: `${sourceName}-${vector_layer.id}-line`,
|
|
92
|
-
'source-layer': vector_layer.id,
|
|
93
|
-
source: sourceName,
|
|
94
|
-
type: 'line',
|
|
95
|
-
filter: ['==', '$type', 'LineString'],
|
|
96
|
-
layout: { 'line-join': 'round', 'line-cap': 'round' },
|
|
97
|
-
paint: { 'line-color': color },
|
|
98
|
-
});
|
|
99
|
-
layers.fill.push({
|
|
100
|
-
id: `${sourceName}-${vector_layer.id}-fill`,
|
|
101
|
-
'source-layer': vector_layer.id,
|
|
102
|
-
source: sourceName,
|
|
103
|
-
type: 'fill',
|
|
104
|
-
filter: ['==', '$type', 'Polygon'],
|
|
105
|
-
paint: { 'fill-color': color, 'fill-opacity': 0.3, 'fill-antialias': true, 'fill-outline-color': color },
|
|
106
|
-
});
|
|
107
|
-
});
|
|
108
|
-
return {
|
|
109
|
-
version: 8,
|
|
110
|
-
sources: {
|
|
111
|
-
[sourceName]: sourceFromSpec(spec, 'vector'),
|
|
112
|
-
},
|
|
113
|
-
layers: [
|
|
114
|
-
...layers.background,
|
|
115
|
-
...layers.fill,
|
|
116
|
-
...layers.line,
|
|
117
|
-
...layers.circle,
|
|
118
|
-
],
|
|
119
|
-
};
|
|
120
|
-
}
|
|
121
|
-
function getRasterStyle(spec) {
|
|
122
|
-
const sourceName = 'rasterSource';
|
|
123
|
-
return {
|
|
124
|
-
version: 8,
|
|
125
|
-
sources: {
|
|
126
|
-
[sourceName]: sourceFromSpec(spec, 'raster'),
|
|
127
|
-
},
|
|
128
|
-
layers: [{
|
|
129
|
-
id: 'raster',
|
|
130
|
-
type: 'raster',
|
|
131
|
-
source: sourceName,
|
|
132
|
-
}],
|
|
133
|
-
};
|
|
134
|
-
}
|
|
135
|
-
function sourceFromSpec(spec, type) {
|
|
136
|
-
const source = { tiles: spec.tiles, type };
|
|
137
|
-
if (spec.minzoom != null)
|
|
138
|
-
source.minzoom = spec.minzoom;
|
|
139
|
-
if (spec.maxzoom != null)
|
|
140
|
-
source.maxzoom = spec.maxzoom;
|
|
141
|
-
if (spec.attribution != null)
|
|
142
|
-
source.attribution = spec.attribution;
|
|
143
|
-
if (spec.scheme != null)
|
|
144
|
-
source.scheme = spec.scheme;
|
|
145
|
-
return source;
|
|
146
|
-
}
|
|
147
|
-
//# sourceMappingURL=guess_style.js.map
|
package/dist/lib/utils.d.ts
DELETED
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
export declare function deepClone<T>(obj: T): T;
|
|
2
|
-
export declare function isSimpleObject(item: unknown): item is object;
|
|
3
|
-
export declare function isBasicType(item: unknown): item is boolean | number | string | undefined;
|
|
4
|
-
export declare function deepMerge<T extends object>(source0: T, ...sources: Partial<T>[]): T;
|
|
5
|
-
export declare function resolveUrl(base: string, url: string): string;
|
|
6
|
-
export declare function basename(url: string): string;
|
package/dist/lib/utils.js
DELETED
|
@@ -1,126 +0,0 @@
|
|
|
1
|
-
import { Color } from '../color/index.js';
|
|
2
|
-
// Utility function to deep clone an object
|
|
3
|
-
export function deepClone(obj) {
|
|
4
|
-
const type = typeof obj;
|
|
5
|
-
if (type !== 'object') {
|
|
6
|
-
switch (type) {
|
|
7
|
-
case 'boolean':
|
|
8
|
-
case 'number':
|
|
9
|
-
case 'string':
|
|
10
|
-
case 'undefined':
|
|
11
|
-
return obj;
|
|
12
|
-
default: throw new Error(`Not implemented yet: "${type}" case`);
|
|
13
|
-
}
|
|
14
|
-
}
|
|
15
|
-
if (isSimpleObject(obj)) {
|
|
16
|
-
// @ts-expect-error: Too complicated to handle
|
|
17
|
-
return Object.fromEntries(Object.entries(obj).map(([key, value]) => [key, deepClone(value)]));
|
|
18
|
-
}
|
|
19
|
-
if (obj instanceof Array) {
|
|
20
|
-
// @ts-expect-error: Too complicated to handle
|
|
21
|
-
return obj.map((e) => deepClone(e));
|
|
22
|
-
}
|
|
23
|
-
if (obj instanceof Color) {
|
|
24
|
-
return obj.clone();
|
|
25
|
-
}
|
|
26
|
-
if (obj == null)
|
|
27
|
-
return obj;
|
|
28
|
-
console.log('obj', obj);
|
|
29
|
-
console.log('obj.prototype', Object.getPrototypeOf(obj));
|
|
30
|
-
throw Error();
|
|
31
|
-
}
|
|
32
|
-
export function isSimpleObject(item) {
|
|
33
|
-
if (item === null)
|
|
34
|
-
return false;
|
|
35
|
-
if (typeof item !== 'object')
|
|
36
|
-
return false;
|
|
37
|
-
if (Array.isArray(item))
|
|
38
|
-
return false;
|
|
39
|
-
const prototypeKeyCount = Object.keys(Object.getPrototypeOf(item)).length;
|
|
40
|
-
if (prototypeKeyCount !== 0)
|
|
41
|
-
return false;
|
|
42
|
-
if (item.constructor.name !== 'Object')
|
|
43
|
-
return false;
|
|
44
|
-
return true;
|
|
45
|
-
}
|
|
46
|
-
export function isBasicType(item) {
|
|
47
|
-
switch (typeof item) {
|
|
48
|
-
case 'boolean':
|
|
49
|
-
case 'number':
|
|
50
|
-
case 'string':
|
|
51
|
-
case 'undefined':
|
|
52
|
-
return true;
|
|
53
|
-
case 'object':
|
|
54
|
-
return false;
|
|
55
|
-
default:
|
|
56
|
-
throw Error('unknown type: ' + typeof item);
|
|
57
|
-
}
|
|
58
|
-
}
|
|
59
|
-
export function deepMerge(source0, ...sources) {
|
|
60
|
-
const target = deepClone(source0);
|
|
61
|
-
for (const source of sources) {
|
|
62
|
-
if (typeof source !== 'object')
|
|
63
|
-
continue;
|
|
64
|
-
for (const key in source) {
|
|
65
|
-
if (!(key in source))
|
|
66
|
-
continue;
|
|
67
|
-
const sourceValue = source[key];
|
|
68
|
-
// *********
|
|
69
|
-
// overwrite
|
|
70
|
-
// *********
|
|
71
|
-
switch (typeof sourceValue) {
|
|
72
|
-
case 'number':
|
|
73
|
-
case 'string':
|
|
74
|
-
case 'boolean':
|
|
75
|
-
target[key] = sourceValue;
|
|
76
|
-
continue;
|
|
77
|
-
default:
|
|
78
|
-
}
|
|
79
|
-
if (isBasicType(target[key])) {
|
|
80
|
-
target[key] = deepClone(sourceValue);
|
|
81
|
-
continue;
|
|
82
|
-
}
|
|
83
|
-
if (sourceValue instanceof Color) {
|
|
84
|
-
// @ts-expect-error: Too complicated to handle
|
|
85
|
-
target[key] = sourceValue.clone();
|
|
86
|
-
continue;
|
|
87
|
-
}
|
|
88
|
-
if (isSimpleObject(target[key]) && isSimpleObject(sourceValue)) {
|
|
89
|
-
target[key] = deepMerge(target[key], sourceValue);
|
|
90
|
-
continue;
|
|
91
|
-
}
|
|
92
|
-
// *********
|
|
93
|
-
// merge
|
|
94
|
-
// *********
|
|
95
|
-
if (isSimpleObject(target[key]) && isSimpleObject(sourceValue)) {
|
|
96
|
-
target[key] = deepMerge(target[key], sourceValue);
|
|
97
|
-
continue;
|
|
98
|
-
}
|
|
99
|
-
console.log('target[key]:', target[key]);
|
|
100
|
-
console.log('source[key]:', source[key]);
|
|
101
|
-
throw Error('unpredicted case');
|
|
102
|
-
}
|
|
103
|
-
}
|
|
104
|
-
return target;
|
|
105
|
-
}
|
|
106
|
-
export function resolveUrl(base, url) {
|
|
107
|
-
if (!base)
|
|
108
|
-
return url;
|
|
109
|
-
url = new URL(url, base).href;
|
|
110
|
-
url = url.replace(/%7B/gi, '{');
|
|
111
|
-
url = url.replace(/%7D/gi, '}');
|
|
112
|
-
return url;
|
|
113
|
-
}
|
|
114
|
-
export function basename(url) {
|
|
115
|
-
if (!url)
|
|
116
|
-
return '';
|
|
117
|
-
try {
|
|
118
|
-
url = new URL(url, 'http://example.org').pathname;
|
|
119
|
-
}
|
|
120
|
-
catch (_) {
|
|
121
|
-
// ignore
|
|
122
|
-
}
|
|
123
|
-
url = url.replace(/\/+$/, '');
|
|
124
|
-
return url.split('/').pop() ?? '';
|
|
125
|
-
}
|
|
126
|
-
//# sourceMappingURL=utils.js.map
|
package/dist/shortbread/index.js
DELETED