fix(config-loader): allow rgb color objects

packages/config-loader/src/json/__tests__/tiff.load.test.ts

@@ -1,11 +1,12 @@
 import assert from 'node:assert';
 import { before, describe, it } from 'node:test';
 
-import { DefaultTerrainRgbOutput } from '@basemaps/config';
+import { ConfigTileSetRaster, DefaultTerrainRgbOutput, TileSetType } from '@basemaps/config';
 import { fsa, FsMemory, LogConfig } from '@basemaps/shared';
 import pLimit from 'p-limit';
 
 import { ConfigJson } from '../json.config.js';
+import { TileSetConfigSchema } from '../parse.tile.set.js';
 import { ConfigImageryTiff } from '../tiff.config.js';
 
 describe('tiff-loader', () => {
@@ -190,4 +191,29 @@ describe('tiff-loader', () => {
     const filesB = await fsa.toArray(fsa.details(fsa.toUrl('tmp://cache/')));
     assert.equal(filesB.length, 1);
   });
+
+  it('should support rgba color objects ', async () => {
+    const ts: TileSetConfigSchema = {
+      id: 'ts_dem',
+      type: TileSetType.Raster,
+      title: 'GoogleExample',
+      layers: [{ 3857: 'source://source/dem/', title: 'elevation-title', name: 'elevation-name' }],
+      background: { r: 255, g: 0, b: 255, alpha: 1 },
+      outputs: [DefaultTerrainRgbOutput],
+    };
+
+    const cfgUrl = new URL('tmp://config/ts_google.json');
+    await fsa.write(cfgUrl, JSON.stringify(ts));
+
+    const cfg = await ConfigJson.fromUrl(cfgUrl, pLimit(10), LogConfig.get(), new URL('tmp://cache/'));
+    const tsOut = (await cfg.TileSet.get('ts_dem')) as ConfigTileSetRaster;
+    assert.deepEqual(tsOut.background, { r: 255, g: 0, b: 255, alpha: 1 });
+
+    (ts as any).background = '#ff00ffff';
+    await fsa.write(cfgUrl, JSON.stringify(ts));
+
+    const cfgStr = await ConfigJson.fromUrl(cfgUrl, pLimit(10), LogConfig.get(), new URL('tmp://cache/'));
+    const tsOutStr = (await cfgStr.TileSet.get('ts_dem')) as ConfigTileSetRaster;
+    assert.deepEqual(tsOutStr.background, { r: 255, g: 0, b: 255, alpha: 255 });
+  });
 });

packages/config-loader/src/json/json.config.ts

@@ -10,7 +10,6 @@ import {
   ConfigProviderMemory,
   ConfigTileSet,
   ConfigVectorStyle,
-  parseRgba,
   sha256base58,
   StyleJson,
   TileSetType,
@@ -247,9 +246,7 @@ export class ConfigJson {
     if (ts.maxZoom) tileSet.maxZoom = ts.maxZoom;
     if (tileSet.type === TileSetType.Raster) {
       if (ts.outputs) tileSet.outputs = ts.outputs;
-      if (ts.background) {
-        tileSet.background = parseRgba(ts.background);
-      }
+      if (ts.background) tileSet.background = ts.background;
     }
 
     if (ts.format) {

packages/config-loader/src/json/parse.tile.set.ts

@@ -10,7 +10,24 @@ export function validateColor(str: string): boolean {
   }
 }
 
-const zBackground = z.string().refine(validateColor, { message: 'Invalid hex color' });
+/**
+ * parse a RGB alpha color object
+ *
+ * TODO: Current {@link parseRgba} defaults all values to 0 if they do not exist, this expects all values to exist
+ */
+const rgbaObject = z.object({
+  r: z.number(),
+  g: z.number(),
+  b: z.number(),
+  alpha: z.number(),
+});
+
+const hexColorString = z
+  .string()
+  .refine(validateColor, { message: 'Invalid hex color' })
+  .transform((f) => parseRgba(f));
+
+const zBackground = z.union([hexColorString, rgbaObject]);
 
 export const ImageryConfigDefaults = {
   minZoom: 0,