Skip to content

Commit

Permalink
fix set button.interactable as false before __preload && update origi…
Browse files Browse the repository at this point in the history 
…nalScale on target scale changed (cocos#3764)

* fix set button.interactable as false before __preload

* update originalScale on target scale changed && add registerNodeEvent

* fix button
  • Loading branch information
@PPpro @pandamicro
PPpro authored and pandamicro committed Feb 11, 2019
1 parent c139c2e commit ca5191a
Showing 1 changed file with 93 additions and 44 deletions.
137 changes: 93 additions & 44 deletions cocos2d/core/components/CCButton.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -136,7 +136,7 @@ let Button = cc.Class({
// init _originalScale in __preload()
this._fromScale = cc.Vec2.ZERO;
this._toScale = cc.Vec2.ZERO;
this._originalScale = cc.Vec2.ZERO;
this._originalScale = null;

this._sprite = null;
},
Expand Down Expand Up @@ -388,8 +388,13 @@ let Button = cc.Class({
default: null,
type: cc.Node,
tooltip: CC_DEV && "i18n:COMPONENT.button.target",
notify () {
this._applyTarget();
notify (oldValue) {
if (oldValue !== this.target) {
this._applyTarget();
if (oldValue) {
this._unregisterNodeEvent(oldValue);
}
}
}
},

Expand Down Expand Up @@ -422,7 +427,7 @@ let Button = cc.Class({
let transition = this.transition;
if (transition === Transition.COLOR && this.interactable) {
this._setTargetColor(this.normalColor);
} else if (transition === Transition.SCALE) {
} else if (transition === Transition.SCALE && this._originalScale) {
target.scaleX = this._originalScale.x;
target.scaleY = this._originalScale.y;
}
Expand All @@ -443,21 +448,6 @@ let Button = cc.Class({
if (this.disabledSprite) {
this.disabledSprite.ensureLoadTexture();
}
//
if (!CC_EDITOR) {
this._registerEvent();
} else {
this.node.on('spriteframe-changed', function (comp) {
if (this.transition === Transition.SPRITE) {
this._setCurrentStateSprite(comp.spriteFrame);
}
}.bind(this));
this.node.on('color-changed', function (color) {
if (this.transition === Transition.COLOR) {
this._setCurrentStateColor(color);
}
}.bind(this));
}
},

_getTarget () {
Expand Down Expand Up @@ -532,18 +522,12 @@ let Button = cc.Class({

onDisable () {
this._resetState();
},

if (!CC_EDITOR) {
this.node.off(cc.Node.EventType.TOUCH_START, this._onTouchBegan, this);
this.node.off(cc.Node.EventType.TOUCH_MOVE, this._onTouchMove, this);
this.node.off(cc.Node.EventType.TOUCH_END, this._onTouchEnded, this);
this.node.off(cc.Node.EventType.TOUCH_CANCEL, this._onTouchCancel, this);

this.node.off(cc.Node.EventType.MOUSE_ENTER, this._onMouseMoveIn, this);
this.node.off(cc.Node.EventType.MOUSE_LEAVE, this._onMouseMoveOut, this);
} else {
this.node.off('spriteframe-changed');
}
onDestroy () {
let target = this._getTarget();
this._unregisterNodeEvent(target);
this._originalScale = null;
},

update (dt) {
Expand All @@ -557,28 +541,81 @@ let Button = cc.Class({
ratio = this.time / this.duration;
}

// clamp ratio
if (ratio >= 1) {
ratio = 1;
this._transitionFinished = true;
}

if (this.transition === Transition.COLOR) {
let color = this._fromColor.lerp(this._toColor, ratio);
this._setTargetColor(color);
} else if (this.transition === Transition.SCALE) {
}
// Skip if _originalScale is invalid
else if (this.transition === Transition.SCALE && this._originalScale) {
target.scale = this._fromScale.lerp(this._toScale, ratio);
}

if (ratio === 1) {
this._transitionFinished = true;
}

},

_registerNodeEvent (node) {
if (CC_EDITOR) {
node.on('spriteframe-changed', this._onNodeSpriteFrameChanged, this);
node.on(cc.Node.EventType.COLOR_CHANGED, this._onNodeColorChanged, this);
node.on(cc.Node.EventType.SCALE_CHANGED, this._onNodeScaleChanged, this);
}
else {
node.on(cc.Node.EventType.TOUCH_START, this._onTouchBegan, this);
node.on(cc.Node.EventType.TOUCH_MOVE, this._onTouchMove, this);
node.on(cc.Node.EventType.TOUCH_END, this._onTouchEnded, this);
node.on(cc.Node.EventType.TOUCH_CANCEL, this._onTouchCancel, this);

node.on(cc.Node.EventType.MOUSE_ENTER, this._onMouseMoveIn, this);
node.on(cc.Node.EventType.MOUSE_LEAVE, this._onMouseMoveOut, this);
}
},

_unregisterNodeEvent (node) {
if (CC_EDITOR) {
node.off('spriteframe-changed', this._onNodeSpriteFrameChanged, this);
node.off(cc.Node.EventType.COLOR_CHANGED, this._onNodeColorChanged, this);
node.off(cc.Node.EventType.SCALE_CHANGED, this._onNodeScaleChanged, this);
}
else {
node.off(cc.Node.EventType.TOUCH_START, this._onTouchBegan, this);
node.off(cc.Node.EventType.TOUCH_MOVE, this._onTouchMove, this);
node.off(cc.Node.EventType.TOUCH_END, this._onTouchEnded, this);
node.off(cc.Node.EventType.TOUCH_CANCEL, this._onTouchCancel, this);

node.off(cc.Node.EventType.MOUSE_ENTER, this._onMouseMoveIn, this);
node.off(cc.Node.EventType.MOUSE_LEAVE, this._onMouseMoveOut, this);
}
},

_registerEvent () {
this.node.on(cc.Node.EventType.TOUCH_START, this._onTouchBegan, this);
this.node.on(cc.Node.EventType.TOUCH_MOVE, this._onTouchMove, this);
this.node.on(cc.Node.EventType.TOUCH_END, this._onTouchEnded, this);
this.node.on(cc.Node.EventType.TOUCH_CANCEL, this._onTouchCancel, this);
_onNodeScaleChanged () {
let target = this._getTarget();
// update _originalScale if target scale changed
if (this._originalScale) {
if (this.transition !== Transition.SCALE || this._transitionFinished) {
this._originalScale.x = target.scaleX;
this._originalScale.y = target.scaleY;
}
}
},

this.node.on(cc.Node.EventType.MOUSE_ENTER, this._onMouseMoveIn, this);
this.node.on(cc.Node.EventType.MOUSE_LEAVE, this._onMouseMoveOut, this);
_onNodeSpriteFrameChanged (comp) {
if (this.transition === Transition.SPRITE) {
this._setCurrentStateSprite(comp.spriteFrame);
}
},

_onNodeColorChanged (color) {
if (this.transition === Transition.COLOR) {
this._setCurrentStateColor(color);
}
},

_getTargetSprite (target) {
Expand All @@ -592,8 +629,12 @@ let Button = cc.Class({
_applyTarget () {
let target = this._getTarget();
this._sprite = this._getTargetSprite(target);
if (!this._originalScale) {
this._originalScale = cc.Vec2.ZERO;
}
this._originalScale.x = target.scaleX;
this._originalScale.y = target.scaleY;
this._registerNodeEvent(target);
},

// touch event handler
Expand All @@ -607,13 +648,12 @@ let Button = cc.Class({

_onTouchMove (event) {
if (!this.interactable || !this.enabledInHierarchy || !this._pressed) return;
let target = this._getTarget();
// mobile phone will not emit _onMouseMoveOut,
// so we have to do hit test when touch moving
let touch = event.touch;
let hit = this.node._hitTest(touch.getLocation());
let target = this._getTarget();

if (this.transition === Transition.SCALE) {
let hit = target._hitTest(touch.getLocation());
if (this.transition === Transition.SCALE && this._originalScale) {
if (hit) {
this._fromScale.x = this._originalScale.x;
this._fromScale.y = this._originalScale.y;
Expand Down Expand Up @@ -642,8 +682,9 @@ let Button = cc.Class({
if (!this.interactable || !this.enabledInHierarchy) return;

if (this._pressed) {
let target = this._getTarget();
cc.Component.EventHandler.emitEvents(this.clickEvents, event);
this.node.emit('click', this);
target.emit('click', this);
}
this._pressed = false;
this._updateState();
Expand Down Expand Up @@ -733,6 +774,10 @@ let Button = cc.Class({
},

_zoomUp () {
// skip before __preload()
if (!this._originalScale) {
return;
}
this._fromScale.x = this._originalScale.x;
this._fromScale.y = this._originalScale.y;
this._toScale.x = this._originalScale.x * this.zoomScale;
Expand All @@ -742,6 +787,10 @@ let Button = cc.Class({
},

_zoomBack () {
// skip before __preload()
if (!this._originalScale) {
return;
}
let target = this._getTarget();
this._fromScale.x = target.scaleX;
this._fromScale.y = target.scaleY;
Expand Down

0 comments on commit ca5191a

Please sign in to comment.