@playcanvas/web-components 0.1.2 → 0.1.4

package/src/components/camera-component.ts

@@ -1,7 +1,7 @@
-import { PROJECTION_ORTHOGRAPHIC, PROJECTION_PERSPECTIVE, CameraComponent, Color } from 'playcanvas';
+import { PROJECTION_ORTHOGRAPHIC, PROJECTION_PERSPECTIVE, CameraComponent, Color, Vec4 } from 'playcanvas';
 
 import { ComponentElement } from './component';
-import { parseColor } from '../utils';
+import { parseColor, parseVec4 } from '../utils';
 
 /**
  * Represents a camera component in the PlayCanvas engine.
@@ -9,18 +9,36 @@ import { parseColor } from '../utils';
  * @category Components
  */
 class CameraComponentElement extends ComponentElement {
-    private _clearColor = new Color(1, 1, 1, 1);
+    private _clearColor = new Color(0.75, 0.75, 0.75, 1);
+
+    private _clearColorBuffer = true;
+
+    private _clearDepthBuffer = true;
+
+    private _clearStencilBuffer = false;
+
+    private _cullFaces = true;
 
     private _farClip = 1000;
 
+    private _flipFaces = false;
+
     private _fov = 45;
 
+    private _frustumCulling = true;
+
     private _nearClip = 0.1;
 
     private _orthographic = false;
 
     private _orthoHeight = 10;
 
+    private _priority = 0;
+
+    private _rect = new Vec4(0, 0, 1, 1);
+
+    private _scissorRect = new Vec4(0, 0, 1, 1);
+
     /**
      * Creates a new CameraComponentElement.
      */
@@ -31,11 +49,20 @@ class CameraComponentElement extends ComponentElement {
     getInitialComponentData() {
         return {
             clearColor: this._clearColor,
+            clearColorBuffer: this._clearColorBuffer,
+            clearDepthBuffer: this._clearDepthBuffer,
+            clearStencilBuffer: this._clearStencilBuffer,
+            cullFaces: this._cullFaces,
             farClip: this._farClip,
+            flipFaces: this._flipFaces,
             fov: this._fov,
+            frustumCulling: this._frustumCulling,
             nearClip: this._nearClip,
-            projection: this._orthographic ? PROJECTION_ORTHOGRAPHIC : PROJECTION_PERSPECTIVE,
-            orthoHeight: this._orthoHeight
+            orthographic: this._orthographic,
+            orthoHeight: this._orthoHeight,
+            priority: this._priority,
+            rect: this._rect,
+            scissorRect: this._scissorRect
         };
     }
 
@@ -66,6 +93,82 @@ class CameraComponentElement extends ComponentElement {
         return this._clearColor;
     }
 
+    /**
+     * Sets the clear color buffer of the camera.
+     * @param value - The clear color buffer.
+     */
+    set clearColorBuffer(value: boolean) {
+        this._clearColorBuffer = value;
+        if (this.component) {
+            this.component.clearColorBuffer = value;
+        }
+    }
+
+    /**
+     * Gets the clear color buffer of the camera.
+     * @returns The clear color buffer.
+     */
+    get clearColorBuffer(): boolean {
+        return this._clearColorBuffer;
+    }
+
+    /**
+     * Sets the clear depth buffer of the camera.
+     * @param value - The clear depth buffer.
+     */
+    set clearDepthBuffer(value: boolean) {
+        this._clearDepthBuffer = value;
+        if (this.component) {
+            this.component.clearDepthBuffer = value;
+        }
+    }
+
+    /**
+     * Gets the clear depth buffer of the camera.
+     * @returns The clear depth buffer.
+     */
+    get clearDepthBuffer(): boolean {
+        return this._clearDepthBuffer;
+    }
+
+    /**
+     * Sets the clear stencil buffer of the camera.
+     * @param value - The clear stencil buffer.
+     */
+    set clearStencilBuffer(value: boolean) {
+        this._clearStencilBuffer = value;
+        if (this.component) {
+            this.component.clearStencilBuffer = value;
+        }
+    }
+
+    /**
+     * Gets the clear stencil buffer of the camera.
+     * @returns The clear stencil buffer.
+     */
+    get clearStencilBuffer(): boolean {
+        return this._clearStencilBuffer;
+    }
+
+    /**
+     * Sets the cull faces of the camera.
+     * @param value - The cull faces.
+     */
+    set cullFaces(value: boolean) {
+        this._cullFaces = value;
+        if (this.component) {
+            this.component.cullFaces = value;
+        }
+    }
+
+    /**
+     * Gets the cull faces of the camera.
+     * @returns The cull faces.
+     */
+    get cullFaces(): boolean {
+        return this._cullFaces;
+    }
+
     /**
      * Sets the far clip distance of the camera.
      * @param value - The far clip distance.
@@ -85,6 +188,25 @@ class CameraComponentElement extends ComponentElement {
         return this._farClip;
     }
 
+    /**
+     * Sets the flip faces of the camera.
+     * @param value - The flip faces.
+     */
+    set flipFaces(value: boolean) {
+        this._flipFaces = value;
+        if (this.component) {
+            this.component.flipFaces = value;
+        }
+    }
+
+    /**
+     * Gets the flip faces of the camera.
+     * @returns The flip faces.
+     */
+    get flipFaces(): boolean {
+        return this._flipFaces;
+    }
+
     /**
      * Sets the field of view of the camera.
      * @param value - The field of view.
@@ -104,6 +226,25 @@ class CameraComponentElement extends ComponentElement {
         return this._fov;
     }
 
+    /**
+     * Sets the frustum culling of the camera.
+     * @param value - The frustum culling.
+     */
+    set frustumCulling(value: boolean) {
+        this._frustumCulling = value;
+        if (this.component) {
+            this.component.frustumCulling = value;
+        }
+    }
+
+    /**
+     * Gets the frustum culling of the camera.
+     * @returns The frustum culling.
+     */
+    get frustumCulling(): boolean {
+        return this._frustumCulling;
+    }
+
     /**
      * Sets the near clip distance of the camera.
      * @param value - The near clip distance.
@@ -161,8 +302,82 @@ class CameraComponentElement extends ComponentElement {
         return this._orthoHeight;
     }
 
+    /**
+     * Sets the priority of the camera.
+     * @param value - The priority.
+     */
+    set priority(value: number) {
+        this._priority = value;
+        if (this.component) {
+            this.component.priority = value;
+        }
+    }
+
+    /**
+     * Gets the priority of the camera.
+     * @returns The priority.
+     */
+    get priority(): number {
+        return this._priority;
+    }
+
+    /**
+     * Sets the rect of the camera.
+     * @param value - The rect.
+     */
+    set rect(value: Vec4) {
+        this._rect = value;
+        if (this.component) {
+            this.component.rect = value;
+        }
+    }
+
+    /**
+     * Gets the rect of the camera.
+     * @returns The rect.
+     */
+    get rect(): Vec4 {
+        return this._rect;
+    }
+
+    /**
+     * Sets the scissor rect of the camera.
+     * @param value - The scissor rect.
+     */
+    set scissorRect(value: Vec4) {
+        this._scissorRect = value;
+        if (this.component) {
+            this.component.scissorRect = value;
+        }
+    }
+
+    /**
+     * Gets the scissor rect of the camera.
+     * @returns The scissor rect.
+     */
+    get scissorRect(): Vec4 {
+        return this._scissorRect;
+    }
+
     static get observedAttributes() {
-        return [...super.observedAttributes, 'clear-color', 'near-clip', 'far-clip', 'fov', 'orthographic', 'ortho-height'];
+        return [
+            ...super.observedAttributes,
+            'clear-color',
+            'clear-color-buffer',
+            'clear-depth-buffer',
+            'clear-stencil-buffer',
+            'cull-faces',
+            'far-clip',
+            'flip-faces',
+            'fov',
+            'frustum-culling',
+            'near-clip',
+            'orthographic',
+            'ortho-height',
+            'priority',
+            'rect',
+            'scissor-rect'
+        ];
     }
 
     attributeChangedCallback(name: string, _oldValue: string, newValue: string) {
@@ -172,12 +387,30 @@ class CameraComponentElement extends ComponentElement {
             case 'clear-color':
                 this.clearColor = parseColor(newValue);
                 break;
+            case 'clear-color-buffer':
+                this.clearColorBuffer = newValue !== 'false';
+                break;
+            case 'clear-depth-buffer':
+                this.clearDepthBuffer = newValue !== 'false';
+                break;
+            case 'clear-stencil-buffer':
+                this.clearStencilBuffer = newValue !== 'false';
+                break;
+            case 'cull-faces':
+                this.cullFaces = newValue !== 'false';
+                break;
             case 'far-clip':
                 this.farClip = parseFloat(newValue);
                 break;
+            case 'flip-faces':
+                this.flipFaces = newValue !== 'true';
+                break;
             case 'fov':
                 this.fov = parseFloat(newValue);
                 break;
+            case 'frustum-culling':
+                this.frustumCulling = newValue !== 'false';
+                break;
             case 'near-clip':
                 this.nearClip = parseFloat(newValue);
                 break;
@@ -187,6 +420,15 @@ class CameraComponentElement extends ComponentElement {
             case 'ortho-height':
                 this.orthoHeight = parseFloat(newValue);
                 break;
+            case 'priority':
+                this.priority = parseFloat(newValue);
+                break;
+            case 'rect':
+                this.rect = parseVec4(newValue);
+                break;
+            case 'scissor-rect':
+                this.scissorRect = parseVec4(newValue);
+                break;
         }
     }
 }

package/src/components/collision-component.ts

@@ -1,7 +1,7 @@
-import { CollisionComponent, Vec3 } from 'playcanvas';
+import { CollisionComponent, Quat, Vec3 } from 'playcanvas';
 
 import { ComponentElement } from './component';
-import { parseVec3 } from '../utils';
+import { parseQuat, parseVec3 } from '../utils';
 
 /**
  * Represents a collision component in the PlayCanvas engine.
@@ -9,6 +9,8 @@ import { parseVec3 } from '../utils';
  * @category Components
  */
 class CollisionComponentElement extends ComponentElement {
+    private _angularOffset: Quat = new Quat();
+
     private _axis: number = 1;
 
     private _convexHull: boolean = false;
@@ -17,6 +19,8 @@ class CollisionComponentElement extends ComponentElement {
 
     private _height: number = 2;
 
+    private _linearOffset: Vec3 = new Vec3();
+
     private _radius: number = 0.5;
 
     private _type: string = 'box';
@@ -31,9 +35,11 @@ class CollisionComponentElement extends ComponentElement {
     getInitialComponentData() {
         return {
             axis: this._axis,
+            angularOffset: this._angularOffset,
             convexHull: this._convexHull,
             halfExtents: this._halfExtents,
             height: this._height,
+            linearOffset: this._linearOffset,
             radius: this._radius,
             type: this._type
         };
@@ -47,6 +53,17 @@ class CollisionComponentElement extends ComponentElement {
         return super.component as CollisionComponent | null;
     }
 
+    set angularOffset(value: Quat) {
+        this._angularOffset = value;
+        if (this.component) {
+            this.component.angularOffset = value;
+        }
+    }
+
+    get angularOffset() {
+        return this._angularOffset;
+    }
+
     set axis(value: number) {
         this._axis = value;
         if (this.component) {
@@ -91,6 +108,17 @@ class CollisionComponentElement extends ComponentElement {
         return this._height;
     }
 
+    set linearOffset(value: Vec3) {
+        this._linearOffset = value;
+        if (this.component) {
+            this.component.linearOffset = value;
+        }
+    }
+
+    get linearOffset() {
+        return this._linearOffset;
+    }
+
     set radius(value: number) {
         this._radius = value;
         if (this.component) {
@@ -114,13 +142,16 @@ class CollisionComponentElement extends ComponentElement {
     }
 
     static get observedAttributes() {
-        return [...super.observedAttributes, 'axis', 'convex-hull', 'half-extents', 'height', 'radius', 'type'];
+        return [...super.observedAttributes, 'angular-offset', 'axis', 'convex-hull', 'half-extents', 'height', 'linear-offset', 'radius', 'type'];
     }
 
     attributeChangedCallback(name: string, _oldValue: string, newValue: string) {
         super.attributeChangedCallback(name, _oldValue, newValue);
 
         switch (name) {
+            case 'angular-offset':
+                this.angularOffset = parseQuat(newValue);
+                break;
             case 'axis':
                 this.axis = parseInt(newValue, 10);
                 break;
@@ -133,6 +164,9 @@ class CollisionComponentElement extends ComponentElement {
             case 'height':
                 this.height = parseFloat(newValue);
                 break;
+            case 'linear-offset':
+                this.linearOffset = parseVec3(newValue);
+                break;
             case 'radius':
                 this.radius = parseFloat(newValue);
                 break;

package/src/components/element-component.ts

@@ -43,17 +43,12 @@ class ElementComponentElement extends ComponentElement {
         this.component!._text._material.useFog = true;
     }
 
-    getAsset() {
-        const assetElement = document.querySelector(`pc-asset[id="${this._asset}"]`) as AssetElement;
-        return assetElement!.asset;
-    }
-
     getInitialComponentData() {
         return {
             anchor: this._anchor,
             autoWidth: this._autoWidth,
             color: this._color,
-            fontAsset: this.getAsset()!.id,
+            fontAsset: AssetElement.get(this._asset)!.id,
             fontSize: this._fontSize,
             lineHeight: this._lineHeight,
             pivot: this._pivot,
@@ -85,7 +80,7 @@ class ElementComponentElement extends ComponentElement {
 
     set asset(value: string) {
         this._asset = value;
-        const asset = this.getAsset();
+        const asset = AssetElement.get(value);
         if (this.component && asset) {
             this.component.fontAsset = asset.id;
         }

package/src/components/gsplat-component.ts

@@ -15,14 +15,9 @@ class GSplatComponentElement extends ComponentElement {
         super('gsplat');
     }
 
-    getAsset() {
-        const assetElement = document.querySelector(`pc-asset[id="${this._asset}"]`) as AssetElement;
-        return assetElement!.asset;
-    }
-
     getInitialComponentData() {
         return {
-            asset: this.getAsset()
+            asset: AssetElement.get(this._asset)
         };
     }
 
@@ -36,7 +31,7 @@ class GSplatComponentElement extends ComponentElement {
 
     set asset(value: string) {
         this._asset = value;
-        const asset = this.getAsset();
+        const asset = AssetElement.get(value);
         if (this.component && asset) {
             this.component.asset = asset;
         }

package/src/components/render-component.ts

@@ -1,6 +1,7 @@
-import { RenderComponent } from 'playcanvas';
+import { RenderComponent, StandardMaterial } from 'playcanvas';
 
 import { ComponentElement } from './component';
+import { MaterialElement } from '../material';
 
 /**
  * Represents a render component in the PlayCanvas engine.
@@ -8,16 +9,24 @@ import { ComponentElement } from './component';
  * @category Components
  */
 class RenderComponentElement extends ComponentElement {
-    private _type: 'asset' | 'box' | 'capsule' | 'cone' | 'cylinder' | 'plane' | 'sphere' = 'asset';
-
     private _castShadows = true;
 
+    private _material: string = '';
+
     private _receiveShadows = true;
 
+    private _type: 'asset' | 'box' | 'capsule' | 'cone' | 'cylinder' | 'plane' | 'sphere' = 'asset';
+
     constructor() {
         super('render');
     }
 
+    async connectedCallback() {
+        await super.connectedCallback();
+
+        this.material = this._material;
+    }
+
     getInitialComponentData() {
         return {
             type: this._type,
@@ -72,6 +81,25 @@ class RenderComponentElement extends ComponentElement {
         return this._castShadows;
     }
 
+    /**
+     * Sets the material of the render component.
+     * @param value - The id of the material asset to use.
+     */
+    set material(value: string) {
+        this._material = value;
+        if (this.component) {
+            this.component.material = MaterialElement.get(value) as StandardMaterial;
+        }
+    }
+
+    /**
+     * Gets the id of the material asset used by the render component.
+     * @returns The id of the material asset.
+     */
+    get material() {
+        return this._material;
+    }
+
     /**
      * Sets the receive shadows flag of the render component.
      * @param value - The receive shadows flag.
@@ -92,22 +120,25 @@ class RenderComponentElement extends ComponentElement {
     }
 
     static get observedAttributes() {
-        return [...super.observedAttributes, 'cast-shadows', 'receive-shadows', 'type'];
+        return [...super.observedAttributes, 'cast-shadows', 'material', 'receive-shadows', 'type'];
     }
 
     attributeChangedCallback(name: string, _oldValue: string, newValue: string) {
         super.attributeChangedCallback(name, _oldValue, newValue);
 
         switch (name) {
-            case 'type':
-                this.type = newValue as 'asset' | 'box' | 'capsule' | 'cone' | 'cylinder' | 'plane' | 'sphere';
-                break;
             case 'cast-shadows':
                 this.castShadows = newValue !== 'false';
                 break;
+            case 'material':
+                this.material = newValue;
+                break;
             case 'receive-shadows':
                 this.receiveShadows = newValue !== 'false';
                 break;
+            case 'type':
+                this.type = newValue as 'asset' | 'box' | 'capsule' | 'cone' | 'cylinder' | 'plane' | 'sphere';
+                break;
         }
     }
 }