@playcanvas/web-components 0.11.0 → 0.12.0

package/src/parse.ts

@@ -16,7 +16,8 @@
  * literal, and returns `null` instead of falling back to a default.
  */
 
-import { Color, Entity, Quat, Vec2, Vec3, Vec4 } from 'playcanvas';
+import type { Entity } from 'playcanvas';
+import { Color, Quat, Vec2, Vec3, Vec4 } from 'playcanvas';
 
 import { CSS_COLORS } from './colors';
 
@@ -31,7 +32,7 @@ import { CSS_COLORS } from './colors';
  */
 export const parseComponents = (value: string, count: number): number[] | null => {
     const components = value.trim().split(/\s+/).map(Number);
-    if (components.length !== count || components.some(component => !Number.isFinite(component))) {
+    if (components.length !== count || components.some((component) => !Number.isFinite(component))) {
         return null;
     }
     return components;
@@ -77,7 +78,11 @@ export const parseBool = (value: string | null, defaultValue: boolean): boolean
  * @param attribute - The attribute name, used in the warning message.
  * @returns The parsed Color object.
  */
-export const parseColor = <T extends Color | null>(value: string | null, defaultValue: T, attribute: string): Color | T => {
+export const parseColor = <T extends Color | null>(
+    value: string | null,
+    defaultValue: T,
+    attribute: string
+): Color | T => {
     if (value === null) {
         return cloneDefault(defaultValue);
     }
@@ -92,7 +97,10 @@ export const parseColor = <T extends Color | null>(value: string | null, default
     if (/^#(?:[0-9a-f]{3}|[0-9a-f]{4}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(value)) {
         let hex = value.slice(1);
         if (hex.length === 3 || hex.length === 4) {
-            hex = hex.split('').map(char => char + char).join('');
+            hex = hex
+                .split('')
+                .map((char) => char + char)
+                .join('');
         }
         return new Color().fromString(`#${hex}`);
     }
@@ -103,7 +111,9 @@ export const parseColor = <T extends Color | null>(value: string | null, default
         return new Color(components);
     }
 
-    console.warn(`Invalid value '${value}' for attribute '${attribute}'. Expected a CSS color name, a hex color or 3 or 4 space-separated numbers. Using '${defaultValue}'.`);
+    console.warn(
+        `Invalid value '${value}' for attribute '${attribute}'. Expected a CSS color name, a hex color or 3 or 4 space-separated numbers. Using '${defaultValue}'.`
+    );
     return cloneDefault(defaultValue);
 };
 
@@ -133,7 +143,9 @@ export const parseEnum = <T extends string>(
     if (names.includes(value as T)) {
         return value as T;
     }
-    console.warn(`Invalid value '${value}' for attribute '${attribute}'. Valid values: ${names.join(', ')}. Using '${defaultValue}'.`);
+    console.warn(
+        `Invalid value '${value}' for attribute '${attribute}'. Valid values: ${names.join(', ')}. Using '${defaultValue}'.`
+    );
     return defaultValue;
 };
 
@@ -147,13 +159,19 @@ export const parseEnum = <T extends string>(
  * @param attribute - The attribute name, used in the warning message.
  * @returns The parsed number.
  */
-export const parseNumber = <T extends number | null>(value: string | null, defaultValue: T, attribute: string): number | T => {
+export const parseNumber = <T extends number | null>(
+    value: string | null,
+    defaultValue: T,
+    attribute: string
+): number | T => {
     if (value === null) {
         return defaultValue;
     }
     const number = value.trim() === '' ? NaN : Number(value);
     if (!Number.isFinite(number)) {
-        console.warn(`Invalid value '${value}' for attribute '${attribute}'. Expected a finite number. Using '${defaultValue}'.`);
+        console.warn(
+            `Invalid value '${value}' for attribute '${attribute}'. Expected a finite number. Using '${defaultValue}'.`
+        );
         return defaultValue;
     }
     return number;
@@ -170,13 +188,19 @@ export const parseNumber = <T extends number | null>(value: string | null, defau
  * @param attribute - The attribute name, used in the warning message.
  * @returns The parsed Quat object.
  */
-export const parseQuat = <T extends Quat | null>(value: string | null, defaultValue: T, attribute: string): Quat | T => {
+export const parseQuat = <T extends Quat | null>(
+    value: string | null,
+    defaultValue: T,
+    attribute: string
+): Quat | T => {
     if (value === null) {
         return cloneDefault(defaultValue);
     }
     const components = parseComponents(value, 3);
     if (!components) {
-        console.warn(`Invalid value '${value}' for attribute '${attribute}'. Expected 3 space-separated numbers. Using '${defaultValue}'.`);
+        console.warn(
+            `Invalid value '${value}' for attribute '${attribute}'. Expected 3 space-separated numbers. Using '${defaultValue}'.`
+        );
         return cloneDefault(defaultValue);
     }
     return new Quat().setFromEulerAngles(components[0], components[1], components[2]);
@@ -200,7 +224,10 @@ export const parseTags = (value: string | null, defaultValue: string[] = []): st
         // caller's default, or a later mutation would write back through it.
         return [...defaultValue];
     }
-    return value.split(',').map(tag => tag.trim()).filter(tag => tag !== '');
+    return value
+        .split(',')
+        .map((tag) => tag.trim())
+        .filter((tag) => tag !== '');
 };
 
 /**
@@ -213,13 +240,19 @@ export const parseTags = (value: string | null, defaultValue: string[] = []): st
  * @param attribute - The attribute name, used in the warning message.
  * @returns The parsed Vec2 object.
  */
-export const parseVec2 = <T extends Vec2 | null>(value: string | null, defaultValue: T, attribute: string): Vec2 | T => {
+export const parseVec2 = <T extends Vec2 | null>(
+    value: string | null,
+    defaultValue: T,
+    attribute: string
+): Vec2 | T => {
     if (value === null) {
         return cloneDefault(defaultValue);
     }
     const components = parseComponents(value, 2);
     if (!components) {
-        console.warn(`Invalid value '${value}' for attribute '${attribute}'. Expected 2 space-separated numbers. Using '${defaultValue}'.`);
+        console.warn(
+            `Invalid value '${value}' for attribute '${attribute}'. Expected 2 space-separated numbers. Using '${defaultValue}'.`
+        );
         return cloneDefault(defaultValue);
     }
     return new Vec2(components);
@@ -235,13 +268,19 @@ export const parseVec2 = <T extends Vec2 | null>(value: string | null, defaultVa
  * @param attribute - The attribute name, used in the warning message.
  * @returns The parsed Vec3 object.
  */
-export const parseVec3 = <T extends Vec3 | null>(value: string | null, defaultValue: T, attribute: string): Vec3 | T => {
+export const parseVec3 = <T extends Vec3 | null>(
+    value: string | null,
+    defaultValue: T,
+    attribute: string
+): Vec3 | T => {
     if (value === null) {
         return cloneDefault(defaultValue);
     }
     const components = parseComponents(value, 3);
     if (!components) {
-        console.warn(`Invalid value '${value}' for attribute '${attribute}'. Expected 3 space-separated numbers. Using '${defaultValue}'.`);
+        console.warn(
+            `Invalid value '${value}' for attribute '${attribute}'. Expected 3 space-separated numbers. Using '${defaultValue}'.`
+        );
         return cloneDefault(defaultValue);
     }
     return new Vec3(components);
@@ -257,13 +296,19 @@ export const parseVec3 = <T extends Vec3 | null>(value: string | null, defaultVa
  * @param attribute - The attribute name, used in the warning message.
  * @returns The parsed Vec4 object.
  */
-export const parseVec4 = <T extends Vec4 | null>(value: string | null, defaultValue: T, attribute: string): Vec4 | T => {
+export const parseVec4 = <T extends Vec4 | null>(
+    value: string | null,
+    defaultValue: T,
+    attribute: string
+): Vec4 | T => {
     if (value === null) {
         return cloneDefault(defaultValue);
     }
     const components = parseComponents(value, 4);
     if (!components) {
-        console.warn(`Invalid value '${value}' for attribute '${attribute}'. Expected 4 space-separated numbers. Using '${defaultValue}'.`);
+        console.warn(
+            `Invalid value '${value}' for attribute '${attribute}'. Expected 4 space-separated numbers. Using '${defaultValue}'.`
+        );
         return cloneDefault(defaultValue);
     }
     return new Vec4(components);

package/src/scene.ts

@@ -1,4 +1,5 @@
-import { Color, Scene, Vec3 } from 'playcanvas';
+import type { Scene } from 'playcanvas';
+import { Color, Vec3 } from 'playcanvas';
 
 import { AsyncElement } from './async-element';
 import { parseColor, parseEnum, parseNumber, parseVec3 } from './parse';
@@ -77,12 +78,20 @@ class SceneElement extends AsyncElement {
         }
 
         this._scene = app.scene;
-        this.updateSceneSettings();
+        this._updateSceneSettings();
 
         this._onReady();
     }
 
-    updateSceneSettings() {
+    disconnectedCallback() {
+        // The scene belongs to the application, and removing this element - or the <pc-app>
+        // above it, which disconnects first - parts the two. Re-arm readiness so a re-inserted
+        // element announces the scene it acquires then, not the one it lost here.
+        this._scene = null;
+        this._resetReady();
+    }
+
+    private _updateSceneSettings() {
         if (this._scene) {
             this._scene.fog.type = this._fog;
             this._scene.fog.color = this._fogColor;
@@ -251,10 +260,4 @@ class SceneElement extends AsyncElement {
 
 customElements.define('pc-scene', SceneElement);
 
-declare global {
-    interface HTMLElementTagNameMap {
-        'pc-scene': SceneElement;
-    }
-}
-
 export { SceneElement };

package/src/sky.ts

@@ -1,6 +1,7 @@
-import { Asset, EnvLighting, LAYERID_SKYBOX, Quat, Scene, Texture, Vec3 } from 'playcanvas';
+import type { Asset, EventHandle, Scene, Texture } from 'playcanvas';
+import { EnvLighting, LAYERID_SKYBOX, Quat, Vec3 } from 'playcanvas';
 
-import { AppElement } from './app';
+import type { AppElement } from './app';
 import { AssetElement } from './asset';
 import { AsyncElement } from './async-element';
 import { parseBool, parseEnum, parseNumber, parseVec3 } from './parse';
@@ -31,14 +32,36 @@ class SkyElement extends AsyncElement {
 
     private _appElement: AppElement | null = null;
 
+    /**
+     * Incremented on every new load and on disconnect, and captured by a load when it starts. A
+     * load that resumes from an await or a load callback abandons itself if the value has moved
+     * on, so a superseded load cannot generate a skybox for a scene it no longer configures.
+     */
+    private _loadGeneration = 0;
+
+    /**
+     * The pending asset-load subscription of the current load, if it is waiting for its asset.
+     * Held so that whatever supersedes the load can detach the handler from the asset, rather
+     * than leave it registered until the asset loads (or forever, if it never does).
+     */
+    private _loadHandle: EventHandle | null = null;
+
     connectedCallback() {
         this._loadSkybox();
         this._onReady();
     }
 
     disconnectedCallback() {
+        this._loadGeneration++;
+        this._detachLoadHandler();
         this._unloadSkybox();
         this._appElement = null;
+        this._resetReady();
+    }
+
+    private _detachLoadHandler() {
+        this._loadHandle?.off();
+        this._loadHandle = null;
     }
 
     private _generateSkybox(asset: Asset) {
@@ -47,12 +70,18 @@ class SkyElement extends AsyncElement {
         const source = asset.resource as Texture;
 
         const skybox = EnvLighting.generateSkyboxCubemap(source);
-        skybox.anisotropy = 4;
+        // This element owns what it generated (see _unloadSkybox) - replacing a skybox from an
+        // earlier load must release it, not orphan it on the GPU
+        this._scene.skybox?.destroy();
         this._scene.skybox = skybox;
 
         if (this._lighting) {
             const lighting = EnvLighting.generateLightingSource(source);
             const envAtlas = EnvLighting.generateAtlas(lighting);
+            // The lighting source is an intermediate: the atlas is rendered from it and it is
+            // not needed afterwards
+            lighting.destroy();
+            this._scene.envAtlas?.destroy();
             this._scene.envAtlas = envAtlas;
         }
 
@@ -69,7 +98,17 @@ class SkyElement extends AsyncElement {
     }
 
     private async _loadSkybox() {
+        // Supersede any load already in flight - only the newest load may generate the skybox
+        const generation = ++this._loadGeneration;
+        this._detachLoadHandler();
+
         const appElement = await this.closestApp?.ready();
+
+        // The element may have been removed, or another load started, while we waited
+        if (generation !== this._loadGeneration) {
+            return;
+        }
+
         const app = appElement?.app;
         if (!appElement || !app) {
             return;
@@ -87,7 +126,14 @@ class SkyElement extends AsyncElement {
         if (asset.loaded) {
             this._generateSkybox(asset);
         } else {
-            asset.once('load', () => {
+            // The generation is re-checked even though a superseded handler is detached: the
+            // detach relies on how the engine's event emitter treats removal, while the check
+            // holds on its own.
+            this._loadHandle = asset.once('load', () => {
+                this._loadHandle = null;
+                if (generation !== this._loadGeneration) {
+                    return;
+                }
                 this._generateSkybox(asset);
             });
             app.assets.load(asset);
@@ -303,10 +349,4 @@ class SkyElement extends AsyncElement {
 
 customElements.define('pc-sky', SkyElement);
 
-declare global {
-    interface HTMLElementTagNameMap {
-        'pc-sky': SkyElement;
-    }
-}
-
 export { SkyElement };