@playcanvas/web-components 0.1.8 → 0.1.9

package/dist/pwc.mjs

@@ -1,9 +1,10 @@
 import { basisInitialize, WasmModule, Application, Keyboard, Mouse, FILLMODE_FILL_WINDOW, RESOLUTION_AUTO, Color, Quat, Vec2, Vec3, Vec4, Entity, Asset, XRTYPE_VR, PROJECTION_ORTHOGRAPHIC, PROJECTION_PERSPECTIVE, StandardMaterial, SCALEMODE_BLEND, SCALEMODE_NONE, EnvLighting, LAYERID_SKYBOX } from '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) => {
@@ -35,7 +36,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();
@@ -74,7 +81,9 @@ customElements.define('pc-module', ModuleElement);
  */
 class AppElement extends AsyncElement {
     /**
-     * Creates a new AppElement.
+     * Creates a new AppElement instance.
+     *
+     * @ignore
      */
     constructor() {
         super();
@@ -87,6 +96,7 @@ class AppElement extends AsyncElement {
         this._depth = true;
         this._stencil = true;
         this._highResolution = false;
+        this._hierarchyReady = false;
         /**
          * The PlayCanvas application instance.
          */
@@ -130,6 +140,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
@@ -200,6 +220,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.
@@ -471,7 +499,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() {
@@ -505,44 +535,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 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 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() {
@@ -552,6 +598,7 @@ class EntityElement extends AsyncElement {
             children.forEach((child) => {
                 child.entity = null;
             });
+            // Destroy the entity
             this.entity.destroy();
             this.entity = null;
         }
@@ -707,7 +754,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() {
@@ -783,8 +832,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();
@@ -853,11 +904,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');
     }
@@ -872,14 +926,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 Color(0.75, 0.75, 0.75, 1);
@@ -1273,14 +1327,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 Quat();
@@ -1419,11 +1473,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 Vec4(0.5, 0.5, 0.5, 0.5);
@@ -1629,11 +1686,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 = '';
@@ -1675,14 +1735,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;
@@ -1968,7 +2028,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() {
@@ -2082,11 +2144,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;
@@ -2201,14 +2266,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');
         /**
@@ -2388,11 +2453,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;
@@ -2514,11 +2582,14 @@ const tmpV2 = new Vec2();
 const tmpV3 = new Vec3();
 const tmpV4 = new 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
@@ -2661,7 +2732,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() {
@@ -2740,11 +2813,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';
@@ -2934,7 +3010,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() {
@@ -3175,7 +3253,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() {
@@ -3268,7 +3348,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() {
@@ -3307,11 +3389,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
         }
     }
@@ -3322,7 +3404,7 @@ class SceneElement extends AsyncElement {
     set fog(value) {
         this._fog = value;
         if (this.scene) {
-            this.scene.rendering.fog = value;
+            this.scene.fog.type = value;
         }
     }
     /**
@@ -3339,7 +3421,7 @@ class SceneElement extends AsyncElement {
     set fogColor(value) {
         this._fogColor = value;
         if (this.scene) {
-            this.scene.rendering.fogColor = value;
+            this.scene.fog.color = value;
         }
     }
     /**
@@ -3356,7 +3438,7 @@ class SceneElement extends AsyncElement {
     set fogDensity(value) {
         this._fogDensity = value;
         if (this.scene) {
-            this.scene.rendering.fogDensity = value;
+            this.scene.fog.density = value;
         }
     }
     /**
@@ -3373,7 +3455,7 @@ class SceneElement extends AsyncElement {
     set fogStart(value) {
         this._fogStart = value;
         if (this.scene) {
-            this.scene.rendering.fogStart = value;
+            this.scene.fog.start = value;
         }
     }
     /**
@@ -3390,7 +3472,7 @@ class SceneElement extends AsyncElement {
     set fogEnd(value) {
         this._fogEnd = value;
         if (this.scene) {
-            this.scene.rendering.fogEnd = value;
+            this.scene.fog.end = value;
         }
     }
     /**
@@ -3427,7 +3509,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() {