@versatiles/style 5.2.0 → 5.2.1
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/color/abstract.d.ts +3 -2
- package/dist/color/hsl.d.ts +2 -1
- package/dist/color/hsl.js +7 -0
- package/dist/color/hsv.d.ts +2 -1
- package/dist/color/hsv.js +7 -0
- package/dist/color/index.d.ts +4 -1
- package/dist/color/index.js +0 -1
- package/dist/color/random.js +18 -12
- package/dist/color/rgb.d.ts +2 -1
- package/dist/color/rgb.js +7 -0
- package/dist/guess_style/guess_style.d.ts +8 -5
- package/dist/guess_style/guess_style.js +39 -104
- package/dist/guess_style/index.d.ts +2 -2
- package/dist/guess_style/index.js +1 -1
- package/dist/index.d.ts +9 -4
- package/dist/index.js +3 -3
- package/dist/lib/utils.js +1 -1
- package/dist/shortbread/template.d.ts +4 -2
- package/dist/shortbread/template.js +308 -309
- package/dist/style_builder/decorator.js +1 -1
- package/dist/style_builder/recolor.d.ts +1 -1
- package/dist/style_builder/recolor.js +1 -1
- package/dist/style_builder/style_builder.d.ts +4 -4
- package/dist/style_builder/style_builder.js +2 -2
- package/dist/style_builder/types.d.ts +4 -6
- package/dist/styles/colorful.d.ts +1 -1
- package/dist/styles/colorful.js +1 -1
- package/dist/styles/empty.d.ts +1 -1
- package/dist/styles/empty.js +1 -1
- package/dist/styles/index.d.ts +3 -5
- package/dist/styles/neutrino.d.ts +1 -1
- package/dist/styles/neutrino.js +1 -1
- package/dist/types/index.d.ts +2 -2
- package/dist/types/maplibre.d.ts +2 -16
- package/dist/types/tilejson.d.ts +5 -10
- package/dist/types/tilejson.js +21 -38
- package/package.json +1 -2
- package/LICENSE +0 -21
- package/dist/browser.d.ts +0 -6
- package/dist/browser.js +0 -4
- package/dist/guess_style/types.d.ts +0 -23
- package/dist/guess_style/types.js +0 -1
package/dist/color/abstract.d.ts
CHANGED
|
@@ -8,9 +8,10 @@ export declare abstract class Color {
|
|
|
8
8
|
static HSV: typeof HSV;
|
|
9
9
|
static RGB: typeof RGB;
|
|
10
10
|
static random: (options?: RandomColorOptions) => HSV;
|
|
11
|
-
abstract clone():
|
|
11
|
+
abstract clone(): Color;
|
|
12
12
|
asHex(): string;
|
|
13
13
|
abstract asString(): string;
|
|
14
|
+
abstract round(): Color;
|
|
14
15
|
abstract asArray(): number[];
|
|
15
16
|
abstract asHSL(): HSL;
|
|
16
17
|
abstract asHSV(): HSV;
|
|
@@ -28,5 +29,5 @@ export declare abstract class Color {
|
|
|
28
29
|
lighten(value: number): RGB;
|
|
29
30
|
darken(value: number): RGB;
|
|
30
31
|
tint(value: number, tintColor: Color): RGB;
|
|
31
|
-
abstract fade(value: number):
|
|
32
|
+
abstract fade(value: number): Color;
|
|
32
33
|
}
|
package/dist/color/hsl.d.ts
CHANGED
|
@@ -7,7 +7,8 @@ export declare class HSL extends Color {
|
|
|
7
7
|
l: number;
|
|
8
8
|
a: number;
|
|
9
9
|
constructor(h: number, s: number, l: number, a?: number);
|
|
10
|
-
asArray(): number
|
|
10
|
+
asArray(): [number, number, number, number];
|
|
11
|
+
round(): HSL;
|
|
11
12
|
clone(): HSL;
|
|
12
13
|
asString(): string;
|
|
13
14
|
asHSL(): HSL;
|
package/dist/color/hsl.js
CHANGED
|
@@ -17,6 +17,13 @@ export class HSL extends Color {
|
|
|
17
17
|
asArray() {
|
|
18
18
|
return [this.h, this.s, this.l, this.a];
|
|
19
19
|
}
|
|
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;
|
|
26
|
+
}
|
|
20
27
|
clone() {
|
|
21
28
|
return new HSL(this.h, this.s, this.l, this.a);
|
|
22
29
|
}
|
package/dist/color/hsv.d.ts
CHANGED
|
@@ -7,7 +7,8 @@ export declare class HSV extends Color {
|
|
|
7
7
|
v: number;
|
|
8
8
|
a: number;
|
|
9
9
|
constructor(h: number, s: number, v: number, a?: number);
|
|
10
|
-
asArray(): number
|
|
10
|
+
asArray(): [number, number, number, number];
|
|
11
|
+
round(): HSV;
|
|
11
12
|
asString(): string;
|
|
12
13
|
clone(): HSV;
|
|
13
14
|
asHSL(): HSL;
|
package/dist/color/hsv.js
CHANGED
|
@@ -17,6 +17,13 @@ export class HSV extends Color {
|
|
|
17
17
|
asArray() {
|
|
18
18
|
return [this.h, this.s, this.v, this.a];
|
|
19
19
|
}
|
|
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;
|
|
26
|
+
}
|
|
20
27
|
asString() {
|
|
21
28
|
return this.asHSL().asString();
|
|
22
29
|
}
|
package/dist/color/index.d.ts
CHANGED
package/dist/color/index.js
CHANGED
package/dist/color/random.js
CHANGED
|
@@ -49,18 +49,24 @@ export default function randomColor(options) {
|
|
|
49
49
|
}
|
|
50
50
|
function pickBrightness(h, s, options) {
|
|
51
51
|
let bMin = getMinimumBrightness(h, s), bMax = 100;
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
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
|
+
}
|
|
64
70
|
}
|
|
65
71
|
return randomWithin([bMin, bMax]);
|
|
66
72
|
function getMinimumBrightness(h, s) {
|
package/dist/color/rgb.d.ts
CHANGED
|
@@ -8,7 +8,8 @@ export declare class RGB extends Color {
|
|
|
8
8
|
a: number;
|
|
9
9
|
constructor(r: number, g: number, b: number, a?: number);
|
|
10
10
|
clone(): RGB;
|
|
11
|
-
asArray(): number
|
|
11
|
+
asArray(): [number, number, number, number];
|
|
12
|
+
round(): RGB;
|
|
12
13
|
asString(): string;
|
|
13
14
|
asHex(): string;
|
|
14
15
|
asHSL(): HSL;
|
package/dist/color/rgb.js
CHANGED
|
@@ -20,6 +20,13 @@ export class RGB extends Color {
|
|
|
20
20
|
asArray() {
|
|
21
21
|
return [this.r, this.g, this.b, this.a];
|
|
22
22
|
}
|
|
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;
|
|
29
|
+
}
|
|
23
30
|
asString() {
|
|
24
31
|
if (this.a === 1) {
|
|
25
32
|
return `rgb(${this.r.toFixed(0)},${this.g.toFixed(0)},${this.b.toFixed(0)})`;
|
|
@@ -1,5 +1,8 @@
|
|
|
1
|
-
import type {
|
|
2
|
-
import type {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
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,112 +1,33 @@
|
|
|
1
|
-
import { isTileJSONSpecification
|
|
2
|
-
import { resolveUrl } from '../lib/utils.js';
|
|
1
|
+
import { isTileJSONSpecification } from '../types/index.js';
|
|
2
|
+
import { deepClone, resolveUrl } from '../lib/utils.js';
|
|
3
3
|
import { colorful } from '../styles/index.js';
|
|
4
4
|
import { Color } from '../color/index.js';
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
tiles
|
|
11
|
-
scheme: opt.scheme,
|
|
12
|
-
bounds: opt.bounds,
|
|
13
|
-
center: opt.center,
|
|
14
|
-
description: opt.description,
|
|
15
|
-
fillzoom: opt.fillzoom,
|
|
16
|
-
grids: opt.grids,
|
|
17
|
-
legend: opt.legend,
|
|
18
|
-
minzoom: opt.minzoom,
|
|
19
|
-
maxzoom: opt.maxzoom,
|
|
20
|
-
name: opt.name,
|
|
21
|
-
template: opt.template,
|
|
22
|
-
};
|
|
23
|
-
const { baseUrl } = opt;
|
|
24
|
-
if (typeof baseUrl === 'string') {
|
|
25
|
-
tilejsonBasic.tiles = tilejsonBasic.tiles.map(url => resolveUrl(baseUrl, url));
|
|
26
|
-
}
|
|
27
|
-
let k;
|
|
28
|
-
for (k in tilejsonBasic) {
|
|
29
|
-
if (tilejsonBasic[k] === undefined)
|
|
30
|
-
delete tilejsonBasic[k];
|
|
31
|
-
}
|
|
32
|
-
let tilejson;
|
|
33
|
-
let vectorLayers;
|
|
34
|
-
switch (format) {
|
|
35
|
-
case 'avif':
|
|
36
|
-
case 'jpg':
|
|
37
|
-
case 'png':
|
|
38
|
-
case 'webp':
|
|
39
|
-
tilejson = { ...tilejsonBasic, type: 'raster', format };
|
|
40
|
-
break;
|
|
41
|
-
case 'pbf':
|
|
42
|
-
vectorLayers = opt.vectorLayers;
|
|
43
|
-
if (!isVectorLayers(vectorLayers))
|
|
44
|
-
throw Error('property vector_layers is invalid');
|
|
45
|
-
tilejson = { ...tilejsonBasic, type: 'vector', format, vector_layers: vectorLayers };
|
|
46
|
-
break;
|
|
47
|
-
default:
|
|
48
|
-
throw Error(`format "${String(format)}" is not supported`);
|
|
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));
|
|
49
11
|
}
|
|
50
|
-
if (!isTileJSONSpecification(
|
|
51
|
-
throw Error();
|
|
12
|
+
if (!isTileJSONSpecification(tileJSON))
|
|
13
|
+
throw Error('Invalid TileJSON specification');
|
|
52
14
|
let style;
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
style = getImageStyle(tilejson);
|
|
56
|
-
break;
|
|
57
|
-
case 'vector':
|
|
58
|
-
if (isShortbread(tilejson)) {
|
|
59
|
-
style = getShortbreadStyle(tilejson, opt);
|
|
60
|
-
}
|
|
61
|
-
else {
|
|
62
|
-
style = getInspectorStyle(tilejson);
|
|
63
|
-
}
|
|
64
|
-
}
|
|
65
|
-
if (opt.minzoom ?? 0)
|
|
66
|
-
style.zoom ??= opt.minzoom;
|
|
67
|
-
if (opt.bounds)
|
|
68
|
-
style.center ??= [
|
|
69
|
-
(opt.bounds[0] + opt.bounds[2]) / 2,
|
|
70
|
-
(opt.bounds[1] + opt.bounds[3]) / 2,
|
|
71
|
-
];
|
|
72
|
-
if (opt.center)
|
|
73
|
-
style.center = opt.center;
|
|
74
|
-
return style;
|
|
75
|
-
}
|
|
76
|
-
export async function guessStyleFromContainer(container, options) {
|
|
77
|
-
const header = await container.getHeader();
|
|
78
|
-
const metadata = await container.getMetadata();
|
|
79
|
-
const format = header.tileFormat;
|
|
80
|
-
switch (format) {
|
|
81
|
-
case 'avif':
|
|
82
|
-
case 'jpg':
|
|
83
|
-
case 'pbf':
|
|
84
|
-
case 'png':
|
|
85
|
-
case 'webp':
|
|
86
|
-
break;
|
|
87
|
-
default:
|
|
88
|
-
throw Error(`format "${String(format)}" is not supported`);
|
|
15
|
+
if (isRasterTileJSONSpecification(tileJSON)) {
|
|
16
|
+
style = getRasterStyle(tileJSON);
|
|
89
17
|
}
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
18
|
+
else {
|
|
19
|
+
if (isShortbread(tileJSON)) {
|
|
20
|
+
style = getShortbreadStyle(tileJSON, {
|
|
21
|
+
baseUrl: options?.baseUrl,
|
|
22
|
+
glyphs: options?.glyphs,
|
|
23
|
+
sprite: options?.sprite,
|
|
24
|
+
});
|
|
96
25
|
}
|
|
97
|
-
|
|
98
|
-
|
|
26
|
+
else {
|
|
27
|
+
style = getInspectorStyle(tileJSON);
|
|
99
28
|
}
|
|
100
29
|
}
|
|
101
|
-
|
|
102
|
-
...options,
|
|
103
|
-
format,
|
|
104
|
-
bounds: header.bbox,
|
|
105
|
-
minzoom: header.zoomMin,
|
|
106
|
-
maxzoom: header.zoomMax,
|
|
107
|
-
vectorLayers,
|
|
108
|
-
};
|
|
109
|
-
return guessStyle(guessStyleOptions);
|
|
30
|
+
return style;
|
|
110
31
|
}
|
|
111
32
|
function isShortbread(spec) {
|
|
112
33
|
if (typeof spec !== 'object')
|
|
@@ -187,7 +108,7 @@ function getInspectorStyle(spec) {
|
|
|
187
108
|
return {
|
|
188
109
|
version: 8,
|
|
189
110
|
sources: {
|
|
190
|
-
[sourceName]: spec,
|
|
111
|
+
[sourceName]: sourceFromSpec(spec, 'vector'),
|
|
191
112
|
},
|
|
192
113
|
layers: [
|
|
193
114
|
...layers.background,
|
|
@@ -197,11 +118,13 @@ function getInspectorStyle(spec) {
|
|
|
197
118
|
],
|
|
198
119
|
};
|
|
199
120
|
}
|
|
200
|
-
function
|
|
121
|
+
function getRasterStyle(spec) {
|
|
201
122
|
const sourceName = 'rasterSource';
|
|
202
123
|
return {
|
|
203
124
|
version: 8,
|
|
204
|
-
sources: {
|
|
125
|
+
sources: {
|
|
126
|
+
[sourceName]: sourceFromSpec(spec, 'raster'),
|
|
127
|
+
},
|
|
205
128
|
layers: [{
|
|
206
129
|
id: 'raster',
|
|
207
130
|
type: 'raster',
|
|
@@ -209,3 +132,15 @@ function getImageStyle(spec) {
|
|
|
209
132
|
}],
|
|
210
133
|
};
|
|
211
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
|
+
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export type { GuessStyleOptions
|
|
2
|
-
export { guessStyle
|
|
1
|
+
export type { GuessStyleOptions } from './guess_style.js';
|
|
2
|
+
export { guessStyle } from './guess_style.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export { guessStyle
|
|
1
|
+
export { guessStyle } from './guess_style.js';
|
package/dist/index.d.ts
CHANGED
|
@@ -1,6 +1,11 @@
|
|
|
1
1
|
export type * from './styles/index.js';
|
|
2
|
-
export * from './styles/index.js';
|
|
3
|
-
export {
|
|
4
|
-
export type {
|
|
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';
|
|
5
6
|
export type { VectorLayer } from './types/index.js';
|
|
6
|
-
export {
|
|
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';
|
package/dist/index.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
export * from './styles/index.js';
|
|
2
|
-
export { guessStyle
|
|
3
|
-
export {
|
|
1
|
+
export * as styles from './styles/index.js';
|
|
2
|
+
export { guessStyle } from './guess_style/index.js';
|
|
3
|
+
export { Color } from './color/index.js';
|
package/dist/lib/utils.js
CHANGED
|
@@ -1,2 +1,4 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
1
|
+
import { StyleSpecification } from "@maplibre/maplibre-gl-style-spec";
|
|
2
|
+
import { VectorLayer } from "../types/vector_layer.js";
|
|
3
|
+
export declare function getShortbreadTemplate(): StyleSpecification;
|
|
4
|
+
export declare function getShortbreadVectorLayers(): VectorLayer[];
|