From 8aa5fcf5609fd7924bee5579251d35e675701145 Mon Sep 17 00:00:00 2001 From: Eric Rowell Date: Tue, 20 Mar 2012 22:46:54 -0700 Subject: [PATCH] fixed clear transition bug --- dist/kinetic-core.js | 29 +++++--------- dist/kinetic-core.min.js | 4 +- src/GlobalObject.js | 19 +++------- src/Layer.js | 5 +-- src/Node.js | 3 +- tests/js/Test.js | 2 +- tests/js/functionalTests.js | 76 +++++++++++++++++++++++++++++++++++++ 7 files changed, 98 insertions(+), 40 deletions(-) diff --git a/dist/kinetic-core.js b/dist/kinetic-core.js index cdb3656f..2301ae9a 100644 --- a/dist/kinetic-core.js +++ b/dist/kinetic-core.js @@ -3,7 +3,7 @@ * http://www.kineticjs.com/ * Copyright 2012, Eric Rowell * Licensed under the MIT or GPL Version 2 licenses. - * Date: Mar 19 2012 + * Date: Mar 20 2012 * * Copyright (C) 2011 - 2012 by Eric Rowell * @@ -70,7 +70,7 @@ Kinetic.GlobalObject = { for(var i = 0; i < stage.children.length; i++) { var layer = stage.children[i]; - if(layer.isTransitioning) { + if(layer.transitions.length > 0) { return true; } } @@ -164,20 +164,13 @@ Kinetic.GlobalObject = { } } }, - _removeTransition: function(transition) { - var layer = transition.node.getLayer(); - var id = transition.id; + _clearTransition: function(node) { + var layer = node.getLayer(); for(var n = 0; n < layer.transitions.length; n++) { - if(layer.transitions[n].id === id) { - layer.transitions.splice(0, 1); - // exit loop - n = layer.transitions.length; + if(layer.transitions[n].node.id === node.id) { + layer.transitions.splice(n, 1); } } - - if(layer.transitions.length === 0) { - layer.isTransitioning = false; - } }, _runFrames: function() { for(var n = 0; n < this.stages.length; n++) { @@ -199,7 +192,7 @@ Kinetic.GlobalObject = { transition.time += this.frame.timeDiff; if(transition.time >= transition.config.duration * 1000) { this._endTransition.apply(transition); - this._removeTransition(transition); + this._clearTransition(transition.node); if(transition.config.callback !== undefined) { transition.config.callback(); } @@ -709,7 +702,7 @@ Kinetic.Node.prototype = { * This make it easy to start new transitions without * having to explicitly cancel old ones */ - layer._clearTransition(this); + Kinetic.GlobalObject._clearTransition(this); for(var key in config) { if(config.hasOwnProperty(key) && key !== 'duration' && key !== 'easing' && key !== 'callback') { @@ -737,7 +730,6 @@ Kinetic.Node.prototype = { starts: starts }); - layer.isTransitioning = true; Kinetic.GlobalObject._handleAnimation(); }, /** @@ -1655,7 +1647,6 @@ Kinetic.Layer = function(config) { this.canvas.style.position = 'absolute'; this.transitions = []; this.transitionIdCounter = 0; - this.isTransitioning = false; // call super constructors Kinetic.Container.apply(this, []); @@ -1717,10 +1708,10 @@ Kinetic.Layer.prototype = { /** * clear transition if one is running */ - _clearTransition: function(shape) { + _clearTransition: function(node) { for(var n = 0; n < this.transitions.length; n++) { var transition = this.transitions[n]; - if(transition.node.id === shape.id) { + if(transition.node.id === node.id) { Kinetic.GlobalObject._removeTransition(transition); } } diff --git a/dist/kinetic-core.min.js b/dist/kinetic-core.min.js index f2a60cb1..8f8bc649 100644 --- a/dist/kinetic-core.min.js +++ b/dist/kinetic-core.min.js @@ -3,7 +3,7 @@ * http://www.kineticjs.com/ * Copyright 2012, Eric Rowell * Licensed under the MIT or GPL Version 2 licenses. - * Date: Mar 19 2012 + * Date: Mar 20 2012 * * Copyright (C) 2011 - 2012 by Eric Rowell * @@ -25,4 +25,4 @@ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN * THE SOFTWARE. */ -var Kinetic={};Kinetic.GlobalObject={stages:[],idCounter:0,frame:{time:0,timeDiff:0,lastTime:0},drag:{moving:!1,node:undefined,offset:{x:0,y:0}},extend:function(a,b){for(var c in b.prototype)b.prototype.hasOwnProperty(c)&&a.prototype[c]===undefined&&(a.prototype[c]=b.prototype[c])},_isaCanvasAnimating:function(){for(var a=0;a=h.config.duration*1e3?(this._endTransition.apply(h),this._removeTransition(h),h.config.callback!==undefined&&h.config.callback()):this._runTransition(h)}f&&e.draw()}}},_updateFrameObject:function(){var a=new Date,b=a.getTime();this.frame.lastTime===0?this.frame.lastTime=b:(this.frame.timeDiff=b-this.frame.lastTime,this.frame.lastTime=b,this.frame.time+=this.frame.timeDiff)},_animationLoop:function(){if(this._isaCanvasAnimating()){this._updateFrameObject(),this._runFrames();var a=this;requestAnimFrame(function(){a._animationLoop()})}},_handleAnimation:function(){var a=this;this._isaCanvasAnimating()&&a._animationLoop()}},window.requestAnimFrame=function(a){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(a){window.setTimeout(a,1e3/60)}}(),Kinetic.Node=function(a){this.visible=!0,this.isListening=!0,this.name=undefined,this.alpha=1,this.x=0,this.y=0,this.scale={x:1,y:1},this.rotation=0,this.centerOffset={x:0,y:0},this.eventListeners={},this.dragConstraint="none",this.dragBounds={},this._draggable=!1;if(a)for(var b in a)switch(b){case"draggable":this.draggable(a[b]);break;case"listen":this.listen(a[b]);break;case"rotationDeg":this.rotation=a[b]*Math.PI/180;break;default:this[b]=a[b]}this.centerOffset.x===undefined&&(this.centerOffset.x=0),this.centerOffset.y===undefined&&(this.centerOffset.y=0)},Kinetic.Node.prototype={on:function(a,b){var c=a.split(" ");for(var d=0;d1?g[1]:"";this.eventListeners[h]||(this.eventListeners[h]=[]),this.eventListeners[h].push({name:i,handler:b})}},off:function(a){var b=a.split(" ");for(var c=0;c1){var h=f[1];for(var i=0;i0&&(this.parent.children.splice(a,1),this.parent.children.splice(a-1,0,this),this.parent._setChildrenIndices())},moveToBottom:function(){var a=this.index;this.parent.children.splice(a,1),this.parent.children.unshift(this),this.parent._setChildrenIndices()},setZIndex:function(a){var b=this.index;this.parent.children.splice(b,1),this.parent.children.splice(a,0,this),this.parent._setChildrenIndices()},setAlpha:function(a){this.alpha=a},getAlpha:function(){return this.alpha},getAbsoluteAlpha:function(){var a=1,b=this;while(b.className!=="Stage")a*=b.alpha,b=b.parent;return a},draggable:function(a){this.draggable!==a&&(a?this._initDrag():this._dragCleanup(),this._draggable=a)},isDragging:function(){var a=Kinetic.GlobalObject;return a.drag.node!==undefined&&a.drag.node.id===this.id&&a.drag.moving},moveTo:function(a){var b=this.parent;b.children.splice(this.index,1),b._setChildrenIndices(),a.children.push(this),this.index=a.children.length-1,this.parent=a,a._setChildrenIndices(),this.name&&(b.childrenNames[this.name]=undefined,a.childrenNames[this.name]=this)},getParent:function(){return this.parent},getLayer:function(){return this.className==="Layer"?this:this.getParent().getLayer()},getStage:function(){return this.className==="Stage"?this:this.getParent().getStage()},getName:function(){return this.name},setCenterOffset:function(a,b){this.centerOffset.x=a,this.centerOffset.y=b},getCenterOffset:function(){return this.centerOffset},transitionTo:function(a){var b=this.getLayer(),c=this,d=a.duration*1e3,e={};b._clearTransition(this);for(var f in a)if(a.hasOwnProperty(f)&&f!=="duration"&&f!=="easing"&&f!=="callback")if(a[f].x!==undefined||a[f].y!==undefined){e[f]={};var g=["x","y"];for(var h=0;h0)this.remove(this.children[0])},_remove:function(a){a.name!==undefined&&(this.childrenNames[a.name]=undefined),this.children.splice(a.index,1),this._setChildrenIndices(),a=undefined},_drawChildren:function(){var a=this.children;for(var b=0;b=0;d--){var e=c[d];if(e.className==="Shape"){var f=this._detectEvent(e,b);if(f)return!0}else{var f=this._traverseChildren(e,b);if(f)return!0}}return!1},_handleEvent:function(a){var b=Kinetic.GlobalObject;a||(a=window.event),this._setMousePosition(a),this._setTouchPosition(a);var c=this.backstageLayer;c.clear(),this.targetFound=!1;var d=!1;for(var e=this.children.length-1;e>=0;e--){var f=this.children[e];f.visible&&e>=0&&f.isListening&&this._traverseChildren(f,a)&&(e=-1,d=!0)}!d&&this.mouseoutShape&&(this.mouseoutShape._handleEvents("onmouseout",a),this.mouseoutShape=undefined)},_listen:function(){var a=this;this.container.addEventListener("mousedown",function(b){a.mouseDown=!0,a._handleEvent(b)},!1),this.container.addEventListener("mousemove",function(b){a.mouseUp=!1,a.mouseDown=!1,a._handleEvent(b)},!1),this.container.addEventListener("mouseup",function(b){a.mouseUp=!0,a.mouseDown=!1,a._handleEvent(b),a.clickStart=!1},!1),this.container.addEventListener("mouseover",function(b){a._handleEvent(b)},!1),this.container.addEventListener("mouseout",function(b){a.mousePos=undefined},!1),this.container.addEventListener("touchstart",function(b){b.preventDefault(),a.touchStart=!0,a._handleEvent(b)},!1),this.container.addEventListener("touchmove",function(b){b.preventDefault(),a._handleEvent(b)},!1),this.container.addEventListener("touchend",function(b){b.preventDefault(),a.touchEnd=!0,a._handleEvent(b)},!1)},_setMousePosition:function(a){var b=a.clientX-this._getContainerPosition().left+window.pageXOffset,c=a.clientY-this._getContainerPosition().top+window.pageYOffset;this.mousePos={x:b,y:c}},_setTouchPosition:function(a){if(a.touches!==undefined&&a.touches.length===1){var b=a.touches[0],c=b.clientX-this._getContainerPosition().left+window.pageXOffset,d=b.clientY-this._getContainerPosition().top+window.pageYOffset;this.touchPos={x:c,y:d}}},_getContainerPosition:function(){var a=this.container,b=0,c=0;while(a&&a.tagName!=="BODY")b+=a.offsetTop-a.scrollTop,c+=a.offsetLeft-a.scrollLeft,a=a.offsetParent;return{top:b,left:c}},_stripLayer:function(a){a.context.stroke=function(){},a.context.fill=function(){},a.context.fillRect=function(b,c,d,e){a.context.rect(b,c,d,e)},a.context.strokeRect=function(b,c,d,e){a.context.rect(b,c,d,e)},a.context.drawImage=function(){},a.context.fillText=function(){},a.context.strokeText=function(){}},_endDrag:function(a){var b=Kinetic.GlobalObject;b.drag.node&&b.drag.moving&&(b.drag.moving=!1,b.drag.node._handleEvents("ondragend",a)),b.drag.node=undefined},_prepareDrag:function(){var a=this;this.on("mousemove touchmove",function(b){var c=Kinetic.GlobalObject,d=c.drag.node;if(d){var e=a.getUserPosition(),f=d.dragConstraint,g=d.dragBounds;if(f==="none"||f==="horizontal"){var h=e.x-c.drag.offset.x;(g.left===undefined||g.lefth)&&(d.x=h)}if(f==="none"||f==="vertical"){var i=e.y-c.drag.offset.y;(g.top===undefined||g.topi)&&(d.y=i)}c.drag.node.getLayer().draw(),c.drag.moving||(c.drag.moving=!0,c.drag.node._handleEvents("ondragstart",b)),c.drag.node._handleEvents("ondragmove",b)}},!1),this.on("mouseup touchend mouseout",function(b){a._endDrag(b)})},_buildDOM:function(){this.content.style.width=this.width+"px",this.content.style.height=this.height+"px",this.content.style.position="relative",this.content.style.display="inline-block",this.content.className="kineticjs-content",this.container.appendChild(this.content),this.bufferLayer=new Kinetic.Layer,this.backstageLayer=new Kinetic.Layer,this.bufferLayer.parent=this,this.backstageLayer.parent=this,this._stripLayer(this.backstageLayer),this.bufferLayer.getCanvas().style.display="none",this.backstageLayer.getCanvas().style.display="none",this.bufferLayer.canvas.width=this.width,this.bufferLayer.canvas.height=this.height,this.content.appendChild(this.bufferLayer.canvas),this.backstageLayer.canvas.width=this.width,this.backstageLayer.canvas.height=this.height,this.content.appendChild(this.backstageLayer.canvas)}},Kinetic.GlobalObject.extend(Kinetic.Stage,Kinetic.Container),Kinetic.Layer=function(a){this.className="Layer",this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),this.canvas.style.position="absolute",this.transitions=[],this.transitionIdCounter=0,this.isTransitioning=!1,Kinetic.Container.apply(this,[]),Kinetic.Node.apply(this,[a])},Kinetic.Layer.prototype={draw:function(){this._draw()},clear:function(){var a=this.getContext(),b=this.getCanvas();a.clearRect(0,0,b.width,b.height)},getCanvas:function(){return this.canvas},getContext:function(){return this.context},add:function(a){this._add(a)},remove:function(a){this._remove(a)},_draw:function(){this.clear(),this.visible&&this._drawChildren()},_clearTransition:function(a){for(var b=0;b0)return!0}}return this.frame.lastTime=0,!1},_endTransition:function(){var a=this.config;for(var b in a)if(a.hasOwnProperty(b))if(a[b].x!==undefined||a[b].y!==undefined){var c=["x","y"];for(var d=0;d=h.config.duration*1e3?(this._endTransition.apply(h),this._clearTransition(h.node),h.config.callback!==undefined&&h.config.callback()):this._runTransition(h)}f&&e.draw()}}},_updateFrameObject:function(){var a=new Date,b=a.getTime();this.frame.lastTime===0?this.frame.lastTime=b:(this.frame.timeDiff=b-this.frame.lastTime,this.frame.lastTime=b,this.frame.time+=this.frame.timeDiff)},_animationLoop:function(){if(this._isaCanvasAnimating()){this._updateFrameObject(),this._runFrames();var a=this;requestAnimFrame(function(){a._animationLoop()})}},_handleAnimation:function(){var a=this;this._isaCanvasAnimating()&&a._animationLoop()}},window.requestAnimFrame=function(a){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(a){window.setTimeout(a,1e3/60)}}(),Kinetic.Node=function(a){this.visible=!0,this.isListening=!0,this.name=undefined,this.alpha=1,this.x=0,this.y=0,this.scale={x:1,y:1},this.rotation=0,this.centerOffset={x:0,y:0},this.eventListeners={},this.dragConstraint="none",this.dragBounds={},this._draggable=!1;if(a)for(var b in a)switch(b){case"draggable":this.draggable(a[b]);break;case"listen":this.listen(a[b]);break;case"rotationDeg":this.rotation=a[b]*Math.PI/180;break;default:this[b]=a[b]}this.centerOffset.x===undefined&&(this.centerOffset.x=0),this.centerOffset.y===undefined&&(this.centerOffset.y=0)},Kinetic.Node.prototype={on:function(a,b){var c=a.split(" ");for(var d=0;d1?g[1]:"";this.eventListeners[h]||(this.eventListeners[h]=[]),this.eventListeners[h].push({name:i,handler:b})}},off:function(a){var b=a.split(" ");for(var c=0;c1){var h=f[1];for(var i=0;i0&&(this.parent.children.splice(a,1),this.parent.children.splice(a-1,0,this),this.parent._setChildrenIndices())},moveToBottom:function(){var a=this.index;this.parent.children.splice(a,1),this.parent.children.unshift(this),this.parent._setChildrenIndices()},setZIndex:function(a){var b=this.index;this.parent.children.splice(b,1),this.parent.children.splice(a,0,this),this.parent._setChildrenIndices()},setAlpha:function(a){this.alpha=a},getAlpha:function(){return this.alpha},getAbsoluteAlpha:function(){var a=1,b=this;while(b.className!=="Stage")a*=b.alpha,b=b.parent;return a},draggable:function(a){this.draggable!==a&&(a?this._initDrag():this._dragCleanup(),this._draggable=a)},isDragging:function(){var a=Kinetic.GlobalObject;return a.drag.node!==undefined&&a.drag.node.id===this.id&&a.drag.moving},moveTo:function(a){var b=this.parent;b.children.splice(this.index,1),b._setChildrenIndices(),a.children.push(this),this.index=a.children.length-1,this.parent=a,a._setChildrenIndices(),this.name&&(b.childrenNames[this.name]=undefined,a.childrenNames[this.name]=this)},getParent:function(){return this.parent},getLayer:function(){return this.className==="Layer"?this:this.getParent().getLayer()},getStage:function(){return this.className==="Stage"?this:this.getParent().getStage()},getName:function(){return this.name},setCenterOffset:function(a,b){this.centerOffset.x=a,this.centerOffset.y=b},getCenterOffset:function(){return this.centerOffset},transitionTo:function(a){var b=this.getLayer(),c=this,d=a.duration*1e3,e={};Kinetic.GlobalObject._clearTransition(this);for(var f in a)if(a.hasOwnProperty(f)&&f!=="duration"&&f!=="easing"&&f!=="callback")if(a[f].x!==undefined||a[f].y!==undefined){e[f]={};var g=["x","y"];for(var h=0;h0)this.remove(this.children[0])},_remove:function(a){a.name!==undefined&&(this.childrenNames[a.name]=undefined),this.children.splice(a.index,1),this._setChildrenIndices(),a=undefined},_drawChildren:function(){var a=this.children;for(var b=0;b=0;d--){var e=c[d];if(e.className==="Shape"){var f=this._detectEvent(e,b);if(f)return!0}else{var f=this._traverseChildren(e,b);if(f)return!0}}return!1},_handleEvent:function(a){var b=Kinetic.GlobalObject;a||(a=window.event),this._setMousePosition(a),this._setTouchPosition(a);var c=this.backstageLayer;c.clear(),this.targetFound=!1;var d=!1;for(var e=this.children.length-1;e>=0;e--){var f=this.children[e];f.visible&&e>=0&&f.isListening&&this._traverseChildren(f,a)&&(e=-1,d=!0)}!d&&this.mouseoutShape&&(this.mouseoutShape._handleEvents("onmouseout",a),this.mouseoutShape=undefined)},_listen:function(){var a=this;this.container.addEventListener("mousedown",function(b){a.mouseDown=!0,a._handleEvent(b)},!1),this.container.addEventListener("mousemove",function(b){a.mouseUp=!1,a.mouseDown=!1,a._handleEvent(b)},!1),this.container.addEventListener("mouseup",function(b){a.mouseUp=!0,a.mouseDown=!1,a._handleEvent(b),a.clickStart=!1},!1),this.container.addEventListener("mouseover",function(b){a._handleEvent(b)},!1),this.container.addEventListener("mouseout",function(b){a.mousePos=undefined},!1),this.container.addEventListener("touchstart",function(b){b.preventDefault(),a.touchStart=!0,a._handleEvent(b)},!1),this.container.addEventListener("touchmove",function(b){b.preventDefault(),a._handleEvent(b)},!1),this.container.addEventListener("touchend",function(b){b.preventDefault(),a.touchEnd=!0,a._handleEvent(b)},!1)},_setMousePosition:function(a){var b=a.clientX-this._getContainerPosition().left+window.pageXOffset,c=a.clientY-this._getContainerPosition().top+window.pageYOffset;this.mousePos={x:b,y:c}},_setTouchPosition:function(a){if(a.touches!==undefined&&a.touches.length===1){var b=a.touches[0],c=b.clientX-this._getContainerPosition().left+window.pageXOffset,d=b.clientY-this._getContainerPosition().top+window.pageYOffset;this.touchPos={x:c,y:d}}},_getContainerPosition:function(){var a=this.container,b=0,c=0;while(a&&a.tagName!=="BODY")b+=a.offsetTop-a.scrollTop,c+=a.offsetLeft-a.scrollLeft,a=a.offsetParent;return{top:b,left:c}},_stripLayer:function(a){a.context.stroke=function(){},a.context.fill=function(){},a.context.fillRect=function(b,c,d,e){a.context.rect(b,c,d,e)},a.context.strokeRect=function(b,c,d,e){a.context.rect(b,c,d,e)},a.context.drawImage=function(){},a.context.fillText=function(){},a.context.strokeText=function(){}},_endDrag:function(a){var b=Kinetic.GlobalObject;b.drag.node&&b.drag.moving&&(b.drag.moving=!1,b.drag.node._handleEvents("ondragend",a)),b.drag.node=undefined},_prepareDrag:function(){var a=this;this.on("mousemove touchmove",function(b){var c=Kinetic.GlobalObject,d=c.drag.node;if(d){var e=a.getUserPosition(),f=d.dragConstraint,g=d.dragBounds;if(f==="none"||f==="horizontal"){var h=e.x-c.drag.offset.x;(g.left===undefined||g.lefth)&&(d.x=h)}if(f==="none"||f==="vertical"){var i=e.y-c.drag.offset.y;(g.top===undefined||g.topi)&&(d.y=i)}c.drag.node.getLayer().draw(),c.drag.moving||(c.drag.moving=!0,c.drag.node._handleEvents("ondragstart",b)),c.drag.node._handleEvents("ondragmove",b)}},!1),this.on("mouseup touchend mouseout",function(b){a._endDrag(b)})},_buildDOM:function(){this.content.style.width=this.width+"px",this.content.style.height=this.height+"px",this.content.style.position="relative",this.content.style.display="inline-block",this.content.className="kineticjs-content",this.container.appendChild(this.content),this.bufferLayer=new Kinetic.Layer,this.backstageLayer=new Kinetic.Layer,this.bufferLayer.parent=this,this.backstageLayer.parent=this,this._stripLayer(this.backstageLayer),this.bufferLayer.getCanvas().style.display="none",this.backstageLayer.getCanvas().style.display="none",this.bufferLayer.canvas.width=this.width,this.bufferLayer.canvas.height=this.height,this.content.appendChild(this.bufferLayer.canvas),this.backstageLayer.canvas.width=this.width,this.backstageLayer.canvas.height=this.height,this.content.appendChild(this.backstageLayer.canvas)}},Kinetic.GlobalObject.extend(Kinetic.Stage,Kinetic.Container),Kinetic.Layer=function(a){this.className="Layer",this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),this.canvas.style.position="absolute",this.transitions=[],this.transitionIdCounter=0,Kinetic.Container.apply(this,[]),Kinetic.Node.apply(this,[a])},Kinetic.Layer.prototype={draw:function(){this._draw()},clear:function(){var a=this.getContext(),b=this.getCanvas();a.clearRect(0,0,b.width,b.height)},getCanvas:function(){return this.canvas},getContext:function(){return this.context},add:function(a){this._add(a)},remove:function(a){this._remove(a)},_draw:function(){this.clear(),this.visible&&this._drawChildren()},_clearTransition:function(a){for(var b=0;b 0) { return true; } } @@ -136,20 +136,13 @@ Kinetic.GlobalObject = { } } }, - _removeTransition: function(transition) { - var layer = transition.node.getLayer(); - var id = transition.id; + _clearTransition: function(node) { + var layer = node.getLayer(); for(var n = 0; n < layer.transitions.length; n++) { - if(layer.transitions[n].id === id) { - layer.transitions.splice(0, 1); - // exit loop - n = layer.transitions.length; + if(layer.transitions[n].node.id === node.id) { + layer.transitions.splice(n, 1); } } - - if(layer.transitions.length === 0) { - layer.isTransitioning = false; - } }, _runFrames: function() { for(var n = 0; n < this.stages.length; n++) { @@ -171,7 +164,7 @@ Kinetic.GlobalObject = { transition.time += this.frame.timeDiff; if(transition.time >= transition.config.duration * 1000) { this._endTransition.apply(transition); - this._removeTransition(transition); + this._clearTransition(transition.node); if(transition.config.callback !== undefined) { transition.config.callback(); } diff --git a/src/Layer.js b/src/Layer.js index 5b39bb19..3181cf83 100644 --- a/src/Layer.js +++ b/src/Layer.js @@ -16,7 +16,6 @@ Kinetic.Layer = function(config) { this.canvas.style.position = 'absolute'; this.transitions = []; this.transitionIdCounter = 0; - this.isTransitioning = false; // call super constructors Kinetic.Container.apply(this, []); @@ -78,10 +77,10 @@ Kinetic.Layer.prototype = { /** * clear transition if one is running */ - _clearTransition: function(shape) { + _clearTransition: function(node) { for(var n = 0; n < this.transitions.length; n++) { var transition = this.transitions[n]; - if(transition.node.id === shape.id) { + if(transition.node.id === node.id) { Kinetic.GlobalObject._removeTransition(transition); } } diff --git a/src/Node.js b/src/Node.js index 49879e81..216447e9 100644 --- a/src/Node.js +++ b/src/Node.js @@ -455,7 +455,7 @@ Kinetic.Node.prototype = { * This make it easy to start new transitions without * having to explicitly cancel old ones */ - layer._clearTransition(this); + Kinetic.GlobalObject._clearTransition(this); for(var key in config) { if(config.hasOwnProperty(key) && key !== 'duration' && key !== 'easing' && key !== 'callback') { @@ -483,7 +483,6 @@ Kinetic.Node.prototype = { starts: starts }); - layer.isTransitioning = true; Kinetic.GlobalObject._handleAnimation(); }, /** diff --git a/tests/js/Test.js b/tests/js/Test.js index 6c3a91ac..d3f2fa6a 100644 --- a/tests/js/Test.js +++ b/tests/js/Test.js @@ -10,7 +10,7 @@ function log(message) { * Test constructor */ function Test() { - this.testOnly = ''; + this.testOnly = 'TRANSITION - ease-in, ease-out, ease-in-out hovers'; this.counter = 0; } /** diff --git a/tests/js/functionalTests.js b/tests/js/functionalTests.js index 29eda803..3ea1b4bc 100644 --- a/tests/js/functionalTests.js +++ b/tests/js/functionalTests.js @@ -251,6 +251,82 @@ Test.prototype.tests = { stage.add(layer); }, + 'TRANSITION - ease-in, ease-out, ease-in-out hovers': function(containerId) { + function addHovers(shape, easing) { + shape.on("mouseover", function() { + this.transitionTo({ + scale: { + x: 1.5, + y: 1.5 + }, + duration: 1, + easing: easing + }); + }); + shape.on("mouseout", function() { + this.transitionTo({ + scale: { + x: 1, + y: 1 + }, + duration: 1, + easing: easing + }); + }); + } + var stage = new Kinetic.Stage(containerId, 578, 200); + var layer = new Kinetic.Layer(); + var greenBox = new Kinetic.Rect({ + x: 50, + y: stage.height / 2 - 25, + width: 100, + height: 50, + fill: 'green', + stroke: 'black', + strokeWidth: 4, + centerOffset: { + x: 50, + y: 25 + } + }); + + var blueBox = new Kinetic.Rect({ + x: stage.width / 2 - 50, + y: stage.height / 2 - 25, + width: 100, + height: 50, + fill: 'blue', + stroke: 'black', + strokeWidth: 4, + centerOffset: { + x: 50, + y: 25 + } + }); + + var redBox = new Kinetic.Rect({ + x: 428, + y: stage.height / 2 - 25, + width: 100, + height: 50, + fill: 'red', + stroke: 'black', + strokeWidth: 4, + centerOffset: { + x: 50, + y: 25 + } + }); + + addHovers(greenBox, "ease-in"); + addHovers(blueBox, "ease-out"); + addHovers(redBox, "ease-in-out"); + + layer.add(greenBox); + layer.add(blueBox); + layer.add(redBox); + stage.add(layer); + }, 'EVENTS - mousedown mouseup mouseover mouseout click dblclick / touchstart touchend dbltap': function(containerId) { var stage = new Kinetic.Stage(containerId, 578, 200); var layer = new Kinetic.Layer();