@versatiles/style 5.8.3 → 5.8.4

package/src/shortbread/properties.test.ts

@@ -10,7 +10,7 @@ describe('propertyLookup', () => {
 	it('should contain keys for each type and property', () => {
 		const expectedTypes = ['background', 'fill', 'line', 'symbol'];
 
-		expectedTypes.forEach(type => {
+		expectedTypes.forEach((type) => {
 			propertyLookup.forEach((value, key) => {
 				if (key.startsWith(type)) {
 					expect(key).toMatch(new RegExp(`^${type}/`));
@@ -22,7 +22,7 @@ describe('propertyLookup', () => {
 	it('should contain the correct properties for each type', () => {
 		const expectedProps = ['filter', 'maxzoom', 'minzoom', 'visibility'];
 
-		expectedProps.forEach(prop => {
+		expectedProps.forEach((prop) => {
 			propertyLookup.forEach((value, key) => {
 				if (key.endsWith(prop)) {
 					expect(value.some((p: ShortbreadProperty) => p.key === prop)).toBeTruthy();
@@ -32,7 +32,7 @@ describe('propertyLookup', () => {
 	});
 
 	it('should store properties with the correct structure', () => {
-		propertyLookup.forEach(properties => {
+		propertyLookup.forEach((properties) => {
 			properties.forEach((prop: ShortbreadProperty) => {
 				expect(prop).toHaveProperty('key');
 				expect(prop).toHaveProperty('parent');
@@ -42,4 +42,3 @@ describe('propertyLookup', () => {
 		});
 	});
 });
-

package/src/shortbread/properties.ts

@@ -1,8 +1,18 @@
-
 export interface ShortbreadProperty {
 	readonly key: string;
 	readonly parent: 'layer' | 'layout' | 'paint';
-	readonly valueType: 'array' | 'boolean' | 'color' | 'enum' | 'filter' | 'fonts' | 'formatted' | 'number' | 'padding' | 'resolvedImage' | 'variableAnchorOffsetCollection';
+	readonly valueType:
+		| 'array'
+		| 'boolean'
+		| 'color'
+		| 'enum'
+		| 'filter'
+		| 'fonts'
+		| 'formatted'
+		| 'number'
+		| 'padding'
+		| 'resolvedImage'
+		| 'variableAnchorOffsetCollection';
 }
 
 type ShortbreadPropertyDef = ShortbreadProperty & {
@@ -65,7 +75,12 @@ const propertyDefs: ShortbreadPropertyDef[] = [
 	{ parent: 'layout', types: 'symbol', key: 'text-rotation-alignment', valueType: 'enum' },
 	{ parent: 'layout', types: 'symbol', key: 'text-size', short: 'size', valueType: 'number' },
 	{ parent: 'layout', types: 'symbol', key: 'text-transform', valueType: 'enum' },
-	{ parent: 'layout', types: 'symbol', key: 'text-variable-anchor-offset', valueType: 'variableAnchorOffsetCollection' },
+	{
+		parent: 'layout',
+		types: 'symbol',
+		key: 'text-variable-anchor-offset',
+		valueType: 'variableAnchorOffsetCollection',
+	},
 	{ parent: 'layout', types: 'symbol', key: 'text-variable-anchor', valueType: 'array' },
 	{ parent: 'layout', types: 'symbol', key: 'text-writing-mode', valueType: 'array' },
 
@@ -118,7 +133,6 @@ propertyDefs.forEach((propertyDef: ShortbreadPropertyDef) => {
 	const types: string = propertyDef.types;
 
 	types.split(',').forEach((type: string) => {
-
 		function add(propertyKey: string): void {
 			const key = type + '/' + propertyKey;
 			const property: ShortbreadProperty = {

package/src/shortbread/template.test.ts

@@ -19,8 +19,13 @@ describe('getShortbreadTemplate', () => {
 	});
 
 	it('specifies glyphs and sprite URLs correctly', () => {
-		expect(styleTemplate).toHaveProperty('glyphs', 'https://tiles.versatiles.org/assets/glyphs/{fontstack}/{range}.pbf');
-		expect(styleTemplate).toHaveProperty('sprite', [{ id: 'basics', url: 'https://tiles.versatiles.org/assets/sprites/basics/sprites' }]);
+		expect(styleTemplate).toHaveProperty(
+			'glyphs',
+			'https://tiles.versatiles.org/assets/glyphs/{fontstack}/{range}.pbf'
+		);
+		expect(styleTemplate).toHaveProperty('sprite', [
+			{ id: 'basics', url: 'https://tiles.versatiles.org/assets/sprites/basics/sprites' },
+		]);
 	});
 
 	it('defines sources with required properties', () => {

package/src/shortbread/template.ts

@@ -1,5 +1,5 @@
-import { StyleSpecification } from "@maplibre/maplibre-gl-style-spec";
-import { VectorLayer } from "../types/vector_layer.js";
+import { StyleSpecification } from '@maplibre/maplibre-gl-style-spec';
+import { VectorLayer } from '../types/vector_layer.js';
 
 const maxzoom = 14;
 
@@ -15,19 +15,12 @@ export function getShortbreadTemplate(): StyleSpecification {
 		sources: {
 			'versatiles-shortbread': {
 				attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
-				tiles: [
-					'https://tiles.versatiles.org/tiles/osm/{z}/{x}/{y}',
-				],
+				tiles: ['https://tiles.versatiles.org/tiles/osm/{z}/{x}/{y}'],
 				type: 'vector',
 				scheme: 'xyz',
-				bounds: [
-					-180,
-					-85.0511287798066,
-					180,
-					85.0511287798066,
-				],
+				bounds: [-180, -85.0511287798066, 180, 85.0511287798066],
 				minzoom: 0,
-				maxzoom
+				maxzoom,
 			},
 		},
 		layers: [],
@@ -339,5 +332,5 @@ export function getShortbreadVectorLayers(): VectorLayer[] {
 			minzoom: 14,
 			maxzoom,
 		},
-	]
-}
+	];
+}

package/src/style_builder/decorator.test.ts

@@ -11,11 +11,11 @@ describe('decorate function', () => {
 	];
 
 	const mockRules = {
-		'layer1': {
+		layer1: {
 			color: '#ff0000',
 			visibility: 'none',
 		},
-		'layer2': {
+		layer2: {
 			color: 'rgba(0, 255, 0, 0.5)',
 			visibility: 'visible',
 		},
@@ -31,7 +31,7 @@ describe('decorate function', () => {
 	it('should apply styles from rules to the corresponding layers', () => {
 		const result = decorate(mockLayers, mockRules, noRecolor);
 
-		result.forEach(layer => {
+		result.forEach((layer) => {
 			if (layer.id === 'layer1') {
 				expect(layer.paint).toHaveProperty('fill-color', 'rgb(255,0,0)');
 				expect(layer.layout).toHaveProperty('visibility', 'none');
@@ -45,7 +45,7 @@ describe('decorate function', () => {
 
 	it('should handle color conversion correctly', () => {
 		const colorRule = {
-			'layer1': {
+			layer1: {
 				paintColor: Color.parse('#ff0000'),
 			},
 		};

package/src/style_builder/decorator.ts

@@ -1,4 +1,3 @@
-
 import { Color } from '../color/index.js';
 import expandBraces from 'brace-expansion';
 import maplibreProperties from '../shortbread/properties.js';
@@ -7,10 +6,8 @@ import type { MaplibreLayer } from '../types/index.js';
 import type { StyleRule, StyleRuleValue, StyleRules } from './types.js';
 import type { CachedRecolor } from './recolor.js';
 
-
-
 export function decorate(layers: MaplibreLayer[], rules: StyleRules, recolor: CachedRecolor): MaplibreLayer[] {
-	const layerIds = layers.map(l => l.id);
+	const layerIds = layers.map((l) => l.id);
 	const layerIdSet = new Set(layerIds);
 
 	// Initialize a new map to hold final styles for layers
@@ -21,24 +18,24 @@ export function decorate(layers: MaplibreLayer[], rules: StyleRules, recolor: Ca
 		if (layerStyle == null) return;
 
 		// Expand any braces in IDs and filter them through a RegExp if necessary
-		const ids = expandBraces(idDef).flatMap(id => {
+		const ids = expandBraces(idDef).flatMap((id) => {
 			if (!id.includes('*')) return id;
-			const regExpString = id.replace(/[^a-z_:-]/g, c => {
+			const regExpString = id.replace(/[^a-z_:-]/g, (c) => {
 				if (c === '*') return '[a-z_-]*';
 				throw new Error('unknown char to process. Do not know how to make a RegExp from: ' + JSON.stringify(c));
 			});
 			const regExp = new RegExp(`^${regExpString}$`, 'i');
-			return layerIds.filter(layerId => regExp.test(layerId));
+			return layerIds.filter((layerId) => regExp.test(layerId));
 		});
 
-		ids.forEach(id => {
+		ids.forEach((id) => {
 			if (!layerIdSet.has(id)) return;
 			layerStyles.set(id, deepMerge(layerStyles.get(id) ?? {}, layerStyle));
 		});
 	});
 
 	// Deep clone the original layers and apply styles
-	return layers.flatMap(layer => {
+	return layers.flatMap((layer) => {
 		// Get the id and style of the layer
 		const layerStyle = layerStyles.get(layer.id);
 
@@ -52,30 +49,36 @@ export function decorate(layers: MaplibreLayer[], rules: StyleRules, recolor: Ca
 
 	// Function to process each style attribute for the layer
 	function processStyling(layer: MaplibreLayer, styleRule: StyleRule): void {
-
 		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 ruleKey = ruleKeyCamelCase.replace(/[A-Z]/g, (c) => '-' + c.toLowerCase());
 
 			const propertyDefs = maplibreProperties.get(layer.type + '/' + ruleKey);
 			if (!propertyDefs) continue;
 
-			propertyDefs.forEach(propertyDef => {
+			propertyDefs.forEach((propertyDef) => {
 				const { key } = propertyDef;
 				let value: StyleRuleValue = ruleValue;
 
 				switch (propertyDef.valueType) {
-					case 'color': value = processExpression(value, processColor); break;
-					case 'fonts': value = processExpression(value, processFont); break;
+					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}"`);
+					case 'number':
+						value = processExpression(value);
+						break;
+					default:
+						throw new Error(`unknown propertyDef.valueType "${propertyDef.valueType}" for key "${key}"`);
 				}
 
 				switch (propertyDef.parent) {
@@ -94,7 +97,6 @@ export function decorate(layers: MaplibreLayer[], rules: StyleRules, recolor: Ca
 						layer.paint[key] = value;
 						break;
 					default:
-
 						throw new Error(`unknown parent "${propertyDef.parent}" for key "${key}"`);
 				}
 			});
@@ -104,7 +106,7 @@ export function decorate(layers: MaplibreLayer[], rules: StyleRules, recolor: Ca
 			if (typeof value === 'string') value = Color.parse(value);
 			if (value instanceof Color) {
 				const color = recolor.do(value as Color);
-				return color.asString()
+				return color.asString();
 			}
 			throw new Error(`unknown color type "${typeof value}"`);
 		}
@@ -114,7 +116,10 @@ export function decorate(layers: MaplibreLayer[], rules: StyleRules, recolor: Ca
 			throw new Error(`unknown font type "${typeof value}"`);
 		}
 
-		function processExpression(value: StyleRuleValue, cbValue?: (value: StyleRuleValue) => StyleRuleValue): StyleRuleValue {
+		function processExpression(
+			value: StyleRuleValue,
+			cbValue?: (value: StyleRuleValue) => StyleRuleValue
+		): StyleRuleValue {
 			if (typeof value === 'object') {
 				if (value instanceof Color) return processColor(value);
 				if (!Array.isArray(value)) {
@@ -124,7 +129,10 @@ export function decorate(layers: MaplibreLayer[], rules: StyleRules, recolor: Ca
 			return cbValue ? cbValue(value) : value;
 		}
 
-		function processZoomStops(obj: Record<string, StyleRuleValue>, cbValue?: (value: StyleRuleValue) => StyleRuleValue): { stops: StyleRuleValue[] } {
+		function processZoomStops(
+			obj: Record<string, StyleRuleValue>,
+			cbValue?: (value: StyleRuleValue) => StyleRuleValue
+		): { stops: StyleRuleValue[] } {
 			return {
 				stops: Object.entries(obj)
 					.map(([z, v]) => [parseInt(z, 10), cbValue ? cbValue(v) : v] as [number, StyleRuleValue])
@@ -132,4 +140,4 @@ export function decorate(layers: MaplibreLayer[], rules: StyleRules, recolor: Ca
 			};
 		}
 	}
-}
+}

package/src/style_builder/recolor.test.ts

@@ -2,7 +2,6 @@ import { describe, expect, it } from 'vitest';
 import { Color } from '../color/index.js';
 import { CachedRecolor, getDefaultRecolorFlags, recolorArray, recolorObject } from './recolor.js';
 
-
 describe('recolor', () => {
 	describe('getDefaultRecolorFlags', () => {
 		it('should return the default color transformer flags', () => {
@@ -120,7 +119,7 @@ describe('recolor', () => {
 			recolorArray(colors, { contrast: Infinity });
 			expect(colors2string(colors)).toBe('FFFF0000,00FFFF55,0000FFAA,FF0000,FF0000');
 		});
-	})
+	});
 
 	describe('brightness', () => {
 		it('should remove any brightness', () => {
@@ -266,13 +265,7 @@ describe('recolorArray', () => {
 	it('should recolor an array of colors with valid options', () => {
 		const colors = getTestColors();
 		recolorArray(colors, { rotate: 120 });
-		expect(colors.map((c) => c.asHex())).toEqual([
-			'#55FFAA00',
-			'#AA00FF55',
-			'#FF5500AA',
-			'#00AA55',
-			'#55AA77',
-		]);
+		expect(colors.map((c) => c.asHex())).toEqual(['#55FFAA00', '#AA00FF55', '#FF5500AA', '#00AA55', '#55AA77']);
 	});
 
 	it('should not alter the array if options are invalid', () => {
@@ -285,22 +278,10 @@ describe('recolorArray', () => {
 	it('should handle multiple transformations on the same array', () => {
 		const colors = getTestColors();
 		recolorArray(colors, { saturate: 0.5 });
-		expect(colors.map((c) => c.asHex())).toEqual([
-			'#FFAA5500',
-			'#00FFAA55',
-			'#5500FFAA',
-			'#AA5500',
-			'#BF7340',
-		]);
+		expect(colors.map((c) => c.asHex())).toEqual(['#FFAA5500', '#00FFAA55', '#5500FFAA', '#AA5500', '#BF7340']);
 
 		recolorArray(colors, { brightness: 0.5 });
-		expect(colors.map((c) => c.asHex())).toEqual([
-			'#FFD5AA00',
-			'#80FFD555',
-			'#AA80FFAA',
-			'#D5AA80',
-			'#DFB99F',
-		]);
+		expect(colors.map((c) => c.asHex())).toEqual(['#FFD5AA00', '#80FFD555', '#AA80FFAA', '#D5AA80', '#DFB99F']);
 	});
 });
 
@@ -339,15 +320,9 @@ describe('CachedRecolor', () => {
 });
 
 function getTestColors(): Color[] {
-	return [
-		Color.parse('#FA50'),
-		Color.parse('#0FA5'),
-		Color.parse('#50FA'),
-		Color.parse('#A50F'),
-		Color.parse('#A75F'),
-	];
+	return [Color.parse('#FA50'), Color.parse('#0FA5'), Color.parse('#50FA'), Color.parse('#A50F'), Color.parse('#A75F')];
 }
 
 function colors2string(colors: Color[]): string {
-	return colors.map(c => c.asHex().slice(1)).join(',');
+	return colors.map((c) => c.asHex().slice(1)).join(',');
 }

package/src/style_builder/recolor.ts

@@ -7,7 +7,7 @@ import { Color } from '../color/index.js';
 
 /**
  * Configuration options for recoloring all map colors.
- * 
+ *
  * The transformations (if specified) are done in the following order:
  * 1. [Invert brightness](#invertbrightness)
  * 2. [Rotate hue](#rotate)
@@ -29,7 +29,7 @@ import { Color } from '../color/index.js';
  *   }
  * };
  * ```
- * 
+ *
  * If you want do make you map simply brighter or darker, you can use the `blend` option:
  * ```typescript
  * const style = VersaTilesStyle.colorful({
@@ -40,77 +40,77 @@ import { Color } from '../color/index.js';
  *   }
  * };
  * ```
- * 
+ *
  */
 
 export interface RecolorOptions {
-	/** 
+	/**
 	 * If true, inverts all colors' brightness.
 	 * See also {@link HSL.invertLuminosity}
-	*/
+	 */
 	invertBrightness?: boolean;
 
-	/** 
+	/**
 	 * Rotate the hue of all colors in degrees (0-360).
 	 * See also {@link HSL.rotateHue}
 	 */
 	rotate?: number;
 
-	/** 
+	/**
 	 * Adjust the saturation level. Positive values increase, negative values decrease saturation.
 	 * |value|effect           |
 	 * |----:|-----------------|
 	 * |   -1|grayscale        |
 	 * |    0|no effect        |
 	 * |    1|double saturation|
-	 * 
+	 *
 	 * See also {@link HSL.saturate}
 	 */
 	saturate?: number;
 
 	/**
-	 * Adjust the gamma (non-linear brightness adjustment).  
-	 * Defaults to 1.   
+	 * Adjust the gamma (non-linear brightness adjustment).
+	 * Defaults to 1.
 	 * See also {@link RGB.gamma}
 	 */
 	gamma?: number;
 
 	/**
-	 * Adjust the contrast level.  
-	 * Values > 1 increase contrast, values < 1 decrease it.  
-	 * Defaults to 1.  
+	 * Adjust the contrast level.
+	 * Values > 1 increase contrast, values < 1 decrease it.
+	 * Defaults to 1.
 	 * See also {@link RGB.contrast}
 	 */
 	contrast?: number;
 
 	/**
-	 * Adjust the brightness level.  
-	 * Positive values make it brighter, negative values make it darker.  
-	 * Defaults to 0.  
+	 * Adjust the brightness level.
+	 * Positive values make it brighter, negative values make it darker.
+	 * Defaults to 0.
 	 *	See also {@link RGB.brightness}
 	 */
 	brightness?: number;
 
 	/**
-	 * Intensity of the tinting effect (0 = none, 1 = full effect). 
+	 * Intensity of the tinting effect (0 = none, 1 = full effect).
 	 * See also {@link RGB.tint}
 	 */
 	tint?: number;
 
 	/**
-	 * The tinting color in hex format (default: '#FF0000'). 
+	 * The tinting color in hex format (default: '#FF0000').
 	 * See also {@link RGB.tint}
 	 */
 	tintColor?: string;
 
 	/**
-	 * Intensity of the blending effect (0 = none, 1 = full effect). 
+	 * Intensity of the blending effect (0 = none, 1 = full effect).
 	 * See also {@link RGB.blend}
 	 */
 	blend?: number;
 
 	/**
-	 * The blending color in hex format (default: '#000000'). 
+	 * The blending color in hex format (default: '#000000').
 	 *	See also {@link RGB.blend}
 	 */
 	blendColor?: string;

package/src/style_builder/style_builder.test.ts

@@ -12,7 +12,7 @@ class MockStyleBuilder extends Colorful {
 	public defaultFonts = { regular: 'Arial', bold: 'Courier' };
 
 	public invertColors(): void {
-		this.transformDefaultColors(color => color.invert());
+		this.transformDefaultColors((color) => color.invert());
 	}
 
 	protected getStyleRules(opt: StyleRulesOptions): StyleRules {
@@ -59,18 +59,55 @@ describe('StyleBuilder', () => {
 
 	it('should create default options', () => {
 		expect(builder.getDefaultOptions()).toStrictEqual({
-			baseUrl: '',
-			bounds: [
-				-180, 
-				-85.0511287798066, 
-				180, 
-				85.0511287798066
-			],
-			colors: expect.any(Object),
+			baseUrl: 'https://tiles.versatiles.org',
+			bounds: [-180, -85.0511287798066, 180, 85.0511287798066],
+			colors: {
+				agriculture: '#F0E7D1',
+				boundary: '#A6A6C8',
+				building: '#F2EAE2',
+				buildingbg: '#DFDBD7',
+				burial: '#DDDBCA',
+				commercial: '#F7DEED40',
+				construction: '#A9A9A9',
+				cycle: '#EFF9FF',
+				danger: '#FF0000',
+				disputed: '#BEBCCF',
+				education: '#FFFF80',
+				foot: '#FBEBFF',
+				glacier: '#FFFFFF',
+				grass: '#D8E8C8',
+				hospital: '#FF6666',
+				industrial: '#FFF4C255',
+				label: '#333344',
+				labelHalo: '#FFFFFFCC',
+				land: '#F9F4EE',
+				leisure: '#E7EDDE',
+				motorway: '#FFCC88',
+				motorwaybg: '#E9AC77',
+				park: '#D9D9A5',
+				parking: '#EBE8E6',
+				poi: '#555555',
+				prison: '#FDF2FC',
+				rail: '#B1BBC4',
+				residential: '#EAE6E133',
+				rock: '#E0E4E5',
+				sand: '#FAFAED',
+				shield: '#FFFFFF',
+				street: '#FFFFFF',
+				streetbg: '#CFCDCA',
+				subway: '#A6B8C7',
+				symbol: '#66626A',
+				trunk: '#FFEEAA',
+				trunkbg: '#E9AC77',
+				waste: '#DBD6BD',
+				water: '#BEDDF3',
+				wetland: '#D3E6DB',
+				wood: '#66AA44',
+			},
 			fonts: { regular: 'Arial', bold: 'Courier' },
-			glyphs: '',
+			glyphs: '/assets/glyphs/{fontstack}/{range}.pbf',
 			hideLabels: false,
-			language: undefined,
+			language: '',
 			recolor: {
 				brightness: 0,
 				contrast: 1,
@@ -83,8 +120,8 @@ describe('StyleBuilder', () => {
 				blend: 0,
 				blendColor: '#000000',
 			},
-			sprite: '',
-			tiles: [],
+			sprite: [{ id: 'basics', url: '/assets/sprites/basics/sprites' }],
+			tiles: ['/tiles/osm/{z}/{x}/{y}'],
 		});
 	});