From 384a6867403005a8bc86d589aa3271880a22bd35 Mon Sep 17 00:00:00 2001 From: Eric Rowell Date: Sun, 15 Jul 2012 20:12:18 -0700 Subject: [PATCH] worked through some synchronous / asynchronous issues with toDataURL and toImage(). stage toDataURL() is now asynchronous, and all other node toDataURLs is still synchronous. toImage() is now asynchronous. Kinetic.Image once again only accepts image objects, and can no longer be instantiated with a data URL or image data due to asynchronous issues. It's much cleaner for the developer to load an image however they like, and then instantiate a Kinetic.Image shape synchronously --- dist/kinetic-core.js | 139 ++++++++++++++++++----------- dist/kinetic-core.min.js | 29 ------ src/Node.js | 15 ++-- src/Stage.js | 80 ++++++++++++----- src/shapes/Image.js | 14 --- src/util/Type.js | 30 ++++--- tests/assets/functionalDataUrls.js | 18 +++- tests/js/functionalTests.js | 15 ++-- tests/js/manualTests.js | 6 +- tests/js/performanceTests.js | 40 ++++----- tests/js/unitTests.js | 114 ++++------------------- 11 files changed, 233 insertions(+), 267 deletions(-) diff --git a/dist/kinetic-core.js b/dist/kinetic-core.js index 0f610d20..aeb05a45 100644 --- a/dist/kinetic-core.js +++ b/dist/kinetic-core.js @@ -277,21 +277,28 @@ Kinetic.Type = { /* * arg can be an image object or image data */ - _getImage: function(arg) { - // if arg is already an image object, just return it - if(this._isElement(arg)) { - return arg; + _getImage: function(arg, callback) { + // if arg is null or undefined + if(!arg) { + callback(null); + } + + // if arg is already an image object + else if(this._isElement(arg)) { + callback(arg); } // if arg is a string, then it's a data url - if(this._isString(arg)) { + else if(this._isString(arg)) { var imageObj = new Image(); + imageObj.onload = function() { + callback(imageObj); + } imageObj.src = arg; - return imageObj; } //if arg is an object that contains the data property, it's an image object - if(arg.data) { + else if(arg.data) { var canvas = document.createElement('canvas'); canvas.width = arg.width; canvas.height = arg.height; @@ -299,12 +306,15 @@ Kinetic.Type = { context.putImageData(arg, 0, 0); var dataUrl = canvas.toDataURL(); var imageObj = new Image(); + imageObj.onload = function() { + callback(imageObj); + } imageObj.src = dataUrl; - return imageObj; } - // default - return null; + else { + callback(null); + } } }; @@ -717,10 +727,6 @@ Kinetic.Node = Kinetic.Class.extend({ that._setAttr(obj[key], 'width', size.width); that._setAttr(obj[key], 'height', size.height); break; - case 'image': - var img = type._getImage(val); - that._setAttr(obj, key, img); - break; default: that._setAttr(obj, key, val); break; @@ -1320,10 +1326,15 @@ Kinetic.Node = Kinetic.Class.extend({ } }, /** - * to image + * converts node into an image. Since the toImage + * method is asynchronous, a callback is required + * @name toImage + * @methodOf Kinetic.Stage.prototype */ - toImage: function() { - return Kinetic.Type._getImage(this.toDataURL()); + toImage: function(callback) { + Kinetic.Type._getImage(this.toDataURL(), function(img) { + callback(img); + }); }, _setImageData: function(imageData) { if(imageData && imageData.data) { @@ -2190,25 +2201,37 @@ Kinetic.Stage = Kinetic.Container.extend({ return this.content; }, /** - * Creates a composite data URL. If MIME type is not - * specified, then "image/png" will result. For "image/jpeg", specify a quality - * level as quality (range 0.0 - 1.0). Note that this method works - * differently from toDataURL() for other nodes because it generates an absolute dataURL - * based on what's draw onto the canvases for each layer, rather than drawing - * the current state of each node + * Creates a composite data URL and requires a callback because the stage + * toDataURL method is asynchronous. If MIME type is not + * specified, then "image/png" will result. For "image/jpeg", specify a quality + * level as quality (range 0.0 - 1.0). Note that this method works + * differently from toDataURL() for other nodes because it generates an absolute dataURL + * based on what's draw onto the canvases for each layer, rather than drawing + * the current state of each node * @name toDataURL * @methodOf Kinetic.Stage.prototype + * @param {Function} callback * @param {String} [mimeType] * @param {Number} [quality] */ - toDataURL: function(mimeType, quality) { - var bufferLayer = this.bufferLayer; - var bufferCanvas = bufferLayer.getCanvas(); - var bufferContext = bufferLayer.getContext(); + toDataURL: function(callback, mimeType, quality) { + /* + * we need to create a temp layer rather than using + * the bufferLayer because the stage toDataURL method + * is asynchronous, which means that other parts of the + * code base could be updating or clearing the bufferLayer + * while the stage toDataURL method is processing + */ + var tempLayer = new Kinetic.Layer(); + tempLayer.getCanvas().width = this.attrs.width; + tempLayer.getCanvas().height = this.attrs.height; + tempLayer.parent = this; + var tempCanvas = tempLayer.getCanvas(); + var tempContext = tempLayer.getContext(); + var layers = this.children; - bufferLayer.clear(); - - for(var n = 0; n < layers.length; n++) { + + function drawLayer(n) { var layer = layers[n]; var layerUrl; try { @@ -2221,18 +2244,40 @@ Kinetic.Stage = Kinetic.Container.extend({ } var imageObj = new Image(); - imageObj.src = layerUrl; - bufferContext.drawImage(imageObj, 0, 0); - } + imageObj.onload = function() { + tempContext.drawImage(imageObj, 0, 0); - try { - // If this call fails (due to browser bug, like in Firefox 3.6), - // then revert to previous no-parameter image/png behavior - return bufferLayer.getCanvas().toDataURL(mimeType, quality); - } - catch(e) { - return bufferLayer.getCanvas().toDataURL(); + if(n < layers.length - 1) { + drawLayer(n + 1); + } + else { + try { + // If this call fails (due to browser bug, like in Firefox 3.6), + // then revert to previous no-parameter image/png behavior + callback(tempLayer.getCanvas().toDataURL(mimeType, quality)); + } + catch(e) { + callback(tempLayer.getCanvas().toDataURL()); + } + } + }; + imageObj.src = layerUrl; } + drawLayer(0); + }, + /** + * converts stage into an image. Since the stage toImage() method + * is asynchronous, a callback function is required + * @name toImage + * @methodOf Kinetic.Stage.prototype + * @param {Function} callback + */ + toImage: function(callback) { + this.toDataURL(function(dataUrl) { + Kinetic.Type._getImage(dataUrl, function(img) { + callback(img); + }); + }); }, _resizeDOM: function() { var width = this.attrs.width; @@ -3864,20 +3909,6 @@ Kinetic.Image = Kinetic.Shape.extend({ }; // call super constructor this._super(config); - - /* - * if image property is ever changed, check and see - * if it was set to image data, and if it was, go ahead - * and save it - */ - this.on('beforeImageChange.kinetic', function(evt) { - this._setImageData(evt.newVal); - }); - /* - * if image property was set with image data, - * go ahead and save it - */ - this._setImageData(config.image); }, /** * set width and height diff --git a/dist/kinetic-core.min.js b/dist/kinetic-core.min.js index 3db5f5d0..e69de29b 100644 --- a/dist/kinetic-core.min.js +++ b/dist/kinetic-core.min.js @@ -1,29 +0,0 @@ -/** - * KineticJS JavaScript Library core - * http://www.kineticjs.com/ - * Copyright 2012, Eric Rowell - * Licensed under the MIT or GPL Version 2 licenses. - * Date: Jul 15 2012 - * - * Copyright (C) 2011 - 2012 by Eric Rowell - * - * Permission is hereby granted, free of charge, to any person obtaining a copy - * of this software and associated documentation files (the "Software"), to deal - * in the Software without restriction, including without limitation the rights - * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell - * copies of the Software, and to permit persons to whom the Software is - * furnished to do so, subject to the following conditions: - * - * The above copyright notice and this permission notice shall be included in - * all copies or substantial portions of the Software. - * - * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR - * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, - * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE - * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER - * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, - * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN - * THE SOFTWARE. - */ -var Kinetic={};Kinetic.Filters={},Kinetic.Global={BUBBLE_WHITELIST:["mousedown","mousemove","mouseup","mouseover","mouseout","click","dblclick","touchstart","touchmove","touchend","tap","dbltap","dragstart","dragmove","dragend"],stages:[],idCounter:0,tempNodes:[],maxDragTimeInterval:20,drag:{moving:!1,offset:{x:0,y:0},lastDrawTime:0},_pullNodes:function(a){var b=this.tempNodes;for(var c=0;c0},_getXY:function(a){if(this._isNumber(a))return{x:a,y:a};if(this._isArray(a)){if(a.length===1){var b=a[0];if(this._isNumber(b))return{x:b,y:b};if(this._isArray(b))return{x:b[0],y:b[1]};if(this._isObject(b))return b}else if(a.length>=2)return{x:a[0],y:a[1]}}else if(this._isObject(a))return a;return{x:0,y:0}},_getSize:function(a){if(this._isNumber(a))return{width:a,height:a};if(this._isArray(a))if(a.length===1){var b=a[0];if(this._isNumber(b))return{width:b,height:b};if(this._isArray(b)){if(b.length>=4)return{width:b[2],height:b[3]};if(b.length>=2)return{width:b[0],height:b[1]}}else if(this._isObject(b))return b}else{if(a.length>=4)return{width:a[2],height:a[3]};if(a.length>=2)return{width:a[0],height:a[1]}}else if(this._isObject(a))return a;return{width:0,height:0}},_getPoints:function(a){if(a===undefined)return[];if(this._isObject(a[0]))return a;var b=[];for(var c=0;c0){this._updateFrameObject(),this._runFrames();var a=this;requestAnimFrame(function(){a._animationLoop()})}else this.animRunning=!1,this.frame.lastTime=0},_handleAnimation:function(){var a=this;this.animRunning?this.frame.lastTime=0:(this.animRunning=!0,a._animationLoop())}},requestAnimFrame=function(a){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(a){window.setTimeout(a,1e3/60)}}(),Kinetic.Node=Kinetic.Class.extend({init:function(a){this.defaultNodeAttrs={visible:!0,listening:!0,name:undefined,alpha:1,x:0,y:0,scale:{x:1,y:1},rotation:0,offset:{x:0,y:0},dragConstraint:"none",dragBounds:{},draggable:!1},this.setDefaultAttrs(this.defaultNodeAttrs),this.eventListeners={},this.setAttrs(a),this.on("draggableChange.kinetic",function(){this._onDraggableChange()});var b=this;this.on("idChange.kinetic",function(a){var c=b.getStage();c&&(c._removeId(a.oldVal),c._addId(b))}),this.on("nameChange.kinetic",function(a){var c=b.getStage();c&&(c._removeName(a.oldVal,b._id),c._addName(b))}),this._onDraggableChange()},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},setPosition:function(){var a=Kinetic.Type._getXY(Array.prototype.slice.call(arguments));this.setAttrs(a)},getPosition:function(){return{x:this.attrs.x,y:this.attrs.y}},getAbsolutePosition:function(){return this.getAbsoluteTransform().getTranslation()},setAbsolutePosition:function(){var a=Kinetic.Type._getXY(Array.prototype.slice.call(arguments)),b=this.attrs.rotation,c={x:this.attrs.scale.x,y:this.attrs.scale.y},d={x:this.attrs.offset.x,y:this.attrs.offset.y};this.attrs.rotation=0,this.attrs.scale={x:1,y:1};var e=this.getAbsoluteTransform();e.invert(),e.translate(a.x,a.y),a={x:this.attrs.x+e.getTranslation().x,y:this.attrs.y+e.getTranslation().y},this.setPosition(a.x,a.y),this.rotate(b),this.attrs.scale={x:c.x,y:c.y}},move:function(){var a=Kinetic.Type._getXY(Array.prototype.slice.call(arguments)),b=this.getX(),c=this.getY();a.x!==undefined&&(b+=a.x),a.y!==undefined&&(c+=a.y),this.setAttrs({x:b,y:c})},getRotationDeg:function(){return this.attrs.rotation*180/Math.PI},rotate:function(a){this.setAttrs({rotation:this.getRotation()+a})},rotateDeg:function(a){this.setAttrs({rotation:this.getRotation()+a*Math.PI/180})},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()},getAbsoluteAlpha:function(){var a=1,b=this;while(b.nodeType!=="Stage")a*=b.attrs.alpha,b=b.parent;return a},isDragging:function(){var a=Kinetic.Global;return a.drag.node!==undefined&&a.drag.node._id===this._id&&a.drag.moving},moveTo:function(a){var b=this.parent;b.children.splice(this.index,1),b._setChildrenIndices(),a.children.push(this),this.index=a.children.length-1,this.parent=a,a._setChildrenIndices()},getParent:function(){return this.parent},getLayer:function(){return this.nodeType==="Layer"?this:this.getParent().getLayer()},getStage:function(){return this.nodeType!=="Stage"&&this.getParent()?this.getParent().getStage():this.nodeType==="Stage"?this:undefined},simulate:function(a){this._handleEvent(a,{})},transitionTo:function(a){var b=Kinetic.Animation;this.transAnim&&(b._removeAnimation(this.transAnim),this.transAnim=null);var c=this.nodeType==="Stage"?this:this.getLayer(),d=this,e=new Kinetic.Transition(this,a),f={func:function(){e._onEnterFrame()},node:c};return this.transAnim=f,b._addAnimation(f),e.onFinished=function(){b._removeAnimation(f),d.transAnim=null,a.callback!==undefined&&a.callback(),f.node.draw()},e.start(),b._handleAnimation(),e},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=0&&!b.cancelBubble&&this.parent&&this._handleEvent.call(this.parent,a,b)}}}),Kinetic.Node.addSetters=function(constructor,a){for(var b=0;b0)this.remove(this.children[0])},add:function(a){a._id=Kinetic.Global.idCounter++,a.index=this.children.length,a.parent=this,this.children.push(a);var b=a.getStage();if(b===undefined){var c=Kinetic.Global;c.tempNodes.push(a)}else{b._addId(a),b._addName(a);var c=Kinetic.Global;c._pullNodes(b)}return this._add!==undefined&&this._add(a),this},remove:function(a){if(a&&a.index!==undefined&&this.children[a.index]._id==a._id){var b=this.getStage();b!==undefined&&(b._removeId(a.getId()),b._removeName(a.getName(),a._id));var c=Kinetic.Global;for(var d=0;d0)a.remove(a.children[0]);this._remove!==undefined&&this._remove(a)}return this},get:function(a){var b=this.getStage(),c,d=a.slice(1);if(a.charAt(0)==="#")c=b.ids[d]!==undefined?[b.ids[d]]:[];else{if(a.charAt(0)!==".")return a==="Shape"||a==="Group"||a==="Layer"?this._getNodes(a):!1;c=b.names[d]!==undefined?b.names[d]:[]}var e=[];for(var f=0;f=0;d--){var e=c[d];if(e.getListening())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=new Date,c=b.getTime();this.lastEventTime=c;var d=Kinetic.Global;a||(a=window.event),this._setMousePosition(a),this._setTouchPosition(a),this.pathLayer.clear(),this.targetFound=!1;var e=!1;for(var f=this.children.length-1;f>=0;f--){var g=this.children[f];if(g.isVisible()&&f>=0&&g.getListening()&&this._traverseChildren(g,a)){e=!0;break}}!e&&this.mouseoutShape&&(this.mouseoutShape._handleEvent("mouseout",a),this.mouseoutShape=undefined)},_bindContentEvents:function(){var a=Kinetic.Global,b=this,c=["mousedown","mousemove","mouseup","mouseover","mouseout","touchstart","touchmove","touchend"];for(var d=0;d=f||b>200)this.mouseDown=!1,this.mouseUp=!1,this.mouseMove=!0,this._handleStageEvent(a);this._startDrag(a)},_mousedown:function(a){this.mouseDown=!0,this.mouseUp=!1,this.mouseMove=!1,this._handleStageEvent(a),this.attrs.draggable&&this._initDrag()},_mouseup:function(a){this.mouseDown=!1,this.mouseUp=!0,this.mouseMove=!1,this._handleStageEvent(a),this.clickStart=!1,this._endDrag(a)},_touchstart:function(a){a.preventDefault(),this.touchStart=!0,this.touchEnd=!1,this.touchMove=!1,this._handleStageEvent(a),this.attrs.draggable&&this._initDrag()},_touchend:function(a){this.touchStart=!1,this.touchEnd=!0,this.touchMove=!1,this._handleStageEvent(a),this.tapStart=!1,this._endDrag(a)},_touchmove:function(a){var b=this,c=this.attrs.throttle,d=new Date,e=d.getTime(),f=e-this.lastEventTime,g=1e3/c;if(f>=g||c>200)a.preventDefault(),b.touchEnd=!1,b.touchMove=!0,b._handleStageEvent(a);this._startDrag(a)},_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.Global;b.drag.node&&b.drag.moving&&(b.drag.moving=!1,b.drag.node._handleEvent("dragend",a)),b.drag.node=undefined},_startDrag:function(a){var b=this,c=Kinetic.Global,d=c.drag.node;if(d){var e=b.getUserPosition(),f=d.attrs.dragConstraint,g=d.attrs.dragBounds,h={x:d.attrs.x,y:d.attrs.y},i={x:e.x-c.drag.offset.x,y:e.y-c.drag.offset.y};g.left!==undefined&&i.xg.right&&(i.x=g.right),g.top!==undefined&&i.yg.bottom&&(i.y=g.bottom),d.setAbsolutePosition(i),f==="horizontal"?d.attrs.y=h.y:f==="vertical"&&(d.attrs.x=h.x),c.drag.node.nodeType==="Stage"?c.drag.node.draw():c.drag.node.getLayer().draw(),c.drag.moving||(c.drag.moving=!0,c.drag.node._handleEvent("dragstart",a)),c.drag.node._handleEvent("dragmove",a)}},_buildDOM:function(){this.content=document.createElement("div"),this.content.style.position="relative",this.content.style.display="inline-block",this.content.className="kineticjs-content",this.attrs.container.appendChild(this.content),this.bufferLayer=new Kinetic.Layer({name:"bufferLayer"}),this.pathLayer=new Kinetic.Layer({name:"pathLayer"}),this.bufferLayer.parent=this,this.pathLayer.parent=this,this._modifyPathContext(this.pathLayer.context),this.bufferLayer.getCanvas().style.display="none",this.pathLayer.getCanvas().style.display="none",this.bufferLayer.canvas.className="kineticjs-buffer-layer",this.content.appendChild(this.bufferLayer.canvas),this.pathLayer.canvas.className="kineticjs-path-layer",this.content.appendChild(this.pathLayer.canvas),this.setSize(this.attrs.width,this.attrs.height),this._resizeDOM()},_addId:function(a){a.attrs.id!==undefined&&(this.ids[a.attrs.id]=a)},_removeId:function(a){a!==undefined&&delete this.ids[a]},_addName:function(a){var b=a.attrs.name;b!==undefined&&(this.names[b]===undefined&&(this.names[b]=[]),this.names[b].push(a))},_removeName:function(a,b){if(a!==undefined){var c=this.names[a];if(c!==undefined){for(var d=0;d=f||b>200)this._draw(a),this.drawTimeout!==undefined&&(clearTimeout(this.drawTimeout),this.drawTimeout=undefined);else if(this.drawTimeout===undefined){var g=this;this.drawTimeout=setTimeout(function(){g.draw(a)},17)}},beforeDraw:function(a){this.beforeDrawFunc=a},afterDraw:function(a){this.afterDrawFunc=a},clear:function(){var a=this.getContext(),b=this.getCanvas();a.clearRect(0,0,b.width,b.height)},getCanvas:function(){return this.canvas},getContext:function(){return this.context},toDataURL:function(a,b){try{return this.getCanvas().toDataURL(a,b)}catch(c){return this.getCanvas().toDataURL()}},_draw:function(a){var b=new Date,c=b.getTime();this.lastDrawTime=c,this.beforeDrawFunc!==undefined&&this.beforeDrawFunc.call(this);if(this.attrs.clearBeforeDraw){var d=a?a:this;d.clear()}this.isVisible()&&(this.attrs.drawFunc!==undefined&&this.attrs.drawFunc.call(this),this._drawChildren(a)),this.afterDrawFunc!==undefined&&this.afterDrawFunc.call(this)}}),Kinetic.Node.addGettersSetters(Kinetic.Layer,["clearBeforeDraw","throttle"]),Kinetic.Group=Kinetic.Container.extend({init:function(a){this.nodeType="Group",this._super(a)},draw:function(a){this._draw(a)},_draw:function(a){this.attrs.visible&&this._drawChildren(a)}}),Kinetic.Shape=Kinetic.Node.extend({init:function(a){this.setDefaultAttrs({detectionType:"path"}),this.nodeType="Shape",this.appliedShadow=!1,this._super(a)},getContext:function(){return this.tempLayer.getContext()},getCanvas:function(){return this.tempLayer.getCanvas()},stroke:function(){var a=Kinetic.Global,b=!1,c=this.getContext();if(this.attrs.stroke||this.attrs.strokeWidth){c.save(),this.attrs.shadow&&!this.appliedShadow&&(b=this._applyShadow());var d=this.attrs.stroke?this.attrs.stroke:"black",e=this.attrs.strokeWidth?this.attrs.strokeWidth:2;c.lineWidth=e,c.strokeStyle=d,c.stroke(),c.restore()}b&&this.stroke()},fill:function(){var a=!1,b=this.getContext();b.save();var c=this.attrs.fill;if(c){this.attrs.shadow&&!this.appliedShadow&&(a=this._applyShadow());var d=c.start,e=c.end,f=null;if(typeof c=="string")f=this.attrs.fill,b.fillStyle=f,b.fill();else if(c.image){var g=c.repeat?c.repeat:"repeat";f=b.createPattern(c.image,g),b.save(),c.scale&&b.scale(c.scale.x,c.scale.y),c.offset&&b.translate(c.offset.x,c.offset.y),b.fillStyle=f,b.fill(),b.restore()}else if(!d.radius&&!e.radius){var b=this.getContext(),h=b.createLinearGradient(d.x,d.y,e.x,e.y),i=c.colorStops;for(var j=0;j0&&d&&(this.attrs.height==="auto"||e*(c+1)this.attrs.width-this.attrs.padding*2){if(f==0)break;var i=h.lastIndexOf(" "),j=h.lastIndexOf("-"),k=Math.max(i,j);if(k>=0){g=a.splice(0,1+k).join("");break}g=a.splice(0,f).join("");break}f++,f===a.length&&(g=a.splice(0,f).join(""))}this.textWidth=Math.max(this.textWidth,this._getTextSize(g).width),g!==undefined&&(b.push(g),d=!0),c++}this.textArr=b}}),Kinetic.Node.addGettersSetters(Kinetic.Text,["fontFamily","fontSize","fontStyle","textFill","textStroke","textStrokeWidth","padding","align","lineHeight","text","width","height","cornerRadius","fill","stroke","strokeWidth","shadow"]),Kinetic.Line=Kinetic.Shape.extend({init:function(a){this.setDefaultAttrs({points:[],lineCap:"butt",dashArray:[],detectionType:"pixel"}),this.shapeType="Line",a.drawFunc=function(){var a=this.getContext(),b={};a.beginPath(),a.moveTo(this.attrs.points[0].x,this.attrs.points[0].y);for(var c=1;c0){var f=this.attrs.points[c-1].x,g=this.attrs.points[c-1].y;this._dashedLine(f,g,d,e,this.attrs.dashArray)}else a.lineTo(d,e)}!this.attrs.lineCap||(a.lineCap=this.attrs.lineCap),this.stroke()},this._super(a)},_dashedLine:function(a,b,c,d,e){var f=this.getContext(),g=e.length,h=c-a,i=d-b,j=h>i,k=j?i/h:h/i;k>9999?k=9999:k<-9999&&(k=-9999);var l=Math.sqrt(h*h+i*i),m=0,n=!0;while(l>=.1&&m<1e4){var o=e[m++%g];o===0&&(o=.001),o>l&&(o=l);var p=Math.sqrt(o*o/(1+k*k));j?(a+=h<0&&i<0?p*-1:p,b+=h<0&&i<0?k*p*-1:k*p):(a+=h<0&&i<0?k*p*-1:k*p,b+=h<0&&i<0?p*-1:p),f[n?"lineTo":"moveTo"](a,b),l-=o,n=!n}f.moveTo(c,d)}}),Kinetic.Node.addGettersSetters(Kinetic.Line,["dashArray","lineCap","points"]),Kinetic.Path=Kinetic.Shape.extend({init:function(a){this.shapeType="Path",this.dataArray=[];var b=this;a.drawFunc=function(){var a=this.getContext(),b=this.dataArray;a.beginPath();for(var c=0;ci?h:i,o=h>i?1:h/i,p=h>i?i/h:1;a.translate(f,g),a.rotate(l),a.scale(o,p),a.arc(0,0,n,j,j+k,1-m),a.scale(1/o,1/p),a.rotate(-l),a.translate(-f,-g);break;case"z":a.closePath()}}this.fill(),this.stroke()},this._super(a),this.dataArray=this._getDataArray(),this.on("dataChange",function(){b.dataArray=b._getDataArray()})},_getDataArray:function(){var a=this.attrs.data;if(!this.attrs.data)return[];var b=["m","M","l","L","v","V","h","H","z","Z","c","C","q","Q","t","T","s","S","a","A"];a=a.replace(new RegExp(" ","g"),",");for(var c=0;c0&&j[0]===""&&j.shift();for(var k=0;k0){if(isNaN(j[0]))break;var l=undefined,m=[];switch(i){case"l":f+=j.shift(),g+=j.shift(),l="L",m.push(f,g);break;case"L":f=j.shift(),g=j.shift(),m.push(f,g);break;case"m":f+=j.shift(),g+=j.shift(),l="M",m.push(f,g),i="l";break;case"M":f=j.shift(),g=j.shift(),l="M",m.push(f,g),i="L";break;case"h":f+=j.shift(),l="L",m.push(f,g);break;case"H":f=j.shift(),l="L",m.push(f,g);break;case"v":g+=j.shift(),l="L",m.push(f,g);break;case"V":g=j.shift(),l="L",m.push(f,g);break;case"C":m.push(j.shift(),j.shift(),j.shift(),j.shift()),f=j.shift(),g=j.shift(),m.push(f,g);break;case"c":m.push(f+j.shift(),g+j.shift(),f+j.shift(),g+j.shift()),f+=j.shift(),g+=j.shift(),l="C",m.push(f,g);break;case"S":var n=f,o=g,p=e[e.length-1];p.command==="C"&&(n=f+(f-p.points[2]),o=g+(g-p.points[3])),m.push(n,o,j.shift(),j.shift()),f=j.shift(),g=j.shift(),l="C",m.push(f,g);break;case"s":var n=f,o=g,p=e[e.length-1];p.command==="C"&&(n=f+(f-p.points[2]),o=g+(g-p.points[3])),m.push(n,o,f+j.shift(),g+j.shift()),f+=j.shift(),g+=j.shift(),l="C",m.push(f,g);break;case"Q":m.push(j.shift(),j.shift()),f=j.shift(),g=j.shift(),m.push(f,g);break;case"q":m.push(f+j.shift(),g+j.shift()),f+=j.shift(),g+=j.shift(),l="Q",m.push(f,g);break;case"T":var n=f,o=g,p=e[e.length-1];p.command==="Q"&&(n=f+(f-p.points[0]),o=g+(g-p.points[1])),f=j.shift(),g=j.shift(),l="Q",m.push(n,o,f,g);break;case"t":var n=f,o=g,p=e[e.length-1];p.command==="Q"&&(n=f+(f-p.points[0]),o=g+(g-p.points[1])),f+=j.shift(),g+=j.shift(),l="Q",m.push(n,o,f,g);break;case"A":var q=j.shift(),r=j.shift(),s=j.shift(),t=j.shift(),u=j.shift(),v=f,w=g;f=j.shift(),g=j.shift(),l="A",m=this._convertEndpointToCenterParameterization(v,w,f,g,t,u,q,r,s);break;case"a":var q=j.shift(),r=j.shift(),s=j.shift(),t=j.shift(),u=j.shift(),v=f,w=g;f+=j.shift(),g+=j.shift(),l="A",m=this._convertEndpointToCenterParameterization(v,w,f,g,t,u,q,r,s)}e.push({command:l||i,points:m})}(i==="z"||i==="Z")&&e.push({command:"z",points:[]})}return e},_convertEndpointToCenterParameterization:function(a,b,c,d,e,f,g,h,i){var j=i*(Math.PI/180),k=Math.cos(j)*(a-c)/2+Math.sin(j)*(b-d)/2,l=-1*Math.sin(j)*(a-c)/2+Math.cos(j)*(b-d)/2,m=k*k/(g*g)+l*l/(h*h);m>1&&(g*=Math.sqrt(m),h*=Math.sqrt(m));var n=Math.sqrt((g*g*h*h-g*g*l*l-h*h*k*k)/(g*g*l*l+h*h*k*k));e==f&&(n*=-1),isNaN(n)&&(n=0);var o=n*g*l/h,p=n*-h*k/g,q=(a+c)/2+Math.cos(j)*o-Math.sin(j)*p,r=(b+d)/2+Math.sin(j)*o+Math.cos(j)*p,s=function(a){return Math.sqrt(a[0]*a[0]+a[1]*a[1])},t=function(a,b){return(a[0]*b[0]+a[1]*b[1])/(s(a)*s(b))},u=function(a,b){return(a[0]*b[1]=1&&(y=0),f==0&&y>0&&(y-=2*Math.PI),f==1&&y<0&&(y+=2*Math.PI),[q,r,g,h,v,y,j,f]}}),Kinetic.Node.addGettersSetters(Kinetic.Path,["data"]),Kinetic.Transform=function(){this.m=[1,0,0,1,0,0]},Kinetic.Transform.prototype={translate:function(a,b){this.m[4]+=this.m[0]*a+this.m[2]*b,this.m[5]+=this.m[1]*a+this.m[3]*b},scale:function(a,b){this.m[0]*=a,this.m[1]*=a,this.m[2]*=b,this.m[3]*=b},rotate:function(a){var b=Math.cos(a),c=Math.sin(a),d=this.m[0]*b+this.m[2]*c,e=this.m[1]*b+this.m[3]*c,f=this.m[0]*-c+this.m[2]*b,g=this.m[1]*-c+this.m[3]*b;this.m[0]=d,this.m[1]=e,this.m[2]=f,this.m[3]=g},getTranslation:function(){return{x:this.m[4],y:this.m[5]}},multiply:function(a){var b=this.m[0]*a.m[0]+this.m[2]*a.m[1],c=this.m[1]*a.m[0]+this.m[3]*a.m[1],d=this.m[0]*a.m[2]+this.m[2]*a.m[3],e=this.m[1]*a.m[2]+this.m[3]*a.m[3],f=this.m[0]*a.m[4]+this.m[2]*a.m[5]+this.m[4],g=this.m[1]*a.m[4]+this.m[3]*a.m[5]+this.m[5];this.m[0]=b,this.m[1]=c,this.m[2]=d,this.m[3]=e,this.m[4]=f,this.m[5]=g},invert:function(){var a=1/(this.m[0]*this.m[3]-this.m[1]*this.m[2]),b=this.m[3]*a,c=-this.m[1]*a,d=-this.m[2]*a,e=this.m[0]*a,f=a*(this.m[2]*this.m[5]-this.m[3]*this.m[4]),g=a*(this.m[1]*this.m[4]-this.m[0]*this.m[5]);this.m[0]=b,this.m[1]=c,this.m[2]=d,this.m[3]=e,this.m[4]=f,this.m[5]=g},getMatrix:function(){return this.m}},Kinetic.Transition=function(a,b){function d(a,b,e,f){for(var g in a)g!=="duration"&&g!=="easing"&&g!=="callback"&&(Kinetic.Type._isObject(a[g])?(e[g]={},d(a[g],b[g],e[g],f)):c._add(c._getTween(b,g,a[g],e,f)))}this.node=a,this.config=b,this.tweens=[];var c=this,e={};d(b,a.attrs,e,e);var f=0;for(var g=0;g=c.tweens.length&&c.onFinished()}}},Kinetic.Transition.prototype={start:function(){for(var a=0;athis.getDuration()?this.looping?(this.rewind(a-this._duration),this.update(),this.broadcastMessage("onLooped",{target:this,type:"onLooped"})):(this._time=this._duration,this.update(),this.stop(),this.broadcastMessage("onFinished",{target:this,type:"onFinished"})):a<0?(this.rewind(),this.update()):(this._time=a,this.update())},getTime:function(){return this._time},setDuration:function(a){this._duration=a===null||a<=0?1e5:a},getDuration:function(){return this._duration},setPosition:function(a){this.prevPos=this._pos,this.propFunc(a),this._pos=a,this.broadcastMessage("onChanged",{target:this,type:"onChanged"})},getPosition:function(a){return a===undefined&&(a=this._time),this.func(a,this.begin,this._change,this._duration)},setFinish:function(a){this._change=a-this.begin},getFinish:function(){return this.begin+this._change},start:function(){this.rewind(),this.startEnterFrame(),this.broadcastMessage("onStarted",{target:this,type:"onStarted"})},rewind:function(a){this.stop(),this._time=a===undefined?0:a,this.fixTime(),this.update()},fforward:function(){this._time=this._duration,this.fixTime(),this.update()},update:function(){this.setPosition(this.getPosition(this._time))},startEnterFrame:function(){this.stopEnterFrame(),this.isPlaying=!0,this.onEnterFrame()},onEnterFrame:function(){this.isPlaying&&this.nextFrame()},nextFrame:function(){this.setTime((this.getTimer()-this._startTime)/1e3)},stop:function(){this.stopEnterFrame(),this.broadcastMessage("onStopped",{target:this,type:"onStopped"})},stopEnterFrame:function(){this.isPlaying=!1},continueTo:function(a,b){this.begin=this._pos,this.setFinish(a),this._duration!==undefined&&this.setDuration(b),this.start()},resume:function(){this.fixTime(),this.startEnterFrame(),this.broadcastMessage("onResumed",{target:this,type:"onResumed"})},yoyo:function(){this.continueTo(this.begin,this._time)},addListener:function(a){return this.removeListener(a),this._listeners.push(a)},removeListener:function(a){var b=this._listeners,c=b.length;while(c--)if(b[c]==a)return b.splice(c,1),!0;return!1},broadcastMessage:function(){var a=[];for(var b=0;b