@playcanvas/web-components 0.1.0 → 0.1.1

package/src/components/sound-slot.ts

@@ -0,0 +1,289 @@
+import { SoundSlot } from 'playcanvas';
+
+import { AppElement } from '../app';
+import { SoundComponentElement } from './sound-component';
+import { AssetElement } from '../asset';
+
+/**
+ * Represents a sound slot in the PlayCanvas engine.
+ */
+class SoundSlotElement extends HTMLElement {
+    private _asset: string = '';
+
+    private _autoPlay: boolean = false;
+
+    private _duration: number | null = null;
+
+    private _loop: boolean = false;
+
+    private _name: string = '';
+
+    private _overlap: boolean = false;
+
+    private _pitch: number = 1;
+
+    private _startTime: number = 0;
+
+    private _volume: number = 1;
+
+    /**
+     * The sound slot.
+     */
+    soundSlot: SoundSlot | null = null;
+
+    getAsset() {
+        const assetElement = document.querySelector(`pc-asset[id="${this._asset}"]`) as AssetElement;
+        return assetElement!.asset;
+    }
+
+    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 options = {
+            autoPlay: this._autoPlay,
+            loop: this._loop,
+            overlap: this._overlap,
+            pitch: this._pitch,
+            startTime: this._startTime,
+            volume: this._volume
+        } as any;
+        if (this._duration) {
+            options.duration = this._duration;
+        }
+        this.soundSlot = this.soundElement!.component!.addSlot(this._name, options);
+        this.asset = this._asset;
+        this.soundSlot!.play();
+    }
+
+    disconnectedCallback() {
+        this.soundElement!.component!.removeSlot(this._name);
+    }
+
+    protected get soundElement(): SoundComponentElement | null {
+        const soundElement = this.parentElement as SoundComponentElement;
+
+        if (!(soundElement instanceof SoundComponentElement)) {
+            console.warn('pc-sound-slot must be a direct child of a pc-sound element');
+            return null;
+        }
+
+        return soundElement;
+    }
+
+    /**
+     * Sets the asset of the sound slot.
+     * @param value - The asset.
+     */
+    set asset(value: string) {
+        this._asset = value;
+        if (this.soundSlot) {
+            const id = this.getAsset()?.id;
+            if (id) {
+                this.soundSlot.asset = id;
+            }
+        }
+    }
+
+    /**
+     * Gets the asset of the sound slot.
+     * @returns The asset.
+     */
+    get asset() {
+        return this._asset;
+    }
+
+    /**
+     * Sets the auto play flag of the sound slot.
+     * @param value - The auto play flag.
+     */
+    set autoPlay(value: boolean) {
+        this._autoPlay = value;
+        if (this.soundSlot) {
+            this.soundSlot.autoPlay = value;
+        }
+    }
+
+    /**
+     * Gets the auto play flag of the sound slot.
+     * @returns The auto play flag.
+     */
+    get autoPlay() {
+        return this._autoPlay;
+    }
+
+    /**
+     * Sets the duration of the sound slot.
+     * @param value - The duration.
+     */
+    set duration(value: number) {
+        this._duration = value;
+        if (this.soundSlot) {
+            this.soundSlot.duration = value;
+        }
+    }
+
+    /**
+     * Gets the duration of the sound slot.
+     * @returns The duration.
+     */
+    get duration() {
+        return this._duration as number;
+    }
+
+    /**
+     * Sets the loop flag of the sound slot.
+     * @param value - The loop flag.
+     */
+    set loop(value: boolean) {
+        this._loop = value;
+        if (this.soundSlot) {
+            this.soundSlot.loop = value;
+        }
+    }
+
+    /**
+     * Gets the loop flag of the sound slot.
+     * @returns The loop flag.
+     */
+    get loop() {
+        return this._loop;
+    }
+
+    /**
+     * Sets the name of the sound slot.
+     * @param value - The name.
+     */
+    set name(value: string) {
+        this._name = value;
+        if (this.soundSlot) {
+            this.soundSlot.name = value;
+        }
+    }
+
+    /**
+     * Gets the name of the sound slot.
+     * @returns The name.
+     */
+    get name() {
+        return this._name;
+    }
+
+    /**
+     * Sets the overlap flag of the sound slot.
+     * @param value - The overlap flag.
+     */
+    set overlap(value: boolean) {
+        this._overlap = value;
+        if (this.soundSlot) {
+            this.soundSlot.overlap = value;
+        }
+    }
+
+    /**
+     * Gets the overlap flag of the sound slot.
+     * @returns The overlap flag.
+     */
+    get overlap() {
+        return this._overlap;
+    }
+
+    /**
+     * Sets the pitch of the sound slot.
+     * @param value - The pitch.
+     */
+    set pitch(value: number) {
+        this._pitch = value;
+        if (this.soundSlot) {
+            this.soundSlot.pitch = value;
+        }
+    }
+
+    /**
+     * Gets the pitch of the sound slot.
+     * @returns The pitch.
+     */
+    get pitch() {
+        return this._pitch;
+    }
+
+    /**
+     * Sets the start time of the sound slot.
+     * @param value - The start time.
+     */
+    set startTime(value: number) {
+        this._startTime = value;
+        if (this.soundSlot) {
+            this.soundSlot.startTime = value;
+        }
+    }
+
+    /**
+     * Gets the start time of the sound slot.
+     * @returns The start time.
+     */
+    get startTime() {
+        return this._startTime;
+    }
+
+    /**
+     * Sets the volume of the sound slot.
+     * @param value - The volume.
+     */
+    set volume(value: number) {
+        this._volume = value;
+        if (this.soundSlot) {
+            this.soundSlot.volume = value;
+        }
+    }
+
+    /**
+     * Gets the volume of the sound slot.
+     * @returns The volume.
+     */
+    get volume() {
+        return this._volume;
+    }
+
+    static get observedAttributes() {
+        return ['asset', 'autoPlay', 'duration', 'loop', 'name', 'overlap', 'pitch', 'startTime', 'volume'];
+    }
+
+    attributeChangedCallback(name: string, _oldValue: string, newValue: string) {
+        switch (name) {
+            case 'asset':
+                this.asset = newValue;
+                break;
+            case 'duration':
+                this.duration = parseFloat(newValue);
+                break;
+            case 'loop':
+                this.loop = this.hasAttribute('loop');
+                break;
+            case 'name':
+                this.name = newValue;
+                break;
+            case 'overlap':
+                this.overlap = this.hasAttribute('overlap');
+                break;
+            case 'pitch':
+                this.pitch = parseFloat(newValue);
+                break;
+            case 'startTime':
+                this.startTime = parseFloat(newValue);
+                break;
+            case 'volume':
+                this.volume = parseFloat(newValue);
+                break;
+        }
+    }
+}
+
+customElements.define('pc-sound-slot', SoundSlotElement);
+
+export { SoundSlotElement };

package/src/entity.ts

@@ -0,0 +1,230 @@
+import { Entity, Vec3 } from 'playcanvas';
+
+import { AppElement } from './app';
+import { parseVec3 } from './utils';
+
+/**
+ * Represents an entity in the PlayCanvas engine.
+ */
+class EntityElement extends HTMLElement {
+    /**
+     * Whether the entity is enabled.
+     */
+    private _enabled = true;
+
+    /**
+     * The name of the entity.
+     */
+    private _name = 'Untitled';
+
+    /**
+     * The position of the entity.
+     */
+    private _position = new Vec3();
+
+    /**
+     * The rotation of the entity.
+     */
+    private _rotation = new Vec3();
+
+    /**
+     * The scale of the entity.
+     */
+    private _scale = new Vec3(1, 1, 1);
+
+    /**
+     * The tags of the entity.
+     */
+    private _tags: string[] = [];
+
+    /**
+     * The PlayCanvas entity instance.
+     */
+    entity: Entity | null = null;
+
+    async connectedCallback() {
+        // Get the application
+        const appElement = this.closest('pc-app') as AppElement;
+        if (!appElement) {
+            console.warn(`${this.tagName} must be a child of pc-app`);
+            return;
+        }
+
+        const app = await appElement.getApplication();
+
+        // Create a new entity
+        this.entity = new Entity(this._name, app);
+
+        if (this.parentElement && this.parentElement.tagName === 'pc-entity' && (this.parentElement as EntityElement).entity) {
+            (this.parentElement as EntityElement).entity!.addChild(this.entity);
+        } else {
+            app.root.addChild(this.entity);
+        }
+
+        // Initialize from attributes
+        const nameAttr = this.getAttribute('name');
+        const positionAttr = this.getAttribute('position');
+        const rotationAttr = this.getAttribute('rotation');
+        const scaleAttr = this.getAttribute('scale');
+        const tagsAttr = this.getAttribute('tags');
+
+        if (nameAttr) this.name = nameAttr;
+        if (positionAttr) this.position = parseVec3(positionAttr);
+        if (rotationAttr) this.rotation = parseVec3(rotationAttr);
+        if (scaleAttr) this.scale = parseVec3(scaleAttr);
+        if (tagsAttr) this.tags = tagsAttr.split(',').map(tag => tag.trim());
+    }
+
+    disconnectedCallback() {
+        if (this.entity) {
+            this.entity.destroy();
+            this.entity = null;
+        }
+    }
+
+    /**
+     * Sets the enabled state of the entity.
+     * @param value - Whether the entity is enabled.
+     */
+    set enabled(value) {
+        this._enabled = value;
+        if (this.entity) {
+            this.entity.enabled = value;
+        }
+    }
+
+    /**
+     * Gets the enabled state of the entity.
+     * @returns Whether the entity is enabled.
+     */
+    get enabled() {
+        return this._enabled;
+    }
+
+    /**
+     * Sets the name of the entity.
+     * @param value - The name of the entity.
+     */
+    set name(value) {
+        this._name = value;
+        if (this.entity) {
+            this.entity.name = value;
+        }
+    }
+
+    /**
+     * Gets the name of the entity.
+     * @returns The name of the entity.
+     */
+    get name() {
+        return this._name;
+    }
+
+    /**
+     * Sets the position of the entity.
+     * @param value - The position of the entity.
+     */
+    set position(value) {
+        this._position = value;
+        if (this.entity) {
+            this.entity.setLocalPosition(this._position);
+        }
+    }
+
+    /**
+     * Gets the position of the entity.
+     * @returns The position of the entity.
+     */
+    get position() {
+        return this._position;
+    }
+
+    /**
+     * Sets the rotation of the entity.
+     * @param value - The rotation of the entity.
+     */
+    set rotation(value) {
+        this._rotation = value;
+        if (this.entity) {
+            this.entity.setLocalEulerAngles(this._rotation);
+        }
+    }
+
+    /**
+     * Gets the rotation of the entity.
+     * @returns The rotation of the entity.
+     */
+    get rotation() {
+        return this._rotation;
+    }
+
+    /**
+     * Sets the scale of the entity.
+     * @param value - The scale of the entity.
+     */
+    set scale(value) {
+        this._scale = value;
+        if (this.entity) {
+            this.entity.setLocalScale(this._scale);
+        }
+    }
+
+    /**
+     * Gets the scale of the entity.
+     * @returns The scale of the entity.
+     */
+    get scale() {
+        return this._scale;
+    }
+
+    /**
+     * Sets the tags of the entity.
+     * @param value - The tags of the entity.
+     */
+    set tags(value) {
+        this._tags = value;
+        if (this.entity) {
+            this.entity.tags.clear();
+            this.entity.tags.add(this._tags);
+        }
+    }
+
+    /**
+     * Gets the tags of the entity.
+     * @returns The tags of the entity.
+     */
+    get tags() {
+        return this._tags;
+    }
+
+    static get observedAttributes() {
+        return ['enabled', 'name', 'position', 'rotation', 'scale', 'tags'];
+    }
+
+    attributeChangedCallback(name: string, _oldValue: string, newValue: string) {
+        switch (name) {
+            case 'enabled':
+                this.enabled = newValue !== 'false';
+                break;
+            case 'name':
+                this.name = newValue;
+                break;
+            case 'position':
+                this.position = parseVec3(newValue);
+                break;
+            case 'rotation':
+                this.rotation = parseVec3(newValue);
+                break;
+            case 'scale':
+                this.scale = parseVec3(newValue);
+                break;
+            case 'tags':
+                this.tags = newValue.split(',').map(tag => tag.trim());
+                break;
+        }
+    }
+}
+
+customElements.define('pc-entity', EntityElement);
+
+export { EntityElement };

package/src/index.ts

@@ -0,0 +1,46 @@
+/* eslint-disable import/order */
+
+// Note that order matters here (e.g. pc-entity must be defined before components)
+import { ModuleElement } from './module';
+import { AppElement } from './app';
+import { EntityElement } from './entity';
+import { AssetElement } from './asset';
+import { ListenerComponentElement } from './components/listener-component';
+import { CameraComponentElement } from './components/camera-component';
+import { CollisionComponentElement } from './components/collision-component';
+import { ComponentElement } from './components/component';
+import { ElementComponentElement } from './components/element-component';
+import { GSplatComponentElement } from './components/gsplat-component';
+import { LightComponentElement } from './components/light-component';
+import { RenderComponentElement } from './components/render-component';
+import { RigidBodyComponentElement } from './components/rigidbody-component';
+import { ScriptComponentElement } from './components/script-component';
+import { ScriptElement } from './components/script';
+import { SoundComponentElement } from './components/sound-component';
+import { SoundSlotElement } from './components/sound-slot';
+import { ModelElement } from './model';
+import { SceneElement } from './scene';
+import { SkyElement } from './sky';
+
+export {
+    ModuleElement,
+    AppElement,
+    EntityElement,
+    AssetElement,
+    CameraComponentElement,
+    CollisionComponentElement,
+    ComponentElement,
+    ElementComponentElement,
+    GSplatComponentElement,
+    LightComponentElement,
+    ListenerComponentElement,
+    RenderComponentElement,
+    RigidBodyComponentElement,
+    ScriptComponentElement,
+    ScriptElement,
+    SoundComponentElement,
+    SoundSlotElement,
+    ModelElement,
+    SceneElement,
+    SkyElement
+};

package/src/model.ts

@@ -0,0 +1,80 @@
+import { AppElement } from './app';
+import { AssetElement } from './asset';
+import { EntityElement } from './entity';
+
+/**
+ * Represents a model in the PlayCanvas engine.
+ */
+class ModelElement extends HTMLElement {
+    private _asset: string = '';
+
+    async connectedCallback() {
+        // Get the application
+        const appElement = this.closest('pc-app') as AppElement;
+        if (!appElement) {
+            console.warn(`${this.tagName} must be a child of pc-app`);
+            return;
+        }
+
+        await appElement.getApplication();
+
+        const asset = this.getAttribute('asset');
+        if (asset) {
+            this.asset = asset;
+        }
+    }
+
+    getAsset() {
+        const assetElement = document.querySelector(`pc-asset[id="${this._asset}"]`) as AssetElement;
+        return assetElement!.asset;
+    }
+
+    _loadModel() {
+        const asset = this.getAsset();
+        if (!asset) {
+            return;
+        }
+        const entity = asset.resource.instantiateRenderEntity();
+
+        const parentEntityElement = this.closest('pc-entity') as EntityElement | null;
+        if (parentEntityElement) {
+            parentEntityElement.entity!.addChild(entity);
+        } else {
+            const appElement = this.closest('pc-app') as AppElement;
+            appElement.app!.root.addChild(entity);
+        }
+    }
+
+    /**
+     * Sets the asset ID of the model.
+     * @param value - The asset ID.
+     */
+    set asset(value: string) {
+        this._asset = value;
+        this._loadModel();
+    }
+
+    /**
+     * Gets the source URL of the model.
+     * @returns The source URL of the model.
+     */
+    get asset(): string {
+        return this._asset;
+    }
+
+    static get observedAttributes() {
+        return ['asset'];
+    }
+
+    attributeChangedCallback(name: string, _oldValue: string, newValue: string) {
+        switch (name) {
+            case 'asset':
+                this.asset = newValue;
+                break;
+        }
+    }
+}
+
+customElements.define('pc-model', ModelElement);
+
+export { ModelElement };

package/src/module.ts

@@ -0,0 +1,35 @@
+import { WasmModule } from 'playcanvas';
+
+class ModuleElement extends HTMLElement {
+    private loadPromise: Promise<void>;
+
+    constructor() {
+        super();
+        this.loadPromise = this.loadModule();
+    }
+
+    private async loadModule(): Promise<void> {
+        const name = this.getAttribute('name')!;
+        const glue = this.getAttribute('glue')!;
+        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());
+        });
+    }
+
+    public getLoadPromise(): Promise<void> {
+        return this.loadPromise;
+    }
+}
+
+customElements.define('pc-module', ModuleElement);
+
+export { ModuleElement };