@playcanvas/web-components 0.9.0 → 0.10.0

package/src/components/scrollview-component.ts

@@ -1,7 +1,7 @@
 import { SCROLL_MODE_BOUNCE, SCROLL_MODE_CLAMP, SCROLL_MODE_INFINITE, SCROLLBAR_VISIBILITY_SHOW_ALWAYS, SCROLLBAR_VISIBILITY_SHOW_WHEN_REQUIRED, ScrollViewComponent, Vec2 } from 'playcanvas';
 
 import { ComponentElement } from './component';
-import { getEntity, parseBool, parseEnum, parseNumber, parseVec2 } from '../utils';
+import { getEntity, parseBool, parseEnum, parseNumber, parseVec2 } from '../parse';
 
 const scrollModes = new Map<'clamp' | 'bounce' | 'infinite', number>([
     ['clamp', SCROLL_MODE_CLAMP],
@@ -377,7 +377,7 @@ class ScrollViewComponentElement extends ComponentElement {
         ];
     }
 
-    attributeChangedCallback(name: string, _oldValue: string, newValue: string) {
+    attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null) {
         super.attributeChangedCallback(name, _oldValue, newValue);
 
         switch (name) {
@@ -409,16 +409,16 @@ class ScrollViewComponentElement extends ComponentElement {
                 this.verticalScrollbarVisibility = parseEnum(newValue, visibilities, 'when-required', name);
                 break;
             case 'viewport':
-                this.viewport = newValue;
+                this.viewport = newValue ?? '';
                 break;
             case 'content':
-                this.content = newValue;
+                this.content = newValue ?? '';
                 break;
             case 'horizontal-scrollbar':
-                this.horizontalScrollbar = newValue;
+                this.horizontalScrollbar = newValue ?? '';
                 break;
             case 'vertical-scrollbar':
-                this.verticalScrollbar = newValue;
+                this.verticalScrollbar = newValue ?? '';
                 break;
         }
     }

package/src/components/sound-component.ts

@@ -1,7 +1,7 @@
 import { SoundComponent } from 'playcanvas';
 
 import { ComponentElement } from './component';
-import { parseBool, parseEnum, parseNumber } from '../utils';
+import { parseBool, parseEnum, parseNumber } from '../parse';
 
 /**
  * The SoundComponentElement interface provides properties and methods for manipulating
@@ -197,7 +197,7 @@ class SoundComponentElement extends ComponentElement {
         ];
     }
 
-    attributeChangedCallback(name: string, _oldValue: string, newValue: string) {
+    attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null) {
         super.attributeChangedCallback(name, _oldValue, newValue);
 
         switch (name) {

package/src/components/sound-slot.ts

@@ -3,7 +3,7 @@ import { SoundSlot } from 'playcanvas';
 import { AssetElement } from '../asset';
 import { AsyncElement } from '../async-element';
 import { SoundComponentElement } from './sound-component';
-import { parseBool, parseNumber } from '../utils';
+import { parseBool, parseNumber } from '../parse';
 
 /**
  * The SoundSlotElement interface provides properties and methods for manipulating
@@ -29,13 +29,31 @@ class SoundSlotElement extends AsyncElement {
 
     private _volume: number = 1;
 
+    /**
+     * The `<pc-sounds>` this slot was added to, captured at connect time.
+     *
+     * `disconnectedCallback` cannot rediscover it: by the time the element is disconnected its
+     * `parentElement` is already `null`, so a lookup would both fail to find the component and
+     * emit a misleading "must be a direct child" warning for what is an ordinary removal.
+     */
+    private _soundElement: SoundComponentElement | null = null;
+
     /**
      * The sound slot.
      */
     soundSlot: SoundSlot | null = null;
 
     async connectedCallback() {
-        await this.soundElement?.ready();
+        const soundElement = this.soundElement;
+        await soundElement?.ready();
+
+        // The element may have been removed, or its parent torn down, while we were waiting. A
+        // <pc-app> disconnects before its children, so by the time we resume the component can
+        // already be gone - see the matching guard in disconnectedCallback below.
+        const component = soundElement?.component;
+        if (!this.isConnected || !component) {
+            return;
+        }
 
         const options = {
             autoPlay: this._autoPlay,
@@ -49,7 +67,8 @@ class SoundSlotElement extends AsyncElement {
             options.duration = this._duration;
         }
 
-        this.soundSlot = this.soundElement!.component!.addSlot(this._name, options);
+        this._soundElement = soundElement;
+        this.soundSlot = component.addSlot(this._name, options);
         this.asset = this._asset;
         if (this._autoPlay) {
             this.soundSlot!.play();
@@ -59,9 +78,12 @@ class SoundSlotElement extends AsyncElement {
     }
 
     disconnectedCallback() {
-        // The component is null if the parent <pc-sound> (or the whole <pc-app>) is being
-        // torn down — parents disconnect first and have already removed the component.
-        this.soundElement?.component?.removeSlot(this._name);
+        // Uses the cached parent rather than a fresh lookup, since parentElement is already null
+        // by now. The component itself is null if the parent <pc-sound> (or the whole <pc-app>) is
+        // being torn down — parents disconnect first and have already removed the component.
+        this._soundElement?.component?.removeSlot(this._name);
+        this._soundElement = null;
+        this.soundSlot = null;
     }
 
     protected get soundElement(): SoundComponentElement | null {
@@ -253,10 +275,10 @@ class SoundSlotElement extends AsyncElement {
         return ['asset', 'auto-play', 'duration', 'loop', 'name', 'overlap', 'pitch', 'start-time', 'volume'];
     }
 
-    attributeChangedCallback(name: string, _oldValue: string, newValue: string) {
+    attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null) {
         switch (name) {
             case 'asset':
-                this.asset = newValue;
+                this.asset = newValue ?? '';
                 break;
             case 'auto-play':
                 this.autoPlay = parseBool(newValue, false);
@@ -268,7 +290,7 @@ class SoundSlotElement extends AsyncElement {
                 this.loop = parseBool(newValue, false);
                 break;
             case 'name':
-                this.name = newValue;
+                this.name = newValue ?? '';
                 break;
             case 'overlap':
                 this.overlap = parseBool(newValue, false);

package/src/entity.ts

@@ -1,13 +1,31 @@
 import { AppBase, Entity, Vec3 } from 'playcanvas';
 
 import { AsyncElement } from './async-element';
-import { parseBool, parseVec3 } from './utils';
+import { parseBool, parseTags, parseVec3 } from './parse';
 
 /**
  * The EntityElement interface provides properties and methods for manipulating
  * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-entity/ | `<pc-entity>`} elements.
  * The EntityElement interface also inherits the properties and methods of the
  * {@link HTMLElement} interface.
+ *
+ * The pointer events below are dispatched by the containing `<pc-app>` element when the pointer
+ * intersects this entity's geometry. They are only generated while the entity has a listener for
+ * them, registered either with {@link addEventListener} or with the matching inline `onpointer*`
+ * attribute.
+ *
+ * @attribute {string} onpointerenter - Script to run when the pointer moves onto the entity.
+ * @attribute {string} onpointerleave - Script to run when the pointer moves off the entity.
+ * @attribute {string} onpointermove - Script to run when the pointer moves over the entity.
+ * @attribute {string} onpointerdown - Script to run when a pointer button is pressed over the
+ * entity.
+ * @attribute {string} onpointerup - Script to run when a pointer button is released over the
+ * entity.
+ * @fires {PointerEvent} pointerenter - Fired when the pointer moves onto the entity.
+ * @fires {PointerEvent} pointerleave - Fired when the pointer moves off the entity.
+ * @fires {PointerEvent} pointermove - Fired when the pointer moves over the entity.
+ * @fires {PointerEvent} pointerdown - Fired when a pointer button is pressed over the entity.
+ * @fires {PointerEvent} pointerup - Fired when a pointer button is released over the entity.
  */
 class EntityElement extends AsyncElement {
     /**
@@ -83,9 +101,9 @@ class EntityElement extends AsyncElement {
         entity.setLocalEulerAngles(parseVec3(this.getAttribute('rotation'), Vec3.ZERO, 'rotation'));
         entity.setLocalScale(parseVec3(this.getAttribute('scale'), Vec3.ONE, 'scale'));
 
-        const tags = this.getAttribute('tags');
-        if (tags) {
-            entity.tags.add(tags.split(',').map(tag => tag.trim()));
+        const tags = parseTags(this.getAttribute('tags'));
+        if (tags.length > 0) {
+            entity.tags.add(tags);
         }
     }
 
@@ -297,13 +315,13 @@ class EntityElement extends AsyncElement {
         ];
     }
 
-    attributeChangedCallback(name: string, _oldValue: string, newValue: string) {
+    attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null) {
         switch (name) {
             case 'enabled':
                 this.enabled = parseBool(newValue, true);
                 break;
             case 'name':
-                this.name = newValue;
+                this.name = newValue ?? 'Untitled';
                 break;
             case 'position':
                 this.position = parseVec3(newValue, Vec3.ZERO, name);
@@ -315,7 +333,7 @@ class EntityElement extends AsyncElement {
                 this.scale = parseVec3(newValue, Vec3.ONE, name);
                 break;
             case 'tags':
-                this.tags = newValue.split(',').map(tag => tag.trim());
+                this.tags = parseTags(newValue);
                 break;
             case 'onpointerenter':
             case 'onpointerleave':