@playcanvas/web-components 0.1.9 → 0.1.10

package/dist/pwc.js

@@ -101,6 +101,20 @@
             this._stencil = true;
             this._highResolution = false;
             this._hierarchyReady = false;
+            this._picker = null;
+            this._hasPointerListeners = {
+                pointerenter: false,
+                pointerleave: false,
+                pointerdown: false,
+                pointerup: false,
+                pointermove: false
+            };
+            this._hoveredEntity = null;
+            this._pointerHandlers = {
+                pointermove: null,
+                pointerdown: null,
+                pointerup: null
+            };
             /**
              * The PlayCanvas application instance.
              */
@@ -130,6 +144,7 @@
             this.app.graphicsDevice.maxPixelRatio = this._highResolution ? window.devicePixelRatio : 1;
             this.app.setCanvasFillMode(playcanvas.FILLMODE_FILL_WINDOW);
             this.app.setCanvasResolution(playcanvas.RESOLUTION_AUTO);
+            this._pickerCreate();
             // Get all pc-asset elements that are direct children of the pc-app element
             const assetElements = this.querySelectorAll(':scope > pc-asset');
             Array.from(assetElements).forEach((assetElement) => {
@@ -164,6 +179,7 @@
             });
         }
         disconnectedCallback() {
+            this._pickerDestroy();
             // Clean up the application
             if (this.app) {
                 this.app.destroy();
@@ -182,6 +198,139 @@
                 this.app.resizeCanvas();
             }
         }
+        _pickerCreate() {
+            const { width, height } = this.app.graphicsDevice;
+            this._picker = new playcanvas.Picker(this.app, width, height);
+            // Create bound handlers but don't attach them yet
+            this._pointerHandlers.pointermove = this._onPointerMove.bind(this);
+            this._pointerHandlers.pointerdown = this._onPointerDown.bind(this);
+            this._pointerHandlers.pointerup = this._onPointerUp.bind(this);
+            // Listen for pointer listeners being added/removed
+            ['pointermove', 'pointerdown', 'pointerup', 'pointerenter', 'pointerleave'].forEach((type) => {
+                this.addEventListener(`${type}:connect`, () => this._onPointerListenerAdded(type));
+                this.addEventListener(`${type}:disconnect`, () => this._onPointerListenerRemoved(type));
+            });
+        }
+        _pickerDestroy() {
+            if (this._canvas) {
+                Object.entries(this._pointerHandlers).forEach(([type, handler]) => {
+                    if (handler) {
+                        this._canvas.removeEventListener(type, handler);
+                    }
+                });
+            }
+            this._picker = null;
+            this._pointerHandlers = {
+                pointermove: null,
+                pointerdown: null,
+                pointerup: null
+            };
+        }
+        _onPointerMove(event) {
+            if (!this._picker || !this.app)
+                return;
+            const camera = this.app.root.findComponent('camera');
+            if (!camera)
+                return;
+            const canvasRect = this._canvas.getBoundingClientRect();
+            const x = event.clientX - canvasRect.left;
+            const y = event.clientY - canvasRect.top;
+            this._picker.prepare(camera, this.app.scene);
+            const selection = this._picker.getSelection(x, y);
+            // Get the currently hovered entity by walking up the hierarchy
+            let newHoverEntity = null;
+            if (selection.length > 0) {
+                let node = selection[0].node;
+                while (node && !newHoverEntity) {
+                    const entityElement = this.querySelector(`pc-entity[name="${node.name}"]`);
+                    if (entityElement) {
+                        newHoverEntity = entityElement;
+                    }
+                    node = node.parent;
+                }
+            }
+            // Handle enter/leave events
+            if (this._hoveredEntity !== newHoverEntity) {
+                if (this._hoveredEntity && this._hoveredEntity.hasListeners('pointerleave')) {
+                    this._hoveredEntity.dispatchEvent(new PointerEvent('pointerleave', event));
+                }
+                if (newHoverEntity && newHoverEntity.hasListeners('pointerenter')) {
+                    newHoverEntity.dispatchEvent(new PointerEvent('pointerenter', event));
+                }
+            }
+            // Update hover state
+            this._hoveredEntity = newHoverEntity;
+            // Handle pointermove event
+            if (newHoverEntity && newHoverEntity.hasListeners('pointermove')) {
+                newHoverEntity.dispatchEvent(new PointerEvent('pointermove', event));
+            }
+        }
+        _onPointerDown(event) {
+            if (!this._picker || !this.app)
+                return;
+            const camera = this.app.root.findComponent('camera');
+            if (!camera)
+                return;
+            const canvasRect = this._canvas.getBoundingClientRect();
+            const x = event.clientX - canvasRect.left;
+            const y = event.clientY - canvasRect.top;
+            this._picker.prepare(camera, this.app.scene);
+            const selection = this._picker.getSelection(x, y);
+            if (selection.length > 0) {
+                let node = selection[0].node;
+                while (node) {
+                    const entityElement = this.querySelector(`pc-entity[name="${node.name}"]`);
+                    if (entityElement && entityElement.hasListeners('pointerdown')) {
+                        entityElement.dispatchEvent(new PointerEvent('pointerdown', event));
+                        break;
+                    }
+                    node = node.parent;
+                }
+            }
+        }
+        _onPointerUp(event) {
+            if (!this._picker || !this.app)
+                return;
+            const camera = this.app.root.findComponent('camera');
+            if (!camera)
+                return;
+            const canvasRect = this._canvas.getBoundingClientRect();
+            const x = event.clientX - canvasRect.left;
+            const y = event.clientY - canvasRect.top;
+            this._picker.prepare(camera, this.app.scene);
+            const selection = this._picker.getSelection(x, y);
+            if (selection.length > 0) {
+                const entityElement = this.querySelector(`pc-entity[name="${selection[0].node.name}"]`);
+                if (entityElement && entityElement.hasListeners('pointerup')) {
+                    entityElement.dispatchEvent(new PointerEvent('pointerup', event));
+                }
+            }
+        }
+        _onPointerListenerAdded(type) {
+            if (!this._hasPointerListeners[type] && this._canvas) {
+                this._hasPointerListeners[type] = true;
+                // For enter/leave events, we need the move handler
+                const handler = (type === 'pointerenter' || type === 'pointerleave') ?
+                    this._pointerHandlers.pointermove :
+                    this._pointerHandlers[type];
+                if (handler) {
+                    this._canvas.addEventListener(type === 'pointerenter' || type === 'pointerleave' ? 'pointermove' : type, handler);
+                }
+            }
+        }
+        _onPointerListenerRemoved(type) {
+            const hasListeners = Array.from(this.querySelectorAll('pc-entity'))
+                .some(entity => entity.hasListeners(type));
+            if (!hasListeners && this._canvas) {
+                this._hasPointerListeners[type] = false;
+                const handler = (type === 'pointerenter' || type === 'pointerleave') ?
+                    this._pointerHandlers.pointermove :
+                    this._pointerHandlers[type];
+                if (handler) {
+                    this._canvas.removeEventListener(type === 'pointerenter' || type === 'pointerleave' ? 'pointermove' : type, handler);
+                }
+            }
+        }
         /**
          * Sets the alpha flag.
          * @param value - The alpha flag.
@@ -534,6 +683,10 @@
              * The tags of the entity.
              */
             this._tags = [];
+            /**
+             * The pointer event listeners for the entity.
+             */
+            this._listeners = {};
             /**
              * The PlayCanvas entity instance.
              */
@@ -562,6 +715,30 @@
             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) => {
+                        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) {
             if (!this.entity)
@@ -711,7 +888,19 @@
             return this._tags;
         }
         static get observedAttributes() {
-            return ['enabled', 'name', 'position', 'rotation', 'scale', 'tags'];
+            return [
+                'enabled',
+                'name',
+                'position',
+                'rotation',
+                'scale',
+                'tags',
+                'onpointerenter',
+                'onpointerleave',
+                'onpointerdown',
+                'onpointerup',
+                'onpointermove'
+            ];
         }
         attributeChangedCallback(name, _oldValue, newValue) {
             switch (name) {
@@ -733,7 +922,51 @@
                 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) => {
+                            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, listener, options) {
+            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, listener, options) {
+            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) {
+            var _a;
+            return Boolean((_a = this._listeners[type]) === null || _a === void 0 ? void 0 : _a.length);
         }
     }
     customElements.define('pc-entity', EntityElement);
@@ -929,6 +1162,15 @@
     }
     customElements.define('pc-listener', ListenerComponentElement);
 
+    const tonemaps = new Map([
+        ['none', playcanvas.TONEMAP_NONE],
+        ['linear', playcanvas.TONEMAP_LINEAR],
+        ['filmic', playcanvas.TONEMAP_FILMIC],
+        ['hejl', playcanvas.TONEMAP_HEJL],
+        ['aces', playcanvas.TONEMAP_ACES],
+        ['aces2', playcanvas.TONEMAP_ACES2],
+        ['neutral', playcanvas.TONEMAP_NEUTRAL]
+    ]);
     /**
      * The CameraComponentElement interface provides properties and methods for manipulating
      * `<pc-camera>` elements. The CameraComponentElement interface also inherits the properties and
@@ -949,12 +1191,14 @@
             this._flipFaces = false;
             this._fov = 45;
             this._frustumCulling = true;
+            this._gamma = 'srgb';
             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);
+            this._tonemap = 'none';
         }
         getInitialComponentData() {
             return {
@@ -967,12 +1211,14 @@
                 flipFaces: this._flipFaces,
                 fov: this._fov,
                 frustumCulling: this._frustumCulling,
+                gammaCorrection: this._gamma === 'srgb' ? playcanvas.GAMMA_SRGB : playcanvas.GAMMA_NONE,
                 nearClip: this._nearClip,
                 orthographic: this._orthographic,
                 orthoHeight: this._orthoHeight,
                 priority: this._priority,
                 rect: this._rect,
-                scissorRect: this._scissorRect
+                scissorRect: this._scissorRect,
+                toneMapping: tonemaps.get(this._tonemap)
             };
         }
         get xrAvailable() {
@@ -1155,6 +1401,23 @@
         get frustumCulling() {
             return this._frustumCulling;
         }
+        /**
+         * Sets the gamma correction of the camera.
+         * @param value - The gamma correction.
+         */
+        set gamma(value) {
+            this._gamma = value;
+            if (this.component) {
+                this.component.gammaCorrection = value === 'srgb' ? playcanvas.GAMMA_SRGB : playcanvas.GAMMA_NONE;
+            }
+        }
+        /**
+         * Gets the gamma correction of the camera.
+         * @returns The gamma correction.
+         */
+        get gamma() {
+            return this._gamma;
+        }
         /**
          * Sets the near clip distance of the camera.
          * @param value - The near clip distance.
@@ -1257,6 +1520,24 @@
         get scissorRect() {
             return this._scissorRect;
         }
+        /**
+         * Sets the tone mapping of the camera.
+         * @param value - The tone mapping.
+         */
+        set tonemap(value) {
+            var _a;
+            this._tonemap = value;
+            if (this.component) {
+                this.component.toneMapping = (_a = tonemaps.get(value)) !== null && _a !== void 0 ? _a : playcanvas.TONEMAP_NONE;
+            }
+        }
+        /**
+         * Gets the tone mapping of the camera.
+         * @returns The tone mapping.
+         */
+        get tonemap() {
+            return this._tonemap;
+        }
         static get observedAttributes() {
             return [
                 ...super.observedAttributes,
@@ -1269,12 +1550,14 @@
                 'flip-faces',
                 'fov',
                 'frustum-culling',
+                'gamma',
                 'near-clip',
                 'orthographic',
                 'ortho-height',
                 'priority',
                 'rect',
-                'scissor-rect'
+                'scissor-rect',
+                'tonemap'
             ];
         }
         attributeChangedCallback(name, _oldValue, newValue) {
@@ -1307,6 +1590,9 @@
                 case 'frustum-culling':
                     this.frustumCulling = newValue !== 'false';
                     break;
+                case 'gamma':
+                    this.gamma = newValue;
+                    break;
                 case 'near-clip':
                     this.nearClip = parseFloat(newValue);
                     break;
@@ -1325,6 +1611,9 @@
                 case 'scissor-rect':
                     this.scissorRect = parseVec4(newValue);
                     break;
+                case 'tonemap':
+                    this.tonemap = newValue;
+                    break;
             }
         }
     }
@@ -1738,6 +2027,17 @@
     }
     customElements.define('pc-splat', GSplatComponentElement);
 
+    const shadowTypes = new Map([
+        ['pcf1-16f', playcanvas.SHADOW_PCF1_16F],
+        ['pcf1-32f', playcanvas.SHADOW_PCF1_32F],
+        ['pcf3-16f', playcanvas.SHADOW_PCF3_16F],
+        ['pcf3-32f', playcanvas.SHADOW_PCF3_32F],
+        ['pcf5-16f', playcanvas.SHADOW_PCF5_16F],
+        ['pcf5-32f', playcanvas.SHADOW_PCF5_32F],
+        ['vsm-16f', playcanvas.SHADOW_VSM_16F],
+        ['vsm-32f', playcanvas.SHADOW_VSM_32F],
+        ['pcss-32f', playcanvas.SHADOW_PCSS_32F]
+    ]);
     /**
      * The LightComponentElement interface provides properties and methods for manipulating
      * `<pc-light>` elements. The LightComponentElement interface also inherits the properties and
@@ -1758,8 +2058,11 @@
             this._range = 10;
             this._shadowBias = 0.2;
             this._shadowDistance = 16;
+            this._shadowIntensity = 1;
             this._shadowResolution = 1024;
+            this._shadowType = 'pcf3-32f';
             this._type = 'directional';
+            this._vsmBias = 0.01;
         }
         getInitialComponentData() {
             return {
@@ -1772,8 +2075,11 @@
                 range: this._range,
                 shadowBias: this._shadowBias,
                 shadowDistance: this._shadowDistance,
+                shadowIntensity: this._shadowIntensity,
                 shadowResolution: this._shadowResolution,
-                type: this._type
+                shadowType: shadowTypes.get(this._shadowType),
+                type: this._type,
+                vsmBias: this._vsmBias
             };
         }
         /**
@@ -1936,6 +2242,23 @@
         get shadowDistance() {
             return this._shadowDistance;
         }
+        /**
+         * Sets the shadow intensity of the light.
+         * @param value - The shadow intensity.
+         */
+        set shadowIntensity(value) {
+            this._shadowIntensity = value;
+            if (this.component) {
+                this.component.shadowIntensity = value;
+            }
+        }
+        /**
+         * Gets the shadow intensity of the light.
+         * @returns The shadow intensity.
+         */
+        get shadowIntensity() {
+            return this._shadowIntensity;
+        }
         /**
          * Sets the shadow resolution of the light.
          * @param value - The shadow resolution.
@@ -1953,6 +2276,34 @@
         get shadowResolution() {
             return this._shadowResolution;
         }
+        /**
+         * Sets the shadow type of the light.
+         * @param value - The shadow type. Can be:
+         *
+         * - `pcf1-16f` - 1-tap percentage-closer filtered shadow map with 16-bit depth.
+         * - `pcf1-32f` - 1-tap percentage-closer filtered shadow map with 32-bit depth.
+         * - `pcf3-16f` - 3-tap percentage-closer filtered shadow map with 16-bit depth.
+         * - `pcf3-32f` - 3-tap percentage-closer filtered shadow map with 32-bit depth.
+         * - `pcf5-16f` - 5-tap percentage-closer filtered shadow map with 16-bit depth.
+         * - `pcf5-32f` - 5-tap percentage-closer filtered shadow map with 32-bit depth.
+         * - `vsm-16f` - Variance shadow map with 16-bit depth.
+         * - `vsm-32f` - Variance shadow map with 32-bit depth.
+         * - `pcss-32f` - Percentage-closer soft shadow with 32-bit depth.
+         */
+        set shadowType(value) {
+            var _a;
+            this._shadowType = value;
+            if (this.component) {
+                this.component.shadowType = (_a = shadowTypes.get(value)) !== null && _a !== void 0 ? _a : playcanvas.SHADOW_PCF3_32F;
+            }
+        }
+        /**
+         * Gets the shadow type of the light.
+         * @returns The shadow type.
+         */
+        get shadowType() {
+            return this._shadowType;
+        }
         /**
          * Sets the type of the light.
          * @param value - The type.
@@ -1974,6 +2325,23 @@
         get type() {
             return this._type;
         }
+        /**
+         * Sets the VSM bias of the light.
+         * @param value - The VSM bias.
+         */
+        set vsmBias(value) {
+            this._vsmBias = value;
+            if (this.component) {
+                this.component.vsmBias = value;
+            }
+        }
+        /**
+         * Gets the VSM bias of the light.
+         * @returns The VSM bias.
+         */
+        get vsmBias() {
+            return this._vsmBias;
+        }
         static get observedAttributes() {
             return [
                 ...super.observedAttributes,
@@ -1986,8 +2354,11 @@
                 'range',
                 'shadow-bias',
                 'shadow-distance',
+                'shadow-intensity',
                 'shadow-resolution',
-                'type'
+                'shadow-type',
+                'type',
+                'vsm-bias'
             ];
         }
         attributeChangedCallback(name, _oldValue, newValue) {
@@ -2023,9 +2394,18 @@
                 case 'shadow-resolution':
                     this.shadowResolution = Number(newValue);
                     break;
+                case 'shadow-intensity':
+                    this.shadowIntensity = Number(newValue);
+                    break;
+                case 'shadow-type':
+                    this.shadowType = newValue;
+                    break;
                 case 'type':
                     this.type = newValue;
                     break;
+                case 'vsm-bias':
+                    this.vsmBias = Number(newValue);
+                    break;
             }
         }
     }
@@ -2048,8 +2428,8 @@
         }
         createMaterial() {
             this.material = new playcanvas.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;
@@ -2582,9 +2962,6 @@
     }
     customElements.define('pc-screen', ScreenComponentElement);
 
-    const tmpV2 = new playcanvas.Vec2();
-    const tmpV3 = new playcanvas.Vec3();
-    const tmpV4 = new playcanvas.Vec4();
     /**
      * The ScriptComponentElement interface provides properties and methods for manipulating
      * `<pc-scripts>` elements. The ScriptComponentElement interface also inherits the properties and
@@ -2628,22 +3005,34 @@
                             return;
                         }
                     }
-                    // Handle vectors
-                    if (Array.isArray(value)) {
-                        if (target[key] instanceof playcanvas.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 playcanvas.Vec2(value[0], value[1]);
                             return;
                         }
-                        if (target[key] instanceof playcanvas.Vec3) {
-                            target[key] = tmpV3.set(value[0], value[1], value[2]);
+                        if (value.length === 3 && typeof value[0] === 'number') {
+                            target[key] = new playcanvas.Vec3(value[0], value[1], value[2]);
                             return;
                         }
-                        if (target[key] instanceof playcanvas.Vec4) {
-                            target[key] = tmpV4.set(value[0], value[1], value[2], value[3]);
+                        if (value.length === 4 && typeof value[0] === 'number') {
+                            target[key] = new playcanvas.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] = {};