@playcanvas/web-components 0.1.0 → 0.1.2

package/src/components/render-component.ts

@@ -0,0 +1,117 @@
+import { RenderComponent } from 'playcanvas';
+
+import { ComponentElement } from './component';
+
+/**
+ * Represents a render component in the PlayCanvas engine.
+ *
+ * @category Components
+ */
+class RenderComponentElement extends ComponentElement {
+    private _type: 'asset' | 'box' | 'capsule' | 'cone' | 'cylinder' | 'plane' | 'sphere' = 'asset';
+
+    private _castShadows = true;
+
+    private _receiveShadows = true;
+
+    constructor() {
+        super('render');
+    }
+
+    getInitialComponentData() {
+        return {
+            type: this._type,
+            castShadows: this._castShadows,
+            receiveShadows: this._receiveShadows
+        };
+    }
+
+    /**
+     * Gets the render component.
+     * @returns The render component.
+     */
+    get component(): RenderComponent | null {
+        return super.component as RenderComponent | null;
+    }
+
+    /**
+     * Sets the type of the render component.
+     * @param value - The type.
+     */
+    set type(value: 'asset' | 'box' | 'capsule' | 'cone' | 'cylinder' | 'plane' | 'sphere') {
+        this._type = value;
+        if (this.component) {
+            this.component.type = value;
+        }
+    }
+
+    /**
+     * Gets the type of the render component.
+     * @returns The type.
+     */
+    get type(): 'asset' | 'box' | 'capsule' | 'cone' | 'cylinder' | 'plane' | 'sphere' {
+        return this._type;
+    }
+
+    /**
+     * Sets the cast shadows flag of the render component.
+     * @param value - The cast shadows flag.
+     */
+    set castShadows(value: boolean) {
+        this._castShadows = value;
+        if (this.component) {
+            this.component.castShadows = value;
+        }
+    }
+
+    /**
+     * Gets the cast shadows flag of the render component.
+     * @returns The cast shadows flag.
+     */
+    get castShadows(): boolean {
+        return this._castShadows;
+    }
+
+    /**
+     * Sets the receive shadows flag of the render component.
+     * @param value - The receive shadows flag.
+     */
+    set receiveShadows(value: boolean) {
+        this._receiveShadows = value;
+        if (this.component) {
+            this.component.receiveShadows = value;
+        }
+    }
+
+    /**
+     * Gets the receive shadows flag of the render component.
+     * @returns The receive shadows flag.
+     */
+    get receiveShadows(): boolean {
+        return this._receiveShadows;
+    }
+
+    static get observedAttributes() {
+        return [...super.observedAttributes, 'cast-shadows', 'receive-shadows', 'type'];
+    }
+
+    attributeChangedCallback(name: string, _oldValue: string, newValue: string) {
+        super.attributeChangedCallback(name, _oldValue, newValue);
+
+        switch (name) {
+            case 'type':
+                this.type = newValue as 'asset' | 'box' | 'capsule' | 'cone' | 'cylinder' | 'plane' | 'sphere';
+                break;
+            case 'cast-shadows':
+                this.castShadows = newValue !== 'false';
+                break;
+            case 'receive-shadows':
+                this.receiveShadows = newValue !== 'false';
+                break;
+        }
+    }
+}
+
+customElements.define('pc-render', RenderComponentElement);
+
+export { RenderComponentElement };

package/src/components/rigidbody-component.ts

@@ -0,0 +1,226 @@
+import { RigidBodyComponent, Vec3 } from 'playcanvas';
+
+import { ComponentElement } from './component';
+import { parseVec3 } from '../utils';
+
+/**
+ * Represents a rigidbody component in the PlayCanvas engine.
+ *
+ * @category Components
+ */
+class RigidBodyComponentElement extends ComponentElement {
+    /**
+     * The angular damping of the rigidbody.
+     */
+    private _angularDamping: number = 0;
+
+    /**
+     * The angular factor of the rigidbody.
+     */
+    private _angularFactor: Vec3 = new Vec3(1, 1, 1);
+
+    /**
+     * The friction of the rigidbody.
+     */
+    private _friction: number = 0.5;
+
+    /**
+     * The linear damping of the rigidbody.
+     */
+    private _linearDamping: number = 0;
+
+    /**
+     * The linear factor of the rigidbody.
+     */
+    private _linearFactor: Vec3 = new Vec3(1, 1, 1);
+
+    /**
+     * The mass of the rigidbody.
+     */
+    private _mass: number = 1;
+
+    /**
+     * The restitution of the rigidbody.
+     */
+    private _restitution: number = 0;
+
+    /**
+     * The rolling friction of the rigidbody.
+     */
+    private _rollingFriction: number = 0;
+
+    /**
+     * The type of the rigidbody.
+     */
+    private _type: string = 'static';
+
+    /**
+     * Creates a new RigidBodyComponentElement.
+     */
+    constructor() {
+        super('rigidbody');
+    }
+
+    getInitialComponentData() {
+        return {
+            angularDamping: this._angularDamping,
+            angularFactor: this._angularFactor,
+            friction: this._friction,
+            linearDamping: this._linearDamping,
+            linearFactor: this._linearFactor,
+            mass: this._mass,
+            restitution: this._restitution,
+            rollingFriction: this._rollingFriction,
+            type: this._type
+        };
+    }
+
+    /**
+     * Gets the collision component.
+     * @returns The collision component.
+     */
+    get component(): RigidBodyComponent | null {
+        return super.component as RigidBodyComponent | null;
+    }
+
+    set angularDamping(value: number) {
+        this._angularDamping = value;
+        if (this.component) {
+            this.component.angularDamping = value;
+        }
+    }
+
+    get angularDamping() {
+        return this._angularDamping;
+    }
+
+    set angularFactor(value: Vec3) {
+        this._angularFactor = value;
+        if (this.component) {
+            this.component.angularFactor = value;
+        }
+    }
+
+    get angularFactor() {
+        return this._angularFactor;
+    }
+
+    set friction(value: number) {
+        this._friction = value;
+        if (this.component) {
+            this.component.friction = value;
+        }
+    }
+
+    get friction() {
+        return this._friction;
+    }
+
+    set linearDamping(value: number) {
+        this._linearDamping = value;
+        if (this.component) {
+            this.component.linearDamping = value;
+        }
+    }
+
+    get linearDamping() {
+        return this._linearDamping;
+    }
+
+    set linearFactor(value: Vec3) {
+        this._linearFactor = value;
+        if (this.component) {
+            this.component.linearFactor = value;
+        }
+    }
+
+    get linearFactor() {
+        return this._linearFactor;
+    }
+
+    set mass(value: number) {
+        this._mass = value;
+        if (this.component) {
+            this.component.mass = value;
+        }
+    }
+
+    get mass() {
+        return this._mass;
+    }
+
+    set restitution(value: number) {
+        this._restitution = value;
+        if (this.component) {
+            this.component.restitution = value;
+        }
+    }
+
+    get restitution() {
+        return this._restitution;
+    }
+
+    set rollingFriction(value: number) {
+        this._rollingFriction = value;
+        if (this.component) {
+            this.component.rollingFriction = value;
+        }
+    }
+
+    get rollingFriction() {
+        return this._rollingFriction;
+    }
+
+    set type(value: string) {
+        this._type = value;
+        if (this.component) {
+            this.component.type = value;
+        }
+    }
+
+    get type() {
+        return this._type;
+    }
+
+    static get observedAttributes() {
+        return [...super.observedAttributes, 'angular-damping', 'angular-factor', 'friction', 'linear-damping', 'linear-factor', 'mass', 'restitution', 'rolling-friction', 'type'];
+    }
+
+    attributeChangedCallback(name: string, _oldValue: string, newValue: string) {
+        super.attributeChangedCallback(name, _oldValue, newValue);
+
+        switch (name) {
+            case 'angular-damping':
+                this.angularDamping = parseFloat(newValue);
+                break;
+            case 'angular-factor':
+                this.angularFactor = parseVec3(newValue);
+                break;
+            case 'friction':
+                this.friction = parseFloat(newValue);
+                break;
+            case 'linear-damping':
+                this.linearDamping = parseFloat(newValue);
+                break;
+            case 'linear-factor':
+                this.linearFactor = parseVec3(newValue);
+                break;
+            case 'mass':
+                this.mass = parseFloat(newValue);
+                break;
+            case 'restitution':
+                this.restitution = parseFloat(newValue);
+                break;
+            case 'rolling-friction':
+                this.rollingFriction = parseFloat(newValue);
+                break;
+            case 'type':
+                this.type = newValue;
+                break;
+        }
+    }
+}
+
+customElements.define('pc-rigidbody', RigidBodyComponentElement);
+
+export { RigidBodyComponentElement };

package/src/components/script-component.ts

@@ -0,0 +1,145 @@
+import { ScriptComponent, ScriptType } from 'playcanvas';
+
+import { ComponentElement } from './component';
+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;
+    }
+}
+
+/**
+ * Represents a script component in the PlayCanvas engine.
+ *
+ * @category Components
+ */
+class ScriptComponentElement extends ComponentElement {
+    private observer: MutationObserver;
+
+    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));
+    }
+
+    async connectedCallback() {
+        await super.connectedCallback();
+
+        // 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);
+            }
+        });
+    }
+
+    private applyAttributes(script: ScriptType, 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);
+        } 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): ScriptType | null {
+        if (!this.component) return null;
+
+        this.component.on(`create:${name}`, (script) => {
+            this.applyAttributes(script, attributes);
+        });
+        return this.component.create(name);
+    }
+
+    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 script component.
+     * @returns The script component.
+     */
+    get component(): ScriptComponent | null {
+        return super.component as ScriptComponent | null;
+    }
+}
+
+customElements.define('pc-scripts', ScriptComponentElement);
+
+export { ScriptComponentElement };

package/src/components/script.ts

@@ -0,0 +1,88 @@
+/**
+ * Represents a script in the PlayCanvas engine.
+ */
+class ScriptElement extends HTMLElement {
+    private _attributes: string = '{}';
+
+    private _enabled: boolean = true;
+
+    private _name: string = '';
+
+    /**
+     * Sets the attributes of the script.
+     * @param value - The attributes of the script.
+     */
+    set scriptAttributes(value: string) {
+        this._attributes = value;
+        this.dispatchEvent(new CustomEvent('scriptattributeschange', {
+            detail: { attributes: value },
+            bubbles: true
+        }));
+    }
+
+    /**
+     * Gets the attributes of the script.
+     * @returns The attributes of the script.
+     */
+    get scriptAttributes() {
+        return this._attributes;
+    }
+
+    /**
+     * Sets the enabled state of the script.
+     * @param value - The enabled state of the script.
+     */
+    set enabled(value: boolean) {
+        this._enabled = value;
+        this.dispatchEvent(new CustomEvent('scriptenablechange', {
+            detail: { enabled: value },
+            bubbles: true
+        }));
+    }
+
+    /**
+     * Gets the enabled state of the script.
+     * @returns The enabled state of the script.
+     */
+    get enabled() {
+        return this._enabled;
+    }
+
+    /**
+     * Sets the name of the script to create.
+     * @param value - The name.
+     */
+    set name(value: string) {
+        this._name = value;
+    }
+
+    /**
+     * Gets the name of the script.
+     * @returns The name.
+     */
+    get name() {
+        return this._name;
+    }
+
+    static get observedAttributes() {
+        return ['attributes', 'enabled', 'name'];
+    }
+
+    attributeChangedCallback(name: string, _oldValue: string, newValue: string) {
+        switch (name) {
+            case 'attributes':
+                this.scriptAttributes = newValue;
+                break;
+            case 'enabled':
+                this.enabled = newValue !== 'false';
+                break;
+            case 'name':
+                this.name = newValue;
+                break;
+        }
+    }
+}
+
+customElements.define('pc-script', ScriptElement);
+
+export { ScriptElement };

package/src/components/sound-component.ts

@@ -0,0 +1,117 @@
+import { SoundComponent } from 'playcanvas';
+
+import { ComponentElement } from './component';
+
+/**
+ * Represents a sound component in the PlayCanvas engine.
+ *
+ * @category Components
+ */
+class SoundComponentElement extends ComponentElement {
+    private _pitch: number = 1;
+
+    private _positional: boolean = false;
+
+    private _volume: number = 1;
+
+    constructor() {
+        super('sound');
+    }
+
+    getInitialComponentData() {
+        return {
+            pitch: this._pitch,
+            positional: this._positional,
+            volume: this._volume
+        };
+    }
+
+    /**
+     * Gets the sound component.
+     * @returns The sound component.
+     */
+    get component(): SoundComponent | null {
+        return super.component as SoundComponent | null;
+    }
+
+    /**
+     * Sets the pitch of the sound.
+     * @param value - The pitch.
+     */
+    set pitch(value: number) {
+        this._pitch = value;
+        if (this.component) {
+            this.component.pitch = value;
+        }
+    }
+
+    /**
+     * Gets the pitch of the sound.
+     * @returns The pitch.
+     */
+    get pitch() {
+        return this._pitch;
+    }
+
+    /**
+     * Sets the positional flag of the sound.
+     * @param value - The positional flag.
+     */
+    set positional(value: boolean) {
+        this._positional = value;
+        if (this.component) {
+            this.component.positional = value;
+        }
+    }
+
+    /**
+     * Gets the positional flag of the sound.
+     * @returns The positional flag.
+     */
+    get positional() {
+        return this._positional;
+    }
+
+    /**
+     * Sets the volume of the sound.
+     * @param value - The volume.
+     */
+    set volume(value: number) {
+        this._volume = value;
+        if (this.component) {
+            this.component.volume = value;
+        }
+    }
+
+    /**
+     * Gets the volume of the sound.
+     * @returns The volume.
+     */
+    get volume() {
+        return this._volume;
+    }
+
+    static get observedAttributes() {
+        return [...super.observedAttributes, 'pitch', 'positional', 'volume'];
+    }
+
+    attributeChangedCallback(name: string, _oldValue: string, newValue: string) {
+        super.attributeChangedCallback(name, _oldValue, newValue);
+
+        switch (name) {
+            case 'pitch':
+                this.pitch = parseFloat(newValue);
+                break;
+            case 'positional':
+                this.positional = this.hasAttribute('positional');
+                break;
+            case 'volume':
+                this.volume = parseFloat(newValue);
+                break;
+        }
+    }
+}
+
+customElements.define('pc-sounds', SoundComponentElement);
+
+export { SoundComponentElement };