@playcanvas/web-components 0.1.3 → 0.1.5

package/dist/pwc.js

@@ -4,6 +4,41 @@
     (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.pd = {}, global.pc));
 })(this, (function (exports, playcanvas) { 'use strict';
 
+    /**
+     * Base class for all PlayCanvas web components that initialize asynchronously.
+     */
+    class AsyncElement extends HTMLElement {
+        constructor() {
+            super();
+            this._readyPromise = new Promise((resolve) => {
+                this._readyResolve = resolve;
+            });
+        }
+        get closestApp() {
+            var _a;
+            return (_a = this.parentElement) === null || _a === void 0 ? void 0 : _a.closest('pc-app');
+        }
+        get closestEntity() {
+            var _a;
+            return (_a = this.parentElement) === null || _a === void 0 ? void 0 : _a.closest('pc-entity');
+        }
+        /**
+         * Called when the element is fully initialized and ready.
+         * Subclasses should call this when they're ready.
+         */
+        _onReady() {
+            this._readyResolve();
+            this.dispatchEvent(new CustomEvent('ready'));
+        }
+        /**
+         * Returns a promise that resolves with this element when it's ready.
+         * @returns A promise that resolves with this element when it's ready.
+         */
+        ready() {
+            return this._readyPromise.then(() => this);
+        }
+    }
+
     class ModuleElement extends HTMLElement {
         constructor() {
             super();
@@ -32,7 +67,7 @@
     /**
      * The main application element.
      */
-    class AppElement extends HTMLElement {
+    class AppElement extends AsyncElement {
         /**
          * Creates a new AppElement.
          */
@@ -49,9 +84,6 @@
             this.app = null;
             // Bind methods to maintain 'this' context
             this._onWindowResize = this._onWindowResize.bind(this);
-            this.appReadyPromise = new Promise((resolve) => {
-                this.appReadyResolve = resolve;
-            });
         }
         async connectedCallback() {
             // Get all pc-module elements that are direct children of the pc-app element
@@ -91,7 +123,7 @@
                 this.app.start();
                 // Handle window resize to keep the canvas responsive
                 window.addEventListener('resize', this._onWindowResize);
-                this.appReadyResolve(this.app);
+                this._onReady();
             });
         }
         disconnectedCallback() {
@@ -108,21 +140,26 @@
                 this._canvas = null;
             }
         }
-        async getApplication() {
-            await this.appReadyPromise;
-            return this.app;
-        }
         _onWindowResize() {
             if (this.app) {
                 this.app.resizeCanvas();
             }
         }
+        /**
+         * Sets the high resolution flag. When true, the application will render at the device's
+         * physical resolution. When false, the application will render at CSS resolution.
+         * @param value - The high resolution flag.
+         */
         set highResolution(value) {
             this._highResolution = value;
             if (this.app) {
                 this.app.graphicsDevice.maxPixelRatio = value ? window.devicePixelRatio : 1;
             }
         }
+        /**
+         * Gets the high resolution flag.
+         * @returns The high resolution flag.
+         */
         get highResolution() {
             return this._highResolution;
         }
@@ -153,6 +190,18 @@
         const components = value.split(',').map(Number);
         return new playcanvas.Color(components);
     };
+    /**
+     * Parse an Euler angles string into a Quat object. String can be in the format of 'x,y,z'.
+     *
+     * @param value - The Euler angles string to parse.
+     * @returns The parsed Quat object.
+     */
+    const parseQuat = (value) => {
+        const [x, y, z] = value.split(',').map(Number);
+        const q = new playcanvas.Quat();
+        q.setFromEulerAngles(x, y, z);
+        return q;
+    };
     /**
      * Parse a Vec2 string into a Vec2 object. String can be in the format of 'x,y'.
      *
@@ -187,7 +236,7 @@
     /**
      * Represents an entity in the PlayCanvas engine.
      */
-    class EntityElement extends HTMLElement {
+    class EntityElement extends AsyncElement {
         constructor() {
             super(...arguments);
             /**
@@ -220,21 +269,14 @@
             this.entity = null;
         }
         async connectedCallback() {
-            // Get the application
-            const appElement = this.closest('pc-app');
-            if (!appElement) {
-                console.warn(`${this.tagName} must be a child of pc-app`);
+            const closestApp = this.closestApp;
+            if (!closestApp)
                 return;
-            }
-            const app = await appElement.getApplication();
+            // Wait for the app to complete initialization
+            await closestApp.ready();
+            const app = closestApp.app;
             // Create a new entity
             this.entity = new playcanvas.Entity(this._name, app);
-            if (this.parentElement && this.parentElement.tagName.toLowerCase() === 'pc-entity' && this.parentElement.entity) {
-                this.parentElement.entity.addChild(this.entity);
-            }
-            else {
-                app.root.addChild(this.entity);
-            }
             // Initialize from attributes
             const nameAttr = this.getAttribute('name');
             const positionAttr = this.getAttribute('position');
@@ -251,9 +293,25 @@
                 this.scale = parseVec3(scaleAttr);
             if (tagsAttr)
                 this.tags = tagsAttr.split(',').map(tag => tag.trim());
+            const closestEntity = this.closestEntity;
+            if (closestEntity) {
+                closestEntity.ready().then(() => {
+                    closestEntity.entity.addChild(this.entity);
+                    this._onReady();
+                });
+            }
+            else {
+                app.root.addChild(this.entity);
+                this._onReady();
+            }
         }
         disconnectedCallback() {
             if (this.entity) {
+                // Notify all children that their entities are about to become invalid
+                const children = this.querySelectorAll('pc-entity');
+                children.forEach((child) => {
+                    child.entity = null;
+                });
                 this.entity.destroy();
                 this.entity = null;
             }
@@ -395,6 +453,7 @@
         ['frag', 'shader'],
         ['glb', 'container'],
         ['glsl', 'shader'],
+        ['hdr', 'texture'],
         ['html', 'html'],
         ['jpg', 'texture'],
         ['js', 'script'],
@@ -419,8 +478,6 @@
              */
             this.asset = null;
         }
-        async connectedCallback() {
-        }
         disconnectedCallback() {
             this.destroyAsset();
         }
@@ -484,7 +541,7 @@
      *
      * @category Components
      */
-    class ComponentElement extends HTMLElement {
+    class ComponentElement extends AsyncElement {
         /**
          * Constructor for the ComponentElement.
          * @param componentName - The name of the component.
@@ -499,27 +556,23 @@
         getInitialComponentData() {
             return {};
         }
-        async connectedCallback() {
-            const appElement = this.closest('pc-app');
-            if (!appElement) {
-                console.error(`${this.tagName.toLowerCase()} should be a descendant of pc-app`);
-                return;
-            }
-            await appElement.getApplication();
-            this.addComponent();
-        }
-        addComponent() {
-            // Access the parent pc-entity's 'entity' property
-            const entityElement = this.closest('pc-entity');
-            if (!entityElement) {
-                console.error(`${this.tagName.toLowerCase()} should be a child of pc-entity`);
-                return;
-            }
-            if (entityElement && entityElement.entity) {
+        async addComponent() {
+            const entityElement = this.closestEntity;
+            if (entityElement) {
+                await entityElement.ready();
                 // Add the component to the entity
-                this._component = entityElement.entity.addComponent(this._componentName, this.getInitialComponentData());
+                const data = this.getInitialComponentData();
+                this._component = entityElement.entity.addComponent(this._componentName, data);
             }
         }
+        initComponent() { }
+        async connectedCallback() {
+            var _a;
+            await ((_a = this.closestApp) === null || _a === void 0 ? void 0 : _a.ready());
+            await this.addComponent();
+            this.initComponent();
+            this._onReady();
+        }
         disconnectedCallback() {
             // Remove the component when the element is disconnected
             if (this.component && this.component.entity) {
@@ -624,6 +677,26 @@
                 scissorRect: this._scissorRect
             };
         }
+        get xrAvailable() {
+            var _a;
+            const xrManager = (_a = this.component) === null || _a === void 0 ? void 0 : _a.system.app.xr;
+            return xrManager && xrManager.supported && xrManager.isAvailable(playcanvas.XRTYPE_VR);
+        }
+        startXr(type, space) {
+            if (this.component && this.xrAvailable) {
+                this.component.startXr(type, space, {
+                    callback: (err) => {
+                        if (err)
+                            console.error(`WebXR Immersive VR failed to start: ${err.message}`);
+                    }
+                });
+            }
+        }
+        endXr() {
+            if (this.component) {
+                this.component.endXr();
+            }
+        }
         /**
          * Gets the camera component.
          * @returns The camera component.
@@ -970,19 +1043,23 @@
          */
         constructor() {
             super('collision');
+            this._angularOffset = new playcanvas.Quat();
             this._axis = 1;
             this._convexHull = false;
             this._halfExtents = new playcanvas.Vec3(0.5, 0.5, 0.5);
             this._height = 2;
+            this._linearOffset = new playcanvas.Vec3();
             this._radius = 0.5;
             this._type = 'box';
         }
         getInitialComponentData() {
             return {
                 axis: this._axis,
+                angularOffset: this._angularOffset,
                 convexHull: this._convexHull,
                 halfExtents: this._halfExtents,
                 height: this._height,
+                linearOffset: this._linearOffset,
                 radius: this._radius,
                 type: this._type
             };
@@ -994,6 +1071,15 @@
         get component() {
             return super.component;
         }
+        set angularOffset(value) {
+            this._angularOffset = value;
+            if (this.component) {
+                this.component.angularOffset = value;
+            }
+        }
+        get angularOffset() {
+            return this._angularOffset;
+        }
         set axis(value) {
             this._axis = value;
             if (this.component) {
@@ -1030,6 +1116,15 @@
         get height() {
             return this._height;
         }
+        set linearOffset(value) {
+            this._linearOffset = value;
+            if (this.component) {
+                this.component.linearOffset = value;
+            }
+        }
+        get linearOffset() {
+            return this._linearOffset;
+        }
         set radius(value) {
             this._radius = value;
             if (this.component) {
@@ -1049,11 +1144,14 @@
             return this._type;
         }
         static get observedAttributes() {
-            return [...super.observedAttributes, 'axis', 'convex-hull', 'half-extents', 'height', 'radius', 'type'];
+            return [...super.observedAttributes, 'angular-offset', 'axis', 'convex-hull', 'half-extents', 'height', 'linear-offset', 'radius', 'type'];
         }
         attributeChangedCallback(name, _oldValue, newValue) {
             super.attributeChangedCallback(name, _oldValue, newValue);
             switch (name) {
+                case 'angular-offset':
+                    this.angularOffset = parseQuat(newValue);
+                    break;
                 case 'axis':
                     this.axis = parseInt(newValue, 10);
                     break;
@@ -1066,6 +1164,9 @@
                 case 'height':
                     this.height = parseFloat(newValue);
                     break;
+                case 'linear-offset':
+                    this.linearOffset = parseVec3(newValue);
+                    break;
                 case 'radius':
                     this.radius = parseFloat(newValue);
                     break;
@@ -1097,8 +1198,7 @@
             this._width = 0;
             this._wrapLines = false;
         }
-        async connectedCallback() {
-            await super.connectedCallback();
+        initComponent() {
             this.component._text._material.useFog = true;
         }
         getInitialComponentData() {
@@ -1232,7 +1332,20 @@
             return this._wrapLines;
         }
         static get observedAttributes() {
-            return [...super.observedAttributes, 'anchor', 'asset', 'auto-width', 'color', 'font-size', 'line-height', 'pivot', 'text', 'type', 'width', 'wrap-lines'];
+            return [
+                ...super.observedAttributes,
+                'anchor',
+                'asset',
+                'auto-width',
+                'color',
+                'font-size',
+                'line-height',
+                'pivot',
+                'text',
+                'type',
+                'width',
+                'wrap-lines'
+            ];
         }
         attributeChangedCallback(name, _oldValue, newValue) {
             super.attributeChangedCallback(name, _oldValue, newValue);
@@ -1718,14 +1831,11 @@
             this._receiveShadows = true;
             this._type = 'asset';
         }
-        async connectedCallback() {
-            await super.connectedCallback();
-            this.material = this._material;
-        }
         getInitialComponentData() {
             return {
                 type: this._type,
                 castShadows: this._castShadows,
+                material: MaterialElement.get(this._material),
                 receiveShadows: this._receiveShadows
             };
         }
@@ -2115,7 +2225,7 @@
             super.attributeChangedCallback(name, _oldValue, newValue);
             switch (name) {
                 case 'priority':
-                    this.priority = parseInt(newValue);
+                    this.priority = parseInt(newValue, 10);
                     break;
                 case 'reference-resolution':
                     this.referenceResolution = parseVec2(newValue);
@@ -2154,8 +2264,7 @@
             this.addEventListener('scriptattributeschange', this.handleScriptAttributesChange.bind(this));
             this.addEventListener('scriptenablechange', this.handleScriptEnableChange.bind(this));
         }
-        async connectedCallback() {
-            await super.connectedCallback();
+        initComponent() {
             // Handle initial script elements
             this.querySelectorAll(':scope > pc-script').forEach((scriptElement) => {
                 const scriptName = scriptElement.getAttribute('name');
@@ -2425,7 +2534,7 @@
     /**
      * Represents a sound slot in the PlayCanvas engine.
      */
-    class SoundSlotElement extends HTMLElement {
+    class SoundSlotElement extends AsyncElement {
         constructor() {
             super(...arguments);
             this._asset = '';
@@ -2443,12 +2552,8 @@
             this.soundSlot = null;
         }
         async connectedCallback() {
-            const appElement = this.closest('pc-app');
-            if (!appElement) {
-                console.error(`${this.tagName.toLowerCase()} should be a descendant of pc-app`);
-                return;
-            }
-            await appElement.getApplication();
+            var _a;
+            await ((_a = this.soundElement) === null || _a === void 0 ? void 0 : _a.ready());
             const options = {
                 autoPlay: this._autoPlay,
                 loop: this._loop,
@@ -2463,6 +2568,7 @@
             this.soundSlot = this.soundElement.component.addSlot(this._name, options);
             this.asset = this._asset;
             this.soundSlot.play();
+            this._onReady();
         }
         disconnectedCallback() {
             this.soundElement.component.removeSlot(this._name);
@@ -2669,23 +2775,19 @@
     /**
      * Represents a model in the PlayCanvas engine.
      */
-    class ModelElement extends HTMLElement {
+    class ModelElement extends AsyncElement {
         constructor() {
             super(...arguments);
             this._asset = '';
         }
         async connectedCallback() {
-            // Get the application
-            const appElement = this.closest('pc-app');
-            if (!appElement) {
-                console.warn(`${this.tagName} must be a child of pc-app`);
-                return;
-            }
-            await appElement.getApplication();
+            var _a;
+            await ((_a = this.closestApp) === null || _a === void 0 ? void 0 : _a.ready());
             const asset = this.getAttribute('asset');
             if (asset) {
                 this.asset = asset;
             }
+            this._onReady();
         }
         _loadModel() {
             const asset = AssetElement.get(this._asset);
@@ -2693,13 +2795,23 @@
                 return;
             }
             const entity = asset.resource.instantiateRenderEntity();
-            const parentEntityElement = this.closest('pc-entity');
+            if (asset.resource.animations.length > 0) {
+                entity.addComponent('anim');
+                entity.anim.assignAnimation('animation', asset.resource.animations[0].resource);
+            }
+            const parentEntityElement = this.closestEntity;
             if (parentEntityElement) {
-                parentEntityElement.entity.addChild(entity);
+                parentEntityElement.ready().then(() => {
+                    parentEntityElement.entity.addChild(entity);
+                });
             }
             else {
-                const appElement = this.closest('pc-app');
-                appElement.app.root.addChild(entity);
+                const appElement = this.closestApp;
+                if (appElement) {
+                    appElement.ready().then(() => {
+                        appElement.app.root.addChild(entity);
+                    });
+                }
             }
         }
         /**
@@ -2733,7 +2845,7 @@
     /**
      * Represents a scene in the PlayCanvas engine.
      */
-    class SceneElement extends HTMLElement {
+    class SceneElement extends AsyncElement {
         constructor() {
             super(...arguments);
             /**
@@ -2762,15 +2874,11 @@
             this.scene = null;
         }
         async connectedCallback() {
-            // Get the application
-            const appElement = this.closest('pc-app');
-            if (!appElement) {
-                console.warn(`${this.tagName} must be a child of pc-app`);
-                return;
-            }
-            const app = await appElement.getApplication();
-            this.scene = app.scene;
+            var _a;
+            await ((_a = this.closestApp) === null || _a === void 0 ? void 0 : _a.ready());
+            this.scene = this.closestApp.app.scene;
             this.updateSceneSettings();
+            this._onReady();
         }
         updateSceneSettings() {
             if (this.scene) {
@@ -2896,57 +3004,71 @@
     /**
      * Represents a sky in the PlayCanvas engine.
      */
-    class SkyElement extends HTMLElement {
+    class SkyElement extends AsyncElement {
         constructor() {
             super(...arguments);
             this._asset = '';
+            this._center = new playcanvas.Vec3(0, 0.01, 0);
             this._intensity = 1;
-            this._rotation = [0, 0, 0];
+            this._rotation = new playcanvas.Vec3();
             this._level = 0;
-            this._solidColor = false;
+            this._scale = new playcanvas.Vec3(100, 100, 100);
+            this._type = 'infinite';
         }
         async connectedCallback() {
-            // Get the application
-            const appElement = this.closest('pc-app');
-            if (!appElement) {
-                console.warn(`${this.tagName} must be a child of pc-app`);
-                return;
-            }
-            await appElement.getApplication();
+            var _a;
+            await ((_a = this.closestApp) === null || _a === void 0 ? void 0 : _a.ready());
             this.asset = this.getAttribute('asset') || '';
-            this.solidColor = this.hasAttribute('solid-color');
+            this._onReady();
         }
         getScene() {
-            const appElement = this.closest('pc-app');
-            if (!appElement) {
-                return;
-            }
-            const app = appElement.app;
+            const app = this.closestApp.app;
             if (!app) {
                 return;
             }
             return app.scene;
         }
+        initSkybox(source) {
+            source.anisotropy = 4;
+            const skybox = playcanvas.EnvLighting.generateSkyboxCubemap(source);
+            const lighting = playcanvas.EnvLighting.generateLightingSource(source);
+            const envAtlas = playcanvas.EnvLighting.generateAtlas(lighting);
+            const app = this.closestApp.app;
+            if (app) {
+                app.scene.envAtlas = envAtlas;
+                app.scene.skybox = skybox;
+                const layer = app.scene.layers.getLayerById(playcanvas.LAYERID_SKYBOX);
+                if (layer) {
+                    layer.enabled = this._type !== 'none';
+                }
+                app.scene.sky.type = this._type;
+                app.scene.sky.node.setLocalScale(this._scale);
+                app.scene.sky.center = this._center;
+            }
+        }
         set asset(value) {
             this._asset = value;
             const scene = this.getScene();
             if (scene) {
                 const asset = AssetElement.get(value);
                 if (asset) {
-                    if (asset.resource) {
-                        scene.envAtlas = asset.resource;
-                    }
-                    else {
-                        asset.once('load', () => {
-                            scene.envAtlas = asset.resource;
-                        });
-                    }
+                    this.initSkybox(asset.resource);
                 }
             }
         }
         get asset() {
             return this._asset;
         }
+        set center(value) {
+            this._center = value;
+            const scene = this.getScene();
+            if (scene) {
+                scene.sky.center = this._center;
+            }
+        }
+        get center() {
+            return this._center;
+        }
         set intensity(value) {
             this._intensity = value;
             const scene = this.getScene();
@@ -2961,24 +3083,21 @@
             this._rotation = value;
             const scene = this.getScene();
             if (scene) {
-                scene.skyboxRotation = new playcanvas.Quat().setFromEulerAngles(this._rotation[0], this._rotation[1], this._rotation[2]);
+                scene.skyboxRotation = new playcanvas.Quat().setFromEulerAngles(value);
             }
         }
         get rotation() {
             return this._rotation;
         }
-        set solidColor(value) {
-            this._solidColor = value;
+        set scale(value) {
+            this._scale = value;
             const scene = this.getScene();
             if (scene) {
-                const layer = scene.layers.getLayerById(playcanvas.LAYERID_SKYBOX);
-                if (layer) {
-                    layer.enabled = !this._solidColor;
-                }
+                scene.sky.node.setLocalScale(this._scale);
             }
         }
-        get solidColor() {
-            return this._solidColor;
+        get scale() {
+            return this._scale;
         }
         set level(value) {
             this._level = value;
@@ -2990,25 +3109,45 @@
         get level() {
             return this._level;
         }
+        set type(value) {
+            this._type = value;
+            const scene = this.getScene();
+            if (scene) {
+                scene.sky.type = this._type;
+                const layer = scene.layers.getLayerById(playcanvas.LAYERID_SKYBOX);
+                if (layer) {
+                    layer.enabled = this._type !== 'none';
+                }
+            }
+        }
+        get type() {
+            return this._type;
+        }
         static get observedAttributes() {
-            return ['asset', 'intensity', 'level', 'rotation', 'solid-color'];
+            return ['asset', 'center', 'intensity', 'level', 'rotation', 'scale', 'type'];
         }
         attributeChangedCallback(name, _oldValue, newValue) {
             switch (name) {
                 case 'asset':
                     this.asset = newValue;
                     break;
+                case 'center':
+                    this.center = parseVec3(newValue);
+                    break;
                 case 'intensity':
                     this.intensity = parseFloat(newValue);
                     break;
                 case 'rotation':
-                    this.rotation = newValue.split(',').map(Number);
+                    this.rotation = parseVec3(newValue);
                     break;
                 case 'level':
                     this.level = parseInt(newValue, 10);
                     break;
-                case 'solid-color':
-                    this.solidColor = this.hasAttribute('solid-color');
+                case 'scale':
+                    this.scale = parseVec3(newValue);
+                    break;
+                case 'type':
+                    this.type = newValue;
                     break;
             }
         }
@@ -3017,6 +3156,7 @@
 
     exports.AppElement = AppElement;
     exports.AssetElement = AssetElement;
+    exports.AsyncElement = AsyncElement;
     exports.CameraComponentElement = CameraComponentElement;
     exports.CollisionComponentElement = CollisionComponentElement;
     exports.ComponentElement = ComponentElement;