@versatiles/style 4.2.8 → 4.4.0

package/README.MD

@@ -191,5 +191,5 @@ Iconsets can be defined in [`scripts/config-sprites.ts`](./scripts/config-sprite
 
 # Licenses
 
-* Sourcecode: [Unlicense](./UNLICENSE.md)
+* Sourcecode: [Unlicense](./LICENSE.md)
 * Iconsets and rendered Spritemaps: [CC0 1.0 Universal](./icons/LICENSE.md)

package/dist/style_builder/decorator.d.ts

@@ -1,3 +1,4 @@
 import type { MaplibreLayer } from '../types/index.js';
 import type { StyleRules } from './types.js';
-export declare function decorate(layers: MaplibreLayer[], rules: StyleRules): MaplibreLayer[];
+import type { CachedRecolor } from './recolor.ts';
+export declare function decorate(layers: MaplibreLayer[], rules: StyleRules, recolor: CachedRecolor): MaplibreLayer[];

package/dist/style_builder/decorator.js

@@ -2,7 +2,7 @@ import Color from 'color';
 import expandBraces from 'brace-expansion';
 import maplibreProperties from '../shortbread/properties.js';
 import { deepMerge } from '../lib/utils.js';
-export function decorate(layers, rules) {
+export function decorate(layers, rules, recolor) {
     const layerIds = layers.map(l => l.id);
     const layerIdSet = new Set(layerIds);
     // Initialize a new map to hold final styles for layers
@@ -39,89 +39,90 @@ export function decorate(layers, rules) {
         processStyling(layer, layerStyle);
         return [layer];
     });
-}
-// Function to process each style attribute for the layer
-function processStyling(layer, styleRule) {
-    for (const [ruleKeyCamelCase, ruleValue] of Object.entries(styleRule)) {
-        if (ruleValue == null)
-            continue;
-        // CamelCase to not-camel-case
-        const ruleKey = ruleKeyCamelCase.replace(/[A-Z]/g, c => '-' + c.toLowerCase());
-        const propertyDefs = maplibreProperties.get(layer.type + '/' + ruleKey);
-        if (!propertyDefs)
-            continue;
-        propertyDefs.forEach(propertyDef => {
-            const { key } = propertyDef;
-            let value = ruleValue;
-            switch (propertyDef.valueType) {
-                case 'color':
-                    value = processExpression(value, processColor);
-                    break;
-                case 'fonts':
-                    value = processExpression(value, processFont);
-                    break;
-                case 'resolvedImage':
-                case 'formatted':
-                case 'array':
-                case 'boolean':
-                case 'enum':
-                case 'number':
-                    value = processExpression(value);
-                    break;
-                default: throw new Error(`unknown propertyDef.valueType "${propertyDef.valueType}" for key "${key}"`);
+    // Function to process each style attribute for the layer
+    function processStyling(layer, styleRule) {
+        for (const [ruleKeyCamelCase, ruleValue] of Object.entries(styleRule)) {
+            if (ruleValue == null)
+                continue;
+            // CamelCase to not-camel-case
+            const ruleKey = ruleKeyCamelCase.replace(/[A-Z]/g, c => '-' + c.toLowerCase());
+            const propertyDefs = maplibreProperties.get(layer.type + '/' + ruleKey);
+            if (!propertyDefs)
+                continue;
+            propertyDefs.forEach(propertyDef => {
+                const { key } = propertyDef;
+                let value = ruleValue;
+                switch (propertyDef.valueType) {
+                    case 'color':
+                        value = processExpression(value, processColor);
+                        break;
+                    case 'fonts':
+                        value = processExpression(value, processFont);
+                        break;
+                    case 'resolvedImage':
+                    case 'formatted':
+                    case 'array':
+                    case 'boolean':
+                    case 'enum':
+                    case 'number':
+                        value = processExpression(value);
+                        break;
+                    default: throw new Error(`unknown propertyDef.valueType "${propertyDef.valueType}" for key "${key}"`);
+                }
+                switch (propertyDef.parent) {
+                    case 'layer':
+                        // @ts-expect-error: too complex to handle
+                        layer[key] = value;
+                        break;
+                    case 'layout':
+                        if (!layer.layout)
+                            layer.layout = {};
+                        // @ts-expect-error: too complex to handle
+                        layer.layout[key] = value;
+                        break;
+                    case 'paint':
+                        if (!layer.paint)
+                            layer.paint = {};
+                        // @ts-expect-error: too complex to handle
+                        layer.paint[key] = value;
+                        break;
+                    default:
+                        // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
+                        throw new Error(`unknown parent "${propertyDef.parent}" for key "${key}"`);
+                }
+            });
+        }
+        function processColor(value) {
+            if (typeof value === 'string')
+                value = Color(value);
+            if (value instanceof Color) {
+                const color = recolor.do(value);
+                const text = (color.alpha() === 1) ? color.hex() : color.string();
+                return text.toLowerCase();
             }
-            switch (propertyDef.parent) {
-                case 'layer':
-                    // @ts-expect-error: too complex to handle
-                    layer[key] = value;
-                    break;
-                case 'layout':
-                    if (!layer.layout)
-                        layer.layout = {};
-                    // @ts-expect-error: too complex to handle
-                    layer.layout[key] = value;
-                    break;
-                case 'paint':
-                    if (!layer.paint)
-                        layer.paint = {};
-                    // @ts-expect-error: too complex to handle
-                    layer.paint[key] = value;
-                    break;
-                default:
-                    // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
-                    throw new Error(`unknown parent "${propertyDef.parent}" for key "${key}"`);
+            throw new Error(`unknown color type "${typeof value}"`);
+        }
+        function processFont(value) {
+            if (typeof value === 'string')
+                return [value];
+            throw new Error(`unknown font type "${typeof value}"`);
+        }
+        function processExpression(value, cbValue) {
+            if (typeof value === 'object') {
+                if (value instanceof Color)
+                    return processColor(value);
+                if (!Array.isArray(value)) {
+                    return processZoomStops(value, cbValue);
+                }
             }
-        });
-    }
-}
-function processColor(value) {
-    if (typeof value === 'string')
-        value = Color(value);
-    if (value instanceof Color) {
-        value = (value.alpha() === 1) ? value.hex() : value.string();
-        return value.toLowerCase();
-    }
-    throw new Error(`unknown color type "${typeof value}"`);
-}
-function processFont(value) {
-    if (typeof value === 'string')
-        return [value];
-    throw new Error(`unknown font type "${typeof value}"`);
-}
-function processExpression(value, cbValue) {
-    if (typeof value === 'object') {
-        if (value instanceof Color)
-            return processColor(value);
-        if (!Array.isArray(value)) {
-            return processZoomStops(value, cbValue);
+            return cbValue ? cbValue(value) : value;
+        }
+        function processZoomStops(obj, cbValue) {
+            return {
+                stops: Object.entries(obj)
+                    .map(([z, v]) => [parseInt(z, 10), cbValue ? cbValue(v) : v])
+                    .sort((a, b) => a[0] - b[0]),
+            };
         }
     }
-    return cbValue ? cbValue(value) : value;
-}
-function processZoomStops(obj, cbValue) {
-    return {
-        stops: Object.entries(obj)
-            .map(([z, v]) => [parseInt(z, 10), cbValue ? cbValue(v) : v])
-            .sort((a, b) => a[0] - b[0]),
-    };
 }

package/dist/style_builder/recolor.d.ts

@@ -1,8 +1,7 @@
-import type StyleBuilder from './style_builder.js';
-import type { StyleBuilderColors } from './types.js';
+import Color from 'color';
 export interface RecolorOptions {
     /** If true, inverts the colors. */
-    invert?: boolean;
+    invertBrightness?: boolean;
     /** The degree to rotate the hue of the color (in degrees). */
     rotate?: number;
     /** Adjusts the saturation level of the color. Positive values increase saturation, negative values decrease it. */
@@ -19,4 +18,12 @@ export interface RecolorOptions {
     tintColor?: string;
 }
 export declare function getDefaultRecolorFlags(): RecolorOptions;
-export declare function recolor<Subclass extends StyleBuilder<Subclass>>(colors: StyleBuilderColors<Subclass>, opt?: RecolorOptions): void;
+export declare function recolorObject(colors: Record<string, Color>, opt?: RecolorOptions): void;
+export declare class CachedRecolor {
+    private readonly skip;
+    private readonly opt?;
+    private readonly cache;
+    constructor(opt?: RecolorOptions);
+    do(color: Color): Color;
+}
+export declare function recolor(color: Color, opt?: RecolorOptions): Color;

package/dist/style_builder/recolor.js

@@ -1,7 +1,7 @@
 import Color from 'color';
 export function getDefaultRecolorFlags() {
     return {
-        invert: false,
+        invertBrightness: false,
         rotate: 0,
         saturate: 0,
         gamma: 1,
@@ -11,81 +11,112 @@ export function getDefaultRecolorFlags() {
         tintColor: '#FF0000',
     };
 }
-export function recolor(colors, opt) {
+function isValidRecolorOptions(opt) {
     if (!opt)
+        return false;
+    if ((opt.invertBrightness != null) && opt.invertBrightness)
+        return true;
+    if ((opt.rotate != null) && (opt.rotate !== 0))
+        return true;
+    if ((opt.saturate != null) && (opt.saturate !== 0))
+        return true;
+    if ((opt.gamma != null) && (opt.gamma !== 1))
+        return true;
+    if ((opt.contrast != null) && (opt.contrast !== 1))
+        return true;
+    if ((opt.brightness != null) && (opt.brightness !== 0))
+        return true;
+    if ((opt.tint != null) && (opt.tint !== 0))
+        return true;
+    if ((opt.tintColor != null) && (opt.tintColor !== '#FF0000'))
+        return true;
+    return false;
+}
+export function recolorObject(colors, opt) {
+    if (!isValidRecolorOptions(opt))
         return;
-    if (opt.invert ?? false)
-        invert();
+    for (const [k, c] of Object.entries(colors)) {
+        colors[k] = recolor(c, opt);
+    }
+}
+export class CachedRecolor {
+    skip;
+    opt;
+    cache;
+    constructor(opt) {
+        this.skip = !isValidRecolorOptions(opt);
+        this.cache = new Map();
+        this.opt = opt;
+    }
+    do(color) {
+        if (this.skip)
+            return color;
+        const key = color.string();
+        const result = this.cache.get(key);
+        if (result)
+            return result;
+        color = recolor(color, this.opt);
+        this.cache.set(key, color);
+        return color;
+    }
+}
+export function recolor(color, opt) {
+    if (!isValidRecolorOptions(opt))
+        return color;
+    if (opt.invertBrightness ?? false)
+        color = invert(color);
     if ((opt.rotate !== undefined) && (opt.rotate !== 0))
-        rotate(opt.rotate);
+        color = color.rotate(opt.rotate);
     if ((opt.saturate !== undefined) && (opt.saturate !== 0))
-        saturate(opt.saturate);
+        color = color.saturate(opt.saturate);
     if ((opt.gamma !== undefined) && (opt.gamma !== 1))
-        gamma(opt.gamma);
+        color = gamma(color, opt.gamma);
     if ((opt.contrast !== undefined) && (opt.contrast !== 1))
-        contrast(opt.contrast);
+        color = contrast(color, opt.contrast);
     if ((opt.brightness !== undefined) && (opt.brightness !== 0))
-        brightness(opt.brightness);
+        color = brightness(color, opt.brightness);
     if ((opt.tint !== undefined) && (opt.tintColor !== undefined) && (opt.tint !== 0))
-        tint(opt.tint, Color(opt.tintColor));
-    function forEachColor(callback) {
-        for (const k in colors)
-            colors[k] = callback(colors[k]);
-    }
-    function invert() {
-        forEachColor(c => c.negate());
-    }
-    function rotate(value) {
-        forEachColor(c => c.rotate(value));
-    }
-    function saturate(value) {
-        forEachColor(c => c.saturate(value));
+        color = tint(color, opt.tint, Color(opt.tintColor));
+    return color;
+    function invert(c) {
+        c = c.hsl();
+        return c.lightness(100 - c.lightness()).rgb();
     }
-    function gamma(value) {
+    function gamma(c, value) {
         if (value < 1e-3)
             value = 1e-3;
         if (value > 1e3)
             value = 1e3;
-        forEachColor(color => {
-            const rgb = color.rgb().array();
-            return Color.rgb(Math.pow(rgb[0] / 255, value) * 255, Math.pow(rgb[1] / 255, value) * 255, Math.pow(rgb[2] / 255, value) * 255, color.alpha());
-        });
+        const rgb = c.rgb().array();
+        return Color.rgb(Math.pow(rgb[0] / 255, value) * 255, Math.pow(rgb[1] / 255, value) * 255, Math.pow(rgb[2] / 255, value) * 255, c.alpha());
     }
-    function contrast(value) {
+    function contrast(c, value) {
         if (value < 0)
             value = 0;
         if (value > 1e6)
             value = 1e6;
-        forEachColor(color => {
-            const rgb = color.rgb().array();
-            return Color.rgb((rgb[0] - 127.5) * value + 127.5, (rgb[1] - 127.5) * value + 127.5, (rgb[2] - 127.5) * value + 127.5, color.alpha());
-        });
+        const rgb = c.rgb().array();
+        return Color.rgb((rgb[0] - 127.5) * value + 127.5, (rgb[1] - 127.5) * value + 127.5, (rgb[2] - 127.5) * value + 127.5, c.alpha());
     }
-    function brightness(value) {
+    function brightness(c, value) {
         if (value < -1e6)
             value = -1e6;
         if (value > 1e6)
             value = 1e6;
         const a = 1 - Math.abs(value);
         const b = (value < 0) ? 0 : 255 * value;
-        forEachColor(color => {
-            const rgb = color.rgb().array();
-            return Color.rgb(rgb[0] * a + b, rgb[1] * a + b, rgb[2] * a + b, color.alpha());
-        });
+        const rgb = c.rgb().array();
+        return Color.rgb(rgb[0] * a + b, rgb[1] * a + b, rgb[2] * a + b, c.alpha());
     }
-    function tint(value, tintColor) {
+    function tint(c, value, tintColor) {
         if (value < 0)
             value = 0;
         if (value > 1)
             value = 1;
-        const tintColorHSV = tintColor.hsv().array();
-        forEachColor(color => {
-            const rgb0 = color.rgb().array();
-            const hsv = color.hsv().array();
-            // eslint-disable-next-line @typescript-eslint/prefer-destructuring
-            hsv[0] = tintColorHSV[0];
-            const rgbNew = Color.hsv(hsv).rgb().array();
-            return Color.rgb(rgb0[0] * (1 - value) + value * rgbNew[0], rgb0[1] * (1 - value) + value * rgbNew[1], rgb0[2] * (1 - value) + value * rgbNew[2], color.alpha());
-        });
+        const rgb0 = c.rgb().array();
+        const hsv = c.hsv().array();
+        hsv[0] = tintColor.hue();
+        const rgbNew = Color.hsv(hsv).rgb().array();
+        return Color.rgb(rgb0[0] * (1 - value) + value * rgbNew[0], rgb0[1] * (1 - value) + value * rgbNew[1], rgb0[2] * (1 - value) + value * rgbNew[2], c.alpha());
     }
 }

package/dist/style_builder/style_builder.js

@@ -1,7 +1,7 @@
 import Color from 'color';
 import { getShortbreadTemplate, getShortbreadLayers } from '../shortbread/index.js';
 import { decorate } from './decorator.js';
-import { getDefaultRecolorFlags, recolor } from './recolor.js';
+import { CachedRecolor, getDefaultRecolorFlags } from './recolor.js';
 import { deepClone, resolveUrl } from '../lib/utils.js';
 // StyleBuilder class definition
 export default class StyleBuilder {
@@ -21,8 +21,6 @@ export default class StyleBuilder {
             for (const key in options.colors)
                 colors[key] = Color(options.colors[key]);
         }
-        // transform colors
-        recolor(colors, recolorOptions);
         const fonts = deepClone(this.defaultFonts);
         if (options.fonts) {
             for (const key in options.fonts) {
@@ -57,7 +55,7 @@ export default class StyleBuilder {
             throw Error('unknown layer type');
         });
         // apply layer rules
-        layers = decorate(layers, layerStyleRules);
+        layers = decorate(layers, layerStyleRules, new CachedRecolor(recolorOptions));
         // hide labels, if wanted
         if (hideLabels)
             layers = layers.filter(l => l.type !== 'symbol');

package/dist/styles/eclipse.d.ts

@@ -0,0 +1,5 @@
+import Colorful from './colorful.js';
+export default class Eclipse extends Colorful {
+    readonly name: string;
+    constructor();
+}

package/dist/styles/eclipse.js

@@ -0,0 +1,11 @@
+import Colorful from './colorful.js';
+export default class Eclipse extends Colorful {
+    name = 'Eclipse';
+    constructor() {
+        super();
+        this.transformDefaultColors(color => {
+            color = color.hsl();
+            return color.lightness(100 - color.lightness()).rgb();
+        });
+    }
+}

package/dist/styles/index.d.ts

@@ -4,19 +4,23 @@ import type { MaplibreStyle } from '../types/maplibre.js';
 import type { RecolorOptions } from '../style_builder/recolor.js';
 export type { MaplibreStyle, RecolorOptions };
 import Colorful from './colorful.js';
+import Eclipse from './eclipse.js';
 import Graybeard from './graybeard.js';
 import Neutrino from './neutrino.js';
 export type ColorfulOptions = StyleBuilderOptions<Colorful>;
+export type EclipseOptions = StyleBuilderOptions<Eclipse>;
 export type GraybeardOptions = StyleBuilderOptions<Graybeard>;
 export type NeutrinoOptions = StyleBuilderOptions<Neutrino>;
-export type SomeOptions = ColorfulOptions | GraybeardOptions | NeutrinoOptions;
+export type SomeOptions = ColorfulOptions | EclipseOptions | GraybeardOptions | NeutrinoOptions;
 type MakeStyle<T extends StyleBuilder<T>, O extends StyleBuilderOptions<T>> = ((options?: O) => MaplibreStyle) & {
     getOptions: () => O;
 };
 export type ColorfulBuilder = MakeStyle<Colorful, ColorfulOptions>;
+export type EclipseBuilder = MakeStyle<Eclipse, EclipseOptions>;
 export type GraybeardBuilder = MakeStyle<Graybeard, GraybeardOptions>;
 export type NeutrinoBuilder = MakeStyle<Neutrino, NeutrinoOptions>;
 export type SomeBuilder = ColorfulBuilder | GraybeardBuilder | NeutrinoBuilder;
 export declare const colorful: ColorfulBuilder;
+export declare const eclipse: EclipseBuilder;
 export declare const graybeard: GraybeardBuilder;
 export declare const neutrino: NeutrinoBuilder;

package/dist/styles/index.js

@@ -1,13 +1,17 @@
+// import styles
 import Colorful from './colorful.js';
+import Eclipse from './eclipse.js';
 import Graybeard from './graybeard.js';
 import Neutrino from './neutrino.js';
-function makeStyle(styleBuilder) {
+function getStyleBuilder(styleBuilder) {
     const fn = function (options) {
         return new styleBuilder().build(options);
     };
     fn.getOptions = () => new styleBuilder().getDefaultOptions();
     return fn;
 }
-export const colorful = makeStyle(Colorful);
-export const graybeard = makeStyle(Graybeard);
-export const neutrino = makeStyle(Neutrino);
+// generate style builders
+export const colorful = getStyleBuilder(Colorful);
+export const eclipse = getStyleBuilder(Eclipse);
+export const graybeard = getStyleBuilder(Graybeard);
+export const neutrino = getStyleBuilder(Neutrino);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@versatiles/style",
-  "version": "4.2.8",
+  "version": "4.4.0",
   "description": "Generate StyleJSON for MapLibre",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -46,26 +46,26 @@
     "@types/brace-expansion": "^1.1.2",
     "@types/inquirer": "^9.0.7",
     "@types/jest": "^29.5.12",
-    "@types/node": "^20.11.24",
+    "@types/node": "^20.12.4",
     "@types/tar-stream": "^3.1.3",
-    "@typescript-eslint/eslint-plugin": "^7.1.0",
-    "@typescript-eslint/parser": "^7.1.0",
+    "@typescript-eslint/eslint-plugin": "^7.5.0",
+    "@typescript-eslint/parser": "^7.5.0",
     "@versatiles/container": "^1.2.1",
     "@versatiles/release-tool": "^1.2.2",
     "bin-pack": "^1.0.2",
     "eslint": "^8.57.0",
-    "inquirer": "^9.2.15",
+    "inquirer": "^9.2.17",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "jest-ts-webcompat-resolver": "^1.0.0",
-    "npm-check-updates": "^16.14.15",
-    "rollup": "^4.12.0",
+    "npm-check-updates": "^16.14.18",
+    "rollup": "^4.14.0",
     "rollup-plugin-dts": "^6.1.0",
-    "sharp": "^0.33.2",
+    "sharp": "^0.33.3",
     "tar-stream": "^3.1.7",
     "ts-jest": "^29.1.2",
     "ts-node": "^10.9.2",
-    "tsx": "^4.7.1",
-    "typescript": "^5.3.3"
+    "tsx": "^4.7.2",
+    "typescript": "^5.4.4"
   }
 }