@playcanvas/web-components 0.1.8 → 0.1.10

package/README.md

@@ -43,13 +43,13 @@ Or you can include it directly in your HTML file from a CDN.
 ES Modules:
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@playcanvas/web-components@0.1.5/dist/pwc.mjs"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@playcanvas/web-components@0.1.9/dist/pwc.mjs"></script>
 ```
 
 UMD:
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/@playcanvas/web-components@0.1.5"></script>
+<script src="https://cdn.jsdelivr.net/npm/@playcanvas/web-components@0.1.9"></script>
 ```
 
 ## Tag Reference 📖

package/dist/app.d.ts

@@ -13,17 +13,31 @@ declare class AppElement extends AsyncElement {
     private _depth;
     private _stencil;
     private _highResolution;
+    private _hierarchyReady;
+    private _picker;
+    private _hasPointerListeners;
+    private _hoveredEntity;
+    private _pointerHandlers;
     /**
      * The PlayCanvas application instance.
      */
     app: Application | null;
     /**
-     * Creates a new AppElement.
+     * Creates a new AppElement instance.
+     *
+     * @ignore
      */
     constructor();
     connectedCallback(): Promise<void>;
     disconnectedCallback(): void;
     _onWindowResize(): void;
+    _pickerCreate(): void;
+    _pickerDestroy(): void;
+    _onPointerMove(event: PointerEvent): void;
+    _onPointerDown(event: PointerEvent): void;
+    _onPointerUp(event: PointerEvent): void;
+    _onPointerListenerAdded(type: string): void;
+    _onPointerListenerRemoved(type: string): void;
     /**
      * Sets the alpha flag.
      * @param value - The alpha flag.
@@ -54,6 +68,12 @@ declare class AppElement extends AsyncElement {
      * @returns The depth flag.
      */
     get depth(): boolean;
+    /**
+     * Gets the hierarchy ready flag.
+     * @returns The hierarchy ready flag.
+     * @ignore
+     */
+    get hierarchyReady(): boolean;
     /**
      * 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.

package/dist/asset.d.ts

@@ -1,6 +1,8 @@
 import { Asset } from 'playcanvas';
 /**
- * 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.
  */
 declare class AssetElement extends HTMLElement {
     private _preload;

package/dist/async-element.d.ts

@@ -1,11 +1,12 @@
 import { AppElement } from './app';
 import { EntityElement } from './entity';
 /**
- * Base class for all PlayCanvas web components that initialize asynchronously.
+ * Base class for all PlayCanvas Web Components that initialize asynchronously.
  */
 declare class AsyncElement extends HTMLElement {
     private _readyPromise;
     private _readyResolve;
+    /** @ignore */
     constructor();
     get closestApp(): AppElement;
     get closestEntity(): EntityElement;

package/dist/components/camera-component.d.ts

@@ -1,7 +1,9 @@
 import { CameraComponent, Color, Vec4 } from 'playcanvas';
 import { ComponentElement } from './component';
 /**
- * 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
  */
@@ -15,15 +17,15 @@ declare class CameraComponentElement extends ComponentElement {
     private _flipFaces;
     private _fov;
     private _frustumCulling;
+    private _gamma;
     private _nearClip;
     private _orthographic;
     private _orthoHeight;
     private _priority;
     private _rect;
     private _scissorRect;
-    /**
-     * Creates a new CameraComponentElement.
-     */
+    private _tonemap;
+    /** @ignore */
     constructor();
     getInitialComponentData(): {
         clearColor: Color;
@@ -35,12 +37,14 @@ declare class CameraComponentElement extends ComponentElement {
         flipFaces: boolean;
         fov: number;
         frustumCulling: boolean;
+        gammaCorrection: number;
         nearClip: number;
         orthographic: boolean;
         orthoHeight: number;
         priority: number;
         rect: Vec4;
         scissorRect: Vec4;
+        toneMapping: number | undefined;
     };
     get xrAvailable(): boolean | null | undefined;
     startXr(type: 'immersive-ar' | 'immersive-vr', space: 'bounded-floor' | 'local' | 'local-floor' | 'unbounded' | 'viewer'): void;
@@ -140,6 +144,16 @@ declare class CameraComponentElement extends ComponentElement {
      * @returns The frustum culling.
      */
     get frustumCulling(): boolean;
+    /**
+     * Sets the gamma correction of the camera.
+     * @param value - The gamma correction.
+     */
+    set gamma(value: 'none' | 'srgb');
+    /**
+     * Gets the gamma correction of the camera.
+     * @returns The gamma correction.
+     */
+    get gamma(): 'none' | 'srgb';
     /**
      * Sets the near clip distance of the camera.
      * @param value - The near clip distance.
@@ -200,6 +214,16 @@ declare class CameraComponentElement extends ComponentElement {
      * @returns The scissor rect.
      */
     get scissorRect(): Vec4;
+    /**
+     * Sets the tone mapping of the camera.
+     * @param value - The tone mapping.
+     */
+    set tonemap(value: 'none' | 'linear' | 'filmic' | 'hejl' | 'aces' | 'aces2' | 'neutral');
+    /**
+     * Gets the tone mapping of the camera.
+     * @returns The tone mapping.
+     */
+    get tonemap(): 'none' | 'linear' | 'filmic' | 'hejl' | 'aces' | 'aces2' | 'neutral';
     static get observedAttributes(): string[];
     attributeChangedCallback(name: string, _oldValue: string, newValue: string): void;
 }

package/dist/components/collision-component.d.ts

@@ -1,7 +1,9 @@
 import { CollisionComponent, Quat, Vec3 } from 'playcanvas';
 import { ComponentElement } from './component';
 /**
- * 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
  */
@@ -14,9 +16,7 @@ declare class CollisionComponentElement extends ComponentElement {
     private _linearOffset;
     private _radius;
     private _type;
-    /**
-     * Creates a new CollisionComponentElement.
-     */
+    /** @ignore */
     constructor();
     getInitialComponentData(): {
         axis: number;

package/dist/components/component.d.ts

@@ -10,8 +10,10 @@ declare class ComponentElement extends AsyncElement {
     private _enabled;
     private _component;
     /**
-     * Constructor for the ComponentElement.
+     * Creates a new ComponentElement instance.
+     *
      * @param componentName - The name of the component.
+     * @ignore
      */
     constructor(componentName: string);
     getInitialComponentData(): {};

package/dist/components/element-component.d.ts

@@ -1,7 +1,9 @@
 import { Color, ElementComponent, Vec2, Vec4 } from 'playcanvas';
 import { ComponentElement } from './component';
 /**
- * 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
  */
@@ -17,6 +19,7 @@ declare class ElementComponentElement extends ComponentElement {
     private _type;
     private _width;
     private _wrapLines;
+    /** @ignore */
     constructor();
     initComponent(): void;
     getInitialComponentData(): {

package/dist/components/gsplat-component.d.ts

@@ -1,12 +1,15 @@
 import { GSplatComponent } from 'playcanvas';
 import { ComponentElement } from './component';
 /**
- * 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
  */
 declare class GSplatComponentElement extends ComponentElement {
     private _asset;
+    /** @ignore */
     constructor();
     getInitialComponentData(): {
         asset: import("playcanvas").Asset | null | undefined;

package/dist/components/light-component.d.ts

@@ -1,7 +1,9 @@
 import { Color, LightComponent } from 'playcanvas';
 import { ComponentElement } from './component';
 /**
- * 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
  */
@@ -15,11 +17,12 @@ declare class LightComponentElement extends ComponentElement {
     private _range;
     private _shadowBias;
     private _shadowDistance;
+    private _shadowIntensity;
     private _shadowResolution;
+    private _shadowType;
     private _type;
-    /**
-     * Creates a new LightComponentElement.
-     */
+    private _vsmBias;
+    /** @ignore */
     constructor();
     getInitialComponentData(): {
         castShadows: boolean;
@@ -31,8 +34,11 @@ declare class LightComponentElement extends ComponentElement {
         range: number;
         shadowBias: number;
         shadowDistance: number;
+        shadowIntensity: number;
         shadowResolution: number;
+        shadowType: number | undefined;
         type: string;
+        vsmBias: number;
     };
     /**
      * Gets the light component.
@@ -129,6 +135,16 @@ declare class LightComponentElement extends ComponentElement {
      * @returns The shadow distance.
      */
     get shadowDistance(): number;
+    /**
+     * Sets the shadow intensity of the light.
+     * @param value - The shadow intensity.
+     */
+    set shadowIntensity(value: number);
+    /**
+     * Gets the shadow intensity of the light.
+     * @returns The shadow intensity.
+     */
+    get shadowIntensity(): number;
     /**
      * Sets the shadow resolution of the light.
      * @param value - The shadow resolution.
@@ -139,6 +155,26 @@ declare class LightComponentElement extends ComponentElement {
      * @returns The shadow resolution.
      */
     get shadowResolution(): number;
+    /**
+     * Sets the shadow type of the light.
+     * @param value - The shadow type. Can be:
+     *
+     * - `pcf1-16f` - 1-tap percentage-closer filtered shadow map with 16-bit depth.
+     * - `pcf1-32f` - 1-tap percentage-closer filtered shadow map with 32-bit depth.
+     * - `pcf3-16f` - 3-tap percentage-closer filtered shadow map with 16-bit depth.
+     * - `pcf3-32f` - 3-tap percentage-closer filtered shadow map with 32-bit depth.
+     * - `pcf5-16f` - 5-tap percentage-closer filtered shadow map with 16-bit depth.
+     * - `pcf5-32f` - 5-tap percentage-closer filtered shadow map with 32-bit depth.
+     * - `vsm-16f` - Variance shadow map with 16-bit depth.
+     * - `vsm-32f` - Variance shadow map with 32-bit depth.
+     * - `pcss-32f` - Percentage-closer soft shadow with 32-bit depth.
+     */
+    set shadowType(value: 'pcf1-16f' | 'pcf1-32f' | 'pcf3-16f' | 'pcf3-32f' | 'pcf5-16f' | 'pcf5-32f' | 'vsm-16f' | 'vsm-32f' | 'pcss-32f');
+    /**
+     * Gets the shadow type of the light.
+     * @returns The shadow type.
+     */
+    get shadowType(): "pcf1-16f" | "pcf1-32f" | "pcf3-16f" | "pcf3-32f" | "pcf5-16f" | "pcf5-32f" | "vsm-16f" | "vsm-32f" | "pcss-32f";
     /**
      * Sets the type of the light.
      * @param value - The type.
@@ -149,6 +185,16 @@ declare class LightComponentElement extends ComponentElement {
      * @returns The type.
      */
     get type(): string;
+    /**
+     * Sets the VSM bias of the light.
+     * @param value - The VSM bias.
+     */
+    set vsmBias(value: number);
+    /**
+     * Gets the VSM bias of the light.
+     * @returns The VSM bias.
+     */
+    get vsmBias(): number;
     static get observedAttributes(): string[];
     attributeChangedCallback(name: string, _oldValue: string, newValue: string): void;
 }

package/dist/components/listener-component.d.ts

@@ -1,11 +1,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
  */
 declare class ListenerComponentElement extends ComponentElement {
+    /** @ignore */
     constructor();
     /**
      * Gets the audio listener component.

package/dist/components/render-component.d.ts

@@ -1,7 +1,9 @@
 import { RenderComponent, StandardMaterial } from 'playcanvas';
 import { ComponentElement } from './component';
 /**
- * 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
  */
@@ -10,6 +12,7 @@ declare class RenderComponentElement extends ComponentElement {
     private _material;
     private _receiveShadows;
     private _type;
+    /** @ignore */
     constructor();
     getInitialComponentData(): {
         type: "box" | "asset" | "capsule" | "cone" | "cylinder" | "plane" | "sphere";

package/dist/components/rigidbody-component.d.ts

@@ -1,7 +1,9 @@
 import { RigidBodyComponent, Vec3 } from 'playcanvas';
 import { ComponentElement } from './component';
 /**
- * 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
  */
@@ -42,9 +44,7 @@ declare class RigidBodyComponentElement extends ComponentElement {
      * The type of the rigidbody.
      */
     private _type;
-    /**
-     * Creates a new RigidBodyComponentElement.
-     */
+    /** @ignore */
     constructor();
     getInitialComponentData(): {
         angularDamping: number;

package/dist/components/screen-component.d.ts

@@ -1,7 +1,9 @@
 import { ScreenComponent, Vec2 } from 'playcanvas';
 import { ComponentElement } from './component';
 /**
- * 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
  */
@@ -12,6 +14,7 @@ declare class ScreenComponentElement extends ComponentElement {
     private _priority;
     private _blend;
     private _scaleBlend;
+    /** @ignore */
     constructor();
     getInitialComponentData(): {
         priority: number;

package/dist/components/script-component.d.ts

@@ -17,12 +17,15 @@ 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
  */
 declare class ScriptComponentElement extends ComponentElement {
     private observer;
+    /** @ignore */
     constructor();
     initComponent(): void;
     private applyAttributes;

package/dist/components/script.d.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.
  */
 declare class ScriptElement extends HTMLElement {
     private _attributes;

package/dist/components/sound-component.d.ts

@@ -1,7 +1,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
  */
@@ -13,9 +15,10 @@ declare class SoundComponentElement extends ComponentElement {
     private _refDistance;
     private _rollOffFactor;
     private _volume;
+    /** @ignore */
     constructor();
     getInitialComponentData(): {
-        distanceModel: "exponential" | "inverse" | "linear";
+        distanceModel: "linear" | "exponential" | "inverse";
         maxDistance: number;
         pitch: number;
         positional: boolean;

package/dist/components/sound-slot.d.ts

@@ -2,7 +2,9 @@ import { SoundSlot } from 'playcanvas';
 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.
  */
 declare class SoundSlotElement extends AsyncElement {
     private _asset;

package/dist/entity.d.ts

@@ -1,7 +1,9 @@
-import { Entity, Vec3 } from 'playcanvas';
+import { Application, Entity, Vec3 } from 'playcanvas';
 import { AsyncElement } from './async-element';
 /**
- * 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.
  */
 declare class EntityElement extends AsyncElement {
     /**
@@ -28,11 +30,17 @@ declare class EntityElement extends AsyncElement {
      * The tags of the entity.
      */
     private _tags;
+    /**
+     * The pointer event listeners for the entity.
+     */
+    private _listeners;
     /**
      * The PlayCanvas entity instance.
      */
     entity: Entity | null;
-    connectedCallback(): Promise<void>;
+    createEntity(app: Application): void;
+    buildHierarchy(app: Application): void;
+    connectedCallback(): void;
     disconnectedCallback(): void;
     /**
      * Sets the enabled state of the entity.
@@ -96,5 +104,8 @@ declare class EntityElement extends AsyncElement {
     get tags(): string[];
     static get observedAttributes(): string[];
     attributeChangedCallback(name: string, _oldValue: string, newValue: string): void;
+    addEventListener(type: string, listener: EventListener, options?: boolean | AddEventListenerOptions): void;
+    removeEventListener(type: string, listener: EventListener, options?: boolean | EventListenerOptions): void;
+    hasListeners(type: string): boolean;
 }
 export { EntityElement };

package/dist/fog.d.ts

@@ -0,0 +1,28 @@
+import { Color } from 'playcanvas';
+/**
+ * The FogElement interface provides properties and methods for manipulating
+ * `<pc-fog>` elements. The FogElement interface also inherits the properties and
+ * methods of the {@link HTMLElement} interface.
+ */
+declare class FogElement extends HTMLElement {
+    private _color;
+    private _density;
+    private _end;
+    private _start;
+    private _type;
+    private dispatchFogUpdate;
+    set color(value: Color);
+    get color(): Color;
+    set density(value: number);
+    get density(): number;
+    set end(value: number);
+    get end(): number;
+    set start(value: number);
+    get start(): number;
+    set type(value: 'linear' | 'exp' | 'exp2');
+    get type(): 'linear' | 'exp' | 'exp2';
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, _oldValue: string, newValue: string): void;
+    constructor();
+}
+export { FogElement };

package/dist/material.d.ts

@@ -1,6 +1,8 @@
 import { Color, StandardMaterial } from 'playcanvas';
 /**
- * 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.
  */
 declare class MaterialElement extends HTMLElement {
     private _diffuse;

package/dist/model.d.ts

@@ -1,6 +1,8 @@
 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.
  */
 declare class ModelElement extends AsyncElement {
     private _asset;

package/dist/module.d.ts

@@ -1,5 +1,11 @@
+/**
+ * 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.
+ */
 declare class ModuleElement extends HTMLElement {
     private loadPromise;
+    /** @ignore */
     constructor();
     private loadModule;
     getLoadPromise(): Promise<void>;