From bf86dacb59d38ef7ea17bdf82063bb36da4d4e10 Mon Sep 17 00:00:00 2001 From: Eric Rowell Date: Wed, 4 Apr 2012 22:57:36 -0700 Subject: [PATCH] setup simple serialization --- dist/kinetic-core.js | 118 ++++++++++++++++++++++++++++++--------- dist/kinetic-core.min.js | 4 +- src/Container.js | 9 ++- src/GlobalObject.js | 16 ++++++ src/Group.js | 5 +- src/Layer.js | 5 +- src/Node.js | 30 +++++----- src/Shape.js | 5 +- src/Stage.js | 48 ++++++++++++++-- tests/js/unitTests.js | 25 +++++++++ 10 files changed, 213 insertions(+), 52 deletions(-) diff --git a/dist/kinetic-core.js b/dist/kinetic-core.js index 8f771283..89500a55 100644 --- a/dist/kinetic-core.js +++ b/dist/kinetic-core.js @@ -56,6 +56,22 @@ Kinetic.GlobalObject = { y: 0 } }, + jsonProps: function(props) { + if(this.jsonProps === undefined) { + this.jsonProps = props; + } + else { + this.jsonProps = this.jsonProps.concat(props); + } + }, + arrayHas: function(arr, key) { + for(var n = 0; n < arr.length; n++) { + if(arr[n] === key) { + return true; + } + } + return false; + }, extend: function(obj1, obj2) { for(var key in obj2.prototype) { if(obj2.prototype.hasOwnProperty(key) && obj1.prototype[key] === undefined) { @@ -145,7 +161,7 @@ window.requestAnimFrame = (function(callback) { */ Kinetic.Node = function(config) { this.visible = true; - this.isListening = true; + this.listening = true; this.name = undefined; this.alpha = 1; this.x = 0; @@ -192,6 +208,9 @@ Kinetic.Node = function(config) { if(this.centerOffset.y === undefined) { this.centerOffset.y = 0; } + + // used for serialization + Kinetic.GlobalObject.jsonProps.call(this, ['alpha', 'centerOffset', 'dragBounds', 'dragConstraint', '_draggable', 'id', 'listening', 'name', 'nodeType', 'rotation', 'scale', 'visible', 'x', 'y']); }; /* * Node methods @@ -299,7 +318,7 @@ Kinetic.Node.prototype = { var child = children[n]; index++; - if(child.className !== 'Shape') { + if(child.nodeType !== 'Shape') { nodes = nodes.concat(child.getChildren()); } @@ -312,7 +331,7 @@ Kinetic.Node.prototype = { addChildren(nodes); } } - if(that.className !== 'Stage') { + if(that.nodeType !== 'Stage') { addChildren(that.getStage().getChildren()); } @@ -427,10 +446,10 @@ Kinetic.Node.prototype = { }, /** * listen or don't listen to events - * @param {Boolean} isListening + * @param {Boolean} listening */ - listen: function(isListening) { - this.isListening = isListening; + listen: function(listening) { + this.listening = listening; }, /** * move node to top @@ -504,7 +523,7 @@ Kinetic.Node.prototype = { var absAlpha = 1; var node = this; // traverse upwards - while(node.className !== 'Stage') { + while(node.nodeType !== 'Stage') { absAlpha *= node.alpha; node = node.parent; } @@ -564,7 +583,7 @@ Kinetic.Node.prototype = { * get layer associated to node */ getLayer: function() { - if(this.className === 'Layer') { + if(this.nodeType === 'Layer') { return this; } else { @@ -575,7 +594,7 @@ Kinetic.Node.prototype = { * get stage associated to node */ getStage: function() { - if(this.className === 'Stage') { + if(this.nodeType === 'Stage') { return this; } else { @@ -618,7 +637,7 @@ Kinetic.Node.prototype = { * transition completes */ transitionTo: function(config) { - var node = this.className === 'Stage' ? this : this.getLayer(); + var node = this.nodeType === 'Stage' ? this : this.getLayer(); var that = this; var go = Kinetic.GlobalObject; var trans = new Kinetic.Transition(this, config); @@ -628,7 +647,7 @@ Kinetic.Node.prototype = { }, node: node }; - + /* * adding the animation with the addAnimation * method auto generates an id @@ -642,7 +661,6 @@ Kinetic.Node.prototype = { config.callback(); } }; - // auto start trans.start(); @@ -760,7 +778,7 @@ Kinetic.Node.prototype = { * @param {Event} evt */ _handleEvents: function(eventType, evt) { - if(this.className === 'Shape') { + if(this.nodeType === 'Shape') { evt.shape = this; } var stage = this.getStage(); @@ -795,7 +813,7 @@ Kinetic.Node.prototype = { var mouseoutParent = mouseoutNode ? mouseoutNode.parent : undefined; // simulate event bubbling - if(!evt.cancelBubble && node.parent.className !== 'Stage') { + if(!evt.cancelBubble && node.parent.nodeType !== 'Stage') { this._handleEvent(node.parent, mouseoverParent, mouseoutParent, eventType, evt); } } @@ -812,6 +830,9 @@ Kinetic.Node.prototype = { Kinetic.Container = function() { this.children = []; this.childrenNames = {}; + + // used for serialization + Kinetic.GlobalObject.jsonProps.call(this, []); }; /* * Container methods @@ -860,7 +881,7 @@ Kinetic.Container.prototype = { var children = this.children; for(var n = 0; n < children.length; n++) { var child = children[n]; - if(child.className === 'Shape') { + if(child.nodeType === 'Shape') { child._draw(child.getLayer()); } else { @@ -891,7 +912,7 @@ Kinetic.Container.prototype = { * from the container except the buffer and backstage canvases * and then readd all the layers */ - if(this.className === 'Stage') { + if(this.nodeType === 'Stage') { var canvases = this.content.children; var bufferCanvas = canvases[0]; var backstageCanvas = canvases[1]; @@ -904,7 +925,7 @@ Kinetic.Container.prototype = { for(var n = 0; n < this.children.length; n++) { this.children[n].index = n; - if(this.className === 'Stage') { + if(this.nodeType === 'Stage') { this.content.appendChild(this.children[n].canvas); } } @@ -933,7 +954,7 @@ Kinetic.Stage = function(config) { config.container = document.getElementById(config.container); } - this.className = 'Stage'; + this.nodeType = 'Stage'; this.container = config.container; this.content = document.createElement('div'); @@ -972,6 +993,9 @@ Kinetic.Stage = function(config) { // add stage to global object Kinetic.GlobalObject.stages.push(this); + // used for serialization + Kinetic.GlobalObject.jsonProps.call(this, ['height', 'width']); + // call super constructors Kinetic.Container.apply(this, []); Kinetic.Node.apply(this, [config]); @@ -1093,6 +1117,40 @@ Kinetic.Stage.prototype = { bufferLayer.clear(); addLayer(0); }, + /** + * serialize stage and children as JSON object + */ + toJSON: function() { + var go = Kinetic.GlobalObject; + + function addNode(node) { + var obj = {}; + + // copy attrs + for(var key in node) { + if(node.hasOwnProperty(key) && go.arrayHas(node.jsonProps, key)) { + obj[key] = node[key]; + } + } + + if(node.nodeType === 'Shape') { + } + else { + obj.children = []; + var children = node.getChildren(); + for(var n = 0; n < children.length; n++) { + var child = children[n]; + + obj.children.push(addNode(child)); + } + } + + return obj; + } + var obj = addNode(this); + + return obj; + }, /** * remove layer from stage * @param {Layer} layer @@ -1326,8 +1384,8 @@ Kinetic.Stage.prototype = { // propapgate backwards through children for(var i = children.length - 1; i >= 0; i--) { var child = children[i]; - if(child.isListening) { - if(child.className === 'Shape') { + if(child.listening) { + if(child.nodeType === 'Shape') { var exit = this._detectEvent(child, evt); if(exit) { return true; @@ -1367,7 +1425,7 @@ Kinetic.Stage.prototype = { var shapeDetected = false; for(var n = this.children.length - 1; n >= 0; n--) { var layer = this.children[n]; - if(layer.visible && n >= 0 && layer.isListening) { + if(layer.visible && n >= 0 && layer.listening) { if(this._traverseChildren(layer, evt)) { n = -1; shapeDetected = true; @@ -1433,7 +1491,8 @@ Kinetic.Stage.prototype = { this.content.addEventListener('touchmove', function(evt) { evt.preventDefault(); - that._handleStageEvent(evt);}, false); + that._handleStageEvent(evt); + }, false); this.content.addEventListener('touchend', function(evt) { evt.preventDefault(); @@ -1675,11 +1734,14 @@ Kinetic.GlobalObject.extend(Kinetic.Stage, Kinetic.Node); * @param {Object} config */ Kinetic.Layer = function(config) { - this.className = 'Layer'; + this.nodeType = 'Layer'; this.canvas = document.createElement('canvas'); this.context = this.canvas.getContext('2d'); this.canvas.style.position = 'absolute'; + // used for serialization + Kinetic.GlobalObject.jsonProps.call(this, []); + // call super constructors Kinetic.Container.apply(this, []); Kinetic.Node.apply(this, [config]); @@ -1759,7 +1821,10 @@ Kinetic.GlobalObject.extend(Kinetic.Layer, Kinetic.Node); * @param {Object} config */ Kinetic.Group = function(config) { - this.className = 'Group'; + this.nodeType = 'Group'; + + // used for serialization + Kinetic.GlobalObject.jsonProps.call(this, []); // call super constructors Kinetic.Container.apply(this, []); @@ -1815,7 +1880,7 @@ Kinetic.GlobalObject.extend(Kinetic.Group, Kinetic.Node); * The default is "path" because it performs better */ Kinetic.Shape = function(config) { - this.className = 'Shape'; + this.nodeType = 'Shape'; this.data = []; // defaults @@ -1833,6 +1898,9 @@ Kinetic.Shape = function(config) { // required this.drawFunc = config.drawFunc; + // used for serialization + Kinetic.GlobalObject.jsonProps.call(this, ['fill', 'stroke', 'strokeWidth', 'detectionType']); + // call super constructor Kinetic.Node.apply(this, [config]); }; diff --git a/dist/kinetic-core.min.js b/dist/kinetic-core.min.js index fe398314..e9811aa7 100644 --- a/dist/kinetic-core.min.js +++ b/dist/kinetic-core.min.js @@ -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}},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;c0){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.isListening=!0,this.name=undefined,this.alpha=1,this.x=0,this.y=0,this.scale={x:1,y:1},this.rotation=0,this.centerOffset={x:0,y:0},this.eventListeners={},this.dragConstraint="none",this.dragBounds={},this._draggable=!1;if(a)for(var b in a)switch(b){case"draggable":this.draggable(a[b]);break;case"listen":this.listen(a[b]);break;case"rotationDeg":this.rotation=a[b]*Math.PI/180;break;default:this[b]=a[b]}this.centerOffset.x===undefined&&(this.centerOffset.x=0),this.centerOffset.y===undefined&&(this.centerOffset.y=0)},Kinetic.Node.prototype={on:function(a,b){var c=a.split(" ");for(var d=0;d1?g[1]:"";this.eventListeners[h]||(this.eventListeners[h]=[]),this.eventListeners[h].push({name:i,handler:b})}},off:function(a){var b=a.split(" ");for(var c=0;c1){var h=f[1];for(var i=0;i0&&f[0].getLevel()<=a&&e(f)}var a=this.getLevel(),b=this.getStage(),c=this,d=0;return c.className!=="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.isListening=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.className!=="Stage")a*=b.alpha,b=b.parent;return a},draggable:function(a){this.draggable!==a&&(a?this._initDrag():this._dragCleanup(),this._draggable=a)},isDragging:function(){var a=Kinetic.GlobalObject;return a.drag.node!==undefined&&a.drag.node.id===this.id&&a.drag.moving},moveTo:function(a){var b=this.parent;b.children.splice(this.index,1),b._setChildrenIndices(),a.children.push(this),this.index=a.children.length-1,this.parent=a,a._setChildrenIndices(),this.name&&(b.childrenNames[this.name]=undefined,a.childrenNames[this.name]=this)},getParent:function(){return this.parent},getLayer:function(){return this.className==="Layer"?this:this.getParent().getLayer()},getStage:function(){return this.className==="Stage"?this:this.getParent().getStage()},getName:function(){return this.name},setCenterOffset:function(a,b){this.centerOffset.x=a,this.centerOffset.y=b},getCenterOffset:function(){return this.centerOffset},transitionTo:function(a){var b=this.className==="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;d0)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=0;d--){var e=c[d];if(e.isListening)if(e.className==="Shape"){var f=this._detectEvent(e,b);if(f)return!0}else{var f=this._traverseChildren(e,b);if(f)return!0}}return!1},_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.isListening&&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.xg.right&&(h.x=g.right),g.top!==undefined&&h.yg.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.className="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.visible&&this._drawChildren()}},Kinetic.GlobalObject.extend(Kinetic.Layer,Kinetic.Container),Kinetic.GlobalObject.extend(Kinetic.Layer,Kinetic.Node),Kinetic.Group=function(a){this.className="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.visible&&this._drawChildren()}},Kinetic.GlobalObject.extend(Kinetic.Group,Kinetic.Container),Kinetic.GlobalObject.extend(Kinetic.Group,Kinetic.Node),Kinetic.Shape=function(a){this.className="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.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;fthis.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.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","id","listening","name","nodeType","rotation","scale","visible","x","y"])},Kinetic.Node.prototype={on:function(a,b){var c=a.split(" ");for(var d=0;d1?g[1]:"";this.eventListeners[h]||(this.eventListeners[h]=[]),this.eventListeners[h].push({name:i,handler:b})}},off:function(a){var b=a.split(" ");for(var c=0;c1){var h=f[1];for(var i=0;i0&&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;d0)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=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.xg.right&&(h.x=g.right),g.top!==undefined&&h.yg.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"]),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;fthis.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; i--) { var child = children[i]; - if(child.isListening) { - if(child.className === 'Shape') { + if(child.listening) { + if(child.nodeType === 'Shape') { var exit = this._detectEvent(child, evt); if(exit) { return true; @@ -454,7 +491,7 @@ Kinetic.Stage.prototype = { var shapeDetected = false; for(var n = this.children.length - 1; n >= 0; n--) { var layer = this.children[n]; - if(layer.visible && n >= 0 && layer.isListening) { + if(layer.visible && n >= 0 && layer.listening) { if(this._traverseChildren(layer, evt)) { n = -1; shapeDetected = true; @@ -520,7 +557,8 @@ Kinetic.Stage.prototype = { this.content.addEventListener('touchmove', function(evt) { evt.preventDefault(); - that._handleStageEvent(evt);}, false); + that._handleStageEvent(evt); + }, false); this.content.addEventListener('touchend', function(evt) { evt.preventDefault(); diff --git a/tests/js/unitTests.js b/tests/js/unitTests.js index d5191e0e..de582f90 100644 --- a/tests/js/unitTests.js +++ b/tests/js/unitTests.js @@ -64,6 +64,31 @@ Test.prototype.tests = { group.add(circle); layer.draw(); }, + 'STAGE - serialize stage': function(containerId) { + var stage = new Kinetic.Stage({ + container: containerId, + width: 578, + height: 200 + }); + var layer = new Kinetic.Layer(); + var group = new Kinetic.Group(); + var circle = new Kinetic.Circle({ + x: stage.width / 2, + y: stage.height / 2, + radius: 70, + fill: 'green', + stroke: 'black', + strokeWidth: 4, + name: 'myCircle' + }); + + stage.add(layer); + layer.add(group); + group.add(circle); + layer.draw(); + + console.log(stage.toJSON()); + }, 'STAGE - set stage size': function(containerId) { var stage = new Kinetic.Stage({ container: containerId,