@playcanvas/web-components 0.1.2 → 0.1.3

package/dist/pwc.mjs

@@ -1,4 +1,4 @@
-import { WasmModule, Application, Keyboard, Mouse, FILLMODE_FILL_WINDOW, RESOLUTION_AUTO, Color, Vec2, Vec3, Vec4, Entity, Asset, PROJECTION_ORTHOGRAPHIC, PROJECTION_PERSPECTIVE, Quat, LAYERID_SKYBOX } from 'playcanvas';
+import { WasmModule, Application, Keyboard, Mouse, FILLMODE_FILL_WINDOW, RESOLUTION_AUTO, Color, Vec2, Vec3, Vec4, Entity, Asset, PROJECTION_ORTHOGRAPHIC, PROJECTION_PERSPECTIVE, StandardMaterial, SCALEMODE_BLEND, SCALEMODE_NONE, Quat, LAYERID_SKYBOX } from 'playcanvas';
 
 class ModuleElement extends HTMLElement {
     constructor() {
@@ -76,6 +76,11 @@ class AppElement extends HTMLElement {
                 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
@@ -220,7 +225,7 @@ class EntityElement extends HTMLElement {
         const app = await appElement.getApplication();
         // Create a new entity
         this.entity = new 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 {
@@ -455,6 +460,10 @@ class AssetElement extends HTMLElement {
     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'];
     }
@@ -576,21 +585,39 @@ class CameraComponentElement extends ComponentElement {
      */
     constructor() {
         super('camera');
-        this._clearColor = new Color(1, 1, 1, 1);
+        this._clearColor = new 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 Vec4(0, 0, 1, 1);
+        this._scissorRect = new 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 ? PROJECTION_ORTHOGRAPHIC : PROJECTION_PERSPECTIVE,
-            orthoHeight: this._orthoHeight
+            orthographic: this._orthographic,
+            orthoHeight: this._orthoHeight,
+            priority: this._priority,
+            rect: this._rect,
+            scissorRect: this._scissorRect
         };
     }
     /**
@@ -617,6 +644,74 @@ class CameraComponentElement extends ComponentElement {
     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.
@@ -634,6 +729,23 @@ class CameraComponentElement extends ComponentElement {
     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.
@@ -651,6 +763,23 @@ class CameraComponentElement extends ComponentElement {
     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.
@@ -702,8 +831,76 @@ class CameraComponentElement extends ComponentElement {
     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);
@@ -711,12 +908,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;
@@ -726,6 +941,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;
         }
     }
 }
@@ -873,16 +1097,12 @@ class ElementComponentElement extends ComponentElement {
         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,
@@ -910,7 +1130,7 @@ class ElementComponentElement extends ComponentElement {
     }
     set asset(value) {
         this._asset = value;
-        const asset = this.getAsset();
+        const asset = AssetElement.get(value);
         if (this.component && asset) {
             this.component.fontAsset = asset.id;
         }
@@ -1061,13 +1281,9 @@ class GSplatComponentElement extends ComponentElement {
         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)
         };
     }
     /**
@@ -1079,7 +1295,7 @@ class GSplatComponentElement extends ComponentElement {
     }
     set asset(value) {
         this._asset = value;
-        const asset = this.getAsset();
+        const asset = AssetElement.get(value);
         if (this.component && asset) {
             this.component.asset = asset;
         }
@@ -1371,6 +1587,120 @@ class LightComponentElement extends ComponentElement {
 }
 customElements.define('pc-light', LightComponentElement);
 
+/**
+ * Represents a material in the PlayCanvas engine.
+ */
+class MaterialElement extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        this._diffuse = new Color(1, 1, 1);
+        this._diffuseMap = '';
+        this._metalnessMap = '';
+        this._normalMap = '';
+        this._roughnessMap = '';
+        this.material = null;
+    }
+    createMaterial() {
+        this.material = new 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.
  *
@@ -1379,9 +1709,14 @@ customElements.define('pc-light', LightComponentElement);
 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 {
@@ -1431,6 +1766,23 @@ class RenderComponentElement extends ComponentElement {
     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.
@@ -1449,20 +1801,23 @@ class RenderComponentElement extends ComponentElement {
         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;
         }
     }
 }
@@ -1655,6 +2010,129 @@ class RigidBodyComponentElement extends ComponentElement {
 }
 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 Vec2(640, 320);
+        this._referenceResolution = new 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 ? SCALEMODE_BLEND : 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 ? SCALEMODE_BLEND : 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.
  *
@@ -1960,10 +2438,6 @@ class SoundSlotElement extends HTMLElement {
          */
         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) {
@@ -2005,7 +2479,7 @@ class SoundSlotElement extends HTMLElement {
         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;
             }
@@ -2209,12 +2683,8 @@ class ModelElement extends HTMLElement {
             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;
         }
@@ -2442,10 +2912,6 @@ class SkyElement extends HTMLElement {
         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) {
@@ -2461,7 +2927,7 @@ class SkyElement extends HTMLElement {
         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;
@@ -2545,5 +3011,5 @@ class SkyElement extends HTMLElement {
 }
 customElements.define('pc-sky', SkyElement);
 
-export { AppElement, AssetElement, CameraComponentElement, CollisionComponentElement, ComponentElement, ElementComponentElement, EntityElement, GSplatComponentElement, LightComponentElement, ListenerComponentElement, ModelElement, ModuleElement, RenderComponentElement, RigidBodyComponentElement, SceneElement, ScriptComponentElement, ScriptElement, SkyElement, SoundComponentElement, SoundSlotElement };
+export { AppElement, AssetElement, CameraComponentElement, CollisionComponentElement, ComponentElement, ElementComponentElement, EntityElement, GSplatComponentElement, LightComponentElement, ListenerComponentElement, MaterialElement, ModelElement, ModuleElement, RenderComponentElement, RigidBodyComponentElement, SceneElement, ScreenComponentElement, ScriptComponentElement, ScriptElement, SkyElement, SoundComponentElement, SoundSlotElement };
 //# sourceMappingURL=pwc.mjs.map