@playcanvas/web-components 0.1.2 → 0.1.4

package/README.md

@@ -43,6 +43,7 @@ Table of contents:
 - [pc-script](#pc-script)
 - [pc-scripts](#pc-scripts)
 - [pc-sky](#pc-sky)
+- [pc-screen](#pc-screen)
 - [pc-sound](#pc-sound)
 - [pc-sounds](#pc-sounds)
 - [pc-splat](#pc-splat)
@@ -72,12 +73,21 @@ The `pc-camera` tag is used to define a camera component. It must be a direct ch
 
 | Attribute | Description |
 | --- | --- |
-| `clear-color` | The background color of the camera. Can be a comma-separated list of R, G, B, and A values or a hex color code. If not specified, `1,1,1,1` is used. |
-| `far-clip` | The far clipping plane of the camera. If not specified, `1000` is used. |
-| `fov` | The field of view of the camera. If not specified, `45` is used. |
-| `near-clip` | The near clipping plane of the camera. If not specified, `0.1` is used. |
-| `orthographic` | Valueless attribute. If present, the camera uses an orthographic projection. |
-| `ortho-height` | The height of the orthographic projection. If not specified, `10` is used. |
+| `clear-color` | The background color of the camera. Can be a comma-separated list of R, G, B, and A values or a hex color code. If unspecified, `0.75,0.75,0.75,1` is used. |
+| `clear-color-buffer` | Boolean attribute. Controls whether the camera clears the color buffer. If unspecified, the color buffer is cleared. |
+| `clear-depth-buffer` | Boolean attribute. Controls whether the camera clears the depth buffer. If unspecified, the depth buffer is cleared. |
+| `clear-stencil-buffer` | Boolean attribute. Controls whether the camera clears the stencil buffer. If unspecified, the stencil buffer is cleared. |
+| `cull-faces` | Boolean attribute. Controls whether the camera culls faces. If unspecified, faces are culled. |
+| `far-clip` | The far clipping plane of the camera. If unspecified, `1000` is used. |
+| `flip-faces` | Boolean attribute. Controls whether the camera flips faces. If unspecified, faces are not flipped. |
+| `fov` | The field of view of the camera. If unspecified, `45` is used. |
+| `frustum-culling` | Boolean attribute. Controls whether the camera uses frustum culling. If unspecified, frustum culling is used. |
+| `near-clip` | The near clipping plane of the camera. If unspecified, `0.1` is used. |
+| `orthographic` | Valueless attribute. If present, the camera uses an orthographic projection. If unspecified, the camera uses a perspective projection. |
+| `ortho-height` | The height of the orthographic projection. If unspecified, `10` is used. |
+| `priority` | The priority of the camera. If unspecified, `0` is used. |
+| `rect` | The viewport rectangle of the camera. Specified as a comma-separated list of X, Y, Width, and Height values. If unspecified, `0,0,1,1` is used. |
+| `scissor-rect` | The scissor rectangle of the camera. Specified as a comma-separated list of X, Y, Width, and Height values. If not specified, `0,0,1,1` is used. |
 
 ### pc-collision
 
@@ -194,6 +204,20 @@ The `pc-scene` tag is used to define the scene. It must be a direct child of `pc
 | `fog-end` | The end distance of the fog. |
 | `fog-density` | The density of the fog. |
 
+### pc-screen
+
+The `pc-screen` tag is used to define a screen component. It must be a direct child of a `pc-entity`.
+
+| Attribute | Description |
+| --- | --- |
+| `blend` | Valueless attribute. If present, the screen component blends. |
+| `priority` | The priority of the screen component. Must be an integer between `0` and `255`. If not specified, `0` is used. |
+| `reference-resolution` | The reference resolution of the screen component. Specified as a comma-separated list of Width and Height values. If not specified, `640,320` is used. |
+| `resolution` | The resolution of the screen component. Specified as a comma-separated list of Width and Height values. If not specified, `640,320` is used. |
+| `scale-blend` | The scale blend of the screen component. Must be a number between `0` and `1`. If not specified, `0.5` is used. |
+| `screen-space` | Valueless attribute. If present, the screen component is in screen space. |
+
+
 ### pc-script
 
 The `pc-script` tag is used to define a script. It must be a direct child of a `pc-scripts` component.

package/dist/asset.d.ts

@@ -22,6 +22,7 @@ declare class AssetElement extends HTMLElement {
      * @returns The preload flag.
      */
     get preload(): boolean;
+    static get(id: string): Asset | null | undefined;
     static get observedAttributes(): string[];
     attributeChangedCallback(name: string, _oldValue: string, _newValue: string): void;
 }

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

@@ -1,4 +1,4 @@
-import { CameraComponent, Color } from 'playcanvas';
+import { CameraComponent, Color, Vec4 } from 'playcanvas';
 import { ComponentElement } from './component';
 /**
  * Represents a camera component in the PlayCanvas engine.
@@ -7,22 +7,40 @@ import { ComponentElement } from './component';
  */
 declare class CameraComponentElement extends ComponentElement {
     private _clearColor;
+    private _clearColorBuffer;
+    private _clearDepthBuffer;
+    private _clearStencilBuffer;
+    private _cullFaces;
     private _farClip;
+    private _flipFaces;
     private _fov;
+    private _frustumCulling;
     private _nearClip;
     private _orthographic;
     private _orthoHeight;
+    private _priority;
+    private _rect;
+    private _scissorRect;
     /**
      * Creates a new CameraComponentElement.
      */
     constructor();
     getInitialComponentData(): {
         clearColor: Color;
+        clearColorBuffer: boolean;
+        clearDepthBuffer: boolean;
+        clearStencilBuffer: boolean;
+        cullFaces: boolean;
         farClip: number;
+        flipFaces: boolean;
         fov: number;
+        frustumCulling: boolean;
         nearClip: number;
-        projection: number;
+        orthographic: boolean;
         orthoHeight: number;
+        priority: number;
+        rect: Vec4;
+        scissorRect: Vec4;
     };
     /**
      * Gets the camera component.
@@ -39,6 +57,46 @@ declare class CameraComponentElement extends ComponentElement {
      * @returns The clear color.
      */
     get clearColor(): Color;
+    /**
+     * Sets the clear color buffer of the camera.
+     * @param value - The clear color buffer.
+     */
+    set clearColorBuffer(value: boolean);
+    /**
+     * Gets the clear color buffer of the camera.
+     * @returns The clear color buffer.
+     */
+    get clearColorBuffer(): boolean;
+    /**
+     * Sets the clear depth buffer of the camera.
+     * @param value - The clear depth buffer.
+     */
+    set clearDepthBuffer(value: boolean);
+    /**
+     * Gets the clear depth buffer of the camera.
+     * @returns The clear depth buffer.
+     */
+    get clearDepthBuffer(): boolean;
+    /**
+     * Sets the clear stencil buffer of the camera.
+     * @param value - The clear stencil buffer.
+     */
+    set clearStencilBuffer(value: boolean);
+    /**
+     * Gets the clear stencil buffer of the camera.
+     * @returns The clear stencil buffer.
+     */
+    get clearStencilBuffer(): boolean;
+    /**
+     * Sets the cull faces of the camera.
+     * @param value - The cull faces.
+     */
+    set cullFaces(value: boolean);
+    /**
+     * Gets the cull faces of the camera.
+     * @returns The cull faces.
+     */
+    get cullFaces(): boolean;
     /**
      * Sets the far clip distance of the camera.
      * @param value - The far clip distance.
@@ -49,6 +107,16 @@ declare class CameraComponentElement extends ComponentElement {
      * @returns The far clip distance.
      */
     get farClip(): number;
+    /**
+     * Sets the flip faces of the camera.
+     * @param value - The flip faces.
+     */
+    set flipFaces(value: boolean);
+    /**
+     * Gets the flip faces of the camera.
+     * @returns The flip faces.
+     */
+    get flipFaces(): boolean;
     /**
      * Sets the field of view of the camera.
      * @param value - The field of view.
@@ -59,6 +127,16 @@ declare class CameraComponentElement extends ComponentElement {
      * @returns The field of view.
      */
     get fov(): number;
+    /**
+     * Sets the frustum culling of the camera.
+     * @param value - The frustum culling.
+     */
+    set frustumCulling(value: boolean);
+    /**
+     * Gets the frustum culling of the camera.
+     * @returns The frustum culling.
+     */
+    get frustumCulling(): boolean;
     /**
      * Sets the near clip distance of the camera.
      * @param value - The near clip distance.
@@ -89,6 +167,36 @@ declare class CameraComponentElement extends ComponentElement {
      * @returns The orthographic height.
      */
     get orthoHeight(): number;
+    /**
+     * Sets the priority of the camera.
+     * @param value - The priority.
+     */
+    set priority(value: number);
+    /**
+     * Gets the priority of the camera.
+     * @returns The priority.
+     */
+    get priority(): number;
+    /**
+     * Sets the rect of the camera.
+     * @param value - The rect.
+     */
+    set rect(value: Vec4);
+    /**
+     * Gets the rect of the camera.
+     * @returns The rect.
+     */
+    get rect(): Vec4;
+    /**
+     * Sets the scissor rect of the camera.
+     * @param value - The scissor rect.
+     */
+    set scissorRect(value: Vec4);
+    /**
+     * Gets the scissor rect of the camera.
+     * @returns The scissor rect.
+     */
+    get scissorRect(): Vec4;
     static get observedAttributes(): string[];
     attributeChangedCallback(name: string, _oldValue: string, newValue: string): void;
 }

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

@@ -1,4 +1,4 @@
-import { CollisionComponent, Vec3 } from 'playcanvas';
+import { CollisionComponent, Quat, Vec3 } from 'playcanvas';
 import { ComponentElement } from './component';
 /**
  * Represents a collision component in the PlayCanvas engine.
@@ -6,10 +6,12 @@ import { ComponentElement } from './component';
  * @category Components
  */
 declare class CollisionComponentElement extends ComponentElement {
+    private _angularOffset;
     private _axis;
     private _convexHull;
     private _halfExtents;
     private _height;
+    private _linearOffset;
     private _radius;
     private _type;
     /**
@@ -18,9 +20,11 @@ declare class CollisionComponentElement extends ComponentElement {
     constructor();
     getInitialComponentData(): {
         axis: number;
+        angularOffset: Quat;
         convexHull: boolean;
         halfExtents: Vec3;
         height: number;
+        linearOffset: Vec3;
         radius: number;
         type: string;
     };
@@ -29,6 +33,8 @@ declare class CollisionComponentElement extends ComponentElement {
      * @returns The collision component.
      */
     get component(): CollisionComponent | null;
+    set angularOffset(value: Quat);
+    get angularOffset(): Quat;
     set axis(value: number);
     get axis(): number;
     set convexHull(value: boolean);
@@ -37,6 +43,8 @@ declare class CollisionComponentElement extends ComponentElement {
     get halfExtents(): Vec3;
     set height(value: number);
     get height(): number;
+    set linearOffset(value: Vec3);
+    get linearOffset(): Vec3;
     set radius(value: number);
     get radius(): number;
     set type(value: string);

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

@@ -19,7 +19,6 @@ declare class ElementComponentElement extends ComponentElement {
     private _wrapLines;
     constructor();
     connectedCallback(): Promise<void>;
-    getAsset(): import("playcanvas").Asset | null;
     getInitialComponentData(): {
         anchor: Vec4;
         autoWidth: boolean;

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

@@ -8,9 +8,8 @@ import { ComponentElement } from './component';
 declare class GSplatComponentElement extends ComponentElement {
     private _asset;
     constructor();
-    getAsset(): import("playcanvas").Asset | null;
     getInitialComponentData(): {
-        asset: import("playcanvas").Asset | null;
+        asset: import("playcanvas").Asset | null | undefined;
     };
     /**
      * Gets the gsplat component.

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

@@ -6,10 +6,12 @@ import { ComponentElement } from './component';
  * @category Components
  */
 declare class RenderComponentElement extends ComponentElement {
-    private _type;
     private _castShadows;
+    private _material;
     private _receiveShadows;
+    private _type;
     constructor();
+    connectedCallback(): Promise<void>;
     getInitialComponentData(): {
         type: "box" | "asset" | "capsule" | "cone" | "cylinder" | "plane" | "sphere";
         castShadows: boolean;
@@ -40,6 +42,16 @@ declare class RenderComponentElement extends ComponentElement {
      * @returns The cast shadows flag.
      */
     get castShadows(): boolean;
+    /**
+     * Sets the material of the render component.
+     * @param value - The id of the material asset to use.
+     */
+    set material(value: string);
+    /**
+     * Gets the id of the material asset used by the render component.
+     * @returns The id of the material asset.
+     */
+    get material(): string;
     /**
      * Sets the receive shadows flag of the render component.
      * @param value - The receive shadows flag.

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

@@ -0,0 +1,44 @@
+import { ScreenComponent, Vec2 } from 'playcanvas';
+import { ComponentElement } from './component';
+/**
+ * Represents a screen component in the PlayCanvas engine.
+ *
+ * @category Components
+ */
+declare class ScreenComponentElement extends ComponentElement {
+    private _screenSpace;
+    private _resolution;
+    private _referenceResolution;
+    private _priority;
+    private _blend;
+    private _scaleBlend;
+    constructor();
+    getInitialComponentData(): {
+        priority: number;
+        referenceResolution: Vec2;
+        resolution: Vec2;
+        scaleBlend: number;
+        scaleMode: string;
+        screenSpace: boolean;
+    };
+    /**
+     * Gets the screen component.
+     * @returns The screen component.
+     */
+    get component(): ScreenComponent | null;
+    set priority(value: number);
+    get priority(): number;
+    set referenceResolution(value: Vec2);
+    get referenceResolution(): Vec2;
+    set resolution(value: Vec2);
+    get resolution(): Vec2;
+    set scaleBlend(value: number);
+    get scaleBlend(): number;
+    set blend(value: boolean);
+    get blend(): boolean;
+    set screenSpace(value: boolean);
+    get screenSpace(): boolean;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, _oldValue: string, newValue: string): void;
+}
+export { ScreenComponentElement };

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

@@ -17,7 +17,6 @@ declare class SoundSlotElement extends HTMLElement {
      * The sound slot.
      */
     soundSlot: SoundSlot | null;
-    getAsset(): import("playcanvas").Asset | null;
     connectedCallback(): Promise<void>;
     disconnectedCallback(): void;
     protected get soundElement(): SoundComponentElement | null;

package/dist/entity.d.ts

@@ -27,6 +27,8 @@ declare class EntityElement extends HTMLElement {
      * The tags of the entity.
      */
     private _tags;
+    private _resolveEntity;
+    private _entityReady;
     /**
      * The PlayCanvas entity instance.
      */

package/dist/index.d.ts

@@ -11,11 +11,13 @@ import { GSplatComponentElement } from './components/gsplat-component';
 import { LightComponentElement } from './components/light-component';
 import { RenderComponentElement } from './components/render-component';
 import { RigidBodyComponentElement } from './components/rigidbody-component';
+import { ScreenComponentElement } from './components/screen-component';
 import { ScriptComponentElement } from './components/script-component';
 import { ScriptElement } from './components/script';
 import { SoundComponentElement } from './components/sound-component';
 import { SoundSlotElement } from './components/sound-slot';
+import { MaterialElement } from './material';
 import { ModelElement } from './model';
 import { SceneElement } from './scene';
 import { SkyElement } from './sky';
-export { ModuleElement, AppElement, EntityElement, AssetElement, CameraComponentElement, CollisionComponentElement, ComponentElement, ElementComponentElement, GSplatComponentElement, LightComponentElement, ListenerComponentElement, RenderComponentElement, RigidBodyComponentElement, ScriptComponentElement, ScriptElement, SoundComponentElement, SoundSlotElement, ModelElement, SceneElement, SkyElement };
+export { ModuleElement, AppElement, EntityElement, AssetElement, CameraComponentElement, CollisionComponentElement, ComponentElement, ElementComponentElement, GSplatComponentElement, LightComponentElement, ListenerComponentElement, RenderComponentElement, RigidBodyComponentElement, ScreenComponentElement, ScriptComponentElement, ScriptElement, SoundComponentElement, SoundSlotElement, MaterialElement, ModelElement, SceneElement, SkyElement };

package/dist/material.d.ts

@@ -0,0 +1,29 @@
+import { Color, StandardMaterial } from 'playcanvas';
+/**
+ * Represents a material in the PlayCanvas engine.
+ */
+declare class MaterialElement extends HTMLElement {
+    private _diffuse;
+    private _diffuseMap;
+    private _metalnessMap;
+    private _normalMap;
+    private _roughnessMap;
+    material: StandardMaterial | null;
+    createMaterial(): void;
+    disconnectedCallback(): void;
+    setMap(map: string, property: 'diffuseMap' | 'metalnessMap' | 'normalMap' | 'glossMap'): void;
+    set diffuse(value: Color);
+    get diffuse(): Color;
+    set diffuseMap(value: string);
+    get diffuseMap(): string;
+    set metalnessMap(value: string);
+    get metalnessMap(): string;
+    set normalMap(value: string);
+    get normalMap(): string;
+    set roughnessMap(value: string);
+    get roughnessMap(): string;
+    static get(id: string): StandardMaterial | null | undefined;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, _oldValue: string, newValue: string): void;
+}
+export { MaterialElement };

package/dist/model.d.ts

@@ -4,7 +4,6 @@
 declare class ModelElement extends HTMLElement {
     private _asset;
     connectedCallback(): Promise<void>;
-    getAsset(): import("playcanvas").Asset | null;
     _loadModel(): void;
     /**
      * Sets the asset ID of the model.