@playcanvas/web-components 0.1.1 → 0.1.3

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/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;
         }
     }
 }

package/src/components/screen-component.ts

@@ -0,0 +1,153 @@
+import { SCALEMODE_BLEND, SCALEMODE_NONE, ScreenComponent, Vec2 } from 'playcanvas';
+
+import { ComponentElement } from './component';
+import { parseVec2 } from '../utils';
+
+/**
+ * Represents a screen component in the PlayCanvas engine.
+ *
+ * @category Components
+ */
+class ScreenComponentElement extends ComponentElement {
+    private _screenSpace = false;
+
+    private _resolution: Vec2 = new Vec2(640, 320);
+
+    private _referenceResolution: Vec2 = new Vec2(640, 320);
+
+    private _priority = 0;
+
+    private _blend = false;
+
+    private _scaleBlend = 0.5;
+
+    constructor() {
+        super('screen');
+    }
+
+    getInitialComponentData() {
+        return {
+            priority: this._priority,
+            referenceResolution: this._referenceResolution,
+            resolution: this._resolution,
+            scaleBlend: this._scaleBlend,
+            scaleMode: this._blend ? SCALEMODE_BLEND : SCALEMODE_NONE,
+            screenSpace: this._screenSpace
+        };
+    }
+
+    /**
+     * Gets the screen component.
+     * @returns The screen component.
+     */
+    get component(): ScreenComponent | null {
+        return super.component as ScreenComponent | null;
+    }
+
+    set priority(value: number) {
+        this._priority = value;
+        if (this.component) {
+            this.component.priority = this._priority;
+        }
+    }
+
+    get priority() {
+        return this._priority;
+    }
+
+    set referenceResolution(value: Vec2) {
+        this._referenceResolution = value;
+        if (this.component) {
+            this.component.referenceResolution = this._referenceResolution;
+        }
+    }
+
+    get referenceResolution() {
+        return this._referenceResolution;
+    }
+
+    set resolution(value: Vec2) {
+        this._resolution = value;
+        if (this.component) {
+            this.component.resolution = this._resolution;
+        }
+    }
+
+    get resolution() {
+        return this._resolution;
+    }
+
+    set scaleBlend(value: number) {
+        this._scaleBlend = value;
+        if (this.component) {
+            this.component.scaleBlend = this._scaleBlend;
+        }
+    }
+
+    get scaleBlend() {
+        return this._scaleBlend;
+    }
+
+    set blend(value: boolean) {
+        this._blend = value;
+        if (this.component) {
+            this.component.scaleMode = this._blend ? SCALEMODE_BLEND : SCALEMODE_NONE;
+        }
+    }
+
+    get blend() {
+        return this._blend;
+    }
+
+    set screenSpace(value: boolean) {
+        this._screenSpace = value;
+        if (this.component) {
+            this.component.screenSpace = this._screenSpace;
+        }
+    }
+
+    get screenSpace() {
+        return this._screenSpace;
+    }
+
+    static get observedAttributes() {
+        return [
+            ...super.observedAttributes,
+            'blend',
+            'screen-space',
+            'resolution',
+            'reference-resolution',
+            'priority',
+            'scale-blend'
+        ];
+    }
+
+    attributeChangedCallback(name: string, _oldValue: string, newValue: string) {
+        super.attributeChangedCallback(name, _oldValue, newValue);
+
+        switch (name) {
+            case 'priority':
+                this.priority = parseInt(newValue);
+                break;
+            case 'reference-resolution':
+                this.referenceResolution = parseVec2(newValue);
+                break;
+            case 'resolution':
+                this.resolution = parseVec2(newValue);
+                break;
+            case 'scale-blend':
+                this.scaleBlend = parseFloat(newValue);
+                break;
+            case 'blend':
+                this.blend = this.hasAttribute('blend');
+                break;
+            case 'screen-space':
+                this.screenSpace = this.hasAttribute('screen-space');
+                break;
+        }
+    }
+}
+
+customElements.define('pc-screen', ScreenComponentElement);
+
+export { ScreenComponentElement };