@playcanvas/web-components 0.1.12 → 0.2.0

package/dist/pwc.mjs

@@ -1,4 +1,4 @@
-import { basisInitialize, WasmModule, Application, Keyboard, Mouse, FILLMODE_FILL_WINDOW, RESOLUTION_AUTO, Picker, Color, Quat, Vec2, Vec3, Vec4, Entity, Asset, GAMMA_SRGB, GAMMA_NONE, XRTYPE_VR, PROJECTION_ORTHOGRAPHIC, PROJECTION_PERSPECTIVE, TONEMAP_NONE, TONEMAP_LINEAR, TONEMAP_FILMIC, TONEMAP_HEJL, TONEMAP_ACES, TONEMAP_ACES2, TONEMAP_NEUTRAL, SHADOW_PCF3_32F, SHADOW_PCF1_16F, SHADOW_PCF1_32F, SHADOW_PCF3_16F, SHADOW_PCF5_16F, SHADOW_PCF5_32F, SHADOW_VSM_16F, SHADOW_VSM_32F, SHADOW_PCSS_32F, StandardMaterial, SCALEMODE_BLEND, SCALEMODE_NONE, EnvLighting, LAYERID_SKYBOX } from 'playcanvas';
+import { basisInitialize, WasmModule, Application, Mouse, Keyboard, FILLMODE_FILL_WINDOW, RESOLUTION_AUTO, Picker, Vec3, Vec4, Color, Quat, Vec2, Entity, Asset, GAMMA_SRGB, GAMMA_NONE, XRTYPE_VR, PROJECTION_ORTHOGRAPHIC, PROJECTION_PERSPECTIVE, TONEMAP_NONE, TONEMAP_LINEAR, TONEMAP_FILMIC, TONEMAP_HEJL, TONEMAP_ACES, TONEMAP_ACES2, TONEMAP_NEUTRAL, SHADOW_PCF3_32F, SHADOW_PCF1_16F, SHADOW_PCF1_32F, SHADOW_PCF3_16F, SHADOW_PCF5_16F, SHADOW_PCF5_32F, SHADOW_VSM_16F, SHADOW_VSM_32F, SHADOW_PCSS_32F, StandardMaterial, SCALEMODE_BLEND, SCALEMODE_NONE, EnvLighting, LAYERID_SKYBOX } from 'playcanvas';
 
 /**
  * Base class for all PlayCanvas Web Components that initialize asynchronously.
@@ -1001,7 +1001,7 @@ const extToType = new Map([
 class AssetElement extends HTMLElement {
     constructor() {
         super(...arguments);
-        this._preload = false;
+        this._lazy = false;
         /**
          * The asset that is loaded.
          */
@@ -1025,7 +1025,7 @@ class AssetElement extends HTMLElement {
             return;
         }
         this.asset = new Asset(id, type, { url: src });
-        this.asset.preload = this.preload;
+        this.asset.preload = !this._lazy;
     }
     destroyAsset() {
         if (this.asset) {
@@ -1034,32 +1034,32 @@ 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) {
-        this._preload = value;
+    set lazy(value) {
+        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) {
         const assetElement = document.querySelector(`pc-asset[id="${id}"]`);
         return assetElement === null || assetElement === undefined ? undefined : assetElement.asset;
     }
     static get observedAttributes() {
-        return ['preload'];
+        return ['lazy'];
     }
     attributeChangedCallback(name, _oldValue, _newValue) {
-        if (name === 'preload') {
-            this.preload = this.hasAttribute('preload');
+        if (name === 'lazy') {
+            this.lazy = this.hasAttribute('lazy');
         }
     }
 }
@@ -1233,6 +1233,11 @@ class CameraComponentElement extends ComponentElement {
         const xrManager = (_a = this.component) === null || _a === undefined ? undefined : _a.system.app.xr;
         return xrManager && xrManager.supported && xrManager.isAvailable(XRTYPE_VR);
     }
+    /**
+     * Starts the camera in XR mode.
+     * @param type - The type of XR mode to start.
+     * @param space - The space to start the camera in.
+     */
     startXr(type, space) {
         if (this.component && this.xrAvailable) {
             this.component.startXr(type, space, {
@@ -1243,6 +1248,9 @@ class CameraComponentElement extends ComponentElement {
             });
         }
     }
+    /**
+     * Ends the camera's XR mode.
+     */
     endXr() {
         if (this.component) {
             this.component.endXr();
@@ -3118,62 +3126,116 @@ class ScriptComponentElement extends ComponentElement {
             }
         });
     }
-    applyAttributes(script, attributes) {
-        try {
-            const attributesObject = attributes ? JSON.parse(attributes) : {};
-            const applyValue = (target, key, value) => {
-                // Handle asset references
-                if (typeof value === 'string' && value.startsWith('asset:')) {
-                    const assetId = value.slice(6);
-                    const assetElement = document.querySelector(`pc-asset#${assetId}`);
-                    if (assetElement) {
-                        target[key] = assetElement.asset;
-                        return;
-                    }
+    /**
+     * Recursively converts raw attribute data into proper PlayCanvas types. Supported conversions:
+     * - "asset:assetId" → resolves to an Asset instance
+     * - "entity:entityId" → resolves to an Entity instance
+     * - "vec2:1,2" → new Vec2(1,2)
+     * - "vec3:1,2,3" → new Vec3(1,2,3)
+     * - "vec4:1,2,3,4" → new Vec4(1,2,3,4)
+     * - "color:1,0.5,0.5,1" → new Color(1,0.5,0.5,1)
+     * @param item - The item to convert.
+     * @returns The converted item.
+     */
+    convertAttributes(item) {
+        if (typeof item === 'string') {
+            if (item.startsWith('asset:')) {
+                const assetId = item.slice(6);
+                const assetElement = document.querySelector(`pc-asset#${assetId}`);
+                if (assetElement) {
+                    return assetElement.asset;
                 }
-                // Handle arrays
-                if (value && typeof value === 'object' && Array.isArray(value)) {
-                    // If it's an array of objects, recursively apply to each object
-                    if (value.length > 0 && typeof value[0] === 'object') {
-                        target[key] = value.map((item) => {
-                            const obj = {};
-                            for (const itemKey in item) {
-                                applyValue(obj, itemKey, item[itemKey]);
-                            }
-                            return obj;
-                        });
-                        return;
-                    }
-                    // Handle vectors
-                    if (value.length === 2 && typeof value[0] === 'number') {
-                        target[key] = new Vec2(value[0], value[1]);
-                        return;
-                    }
-                    if (value.length === 3 && typeof value[0] === 'number') {
-                        target[key] = new Vec3(value[0], value[1], value[2]);
-                        return;
-                    }
-                    if (value.length === 4 && typeof value[0] === 'number') {
-                        target[key] = new Vec4(value[0], value[1], value[2], value[3]);
-                        return;
-                    }
+            }
+            if (item.startsWith('entity:')) {
+                const entityId = item.slice(7);
+                const entityElement = document.querySelector(`pc-entity[name="${entityId}"]`);
+                if (entityElement) {
+                    return entityElement.entity;
                 }
-                // Handle nested objects (non-array)
-                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]);
-                    }
+            }
+            if (item.startsWith('vec2:')) {
+                const parts = item.slice(5).split(',').map(Number);
+                if (parts.length === 2 && parts.every(v => !isNaN(v))) {
+                    return new Vec2(parts[0], parts[1]);
                 }
-                else {
-                    target[key] = value;
+            }
+            if (item.startsWith('vec3:')) {
+                const parts = item.slice(5).split(',').map(Number);
+                if (parts.length === 3 && parts.every(v => !isNaN(v))) {
+                    return new Vec3(parts[0], parts[1], parts[2]);
+                }
+            }
+            if (item.startsWith('vec4:')) {
+                const parts = item.slice(5).split(',').map(Number);
+                if (parts.length === 4 && parts.every(v => !isNaN(v))) {
+                    return new Vec4(parts[0], parts[1], parts[2], parts[3]);
+                }
+            }
+            if (item.startsWith('color:')) {
+                const parts = item.slice(6).split(',').map(Number);
+                if (parts.length === 4 && parts.every(v => !isNaN(v))) {
+                    return new Color(parts[0], parts[1], parts[2], parts[3]);
                 }
-            };
-            for (const key in attributesObject) {
-                applyValue(script, key, attributesObject[key]);
             }
+            return item;
+        }
+        if (Array.isArray(item)) {
+            // If it's an array of objects, convert each element individually.
+            if (item.length > 0 && typeof item[0] === 'object') {
+                return item.map((el) => this.convertAttributes(el));
+            }
+            // Otherwise, leave the numeric array unchanged but process each element.
+            return item.map((el) => this.convertAttributes(el));
+        }
+        if (item && typeof item === 'object') {
+            const result = {};
+            for (const key in item) {
+                result[key] = this.convertAttributes(item[key]);
+            }
+            return result;
+        }
+        return item;
+    }
+    /**
+     * Preprocess the attributes object by converting its values.
+     * @param attrs - The attributes object to preprocess.
+     * @returns The preprocessed attributes object.
+     */
+    preprocessAttributes(attrs) {
+        return this.convertAttributes(attrs);
+    }
+    /**
+     * Recursively merge properties from source into target.
+     * @param target - The target object to merge into.
+     * @param source - The source object to merge from.
+     * @returns The merged object.
+     */
+    mergeDeep(target, source) {
+        for (const key in source) {
+            if (source[key] &&
+                typeof source[key] === 'object' &&
+                !Array.isArray(source[key])) {
+                if (!target[key] || typeof target[key] !== 'object') {
+                    target[key] = {};
+                }
+                this.mergeDeep(target[key], source[key]);
+            }
+            else {
+                target[key] = source[key];
+            }
+        }
+        return target;
+    }
+    /**
+     * Update script attributes by merging preprocessed values into the script.
+     * @param script - The script to update.
+     * @param attributes - The attributes to merge into the script.
+     */
+    applyAttributes(script, attributes) {
+        try {
+            const attributesObject = attributes ? JSON.parse(attributes) : {};
+            const converted = this.convertAttributes(attributesObject);
+            this.mergeDeep(script, converted);
         }
         catch (error) {
             console.error(`Error parsing attributes JSON string ${attributes}:`, error);
@@ -3202,10 +3264,20 @@ class ScriptComponentElement extends ComponentElement {
     createScript(name, attributes) {
         if (!this.component)
             return null;
-        this.component.on(`create:${name}`, (script) => {
-            this.applyAttributes(script, attributes);
+        let attributesObject = {};
+        if (attributes) {
+            try {
+                attributesObject = JSON.parse(attributes);
+                // Preprocess attributes: convert arrays or strings into vectors, colors, asset references, etc.
+                attributesObject = this.preprocessAttributes(attributesObject);
+            }
+            catch (error) {
+                console.error(`Error parsing attributes JSON string ${attributes}:`, error);
+            }
+        }
+        return this.component.create(name, {
+            properties: attributesObject
         });
-        return this.component.create(name);
     }
     destroyScript(name) {
         if (!this.component)