@animech-public/playcanvas/build/playcanvas/src/framework/components/element/image-element.js

PlayCanvas WebGL game engine

import{math as e}from"../../../core/math/math.js";import{Color as t}from"../../../core/math/color.js";import{Vec2 as s}from"../../../core/math/vec2.js";import{Vec3 as i}from"../../../core/math/vec3.js";import{Vec4 as r}from"../../../core/math/vec4.js";import{SEMANTIC_POSITION as a,TYPE_FLOAT32 as h,SEMANTIC_NORMAL as n,SEMANTIC_TEXCOORD0 as l,PRIMITIVE_TRISTRIP as o,FUNC_EQUAL as _,STENCILOP_DECREMENT as m}from"../../../platform/graphics/constants.js";import{VertexBuffer as c}from"../../../platform/graphics/vertex-buffer.js";import{VertexFormat as d}from"../../../platform/graphics/vertex-format.js";import{DeviceCache as p}from"../../../platform/graphics/device-cache.js";import{SPRITE_RENDERMODE_SLICED as u,SPRITE_RENDERMODE_TILED as f,LAYER_HUD as A,LAYER_WORLD as b,SPRITE_RENDERMODE_SIMPLE as M}from"../../../scene/constants.js";import{GraphNode as x}from"../../../scene/graph-node.js";import{Mesh as g}from"../../../scene/mesh.js";import{MeshInstance as y}from"../../../scene/mesh-instance.js";import{Model as S}from"../../../scene/model.js";import{StencilParameters as I}from"../../../platform/graphics/stencil-parameters.js";import{FITMODE_STRETCH as v,FITMODE_CONTAIN as k,FITMODE_COVER as w}from"./constants.js";import{Asset as P}from"../../asset/asset.js";const U=new p;class R{constructor(e,t,s){this._entity=e,this._element=e.element,this.model=new S,this.node=new x,this.model.graph=this.node,this.mesh=t,this.meshInstance=new y(this.mesh,s,this.node),this.meshInstance.name=`ImageElement: ${e.name}`,this.meshInstance.castShadow=!1,this.meshInstance.receiveShadow=!1,this._meshDirty=!1,this.model.meshInstances.push(this.meshInstance),this._entity.addChild(this.model.graph),this.model._entity=this._entity,this.unmaskMeshInstance=null}destroy(){var e,t;this.setMaterial(null),this._element.removeModelFromLayers(this.model),this.model.destroy(),this.model=null,this.node=null,this.mesh=null,null==(e=this.meshInstance)||e.destroy(),this.meshInstance=null,null==(t=this.unmaskMeshInstance)||t.destroy(),this.unmaskMeshInstance=null,this._entity=null,this._element=null}setMesh(e){this.meshInstance&&(this.mesh=e,this.meshInstance.mesh=e,this.meshInstance.visible=!!e,this.unmaskMeshInstance&&(this.unmaskMeshInstance.mesh=e),this.forceUpdateAabb())}setMask(e){if(this.meshInstance){if(this._entity.enabled&&this._element.enabled&&this._element.removeModelFromLayers(this.model),e){this.unmaskMeshInstance=new y(this.mesh,this.meshInstance.material,this.node),this.unmaskMeshInstance.name=`Unmask: ${this._entity.name}`,this.unmaskMeshInstance.castShadow=!1,this.unmaskMeshInstance.receiveShadow=!1,this.unmaskMeshInstance.pick=!1,this.model.meshInstances.push(this.unmaskMeshInstance);for(const e in this.meshInstance.parameters)this.unmaskMeshInstance.setParameter(e,this.meshInstance.parameters[e].data)}else{const e=this.model.meshInstances.indexOf(this.unmaskMeshInstance);e>=0&&this.model.meshInstances.splice(e,1)}var t;if(this._entity.enabled&&this._element.enabled&&this._element.addModelToLayers(this.model),!e)null==(t=this.unmaskMeshInstance)||t.destroy(),this.unmaskMeshInstance=null}}setMaterial(e){this.meshInstance&&(this.meshInstance.material=e,this.unmaskMeshInstance&&(this.unmaskMeshInstance.material=e))}setParameter(e,t){this.meshInstance&&(this.meshInstance.setParameter(e,t),this.unmaskMeshInstance&&this.unmaskMeshInstance.setParameter(e,t))}deleteParameter(e){this.meshInstance&&(this.meshInstance.deleteParameter(e),this.unmaskMeshInstance&&this.unmaskMeshInstance.deleteParameter(e))}setUnmaskDrawOrder(){if(!this.meshInstance)return;const e=function e(t){let s;const i=t.children,r=i.length;if(r){for(let e=0;e<r;e++)i[e].element&&(s=i[e]);if(!s)return null;const t=e(s);return t||s}return null};if(this.unmaskMeshInstance){const t=e(this._entity);t&&t.element?this.unmaskMeshInstance.drawOrder=t.element.drawOrder+t.element.getMaskOffset():this.unmaskMeshInstance.drawOrder=this.meshInstance.drawOrder+this._element.getMaskOffset()}}setDrawOrder(e){this.meshInstance&&(this.meshInstance.drawOrder=e)}setCull(e){if(!this.meshInstance)return;const t=this._element;let s=null;e&&t._isScreenSpace()&&(s=function(e){return t.isVisibleForCamera(e)}),this.meshInstance.cull=e,this.meshInstance.isVisibleFunc=s,this.unmaskMeshInstance&&(this.unmaskMeshInstance.cull=e,this.unmaskMeshInstance.isVisibleFunc=s)}setScreenSpace(e){this.meshInstance&&(this.meshInstance.screenSpace=e,this.unmaskMeshInstance&&(this.unmaskMeshInstance.screenSpace=e))}setLayer(e){this.meshInstance&&(this.meshInstance.layer=e,this.unmaskMeshInstance&&(this.unmaskMeshInstance.layer=e))}forceUpdateAabb(e){this.meshInstance&&(this.meshInstance._aabbVer=-1,this.unmaskMeshInstance&&(this.unmaskMeshInstance._aabbVer=-1))}setAabbFunc(e){this.meshInstance&&(this.meshInstance._updateAabbFunc=e,this.unmaskMeshInstance&&(this.unmaskMeshInstance._updateAabbFunc=e))}}class C{constructor(e){this._evtSetMeshes=null,this._element=e,this._entity=e.entity,this._system=e.system,this._textureAsset=null,this._texture=null,this._materialAsset=null,this._material=null,this._spriteAsset=null,this._sprite=null,this._spriteFrame=0,this._pixelsPerUnit=null,this._targetAspectRatio=-1,this._rect=new r(0,0,1,1),this._mask=!1,this._maskRef=0,this._outerScale=new s,this._outerScaleUniform=new Float32Array(2),this._innerOffset=new r,this._innerOffsetUniform=new Float32Array(4),this._atlasRect=new r,this._atlasRectUniform=new Float32Array(4),this._defaultMesh=this._createMesh(),this._renderable=new R(this._entity,this._defaultMesh,this._material),this._color=new t(1,1,1,1),this._colorUniform=new Float32Array([1,1,1]),this._renderable.setParameter("material_emissive",this._colorUniform),this._renderable.setParameter("material_opacity",1),this._updateAabbFunc=this._updateAabb.bind(this),this._onScreenChange(this._element.screen),this._element.on("resize",this._onParentResizeOrPivotChange,this),this._element.on("set:pivot",this._onParentResizeOrPivotChange,this),this._element.on("screen:set:screenspace",this._onScreenSpaceChange,this),this._element.on("set:screen",this._onScreenChange,this),this._element.on("set:draworder",this._onDrawOrderChange,this),this._element.on("screen:set:resolution",this._onResolutionChange,this)}destroy(){this.textureAsset=null,this.spriteAsset=null,this.materialAsset=null,this._renderable.setMesh(this._defaultMesh),this._renderable.destroy(),this._defaultMesh=null,this._element.off("resize",this._onParentResizeOrPivotChange,this),this._element.off("set:pivot",this._onParentResizeOrPivotChange,this),this._element.off("screen:set:screenspace",this._onScreenSpaceChange,this),this._element.off("set:screen",this._onScreenChange,this),this._element.off("set:draworder",this._onDrawOrderChange,this),this._element.off("screen:set:resolution",this._onResolutionChange,this)}_onResolutionChange(e){}_onParentResizeOrPivotChange(){this._renderable.mesh&&this._updateMesh(this._renderable.mesh)}_onScreenSpaceChange(e){this._updateMaterial(e)}_onScreenChange(e,t){e?this._updateMaterial(e.screen.screenSpace):this._updateMaterial(!1)}_onDrawOrderChange(e){this._renderable.setDrawOrder(e),this.mask&&this._element.screen&&this._element.screen.screen.once("syncdraworder",(function(){this._renderable.setUnmaskDrawOrder()}),this)}_hasUserMaterial(){return!!this._materialAsset||!!this._material&&-1===this._system.defaultImageMaterials.indexOf(this._material)}_use9Slicing(){return this.sprite&&(this.sprite.renderMode===u||this.sprite.renderMode===f)}_updateMaterial(e){const t=!!this._mask,s=!(!this.sprite||this.sprite.renderMode!==u),i=!(!this.sprite||this.sprite.renderMode!==f);this._hasUserMaterial()||(this._material=this._system.getImageElementMaterial(e,t,s,i)),this._renderable&&(this._renderable.setCull(!this._element._isScreenSpace()||this._element._isScreenCulled()),this._renderable.setMaterial(this._material),this._renderable.setScreenSpace(e),this._renderable.setLayer(e?A:b))}_createMesh(){const e=this._element,t=e.calculatedWidth,s=e.calculatedHeight,r=this._rect,_=this._system.app.graphicsDevice,m=new Float32Array([t,0,0,0,0,1,r.x+r.z,1-r.y,t,s,0,0,0,1,r.x+r.z,1-(r.y+r.w),0,0,0,0,0,1,r.x,1-r.y,0,s,0,0,0,1,r.x,1-(r.y+r.w)]),p=U.get(_,(()=>new d(_,[{semantic:a,components:3,type:h},{semantic:n,components:3,type:h},{semantic:l,components:2,type:h}]))),u=new c(_,p,4,{data:m.buffer}),f=new g(_);return f.vertexBuffer=u,f.primitive[0].type=o,f.primitive[0].base=0,f.primitive[0].count=4,f.primitive[0].indexed=!1,f.aabb.setMinMax(i.ZERO,new i(t,s,0)),this._updateMesh(f),f}_updateMesh(t){const s=this._element;let r=s.calculatedWidth,a=s.calculatedHeight;if(s.fitMode!==v&&this._targetAspectRatio>0){const e=s.calculatedWidth/s.calculatedHeight;s.fitMode===k&&e>this._targetAspectRatio||s.fitMode===w&&e<this._targetAspectRatio?r=s.calculatedHeight*this._targetAspectRatio:a=s.calculatedWidth/this._targetAspectRatio}const h=s._isScreenSpace();if(this._updateMaterial(h),this._renderable&&this._renderable.forceUpdateAabb(),!this.sprite||this.sprite.renderMode!==u&&this.sprite.renderMode!==f){const e=t.vertexBuffer,h=new Float32Array(e.lock()),n=s.pivot.x,l=s.pivot.y;h[0]=r-n*r,h[1]=0-l*a,h[8]=r-n*r,h[9]=a-l*a,h[16]=0-n*r,h[17]=0-l*a,h[24]=0-n*r,h[25]=a-l*a;let o=1,_=1,m=this._rect;if(this._sprite&&this._sprite.frameKeys[this._spriteFrame]&&this._sprite.atlas){const e=this._sprite.atlas.frames[this._sprite.frameKeys[this._spriteFrame]];e&&(m=e.rect,o=this._sprite.atlas.texture.width,_=this._sprite.atlas.texture.height)}h[6]=(m.x+m.z)/o,h[7]=1-m.y/_,h[14]=(m.x+m.z)/o,h[15]=1-(m.y+m.w)/_,h[22]=m.x/o,h[23]=1-m.y/_,h[30]=m.x/o,h[31]=1-(m.y+m.w)/_,e.unlock();const c=new i(0-n*r,0-l*a,0),d=new i(r-n*r,a-l*a,0);t.aabb.setMinMax(c,d),this._renderable&&(this._renderable.node.setLocalScale(1,1,1),this._renderable.node.setLocalPosition(0,0,0),this._renderable.setAabbFunc(null))}else{const t=this._sprite.atlas.frames[this._sprite.frameKeys[this._spriteFrame]],i=2/t.rect.z,h=2/t.rect.w;this._innerOffset.set(t.border.x*i,t.border.y*h,t.border.z*i,t.border.w*h);const n=this.sprite.atlas.texture;this._atlasRect.set(t.rect.x/n.width,t.rect.y/n.height,t.rect.z/n.width,t.rect.w/n.height);const l=null!==this._pixelsPerUnit?this._pixelsPerUnit:this.sprite.pixelsPerUnit,o=t.rect.z/l,_=t.rect.w/l;this._outerScale.set(Math.max(r,this._innerOffset.x*o),Math.max(a,this._innerOffset.y*_));let m=o,c=_;this._outerScale.x/=o,this._outerScale.y/=_,m*=e.clamp(r/(this._innerOffset.x*o),1e-4,1),c*=e.clamp(a/(this._innerOffset.y*_),1e-4,1),this._renderable&&(this._innerOffsetUniform[0]=this._innerOffset.x,this._innerOffsetUniform[1]=this._innerOffset.y,this._innerOffsetUniform[2]=this._innerOffset.z,this._innerOffsetUniform[3]=this._innerOffset.w,this._renderable.setParameter("innerOffset",this._innerOffsetUniform),this._atlasRectUniform[0]=this._atlasRect.x,this._atlasRectUniform[1]=this._atlasRect.y,this._atlasRectUniform[2]=this._atlasRect.z,this._atlasRectUniform[3]=this._atlasRect.w,this._renderable.setParameter("atlasRect",this._atlasRectUniform),this._outerScaleUniform[0]=this._outerScale.x,this._outerScaleUniform[1]=this._outerScale.y,this._renderable.setParameter("outerScale",this._outerScaleUniform),this._renderable.setAabbFunc(this._updateAabbFunc),this._renderable.node.setLocalScale(m,c,1),this._renderable.node.setLocalPosition((.5-s.pivot.x)*r,(.5-s.pivot.y)*a,0))}this._meshDirty=!1}_updateSprite(){let e=!1,t=null;if(this._targetAspectRatio=-1,this._sprite&&this._sprite.atlas){t=this._sprite.meshes[this.spriteFrame],e=this._sprite.renderMode===u||this._sprite.renderMode===f;const s=this._sprite.atlas.frames[this._sprite.frameKeys[this._spriteFrame]];(null==s?void 0:s.rect.w)>0&&(this._targetAspectRatio=s.rect.z/s.rect.w)}this.mesh=e?t:this._defaultMesh,this.refreshMesh()}refreshMesh(){this.mesh&&(this._element._beingInitialized?this._meshDirty=!0:this._updateMesh(this.mesh))}_updateAabb(e){return e.center.set(0,0,0),e.halfExtents.set(.5*this._outerScale.x,.5*this._outerScale.y,.001),e.setFromTransformedAabb(e,this._renderable.node.getWorldTransform()),e}_toggleMask(){this._element._dirtifyMask();const e=this._element._isScreenSpace();this._updateMaterial(e),this._renderable.setMask(!!this._mask)}_onMaterialLoad(e){this.material=e.resource}_onMaterialAdded(e){this._system.app.assets.off(`add:${e.id}`,this._onMaterialAdded,this),this._materialAsset===e.id&&this._bindMaterialAsset(e)}_bindMaterialAsset(e){this._entity.enabled&&(e.on("load",this._onMaterialLoad,this),e.on("change",this._onMaterialChange,this),e.on("remove",this._onMaterialRemove,this),e.resource?this._onMaterialLoad(e):this._system.app.assets.load(e))}_unbindMaterialAsset(e){e.off("load",this._onMaterialLoad,this),e.off("change",this._onMaterialChange,this),e.off("remove",this._onMaterialRemove,this)}_onMaterialChange(){}_onMaterialRemove(){}_onTextureAdded(e){this._system.app.assets.off(`add:${e.id}`,this._onTextureAdded,this),this._textureAsset===e.id&&this._bindTextureAsset(e)}_bindTextureAsset(e){this._entity.enabled&&(e.on("load",this._onTextureLoad,this),e.on("change",this._onTextureChange,this),e.on("remove",this._onTextureRemove,this),e.resource?this._onTextureLoad(e):this._system.app.assets.load(e))}_unbindTextureAsset(e){e.off("load",this._onTextureLoad,this),e.off("change",this._onTextureChange,this),e.off("remove",this._onTextureRemove,this)}_onTextureLoad(e){this.texture=e.resource}_onTextureChange(e){}_onTextureRemove(e){}_onSpriteAssetAdded(e){this._system.app.assets.off(`add:${e.id}`,this._onSpriteAssetAdded,this),this._spriteAsset===e.id&&this._bindSpriteAsset(e)}_bindSpriteAsset(e){this._entity.enabled&&(e.on("load",this._onSpriteAssetLoad,this),e.on("change",this._onSpriteAssetChange,this),e.on("remove",this._onSpriteAssetRemove,this),e.resource?this._onSpriteAssetLoad(e):this._system.app.assets.load(e))}_unbindSpriteAsset(e){e.off("load",this._onSpriteAssetLoad,this),e.off("change",this._onSpriteAssetChange,this),e.off("remove",this._onSpriteAssetRemove,this),e.data.textureAtlasAsset&&this._system.app.assets.off(`load:${e.data.textureAtlasAsset}`,this._onTextureAtlasLoad,this)}_onSpriteAssetLoad(e){if(e&&e.resource)if(e.resource.atlas)this.sprite=e.resource;else{const t=e.data.textureAtlasAsset;if(t){const e=this._system.app.assets;e.off(`load:${t}`,this._onTextureAtlasLoad,this),e.once(`load:${t}`,this._onTextureAtlasLoad,this)}}else this.sprite=null}_onSpriteAssetChange(e){this._onSpriteAssetLoad(e)}_onSpriteAssetRemove(e){}_bindSprite(e){this._evtSetMeshes=e.on("set:meshes",this._onSpriteMeshesChange,this),e.on("set:pixelsPerUnit",this._onSpritePpuChange,this),e.on("set:atlas",this._onAtlasTextureChange,this),e.atlas&&e.atlas.on("set:texture",this._onAtlasTextureChange,this)}_unbindSprite(e){var t;null==(t=this._evtSetMeshes)||t.off(),this._evtSetMeshes=null,e.off("set:pixelsPerUnit",this._onSpritePpuChange,this),e.off("set:atlas",this._onAtlasTextureChange,this),e.atlas&&e.atlas.off("set:texture",this._onAtlasTextureChange,this)}_onSpriteMeshesChange(){this._sprite&&(this._spriteFrame=e.clamp(this._spriteFrame,0,this._sprite.frameKeys.length-1)),this._updateSprite()}_onSpritePpuChange(){this.sprite.renderMode!==M&&null===this._pixelsPerUnit&&this._updateSprite()}_onAtlasTextureChange(){this.sprite&&this.sprite.atlas&&this.sprite.atlas.texture?(this._renderable.setParameter("texture_emissiveMap",this._sprite.atlas.texture),this._renderable.setParameter("texture_opacityMap",this._sprite.atlas.texture)):(this._renderable.deleteParameter("texture_emissiveMap"),this._renderable.deleteParameter("texture_opacityMap"))}_onTextureAtlasLoad(e){const t=this._spriteAsset;t instanceof P?this._onSpriteAssetLoad(t):this._onSpriteAssetLoad(this._system.app.assets.get(t))}onEnable(){if(this._materialAsset){const e=this._system.app.assets.get(this._materialAsset);e&&e.resource!==this._material&&this._bindMaterialAsset(e)}if(this._textureAsset){const e=this._system.app.assets.get(this._textureAsset);e&&e.resource!==this._texture&&this._bindTextureAsset(e)}if(this._spriteAsset){const e=this._system.app.assets.get(this._spriteAsset);e&&e.resource!==this._sprite&&this._bindSpriteAsset(e)}this._element.addModelToLayers(this._renderable.model)}onDisable(){this._element.removeModelFromLayers(this._renderable.model)}_setStencil(e){this._renderable.meshInstance.stencilFront=e,this._renderable.meshInstance.stencilBack=e;let t=0;if(this._element.maskedBy&&(t=this._element.maskedBy.element._image._maskRef),this._renderable.unmaskMeshInstance){const e=new I({ref:t+1,func:_,zpass:m});this._renderable.unmaskMeshInstance.stencilFront=e,this._renderable.unmaskMeshInstance.stencilBack=e}}set color(e){const t=e.r,s=e.g,i=e.b;this._color.r===t&&this._color.g===s&&this._color.b===i||(this._color.r=t,this._color.g=s,this._color.b=i,this._colorUniform[0]=t,this._colorUniform[1]=s,this._colorUniform[2]=i,this._renderable.setParameter("material_emissive",this._colorUniform)),this._element&&this._element.fire("set:color",this._color)}get color(){return this._color}set opacity(e){e!==this._color.a&&(this._color.a=e,this._renderable.setParameter("material_opacity",e)),this._element&&this._element.fire("set:opacity",e)}get opacity(){return this._color.a}set rect(e){let t,s,i,a;e instanceof r?(t=e.x,s=e.y,i=e.z,a=e.w):(t=e[0],s=e[1],i=e[2],a=e[3]),t===this._rect.x&&s===this._rect.y&&i===this._rect.z&&a===this._rect.w||(this._rect.set(t,s,i,a),this._renderable.mesh&&(this._element._beingInitialized?this._meshDirty=!0:this._updateMesh(this._renderable.mesh)))}get rect(){return this._rect}_removeMaterialAssetEvents(){if(this._materialAsset){const e=this._system.app.assets;e.off(`add:${this._materialAsset}`,this._onMaterialAdded,this);const t=e.get(this._materialAsset);t&&(t.off("load",this._onMaterialLoad,this),t.off("change",this._onMaterialChange,this),t.off("remove",this._onMaterialRemove,this))}}set material(e){if(this._material!==e){if(!e){const t=this._element._isScreenSpace();e=this.mask?t?this._system.defaultScreenSpaceImageMaskMaterial:this._system.defaultImageMaskMaterial:t?this._system.defaultScreenSpaceImageMaterial:this._system.defaultImageMaterial}if(this._material=e,this._materialAsset){const t=this._system.app.assets.get(this._materialAsset);t&&t.resource===e||(this._removeMaterialAssetEvents(),this._materialAsset=null)}e&&(this._renderable.setMaterial(e),this._hasUserMaterial()?(this._renderable.deleteParameter("material_opacity"),this._renderable.deleteParameter("material_emissive")):(this._colorUniform[0]=this._color.r,this._colorUniform[1]=this._color.g,this._colorUniform[2]=this._color.b,this._renderable.setParameter("material_emissive",this._colorUniform),this._renderable.setParameter("material_opacity",this._color.a)))}}get material(){return this._material}set materialAsset(e){const t=this._system.app.assets;let s=e;if(e instanceof P&&(s=e.id),this._materialAsset!==s)if(this._removeMaterialAssetEvents(),this._materialAsset=s,this._materialAsset){const e=t.get(this._materialAsset);e?this._bindMaterialAsset(e):(this._materialAsset=null,this.material=null,this._materialAsset=s,t.on(`add:${this._materialAsset}`,this._onMaterialAdded,this))}else this._materialAsset=null,this.material=null,this._materialAsset=s}get materialAsset(){return this._materialAsset}set texture(e){if(this._texture!==e){if(this._textureAsset){const t=this._system.app.assets.get(this._textureAsset);t&&t.resource!==e&&(this.textureAsset=null)}if(this._texture=e,e){this._spriteAsset&&(this.spriteAsset=null),this._renderable.setParameter("texture_emissiveMap",this._texture),this._renderable.setParameter("texture_opacityMap",this._texture),this._colorUniform[0]=this._color.r,this._colorUniform[1]=this._color.g,this._colorUniform[2]=this._color.b,this._renderable.setParameter("material_emissive",this._colorUniform),this._renderable.setParameter("material_opacity",this._color.a);const e=this._texture.width/this._texture.height;e!==this._targetAspectRatio&&(this._targetAspectRatio=e,this._element.fitMode!==v&&this.refreshMesh())}else this._renderable.deleteParameter("texture_emissiveMap"),this._renderable.deleteParameter("texture_opacityMap"),this._targetAspectRatio=-1,this._element.fitMode!==v&&this.refreshMesh()}}get texture(){return this._texture}set textureAsset(e){const t=this._system.app.assets;let s=e;if(e instanceof P&&(s=e.id),this._textureAsset!==s){if(this._textureAsset){t.off(`add:${this._textureAsset}`,this._onTextureAdded,this);const e=t.get(this._textureAsset);e&&(e.off("load",this._onTextureLoad,this),e.off("change",this._onTextureChange,this),e.off("remove",this._onTextureRemove,this))}if(this._textureAsset=s,this._textureAsset){const e=t.get(this._textureAsset);e?this._bindTextureAsset(e):(this.texture=null,t.on(`add:${this._textureAsset}`,this._onTextureAdded,this))}else this.texture=null}}get textureAsset(){return this._textureAsset}set spriteAsset(e){const t=this._system.app.assets;let s=e;if(e instanceof P&&(s=e.id),this._spriteAsset!==s){if(this._spriteAsset){t.off(`add:${this._spriteAsset}`,this._onSpriteAssetAdded,this);const e=t.get(this._spriteAsset);e&&this._unbindSpriteAsset(e)}if(this._spriteAsset=s,this._spriteAsset){const e=t.get(this._spriteAsset);e?this._bindSpriteAsset(e):(this.sprite=null,t.on(`add:${this._spriteAsset}`,this._onSpriteAssetAdded,this))}else this.sprite=null}this._element&&this._element.fire("set:spriteAsset",s)}get spriteAsset(){return this._spriteAsset}set sprite(t){if(this._sprite!==t){if(this._sprite&&this._unbindSprite(this._sprite),this._spriteAsset){const e=this._system.app.assets.get(this._spriteAsset);e&&e.resource!==t&&(this.spriteAsset=null)}this._sprite=t,this._sprite&&(this._bindSprite(this._sprite),this._textureAsset&&(this.textureAsset=null)),this._sprite&&this._sprite.atlas&&this._sprite.atlas.texture?(this._renderable.setParameter("texture_emissiveMap",this._sprite.atlas.texture),this._renderable.setParameter("texture_opacityMap",this._sprite.atlas.texture)):(this._renderable.deleteParameter("texture_emissiveMap"),this._renderable.deleteParameter("texture_opacityMap")),this._sprite&&(this._spriteFrame=e.clamp(this._spriteFrame,0,this._sprite.frameKeys.length-1)),this._updateSprite()}}get sprite(){return this._sprite}set spriteFrame(t){const s=this._spriteFrame;this._sprite?this._spriteFrame=e.clamp(t,0,this._sprite.frameKeys.length-1):this._spriteFrame=t,this._spriteFrame!==s&&this._updateSprite(),this._element&&this._element.fire("set:spriteFrame",t)}get spriteFrame(){return this._spriteFrame}set mesh(e){this._renderable.setMesh(e),this._defaultMesh===e?this._renderable.setAabbFunc(null):this._renderable.setAabbFunc(this._updateAabbFunc)}get mesh(){return this._renderable.mesh}set mask(e){this._mask!==e&&(this._mask=e,this._toggleMask())}get mask(){return this._mask}set pixelsPerUnit(e){this._pixelsPerUnit!==e&&(this._pixelsPerUnit=e,!this._sprite||this._sprite.renderMode!==u&&this._sprite.renderMode!==f||this._updateSprite())}get pixelsPerUnit(){return this._pixelsPerUnit}get aabb(){return this._renderable.meshInstance?this._renderable.meshInstance.aabb:null}}export{C as ImageElement};