@versatiles/style 3.4.0

package/dist/lib/style_builder.js

@@ -0,0 +1,84 @@
+// Import necessary modules and files
+import Color from 'color';
+import getShortbreadTemplate from './shortbread/template.js';
+import getShortbreadLayers from './shortbread/layers.js';
+import { decorate } from './decorator.js';
+import { getDefaultRecolorFlags, recolor } from './recolor.js';
+// Stylemaker class definition
+export default class StyleBuilder {
+    baseUrl;
+    glyphsUrl = '/assets/fonts/{fontstack}/{range}.pbf';
+    spriteUrl = '/assets/sprites/sprites';
+    tilesUrls = ['/tiles/osm/{z}/{x}/{y}'];
+    hideLabels = false;
+    languageSuffix = '';
+    recolor = getDefaultRecolorFlags();
+    #sourceName = 'versatiles-shortbread';
+    // Constructor
+    constructor() {
+        try {
+            // @ts-expect-error: I'm not sure if I'm in a browser
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+            this.baseUrl = document.location.href;
+        }
+        catch (e) {
+            this.baseUrl = 'https://tiles.versatiles.org'; // set me in the browser
+        }
+    }
+    build() {
+        // get empty shortbread style
+        const style = getShortbreadTemplate();
+        const colors = Object.fromEntries(Object.entries(this.colors)
+            .map(([name, colorString]) => [name, Color(colorString)]));
+        // transform colors
+        recolor(colors, this.recolor);
+        // get layer style rules from child class
+        const layerStyleRules = this.getStyleRules({
+            colors,
+            fonts: this.fonts,
+            languageSuffix: this.languageSuffix,
+        });
+        // get shortbread layers
+        let layers = getShortbreadLayers({ languageSuffix: this.languageSuffix });
+        // apply layer rules
+        layers = decorate(layers, layerStyleRules);
+        // hide labels, if wanted
+        if (this.hideLabels)
+            layers = layers.filter(l => l.type !== 'symbol');
+        // set source, if needed
+        layers.forEach(layer => {
+            switch (layer.type) {
+                case 'background':
+                    delete layer.source;
+                    return;
+                case 'fill':
+                case 'line':
+                case 'symbol':
+                    layer.source = this.#sourceName;
+                    return;
+            }
+            throw Error('unknown layer type');
+        });
+        style.layers = layers;
+        style.name = 'versatiles-' + this.name;
+        style.glyphs = resolveUrl(this.baseUrl, this.glyphsUrl);
+        style.sprite = resolveUrl(this.baseUrl, this.spriteUrl);
+        const source = style.sources[this.#sourceName];
+        if ('tiles' in source)
+            source.tiles = this.tilesUrls.map(url => resolveUrl(this.baseUrl, url));
+        return style;
+        function resolveUrl(baseUrl, url) {
+            if (!Boolean(baseUrl))
+                return url;
+            url = new URL(url, baseUrl).href;
+            url = url.replace(/%7B/gi, '{');
+            url = url.replace(/%7D/gi, '}');
+            return url;
+        }
+    }
+    resetColors(callback) {
+        const colors = Object.fromEntries(Object.entries(this.colors)
+            .map(([name, color]) => [name, callback(Color(color)).hexa()]));
+        this.colors = colors;
+    }
+}

package/dist/lib/style_builder.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/lib/style_builder.test.js

@@ -0,0 +1,77 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+import Color from 'color';
+import StyleBuilder from './style_builder.js';
+// Mock class for abstract class StyleBuilder
+class MockStyleBuilder extends StyleBuilder {
+    name = 'mock';
+    fonts = { regular: 'Arial' };
+    colors = { primary: '#FF8800' };
+    negateColors() {
+        this.resetColors((color) => color.negate());
+    }
+    getStyleRules(opt) {
+        for (const color of Object.values(opt.colors))
+            if (!(color instanceof Color))
+                throw Error();
+        for (const font of Object.values(opt.fonts))
+            if (typeof font !== 'string')
+                throw Error();
+        return {
+            'water-area': {
+                textColor: opt.colors.primary,
+                textSize: 12,
+                textFont: [opt.fonts.Arial],
+            },
+        };
+    }
+}
+describe('StyleBuilder', () => {
+    // eslint-disable-next-line @typescript-eslint/init-declarations
+    let builder;
+    beforeEach(() => {
+        builder = new MockStyleBuilder();
+    });
+    it('should create an instance of StyleBuilder', () => {
+        expect(builder).toBeInstanceOf(StyleBuilder);
+    });
+    it('should build a MaplibreStyle object', () => {
+        const style = builder.build();
+        expect(style).toBeDefined();
+        expect(style).toHaveProperty('name');
+        expect(style).toHaveProperty('layers');
+        expect(style).toHaveProperty('glyphs');
+        expect(style).toHaveProperty('sprite');
+    });
+    it('should reset colors correctly', () => {
+        const initialColor = builder.colors.primary;
+        builder.negateColors();
+        expect(builder.colors.primary).not.toBe(initialColor);
+        expect(builder.colors.primary).toBe(Color(initialColor).negate().hexa());
+    });
+    describe('build method', () => {
+        it('should create a style object', () => {
+            const style = builder.build();
+            expect(style).toBeDefined();
+            expect(style).toHaveProperty('layers');
+            expect(style).toHaveProperty('name');
+            expect(style).toHaveProperty('glyphs');
+            expect(style).toHaveProperty('sprite');
+        });
+        it('should convert color strings to Color instances', () => {
+            builder.build();
+            const colors = Object.values(builder.colors);
+            expect(colors.every((color) => typeof color === 'string')).toBe(true);
+        });
+        it('should resolve urls correctly', () => {
+            builder.baseUrl = 'https://my.base.url/';
+            const style = builder.build();
+            expect(style.glyphs).toBe('https://my.base.url/assets/fonts/{fontstack}/{range}.pbf');
+            expect(style.sprite).toBe('https://my.base.url/assets/sprites/sprites');
+            const source = style.sources['versatiles-shortbread'];
+            expect(source).toHaveProperty('tiles');
+            if (!source.tiles)
+                return;
+            expect(source.tiles[0]).toBe('https://my.base.url/tiles/osm/{z}/{x}/{y}');
+        });
+    });
+});

package/dist/lib/utils.d.ts

@@ -0,0 +1,4 @@
+export declare function deepClone<T>(obj: T): T;
+export declare function isSimpleObject(item: unknown): boolean;
+export declare function isBasicType(item: unknown): boolean;
+export declare function deepMerge<T extends object>(source0: T, ...sources: T[]): T;

package/dist/lib/utils.js

@@ -0,0 +1,106 @@
+import Color from 'color';
+// Utility function to deep clone an object
+export function deepClone(obj) {
+    const type = typeof obj;
+    if (type !== 'object') {
+        switch (type) {
+            case 'boolean':
+            case 'number':
+            case 'string':
+            case 'undefined':
+                return obj;
+            default: throw new Error(`Not implemented yet: "${type}" case`);
+        }
+    }
+    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) {
+        // @ts-expect-error: Too complicated to handle
+        return Color(obj);
+    }
+    console.log('obj', obj);
+    console.log('obj.prototype', Object.getPrototypeOf(obj));
+    throw Error();
+}
+export function isSimpleObject(item) {
+    if (item === null)
+        return false;
+    if (typeof item !== 'object')
+        return false;
+    if (Array.isArray(item))
+        return false;
+    const prototypeKeyCount = Object.keys(Object.getPrototypeOf(item)).length;
+    if (prototypeKeyCount !== 0)
+        return false;
+    if (item.constructor.name !== 'Object')
+        return false;
+    return true;
+}
+export function isBasicType(item) {
+    switch (typeof item) {
+        case 'boolean':
+        case 'number':
+        case 'string':
+        case 'undefined':
+            return true;
+        case 'object':
+            return false;
+        default:
+            throw Error('unknown type: ' + typeof item);
+    }
+}
+export function deepMerge(source0, ...sources) {
+    const target = deepClone(source0);
+    for (const source of sources) {
+        if (typeof source !== 'object')
+            continue;
+        for (const key in source) {
+            if (!Object.hasOwn(source, key))
+                continue;
+            const sourceValue = source[key];
+            // *********
+            // overwrite
+            // *********
+            switch (typeof sourceValue) {
+                case 'number':
+                case 'string':
+                case 'boolean':
+                    target[key] = sourceValue;
+                    continue;
+                default:
+            }
+            if (isBasicType(target[key])) {
+                target[key] = deepClone(sourceValue);
+                continue;
+            }
+            if (sourceValue instanceof Color) {
+                // @ts-expect-error: Too complicated to handle
+                target[key] = Color(sourceValue);
+                continue;
+            }
+            if (isSimpleObject(target[key]) && isSimpleObject(sourceValue)) {
+                // @ts-expect-error: Too complicated to handle
+                target[key] = deepMerge(target[key], sourceValue);
+                continue;
+            }
+            // *********
+            // merge
+            // *********
+            if (isSimpleObject(target[key]) && isSimpleObject(sourceValue)) {
+                // @ts-expect-error: Too complicated to handle
+                target[key] = deepMerge(target[key], sourceValue);
+                continue;
+            }
+            console.log('target[key]:', target[key]);
+            console.log('source[key]:', source[key]);
+            throw Error('unpredicted case');
+        }
+    }
+    return target;
+}

package/dist/lib/utils.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/lib/utils.test.js

@@ -0,0 +1,97 @@
+import { deepClone, isSimpleObject, isBasicType, deepMerge } from './utils.js';
+import Color from 'color';
+describe('Utilities tests', () => {
+    describe('deepClone', () => {
+        it('clones primitive types correctly', () => {
+            expect(deepClone(10)).toBe(10);
+            expect(deepClone(true)).toBe(true);
+            expect(deepClone('string')).toBe('string');
+        });
+        it('clones an array correctly', () => {
+            const array = [1, 2, { a: 'b' }];
+            const clonedArray = deepClone(array);
+            expect(clonedArray).toEqual(array);
+            expect(clonedArray).not.toBe(array);
+        });
+        it('clones a simple object correctly', () => {
+            const obj = { a: 'b', c: 1, d: true };
+            const clonedObj = deepClone(obj);
+            expect(clonedObj).toEqual(obj);
+            expect(clonedObj).not.toBe(obj);
+        });
+        it('clones a Color instance correctly', () => {
+            const color = new Color('#FF5733');
+            const clonedColor = deepClone(color);
+            expect(clonedColor.hex()).toBe(color.hex());
+        });
+        it('throws an error for non-implemented types', () => {
+            const func = () => true;
+            expect(() => deepClone(func)).toThrow('Not implemented yet: "function" case');
+        });
+    });
+    describe('isSimpleObject', () => {
+        it('identifies simple objects correctly', () => {
+            expect(isSimpleObject({ a: 1 })).toBe(true);
+        });
+        it('rejects non-objects', () => {
+            expect(isSimpleObject(1)).toBe(false);
+            expect(isSimpleObject('a')).toBe(false);
+            expect(isSimpleObject(true)).toBe(false);
+        });
+        it('rejects arrays', () => {
+            expect(isSimpleObject([1, 2, 3])).toBe(false);
+        });
+        it('rejects objects with prototype properties', () => {
+            class MyClass {
+                #property = true;
+            }
+            expect(isSimpleObject(new MyClass())).toBe(false);
+        });
+    });
+    describe('isBasicType', () => {
+        it('returns true for basic types', () => {
+            expect(isBasicType(1)).toBe(true);
+            expect(isBasicType('string')).toBe(true);
+            expect(isBasicType(true)).toBe(true);
+            expect(isBasicType(undefined)).toBe(true);
+        });
+        it('returns false for objects', () => {
+            expect(isBasicType({})).toBe(false);
+            expect(isBasicType([])).toBe(false);
+        });
+        it('throws error for functions', () => {
+            expect(() => isBasicType(() => true)).toThrow();
+        });
+    });
+    describe('deepMerge', () => {
+        it('merges simple objects correctly', () => {
+            const target = { a: 1, b: 2 };
+            const source = { b: 3, c: 4 };
+            const result = deepMerge(target, source);
+            expect(result).toEqual({ a: 1, b: 3, c: 4 });
+        });
+        it('merges nested objects correctly', () => {
+            const target = { a: { d: 4 }, b: 2 };
+            const source = { a: { e: 5 }, b: 3 };
+            const result = deepMerge(target, source);
+            expect(result).toEqual({ a: { d: 4, e: 5 }, b: 3 });
+        });
+        it('overrides primitives with object types', () => {
+            const target = { a: 1, b: 2 };
+            const source = { a: { d: 4 }, b: { e: 5 } };
+            const result = deepMerge(target, source);
+            expect(result).toEqual({ a: { d: 4 }, b: { e: 5 } });
+        });
+        it('merges Color instances correctly', () => {
+            const target = { color: new Color('#FF5733') };
+            const source = { color: new Color('#33FF57') };
+            const result = deepMerge(target, source);
+            expect(result.color.hex()).toBe(source.color.hex());
+        });
+        it('throws error for unpredicted cases', () => {
+            const target = { a: () => false };
+            const source = { a: { b: 1 } };
+            expect(() => deepMerge(target, source)).toThrow('Not implemented yet: "function" case');
+        });
+    });
+});

package/dist/styles/colorful.d.ts

@@ -0,0 +1,53 @@
+import StyleBuilder from '../lib/style_builder.js';
+import type { StyleRules, StyleRulesOptions } from '../lib/style_builder.js';
+export default class Colorful extends StyleBuilder {
+    readonly name: string;
+    fonts: {
+        regular: string;
+        bold: string;
+    };
+    colors: {
+        land: string;
+        water: string;
+        glacier: string;
+        wood: string;
+        grass: string;
+        park: string;
+        street: string;
+        streetbg: string;
+        motorway: string;
+        motorwaybg: string;
+        trunk: string;
+        trunkbg: string;
+        buildingbg: string;
+        building: string;
+        boundary: string;
+        disputed: string;
+        residential: string;
+        commercial: string;
+        industrial: string;
+        foot: string;
+        label: string;
+        labelHalo: string;
+        shield: string;
+        agriculture: string;
+        rail: string;
+        subway: string;
+        cycle: string;
+        waste: string;
+        burial: string;
+        sand: string;
+        rock: string;
+        leisure: string;
+        wetland: string;
+        symbol: string;
+        danger: string;
+        prison: string;
+        parking: string;
+        construction: string;
+        education: string;
+        hospital: string;
+        poi: string;
+    };
+    protected getStyleRules(options: StyleRulesOptions): StyleRules;
+}