@playcanvas/web-components 0.1.0 → 0.1.1

package/src/components/element-component.ts

@@ -0,0 +1,252 @@
+import { Color, ElementComponent, Vec2, Vec4 } from 'playcanvas';
+
+import { AssetElement } from '../asset';
+import { ComponentElement } from './component';
+import { parseColor, parseVec2, parseVec4 } from '../utils';
+
+
+/**
+ * Represents an element component in the PlayCanvas engine.
+ *
+ * @category Components
+ */
+class ElementComponentElement extends ComponentElement {
+    private _anchor: Vec4 = new Vec4(0.5, 0.5, 0.5, 0.5);
+
+    private _asset: string = '';
+
+    private _autoWidth: boolean = true;
+
+    private _color: Color = new Color(1, 1, 1, 1);
+
+    private _fontSize: number = 32;
+
+    private _lineHeight: number = 32;
+
+    private _pivot: Vec2 = new Vec2(0.5, 0.5);
+
+    private _text: string = '';
+
+    private _type: 'group' | 'image' | 'text' = 'group';
+
+    private _width: number = 0;
+
+    private _wrapLines: boolean = false;
+
+    constructor() {
+        super('element');
+    }
+
+    async connectedCallback() {
+        await super.connectedCallback();
+
+        this.component!._text._material.useFog = true;
+    }
+
+    getAsset() {
+        const assetElement = document.querySelector(`pc-asset[id="${this._asset}"]`) as AssetElement;
+        return assetElement!.asset;
+    }
+
+    getInitialComponentData() {
+        return {
+            anchor: this._anchor,
+            autoWidth: this._autoWidth,
+            color: this._color,
+            fontAsset: this.getAsset()!.id,
+            fontSize: this._fontSize,
+            lineHeight: this._lineHeight,
+            pivot: this._pivot,
+            type: this._type,
+            text: this._text,
+            width: this._width,
+            wrapLines: this._wrapLines
+        };
+    }
+
+    /**
+     * Gets the element component.
+     * @returns The element component.
+     */
+    get component(): ElementComponent | null {
+        return super.component as ElementComponent | null;
+    }
+
+    set anchor(value: Vec4) {
+        this._anchor = value;
+        if (this.component) {
+            this.component.anchor = value;
+        }
+    }
+
+    get anchor() {
+        return this._anchor;
+    }
+
+    set asset(value: string) {
+        this._asset = value;
+        const asset = this.getAsset();
+        if (this.component && asset) {
+            this.component.fontAsset = asset.id;
+        }
+    }
+
+    get asset() {
+        return this._asset;
+    }
+
+    set autoWidth(value: boolean) {
+        this._autoWidth = value;
+        if (this.component) {
+            this.component.autoWidth = value;
+        }
+    }
+
+    get autoWidth() {
+        return this._autoWidth;
+    }
+
+    set color(value: Color) {
+        this._color = value;
+        if (this.component) {
+            this.component.color = value;
+        }
+    }
+
+    get color() {
+        return this._color;
+    }
+
+    set fontSize(value: number) {
+        this._fontSize = value;
+        if (this.component) {
+            this.component.fontSize = value;
+        }
+    }
+
+    get fontSize() {
+        return this._fontSize;
+    }
+
+    set lineHeight(value: number) {
+        this._lineHeight = value;
+        if (this.component) {
+            this.component.lineHeight = value;
+        }
+    }
+
+    get lineHeight() {
+        return this._lineHeight;
+    }
+
+    set pivot(value: Vec2) {
+        this._pivot = value;
+        if (this.component) {
+            this.component.pivot = value;
+        }
+    }
+
+    get pivot() {
+        return this._pivot;
+    }
+
+    set text(value: string) {
+        this._text = value;
+        if (this.component) {
+            this.component.text = value;
+        }
+    }
+
+    get text() {
+        return this._text;
+    }
+
+    /**
+     * Sets the type of the element component.
+     * @param value - The type.
+     */
+    set type(value: 'group' | 'image' | 'text') {
+        this._type = value;
+        if (this.component) {
+            this.component.type = value;
+        }
+    }
+
+    /**
+     * Gets the type of the element component.
+     * @returns The type.
+     */
+    get type(): 'group' | 'image' | 'text' {
+        return this._type;
+    }
+
+    set width(value: number) {
+        this._width = value;
+        if (this.component) {
+            this.component.width = value;
+        }
+    }
+
+    get width() {
+        return this._width;
+    }
+
+    set wrapLines(value: boolean) {
+        this._wrapLines = value;
+        if (this.component) {
+            this.component.wrapLines = value;
+        }
+    }
+
+    get wrapLines() {
+        return this._wrapLines;
+    }
+
+    static get observedAttributes() {
+        return [...super.observedAttributes, 'anchor', 'asset', 'auto-width', 'color', 'font-size', 'line-height', 'pivot', 'text', 'type', 'width', 'wrap-lines'];
+    }
+
+    attributeChangedCallback(name: string, _oldValue: string, newValue: string) {
+        super.attributeChangedCallback(name, _oldValue, newValue);
+
+        switch (name) {
+            case 'anchor':
+                this.anchor = parseVec4(newValue);
+                break;
+            case 'asset':
+                this.asset = newValue;
+                break;
+            case 'auto-width':
+                this.autoWidth = newValue !== 'false';
+                break;
+            case 'color':
+                this.color = parseColor(newValue);
+                break;
+            case 'font-size':
+                this.fontSize = Number(newValue);
+                break;
+            case 'line-height':
+                this.lineHeight = Number(newValue);
+                break;
+            case 'pivot':
+                this.pivot = parseVec2(newValue);
+                break;
+            case 'text':
+                this.text = newValue;
+                break;
+            case 'type':
+                this.type = newValue as 'group' | 'image' | 'text';
+                break;
+            case 'width':
+                this.width = Number(newValue);
+                break;
+            case 'wrap-lines':
+                this.wrapLines = this.hasAttribute(name);
+                break;
+        }
+    }
+}
+
+customElements.define('pc-element', ElementComponentElement);
+
+export { ElementComponentElement };

package/src/components/gsplat-component.ts

@@ -0,0 +1,66 @@
+import { GSplatComponent } from 'playcanvas';
+
+import { ComponentElement } from './component';
+import { AssetElement } from '../asset';
+
+/**
+ * Represents a gsplat component in the PlayCanvas engine.
+ *
+ * @category Components
+ */
+class GSplatComponentElement extends ComponentElement {
+    private _asset: string = '';
+
+    constructor() {
+        super('gsplat');
+    }
+
+    getAsset() {
+        const assetElement = document.querySelector(`pc-asset[id="${this._asset}"]`) as AssetElement;
+        return assetElement!.asset;
+    }
+
+    getInitialComponentData() {
+        return {
+            asset: this.getAsset()
+        };
+    }
+
+    /**
+     * Gets the gsplat component.
+     * @returns The gsplat component.
+     */
+    get component(): GSplatComponent | null {
+        return super.component as GSplatComponent | null;
+    }
+
+    set asset(value: string) {
+        this._asset = value;
+        const asset = this.getAsset();
+        if (this.component && asset) {
+            this.component.asset = asset;
+        }
+    }
+
+    get asset() {
+        return this._asset;
+    }
+
+    static get observedAttributes() {
+        return [...super.observedAttributes, 'asset'];
+    }
+
+    attributeChangedCallback(name: string, _oldValue: string, newValue: string) {
+        super.attributeChangedCallback(name, _oldValue, newValue);
+
+        switch (name) {
+            case 'asset':
+                this.asset = newValue;
+                break;
+        }
+    }
+}
+
+customElements.define('pc-splat', GSplatComponentElement);
+
+export { GSplatComponentElement };

package/src/components/light-component.ts

@@ -0,0 +1,313 @@
+import { Color, LightComponent } from 'playcanvas';
+
+import { ComponentElement } from './component';
+import { parseColor } from '../utils';
+
+/**
+ * Represents a light component in the PlayCanvas engine.
+ *
+ * @category Components
+ */
+class LightComponentElement extends ComponentElement {
+    private _castShadows = false;
+
+    private _color = new Color(1, 1, 1);
+
+    private _innerConeAngle = 40;
+
+    private _intensity = 1;
+
+    private _normalOffsetBias = 0.05;
+
+    private _outerConeAngle = 45;
+
+    private _range = 10;
+
+    private _shadowBias = 0.2;
+
+    private _shadowDistance = 16;
+
+    private _type = 'directional';
+
+    /**
+     * Creates a new LightComponentElement.
+     */
+    constructor() {
+        super('light');
+    }
+
+    getInitialComponentData() {
+        return {
+            castShadows: this._castShadows,
+            color: this._color,
+            innerConeAngle: this._innerConeAngle,
+            intensity: this._intensity,
+            normalOffsetBias: this._normalOffsetBias,
+            outerConeAngle: this._outerConeAngle,
+            range: this._range,
+            shadowBias: this._shadowBias,
+            shadowDistance: this._shadowDistance,
+            type: this._type
+        };
+    }
+
+    /**
+     * Gets the light component.
+     * @returns The light component.
+     */
+    get component(): LightComponent | null {
+        return super.component as LightComponent | null;
+    }
+
+    /**
+     * Sets the cast shadows flag of the light.
+     * @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 light.
+     * @returns The cast shadows flag.
+     */
+    get castShadows() {
+        return this._castShadows;
+    }
+
+    /**
+     * Sets the color of the light.
+     * @param value - The color.
+     */
+    set color(value: Color) {
+        this._color = value;
+        if (this.component) {
+            this.component.color = value;
+        }
+    }
+
+    /**
+     * Gets the color of the light.
+     * @returns The color.
+     */
+    get color() {
+        return this._color;
+    }
+
+    /**
+     * Sets the inner cone angle of the light.
+     * @param value - The inner cone angle.
+     */
+    set innerConeAngle(value: number) {
+        this._innerConeAngle = value;
+        if (this.component) {
+            this.component.innerConeAngle = value;
+        }
+    }
+
+    /**
+     * Gets the inner cone angle of the light.
+     * @returns The inner cone angle.
+     */
+    get innerConeAngle() {
+        return this._innerConeAngle;
+    }
+
+    /**
+     * Sets the intensity of the light.
+     * @param value - The intensity.
+     */
+    set intensity(value: number) {
+        this._intensity = value;
+        if (this.component) {
+            this.component.intensity = value;
+        }
+    }
+
+    /**
+     * Gets the intensity of the light.
+     * @returns The intensity.
+     */
+    get intensity() {
+        return this._intensity;
+    }
+
+    /**
+     * Sets the normal offset bias of the light.
+     * @param value - The normal offset bias.
+     */
+    set normalOffsetBias(value: number) {
+        this._normalOffsetBias = value;
+        if (this.component) {
+            this.component.normalOffsetBias = value;
+        }
+    }
+
+    /**
+     * Gets the normal offset bias of the light.
+     * @returns The normal offset bias.
+     */
+    get normalOffsetBias() {
+        return this._normalOffsetBias;
+    }
+
+    /**
+     * Sets the outer cone angle of the light.
+     * @param value - The outer cone angle.
+     */
+    set outerConeAngle(value: number) {
+        this._outerConeAngle = value;
+        if (this.component) {
+            this.component.outerConeAngle = value;
+        }
+    }
+
+    /**
+     * Gets the outer cone angle of the light.
+     * @returns The outer cone angle.
+     */
+    get outerConeAngle() {
+        return this._outerConeAngle;
+    }
+
+    /**
+     * Sets the range of the light.
+     * @param value - The range.
+     */
+    set range(value: number) {
+        this._range = value;
+        if (this.component) {
+            this.component.range = value;
+        }
+    }
+
+    /**
+     * Gets the range of the light.
+     * @returns The range.
+     */
+    get range() {
+        return this._range;
+    }
+
+    /**
+     * Sets the shadow bias of the light.
+     * @param value - The shadow bias.
+     */
+    set shadowBias(value: number) {
+        this._shadowBias = value;
+        if (this.component) {
+            this.component.shadowBias = value;
+        }
+    }
+
+    /**
+     * Gets the shadow bias of the light.
+     * @returns The shadow bias.
+     */
+    get shadowBias() {
+        return this._shadowBias;
+    }
+
+    /**
+     * Sets the shadow distance of the light.
+     * @param value - The shadow distance.
+     */
+    set shadowDistance(value: number) {
+        this._shadowDistance = value;
+        if (this.component) {
+            this.component.shadowDistance = value;
+        }
+    }
+
+    /**
+     * Gets the shadow distance of the light.
+     * @returns The shadow distance.
+     */
+    get shadowDistance() {
+        return this._shadowDistance;
+    }
+
+    /**
+     * Sets the type of the light.
+     * @param value - The type.
+     */
+    set type(value: string) {
+        if (!['directional', 'omni', 'spot'].includes(value)) {
+            console.warn(`Invalid light type '${value}', using default type '${this._type}'.`);
+            return;
+        }
+
+        this._type = value;
+        if (this.component) {
+            this.component.type = value;
+        }
+    }
+
+    /**
+     * Gets the type of the light.
+     * @returns The type.
+     */
+    get type() {
+        return this._type;
+    }
+
+    static get observedAttributes() {
+        return [
+            ...super.observedAttributes,
+            'color',
+            'cast-shadows',
+            'intensity',
+            'inner-cone-angle',
+            'normal-offset-bias',
+            'outer-cone-angle',
+            'range',
+            'shadow-bias',
+            'shadow-distance',
+            'type'
+        ];
+    }
+
+    attributeChangedCallback(name: string, _oldValue: string, newValue: string) {
+        super.attributeChangedCallback(name, _oldValue, newValue);
+
+        switch (name) {
+            case 'color':
+                this.color = parseColor(newValue);
+                break;
+            case 'cast-shadows':
+                this.castShadows = this.hasAttribute('cast-shadows');
+                break;
+            case 'inner-cone-angle':
+                this.innerConeAngle = Number(newValue);
+                break;
+            case 'intensity':
+                this.intensity = Number(newValue);
+                break;
+            case 'normal-offset-bias':
+                this.normalOffsetBias = Number(newValue);
+                break;
+            case 'outer-cone-angle':
+                this.outerConeAngle = Number(newValue);
+                break;
+            case 'range':
+                this.range = Number(newValue);
+                break;
+            case 'shadow-bias':
+                this.shadowBias = Number(newValue);
+                break;
+            case 'shadow-distance':
+                this.shadowDistance = Number(newValue);
+                break;
+            case 'type':
+                this.type = newValue;
+                break;
+        }
+    }
+}
+
+customElements.define('pc-light', LightComponentElement);
+
+export { LightComponentElement };

package/src/components/listener-component.ts

@@ -0,0 +1,26 @@
+import { AudioListenerComponent } from 'playcanvas';
+
+import { ComponentElement } from './component';
+
+/**
+ * Represents a audio listener component in the PlayCanvas engine.
+ *
+ * @category Components
+ */
+class ListenerComponentElement extends ComponentElement {
+    constructor() {
+        super('audiolistener');
+    }
+
+    /**
+     * Gets the audio listener component.
+     * @returns The audio listener component.
+     */
+    get component(): AudioListenerComponent | null {
+        return super.component as AudioListenerComponent | null;
+    }
+}
+
+customElements.define('pc-listener', ListenerComponentElement);
+
+export { ListenerComponentElement };