Skip to content
Browse files

finished custom shape serialization with new attrs structure

  • Loading branch information...
1 parent 58eb778 commit 1a40e506227d53ea02b0a446c464b63c79b87797 @ericdrowell committed Apr 7, 2012
Showing with 73 additions and 74 deletions.
  1. +3 −3 dist/kinetic-core.js
  2. +3 −3 dist/kinetic-core.min.js
  3. +1 −2 src/Shape.js
  4. +2 −1 src/Stage.js
  5. +64 −65 tests/js/unitTests.js
View
6 dist/kinetic-core.js
@@ -1121,6 +1121,7 @@ Kinetic.Stage.prototype = {
function addNode(node) {
var obj = {};
obj.attrs = node.attrs;
+
obj.nodeType = node.nodeType;
obj.shapeType = node.shapeType;
@@ -1145,7 +1146,7 @@ Kinetic.Stage.prototype = {
function loadNode(node, obj) {
// if custom shape then set draw function
if(obj.nodeType === 'Shape' && obj.shapeType === undefined) {
- node.drawFunc = drawFuncs[obj.drawFuncName];
+ node.drawFunc = drawFuncs[obj.attrs.drawFuncName];
}
var children = obj.children;
@@ -1928,11 +1929,10 @@ Kinetic.Shape = function(config) {
this.attrs.strokeWidth = undefined;
this.attrs.lineJoin = undefined;
this.attrs.detectionType = 'path';
- this.attrs.drawFuncName = undefined;
// special
this.drawFunc = config.drawFunc;
-
+
this.data = [];
this.nodeType = 'Shape';
View
6 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: Apr 05 2012
+ * Date: Apr 07 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,animations:[],animIdCounter:0,frame:{time:0,timeDiff:0,lastTime:0},drag:{moving:!1,node:undefined,offset:{x:0,y:0}},jsonProps:function(a){this.jsonProps===undefined?this.jsonProps=a:this.jsonProps=this.jsonProps.concat(a)},arrayHas:function(a,b){for(var c=0;c<a.length;c++)if(a[c]===b)return!0;return!1},extend:function(a,b){for(var c in b.prototype)b.prototype.hasOwnProperty(c)&&a.prototype[c]===undefined&&(a.prototype[c]=b.prototype[c])},addAnimation:function(a){a.id=Kinetic.GlobalObject.animIdCounter++,this.animations.push(a)},removeAnimation:function(a){var b=this.animations;for(var c=0;c<b.length;c++)if(b[c].id===a)return this.animations.splice(c,1),!1},_runFrames:function(){var a={};for(var b=0;b<this.animations.length;b++){var c=this.animations[b];c.node&&c.node.id!==undefined&&(a[c.node.id]=c.node),c.func(this.frame)}for(var d in a)a[d].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.animations.length>0){this._updateFrameObject(),this._runFrames();var a=this;requestAnimFrame(function(){a._animationLoop()})}else this.frame.lastTime=0},_handleAnimation:function(){var a=this;this.animations.length>0?a._animationLoop():this.frame.lastTime=0}},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.listening=!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.GlobalObject.jsonProps.call(this,["alpha","centerOffset","dragBounds","dragConstraint","_draggable","listening","name","nodeType","rotation","scale","visible","x","y"])},Kinetic.Node.prototype={on:function(a,b){var c=a.split(" ");for(var d=0;d<c.length;d++){var e=c[d],f=e.indexOf("touch")===-1?"on"+e:e,g=f.split("."),h=g[0],i=g.length>1?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;c<b.length;c++){var d=b[c],e=d.indexOf("touch")===-1?"on"+d:d,f=e.split("."),g=f[0];if(this.eventListeners[g]&&f.length>1){var h=f[1];for(var i=0;i<this.eventListeners[g].length;i++)if(this.eventListeners[g][i].name===h){this.eventListeners[g].splice(i,1),this.eventListeners[g].length===0&&(this.eventListeners[g]=undefined);break}}else this.eventListeners[g]=undefined}},show:function(){this.visible=!0},hide:function(){this.visible=!1},getZIndex:function(){return this.index},getAbsoluteZIndex:function(){function e(b){var f=[];for(var g=0;g<b.length;g++){var h=b[g];d++,h.nodeType!=="Shape"&&(f=f.concat(h.getChildren())),h.id===c.id&&(g=b.length)}f.length>0&&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(a,b){b?(this.scale.x=a,this.scale.y=b):(this.scale.x=a,this.scale.y=a)},getScale:function(){return this.scale},setPosition:function(a,b){this.x=a,this.y=b},getPosition:function(){return{x:this.x,y:this.y}},getAbsolutePosition:function(){return this.getAbsoluteTransform().getTranslation()},move:function(a,b){this.x+=a,this.y+=b},setRotation:function(a){this.rotation=a},setRotationDeg:function(a){this.rotation=a*Math.PI/180},getRotation:function(){return this.rotation},getRotationDeg:function(){return this.rotation*180/Math.PI},rotate:function(a){this.rotation+=a},rotateDeg:function(a){this.rotation+=a*Math.PI/180},listen:function(a){this.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.alpha=a},getAlpha:function(){return this.alpha},getAbsoluteAlpha:function(){var a=1,b=this;while(b.nodeType!=="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.nodeType==="Layer"?this:this.getParent().getLayer()},getStage:function(){return this.nodeType==="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.nodeType==="Stage"?this:this.getLayer(),c=this,d=Kinetic.GlobalObject,e=new Kinetic.Transition(this,a),f={func:function(){e.onEnterFrame()},node:b};return d.addAnimation(f),e.tweens[0].onFinished=function(){d.removeAnimation(f.id),a.callback!==undefined&&a.callback()},e.start(),d._handleAnimation(),e},setDragConstraint:function(a){this.dragConstraint=a},getDragConstraint:function(){return this.dragConstraint},setDragBounds:function(a){this.dragBounds=a},getDragBounds:function(){return this.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;d<b.length;d++){var e=b[d],f=e.getTransform();a.multiply(f)}return a},getTransform:function(){var a=new Kinetic.Transform;return(this.x!==0||this.y!==0)&&a.translate(this.x,this.y),this.rotation!==0&&a.rotate(this.rotation),(this.scale.x!==1||this.scale.y!==1)&&a.scale(this.scale.x,this.scale.y),(this.centerOffset.x!==0||this.centerOffset.y!==0)&&a.translate(-1*this.centerOffset.x,-1*this.centerOffset.y),a},_initDrag:function(){this._dragCleanup();var a=Kinetic.GlobalObject,b=this;this.on("mousedown.initdrag touchstart.initdrag",function(c){var d=b.getStage(),e=d.getUserPosition();if(e){var f=b.getTransform().getTranslation(),g=b.getAbsoluteTransform().getTranslation();a.drag.node=b,a.drag.offset.x=e.x-b.getAbsoluteTransform().getTranslation().x,a.drag.offset.y=e.y-b.getAbsoluteTransform().getTranslation().y}})},_dragCleanup:function(){this.off("mousedown.initdrag"),this.off("touchstart.initdrag")},_handleEvents:function(a,b){this.nodeType==="Shape"&&(b.shape=this);var c=this.getStage();this._handleEvent(this,c.mouseoverShape,c.mouseoutShape,a,b)},_handleEvent:function(a,b,c,d,e){var f=a.eventListeners,g=!0;d==="onmouseover"&&c&&c.id===a.id?g=!1:d==="onmouseout"&&b&&b.id===a.id&&(g=!1);if(f[d]&&g){var h=f[d];for(var i=0;i<h.length;i++)h[i].handler.apply(a,[e])}var j=b?b.parent:undefined,k=c?c.parent:undefined;!e.cancelBubble&&a.parent.nodeType!=="Stage"&&this._handleEvent(a.parent,j,k,d,e)}},Kinetic.Container=function(){this.children=[],this.childrenNames={},Kinetic.GlobalObject.jsonProps.call(this,[])},Kinetic.Container.prototype={getChildren:function(){return this.children},getChild:function(a){return this.childrenNames[a]},removeChildren:function(){while(this.children.length>0)this.remove(this.children[0])},_remove:function(a){this.children[a.index].id==a.id&&(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<a.length;b++){var c=a[b];c.nodeType==="Shape"?c._draw(c.getLayer()):c._draw()}},_add:function(a){a.name&&(this.childrenNames[a.name]=a),a.id=Kinetic.GlobalObject.idCounter++,a.index=this.children.length,a.parent=this,this.children.push(a)},_setChildrenIndices:function(){if(this.nodeType==="Stage"){var a=this.content.children,b=a[0],c=a[1];this.content.innerHTML="",this.content.appendChild(b),this.content.appendChild(c)}for(var d=0;d<this.children.length;d++)this.children[d].index=d,this.nodeType==="Stage"&&this.content.appendChild(this.children[d].canvas)}},Kinetic.Stage=function(a){typeof a.container=="string"&&(a.container=document.getElementById(a.container)),this.nodeType="Stage",this.container=a.container,this.content=document.createElement("div"),this.width=a.width,this.height=a.height,this.scale={x:1,y:1},this.dblClickWindow=400,this.clickStart=!1,this.targetShape=undefined,this.targetFound=!1,this.mouseoverShape=undefined,this.mouseoutShape=undefined,this.mousePos=undefined,this.mouseDown=!1,this.mouseUp=!1,this.touchPos=undefined,this.touchStart=!1,this.touchEnd=!1,this.id=Kinetic.GlobalObject.idCounter++,this._buildDOM(),this._listen(),this._prepareDrag(),this.anim=undefined,Kinetic.GlobalObject.stages.push(this),Kinetic.GlobalObject.jsonProps.call(this,["height","width"]),Kinetic.Container.apply(this,[]),Kinetic.Node.apply(this,[a])},Kinetic.Stage.prototype={onFrame:function(a){var b=Kinetic.GlobalObject;this.anim={func:a}},start:function(){var a=Kinetic.GlobalObject;a.addAnimation(this.anim),a._handleAnimation()},stop:function(){var a=Kinetic.GlobalObject;a.removeAnimation(this.anim.id),a._handleAnimation()},draw:function(){this._drawChildren()},setSize:function(a,b){var c=this.children;for(var d=0;d<c.length;d++){var e=c[d];e.getCanvas().width=a,e.getCanvas().height=b,e.draw()}this.width=a,this.height=b,this.bufferLayer.getCanvas().width=a,this.bufferLayer.getCanvas().height=b,this.pathLayer.getCanvas().width=a,this.pathLayer.getCanvas().height=b},getSize:function(){return{width:this.width,height:this.height}},clear:function(){var a=this.children;for(var b=0;b<a.length;b++)a[b].clear()},toDataURL:function(a,b,c){function g(h){var i=f[h].getCanvas().toDataURL(),j=new Image;j.onload=function(){e.drawImage(this,0,0),h++;if(h<f.length)g(h);else try{a(d.getCanvas().toDataURL(b,c))}catch(i){a(d.getCanvas().toDataURL())}},j.src=i}var d=this.bufferLayer,e=d.getContext(),f=this.children;d.clear(),g(0)},toJSON:function(){function b(c){var d={};for(var e in c)c.hasOwnProperty(e)&&a.arrayHas(c.jsonProps,e)&&(d[e]=c[e]);if(c.nodeType!=="Shape"){d._children=[];var f=c.getChildren();for(var g=0;g<f.length;g++){var h=f[g];d._children.push(b(h))}}return d}var a=Kinetic.GlobalObject;return JSON.stringify(b(this))},load:function(a){function b(a,c){for(var d in c)a[d]=c[d];var e=c._children;if(e!==undefined)for(var f=0;f<e.length;f++){var g=e[f],h;g.nodeType==="Shape"?g.shapeType===undefined?h="Shape":h=g.shapeType:h=g.nodeType;var i=new Kinetic[h]({});a.add(i),b(i,g)}}b(this,JSON.parse(a)),this.draw()},remove:function(a){try{this.content.removeChild(a.canvas)}catch(b){}this._remove(a)},onContent:function(a,b){var c=a.split(" ");for(var d=0;d<c.length;d++){var e=c[d];this.content.addEventListener(e,b,!1)}},add:function(a){a.name&&(this.childrenNames[a.name]=a),a.canvas.width=this.width,a.canvas.height=this.height,this._add(a),a.draw(),this.content.appendChild(a.canvas)},getMousePosition:function(a){return this.mousePos},getTouchPosition:function(a){return this.touchPos},getUserPosition:function(a){return this.getTouchPosition()||this.getMousePosition()},getContainer:function(){return this.container},getContent:function(){return this.content},getStage:function(){return this},_detectEvent:function(a,b){var c=Kinetic.GlobalObject.drag.moving,d=Kinetic.GlobalObject,e=this.getUserPosition(),f=a.eventListeners;this.targetShape&&a.id===this.targetShape.id&&(this.targetFound=!0);if(a.visible&&e!==undefined&&a._isPointInShape(e)){if(!c&&this.mouseDown)return this.mouseDown=!1,this.clickStart=!0,a._handleEvents("onmousedown",b),!0;if(this.mouseUp)return this.mouseUp=!1,a._handleEvents("onmouseup",b),this.clickStart&&(!d.drag.moving||!d.drag.node)&&(a._handleEvents("onclick",b),a.inDoubleClickWindow&&a._handleEvents("ondblclick",b),a.inDoubleClickWindow=!0,setTimeout(function(){a.inDoubleClickWindow=!1},this.dblClickWindow)),!0;if(this.touchStart){this.touchStart=!1,a._handleEvents("touchstart",b);if(f.ondbltap&&a.inDoubleClickWindow){var g=f.ondbltap;for(var h=0;h<g.length;h++)g[h].handler.apply(a,[b])}return a.inDoubleClickWindow=!0,setTimeout(function(){a.inDoubleClickWindow=!1},this.dblClickWindow),!0}if(this.touchEnd)return this.touchEnd=!1,a._handleEvents("touchend",b),!0;if(!c&&this._isNewTarget(a,b))return this.mouseoutShape&&(this.mouseoverShape=a,this.mouseoutShape._handleEvents("onmouseout",b),this.mouseoverShape=undefined),a._handleEvents("onmouseover",b),this._setTarget(a),!0;if(!c)return a._handleEvents("onmousemove",b),a._handleEvents("touchmove",b),!0}else if(!c&&this.targetShape&&this.targetShape.id===a.id)return this._setTarget(undefined),this.mouseoutShape=a,!0;return!1},_setTarget:function(a){this.targetShape=a,this.targetFound=!0},_isNewTarget:function(a,b){if(!this.targetShape||!this.targetFound&&a.id!==this.targetShape.id){if(this.targetShape){var c=this.targetShape.eventListeners;c&&(this.mouseoutShape=this.targetShape)}return!0}return!1},_traverseChildren:function(a,b){var c=a.children;for(var d=c.length-1;d>=0;d--){var e=c[d];if(e.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.visible&&d>=0&&e.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=a.getUserPosition(),f=d.dragConstraint,g=d.dragBounds,h={x:e.x-c.drag.offset.x,y:e.y-c.drag.offset.y};g.left!==undefined&&h.x<g.left&&(h.x=g.left),g.right!==undefined&&h.x>g.right&&(h.x=g.right),g.top!==undefined&&h.y<g.top&&(h.y=g.top),g.bottom!==undefined&&h.y>g.bottom&&(h.y=g.bottom);var i=d.rotation,j={x:d.scale.x,y:d.scale.y};d.rotation=0,d.scale={x:1,y:1};var k=d.getAbsoluteTransform();k.invert(),k.translate(h.x,h.y),h={x:d.x+k.getTranslation().x,y:d.y+k.getTranslation().y},f==="horizontal"?h.y=d.y:f==="vertical"&&(h.x=d.x),d.setPosition(h.x,h.y),d.rotate(i),d.scale={x:j.x,y:j.y},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.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({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.width=this.width,this.bufferLayer.canvas.height=this.height,this.bufferLayer.canvas.className="kineticjs-buffer-layer",this.content.appendChild(this.bufferLayer.canvas),this.pathLayer.canvas.width=this.width,this.pathLayer.canvas.height=this.height,this.pathLayer.canvas.className="kineticjs-path-layer",this.content.appendChild(this.pathLayer.canvas)}},Kinetic.GlobalObject.extend(Kinetic.Stage,Kinetic.Container),Kinetic.GlobalObject.extend(Kinetic.Stage,Kinetic.Node),Kinetic.Layer=function(a){this.nodeType="Layer",this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),this.canvas.style.position="absolute",Kinetic.GlobalObject.jsonProps.call(this,[]),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()}},Kinetic.GlobalObject.extend(Kinetic.Layer,Kinetic.Container),Kinetic.GlobalObject.extend(Kinetic.Layer,Kinetic.Node),Kinetic.Group=function(a){this.nodeType="Group",Kinetic.GlobalObject.jsonProps.call(this,[]),Kinetic.Container.apply(this,[]),Kinetic.Node.apply(this,[a])},Kinetic.Group.prototype={add:function(a){this._add(a)},remove:function(a){this._remove(a)},_draw:function(){this.visible&&this._drawChildren()}},Kinetic.GlobalObject.extend(Kinetic.Group,Kinetic.Container),Kinetic.GlobalObject.extend(Kinetic.Group,Kinetic.Node),Kinetic.Shape=function(a){this.nodeType="Shape",this.data=[];if(a.stroke!==undefined||a.strokeWidth!==undefined)a.stroke===undefined?a.stroke="black":a.strokeWidth===undefined&&(a.strokeWidth=2);this.detectionType="path",this.drawFunc=a.drawFunc,Kinetic.GlobalObject.jsonProps.call(this,["fill","stroke","strokeWidth","detectionType","shapeType"]),Kinetic.Node.apply(this,[a])},Kinetic.Shape.prototype={getContext:function(){return this.tempLayer.getContext()},getCanvas:function(){return this.tempLayer.getCanvas()},fillStroke:function(){var a=this.getContext();this.fill!==undefined&&(a.fillStyle=this.fill,a.fill()),this.stroke!==undefined&&(a.lineWidth=this.strokeWidth===undefined?1:this.strokeWidth,a.strokeStyle=this.stroke,a.stroke())},applyLineJoin:function(){var a=this.getContext();this.lineJoin!==undefined&&(a.lineJoin=this.lineJoin)},setFill:function(a){this.fill=a},getFill:function(){return this.fill},setStroke:function(a){this.stroke=a},getStroke:function(){return this.stroke},setLineJoin:function(a){this.lineJoin=a},getLineJoin:function(){return this.lineJoin},setStrokeWidth:function(a){this.strokeWidth=a},getStrokeWidth:function(){return this.strokeWidth},setDrawFunc:function(a){this.drawFunc=a},save:function(){var a=this.getStage(),b=a.width,c=a.height,d=a.bufferLayer,e=d.getContext();d.clear(),this._draw(d);var f=e.getImageData(0,0,b,c);this.data=f.data},_draw:function(a){if(this.visible){var b=a.getStage(),c=a.getContext(),d=[],e=this.parent;d.unshift(this);while(e)d.unshift(e),e=e.parent;c.save();for(var f=0;f<d.length;f++){var g=d[f],h=g.getTransform().getMatrix();c.transform(h[0],h[1],h[2],h[3],h[4],h[5]),g.getAbsoluteAlpha()!==1&&(c.globalAlpha=g.getAbsoluteAlpha())}this.tempLayer=a,this.drawFunc.call(this),c.restore()}this.detectionType==="pixel"&&(this.data=[])},_isPointInShape:function(a){var b=this.getStage();if(this.detectionType==="path"){var c=b.pathLayer,d=c.getContext();return this._draw(c),d.isPointInPath(a.x,a.y)}var e=b.width,f=this.data[(e*a.y+a.x)*4+3];return f!==undefined&&f!==0}},Kinetic.GlobalObject.extend(Kinetic.Shape,Kinetic.Node),Kinetic.Rect=function(a){this.shapeType="Rect",a.drawFunc=function(){var a=this.getContext();a.beginPath(),this.applyLineJoin(),a.rect(0,0,this.width,this.height),a.closePath(),this.fillStroke()},Kinetic.Shape.apply(this,[a])},Kinetic.Rect.prototype={setWidth:function(a){this.width=a},getWidth:function(){return this.width},setHeight:function(a){this.height=a},getHeight:function(){return this.height},setSize:function(a,b){this.width=a,this.height=b},getSize:function(){return{width:this.width,height:this.height}}},Kinetic.GlobalObject.extend(Kinetic.Rect,Kinetic.Shape),Kinetic.Circle=function(a){this.shapeType="Circle",a.drawFunc=function(){var a=this.getCanvas(),b=this.getContext();b.beginPath(),this.applyLineJoin(),b.arc(0,0,this.radius,0,Math.PI*2,!0),b.closePath(),this.fillStroke()},Kinetic.GlobalObject.jsonProps.call(this,["radius"]),Kinetic.Shape.apply(this,[a])},Kinetic.Circle.prototype={setRadius:function(a){this.radius=a},getRadius:function(){return this.radius}},Kinetic.GlobalObject.extend(Kinetic.Circle,Kinetic.Shape),Kinetic.Image=function(a){this.shapeType="Image",a.width===undefined&&(a.width=a.image.width),a.height===undefined&&(a.height=a.image.height),a.drawFunc=function(){var a=this.getCanvas(),b=this.getContext();b.beginPath(),this.applyLineJoin(),b.rect(0,0,this.width,this.height),b.closePath(),this.fillStroke(),b.drawImage(this.image,0,0,this.width,this.height)},Kinetic.Shape.apply(this,[a])},Kinetic.Image.prototype={setImage:function(a){this.image=a},getImage:function(){return this.image},setWidth:function(a){this.width=a},getWidth:function(){return this.width},setHeight:function(a){this.height=a},getHeight:function(){return this.height},setSize:function(a,b){this.width=a,this.height=b},getSize:function(){return{width:this.width,height:this.height}}},Kinetic.GlobalObject.extend(Kinetic.Image,Kinetic.Shape),Kinetic.Polygon=function(a){this.shapeType="Polygon",a.drawFunc=function(){var a=this.getContext();a.beginPath(),this.applyLineJoin(),a.moveTo(this.points[0].x,this.points[0].y);for(var b=1;b<this.points.length;b++)a.lineTo(this.points[b].x,this.points[b].y);a.closePath(),this.fillStroke()},Kinetic.Shape.apply(this,[a])},Kinetic.Polygon.prototype={setPoints:function(a){this.points=a},getPoints:function(){return this.points}},Kinetic.GlobalObject.extend(Kinetic.Polygon,Kinetic.Shape),Kinetic.RegularPolygon=function(a){this.shapeType="RegularPolygon",a.drawFunc=function(){var a=this.getContext();a.beginPath(),this.applyLineJoin(),a.moveTo(0,0-this.radius);for(var b=1;b<this.sides;b++){var c=this.radius*Math.sin(b*2*Math.PI/this.sides),d=-1*this.radius*Math.cos(b*2*Math.PI/this.sides);a.lineTo(c,d)}a.closePath(),this.fillStroke()},Kinetic.Shape.apply(this,[a])},Kinetic.RegularPolygon.prototype={setPoints:function(a){this.points=a},getPoints:function(){return this.points},setRadius:function(a){this.radius=a},getRadius:function(){return this.radius},setSides:function(a){this.sides=a},getSides:function(){return this.sides}},Kinetic.GlobalObject.extend(Kinetic.RegularPolygon,Kinetic.Shape),Kinetic.Star=function(a){this.shapeType="Star",a.drawFunc=function(){var a=this.getContext();a.beginPath(),this.applyLineJoin(),a.moveTo(0,0-this.outerRadius);for(var b=1;b<this.points*2;b++){var c=b%2===0?this.outerRadius:this.innerRadius,d=c*Math.sin(b*Math.PI/this.points),e=-1*c*Math.cos(b*Math.PI/this.points);a.lineTo(d,e)}a.closePath(),this.fillStroke()},Kinetic.Shape.apply(this,[a])},Kinetic.Star.prototype={setPoints:function(a){this.points=a},getPoints:function(){return this.points},setOuterRadius:function(a){this.outerRadius=a},getOuterRadius:function(){return this.outerRadius},setInnerRadius:function(a){this.innerRadius=a},getInnerRadius:function(){return this.innerRadius}},Kinetic.GlobalObject.extend(Kinetic.Star,Kinetic.Shape),Kinetic.Text=function(a){this.shapeType="Text";if(a.textStroke!==undefined||a.textStrokeWidth!==undefined)a.textStroke===undefined?a.textStroke="black":a.textStrokeWidth===undefined&&(a.textStrokeWidth=2);a.align===undefined&&(a.align="left"),a.verticalAlign===undefined&&(a.verticalAlign="top"),a.padding===undefined&&(a.padding=0),a.fontStyle===undefined&&(a.fontStyle="normal"),a.drawFunc=function(){var a=this.getContext();a.font=this.fontStyle+" "+this.fontSize+"pt "+this.fontFamily,a.textBaseline="middle";var b=this.getTextHeight(),c=this.getTextWidth(),d=this.padding,e=0,f=0;switch(this.align){case"center":e=c/-2-d;break;case"right":e=-1*c-d}switch(this.verticalAlign){case"middle":f=b/-2-d;break;case"bottom":f=-1*b-d}a.save(),a.beginPath(),this.applyLineJoin(),a.rect(e,f,c+d*2,b+d*2),a.closePath(),this.fillStroke(),a.restore();var g=d+e,h=b/2+d+f;this.textFill!==undefined&&(a.fillStyle=this.textFill,a.fillText(this.text,g,h));if(this.textStroke!==undefined||this.textStrokeWidth!==undefined)this.textStroke===undefined?this.textStroke="black":this.textStrokeWidth===undefined&&(this.textStrokeWidth=2),a.lineWidth=this.textStrokeWidth,a.strokeStyle=this.textStroke,a.strokeText(this.text,g,h)},Kinetic.Shape.apply(this,[a])},Kinetic.Text.prototype={setFontFamily:function(a){this.fontFamily=a},getFontFamily:function(){return this.fontFamily},setFontSize:function(a){this.fontSize=a},getFontSize:function(){return this.fontSize},setFontStyle:function(a){this.fontStyle=a},getFontStyle:function(){return this.fontStyle},setTextFill:function(a){this.textFill=a},getTextFill:function(){return this.textFill},setTextStroke:function(a){this.textStroke=a},getTextStroke:function(){return this.textStroke},setTextStrokeWidth:function(a){this.textStrokeWidth=a},getTextStrokeWidth:function(){return this.textStrokeWidth},setPadding:function(a){this.padding=a},getPadding:function(){return this.padding},setAlign:function(a){this.align=a},getAlign:function(){return this.align},setVerticalAlign:function(a){this.verticalAlign=a},getVerticalAlign:function(){return this.verticalAlign},setText:function(a){this.text=a},getText:function(){return this.text},getTextWidth:function(){return this.getTextSize().width},getTextHeight:function(){return this.getTextSize().height},getTextSize:function(){var a=this.getContext();a.save(),a.font=this.fontStyle+" "+this.fontSize+"pt "+this.fontFamily;var b=a.measureText(this.text);return a.restore(),{width:b.width,height:parseInt(this.fontSize,10)}}},Kinetic.GlobalObject.extend(Kinetic.Text,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){this.node=a,this.config=b,this.tweens=[];for(var c in b)c!=="duration"&&c!=="easing"&&c!=="callback"&&(b[c].x===undefined&&b[c].y===undefined&&this.add(this._getTween(c,b)),b[c].x!==undefined&&this.add(this._getComponentTween(c,"x",b)),b[c].y!==undefined&&this.add(this._getComponentTween(c,"y",b)))},Kinetic.Transition.prototype={add:function(a){this.tweens.push(a)},start:function(){for(var a=0;a<this.tweens.length;a++)this.tweens[a].start()},onEnterFrame:function(){for(var a=0;a<this.tweens.length;a++)this.tweens[a].onEnterFrame()},stop:function(){for(var a=0;a<this.tweens.length;a++)this.tweens[a].stop()},resume:function(){for(var a=0;a<this.tweens.length;a++)this.tweens[a].resume()},_getTween:function(a){var b=this.config,c=this.node,d=b.easing;d===undefined&&(d="linear");var e=new Kinetic.Tween(c,function(b){c[a]=b},Kinetic.Tweens[d],c[a],b[a],b.duration);return e},_getComponentTween:function(a,b){var c=this.config,d=this.node,e=c.easing;e===undefined&&(e="linear");var f=new Kinetic.Tween(d,function(c){d[a][b]=c},Kinetic.Tweens[e],d[a][b],c[a][b],c.duration);return f}},Kinetic.Tween=function(a,b,c,d,e,f){this._listeners=[],this.addListener(this),this.obj=a,this.propFunc=b,this.begin=d,this._pos=d,this.setDuration(f),this.isPlaying=!1,this._change=0,this.prevTime=0,this.prevPos=0,this.looping=!1,this._time=0,this._position=0,this._startTime=0,this._finish=0,this.name="",this.func=c,this.setFinish(e)},Kinetic.Tween.prototype={setTime:function(a){this.prevTime=this._time,a>this.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<arguments.length;b++)a.push(arguments[b]);var c=a.shift(),d=this._listeners,e=d.length;for(var b=0;b<e;b++)d[b][c]&&d[b][c].apply(d[b],a)},fixTime:function(){this._startTime=this.getTimer()-this._time*1e3},getTimer:function(){return(new Date).getTime()-this._time}},Kinetic.Tweens={"back-ease-in":function(a,b,c,d,e,f){var g=1.70158;return c*(a/=d)*a*((g+1)*a-g)+b},"back-ease-out":function(a,b,c,d,e,f){var g=1.70158;return c*((a=a/d-1)*a*((g+1)*a+g)+1)+b},"back-ease-in-out":function(a,b,c,d,e,f){var g=1.70158;return(a/=d/2)<1?c/2*a*a*(((g*=1.525)+1)*a-g)+b:c/2*((a-=2)*a*(((g*=1.525)+1)*a+g)+2)+b},"elastic-ease-in":function(a,b,c,d,e,f){var g=0;return a===0?b:(a/=d)==1?b+c:(f||(f=d*.3),!e||e<Math.abs(c)?(e=c,g=f/4):g=f/(2*Math.PI)*Math.asin(c/e),-(e*Math.pow(2,10*(a-=1))*Math.sin((a*d-g)*2*Math.PI/f))+b)},"elastic-ease-out":function(a,b,c,d,e,f){var g=0;return a===0?b:(a/=d)==1?b+c:(f||(f=d*.3),!e||e<Math.abs(c)?(e=c,g=f/4):g=f/(2*Math.PI)*Math.asin(c/e),e*Math.pow(2,-10*a)*Math.sin((a*d-g)*2*Math.PI/f)+c+b)},"elastic-ease-in-out":function(a,b,c,d,e,f){var g=0;return a===0?b:(a/=d/2)==2?b+c:(f||(f=d*.3*1.5),!e||e<Math.abs(c)?(e=c,g=f/4):g=f/(2*Math.PI)*Math.asin(c/e),a<1?-0.5*e*Math.pow(2,10*(a-=1))*Math.sin((a*d-g)*2*Math.PI/f)+b:e*Math.pow(2,-10*(a-=1))*Math.sin((a*d-g)*2*Math.PI/f)*.5+c+b)},"bounce-ease-out":function(a,b,c,d){return(a/=d)<1/2.75?c*7.5625*a*a+b:a<2/2.75?c*(7.5625*(a-=1.5/2.75)*a+.75)+b:a<2.5/2.75?c*(7.5625*(a-=2.25/2.75)*a+.9375)+b:c*(7.5625*(a-=2.625/2.75)*a+.984375)+b},"bounce-ease-in":function(a,b,c,d){return c-Kinetic.Tweens["bounce-ease-out"](d-a,0,c,d)+b},"bounce-ease-in-out":function(a,b,c,d){return a<d/2?Kinetic.Tweens["bounce-ease-in"](a*2,0,c,d)*.5+b:Kinetic.Tweens["bounce-ease-out"](a*2-d,0,c,d)*.5+c*.5+b},"ease-in":function(a,b,c,d){return c*(a/=d)*a+b},"ease-out":function(a,b,c,d){return-c*(a/=d)*(a-2)+b},"ease-in-out":function(a,b,c,d){return(a/=d/2)<1?c/2*a*a+b:-c/2*(--a*(a-2)-1)+b},"strong-ease-in":function(a,b,c,d){return c*(a/=d)*a*a*a*a+b},"strong-ease-out":function(a,b,c,d){return c*((a=a/d-1)*a*a*a*a+1)+b},"strong-ease-in-out":function(a,b,c,d){return(a/=d/2)<1?c/2*a*a*a*a*a+b:c/2*((a-=2)*a*a*a*a+2)+b},linear:function(a,b,c,d){return c*a/d+b}};
+var Kinetic={};Kinetic.GlobalObject={stages:[],idCounter:0,animations:[],animIdCounter: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])},addAnimation:function(a){a.id=Kinetic.GlobalObject.animIdCounter++,this.animations.push(a)},removeAnimation:function(a){var b=this.animations;for(var c=0;c<b.length;c++)if(b[c].id===a)return this.animations.splice(c,1),!1},_runFrames:function(){var a={};for(var b=0;b<this.animations.length;b++){var c=this.animations[b];c.node&&c.node.id!==undefined&&(a[c.node.id]=c.node),c.func(this.frame)}for(var d in a)a[d].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.animations.length>0){this._updateFrameObject(),this._runFrames();var a=this;requestAnimFrame(function(){a._animationLoop()})}else this.frame.lastTime=0},_handleAnimation:function(){var a=this;this.animations.length>0?a._animationLoop():this.frame.lastTime=0}},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.attrs===undefined&&(this.attrs={}),this.attrs.visible=!0,this.attrs.listening=!0,this.attrs.name=undefined,this.attrs.alpha=1,this.attrs.x=0,this.attrs.y=0,this.attrs.scale={x:1,y:1},this.attrs.rotation=0,this.attrs.centerOffset={x:0,y:0},this.attrs.dragConstraint="none",this.attrs.dragBounds={},this.attrs.draggable=!1,this.eventListeners={};if(a)for(var b in a)switch(b){case"draggable":this.draggable(a[b]);break;case"listening":this.listen(a[b]);break;case"rotationDeg":this.attrs.rotation=a[b]*Math.PI/180;break;case"drawFunc":break;case"image":break;case"container":break;default:this.attrs[b]=a[b]}this.attrs.centerOffset.x===undefined&&(this.attrs.centerOffset.x=0),this.attrs.centerOffset.y===undefined&&(this.attrs.centerOffset.y=0)},Kinetic.Node.prototype={on:function(a,b){var c=a.split(" ");for(var d=0;d<c.length;d++){var e=c[d],f=e.indexOf("touch")===-1?"on"+e:e,g=f.split("."),h=g[0],i=g.length>1?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;c<b.length;c++){var d=b[c],e=d.indexOf("touch")===-1?"on"+d:d,f=e.split("."),g=f[0];if(this.eventListeners[g]&&f.length>1){var h=f[1];for(var i=0;i<this.eventListeners[g].length;i++)if(this.eventListeners[g][i].name===h){this.eventListeners[g].splice(i,1),this.eventListeners[g].length===0&&(this.eventListeners[g]=undefined);break}}else this.eventListeners[g]=undefined}},show:function(){this.attrs.visible=!0},hide:function(){this.attrs.visible=!1},getZIndex:function(){return this.index},getAbsoluteZIndex:function(){function e(b){var f=[];for(var g=0;g<b.length;g++){var h=b[g];d++,h.nodeType!=="Shape"&&(f=f.concat(h.getChildren())),h.id===c.id&&(g=b.length)}f.length>0&&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(a,b){b?(this.attrs.scale.x=a,this.attrs.scale.y=b):(this.attrs.scale.x=a,this.attrs.scale.y=a)},getScale:function(){return this.attrs.scale},setPosition:function(a,b){this.attrs.x=a,this.attrs.y=b},getPosition:function(){return{x:this.attrs.x,y:this.attrs.y}},getAbsolutePosition:function(){return this.getAbsoluteTransform().getTranslation()},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(),this.attrs.name&&(b.childrenNames[this.attrs.name]=undefined,a.childrenNames[this.attrs.name]=this)},getParent:function(){return this.parent},getLayer:function(){return this.nodeType==="Layer"?this:this.getParent().getLayer()},getStage:function(){return this.nodeType==="Stage"?this:this.getParent().getStage()},getName:function(){return this.attrs.name},setCenterOffset:function(a,b){this.attrs.centerOffset.x=a,this.attrs.centerOffset.y=b},getCenterOffset:function(){return this.attrs.centerOffset},transitionTo:function(a){var b=this.nodeType==="Stage"?this:this.getLayer(),c=this,d=Kinetic.GlobalObject,e=new Kinetic.Transition(this,a),f={func:function(){e.onEnterFrame()},node:b};return d.addAnimation(f),e.tweens[0].onFinished=function(){d.removeAnimation(f.id),a.callback!==undefined&&a.callback()},e.start(),d._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;d<b.length;d++){var e=b[d],f=e.getTransform();a.multiply(f)}return a},getTransform:function(){var a=new Kinetic.Transform;return(this.attrs.x!==0||this.attrs.y!==0)&&a.translate(this.attrs.x,this.attrs.y),this.attrs.rotation!==0&&a.rotate(this.attrs.rotation),(this.attrs.scale.x!==1||this.attrs.scale.y!==1)&&a.scale(this.attrs.scale.x,this.attrs.scale.y),(this.attrs.centerOffset.x!==0||this.attrs.centerOffset.y!==0)&&a.translate(-1*this.attrs.centerOffset.x,-1*this.attrs.centerOffset.y),a},_initDrag:function(){this._dragCleanup();var a=Kinetic.GlobalObject,b=this;this.on("mousedown.initdrag touchstart.initdrag",function(c){var d=b.getStage(),e=d.getUserPosition();if(e){var f=b.getTransform().getTranslation(),g=b.getAbsoluteTransform().getTranslation();a.drag.node=b,a.drag.offset.x=e.x-b.getAbsoluteTransform().getTranslation().x,a.drag.offset.y=e.y-b.getAbsoluteTransform().getTranslation().y}})},_dragCleanup:function(){this.off("mousedown.initdrag"),this.off("touchstart.initdrag")},_handleEvents:function(a,b){this.nodeType==="Shape"&&(b.shape=this);var c=this.getStage();this._handleEvent(this,c.mouseoverShape,c.mouseoutShape,a,b)},_handleEvent:function(a,b,c,d,e){var f=a.eventListeners,g=!0;d==="onmouseover"&&c&&c.id===a.id?g=!1:d==="onmouseout"&&b&&b.id===a.id&&(g=!1);if(f[d]&&g){var h=f[d];for(var i=0;i<h.length;i++)h[i].handler.apply(a,[e])}var j=b?b.parent:undefined,k=c?c.parent:undefined;!e.cancelBubble&&a.parent.nodeType!=="Stage"&&this._handleEvent(a.parent,j,k,d,e)}},Kinetic.Container=function(){this.children=[],this.childrenNames={}},Kinetic.Container.prototype={getChildren:function(){return this.children},getChild:function(a){return this.childrenNames[a]},removeChildren:function(){while(this.children.length>0)this.remove(this.children[0])},_remove:function(a){this.children[a.index].id==a.id&&(a.attrs.name!==undefined&&(this.childrenNames[a.attrs.name]=undefined),this.children.splice(a.index,1),this._setChildrenIndices(),a=undefined)},_drawChildren:function(){var a=this.children;for(var b=0;b<a.length;b++){var c=a[b];c.nodeType==="Shape"?c._draw(c.getLayer()):c._draw()}},_add:function(a){a.attrs.name&&(this.childrenNames[a.attrs.name]=a),a.id=Kinetic.GlobalObject.idCounter++,a.index=this.children.length,a.parent=this,this.children.push(a)},_setChildrenIndices:function(){if(this.nodeType==="Stage"){var a=this.content.children,b=a[0],c=a[1];this.content.innerHTML="",this.content.appendChild(b),this.content.appendChild(c)}for(var d=0;d<this.children.length;d++)this.children[d].index=d,this.nodeType==="Stage"&&this.content.appendChild(this.children[d].canvas)}},Kinetic.Stage=function(a){this.attrs===undefined&&(this.attrs={}),this.attrs.width=400,this.attrs.height=200,this.nodeType="Stage",typeof a.container=="string"&&(a.container=document.getElementById(a.container)),Kinetic.Container.apply(this,[]),Kinetic.Node.apply(this,[a]),this.container=a.container,this.content=document.createElement("div"),this.dblClickWindow=400,this.clickStart=!1,this.targetShape=undefined,this.targetFound=!1,this.mouseoverShape=undefined,this.mouseoutShape=undefined,this.mousePos=undefined,this.mouseDown=!1,this.mouseUp=!1,this.touchPos=undefined,this.touchStart=!1,this.touchEnd=!1,this.id=Kinetic.GlobalObject.idCounter++,this._buildDOM(),this._listen(),this._prepareDrag(),this.anim=undefined,Kinetic.GlobalObject.stages.push(this)},Kinetic.Stage.prototype={onFrame:function(a){var b=Kinetic.GlobalObject;this.anim={func:a}},start:function(){var a=Kinetic.GlobalObject;a.addAnimation(this.anim),a._handleAnimation()},stop:function(){var a=Kinetic.GlobalObject;a.removeAnimation(this.anim.id),a._handleAnimation()},draw:function(){this._drawChildren()},setSize:function(a,b){var c=this.children;for(var d=0;d<c.length;d++){var e=c[d];e.getCanvas().width=a,e.getCanvas().height=b,e.draw()}this.attrs.width=a,this.attrs.height=b,this.bufferLayer.getCanvas().width=a,this.bufferLayer.getCanvas().height=b,this.pathLayer.getCanvas().width=a,this.pathLayer.getCanvas().height=b},getSize:function(){return{width:this.attrs.width,height:this.attrs.height}},clear:function(){var a=this.children;for(var b=0;b<a.length;b++)a[b].clear()},toDataURL:function(a,b,c){function h(g){var i=f[g].getCanvas().toDataURL();console.log(i);var j=new Image;j.onload=function(){e.drawImage(this,0,0),g++;if(g<f.length)h(g);else try{a(d.getCanvas().toDataURL(b,c))}catch(i){a(d.getCanvas().toDataURL())}},j.src=i}var d=this.bufferLayer,e=d.getContext(),f=this.children,g=this;d.clear(),h(0)},toJSON:function(){function b(a){var c={};c.attrs=a.attrs,c.nodeType=a.nodeType,c.shapeType=a.shapeType;if(a.nodeType!=="Shape"){c.children=[];var d=a.getChildren();for(var e=0;e<d.length;e++){var f=d[e];c.children.push(b(f))}}return c}var a=Kinetic.GlobalObject;return JSON.stringify(b(this))},load:function(a,b){function c(a,d){d.nodeType==="Shape"&&d.shapeType===undefined&&(a.drawFunc=b[d.attrs.drawFuncName]);var e=d.children;if(e!==undefined)for(var f=0;f<e.length;f++){var g=e[f],h;g.nodeType==="Shape"?g.shapeType===undefined?h="Shape":h=g.shapeType:h=g.nodeType;var i=new Kinetic[h](g.attrs);a.add(i),c(i,g)}}var d=JSON.parse(a);this.attrs=d.attrs,c(this,d),this.draw()},remove:function(a){try{this.content.removeChild(a.canvas)}catch(b){}this._remove(a)},onContent:function(a,b){var c=a.split(" ");for(var d=0;d<c.length;d++){var e=c[d];this.content.addEventListener(e,b,!1)}},add:function(a){a.attrs.name&&(this.childrenNames[a.attrs.name]=a),a.canvas.width=this.attrs.width,a.canvas.height=this.attrs.height,this._add(a),a.draw(),this.content.appendChild(a.canvas)},getMousePosition:function(a){return this.mousePos},getTouchPosition:function(a){return this.touchPos},getUserPosition:function(a){return this.getTouchPosition()||this.getMousePosition()},getContainer:function(){return this.container},getContent:function(){return this.content},getStage:function(){return this},getWidth:function(){return this.attrs.width},getHeight:function(){return this.attrs.height},_detectEvent:function(a,b){var c=Kinetic.GlobalObject.drag.moving,d=Kinetic.GlobalObject,e=this.getUserPosition(),f=a.eventListeners;this.targetShape&&a.id===this.targetShape.id&&(this.targetFound=!0);if(a.attrs.visible&&e!==undefined&&a._isPointInShape(e)){if(!c&&this.mouseDown)return this.mouseDown=!1,this.clickStart=!0,a._handleEvents("onmousedown",b),!0;if(this.mouseUp)return this.mouseUp=!1,a._handleEvents("onmouseup",b),this.clickStart&&(!d.drag.moving||!d.drag.node)&&(a._handleEvents("onclick",b),a.inDoubleClickWindow&&a._handleEvents("ondblclick",b),a.inDoubleClickWindow=!0,setTimeout(function(){a.inDoubleClickWindow=!1},this.dblClickWindow)),!0;if(this.touchStart){this.touchStart=!1,a._handleEvents("touchstart",b);if(f.ondbltap&&a.inDoubleClickWindow){var g=f.ondbltap;for(var h=0;h<g.length;h++)g[h].handler.apply(a,[b])}return a.inDoubleClickWindow=!0,setTimeout(function(){a.inDoubleClickWindow=!1},this.dblClickWindow),!0}if(this.touchEnd)return this.touchEnd=!1,a._handleEvents("touchend",b),!0;if(!c&&this._isNewTarget(a,b))return this.mouseoutShape&&(this.mouseoverShape=a,this.mouseoutShape._handleEvents("onmouseout",b),this.mouseoverShape=undefined),a._handleEvents("onmouseover",b),this._setTarget(a),!0;if(!c)return a._handleEvents("onmousemove",b),a._handleEvents("touchmove",b),!0}else if(!c&&this.targetShape&&this.targetShape.id===a.id)return this._setTarget(undefined),this.mouseoutShape=a,!0;return!1},_setTarget:function(a){this.targetShape=a,this.targetFound=!0},_isNewTarget:function(a,b){if(!this.targetShape||!this.targetFound&&a.id!==this.targetShape.id){if(this.targetShape){var c=this.targetShape.eventListeners;c&&(this.mouseoutShape=this.targetShape)}return!0}return!1},_traverseChildren:function(a,b){var c=a.children;for(var d=c.length-1;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=a.getUserPosition(),f=d.attrs.dragConstraint,g=d.attrs.dragBounds,h={x:e.x-c.drag.offset.x,y:e.y-c.drag.offset.y};g.left!==undefined&&h.x<g.left&&(h.x=g.left),g.right!==undefined&&h.x>g.right&&(h.x=g.right),g.top!==undefined&&h.y<g.top&&(h.y=g.top),g.bottom!==undefined&&h.y>g.bottom&&(h.y=g.bottom);var i=d.attrs.rotation,j={x:d.attrs.scale.x,y:d.attrs.scale.y};d.attrs.rotation=0,d.attrs.scale={x:1,y:1};var k=d.getAbsoluteTransform();k.invert(),k.translate(h.x,h.y),h={x:d.attrs.x+k.getTranslation().x,y:d.attrs.y+k.getTranslation().y},f==="horizontal"?h.y=d.attrs.y:f==="vertical"&&(h.x=d.attrs.x),d.setPosition(h.x,h.y),d.rotate(i),d.attrs.scale={x:j.x,y:j.y},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.width=this.attrs.width+"px",this.content.style.height=this.attrs.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({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.width=this.attrs.width,this.bufferLayer.canvas.height=this.attrs.height,this.bufferLayer.canvas.className="kineticjs-buffer-layer",this.content.appendChild(this.bufferLayer.canvas),this.pathLayer.canvas.width=this.attrs.width,this.pathLayer.canvas.height=this.attrs.height,this.pathLayer.canvas.className="kineticjs-path-layer",this.content.appendChild(this.pathLayer.canvas)}},Kinetic.GlobalObject.extend(Kinetic.Stage,Kinetic.Container),Kinetic.GlobalObject.extend(Kinetic.Stage,Kinetic.Node),Kinetic.Layer=function(a){this.nodeType="Layer",this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),this.canvas.style.position="absolute",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.attrs.visible&&this._drawChildren()}},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){this._add(a)},remove:function(a){this._remove(a)},_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.attrs===undefined&&(this.attrs={}),this.attrs.fill=undefined,this.attrs.stroke=undefined,this.attrs.strokeWidth=undefined,this.attrs.lineJoin=undefined,this.attrs.detectionType="path",this.drawFunc=a.drawFunc,this.data=[],this.nodeType="Shape";if(a.stroke!==undefined||a.strokeWidth!==undefined)a.stroke===undefined?a.stroke="black":a.strokeWidth===undefined&&(a.strokeWidth=2);Kinetic.Node.apply(this,[a])},Kinetic.Shape.prototype={getContext:function(){return this.tempLayer.getContext()},getCanvas:function(){return this.tempLayer.getCanvas()},fillStroke:function(){var a=this.getContext();this.attrs.fill!==undefined&&(a.fillStyle=this.attrs.fill,a.fill()),this.attrs.stroke!==undefined&&(a.lineWidth=this.attrs.strokeWidth===undefined?1:this.attrs.strokeWidth,a.strokeStyle=this.attrs.stroke,a.stroke())},applyLineJoin:function(){var a=this.getContext();this.attrs.lineJoin!==undefined&&(a.lineJoin=this.attrs.lineJoin)},setFill:function(a){this.attrs.fill=a},getFill:function(){return this.attrs.fill},setStroke:function(a){this.attrs.stroke=a},getStroke:function(){return this.attrs.stroke},setLineJoin:function(a){this.attrs.lineJoin=a},getLineJoin:function(){return this.attrs.lineJoin},setStrokeWidth:function(a){this.attrs.strokeWidth=a},getStrokeWidth:function(){return this.attrs.strokeWidth},setDrawFunc:function(a){this.drawFunc=a},save:function(){var a=this.getStage(),b=a.attrs.width,c=a.attrs.height,d=a.bufferLayer,e=d.getContext();d.clear(),this._draw(d);var f=e.getImageData(0,0,b,c);this.data=f.data},_draw:function(a){if(this.attrs.visible){var b=a.getStage(),c=a.getContext(),d=[],e=this.parent;d.unshift(this);while(e)d.unshift(e),e=e.parent;c.save();for(var f=0;f<d.length;f++){var g=d[f],h=g.getTransform().getMatrix();c.transform(h[0],h[1],h[2],h[3],h[4],h[5]),g.getAbsoluteAlpha()!==1&&(c.globalAlpha=g.getAbsoluteAlpha())}this.tempLayer=a,this.drawFunc.call(this),c.restore()}this.attrs.detectionType==="pixel"&&(this.data=[])},_isPointInShape:function(a){var b=this.getStage();if(this.attrs.detectionType==="path"){var c=b.pathLayer,d=c.getContext();return this._draw(c),d.isPointInPath(a.x,a.y)}var e=b.attrs.width,f=this.data[(e*a.y+a.x)*4+3];return f!==undefined&&f!==0}},Kinetic.GlobalObject.extend(Kinetic.Shape,Kinetic.Node),Kinetic.Rect=function(a){this.attrs===undefined&&(this.attrs={}),this.attrs.width=0,this.attrs.height=0,this.shapeType="Rect",a.drawFunc=function(){var a=this.getContext();a.beginPath(),this.applyLineJoin(),a.rect(0,0,this.attrs.width,this.attrs.height),a.closePath(),this.fillStroke()},Kinetic.Shape.apply(this,[a])},Kinetic.Rect.prototype={setWidth:function(a){this.attrs.width=a},getWidth:function(){return this.attrs.width},setHeight:function(a){this.attrs.height=a},getHeight:function(){return this.attrs.height},setSize:function(a,b){this.attrs.width=a,this.attrs.height=b},getSize:function(){return{width:this.attrs.width,height:this.attrs.height}}},Kinetic.GlobalObject.extend(Kinetic.Rect,Kinetic.Shape),Kinetic.Circle=function(a){this.attrs===undefined&&(this.attrs={}),this.attrs.radius=0,this.shapeType="Circle",a.drawFunc=function(){var a=this.getCanvas(),b=this.getContext();b.beginPath(),this.applyLineJoin(),b.arc(0,0,this.attrs.radius,0,Math.PI*2,!0),b.closePath(),this.fillStroke()},Kinetic.Shape.apply(this,[a])},Kinetic.Circle.prototype={setRadius:function(a){this.attrs.radius=a},getRadius:function(){return this.attrs.radius}},Kinetic.GlobalObject.extend(Kinetic.Circle,Kinetic.Shape),Kinetic.Image=function(a){this.attrs===undefined&&(this.attrs={}),this.image=a.image,this.shapeType="Image",a.drawFunc=function(){var a=this.attrs.width!==undefined?this.attrs.width:this.image.width,b=this.attrs.height!==undefined?this.attrs.height:this.image.height,c=this.getCanvas(),d=this.getContext();d.beginPath(),this.applyLineJoin(),d.rect(0,0,a,b),d.closePath(),this.fillStroke(),d.drawImage(this.image,0,0,a,b)},Kinetic.Shape.apply(this,[a])},Kinetic.Image.prototype={setImage:function(a){this.image=a},getImage:function(){return this.image},setWidth:function(a){this.attrs.width=a},getWidth:function(){return this.attrs.width},setHeight:function(a){this.attrs.height=a},getHeight:function(){return this.attrs.height},setSize:function(a,b){this.attrs.width=a,this.attrs.height=b},getSize:function(){return{width:this.attrs.width,height:this.attrs.height}}},Kinetic.GlobalObject.extend(Kinetic.Image,Kinetic.Shape),Kinetic.Polygon=function(a){this.attrs===undefined&&(this.attrs={}),this.attrs.points={},this.shapeType="Polygon",a.drawFunc=function(){var a=this.getContext();a.beginPath(),this.applyLineJoin(),a.moveTo(this.attrs.points[0].x,this.attrs.points[0].y);for(var b=1;b<this.attrs.points.length;b++)a.lineTo(this.attrs.points[b].x,this.attrs.points[b].y);a.closePath(),this.fillStroke()},Kinetic.Shape.apply(this,[a])},Kinetic.Polygon.prototype={setPoints:function(a){this.attrs.points=a},getPoints:function(){return this.attrs.points}},Kinetic.GlobalObject.extend(Kinetic.Polygon,Kinetic.Shape),Kinetic.RegularPolygon=function(a){this.attrs===undefined&&(this.attrs={}),this.attrs.radius=0,this.attrs.sides=0,this.shapeType="RegularPolygon",a.drawFunc=function(){var a=this.getContext();a.beginPath(),this.applyLineJoin(),a.moveTo(0,0-this.attrs.radius);for(var b=1;b<this.attrs.sides;b++){var c=this.attrs.radius*Math.sin(b*2*Math.PI/this.attrs.sides),d=-1*this.attrs.radius*Math.cos(b*2*Math.PI/this.attrs.sides);a.lineTo(c,d)}a.closePath(),this.fillStroke()},Kinetic.Shape.apply(this,[a])},Kinetic.RegularPolygon.prototype={setRadius:function(a){this.attrs.radius=a},getRadius:function(){return this.attrs.radius},setSides:function(a){this.attrs.sides=a},getSides:function(){return this.attrs.sides}},Kinetic.GlobalObject.extend(Kinetic.RegularPolygon,Kinetic.Shape),Kinetic.Star=function(a){this.attrs===undefined&&(this.attrs={}),this.attrs.points=[],this.attrs.innerRadius=0,this.attrs.outerRadius=0,this.shapeType="Star",a.drawFunc=function(){var a=this.getContext();a.beginPath(),this.applyLineJoin(),a.moveTo(0,0-this.attrs.outerRadius);for(var b=1;b<this.attrs.points*2;b++){var c=b%2===0?this.attrs.outerRadius:this.attrs.innerRadius,d=c*Math.sin(b*Math.PI/this.attrs.points),e=-1*c*Math.cos(b*Math.PI/this.attrs.points);a.lineTo(d,e)}a.closePath(),this.fillStroke()},Kinetic.Shape.apply(this,[a])},Kinetic.Star.prototype={setPoints:function(a){this.attrs.points=a},getPoints:function(){return this.attrs.points},setOuterRadius:function(a){this.attrs.outerRadius=a},getOuterRadius:function(){return this.attrs.outerRadius},setInnerRadius:function(a){this.attrs.innerRadius=a},getInnerRadius:function(){return this.attrs.innerRadius}},Kinetic.GlobalObject.extend(Kinetic.Star,Kinetic.Shape),Kinetic.Text=function(a){this.attrs===undefined&&(this.attrs={}),this.attrs.fontFamily="",this.attrs.text="",this.attrs.fontSize=12,this.attrs.fill=undefined,this.attrs.textStroke=undefined,this.attrs.textStrokeWidth=undefined,this.attrs.align="left",this.attrs.verticalAlign="top",this.attrs.padding=0,this.attrs.fontStyle="normal",this.shapeType="Text",a.drawFunc=function(){var a=this.getContext();a.font=this.attrs.fontStyle+" "+this.attrs.fontSize+"pt "+this.attrs.fontFamily,a.textBaseline="middle";var b=this.getTextHeight(),c=this.getTextWidth(),d=this.attrs.padding,e=0,f=0;switch(this.attrs.align){case"center":e=c/-2-d;break;case"right":e=-1*c-d}switch(this.attrs.verticalAlign){case"middle":f=b/-2-d;break;case"bottom":f=-1*b-d}a.save(),a.beginPath(),this.applyLineJoin(),a.rect(e,f,c+d*2,b+d*2),a.closePath(),this.fillStroke(),a.restore();var g=d+e,h=b/2+d+f;this.attrs.textFill!==undefined&&(a.fillStyle=this.attrs.textFill,a.fillText(this.attrs.text,g,h));if(this.attrs.textStroke!==undefined||this.attrs.textStrokeWidth!==undefined)this.attrs.textStroke===undefined?this.attrs.textStroke="black":this.attrs.textStrokeWidth===undefined&&(this.attrs.textStrokeWidth=2),a.lineWidth=this.attrs.textStrokeWidth,a.strokeStyle=this.attrs.textStroke,a.strokeText(this.attrs.text,g,h)},Kinetic.Shape.apply(this,[a])},Kinetic.Text.prototype={setFontFamily:function(a){this.attrs.fontFamily=a},getFontFamily:function(){return this.attrs.fontFamily},setFontSize:function(a){this.attrs.fontSize=a},getFontSize:function(){return this.attrs.fontSize},setFontStyle:function(a){this.attrs.fontStyle=a},getFontStyle:function(){return this.attrs.fontStyle},setTextFill:function(a){this.attrs.textFill=a},getTextFill:function(){return this.attrs.textFill},setTextStroke:function(a){this.attrs.textStroke=a},getTextStroke:function(){return this.attrs.textStroke},setTextStrokeWidth:function(a){this.attrs.textStrokeWidth=a},getTextStrokeWidth:function(){return this.attrs.textStrokeWidth},setPadding:function(a){this.attrs.padding=a},getPadding:function(){return this.attrs.padding},setAlign:function(a){this.attrs.align=a},getAlign:function(){return this.attrs.align},setVerticalAlign:function(a){this.attrs.verticalAlign=a},getVerticalAlign:function(){return this.attrs.verticalAlign},setText:function(a){this.attrs.text=a},getText:function(){return this.attrs.text},getTextWidth:function(){return this.getTextSize().width},getTextHeight:function(){return this.getTextSize().height},getTextSize:function(){var a=this.getContext();a.save(),a.font=this.attrs.fontStyle+" "+this.attrs.fontSize+"pt "+this.attrs.fontFamily;var b=a.measureText(this.attrs.text);return a.restore(),{width:b.width,height:parseInt(this.attrs.fontSize,10)}}},Kinetic.GlobalObject.extend(Kinetic.Text,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){this.node=a,this.config=b,this.tweens=[];for(var c in b)c!=="duration"&&c!=="easing"&&c!=="callback"&&(b[c].x===undefined&&b[c].y===undefined&&
+this.add(this._getTween(c,b)),b[c].x!==undefined&&this.add(this._getComponentTween(c,"x",b)),b[c].y!==undefined&&this.add(this._getComponentTween(c,"y",b)))},Kinetic.Transition.prototype={add:function(a){this.tweens.push(a)},start:function(){for(var a=0;a<this.tweens.length;a++)this.tweens[a].start()},onEnterFrame:function(){for(var a=0;a<this.tweens.length;a++)this.tweens[a].onEnterFrame()},stop:function(){for(var a=0;a<this.tweens.length;a++)this.tweens[a].stop()},resume:function(){for(var a=0;a<this.tweens.length;a++)this.tweens[a].resume()},_getTween:function(a){var b=this.config,c=this.node,d=b.easing;d===undefined&&(d="linear");var e=new Kinetic.Tween(c,function(b){c.attrs[a]=b},Kinetic.Tweens[d],c.attrs[a],b[a],b.duration);return e},_getComponentTween:function(a,b){var c=this.config,d=this.node,e=c.easing;e===undefined&&(e="linear");var f=new Kinetic.Tween(d,function(c){d.attrs[a][b]=c},Kinetic.Tweens[e],d.attrs[a][b],c[a][b],c.duration);return f}},Kinetic.Tween=function(a,b,c,d,e,f){this._listeners=[],this.addListener(this),this.obj=a,this.propFunc=b,this.begin=d,this._pos=d,this.setDuration(f),this.isPlaying=!1,this._change=0,this.prevTime=0,this.prevPos=0,this.looping=!1,this._time=0,this._position=0,this._startTime=0,this._finish=0,this.name="",this.func=c,this.setFinish(e)},Kinetic.Tween.prototype={setTime:function(a){this.prevTime=this._time,a>this.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<arguments.length;b++)a.push(arguments[b]);var c=a.shift(),d=this._listeners,e=d.length;for(var b=0;b<e;b++)d[b][c]&&d[b][c].apply(d[b],a)},fixTime:function(){this._startTime=this.getTimer()-this._time*1e3},getTimer:function(){return(new Date).getTime()-this._time}},Kinetic.Tweens={"back-ease-in":function(a,b,c,d,e,f){var g=1.70158;return c*(a/=d)*a*((g+1)*a-g)+b},"back-ease-out":function(a,b,c,d,e,f){var g=1.70158;return c*((a=a/d-1)*a*((g+1)*a+g)+1)+b},"back-ease-in-out":function(a,b,c,d,e,f){var g=1.70158;return(a/=d/2)<1?c/2*a*a*(((g*=1.525)+1)*a-g)+b:c/2*((a-=2)*a*(((g*=1.525)+1)*a+g)+2)+b},"elastic-ease-in":function(a,b,c,d,e,f){var g=0;return a===0?b:(a/=d)==1?b+c:(f||(f=d*.3),!e||e<Math.abs(c)?(e=c,g=f/4):g=f/(2*Math.PI)*Math.asin(c/e),-(e*Math.pow(2,10*(a-=1))*Math.sin((a*d-g)*2*Math.PI/f))+b)},"elastic-ease-out":function(a,b,c,d,e,f){var g=0;return a===0?b:(a/=d)==1?b+c:(f||(f=d*.3),!e||e<Math.abs(c)?(e=c,g=f/4):g=f/(2*Math.PI)*Math.asin(c/e),e*Math.pow(2,-10*a)*Math.sin((a*d-g)*2*Math.PI/f)+c+b)},"elastic-ease-in-out":function(a,b,c,d,e,f){var g=0;return a===0?b:(a/=d/2)==2?b+c:(f||(f=d*.3*1.5),!e||e<Math.abs(c)?(e=c,g=f/4):g=f/(2*Math.PI)*Math.asin(c/e),a<1?-0.5*e*Math.pow(2,10*(a-=1))*Math.sin((a*d-g)*2*Math.PI/f)+b:e*Math.pow(2,-10*(a-=1))*Math.sin((a*d-g)*2*Math.PI/f)*.5+c+b)},"bounce-ease-out":function(a,b,c,d){return(a/=d)<1/2.75?c*7.5625*a*a+b:a<2/2.75?c*(7.5625*(a-=1.5/2.75)*a+.75)+b:a<2.5/2.75?c*(7.5625*(a-=2.25/2.75)*a+.9375)+b:c*(7.5625*(a-=2.625/2.75)*a+.984375)+b},"bounce-ease-in":function(a,b,c,d){return c-Kinetic.Tweens["bounce-ease-out"](d-a,0,c,d)+b},"bounce-ease-in-out":function(a,b,c,d){return a<d/2?Kinetic.Tweens["bounce-ease-in"](a*2,0,c,d)*.5+b:Kinetic.Tweens["bounce-ease-out"](a*2-d,0,c,d)*.5+c*.5+b},"ease-in":function(a,b,c,d){return c*(a/=d)*a+b},"ease-out":function(a,b,c,d){return-c*(a/=d)*(a-2)+b},"ease-in-out":function(a,b,c,d){return(a/=d/2)<1?c/2*a*a+b:-c/2*(--a*(a-2)-1)+b},"strong-ease-in":function(a,b,c,d){return c*(a/=d)*a*a*a*a+b},"strong-ease-out":function(a,b,c,d){return c*((a=a/d-1)*a*a*a*a+1)+b},"strong-ease-in-out":function(a,b,c,d){return(a/=d/2)<1?c/2*a*a*a*a*a+b:c/2*((a-=2)*a*a*a*a+2)+b},linear:function(a,b,c,d){return c*a/d+b}};
View
3 src/Shape.js
@@ -25,11 +25,10 @@ Kinetic.Shape = function(config) {
this.attrs.strokeWidth = undefined;
this.attrs.lineJoin = undefined;
this.attrs.detectionType = 'path';
- this.attrs.drawFuncName = undefined;
// special
this.drawFunc = config.drawFunc;
-
+
this.data = [];
this.nodeType = 'Shape';
View
3 src/Stage.js
@@ -191,6 +191,7 @@ Kinetic.Stage.prototype = {
function addNode(node) {
var obj = {};
obj.attrs = node.attrs;
+
obj.nodeType = node.nodeType;
obj.shapeType = node.shapeType;
@@ -215,7 +216,7 @@ Kinetic.Stage.prototype = {
function loadNode(node, obj) {
// if custom shape then set draw function
if(obj.nodeType === 'Shape' && obj.shapeType === undefined) {
- node.drawFunc = drawFuncs[obj.drawFuncName];
+ node.drawFunc = drawFuncs[obj.attrs.drawFuncName];
}
var children = obj.children;
View
129 tests/js/unitTests.js
@@ -94,7 +94,7 @@ Test.prototype.tests = {
var expectedJson = '{"attrs":{"width":578,"height":200,"visible":true,"listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"nodeType":"Stage","children":[{"attrs":{"visible":true,"listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"nodeType":"Layer","children":[{"attrs":{"visible":true,"listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"nodeType":"Group","children":[{"attrs":{"radius":70,"fill":"green","stroke":"black","strokeWidth":4,"detectionType":"path","visible":true,"listening":true,"name":"myCircle","alpha":1,"x":289,"y":100,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":true},"nodeType":"Shape","shapeType":"Circle"}]}]}]}';
test(stage.toJSON() === expectedJson, 'problem with serialization');
},
- 'STAGE - load stage with json': function(containerId) {
+ 'STAGE - load stage using json': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
@@ -106,67 +106,68 @@ Test.prototype.tests = {
test(stage.toJSON() === json, "serialized stage is incorrect");
},
- /*
- 'STAGE - serialize stage with custom shape': function(containerId) {
- var stage = new Kinetic.Stage({
- container: containerId,
- width: 578,
- height: 200
- });
- var layer = new Kinetic.Layer();
- var group = new Kinetic.Group();
-
- var drawTriangle = function() {
- var context = this.getContext();
- context.beginPath();
- context.moveTo(200, 50);
- context.lineTo(420, 80);
- context.quadraticCurveTo(300, 100, 260, 170);
- context.closePath();
- this.fillStroke();
- };
- var triangle = new Kinetic.Shape({
- drawFunc: drawTriangle,
- drawFuncName: 'drawTriangle',
- fill: "#00D2FF",
- stroke: "black",
- strokeWidth: 4
- });
-
- stage.add(layer);
- layer.add(group);
- group.add(triangle);
- layer.draw();
-
- var expectedJson = '{"nodeType":"Stage","width":578,"height":200,"scale":{"x":1,"y":1},"visible":true,"_listening":true,"alpha":1,"x":0,"y":0,"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"_draggable":false,"_children":[{"nodeType":"Layer","visible":true,"_listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"_draggable":false,"_children":[{"nodeType":"Group","visible":true,"_listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"_draggable":false,"_children":[{"nodeType":"Shape","detectionType":"path","visible":true,"_listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"_draggable":false,"drawFuncName":"drawTriangle","fill":"#00D2FF","stroke":"black","strokeWidth":4}]}]}]}';
- test(stage.toJSON() === expectedJson, "problem with serialization");
-
- console.log(stage.toJSON());
- },
- 'STAGE - load stage with custom shape': function(containerId) {
- var stage = new Kinetic.Stage({
- container: containerId,
- width: 578,
- height: 200
- });
-
- var drawTriangle = function() {
- var context = this.getContext();
- context.beginPath();
- context.moveTo(200, 50);
- context.lineTo(420, 80);
- context.quadraticCurveTo(300, 100, 260, 170);
- context.closePath();
- this.fillStroke();
- };
- var json = '{"nodeType":"Stage","width":578,"height":200,"scale":{"x":1,"y":1},"visible":true,"_listening":true,"alpha":1,"x":0,"y":0,"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"_draggable":false,"_children":[{"nodeType":"Layer","visible":true,"_listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"_draggable":false,"_children":[{"nodeType":"Group","visible":true,"_listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"_draggable":false,"_children":[{"nodeType":"Shape","detectionType":"path","visible":true,"_listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"_draggable":false,"drawFuncName":"drawTriangle","fill":"#00D2FF","stroke":"black","strokeWidth":4}]}]}]}';
- stage.load(json, {
- drawTriangle: drawTriangle
- });
-
- test(stage.toJSON() === json, "serialized stage is incorrect");
- },
- */
+ 'STAGE - serialize stage with custom shape': function(containerId) {
+ var stage = new Kinetic.Stage({
+ container: containerId,
+ width: 578,
+ height: 200
+ });
+ var layer = new Kinetic.Layer();
+ var group = new Kinetic.Group();
+
+ var drawTriangle = function() {
+ var context = this.getContext();
+ context.beginPath();
+ context.moveTo(200, 50);
+ context.lineTo(420, 80);
+ context.quadraticCurveTo(300, 100, 260, 170);
+ context.closePath();
+ this.fillStroke();
+ };
+ var triangle = new Kinetic.Shape({
+ drawFunc: drawTriangle,
+ drawFuncName: 'drawTriangle',
+ fill: "#00D2FF",
+ stroke: "black",
+ strokeWidth: 4
+ });
+
+ stage.add(layer);
+ layer.add(group);
+ group.add(triangle);
+ layer.draw();
+
+ //console.log(stage.toJSON());
+
+ var expectedJson = '{"attrs":{"width":578,"height":200,"visible":true,"listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"nodeType":"Stage","children":[{"attrs":{"visible":true,"listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"nodeType":"Layer","children":[{"attrs":{"visible":true,"listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"nodeType":"Group","children":[{"attrs":{"fill":"#00D2FF","stroke":"black","strokeWidth":4,"detectionType":"path","visible":true,"listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false,"drawFuncName":"drawTriangle"},"nodeType":"Shape"}]}]}]}';
+ test(stage.toJSON() === expectedJson, "problem with serialization");
+
+ },
+ 'STAGE - load stage with custom shape using json': function(containerId) {
+ var stage = new Kinetic.Stage({
+ container: containerId,
+ width: 578,
+ height: 200
+ });
+
+ var drawTriangle = function() {
+ var context = this.getContext();
+ context.beginPath();
+ context.moveTo(200, 50);
+ context.lineTo(420, 80);
+ context.quadraticCurveTo(300, 100, 260, 170);
+ context.closePath();
+ this.fillStroke();
+ };
+ var json = '{"attrs":{"width":578,"height":200,"visible":true,"listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"nodeType":"Stage","children":[{"attrs":{"visible":true,"listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"nodeType":"Layer","children":[{"attrs":{"visible":true,"listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"nodeType":"Group","children":[{"attrs":{"fill":"#00D2FF","stroke":"black","strokeWidth":4,"detectionType":"path","visible":true,"listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false,"drawFuncName":"drawTriangle"},"nodeType":"Shape"}]}]}]}';
+ stage.load(json, {
+ drawTriangle: drawTriangle
+ });
+
+ //console.log(stage.toJSON());
+
+ test(stage.toJSON() === json, "serialized stage is incorrect");
+ },
'STAGE - set stage size': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
@@ -649,8 +650,6 @@ Test.prototype.tests = {
}
});
- console.log(darth);
-
layer.add(darth);
stage.add(layer);
};
@@ -822,7 +821,7 @@ Test.prototype.tests = {
layer.add(star);
stage.add(layer);
},
- 'SHAPES - add five point star with line join': function(containerId) {
+ 'SHAPES - add five point star with line join (ends up as bevel line join)': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,

0 comments on commit 1a40e50

Please sign in to comment.
Something went wrong with that request. Please try again.