@playcanvas/web-components 0.1.8 → 0.1.9

package/dist/pwc.cjs

@@ -3,9 +3,10 @@
 var playcanvas = require('playcanvas');
 
 /**
- * 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) => {
@@ -37,7 +38,13 @@ class AsyncElement extends HTMLElement {
     }
 }
 
+/**
+ * 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();
@@ -76,7 +83,9 @@ customElements.define('pc-module', ModuleElement);
  */
 class AppElement extends AsyncElement {
     /**
-     * Creates a new AppElement.
+     * Creates a new AppElement instance.
+     *
+     * @ignore
      */
     constructor() {
         super();
@@ -89,6 +98,7 @@ class AppElement extends AsyncElement {
         this._depth = true;
         this._stencil = true;
         this._highResolution = false;
+        this._hierarchyReady = false;
         /**
          * The PlayCanvas application instance.
          */
@@ -132,6 +142,16 @@ class AppElement extends AsyncElement {
         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
@@ -202,6 +222,14 @@ class AppElement extends AsyncElement {
     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.
@@ -473,7 +501,9 @@ const parseVec4 = (value) => {
 };
 
 /**
- * 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() {
@@ -507,44 +537,60 @@ class EntityElement extends AsyncElement {
          */
         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 enabledAttr = this.getAttribute('enabled');
-        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 (enabledAttr)
-            this.enabled = enabledAttr !== 'false';
-        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() {
@@ -554,6 +600,7 @@ class EntityElement extends AsyncElement {
             children.forEach((child) => {
                 child.entity = null;
             });
+            // Destroy the entity
             this.entity.destroy();
             this.entity = null;
         }
@@ -709,7 +756,9 @@ const extToType = new Map([
     ['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() {
@@ -785,8 +834,10 @@ customElements.define('pc-asset', AssetElement);
  */
 class ComponentElement extends AsyncElement {
     /**
-     * Constructor for the ComponentElement.
+     * Creates a new ComponentElement instance.
+     *
      * @param componentName - The name of the component.
+     * @ignore
      */
     constructor(componentName) {
         super();
@@ -855,11 +906,14 @@ class ComponentElement extends AsyncElement {
 }
 
 /**
- * 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');
     }
@@ -874,14 +928,14 @@ class ListenerComponentElement extends ComponentElement {
 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);
@@ -1275,14 +1329,14 @@ class CameraComponentElement extends ComponentElement {
 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();
@@ -1421,11 +1475,14 @@ class CollisionComponentElement extends ComponentElement {
 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);
@@ -1631,11 +1688,14 @@ class ElementComponentElement extends ComponentElement {
 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 = '';
@@ -1677,14 +1737,14 @@ class GSplatComponentElement extends ComponentElement {
 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;
@@ -1970,7 +2030,9 @@ class LightComponentElement extends ComponentElement {
 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() {
@@ -2084,11 +2146,14 @@ class MaterialElement extends HTMLElement {
 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;
@@ -2203,14 +2268,14 @@ class RenderComponentElement extends ComponentElement {
 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');
         /**
@@ -2390,11 +2455,14 @@ class RigidBodyComponentElement extends ComponentElement {
 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;
@@ -2516,11 +2584,14 @@ const tmpV2 = new playcanvas.Vec2();
 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
@@ -2663,7 +2734,9 @@ class ScriptComponentElement extends ComponentElement {
 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() {
@@ -2742,11 +2815,14 @@ class ScriptElement extends HTMLElement {
 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';
@@ -2936,7 +3012,9 @@ class SoundComponentElement extends ComponentElement {
 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() {
@@ -3177,7 +3255,9 @@ class SoundSlotElement extends AsyncElement {
 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() {
@@ -3270,7 +3350,9 @@ class ModelElement extends AsyncElement {
 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() {
@@ -3309,11 +3391,11 @@ class SceneElement extends AsyncElement {
     }
     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
         }
     }
@@ -3324,7 +3406,7 @@ class SceneElement extends AsyncElement {
     set fog(value) {
         this._fog = value;
         if (this.scene) {
-            this.scene.rendering.fog = value;
+            this.scene.fog.type = value;
         }
     }
     /**
@@ -3341,7 +3423,7 @@ class SceneElement extends AsyncElement {
     set fogColor(value) {
         this._fogColor = value;
         if (this.scene) {
-            this.scene.rendering.fogColor = value;
+            this.scene.fog.color = value;
         }
     }
     /**
@@ -3358,7 +3440,7 @@ class SceneElement extends AsyncElement {
     set fogDensity(value) {
         this._fogDensity = value;
         if (this.scene) {
-            this.scene.rendering.fogDensity = value;
+            this.scene.fog.density = value;
         }
     }
     /**
@@ -3375,7 +3457,7 @@ class SceneElement extends AsyncElement {
     set fogStart(value) {
         this._fogStart = value;
         if (this.scene) {
-            this.scene.rendering.fogStart = value;
+            this.scene.fog.start = value;
         }
     }
     /**
@@ -3392,7 +3474,7 @@ class SceneElement extends AsyncElement {
     set fogEnd(value) {
         this._fogEnd = value;
         if (this.scene) {
-            this.scene.rendering.fogEnd = value;
+            this.scene.fog.end = value;
         }
     }
     /**
@@ -3429,7 +3511,9 @@ class SceneElement extends AsyncElement {
 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() {