@playcanvas/web-components 0.10.1 → 0.11.1

package/src/components/element-component.ts

@@ -1,9 +1,11 @@
-import { Color, ElementComponent, Vec2, Vec4 } from 'playcanvas';
+import type { ElementComponent } from 'playcanvas';
+import { Color, Vec2, Vec4 } from 'playcanvas';
 
 import { AssetElement } from '../asset';
-import { ComponentElement } from './component';
 import { parseBool, parseColor, parseEnum, parseNumber, parseVec2, parseVec4 } from '../parse';
 
+import { ComponentElement } from './component';
+
 /**
  * The ElementComponentElement interface provides properties and methods for manipulating
  * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-element/ | `<pc-element>`} elements.
@@ -15,62 +17,62 @@ import { parseBool, parseColor, parseEnum, parseNumber, parseVec2, parseVec4 } f
 class ElementComponentElement extends ComponentElement {
     private _anchor: Vec4 = new Vec4(0.5, 0.5, 0.5, 0.5);
 
-    private _autoWidth: boolean = true;
+    private _autoWidth = true;
 
-    private _autoHeight: boolean = true;
+    private _autoHeight = true;
 
-    private _autoFitWidth: boolean = false;
+    private _autoFitWidth = false;
 
-    private _autoFitHeight: boolean = false;
+    private _autoFitHeight = false;
 
     private _color: Color = new Color(1, 1, 1, 1);
 
-    private _enableMarkup: boolean = false;
+    private _enableMarkup = false;
 
-    private _fontAsset: string = '';
+    private _fontAsset = '';
 
-    private _fontSize: number = 32;
+    private _fontSize = 32;
 
-    private _maxFontSize: number = 32;
+    private _maxFontSize = 32;
 
-    private _minFontSize: number = 8;
+    private _minFontSize = 8;
 
-    private _height: number = 0;
+    private _height = 0;
 
-    private _lineHeight: number = 32;
+    private _lineHeight = 32;
 
     private _margin: Vec4 | null = null;
 
-    private _mask: boolean = false;
+    private _mask = false;
 
-    private _opacity: number = 1;
+    private _opacity = 1;
 
     private _pivot: Vec2 = new Vec2(0.5, 0.5);
 
     private _pixelsPerUnit: number | null = null;
 
-    private _spriteAsset: string = '';
+    private _spriteAsset = '';
 
-    private _spriteFrame: number = 0;
+    private _spriteFrame = 0;
 
-    private _text: string = '';
+    private _text = '';
 
-    private _textureAsset: string = '';
+    private _textureAsset = '';
 
     private _type: 'group' | 'image' | 'text' = 'group';
 
-    private _useInput: boolean = false;
+    private _useInput = false;
 
-    private _width: number = 0;
+    private _width = 0;
 
-    private _wrapLines: boolean = false;
+    private _wrapLines = false;
 
     /** @ignore */
     constructor() {
         super('element');
     }
 
-    initComponent() {
+    protected initComponent() {
         const component = this.component as any;
         if (!component) {
             return;
@@ -89,7 +91,7 @@ class ElementComponentElement extends ComponentElement {
         component._dirtifyMask?.();
     }
 
-    getInitialComponentData() {
+    protected getInitialComponentData() {
         const data: Record<string, any> = {
             anchor: this._anchor,
             autoWidth: this._autoWidth,
@@ -774,10 +776,4 @@ class ElementComponentElement extends ComponentElement {
 
 customElements.define('pc-element', ElementComponentElement);
 
-declare global {
-    interface HTMLElementTagNameMap {
-        'pc-element': ElementComponentElement;
-    }
-}
-
 export { ElementComponentElement };

package/src/components/gsplat-component.ts

@@ -1,9 +1,10 @@
-import { GSplatComponent } from 'playcanvas';
+import type { GSplatComponent } from 'playcanvas';
 
-import { ComponentElement } from './component';
 import { AssetElement } from '../asset';
 import { parseBool, parseNumber } from '../parse';
 
+import { ComponentElement } from './component';
+
 /**
  * The GSplatComponentElement interface provides properties and methods for manipulating
  * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-gsplat/ | `<pc-gsplat>`} elements.
@@ -30,7 +31,7 @@ class GSplatComponentElement extends ComponentElement {
         super('gsplat');
     }
 
-    getInitialComponentData() {
+    protected getInitialComponentData() {
         return {
             asset: AssetElement.get(this._asset),
             castShadows: this._castShadows,
@@ -216,10 +217,4 @@ class GSplatComponentElement extends ComponentElement {
 
 customElements.define('pc-gsplat', GSplatComponentElement);
 
-declare global {
-    interface HTMLElementTagNameMap {
-        'pc-gsplat': GSplatComponentElement;
-    }
-}
-
 export { GSplatComponentElement };

package/src/components/layoutchild-component.ts

@@ -1,8 +1,9 @@
-import { LayoutChildComponent } from 'playcanvas';
+import type { LayoutChildComponent } from 'playcanvas';
 
-import { ComponentElement } from './component';
 import { parseBool, parseNumber } from '../parse';
 
+import { ComponentElement } from './component';
+
 /**
  * The LayoutChildComponentElement interface provides properties and methods for manipulating
  * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-layoutchild/ | `<pc-layoutchild>`} elements.
@@ -31,7 +32,7 @@ class LayoutChildComponentElement extends ComponentElement {
         super('layoutchild');
     }
 
-    getInitialComponentData() {
+    protected getInitialComponentData() {
         return {
             minWidth: this._minWidth,
             minHeight: this._minHeight,
@@ -230,10 +231,4 @@ class LayoutChildComponentElement extends ComponentElement {
 
 customElements.define('pc-layoutchild', LayoutChildComponentElement);
 
-declare global {
-    interface HTMLElementTagNameMap {
-        'pc-layoutchild': LayoutChildComponentElement;
-    }
-}
-
 export { LayoutChildComponentElement };

package/src/components/layoutgroup-component.ts

@@ -1,8 +1,19 @@
-import { FITTING_NONE, FITTING_STRETCH, FITTING_SHRINK, FITTING_BOTH, LayoutGroupComponent, ORIENTATION_HORIZONTAL, ORIENTATION_VERTICAL, Vec2, Vec4 } from 'playcanvas';
+import type { LayoutGroupComponent } from 'playcanvas';
+import {
+    FITTING_NONE,
+    FITTING_STRETCH,
+    FITTING_SHRINK,
+    FITTING_BOTH,
+    ORIENTATION_HORIZONTAL,
+    ORIENTATION_VERTICAL,
+    Vec2,
+    Vec4
+} from 'playcanvas';
 
-import { ComponentElement } from './component';
 import { parseBool, parseEnum, parseVec2, parseVec4 } from '../parse';
 
+import { ComponentElement } from './component';
+
 const orientations = new Map<'horizontal' | 'vertical', number>([
     ['horizontal', ORIENTATION_HORIZONTAL],
     ['vertical', ORIENTATION_VERTICAL]
@@ -47,7 +58,7 @@ class LayoutGroupComponentElement extends ComponentElement {
         super('layoutgroup');
     }
 
-    getInitialComponentData() {
+    protected getInitialComponentData() {
         return {
             orientation: orientations.get(this._orientation),
             reverseX: this._reverseX,
@@ -295,10 +306,4 @@ class LayoutGroupComponentElement extends ComponentElement {
 
 customElements.define('pc-layoutgroup', LayoutGroupComponentElement);
 
-declare global {
-    interface HTMLElementTagNameMap {
-        'pc-layoutgroup': LayoutGroupComponentElement;
-    }
-}
-
 export { LayoutGroupComponentElement };

package/src/components/light-component.ts

@@ -1,9 +1,25 @@
-import { Color, LightComponent, SHADOW_PCF1_16F, SHADOW_PCF1_32F, SHADOW_PCF3_16F, SHADOW_PCF3_32F, SHADOW_PCF5_16F, SHADOW_PCF5_32F, SHADOW_PCSS_32F, SHADOW_VSM_16F, SHADOW_VSM_32F } from 'playcanvas';
+import type { LightComponent } from 'playcanvas';
+import {
+    Color,
+    SHADOW_PCF1_16F,
+    SHADOW_PCF1_32F,
+    SHADOW_PCF3_16F,
+    SHADOW_PCF3_32F,
+    SHADOW_PCF5_16F,
+    SHADOW_PCF5_32F,
+    SHADOW_PCSS_32F,
+    SHADOW_VSM_16F,
+    SHADOW_VSM_32F
+} from 'playcanvas';
 
-import { ComponentElement } from './component';
 import { parseBool, parseColor, parseEnum, parseNumber } from '../parse';
 
-const shadowTypes = new Map<'pcf1-16f' | 'pcf1-32f' | 'pcf3-16f' | 'pcf3-32f' | 'pcf5-16f' | 'pcf5-32f' | 'vsm-16f' | 'vsm-32f' | 'pcss-32f', number>([
+import { ComponentElement } from './component';
+
+const shadowTypes = new Map<
+    'pcf1-16f' | 'pcf1-32f' | 'pcf3-16f' | 'pcf3-32f' | 'pcf5-16f' | 'pcf5-32f' | 'vsm-16f' | 'vsm-32f' | 'pcss-32f',
+    number
+>([
     ['pcf1-16f', SHADOW_PCF1_16F],
     ['pcf1-32f', SHADOW_PCF1_32F],
     ['pcf3-16f', SHADOW_PCF3_16F],
@@ -46,7 +62,16 @@ class LightComponentElement extends ComponentElement {
 
     private _shadowResolution = 1024;
 
-    private _shadowType: 'pcf1-16f' | 'pcf1-32f' | 'pcf3-16f' | 'pcf3-32f' | 'pcf5-16f' | 'pcf5-32f' | 'vsm-16f' | 'vsm-32f' | 'pcss-32f' = 'pcf3-32f';
+    private _shadowType:
+        | 'pcf1-16f'
+        | 'pcf1-32f'
+        | 'pcf3-16f'
+        | 'pcf3-32f'
+        | 'pcf5-16f'
+        | 'pcf5-32f'
+        | 'vsm-16f'
+        | 'vsm-32f'
+        | 'pcss-32f' = 'pcf3-32f';
 
     private _type: 'directional' | 'omni' | 'spot' = 'directional';
 
@@ -67,7 +92,7 @@ class LightComponentElement extends ComponentElement {
         super('light');
     }
 
-    getInitialComponentData() {
+    protected getInitialComponentData() {
         return {
             castShadows: this._castShadows,
             color: this._color,
@@ -322,7 +347,18 @@ class LightComponentElement extends ComponentElement {
      * - `vsm-32f` - Variance shadow map with 32-bit depth.
      * - `pcss-32f` - Percentage-closer soft shadow with 32-bit depth.
      */
-    set shadowType(value: 'pcf1-16f' | 'pcf1-32f' | 'pcf3-16f' | 'pcf3-32f' | 'pcf5-16f' | 'pcf5-32f' | 'vsm-16f' | 'vsm-32f' | 'pcss-32f') {
+    set shadowType(
+        value:
+            | 'pcf1-16f'
+            | 'pcf1-32f'
+            | 'pcf3-16f'
+            | 'pcf3-32f'
+            | 'pcf5-16f'
+            | 'pcf5-32f'
+            | 'vsm-16f'
+            | 'vsm-32f'
+            | 'pcss-32f'
+    ) {
         this._shadowType = value;
         if (this.component) {
             this.component.shadowType = shadowTypes.get(value) ?? SHADOW_PCF3_32F;
@@ -563,10 +599,4 @@ class LightComponentElement extends ComponentElement {
 
 customElements.define('pc-light', LightComponentElement);
 
-declare global {
-    interface HTMLElementTagNameMap {
-        'pc-light': LightComponentElement;
-    }
-}
-
 export { LightComponentElement };

package/src/components/listener-component.ts

@@ -1,4 +1,4 @@
-import { AudioListenerComponent } from 'playcanvas';
+import type { AudioListenerComponent } from 'playcanvas';
 
 import { ComponentElement } from './component';
 
@@ -27,10 +27,4 @@ class ListenerComponentElement extends ComponentElement {
 
 customElements.define('pc-listener', ListenerComponentElement);
 
-declare global {
-    interface HTMLElementTagNameMap {
-        'pc-listener': ListenerComponentElement;
-    }
-}
-
 export { ListenerComponentElement };

package/src/components/particlesystem-component.ts

@@ -1,8 +1,9 @@
-import { ParticleSystemComponent } from 'playcanvas';
+import type { ParticleSystemComponent } from 'playcanvas';
 
-import { ComponentElement } from './component';
 import { AssetElement } from '../asset';
 
+import { ComponentElement } from './component';
+
 /**
  * The ParticleSystemComponentElement interface provides properties and methods for manipulating
  * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-particles/ | `<pc-particles>`} elements.
@@ -12,14 +13,14 @@ import { AssetElement } from '../asset';
  * @category Components
  */
 class ParticleSystemComponentElement extends ComponentElement {
-    private _asset: string = '';
+    private _asset = '';
 
     /** @ignore */
     constructor() {
         super('particlesystem');
     }
 
-    getInitialComponentData() {
+    protected getInitialComponentData() {
         const asset = AssetElement.get(this._asset);
         if (!asset) {
             return {};
@@ -51,7 +52,7 @@ class ParticleSystemComponentElement extends ComponentElement {
 
         // Set all the config properties on the component
         for (const key in resource) {
-            if (resource.hasOwnProperty(key)) {
+            if (Object.hasOwn(resource, key)) {
                 (this.component as any)[key] = resource[key];
             }
         }
@@ -133,10 +134,7 @@ class ParticleSystemComponentElement extends ComponentElement {
     }
 
     static get observedAttributes() {
-        return [
-            ...super.observedAttributes,
-            'asset'
-        ];
+        return [...super.observedAttributes, 'asset'];
     }
 
     attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null) {
@@ -152,10 +150,4 @@ class ParticleSystemComponentElement extends ComponentElement {
 
 customElements.define('pc-particles', ParticleSystemComponentElement);
 
-declare global {
-    interface HTMLElementTagNameMap {
-        'pc-particles': ParticleSystemComponentElement;
-    }
-}
-
 export { ParticleSystemComponentElement };

package/src/components/render-component.ts

@@ -1,9 +1,10 @@
-import { RenderComponent, StandardMaterial } from 'playcanvas';
+import type { RenderComponent, StandardMaterial } from 'playcanvas';
 
-import { ComponentElement } from './component';
 import { MaterialElement } from '../material';
 import { parseBool, parseEnum } from '../parse';
 
+import { ComponentElement } from './component';
+
 /**
  * The RenderComponentElement interface provides properties and methods for manipulating
  * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-render/ | `<pc-render>`} elements.
@@ -19,7 +20,7 @@ import { parseBool, parseEnum } from '../parse';
 class RenderComponentElement extends ComponentElement {
     private _castShadows = true;
 
-    private _material: string = '';
+    private _material = '';
 
     private _receiveShadows = true;
 
@@ -30,7 +31,7 @@ class RenderComponentElement extends ComponentElement {
         super('render');
     }
 
-    getInitialComponentData() {
+    protected getInitialComponentData() {
         return {
             type: this._type,
             castShadows: this._castShadows,
@@ -154,10 +155,4 @@ class RenderComponentElement extends ComponentElement {
 
 customElements.define('pc-render', RenderComponentElement);
 
-declare global {
-    interface HTMLElementTagNameMap {
-        'pc-render': RenderComponentElement;
-    }
-}
-
 export { RenderComponentElement };

package/src/components/rigidbody-component.ts

@@ -1,8 +1,10 @@
-import { RigidBodyComponent, Vec3 } from 'playcanvas';
+import type { RigidBodyComponent } from 'playcanvas';
+import { Vec3 } from 'playcanvas';
 
-import { ComponentElement } from './component';
 import { parseEnum, parseNumber, parseVec3 } from '../parse';
 
+import { ComponentElement } from './component';
+
 /**
  * The RigidBodyComponentElement interface provides properties and methods for manipulating
  * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-rigidbody/ | `<pc-rigidbody>`} elements.
@@ -15,7 +17,7 @@ class RigidBodyComponentElement extends ComponentElement {
     /**
      * The angular damping of the rigidbody.
      */
-    private _angularDamping: number = 0;
+    private _angularDamping = 0;
 
     /**
      * The angular factor of the rigidbody.
@@ -25,12 +27,12 @@ class RigidBodyComponentElement extends ComponentElement {
     /**
      * The friction of the rigidbody.
      */
-    private _friction: number = 0.5;
+    private _friction = 0.5;
 
     /**
      * The linear damping of the rigidbody.
      */
-    private _linearDamping: number = 0;
+    private _linearDamping = 0;
 
     /**
      * The linear factor of the rigidbody.
@@ -40,17 +42,17 @@ class RigidBodyComponentElement extends ComponentElement {
     /**
      * The mass of the rigidbody.
      */
-    private _mass: number = 1;
+    private _mass = 1;
 
     /**
      * The restitution of the rigidbody.
      */
-    private _restitution: number = 0;
+    private _restitution = 0;
 
     /**
      * The rolling friction of the rigidbody.
      */
-    private _rollingFriction: number = 0;
+    private _rollingFriction = 0;
 
     /**
      * The type of the rigidbody.
@@ -62,7 +64,7 @@ class RigidBodyComponentElement extends ComponentElement {
         super('rigidbody');
     }
 
-    getInitialComponentData() {
+    protected getInitialComponentData() {
         return {
             angularDamping: this._angularDamping,
             angularFactor: this._angularFactor,
@@ -184,7 +186,18 @@ class RigidBodyComponentElement extends ComponentElement {
     }
 
     static get observedAttributes() {
-        return [...super.observedAttributes, 'angular-damping', 'angular-factor', 'friction', 'linear-damping', 'linear-factor', 'mass', 'restitution', 'rolling-friction', 'type'];
+        return [
+            ...super.observedAttributes,
+            'angular-damping',
+            'angular-factor',
+            'friction',
+            'linear-damping',
+            'linear-factor',
+            'mass',
+            'restitution',
+            'rolling-friction',
+            'type'
+        ];
     }
 
     attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null) {
@@ -224,10 +237,4 @@ class RigidBodyComponentElement extends ComponentElement {
 
 customElements.define('pc-rigidbody', RigidBodyComponentElement);
 
-declare global {
-    interface HTMLElementTagNameMap {
-        'pc-rigidbody': RigidBodyComponentElement;
-    }
-}
-
 export { RigidBodyComponentElement };

package/src/components/screen-component.ts

@@ -1,7 +1,18 @@
-import { SCALEMODE_BLEND, SCALEMODE_NONE, ScreenComponent, Vec2 } from 'playcanvas';
+import type { ScreenComponent } from 'playcanvas';
+import { SCALEMODE_BLEND, SCALEMODE_NONE, Vec2 } from 'playcanvas';
+
+import { parseBool, parseEnum, parseNumber, parseVec2 } from '../parse';
 
 import { ComponentElement } from './component';
-import { parseBool, parseNumber, parseVec2 } from '../parse';
+
+// The engine's SCALEMODE_* constants are the strings 'none' and 'blend', so this map happens to be
+// an identity. It is still the right shape: it supplies parseEnum's valid-name list, it is what the
+// manifest generator reads the enum values from, and it keeps the attribute vocabulary independent
+// of constants the engine is free to change.
+const scaleModes = new Map<'none' | 'blend', string>([
+    ['none', SCALEMODE_NONE],
+    ['blend', SCALEMODE_BLEND]
+]);
 
 /**
  * The ScreenComponentElement interface provides properties and methods for manipulating
@@ -20,7 +31,7 @@ class ScreenComponentElement extends ComponentElement {
 
     private _priority = 0;
 
-    private _blend = false;
+    private _scaleMode: 'none' | 'blend' = 'none';
 
     private _scaleBlend = 0.5;
 
@@ -29,13 +40,13 @@ class ScreenComponentElement extends ComponentElement {
         super('screen');
     }
 
-    getInitialComponentData() {
+    protected getInitialComponentData() {
         return {
             priority: this._priority,
             referenceResolution: this._referenceResolution,
             resolution: this._resolution,
             scaleBlend: this._scaleBlend,
-            scaleMode: this._blend ? SCALEMODE_BLEND : SCALEMODE_NONE,
+            scaleMode: scaleModes.get(this._scaleMode) ?? SCALEMODE_NONE,
             screenSpace: this._screenSpace
         };
     }
@@ -81,6 +92,12 @@ class ScreenComponentElement extends ComponentElement {
         return this._resolution;
     }
 
+    /**
+     * Sets how the screen's `resolution` and `referenceResolution` are weighted against each other
+     * when `scaleMode` is `blend`, from 0 (follow the resolution) to 1 (follow the reference
+     * resolution). Ignored while `scaleMode` is `none`.
+     * @param value - The scale blend factor.
+     */
     set scaleBlend(value: number) {
         this._scaleBlend = value;
         if (this.component) {
@@ -88,19 +105,34 @@ class ScreenComponentElement extends ComponentElement {
         }
     }
 
+    /**
+     * Gets how the screen's resolutions are weighted against each other.
+     * @returns The scale blend factor.
+     */
     get scaleBlend() {
         return this._scaleBlend;
     }
 
-    set blend(value: boolean) {
-        this._blend = value;
+    /**
+     * Sets how the screen scales its contents. `none` renders at `resolution` and ignores
+     * `referenceResolution`; `blend` scales between the two, weighted by `scaleBlend`, which is what
+     * keeps a UI laid out at one resolution usable at another. Requires `screenSpace` - the engine
+     * forces `none` on a world-space screen, which does not support scaling.
+     * @param value - The scale mode ('none' or 'blend').
+     */
+    set scaleMode(value: 'none' | 'blend') {
+        this._scaleMode = value;
         if (this.component) {
-            this.component.scaleMode = this._blend ? SCALEMODE_BLEND : SCALEMODE_NONE;
+            this.component.scaleMode = scaleModes.get(value) ?? SCALEMODE_NONE;
         }
     }
 
-    get blend() {
-        return this._blend;
+    /**
+     * Gets how the screen scales its contents.
+     * @returns The scale mode.
+     */
+    get scaleMode() {
+        return this._scaleMode;
     }
 
     set screenSpace(value: boolean) {
@@ -117,12 +149,12 @@ class ScreenComponentElement extends ComponentElement {
     static get observedAttributes() {
         return [
             ...super.observedAttributes,
-            'blend',
             'screen-space',
             'resolution',
             'reference-resolution',
             'priority',
-            'scale-blend'
+            'scale-blend',
+            'scale-mode'
         ];
     }
 
@@ -142,8 +174,8 @@ class ScreenComponentElement extends ComponentElement {
             case 'scale-blend':
                 this.scaleBlend = parseNumber(newValue, 0.5, name);
                 break;
-            case 'blend':
-                this.blend = parseBool(newValue, false);
+            case 'scale-mode':
+                this.scaleMode = parseEnum(newValue, scaleModes, 'none', name);
                 break;
             case 'screen-space':
                 this.screenSpace = parseBool(newValue, false);
@@ -154,10 +186,4 @@ class ScreenComponentElement extends ComponentElement {
 
 customElements.define('pc-screen', ScreenComponentElement);
 
-declare global {
-    interface HTMLElementTagNameMap {
-        'pc-screen': ScreenComponentElement;
-    }
-}
-
 export { ScreenComponentElement };