@versatiles/style 5.1.0 → 5.2.1

package/dist/color/rgb.js

@@ -0,0 +1,220 @@
+import { HSL } from './hsl.js';
+import { HSV } from './hsv.js';
+import { Color } from './abstract.js';
+import { clamp, formatFloat } from './utils.js';
+export class RGB extends Color {
+    r = 0; // between 0 and 255
+    g = 0; // between 0 and 255
+    b = 0; // between 0 and 255
+    a = 1; // between 0 and 1
+    constructor(r, g, b, a = 1) {
+        super();
+        this.r = clamp(r, 0, 255);
+        this.g = clamp(g, 0, 255);
+        this.b = clamp(b, 0, 255);
+        this.a = clamp(a, 0, 1);
+    }
+    clone() {
+        return new RGB(this.r, this.g, this.b, this.a);
+    }
+    asArray() {
+        return [this.r, this.g, this.b, this.a];
+    }
+    round() {
+        this.r = Math.round(this.r);
+        this.g = Math.round(this.g);
+        this.b = Math.round(this.b);
+        this.a = Math.round(this.a * 1000) / 1000;
+        return this;
+    }
+    asString() {
+        if (this.a === 1) {
+            return `rgb(${this.r.toFixed(0)},${this.g.toFixed(0)},${this.b.toFixed(0)})`;
+        }
+        else {
+            return `rgba(${this.r.toFixed(0)},${this.g.toFixed(0)},${this.b.toFixed(0)},${formatFloat(this.a, 3)})`;
+        }
+    }
+    asHex() {
+        const r = Math.round(this.r).toString(16).padStart(2, '0');
+        const g = Math.round(this.g).toString(16).padStart(2, '0');
+        const b = Math.round(this.b).toString(16).padStart(2, '0');
+        if (this.a === 1) {
+            return `#${r}${g}${b}`.toUpperCase();
+        }
+        else {
+            const a = Math.round(this.a * 255).toString(16).padStart(2, '0');
+            return `#${r}${g}${b}${a}`.toUpperCase();
+        }
+    }
+    asHSL() {
+        const r = this.r / 255;
+        const g = this.g / 255;
+        const b = this.b / 255;
+        const min = Math.min(r, g, b);
+        const max = Math.max(r, g, b);
+        const delta = max - min;
+        let h = 0;
+        let s = 0;
+        if (max === min)
+            h = 0;
+        else if (r === max)
+            h = (g - b) / delta;
+        else if (g === max)
+            h = 2 + (b - r) / delta;
+        else if (b === max)
+            h = 4 + (r - g) / delta;
+        h = Math.min(h * 60, 360);
+        if (h < 0)
+            h += 360;
+        const l = (min + max) / 2;
+        if (max === min)
+            s = 0;
+        else if (l <= 0.5)
+            s = delta / (max + min);
+        else
+            s = delta / (2 - max - min);
+        return new HSL(h, s * 100, l * 100, this.a);
+    }
+    ;
+    asHSV() {
+        const r = this.r / 255;
+        const g = this.g / 255;
+        const b = this.b / 255;
+        const v = Math.max(r, g, b);
+        const diff = v - Math.min(r, g, b);
+        let h = 0;
+        let s = 0;
+        if (diff !== 0) {
+            function diffc(c) {
+                return (v - c) / 6 / diff + 1 / 2;
+            }
+            ;
+            s = diff / v;
+            const rdif = diffc(r);
+            const gdif = diffc(g);
+            const bdif = diffc(b);
+            if (r === v)
+                h = bdif - gdif;
+            else if (g === v)
+                h = (1 / 3) + rdif - bdif;
+            else if (b === v)
+                h = (2 / 3) + gdif - rdif;
+            if (h < 0)
+                h += 1;
+            else if (h > 1)
+                h -= 1;
+        }
+        return new HSV(h * 360, s * 100, v * 100, this.a);
+    }
+    asRGB() {
+        return this.clone();
+    }
+    toRGB() {
+        return this;
+    }
+    static parse(str) {
+        str = str.toLowerCase().replaceAll(/[^0-9a-z.#,()]/g, '');
+        let match;
+        match = str.match(/^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})?$/);
+        if (match) {
+            const r = parseInt(match[1], 16);
+            const g = parseInt(match[2], 16);
+            const b = parseInt(match[3], 16);
+            const a = match[4] ? parseInt(match[4], 16) / 255 : 1;
+            return new RGB(r, g, b, a);
+        }
+        match = str.match(/^#([0-9a-f])([0-9a-f])([0-9a-f])([0-9a-f])?$/);
+        if (match) {
+            const r = parseInt(match[1], 16) * 17;
+            const g = parseInt(match[2], 16) * 17;
+            const b = parseInt(match[3], 16) * 17;
+            const a = match[4] ? parseInt(match[4], 16) / 15 : 1;
+            return new RGB(r, g, b, a);
+        }
+        str = str.trim().toLowerCase().replaceAll(' ', '');
+        match = str.match(/^rgb\((\d+),(\d+),(\d+)\)$/);
+        if (match) {
+            const r = parseInt(match[1]);
+            const g = parseInt(match[2]);
+            const b = parseInt(match[3]);
+            return new RGB(r, g, b);
+        }
+        match = str.match(/^rgba\((\d+),(\d+),(\d+),([.\d]+)\)$/);
+        if (match) {
+            const r = parseInt(match[1]);
+            const g = parseInt(match[2]);
+            const b = parseInt(match[3]);
+            const a = parseFloat(match[4]);
+            return new RGB(r, g, b, a);
+        }
+        throw new Error(`Invalid RGB color string: "${str}"`);
+    }
+    gamma(value) {
+        if (value < 1e-3)
+            value = 1e-3;
+        if (value > 1e3)
+            value = 1e3;
+        this.r = Math.pow(this.r / 255, value) * 255;
+        this.g = Math.pow(this.g / 255, value) * 255;
+        this.b = Math.pow(this.b / 255, value) * 255;
+        return this;
+    }
+    invert() {
+        this.r = 255 - this.r;
+        this.g = 255 - this.g;
+        this.b = 255 - this.b;
+        return this;
+    }
+    contrast(value) {
+        if (value < 0)
+            value = 0;
+        if (value > 1e6)
+            value = 1e6;
+        this.r = clamp((this.r - 127.5) * value + 127.5, 0, 255);
+        this.g = clamp((this.g - 127.5) * value + 127.5, 0, 255);
+        this.b = clamp((this.b - 127.5) * value + 127.5, 0, 255);
+        return this;
+    }
+    brightness(value) {
+        if (value < -1)
+            value = -1;
+        if (value > 1)
+            value = 1;
+        const a = 1 - Math.abs(value);
+        const b = (value < 0) ? 0 : 255 * value;
+        this.r = this.r * a + b;
+        this.g = this.g * a + b;
+        this.b = this.b * a + b;
+        return this;
+    }
+    tint(value, tintColor) {
+        if (value < 0)
+            value = 0;
+        if (value > 1)
+            value = 1;
+        const hsv = this.asHSV();
+        hsv.h = tintColor.toHSV().h;
+        const rgbNew = hsv.toRGB();
+        rgbNew.r = this.r * (1 - value) + value * rgbNew.r;
+        rgbNew.g = this.g * (1 - value) + value * rgbNew.g;
+        rgbNew.b = this.b * (1 - value) + value * rgbNew.b;
+        return rgbNew;
+    }
+    lighten(ratio) {
+        this.r = clamp(255 - (255 - this.r) * (1 - ratio), 0, 255);
+        this.g = clamp(255 - (255 - this.g) * (1 - ratio), 0, 255);
+        this.b = clamp(255 - (255 - this.b) * (1 - ratio), 0, 255);
+        return this;
+    }
+    darken(ratio) {
+        this.r = clamp(this.r * (1 - ratio), 0, 255);
+        this.g = clamp(this.g * (1 - ratio), 0, 255);
+        this.b = clamp(this.b * (1 - ratio), 0, 255);
+        return this;
+    }
+    fade(value) {
+        this.a *= 1 - value;
+        return this;
+    }
+}

package/dist/color/utils.d.ts

@@ -0,0 +1,3 @@
+export declare function clamp(num: number, min: number, max: number): number;
+export declare function mod(num: number, max: number): number;
+export declare function formatFloat(num: number, precision: number): string;

package/dist/color/utils.js

@@ -0,0 +1,9 @@
+export function clamp(num, min, max) {
+    return Math.min(Math.max(min, num), max);
+}
+export function mod(num, max) {
+    return ((num % max) + max) % max;
+}
+export function formatFloat(num, precision) {
+    return num.toFixed(precision).replace(/0+$/, '').replace(/\.$/, '');
+}

package/dist/guess_style/guess_style.d.ts

@@ -1,5 +1,8 @@
-import type { MaplibreStyle } from '../types/index.js';
-import type { Container } from '@versatiles/container';
-import type { GuessContainerOptions, GuessStyleOptions } from './types.js';
-export declare function guessStyle(opt: GuessStyleOptions): MaplibreStyle;
-export declare function guessStyleFromContainer(container: Container, options: GuessContainerOptions): Promise<MaplibreStyle>;
+import type { TileJSONSpecification } from '../types/index.js';
+import type { SpriteSpecification, StyleSpecification } from '@maplibre/maplibre-gl-style-spec';
+export interface GuessStyleOptions {
+    baseUrl?: string;
+    glyphs?: string;
+    sprite?: SpriteSpecification;
+}
+export declare function guessStyle(tileJSON: TileJSONSpecification, options?: GuessStyleOptions): StyleSpecification;

package/dist/guess_style/guess_style.js

@@ -1,112 +1,33 @@
-import { isTileJSONSpecification, isVectorLayers } from '../types/index.js';
-import { resolveUrl } from '../lib/utils.js';
-import randomColorGenerator from './random_color.js';
+import { isTileJSONSpecification } from '../types/index.js';
+import { deepClone, resolveUrl } from '../lib/utils.js';
 import { colorful } from '../styles/index.js';
-export function guessStyle(opt) {
-    const { format } = opt;
-    const tilejsonBasic = {
-        tilejson: '3.0.0',
-        attribution: opt.attribution,
-        tiles: opt.tiles,
-        scheme: opt.scheme,
-        bounds: opt.bounds,
-        center: opt.center,
-        description: opt.description,
-        fillzoom: opt.fillzoom,
-        grids: opt.grids,
-        legend: opt.legend,
-        minzoom: opt.minzoom,
-        maxzoom: opt.maxzoom,
-        name: opt.name,
-        template: opt.template,
-    };
-    const { baseUrl } = opt;
-    if (typeof baseUrl === 'string') {
-        tilejsonBasic.tiles = tilejsonBasic.tiles.map(url => resolveUrl(baseUrl, url));
-    }
-    let k;
-    for (k in tilejsonBasic) {
-        if (tilejsonBasic[k] === undefined)
-            delete tilejsonBasic[k];
-    }
-    let tilejson;
-    let vectorLayers;
-    switch (format) {
-        case 'avif':
-        case 'jpg':
-        case 'png':
-        case 'webp':
-            tilejson = { ...tilejsonBasic, type: 'raster', format };
-            break;
-        case 'pbf':
-            vectorLayers = opt.vectorLayers;
-            if (!isVectorLayers(vectorLayers))
-                throw Error('property vector_layers is invalid');
-            tilejson = { ...tilejsonBasic, type: 'vector', format, vector_layers: vectorLayers };
-            break;
-        default:
-            throw Error(`format "${String(format)}" is not supported`);
+import { Color } from '../color/index.js';
+import { isRasterTileJSONSpecification } from '../types/tilejson.js';
+export function guessStyle(tileJSON, options) {
+    tileJSON = deepClone(tileJSON);
+    if (options && options.baseUrl) {
+        const { baseUrl } = options;
+        tileJSON.tiles = tileJSON.tiles.map(url => resolveUrl(baseUrl, url));
     }
-    if (!isTileJSONSpecification(tilejson))
-        throw Error();
+    if (!isTileJSONSpecification(tileJSON))
+        throw Error('Invalid TileJSON specification');
     let style;
-    switch (tilejson.type) {
-        case 'raster':
-            style = getImageStyle(tilejson);
-            break;
-        case 'vector':
-            if (isShortbread(tilejson)) {
-                style = getShortbreadStyle(tilejson, opt);
-            }
-            else {
-                style = getInspectorStyle(tilejson);
-            }
-    }
-    if (opt.minzoom ?? 0)
-        style.zoom ??= opt.minzoom;
-    if (opt.bounds)
-        style.center ??= [
-            (opt.bounds[0] + opt.bounds[2]) / 2,
-            (opt.bounds[1] + opt.bounds[3]) / 2,
-        ];
-    if (opt.center)
-        style.center = opt.center;
-    return style;
-}
-export async function guessStyleFromContainer(container, options) {
-    const header = await container.getHeader();
-    const metadata = await container.getMetadata();
-    const format = header.tileFormat;
-    switch (format) {
-        case 'avif':
-        case 'jpg':
-        case 'pbf':
-        case 'png':
-        case 'webp':
-            break;
-        default:
-            throw Error(`format "${String(format)}" is not supported`);
+    if (isRasterTileJSONSpecification(tileJSON)) {
+        style = getRasterStyle(tileJSON);
     }
-    let vectorLayers;
-    if (typeof metadata === 'string') {
-        try {
-            const t = JSON.parse(metadata);
-            if (('vector_layers' in t) && Array.isArray(t.vector_layers))
-                vectorLayers = t.vector_layers;
+    else {
+        if (isShortbread(tileJSON)) {
+            style = getShortbreadStyle(tileJSON, {
+                baseUrl: options?.baseUrl,
+                glyphs: options?.glyphs,
+                sprite: options?.sprite,
+            });
         }
-        catch (error) {
-            console.log(error);
+        else {
+            style = getInspectorStyle(tileJSON);
         }
     }
-    const guessStyleOptions = {
-        ...options,
-        format,
-        bounds: header.bbox,
-        minzoom: header.zoomMin,
-        maxzoom: header.zoomMax,
-        vectorLayers,
-    };
-    return guessStyle(guessStyleOptions);
+    return style;
 }
 function isShortbread(spec) {
     if (typeof spec !== 'object')
@@ -131,7 +52,6 @@ function getInspectorStyle(spec) {
     const sourceName = 'vectorSource';
     const layers = { background: [], circle: [], line: [], fill: [] };
     layers.background.push({ 'id': 'background', 'type': 'background', 'paint': { 'background-color': '#fff' } });
-    const randomColor = randomColorGenerator();
     spec.vector_layers.forEach((vector_layer) => {
         let luminosity = 'bright', saturation, hue;
         if (/water|ocean|lake|sea|river/.test(vector_layer.id))
@@ -152,13 +72,13 @@ function getInspectorStyle(spec) {
             saturation = 'strong';
             luminosity = 'light';
         }
-        const color = randomColor({
+        const color = Color.random({
             hue,
             luminosity,
             saturation,
             seed: vector_layer.id,
             opacity: 0.6,
-        });
+        }).asString();
         layers.circle.push({
             id: `${sourceName}-${vector_layer.id}-circle`,
             'source-layer': vector_layer.id,
@@ -188,7 +108,7 @@ function getInspectorStyle(spec) {
     return {
         version: 8,
         sources: {
-            [sourceName]: spec,
+            [sourceName]: sourceFromSpec(spec, 'vector'),
         },
         layers: [
             ...layers.background,
@@ -198,11 +118,13 @@ function getInspectorStyle(spec) {
         ],
     };
 }
-function getImageStyle(spec) {
+function getRasterStyle(spec) {
     const sourceName = 'rasterSource';
     return {
         version: 8,
-        sources: { [sourceName]: spec },
+        sources: {
+            [sourceName]: sourceFromSpec(spec, 'raster'),
+        },
         layers: [{
                 id: 'raster',
                 type: 'raster',
@@ -210,3 +132,15 @@ function getImageStyle(spec) {
             }],
     };
 }
+function sourceFromSpec(spec, type) {
+    const source = { tiles: spec.tiles, type };
+    if (spec.minzoom != null)
+        source.minzoom = spec.minzoom;
+    if (spec.maxzoom != null)
+        source.maxzoom = spec.maxzoom;
+    if (spec.attribution != null)
+        source.attribution = spec.attribution;
+    if (spec.scheme != null)
+        source.scheme = spec.scheme;
+    return source;
+}

package/dist/guess_style/index.d.ts

@@ -1,2 +1,2 @@
-export type { GuessStyleOptions, GuessContainerOptions } from './types.js';
-export { guessStyle, guessStyleFromContainer } from './guess_style.js';
+export type { GuessStyleOptions } from './guess_style.js';
+export { guessStyle } from './guess_style.js';

package/dist/guess_style/index.js

@@ -1 +1 @@
-export { guessStyle, guessStyleFromContainer } from './guess_style.js';
+export { guessStyle } from './guess_style.js';

package/dist/index.d.ts

@@ -1,5 +1,11 @@
 export type * from './styles/index.js';
-export * from './styles/index.js';
-export { guessStyle, guessStyleFromContainer } from './guess_style/index.js';
-export type { GuessStyleOptions, GuessContainerOptions } from './guess_style/index.js';
+export * as styles from './styles/index.js';
+export type { GuessStyleOptions } from './guess_style/index.js';
+export type { RGB, HSL, HSV, RandomColorOptions } from './color/index.js';
+export type { TileJSONSpecification, TileJSONSpecificationRaster, TileJSONSpecificationVector } from './types/tilejson.js';
 export type { VectorLayer } from './types/index.js';
+export type { StyleBuilderOptions, StyleBuilderColorStrings, StyleBuilderFontStrings, Language, StyleBuilderColorKeys, StyleBuilderFontKeys } from './style_builder/types.js';
+export type { RecolorOptions } from './style_builder/recolor.js';
+export type { StyleBuilder } from './style_builder/style_builder.js';
+export { guessStyle } from './guess_style/index.js';
+export { Color } from './color/index.js';

package/dist/index.js

@@ -1,2 +1,3 @@
-export * from './styles/index.js';
-export { guessStyle, guessStyleFromContainer } from './guess_style/index.js';
+export * as styles from './styles/index.js';
+export { guessStyle } from './guess_style/index.js';
+export { Color } from './color/index.js';

package/dist/lib/utils.js

@@ -1,4 +1,4 @@
-import Color from 'color';
+import { Color } from '../color/index.js';
 // Utility function to deep clone an object
 export function deepClone(obj) {
     const type = typeof obj;
@@ -21,8 +21,7 @@ export function deepClone(obj) {
         return obj.map((e) => deepClone(e));
     }
     if (obj instanceof Color) {
-        // @ts-expect-error: Too complicated to handle
-        return Color(obj);
+        return obj.clone();
     }
     if (obj == null)
         return obj;
@@ -83,7 +82,7 @@ export function deepMerge(source0, ...sources) {
             }
             if (sourceValue instanceof Color) {
                 // @ts-expect-error: Too complicated to handle
-                target[key] = Color(sourceValue);
+                target[key] = sourceValue.clone();
                 continue;
             }
             if (isSimpleObject(target[key]) && isSimpleObject(sourceValue)) {

package/dist/shortbread/template.d.ts

@@ -1,2 +1,4 @@
-import type { MaplibreStyleVector } from '../types/index.js';
-export declare function getShortbreadTemplate(): MaplibreStyleVector;
+import { StyleSpecification } from "@maplibre/maplibre-gl-style-spec";
+import { VectorLayer } from "../types/vector_layer.js";
+export declare function getShortbreadTemplate(): StyleSpecification;
+export declare function getShortbreadVectorLayers(): VectorLayer[];