@versatiles/style 4.2.8 → 4.3.0

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,5 +1,4 @@
-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;
@@ -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

@@ -11,81 +11,108 @@ export function getDefaultRecolorFlags() {
         tintColor: '#FF0000',
     };
 }
-export function recolor(colors, opt) {
+function isValidRecolorOptions(opt) {
     if (!opt)
+        return false;
+    if ((opt.invert != null) && opt.invert)
+        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;
+    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.invert ?? false)
-        invert();
+        color = color.negate();
     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));
-    }
-    function gamma(value) {
+        color = tint(color, opt.tint, Color(opt.tintColor));
+    return color;
+    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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@versatiles/style",
-  "version": "4.2.8",
+  "version": "4.3.0",
   "description": "Generate StyleJSON for MapLibre",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",