@playcanvas/web-components 0.3.0 → 0.5.0

package/src/index.ts

@@ -1,63 +1,63 @@
-/**
- * The Engine Web Components module provides a set of Web Components for the PlayCanvas Engine.
- * While these components are normally instantiated in a declarative fashion using HTML, this
- * reference covers the TypeScript/JavaScript API that allows these components to be created
- * programmatically.
- *
- * @module EngineWebComponents
- */
-
-/* eslint-disable import/order */
-
-// Note that order matters here (e.g. pc-entity must be defined before components)
-import { AsyncElement } from './async-element';
-import { ModuleElement } from './module';
-import { AppElement } from './app';
-import { EntityElement } from './entity';
-import { AssetElement } from './asset';
-import { ListenerComponentElement } from './components/listener-component';
-import { CameraComponentElement } from './components/camera-component';
-import { CollisionComponentElement } from './components/collision-component';
-import { ComponentElement } from './components/component';
-import { ElementComponentElement } from './components/element-component';
-import { LightComponentElement } from './components/light-component';
-import { ParticleSystemComponentElement } from './components/particlesystem-component';
-import { RenderComponentElement } from './components/render-component';
-import { RigidBodyComponentElement } from './components/rigidbody-component';
-import { ScreenComponentElement } from './components/screen-component';
-import { ScriptComponentElement } from './components/script-component';
-import { ScriptElement } from './components/script';
-import { SoundComponentElement } from './components/sound-component';
-import { SoundSlotElement } from './components/sound-slot';
-import { SplatComponentElement } from './components/splat-component';
-import { MaterialElement } from './material';
-import { ModelElement } from './model';
-import { SceneElement } from './scene';
-import { SkyElement } from './sky';
-
-export {
-    AsyncElement,
-    ModuleElement,
-    AppElement,
-    EntityElement,
-    AssetElement,
-    CameraComponentElement,
-    CollisionComponentElement,
-    ComponentElement,
-    ElementComponentElement,
-    ParticleSystemComponentElement,
-    LightComponentElement,
-    ListenerComponentElement,
-    RenderComponentElement,
-    RigidBodyComponentElement,
-    ScreenComponentElement,
-    ScriptComponentElement,
-    ScriptElement,
-    SoundComponentElement,
-    SoundSlotElement,
-    SplatComponentElement,
-    MaterialElement,
-    ModelElement,
-    SceneElement,
-    SkyElement
-};
+/**
+ * The Engine Web Components module provides a set of Web Components for the PlayCanvas Engine.
+ * While these components are normally instantiated in a declarative fashion using HTML, this
+ * reference covers the TypeScript/JavaScript API that allows these components to be created
+ * programmatically.
+ *
+ * @module EngineWebComponents
+ */
+
+/* eslint-disable import/order */
+
+// Note that order matters here (e.g. pc-entity must be defined before components)
+import { AsyncElement } from './async-element';
+import { ModuleElement } from './module';
+import { AppElement } from './app';
+import { EntityElement } from './entity';
+import { AssetElement } from './asset';
+import { ListenerComponentElement } from './components/listener-component';
+import { CameraComponentElement } from './components/camera-component';
+import { CollisionComponentElement } from './components/collision-component';
+import { ComponentElement } from './components/component';
+import { ElementComponentElement } from './components/element-component';
+import { LightComponentElement } from './components/light-component';
+import { ParticleSystemComponentElement } from './components/particlesystem-component';
+import { RenderComponentElement } from './components/render-component';
+import { RigidBodyComponentElement } from './components/rigidbody-component';
+import { ScreenComponentElement } from './components/screen-component';
+import { ScriptComponentElement } from './components/script-component';
+import { ScriptElement } from './components/script';
+import { SoundComponentElement } from './components/sound-component';
+import { SoundSlotElement } from './components/sound-slot';
+import { SplatComponentElement } from './components/splat-component';
+import { MaterialElement } from './material';
+import { ModelElement } from './model';
+import { SceneElement } from './scene';
+import { SkyElement } from './sky';
+
+export {
+    AsyncElement,
+    ModuleElement,
+    AppElement,
+    EntityElement,
+    AssetElement,
+    CameraComponentElement,
+    CollisionComponentElement,
+    ComponentElement,
+    ElementComponentElement,
+    ParticleSystemComponentElement,
+    LightComponentElement,
+    ListenerComponentElement,
+    RenderComponentElement,
+    RigidBodyComponentElement,
+    ScreenComponentElement,
+    ScriptComponentElement,
+    ScriptElement,
+    SoundComponentElement,
+    SoundSlotElement,
+    SplatComponentElement,
+    MaterialElement,
+    ModelElement,
+    SceneElement,
+    SkyElement
+};

package/src/material.ts

@@ -1,141 +1,141 @@
-import { Color, StandardMaterial, Texture } from 'playcanvas';
-
-import { AssetElement } from './asset';
-import { parseColor } from './utils';
-
-/**
- * The MaterialElement interface provides properties and methods for manipulating
- * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-material/ | `<pc-material>`} elements.
- * The MaterialElement interface also inherits the properties and methods of the
- * {@link HTMLElement} interface.
- */
-class MaterialElement extends HTMLElement {
-    private _diffuse = new Color(1, 1, 1);
-
-    private _diffuseMap = '';
-
-    private _metalnessMap = '';
-
-    private _normalMap = '';
-
-    private _roughnessMap = '';
-
-    material: StandardMaterial | null = null;
-
-    createMaterial() {
-        this.material = new StandardMaterial();
-        this.material.glossInvert = false;
-        this.material.useMetalness = false;
-        this.material.diffuse = this._diffuse;
-        this.diffuseMap = this._diffuseMap;
-        this.metalnessMap = this._metalnessMap;
-        this.normalMap = this._normalMap;
-        this.roughnessMap = this._roughnessMap;
-        this.material.update();
-    }
-
-    disconnectedCallback() {
-        if (this.material) {
-            this.material.destroy();
-            this.material = null;
-        }
-    }
-
-    setMap(map: string, property: 'diffuseMap' | 'metalnessMap' | 'normalMap' | 'glossMap') {
-        if (this.material) {
-            const asset = AssetElement.get(map);
-            if (asset) {
-                if (asset.loaded) {
-                    this.material[property] = asset.resource as Texture;
-                    this.material[property]!.anisotropy = 4;
-                } else {
-                    asset.once('load', () => {
-                        this.material![property] = asset.resource as Texture;
-                        this.material![property]!.anisotropy = 4;
-                        this.material!.update();
-                    });
-                }
-            }
-        }
-    }
-
-    set diffuse(value: Color) {
-        this._diffuse = value;
-        if (this.material) {
-            this.material.diffuse = value;
-        }
-    }
-
-    get diffuse(): Color {
-        return this._diffuse;
-    }
-
-    set diffuseMap(value: string) {
-        this._diffuseMap = value;
-        this.setMap(value, 'diffuseMap');
-    }
-
-    get diffuseMap() {
-        return this._diffuseMap;
-    }
-
-    set metalnessMap(value: string) {
-        this._metalnessMap = value;
-        this.setMap(value, 'metalnessMap');
-    }
-
-    get metalnessMap() {
-        return this._metalnessMap;
-    }
-
-    set normalMap(value: string) {
-        this._normalMap = value;
-        this.setMap(value, 'normalMap');
-    }
-
-    get normalMap() {
-        return this._normalMap;
-    }
-
-    set roughnessMap(value: string) {
-        this._roughnessMap = value;
-        this.setMap(value, 'glossMap');
-    }
-
-    get roughnessMap() {
-        return this._roughnessMap;
-    }
-
-    static get(id: string) {
-        const materialElement = document.querySelector<MaterialElement>(`pc-material[id="${id}"]`);
-        return materialElement?.material;
-    }
-
-    static get observedAttributes() {
-        return ['diffuse', 'diffuse-map', 'metalness-map', 'normal-map', 'roughness-map'];
-    }
-
-    attributeChangedCallback(name: string, _oldValue: string, newValue: string) {
-        switch (name) {
-            case 'diffuse':
-                this.diffuse = parseColor(newValue);
-                break;
-            case 'diffuse-map':
-                this.diffuseMap = newValue;
-                break;
-            case 'metalness-map':
-                this.metalnessMap = newValue;
-                break;
-            case 'normal-map':
-                this.normalMap = newValue;
-                break;
-            case 'roughness-map':
-                this.roughnessMap = newValue;
-                break;
-        }
-    }
-}
-
-customElements.define('pc-material', MaterialElement);
-
-export { MaterialElement };
+import { Color, StandardMaterial, Texture } from 'playcanvas';
+
+import { AssetElement } from './asset';
+import { parseColor } from './utils';
+
+/**
+ * The MaterialElement interface provides properties and methods for manipulating
+ * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-material/ | `<pc-material>`} elements.
+ * The MaterialElement interface also inherits the properties and methods of the
+ * {@link HTMLElement} interface.
+ */
+class MaterialElement extends HTMLElement {
+    private _diffuse = new Color(1, 1, 1);
+
+    private _diffuseMap = '';
+
+    private _metalnessMap = '';
+
+    private _normalMap = '';
+
+    private _roughnessMap = '';
+
+    material: StandardMaterial | null = null;
+
+    createMaterial() {
+        this.material = new StandardMaterial();
+        this.material.glossInvert = false;
+        this.material.useMetalness = false;
+        this.material.diffuse = this._diffuse;
+        this.diffuseMap = this._diffuseMap;
+        this.metalnessMap = this._metalnessMap;
+        this.normalMap = this._normalMap;
+        this.roughnessMap = this._roughnessMap;
+        this.material.update();
+    }
+
+    disconnectedCallback() {
+        if (this.material) {
+            this.material.destroy();
+            this.material = null;
+        }
+    }
+
+    setMap(map: string, property: 'diffuseMap' | 'metalnessMap' | 'normalMap' | 'glossMap') {
+        if (this.material) {
+            const asset = AssetElement.get(map);
+            if (asset) {
+                if (asset.loaded) {
+                    this.material[property] = asset.resource as Texture;
+                    this.material[property]!.anisotropy = 4;
+                } else {
+                    asset.once('load', () => {
+                        this.material![property] = asset.resource as Texture;
+                        this.material![property]!.anisotropy = 4;
+                        this.material!.update();
+                    });
+                }
+            }
+        }
+    }
+
+    set diffuse(value: Color) {
+        this._diffuse = value;
+        if (this.material) {
+            this.material.diffuse = value;
+        }
+    }
+
+    get diffuse(): Color {
+        return this._diffuse;
+    }
+
+    set diffuseMap(value: string) {
+        this._diffuseMap = value;
+        this.setMap(value, 'diffuseMap');
+    }
+
+    get diffuseMap() {
+        return this._diffuseMap;
+    }
+
+    set metalnessMap(value: string) {
+        this._metalnessMap = value;
+        this.setMap(value, 'metalnessMap');
+    }
+
+    get metalnessMap() {
+        return this._metalnessMap;
+    }
+
+    set normalMap(value: string) {
+        this._normalMap = value;
+        this.setMap(value, 'normalMap');
+    }
+
+    get normalMap() {
+        return this._normalMap;
+    }
+
+    set roughnessMap(value: string) {
+        this._roughnessMap = value;
+        this.setMap(value, 'glossMap');
+    }
+
+    get roughnessMap() {
+        return this._roughnessMap;
+    }
+
+    static get(id: string) {
+        const materialElement = document.querySelector<MaterialElement>(`pc-material[id="${id}"]`);
+        return materialElement?.material;
+    }
+
+    static get observedAttributes() {
+        return ['diffuse', 'diffuse-map', 'metalness-map', 'normal-map', 'roughness-map'];
+    }
+
+    attributeChangedCallback(name: string, _oldValue: string, newValue: string) {
+        switch (name) {
+            case 'diffuse':
+                this.diffuse = parseColor(newValue);
+                break;
+            case 'diffuse-map':
+                this.diffuseMap = newValue;
+                break;
+            case 'metalness-map':
+                this.metalnessMap = newValue;
+                break;
+            case 'normal-map':
+                this.normalMap = newValue;
+                break;
+            case 'roughness-map':
+                this.roughnessMap = newValue;
+                break;
+        }
+    }
+}
+
+customElements.define('pc-material', MaterialElement);
+
+export { MaterialElement };

package/src/model.ts

@@ -1,111 +1,111 @@
-import { ContainerResource, Entity } from 'playcanvas';
-
-import { AssetElement } from './asset';
-import { AsyncElement } from './async-element';
-
-/**
- * The ModelElement interface provides properties and methods for manipulating
- * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-model/ | `<pc-model>`} elements.
- * The ModelElement interface also inherits the properties and methods of the
- * {@link HTMLElement} interface.
- */
-class ModelElement extends AsyncElement {
-    private _asset: string = '';
-
-    private _entity: Entity | null = null;
-
-    connectedCallback() {
-        this._loadModel();
-        this._onReady();
-    }
-
-    disconnectedCallback() {
-        this._unloadModel();
-    }
-
-    private _instantiate(container: ContainerResource) {
-        this._entity = container.instantiateRenderEntity();
-
-        // @ts-ignore
-        if (container.animations.length > 0) {
-            this._entity.addComponent('anim');
-            // @ts-ignore
-            this._entity.anim.assignAnimation('animation', container.animations[0].resource);
-        }
-
-        const parentEntityElement = this.closestEntity;
-        if (parentEntityElement) {
-            parentEntityElement.ready().then(() => {
-                parentEntityElement.entity!.addChild(this._entity!);
-            });
-        } else {
-            const appElement = this.closestApp;
-            if (appElement) {
-                appElement.ready().then(() => {
-                    appElement.app!.root.addChild(this._entity!);
-                });
-            }
-        }
-    }
-
-    private async _loadModel() {
-        this._unloadModel();
-
-        const appElement = await this.closestApp?.ready();
-        const app = appElement?.app;
-
-        const asset = AssetElement.get(this._asset);
-        if (!asset) {
-            return;
-        }
-
-        if (asset.loaded) {
-            this._instantiate(asset.resource as ContainerResource);
-        } else {
-            asset.once('load', () => {
-                this._instantiate(asset.resource as ContainerResource);
-            });
-            app!.assets.load(asset);
-        }
-    }
-
-    private _unloadModel() {
-        this._entity?.destroy();
-        this._entity = null;
-    }
-
-    /**
-     * 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._loadModel();
-        }
-    }
-
-    /**
-     * Gets the id of the `pc-asset` to use for the model.
-     * @returns The asset ID.
-     */
-    get asset(): string {
-        return this._asset;
-    }
-
-    static get observedAttributes() {
-        return ['asset'];
-    }
-
-    attributeChangedCallback(name: string, _oldValue: string, newValue: string) {
-        switch (name) {
-            case 'asset':
-                this.asset = newValue;
-                break;
-        }
-    }
-}
-
-customElements.define('pc-model', ModelElement);
-
-export { ModelElement };
+import { ContainerResource, Entity } from 'playcanvas';
+
+import { AssetElement } from './asset';
+import { AsyncElement } from './async-element';
+
+/**
+ * The ModelElement interface provides properties and methods for manipulating
+ * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-model/ | `<pc-model>`} elements.
+ * The ModelElement interface also inherits the properties and methods of the
+ * {@link HTMLElement} interface.
+ */
+class ModelElement extends AsyncElement {
+    private _asset: string = '';
+
+    private _entity: Entity | null = null;
+
+    connectedCallback() {
+        this._loadModel();
+        this._onReady();
+    }
+
+    disconnectedCallback() {
+        this._unloadModel();
+    }
+
+    private _instantiate(container: ContainerResource) {
+        this._entity = container.instantiateRenderEntity();
+
+        // @ts-ignore
+        if (container.animations.length > 0) {
+            this._entity.addComponent('anim');
+            // @ts-ignore
+            this._entity.anim.assignAnimation('animation', container.animations[0].resource);
+        }
+
+        const parentEntityElement = this.closestEntity;
+        if (parentEntityElement) {
+            parentEntityElement.ready().then(() => {
+                parentEntityElement.entity!.addChild(this._entity!);
+            });
+        } else {
+            const appElement = this.closestApp;
+            if (appElement) {
+                appElement.ready().then(() => {
+                    appElement.app!.root.addChild(this._entity!);
+                });
+            }
+        }
+    }
+
+    private async _loadModel() {
+        this._unloadModel();
+
+        const appElement = await this.closestApp?.ready();
+        const app = appElement?.app;
+
+        const asset = AssetElement.get(this._asset);
+        if (!asset) {
+            return;
+        }
+
+        if (asset.loaded) {
+            this._instantiate(asset.resource as ContainerResource);
+        } else {
+            asset.once('load', () => {
+                this._instantiate(asset.resource as ContainerResource);
+            });
+            app!.assets.load(asset);
+        }
+    }
+
+    private _unloadModel() {
+        this._entity?.destroy();
+        this._entity = null;
+    }
+
+    /**
+     * 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._loadModel();
+        }
+    }
+
+    /**
+     * Gets the id of the `pc-asset` to use for the model.
+     * @returns The asset ID.
+     */
+    get asset(): string {
+        return this._asset;
+    }
+
+    static get observedAttributes() {
+        return ['asset'];
+    }
+
+    attributeChangedCallback(name: string, _oldValue: string, newValue: string) {
+        switch (name) {
+            case 'asset':
+                this.asset = newValue;
+                break;
+        }
+    }
+}
+
+customElements.define('pc-model', ModelElement);
+
+export { ModelElement };