@playcanvas/web-components 0.1.7 → 0.1.9

package/dist/pwc.mjs

@@ -1,9 +1,10 @@
-import { basisInitialize, WasmModule, Application, Mouse, Keyboard, FILLMODE_FILL_WINDOW, RESOLUTION_AUTO, Vec3, Vec4, Color, Quat, Vec2, Entity, Asset, XRTYPE_VR, PROJECTION_ORTHOGRAPHIC, PROJECTION_PERSPECTIVE, StandardMaterial, SCALEMODE_BLEND, SCALEMODE_NONE, EnvLighting, LAYERID_SKYBOX } from 'playcanvas';
+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,41 +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 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 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() {
@@ -549,6 +598,7 @@ class EntityElement extends AsyncElement {
             children.forEach((child) => {
                 child.entity = null;
             });
+            // Destroy the entity
             this.entity.destroy();
             this.entity = null;
         }
@@ -704,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() {
@@ -780,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();
@@ -850,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');
     }
@@ -869,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);
@@ -1270,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();
@@ -1416,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);
@@ -1626,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 = '';
@@ -1672,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;
@@ -1691,6 +1754,7 @@ class LightComponentElement extends ComponentElement {
         this._range = 10;
         this._shadowBias = 0.2;
         this._shadowDistance = 16;
+        this._shadowResolution = 1024;
         this._type = 'directional';
     }
     getInitialComponentData() {
@@ -1704,6 +1768,7 @@ class LightComponentElement extends ComponentElement {
             range: this._range,
             shadowBias: this._shadowBias,
             shadowDistance: this._shadowDistance,
+            shadowResolution: this._shadowResolution,
             type: this._type
         };
     }
@@ -1867,6 +1932,23 @@ class LightComponentElement extends ComponentElement {
     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.
@@ -1900,6 +1982,7 @@ class LightComponentElement extends ComponentElement {
             'range',
             'shadow-bias',
             'shadow-distance',
+            'shadow-resolution',
             'type'
         ];
     }
@@ -1933,6 +2016,9 @@ class LightComponentElement extends ComponentElement {
             case 'shadow-distance':
                 this.shadowDistance = Number(newValue);
                 break;
+            case 'shadow-resolution':
+                this.shadowResolution = Number(newValue);
+                break;
             case 'type':
                 this.type = newValue;
                 break;
@@ -1942,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() {
@@ -2056,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;
@@ -2175,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');
         /**
@@ -2362,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;
@@ -2488,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
@@ -2518,6 +2615,15 @@ class ScriptComponentElement extends ComponentElement {
         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 Vec2) {
@@ -2626,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() {
@@ -2705,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';
@@ -2899,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() {
@@ -3140,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() {
@@ -3233,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() {
@@ -3272,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
         }
     }
@@ -3287,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;
         }
     }
     /**
@@ -3304,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;
         }
     }
     /**
@@ -3321,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;
         }
     }
     /**
@@ -3338,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;
         }
     }
     /**
@@ -3355,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;
         }
     }
     /**
@@ -3392,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() {
@@ -3418,8 +3537,8 @@ class SkyElement extends AsyncElement {
         if (!this._scene)
             return;
         const source = asset.resource;
-        source.anisotropy = 4;
         const skybox = EnvLighting.generateSkyboxCubemap(source);
+        skybox.anisotropy = 4;
         this._scene.skybox = skybox;
         if (this._lighting) {
             const lighting = EnvLighting.generateLightingSource(source);
@@ -3433,6 +3552,7 @@ class SkyElement extends AsyncElement {
         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;