@playcanvas/web-components 0.1.1 → 0.1.3

package/src/components/script-component.ts

@@ -1,6 +1,24 @@
-import { ScriptComponent } from 'playcanvas';
+import { ScriptComponent, ScriptType } from 'playcanvas';
 
 import { ComponentElement } from './component';
+import { ScriptElement } from './script';
+
+// Add these interfaces at the top of the file, after the imports
+interface ScriptAttributesChangeEvent extends CustomEvent {
+    detail: { attributes: any };
+}
+
+interface ScriptEnableChangeEvent extends CustomEvent {
+    detail: { enabled: boolean };
+}
+
+// Add this interface before the ScriptComponentElement class
+declare global {
+    interface HTMLElementEventMap {
+        'scriptattributeschange': ScriptAttributesChangeEvent;
+        'scriptenablechange': ScriptEnableChangeEvent;
+    }
+}
 
 /**
  * Represents a script component in the PlayCanvas engine.
@@ -8,8 +26,109 @@ import { ComponentElement } from './component';
  * @category Components
  */
 class ScriptComponentElement extends ComponentElement {
+    private observer: MutationObserver;
+
     constructor() {
         super('script');
+
+        // Create mutation observer to watch for child script elements
+        this.observer = new MutationObserver(this.handleMutations.bind(this));
+        this.observer.observe(this, {
+            childList: true
+        });
+
+        // Listen for script attribute and enable changes
+        this.addEventListener('scriptattributeschange', this.handleScriptAttributesChange.bind(this));
+        this.addEventListener('scriptenablechange', this.handleScriptEnableChange.bind(this));
+    }
+
+    async connectedCallback() {
+        await super.connectedCallback();
+
+        // Handle initial script elements
+        this.querySelectorAll<ScriptElement>(':scope > pc-script').forEach((scriptElement) => {
+            const scriptName = scriptElement.getAttribute('name');
+            const attributes = scriptElement.getAttribute('attributes');
+            if (scriptName) {
+                this.createScript(scriptName, attributes);
+            }
+        });
+    }
+
+    private applyAttributes(script: ScriptType, attributes: string | null) {
+        try {
+            // Parse the attributes string into an object and set them on the script
+            const attributesObject = attributes ? JSON.parse(attributes) : {};
+            Object.assign(script, attributesObject);
+        } catch (error) {
+            console.error(`Error parsing attributes JSON string ${attributes}:`, error);
+        }
+    }
+
+    private handleScriptAttributesChange(event: ScriptAttributesChangeEvent) {
+        const scriptElement = event.target as ScriptElement;
+        const scriptName = scriptElement.getAttribute('name');
+        if (!scriptName || !this.component) return;
+
+        const script = this.component.get(scriptName);
+        if (script) {
+            this.applyAttributes(script, event.detail.attributes);
+        }
+    }
+
+    private handleScriptEnableChange(event: ScriptEnableChangeEvent) {
+        const scriptElement = event.target as ScriptElement;
+        const scriptName = scriptElement.getAttribute('name');
+        if (!scriptName || !this.component) return;
+
+        const script = this.component.get(scriptName);
+        if (script) {
+            script.enabled = event.detail.enabled;
+        }
+    }
+
+    private createScript(name: string, attributes: string | null): ScriptType | null {
+        if (!this.component) return null;
+
+        this.component.on(`create:${name}`, (script) => {
+            this.applyAttributes(script, attributes);
+        });
+        return this.component.create(name);
+    }
+
+    private destroyScript(name: string): void {
+        if (!this.component) return;
+        this.component.destroy(name);
+    }
+
+    private handleMutations(mutations: MutationRecord[]) {
+        for (const mutation of mutations) {
+            // Handle added nodes
+            mutation.addedNodes.forEach((node) => {
+                if (node instanceof HTMLElement && node.tagName.toLowerCase() === 'pc-script') {
+                    const scriptName = node.getAttribute('name');
+                    const attributes = node.getAttribute('attributes');
+                    if (scriptName) {
+                        this.createScript(scriptName, attributes);
+                    }
+                }
+            });
+
+            // Handle removed nodes
+            mutation.removedNodes.forEach((node) => {
+                if (node instanceof HTMLElement && node.tagName.toLowerCase() === 'pc-script') {
+                    const scriptName = node.getAttribute('name');
+                    if (scriptName) {
+                        this.destroyScript(scriptName);
+                    }
+                }
+            });
+        }
+    }
+
+    disconnectedCallback() {
+        this.observer.disconnect();
+        super.disconnectedCallback?.();
     }
 
     /**

package/src/components/script.ts

@@ -1,85 +1,43 @@
-import { ScriptType } from 'playcanvas';
-
-import { AppElement } from '../app';
-import { ScriptComponentElement } from './script-component';
-
 /**
  * Represents a script in the PlayCanvas engine.
  */
 class ScriptElement extends HTMLElement {
-    private _attributes: Record<string, any> = {};
+    private _attributes: string = '{}';
 
     private _enabled: boolean = true;
 
     private _name: string = '';
 
-    private _script: ScriptType | null = null;
-
-    async connectedCallback() {
-        const appElement = this.closest('pc-app') as AppElement | null;
-        if (!appElement) {
-            console.error(`${this.tagName.toLowerCase()} should be a descendant of pc-app`);
-            return;
-        }
-
-        await appElement.getApplication();
-
-        const scriptAttributes = this.getAttribute('attributes');
-        if (scriptAttributes) {
-            try {
-                this._attributes = JSON.parse(scriptAttributes);
-            } catch (e) {
-                console.error('Failed to parse script attributes:', e);
-            }
-        }
-
-        // When the script is created, initialize it with the necessary attributes
-        this.scriptsElement?.component!.on(`create:${this._name}`, (scriptInstance) => {
-            Object.assign(scriptInstance, this._attributes);
-        });
-
-        this._script = this.scriptsElement?.component!.create(this._name, { preloading: false }) ?? null;
-    }
-
-    disconnectedCallback() {
-        this.scriptsElement?.component!.destroy(this._name);
-    }
-
-    refreshAttributes() {
-        if (this._script) {
-            Object.entries(this._attributes).forEach(([name, value]) => {
-                if (this._script && name in this._script) {
-                    (this._script as any)[name] = value;
-                }
-            });
-        }
-    }
-
-    protected get scriptsElement(): ScriptComponentElement | null {
-        const scriptsElement = this.parentElement as ScriptComponentElement;
-
-        if (!(scriptsElement instanceof ScriptComponentElement)) {
-            console.warn('pc-script must be a direct child of a pc-scripts element');
-            return null;
-        }
-
-        return scriptsElement;
-    }
-
+    /**
+     * Sets the attributes of the script.
+     * @param value - The attributes of the script.
+     */
     set scriptAttributes(value: string) {
-        this._attributes = JSON.parse(value);
-        this.refreshAttributes();
+        this._attributes = value;
+        this.dispatchEvent(new CustomEvent('scriptattributeschange', {
+            detail: { attributes: value },
+            bubbles: true
+        }));
     }
 
+    /**
+     * Gets the attributes of the script.
+     * @returns The attributes of the script.
+     */
     get scriptAttributes() {
-        return JSON.stringify(this._attributes);
+        return this._attributes;
     }
 
+    /**
+     * Sets the enabled state of the script.
+     * @param value - The enabled state of the script.
+     */
     set enabled(value: boolean) {
         this._enabled = value;
-        if (this._script) {
-            this._script.enabled = value;
-        }
+        this.dispatchEvent(new CustomEvent('scriptenablechange', {
+            detail: { enabled: value },
+            bubbles: true
+        }));
     }
 
     /**

package/src/components/sound-component.ts

@@ -112,6 +112,6 @@ class SoundComponentElement extends ComponentElement {
     }
 }
 
-customElements.define('pc-sound', SoundComponentElement);
+customElements.define('pc-sounds', SoundComponentElement);
 
 export { SoundComponentElement };

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;
             }
@@ -284,6 +279,6 @@ class SoundSlotElement extends HTMLElement {
     }
 }
 
-customElements.define('pc-sound-slot', SoundSlotElement);
+customElements.define('pc-sound', SoundSlotElement);
 
 export { SoundSlotElement };

package/src/entity.ts

@@ -55,7 +55,7 @@ class EntityElement extends HTMLElement {
         // Create a new entity
         this.entity = new Entity(this._name, app);
 
-        if (this.parentElement && this.parentElement.tagName === 'pc-entity' && (this.parentElement as EntityElement).entity) {
+        if (this.parentElement && this.parentElement.tagName.toLowerCase() === 'pc-entity' && (this.parentElement as EntityElement).entity) {
             (this.parentElement as EntityElement).entity!.addChild(this.entity);
         } else {
             app.root.addChild(this.entity);

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;