@playcanvas/web-components 0.1.2 → 0.1.4

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, 10);
+                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 };

package/src/components/sound-slot.ts

@@ -31,11 +31,6 @@ class SoundSlotElement extends HTMLElement {
      */
     soundSlot: SoundSlot | null = null;
 
-    getAsset() {
-        const assetElement = document.querySelector(`pc-asset[id="${this._asset}"]`) as AssetElement;
-        return assetElement!.asset;
-    }
-
     async connectedCallback() {
         const appElement = this.closest('pc-app') as AppElement | null;
         if (!appElement) {
@@ -83,7 +78,7 @@ class SoundSlotElement extends HTMLElement {
     set asset(value: string) {
         this._asset = value;
         if (this.soundSlot) {
-            const id = this.getAsset()?.id;
+            const id = AssetElement.get(value)?.id;
             if (id) {
                 this.soundSlot.asset = id;
             }

package/src/entity.ts

@@ -37,6 +37,12 @@ class EntityElement extends HTMLElement {
      */
     private _tags: string[] = [];
 
+    private _resolveEntity!: (entity: Entity) => void;
+
+    private _entityReady = new Promise<Entity>((resolve) => {
+        this._resolveEntity = resolve;
+    });
+
     /**
      * The PlayCanvas entity instance.
      */
@@ -54,9 +60,12 @@ class EntityElement extends HTMLElement {
 
         // Create a new entity
         this.entity = new Entity(this._name, app);
+        this._resolveEntity(this.entity);
 
-        if (this.parentElement && this.parentElement.tagName === 'pc-entity' && (this.parentElement as EntityElement).entity) {
-            (this.parentElement as EntityElement).entity!.addChild(this.entity);
+        if (this.parentElement &&
+            this.parentElement.tagName.toLowerCase() === 'pc-entity') {
+            const parentEntity = await (this.parentElement as EntityElement)._entityReady;
+            parentEntity.addChild(this.entity);
         } else {
             app.root.addChild(this.entity);
         }
@@ -77,9 +86,20 @@ class EntityElement extends HTMLElement {
 
     disconnectedCallback() {
         if (this.entity) {
+            // Notify all children that their entities are about to become invalid
+            const children = this.querySelectorAll('pc-entity');
+            children.forEach((child) => {
+                (child as EntityElement).entity = null;
+            });
+
             this.entity.destroy();
             this.entity = null;
         }
+
+        // Reset the promise for potential reconnection
+        this._entityReady = new Promise<Entity>((resolve) => {
+            this._resolveEntity = resolve;
+        });
     }
 
     /**

package/src/index.ts

@@ -14,10 +14,12 @@ 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';
@@ -36,10 +38,12 @@ export {
     ListenerComponentElement,
     RenderComponentElement,
     RigidBodyComponentElement,
+    ScreenComponentElement,
     ScriptComponentElement,
     ScriptElement,
     SoundComponentElement,
     SoundSlotElement,
+    MaterialElement,
     ModelElement,
     SceneElement,
     SkyElement

package/src/material.ts

@@ -0,0 +1,138 @@
+import { Color, StandardMaterial } from 'playcanvas';
+
+import { AssetElement } from './asset';
+import { parseColor } from './utils';
+
+/**
+ * Represents a material in the PlayCanvas engine.
+ */
+class MaterialElement extends HTMLElement {
+    private _diffuse = new Color(1, 1, 1);
+
+    private _diffuseMap = '';
+
+    private _metalnessMap = '';
+
+    private _normalMap = '';
+
+    private _roughnessMap = '';
+
+    material: StandardMaterial | null = 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: string, property: 'diffuseMap' | 'metalnessMap' | 'normalMap' | 'glossMap') {
+        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: Color) {
+        this._diffuse = value;
+        if (this.material) {
+            this.material.diffuse = value;
+        }
+    }
+
+    get diffuse(): Color {
+        return this._diffuse;
+    }
+
+    set diffuseMap(value: string) {
+        this._diffuseMap = value;
+        this.setMap(value, 'diffuseMap');
+    }
+
+    get diffuseMap() {
+        return this._diffuseMap;
+    }
+
+    set metalnessMap(value: string) {
+        this._metalnessMap = value;
+        this.setMap(value, 'metalnessMap');
+    }
+
+    get metalnessMap() {
+        return this._metalnessMap;
+    }
+
+    set normalMap(value: string) {
+        this._normalMap = value;
+        this.setMap(value, 'normalMap');
+    }
+
+    get normalMap() {
+        return this._normalMap;
+    }
+
+    set roughnessMap(value: string) {
+        this._roughnessMap = value;
+        this.setMap(value, 'glossMap');
+    }
+
+    get roughnessMap() {
+        return this._roughnessMap;
+    }
+
+    static get(id: string) {
+        const materialElement = document.querySelector<MaterialElement>(`pc-material[id="${id}"]`);
+        return materialElement?.material;
+    }
+
+    static get observedAttributes() {
+        return ['diffuse', 'diffuse-map', 'metalness-map', 'normal-map', 'roughness-map'];
+    }
+
+    attributeChangedCallback(name: string, _oldValue: string, newValue: string) {
+        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);
+
+export { MaterialElement };

package/src/model.ts

@@ -24,13 +24,8 @@ class ModelElement extends HTMLElement {
         }
     }
 
-    getAsset() {
-        const assetElement = document.querySelector(`pc-asset[id="${this._asset}"]`) as AssetElement;
-        return assetElement!.asset;
-    }
-
     _loadModel() {
-        const asset = this.getAsset();
+        const asset = AssetElement.get(this._asset);
         if (!asset) {
             return;
         }

package/src/sky.ts

@@ -31,11 +31,6 @@ class SkyElement extends HTMLElement {
         this.solidColor = this.hasAttribute('solid-color');
     }
 
-    getAsset() {
-        const assetElement = document.querySelector(`pc-asset[id="${this._asset}"]`) as AssetElement;
-        return assetElement!.asset;
-    }
-
     getScene() {
         const appElement = this.closest('pc-app') as AppElement | null;
         if (!appElement) {
@@ -52,7 +47,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;

package/src/utils.ts

@@ -1,4 +1,4 @@
-import { Color, Vec2, Vec3, Vec4 } from 'playcanvas';
+import { Color, Quat, Vec2, Vec3, Vec4 } from 'playcanvas';
 
 /**
  * Parse a color string into a Color object. String can be in the format of '#rgb', '#rgba',
@@ -16,6 +16,19 @@ export const parseColor = (value: string): Color => {
     return new Color(components);
 };
 
+/**
+ * Parse an Euler angles string into a Quat object. String can be in the format of 'x,y,z'.
+ *
+ * @param value - The Euler angles string to parse.
+ * @returns The parsed Quat object.
+ */
+export const parseQuat = (value: string): Quat => {
+    const [x, y, z] = value.split(',').map(Number);
+    const q = new Quat();
+    q.setFromEulerAngles(x, y, z);
+    return q;
+};
+
 /**
  * Parse a Vec2 string into a Vec2 object. String can be in the format of 'x,y'.
  *