@versatiles/style 5.7.0 → 5.8.1

package/README.MD

@@ -152,10 +152,10 @@ subgraph 1["color"]
 2["abstract.ts"]
 3["hsl.ts"]
 4["hsv.ts"]
-5["rgb.ts"]
+5["random.ts"]
 6["utils.ts"]
-7["index.ts"]
-8["random.ts"]
+7["rgb.ts"]
+8["index.ts"]
 end
 subgraph 9["guess_style"]
 A["guess_style.ts"]
@@ -195,28 +195,29 @@ end
 end
 3-->2
 3-->4
-3-->5
+3-->7
 3-->6
 4-->2
 4-->3
 4-->5
+4-->7
 4-->6
-5-->2
-5-->3
 5-->4
 5-->6
 7-->2
 7-->3
 7-->4
-7-->5
+7-->6
+8-->2
+8-->3
 8-->4
-8-->6
-A-->8
+8-->7
+A-->5
 A-->C
 A-->E
 A-->W
 A-->X
-C-->7
+C-->8
 E-->F
 E-->Q
 E-->R
@@ -224,7 +225,7 @@ E-->S
 E-->T
 E-->U
 F-->H
-H-->7
+H-->8
 H-->C
 H-->J
 H-->M
@@ -232,10 +233,10 @@ H-->O
 H-->P
 J-->K
 J-->L
-M-->7
+M-->8
 M-->C
 M-->N
-O-->7
+O-->8
 Q-->F
 R-->F
 S-->F
@@ -244,7 +245,7 @@ U-->F
 W-->X
 W-->Y
 Z-->A
-10-->7
+10-->8
 10-->Z
 10-->E
 

package/dist/index.d.ts

@@ -1,6 +1,14 @@
 import { SpriteSpecification, StyleSpecification } from '@maplibre/maplibre-gl-style-spec';
 export { SpriteSpecification } from '@maplibre/maplibre-gl-style-spec';
 
+interface RandomColorOptions {
+    seed?: string;
+    hue?: number | string;
+    opacity?: number;
+    luminosity?: number | string;
+    saturation?: number | string;
+}
+
 /**
  * Represents an RGB color with optional alpha transparency.
  *
@@ -241,6 +249,7 @@ declare class HSV extends Color {
      * @returns A new HSV color with the updated hue component.
      */
     setHue(value: number): HSV;
+    static randomColor(options?: RandomColorOptions): HSV;
 }
 
 /**
@@ -600,7 +609,7 @@ interface RecolorOptions {
 }
 
 /** Represents language suffixes used in map styles. */
-type Language = 'de' | 'en' | null;
+type Language = string | null;
 /**
  * Options for configuring the style builder.
  */
@@ -636,7 +645,7 @@ interface StyleBuilderOptions {
      */
     hideLabels?: boolean;
     /**
-     * Set the language ('en', 'de') of all map labels.
+     * Set the language ('en', 'de', ...) of all map labels.
      * A null value means that the language of the country in which the label is drawn will be used.
      * See also: {@link Language}
      * @default null
@@ -751,4 +760,4 @@ declare const styles: {
 };
 
 export { Color, HSL, HSV, RGB, colorful, eclipse, graybeard, guessStyle, neutrino, shadow, styles };
-export type { GuessStyleOptions, Language, RecolorOptions, StyleBuilderColorKey, StyleBuilderColors, StyleBuilderFonts, StyleBuilderFunction, StyleBuilderOptions, TileJSONSpecification, TileJSONSpecificationRaster, TileJSONSpecificationVector, VectorLayer };
+export type { GuessStyleOptions, Language, RandomColorOptions, RecolorOptions, StyleBuilderColorKey, StyleBuilderColors, StyleBuilderFonts, StyleBuilderFunction, StyleBuilderOptions, TileJSONSpecification, TileJSONSpecificationRaster, TileJSONSpecificationVector, VectorLayer };

package/dist/index.js

@@ -153,6 +153,136 @@ function formatFloat(num, precision) {
     return num.toFixed(precision).replace(/0+$/, '').replace(/\.$/, '');
 }
 
+let colorDictionary = new Map();
+function randomColor(options) {
+    if (colorDictionary.size === 0)
+        colorDictionary = initColorDictionary();
+    options ??= {};
+    let seed = inputToSeed(options.seed);
+    const H = pickHue(options);
+    const S = pickSaturation(H, options);
+    const V = pickBrightness(H, S, options);
+    return new HSV(H, S, V, options.opacity ?? 1);
+    function pickHue(options) {
+        return mod(randomWithin(getHueRange(options.hue)), 360);
+        function getHueRange(hue) {
+            if (typeof hue === 'number') {
+                hue = mod(hue, 360);
+                return [hue, hue];
+            }
+            if (typeof hue === 'string') {
+                const color = colorDictionary.get(hue);
+                if (color?.hueRange)
+                    return color.hueRange;
+            }
+            return [0, 360];
+        }
+    }
+    function pickSaturation(hue, options) {
+        if (options.hue === 'monochrome')
+            return 0;
+        if (options.luminosity === 'random')
+            return randomWithin([0, 100]);
+        let [sMin, sMax] = getColorInfo(hue).saturationRange;
+        if (options.saturation === 'strong')
+            return sMax;
+        switch (options.luminosity) {
+            case 'bright':
+                sMin = 55;
+                break;
+            case 'dark':
+                sMin = sMax - 10;
+                break;
+            case 'light':
+                sMax = 55;
+                break;
+        }
+        return randomWithin([sMin, sMax]);
+    }
+    function pickBrightness(h, s, options) {
+        let bMin = getMinimumBrightness(h, s), bMax = 100;
+        if (typeof options.luminosity === 'number') {
+            bMin = options.luminosity;
+            bMax = options.luminosity;
+        }
+        else {
+            switch (options.luminosity) {
+                case 'dark':
+                    bMax = Math.min(100, bMin + 20);
+                    break;
+                case 'light':
+                    bMin = (bMax + bMin) / 2;
+                    break;
+                case 'random':
+                    bMin = 0;
+                    bMax = 100;
+                    break;
+            }
+        }
+        return randomWithin([bMin, bMax]);
+        function getMinimumBrightness(h, s) {
+            const { lowerBounds } = getColorInfo(h);
+            for (let i = 0; i < lowerBounds.length - 1; i++) {
+                const [s1, v1] = lowerBounds[i];
+                const [s2, v2] = lowerBounds[i + 1];
+                if (s >= s1 && s <= s2) {
+                    const m = (v2 - v1) / (s2 - s1), b = v1 - m * s1;
+                    return m * s + b;
+                }
+            }
+            return 0;
+        }
+    }
+    function randomWithin(range) {
+        //Seeded random algorithm from http://indiegamr.com/generate-repeatable-random-numbers-in-js/
+        seed = (seed * 9301 + 49297) % 233280;
+        return Math.floor(range[0] + seed / 233280.0 * (range[1] - range[0]));
+    }
+}
+function inputToSeed(input) {
+    if (input == null)
+        return 0;
+    if (typeof input === 'number')
+        return input;
+    let i = 0;
+    for (let p = 0; p < input.length; p++)
+        i = (i * 0x101 + input.charCodeAt(p)) % 0x100000000;
+    return i;
+}
+function initColorDictionary() {
+    const dict = new Map();
+    const defineColor = (name, hueRange, lowerBounds) => {
+        const [greyest] = lowerBounds;
+        const colorful = lowerBounds[lowerBounds.length - 1];
+        dict.set(name, {
+            hueRange,
+            lowerBounds,
+            saturationRange: [greyest[0], colorful[0]],
+            brightnessRange: [colorful[1], greyest[1]],
+        });
+    };
+    defineColor('monochrome', null, [[0, 0], [100, 0]]);
+    defineColor('red', [-26, 18], [[20, 100], [30, 92], [40, 89], [50, 85], [60, 78], [70, 70], [80, 60], [90, 55], [100, 50]]);
+    defineColor('orange', [18, 46], [[20, 100], [30, 93], [40, 88], [50, 86], [60, 85], [70, 70], [100, 70]]);
+    defineColor('yellow', [46, 62], [[25, 100], [40, 94], [50, 89], [60, 86], [70, 84], [80, 82], [90, 80], [100, 75]]);
+    defineColor('green', [62, 178], [[30, 100], [40, 90], [50, 85], [60, 81], [70, 74], [80, 64], [90, 50], [100, 40]]);
+    defineColor('blue', [178, 257], [[20, 100], [30, 86], [40, 80], [50, 74], [60, 60], [70, 52], [80, 44], [90, 39], [100, 35]]);
+    defineColor('purple', [257, 282], [[20, 100], [30, 87], [40, 79], [50, 70], [60, 65], [70, 59], [80, 52], [90, 45], [100, 42]]);
+    defineColor('pink', [282, 334], [[20, 100], [30, 90], [40, 86], [60, 84], [80, 80], [90, 75], [100, 73]]);
+    return dict;
+}
+function getColorInfo(hue) {
+    hue = mod(hue, 360);
+    if (hue >= 334)
+        hue -= 360;
+    for (const color of colorDictionary.values()) {
+        if (color.hueRange && hue >= color.hueRange[0] && hue <= color.hueRange[1]) {
+            return color;
+        }
+    }
+    throw Error('Color hue value not found');
+}
+
 /**
  * Represents an RGB color with optional alpha transparency.
  *
@@ -639,6 +769,9 @@ class HSV extends Color {
     setHue(value) {
         return new HSV(value, this.s, this.v, this.a);
     }
+    static randomColor(options) {
+        return randomColor(options);
+    }
 }
 
 /**
@@ -871,7 +1004,10 @@ function getShortbreadTemplate() {
 
 function getShortbreadLayers(option) {
     const { language } = option;
-    const nameField = language ? '{name_' + language + '}' : '{name}';
+    let nameField = '{name}';
+    if (language) {
+        nameField = ['coalesce', '{name_' + language + '}', '{name}'];
+    }
     return [
         // background
         { id: 'background', type: 'background' },
@@ -1859,11 +1995,9 @@ function deepClone(obj) {
         }
     }
     if (isSimpleObject(obj)) {
-        // @ts-expect-error: Too complicated to handle
         return Object.fromEntries(Object.entries(obj).map(([key, value]) => [key, deepClone(value)]));
     }
     if (obj instanceof Array) {
-        // @ts-expect-error: Too complicated to handle
         return obj.map((e) => deepClone(e));
     }
     if (obj instanceof Color) {
@@ -1926,7 +2060,6 @@ function deepMerge(source0, ...sources) {
                 continue;
             }
             if (sourceValue instanceof Color) {
-                // @ts-expect-error: Too complicated to handle
                 target[key] = sourceValue.clone();
                 continue;
             }
@@ -2198,6 +2331,7 @@ class StyleBuilder {
     #sourceName = 'versatiles-shortbread';
     build(options) {
         options ??= {};
+        // @ts-expect-error globalThis may be undefined in some environments
         const baseUrl = options.baseUrl ?? globalThis?.document?.location?.origin ?? 'https://tiles.versatiles.org';
         const glyphs = options.glyphs ?? '/assets/glyphs/{fontstack}/{range}.pbf';
         const sprite = options.sprite ?? [{ id: 'basics', url: '/assets/sprites/basics/sprites' }];
@@ -3817,136 +3951,6 @@ function isRasterTileJSONSpecification(spec) {
     return true;
 }
 
-let colorDictionary = new Map();
-function randomColor(options) {
-    if (colorDictionary.size === 0)
-        colorDictionary = initColorDictionary();
-    options ??= {};
-    let seed = inputToSeed(options.seed);
-    const H = pickHue(options);
-    const S = pickSaturation(H, options);
-    const V = pickBrightness(H, S, options);
-    return new HSV(H, S, V, options.opacity ?? 1);
-    function pickHue(options) {
-        return mod(randomWithin(getHueRange(options.hue)), 360);
-        function getHueRange(hue) {
-            if (typeof hue === 'number') {
-                hue = mod(hue, 360);
-                return [hue, hue];
-            }
-            if (typeof hue === 'string') {
-                const color = colorDictionary.get(hue);
-                if (color?.hueRange)
-                    return color.hueRange;
-            }
-            return [0, 360];
-        }
-    }
-    function pickSaturation(hue, options) {
-        if (options.hue === 'monochrome')
-            return 0;
-        if (options.luminosity === 'random')
-            return randomWithin([0, 100]);
-        let [sMin, sMax] = getColorInfo(hue).saturationRange;
-        if (options.saturation === 'strong')
-            return sMax;
-        switch (options.luminosity) {
-            case 'bright':
-                sMin = 55;
-                break;
-            case 'dark':
-                sMin = sMax - 10;
-                break;
-            case 'light':
-                sMax = 55;
-                break;
-        }
-        return randomWithin([sMin, sMax]);
-    }
-    function pickBrightness(h, s, options) {
-        let bMin = getMinimumBrightness(h, s), bMax = 100;
-        if (typeof options.luminosity === 'number') {
-            bMin = options.luminosity;
-            bMax = options.luminosity;
-        }
-        else {
-            switch (options.luminosity) {
-                case 'dark':
-                    bMax = Math.min(100, bMin + 20);
-                    break;
-                case 'light':
-                    bMin = (bMax + bMin) / 2;
-                    break;
-                case 'random':
-                    bMin = 0;
-                    bMax = 100;
-                    break;
-            }
-        }
-        return randomWithin([bMin, bMax]);
-        function getMinimumBrightness(h, s) {
-            const { lowerBounds } = getColorInfo(h);
-            for (let i = 0; i < lowerBounds.length - 1; i++) {
-                const [s1, v1] = lowerBounds[i];
-                const [s2, v2] = lowerBounds[i + 1];
-                if (s >= s1 && s <= s2) {
-                    const m = (v2 - v1) / (s2 - s1), b = v1 - m * s1;
-                    return m * s + b;
-                }
-            }
-            return 0;
-        }
-    }
-    function randomWithin(range) {
-        //Seeded random algorithm from http://indiegamr.com/generate-repeatable-random-numbers-in-js/
-        seed = (seed * 9301 + 49297) % 233280;
-        return Math.floor(range[0] + seed / 233280.0 * (range[1] - range[0]));
-    }
-}
-function inputToSeed(input) {
-    if (input == null)
-        return 0;
-    if (typeof input === 'number')
-        return input;
-    let i = 0;
-    for (let p = 0; p < input.length; p++)
-        i = (i * 0x101 + input.charCodeAt(p)) % 0x100000000;
-    return i;
-}
-function initColorDictionary() {
-    const dict = new Map();
-    const defineColor = (name, hueRange, lowerBounds) => {
-        const [greyest] = lowerBounds;
-        const colorful = lowerBounds[lowerBounds.length - 1];
-        dict.set(name, {
-            hueRange,
-            lowerBounds,
-            saturationRange: [greyest[0], colorful[0]],
-            brightnessRange: [colorful[1], greyest[1]],
-        });
-    };
-    defineColor('monochrome', null, [[0, 0], [100, 0]]);
-    defineColor('red', [-26, 18], [[20, 100], [30, 92], [40, 89], [50, 85], [60, 78], [70, 70], [80, 60], [90, 55], [100, 50]]);
-    defineColor('orange', [18, 46], [[20, 100], [30, 93], [40, 88], [50, 86], [60, 85], [70, 70], [100, 70]]);
-    defineColor('yellow', [46, 62], [[25, 100], [40, 94], [50, 89], [60, 86], [70, 84], [80, 82], [90, 80], [100, 75]]);
-    defineColor('green', [62, 178], [[30, 100], [40, 90], [50, 85], [60, 81], [70, 74], [80, 64], [90, 50], [100, 40]]);
-    defineColor('blue', [178, 257], [[20, 100], [30, 86], [40, 80], [50, 74], [60, 60], [70, 52], [80, 44], [90, 39], [100, 35]]);
-    defineColor('purple', [257, 282], [[20, 100], [30, 87], [40, 79], [50, 70], [60, 65], [70, 59], [80, 52], [90, 45], [100, 42]]);
-    defineColor('pink', [282, 334], [[20, 100], [30, 90], [40, 86], [60, 84], [80, 80], [90, 75], [100, 73]]);
-    return dict;
-}
-function getColorInfo(hue) {
-    hue = mod(hue, 360);
-    if (hue >= 334)
-        hue -= 360;
-    for (const color of colorDictionary.values()) {
-        if (color.hueRange && hue >= color.hueRange[0] && hue <= color.hueRange[1]) {
-            return color;
-        }
-    }
-    throw Error('Color hue value not found');
-}
-
 /**
  * Generates a style specification based on the provided TileJSON specification and optional parameters.
  *
@@ -4129,7 +4133,7 @@ function sourceFromSpec(spec, type) {
  *   <body>
  *     <!-- ... -->
  *     <script>
- *       const style = VersatilesStyle.colorful();
+ *       const style = VersaTilesStyle.colorful();
  *       // ...
  *     </script>
  *   </body>
@@ -4141,8 +4145,8 @@ function sourceFromSpec(spec, type) {
  * npm i @versatiles/style
  * ```
  * ```
- * import { colorful } from 'versatiles-style';
- * // OR: const { colorful } = require('versatiles-style');
+ * import { colorful } from '@versatiles/style';
+ * // OR: const { colorful } = require('@versatiles/style');
  * const style = colorful();
  * ```
  *