@playcanvas/web-components 0.1.0 → 0.1.1

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,26 @@
+import { ScriptComponent } from 'playcanvas';
+
+import { ComponentElement } from './component';
+
+/**
+ * Represents a script component in the PlayCanvas engine.
+ *
+ * @category Components
+ */
+class ScriptComponentElement extends ComponentElement {
+    constructor() {
+        super('script');
+    }
+
+    /**
+     * 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,130 @@
+import { ScriptType } from 'playcanvas';
+
+import { AppElement } from '../app';
+import { ScriptComponentElement } from './script-component';
+
+/**
+ * Represents a script in the PlayCanvas engine.
+ */
+class ScriptElement extends HTMLElement {
+    private _attributes: Record<string, any> = {};
+
+    private _enabled: boolean = true;
+
+    private _name: string = '';
+
+    private _script: ScriptType | null = null;
+
+    async connectedCallback() {
+        const appElement = this.closest('pc-app') as AppElement | null;
+        if (!appElement) {
+            console.error(`${this.tagName.toLowerCase()} should be a descendant of pc-app`);
+            return;
+        }
+
+        await appElement.getApplication();
+
+        const scriptAttributes = this.getAttribute('attributes');
+        if (scriptAttributes) {
+            try {
+                this._attributes = JSON.parse(scriptAttributes);
+            } catch (e) {
+                console.error('Failed to parse script attributes:', e);
+            }
+        }
+
+        // When the script is created, initialize it with the necessary attributes
+        this.scriptsElement?.component!.on(`create:${this._name}`, (scriptInstance) => {
+            Object.assign(scriptInstance, this._attributes);
+        });
+
+        this._script = this.scriptsElement?.component!.create(this._name, { preloading: false }) ?? null;
+    }
+
+    disconnectedCallback() {
+        this.scriptsElement?.component!.destroy(this._name);
+    }
+
+    refreshAttributes() {
+        if (this._script) {
+            Object.entries(this._attributes).forEach(([name, value]) => {
+                if (this._script && name in this._script) {
+                    (this._script as any)[name] = value;
+                }
+            });
+        }
+    }
+
+    protected get scriptsElement(): ScriptComponentElement | null {
+        const scriptsElement = this.parentElement as ScriptComponentElement;
+
+        if (!(scriptsElement instanceof ScriptComponentElement)) {
+            console.warn('pc-script must be a direct child of a pc-scripts element');
+            return null;
+        }
+
+        return scriptsElement;
+    }
+
+    set scriptAttributes(value: string) {
+        this._attributes = JSON.parse(value);
+        this.refreshAttributes();
+    }
+
+    get scriptAttributes() {
+        return JSON.stringify(this._attributes);
+    }
+
+    set enabled(value: boolean) {
+        this._enabled = value;
+        if (this._script) {
+            this._script.enabled = value;
+        }
+    }
+
+    /**
+     * 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-sound', SoundComponentElement);
+
+export { SoundComponentElement };