@playcanvas/web-components 0.1.0 → 0.1.1

package/src/app.ts

@@ -0,0 +1,138 @@
+import { Application, FILLMODE_FILL_WINDOW, Keyboard, Mouse, RESOLUTION_AUTO } from 'playcanvas';
+
+import { AssetElement } from './asset';
+import { ModuleElement } from './module';
+
+/**
+ * The main application element.
+ */
+class AppElement extends HTMLElement {
+    /**
+     * The canvas element.
+     */
+    private _canvas: HTMLCanvasElement | null = null;
+
+    private appReadyPromise: Promise<Application>;
+
+    private appReadyResolve!: (app: Application) => void;
+
+    private _highResolution = false;
+
+    /**
+     * The PlayCanvas application instance.
+     */
+    app: Application | null = null;
+
+    /**
+     * Creates a new AppElement.
+     */
+    constructor() {
+        super();
+
+        // Bind methods to maintain 'this' context
+        this._onWindowResize = this._onWindowResize.bind(this);
+
+        this.appReadyPromise = new Promise<Application>((resolve) => {
+            this.appReadyResolve = resolve;
+        });
+    }
+
+    async connectedCallback() {
+        // Get all pc-module elements that are direct children of the pc-app element
+        const moduleElements = this.querySelectorAll<ModuleElement>(':scope > pc-module');
+
+        // Wait for all modules to load
+        await Promise.all(Array.from(moduleElements).map(module => module.getLoadPromise()));
+
+        // Create and append the canvas to the element
+        this._canvas = document.createElement('canvas');
+        this.appendChild(this._canvas);
+
+        // Initialize the PlayCanvas application
+        this.app = new Application(this._canvas, {
+            graphicsDeviceOptions: {
+                devicePixelRatio: this._highResolution ? window.devicePixelRatio : 1
+            },
+            keyboard: new Keyboard(window),
+            mouse: new Mouse(this._canvas)
+        });
+        this.app.setCanvasFillMode(FILLMODE_FILL_WINDOW);
+        this.app.setCanvasResolution(RESOLUTION_AUTO);
+
+        // Get all pc-asset elements that are direct children of the pc-app element
+        const assetElements = this.querySelectorAll<AssetElement>(':scope > pc-asset');
+        Array.from(assetElements).forEach((assetElement) => {
+            assetElement.createAsset();
+            const asset = assetElement.asset;
+            if (asset) {
+                this.app!.assets.add(asset);
+            }
+        });
+
+        // Load assets before starting the application
+        this.app.preload(() => {
+            // Start the application
+            this.app!.start();
+
+            // Handle window resize to keep the canvas responsive
+            window.addEventListener('resize', this._onWindowResize);
+
+            this.appReadyResolve(this.app!);
+        });
+    }
+
+    disconnectedCallback() {
+        // Clean up the application
+        if (this.app) {
+            this.app.destroy();
+            this.app = null;
+        }
+
+        // Remove event listeners
+        window.removeEventListener('resize', this._onWindowResize);
+
+        // Remove the canvas
+        if (this._canvas && this.contains(this._canvas)) {
+            this.removeChild(this._canvas);
+            this._canvas = null;
+        }
+    }
+
+    async getApplication(): Promise<Application> {
+        await this.appReadyPromise;
+        return this.app!;
+    }
+
+    _onWindowResize() {
+        if (this.app) {
+            this.app.resizeCanvas();
+        }
+    }
+
+    set highResolution(value: boolean) {
+        this._highResolution = value;
+        if (this.app) {
+            this.app.graphicsDevice.maxPixelRatio = value ? window.devicePixelRatio : 1;
+        }
+    }
+
+    get highResolution() {
+        return this._highResolution;
+    }
+
+    static get observedAttributes() {
+        return ['high-resolution'];
+    }
+
+    attributeChangedCallback(name: string, _oldValue: string, _newValue: string) {
+        switch (name) {
+            case 'high-resolution':
+                this.highResolution = this.hasAttribute(name);
+                break;
+        }
+    }
+}
+
+customElements.define('pc-app', AppElement);
+
+export { AppElement };

package/src/asset.ts

@@ -0,0 +1,99 @@
+import { Asset } from 'playcanvas';
+
+const extToType = new Map([
+    ['bin', 'binary'],
+    ['css', 'css'],
+    ['frag', 'shader'],
+    ['glb', 'container'],
+    ['glsl', 'shader'],
+    ['html', 'html'],
+    ['jpg', 'texture'],
+    ['js', 'script'],
+    ['json', 'json'],
+    ['mp3', 'audio'],
+    ['mjs', 'script'],
+    ['ply', 'gsplat'],
+    ['png', 'texture'],
+    ['txt', 'text'],
+    ['vert', 'shader'],
+    ['webp', 'texture']
+]);
+
+/**
+ * Loads an asset into the PlayCanvas engine.
+ */
+class AssetElement extends HTMLElement {
+    private _preload: boolean = false;
+
+    /**
+     * The asset that is loaded.
+     */
+    asset: Asset | null = null;
+
+    async connectedCallback() {
+    }
+
+    disconnectedCallback() {
+        this.destroyAsset();
+    }
+
+    createAsset() {
+        const id = this.getAttribute('id') || '';
+        const src = this.getAttribute('src') || '';
+        let type = this.getAttribute('type');
+
+        // If no type is specified, try to infer it from the file extension.
+        if (!type) {
+            const ext = src.split('.').pop();
+            type = extToType.get(ext || '') ?? null;
+        }
+
+        if (!type) {
+            console.warn(`Unsupported asset type: ${src}`);
+            return;
+        }
+
+        this.asset = new Asset(id, type, { url: src });
+        this.asset.preload = this.preload;
+    }
+
+    destroyAsset() {
+        if (this.asset) {
+            this.asset.unload();
+            this.asset = null;
+        }
+    }
+
+    /**
+     * Sets the preload flag of the asset.
+     * @param value - The preload flag.
+     */
+    set preload(value: boolean) {
+        this._preload = value;
+        if (this.asset) {
+            this.asset.preload = value;
+        }
+    }
+
+    /**
+     * Gets the preload flag of the asset.
+     * @returns The preload flag.
+     */
+    get preload() {
+        return this._preload;
+    }
+
+    static get observedAttributes() {
+        return ['preload'];
+    }
+
+    attributeChangedCallback(name: string, _oldValue: string, _newValue: string) {
+        if (name === 'preload') {
+            this.preload = this.hasAttribute('preload');
+        }
+    }
+}
+
+customElements.define('pc-asset', AssetElement);
+
+export { AssetElement };

package/src/components/camera-component.ts

@@ -0,0 +1,196 @@
+import { PROJECTION_ORTHOGRAPHIC, PROJECTION_PERSPECTIVE, CameraComponent, Color } from 'playcanvas';
+
+import { ComponentElement } from './component';
+import { parseColor } from '../utils';
+
+/**
+ * Represents a camera component in the PlayCanvas engine.
+ *
+ * @category Components
+ */
+class CameraComponentElement extends ComponentElement {
+    private _clearColor = new Color(1, 1, 1, 1);
+
+    private _farClip = 1000;
+
+    private _fov = 45;
+
+    private _nearClip = 0.1;
+
+    private _orthographic = false;
+
+    private _orthoHeight = 10;
+
+    /**
+     * Creates a new CameraComponentElement.
+     */
+    constructor() {
+        super('camera');
+    }
+
+    getInitialComponentData() {
+        return {
+            clearColor: this._clearColor,
+            farClip: this._farClip,
+            fov: this._fov,
+            nearClip: this._nearClip,
+            projection: this._orthographic ? PROJECTION_ORTHOGRAPHIC : PROJECTION_PERSPECTIVE,
+            orthoHeight: this._orthoHeight
+        };
+    }
+
+    /**
+     * Gets the camera component.
+     * @returns The camera component.
+     */
+    get component(): CameraComponent | null {
+        return super.component as CameraComponent | null;
+    }
+
+    /**
+     * Sets the clear color of the camera.
+     * @param value - The clear color.
+     */
+    set clearColor(value) {
+        this._clearColor = value;
+        if (this.component) {
+            this.component.clearColor = value;
+        }
+    }
+
+    /**
+     * Gets the clear color of the camera.
+     * @returns The clear color.
+     */
+    get clearColor(): Color {
+        return this._clearColor;
+    }
+
+    /**
+     * Sets the far clip distance of the camera.
+     * @param value - The far clip distance.
+     */
+    set farClip(value: number) {
+        this._farClip = value;
+        if (this.component) {
+            this.component.farClip = value;
+        }
+    }
+
+    /**
+     * Gets the far clip distance of the camera.
+     * @returns The far clip distance.
+     */
+    get farClip(): number {
+        return this._farClip;
+    }
+
+    /**
+     * Sets the field of view of the camera.
+     * @param value - The field of view.
+     */
+    set fov(value: number) {
+        this._fov = value;
+        if (this.component) {
+            this.component.fov = value;
+        }
+    }
+
+    /**
+     * Gets the field of view of the camera.
+     * @returns The field of view.
+     */
+    get fov(): number {
+        return this._fov;
+    }
+
+    /**
+     * Sets the near clip distance of the camera.
+     * @param value - The near clip distance.
+     */
+    set nearClip(value: number) {
+        this._nearClip = value;
+        if (this.component) {
+            this.component.nearClip = value;
+        }
+    }
+
+    /**
+     * Gets the near clip distance of the camera.
+     * @returns The near clip distance.
+     */
+    get nearClip(): number {
+        return this._nearClip;
+    }
+
+    /**
+     * Sets the orthographic projection of the camera.
+     * @param value - The orthographic projection.
+     */
+    set orthographic(value) {
+        this._orthographic = value;
+        if (this.component) {
+            this.component.projection = value ? PROJECTION_ORTHOGRAPHIC : PROJECTION_PERSPECTIVE;
+        }
+    }
+
+    /**
+     * Gets the orthographic projection of the camera.
+     * @returns The orthographic projection.
+     */
+    get orthographic(): boolean {
+        return this._orthographic;
+    }
+
+    /**
+     * Sets the orthographic height of the camera.
+     * @param value - The orthographic height.
+     */
+    set orthoHeight(value: number) {
+        this._orthoHeight = value;
+        if (this.component) {
+            this.component.orthoHeight = value;
+        }
+    }
+
+    /**
+     * Gets the orthographic height of the camera.
+     * @returns The orthographic height.
+     */
+    get orthoHeight() {
+        return this._orthoHeight;
+    }
+
+    static get observedAttributes() {
+        return [...super.observedAttributes, 'clear-color', 'near-clip', 'far-clip', 'fov', 'orthographic', 'ortho-height'];
+    }
+
+    attributeChangedCallback(name: string, _oldValue: string, newValue: string) {
+        super.attributeChangedCallback(name, _oldValue, newValue);
+
+        switch (name) {
+            case 'clear-color':
+                this.clearColor = parseColor(newValue);
+                break;
+            case 'far-clip':
+                this.farClip = parseFloat(newValue);
+                break;
+            case 'fov':
+                this.fov = parseFloat(newValue);
+                break;
+            case 'near-clip':
+                this.nearClip = parseFloat(newValue);
+                break;
+            case 'orthographic':
+                this.orthographic = this.hasAttribute('orthographic');
+                break;
+            case 'ortho-height':
+                this.orthoHeight = parseFloat(newValue);
+                break;
+        }
+    }
+}
+
+customElements.define('pc-camera', CameraComponentElement);
+
+export { CameraComponentElement };

package/src/components/collision-component.ts

@@ -0,0 +1,148 @@
+import { CollisionComponent, Vec3 } from 'playcanvas';
+
+import { ComponentElement } from './component';
+import { parseVec3 } from '../utils';
+
+/**
+ * Represents a collision component in the PlayCanvas engine.
+ *
+ * @category Components
+ */
+class CollisionComponentElement extends ComponentElement {
+    private _axis: number = 1;
+
+    private _convexHull: boolean = false;
+
+    private _halfExtents: Vec3 = new Vec3(0.5, 0.5, 0.5);
+
+    private _height: number = 2;
+
+    private _radius: number = 0.5;
+
+    private _type: string = 'box';
+
+    /**
+     * Creates a new CollisionComponentElement.
+     */
+    constructor() {
+        super('collision');
+    }
+
+    getInitialComponentData() {
+        return {
+            axis: this._axis,
+            convexHull: this._convexHull,
+            halfExtents: this._halfExtents,
+            height: this._height,
+            radius: this._radius,
+            type: this._type
+        };
+    }
+
+    /**
+     * Gets the collision component.
+     * @returns The collision component.
+     */
+    get component(): CollisionComponent | null {
+        return super.component as CollisionComponent | null;
+    }
+
+    set axis(value: number) {
+        this._axis = value;
+        if (this.component) {
+            this.component.axis = value;
+        }
+    }
+
+    get axis() {
+        return this._axis;
+    }
+
+    set convexHull(value: boolean) {
+        this._convexHull = value;
+        if (this.component) {
+            this.component.convexHull = value;
+        }
+    }
+
+    get convexHull() {
+        return this._convexHull;
+    }
+
+    set halfExtents(value: Vec3) {
+        this._halfExtents = value;
+        if (this.component) {
+            this.component.halfExtents = value;
+        }
+    }
+
+    get halfExtents() {
+        return this._halfExtents;
+    }
+
+    set height(value: number) {
+        this._height = value;
+        if (this.component) {
+            this.component.height = value;
+        }
+    }
+
+    get height() {
+        return this._height;
+    }
+
+    set radius(value: number) {
+        this._radius = value;
+        if (this.component) {
+            this.component.radius = value;
+        }
+    }
+
+    get radius() {
+        return this._radius;
+    }
+
+    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, 'axis', 'convex-hull', 'half-extents', 'height', 'radius', 'type'];
+    }
+
+    attributeChangedCallback(name: string, _oldValue: string, newValue: string) {
+        super.attributeChangedCallback(name, _oldValue, newValue);
+
+        switch (name) {
+            case 'axis':
+                this.axis = parseInt(newValue, 10);
+                break;
+            case 'convex-hull':
+                this.convexHull = this.hasAttribute('convex-hull');
+                break;
+            case 'half-extents':
+                this.halfExtents = parseVec3(newValue);
+                break;
+            case 'height':
+                this.height = parseFloat(newValue);
+                break;
+            case 'radius':
+                this.radius = parseFloat(newValue);
+                break;
+            case 'type':
+                this.type = newValue;
+                break;
+        }
+    }
+}
+
+customElements.define('pc-collision', CollisionComponentElement);
+
+export { CollisionComponentElement };

package/src/components/component.ts

@@ -0,0 +1,106 @@
+import { Component } from 'playcanvas';
+
+import { AppElement } from '../app';
+import { EntityElement } from '../entity';
+
+/**
+ * Represents a component in the PlayCanvas engine.
+ *
+ * @category Components
+ */
+class ComponentElement extends HTMLElement {
+    private _componentName: string;
+
+    private _enabled = true;
+
+    private _component: Component | null = null;
+
+    /**
+     * Constructor for the ComponentElement.
+     * @param componentName - The name of the component.
+     */
+    constructor(componentName: string) {
+        super();
+
+        this._componentName = componentName;
+    }
+
+    // Method to be overridden by subclasses to provide initial component data
+    getInitialComponentData() {
+        return {};
+    }
+
+    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();
+
+        this.addComponent();
+    }
+
+    addComponent() {
+        // Access the parent pc-entity's 'entity' property
+        const entityElement = this.closest('pc-entity') as EntityElement | null;
+        if (!entityElement) {
+            console.error(`${this.tagName.toLowerCase()} should be a child of pc-entity`);
+            return;
+        }
+
+        if (entityElement && entityElement.entity) {
+            // Add the component to the entity
+            this._component = entityElement.entity.addComponent(
+                this._componentName,
+                this.getInitialComponentData()
+            );
+        }
+    }
+
+    disconnectedCallback() {
+        // Remove the component when the element is disconnected
+        if (this.component && this.component.entity) {
+            this._component!.entity.removeComponent(this._componentName);
+            this._component = null;
+        }
+    }
+
+    get component(): Component | null {
+        return this._component;
+    }
+
+    /**
+     * Sets the enabled state of the component.
+     * @param value - The enabled state of the component.
+     */
+    set enabled(value: boolean) {
+        this._enabled = value;
+        if (this.component) {
+            this.component.enabled = value;
+        }
+    }
+
+    /**
+     * Gets the enabled state of the component.
+     * @returns The enabled state of the component.
+     */
+    get enabled() {
+        return this._enabled;
+    }
+
+    static get observedAttributes() {
+        return ['enabled'];
+    }
+
+    attributeChangedCallback(name: string, _oldValue: string, newValue: string) {
+        switch (name) {
+            case 'enabled':
+                this.enabled = newValue !== 'false';
+                break;
+        }
+    }
+}
+
+export { ComponentElement };