Added method to set clearColor during runtime

examples/tests/dynamic-settings.ts

@@ -0,0 +1,61 @@
+/*
+ * If not stated otherwise in this file or this component's LICENSE file the
+ * following copyright and licenses apply:
+ *
+ * Copyright 2023 Comcast Cable Communications Management, LLC.
+ *
+ * Licensed under the Apache License, Version 2.0 (the License);
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { ExampleSettings } from '../common/ExampleSettings.js';
+
+export default async function ({ renderer, testRoot }: ExampleSettings) {
+  let currentColor = 0x00000000; // Transparent
+  renderer.createNode({
+    x: 100,
+    y: 100,
+    width: 250,
+    height: 250,
+    color: 0xffffffff,
+    parent: testRoot,
+  });
+
+  window.addEventListener('keydown', (e) => {
+    const colors: number[] = [
+      0x00000000, // Transparent
+      0xff0000ff, // Red
+      0x00ff00ff, // Green
+      0x0000ffff, // Blue
+      0xffff00ff, // Yellow
+      0xff00ffff, // Magenta
+      0x00ffffff, // Cyan
+      0x000000ff, // Black
+      0xffffffff, // White
+      0x808080ff, // Gray
+      0x800000ff, // Maroon
+    ];
+
+    if (e.key === 'ArrowLeft') {
+      const currentIndex = colors.indexOf(currentColor);
+      const previousIndex = (currentIndex - 1 + colors.length) % colors.length;
+      currentColor = colors[previousIndex] ?? 0xff0000ff;
+      renderer.setClearColor(currentColor);
+    } else if (e.key === 'ArrowRight') {
+      const currentIndex = colors.indexOf(currentColor);
+      const nextIndex = (currentIndex + 1) % colors.length;
+      currentColor = colors[nextIndex] ?? 0xff0000ff;
+      renderer.setClearColor(currentColor);
+    }
+  });
+  console.log('ready!');
+}

src/core/Stage.ts

@@ -266,6 +266,11 @@ export class Stage {
     }
   }
 
+  setClearColor(color: number) {
+    this.renderer.updateClearColor(color);
+    this.renderRequested = true;
+  }
+
   updateFrameTime() {
     const newFrameTime = getTimeStamp();
     this.lastFrameTime = this.currentFrameTime;

src/core/renderers/CoreRenderer.ts

@@ -110,4 +110,5 @@ export abstract class CoreRenderer {
   abstract renderToTexture(node: CoreNode): void;
   abstract getBufferInfo(): BufferInfo | null;
   abstract getDefShaderCtr(): BaseShaderController;
+  abstract updateClearColor(color: number): void;
 }

src/core/renderers/canvas/CanvasCoreRenderer.ts

@@ -331,4 +331,13 @@ export class CanvasCoreRenderer extends CoreRenderer {
   getBufferInfo(): null {
     return null;
   }
+
+  /**
+   * Updates the clear color of the canvas renderer.
+   *
+   * @param color - The color to set as the clear color.
+   */
+  updateClearColor(color: number) {
+    this.clearColor = color ? getRgbaComponents(color) : undefined;
+  }
 }

src/core/renderers/webgl/WebGlCoreRenderer.ts

@@ -784,4 +784,21 @@ export class WebGlCoreRenderer extends CoreRenderer {
   override getDefShaderCtr(): BaseShaderController {
     return this.defShaderCtrl;
   }
+
+  /**
+   * Updates the WebGL context's clear color and clears the color buffer.
+   *
+   * @param color - The color to set as the clear color, represented as a 32-bit integer.
+   */
+  updateClearColor(color: number) {
+    const glw = this.glw;
+    const normalizedColor = getNormalizedRgbaComponents(color);
+    glw.clearColor(
+      normalizedColor[0],
+      normalizedColor[1],
+      normalizedColor[2],
+      normalizedColor[3],
+    );
+    glw.clear();
+  }
 }

src/main-api/Renderer.ts

@@ -658,4 +658,13 @@ export class RendererMain extends EventEmitter {
   rerender() {
     throw new Error('Not implemented');
   }
+
+  /**
+   * Sets the clear color for the stage.
+   *
+   * @param color - The color to set as the clear color.
+   */
+  setClearColor(color: number) {
+    this.stage.setClearColor(color);
+  }
 }