@playcanvas/web-components 0.1.8 → 0.1.10

package/src/components/listener-component.ts

@@ -3,11 +3,14 @@ import { AudioListenerComponent } from 'playcanvas';
 import { ComponentElement } from './component';
 
 /**
- * Represents a audio listener component in the PlayCanvas engine.
+ * The ListenerComponentElement interface provides properties and methods for manipulating
+ * `<pc-listener>` elements. The ListenerComponentElement interface also inherits the properties
+ * and methods of the {@link HTMLElement} interface.
  *
  * @category Components
  */
 class ListenerComponentElement extends ComponentElement {
+    /** @ignore */
     constructor() {
         super('audiolistener');
     }

package/src/components/render-component.ts

@@ -4,7 +4,9 @@ import { ComponentElement } from './component';
 import { MaterialElement } from '../material';
 
 /**
- * Represents a render component in the PlayCanvas engine.
+ * The RenderComponentElement interface provides properties and methods for manipulating
+ * `<pc-render>` elements. The RenderComponentElement interface also inherits the properties and
+ * methods of the {@link HTMLElement} interface.
  *
  * @category Components
  */
@@ -17,6 +19,7 @@ class RenderComponentElement extends ComponentElement {
 
     private _type: 'asset' | 'box' | 'capsule' | 'cone' | 'cylinder' | 'plane' | 'sphere' = 'asset';
 
+    /** @ignore */
     constructor() {
         super('render');
     }

package/src/components/rigidbody-component.ts

@@ -4,7 +4,9 @@ import { ComponentElement } from './component';
 import { parseVec3 } from '../utils';
 
 /**
- * Represents a rigidbody component in the PlayCanvas engine.
+ * The RigidBodyComponentElement interface provides properties and methods for manipulating
+ * `<pc-rigidbody>` elements. The RigidBodyComponentElement interface also inherits the properties
+ * and methods of the {@link HTMLElement} interface.
  *
  * @category Components
  */
@@ -54,9 +56,7 @@ class RigidBodyComponentElement extends ComponentElement {
      */
     private _type: string = 'static';
 
-    /**
-     * Creates a new RigidBodyComponentElement.
-     */
+    /** @ignore */
     constructor() {
         super('rigidbody');
     }

package/src/components/screen-component.ts

@@ -4,7 +4,9 @@ import { ComponentElement } from './component';
 import { parseVec2 } from '../utils';
 
 /**
- * Represents a screen component in the PlayCanvas engine.
+ * The ScreenComponentElement interface provides properties and methods for manipulating
+ * `<pc-screen>` elements. The ScreenComponentElement interface also inherits the properties and
+ * methods of the {@link HTMLElement} interface.
  *
  * @category Components
  */
@@ -21,6 +23,7 @@ class ScreenComponentElement extends ComponentElement {
 
     private _scaleBlend = 0.5;
 
+    /** @ignore */
     constructor() {
         super('screen');
     }

package/src/components/script-component.ts

@@ -4,10 +4,6 @@ import { ComponentElement } from './component';
 import { ScriptElement } from './script';
 import { AssetElement } from '../asset';
 
-const tmpV2 = new Vec2();
-const tmpV3 = new Vec3();
-const tmpV4 = new Vec4();
-
 // Add these interfaces at the top of the file, after the imports
 interface ScriptAttributesChangeEvent extends CustomEvent {
     detail: { attributes: any };
@@ -26,13 +22,16 @@ declare global {
 }
 
 /**
- * Represents a script component in the PlayCanvas engine.
+ * The ScriptComponentElement interface provides properties and methods for manipulating
+ * `<pc-scripts>` elements. The ScriptComponentElement interface also inherits the properties and
+ * methods of the {@link HTMLElement} interface.
  *
  * @category Components
  */
 class ScriptComponentElement extends ComponentElement {
     private observer: MutationObserver;
 
+    /** @ignore */
     constructor() {
         super('script');
 
@@ -73,23 +72,36 @@ class ScriptComponentElement extends ComponentElement {
                     }
                 }
 
-                // Handle vectors
-                if (Array.isArray(value)) {
-                    if (target[key] instanceof Vec2) {
-                        target[key] = tmpV2.set(value[0], value[1]);
+                // Handle arrays
+                if (value && typeof value === 'object' && Array.isArray(value)) {
+                    // If it's an array of objects, recursively apply to each object
+                    if (value.length > 0 && typeof value[0] === 'object') {
+                        target[key] = value.map((item) => {
+                            const obj = {};
+                            for (const itemKey in item) {
+                                applyValue(obj, itemKey, item[itemKey]);
+                            }
+                            return obj;
+                        });
+                        return;
+                    }
+
+                    // Handle vectors
+                    if (value.length === 2 && typeof value[0] === 'number') {
+                        target[key] = new Vec2(value[0], value[1]);
                         return;
                     }
-                    if (target[key] instanceof Vec3) {
-                        target[key] = tmpV3.set(value[0], value[1], value[2]);
+                    if (value.length === 3 && typeof value[0] === 'number') {
+                        target[key] = new Vec3(value[0], value[1], value[2]);
                         return;
                     }
-                    if (target[key] instanceof Vec4) {
-                        target[key] = tmpV4.set(value[0], value[1], value[2], value[3]);
+                    if (value.length === 4 && typeof value[0] === 'number') {
+                        target[key] = new Vec4(value[0], value[1], value[2], value[3]);
                         return;
                     }
                 }
 
-                // Handle nested objects
+                // Handle nested objects (non-array)
                 if (value && typeof value === 'object' && !Array.isArray(value)) {
                     if (!target[key] || typeof target[key] !== 'object') {
                         target[key] = {};

package/src/components/script.ts

@@ -1,5 +1,7 @@
 /**
- * Represents a script in the PlayCanvas engine.
+ * The ScriptElement interface provides properties and methods for manipulating
+ * `<pc-script>` elements. The ScriptElement interface also inherits the properties and
+ * methods of the {@link HTMLElement} interface.
  */
 class ScriptElement extends HTMLElement {
     private _attributes: string = '{}';

package/src/components/sound-component.ts

@@ -3,7 +3,9 @@ import { SoundComponent } from 'playcanvas';
 import { ComponentElement } from './component';
 
 /**
- * Represents a sound component in the PlayCanvas engine.
+ * The SoundComponentElement interface provides properties and methods for manipulating
+ * `<pc-sounds>` elements. The SoundComponentElement interface also inherits the properties and
+ * methods of the {@link HTMLElement} interface.
  *
  * @category Components
  */
@@ -22,6 +24,7 @@ class SoundComponentElement extends ComponentElement {
 
     private _volume: number = 1;
 
+    /** @ignore */
     constructor() {
         super('sound');
     }

package/src/components/sound-slot.ts

@@ -5,7 +5,9 @@ import { AsyncElement } from '../async-element';
 import { SoundComponentElement } from './sound-component';
 
 /**
- * Represents a sound slot in the PlayCanvas engine.
+ * The SoundSlotElement interface provides properties and methods for manipulating
+ * `<pc-sound>` elements. The SoundSlotElement interface also inherits the properties and
+ * methods of the {@link AsyncElement} interface.
  */
 class SoundSlotElement extends AsyncElement {
     private _asset: string = '';

package/src/entity.ts

@@ -1,10 +1,12 @@
-import { Entity, Vec3 } from 'playcanvas';
+import { Application, Entity, Vec3 } from 'playcanvas';
 
 import { AsyncElement } from './async-element';
 import { parseVec3 } from './utils';
 
 /**
- * Represents an entity in the PlayCanvas engine.
+ * The EntityElement interface provides properties and methods for manipulating
+ * `<pc-entity>` elements. The EntityElement interface also inherits the properties and
+ * methods of the {@link HTMLElement} interface.
  */
 class EntityElement extends AsyncElement {
     /**
@@ -37,47 +39,104 @@ class EntityElement extends AsyncElement {
      */
     private _tags: string[] = [];
 
+    /**
+     * The pointer event listeners for the entity.
+     */
+    private _listeners: { [key: string]: EventListener[] } = {};
+
     /**
      * The PlayCanvas entity instance.
      */
     entity: Entity | null = null;
 
-    async connectedCallback() {
-        const closestApp = this.closestApp;
-        if (!closestApp) return;
+    createEntity(app: Application) {
+        // Create a new entity
+        this.entity = new Entity(this.getAttribute('name') || this._name, app);
 
-        // Wait for the app to complete initialization
-        await closestApp.ready();
+        const enabled = this.getAttribute('enabled');
+        if (enabled) {
+            this.entity.enabled = enabled !== 'false';
+        }
 
-        const app = closestApp.app!;
+        const position = this.getAttribute('position');
+        if (position) {
+            this.entity.setLocalPosition(parseVec3(position));
+        }
 
-        // Create a new entity
-        this.entity = new Entity(this._name, app);
-
-        // Initialize from attributes
-        const enabledAttr = this.getAttribute('enabled');
-        const nameAttr = this.getAttribute('name');
-        const positionAttr = this.getAttribute('position');
-        const rotationAttr = this.getAttribute('rotation');
-        const scaleAttr = this.getAttribute('scale');
-        const tagsAttr = this.getAttribute('tags');
-
-        if (enabledAttr) this.enabled = enabledAttr !== 'false';
-        if (nameAttr) this.name = nameAttr;
-        if (positionAttr) this.position = parseVec3(positionAttr);
-        if (rotationAttr) this.rotation = parseVec3(rotationAttr);
-        if (scaleAttr) this.scale = parseVec3(scaleAttr);
-        if (tagsAttr) this.tags = tagsAttr.split(',').map(tag => tag.trim());
+        const rotation = this.getAttribute('rotation');
+        if (rotation) {
+            this.entity.setLocalEulerAngles(parseVec3(rotation));
+        }
+
+        const scale = this.getAttribute('scale');
+        if (scale) {
+            this.entity.setLocalScale(parseVec3(scale));
+        }
+
+        const tags = this.getAttribute('tags');
+        if (tags) {
+            this.entity.tags.add(tags.split(',').map(tag => tag.trim()));
+        }
+
+        // Handle pointer events
+        const pointerEvents = [
+            'onpointerenter',
+            'onpointerleave',
+            'onpointerdown',
+            'onpointerup',
+            'onpointermove'
+        ];
+
+        pointerEvents.forEach((eventName) => {
+            const handler = this.getAttribute(eventName);
+            if (handler) {
+                const eventType = eventName.substring(2); // remove 'on' prefix
+                const eventHandler = (event: Event) => {
+                    try {
+                        /* eslint-disable-next-line no-new-func */
+                        new Function('event', handler).call(this, event);
+                    } catch (e) {
+                        console.error('Error in event handler:', e);
+                    }
+                };
+                this.addEventListener(eventType, eventHandler);
+            }
+        });
+    }
+
+    buildHierarchy(app: Application) {
+        if (!this.entity) return;
 
         const closestEntity = this.closestEntity;
-        if (closestEntity) {
-            closestEntity.ready().then(() => {
-                closestEntity.entity!.addChild(this.entity!);
-                this._onReady();
-            });
+        if (closestEntity?.entity) {
+            closestEntity.entity.addChild(this.entity);
         } else {
             app.root.addChild(this.entity);
-            this._onReady();
+        }
+
+        this._onReady();
+    }
+
+    connectedCallback() {
+        // Wait for app to be ready
+        const closestApp = this.closestApp;
+        if (!closestApp) return;
+
+        // If app is already running, create entity immediately
+        if (closestApp.hierarchyReady) {
+            const app = closestApp.app!;
+
+            this.createEntity(app);
+            this.buildHierarchy(app);
+
+            // Handle any child entities that might exist
+            const childEntities = this.querySelectorAll<EntityElement>('pc-entity');
+            childEntities.forEach((child) => {
+                child.createEntity(app);
+            });
+            childEntities.forEach((child) => {
+                child.buildHierarchy(app);
+            });
         }
     }
 
@@ -89,6 +148,7 @@ class EntityElement extends AsyncElement {
                 (child as EntityElement).entity = null;
             });
 
+            // Destroy the entity
             this.entity.destroy();
             this.entity = null;
         }
@@ -210,7 +270,19 @@ class EntityElement extends AsyncElement {
     }
 
     static get observedAttributes() {
-        return ['enabled', 'name', 'position', 'rotation', 'scale', 'tags'];
+        return [
+            'enabled',
+            'name',
+            'position',
+            'rotation',
+            'scale',
+            'tags',
+            'onpointerenter',
+            'onpointerleave',
+            'onpointerdown',
+            'onpointerup',
+            'onpointermove'
+        ];
     }
 
     attributeChangedCallback(name: string, _oldValue: string, newValue: string) {
@@ -233,8 +305,53 @@ class EntityElement extends AsyncElement {
             case 'tags':
                 this.tags = newValue.split(',').map(tag => tag.trim());
                 break;
+            case 'onpointerenter':
+            case 'onpointerleave':
+            case 'onpointerdown':
+            case 'onpointerup':
+            case 'onpointermove':
+                if (newValue) {
+                    const eventName = name.substring(2);
+                    // Use Function.prototype.bind to avoid new Function
+                    const handler = (event: Event) => {
+                        try {
+                            const handlerStr = this.getAttribute(eventName) || '';
+                            /* eslint-disable-next-line no-new-func */
+                            new Function('event', handlerStr).call(this, event);
+                        } catch (e) {
+                            console.error('Error in event handler:', e);
+                        }
+                    };
+                    this.addEventListener(eventName, handler);
+                }
+                break;
         }
     }
+
+    addEventListener(type: string, listener: EventListener, options?: boolean | AddEventListenerOptions) {
+        if (!this._listeners[type]) {
+            this._listeners[type] = [];
+        }
+        this._listeners[type].push(listener);
+        super.addEventListener(type, listener, options);
+        if (type.startsWith('pointer')) {
+            this.dispatchEvent(new CustomEvent(`${type}:connect`, { bubbles: true }));
+        }
+    }
+
+    removeEventListener(type: string, listener: EventListener, options?: boolean | EventListenerOptions) {
+        if (this._listeners[type]) {
+            this._listeners[type] = this._listeners[type].filter(l => l !== listener);
+        }
+        super.removeEventListener(type, listener, options);
+        if (type.startsWith('pointer')) {
+            this.dispatchEvent(new CustomEvent(`${type}:disconnect`, { bubbles: true }));
+        }
+    }
+
+    hasListeners(type: string): boolean {
+        return Boolean(this._listeners[type]?.length);
+    }
 }
 
 customElements.define('pc-entity', EntityElement);

package/src/fog.ts

@@ -0,0 +1,121 @@
+import { Color } from 'playcanvas';
+
+import { parseColor } from './utils';
+
+/**
+ * The FogElement interface provides properties and methods for manipulating
+ * `<pc-fog>` elements. The FogElement interface also inherits the properties and
+ * methods of the {@link HTMLElement} interface.
+ */
+class FogElement extends HTMLElement {
+    private _color = new Color(0.5, 0.5, 0.5);
+
+    private _density = 0.001;
+
+    private _end = 100;
+
+    private _start = 0;
+
+    private _type: 'linear' | 'exp' | 'exp2' = 'linear';
+
+    private dispatchFogUpdate() {
+        const event = new CustomEvent('fogupdate', {
+            bubbles: true,
+            detail: {
+                color: this._color,
+                density: this._density,
+                end: this._end,
+                start: this._start,
+                type: this._type
+            }
+        });
+        this.dispatchEvent(event);
+    }
+
+    set color(value: Color) {
+        this._color = value;
+        this.dispatchFogUpdate();
+    }
+
+    get color(): Color {
+        return this._color;
+    }
+
+    set density(value: number) {
+        this._density = value;
+        this.dispatchFogUpdate();
+    }
+
+    get density(): number {
+        return this._density;
+    }
+
+    set end(value: number) {
+        this._end = value;
+        this.dispatchFogUpdate();
+    }
+
+    get end(): number {
+        return this._end;
+    }
+
+    set start(value: number) {
+        this._start = value;
+        this.dispatchFogUpdate();
+    }
+
+    get start(): number {
+        return this._start;
+    }
+
+    set type(value: 'linear' | 'exp' | 'exp2') {
+        this._type = value;
+        this.dispatchFogUpdate();
+    }
+
+    get type(): 'linear' | 'exp' | 'exp2' {
+        return this._type;
+    }
+
+    static get observedAttributes() {
+        return [
+            'color',
+            'density',
+            'end',
+            'start',
+            'type'
+        ];
+    }
+
+    attributeChangedCallback(name: string, _oldValue: string, newValue: string) {
+        switch (name) {
+            case 'color':
+                this.color = parseColor(newValue);
+                break;
+            case 'density':
+                this.density = parseFloat(newValue);
+                break;
+            case 'end':
+                this.end = parseFloat(newValue);
+                break;
+            case 'start':
+                this.start = parseFloat(newValue);
+                break;
+            case 'type':
+                if (newValue === 'linear' || newValue === 'exp' || newValue === 'exp2') {
+                    this.type = newValue;
+                }
+                break;
+        }
+    }
+
+    constructor() {
+        super();
+        // Dispatch initial fog state
+        this.dispatchFogUpdate();
+    }
+}
+
+customElements.define('pc-fog', FogElement);
+
+export { FogElement };

package/src/material.ts

@@ -4,7 +4,9 @@ import { AssetElement } from './asset';
 import { parseColor } from './utils';
 
 /**
- * Represents a material in the PlayCanvas engine.
+ * The MaterialElement interface provides properties and methods for manipulating
+ * `<pc-material>` elements. The MaterialElement interface also inherits the properties and
+ * methods of the {@link HTMLElement} interface.
  */
 class MaterialElement extends HTMLElement {
     private _diffuse = new Color(1, 1, 1);
@@ -21,8 +23,8 @@ class MaterialElement extends HTMLElement {
 
     createMaterial() {
         this.material = new StandardMaterial();
-        this.material.glossInvert = true;
-        this.material.useMetalness = true;
+        this.material.glossInvert = false;
+        this.material.useMetalness = false;
         this.material.diffuse = this._diffuse;
         this.diffuseMap = this._diffuseMap;
         this.metalnessMap = this._metalnessMap;

package/src/model.ts

@@ -4,7 +4,9 @@ import { AssetElement } from './asset';
 import { AsyncElement } from './async-element';
 
 /**
- * Represents a model in the PlayCanvas engine.
+ * The ModelElement interface provides properties and methods for manipulating
+ * `<pc-model>` elements. The ModelElement interface also inherits the properties and
+ * methods of the {@link HTMLElement} interface.
  */
 class ModelElement extends AsyncElement {
     private _asset: string = '';

package/src/module.ts

@@ -1,8 +1,14 @@
 import { basisInitialize, WasmModule } from 'playcanvas';
 
+/**
+ * The ModuleElement interface provides properties and methods for manipulating
+ * `<pc-module>` elements. The ModuleElement interface also inherits the properties and
+ * methods of the {@link HTMLElement} interface.
+ */
 class ModuleElement extends HTMLElement {
     private loadPromise: Promise<void>;
 
+    /** @ignore */
     constructor() {
         super();
         this.loadPromise = this.loadModule();

package/src/scene.ts

@@ -4,7 +4,9 @@ import { AsyncElement } from './async-element';
 import { parseColor } from './utils';
 
 /**
- * Represents a scene in the PlayCanvas engine.
+ * The SceneElement interface provides properties and methods for manipulating
+ * `<pc-scene>` elements. The SceneElement interface also inherits the properties and
+ * methods of the {@link HTMLElement} interface.
  */
 class SceneElement extends AsyncElement {
     /**
@@ -48,11 +50,11 @@ class SceneElement extends AsyncElement {
 
     updateSceneSettings() {
         if (this.scene) {
-            this.scene.rendering.fog = this._fog;
-            this.scene.rendering.fogColor = this._fogColor;
-            this.scene.rendering.fogDensity = this._fogDensity;
-            this.scene.rendering.fogStart = this._fogStart;
-            this.scene.rendering.fogEnd = this._fogEnd;
+            this.scene.fog.type = this._fog;
+            this.scene.fog.color = this._fogColor;
+            this.scene.fog.density = this._fogDensity;
+            this.scene.fog.start = this._fogStart;
+            this.scene.fog.end = this._fogEnd;
             // ... set other properties on the scene as well
         }
     }
@@ -64,7 +66,7 @@ class SceneElement extends AsyncElement {
     set fog(value) {
         this._fog = value;
         if (this.scene) {
-            this.scene.rendering.fog = value;
+            this.scene.fog.type = value;
         }
     }
 
@@ -83,7 +85,7 @@ class SceneElement extends AsyncElement {
     set fogColor(value: Color) {
         this._fogColor = value;
         if (this.scene) {
-            this.scene.rendering.fogColor = value;
+            this.scene.fog.color = value;
         }
     }
 
@@ -102,7 +104,7 @@ class SceneElement extends AsyncElement {
     set fogDensity(value: number) {
         this._fogDensity = value;
         if (this.scene) {
-            this.scene.rendering.fogDensity = value;
+            this.scene.fog.density = value;
         }
     }
 
@@ -121,7 +123,7 @@ class SceneElement extends AsyncElement {
     set fogStart(value: number) {
         this._fogStart = value;
         if (this.scene) {
-            this.scene.rendering.fogStart = value;
+            this.scene.fog.start = value;
         }
     }
 
@@ -140,7 +142,7 @@ class SceneElement extends AsyncElement {
     set fogEnd(value: number) {
         this._fogEnd = value;
         if (this.scene) {
-            this.scene.rendering.fogEnd = value;
+            this.scene.fog.end = value;
         }
     }