@playcanvas/web-components 0.1.8 → 0.1.9

package/src/components/light-component.ts

@@ -4,7 +4,9 @@ import { ComponentElement } from './component';
 import { parseColor } from '../utils';
 
 /**
- * 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
  */
@@ -31,9 +33,7 @@ class LightComponentElement extends ComponentElement {
 
     private _type = 'directional';
 
-    /**
-     * Creates a new LightComponentElement.
-     */
+    /** @ignore */
     constructor() {
         super('light');
     }

package/src/components/listener-component.ts

@@ -3,11 +3,14 @@ import { AudioListenerComponent } from 'playcanvas';
 import { ComponentElement } from './component';
 
 /**
- * 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');
     }

package/src/components/render-component.ts

@@ -4,7 +4,9 @@ import { ComponentElement } from './component';
 import { MaterialElement } from '../material';
 
 /**
- * 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
  */
@@ -17,6 +19,7 @@ class RenderComponentElement extends ComponentElement {
 
     private _type: 'asset' | 'box' | 'capsule' | 'cone' | 'cylinder' | 'plane' | 'sphere' = 'asset';
 
+    /** @ignore */
     constructor() {
         super('render');
     }

package/src/components/rigidbody-component.ts

@@ -4,7 +4,9 @@ import { ComponentElement } from './component';
 import { parseVec3 } from '../utils';
 
 /**
- * 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
  */
@@ -54,9 +56,7 @@ class RigidBodyComponentElement extends ComponentElement {
      */
     private _type: string = 'static';
 
-    /**
-     * Creates a new RigidBodyComponentElement.
-     */
+    /** @ignore */
     constructor() {
         super('rigidbody');
     }

package/src/components/screen-component.ts

@@ -4,7 +4,9 @@ import { ComponentElement } from './component';
 import { parseVec2 } from '../utils';
 
 /**
- * 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
  */
@@ -21,6 +23,7 @@ class ScreenComponentElement extends ComponentElement {
 
     private _scaleBlend = 0.5;
 
+    /** @ignore */
     constructor() {
         super('screen');
     }

package/src/components/script-component.ts

@@ -26,13 +26,16 @@ declare global {
 }
 
 /**
- * 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 {
     private observer: MutationObserver;
 
+    /** @ignore */
     constructor() {
         super('script');
 

package/src/components/script.ts

@@ -1,5 +1,7 @@
 /**
- * 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 {
     private _attributes: string = '{}';

package/src/components/sound-component.ts

@@ -3,7 +3,9 @@ import { SoundComponent } from 'playcanvas';
 import { ComponentElement } from './component';
 
 /**
- * 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
  */
@@ -22,6 +24,7 @@ class SoundComponentElement extends ComponentElement {
 
     private _volume: number = 1;
 
+    /** @ignore */
     constructor() {
         super('sound');
     }

package/src/components/sound-slot.ts

@@ -5,7 +5,9 @@ import { AsyncElement } from '../async-element';
 import { SoundComponentElement } from './sound-component';
 
 /**
- * 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 {
     private _asset: string = '';

package/src/entity.ts

@@ -1,10 +1,12 @@
-import { Entity, Vec3 } from 'playcanvas';
+import { Application, Entity, Vec3 } from 'playcanvas';
 
 import { AsyncElement } from './async-element';
 import { parseVec3 } from './utils';
 
 /**
- * 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 {
     /**
@@ -42,42 +44,69 @@ class EntityElement extends AsyncElement {
      */
     entity: Entity | null = null;
 
-    async connectedCallback() {
-        const closestApp = this.closestApp;
-        if (!closestApp) return;
+    createEntity(app: Application) {
+        // Create a new entity
+        this.entity = new Entity(this.getAttribute('name') || this._name, app);
 
-        // Wait for the app to complete initialization
-        await closestApp.ready();
+        const enabled = this.getAttribute('enabled');
+        if (enabled) {
+            this.entity.enabled = enabled !== 'false';
+        }
 
-        const app = closestApp.app!;
+        const position = this.getAttribute('position');
+        if (position) {
+            this.entity.setLocalPosition(parseVec3(position));
+        }
 
-        // 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());
+        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: Application) {
+        if (!this.entity) return;
 
         const closestEntity = this.closestEntity;
-        if (closestEntity) {
-            closestEntity.ready().then(() => {
-                closestEntity.entity!.addChild(this.entity!);
-                this._onReady();
-            });
+        if (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<EntityElement>('pc-entity');
+            childEntities.forEach((child) => {
+                child.createEntity(app);
+            });
+            childEntities.forEach((child) => {
+                child.buildHierarchy(app);
+            });
         }
     }
 
@@ -89,6 +118,7 @@ class EntityElement extends AsyncElement {
                 (child as EntityElement).entity = null;
             });
 
+            // Destroy the entity
             this.entity.destroy();
             this.entity = null;
         }

package/src/material.ts

@@ -4,7 +4,9 @@ import { AssetElement } from './asset';
 import { parseColor } from './utils';
 
 /**
- * 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 {
     private _diffuse = new Color(1, 1, 1);

package/src/model.ts

@@ -4,7 +4,9 @@ import { AssetElement } from './asset';
 import { AsyncElement } from './async-element';
 
 /**
- * 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 {
     private _asset: string = '';

package/src/module.ts

@@ -1,8 +1,14 @@
 import { basisInitialize, WasmModule } from 'playcanvas';
 
+/**
+ * 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 {
     private loadPromise: Promise<void>;
 
+    /** @ignore */
     constructor() {
         super();
         this.loadPromise = this.loadModule();

package/src/scene.ts

@@ -4,7 +4,9 @@ import { AsyncElement } from './async-element';
 import { parseColor } from './utils';
 
 /**
- * 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 {
     /**
@@ -48,11 +50,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
         }
     }
@@ -64,7 +66,7 @@ class SceneElement extends AsyncElement {
     set fog(value) {
         this._fog = value;
         if (this.scene) {
-            this.scene.rendering.fog = value;
+            this.scene.fog.type = value;
         }
     }
 
@@ -83,7 +85,7 @@ class SceneElement extends AsyncElement {
     set fogColor(value: Color) {
         this._fogColor = value;
         if (this.scene) {
-            this.scene.rendering.fogColor = value;
+            this.scene.fog.color = value;
         }
     }
 
@@ -102,7 +104,7 @@ class SceneElement extends AsyncElement {
     set fogDensity(value: number) {
         this._fogDensity = value;
         if (this.scene) {
-            this.scene.rendering.fogDensity = value;
+            this.scene.fog.density = value;
         }
     }
 
@@ -121,7 +123,7 @@ class SceneElement extends AsyncElement {
     set fogStart(value: number) {
         this._fogStart = value;
         if (this.scene) {
-            this.scene.rendering.fogStart = value;
+            this.scene.fog.start = value;
         }
     }
 
@@ -140,7 +142,7 @@ class SceneElement extends AsyncElement {
     set fogEnd(value: number) {
         this._fogEnd = value;
         if (this.scene) {
-            this.scene.rendering.fogEnd = value;
+            this.scene.fog.end = value;
         }
     }
 

package/src/sky.ts

@@ -5,7 +5,9 @@ import { AsyncElement } from './async-element';
 import { parseVec3 } from './utils';
 
 /**
- * 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 {
     private _asset = '';