@animech-public/playcanvas/build/playcanvas/src/framework/components/button/component.js

PlayCanvas WebGL game engine

import{now as t}from"../../../core/time.js";import{math as e}from"../../../core/math/math.js";import{Color as i}from"../../../core/math/color.js";import{GraphNode as s}from"../../../scene/graph-node.js";import{Component as n}from"../component.js";import{BUTTON_TRANSITION_MODE_SPRITE_CHANGE as a,BUTTON_TRANSITION_MODE_TINT as r}from"./constants.js";import{ELEMENTTYPE_GROUP as h}from"../element/constants.js";const o="DEFAULT",l="HOVER",_="PRESSED",u="INACTIVE",m={};m[o]="_defaultTint",m[l]="hoverTint",m[_]="pressedTint",m[u]="inactiveTint";const p={};p[o]="_defaultSpriteAsset",p[l]="hoverSpriteAsset",p[_]="pressedSpriteAsset",p[u]="inactiveSpriteAsset";const c={};c[o]="_defaultSpriteFrame",c[l]="hoverSpriteFrame",c[_]="pressedSpriteFrame",c[u]="inactiveSpriteFrame";class E extends n{constructor(t,e){super(t,e),this._imageEntity=null,this._evtElementAdd=null,this._evtImageEntityElementAdd=null,this._evtImageEntityElementRemove=null,this._evtImageEntityElementColor=null,this._evtImageEntityElementOpacity=null,this._evtImageEntityElementSpriteAsset=null,this._evtImageEntityElementSpriteFrame=null,this._visualState=o,this._isHovering=!1,this._hoveringCounter=0,this._isPressed=!1,this._defaultTint=new i(1,1,1,1),this._defaultSpriteAsset=null,this._defaultSpriteFrame=0,this._toggleLifecycleListeners("on",t)}get data(){const t=this.system.store[this.entity.getGuid()];return t?t.data:null}set enabled(t){this._setValue("enabled",t)}get enabled(){return this.data.enabled}set active(t){this._setValue("active",t)}get active(){return this.data.active}set imageEntity(t){if(this._imageEntity!==t){const e="string"==typeof t;if(this._imageEntity&&e&&this._imageEntity.getGuid()===t)return;this._imageEntity&&this._imageEntityUnsubscribe(),this._imageEntity=t instanceof s?t:e&&this.system.app.getEntityFromIndex(t)||null,this._imageEntity&&this._imageEntitySubscribe(),this._imageEntity?this.data.imageEntity=this._imageEntity.getGuid():e&&t&&(this.data.imageEntity=t)}}get imageEntity(){return this._imageEntity}set hitPadding(t){this._setValue("hitPadding",t)}get hitPadding(){return this.data.hitPadding}set transitionMode(t){this._setValue("transitionMode",t)}get transitionMode(){return this.data.transitionMode}set hoverTint(t){this._setValue("hoverTint",t)}get hoverTint(){return this.data.hoverTint}set pressedTint(t){this._setValue("pressedTint",t)}get pressedTint(){return this.data.pressedTint}set inactiveTint(t){this._setValue("inactiveTint",t)}get inactiveTint(){return this.data.inactiveTint}set fadeDuration(t){this._setValue("fadeDuration",t)}get fadeDuration(){return this.data.fadeDuration}set hoverSpriteAsset(t){this._setValue("hoverSpriteAsset",t)}get hoverSpriteAsset(){return this.data.hoverSpriteAsset}set hoverSpriteFrame(t){this._setValue("hoverSpriteFrame",t)}get hoverSpriteFrame(){return this.data.hoverSpriteFrame}set pressedSpriteAsset(t){this._setValue("pressedSpriteAsset",t)}get pressedSpriteAsset(){return this.data.pressedSpriteAsset}set pressedSpriteFrame(t){this._setValue("pressedSpriteFrame",t)}get pressedSpriteFrame(){return this.data.pressedSpriteFrame}set inactiveSpriteAsset(t){this._setValue("inactiveSpriteAsset",t)}get inactiveSpriteAsset(){return this.data.inactiveSpriteAsset}set inactiveSpriteFrame(t){this._setValue("inactiveSpriteFrame",t)}get inactiveSpriteFrame(){return this.data.inactiveSpriteFrame}_setValue(t,e){const i=this.data,s=i[t];i[t]=e,this.fire("set",t,s,e)}_toggleLifecycleListeners(t,e){var i;(this[t]("set_active",this._onSetActive,this),this[t]("set_transitionMode",this._onSetTransitionMode,this),this[t]("set_hoverTint",this._onSetTransitionValue,this),this[t]("set_pressedTint",this._onSetTransitionValue,this),this[t]("set_inactiveTint",this._onSetTransitionValue,this),this[t]("set_hoverSpriteAsset",this._onSetTransitionValue,this),this[t]("set_hoverSpriteFrame",this._onSetTransitionValue,this),this[t]("set_pressedSpriteAsset",this._onSetTransitionValue,this),this[t]("set_pressedSpriteFrame",this._onSetTransitionValue,this),this[t]("set_inactiveSpriteAsset",this._onSetTransitionValue,this),this[t]("set_inactiveSpriteFrame",this._onSetTransitionValue,this),"on"===t)?this._evtElementAdd=this.entity.on("element:add",this._onElementComponentAdd,this):(null==(i=this._evtElementAdd)||i.off(),this._evtElementAdd=null)}_onSetActive(t,e,i){e!==i&&this._updateVisualState()}_onSetTransitionMode(t,e,i){e!==i&&(this._cancelTween(),this._resetToDefaultVisualState(e),this._forceReapplyVisualState())}_onSetTransitionValue(t,e,i){e!==i&&this._forceReapplyVisualState()}_imageEntitySubscribe(){this._evtImageEntityElementAdd=this._imageEntity.on("element:add",this._onImageElementGain,this),this._imageEntity.element&&this._onImageElementGain()}_imageEntityUnsubscribe(){var t,e;null==(t=this._evtImageEntityElementAdd)||t.off(),this._evtImageEntityElementAdd=null,null!=(e=this._imageEntity)&&e.element&&this._onImageElementLose()}_imageEntityElementSubscribe(){const t=this._imageEntity.element;this._evtImageEntityElementRemove=t.once("beforeremove",this._onImageElementLose,this),this._evtImageEntityElementColor=t.on("set:color",this._onSetColor,this),this._evtImageEntityElementOpacity=t.on("set:opacity",this._onSetOpacity,this),this._evtImageEntityElementSpriteAsset=t.on("set:spriteAsset",this._onSetSpriteAsset,this),this._evtImageEntityElementSpriteFrame=t.on("set:spriteFrame",this._onSetSpriteFrame,this)}_imageEntityElementUnsubscribe(){var t,e,i,s,n;null==(t=this._evtImageEntityElementRemove)||t.off(),this._evtImageEntityElementRemove=null,null==(e=this._evtImageEntityElementColor)||e.off(),this._evtImageEntityElementColor=null,null==(i=this._evtImageEntityElementOpacity)||i.off(),this._evtImageEntityElementOpacity=null,null==(s=this._evtImageEntityElementSpriteAsset)||s.off(),this._evtImageEntityElementSpriteAsset=null,null==(n=this._evtImageEntityElementSpriteFrame)||n.off(),this._evtImageEntityElementSpriteFrame=null}_onElementComponentRemove(){this._toggleHitElementListeners("off")}_onElementComponentAdd(){this._toggleHitElementListeners("on")}_onImageElementLose(){this._imageEntityElementUnsubscribe(),this._cancelTween(),this._resetToDefaultVisualState(this.transitionMode)}_onImageElementGain(){this._imageEntityElementSubscribe(),this._storeDefaultVisualState(),this._forceReapplyVisualState()}_toggleHitElementListeners(t){if(this.entity.element){const e="on"===t;if(e&&this._hasHitElementListeners)return;this.entity.element[t]("beforeremove",this._onElementComponentRemove,this),this.entity.element[t]("mouseenter",this._onMouseEnter,this),this.entity.element[t]("mouseleave",this._onMouseLeave,this),this.entity.element[t]("mousedown",this._onMouseDown,this),this.entity.element[t]("mouseup",this._onMouseUp,this),this.entity.element[t]("touchstart",this._onTouchStart,this),this.entity.element[t]("touchend",this._onTouchEnd,this),this.entity.element[t]("touchleave",this._onTouchLeave,this),this.entity.element[t]("touchcancel",this._onTouchCancel,this),this.entity.element[t]("selectstart",this._onSelectStart,this),this.entity.element[t]("selectend",this._onSelectEnd,this),this.entity.element[t]("selectenter",this._onSelectEnter,this),this.entity.element[t]("selectleave",this._onSelectLeave,this),this.entity.element[t]("click",this._onClick,this),this._hasHitElementListeners=e}}_storeDefaultVisualState(){var t;const e=null==(t=this._imageEntity)?void 0:t.element;e&&e.type!==h&&(this._storeDefaultColor(e.color),this._storeDefaultOpacity(e.opacity),this._storeDefaultSpriteAsset(e.spriteAsset),this._storeDefaultSpriteFrame(e.spriteFrame))}_storeDefaultColor(t){this._defaultTint.r=t.r,this._defaultTint.g=t.g,this._defaultTint.b=t.b}_storeDefaultOpacity(t){this._defaultTint.a=t}_storeDefaultSpriteAsset(t){this._defaultSpriteAsset=t}_storeDefaultSpriteFrame(t){this._defaultSpriteFrame=t}_onSetColor(t){this._isApplyingTint||(this._storeDefaultColor(t),this._forceReapplyVisualState())}_onSetOpacity(t){this._isApplyingTint||(this._storeDefaultOpacity(t),this._forceReapplyVisualState())}_onSetSpriteAsset(t){this._isApplyingSprite||(this._storeDefaultSpriteAsset(t),this._forceReapplyVisualState())}_onSetSpriteFrame(t){this._isApplyingSprite||(this._storeDefaultSpriteFrame(t),this._forceReapplyVisualState())}_onMouseEnter(t){this._isHovering=!0,this._updateVisualState(),this._fireIfActive("mouseenter",t)}_onMouseLeave(t){this._isHovering=!1,this._isPressed=!1,this._updateVisualState(),this._fireIfActive("mouseleave",t)}_onMouseDown(t){this._isPressed=!0,this._updateVisualState(),this._fireIfActive("mousedown",t)}_onMouseUp(t){this._isPressed=!1,this._updateVisualState(),this._fireIfActive("mouseup",t)}_onTouchStart(t){this._isPressed=!0,this._updateVisualState(),this._fireIfActive("touchstart",t)}_onTouchEnd(t){t.event.preventDefault(),this._isPressed=!1,this._updateVisualState(),this._fireIfActive("touchend",t)}_onTouchLeave(t){this._isPressed=!1,this._updateVisualState(),this._fireIfActive("touchleave",t)}_onTouchCancel(t){this._isPressed=!1,this._updateVisualState(),this._fireIfActive("touchcancel",t)}_onSelectStart(t){this._isPressed=!0,this._updateVisualState(),this._fireIfActive("selectstart",t)}_onSelectEnd(t){this._isPressed=!1,this._updateVisualState(),this._fireIfActive("selectend",t)}_onSelectEnter(t){this._hoveringCounter++,1===this._hoveringCounter&&(this._isHovering=!0,this._updateVisualState()),this._fireIfActive("selectenter",t)}_onSelectLeave(t){this._hoveringCounter--,0===this._hoveringCounter&&(this._isHovering=!1,this._isPressed=!1,this._updateVisualState()),this._fireIfActive("selectleave",t)}_onClick(t){this._fireIfActive("click",t)}_fireIfActive(t,e){this.data.active&&this.fire(t,e)}_updateVisualState(t){const e=this._visualState,i=this._determineVisualState();if((e!==i||t)&&this.enabled)switch(this._visualState=i,e===l&&this._fireIfActive("hoverend"),e===_&&this._fireIfActive("pressedend"),i===l&&this._fireIfActive("hoverstart"),i===_&&this._fireIfActive("pressedstart"),this.transitionMode){case r:{const t=this[m[this._visualState]];this._applyTint(t);break}case a:{const t=p[this._visualState],e=c[this._visualState],i=this[t],s=this[e];this._applySprite(i,s);break}}}_forceReapplyVisualState(){this._updateVisualState(!0)}_resetToDefaultVisualState(t){var e;if(null!=(e=this._imageEntity)&&e.element)switch(t){case r:this._cancelTween(),this._applyTintImmediately(this._defaultTint);break;case a:this._applySprite(this._defaultSpriteAsset,this._defaultSpriteFrame)}}_determineVisualState(){return this.active?this._isPressed?_:this._isHovering?l:o:u}_applySprite(t,e){var i;const s=null==(i=this._imageEntity)?void 0:i.element;s&&(e=e||0,this._isApplyingSprite=!0,s.spriteAsset!==t&&(s.spriteAsset=t),s.spriteFrame!==e&&(s.spriteFrame=e),this._isApplyingSprite=!1)}_applyTint(t){this._cancelTween(),0===this.fadeDuration?this._applyTintImmediately(t):this._applyTintWithTween(t)}_applyTintImmediately(t){var e;const i=null==(e=this._imageEntity)?void 0:e.element;if(!t||!i||i.type===h)return;const s=d(t);this._isApplyingTint=!0,s.equals(i.color)||(i.color=s),i.opacity!==t.a&&(i.opacity=t.a),this._isApplyingTint=!1}_applyTintWithTween(e){var s;const n=null==(s=this._imageEntity)?void 0:s.element;if(!e||!n||n.type===h)return;const a=d(e),r=n.color,o=n.opacity;a.equals(r)&&e.a===o||(this._tweenInfo={startTime:t(),from:new i(r.r,r.g,r.b,o),to:e.clone(),lerpColor:new i})}_updateTintTween(){const s=t()-this._tweenInfo.startTime;let n=0===this.fadeDuration?1:s/this.fadeDuration;if(n=e.clamp(n,0,1),Math.abs(n-1)>1e-5){const t=this._tweenInfo.lerpColor;t.lerp(this._tweenInfo.from,this._tweenInfo.to,n),this._applyTintImmediately(new i(t.r,t.g,t.b,t.a))}else this._applyTintImmediately(this._tweenInfo.to),this._cancelTween()}_cancelTween(){delete this._tweenInfo}onUpdate(){this._tweenInfo&&this._updateTintTween()}onEnable(){this._isHovering=!1,this._hoveringCounter=0,this._isPressed=!1,this._toggleHitElementListeners("on"),this._forceReapplyVisualState()}onDisable(){this._toggleHitElementListeners("off"),this._resetToDefaultVisualState(this.transitionMode)}onRemove(){this._imageEntityUnsubscribe(),this._toggleLifecycleListeners("off",this.system),this.onDisable()}resolveDuplicatedEntityReferenceProperties(t,e){t.imageEntity&&(this.imageEntity=e[t.imageEntity.getGuid()])}}function d(t){return new i(t.r,t.g,t.b)}E.EVENT_MOUSEDOWN="mousedown",E.EVENT_MOUSEUP="mouseup",E.EVENT_MOUSEENTER="mouseenter",E.EVENT_MOUSELEAVE="mouseleave",E.EVENT_CLICK="click",E.EVENT_TOUCHSTART="touchstart",E.EVENT_TOUCHEND="touchend",E.EVENT_TOUCHCANCEL="touchcancel",E.EVENT_TOUCHLEAVE="touchleave",E.EVENT_SELECTSTART="selectstart",E.EVENT_SELECTEND="selectend",E.EVENT_SELECTENTER="selectenter",E.EVENT_SELECTLEAVE="selectleave",E.EVENT_HOVERSTART="hoverstart",E.EVENT_HOVEREND="hoverend",E.EVENT_PRESSEDSTART="pressedstart",E.EVENT_PRESSEDEND="pressedend";export{E as ButtonComponent};