@playcanvas/web-components 0.1.7 → 0.1.9

package/dist/pwc.js

@@ -5,9 +5,10 @@
 })(this, (function (exports, playcanvas) { 'use strict';
 
     /**
-     * Base class for all PlayCanvas web components that initialize asynchronously.
+     * Base class for all PlayCanvas Web Components that initialize asynchronously.
      */
     class AsyncElement extends HTMLElement {
+        /** @ignore */
         constructor() {
             super();
             this._readyPromise = new Promise((resolve) => {
@@ -39,7 +40,13 @@
         }
     }
 
+    /**
+     * The ModuleElement interface provides properties and methods for manipulating
+     * `<pc-module>` elements. The ModuleElement interface also inherits the properties and
+     * methods of the {@link HTMLElement} interface.
+     */
     class ModuleElement extends HTMLElement {
+        /** @ignore */
         constructor() {
             super();
             this.loadPromise = this.loadModule();
@@ -78,7 +85,9 @@
      */
     class AppElement extends AsyncElement {
         /**
-         * Creates a new AppElement.
+         * Creates a new AppElement instance.
+         *
+         * @ignore
          */
         constructor() {
             super();
@@ -91,6 +100,7 @@
             this._depth = true;
             this._stencil = true;
             this._highResolution = false;
+            this._hierarchyReady = false;
             /**
              * The PlayCanvas application instance.
              */
@@ -134,6 +144,16 @@
             Array.from(materialElements).forEach((materialElement) => {
                 materialElement.createMaterial();
             });
+            // Create all entities
+            const entityElements = this.querySelectorAll('pc-entity');
+            Array.from(entityElements).forEach((entityElement) => {
+                entityElement.createEntity(this.app);
+            });
+            // Build hierarchy
+            entityElements.forEach((entityElement) => {
+                entityElement.buildHierarchy(this.app);
+            });
+            this._hierarchyReady = true;
             // Load assets before starting the application
             this.app.preload(() => {
                 // Start the application
@@ -204,6 +224,14 @@
         get depth() {
             return this._depth;
         }
+        /**
+         * Gets the hierarchy ready flag.
+         * @returns The hierarchy ready flag.
+         * @ignore
+         */
+        get hierarchyReady() {
+            return this._hierarchyReady;
+        }
         /**
          * 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.
@@ -475,7 +503,9 @@
     };
 
     /**
-     * Represents an entity in the PlayCanvas engine.
+     * The EntityElement interface provides properties and methods for manipulating
+     * `<pc-entity>` elements. The EntityElement interface also inherits the properties and
+     * methods of the {@link HTMLElement} interface.
      */
     class EntityElement extends AsyncElement {
         constructor() {
@@ -509,41 +539,60 @@
              */
             this.entity = null;
         }
-        async connectedCallback() {
-            const closestApp = this.closestApp;
-            if (!closestApp)
-                return;
-            // Wait for the app to complete initialization
-            await closestApp.ready();
-            const app = closestApp.app;
+        createEntity(app) {
             // Create a new entity
-            this.entity = new playcanvas.Entity(this._name, app);
-            // Initialize from attributes
-            const nameAttr = this.getAttribute('name');
-            const positionAttr = this.getAttribute('position');
-            const rotationAttr = this.getAttribute('rotation');
-            const scaleAttr = this.getAttribute('scale');
-            const tagsAttr = this.getAttribute('tags');
-            if (nameAttr)
-                this.name = nameAttr;
-            if (positionAttr)
-                this.position = parseVec3(positionAttr);
-            if (rotationAttr)
-                this.rotation = parseVec3(rotationAttr);
-            if (scaleAttr)
-                this.scale = parseVec3(scaleAttr);
-            if (tagsAttr)
-                this.tags = tagsAttr.split(',').map(tag => tag.trim());
+            this.entity = new playcanvas.Entity(this.getAttribute('name') || this._name, app);
+            const enabled = this.getAttribute('enabled');
+            if (enabled) {
+                this.entity.enabled = enabled !== 'false';
+            }
+            const position = this.getAttribute('position');
+            if (position) {
+                this.entity.setLocalPosition(parseVec3(position));
+            }
+            const rotation = this.getAttribute('rotation');
+            if (rotation) {
+                this.entity.setLocalEulerAngles(parseVec3(rotation));
+            }
+            const scale = this.getAttribute('scale');
+            if (scale) {
+                this.entity.setLocalScale(parseVec3(scale));
+            }
+            const tags = this.getAttribute('tags');
+            if (tags) {
+                this.entity.tags.add(tags.split(',').map(tag => tag.trim()));
+            }
+        }
+        buildHierarchy(app) {
+            if (!this.entity)
+                return;
             const closestEntity = this.closestEntity;
-            if (closestEntity) {
-                closestEntity.ready().then(() => {
-                    closestEntity.entity.addChild(this.entity);
-                    this._onReady();
-                });
+            if (closestEntity === null || closestEntity === void 0 ? void 0 : closestEntity.entity) {
+                closestEntity.entity.addChild(this.entity);
             }
             else {
                 app.root.addChild(this.entity);
-                this._onReady();
+            }
+            this._onReady();
+        }
+        connectedCallback() {
+            // Wait for app to be ready
+            const closestApp = this.closestApp;
+            if (!closestApp)
+                return;
+            // If app is already running, create entity immediately
+            if (closestApp.hierarchyReady) {
+                const app = closestApp.app;
+                this.createEntity(app);
+                this.buildHierarchy(app);
+                // Handle any child entities that might exist
+                const childEntities = this.querySelectorAll('pc-entity');
+                childEntities.forEach((child) => {
+                    child.createEntity(app);
+                });
+                childEntities.forEach((child) => {
+                    child.buildHierarchy(app);
+                });
             }
         }
         disconnectedCallback() {
@@ -553,6 +602,7 @@
                 children.forEach((child) => {
                     child.entity = null;
                 });
+                // Destroy the entity
                 this.entity.destroy();
                 this.entity = null;
             }
@@ -708,7 +758,9 @@
         ['webp', 'texture']
     ]);
     /**
-     * Loads an asset into the PlayCanvas engine.
+     * The AssetElement interface provides properties and methods for manipulating
+     * `<pc-asset>` elements. The AssetElement interface also inherits the properties and
+     * methods of the {@link HTMLElement} interface.
      */
     class AssetElement extends HTMLElement {
         constructor() {
@@ -784,8 +836,10 @@
      */
     class ComponentElement extends AsyncElement {
         /**
-         * Constructor for the ComponentElement.
+         * Creates a new ComponentElement instance.
+         *
          * @param componentName - The name of the component.
+         * @ignore
          */
         constructor(componentName) {
             super();
@@ -854,11 +908,14 @@
     }
 
     /**
-     * Represents a audio listener component in the PlayCanvas engine.
+     * The ListenerComponentElement interface provides properties and methods for manipulating
+     * `<pc-listener>` elements. The ListenerComponentElement interface also inherits the properties
+     * and methods of the {@link HTMLElement} interface.
      *
      * @category Components
      */
     class ListenerComponentElement extends ComponentElement {
+        /** @ignore */
         constructor() {
             super('audiolistener');
         }
@@ -873,14 +930,14 @@
     customElements.define('pc-listener', ListenerComponentElement);
 
     /**
-     * Represents a camera component in the PlayCanvas engine.
+     * The CameraComponentElement interface provides properties and methods for manipulating
+     * `<pc-camera>` elements. The CameraComponentElement interface also inherits the properties and
+     * methods of the {@link HTMLElement} interface.
      *
      * @category Components
      */
     class CameraComponentElement extends ComponentElement {
-        /**
-         * Creates a new CameraComponentElement.
-         */
+        /** @ignore */
         constructor() {
             super('camera');
             this._clearColor = new playcanvas.Color(0.75, 0.75, 0.75, 1);
@@ -1274,14 +1331,14 @@
     customElements.define('pc-camera', CameraComponentElement);
 
     /**
-     * Represents a collision component in the PlayCanvas engine.
+     * The CollisionComponentElement interface provides properties and methods for manipulating
+     * `<pc-collision>` elements. The CollisionComponentElement interface also inherits the properties
+     * and methods of the {@link HTMLElement} interface.
      *
      * @category Components
      */
     class CollisionComponentElement extends ComponentElement {
-        /**
-         * Creates a new CollisionComponentElement.
-         */
+        /** @ignore */
         constructor() {
             super('collision');
             this._angularOffset = new playcanvas.Quat();
@@ -1420,11 +1477,14 @@
     customElements.define('pc-collision', CollisionComponentElement);
 
     /**
-     * Represents an element component in the PlayCanvas engine.
+     * The ElementComponentElement interface provides properties and methods for manipulating
+     * `<pc-element>` elements. The ElementComponentElement interface also inherits the properties and
+     * methods of the {@link HTMLElement} interface.
      *
      * @category Components
      */
     class ElementComponentElement extends ComponentElement {
+        /** @ignore */
         constructor() {
             super('element');
             this._anchor = new playcanvas.Vec4(0.5, 0.5, 0.5, 0.5);
@@ -1630,11 +1690,14 @@
     customElements.define('pc-element', ElementComponentElement);
 
     /**
-     * Represents a gsplat component in the PlayCanvas engine.
+     * The GSplatComponentElement interface provides properties and methods for manipulating
+     * `<pc-splat>` elements. The GSplatComponentElement interface also inherits the properties and
+     * methods of the {@link HTMLElement} interface.
      *
      * @category Components
      */
     class GSplatComponentElement extends ComponentElement {
+        /** @ignore */
         constructor() {
             super('gsplat');
             this._asset = '';
@@ -1676,14 +1739,14 @@
     customElements.define('pc-splat', GSplatComponentElement);
 
     /**
-     * Represents a light component in the PlayCanvas engine.
+     * The LightComponentElement interface provides properties and methods for manipulating
+     * `<pc-light>` elements. The LightComponentElement interface also inherits the properties and
+     * methods of the {@link HTMLElement} interface.
      *
      * @category Components
      */
     class LightComponentElement extends ComponentElement {
-        /**
-         * Creates a new LightComponentElement.
-         */
+        /** @ignore */
         constructor() {
             super('light');
             this._castShadows = false;
@@ -1695,6 +1758,7 @@
             this._range = 10;
             this._shadowBias = 0.2;
             this._shadowDistance = 16;
+            this._shadowResolution = 1024;
             this._type = 'directional';
         }
         getInitialComponentData() {
@@ -1708,6 +1772,7 @@
                 range: this._range,
                 shadowBias: this._shadowBias,
                 shadowDistance: this._shadowDistance,
+                shadowResolution: this._shadowResolution,
                 type: this._type
             };
         }
@@ -1871,6 +1936,23 @@
         get shadowDistance() {
             return this._shadowDistance;
         }
+        /**
+         * Sets the shadow resolution of the light.
+         * @param value - The shadow resolution.
+         */
+        set shadowResolution(value) {
+            this._shadowResolution = value;
+            if (this.component) {
+                this.component.shadowResolution = value;
+            }
+        }
+        /**
+         * Gets the shadow resolution of the light.
+         * @returns The shadow resolution.
+         */
+        get shadowResolution() {
+            return this._shadowResolution;
+        }
         /**
          * Sets the type of the light.
          * @param value - The type.
@@ -1904,6 +1986,7 @@
                 'range',
                 'shadow-bias',
                 'shadow-distance',
+                'shadow-resolution',
                 'type'
             ];
         }
@@ -1937,6 +2020,9 @@
                 case 'shadow-distance':
                     this.shadowDistance = Number(newValue);
                     break;
+                case 'shadow-resolution':
+                    this.shadowResolution = Number(newValue);
+                    break;
                 case 'type':
                     this.type = newValue;
                     break;
@@ -1946,7 +2032,9 @@
     customElements.define('pc-light', LightComponentElement);
 
     /**
-     * Represents a material in the PlayCanvas engine.
+     * The MaterialElement interface provides properties and methods for manipulating
+     * `<pc-material>` elements. The MaterialElement interface also inherits the properties and
+     * methods of the {@link HTMLElement} interface.
      */
     class MaterialElement extends HTMLElement {
         constructor() {
@@ -2060,11 +2148,14 @@
     customElements.define('pc-material', MaterialElement);
 
     /**
-     * Represents a render component in the PlayCanvas engine.
+     * The RenderComponentElement interface provides properties and methods for manipulating
+     * `<pc-render>` elements. The RenderComponentElement interface also inherits the properties and
+     * methods of the {@link HTMLElement} interface.
      *
      * @category Components
      */
     class RenderComponentElement extends ComponentElement {
+        /** @ignore */
         constructor() {
             super('render');
             this._castShadows = true;
@@ -2179,14 +2270,14 @@
     customElements.define('pc-render', RenderComponentElement);
 
     /**
-     * Represents a rigidbody component in the PlayCanvas engine.
+     * The RigidBodyComponentElement interface provides properties and methods for manipulating
+     * `<pc-rigidbody>` elements. The RigidBodyComponentElement interface also inherits the properties
+     * and methods of the {@link HTMLElement} interface.
      *
      * @category Components
      */
     class RigidBodyComponentElement extends ComponentElement {
-        /**
-         * Creates a new RigidBodyComponentElement.
-         */
+        /** @ignore */
         constructor() {
             super('rigidbody');
             /**
@@ -2366,11 +2457,14 @@
     customElements.define('pc-rigidbody', RigidBodyComponentElement);
 
     /**
-     * Represents a screen component in the PlayCanvas engine.
+     * The ScreenComponentElement interface provides properties and methods for manipulating
+     * `<pc-screen>` elements. The ScreenComponentElement interface also inherits the properties and
+     * methods of the {@link HTMLElement} interface.
      *
      * @category Components
      */
     class ScreenComponentElement extends ComponentElement {
+        /** @ignore */
         constructor() {
             super('screen');
             this._screenSpace = false;
@@ -2492,11 +2586,14 @@
     const tmpV3 = new playcanvas.Vec3();
     const tmpV4 = new playcanvas.Vec4();
     /**
-     * Represents a script component in the PlayCanvas engine.
+     * The ScriptComponentElement interface provides properties and methods for manipulating
+     * `<pc-scripts>` elements. The ScriptComponentElement interface also inherits the properties and
+     * methods of the {@link HTMLElement} interface.
      *
      * @category Components
      */
     class ScriptComponentElement extends ComponentElement {
+        /** @ignore */
         constructor() {
             super('script');
             // Create mutation observer to watch for child script elements
@@ -2522,6 +2619,15 @@
             try {
                 const attributesObject = attributes ? JSON.parse(attributes) : {};
                 const applyValue = (target, key, value) => {
+                    // Handle asset references
+                    if (typeof value === 'string' && value.startsWith('asset:')) {
+                        const assetId = value.slice(6);
+                        const assetElement = document.querySelector(`pc-asset#${assetId}`);
+                        if (assetElement) {
+                            target[key] = assetElement.asset;
+                            return;
+                        }
+                    }
                     // Handle vectors
                     if (Array.isArray(value)) {
                         if (target[key] instanceof playcanvas.Vec2) {
@@ -2630,7 +2736,9 @@
     customElements.define('pc-scripts', ScriptComponentElement);
 
     /**
-     * Represents a script in the PlayCanvas engine.
+     * The ScriptElement interface provides properties and methods for manipulating
+     * `<pc-script>` elements. The ScriptElement interface also inherits the properties and
+     * methods of the {@link HTMLElement} interface.
      */
     class ScriptElement extends HTMLElement {
         constructor() {
@@ -2709,11 +2817,14 @@
     customElements.define('pc-script', ScriptElement);
 
     /**
-     * Represents a sound component in the PlayCanvas engine.
+     * The SoundComponentElement interface provides properties and methods for manipulating
+     * `<pc-sounds>` elements. The SoundComponentElement interface also inherits the properties and
+     * methods of the {@link HTMLElement} interface.
      *
      * @category Components
      */
     class SoundComponentElement extends ComponentElement {
+        /** @ignore */
         constructor() {
             super('sound');
             this._distanceModel = 'linear';
@@ -2903,7 +3014,9 @@
     customElements.define('pc-sounds', SoundComponentElement);
 
     /**
-     * Represents a sound slot in the PlayCanvas engine.
+     * The SoundSlotElement interface provides properties and methods for manipulating
+     * `<pc-sound>` elements. The SoundSlotElement interface also inherits the properties and
+     * methods of the {@link AsyncElement} interface.
      */
     class SoundSlotElement extends AsyncElement {
         constructor() {
@@ -3144,7 +3257,9 @@
     customElements.define('pc-sound', SoundSlotElement);
 
     /**
-     * Represents a model in the PlayCanvas engine.
+     * The ModelElement interface provides properties and methods for manipulating
+     * `<pc-model>` elements. The ModelElement interface also inherits the properties and
+     * methods of the {@link HTMLElement} interface.
      */
     class ModelElement extends AsyncElement {
         constructor() {
@@ -3237,7 +3352,9 @@
     customElements.define('pc-model', ModelElement);
 
     /**
-     * Represents a scene in the PlayCanvas engine.
+     * The SceneElement interface provides properties and methods for manipulating
+     * `<pc-scene>` elements. The SceneElement interface also inherits the properties and
+     * methods of the {@link HTMLElement} interface.
      */
     class SceneElement extends AsyncElement {
         constructor() {
@@ -3276,11 +3393,11 @@
         }
         updateSceneSettings() {
             if (this.scene) {
-                this.scene.rendering.fog = this._fog;
-                this.scene.rendering.fogColor = this._fogColor;
-                this.scene.rendering.fogDensity = this._fogDensity;
-                this.scene.rendering.fogStart = this._fogStart;
-                this.scene.rendering.fogEnd = this._fogEnd;
+                this.scene.fog.type = this._fog;
+                this.scene.fog.color = this._fogColor;
+                this.scene.fog.density = this._fogDensity;
+                this.scene.fog.start = this._fogStart;
+                this.scene.fog.end = this._fogEnd;
                 // ... set other properties on the scene as well
             }
         }
@@ -3291,7 +3408,7 @@
         set fog(value) {
             this._fog = value;
             if (this.scene) {
-                this.scene.rendering.fog = value;
+                this.scene.fog.type = value;
             }
         }
         /**
@@ -3308,7 +3425,7 @@
         set fogColor(value) {
             this._fogColor = value;
             if (this.scene) {
-                this.scene.rendering.fogColor = value;
+                this.scene.fog.color = value;
             }
         }
         /**
@@ -3325,7 +3442,7 @@
         set fogDensity(value) {
             this._fogDensity = value;
             if (this.scene) {
-                this.scene.rendering.fogDensity = value;
+                this.scene.fog.density = value;
             }
         }
         /**
@@ -3342,7 +3459,7 @@
         set fogStart(value) {
             this._fogStart = value;
             if (this.scene) {
-                this.scene.rendering.fogStart = value;
+                this.scene.fog.start = value;
             }
         }
         /**
@@ -3359,7 +3476,7 @@
         set fogEnd(value) {
             this._fogEnd = value;
             if (this.scene) {
-                this.scene.rendering.fogEnd = value;
+                this.scene.fog.end = value;
             }
         }
         /**
@@ -3396,7 +3513,9 @@
     customElements.define('pc-scene', SceneElement);
 
     /**
-     * Represents a sky in the PlayCanvas engine.
+     * The SkyElement interface provides properties and methods for manipulating
+     * `<pc-sky>` elements. The SkyElement interface also inherits the properties and
+     * methods of the {@link HTMLElement} interface.
      */
     class SkyElement extends AsyncElement {
         constructor() {
@@ -3422,8 +3541,8 @@
             if (!this._scene)
                 return;
             const source = asset.resource;
-            source.anisotropy = 4;
             const skybox = playcanvas.EnvLighting.generateSkyboxCubemap(source);
+            skybox.anisotropy = 4;
             this._scene.skybox = skybox;
             if (this._lighting) {
                 const lighting = playcanvas.EnvLighting.generateLightingSource(source);
@@ -3437,6 +3556,7 @@
             this._scene.sky.type = this._type;
             this._scene.sky.node.setLocalScale(this._scale);
             this._scene.sky.center = this._center;
+            this._scene.skyboxIntensity = this._intensity;
         }
         async _loadSkybox() {
             var _a;