@playcanvas/web-components 0.1.11 → 0.1.13

package/src/app.ts

@@ -1,4 +1,4 @@
-import { Application, CameraComponent, FILLMODE_FILL_WINDOW, Keyboard, Mouse, Picker, RESOLUTION_AUTO } from 'playcanvas';
+import { Application, CameraComponent, FILLMODE_FILL_WINDOW, GraphNode, Keyboard, Mouse, Picker, RESOLUTION_AUTO } from 'playcanvas';
 
 import { AssetElement } from './asset';
 import { AsyncElement } from './async-element';
@@ -7,7 +7,10 @@ import { MaterialElement } from './material';
 import { ModuleElement } from './module';
 
 /**
- * The main application element.
+ * The AppElement interface provides properties and methods for manipulating
+ * {@link https://developer.playcanvas.com/user-manual/engine/web-components/tags/pc-app/ | `<pc-app>`} elements.
+ * The AppElement interface also inherits the properties and methods of the
+ * {@link HTMLElement} interface.
  */
 class AppElement extends AsyncElement {
     /**
@@ -206,13 +209,14 @@ class AppElement extends AsyncElement {
         // 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}"]`) as EntityElement;
+            let currentNode: GraphNode | null = selection[0].node;
+            while (currentNode !== null) {
+                const entityElement = this.querySelector(`pc-entity[name="${currentNode.name}"]`) as EntityElement;
                 if (entityElement) {
                     newHoverEntity = entityElement;
+                    break;
                 }
-                node = node.parent;
+                currentNode = currentNode.parent;
             }
         }
 
@@ -249,14 +253,14 @@ class AppElement extends AsyncElement {
         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}"]`) as EntityElement;
+            let currentNode: GraphNode | null = selection[0].node;
+            while (currentNode !== null) {
+                const entityElement = this.querySelector(`pc-entity[name="${currentNode.name}"]`) as EntityElement;
                 if (entityElement && entityElement.hasListeners('pointerdown')) {
                     entityElement.dispatchEvent(new PointerEvent('pointerdown', event));
                     break;
                 }
-                node = node.parent;
+                currentNode = currentNode.parent;
             }
         }
     }

package/src/asset.ts

@@ -22,11 +22,12 @@ const extToType = new Map([
 
 /**
  * The AssetElement interface provides properties and methods for manipulating
- * `<pc-asset>` elements. The AssetElement interface also inherits the properties and
- * methods of the {@link HTMLElement} interface.
+ * {@link https://developer.playcanvas.com/user-manual/engine/web-components/tags/pc-asset/ | `<pc-asset>`} elements.
+ * The AssetElement interface also inherits the properties and methods of the
+ * {@link HTMLElement} interface.
  */
 class AssetElement extends HTMLElement {
-    private _preload: boolean = false;
+    private _lazy: boolean = false;
 
     /**
      * The asset that is loaded.
@@ -54,7 +55,7 @@ class AssetElement extends HTMLElement {
         }
 
         this.asset = new Asset(id, type, { url: src });
-        this.asset.preload = this.preload;
+        this.asset.preload = !this._lazy;
     }
 
     destroyAsset() {
@@ -65,22 +66,22 @@ class AssetElement extends HTMLElement {
     }
 
     /**
-     * Sets the preload flag of the asset.
-     * @param value - The preload flag.
+     * Sets whether the asset should be loaded lazily.
+     * @param value - The lazy loading flag.
      */
-    set preload(value: boolean) {
-        this._preload = value;
+    set lazy(value: boolean) {
+        this._lazy = value;
         if (this.asset) {
-            this.asset.preload = value;
+            this.asset.preload = !value;
         }
     }
 
     /**
-     * Gets the preload flag of the asset.
-     * @returns The preload flag.
+     * Gets whether the asset should be loaded lazily.
+     * @returns The lazy loading flag.
      */
-    get preload() {
-        return this._preload;
+    get lazy() {
+        return this._lazy;
     }
 
     static get(id: string) {
@@ -89,12 +90,12 @@ class AssetElement extends HTMLElement {
     }
 
     static get observedAttributes() {
-        return ['preload'];
+        return ['lazy'];
     }
 
     attributeChangedCallback(name: string, _oldValue: string, _newValue: string) {
-        if (name === 'preload') {
-            this.preload = this.hasAttribute('preload');
+        if (name === 'lazy') {
+            this.lazy = this.hasAttribute('lazy');
         }
     }
 }

package/src/components/camera-component.ts

@@ -15,8 +15,9 @@ const tonemaps = new Map([
 
 /**
  * The CameraComponentElement interface provides properties and methods for manipulating
- * `<pc-camera>` elements. The CameraComponentElement interface also inherits the properties and
- * methods of the {@link HTMLElement} interface.
+ * {@link https://developer.playcanvas.com/user-manual/engine/web-components/tags/pc-camera/ | `<pc-camera>`} elements.
+ * The CameraComponentElement interface also inherits the properties and methods of the
+ * {@link HTMLElement} interface.
  *
  * @category Components
  */
@@ -107,7 +108,7 @@ class CameraComponentElement extends ComponentElement {
     }
 
     /**
-     * Gets the camera component.
+     * Gets the underlying PlayCanvas camera component.
      * @returns The camera component.
      */
     get component(): CameraComponent | null {

package/src/components/collision-component.ts

@@ -5,8 +5,9 @@ import { parseQuat, parseVec3 } from '../utils';
 
 /**
  * The CollisionComponentElement interface provides properties and methods for manipulating
- * `<pc-collision>` elements. The CollisionComponentElement interface also inherits the properties
- * and methods of the {@link HTMLElement} interface.
+ * {@link https://developer.playcanvas.com/user-manual/engine/web-components/tags/pc-collision/ | `<pc-collision>`} elements.
+ * The CollisionComponentElement interface also inherits the properties and methods of the
+ * {@link HTMLElement} interface.
  *
  * @category Components
  */
@@ -46,7 +47,7 @@ class CollisionComponentElement extends ComponentElement {
     }
 
     /**
-     * Gets the collision component.
+     * Gets the underlying PlayCanvas collision component.
      * @returns The collision component.
      */
     get component(): CollisionComponent | null {

package/src/components/element-component.ts

@@ -6,8 +6,9 @@ import { parseColor, parseVec2, parseVec4 } from '../utils';
 
 /**
  * The ElementComponentElement interface provides properties and methods for manipulating
- * `<pc-element>` elements. The ElementComponentElement interface also inherits the properties and
- * methods of the {@link HTMLElement} interface.
+ * {@link https://developer.playcanvas.com/user-manual/engine/web-components/tags/pc-element/ | `<pc-element>`} elements.
+ * The ElementComponentElement interface also inherits the properties and methods of the
+ * {@link HTMLElement} interface.
  *
  * @category Components
  */
@@ -60,13 +61,17 @@ class ElementComponentElement extends ComponentElement {
     }
 
     /**
-     * Gets the element component.
+     * Gets the underlying PlayCanvas element component.
      * @returns The element component.
      */
     get component(): ElementComponent | null {
         return super.component as ElementComponent | null;
     }
 
+    /**
+     * Sets the anchor of the element component.
+     * @param value - The anchor.
+     */
     set anchor(value: Vec4) {
         this._anchor = value;
         if (this.component) {
@@ -74,10 +79,18 @@ class ElementComponentElement extends ComponentElement {
         }
     }
 
+    /**
+     * Gets the anchor of the element component.
+     * @returns The anchor.
+     */
     get anchor() {
         return this._anchor;
     }
 
+    /**
+     * Sets the id of the `pc-asset` to use for the font.
+     * @param value - The asset ID.
+     */
     set asset(value: string) {
         this._asset = value;
         const asset = AssetElement.get(value);
@@ -86,10 +99,18 @@ class ElementComponentElement extends ComponentElement {
         }
     }
 
+    /**
+     * Gets the id of the `pc-asset` to use for the font.
+     * @returns The asset ID.
+     */
     get asset() {
         return this._asset;
     }
 
+    /**
+     * Sets whether the element component should automatically adjust its width.
+     * @param value - Whether to automatically adjust the width.
+     */
     set autoWidth(value: boolean) {
         this._autoWidth = value;
         if (this.component) {
@@ -97,10 +118,18 @@ class ElementComponentElement extends ComponentElement {
         }
     }
 
+    /**
+     * Gets whether the element component should automatically adjust its width.
+     * @returns Whether to automatically adjust the width.
+     */
     get autoWidth() {
         return this._autoWidth;
     }
 
+    /**
+     * Sets the color of the element component.
+     * @param value - The color.
+     */
     set color(value: Color) {
         this._color = value;
         if (this.component) {
@@ -108,10 +137,18 @@ class ElementComponentElement extends ComponentElement {
         }
     }
 
+    /**
+     * Gets the color of the element component.
+     * @returns The color.
+     */
     get color() {
         return this._color;
     }
 
+    /**
+     * Sets the font size of the element component.
+     * @param value - The font size.
+     */
     set fontSize(value: number) {
         this._fontSize = value;
         if (this.component) {
@@ -119,10 +156,18 @@ class ElementComponentElement extends ComponentElement {
         }
     }
 
+    /**
+     * Gets the font size of the element component.
+     * @returns The font size.
+     */
     get fontSize() {
         return this._fontSize;
     }
 
+    /**
+     * Sets the line height of the element component.
+     * @param value - The line height.
+     */
     set lineHeight(value: number) {
         this._lineHeight = value;
         if (this.component) {
@@ -130,10 +175,18 @@ class ElementComponentElement extends ComponentElement {
         }
     }
 
+    /**
+     * Gets the line height of the element component.
+     * @returns The line height.
+     */
     get lineHeight() {
         return this._lineHeight;
     }
 
+    /**
+     * Sets the pivot of the element component.
+     * @param value - The pivot.
+     */
     set pivot(value: Vec2) {
         this._pivot = value;
         if (this.component) {
@@ -141,10 +194,18 @@ class ElementComponentElement extends ComponentElement {
         }
     }
 
+    /**
+     * Gets the pivot of the element component.
+     * @returns The pivot.
+     */
     get pivot() {
         return this._pivot;
     }
 
+    /**
+     * Sets the text of the element component.
+     * @param value - The text.
+     */
     set text(value: string) {
         this._text = value;
         if (this.component) {
@@ -152,6 +213,10 @@ class ElementComponentElement extends ComponentElement {
         }
     }
 
+    /**
+     * Gets the text of the element component.
+     * @returns The text.
+     */
     get text() {
         return this._text;
     }
@@ -175,6 +240,10 @@ class ElementComponentElement extends ComponentElement {
         return this._type;
     }
 
+    /**
+     * Sets the width of the element component.
+     * @param value - The width.
+     */
     set width(value: number) {
         this._width = value;
         if (this.component) {
@@ -182,10 +251,18 @@ class ElementComponentElement extends ComponentElement {
         }
     }
 
+    /**
+     * Gets the width of the element component.
+     * @returns The width.
+     */
     get width() {
         return this._width;
     }
 
+    /**
+     * Sets whether the element component should wrap lines.
+     * @param value - Whether to wrap lines.
+     */
     set wrapLines(value: boolean) {
         this._wrapLines = value;
         if (this.component) {
@@ -193,6 +270,10 @@ class ElementComponentElement extends ComponentElement {
         }
     }
 
+    /**
+     * Gets whether the element component should wrap lines.
+     * @returns Whether to wrap lines.
+     */
     get wrapLines() {
         return this._wrapLines;
     }

package/src/components/light-component.ts

@@ -17,8 +17,9 @@ const shadowTypes = new Map([
 
 /**
  * The LightComponentElement interface provides properties and methods for manipulating
- * `<pc-light>` elements. The LightComponentElement interface also inherits the properties and
- * methods of the {@link HTMLElement} interface.
+ * {@link https://developer.playcanvas.com/user-manual/engine/web-components/tags/pc-light/ | `<pc-light>`} elements.
+ * The LightComponentElement interface also inherits the properties and methods of the
+ * {@link HTMLElement} interface.
  *
  * @category Components
  */
@@ -76,7 +77,7 @@ class LightComponentElement extends ComponentElement {
     }
 
     /**
-     * Gets the light component.
+     * Gets the underlying PlayCanvas light component.
      * @returns The light component.
      */
     get component(): LightComponent | null {

package/src/components/listener-component.ts

@@ -4,8 +4,9 @@ import { ComponentElement } from './component';
 
 /**
  * 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.
+ * {@link https://developer.playcanvas.com/user-manual/engine/web-components/tags/pc-listener/ | `<pc-listener>`} elements.
+ * The ListenerComponentElement interface also inherits the properties and methods of the
+ * {@link HTMLElement} interface.
  *
  * @category Components
  */
@@ -16,7 +17,7 @@ class ListenerComponentElement extends ComponentElement {
     }
 
     /**
-     * Gets the audio listener component.
+     * Gets the underlying PlayCanvas audio listener component.
      * @returns The audio listener component.
      */
     get component(): AudioListenerComponent | null {

package/src/components/render-component.ts

@@ -5,8 +5,9 @@ import { MaterialElement } from '../material';
 
 /**
  * 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.
+ * {@link https://developer.playcanvas.com/user-manual/engine/web-components/tags/pc-render/ | `<pc-render>`} elements.
+ * The RenderComponentElement interface also inherits the properties and methods of the
+ * {@link HTMLElement} interface.
  *
  * @category Components
  */
@@ -34,7 +35,7 @@ class RenderComponentElement extends ComponentElement {
     }
 
     /**
-     * Gets the render component.
+     * Gets the underlying PlayCanvas render component.
      * @returns The render component.
      */
     get component(): RenderComponent | null {

package/src/components/rigidbody-component.ts

@@ -5,8 +5,9 @@ import { parseVec3 } from '../utils';
 
 /**
  * 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.
+ * {@link https://developer.playcanvas.com/user-manual/engine/web-components/tags/pc-rigidbody/ | `<pc-rigidbody>`} elements.
+ * The RigidBodyComponentElement interface also inherits the properties and methods of the
+ * {@link HTMLElement} interface.
  *
  * @category Components
  */
@@ -76,8 +77,8 @@ class RigidBodyComponentElement extends ComponentElement {
     }
 
     /**
-     * Gets the collision component.
-     * @returns The collision component.
+     * Gets the underlying PlayCanvas rigidbody component.
+     * @returns The rigidbody component.
      */
     get component(): RigidBodyComponent | null {
         return super.component as RigidBodyComponent | null;

package/src/components/screen-component.ts

@@ -5,8 +5,9 @@ import { parseVec2 } from '../utils';
 
 /**
  * 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.
+ * {@link https://developer.playcanvas.com/user-manual/engine/web-components/tags/pc-screen/ | `<pc-screen>`} elements.
+ * The ScreenComponentElement interface also inherits the properties and methods of the
+ * {@link HTMLElement} interface.
  *
  * @category Components
  */
@@ -40,7 +41,7 @@ class ScreenComponentElement extends ComponentElement {
     }
 
     /**
-     * Gets the screen component.
+     * Gets the underlying PlayCanvas screen component.
      * @returns The screen component.
      */
     get component(): ScreenComponent | null {

package/src/components/script-component.ts

@@ -23,8 +23,9 @@ declare global {
 
 /**
  * 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.
+ * {@link https://developer.playcanvas.com/user-manual/engine/web-components/tags/pc-scripts/ | `<pc-scripts>`} elements.
+ * The ScriptComponentElement interface also inherits the properties and methods of the
+ * {@link HTMLElement} interface.
  *
  * @category Components
  */
@@ -189,7 +190,7 @@ class ScriptComponentElement extends ComponentElement {
     }
 
     /**
-     * Gets the script component.
+     * Gets the underlying PlayCanvas script component.
      * @returns The script component.
      */
     get component(): ScriptComponent | null {

package/src/components/sound-component.ts

@@ -4,8 +4,9 @@ import { ComponentElement } from './component';
 
 /**
  * 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.
+ * {@link https://developer.playcanvas.com/user-manual/engine/web-components/tags/pc-sounds/ | `<pc-sounds>`} elements.
+ * The SoundComponentElement interface also inherits the properties and methods of the
+ * {@link HTMLElement} interface.
  *
  * @category Components
  */
@@ -42,7 +43,7 @@ class SoundComponentElement extends ComponentElement {
     }
 
     /**
-     * Gets the sound component.
+     * Gets the underlying PlayCanvas sound component.
      * @returns The sound component.
      */
     get component(): SoundComponent | null {

package/src/components/sound-slot.ts

@@ -71,7 +71,7 @@ class SoundSlotElement extends AsyncElement {
     }
 
     /**
-     * Sets the asset of the sound slot.
+     * Sets the id of the `pc-asset` to use for the sound slot.
      * @param value - The asset.
      */
     set asset(value: string) {
@@ -85,7 +85,7 @@ class SoundSlotElement extends AsyncElement {
     }
 
     /**
-     * Gets the asset of the sound slot.
+     * Gets the id of the `pc-asset` to use for the sound slot.
      * @returns The asset.
      */
     get asset() {

package/src/components/{gsplat-component.ts → splat-component.ts}

@@ -4,13 +4,14 @@ import { ComponentElement } from './component';
 import { AssetElement } from '../asset';
 
 /**
- * The GSplatComponentElement interface provides properties and methods for manipulating
- * `<pc-splat>` elements. The GSplatComponentElement interface also inherits the properties and
- * methods of the {@link HTMLElement} interface.
+ * The SplatComponentElement interface provides properties and methods for manipulating
+ * {@link https://developer.playcanvas.com/user-manual/engine/web-components/tags/pc-splat/ | `<pc-splat>`} elements.
+ * The SplatComponentElement interface also inherits the properties and methods of the
+ * {@link HTMLElement} interface.
  *
  * @category Components
  */
-class GSplatComponentElement extends ComponentElement {
+class SplatComponentElement extends ComponentElement {
     private _asset: string = '';
 
     /** @ignore */
@@ -25,13 +26,17 @@ class GSplatComponentElement extends ComponentElement {
     }
 
     /**
-     * Gets the gsplat component.
-     * @returns The gsplat component.
+     * Gets the underlying PlayCanvas splat component.
+     * @returns The splat component.
      */
     get component(): GSplatComponent | null {
         return super.component as GSplatComponent | null;
     }
 
+    /**
+     * Sets id of the `pc-asset` to use for the splat.
+     * @param value - The asset ID.
+     */
     set asset(value: string) {
         this._asset = value;
         const asset = AssetElement.get(value);
@@ -40,6 +45,10 @@ class GSplatComponentElement extends ComponentElement {
         }
     }
 
+    /**
+     * Gets the id of the `pc-asset` to use for the splat.
+     * @returns The asset ID.
+     */
     get asset() {
         return this._asset;
     }
@@ -59,6 +68,6 @@ class GSplatComponentElement extends ComponentElement {
     }
 }
 
-customElements.define('pc-splat', GSplatComponentElement);
+customElements.define('pc-splat', SplatComponentElement);
 
-export { GSplatComponentElement };
+export { SplatComponentElement };

package/src/entity.ts

@@ -5,8 +5,9 @@ import { parseVec3 } from './utils';
 
 /**
  * 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.
+ * {@link https://developer.playcanvas.com/user-manual/engine/web-components/tags/pc-entity/ | `<pc-entity>`} elements.
+ * The EntityElement interface also inherits the properties and methods of the
+ * {@link HTMLElement} interface.
  */
 class EntityElement extends AsyncElement {
     /**

package/src/index.ts

@@ -20,7 +20,7 @@ import { CameraComponentElement } from './components/camera-component';
 import { CollisionComponentElement } from './components/collision-component';
 import { ComponentElement } from './components/component';
 import { ElementComponentElement } from './components/element-component';
-import { GSplatComponentElement } from './components/gsplat-component';
+import { SplatComponentElement } from './components/splat-component';
 import { LightComponentElement } from './components/light-component';
 import { RenderComponentElement } from './components/render-component';
 import { RigidBodyComponentElement } from './components/rigidbody-component';
@@ -44,7 +44,7 @@ export {
     CollisionComponentElement,
     ComponentElement,
     ElementComponentElement,
-    GSplatComponentElement,
+    SplatComponentElement,
     LightComponentElement,
     ListenerComponentElement,
     RenderComponentElement,