@playcanvas/web-components 0.3.0 → 0.6.0

package/src/module.ts

@@ -1,43 +1,43 @@
-import { basisInitialize, WasmModule } from 'playcanvas';
-
-/**
- * The ModuleElement interface provides properties and methods for manipulating
- * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-module/ | `<pc-module>`} elements.
- * The ModuleElement interface also inherits the properties and methods of the
- * {@link HTMLElement} interface.
- */
-class ModuleElement extends HTMLElement {
-    private loadPromise: Promise<void>;
-
-    /** @ignore */
-    constructor() {
-        super();
-        this.loadPromise = this.loadModule();
-    }
-
-    private async loadModule(): Promise<void> {
-        const name = this.getAttribute('name')!;
-        const glueUrl = this.getAttribute('glue')!;
-        const wasmUrl = this.getAttribute('wasm')!;
-        const fallbackUrl = this.getAttribute('fallback')!;
-        const config = { glueUrl, wasmUrl, fallbackUrl };
-
-        if (name === 'Basis') {
-            basisInitialize(config);
-        } else {
-            WasmModule.setConfig(name, config);
-
-            await new Promise<void>((resolve) => {
-                WasmModule.getInstance(name, () => resolve());
-            });
-        }
-    }
-
-    public getLoadPromise(): Promise<void> {
-        return this.loadPromise;
-    }
-}
-
-customElements.define('pc-module', ModuleElement);
-
-export { ModuleElement };
+import { basisInitialize, WasmModule } from 'playcanvas';
+
+/**
+ * The ModuleElement interface provides properties and methods for manipulating
+ * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-module/ | `<pc-module>`} elements.
+ * The ModuleElement interface also inherits the properties and methods of the
+ * {@link HTMLElement} interface.
+ */
+class ModuleElement extends HTMLElement {
+    private loadPromise: Promise<void>;
+
+    /** @ignore */
+    constructor() {
+        super();
+        this.loadPromise = this.loadModule();
+    }
+
+    private async loadModule(): Promise<void> {
+        const name = this.getAttribute('name')!;
+        const glueUrl = this.getAttribute('glue')!;
+        const wasmUrl = this.getAttribute('wasm')!;
+        const fallbackUrl = this.getAttribute('fallback')!;
+        const config = { glueUrl, wasmUrl, fallbackUrl };
+
+        if (name === 'Basis') {
+            basisInitialize(config);
+        } else {
+            WasmModule.setConfig(name, config);
+
+            await new Promise<void>((resolve) => {
+                WasmModule.getInstance(name, () => resolve());
+            });
+        }
+    }
+
+    public getLoadPromise(): Promise<void> {
+        return this.loadPromise;
+    }
+}
+
+customElements.define('pc-module', ModuleElement);
+
+export { ModuleElement };

package/src/scene.ts

@@ -1,217 +1,217 @@
-import { Color, Scene, Vec3 } from 'playcanvas';
-
-import { AppElement } from './app';
-import { AsyncElement } from './async-element';
-import { parseColor, parseVec3 } from './utils';
-
-/**
- * The SceneElement interface provides properties and methods for manipulating
- * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-scene/ | `<pc-scene>`} elements.
- * The SceneElement interface also inherits the properties and methods of the
- * {@link HTMLElement} interface.
- */
-class SceneElement extends AsyncElement {
-    /**
-     * The fog type of the scene.
-     */
-    private _fog = 'none'; // possible values: 'none', 'linear', 'exp', 'exp2'
-
-    /**
-     * The color of the fog.
-     */
-    private _fogColor = new Color(1, 1, 1);
-
-    /**
-     * The density of the fog.
-     */
-    private _fogDensity = 0;
-
-    /**
-     * The start distance of the fog.
-     */
-    private _fogStart = 0;
-
-    /**
-     * The end distance of the fog.
-     */
-    private _fogEnd = 1000;
-
-    /**
-     * The gravity of the scene.
-     */
-    private _gravity = new Vec3(0, -9.81, 0);
-
-    /**
-     * The PlayCanvas scene instance.
-     */
-    scene: Scene | null = null;
-
-    async connectedCallback() {
-        await this.closestApp?.ready();
-
-        this.scene = this.closestApp!.app!.scene;
-        this.updateSceneSettings();
-
-        this._onReady();
-    }
-
-    updateSceneSettings() {
-        if (this.scene) {
-            this.scene.fog.type = this._fog;
-            this.scene.fog.color = this._fogColor;
-            this.scene.fog.density = this._fogDensity;
-            this.scene.fog.start = this._fogStart;
-            this.scene.fog.end = this._fogEnd;
-
-            const appElement = this.parentElement as AppElement;
-            appElement.app!.systems.rigidbody!.gravity.copy(this._gravity);
-        }
-    }
-
-    /**
-     * Sets the fog type of the scene.
-     * @param value - The fog type.
-     */
-    set fog(value) {
-        this._fog = value;
-        if (this.scene) {
-            this.scene.fog.type = value;
-        }
-    }
-
-    /**
-     * Gets the fog type of the scene.
-     * @returns The fog type.
-     */
-    get fog() {
-        return this._fog;
-    }
-
-    /**
-     * Sets the fog color of the scene.
-     * @param value - The fog color.
-     */
-    set fogColor(value: Color) {
-        this._fogColor = value;
-        if (this.scene) {
-            this.scene.fog.color = value;
-        }
-    }
-
-    /**
-     * Gets the fog color of the scene.
-     * @returns The fog color.
-     */
-    get fogColor() {
-        return this._fogColor;
-    }
-
-    /**
-     * Sets the fog density of the scene.
-     * @param value - The fog density.
-     */
-    set fogDensity(value: number) {
-        this._fogDensity = value;
-        if (this.scene) {
-            this.scene.fog.density = value;
-        }
-    }
-
-    /**
-     * Gets the fog density of the scene.
-     * @returns The fog density.
-     */
-    get fogDensity() {
-        return this._fogDensity;
-    }
-
-    /**
-     * Sets the fog start distance of the scene.
-     * @param value - The fog start distance.
-     */
-    set fogStart(value: number) {
-        this._fogStart = value;
-        if (this.scene) {
-            this.scene.fog.start = value;
-        }
-    }
-
-    /**
-     * Gets the fog start distance of the scene.
-     * @returns The fog start distance.
-     */
-    get fogStart() {
-        return this._fogStart;
-    }
-
-    /**
-     * Sets the fog end distance of the scene.
-     * @param value - The fog end distance.
-     */
-    set fogEnd(value: number) {
-        this._fogEnd = value;
-        if (this.scene) {
-            this.scene.fog.end = value;
-        }
-    }
-
-    /**
-     * Gets the fog end distance of the scene.
-     * @returns The fog end distance.
-     */
-    get fogEnd() {
-        return this._fogEnd;
-    }
-
-    /**
-     * Sets the gravity of the scene.
-     * @param value - The gravity.
-     */
-    set gravity(value: Vec3) {
-        this._gravity = value;
-        if (this.scene) {
-            const appElement = this.parentElement as AppElement;
-            appElement.app!.systems.rigidbody!.gravity.copy(value);
-        }
-    }
-
-    /**
-     * Gets the gravity of the scene.
-     * @returns The gravity.
-     */
-    get gravity() {
-        return this._gravity;
-    }
-
-    static get observedAttributes() {
-        return ['fog', 'fog-color', 'fog-density', 'fog-start', 'fog-end', 'gravity'];
-    }
-
-    attributeChangedCallback(name: string, _oldValue: string, newValue: string) {
-        switch (name) {
-            case 'fog':
-                this.fog = newValue;
-                break;
-            case 'fog-color':
-                this.fogColor = parseColor(newValue);
-                break;
-            case 'fog-density':
-                this.fogDensity = parseFloat(newValue);
-                break;
-            case 'fog-start':
-                this.fogStart = parseFloat(newValue);
-                break;
-            case 'fog-end':
-                this.fogEnd = parseFloat(newValue);
-                break;
-            case 'gravity':
-                this.gravity = parseVec3(newValue);
-                break;
-            // ... handle other attributes as well
-        }
-    }
-}
-
-customElements.define('pc-scene', SceneElement);
-
-export { SceneElement };
+import { Color, Scene, Vec3 } from 'playcanvas';
+
+import { AppElement } from './app';
+import { AsyncElement } from './async-element';
+import { parseColor, parseVec3 } from './utils';
+
+/**
+ * The SceneElement interface provides properties and methods for manipulating
+ * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-scene/ | `<pc-scene>`} elements.
+ * The SceneElement interface also inherits the properties and methods of the
+ * {@link HTMLElement} interface.
+ */
+class SceneElement extends AsyncElement {
+    /**
+     * The fog type of the scene.
+     */
+    private _fog = 'none'; // possible values: 'none', 'linear', 'exp', 'exp2'
+
+    /**
+     * The color of the fog.
+     */
+    private _fogColor = new Color(1, 1, 1);
+
+    /**
+     * The density of the fog.
+     */
+    private _fogDensity = 0;
+
+    /**
+     * The start distance of the fog.
+     */
+    private _fogStart = 0;
+
+    /**
+     * The end distance of the fog.
+     */
+    private _fogEnd = 1000;
+
+    /**
+     * The gravity of the scene.
+     */
+    private _gravity = new Vec3(0, -9.81, 0);
+
+    /**
+     * The PlayCanvas scene instance.
+     */
+    scene: Scene | null = null;
+
+    async connectedCallback() {
+        await this.closestApp?.ready();
+
+        this.scene = this.closestApp!.app!.scene;
+        this.updateSceneSettings();
+
+        this._onReady();
+    }
+
+    updateSceneSettings() {
+        if (this.scene) {
+            this.scene.fog.type = this._fog;
+            this.scene.fog.color = this._fogColor;
+            this.scene.fog.density = this._fogDensity;
+            this.scene.fog.start = this._fogStart;
+            this.scene.fog.end = this._fogEnd;
+
+            const appElement = this.parentElement as AppElement;
+            appElement.app!.systems.rigidbody!.gravity.copy(this._gravity);
+        }
+    }
+
+    /**
+     * Sets the fog type of the scene.
+     * @param value - The fog type.
+     */
+    set fog(value) {
+        this._fog = value;
+        if (this.scene) {
+            this.scene.fog.type = value;
+        }
+    }
+
+    /**
+     * Gets the fog type of the scene.
+     * @returns The fog type.
+     */
+    get fog() {
+        return this._fog;
+    }
+
+    /**
+     * Sets the fog color of the scene.
+     * @param value - The fog color.
+     */
+    set fogColor(value: Color) {
+        this._fogColor = value;
+        if (this.scene) {
+            this.scene.fog.color = value;
+        }
+    }
+
+    /**
+     * Gets the fog color of the scene.
+     * @returns The fog color.
+     */
+    get fogColor() {
+        return this._fogColor;
+    }
+
+    /**
+     * Sets the fog density of the scene.
+     * @param value - The fog density.
+     */
+    set fogDensity(value: number) {
+        this._fogDensity = value;
+        if (this.scene) {
+            this.scene.fog.density = value;
+        }
+    }
+
+    /**
+     * Gets the fog density of the scene.
+     * @returns The fog density.
+     */
+    get fogDensity() {
+        return this._fogDensity;
+    }
+
+    /**
+     * Sets the fog start distance of the scene.
+     * @param value - The fog start distance.
+     */
+    set fogStart(value: number) {
+        this._fogStart = value;
+        if (this.scene) {
+            this.scene.fog.start = value;
+        }
+    }
+
+    /**
+     * Gets the fog start distance of the scene.
+     * @returns The fog start distance.
+     */
+    get fogStart() {
+        return this._fogStart;
+    }
+
+    /**
+     * Sets the fog end distance of the scene.
+     * @param value - The fog end distance.
+     */
+    set fogEnd(value: number) {
+        this._fogEnd = value;
+        if (this.scene) {
+            this.scene.fog.end = value;
+        }
+    }
+
+    /**
+     * Gets the fog end distance of the scene.
+     * @returns The fog end distance.
+     */
+    get fogEnd() {
+        return this._fogEnd;
+    }
+
+    /**
+     * Sets the gravity of the scene.
+     * @param value - The gravity.
+     */
+    set gravity(value: Vec3) {
+        this._gravity = value;
+        if (this.scene) {
+            const appElement = this.parentElement as AppElement;
+            appElement.app!.systems.rigidbody!.gravity.copy(value);
+        }
+    }
+
+    /**
+     * Gets the gravity of the scene.
+     * @returns The gravity.
+     */
+    get gravity() {
+        return this._gravity;
+    }
+
+    static get observedAttributes() {
+        return ['fog', 'fog-color', 'fog-density', 'fog-start', 'fog-end', 'gravity'];
+    }
+
+    attributeChangedCallback(name: string, _oldValue: string, newValue: string) {
+        switch (name) {
+            case 'fog':
+                this.fog = newValue;
+                break;
+            case 'fog-color':
+                this.fogColor = parseColor(newValue);
+                break;
+            case 'fog-density':
+                this.fogDensity = parseFloat(newValue);
+                break;
+            case 'fog-start':
+                this.fogStart = parseFloat(newValue);
+                break;
+            case 'fog-end':
+                this.fogEnd = parseFloat(newValue);
+                break;
+            case 'gravity':
+                this.gravity = parseVec3(newValue);
+                break;
+            // ... handle other attributes as well
+        }
+    }
+}
+
+customElements.define('pc-scene', SceneElement);
+
+export { SceneElement };