@playcanvas/web-components 0.1.11 → 0.1.13

package/src/material.ts

@@ -1,12 +1,13 @@
-import { Color, StandardMaterial } from 'playcanvas';
+import { Color, StandardMaterial, Texture } from 'playcanvas';
 
 import { AssetElement } from './asset';
 import { parseColor } from './utils';
 
 /**
  * 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.
+ * {@link https://developer.playcanvas.com/user-manual/engine/web-components/tags/pc-material/ | `<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);
@@ -45,11 +46,11 @@ class MaterialElement extends HTMLElement {
             const asset = AssetElement.get(map);
             if (asset) {
                 if (asset.loaded) {
-                    this.material[property] = asset.resource;
+                    this.material[property] = asset.resource as Texture;
                     this.material[property]!.anisotropy = 4;
                 } else {
                     asset.once('load', () => {
-                        this.material![property] = asset.resource;
+                        this.material![property] = asset.resource as Texture;
                         this.material![property]!.anisotropy = 4;
                         this.material!.update();
                     });

package/src/model.ts

@@ -5,8 +5,9 @@ import { AsyncElement } from './async-element';
 
 /**
  * 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.
+ * {@link https://developer.playcanvas.com/user-manual/engine/web-components/tags/pc-model/ | `<pc-model>`} elements.
+ * The ModelElement interface also inherits the properties and methods of the
+ * {@link HTMLElement} interface.
  */
 class ModelElement extends AsyncElement {
     private _asset: string = '';
@@ -59,10 +60,10 @@ class ModelElement extends AsyncElement {
         }
 
         if (asset.loaded) {
-            this._instantiate(asset.resource);
+            this._instantiate(asset.resource as ContainerResource);
         } else {
             asset.once('load', () => {
-                this._instantiate(asset.resource);
+                this._instantiate(asset.resource as ContainerResource);
             });
             app!.assets.load(asset);
         }
@@ -74,7 +75,7 @@ class ModelElement extends AsyncElement {
     }
 
     /**
-     * Sets the asset ID of the model.
+     * Sets the id of the `pc-asset` to use for the model.
      * @param value - The asset ID.
      */
     set asset(value: string) {
@@ -85,8 +86,8 @@ class ModelElement extends AsyncElement {
     }
 
     /**
-     * Gets the source URL of the model.
-     * @returns The source URL of the model.
+     * Gets the id of the `pc-asset` to use for the model.
+     * @returns The asset ID.
      */
     get asset(): string {
         return this._asset;

package/src/module.ts

@@ -2,8 +2,9 @@ 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.
+ * {@link https://developer.playcanvas.com/user-manual/engine/web-components/tags/pc-module/ | `<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>;

package/src/scene.ts

@@ -5,8 +5,9 @@ import { parseColor } from './utils';
 
 /**
  * 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.
+ * {@link https://developer.playcanvas.com/user-manual/engine/web-components/tags/pc-scene/ | `<pc-scene>`} elements.
+ * The SceneElement interface also inherits the properties and methods of the
+ * {@link HTMLElement} interface.
  */
 class SceneElement extends AsyncElement {
     /**

package/src/sky.ts

@@ -100,6 +100,10 @@ class SkyElement extends AsyncElement {
         this._scene = null;
     }
 
+    /**
+     * Sets the id of the `pc-asset` to use for the skybox.
+     * @param value - The asset ID.
+     */
     set asset(value: string) {
         this._asset = value;
         if (this.isConnected) {
@@ -107,10 +111,18 @@ class SkyElement extends AsyncElement {
         }
     }
 
+    /**
+     * Gets the id of the `pc-asset` to use for the skybox.
+     * @returns The asset ID.
+     */
     get asset() {
         return this._asset;
     }
 
+    /**
+     * Sets the center of the skybox.
+     * @param value - The center.
+     */
     set center(value: Vec3) {
         this._center = value;
         if (this._scene) {
@@ -118,10 +130,18 @@ class SkyElement extends AsyncElement {
         }
     }
 
+    /**
+     * Gets the center of the skybox.
+     * @returns The center.
+     */
     get center() {
         return this._center;
     }
 
+    /**
+     * Sets the intensity of the skybox.
+     * @param value - The intensity.
+     */
     set intensity(value: number) {
         this._intensity = value;
         if (this._scene) {
@@ -129,10 +149,18 @@ class SkyElement extends AsyncElement {
         }
     }
 
+    /**
+     * Gets the intensity of the skybox.
+     * @returns The intensity.
+     */
     get intensity() {
         return this._intensity;
     }
 
+    /**
+     * Sets the mip level of the skybox.
+     * @param value - The mip level.
+     */
     set level(value: number) {
         this._level = value;
         if (this._scene) {
@@ -140,18 +168,34 @@ class SkyElement extends AsyncElement {
         }
     }
 
+    /**
+     * Gets the mip level of the skybox.
+     * @returns The mip level.
+     */
     get level() {
         return this._level;
     }
 
+    /**
+     * Sets whether the skybox is used as a light source.
+     * @param value - Whether to use lighting.
+     */
     set lighting(value: boolean) {
         this._lighting = value;
     }
 
+    /**
+     * Gets whether the skybox is used as a light source.
+     * @returns Whether to use lighting.
+     */
     get lighting() {
         return this._lighting;
     }
 
+    /**
+     * Sets the Euler rotation of the skybox.
+     * @param value - The rotation.
+     */
     set rotation(value: Vec3) {
         this._rotation = value;
         if (this._scene) {
@@ -159,10 +203,18 @@ class SkyElement extends AsyncElement {
         }
     }
 
+    /**
+     * Gets the Euler rotation of the skybox.
+     * @returns The rotation.
+     */
     get rotation() {
         return this._rotation;
     }
 
+    /**
+     * Sets the scale of the skybox.
+     * @param value - The scale.
+     */
     set scale(value: Vec3) {
         this._scale = value;
         if (this._scene) {
@@ -170,10 +222,18 @@ class SkyElement extends AsyncElement {
         }
     }
 
+    /**
+     * Gets the scale of the skybox.
+     * @returns The scale.
+     */
     get scale() {
         return this._scale;
     }
 
+    /**
+     * Sets the type of the skybox.
+     * @param value - The type.
+     */
     set type(value: 'box' | 'dome' | 'infinite' | 'none') {
         this._type = value;
         if (this._scene) {
@@ -185,6 +245,10 @@ class SkyElement extends AsyncElement {
         }
     }
 
+    /**
+     * Gets the type of the skybox.
+     * @returns The type.
+     */
     get type() {
         return this._type;
     }

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

@@ -1,27 +0,0 @@
-import { GSplatComponent } from 'playcanvas';
-import { ComponentElement } from './component';
-/**
- * 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;
-    };
-    /**
-     * Gets the gsplat component.
-     * @returns The gsplat component.
-     */
-    get component(): GSplatComponent | null;
-    set asset(value: string);
-    get asset(): string;
-    static get observedAttributes(): string[];
-    attributeChangedCallback(name: string, _oldValue: string, newValue: string): void;
-}
-export { GSplatComponentElement };

package/dist/fog.d.ts

@@ -1,28 +0,0 @@
-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/src/fog.ts

@@ -1,121 +0,0 @@
-import { Color } from 'playcanvas';
-
-import { parseColor } from './utils';
-
-/**
- * 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.
- */
-class FogElement extends HTMLElement {
-    private _color = new Color(0.5, 0.5, 0.5);
-
-    private _density = 0.001;
-
-    private _end = 100;
-
-    private _start = 0;
-
-    private _type: 'linear' | 'exp' | 'exp2' = 'linear';
-
-    private dispatchFogUpdate() {
-        const event = new CustomEvent('fogupdate', {
-            bubbles: true,
-            detail: {
-                color: this._color,
-                density: this._density,
-                end: this._end,
-                start: this._start,
-                type: this._type
-            }
-        });
-        this.dispatchEvent(event);
-    }
-
-    set color(value: Color) {
-        this._color = value;
-        this.dispatchFogUpdate();
-    }
-
-    get color(): Color {
-        return this._color;
-    }
-
-    set density(value: number) {
-        this._density = value;
-        this.dispatchFogUpdate();
-    }
-
-    get density(): number {
-        return this._density;
-    }
-
-    set end(value: number) {
-        this._end = value;
-        this.dispatchFogUpdate();
-    }
-
-    get end(): number {
-        return this._end;
-    }
-
-    set start(value: number) {
-        this._start = value;
-        this.dispatchFogUpdate();
-    }
-
-    get start(): number {
-        return this._start;
-    }
-
-    set type(value: 'linear' | 'exp' | 'exp2') {
-        this._type = value;
-        this.dispatchFogUpdate();
-    }
-
-    get type(): 'linear' | 'exp' | 'exp2' {
-        return this._type;
-    }
-
-    static get observedAttributes() {
-        return [
-            'color',
-            'density',
-            'end',
-            'start',
-            'type'
-        ];
-    }
-
-    attributeChangedCallback(name: string, _oldValue: string, newValue: string) {
-        switch (name) {
-            case 'color':
-                this.color = parseColor(newValue);
-                break;
-            case 'density':
-                this.density = parseFloat(newValue);
-                break;
-            case 'end':
-                this.end = parseFloat(newValue);
-                break;
-            case 'start':
-                this.start = parseFloat(newValue);
-                break;
-            case 'type':
-                if (newValue === 'linear' || newValue === 'exp' || newValue === 'exp2') {
-                    this.type = newValue;
-                }
-                break;
-        }
-    }
-
-    constructor() {
-        super();
-        // Dispatch initial fog state
-        this.dispatchFogUpdate();
-    }
-}
-
-customElements.define('pc-fog', FogElement);
-
-export { FogElement };