@playcanvas/web-components 0.1.6 → 0.1.8

package/dist/pwc.mjs

@@ -1,4 +1,4 @@
-import { basisInitialize, WasmModule, Application, Mouse, Keyboard, FILLMODE_FILL_WINDOW, RESOLUTION_AUTO, Vec3, Vec4, Color, Quat, Vec2, Entity, Asset, XRTYPE_VR, PROJECTION_ORTHOGRAPHIC, PROJECTION_PERSPECTIVE, StandardMaterial, SCALEMODE_BLEND, SCALEMODE_NONE, EnvLighting, LAYERID_SKYBOX } from 'playcanvas';
+import { basisInitialize, WasmModule, Application, Keyboard, Mouse, FILLMODE_FILL_WINDOW, RESOLUTION_AUTO, Color, Quat, Vec2, Vec3, Vec4, Entity, Asset, XRTYPE_VR, PROJECTION_ORTHOGRAPHIC, PROJECTION_PERSPECTIVE, StandardMaterial, SCALEMODE_BLEND, SCALEMODE_NONE, EnvLighting, LAYERID_SKYBOX } from 'playcanvas';
 
 /**
  * Base class for all PlayCanvas web components that initialize asynchronously.
@@ -257,6 +257,157 @@ class AppElement extends AsyncElement {
 }
 customElements.define('pc-app', AppElement);
 
+const CSS_COLORS = {
+    aliceblue: '#f0f8ff',
+    antiquewhite: '#faebd7',
+    aqua: '#00ffff',
+    aquamarine: '#7fffd4',
+    azure: '#f0ffff',
+    beige: '#f5f5dc',
+    bisque: '#ffe4c4',
+    black: '#000000',
+    blanchedalmond: '#ffebcd',
+    blue: '#0000ff',
+    blueviolet: '#8a2be2',
+    brown: '#a52a2a',
+    burlywood: '#deb887',
+    cadetblue: '#5f9ea0',
+    chartreuse: '#7fff00',
+    chocolate: '#d2691e',
+    coral: '#ff7f50',
+    cornflowerblue: '#6495ed',
+    cornsilk: '#fff8dc',
+    crimson: '#dc143c',
+    cyan: '#00ffff',
+    darkblue: '#00008b',
+    darkcyan: '#008b8b',
+    darkgoldenrod: '#b8860b',
+    darkgray: '#a9a9a9',
+    darkgreen: '#006400',
+    darkgrey: '#a9a9a9',
+    darkkhaki: '#bdb76b',
+    darkmagenta: '#8b008b',
+    darkolivegreen: '#556b2f',
+    darkorange: '#ff8c00',
+    darkorchid: '#9932cc',
+    darkred: '#8b0000',
+    darksalmon: '#e9967a',
+    darkseagreen: '#8fbc8f',
+    darkslateblue: '#483d8b',
+    darkslategray: '#2f4f4f',
+    darkslategrey: '#2f4f4f',
+    darkturquoise: '#00ced1',
+    darkviolet: '#9400d3',
+    deeppink: '#ff1493',
+    deepskyblue: '#00bfff',
+    dimgray: '#696969',
+    dimgrey: '#696969',
+    dodgerblue: '#1e90ff',
+    firebrick: '#b22222',
+    floralwhite: '#fffaf0',
+    forestgreen: '#228b22',
+    fuchsia: '#ff00ff',
+    gainsboro: '#dcdcdc',
+    ghostwhite: '#f8f8ff',
+    gold: '#ffd700',
+    goldenrod: '#daa520',
+    gray: '#808080',
+    green: '#008000',
+    greenyellow: '#adff2f',
+    grey: '#808080',
+    honeydew: '#f0fff0',
+    hotpink: '#ff69b4',
+    indianred: '#cd5c5c',
+    indigo: '#4b0082',
+    ivory: '#fffff0',
+    khaki: '#f0e68c',
+    lavender: '#e6e6fa',
+    lavenderblush: '#fff0f5',
+    lawngreen: '#7cfc00',
+    lemonchiffon: '#fffacd',
+    lightblue: '#add8e6',
+    lightcoral: '#f08080',
+    lightcyan: '#e0ffff',
+    lightgoldenrodyellow: '#fafad2',
+    lightgray: '#d3d3d3',
+    lightgreen: '#90ee90',
+    lightgrey: '#d3d3d3',
+    lightpink: '#ffb6c1',
+    lightsalmon: '#ffa07a',
+    lightseagreen: '#20b2aa',
+    lightskyblue: '#87cefa',
+    lightslategray: '#778899',
+    lightslategrey: '#778899',
+    lightsteelblue: '#b0c4de',
+    lightyellow: '#ffffe0',
+    lime: '#00ff00',
+    limegreen: '#32cd32',
+    linen: '#faf0e6',
+    magenta: '#ff00ff',
+    maroon: '#800000',
+    mediumaquamarine: '#66cdaa',
+    mediumblue: '#0000cd',
+    mediumorchid: '#ba55d3',
+    mediumpurple: '#9370db',
+    mediumseagreen: '#3cb371',
+    mediumslateblue: '#7b68ee',
+    mediumspringgreen: '#00fa9a',
+    mediumturquoise: '#48d1cc',
+    mediumvioletred: '#c71585',
+    midnightblue: '#191970',
+    mintcream: '#f5fffa',
+    mistyrose: '#ffe4e1',
+    moccasin: '#ffe4b5',
+    navajowhite: '#ffdead',
+    navy: '#000080',
+    oldlace: '#fdf5e6',
+    olive: '#808000',
+    olivedrab: '#6b8e23',
+    orange: '#ffa500',
+    orangered: '#ff4500',
+    orchid: '#da70d6',
+    palegoldenrod: '#eee8aa',
+    palegreen: '#98fb98',
+    paleturquoise: '#afeeee',
+    palevioletred: '#db7093',
+    papayawhip: '#ffefd5',
+    peachpuff: '#ffdab9',
+    peru: '#cd853f',
+    pink: '#ffc0cb',
+    plum: '#dda0dd',
+    powderblue: '#b0e0e6',
+    purple: '#800080',
+    rebeccapurple: '#663399',
+    red: '#ff0000',
+    rosybrown: '#bc8f8f',
+    royalblue: '#4169e1',
+    saddlebrown: '#8b4513',
+    salmon: '#fa8072',
+    sandybrown: '#f4a460',
+    seagreen: '#2e8b57',
+    seashell: '#fff5ee',
+    sienna: '#a0522d',
+    silver: '#c0c0c0',
+    skyblue: '#87ceeb',
+    slateblue: '#6a5acd',
+    slategray: '#708090',
+    slategrey: '#708090',
+    snow: '#fffafa',
+    springgreen: '#00ff7f',
+    steelblue: '#4682b4',
+    tan: '#d2b48c',
+    teal: '#008080',
+    thistle: '#d8bfd8',
+    tomato: '#ff6347',
+    turquoise: '#40e0d0',
+    violet: '#ee82ee',
+    wheat: '#f5deb3',
+    white: '#ffffff',
+    whitesmoke: '#f5f5f5',
+    yellow: '#ffff00',
+    yellowgreen: '#9acd32'
+};
+
 /**
  * Parse a color string into a Color object. String can be in the format of '#rgb', '#rgba',
  * '#rrggbb', '#rrggbbaa', or a string of 3 or 4 comma-delimited numbers.
@@ -265,10 +416,15 @@ customElements.define('pc-app', AppElement);
  * @returns The parsed Color object.
  */
 const parseColor = (value) => {
+    // Check if it's a CSS color name first
+    const hexColor = CSS_COLORS[value.toLowerCase()];
+    if (hexColor) {
+        return new Color().fromString(hexColor);
+    }
     if (value.startsWith('#')) {
         return new Color().fromString(value);
     }
-    const components = value.split(',').map(Number);
+    const components = value.split(' ').map(Number);
     return new Color(components);
 };
 /**
@@ -278,7 +434,7 @@ const parseColor = (value) => {
  * @returns The parsed Quat object.
  */
 const parseQuat = (value) => {
-    const [x, y, z] = value.split(',').map(Number);
+    const [x, y, z] = value.split(' ').map(Number);
     const q = new Quat();
     q.setFromEulerAngles(x, y, z);
     return q;
@@ -290,7 +446,7 @@ const parseQuat = (value) => {
  * @returns The parsed Vec2 object.
  */
 const parseVec2 = (value) => {
-    const components = value.split(',').map(Number);
+    const components = value.split(' ').map(Number);
     return new Vec2(components);
 };
 /**
@@ -300,7 +456,7 @@ const parseVec2 = (value) => {
  * @returns The parsed Vec3 object.
  */
 const parseVec3 = (value) => {
-    const components = value.split(',').map(Number);
+    const components = value.split(' ').map(Number);
     return new Vec3(components);
 };
 /**
@@ -310,7 +466,7 @@ const parseVec3 = (value) => {
  * @returns The parsed Vec4 object.
  */
 const parseVec4 = (value) => {
-    const components = value.split(',').map(Number);
+    const components = value.split(' ').map(Number);
     return new Vec4(components);
 };
 
@@ -359,11 +515,14 @@ class EntityElement extends AsyncElement {
         // Create a new entity
         this.entity = new Entity(this._name, app);
         // Initialize from attributes
+        const enabledAttr = this.getAttribute('enabled');
         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 (enabledAttr)
+            this.enabled = enabledAttr !== 'false';
         if (nameAttr)
             this.name = nameAttr;
         if (positionAttr)
@@ -1535,6 +1694,7 @@ class LightComponentElement extends ComponentElement {
         this._range = 10;
         this._shadowBias = 0.2;
         this._shadowDistance = 16;
+        this._shadowResolution = 1024;
         this._type = 'directional';
     }
     getInitialComponentData() {
@@ -1548,6 +1708,7 @@ class LightComponentElement extends ComponentElement {
             range: this._range,
             shadowBias: this._shadowBias,
             shadowDistance: this._shadowDistance,
+            shadowResolution: this._shadowResolution,
             type: this._type
         };
     }
@@ -1711,6 +1872,23 @@ class LightComponentElement extends ComponentElement {
     get shadowDistance() {
         return this._shadowDistance;
     }
+    /**
+     * Sets the shadow resolution of the light.
+     * @param value - The shadow resolution.
+     */
+    set shadowResolution(value) {
+        this._shadowResolution = value;
+        if (this.component) {
+            this.component.shadowResolution = value;
+        }
+    }
+    /**
+     * Gets the shadow resolution of the light.
+     * @returns The shadow resolution.
+     */
+    get shadowResolution() {
+        return this._shadowResolution;
+    }
     /**
      * Sets the type of the light.
      * @param value - The type.
@@ -1744,6 +1922,7 @@ class LightComponentElement extends ComponentElement {
             'range',
             'shadow-bias',
             'shadow-distance',
+            'shadow-resolution',
             'type'
         ];
     }
@@ -1777,6 +1956,9 @@ class LightComponentElement extends ComponentElement {
             case 'shadow-distance':
                 this.shadowDistance = Number(newValue);
                 break;
+            case 'shadow-resolution':
+                this.shadowResolution = Number(newValue);
+                break;
             case 'type':
                 this.type = newValue;
                 break;
@@ -2360,23 +2542,47 @@ class ScriptComponentElement extends ComponentElement {
     }
     applyAttributes(script, attributes) {
         try {
-            // Parse the attributes string into an object and set them on the script
             const attributesObject = attributes ? JSON.parse(attributes) : {};
-            for (const key in attributesObject) {
-                const value = attributesObject[key];
-                if (Array.isArray(value) && script[key] instanceof Vec2) {
-                    script[key] = tmpV2.set(value[0], value[1]);
-                    continue;
+            const applyValue = (target, key, value) => {
+                // Handle asset references
+                if (typeof value === 'string' && value.startsWith('asset:')) {
+                    const assetId = value.slice(6);
+                    const assetElement = document.querySelector(`pc-asset#${assetId}`);
+                    if (assetElement) {
+                        target[key] = assetElement.asset;
+                        return;
+                    }
+                }
+                // Handle vectors
+                if (Array.isArray(value)) {
+                    if (target[key] instanceof Vec2) {
+                        target[key] = tmpV2.set(value[0], value[1]);
+                        return;
+                    }
+                    if (target[key] instanceof Vec3) {
+                        target[key] = tmpV3.set(value[0], value[1], value[2]);
+                        return;
+                    }
+                    if (target[key] instanceof Vec4) {
+                        target[key] = tmpV4.set(value[0], value[1], value[2], value[3]);
+                        return;
+                    }
                 }
-                if (Array.isArray(value) && script[key] instanceof Vec3) {
-                    script[key] = tmpV3.set(value[0], value[1], value[2]);
-                    continue;
+                // Handle nested objects
+                if (value && typeof value === 'object' && !Array.isArray(value)) {
+                    if (!target[key] || typeof target[key] !== 'object') {
+                        target[key] = {};
+                    }
+                    for (const nestedKey in value) {
+                        applyValue(target[key], nestedKey, value[nestedKey]);
+                    }
                 }
-                if (Array.isArray(value) && script[key] instanceof Vec4) {
-                    script[key] = tmpV4.set(value[0], value[1], value[2], value[3]);
-                    continue;
+                else {
+                    target[key] = value;
                 }
-                script[key] = value;
+            };
+            for (const key in attributesObject) {
+                applyValue(script, key, attributesObject[key]);
             }
         }
         catch (error) {
@@ -2975,48 +3181,71 @@ class ModelElement extends AsyncElement {
     constructor() {
         super(...arguments);
         this._asset = '';
+        this._entity = null;
     }
-    async connectedCallback() {
-        var _a;
-        await ((_a = this.closestApp) === null || _a === void 0 ? void 0 : _a.ready());
-        const asset = this.getAttribute('asset');
-        if (asset) {
-            this.asset = asset;
-        }
+    connectedCallback() {
+        this._loadModel();
         this._onReady();
     }
-    _loadModel() {
-        const asset = AssetElement.get(this._asset);
-        if (!asset) {
-            return;
-        }
-        const entity = asset.resource.instantiateRenderEntity();
-        if (asset.resource.animations.length > 0) {
-            entity.addComponent('anim');
-            entity.anim.assignAnimation('animation', asset.resource.animations[0].resource);
+    disconnectedCallback() {
+        this._unloadModel();
+    }
+    _instantiate(container) {
+        this._entity = container.instantiateRenderEntity();
+        // @ts-ignore
+        if (container.animations.length > 0) {
+            this._entity.addComponent('anim');
+            // @ts-ignore
+            this._entity.anim.assignAnimation('animation', container.animations[0].resource);
         }
         const parentEntityElement = this.closestEntity;
         if (parentEntityElement) {
             parentEntityElement.ready().then(() => {
-                parentEntityElement.entity.addChild(entity);
+                parentEntityElement.entity.addChild(this._entity);
             });
         }
         else {
             const appElement = this.closestApp;
             if (appElement) {
                 appElement.ready().then(() => {
-                    appElement.app.root.addChild(entity);
+                    appElement.app.root.addChild(this._entity);
                 });
             }
         }
     }
+    async _loadModel() {
+        var _a;
+        this._unloadModel();
+        const appElement = await ((_a = this.closestApp) === null || _a === void 0 ? void 0 : _a.ready());
+        const app = appElement === null || appElement === void 0 ? void 0 : appElement.app;
+        const asset = AssetElement.get(this._asset);
+        if (!asset) {
+            return;
+        }
+        if (asset.loaded) {
+            this._instantiate(asset.resource);
+        }
+        else {
+            asset.once('load', () => {
+                this._instantiate(asset.resource);
+            });
+            app.assets.load(asset);
+        }
+    }
+    _unloadModel() {
+        var _a;
+        (_a = this._entity) === null || _a === void 0 ? void 0 : _a.destroy();
+        this._entity = null;
+    }
     /**
      * Sets the asset ID of the model.
      * @param value - The asset ID.
      */
     set asset(value) {
         this._asset = value;
-        this._loadModel();
+        if (this.isConnected) {
+            this._loadModel();
+        }
     }
     /**
      * Gets the source URL of the model.
@@ -3208,48 +3437,77 @@ class SkyElement extends AsyncElement {
         this._intensity = 1;
         this._rotation = new Vec3();
         this._level = 0;
+        this._lighting = false;
         this._scale = new Vec3(100, 100, 100);
         this._type = 'infinite';
+        this._scene = null;
     }
-    async connectedCallback() {
-        var _a;
-        await ((_a = this.closestApp) === null || _a === void 0 ? void 0 : _a.ready());
-        this.asset = this.getAttribute('asset') || '';
+    connectedCallback() {
+        this._loadSkybox();
         this._onReady();
     }
-    getScene() {
-        const app = this.closestApp.app;
+    disconnectedCallback() {
+        this._unloadSkybox();
+    }
+    _generateSkybox(asset) {
+        if (!this._scene)
+            return;
+        const source = asset.resource;
+        const skybox = EnvLighting.generateSkyboxCubemap(source);
+        skybox.anisotropy = 4;
+        this._scene.skybox = skybox;
+        if (this._lighting) {
+            const lighting = EnvLighting.generateLightingSource(source);
+            const envAtlas = EnvLighting.generateAtlas(lighting);
+            this._scene.envAtlas = envAtlas;
+        }
+        const layer = this._scene.layers.getLayerById(LAYERID_SKYBOX);
+        if (layer) {
+            layer.enabled = this._type !== 'none';
+        }
+        this._scene.sky.type = this._type;
+        this._scene.sky.node.setLocalScale(this._scale);
+        this._scene.sky.center = this._center;
+        this._scene.skyboxIntensity = this._intensity;
+    }
+    async _loadSkybox() {
+        var _a;
+        const appElement = await ((_a = this.closestApp) === null || _a === void 0 ? void 0 : _a.ready());
+        const app = appElement === null || appElement === void 0 ? void 0 : appElement.app;
         if (!app) {
             return;
         }
-        return app.scene;
-    }
-    initSkybox(source) {
-        source.anisotropy = 4;
-        const skybox = EnvLighting.generateSkyboxCubemap(source);
-        const lighting = EnvLighting.generateLightingSource(source);
-        const envAtlas = EnvLighting.generateAtlas(lighting);
-        const app = this.closestApp.app;
-        if (app) {
-            app.scene.envAtlas = envAtlas;
-            app.scene.skybox = skybox;
-            const layer = app.scene.layers.getLayerById(LAYERID_SKYBOX);
-            if (layer) {
-                layer.enabled = this._type !== 'none';
-            }
-            app.scene.sky.type = this._type;
-            app.scene.sky.node.setLocalScale(this._scale);
-            app.scene.sky.center = this._center;
+        const asset = AssetElement.get(this._asset);
+        if (!asset) {
+            return;
+        }
+        this._scene = app.scene;
+        if (asset.loaded) {
+            this._generateSkybox(asset);
+        }
+        else {
+            asset.once('load', () => {
+                this._generateSkybox(asset);
+            });
+            app.assets.load(asset);
         }
     }
+    _unloadSkybox() {
+        var _a, _b;
+        if (!this._scene)
+            return;
+        (_a = this._scene.skybox) === null || _a === void 0 ? void 0 : _a.destroy();
+        // @ts-ignore
+        this._scene.skybox = null;
+        (_b = this._scene.envAtlas) === null || _b === void 0 ? void 0 : _b.destroy();
+        // @ts-ignore
+        this._scene.envAtlas = null;
+        this._scene = null;
+    }
     set asset(value) {
         this._asset = value;
-        const scene = this.getScene();
-        if (scene) {
-            const asset = AssetElement.get(value);
-            if (asset) {
-                this.initSkybox(asset.resource);
-            }
+        if (this.isConnected) {
+            this._loadSkybox();
         }
     }
     get asset() {
@@ -3257,9 +3515,8 @@ class SkyElement extends AsyncElement {
     }
     set center(value) {
         this._center = value;
-        const scene = this.getScene();
-        if (scene) {
-            scene.sky.center = this._center;
+        if (this._scene) {
+            this._scene.sky.center = this._center;
         }
     }
     get center() {
@@ -3267,19 +3524,32 @@ class SkyElement extends AsyncElement {
     }
     set intensity(value) {
         this._intensity = value;
-        const scene = this.getScene();
-        if (scene) {
-            scene.skyboxIntensity = this._intensity;
+        if (this._scene) {
+            this._scene.skyboxIntensity = this._intensity;
         }
     }
     get intensity() {
         return this._intensity;
     }
+    set level(value) {
+        this._level = value;
+        if (this._scene) {
+            this._scene.skyboxMip = this._level;
+        }
+    }
+    get level() {
+        return this._level;
+    }
+    set lighting(value) {
+        this._lighting = value;
+    }
+    get lighting() {
+        return this._lighting;
+    }
     set rotation(value) {
         this._rotation = value;
-        const scene = this.getScene();
-        if (scene) {
-            scene.skyboxRotation = new Quat().setFromEulerAngles(value);
+        if (this._scene) {
+            this._scene.skyboxRotation = new Quat().setFromEulerAngles(value);
         }
     }
     get rotation() {
@@ -3287,30 +3557,18 @@ class SkyElement extends AsyncElement {
     }
     set scale(value) {
         this._scale = value;
-        const scene = this.getScene();
-        if (scene) {
-            scene.sky.node.setLocalScale(this._scale);
+        if (this._scene) {
+            this._scene.sky.node.setLocalScale(this._scale);
         }
     }
     get scale() {
         return this._scale;
     }
-    set level(value) {
-        this._level = value;
-        const scene = this.getScene();
-        if (scene) {
-            scene.skyboxMip = this._level;
-        }
-    }
-    get level() {
-        return this._level;
-    }
     set type(value) {
         this._type = value;
-        const scene = this.getScene();
-        if (scene) {
-            scene.sky.type = this._type;
-            const layer = scene.layers.getLayerById(LAYERID_SKYBOX);
+        if (this._scene) {
+            this._scene.sky.type = this._type;
+            const layer = this._scene.layers.getLayerById(LAYERID_SKYBOX);
             if (layer) {
                 layer.enabled = this._type !== 'none';
             }
@@ -3320,7 +3578,7 @@ class SkyElement extends AsyncElement {
         return this._type;
     }
     static get observedAttributes() {
-        return ['asset', 'center', 'intensity', 'level', 'rotation', 'scale', 'type'];
+        return ['asset', 'center', 'intensity', 'level', 'lighting', 'rotation', 'scale', 'type'];
     }
     attributeChangedCallback(name, _oldValue, newValue) {
         switch (name) {
@@ -3333,12 +3591,15 @@ class SkyElement extends AsyncElement {
             case 'intensity':
                 this.intensity = parseFloat(newValue);
                 break;
-            case 'rotation':
-                this.rotation = parseVec3(newValue);
-                break;
             case 'level':
                 this.level = parseInt(newValue, 10);
                 break;
+            case 'lighting':
+                this.lighting = this.hasAttribute(name);
+                break;
+            case 'rotation':
+                this.rotation = parseVec3(newValue);
+                break;
             case 'scale':
                 this.scale = parseVec3(newValue);
                 break;