From 8c675327b96c422c4044efa16baddde45be9c2fc Mon Sep 17 00:00:00 2001 From: Eric Rowell Date: Sat, 26 May 2012 10:57:56 -0700 Subject: [PATCH] hooked in the setAttrs method to the shadow setter and the pattern fill setter. added more unit tests --- dist/kinetic-core.js | 58 +++- dist/kinetic-core.min.js | 6 +- src/GlobalObject.js | 8 + src/Node.js | 28 +- src/Shape.js | 20 +- tests/base.css | 11 + tests/js/Test.js | 10 + tests/js/unitTests.js | 616 ++++++++++++++++++++++----------------- 8 files changed, 454 insertions(+), 303 deletions(-) diff --git a/dist/kinetic-core.js b/dist/kinetic-core.js index 80dce3c2..3149953d 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: May 25 2012 + * Date: May 26 2012 * * Copyright (C) 2011 - 2012 by Eric Rowell * @@ -322,6 +322,14 @@ Kinetic.GlobalObject = { return arr; } + }, + /* + * set attr + */ + _setAttr: function(obj, attr, val) { + if(val !== undefined) { + obj[attr] = val; + } } }; @@ -485,6 +493,11 @@ Kinetic.Node.prototype = { for(var key in c) { var val = c[key]; + // if obj doesn't have the val property, then create it + if(obj[key] === undefined) { + obj[key] = {}; + } + /* * if property is an object, then add an empty object * to the node and then traverse @@ -517,13 +530,24 @@ Kinetic.Node.prototype = { * config objects */ case 'centerOffset': - obj[key] = go._getXY(val); + var pos = go._getXY(val); + go._setAttr(obj[key], 'x', pos.x); + go._setAttr(obj[key], 'y', pos.y); break; + /* + * includes: + * - patttern offset + * - shadow offset + */ case 'offset': - obj[key] = go._getXY(val); + var pos = go._getXY(val); + go._setAttr(obj[key], 'x', pos.x); + go._setAttr(obj[key], 'y', pos.y); break; case 'scale': - obj[key] = go._getXY(val); + var pos = go._getXY(val); + go._setAttr(obj[key], 'x', pos.x); + go._setAttr(obj[key], 'y', pos.y); break; case 'points': obj[key] = go._getPoints(val); @@ -956,9 +980,9 @@ Kinetic.Node.prototype = { * @param {Number} y */ setCenterOffset: function() { - var pos = Kinetic.GlobalObject._getXY(arguments); - this.attrs.centerOffset.x = pos.x; - this.attrs.centerOffset.y = pos.y; + this.setAttrs({ + centerOffset: arguments + }); }, /** * get center offset @@ -2577,8 +2601,8 @@ Kinetic.Shape = function(config) { blur: 10, alpha: 1, offset: { - x: 0, - y: 0 + x: 0, + y: 0 } } }); @@ -2674,7 +2698,11 @@ Kinetic.Shape.prototype = { f = context.createPattern(fill.image, repeat); context.save(); - context.translate(fill.offset.x, fill.offset.y); + + if(fill.offset !== undefined) { + context.translate(fill.offset.x, fill.offset.y); + } + context.fillStyle = f; context.fill(); context.restore(); @@ -2769,8 +2797,10 @@ Kinetic.Shape.prototype = { * radial gradient object, or pattern object * @param {String|Object} fill */ - setFill: function(fill) { - this.attrs.fill = fill; + setFill: function(config) { + this.setAttrs({ + fill: config + }); }, /** * get fill @@ -2823,7 +2853,9 @@ Kinetic.Shape.prototype = { * @param {Object} config */ setShadow: function(config) { - this.attrs.shadow = config; + this.setAttrs({ + shadow: config + }); }, /** * get shadow object diff --git a/dist/kinetic-core.min.js b/dist/kinetic-core.min.js index 81eeb026..9e5bfddc 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: May 25 2012 + * Date: May 26 2012 * * Copyright (C) 2011 - 2012 by Eric Rowell * @@ -25,5 +25,5 @@ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN * THE SOFTWARE. */ -var Kinetic={};Kinetic.GlobalObject={stages:[],idCounter:0,tempNodes:[],animations:[],animIdCounter:0,animRunning:!1,dragTimeInterval:0,maxDragTimeInterval:20,frame:{time:0,timeDiff:0,lastTime:0},drag:{moving:!1,node:undefined,offset:{x:0,y:0},lastDrawTime: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])},_pullNodes:function(a){var b=this.tempNodes;for(var c=0;c0){this._updateFrameObject(),this._runFrames();var a=this;requestAnimFrame(function(){a._animationLoop()})}else this.animRunning=!1,this.frame.lastTime=0},_handleAnimation:function(){var a=this;this.animRunning?this.frame.lastTime=0:(this.animRunning=!0,a._animationLoop())},_isElement:function(a){return!!a&&a.nodeType==1},_isFunction:function(a){return!!(a&&a.constructor&&a.call&&a.apply)},_isArray:function(a){return a.length!==undefined},_isObject:function(a){return a===Object(a)},_isNumber:function(a){return toString.call(a)=="[object Number]"},_getXY:function(a){if(this._isNumber(a))return{x:a,y:a};if(this._isArray(a)){if(a.length===1){var b=a[0];return this._isNumber(b)?{x:b,y:b}:this._isArray(b)?{x:b[0],y:b[1]}:this._isObject(b)?b:{x:0,y:0}}return{x:a[0],y:a[1]}}return this._isObject(a)?a:{x:0,y:0}},_getSize:function(a){var b=Kinetic.GlobalObject;if(a===undefined)return{width:0,height:0};if(b._isArray(a)){if(a.length===1){var c=a[0];return b._isArray(c)?c.length===2?{width:c[0],height:c[1]}:{width:c[2],height:c[3]}:c}return a.length===2?{width:a[0],height:a[1]}:{width:a[2],height:a[3]}}return a},_getPoints:function(a){if(a===undefined)return[];if(this._isObject(a[0]))return a;var b=[];for(var c=0;c1?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&&f[0].getLevel()<=a&&e(f)}var a=this.getLevel(),b=this.getStage(),c=this,d=0;return c.nodeType!=="Stage"&&e(c.getStage().getChildren()),d},getLevel:function(){var a=0,b=this.parent;while(b)a++,b=b.parent;return a},setScale:function(){this.setAttrs({scale:arguments})},getScale:function(){return this.attrs.scale},setPosition:function(){var a=Kinetic.GlobalObject._getXY(arguments);this.setAttrs(a)},setX:function(a){this.attrs.x=a},setY:function(a){this.attrs.y=a},getX:function(){return this.attrs.x},getY:function(){return this.attrs.y},setDetectionType:function(a){this.attrs.detectionType=a},getDetectionType:function(){return this.attrs.detectionType},getPosition:function(){return{x:this.attrs.x,y:this.attrs.y}},getAbsolutePosition:function(){return this.getAbsoluteTransform().getTranslation()},setAbsolutePosition:function(){var a=Kinetic.GlobalObject._getXY(arguments),b=this.attrs.rotation,c={x:this.attrs.scale.x,y:this.attrs.scale.y},d={x:this.attrs.centerOffset.x,y:this.attrs.centerOffset.y};this.attrs.rotation=0,this.attrs.scale={x:1,y:1};var e=this.getAbsoluteTransform();e.invert(),e.translate(a.x,a.y),a={x:this.attrs.x+e.getTranslation().x,y:this.attrs.y+e.getTranslation().y},this.setPosition(a.x,a.y),this.rotate(b),this.attrs.scale={x:c.x,y:c.y}},move:function(a,b){this.attrs.x+=a,this.attrs.y+=b},setRotation:function(a){this.attrs.rotation=a},setRotationDeg:function(a){this.attrs.rotation=a*Math.PI/180},getRotation:function(){return this.attrs.rotation},getRotationDeg:function(){return this.attrs.rotation*180/Math.PI},rotate:function(a){this.attrs.rotation+=a},rotateDeg:function(a){this.attrs.rotation+=a*Math.PI/180},listen:function(a){this.attrs.listening=a},moveToTop:function(){var a=this.index;this.parent.children.splice(a,1),this.parent.children.push(this),this.parent._setChildrenIndices()},moveUp:function(){var a=this.index;this.parent.children.splice(a,1),this.parent.children.splice(a+1,0,this),this.parent._setChildrenIndices()},moveDown:function(){var a=this.index;a>0&&(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.attrs.alpha=a},getAlpha:function(){return this.attrs.alpha},getAbsoluteAlpha:function(){var a=1,b=this;while(b.nodeType!=="Stage")a*=b.attrs.alpha,b=b.parent;return a},draggable:function(a){this.attrs.draggable!==a&&(a?this._initDrag():this._dragCleanup(),this.attrs.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()},getParent:function(){return this.parent},getLayer:function(){return this.nodeType==="Layer"?this:this.getParent().getLayer()},getStage:function(){return this.nodeType==="Stage"?this:this.getParent()===undefined?undefined:this.getParent().getStage()},getName:function(){return this.attrs.name},setCenterOffset:function(){var a=Kinetic.GlobalObject._getXY(arguments);this.attrs.centerOffset.x=a.x,this.attrs.centerOffset.y=a.y},getCenterOffset:function(){return this.attrs.centerOffset},transitionTo:function(a){var b=Kinetic.GlobalObject;this.transAnim!==undefined&&(b._removeAnimation(this.transAnim),this.transAnim=undefined);var c=this.nodeType==="Stage"?this:this.getLayer(),d=this,e=new Kinetic.Transition(this,a),f={func:function(){e.onEnterFrame()},node:c};return this.transAnim=f,b._addAnimation(f),e.onFinished=function(){b._removeAnimation(f),d.transAnim=undefined,a.callback!==undefined&&a.callback(),f.node.draw()},e.start(),b._handleAnimation(),e},setDragConstraint:function(a){this.attrs.dragConstraint=a},getDragConstraint:function(){return this.attrs.dragConstraint},setDragBounds:function(a){this.attrs.dragBounds=a},getDragBounds:function(){return this.attrs.dragBounds},getAbsoluteTransform:function(){var a=new Kinetic.Transform,b=[],c=this.parent;b.unshift(this);while(c)b.unshift(c),c=c.parent;for(var d=0;d0)this.remove(this.children[0])},_remove:function(a){if(a.index!==undefined&&this.children[a.index]._id==a._id){var b=this.getStage();b!==undefined&&(b._removeId(a),b._removeName(a));var c=Kinetic.GlobalObject;for(var d=0;d=0;d--){var e=c[d];if(e.attrs.listening)if(e.nodeType==="Shape"){var f=this._detectEvent(e,b);if(f)return!0}else{var f=this._traverseChildren(e,b);if(f)return!0}}return!1},_handleStageEvent:function(a){var b=Kinetic.GlobalObject;a||(a=window.event),this._setMousePosition(a),this._setTouchPosition(a),this.pathLayer.clear(),this.targetFound=!1;var c=!1;for(var d=this.children.length-1;d>=0;d--){var e=this.children[d];e.attrs.visible&&d>=0&&e.attrs.listening&&this._traverseChildren(e,a)&&(d=-1,c=!0)}!c&&this.mouseoutShape&&(this.mouseoutShape._handleEvents("onmouseout",a),this.mouseoutShape=undefined)},_listen:function(){var a=this;this.content.addEventListener("mousedown",function(b){a.mouseDown=!0,a._handleStageEvent(b)},!1),this.content.addEventListener("mousemove",function(b){a.mouseUp=!1,a.mouseDown=!1,a._handleStageEvent(b)},!1),this.content.addEventListener("mouseup",function(b){a.mouseUp=!0,a.mouseDown=!1,a._handleStageEvent(b),a.clickStart=!1},!1),this.content.addEventListener("mouseover",function(b){a._handleStageEvent(b)},!1),this.content.addEventListener("mouseout",function(b){var c=a.targetShape;c&&(c._handleEvents("onmouseout",b),a.targetShape=undefined),a.mousePos=undefined},!1),this.content.addEventListener("touchstart",function(b){b.preventDefault(),a.touchStart=!0,a._handleStageEvent(b)},!1),this.content.addEventListener("touchmove",function(b){b.preventDefault(),a._handleStageEvent(b)},!1),this.content.addEventListener("touchend",function(b){b.preventDefault(),a.touchEnd=!0,a._handleStageEvent(b)},!1)},_setMousePosition:function(a){var b=a.offsetX||a.clientX-this._getContentPosition().left+window.pageXOffset,c=a.offsetY||a.clientY-this._getContentPosition().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._getContentPosition().left+window.pageXOffset,d=b.clientY-this._getContentPosition().top+window.pageYOffset;this.touchPos={x:c,y:d}}},_getContentPosition:function(){var a=this.content,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}},_modifyPathContext:function(a){a.stroke=function(){},a.fill=function(){},a.fillRect=function(b,c,d,e){a.rect(b,c,d,e)},a.strokeRect=function(b,c,d,e){a.rect(b,c,d,e)},a.drawImage=function(){},a.fillText=function(){},a.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._onContent("mousemove touchmove",function(b){var c=Kinetic.GlobalObject,d=c.drag.node;if(d){var e=new Date,f=e.getTime();if(f-c.drag.lastDrawTime>c.dragTimeInterval){c.drag.lastDrawTime=f;var g=a.getUserPosition(),h=d.attrs.dragConstraint,i=d.attrs.dragBounds,j={x:d.attrs.x,y:d.attrs.y},k={x:g.x-c.drag.offset.x,y:g.y-c.drag.offset.y};i.left!==undefined&&k.xi.right&&(k.x=i.right),i.top!==undefined&&k.yi.bottom&&(k.y=i.bottom),d.setAbsolutePosition(k),h==="horizontal"?d.attrs.y=j.y:h==="vertical"&&(d.attrs.x=j.x),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._onContent("mouseup touchend mouseout",function(b){a._endDrag(b)})},_buildDOM:function(){this.content.style.position="relative",this.content.style.display="inline-block",this.content.className="kineticjs-content",this.attrs.container.appendChild(this.content),this.bufferLayer=new Kinetic.Layer({name:"bufferLayer"}),this.pathLayer=new Kinetic.Layer({name:"pathLayer"}),this.bufferLayer.parent=this,this.pathLayer.parent=this,this._modifyPathContext(this.pathLayer.context),this.bufferLayer.getCanvas().style.display="none",this.pathLayer.getCanvas().style.display="none",this.bufferLayer.canvas.className="kineticjs-buffer-layer",this.content.appendChild(this.bufferLayer.canvas),this.pathLayer.canvas.className="kineticjs-path-layer",this.content.appendChild(this.pathLayer.canvas),this.setSize(this.attrs.width,this.attrs.height)},_addId:function(a){a.attrs.id!==undefined&&(this.ids[a.attrs.id]=a)},_removeId:function(a){a.attrs.id!==undefined&&(this.ids[a.attrs.id]=undefined)},_addName:function(a){var b=a.attrs.name;b!==undefined&&(this.names[b]===undefined&&(this.names[b]=[]),this.names[b].push(a))},_removeName:function(a){if(a.attrs.name!==undefined){var b=this.names[a.attrs.name];if(b!==undefined)for(var c=0;c=e)this._draw(),this.drawTimeout!==undefined&&(clearTimeout(this.drawTimeout),this.drawTimeout=undefined);else if(this.drawTimeout===undefined){var f=this;this.drawTimeout=setTimeout(function(){f.draw()},17)}},setThrottle:function(a){this.attrs.throttle=a},getThrottle:function(){return this.attrs.throttle},beforeDraw:function(a){this.beforeDrawFunc=a},afterDraw:function(a){this.afterDrawFunc=a},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){return this._add(a),this},remove:function(a){return this._remove(a),this},_draw:function(){var a=new Date,b=a.getTime();this.lastDrawTime=b,this.beforeDrawFunc!==undefined&&this.beforeDrawFunc.call(this),this.clear(),this.attrs.visible&&(this.attrs.drawFunc!==undefined&&this.attrs.drawFunc.call(this),this._drawChildren()),this.afterDrawFunc!==undefined&&this.afterDrawFunc.call(this)}},Kinetic.GlobalObject.extend(Kinetic.Layer,Kinetic.Container),Kinetic.GlobalObject.extend(Kinetic.Layer,Kinetic.Node),Kinetic.Group=function(a){this.nodeType="Group",Kinetic.Container.apply(this,[]),Kinetic.Node.apply(this,[a])},Kinetic.Group.prototype={add:function(a){return this._add(a),this},remove:function(a){return this._remove(a),this},_draw:function(){this.attrs.visible&&this._drawChildren()}},Kinetic.GlobalObject.extend(Kinetic.Group,Kinetic.Container),Kinetic.GlobalObject.extend(Kinetic.Group,Kinetic.Node),Kinetic.Shape=function(a){this.setDefaultAttrs({fill:undefined,stroke:undefined,strokeWidth:undefined,lineJoin:undefined,detectionType:"path",shadow:{blur:10,alpha:1,offset:{x:0,y:0}}}),this.data=[],this.nodeType="Shape",Kinetic.Node.apply(this,[a])},Kinetic.Shape.prototype={getContext:function(){return this.tempLayer===undefined?null:this.tempLayer.getContext()},getCanvas:function(){return this.tempLayer.getCanvas()},stroke:function(){var a=this.getContext();if(!!this.attrs.stroke||!!this.attrs.strokeWidth){var b=this.attrs.stroke?this.attrs.stroke:"black",c=this.attrs.strokeWidth?this.attrs.strokeWidth:2;a.lineWidth=c,a.strokeStyle=b,a.stroke()}},applyStyles:function(){var a=this.getContext();this.attrs.fill?(this.applyShadow(this.fill),this.stroke()):this.applyShadow(this.stroke)},fill:function(){var a=this.getContext(),b=this.attrs.fill;if(!!b){var c=b.start,d=b.end,e=null;if(typeof b=="string")e=this.attrs.fill,a.fillStyle=e,a.fill();else if(b.image!==undefined){var f=b.repeat===undefined?"repeat":b.repeat;e=a.createPattern(b.image,f),a.save(),a.translate(b.offset.x,b.offset.y),a.fillStyle=e,a.fill(),a.restore()}else if(c.radius===undefined&&d.radius===undefined){var a=this.getContext(),g=a.createLinearGradient(c.x,c.y,d.x,d.y),h=b.colorStops;for(var i=0;i0){var f=this.attrs.points[c-1].x,g=this.attrs.points[c-1].y;this._dashedLine(f,g,d,e,this.attrs.dashArray)}else a.lineTo(d,e)}!this.attrs.lineCap||(a.lineCap=this.attrs.lineCap),this.applyStyles()},Kinetic.Shape.apply(this,[a])},Kinetic.Line.prototype={setPoints:function(a){var b={};b.points=a,this.setAttrs(b)},getPoints:function(){return this.attrs.points},setLineCap:function(a){this.attrs.lineCap=a},getLineCap:function(){return this.attrs.lineCap},setDashArray:function(a){this.attrs.dashArray=a},getDashArray:function(){return this.attrs.dashArray},_dashedLine:function(a,b,c,d,e){var f=this.getContext(),g=e.length,h=c-a,i=d-b,j=h>i,k=j?i/h:h/i;k>9999?k=9999:k<-9999&&(k=-9999);var l=Math.sqrt(h*h+i*i),m=0,n=!0;while(l>=.1&&m<1e4){var o=e[m++%g];o===0&&(o=.001),o>l&&(o=l);var p=Math.sqrt(o*o/(1+k*k));j?(a+=h<0&&i<0?p*-1:p,b+=h<0&&i<0?k*p*-1:k*p):(a+=h<0&&i<0?k*p*-1:k*p,b+=h<0&&i<0?p*-1:p),f[n?"lineTo":"moveTo"](a,b),l-=o,n=!n}f.moveTo(c,d)}},Kinetic.GlobalObject.extend(Kinetic.Line,Kinetic.Shape),Kinetic.Transform=function(){this.m=[1,0,0,1,0,0]},Kinetic.Transform.prototype={translate:function(a,b){this.m[4]+=this.m[0]*a+this.m[2]*b,this.m[5]+=this.m[1]*a+this.m[3]*b},scale:function(a,b){this.m[0]*=a,this.m[1]*=a,this.m[2]*=b,this.m[3]*=b},rotate:function(a){var b=Math.cos(a),c=Math.sin(a),d=this.m[0]*b+this.m[2]*c,e=this.m[1]*b+this.m[3]*c,f=this.m[0]*-c+this.m[2]*b,g=this.m[1]*-c+this.m[3]*b;this.m[0]=d,this.m[1]=e,this.m[2]=f,this.m[3]=g},getTranslation:function(){return{x:this.m[4],y:this.m[5]}},multiply:function(a){var b=this.m[0]*a.m[0]+this.m[2]*a.m[1],c=this.m[1]*a.m[0]+this.m[3]*a.m[1],d=this.m[0]*a.m[2]+this.m[2]*a.m[3],e=this.m[1]*a.m[2]+this.m[3]*a.m[3],f=this.m[0]*a.m[4]+this.m[2]*a.m[5]+this.m[4],g=this.m[1]*a.m[4]+this.m[3]*a.m[5]+this.m[5];this.m[0]=b,this.m[1]=c,this.m[2]=d,this.m[3]=e,this.m[4]=f,this.m[5]=g},invert:function(){var a=1/(this.m[0]*this.m[3]-this.m[1]*this.m[2]),b=this.m[3]*a,c=-this.m[1]*a,d=-this.m[2]*a,e=this.m[0]*a,f=a*(this.m[2]*this.m[5]-this.m[3]*this.m[4]),g=a*(this.m[1]*this.m[4]-this.m[0]*this.m[5]);this.m[0]=b,this.m[1]=c,this.m[2]=d,this.m[3]=e,this.m[4]=f,this.m[5]=g},getMatrix:function(){return this.m}},Kinetic.Transition=function(a,b){function d(a,b){for(var e in a)e!=="duration"&&e!=="easing"&&e!=="callback"&&(Kinetic.GlobalObject._isObject(a[e])?d(a[e],b[e]):c.add(c._getTween(b,e,a[e])))}this.node=a,this.config=b,this.tweens=[];var c=this;d(b,a.attrs);var e=0,c=this;for(var f=0;f=c.tweens.length&&c.onFinished()}}},Kinetic.Transition.prototype={add:function(a){this.tweens.push(a)},start:function(){for(var a=0;athis.getDuration()?this.looping?(this.rewind(a-this._duration),this.update(),this.broadcastMessage("onLooped",{target:this,type:"onLooped"})):(this._time=this._duration,this.update(),this.stop(),this.broadcastMessage("onFinished",{target:this,type:"onFinished"})):a<0?(this.rewind(),this.update()):(this._time=a,this.update())},getTime:function(){return this._time},setDuration:function(a){this._duration=a===null||a<=0?1e5:a},getDuration:function(){return this._duration},setPosition:function(a){this.prevPos=this._pos,this.propFunc(a),this._pos=a,this.broadcastMessage("onChanged",{target:this,type:"onChanged"})},getPosition:function(a){return a===undefined&&(a=this._time),this.func(a,this.begin,this._change,this._duration)},setFinish:function(a){this._change=a-this.begin},getFinish:function(){return this.begin+this._change},start:function(){this.rewind(),this.startEnterFrame(),this.broadcastMessage("onStarted",{target:this,type:"onStarted"})},rewind:function(a){this.stop(),this._time=a===undefined?0:a,this.fixTime(),this.update()},fforward:function(){this._time=this._duration,this.fixTime(),this.update()},update:function(){this.setPosition(this.getPosition(this._time))},startEnterFrame:function(){this.stopEnterFrame(),this.isPlaying=!0,this.onEnterFrame()},onEnterFrame:function(){this.isPlaying&&this.nextFrame()},nextFrame:function(){this.setTime((this.getTimer()-this._startTime)/1e3)},stop:function(){this.stopEnterFrame(),this.broadcastMessage("onStopped",{target:this,type:"onStopped"})},stopEnterFrame:function(){this.isPlaying=!1},continueTo:function(a,b){this.begin=this._pos,this.setFinish(a),this._duration!=undefined&&this.setDuration(b),this.start()},resume:function(){this.fixTime(),this.startEnterFrame(),this.broadcastMessage("onResumed",{target:this,type:"onResumed"})},yoyo:function(){this.continueTo(this.begin,this._time)},addListener:function(a){return this.removeListener(a),this._listeners.push(a)},removeListener:function(a){var b=this._listeners,c=b.length;while(c--)if(b[c]==a)return b.splice(c,1),!0;return!1},broadcastMessage:function(){var a=[];for(var b=0;b0){this._updateFrameObject(),this._runFrames();var a=this;requestAnimFrame(function(){a._animationLoop()})}else this.animRunning=!1,this.frame.lastTime=0},_handleAnimation:function(){var a=this;this.animRunning?this.frame.lastTime=0:(this.animRunning=!0,a._animationLoop())},_isElement:function(a){return!!a&&a.nodeType==1},_isFunction:function(a){return!!(a&&a.constructor&&a.call&&a.apply)},_isArray:function(a){return a.length!==undefined},_isObject:function(a){return a===Object(a)},_isNumber:function(a){return toString.call(a)=="[object Number]"},_getXY:function(a){if(this._isNumber(a))return{x:a,y:a};if(this._isArray(a)){if(a.length===1){var b=a[0];return this._isNumber(b)?{x:b,y:b}:this._isArray(b)?{x:b[0],y:b[1]}:this._isObject(b)?b:{x:0,y:0}}return{x:a[0],y:a[1]}}return this._isObject(a)?a:{x:0,y:0}},_getSize:function(a){var b=Kinetic.GlobalObject;if(a===undefined)return{width:0,height:0};if(b._isArray(a)){if(a.length===1){var c=a[0];return b._isArray(c)?c.length===2?{width:c[0],height:c[1]}:{width:c[2],height:c[3]}:c}return a.length===2?{width:a[0],height:a[1]}:{width:a[2],height:a[3]}}return a},_getPoints:function(a){if(a===undefined)return[];if(this._isObject(a[0]))return a;var b=[];for(var c=0;c1?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&&f[0].getLevel()<=a&&e(f)}var a=this.getLevel(),b=this.getStage(),c=this,d=0;return c.nodeType!=="Stage"&&e(c.getStage().getChildren()),d},getLevel:function(){var a=0,b=this.parent;while(b)a++,b=b.parent;return a},setScale:function(){this.setAttrs({scale:arguments})},getScale:function(){return this.attrs.scale},setPosition:function(){var a=Kinetic.GlobalObject._getXY(arguments);this.setAttrs(a)},setX:function(a){this.attrs.x=a},setY:function(a){this.attrs.y=a},getX:function(){return this.attrs.x},getY:function(){return this.attrs.y},setDetectionType:function(a){this.attrs.detectionType=a},getDetectionType:function(){return this.attrs.detectionType},getPosition:function(){return{x:this.attrs.x,y:this.attrs.y}},getAbsolutePosition:function(){return this.getAbsoluteTransform().getTranslation()},setAbsolutePosition:function(){var a=Kinetic.GlobalObject._getXY(arguments),b=this.attrs.rotation,c={x:this.attrs.scale.x,y:this.attrs.scale.y},d={x:this.attrs.centerOffset.x,y:this.attrs.centerOffset.y};this.attrs.rotation=0,this.attrs.scale={x:1,y:1};var e=this.getAbsoluteTransform();e.invert(),e.translate(a.x,a.y),a={x:this.attrs.x+e.getTranslation().x,y:this.attrs.y+e.getTranslation().y},this.setPosition(a.x,a.y),this.rotate(b),this.attrs.scale={x:c.x,y:c.y}},move:function(a,b){this.attrs.x+=a,this.attrs.y+=b},setRotation:function(a){this.attrs.rotation=a},setRotationDeg:function(a){this.attrs.rotation=a*Math.PI/180},getRotation:function(){return this.attrs.rotation},getRotationDeg:function(){return this.attrs.rotation*180/Math.PI},rotate:function(a){this.attrs.rotation+=a},rotateDeg:function(a){this.attrs.rotation+=a*Math.PI/180},listen:function(a){this.attrs.listening=a},moveToTop:function(){var a=this.index;this.parent.children.splice(a,1),this.parent.children.push(this),this.parent._setChildrenIndices()},moveUp:function(){var a=this.index;this.parent.children.splice(a,1),this.parent.children.splice(a+1,0,this),this.parent._setChildrenIndices()},moveDown:function(){var a=this.index;a>0&&(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.attrs.alpha=a},getAlpha:function(){return this.attrs.alpha},getAbsoluteAlpha:function(){var a=1,b=this;while(b.nodeType!=="Stage")a*=b.attrs.alpha,b=b.parent;return a},draggable:function(a){this.attrs.draggable!==a&&(a?this._initDrag():this._dragCleanup(),this.attrs.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()},getParent:function(){return this.parent},getLayer:function(){return this.nodeType==="Layer"?this:this.getParent().getLayer()},getStage:function(){return this.nodeType==="Stage"?this:this.getParent()===undefined?undefined:this.getParent().getStage()},getName:function(){return this.attrs.name},setCenterOffset:function(){this.setAttrs({centerOffset:arguments})},getCenterOffset:function(){return this.attrs.centerOffset},transitionTo:function(a){var b=Kinetic.GlobalObject;this.transAnim!==undefined&&(b._removeAnimation(this.transAnim),this.transAnim=undefined);var c=this.nodeType==="Stage"?this:this.getLayer(),d=this,e=new Kinetic.Transition(this,a),f={func:function(){e.onEnterFrame()},node:c};return this.transAnim=f,b._addAnimation(f),e.onFinished=function(){b._removeAnimation(f),d.transAnim=undefined,a.callback!==undefined&&a.callback(),f.node.draw()},e.start(),b._handleAnimation(),e},setDragConstraint:function(a){this.attrs.dragConstraint=a},getDragConstraint:function(){return this.attrs.dragConstraint},setDragBounds:function(a){this.attrs.dragBounds=a},getDragBounds:function(){return this.attrs.dragBounds},getAbsoluteTransform:function(){var a=new Kinetic.Transform,b=[],c=this.parent;b.unshift(this);while(c)b.unshift(c),c=c.parent;for(var d=0;d0)this.remove(this.children[0])},_remove:function(a){if(a.index!==undefined&&this.children[a.index]._id==a._id){var b=this.getStage();b!==undefined&&(b._removeId(a),b._removeName(a));var c=Kinetic.GlobalObject;for(var d=0;d=0;d--){var e=c[d];if(e.attrs.listening)if(e.nodeType==="Shape"){var f=this._detectEvent(e,b);if(f)return!0}else{var f=this._traverseChildren(e,b);if(f)return!0}}return!1},_handleStageEvent:function(a){var b=Kinetic.GlobalObject;a||(a=window.event),this._setMousePosition(a),this._setTouchPosition(a),this.pathLayer.clear(),this.targetFound=!1;var c=!1;for(var d=this.children.length-1;d>=0;d--){var e=this.children[d];e.attrs.visible&&d>=0&&e.attrs.listening&&this._traverseChildren(e,a)&&(d=-1,c=!0)}!c&&this.mouseoutShape&&(this.mouseoutShape._handleEvents("onmouseout",a),this.mouseoutShape=undefined)},_listen:function(){var a=this;this.content.addEventListener("mousedown",function(b){a.mouseDown=!0,a._handleStageEvent(b)},!1),this.content.addEventListener("mousemove",function(b){a.mouseUp=!1,a.mouseDown=!1,a._handleStageEvent(b)},!1),this.content.addEventListener("mouseup",function(b){a.mouseUp=!0,a.mouseDown=!1,a._handleStageEvent(b),a.clickStart=!1},!1),this.content.addEventListener("mouseover",function(b){a._handleStageEvent(b)},!1),this.content.addEventListener("mouseout",function(b){var c=a.targetShape;c&&(c._handleEvents("onmouseout",b),a.targetShape=undefined),a.mousePos=undefined},!1),this.content.addEventListener("touchstart",function(b){b.preventDefault(),a.touchStart=!0,a._handleStageEvent(b)},!1),this.content.addEventListener("touchmove",function(b){b.preventDefault(),a._handleStageEvent(b)},!1),this.content.addEventListener("touchend",function(b){b.preventDefault(),a.touchEnd=!0,a._handleStageEvent(b)},!1)},_setMousePosition:function(a){var b=a.offsetX||a.clientX-this._getContentPosition().left+window.pageXOffset,c=a.offsetY||a.clientY-this._getContentPosition().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._getContentPosition().left+window.pageXOffset,d=b.clientY-this._getContentPosition().top+window.pageYOffset;this.touchPos={x:c,y:d}}},_getContentPosition:function(){var a=this.content,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}},_modifyPathContext:function(a){a.stroke=function(){},a.fill=function(){},a.fillRect=function(b,c,d,e){a.rect(b,c,d,e)},a.strokeRect=function(b,c,d,e){a.rect(b,c,d,e)},a.drawImage=function(){},a.fillText=function(){},a.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._onContent("mousemove touchmove",function(b){var c=Kinetic.GlobalObject,d=c.drag.node;if(d){var e=new Date,f=e.getTime();if(f-c.drag.lastDrawTime>c.dragTimeInterval){c.drag.lastDrawTime=f;var g=a.getUserPosition(),h=d.attrs.dragConstraint,i=d.attrs.dragBounds,j={x:d.attrs.x,y:d.attrs.y},k={x:g.x-c.drag.offset.x,y:g.y-c.drag.offset.y};i.left!==undefined&&k.xi.right&&(k.x=i.right),i.top!==undefined&&k.yi.bottom&&(k.y=i.bottom),d.setAbsolutePosition(k),h==="horizontal"?d.attrs.y=j.y:h==="vertical"&&(d.attrs.x=j.x),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._onContent("mouseup touchend mouseout",function(b){a._endDrag(b)})},_buildDOM:function(){this.content.style.position="relative",this.content.style.display="inline-block",this.content.className="kineticjs-content",this.attrs.container.appendChild(this.content),this.bufferLayer=new Kinetic.Layer({name:"bufferLayer"}),this.pathLayer=new Kinetic.Layer({name:"pathLayer"}),this.bufferLayer.parent=this,this.pathLayer.parent=this,this._modifyPathContext(this.pathLayer.context),this.bufferLayer.getCanvas().style.display="none",this.pathLayer.getCanvas().style.display="none",this.bufferLayer.canvas.className="kineticjs-buffer-layer",this.content.appendChild(this.bufferLayer.canvas),this.pathLayer.canvas.className="kineticjs-path-layer",this.content.appendChild(this.pathLayer.canvas),this.setSize(this.attrs.width,this.attrs.height)},_addId:function(a){a.attrs.id!==undefined&&(this.ids[a.attrs.id]=a)},_removeId:function(a){a.attrs.id!==undefined&&(this.ids[a.attrs.id]=undefined)},_addName:function(a){var b=a.attrs.name;b!==undefined&&(this.names[b]===undefined&&(this.names[b]=[]),this.names[b].push(a))},_removeName:function(a){if(a.attrs.name!==undefined){var b=this.names[a.attrs.name];if(b!==undefined)for(var c=0;c=e)this._draw(),this.drawTimeout!==undefined&&(clearTimeout(this.drawTimeout),this.drawTimeout=undefined);else if(this.drawTimeout===undefined){var f=this;this.drawTimeout=setTimeout(function(){f.draw()},17)}},setThrottle:function(a){this.attrs.throttle=a},getThrottle:function(){return this.attrs.throttle},beforeDraw:function(a){this.beforeDrawFunc=a},afterDraw:function(a){this.afterDrawFunc=a},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){return this._add(a),this},remove:function(a){return this._remove(a),this},_draw:function(){var a=new Date,b=a.getTime();this.lastDrawTime=b,this.beforeDrawFunc!==undefined&&this.beforeDrawFunc.call(this),this.clear(),this.attrs.visible&&(this.attrs.drawFunc!==undefined&&this.attrs.drawFunc.call(this),this._drawChildren()),this.afterDrawFunc!==undefined&&this.afterDrawFunc.call(this)}},Kinetic.GlobalObject.extend(Kinetic.Layer,Kinetic.Container),Kinetic.GlobalObject.extend(Kinetic.Layer,Kinetic.Node),Kinetic.Group=function(a){this.nodeType="Group",Kinetic.Container.apply(this,[]),Kinetic.Node.apply(this,[a])},Kinetic.Group.prototype={add:function(a){return this._add(a),this},remove:function(a){return this._remove(a),this},_draw:function(){this.attrs.visible&&this._drawChildren()}},Kinetic.GlobalObject.extend(Kinetic.Group,Kinetic.Container),Kinetic.GlobalObject.extend(Kinetic.Group,Kinetic.Node),Kinetic.Shape=function(a){this.setDefaultAttrs({fill:undefined,stroke:undefined,strokeWidth:undefined,lineJoin:undefined,detectionType:"path",shadow:{blur:10,alpha:1,offset:{x:0,y:0}}}),this.data=[],this.nodeType="Shape",Kinetic.Node.apply(this,[a])},Kinetic.Shape.prototype={getContext:function(){return this.tempLayer===undefined?null:this.tempLayer.getContext()},getCanvas:function(){return this.tempLayer.getCanvas()},stroke:function(){var a=this.getContext();if(!!this.attrs.stroke||!!this.attrs.strokeWidth){var b=this.attrs.stroke?this.attrs.stroke:"black",c=this.attrs.strokeWidth?this.attrs.strokeWidth:2;a.lineWidth=c,a.strokeStyle=b,a.stroke()}},applyStyles:function(){var a=this.getContext();this.attrs.fill?(this.applyShadow(this.fill),this.stroke()):this.applyShadow(this.stroke)},fill:function(){var a=this.getContext(),b=this.attrs.fill;if(!!b){var c=b.start,d=b.end,e=null;if(typeof b=="string")e=this.attrs.fill,a.fillStyle=e,a.fill();else if(b.image!==undefined){var f=b.repeat===undefined?"repeat":b.repeat;e=a.createPattern(b.image,f),a.save(),b.offset!==undefined&&a.translate(b.offset.x,b.offset.y),a.fillStyle=e,a.fill(),a.restore()}else if(c.radius===undefined&&d.radius===undefined){var a=this.getContext(),g=a.createLinearGradient(c.x,c.y,d.x,d.y),h=b.colorStops;for(var i=0;i0){var f=this.attrs.points[c-1].x,g=this.attrs.points[c-1].y;this._dashedLine(f,g,d,e,this.attrs.dashArray)}else a.lineTo(d,e)}!this.attrs.lineCap||(a.lineCap=this.attrs.lineCap),this.applyStyles()},Kinetic.Shape.apply(this,[a])},Kinetic.Line.prototype={setPoints:function(a){var b={};b.points=a,this.setAttrs(b)},getPoints:function(){return this.attrs.points},setLineCap:function(a){this.attrs.lineCap=a},getLineCap:function(){return this.attrs.lineCap},setDashArray:function(a){this.attrs.dashArray=a},getDashArray:function(){return this.attrs.dashArray},_dashedLine:function(a,b,c,d,e){var f=this.getContext(),g=e.length,h=c-a,i=d-b,j=h>i,k=j?i/h:h/i;k>9999?k=9999:k<-9999&&(k=-9999);var l=Math.sqrt(h*h+i*i),m=0,n=!0;while(l>=.1&&m<1e4){var o=e[m++%g];o===0&&(o=.001),o>l&&(o=l);var p=Math.sqrt(o*o/(1+k*k));j?(a+=h<0&&i<0?p*-1:p,b+=h<0&&i<0?k*p*-1:k*p):(a+=h<0&&i<0?k*p*-1:k*p,b+=h<0&&i<0?p*-1:p),f[n?"lineTo":"moveTo"](a,b),l-=o,n=!n}f.moveTo(c,d)}},Kinetic.GlobalObject.extend(Kinetic.Line,Kinetic.Shape),Kinetic.Transform=function(){this.m=[1,0,0,1,0,0]},Kinetic.Transform.prototype={translate:function(a,b){this.m[4]+=this.m[0]*a+this.m[2]*b,this.m[5]+=this.m[1]*a+this.m[3]*b},scale:function(a,b){this.m[0]*=a,this.m[1]*=a,this.m[2]*=b,this.m[3]*=b},rotate:function(a){var b=Math.cos(a),c=Math.sin(a),d=this.m[0]*b+this.m[2]*c,e=this.m[1]*b+this.m[3]*c,f=this.m[0]*-c+this.m[2]*b,g=this.m[1]*-c+this.m[3]*b;this.m[0]=d,this.m[1]=e,this.m[2]=f,this.m[3]=g},getTranslation:function(){return{x:this.m[4],y:this.m[5]}},multiply:function(a){var b=this.m[0]*a.m[0]+this.m[2]*a.m[1],c=this.m[1]*a.m[0]+this.m[3]*a.m[1],d=this.m[0]*a.m[2]+this.m[2]*a.m[3],e=this.m[1]*a.m[2]+this.m[3]*a.m[3],f=this.m[0]*a.m[4]+this.m[2]*a.m[5]+this.m[4],g=this.m[1]*a.m[4]+this.m[3]*a.m[5]+this.m[5];this.m[0]=b,this.m[1]=c,this.m[2]=d,this.m[3]=e,this.m[4]=f,this.m[5]=g},invert:function(){var a=1/(this.m[0]*this.m[3]-this.m[1]*this.m[2]),b=this.m[3]*a,c=-this.m[1]*a,d=-this.m[2]*a,e=this.m[0]*a,f=a*(this.m[2]*this.m[5]-this.m[3]*this.m[4]),g=a*(this.m[1]*this.m[4]-this.m[0]*this.m[5]);this.m[0]=b,this.m[1]=c,this.m[2]=d,this.m[3]=e,this.m[4]=f,this.m[5]=g},getMatrix:function(){return this.m}},Kinetic.Transition=function(a,b){function d(a,b){for(var e in a)e!=="duration"&&e!=="easing"&&e!=="callback"&&(Kinetic.GlobalObject._isObject(a[e])?d(a[e],b[e]):c.add(c._getTween(b,e,a[e])))}this.node=a,this.config=b,this.tweens=[];var c=this;d(b,a.attrs);var e=0,c=this;for(var f=0;f=c.tweens.length&&c.onFinished()}}},Kinetic.Transition.prototype={add:function(a){this.tweens.push(a)},start:function(){for(var a=0;athis.getDuration()?this.looping?(this.rewind(a-this._duration),this.update(),this.broadcastMessage("onLooped",{target:this,type:"onLooped"})):(this._time=this._duration,this.update(),this.stop(),this.broadcastMessage("onFinished",{target:this,type:"onFinished"})):a<0?(this.rewind(),this.update()):(this._time=a,this.update())},getTime:function(){return this._time},setDuration:function(a){this._duration=a===null||a<=0?1e5:a},getDuration:function(){return this._duration},setPosition:function(a){this.prevPos=this._pos,this.propFunc(a),this._pos=a,this.broadcastMessage("onChanged",{target:this,type:"onChanged"})},getPosition:function(a){return a===undefined&&(a=this._time),this.func(a,this.begin,this._change,this._duration)},setFinish:function(a){this._change=a-this.begin},getFinish:function(){return this.begin+this._change},start:function(){this.rewind(),this.startEnterFrame(),this.broadcastMessage("onStarted",{target:this,type:"onStarted"})},rewind:function(a){this.stop(),this._time=a===undefined?0:a,this.fixTime(),this.update()},fforward:function(){this._time=this._duration,this.fixTime(),this.update()},update:function(){this.setPosition(this.getPosition(this._time))},startEnterFrame:function(){this.stopEnterFrame(),this.isPlaying=!0,this.onEnterFrame()},onEnterFrame:function(){this.isPlaying&&this.nextFrame()},nextFrame:function(){this.setTime((this.getTimer()-this._startTime)/1e3)},stop:function(){this.stopEnterFrame(),this.broadcastMessage("onStopped",{target:this,type:"onStopped"})},stopEnterFrame:function(){this.isPlaying=!1},continueTo:function(a,b){this.begin=this._pos,this.setFinish(a),this._duration!=undefined&&this.setDuration(b),this.start()},resume:function(){this.fixTime(),this.startEnterFrame(),this.broadcastMessage("onResumed",{target:this,type:"onResumed"})},yoyo:function(){this.continueTo(this.begin,this._time)},addListener:function(a){return this.removeListener(a),this._listeners.push(a)},removeListener:function(a){var b=this._listeners,c=b.length;while(c--)if(b[c]==a)return b.splice(c,1),!0;return!1},broadcastMessage:function(){var a=[];for(var b=0;b 0, 'text height should have a value'); }, - 'SHAPES - get shape name': function(containerId) { + 'SHAPE - get shape name': function(containerId) { var stage = new Kinetic.Stage({ container: containerId, width: 578, @@ -2222,7 +2197,7 @@ Test.prototype.tests = { test(circle.getName() == 'myCircle', 'name should be myCircle'); }, - 'SHAPES - remove shape': function(containerId) { + 'SHAPE - remove shape': function(containerId) { var stage = new Kinetic.Stage({ container: containerId, width: 578, @@ -2267,11 +2242,104 @@ Test.prototype.tests = { - - - - - 'NODE - test setPosition': function(containerId) { + 'NODE - test setting shadow offset': function(containerId) { + var stage = new Kinetic.Stage({ + container: containerId, + width: 578, + height: 200 + }); + var layer = new Kinetic.Layer(); + var rect = new Kinetic.Rect({ + x: 0, + y: 0, + width: 100, + height: 50, + fill: 'red', + shadow: { + color: 'blue', + blur: 12 + } + }); + + layer.add(rect); + stage.add(layer); + + rect.setShadow({ + offset: [1, 2] + }); + test(rect.getShadow().offset.x === 1, 'shadow offset x should be 1'); + test(rect.getShadow().offset.y === 2, 'shadow offset y should be 2'); + // make sure we still have the other properties + test(rect.getShadow().color === 'blue', 'shadow color should still be blue'); + test(rect.getShadow().blur === 12, 'shadow blur should still be 12'); + + rect.setShadow({ + offset: { + x: 3, + y: 4 + } + }); + test(rect.getShadow().offset.x === 3, 'shadow offset x should be 3'); + test(rect.getShadow().offset.y === 4, 'shadow offset y should be 4'); + + // test partial setting + rect.setShadow({ + offset: { + x: 5 + } + }); + test(rect.getShadow().offset.x === 5, 'shadow offset x should be 5'); + test(rect.getShadow().offset.y === 4, 'shadow offset y should be 4'); + + // test partial setting + rect.setShadow({ + offset: { + y: 6 + } + }); + test(rect.getShadow().offset.x === 5, 'shadow offset x should be 5'); + test(rect.getShadow().offset.y === 6, 'shadow offset y should be 6'); + }, + 'NODE - test setCenterOffset': function(containerId) { + var stage = new Kinetic.Stage({ + container: containerId, + width: 578, + height: 200 + }); + var layer = new Kinetic.Layer(); + var rect = new Kinetic.Rect({ + x: 0, + y: 0, + width: 100, + height: 50, + fill: 'red' + }); + + layer.add(rect); + stage.add(layer); + + rect.setCenterOffset(1, 2); + test(rect.getCenterOffset().x === 1, 'center offset x should be 1'); + test(rect.getCenterOffset().y === 2, 'center offset y should be 2'); + + rect.setCenterOffset([3, 4]); + test(rect.getCenterOffset().x === 3, 'center offset x should be 3'); + test(rect.getCenterOffset().y === 4, 'center offset y should be 4'); + + rect.setCenterOffset({x: 5, y: 6}); + test(rect.getCenterOffset().x === 5, 'center offset x should be 5'); + test(rect.getCenterOffset().y === 6, 'center offset y should be 6'); + + rect.setCenterOffset({x: 7}); + test(rect.getCenterOffset().x === 7, 'center offset x should be 7'); + test(rect.getCenterOffset().y === 6, 'center offset y should be 6'); + + rect.setCenterOffset({y: 8}); + test(rect.getCenterOffset().x === 7, 'center offset x should be 7'); + test(rect.getCenterOffset().y === 8, 'center offset y should be 8'); + + }, + 'NODE - test setPosition': function(containerId) { var stage = new Kinetic.Stage({ container: containerId, width: 578, @@ -2289,26 +2357,33 @@ Test.prototype.tests = { layer.add(rect); stage.add(layer); - rect.setPosition(1, 2); - test(rect.getPosition().x ===1, 'rect x should be 1'); - test(rect.getPosition().y === 2, 'rect y should be 2'); - - rect.setPosition([3, 4]); - test(rect.getPosition().x ===3, 'rect x should be 3'); - test(rect.getPosition().y === 4, 'rect y should be 4'); - - rect.setPosition({x: 5, y:6}); - test(rect.getPosition().x ===5, 'rect x should be 5'); - test(rect.getPosition().y === 6, 'rect y should be 6'); - - rect.setPosition({x: 7}); - test(rect.getPosition().x ===7, 'rect x should be 7'); - test(rect.getPosition().y === 6, 'rect y should be 6'); - - rect.setPosition({y: 8}); - test(rect.getPosition().x ===7, 'rect x should be 7'); - test(rect.getPosition().y === 8, 'rect y should be 8'); - }, + rect.setPosition(1, 2); + test(rect.getPosition().x === 1, 'rect x should be 1'); + test(rect.getPosition().y === 2, 'rect y should be 2'); + + rect.setPosition([3, 4]); + test(rect.getPosition().x === 3, 'rect x should be 3'); + test(rect.getPosition().y === 4, 'rect y should be 4'); + + rect.setPosition({ + x: 5, + y: 6 + }); + test(rect.getPosition().x === 5, 'rect x should be 5'); + test(rect.getPosition().y === 6, 'rect y should be 6'); + + rect.setPosition({ + x: 7 + }); + test(rect.getPosition().x === 7, 'rect x should be 7'); + test(rect.getPosition().y === 6, 'rect y should be 6'); + + rect.setPosition({ + y: 8 + }); + test(rect.getPosition().x === 7, 'rect x should be 7'); + test(rect.getPosition().y === 8, 'rect y should be 8'); + }, 'NODE - test setScale': function(containerId) { var stage = new Kinetic.Stage({ container: containerId, @@ -2329,26 +2404,37 @@ Test.prototype.tests = { layer.add(rect); stage.add(layer); - rect.setScale(2, 3); - test(rect.getScale().x === 2, 'rect scale x should be 2'); - test(rect.getScale().y=== 3, 'rect scale x should be 3'); - - rect.setScale(4); - test(rect.getScale().x === 4, 'rect scale x should be 4'); - test(rect.getScale().y=== 4, 'rect scale x should be 4'); - - rect.setScale([5, 6]); - test(rect.getScale().x === 5, 'rect scale x should be 5'); - test(rect.getScale().y=== 6, 'rect scale x should be 6'); - - rect.setScale([7, 8, 999, 999]); - test(rect.getScale().x === 7, 'rect scale x should be 7'); - test(rect.getScale().y=== 8, 'rect scale x should be 8'); - - rect.setScale({x: 9, y:10}); - test(rect.getScale().x === 9, 'rect scale x should be 9'); - test(rect.getScale().y=== 10, 'rect scale x should be 10'); - + rect.setScale(2, 3); + test(rect.getScale().x === 2, 'rect scale x should be 2'); + test(rect.getScale().y === 3, 'rect scale x should be 3'); + + rect.setScale(4); + test(rect.getScale().x === 4, 'rect scale x should be 4'); + test(rect.getScale().y === 4, 'rect scale x should be 4'); + + rect.setScale([5, 6]); + test(rect.getScale().x === 5, 'rect scale x should be 5'); + test(rect.getScale().y === 6, 'rect scale x should be 6'); + + rect.setScale([7, 8, 999, 999]); + test(rect.getScale().x === 7, 'rect scale x should be 7'); + test(rect.getScale().y === 8, 'rect scale x should be 8'); + + rect.setScale({ + x: 9, + y: 10 + }); + test(rect.getScale().x === 9, 'rect scale x should be 9'); + test(rect.getScale().y === 10, 'rect scale x should be 10'); + + rect.setScale({x: 11}); + test(rect.getScale().x === 11, 'rect scale x should be 11'); + test(rect.getScale().y === 10, 'rect scale x should be 10'); + + rect.setScale({y: 12}); + test(rect.getScale().x === 11, 'rect scale x should be 11'); + test(rect.getScale().y === 12, 'rect scale x should be 12'); + }, 'NODE - test config scale': function(containerId) { var stage = new Kinetic.Stage({ @@ -2364,11 +2450,11 @@ Test.prototype.tests = { height: 50, fill: 'red', scale: { - x: 2, - y: 3 + x: 2, + y: 3 } }); - + var rect2 = new Kinetic.Rect({ x: 200, y: 20, @@ -2378,8 +2464,7 @@ Test.prototype.tests = { scale: 2 }); - - var rect3 = new Kinetic.Rect({ + var rect3 = new Kinetic.Rect({ x: 200, y: 20, width: 100, @@ -2387,40 +2472,44 @@ Test.prototype.tests = { fill: 'red', scale: [2, 3] }); - + var rect4 = new Kinetic.Rect({ x: 200, y: 20, width: 100, height: 50, fill: 'red', - scale: {x : 2} + scale: { + x: 2 + } }); - + var rect5 = new Kinetic.Rect({ x: 200, y: 20, width: 100, height: 50, fill: 'red', - scale: {y : 2} + scale: { + y: 2 + } }); - - layer.add(rect1).add(rect2).add(rect3).add(rect4).add(rect5); + + layer.add(rect1).add(rect2).add(rect3).add(rect4).add(rect5); stage.add(layer); - + test(rect1.getScale().x === 2, 'rect1 scale x should be 2'); test(rect1.getScale().y === 3, 'rect1 scale y should be 3'); - + test(rect2.getScale().x === 2, 'rect2 scale x should be 2'); test(rect2.getScale().y === 2, 'rect2 scale y should be 2'); - + test(rect3.getScale().x === 2, 'rect3 scale x should be 2'); test(rect3.getScale().y === 3, 'rect3 scale y should be 3'); - + test(rect4.getScale().x === 2, 'rect4 scale x should be 2'); test(rect4.getScale().y === 1, 'rect4 scale y should be 1'); - + test(rect5.getScale().x === 1, 'rect5 scale x should be 1'); test(rect5.getScale().y === 2, 'rect5 scale y should be 2'); }, @@ -2438,7 +2527,7 @@ Test.prototype.tests = { height: 50, fill: 'red' }); - + var rect2 = new Kinetic.Rect({ x: 3, width: 100, @@ -2446,31 +2535,31 @@ Test.prototype.tests = { fill: 'red' }); - var rect3 = new Kinetic.Rect({ + var rect3 = new Kinetic.Rect({ y: 4, width: 100, height: 50, fill: 'red' }); - + var rect4 = new Kinetic.Rect({ width: 100, height: 50, fill: 'red' }); - - layer.add(rect1).add(rect2).add(rect3).add(rect4); + + layer.add(rect1).add(rect2).add(rect3).add(rect4); stage.add(layer); - + test(rect1.getPosition().x === 1, 'rect1 x should be 1'); test(rect1.getPosition().y === 2, 'rect1 y should be 2'); - + test(rect2.getPosition().x === 3, 'rect2 x should be 3'); test(rect2.getPosition().y === 0, 'rect2 y should be 0'); - + test(rect3.getPosition().x === 0, 'rect3 x should be 0'); test(rect3.getPosition().y === 4, 'rect3 y should be 4'); - + test(rect4.getPosition().x === 0, 'rect4 x should be 0'); test(rect4.getPosition().y === 0, 'rect4 y should be 0'); }, @@ -2808,19 +2897,6 @@ Test.prototype.tests = { layer.add(circle); layer.draw(); }, - - - - - - - - - - - - - 'TRANSFORMS - move shape, group, and layer, and then get absolute position': function(containerId) { var stage = new Kinetic.Stage({ container: containerId, @@ -2897,7 +2973,7 @@ Test.prototype.tests = { layer.draw(); }, - 'SHAPES - hide show circle': function(containerId) { + 'SHAPE - hide show circle': function(containerId) { var stage = new Kinetic.Stage({ container: containerId, width: 578, @@ -2928,7 +3004,7 @@ Test.prototype.tests = { test(circle.isVisible() === true, 'circle should be visible'); }, - 'SHAPES - set shape alpha to 0.5': function(containerId) { + 'SHAPE - set shape alpha to 0.5': function(containerId) { var stage = new Kinetic.Stage({ container: containerId, width: 578, @@ -2948,7 +3024,7 @@ Test.prototype.tests = { layer.add(circle); stage.add(layer); }, - 'SHAPES - set shape alpha to 0.5 then back to 1': function(containerId) { + 'SHAPE - set shape alpha to 0.5 then back to 1': function(containerId) { var stage = new Kinetic.Stage({ container: containerId, width: 578, @@ -2975,16 +3051,6 @@ Test.prototype.tests = { test(circle.getAbsoluteAlpha() === 1, 'abs alpha should be 1'); }, - - - - - - - - - - //////////////////////////////////////////////////////////////////////// // LAYERING tests ////////////////////////////////////////////////////////////////////////