@playcanvas/web-components 0.3.0 → 0.5.0

package/src/components/listener-component.ts

@@ -1,30 +1,30 @@
-import { AudioListenerComponent } from 'playcanvas';
-
-import { ComponentElement } from './component';
-
-/**
- * The ListenerComponentElement interface provides properties and methods for manipulating
- * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-listener/ | `<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');
-    }
-
-    /**
-     * Gets the underlying PlayCanvas audio listener component.
-     * @returns The audio listener component.
-     */
-    get component(): AudioListenerComponent | null {
-        return super.component as AudioListenerComponent | null;
-    }
-}
-
-customElements.define('pc-listener', ListenerComponentElement);
-
-export { ListenerComponentElement };
+import { AudioListenerComponent } from 'playcanvas';
+
+import { ComponentElement } from './component';
+
+/**
+ * The ListenerComponentElement interface provides properties and methods for manipulating
+ * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-listener/ | `<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');
+    }
+
+    /**
+     * Gets the underlying PlayCanvas audio listener component.
+     * @returns The audio listener component.
+     */
+    get component(): AudioListenerComponent | null {
+        return super.component as AudioListenerComponent | null;
+    }
+}
+
+customElements.define('pc-listener', ListenerComponentElement);
+
+export { ListenerComponentElement };

package/src/components/particlesystem-component.ts

@@ -1,155 +1,155 @@
-import { ParticleSystemComponent } from 'playcanvas';
-
-import { ComponentElement } from './component';
-import { AssetElement } from '../asset';
-
-/**
- * The ParticleSystemComponentElement interface provides properties and methods for manipulating
- * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-particles/ | `<pc-particles>`} elements.
- * The ParticleSystemComponentElement interface also inherits the properties and methods of the
- * {@link HTMLElement} interface.
- *
- * @category Components
- */
-class ParticleSystemComponentElement extends ComponentElement {
-    private _asset: string = '';
-
-    /** @ignore */
-    constructor() {
-        super('particlesystem');
-    }
-
-    getInitialComponentData() {
-        const asset = AssetElement.get(this._asset);
-        if (!asset) {
-            return {};
-        }
-
-        if ((asset.resource as any).colorMapAsset) {
-            const id = (asset.resource as any).colorMapAsset;
-            const colorMapAsset = AssetElement.get(id)?.id;
-            if (colorMapAsset) {
-                (asset.resource as any).colorMapAsset = colorMapAsset;
-            }
-        }
-
-        return asset.resource;
-    }
-
-    /**
-     * Gets the underlying PlayCanvas particle system component.
-     * @returns The particle system component.
-     */
-    get component(): ParticleSystemComponent | null {
-        return super.component as ParticleSystemComponent | null;
-    }
-
-    private applyConfig(resource: any) {
-        if (!this.component) {
-            return;
-        }
-
-        // Set all the config properties on the component
-        for (const key in resource) {
-            if (resource.hasOwnProperty(key)) {
-                (this.component as any)[key] = resource[key];
-            }
-        }
-    }
-
-    private async _loadAsset() {
-        const appElement = await this.closestApp?.ready();
-        const app = appElement?.app;
-
-        const asset = AssetElement.get(this._asset);
-        if (!asset) {
-            return;
-        }
-
-        if (asset.loaded) {
-            this.applyConfig(asset.resource);
-        } else {
-            asset.once('load', () => {
-                this.applyConfig(asset.resource);
-            });
-            app!.assets.load(asset);
-        }
-    }
-
-    /**
-     * Sets the id of the `pc-asset` to use for the model.
-     * @param value - The asset ID.
-     */
-    set asset(value: string) {
-        this._asset = value;
-        if (this.isConnected) {
-            this._loadAsset();
-        }
-    }
-
-    /**
-     * Gets the id of the `pc-asset` to use for the model.
-     * @returns The asset ID.
-     */
-    get asset(): string {
-        return this._asset;
-    }
-
-    // Control methods
-    /**
-     * Starts playing the particle system
-     */
-    play() {
-        if (this.component) {
-            this.component.play();
-        }
-    }
-
-    /**
-     * Pauses the particle system
-     */
-    pause() {
-        if (this.component) {
-            this.component.pause();
-        }
-    }
-
-    /**
-     * Resets the particle system
-     */
-    reset() {
-        if (this.component) {
-            this.component.reset();
-        }
-    }
-
-    /**
-     * Stops the particle system
-     */
-    stop() {
-        if (this.component) {
-            this.component.stop();
-        }
-    }
-
-    static get observedAttributes() {
-        return [
-            ...super.observedAttributes,
-            'asset'
-        ];
-    }
-
-    attributeChangedCallback(name: string, _oldValue: string, newValue: string) {
-        super.attributeChangedCallback(name, _oldValue, newValue);
-
-        switch (name) {
-            case 'asset':
-                this.asset = newValue;
-                break;
-        }
-    }
-}
-
-customElements.define('pc-particles', ParticleSystemComponentElement);
-
-export { ParticleSystemComponentElement };
+import { ParticleSystemComponent } from 'playcanvas';
+
+import { ComponentElement } from './component';
+import { AssetElement } from '../asset';
+
+/**
+ * The ParticleSystemComponentElement interface provides properties and methods for manipulating
+ * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-particles/ | `<pc-particles>`} elements.
+ * The ParticleSystemComponentElement interface also inherits the properties and methods of the
+ * {@link HTMLElement} interface.
+ *
+ * @category Components
+ */
+class ParticleSystemComponentElement extends ComponentElement {
+    private _asset: string = '';
+
+    /** @ignore */
+    constructor() {
+        super('particlesystem');
+    }
+
+    getInitialComponentData() {
+        const asset = AssetElement.get(this._asset);
+        if (!asset) {
+            return {};
+        }
+
+        if ((asset.resource as any).colorMapAsset) {
+            const id = (asset.resource as any).colorMapAsset;
+            const colorMapAsset = AssetElement.get(id)?.id;
+            if (colorMapAsset) {
+                (asset.resource as any).colorMapAsset = colorMapAsset;
+            }
+        }
+
+        return asset.resource;
+    }
+
+    /**
+     * Gets the underlying PlayCanvas particle system component.
+     * @returns The particle system component.
+     */
+    get component(): ParticleSystemComponent | null {
+        return super.component as ParticleSystemComponent | null;
+    }
+
+    private applyConfig(resource: any) {
+        if (!this.component) {
+            return;
+        }
+
+        // Set all the config properties on the component
+        for (const key in resource) {
+            if (resource.hasOwnProperty(key)) {
+                (this.component as any)[key] = resource[key];
+            }
+        }
+    }
+
+    private async _loadAsset() {
+        const appElement = await this.closestApp?.ready();
+        const app = appElement?.app;
+
+        const asset = AssetElement.get(this._asset);
+        if (!asset) {
+            return;
+        }
+
+        if (asset.loaded) {
+            this.applyConfig(asset.resource);
+        } else {
+            asset.once('load', () => {
+                this.applyConfig(asset.resource);
+            });
+            app!.assets.load(asset);
+        }
+    }
+
+    /**
+     * Sets the id of the `pc-asset` to use for the model.
+     * @param value - The asset ID.
+     */
+    set asset(value: string) {
+        this._asset = value;
+        if (this.isConnected) {
+            this._loadAsset();
+        }
+    }
+
+    /**
+     * Gets the id of the `pc-asset` to use for the model.
+     * @returns The asset ID.
+     */
+    get asset(): string {
+        return this._asset;
+    }
+
+    // Control methods
+    /**
+     * Starts playing the particle system
+     */
+    play() {
+        if (this.component) {
+            this.component.play();
+        }
+    }
+
+    /**
+     * Pauses the particle system
+     */
+    pause() {
+        if (this.component) {
+            this.component.pause();
+        }
+    }
+
+    /**
+     * Resets the particle system
+     */
+    reset() {
+        if (this.component) {
+            this.component.reset();
+        }
+    }
+
+    /**
+     * Stops the particle system
+     */
+    stop() {
+        if (this.component) {
+            this.component.stop();
+        }
+    }
+
+    static get observedAttributes() {
+        return [
+            ...super.observedAttributes,
+            'asset'
+        ];
+    }
+
+    attributeChangedCallback(name: string, _oldValue: string, newValue: string) {
+        super.attributeChangedCallback(name, _oldValue, newValue);
+
+        switch (name) {
+            case 'asset':
+                this.asset = newValue;
+                break;
+        }
+    }
+}
+
+customElements.define('pc-particles', ParticleSystemComponentElement);
+
+export { ParticleSystemComponentElement };

package/src/components/render-component.ts

@@ -1,147 +1,147 @@
-import { RenderComponent, StandardMaterial } from 'playcanvas';
-
-import { ComponentElement } from './component';
-import { MaterialElement } from '../material';
-
-/**
- * The RenderComponentElement interface provides properties and methods for manipulating
- * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-render/ | `<pc-render>`} elements.
- * The RenderComponentElement interface also inherits the properties and methods of the
- * {@link HTMLElement} interface.
- *
- * @category Components
- */
-class RenderComponentElement extends ComponentElement {
-    private _castShadows = true;
-
-    private _material: string = '';
-
-    private _receiveShadows = true;
-
-    private _type: 'asset' | 'box' | 'capsule' | 'cone' | 'cylinder' | 'plane' | 'sphere' = 'asset';
-
-    /** @ignore */
-    constructor() {
-        super('render');
-    }
-
-    getInitialComponentData() {
-        return {
-            type: this._type,
-            castShadows: this._castShadows,
-            material: MaterialElement.get(this._material),
-            receiveShadows: this._receiveShadows
-        };
-    }
-
-    /**
-     * Gets the underlying PlayCanvas render component.
-     * @returns The render component.
-     */
-    get component(): RenderComponent | null {
-        return super.component as RenderComponent | null;
-    }
-
-    /**
-     * Sets the type of the render component.
-     * @param value - The type.
-     */
-    set type(value: 'asset' | 'box' | 'capsule' | 'cone' | 'cylinder' | 'plane' | 'sphere') {
-        this._type = value;
-        if (this.component) {
-            this.component.type = value;
-        }
-    }
-
-    /**
-     * Gets the type of the render component.
-     * @returns The type.
-     */
-    get type(): 'asset' | 'box' | 'capsule' | 'cone' | 'cylinder' | 'plane' | 'sphere' {
-        return this._type;
-    }
-
-    /**
-     * Sets the cast shadows flag of the render component.
-     * @param value - The cast shadows flag.
-     */
-    set castShadows(value: boolean) {
-        this._castShadows = value;
-        if (this.component) {
-            this.component.castShadows = value;
-        }
-    }
-
-    /**
-     * Gets the cast shadows flag of the render component.
-     * @returns The cast shadows flag.
-     */
-    get castShadows(): boolean {
-        return this._castShadows;
-    }
-
-    /**
-     * Sets the material of the render component.
-     * @param value - The id of the material asset to use.
-     */
-    set material(value: string) {
-        this._material = value;
-        if (this.component) {
-            this.component.material = MaterialElement.get(value) as StandardMaterial;
-        }
-    }
-
-    /**
-     * Gets the id of the material asset used by the render component.
-     * @returns The id of the material asset.
-     */
-    get material() {
-        return this._material;
-    }
-
-    /**
-     * Sets the receive shadows flag of the render component.
-     * @param value - The receive shadows flag.
-     */
-    set receiveShadows(value: boolean) {
-        this._receiveShadows = value;
-        if (this.component) {
-            this.component.receiveShadows = value;
-        }
-    }
-
-    /**
-     * Gets the receive shadows flag of the render component.
-     * @returns The receive shadows flag.
-     */
-    get receiveShadows(): boolean {
-        return this._receiveShadows;
-    }
-
-    static get observedAttributes() {
-        return [...super.observedAttributes, 'cast-shadows', 'material', 'receive-shadows', 'type'];
-    }
-
-    attributeChangedCallback(name: string, _oldValue: string, newValue: string) {
-        super.attributeChangedCallback(name, _oldValue, newValue);
-
-        switch (name) {
-            case 'cast-shadows':
-                this.castShadows = newValue !== 'false';
-                break;
-            case 'material':
-                this.material = newValue;
-                break;
-            case 'receive-shadows':
-                this.receiveShadows = newValue !== 'false';
-                break;
-            case 'type':
-                this.type = newValue as 'asset' | 'box' | 'capsule' | 'cone' | 'cylinder' | 'plane' | 'sphere';
-                break;
-        }
-    }
-}
-
-customElements.define('pc-render', RenderComponentElement);
-
-export { RenderComponentElement };
+import { RenderComponent, StandardMaterial } from 'playcanvas';
+
+import { ComponentElement } from './component';
+import { MaterialElement } from '../material';
+
+/**
+ * The RenderComponentElement interface provides properties and methods for manipulating
+ * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-render/ | `<pc-render>`} elements.
+ * The RenderComponentElement interface also inherits the properties and methods of the
+ * {@link HTMLElement} interface.
+ *
+ * @category Components
+ */
+class RenderComponentElement extends ComponentElement {
+    private _castShadows = true;
+
+    private _material: string = '';
+
+    private _receiveShadows = true;
+
+    private _type: 'asset' | 'box' | 'capsule' | 'cone' | 'cylinder' | 'plane' | 'sphere' = 'asset';
+
+    /** @ignore */
+    constructor() {
+        super('render');
+    }
+
+    getInitialComponentData() {
+        return {
+            type: this._type,
+            castShadows: this._castShadows,
+            material: MaterialElement.get(this._material),
+            receiveShadows: this._receiveShadows
+        };
+    }
+
+    /**
+     * Gets the underlying PlayCanvas render component.
+     * @returns The render component.
+     */
+    get component(): RenderComponent | null {
+        return super.component as RenderComponent | null;
+    }
+
+    /**
+     * Sets the type of the render component.
+     * @param value - The type.
+     */
+    set type(value: 'asset' | 'box' | 'capsule' | 'cone' | 'cylinder' | 'plane' | 'sphere') {
+        this._type = value;
+        if (this.component) {
+            this.component.type = value;
+        }
+    }
+
+    /**
+     * Gets the type of the render component.
+     * @returns The type.
+     */
+    get type(): 'asset' | 'box' | 'capsule' | 'cone' | 'cylinder' | 'plane' | 'sphere' {
+        return this._type;
+    }
+
+    /**
+     * Sets the cast shadows flag of the render component.
+     * @param value - The cast shadows flag.
+     */
+    set castShadows(value: boolean) {
+        this._castShadows = value;
+        if (this.component) {
+            this.component.castShadows = value;
+        }
+    }
+
+    /**
+     * Gets the cast shadows flag of the render component.
+     * @returns The cast shadows flag.
+     */
+    get castShadows(): boolean {
+        return this._castShadows;
+    }
+
+    /**
+     * Sets the material of the render component.
+     * @param value - The id of the material asset to use.
+     */
+    set material(value: string) {
+        this._material = value;
+        if (this.component) {
+            this.component.material = MaterialElement.get(value) as StandardMaterial;
+        }
+    }
+
+    /**
+     * Gets the id of the material asset used by the render component.
+     * @returns The id of the material asset.
+     */
+    get material() {
+        return this._material;
+    }
+
+    /**
+     * Sets the receive shadows flag of the render component.
+     * @param value - The receive shadows flag.
+     */
+    set receiveShadows(value: boolean) {
+        this._receiveShadows = value;
+        if (this.component) {
+            this.component.receiveShadows = value;
+        }
+    }
+
+    /**
+     * Gets the receive shadows flag of the render component.
+     * @returns The receive shadows flag.
+     */
+    get receiveShadows(): boolean {
+        return this._receiveShadows;
+    }
+
+    static get observedAttributes() {
+        return [...super.observedAttributes, 'cast-shadows', 'material', 'receive-shadows', 'type'];
+    }
+
+    attributeChangedCallback(name: string, _oldValue: string, newValue: string) {
+        super.attributeChangedCallback(name, _oldValue, newValue);
+
+        switch (name) {
+            case 'cast-shadows':
+                this.castShadows = newValue !== 'false';
+                break;
+            case 'material':
+                this.material = newValue;
+                break;
+            case 'receive-shadows':
+                this.receiveShadows = newValue !== 'false';
+                break;
+            case 'type':
+                this.type = newValue as 'asset' | 'box' | 'capsule' | 'cone' | 'cylinder' | 'plane' | 'sphere';
+                break;
+        }
+    }
+}
+
+customElements.define('pc-render', RenderComponentElement);
+
+export { RenderComponentElement };