@playcanvas/web-components 0.1.5 → 0.1.7

package/src/colors.ts

@@ -0,0 +1,150 @@
+export const CSS_COLORS: Record<string, string> = {
+    aliceblue: '#f0f8ff',
+    antiquewhite: '#faebd7',
+    aqua: '#00ffff',
+    aquamarine: '#7fffd4',
+    azure: '#f0ffff',
+    beige: '#f5f5dc',
+    bisque: '#ffe4c4',
+    black: '#000000',
+    blanchedalmond: '#ffebcd',
+    blue: '#0000ff',
+    blueviolet: '#8a2be2',
+    brown: '#a52a2a',
+    burlywood: '#deb887',
+    cadetblue: '#5f9ea0',
+    chartreuse: '#7fff00',
+    chocolate: '#d2691e',
+    coral: '#ff7f50',
+    cornflowerblue: '#6495ed',
+    cornsilk: '#fff8dc',
+    crimson: '#dc143c',
+    cyan: '#00ffff',
+    darkblue: '#00008b',
+    darkcyan: '#008b8b',
+    darkgoldenrod: '#b8860b',
+    darkgray: '#a9a9a9',
+    darkgreen: '#006400',
+    darkgrey: '#a9a9a9',
+    darkkhaki: '#bdb76b',
+    darkmagenta: '#8b008b',
+    darkolivegreen: '#556b2f',
+    darkorange: '#ff8c00',
+    darkorchid: '#9932cc',
+    darkred: '#8b0000',
+    darksalmon: '#e9967a',
+    darkseagreen: '#8fbc8f',
+    darkslateblue: '#483d8b',
+    darkslategray: '#2f4f4f',
+    darkslategrey: '#2f4f4f',
+    darkturquoise: '#00ced1',
+    darkviolet: '#9400d3',
+    deeppink: '#ff1493',
+    deepskyblue: '#00bfff',
+    dimgray: '#696969',
+    dimgrey: '#696969',
+    dodgerblue: '#1e90ff',
+    firebrick: '#b22222',
+    floralwhite: '#fffaf0',
+    forestgreen: '#228b22',
+    fuchsia: '#ff00ff',
+    gainsboro: '#dcdcdc',
+    ghostwhite: '#f8f8ff',
+    gold: '#ffd700',
+    goldenrod: '#daa520',
+    gray: '#808080',
+    green: '#008000',
+    greenyellow: '#adff2f',
+    grey: '#808080',
+    honeydew: '#f0fff0',
+    hotpink: '#ff69b4',
+    indianred: '#cd5c5c',
+    indigo: '#4b0082',
+    ivory: '#fffff0',
+    khaki: '#f0e68c',
+    lavender: '#e6e6fa',
+    lavenderblush: '#fff0f5',
+    lawngreen: '#7cfc00',
+    lemonchiffon: '#fffacd',
+    lightblue: '#add8e6',
+    lightcoral: '#f08080',
+    lightcyan: '#e0ffff',
+    lightgoldenrodyellow: '#fafad2',
+    lightgray: '#d3d3d3',
+    lightgreen: '#90ee90',
+    lightgrey: '#d3d3d3',
+    lightpink: '#ffb6c1',
+    lightsalmon: '#ffa07a',
+    lightseagreen: '#20b2aa',
+    lightskyblue: '#87cefa',
+    lightslategray: '#778899',
+    lightslategrey: '#778899',
+    lightsteelblue: '#b0c4de',
+    lightyellow: '#ffffe0',
+    lime: '#00ff00',
+    limegreen: '#32cd32',
+    linen: '#faf0e6',
+    magenta: '#ff00ff',
+    maroon: '#800000',
+    mediumaquamarine: '#66cdaa',
+    mediumblue: '#0000cd',
+    mediumorchid: '#ba55d3',
+    mediumpurple: '#9370db',
+    mediumseagreen: '#3cb371',
+    mediumslateblue: '#7b68ee',
+    mediumspringgreen: '#00fa9a',
+    mediumturquoise: '#48d1cc',
+    mediumvioletred: '#c71585',
+    midnightblue: '#191970',
+    mintcream: '#f5fffa',
+    mistyrose: '#ffe4e1',
+    moccasin: '#ffe4b5',
+    navajowhite: '#ffdead',
+    navy: '#000080',
+    oldlace: '#fdf5e6',
+    olive: '#808000',
+    olivedrab: '#6b8e23',
+    orange: '#ffa500',
+    orangered: '#ff4500',
+    orchid: '#da70d6',
+    palegoldenrod: '#eee8aa',
+    palegreen: '#98fb98',
+    paleturquoise: '#afeeee',
+    palevioletred: '#db7093',
+    papayawhip: '#ffefd5',
+    peachpuff: '#ffdab9',
+    peru: '#cd853f',
+    pink: '#ffc0cb',
+    plum: '#dda0dd',
+    powderblue: '#b0e0e6',
+    purple: '#800080',
+    rebeccapurple: '#663399',
+    red: '#ff0000',
+    rosybrown: '#bc8f8f',
+    royalblue: '#4169e1',
+    saddlebrown: '#8b4513',
+    salmon: '#fa8072',
+    sandybrown: '#f4a460',
+    seagreen: '#2e8b57',
+    seashell: '#fff5ee',
+    sienna: '#a0522d',
+    silver: '#c0c0c0',
+    skyblue: '#87ceeb',
+    slateblue: '#6a5acd',
+    slategray: '#708090',
+    slategrey: '#708090',
+    snow: '#fffafa',
+    springgreen: '#00ff7f',
+    steelblue: '#4682b4',
+    tan: '#d2b48c',
+    teal: '#008080',
+    thistle: '#d8bfd8',
+    tomato: '#ff6347',
+    turquoise: '#40e0d0',
+    violet: '#ee82ee',
+    wheat: '#f5deb3',
+    white: '#ffffff',
+    whitesmoke: '#f5f5f5',
+    yellow: '#ffff00',
+    yellowgreen: '#9acd32'
+};

package/src/components/script-component.ts

@@ -1,8 +1,12 @@
-import { ScriptComponent, ScriptType } from 'playcanvas';
+import { ScriptComponent, Script, Vec2, Vec3, Vec4 } from 'playcanvas';
 
 import { ComponentElement } from './component';
 import { ScriptElement } from './script';
 
+const tmpV2 = new Vec2();
+const tmpV3 = new Vec3();
+const tmpV4 = new Vec4();
+
 // Add these interfaces at the top of the file, after the imports
 interface ScriptAttributesChangeEvent extends CustomEvent {
     detail: { attributes: any };
@@ -53,11 +57,43 @@ class ScriptComponentElement extends ComponentElement {
         });
     }
 
-    private applyAttributes(script: ScriptType, attributes: string | null) {
+    private applyAttributes(script: any, attributes: string | null) {
         try {
-            // Parse the attributes string into an object and set them on the script
             const attributesObject = attributes ? JSON.parse(attributes) : {};
-            Object.assign(script, attributesObject);
+
+            const applyValue = (target: any, key: string, value: any) => {
+                // Handle vectors
+                if (Array.isArray(value)) {
+                    if (target[key] instanceof Vec2) {
+                        target[key] = tmpV2.set(value[0], value[1]);
+                        return;
+                    }
+                    if (target[key] instanceof Vec3) {
+                        target[key] = tmpV3.set(value[0], value[1], value[2]);
+                        return;
+                    }
+                    if (target[key] instanceof Vec4) {
+                        target[key] = tmpV4.set(value[0], value[1], value[2], value[3]);
+                        return;
+                    }
+                }
+
+                // Handle nested objects
+                if (value && typeof value === 'object' && !Array.isArray(value)) {
+                    if (!target[key] || typeof target[key] !== 'object') {
+                        target[key] = {};
+                    }
+                    for (const nestedKey in value) {
+                        applyValue(target[key], nestedKey, value[nestedKey]);
+                    }
+                } else {
+                    target[key] = value;
+                }
+            };
+
+            for (const key in attributesObject) {
+                applyValue(script, key, attributesObject[key]);
+            }
         } catch (error) {
             console.error(`Error parsing attributes JSON string ${attributes}:`, error);
         }
@@ -85,7 +121,7 @@ class ScriptComponentElement extends ComponentElement {
         }
     }
 
-    private createScript(name: string, attributes: string | null): ScriptType | null {
+    private createScript(name: string, attributes: string | null): Script | null {
         if (!this.component) return null;
 
         this.component.on(`create:${name}`, (script) => {

package/src/components/sound-component.ts

@@ -8,10 +8,18 @@ import { ComponentElement } from './component';
  * @category Components
  */
 class SoundComponentElement extends ComponentElement {
+    private _distanceModel: 'exponential' | 'inverse' | 'linear' = 'linear';
+
+    private _maxDistance: number = 10000;
+
     private _pitch: number = 1;
 
     private _positional: boolean = false;
 
+    private _refDistance: number = 1;
+
+    private _rollOffFactor: number = 1;
+
     private _volume: number = 1;
 
     constructor() {
@@ -20,8 +28,12 @@ class SoundComponentElement extends ComponentElement {
 
     getInitialComponentData() {
         return {
+            distanceModel: this._distanceModel,
+            maxDistance: this._maxDistance,
             pitch: this._pitch,
             positional: this._positional,
+            refDistance: this._refDistance,
+            rollOffFactor: this._rollOffFactor,
             volume: this._volume
         };
     }
@@ -34,6 +46,44 @@ class SoundComponentElement extends ComponentElement {
         return super.component as SoundComponent | null;
     }
 
+    /**
+     * Sets which algorithm to use to reduce the volume of the sound as it moves away from the listener.
+     * @param value - The distance model.
+     */
+    set distanceModel(value: 'exponential' | 'inverse' | 'linear') {
+        this._distanceModel = value;
+        if (this.component) {
+            this.component.distanceModel = value;
+        }
+    }
+
+    /**
+     * Gets which algorithm to use to reduce the volume of the sound as it moves away from the listener.
+     * @returns The distance model.
+     */
+    get distanceModel(): 'exponential' | 'inverse' | 'linear' {
+        return this._distanceModel;
+    }
+
+    /**
+     * Sets the maximum distance from the listener at which audio falloff stops.
+     * @param value - The max distance.
+     */
+    set maxDistance(value: number) {
+        this._maxDistance = value;
+        if (this.component) {
+            this.component.maxDistance = value;
+        }
+    }
+
+    /**
+     * Gets the maximum distance from the listener at which audio falloff stops.
+     * @returns The max distance.
+     */
+    get maxDistance() {
+        return this._maxDistance;
+    }
+
     /**
      * Sets the pitch of the sound.
      * @param value - The pitch.
@@ -72,6 +122,44 @@ class SoundComponentElement extends ComponentElement {
         return this._positional;
     }
 
+    /**
+     * Sets the reference distance for reducing volume as the sound source moves further from the listener. Defaults to 1.
+     * @param value - The ref distance.
+     */
+    set refDistance(value: number) {
+        this._refDistance = value;
+        if (this.component) {
+            this.component.refDistance = value;
+        }
+    }
+
+    /**
+     * Gets the reference distance for reducing volume as the sound source moves further from the listener.
+     * @returns The ref distance.
+     */
+    get refDistance() {
+        return this._refDistance;
+    }
+
+    /**
+     * Sets the factor used in the falloff equation. Defaults to 1.
+     * @param value - The roll-off factor.
+     */
+    set rollOffFactor(value: number) {
+        this._rollOffFactor = value;
+        if (this.component) {
+            this.component.rollOffFactor = value;
+        }
+    }
+
+    /**
+     * Gets the factor used in the falloff equation.
+     * @returns The roll-off factor.
+     */
+    get rollOffFactor() {
+        return this._rollOffFactor;
+    }
+
     /**
      * Sets the volume of the sound.
      * @param value - The volume.
@@ -92,19 +180,40 @@ class SoundComponentElement extends ComponentElement {
     }
 
     static get observedAttributes() {
-        return [...super.observedAttributes, 'pitch', 'positional', 'volume'];
+        return [
+            ...super.observedAttributes,
+            'distance-model',
+            'max-distance',
+            'pitch',
+            'positional',
+            'ref-distance',
+            'roll-off-factor',
+            'volume'
+        ];
     }
 
     attributeChangedCallback(name: string, _oldValue: string, newValue: string) {
         super.attributeChangedCallback(name, _oldValue, newValue);
 
         switch (name) {
+            case 'distance-model':
+                this.distanceModel = newValue as 'exponential' | 'inverse' | 'linear';
+                break;
+            case 'max-distance':
+                this.maxDistance = parseFloat(newValue);
+                break;
             case 'pitch':
                 this.pitch = parseFloat(newValue);
                 break;
             case 'positional':
                 this.positional = this.hasAttribute('positional');
                 break;
+            case 'ref-distance':
+                this.refDistance = parseFloat(newValue);
+                break;
+            case 'roll-off-factor':
+                this.rollOffFactor = parseFloat(newValue);
+                break;
             case 'volume':
                 this.volume = parseFloat(newValue);
                 break;

package/src/model.ts

@@ -1,3 +1,5 @@
+import { ContainerResource, Entity } from 'playcanvas';
+
 import { AssetElement } from './asset';
 import { AsyncElement } from './async-element';
 
@@ -7,51 +9,77 @@ import { AsyncElement } from './async-element';
 class ModelElement extends AsyncElement {
     private _asset: string = '';
 
-    async connectedCallback() {
-        await this.closestApp?.ready();
-
-        const asset = this.getAttribute('asset');
-        if (asset) {
-            this.asset = asset;
-        }
+    private _entity: Entity | null = null;
 
+    connectedCallback() {
+        this._loadModel();
         this._onReady();
     }
 
-    _loadModel() {
-        const asset = AssetElement.get(this._asset);
-        if (!asset) {
-            return;
-        }
-        const entity = asset.resource.instantiateRenderEntity();
+    disconnectedCallback() {
+        this._unloadModel();
+    }
+
+    private _instantiate(container: ContainerResource) {
+        this._entity = container.instantiateRenderEntity();
 
-        if (asset.resource.animations.length > 0) {
-            entity.addComponent('anim');
-            entity.anim.assignAnimation('animation', asset.resource.animations[0].resource);
+        // @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(entity);
+                parentEntityElement.entity!.addChild(this._entity!);
             });
         } else {
             const appElement = this.closestApp;
             if (appElement) {
                 appElement.ready().then(() => {
-                    appElement.app!.root.addChild(entity);
+                    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);
+        } else {
+            asset.once('load', () => {
+                this._instantiate(asset.resource);
+            });
+            app!.assets.load(asset);
+        }
+    }
+
+    private _unloadModel() {
+        this._entity?.destroy();
+        this._entity = null;
+    }
+
     /**
      * Sets the asset ID of the model.
      * @param value - The asset ID.
      */
     set asset(value: string) {
         this._asset = value;
-        this._loadModel();
+        if (this.isConnected) {
+            this._loadModel();
+        }
     }
 
     /**

package/src/module.ts

@@ -1,4 +1,4 @@
-import { WasmModule } from 'playcanvas';
+import { basisInitialize, WasmModule } from 'playcanvas';
 
 class ModuleElement extends HTMLElement {
     private loadPromise: Promise<void>;
@@ -14,15 +14,23 @@ class ModuleElement extends HTMLElement {
         const wasm = this.getAttribute('wasm')!;
         const fallback = this.getAttribute('fallback')!;
 
-        WasmModule.setConfig(name, {
-            glueUrl: glue,
-            wasmUrl: wasm,
-            fallbackUrl: fallback
-        });
-
-        await new Promise<void>((resolve) => {
-            WasmModule.getInstance(name, () => resolve());
-        });
+        if (name === 'Basis') {
+            basisInitialize({
+                glueUrl: glue,
+                wasmUrl: wasm,
+                fallbackUrl: fallback
+            });
+        } else {
+            WasmModule.setConfig(name, {
+                glueUrl: glue,
+                wasmUrl: wasm,
+                fallbackUrl: fallback
+            });
+
+            await new Promise<void>((resolve) => {
+                WasmModule.getInstance(name, () => resolve());
+            });
+        }
     }
 
     public getLoadPromise(): Promise<void> {