@playcanvas/web-components 0.3.0 → 0.6.0

package/src/components/script-component.ts

@@ -1,270 +1,270 @@
-import { Color, ScriptComponent, Script, Vec2, Vec3, Vec4 } from 'playcanvas';
-
-import { AssetElement } from '../asset';
-import { ComponentElement } from './component';
-import { EntityElement } from '../entity';
-import { ScriptElement } from './script';
-
-// Add these interfaces at the top of the file, after the imports
-interface ScriptAttributesChangeEvent extends CustomEvent {
-    detail: { attributes: any };
-}
-
-interface ScriptEnableChangeEvent extends CustomEvent {
-    detail: { enabled: boolean };
-}
-
-// Add this interface before the ScriptComponentElement class
-declare global {
-    interface HTMLElementEventMap {
-        'scriptattributeschange': ScriptAttributesChangeEvent;
-        'scriptenablechange': ScriptEnableChangeEvent;
-    }
-}
-
-/**
- * The ScriptComponentElement interface provides properties and methods for manipulating
- * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-scripts/ | `<pc-scripts>`} elements.
- * The ScriptComponentElement interface also inherits the properties and methods of the
- * {@link HTMLElement} interface.
- *
- * @category Components
- */
-class ScriptComponentElement extends ComponentElement {
-    private observer: MutationObserver;
-
-    /** @ignore */
-    constructor() {
-        super('script');
-
-        // Create mutation observer to watch for child script elements
-        this.observer = new MutationObserver(this.handleMutations.bind(this));
-        this.observer.observe(this, {
-            childList: true
-        });
-
-        // Listen for script attribute and enable changes
-        this.addEventListener('scriptattributeschange', this.handleScriptAttributesChange.bind(this));
-        this.addEventListener('scriptenablechange', this.handleScriptEnableChange.bind(this));
-    }
-
-    initComponent() {
-        // Handle initial script elements
-        this.querySelectorAll<ScriptElement>(':scope > pc-script').forEach((scriptElement) => {
-            const scriptName = scriptElement.getAttribute('name');
-            const attributes = scriptElement.getAttribute('attributes');
-            if (scriptName) {
-                this.createScript(scriptName, attributes);
-            }
-        });
-    }
-
-    /**
-     * 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.
-     */
-    private convertAttributes(item: any): any {
-        if (typeof item === 'string') {
-            if (item.startsWith('asset:')) {
-                const assetId = item.slice(6);
-                const assetElement = document.querySelector(`pc-asset#${assetId}`) as AssetElement;
-                if (assetElement) {
-                    return assetElement.asset;
-                }
-            }
-            if (item.startsWith('entity:')) {
-                const entityId = item.slice(7);
-                const entityElement = document.querySelector(`pc-entity[name="${entityId}"]`) as EntityElement;
-                if (entityElement) {
-                    return entityElement.entity;
-                }
-            }
-            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]);
-                }
-            }
-            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]);
-                }
-            }
-            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: any) => this.convertAttributes(el));
-            }
-            // Otherwise, leave the numeric array unchanged but process each element.
-            return item.map((el: any) => this.convertAttributes(el));
-        }
-
-        if (item && typeof item === 'object') {
-            const result: any = {};
-            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.
-     */
-    private preprocessAttributes(attrs: any): any {
-        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.
-     */
-    private mergeDeep(target: any, source: any): any {
-        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.
-     */
-    private applyAttributes(script: any, attributes: string | null) {
-        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);
-        }
-    }
-
-    private handleScriptAttributesChange(event: ScriptAttributesChangeEvent) {
-        const scriptElement = event.target as ScriptElement;
-        const scriptName = scriptElement.getAttribute('name');
-        if (!scriptName || !this.component) return;
-
-        const script = this.component.get(scriptName);
-        if (script) {
-            this.applyAttributes(script, event.detail.attributes);
-        }
-    }
-
-    private handleScriptEnableChange(event: ScriptEnableChangeEvent) {
-        const scriptElement = event.target as ScriptElement;
-        const scriptName = scriptElement.getAttribute('name');
-        if (!scriptName || !this.component) return;
-
-        const script = this.component.get(scriptName);
-        if (script) {
-            script.enabled = event.detail.enabled;
-        }
-    }
-
-    private createScript(name: string, attributes: string | null): Script | null {
-        if (!this.component) return null;
-
-        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
-        });
-    }
-
-    private destroyScript(name: string): void {
-        if (!this.component) return;
-        this.component.destroy(name);
-    }
-
-    private handleMutations(mutations: MutationRecord[]) {
-        for (const mutation of mutations) {
-            // Handle added nodes
-            mutation.addedNodes.forEach((node) => {
-                if (node instanceof HTMLElement && node.tagName.toLowerCase() === 'pc-script') {
-                    const scriptName = node.getAttribute('name');
-                    const attributes = node.getAttribute('attributes');
-                    if (scriptName) {
-                        this.createScript(scriptName, attributes);
-                    }
-                }
-            });
-
-            // Handle removed nodes
-            mutation.removedNodes.forEach((node) => {
-                if (node instanceof HTMLElement && node.tagName.toLowerCase() === 'pc-script') {
-                    const scriptName = node.getAttribute('name');
-                    if (scriptName) {
-                        this.destroyScript(scriptName);
-                    }
-                }
-            });
-        }
-    }
-
-    disconnectedCallback() {
-        this.observer.disconnect();
-        super.disconnectedCallback?.();
-    }
-
-    /**
-     * Gets the underlying PlayCanvas script component.
-     * @returns The script component.
-     */
-    get component(): ScriptComponent | null {
-        return super.component as ScriptComponent | null;
-    }
-}
-
-customElements.define('pc-scripts', ScriptComponentElement);
-
-export { ScriptComponentElement };
+import { Color, ScriptComponent, Script, Vec2, Vec3, Vec4 } from 'playcanvas';
+
+import { AssetElement } from '../asset';
+import { ComponentElement } from './component';
+import { EntityElement } from '../entity';
+import { ScriptElement } from './script';
+
+// Add these interfaces at the top of the file, after the imports
+interface ScriptAttributesChangeEvent extends CustomEvent {
+    detail: { attributes: any };
+}
+
+interface ScriptEnableChangeEvent extends CustomEvent {
+    detail: { enabled: boolean };
+}
+
+// Add this interface before the ScriptComponentElement class
+declare global {
+    interface HTMLElementEventMap {
+        'scriptattributeschange': ScriptAttributesChangeEvent;
+        'scriptenablechange': ScriptEnableChangeEvent;
+    }
+}
+
+/**
+ * The ScriptComponentElement interface provides properties and methods for manipulating
+ * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-scripts/ | `<pc-scripts>`} elements.
+ * The ScriptComponentElement interface also inherits the properties and methods of the
+ * {@link HTMLElement} interface.
+ *
+ * @category Components
+ */
+class ScriptComponentElement extends ComponentElement {
+    private observer: MutationObserver;
+
+    /** @ignore */
+    constructor() {
+        super('script');
+
+        // Create mutation observer to watch for child script elements
+        this.observer = new MutationObserver(this.handleMutations.bind(this));
+        this.observer.observe(this, {
+            childList: true
+        });
+
+        // Listen for script attribute and enable changes
+        this.addEventListener('scriptattributeschange', this.handleScriptAttributesChange.bind(this));
+        this.addEventListener('scriptenablechange', this.handleScriptEnableChange.bind(this));
+    }
+
+    initComponent() {
+        // Handle initial script elements
+        this.querySelectorAll<ScriptElement>(':scope > pc-script').forEach((scriptElement) => {
+            const scriptName = scriptElement.getAttribute('name');
+            const attributes = scriptElement.getAttribute('attributes');
+            if (scriptName) {
+                this.createScript(scriptName, attributes);
+            }
+        });
+    }
+
+    /**
+     * 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.
+     */
+    private convertAttributes(item: any): any {
+        if (typeof item === 'string') {
+            if (item.startsWith('asset:')) {
+                const assetId = item.slice(6);
+                const assetElement = document.querySelector(`pc-asset#${assetId}`) as AssetElement;
+                if (assetElement) {
+                    return assetElement.asset;
+                }
+            }
+            if (item.startsWith('entity:')) {
+                const entityId = item.slice(7);
+                const entityElement = document.querySelector(`pc-entity[name="${entityId}"]`) as EntityElement;
+                if (entityElement) {
+                    return entityElement.entity;
+                }
+            }
+            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]);
+                }
+            }
+            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]);
+                }
+            }
+            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: any) => this.convertAttributes(el));
+            }
+            // Otherwise, leave the numeric array unchanged but process each element.
+            return item.map((el: any) => this.convertAttributes(el));
+        }
+
+        if (item && typeof item === 'object') {
+            const result: any = {};
+            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.
+     */
+    private preprocessAttributes(attrs: any): any {
+        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.
+     */
+    private mergeDeep(target: any, source: any): any {
+        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.
+     */
+    private applyAttributes(script: any, attributes: string | null) {
+        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);
+        }
+    }
+
+    private handleScriptAttributesChange(event: ScriptAttributesChangeEvent) {
+        const scriptElement = event.target as ScriptElement;
+        const scriptName = scriptElement.getAttribute('name');
+        if (!scriptName || !this.component) return;
+
+        const script = this.component.get(scriptName);
+        if (script) {
+            this.applyAttributes(script, event.detail.attributes);
+        }
+    }
+
+    private handleScriptEnableChange(event: ScriptEnableChangeEvent) {
+        const scriptElement = event.target as ScriptElement;
+        const scriptName = scriptElement.getAttribute('name');
+        if (!scriptName || !this.component) return;
+
+        const script = this.component.get(scriptName);
+        if (script) {
+            script.enabled = event.detail.enabled;
+        }
+    }
+
+    private createScript(name: string, attributes: string | null): Script | null {
+        if (!this.component) return null;
+
+        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
+        });
+    }
+
+    private destroyScript(name: string): void {
+        if (!this.component) return;
+        this.component.destroy(name);
+    }
+
+    private handleMutations(mutations: MutationRecord[]) {
+        for (const mutation of mutations) {
+            // Handle added nodes
+            mutation.addedNodes.forEach((node) => {
+                if (node instanceof HTMLElement && node.tagName.toLowerCase() === 'pc-script') {
+                    const scriptName = node.getAttribute('name');
+                    const attributes = node.getAttribute('attributes');
+                    if (scriptName) {
+                        this.createScript(scriptName, attributes);
+                    }
+                }
+            });
+
+            // Handle removed nodes
+            mutation.removedNodes.forEach((node) => {
+                if (node instanceof HTMLElement && node.tagName.toLowerCase() === 'pc-script') {
+                    const scriptName = node.getAttribute('name');
+                    if (scriptName) {
+                        this.destroyScript(scriptName);
+                    }
+                }
+            });
+        }
+    }
+
+    disconnectedCallback() {
+        this.observer.disconnect();
+        super.disconnectedCallback?.();
+    }
+
+    /**
+     * Gets the underlying PlayCanvas script component.
+     * @returns The script component.
+     */
+    get component(): ScriptComponent | null {
+        return super.component as ScriptComponent | null;
+    }
+}
+
+customElements.define('pc-scripts', ScriptComponentElement);
+
+export { ScriptComponentElement };