@playcanvas/web-components 0.1.2 → 0.1.3

package/dist/pwc.js

@@ -80,6 +80,11 @@
                     this.app.assets.add(asset);
                 }
             });
+            // Get all pc-material elements that are direct children of the pc-app element
+            const materialElements = this.querySelectorAll(':scope > pc-material');
+            Array.from(materialElements).forEach((materialElement) => {
+                materialElement.createMaterial();
+            });
             // Load assets before starting the application
             this.app.preload(() => {
                 // Start the application
@@ -224,7 +229,7 @@
             const app = await appElement.getApplication();
             // Create a new entity
             this.entity = new playcanvas.Entity(this._name, app);
-            if (this.parentElement && this.parentElement.tagName === 'pc-entity' && this.parentElement.entity) {
+            if (this.parentElement && this.parentElement.tagName.toLowerCase() === 'pc-entity' && this.parentElement.entity) {
                 this.parentElement.entity.addChild(this.entity);
             }
             else {
@@ -459,6 +464,10 @@
         get preload() {
             return this._preload;
         }
+        static get(id) {
+            const assetElement = document.querySelector(`pc-asset[id="${id}"]`);
+            return assetElement === null || assetElement === void 0 ? void 0 : assetElement.asset;
+        }
         static get observedAttributes() {
             return ['preload'];
         }
@@ -580,21 +589,39 @@
          */
         constructor() {
             super('camera');
-            this._clearColor = new playcanvas.Color(1, 1, 1, 1);
+            this._clearColor = new playcanvas.Color(0.75, 0.75, 0.75, 1);
+            this._clearColorBuffer = true;
+            this._clearDepthBuffer = true;
+            this._clearStencilBuffer = false;
+            this._cullFaces = true;
             this._farClip = 1000;
+            this._flipFaces = false;
             this._fov = 45;
+            this._frustumCulling = true;
             this._nearClip = 0.1;
             this._orthographic = false;
             this._orthoHeight = 10;
+            this._priority = 0;
+            this._rect = new playcanvas.Vec4(0, 0, 1, 1);
+            this._scissorRect = new playcanvas.Vec4(0, 0, 1, 1);
         }
         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 ? playcanvas.PROJECTION_ORTHOGRAPHIC : playcanvas.PROJECTION_PERSPECTIVE,
-                orthoHeight: this._orthoHeight
+                orthographic: this._orthographic,
+                orthoHeight: this._orthoHeight,
+                priority: this._priority,
+                rect: this._rect,
+                scissorRect: this._scissorRect
             };
         }
         /**
@@ -621,6 +648,74 @@
         get clearColor() {
             return this._clearColor;
         }
+        /**
+         * Sets the clear color buffer of the camera.
+         * @param value - The clear color buffer.
+         */
+        set clearColorBuffer(value) {
+            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() {
+            return this._clearColorBuffer;
+        }
+        /**
+         * Sets the clear depth buffer of the camera.
+         * @param value - The clear depth buffer.
+         */
+        set clearDepthBuffer(value) {
+            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() {
+            return this._clearDepthBuffer;
+        }
+        /**
+         * Sets the clear stencil buffer of the camera.
+         * @param value - The clear stencil buffer.
+         */
+        set clearStencilBuffer(value) {
+            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() {
+            return this._clearStencilBuffer;
+        }
+        /**
+         * Sets the cull faces of the camera.
+         * @param value - The cull faces.
+         */
+        set cullFaces(value) {
+            this._cullFaces = value;
+            if (this.component) {
+                this.component.cullFaces = value;
+            }
+        }
+        /**
+         * Gets the cull faces of the camera.
+         * @returns The cull faces.
+         */
+        get cullFaces() {
+            return this._cullFaces;
+        }
         /**
          * Sets the far clip distance of the camera.
          * @param value - The far clip distance.
@@ -638,6 +733,23 @@
         get farClip() {
             return this._farClip;
         }
+        /**
+         * Sets the flip faces of the camera.
+         * @param value - The flip faces.
+         */
+        set flipFaces(value) {
+            this._flipFaces = value;
+            if (this.component) {
+                this.component.flipFaces = value;
+            }
+        }
+        /**
+         * Gets the flip faces of the camera.
+         * @returns The flip faces.
+         */
+        get flipFaces() {
+            return this._flipFaces;
+        }
         /**
          * Sets the field of view of the camera.
          * @param value - The field of view.
@@ -655,6 +767,23 @@
         get fov() {
             return this._fov;
         }
+        /**
+         * Sets the frustum culling of the camera.
+         * @param value - The frustum culling.
+         */
+        set frustumCulling(value) {
+            this._frustumCulling = value;
+            if (this.component) {
+                this.component.frustumCulling = value;
+            }
+        }
+        /**
+         * Gets the frustum culling of the camera.
+         * @returns The frustum culling.
+         */
+        get frustumCulling() {
+            return this._frustumCulling;
+        }
         /**
          * Sets the near clip distance of the camera.
          * @param value - The near clip distance.
@@ -706,8 +835,76 @@
         get orthoHeight() {
             return this._orthoHeight;
         }
+        /**
+         * Sets the priority of the camera.
+         * @param value - The priority.
+         */
+        set priority(value) {
+            this._priority = value;
+            if (this.component) {
+                this.component.priority = value;
+            }
+        }
+        /**
+         * Gets the priority of the camera.
+         * @returns The priority.
+         */
+        get priority() {
+            return this._priority;
+        }
+        /**
+         * Sets the rect of the camera.
+         * @param value - The rect.
+         */
+        set rect(value) {
+            this._rect = value;
+            if (this.component) {
+                this.component.rect = value;
+            }
+        }
+        /**
+         * Gets the rect of the camera.
+         * @returns The rect.
+         */
+        get rect() {
+            return this._rect;
+        }
+        /**
+         * Sets the scissor rect of the camera.
+         * @param value - The scissor rect.
+         */
+        set scissorRect(value) {
+            this._scissorRect = value;
+            if (this.component) {
+                this.component.scissorRect = value;
+            }
+        }
+        /**
+         * Gets the scissor rect of the camera.
+         * @returns The scissor rect.
+         */
+        get scissorRect() {
+            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, _oldValue, newValue) {
             super.attributeChangedCallback(name, _oldValue, newValue);
@@ -715,12 +912,30 @@
                 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;
@@ -730,6 +945,15 @@
                 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;
             }
         }
     }
@@ -877,16 +1101,12 @@
             await super.connectedCallback();
             this.component._text._material.useFog = true;
         }
-        getAsset() {
-            const assetElement = document.querySelector(`pc-asset[id="${this._asset}"]`);
-            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,
@@ -914,7 +1134,7 @@
         }
         set asset(value) {
             this._asset = value;
-            const asset = this.getAsset();
+            const asset = AssetElement.get(value);
             if (this.component && asset) {
                 this.component.fontAsset = asset.id;
             }
@@ -1065,13 +1285,9 @@
             super('gsplat');
             this._asset = '';
         }
-        getAsset() {
-            const assetElement = document.querySelector(`pc-asset[id="${this._asset}"]`);
-            return assetElement.asset;
-        }
         getInitialComponentData() {
             return {
-                asset: this.getAsset()
+                asset: AssetElement.get(this._asset)
             };
         }
         /**
@@ -1083,7 +1299,7 @@
         }
         set asset(value) {
             this._asset = value;
-            const asset = this.getAsset();
+            const asset = AssetElement.get(value);
             if (this.component && asset) {
                 this.component.asset = asset;
             }
@@ -1375,6 +1591,120 @@
     }
     customElements.define('pc-light', LightComponentElement);
 
+    /**
+     * Represents a material in the PlayCanvas engine.
+     */
+    class MaterialElement extends HTMLElement {
+        constructor() {
+            super(...arguments);
+            this._diffuse = new playcanvas.Color(1, 1, 1);
+            this._diffuseMap = '';
+            this._metalnessMap = '';
+            this._normalMap = '';
+            this._roughnessMap = '';
+            this.material = null;
+        }
+        createMaterial() {
+            this.material = new playcanvas.StandardMaterial();
+            this.material.glossInvert = true;
+            this.material.useMetalness = true;
+            this.material.diffuse = this._diffuse;
+            this.diffuseMap = this._diffuseMap;
+            this.metalnessMap = this._metalnessMap;
+            this.normalMap = this._normalMap;
+            this.roughnessMap = this._roughnessMap;
+            this.material.update();
+        }
+        disconnectedCallback() {
+            if (this.material) {
+                this.material.destroy();
+                this.material = null;
+            }
+        }
+        setMap(map, property) {
+            if (this.material) {
+                const asset = AssetElement.get(map);
+                if (asset) {
+                    if (asset.loaded) {
+                        this.material[property] = asset.resource;
+                        this.material[property].anisotropy = 4;
+                    }
+                    else {
+                        asset.once('load', () => {
+                            this.material[property] = asset.resource;
+                            this.material[property].anisotropy = 4;
+                            this.material.update();
+                        });
+                    }
+                }
+            }
+        }
+        set diffuse(value) {
+            this._diffuse = value;
+            if (this.material) {
+                this.material.diffuse = value;
+            }
+        }
+        get diffuse() {
+            return this._diffuse;
+        }
+        set diffuseMap(value) {
+            this._diffuseMap = value;
+            this.setMap(value, 'diffuseMap');
+        }
+        get diffuseMap() {
+            return this._diffuseMap;
+        }
+        set metalnessMap(value) {
+            this._metalnessMap = value;
+            this.setMap(value, 'metalnessMap');
+        }
+        get metalnessMap() {
+            return this._metalnessMap;
+        }
+        set normalMap(value) {
+            this._normalMap = value;
+            this.setMap(value, 'normalMap');
+        }
+        get normalMap() {
+            return this._normalMap;
+        }
+        set roughnessMap(value) {
+            this._roughnessMap = value;
+            this.setMap(value, 'glossMap');
+        }
+        get roughnessMap() {
+            return this._roughnessMap;
+        }
+        static get(id) {
+            const materialElement = document.querySelector(`pc-material[id="${id}"]`);
+            return materialElement === null || materialElement === void 0 ? void 0 : materialElement.material;
+        }
+        static get observedAttributes() {
+            return ['diffuse', 'diffuse-map', 'metalness-map', 'normal-map', 'roughness-map'];
+        }
+        attributeChangedCallback(name, _oldValue, newValue) {
+            switch (name) {
+                case 'diffuse':
+                    this.diffuse = parseColor(newValue);
+                    break;
+                case 'diffuse-map':
+                    this.diffuseMap = newValue;
+                    break;
+                case 'metalness-map':
+                    this.metalnessMap = newValue;
+                    break;
+                case 'normal-map':
+                    this.normalMap = newValue;
+                    break;
+                case 'roughness-map':
+                    this.roughnessMap = newValue;
+                    break;
+            }
+        }
+    }
+    customElements.define('pc-material', MaterialElement);
+
     /**
      * Represents a render component in the PlayCanvas engine.
      *
@@ -1383,9 +1713,14 @@
     class RenderComponentElement extends ComponentElement {
         constructor() {
             super('render');
-            this._type = 'asset';
             this._castShadows = true;
+            this._material = '';
             this._receiveShadows = true;
+            this._type = 'asset';
+        }
+        async connectedCallback() {
+            await super.connectedCallback();
+            this.material = this._material;
         }
         getInitialComponentData() {
             return {
@@ -1435,6 +1770,23 @@
         get castShadows() {
             return this._castShadows;
         }
+        /**
+         * Sets the material of the render component.
+         * @param value - The id of the material asset to use.
+         */
+        set material(value) {
+            this._material = value;
+            if (this.component) {
+                this.component.material = MaterialElement.get(value);
+            }
+        }
+        /**
+         * 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.
@@ -1453,20 +1805,23 @@
             return this._receiveShadows;
         }
         static get observedAttributes() {
-            return [...super.observedAttributes, 'cast-shadows', 'receive-shadows', 'type'];
+            return [...super.observedAttributes, 'cast-shadows', 'material', 'receive-shadows', 'type'];
         }
         attributeChangedCallback(name, _oldValue, newValue) {
             super.attributeChangedCallback(name, _oldValue, newValue);
             switch (name) {
-                case 'type':
-                    this.type = newValue;
-                    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;
+                    break;
             }
         }
     }
@@ -1659,6 +2014,129 @@
     }
     customElements.define('pc-rigidbody', RigidBodyComponentElement);
 
+    /**
+     * Represents a screen component in the PlayCanvas engine.
+     *
+     * @category Components
+     */
+    class ScreenComponentElement extends ComponentElement {
+        constructor() {
+            super('screen');
+            this._screenSpace = false;
+            this._resolution = new playcanvas.Vec2(640, 320);
+            this._referenceResolution = new playcanvas.Vec2(640, 320);
+            this._priority = 0;
+            this._blend = false;
+            this._scaleBlend = 0.5;
+        }
+        getInitialComponentData() {
+            return {
+                priority: this._priority,
+                referenceResolution: this._referenceResolution,
+                resolution: this._resolution,
+                scaleBlend: this._scaleBlend,
+                scaleMode: this._blend ? playcanvas.SCALEMODE_BLEND : playcanvas.SCALEMODE_NONE,
+                screenSpace: this._screenSpace
+            };
+        }
+        /**
+         * Gets the screen component.
+         * @returns The screen component.
+         */
+        get component() {
+            return super.component;
+        }
+        set priority(value) {
+            this._priority = value;
+            if (this.component) {
+                this.component.priority = this._priority;
+            }
+        }
+        get priority() {
+            return this._priority;
+        }
+        set referenceResolution(value) {
+            this._referenceResolution = value;
+            if (this.component) {
+                this.component.referenceResolution = this._referenceResolution;
+            }
+        }
+        get referenceResolution() {
+            return this._referenceResolution;
+        }
+        set resolution(value) {
+            this._resolution = value;
+            if (this.component) {
+                this.component.resolution = this._resolution;
+            }
+        }
+        get resolution() {
+            return this._resolution;
+        }
+        set scaleBlend(value) {
+            this._scaleBlend = value;
+            if (this.component) {
+                this.component.scaleBlend = this._scaleBlend;
+            }
+        }
+        get scaleBlend() {
+            return this._scaleBlend;
+        }
+        set blend(value) {
+            this._blend = value;
+            if (this.component) {
+                this.component.scaleMode = this._blend ? playcanvas.SCALEMODE_BLEND : playcanvas.SCALEMODE_NONE;
+            }
+        }
+        get blend() {
+            return this._blend;
+        }
+        set screenSpace(value) {
+            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, _oldValue, newValue) {
+            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);
+
     /**
      * Represents a script component in the PlayCanvas engine.
      *
@@ -1964,10 +2442,6 @@
              */
             this.soundSlot = null;
         }
-        getAsset() {
-            const assetElement = document.querySelector(`pc-asset[id="${this._asset}"]`);
-            return assetElement.asset;
-        }
         async connectedCallback() {
             const appElement = this.closest('pc-app');
             if (!appElement) {
@@ -2009,7 +2483,7 @@
             var _a;
             this._asset = value;
             if (this.soundSlot) {
-                const id = (_a = this.getAsset()) === null || _a === void 0 ? void 0 : _a.id;
+                const id = (_a = AssetElement.get(value)) === null || _a === void 0 ? void 0 : _a.id;
                 if (id) {
                     this.soundSlot.asset = id;
                 }
@@ -2213,12 +2687,8 @@
                 this.asset = asset;
             }
         }
-        getAsset() {
-            const assetElement = document.querySelector(`pc-asset[id="${this._asset}"]`);
-            return assetElement.asset;
-        }
         _loadModel() {
-            const asset = this.getAsset();
+            const asset = AssetElement.get(this._asset);
             if (!asset) {
                 return;
             }
@@ -2446,10 +2916,6 @@
             this.asset = this.getAttribute('asset') || '';
             this.solidColor = this.hasAttribute('solid-color');
         }
-        getAsset() {
-            const assetElement = document.querySelector(`pc-asset[id="${this._asset}"]`);
-            return assetElement.asset;
-        }
         getScene() {
             const appElement = this.closest('pc-app');
             if (!appElement) {
@@ -2465,7 +2931,7 @@
             this._asset = value;
             const scene = this.getScene();
             if (scene) {
-                const asset = this.getAsset();
+                const asset = AssetElement.get(value);
                 if (asset) {
                     if (asset.resource) {
                         scene.envAtlas = asset.resource;
@@ -2559,11 +3025,13 @@
     exports.GSplatComponentElement = GSplatComponentElement;
     exports.LightComponentElement = LightComponentElement;
     exports.ListenerComponentElement = ListenerComponentElement;
+    exports.MaterialElement = MaterialElement;
     exports.ModelElement = ModelElement;
     exports.ModuleElement = ModuleElement;
     exports.RenderComponentElement = RenderComponentElement;
     exports.RigidBodyComponentElement = RigidBodyComponentElement;
     exports.SceneElement = SceneElement;
+    exports.ScreenComponentElement = ScreenComponentElement;
     exports.ScriptComponentElement = ScriptComponentElement;
     exports.ScriptElement = ScriptElement;
     exports.SkyElement = SkyElement;