RD-901 Misc Spacebox fixes: (#207)

* RD-901 Misc Spacebox fixes:
- fix to account for layers being removed when setStyle is called
- adds "milyway-colored" preset
- exposes `getConfig` method to retrive
- update demos to show new method

* RD-901 Fix ts annotation in cubemaplayer.ts

* RD-901 Reduce some logging to dev only

* RD-901 Appease linter

---------

Co-authored-by: Les Moffat <[email protected]>

Author: lesbaa

README.md

@@ -616,6 +616,7 @@ Alternatively, you can provide a cubemap for a space backround using one of the
 - `milkyway`: Black half-transparent background with standard milkyway and stars. Space color changes the stars and milkyway color, background always stays black. 
 - `milkyway-subtle`: Black half-transparent background with subtle milkyway and less stars.   Space color changes the stars and milkyway color, background always stays black.Black half-transparent background with standard milkyway and stars.   Space color changes the stars and milkyway color, background always stays black.
 - `milkyway-bright`: Black half-transparent background with bright milkyway and more stars.   Space color changes the stars and milkyway color, background always stays black.
+- `milkyway-colored`: Full background image with natural space colors.   Space color doesn’t change anything (non transparent image).
 
 ```ts
 const map = new maptilersdk.Map({

demos/src/07-spacebox.ts

@@ -28,8 +28,10 @@ function main() {
     const color = input.value;
     console.log("Setting background color to:", color);
     map.setSpace({
+      ...map.getSpace()?.getConfig(),
       color, // or any other color
     });
+    console.log("Config: ", map.getSpace()?.getConfig());
   });
 
   const stopsSelection: { stops: [number, string][]; scale: number }[] = [
@@ -123,13 +125,17 @@ function main() {
 
   presetSelect.addEventListener("change", (e: Event) => {
     const select = e.target as HTMLSelectElement;
-    const { value, textContent } = select;
+    const { value } = select;
     const config = configs.find((c) => c.name === value);
     if (config) {
       console.log("Setting spacebox config:", config);
-      map.setSpace(config);
+      const currentConfig = map.getSpace()?.getConfig();
+      map.setSpace({
+        ...config,
+        color: currentConfig?.color,
+      } as CubemapDefinition);
     }
-    console.log("Selected preset:", textContent);
+    console.log("Current config:", map.getSpace()?.getConfig());
   });
 }
 

src/Map.ts

@@ -216,15 +216,22 @@ export class Map extends maplibregl.Map {
     return this.space;
   }
 
+  /**
+   * Sets the space for the map.
+   * @param {CubemapDefinition} space the `CubemapDefinition` options to set.
+   * @remarks This method, at present, ** overwrites ** the current config.
+   * If an option is not set it will internally revert to the default option
+   * unless explicitly set when calling.
+   */
   public setSpace(space: CubemapDefinition) {
     if (this.space) {
-      this.space.setCubemap(space);
+      void this.space.setCubemap(space);
       return;
     }
 
     this.space = new CubemapLayer(space);
 
-    this.once("load", () => {
+    void this.once("load", () => {
       const firstLayer = this.getLayersOrder()[0];
       if (this.space) {
         this.addLayer(this.space, firstLayer);
@@ -236,14 +243,50 @@ export class Map extends maplibregl.Map {
     if (!style.metadata?.maptiler?.space) {
       return;
     }
-    this.space?.setCubemap(style.metadata.maptiler.space);
+    const space = style.metadata.maptiler.space;
+
+    const updateSpace = () => {
+      if (this.space) {
+        const before = this.getLayersOrder()[0];
+        this.addLayer(this.space, before);
+        void this.space.setCubemap(space);
+      }
+    };
+
+    if (!this.styleInProcess) {
+      updateSpace();
+      return;
+    }
+
+    void this.once("style.load", () => {
+      updateSpace();
+    });
   }
 
   private setHaloFromStyle({ style }: { style: StyleSpecificationWithMetaData }) {
-    if (!style.metadata?.maptiler?.halo) {
+    const maptiler = style.metadata?.maptiler;
+
+    if (!maptiler?.halo) {
       return;
     }
-    void this.halo?.setGradient(style.metadata.maptiler.halo);
+
+    const updateHalo = () => {
+      if (this.halo) {
+        const beforeIndex = this.getLayersOrder().indexOf(this.space?.id ?? "") + 1;
+        const before = this.getLayersOrder()[beforeIndex];
+        this.addLayer(this.halo, before);
+        void this.halo.setGradient(maptiler.halo);
+      }
+    };
+
+    if (!this.styleInProcess) {
+      updateHalo();
+      return;
+    }
+
+    void this.once("style.load", () => {
+      updateHalo();
+    });
   }
 
   private setSpaceFromCurrentStyle() {
@@ -482,7 +525,6 @@ export class Map extends maplibregl.Map {
         this.setProjection({ type: "globe" });
       }
     });
-
     // Map centering and geolocation
     this.once("styledata", async () => {
       // Not using geolocation centering if...
@@ -963,18 +1005,18 @@ export class Map extends maplibregl.Map {
     const before = this.getLayersOrder()[0];
 
     if (typeof styleInfo.style !== "string" && !styleInfo.requiresUrlMonitoring) {
-      if (this.space) {
+      if (this.halo) {
         const styleWithMetaData = styleInfo.style as StyleSpecificationWithMetaData;
-        this.setSpaceFromStyle({ style: styleWithMetaData });
+        this.setHaloFromStyle({ style: styleWithMetaData });
       } else {
-        this.initSpace({ before });
+        this.initHalo({ before });
       }
 
-      if (this.halo) {
+      if (this.space) {
         const styleWithMetaData = styleInfo.style as StyleSpecificationWithMetaData;
-        this.setHaloFromStyle({ style: styleWithMetaData });
+        this.setSpaceFromStyle({ style: styleWithMetaData });
       } else {
-        this.initHalo({ before });
+        this.initSpace({ before });
       }
 
       return this;

src/custom-layers/CubemapLayer/CubemapLayer.ts

@@ -64,14 +64,19 @@ function configureOptions(inputOptions: CubemapLayerConstructorOptions | true, d
 
   const presetName = inputOptions.preset!;
 
-  if (!(presetName in cubemapPresets)) {
+  // "Unnecessary conditional"
+  // It _should_ be defined but we need to check anyway as the preset can come from an outside source
+  const presetIsUndefined = presetName === undefined;
+
+  if (!presetIsUndefined && !(presetName in cubemapPresets)) {
     throw new Error(`[CubemapLayer]: Invalid preset "${presetName}". Available presets: ${Object.keys(cubemapPresets).join(", ")}`);
   }
 
   // path / faces will not be defined at this point
   // so we don't need to delete them
   return {
     ...outputOptions,
+    // this _could_ be nullish_
     color: outputOptions.color ?? cubemapPresets[presetName].color ?? "hsl(233,100%,92%)",
   } as CubemapLayerConstructorOptions;
 }
@@ -171,6 +176,13 @@ class CubemapLayer implements CustomLayerInterface {
    */
   public currentFacesDefinitionKey: string = "";
 
+  /**
+   * The configuration options for the cubemap layer.
+   * @type {CubemapLayerConstructorOptions}
+   * @private
+   */
+  private options: CubemapLayerConstructorOptions;
+
   /**
    * Creates a new instance of CubemapLayer
    *
@@ -185,7 +197,7 @@ class CubemapLayer implements CustomLayerInterface {
    */
   constructor(cubemapConfig: CubemapLayerConstructorOptions | true) {
     const options = configureOptions(cubemapConfig, defaultConstructorOptions);
-
+    this.options = options;
     this.currentFacesDefinitionKey = JSON.stringify(options.faces ?? options.preset ?? options.path);
 
     this.bgColor = [0, 0, 0, 0];
@@ -240,6 +252,7 @@ class CubemapLayer implements CustomLayerInterface {
    */
   public onAdd(map: MapSDK, gl: WebGLRenderingContext | WebGL2RenderingContext): void {
     this.map = map;
+
     this.gl = gl;
     this.updateCubemap();
   }
@@ -251,7 +264,7 @@ class CubemapLayer implements CustomLayerInterface {
    * @param {MapSDK} _map - The map instance from which this layer is removed.
    * @param {WebGLRenderingContext | WebGL2RenderingContext} gl - The WebGL context used for rendering.
    */
-  public onRemove(_map: MapSDK, gl: WebGLRenderingContext | WebGL2RenderingContext): void {
+  public onRemove(_map: MapSDK, gl: WebGLRenderingContext | WebGL2RenderingContext) {
     if (this.cubemap) {
       gl.deleteProgram(this.cubemap.shaderProgram);
       gl.deleteBuffer(this.cubemap.positionBuffer);
@@ -290,7 +303,7 @@ class CubemapLayer implements CustomLayerInterface {
    * @param {CustomRenderMethodInput} _options - Additional options for the render method.
    */
   public prerender(gl: WebGLContext, _options: CustomRenderMethodInput): void {
-    this.updateTexture(gl, this.faces!);
+    if (this.faces) this.updateTexture(gl, this.faces!);
   }
 
   /**
@@ -303,9 +316,9 @@ class CubemapLayer implements CustomLayerInterface {
     const animateColorChange = () => {
       if (this.transitionDelta < 1.0) {
         requestAnimationFrame(animateColorChange);
-
         this.bgColor = lerpVec4(this.previousBgColor, this.targetBgColor, this.transitionDelta);
         this.transitionDelta += 0.075;
+
         this.map.triggerRepaint();
       }
     };
@@ -370,7 +383,6 @@ class CubemapLayer implements CustomLayerInterface {
         this.imageFadeInDelta = Math.min(this.imageFadeInDelta + 0.05, 1.0);
         this.currentFadeOpacity = lerp(1.0, 0.0, this.imageFadeInDelta);
         this.map.triggerRepaint();
-
         if (this.imageFadeInDelta >= 1.0) {
           this.imageIsAnimating = false;
           this.imageFadeInDelta = 0.0;
@@ -401,8 +413,8 @@ class CubemapLayer implements CustomLayerInterface {
       throw new Error("[CubemapLayer]: Cubemap is undefined");
     }
 
-    if (this.texture === undefined) {
-      console.warn("[CubemapLayer]: Texture is undefined, no teture will be rendered to cubemap");
+    if (this.texture === undefined && process.env.NODE_ENV === "development") {
+      console.warn("[CubemapLayer]: Texture is undefined, no texture will be rendered to cubemap");
     }
 
     gl.disable(gl.DEPTH_TEST);
@@ -447,15 +459,9 @@ class CubemapLayer implements CustomLayerInterface {
      */
     gl.uniform4fv(this.cubemap.programInfo.uniformsLocations.bgColor, new Float32Array(this.bgColor));
 
-    /**
-     * Texture
-     */
-    if (this.texture === undefined) {
-      console.warn("[CubemapLayer]: Texture is undefined, no texture will be rendered to cubemap");
-    }
+    gl.uniform1f(this.cubemap.programInfo.uniformsLocations.fadeOpacity, this.currentFadeOpacity);
 
     if (this.useCubemapTexture && this.texture) {
-      gl.uniform1f(this.cubemap.programInfo.uniformsLocations.fadeOpacity, this.currentFadeOpacity);
       gl.activeTexture(gl.TEXTURE0);
       gl.bindTexture(gl.TEXTURE_CUBE_MAP, this.texture);
       gl.uniform1i(this.cubemap.programInfo.uniformsLocations.cubeSampler, 0);
@@ -484,9 +490,25 @@ class CubemapLayer implements CustomLayerInterface {
     this.transitionDelta = 0.0;
   }
 
+  /**
+   * Returns the current configuration options for the cubemap layer.
+   * @returns {CubemapLayerConstructorOptions} The current configuration options.
+   */
+  public getConfig() {
+    return this.options;
+  }
+
   private async setCubemapFaces(cubemap: CubemapDefinition): Promise<void> {
     await this.animateOut();
 
+    if (!cubemap.faces && !cubemap.preset && !cubemap.path) {
+      this.faces = null;
+      this.useCubemapTexture = false;
+      this.currentFacesDefinitionKey = "";
+      this.animateIn();
+      return;
+    }
+
     this.faces = getCubemapFaces(cubemap);
     this.currentFacesDefinitionKey = JSON.stringify(cubemap.faces ?? cubemap.preset ?? cubemap.path);
   }
@@ -504,13 +526,16 @@ class CubemapLayer implements CustomLayerInterface {
    * Finally, it calls `updateCubemap` to apply the changes and trigger a repaint of the map.
    */
   public async setCubemap(cubemap: CubemapDefinition): Promise<void> {
+    this.options = cubemap;
+
     const facesKey = JSON.stringify(cubemap.faces ?? cubemap.preset ?? cubemap.path);
 
-    if (facesKey && this.currentFacesDefinitionKey !== facesKey) {
+    if (this.currentFacesDefinitionKey !== facesKey) {
       await this.setCubemapFaces(cubemap);
     }
 
     const color = parseColorStringToVec4(cubemap.color);
+
     if (cubemap.color && this.targetBgColor.toString() !== color.toString()) {
       this.setBgColor(color);
     } else if (cubemap.preset && cubemap.preset in cubemapPresets) {

src/custom-layers/CubemapLayer/types.ts

@@ -29,6 +29,10 @@ export const cubemapPresets: Record<string, CubemapDefinition> = {
     color: "hsl(233,100%,92%)",
     preset: "milkyway-bright",
   },
+  "milkyway-colored": {
+    color: "black",
+    preset: "milkyway-colored",
+  },
 };
 
 // This is not the most elegant but it's more readable than some of the alternatives.