From d4734ba33a3760669982e3e5cd87aa39864fea71 Mon Sep 17 00:00:00 2001 From: ericdrowell Date: Tue, 25 Sep 2012 15:57:57 -0700 Subject: [PATCH] created _getFillType utility to help manage fill type objects. You can now dynamically switch between different fill types, including colors, linear gradients, radial gradients, and patterns --- dist/kinetic-core.js | 242 +++++++++++++++++++++------------------ dist/kinetic-core.min.js | 6 +- src/Layer.js | 47 ++++++++ src/Node.js | 56 +-------- src/Shape.js | 139 ++++++++++++---------- tests/js/unitTests.js | 33 +++++- 6 files changed, 300 insertions(+), 223 deletions(-) diff --git a/dist/kinetic-core.js b/dist/kinetic-core.js index 18d27a60..55d6ad8c 100644 --- a/dist/kinetic-core.js +++ b/dist/kinetic-core.js @@ -1659,14 +1659,7 @@ Kinetic.Node.prototype = { this.parent.children.splice(index, 1); this.parent.children.push(this); this.parent._setChildrenIndices(); - - if(this.nodeType === 'Layer') { - var stage = this.getStage(); - if(stage) { - stage.content.removeChild(this.canvas.element); - stage.content.appendChild(this.canvas.element); - } - } + return true; }, /** * move node up @@ -1679,20 +1672,7 @@ Kinetic.Node.prototype = { this.parent.children.splice(index, 1); this.parent.children.splice(index + 1, 0, this); this.parent._setChildrenIndices(); - - if(this.nodeType === 'Layer') { - var stage = this.getStage(); - if(stage) { - stage.content.removeChild(this.canvas.element); - - if(this.index < stage.getChildren().length - 1) { - stage.content.insertBefore(this.canvas.element, stage.getChildren()[this.index + 1].canvas.element); - } - else { - stage.content.appendChild(this.canvas.element); - } - } - } + return true; } }, /** @@ -1706,15 +1686,7 @@ Kinetic.Node.prototype = { this.parent.children.splice(index, 1); this.parent.children.splice(index - 1, 0, this); this.parent._setChildrenIndices(); - - if(this.nodeType === 'Layer') { - var stage = this.getStage(); - if(stage) { - var children = stage.getChildren(); - stage.content.removeChild(this.canvas.element); - stage.content.insertBefore(this.canvas.element, children[this.index + 1].canvas.element); - } - } + return true; } }, /** @@ -1728,15 +1700,7 @@ Kinetic.Node.prototype = { this.parent.children.splice(index, 1); this.parent.children.unshift(this); this.parent._setChildrenIndices(); - - if(this.nodeType === 'Layer') { - var stage = this.getStage(); - if(stage) { - var children = stage.getChildren(); - stage.content.removeChild(this.canvas.element); - stage.content.insertBefore(this.canvas.element, children[1].canvas.element); - } - } + return true; } }, /** @@ -1807,12 +1771,7 @@ Kinetic.Node.prototype = { * @methodOf Kinetic.Node.prototype */ getLayer: function() { - if(this.nodeType === 'Layer') { - return this; - } - else { - return this.getParent().getLayer(); - } + return this.getParent().getLayer(); }, /** * get stage that contains the node @@ -1820,12 +1779,9 @@ Kinetic.Node.prototype = { * @methodOf Kinetic.Node.prototype */ getStage: function() { - if(this.nodeType !== 'Stage' && this.getParent()) { + if(this.getParent()) { return this.getParent().getStage(); } - else if(this.nodeType === 'Stage') { - return this; - } else { return undefined; } @@ -3672,6 +3628,7 @@ Kinetic.Layer.prototype = { clear: function() { this.getCanvas().clear(); }, + // extenders setVisible: function(visible) { Kinetic.Node.prototype.setVisible.call(this, visible); if(visible) { @@ -3681,6 +3638,52 @@ Kinetic.Layer.prototype = { this.canvas.element.style.display = 'none'; } }, + moveToTop: function() { + Kinetic.Node.prototype.moveToTop.call(this); + var stage = this.getStage(); + if(stage) { + stage.content.removeChild(this.canvas.element); + stage.content.appendChild(this.canvas.element); + } + }, + moveUp: function() { + if(Kinetic.Node.prototype.moveUp.call(this)) { + var stage = this.getStage(); + if(stage) { + stage.content.removeChild(this.canvas.element); + + if(this.index < stage.getChildren().length - 1) { + stage.content.insertBefore(this.canvas.element, stage.getChildren()[this.index + 1].canvas.element); + } + else { + stage.content.appendChild(this.canvas.element); + } + } + } + }, + moveDown: function() { + if(Kinetic.Node.prototype.moveDown.call(this)) { + var stage = this.getStage(); + if(stage) { + var children = stage.getChildren(); + stage.content.removeChild(this.canvas.element); + stage.content.insertBefore(this.canvas.element, children[this.index + 1].canvas.element); + } + } + }, + moveToBottom: function() { + if(Kinetic.Node.prototype.moveToBottom.call(this)) { + var stage = this.getStage(); + if(stage) { + var children = stage.getChildren(); + stage.content.removeChild(this.canvas.element); + stage.content.insertBefore(this.canvas.element, children[1].canvas.element); + } + } + }, + getLayer: function() { + return this; + }, /** * Creates a composite data URL. If MIME type is not * specified, then "image/png" will result. For "image/jpeg", specify a quality @@ -3926,6 +3929,26 @@ Kinetic.Shape.prototype = { } } }, + _getFillType: function(fill) { + if(!fill) { + return undefined; + } + else if(Kinetic.Type._isString(fill)) { + return 'COLOR'; + } + else if(fill.image) { + return 'PATTERN'; + } + else if(fill.start && fill.end && !fill.start.radius && !fill.end.radius) { + return 'LINEAR_GRADIENT'; + } + else if(fill.start && fill.end && Kinetic.Type._isNumber(fill.start.radius) && Kinetic.Type._isNumber(fill.end.radius)) { + return 'RADIAL_GRADIENT'; + } + else { + return 'UNKNOWN'; + } + }, /** * helper method to fill the shape with a color, linear gradient, * radial gradient, or pattern, and also apply shadows if needed @@ -3934,7 +3957,8 @@ Kinetic.Shape.prototype = { * */ fill: function(context) { var appliedShadow = false; - var fill = this.attrs.fill; + var fill = this.getFill(); + var fillType = this._getFillType(fill); if(fill) { context.save(); if(this.attrs.shadow && !this.appliedShadow) { @@ -3943,53 +3967,52 @@ Kinetic.Shape.prototype = { var s = fill.start; var e = fill.end; - var f = null; // color fill - if(Kinetic.Type._isString(fill)) { - context.fillStyle = fill; - context.fill(context); - } - // pattern - else if(fill.image) { - var repeat = !fill.repeat ? 'repeat' : fill.repeat; - if(fill.scale) { - context.scale(fill.scale.x, fill.scale.y); - } - if(fill.offset) { - context.translate(fill.offset.x, fill.offset.y); - } + switch(fillType) { + case 'COLOR': + context.fillStyle = fill; + context.fill(context); + break; + case 'PATTERN': + var repeat = !fill.repeat ? 'repeat' : fill.repeat; + if(fill.scale) { + context.scale(fill.scale.x, fill.scale.y); + } + if(fill.offset) { + context.translate(fill.offset.x, fill.offset.y); + } - context.fillStyle = context.createPattern(fill.image, repeat); - context.fill(context); - } - // linear gradient - else if(!s.radius && !e.radius) { - var grd = context.createLinearGradient(s.x, s.y, e.x, e.y); - var colorStops = fill.colorStops; + context.fillStyle = context.createPattern(fill.image, repeat); + context.fill(context); + break; + case 'LINEAR_GRADIENT': + var grd = context.createLinearGradient(s.x, s.y, e.x, e.y); + var colorStops = fill.colorStops; - // build color stops - for(var n = 0; n < colorStops.length; n += 2) { - grd.addColorStop(colorStops[n], colorStops[n + 1]); - } - context.fillStyle = grd; - context.fill(context); - } - // radial gradient - else if((s.radius || s.radius === 0) && (e.radius || e.radius === 0)) { - var grd = context.createRadialGradient(s.x, s.y, s.radius, e.x, e.y, e.radius); - var colorStops = fill.colorStops; + // build color stops + for(var n = 0; n < colorStops.length; n += 2) { + grd.addColorStop(colorStops[n], colorStops[n + 1]); + } + context.fillStyle = grd; + context.fill(context); - // build color stops - for(var n = 0; n < colorStops.length; n += 2) { - grd.addColorStop(colorStops[n], colorStops[n + 1]); - } - context.fillStyle = grd; - context.fill(context); - } - else { - context.fillStyle = 'black'; - context.fill(context); + break; + case 'RADIAL_GRADIENT': + var grd = context.createRadialGradient(s.x, s.y, s.radius, e.x, e.y, e.radius); + var colorStops = fill.colorStops; + + // build color stops + for(var n = 0; n < colorStops.length; n += 2) { + grd.addColorStop(colorStops[n], colorStops[n + 1]); + } + context.fillStyle = grd; + context.fill(context); + break; + default: + context.fillStyle = 'black'; + context.fill(context); + break; } context.restore(); } @@ -4112,26 +4135,27 @@ Kinetic.Shape.prototype = { * @methodOf Kinetic.Shape.prototype * @param {String|Object} fill */ - setFill: function(config) { - var fill; + setFill: function(fill) { + var oldFill = this.getFill(); + var fillType = this._getFillType(fill); + var oldFillType = this._getFillType(oldFill); + var newOrOldFillIsColor = fillType === 'COLOR' || oldFillType === 'COLOR'; + var changedFillType = fillType === oldFillType || fillType === 'UNKNOWN'; - if(Kinetic.Type._isString(config)) { - fill = config; + // if fill.offset is defined, normalize the xy value + if(fill.offset !== undefined) { + fill.offset = Kinetic.Type._getXY(fill.offset); } - // if not a string, config should be an object - else { - if(config.offset !== undefined) { - config.offset = Kinetic.Type._getXY(config.offset); - } - var oldFill = this.getFill(); - if(Kinetic.Type._isObject(oldFill)) { - fill = Kinetic.Type._merge(config, oldFill); - } - else { - fill = config; - } + /* + * merge fill objects if neither the new or old fill + * is type is COLOR, and if if the fill type has not changed. Otherwise, + * overwrite the fill entirely + */ + if(!newOrOldFillIsColor && changedFillType) { + fill = Kinetic.Type._merge(fill, oldFill); } + this.setAttr('fill', fill); }, /** diff --git a/dist/kinetic-core.min.js b/dist/kinetic-core.min.js index a3454b57..d65a13a5 100644 --- a/dist/kinetic-core.min.js +++ b/dist/kinetic-core.min.js @@ -25,6 +25,6 @@ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN * THE SOFTWARE. */ -var Kinetic={};Kinetic.Filters={},Kinetic.Plugins={},Kinetic.Global={BUBBLE_WHITELIST:["mousedown","mousemove","mouseup","mouseover","mouseout","click","dblclick","touchstart","touchmove","touchend","tap","dbltap","dragstart","dragmove","dragend"],BUFFER_WHITELIST:["fill","stroke","textFill","textStroke"],BUFFER_BLACKLIST:["shadow"],stages:[],idCounter:0,tempNodes:{},shapes:{},maxDragTimeInterval:20,drag:{moving:!1,offset:{x:0,y:0},lastDrawTime:0},warn:function(e){console&&console.warn&&console.warn("Kinetic warning: "+e)},extend:function(e,t){for(var n in t.prototype)n in e.prototype||(e.prototype[n]=t.prototype[n])},_pullNodes:function(e){var t=this.tempNodes;for(var n in t){var r=t[n];r.getStage()!==undefined&&r.getStage()._id===e._id&&(e._addId(r),e._addName(r),this._removeTempNode(r))}},_addTempNode:function(e){this.tempNodes[e._id]=e},_removeTempNode:function(e){delete this.tempNodes[e._id]}},Kinetic.Transition=function(e,t){function r(e,t,i,s){for(var o in e)o!=="duration"&&o!=="easing"&&o!=="callback"&&(Kinetic.Type._isObject(e[o])?(i[o]={},r(e[o],t[o],i[o],s)):n._add(n._getTween(t,o,e[o],i,s)))}this.node=e,this.config=t,this.tweens=[];var n=this,i={};r(t,e.attrs,i,i);var s=0;for(var o=0;o=n.tweens.length&&n.onFinished()}}},Kinetic.Transition.prototype={start:function(){for(var e=0;e0},_getXY:function(e){if(this._isNumber(e))return{x:e,y:e};if(this._isArray(e)){if(e.length===1){var t=e[0];if(this._isNumber(t))return{x:t,y:t};if(this._isArray(t))return{x:t[0],y:t[1]};if(this._isObject(t))return t}else if(e.length>=2)return{x:e[0],y:e[1]}}else if(this._isObject(e))return e;return{x:0,y:0}},_getSize:function(e){if(this._isNumber(e))return{width:e,height:e};if(this._isArray(e))if(e.length===1){var t=e[0];if(this._isNumber(t))return{width:t,height:t};if(this._isArray(t)){if(t.length>=4)return{width:t[2],height:t[3]};if(t.length>=2)return{width:t[0],height:t[1]}}else if(this._isObject(t))return t}else{if(e.length>=4)return{width:e[2],height:e[3]};if(e.length>=2)return{width:e[0],height:e[1]}}else if(this._isObject(e))return e;return{width:0,height:0}},_getPoints:function(e){if(e===undefined)return[];if(this._isObject(e[0]))return e;var t=[];for(var n=0;n>16&255,g:t>>8&255,b:t&255}},_getRandomColorKey:function(){var e=Math.round(Math.random()*255),t=Math.round(Math.random()*255),n=Math.round(Math.random()*255);return this._rgbToHex(e,t,n)},_merge:function(e,t){var n=this._clone(t);for(var r in e)this._isObject(e[r])?n[r]=this._merge(e[r],n[r]):n[r]=e[r];return n},_clone:function(e){var t={};for(var n in e)this._isObject(e[n])?t[n]=this._clone(e[n]):t[n]=e[n];return t}},Kinetic.Canvas=function(e,t){this.element=document.createElement("canvas"),this.context=this.element.getContext("2d"),this.element.width=e,this.element.height=t},Kinetic.Canvas.prototype={clear:function(){var e=this.getContext(),t=this.getElement();e.clearRect(0,0,t.width,t.height)},getElement:function(){return this.element},getContext:function(){return this.context},setWidth:function(e){this.element.width=e},setHeight:function(e){this.element.height=e},getWidth:function(){return this.element.width},getHeight:function(){return this.element.height},setSize:function(e,t){this.setWidth(e),this.setHeight(t)},toDataURL:function(e,t){try{return this.element.toDataURL(e,t)}catch(n){return this.element.toDataURL()}}},Kinetic.Tween=function(e,t,n,r,i,s){this._listeners=[],this.addListener(this),this.obj=e,this.propFunc=t,this.begin=r,this._pos=r,this.setDuration(s),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=n,this.setFinish(i)},Kinetic.Tween.prototype={setTime:function(e){this.prevTime=this._time,e>this.getDuration()?this.looping?(this.rewind(e-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"})):e<0?(this.rewind(),this.update()):(this._time=e,this.update())},getTime:function(){return this._time},setDuration:function(e){this._duration=e===null||e<=0?1e5:e},getDuration:function(){return this._duration},setPosition:function(e){this.prevPos=this._pos,this.propFunc(e),this._pos=e,this.broadcastMessage("onChanged",{target:this,type:"onChanged"})},getPosition:function(e){return e===undefined&&(e=this._time),this.func(e,this.begin,this._change,this._duration)},setFinish:function(e){this._change=e-this.begin},getFinish:function(){return this.begin+this._change},start:function(){this.rewind(),this.startEnterFrame(),this.broadcastMessage("onStarted",{target:this,type:"onStarted"})},rewind:function(e){this.stop(),this._time=e===undefined?0:e,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(e,t){this.begin=this._pos,this.setFinish(e),this._duration!==undefined&&this.setDuration(t),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(e){return this.removeListener(e),this._listeners.push(e)},removeListener:function(e){var t=this._listeners,n=t.length;while(n--)if(t[n]==e)return t.splice(n,1),!0;return!1},broadcastMessage:function(){var e=[];for(var t=0;t0){this._runFrames();var e=this;requestAnimFrame(function(){e._animationLoop()})}else this.animRunning=!1},Kinetic.Animation._handleAnimation=function(){var e=this;this.animRunning||(this.animRunning=!0,e._animationLoop())},requestAnimFrame=function(e){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(e){window.setTimeout(e,1e3/60)}}(),Kinetic.Node=function(e){this._nodeInit(e)},Kinetic.Node.prototype={_nodeInit:function(e){this.defaultNodeAttrs={visible:!0,listening:!0,name:undefined,opacity: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.transAnim=new Kinetic.Animation,this.setAttrs(e),this.on("draggableChange.kinetic",function(){this._onDraggableChange()});var t=this;this.on("idChange.kinetic",function(e){var n=t.getStage();n&&(n._removeId(e.oldVal),n._addId(t))}),this.on("nameChange.kinetic",function(e){var n=t.getStage();n&&(n._removeName(e.oldVal,t._id),n._addName(t))}),this._onDraggableChange()},on:function(e,t){var n=e.split(" ");for(var r=0;r1?o[1]:"";this.eventListeners[u]||(this.eventListeners[u]=[]),this.eventListeners[u].push({name:a,handler:t})}},off:function(e){var t=e.split(" ");for(var n=0;n1){var u=s[1];for(var a=0;a0&&s[0].getLevel()<=e&&i(s)}var e=this.getLevel(),t=this.getStage(),n=this,r=0;return n.nodeType!=="Stage"&&i(n.getStage().getChildren()),r},getLevel:function(){var e=0,t=this.parent;while(t)e++,t=t.parent;return e},setPosition:function(){var e=Kinetic.Type._getXY([].slice.call(arguments));this.setAttr("x",e.x),this.setAttr("y",e.y)},getPosition:function(){return{x:this.attrs.x,y:this.attrs.y}},getAbsolutePosition:function(){var e=this.getAbsoluteTransform(),t=this.getOffset();return e.translate(t.x,t.y),e.getTranslation()},setAbsolutePosition:function(){var e=Kinetic.Type._getXY([].slice.call(arguments)),t=this._clearTransform();this.attrs.x=t.x,this.attrs.y=t.y,delete t.x,delete t.y;var n=this.getAbsoluteTransform();n.invert(),n.translate(e.x,e.y),e={x:this.attrs.x+n.getTranslation().x,y:this.attrs.y+n.getTranslation().y},this.setPosition(e.x,e.y),this._setTransform(t)},move:function(){var e=Kinetic.Type._getXY([].slice.call(arguments)),t=this.getX(),n=this.getY();e.x!==undefined&&(t+=e.x),e.y!==undefined&&(n+=e.y),this.setPosition(t,n)},getRotationDeg:function(){return this.getRotation()*180/Math.PI},setRotationDeg:function(e){this.setRotation(e*Math.PI/180)},rotate:function(e){this.setRotation(this.getRotation()+e)},rotateDeg:function(e){this.setRotation(this.getRotation()+e*Math.PI/180)},moveToTop:function(){var e=this.index;this.parent.children.splice(e,1),this.parent.children.push(this),this.parent._setChildrenIndices();if(this.nodeType==="Layer"){var t=this.getStage();t&&(t.content.removeChild(this.canvas.element),t.content.appendChild(this.canvas.element))}},moveUp:function(){var e=this.index;if(e0){this.parent.children.splice(e,1),this.parent.children.splice(e-1,0,this),this.parent._setChildrenIndices();if(this.nodeType==="Layer"){var t=this.getStage();if(t){var n=t.getChildren();t.content.removeChild(this.canvas.element),t.content.insertBefore(this.canvas.element,n[this.index+1].canvas.element)}}}},moveToBottom:function(){var e=this.index;if(e>0){this.parent.children.splice(e,1),this.parent.children.unshift(this),this.parent._setChildrenIndices();if(this.nodeType==="Layer"){var t=this.getStage();if(t){var n=t.getChildren();t.content.removeChild(this.canvas.element),t.content.insertBefore(this.canvas.element,n[1].canvas.element)}}}},setZIndex:function(e){var t=this.index;this.parent.children.splice(t,1),this.parent.children.splice(e,0,this),this.parent._setChildrenIndices()},getAbsoluteOpacity:function(){var e=1,t=this;while(t.nodeType!=="Stage")e*=t.attrs.opacity,t=t.parent;return e},isDragging:function(){var e=Kinetic.Global;return e.drag.node&&e.drag.node._id===this._id&&e.drag.moving},moveTo:function(e){var t=this.parent;t.children.splice(this.index,1),t._setChildrenIndices(),e.children.push(this),this.index=e.children.length-1,this.parent=e,e._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(e){this._handleEvent(e,{})},transitionTo:function(e){var t=this.nodeType==="Stage"?this:this.getLayer(),n=this,r=new Kinetic.Transition(this,e);return this.transAnim.func=function(){r._onEnterFrame()},this.transAnim.node=t,r.onFinished=function(){n.transAnim.stop(),n.transAnim.node.draw(),e.callback&&e.callback()},r.start(),this.transAnim.start(),r},getAbsoluteTransform:function(){var e=new Kinetic.Transform,t=[],n=this.parent;t.unshift(this);while(n)t.unshift(n),n=n.parent;for(var r=0;r=0&&!t.cancelBubble&&this.parent&&(n&&n.parent?this._handleEvent.call(this.parent,e,t,n.parent):this._handleEvent.call(this.parent,e,t))}},_draw:function(e){if(this.isVisible()&&(!e||e.name!=="buffer"||this.getListening())){this.__draw&&this.__draw(e);var t=this.children;if(t)for(var n=0;n0)this.remove(this.children[0])},add:function(e){e._id=Kinetic.Global.idCounter++,e.index=this.children.length,e.parent=this,this.children.push(e);var t=e.getStage();if(!t)Kinetic.Global._addTempNode(e);else{t._addId(e),t._addName(e);var n=Kinetic.Global;n._pullNodes(t)}return this._add!==undefined&&this._add(e),this},remove:function(e){if(e&&e.index!==undefined&&this.children[e.index]._id==e._id){var t=this.getStage();t&&(t._removeId(e.getId()),t._removeName(e.getName(),e._id)),Kinetic.Global._removeTempNode(e),this.children.splice(e.index,1),this._setChildrenIndices();while(e.children&&e.children.length>0)e.remove(e.children[0]);e._remove!==undefined&&e._remove()}return this},get:function(e){var t=this.getStage();if(e==="Shape"||e==="Group"||e==="Layer"){var n=new Kinetic.Collection;function r(t){var i=t.getChildren();for(var s=0;s=0;r--){var i=n[r],s=i.bufferCanvas.context.getImageData(Math.round(e.x),Math.round(e.y),1,1).data;if(s[3]===255){var o=Kinetic.Type._rgbToHex(s[0],s[1],s[2]);return t=Kinetic.Global.shapes[o],{shape:t,pixel:s}}if(s[0]>0||s[1]>0||s[2]>0||s[3]>0)return{pixel:s}}return null},_resizeDOM:function(){if(this.content){var e=this.attrs.width,t=this.attrs.height;this.content.style.width=e+"px",this.content.style.height=t+"px",this.bufferCanvas.setSize(e,t);var n=this.children;for(var r=0;ro.right&&(a.x=o.right),o.top!==undefined&&a.yo.bottom&&(a.y=o.bottom),r.setAbsolutePosition(a),s==="horizontal"?r.attrs.y=u.y:s==="vertical"&&(r.attrs.x=u.x),n.drag.moving||(n.drag.moving=!0,n.drag.node._handleEvent("dragstart",e)),n.drag.node._handleEvent("dragmove",e)}},_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.bufferCanvas=new Kinetic.Canvas({width:this.attrs.width,height:this.attrs.height}),this._resizeDOM()},_addId:function(e){e.attrs.id!==undefined&&(this.ids[e.attrs.id]=e)},_removeId:function(e){e!==undefined&&delete this.ids[e]},_addName:function(e){var t=e.attrs.name;t!==undefined&&(this.names[t]===undefined&&(this.names[t]=[]),this.names[t].push(e))},_removeName:function(e,t){if(e!==undefined){var n=this.names[e];if(n!==undefined){for(var r=0;r0},_remove:function(){delete Kinetic.Global.shapes[this.colorKey]},__draw:function(e){if(this.attrs.drawFunc){var t=this.getStage(),n=e.getContext(),r=[],i=this.parent;r.unshift(this);while(i)r.unshift(i),i=i.parent;n.save();for(var s=0;s0&&r&&(this.attrs.height==="auto"||i*(n+1)this.attrs.width-this.attrs.padding*2){if(s==0)break;var a=u.lastIndexOf(" "),f=u.lastIndexOf("-"),l=Math.max(a,f);if(l>=0){o=e.splice(0,1+l).join("");break}o=e.splice(0,s).join("");break}s++,s===e.length&&(o=e.splice(0,s).join(""))}this.textWidth=Math.max(this.textWidth,this._getTextSize(o).width),o!==undefined&&(t.push(o),r=!0),n++}this.textArr=t}},Kinetic.Global.extend(Kinetic.Text,Kinetic.Shape),Kinetic.Node.addGettersSetters(Kinetic.Text,["fontFamily","fontSize","fontStyle","textFill","textStroke","textStrokeWidth","padding","align","lineHeight","width","height","cornerRadius","fill","stroke","strokeWidth","shadow"]),Kinetic.Node.addGetters(Kinetic.Text,["text"]),Kinetic.Line=function(e){this._initLine(e)},Kinetic.Line.prototype={_initLine:function(e){this.setDefaultAttrs({points:[],lineCap:"butt",dashArray:[],detectionType:"pixel"}),this.shapeType="Line",e.drawFunc=this.drawFunc,Kinetic.Shape.call(this,e)},drawFunc:function(e){var t={};e.beginPath(),e.moveTo(this.attrs.points[0].x,this.attrs.points[0].y);for(var n=1;n0){var s=this.attrs.points[n-1].x,o=this.attrs.points[n-1].y;this._dashedLine(e,s,o,r,i,this.attrs.dashArray)}else e.lineTo(r,i)}!this.attrs.lineCap||(e.lineCap=this.attrs.lineCap),this.stroke(e)},setPoints:function(e){this.setAttr("points",Kinetic.Type._getPoints(e))},_dashedLine:function(e,t,n,r,i,s){var o=s.length,u=r-t,a=i-n,f=u>a,l=f?a/u:u/a;l>9999?l=9999:l<-9999&&(l=-9999);var c=Math.sqrt(u*u+a*a),h=0,p=!0;while(c>=.1&&h<1e4){var d=s[h++%o];d===0&&(d=.001),d>c&&(d=c);var v=Math.sqrt(d*d/(1+l*l));f?(t+=u<0&&a<0?v*-1:v,n+=u<0&&a<0?l*v*-1:l*v):(t+=u<0&&a<0?l*v*-1:l*v,n+=u<0&&a<0?v*-1:v),e[p?"lineTo":"moveTo"](t,n),c-=d,p=!p}e.moveTo(r,i)}},Kinetic.Global.extend(Kinetic.Line,Kinetic.Shape),Kinetic.Node.addGettersSetters(Kinetic.Line,["dashArray","lineCap"]),Kinetic.Node.addGetters(Kinetic.Line,["points"]),Kinetic.Sprite=function(e){this._initSprite(e)},Kinetic.Sprite.prototype={_initSprite:function(e){this.setDefaultAttrs({index:0,frameRate:17}),e.drawFunc=this.drawFunc,Kinetic.Shape.call(this,e),this.anim=new Kinetic.Animation;var t=this;this.on("animationChange.kinetic",function(){t.setIndex(0)})},drawFunc:function(e){var t=this.attrs.animation,n=this.attrs.index,r=this.attrs.animations[t][n];e.beginPath(),e.rect(0,0,r.width,r.height),e.closePath(),this.fill(e),this.stroke(e),this.attrs.image&&(e.beginPath(),e.rect(0,0,r.width,r.height),e.closePath(),this.drawImage(e,this.attrs.image,r.x,r.y,r.width,r.height,0,0,r.width,r.height))},start:function(){var e=this,t=this.getLayer();this.anim.node=t,this.interval=setInterval(function(){var t=e.attrs.index;e._updateIndex(),e.afterFrameFunc&&t===e.afterFrameIndex&&(e.afterFrameFunc(),delete e.afterFrameFunc,delete e.afterFrameIndex)},1e3/this.attrs.frameRate),this.anim.start()},stop:function(){this.anim.stop(),clearInterval(this.interval)},afterFrame:function(e,t){this.afterFrameIndex=e,this.afterFrameFunc=t},_updateIndex:function(){var e=this.attrs.index,t=this.attrs.animation;ea?u:a,d=u>a?1:u/a,v=u>a?a/u:1;e.translate(s,o),e.rotate(c),e.scale(d,v),e.arc(0,0,p,f,f+l,1-h),e.scale(1/d,1/v),e.rotate(-c),e.translate(-s,-o);break;case"z":e.closePath()}}this.fill(e),this.stroke(e)}},Kinetic.Global.extend(Kinetic.Path,Kinetic.Shape),Kinetic.Path.getLineLength=function(e,t,n,r){return Math.sqrt((n-e)*(n-e)+(r-t)*(r-t))},Kinetic.Path.getPointOnLine=function(e,t,n,r,i,s,o){s===undefined&&(s=t),o===undefined&&(o=n);var u=(i-n)/(r-t+1e-8),a=Math.sqrt(e*e/(1+u*u)),f=u*a,l;if((o-n)/(s-t+1e-8)===u)l={x:s+a,y:o+f};else{var c,h,p=this.getLineLength(t,n,r,i);if(p<1e-8)return undefined;var d=(s-t)*(r-t)+(o-n)*(i-n);d/=p*p,c=t+d*(r-t),h=n+d*(i-n);var v=this.getLineLength(s,o,c,h),m=Math.sqrt(e*e-v*v);a=Math.sqrt(m*m/(1+u*u)),f=u*a,l={x:c+a,y:h+f}}return l},Kinetic.Path.getPointOnCubicBezier=function(e,t,n,r,i,s,o,u,a){function f(e){return e*e*e}function l(e){return 3*e*e*(1-e)}function c(e){return 3*e*(1-e)*(1-e)}function h(e){return(1-e)*(1-e)*(1-e)}var p=u*f(e)+s*l(e)+r*c(e)+t*h(e),d=a*f(e)+o*l(e)+i*c(e)+n*h(e);return{x:p,y:d}},Kinetic.Path.getPointOnQuadraticBezier=function(e,t,n,r,i,s,o){function u(e){return e*e}function a(e){return 2*e*(1-e)}function f(e){return(1-e)*(1-e)}var l=s*u(e)+r*a(e)+t*f(e),c=o*u(e)+i*a(e)+n*f(e);return{x:l,y:c}},Kinetic.Path.getPointOnEllipticalArc=function(e,t,n,r,i,s){var o=Math.cos(s),u=Math.sin(s),a={x:n*Math.cos(i),y:r*Math.sin(i)};return{x:e+(a.x*o-a.y*u),y:t+(a.x*u+a.y*o)}},Kinetic.Path.parsePathData=function(e){if(!e)return[];var t=e,n=["m","M","l","L","v","V","h","H","z","Z","c","C","q","Q","t","T","s","S","a","A"];t=t.replace(new RegExp(" ","g"),",");for(var r=0;r0&&l[0]===""&&l.shift();for(var c=0;c0){if(isNaN(l[0]))break;var h=null,p=[],d=o,v=u;switch(f){case"l":o+=l.shift(),u+=l.shift(),h="L",p.push(o,u);break;case"L":o=l.shift(),u=l.shift(),p.push(o,u);break;case"m":o+=l.shift(),u+=l.shift(),h="M",p.push(o,u),f="l";break;case"M":o=l.shift(),u=l.shift(),h="M",p.push(o,u),f="L";break;case"h":o+=l.shift(),h="L",p.push(o,u);break;case"H":o=l.shift(),h="L",p.push(o,u);break;case"v":u+=l.shift(),h="L",p.push(o,u);break;case"V":u=l.shift(),h="L",p.push(o,u);break;case"C":p.push(l.shift(),l.shift(),l.shift(),l.shift()),o=l.shift(),u=l.shift(),p.push(o,u);break;case"c":p.push(o+l.shift(),u+l.shift(),o+l.shift(),u+l.shift()),o+=l.shift(),u+=l.shift(),h="C",p.push(o,u);break;case"S":var m=o,g=u,y=s[s.length-1];y.command==="C"&&(m=o+(o-y.points[2]),g=u+(u-y.points[3])),p.push(m,g,l.shift(),l.shift()),o=l.shift(),u=l.shift(),h="C",p.push(o,u);break;case"s":var m=o,g=u,y=s[s.length-1];y.command==="C"&&(m=o+(o-y.points[2]),g=u+(u-y.points[3])),p.push(m,g,o+l.shift(),u+l.shift()),o+=l.shift(),u+=l.shift(),h="C",p.push(o,u);break;case"Q":p.push(l.shift(),l.shift()),o=l.shift(),u=l.shift(),p.push(o,u);break;case"q":p.push(o+l.shift(),u+l.shift()),o+=l.shift(),u+=l.shift(),h="Q",p.push(o,u);break;case"T":var m=o,g=u,y=s[s.length-1];y.command==="Q"&&(m=o+(o-y.points[0]),g=u+(u-y.points[1])),o=l.shift(),u=l.shift(),h="Q",p.push(m,g,o,u);break;case"t":var m=o,g=u,y=s[s.length-1];y.command==="Q"&&(m=o+(o-y.points[0]),g=u+(u-y.points[1])),o+=l.shift(),u+=l.shift(),h="Q",p.push(m,g,o,u);break;case"A":var b=l.shift(),w=l.shift(),E=l.shift(),S=l.shift(),x=l.shift(),T=o,N=u;o=l.shift(),u=l.shift(),h="A",p=this.convertEndpointToCenterParameterization(T,N,o,u,S,x,b,w,E);break;case"a":var b=l.shift(),w=l.shift(),E=l.shift(),S=l.shift(),x=l.shift(),T=o,N=u;o+=l.shift(),u+=l.shift(),h="A",p=this.convertEndpointToCenterParameterization(T,N,o,u,S,x,b,w,E)}s.push({command:h||f,points:p,start:{x:d,y:v},pathLength:this.calcLength(d,v,h||f,p)})}(f==="z"||f==="Z")&&s.push({command:"z",points:[],start:undefined,pathLength:0})}return s},Kinetic.Path.calcLength=function(e,n,r,i){var s,o,u,a=Kinetic.Path;switch(r){case"L":return a.getLineLength(e,n,i[0],i[1]);case"C":s=0,o=a.getPointOnCubicBezier(0,e,n,i[0],i[1],i[2],i[3],i[4],i[5]);for(t=.01;t<=1;t+=.01)u=a.getPointOnCubicBezier(t,e,n,i[0],i[1],i[2],i[3],i[4],i[5]),s+=a.getLineLength(o.x,o.y,u.x,u.y),o=u;return s;case"Q":s=0,o=a.getPointOnQuadraticBezier(0,e,n,i[0],i[1],i[2],i[3]);for(t=.01;t<=1;t+=.01)u=a.getPointOnQuadraticBezier(t,e,n,i[0],i[1],i[2],i[3]),s+=a.getLineLength(o.x,o.y,u.x,u.y),o=u;return s;case"A":s=0;var f=i[4],l=i[5],c=i[4]+l,h=Math.PI/180;Math.abs(f-c)c;t-=h)u=a.getPointOnEllipticalArc(i[0],i[1],i[2],i[3],t,0),s+=a.getLineLength(o.x,o.y,u.x,u.y),o=u;else for(t=f+h;t1&&(o*=Math.sqrt(h),u*=Math.sqrt(h));var p=Math.sqrt((o*o*u*u-o*o*c*c-u*u*l*l)/(o*o*c*c+u*u*l*l));i==s&&(p*=-1),isNaN(p)&&(p=0);var d=p*o*c/u,v=p*-u*l/o,m=(e+n)/2+Math.cos(f)*d-Math.sin(f)*v,g=(t+r)/2+Math.sin(f)*d+Math.cos(f)*v,y=function(e){return Math.sqrt(e[0]*e[0]+e[1]*e[1])},b=function(e,t){return(e[0]*t[0]+e[1]*t[1])/(y(e)*y(t))},w=function(e,t){return(e[0]*t[1]=1&&(T=0),s===0&&T>0&&(T-=2*Math.PI),s==1&&T<0&&(T+=2*Math.PI),[m,g,o,u,E,T,f,s]},Kinetic.Node.addGettersSetters(Kinetic.Path,["data"]),Kinetic.TextPath=function(e){this._initTextPath(e)},Kinetic.TextPath.prototype={_initTextPath:function(e){this.setDefaultAttrs({fontFamily:"Calibri",fontSize:12,fontStyle:"normal",detectionType:"path",text:""}),this.dummyCanvas=document.createElement("canvas"),this.shapeType="TextPath",this.dataArray=[];var t=this;e.drawFunc=this.drawFunc,Kinetic.Shape.call(this,e),this.dataArray=Kinetic.Path.parsePathData(this.attrs.data),this.on("dataChange",function(){t.dataArray=Kinetic.Path.parsePathData(this.attrs.data)});var n=["text","textStroke","textStrokeWidth"];for(var r=0;r0)return o=n,t[n];t[n].command=="M"&&(r={x:t[n].points[0],y:t[n].points[1]})}return{}},f=function(t,n){var o=e._getTextSize(t).width,f=0,l=0,c=!1;i=undefined;while(Math.abs(o-f)/o>.01&&l<25){l++;var h=f;while(s===undefined)s=a(),s&&h+s.pathLengtho?i=Kinetic.Path.getPointOnLine(o,r.x,r.y,s.points[0],s.points[1],r.x,r.y):s=undefined;break;case"A":var d=s.points[4],v=s.points[5],m=s.points[4]+v;u===0?u=d+1e-8:o>f?u+=Math.PI/180*v/Math.abs(v):u-=Math.PI/360*v/Math.abs(v),Math.abs(u)>Math.abs(m)&&(u=m,p=!0),i=Kinetic.Path.getPointOnEllipticalArc(s.points[0],s.points[1],s.points[2],s.points[3],u,s.points[6]);break;case"C":u===0?o>s.pathLength?u=1e-8:u=o/s.pathLength:o>f?u+=(o-f)/s.pathLength:u-=(f-o)/s.pathLength,u>1&&(u=1,p=!0),i=Kinetic.Path.getPointOnCubicBezier(u,s.start.x,s.start.y,s.points[0],s.points[1],s.points[2],s.points[3],s.points[4],s.points[5]);break;case"Q":u===0?u=o/s.pathLength:o>f?u+=(o-f)/s.pathLength:u-=(f-o)/s.pathLength,u>1&&(u=1,p=!0),i=Kinetic.Path.getPointOnQuadraticBezier(u,s.start -.x,s.start.y,s.points[0],s.points[1],s.points[2],s.points[3])}i!==undefined&&(f=Kinetic.Path.getLineLength(r.x,r.y,i.x,i.y)),p&&(p=!1,s=undefined)}};for(var l=0;l=n.tweens.length&&n.onFinished()}}},Kinetic.Transition.prototype={start:function(){for(var e=0;e0},_getXY:function(e){if(this._isNumber(e))return{x:e,y:e};if(this._isArray(e)){if(e.length===1){var t=e[0];if(this._isNumber(t))return{x:t,y:t};if(this._isArray(t))return{x:t[0],y:t[1]};if(this._isObject(t))return t}else if(e.length>=2)return{x:e[0],y:e[1]}}else if(this._isObject(e))return e;return{x:0,y:0}},_getSize:function(e){if(this._isNumber(e))return{width:e,height:e};if(this._isArray(e))if(e.length===1){var t=e[0];if(this._isNumber(t))return{width:t,height:t};if(this._isArray(t)){if(t.length>=4)return{width:t[2],height:t[3]};if(t.length>=2)return{width:t[0],height:t[1]}}else if(this._isObject(t))return t}else{if(e.length>=4)return{width:e[2],height:e[3]};if(e.length>=2)return{width:e[0],height:e[1]}}else if(this._isObject(e))return e;return{width:0,height:0}},_getPoints:function(e){if(e===undefined)return[];if(this._isObject(e[0]))return e;var t=[];for(var n=0;n>16&255,g:t>>8&255,b:t&255}},_getRandomColorKey:function(){var e=Math.round(Math.random()*255),t=Math.round(Math.random()*255),n=Math.round(Math.random()*255);return this._rgbToHex(e,t,n)},_merge:function(e,t){var n=this._clone(t);for(var r in e)this._isObject(e[r])?n[r]=this._merge(e[r],n[r]):n[r]=e[r];return n},_clone:function(e){var t={};for(var n in e)this._isObject(e[n])?t[n]=this._clone(e[n]):t[n]=e[n];return t}},Kinetic.Canvas=function(e,t){this.element=document.createElement("canvas"),this.context=this.element.getContext("2d"),this.element.width=e,this.element.height=t},Kinetic.Canvas.prototype={clear:function(){var e=this.getContext(),t=this.getElement();e.clearRect(0,0,t.width,t.height)},getElement:function(){return this.element},getContext:function(){return this.context},setWidth:function(e){this.element.width=e},setHeight:function(e){this.element.height=e},getWidth:function(){return this.element.width},getHeight:function(){return this.element.height},setSize:function(e,t){this.setWidth(e),this.setHeight(t)},toDataURL:function(e,t){try{return this.element.toDataURL(e,t)}catch(n){return this.element.toDataURL()}}},Kinetic.Tween=function(e,t,n,r,i,s){this._listeners=[],this.addListener(this),this.obj=e,this.propFunc=t,this.begin=r,this._pos=r,this.setDuration(s),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=n,this.setFinish(i)},Kinetic.Tween.prototype={setTime:function(e){this.prevTime=this._time,e>this.getDuration()?this.looping?(this.rewind(e-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"})):e<0?(this.rewind(),this.update()):(this._time=e,this.update())},getTime:function(){return this._time},setDuration:function(e){this._duration=e===null||e<=0?1e5:e},getDuration:function(){return this._duration},setPosition:function(e){this.prevPos=this._pos,this.propFunc(e),this._pos=e,this.broadcastMessage("onChanged",{target:this,type:"onChanged"})},getPosition:function(e){return e===undefined&&(e=this._time),this.func(e,this.begin,this._change,this._duration)},setFinish:function(e){this._change=e-this.begin},getFinish:function(){return this.begin+this._change},start:function(){this.rewind(),this.startEnterFrame(),this.broadcastMessage("onStarted",{target:this,type:"onStarted"})},rewind:function(e){this.stop(),this._time=e===undefined?0:e,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(e,t){this.begin=this._pos,this.setFinish(e),this._duration!==undefined&&this.setDuration(t),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(e){return this.removeListener(e),this._listeners.push(e)},removeListener:function(e){var t=this._listeners,n=t.length;while(n--)if(t[n]==e)return t.splice(n,1),!0;return!1},broadcastMessage:function(){var e=[];for(var t=0;t0){this._runFrames();var e=this;requestAnimFrame(function(){e._animationLoop()})}else this.animRunning=!1},Kinetic.Animation._handleAnimation=function(){var e=this;this.animRunning||(this.animRunning=!0,e._animationLoop())},requestAnimFrame=function(e){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(e){window.setTimeout(e,1e3/60)}}(),Kinetic.Node=function(e){this._nodeInit(e)},Kinetic.Node.prototype={_nodeInit:function(e){this.defaultNodeAttrs={visible:!0,listening:!0,name:undefined,opacity: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.transAnim=new Kinetic.Animation,this.setAttrs(e),this.on("draggableChange.kinetic",function(){this._onDraggableChange()});var t=this;this.on("idChange.kinetic",function(e){var n=t.getStage();n&&(n._removeId(e.oldVal),n._addId(t))}),this.on("nameChange.kinetic",function(e){var n=t.getStage();n&&(n._removeName(e.oldVal,t._id),n._addName(t))}),this._onDraggableChange()},on:function(e,t){var n=e.split(" ");for(var r=0;r1?o[1]:"";this.eventListeners[u]||(this.eventListeners[u]=[]),this.eventListeners[u].push({name:a,handler:t})}},off:function(e){var t=e.split(" ");for(var n=0;n1){var u=s[1];for(var a=0;a0&&s[0].getLevel()<=e&&i(s)}var e=this.getLevel(),t=this.getStage(),n=this,r=0;return n.nodeType!=="Stage"&&i(n.getStage().getChildren()),r},getLevel:function(){var e=0,t=this.parent;while(t)e++,t=t.parent;return e},setPosition:function(){var e=Kinetic.Type._getXY([].slice.call(arguments));this.setAttr("x",e.x),this.setAttr("y",e.y)},getPosition:function(){return{x:this.attrs.x,y:this.attrs.y}},getAbsolutePosition:function(){var e=this.getAbsoluteTransform(),t=this.getOffset();return e.translate(t.x,t.y),e.getTranslation()},setAbsolutePosition:function(){var e=Kinetic.Type._getXY([].slice.call(arguments)),t=this._clearTransform();this.attrs.x=t.x,this.attrs.y=t.y,delete t.x,delete t.y;var n=this.getAbsoluteTransform();n.invert(),n.translate(e.x,e.y),e={x:this.attrs.x+n.getTranslation().x,y:this.attrs.y+n.getTranslation().y},this.setPosition(e.x,e.y),this._setTransform(t)},move:function(){var e=Kinetic.Type._getXY([].slice.call(arguments)),t=this.getX(),n=this.getY();e.x!==undefined&&(t+=e.x),e.y!==undefined&&(n+=e.y),this.setPosition(t,n)},getRotationDeg:function(){return this.getRotation()*180/Math.PI},setRotationDeg:function(e){this.setRotation(e*Math.PI/180)},rotate:function(e){this.setRotation(this.getRotation()+e)},rotateDeg:function(e){this.setRotation(this.getRotation()+e*Math.PI/180)},moveToTop:function(){var e=this.index;return this.parent.children.splice(e,1),this.parent.children.push(this),this.parent._setChildrenIndices(),!0},moveUp:function(){var e=this.index;if(e0)return this.parent.children.splice(e,1),this.parent.children.splice(e-1,0,this),this.parent._setChildrenIndices(),!0},moveToBottom:function(){var e=this.index;if(e>0)return this.parent.children.splice(e,1),this.parent.children.unshift(this),this.parent._setChildrenIndices(),!0},setZIndex:function(e){var t=this.index;this.parent.children.splice(t,1),this.parent.children.splice(e,0,this),this.parent._setChildrenIndices()},getAbsoluteOpacity:function(){var e=1,t=this;while(t.nodeType!=="Stage")e*=t.attrs.opacity,t=t.parent;return e},isDragging:function(){var e=Kinetic.Global;return e.drag.node&&e.drag.node._id===this._id&&e.drag.moving},moveTo:function(e){var t=this.parent;t.children.splice(this.index,1),t._setChildrenIndices(),e.children.push(this),this.index=e.children.length-1,this.parent=e,e._setChildrenIndices()},getParent:function(){return this.parent},getLayer:function(){return this.getParent().getLayer()},getStage:function(){return this.getParent()?this.getParent().getStage():undefined},simulate:function(e){this._handleEvent(e,{})},transitionTo:function(e){var t=this.nodeType==="Stage"?this:this.getLayer(),n=this,r=new Kinetic.Transition(this,e);return this.transAnim.func=function(){r._onEnterFrame()},this.transAnim.node=t,r.onFinished=function(){n.transAnim.stop(),n.transAnim.node.draw(),e.callback&&e.callback()},r.start(),this.transAnim.start(),r},getAbsoluteTransform:function(){var e=new Kinetic.Transform,t=[],n=this.parent;t.unshift(this);while(n)t.unshift(n),n=n.parent;for(var r=0;r=0&&!t.cancelBubble&&this.parent&&(n&&n.parent?this._handleEvent.call(this.parent,e,t,n.parent):this._handleEvent.call(this.parent,e,t))}},_draw:function(e){if(this.isVisible()&&(!e||e.name!=="buffer"||this.getListening())){this.__draw&&this.__draw(e);var t=this.children;if(t)for(var n=0;n0)this.remove(this.children[0])},add:function(e){e._id=Kinetic.Global.idCounter++,e.index=this.children.length,e.parent=this,this.children.push(e);var t=e.getStage();if(!t)Kinetic.Global._addTempNode(e);else{t._addId(e),t._addName(e);var n=Kinetic.Global;n._pullNodes(t)}return this._add!==undefined&&this._add(e),this},remove:function(e){if(e&&e.index!==undefined&&this.children[e.index]._id==e._id){var t=this.getStage();t&&(t._removeId(e.getId()),t._removeName(e.getName(),e._id)),Kinetic.Global._removeTempNode(e),this.children.splice(e.index,1),this._setChildrenIndices();while(e.children&&e.children.length>0)e.remove(e.children[0]);e._remove!==undefined&&e._remove()}return this},get:function(e){var t=this.getStage();if(e==="Shape"||e==="Group"||e==="Layer"){var n=new Kinetic.Collection;function r(t){var i=t.getChildren();for(var s=0;s=0;r--){var i=n[r],s=i.bufferCanvas.context.getImageData(Math.round(e.x),Math.round(e.y),1,1).data;if(s[3]===255){var o=Kinetic.Type._rgbToHex(s[0],s[1],s[2]);return t=Kinetic.Global.shapes[o],{shape:t,pixel:s}}if(s[0]>0||s[1]>0||s[2]>0||s[3]>0)return{pixel:s}}return null},_resizeDOM:function(){if(this.content){var e=this.attrs.width,t=this.attrs.height;this.content.style.width=e+"px",this.content.style.height=t+"px",this.bufferCanvas.setSize(e,t);var n=this.children;for(var r=0;ro.right&&(a.x=o.right),o.top!==undefined&&a.yo.bottom&&(a.y=o.bottom),r.setAbsolutePosition(a),s==="horizontal"?r.attrs.y=u.y:s==="vertical"&&(r.attrs.x=u.x),n.drag.moving||(n.drag.moving=!0,n.drag.node._handleEvent("dragstart",e)),n.drag.node._handleEvent("dragmove",e)}},_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.bufferCanvas=new Kinetic.Canvas({width:this.attrs.width,height:this.attrs.height}),this._resizeDOM()},_addId:function(e){e.attrs.id!==undefined&&(this.ids[e.attrs.id]=e)},_removeId:function(e){e!==undefined&&delete this.ids[e]},_addName:function(e){var t=e.attrs.name;t!==undefined&&(this.names[t]===undefined&&(this.names[t]=[]),this.names[t].push(e))},_removeName:function(e,t){if(e!==undefined){var n=this.names[e];if(n!==undefined){for(var r=0;r0},_remove:function(){delete Kinetic.Global.shapes[this.colorKey]},__draw:function(e){if(this.attrs.drawFunc){var t=this.getStage(),n=e.getContext(),r=[],i=this.parent;r.unshift(this);while(i)r.unshift(i),i=i.parent;n.save();for(var s=0;s0&&r&&(this.attrs.height==="auto"||i*(n+1)this.attrs.width-this.attrs.padding*2){if(s==0)break;var a=u.lastIndexOf(" "),f=u.lastIndexOf("-"),l=Math.max(a,f);if(l>=0){o=e.splice(0,1+l).join("");break}o=e.splice(0,s).join("");break}s++,s===e.length&&(o=e.splice(0,s).join(""))}this.textWidth=Math.max(this.textWidth,this._getTextSize(o).width),o!==undefined&&(t.push(o),r=!0),n++}this.textArr=t}},Kinetic.Global.extend(Kinetic.Text,Kinetic.Shape),Kinetic.Node.addGettersSetters(Kinetic.Text,["fontFamily","fontSize","fontStyle","textFill","textStroke","textStrokeWidth","padding","align","lineHeight","width","height","cornerRadius","fill","stroke","strokeWidth","shadow"]),Kinetic.Node.addGetters(Kinetic.Text,["text"]),Kinetic.Line=function(e){this._initLine(e)},Kinetic.Line.prototype={_initLine:function(e){this.setDefaultAttrs({points:[],lineCap:"butt",dashArray:[],detectionType:"pixel"}),this.shapeType="Line",e.drawFunc=this.drawFunc,Kinetic.Shape.call(this,e)},drawFunc:function(e){var t={};e.beginPath(),e.moveTo(this.attrs.points[0].x,this.attrs.points[0].y);for(var n=1;n0){var s=this.attrs.points[n-1].x,o=this.attrs.points[n-1].y;this._dashedLine(e,s,o,r,i,this.attrs.dashArray)}else e.lineTo(r,i)}!this.attrs.lineCap||(e.lineCap=this.attrs.lineCap),this.stroke(e)},setPoints:function(e){this.setAttr("points",Kinetic.Type._getPoints(e))},_dashedLine:function(e,t,n,r,i,s){var o=s.length,u=r-t,a=i-n,f=u>a,l=f?a/u:u/a;l>9999?l=9999:l<-9999&&(l=-9999);var c=Math.sqrt(u*u+a*a),h=0,p=!0;while(c>=.1&&h<1e4){var d=s[h++%o];d===0&&(d=.001),d>c&&(d=c);var v=Math.sqrt(d*d/(1+l*l));f?(t+=u<0&&a<0?v*-1:v,n+=u<0&&a<0?l*v*-1:l*v):(t+=u<0&&a<0?l*v*-1:l*v,n+=u<0&&a<0?v*-1:v),e[p?"lineTo":"moveTo"](t,n),c-=d,p=!p}e.moveTo(r,i)}},Kinetic.Global.extend(Kinetic.Line,Kinetic.Shape),Kinetic.Node.addGettersSetters(Kinetic.Line,["dashArray","lineCap"]),Kinetic.Node.addGetters(Kinetic.Line,["points"]),Kinetic.Sprite=function(e){this._initSprite(e)},Kinetic.Sprite.prototype={_initSprite:function(e){this.setDefaultAttrs({index:0,frameRate:17}),e.drawFunc=this.drawFunc,Kinetic.Shape.call(this,e),this.anim=new Kinetic.Animation;var t=this;this.on("animationChange.kinetic",function(){t.setIndex(0)})},drawFunc:function(e){var t=this.attrs.animation,n=this.attrs.index,r=this.attrs.animations[t][n];e.beginPath(),e.rect(0,0,r.width,r.height),e.closePath(),this.fill(e),this.stroke(e),this.attrs.image&&(e.beginPath(),e.rect(0,0,r.width,r.height),e.closePath(),this.drawImage(e,this.attrs.image,r.x,r.y,r.width,r.height,0,0,r.width,r.height))},start:function(){var e=this,t=this.getLayer();this.anim.node=t,this.interval=setInterval(function(){var t=e.attrs.index;e._updateIndex(),e.afterFrameFunc&&t===e.afterFrameIndex&&(e.afterFrameFunc(),delete e.afterFrameFunc,delete e.afterFrameIndex)},1e3/this.attrs.frameRate),this.anim.start()},stop:function(){this.anim.stop(),clearInterval(this.interval)},afterFrame:function(e,t){this.afterFrameIndex=e,this.afterFrameFunc=t},_updateIndex:function(){var e=this.attrs.index,t=this.attrs.animation;ea?u:a,d=u>a?1:u/a,v=u>a?a/u:1;e.translate(s,o),e.rotate(c),e.scale(d,v),e.arc(0,0,p,f,f+l,1-h),e.scale(1/d,1/v),e.rotate(-c),e.translate(-s,-o);break;case"z":e.closePath()}}this.fill(e),this.stroke(e)}},Kinetic.Global.extend(Kinetic.Path,Kinetic.Shape),Kinetic.Path.getLineLength=function(e,t,n,r){return Math.sqrt((n-e)*(n-e)+(r-t)*(r-t))},Kinetic.Path.getPointOnLine=function(e,t,n,r,i,s,o){s===undefined&&(s=t),o===undefined&&(o=n);var u=(i-n)/(r-t+1e-8),a=Math.sqrt(e*e/(1+u*u)),f=u*a,l;if((o-n)/(s-t+1e-8)===u)l={x:s+a,y:o+f};else{var c,h,p=this.getLineLength(t,n,r,i);if(p<1e-8)return undefined;var d=(s-t)*(r-t)+(o-n)*(i-n);d/=p*p,c=t+d*(r-t),h=n+d*(i-n);var v=this.getLineLength(s,o,c,h),m=Math.sqrt(e*e-v*v);a=Math.sqrt(m*m/(1+u*u)),f=u*a,l={x:c+a,y:h+f}}return l},Kinetic.Path.getPointOnCubicBezier=function(e,t,n,r,i,s,o,u,a){function f(e){return e*e*e}function l(e){return 3*e*e*(1-e)}function c(e){return 3*e*(1-e)*(1-e)}function h(e){return(1-e)*(1-e)*(1-e)}var p=u*f(e)+s*l(e)+r*c(e)+t*h(e),d=a*f(e)+o*l(e)+i*c(e)+n*h(e);return{x:p,y:d}},Kinetic.Path.getPointOnQuadraticBezier=function(e,t,n,r,i,s,o){function u(e){return e*e}function a(e){return 2*e*(1-e)}function f(e){return(1-e)*(1-e)}var l=s*u(e)+r*a(e)+t*f(e),c=o*u(e)+i*a(e)+n*f(e);return{x:l,y:c}},Kinetic.Path.getPointOnEllipticalArc=function(e,t,n,r,i,s){var o=Math.cos(s),u=Math.sin(s),a={x:n*Math.cos(i),y:r*Math.sin(i)};return{x:e+(a.x*o-a.y*u),y:t+(a.x*u+a.y*o)}},Kinetic.Path.parsePathData=function(e){if(!e)return[];var t=e,n=["m","M","l","L","v","V","h","H","z","Z","c","C","q","Q","t","T","s","S","a","A"];t=t.replace(new RegExp(" ","g"),",");for(var r=0;r0&&l[0]===""&&l.shift();for(var c=0;c0){if(isNaN(l[0]))break;var h=null,p=[],d=o,v=u;switch(f){case"l":o+=l.shift(),u+=l.shift(),h="L",p.push(o,u);break;case"L":o=l.shift(),u=l.shift(),p.push(o,u);break;case"m":o+=l.shift(),u+=l.shift(),h="M",p.push(o,u),f="l";break;case"M":o=l.shift(),u=l.shift(),h="M",p.push(o,u),f="L";break;case"h":o+=l.shift(),h="L",p.push(o,u);break;case"H":o=l.shift(),h="L",p.push(o,u);break;case"v":u+=l.shift(),h="L",p.push(o,u);break;case"V":u=l.shift(),h="L",p.push(o,u);break;case"C":p.push(l.shift(),l.shift(),l.shift(),l.shift()),o=l.shift(),u=l.shift(),p.push(o,u);break;case"c":p.push(o+l.shift(),u+l.shift(),o+l.shift(),u+l.shift()),o+=l.shift(),u+=l.shift(),h="C",p.push(o,u);break;case"S":var m=o,g=u,y=s[s.length-1];y.command==="C"&&(m=o+(o-y.points[2]),g=u+(u-y.points[3])),p.push(m,g,l.shift(),l.shift()),o=l.shift(),u=l.shift(),h="C",p.push(o,u);break;case"s":var m=o,g=u,y=s[s.length-1];y.command==="C"&&(m=o+(o-y.points[2]),g=u+(u-y.points[3])),p.push(m,g,o+l.shift(),u+l.shift()),o+=l.shift(),u+=l.shift(),h="C",p.push(o,u);break;case"Q":p.push(l.shift(),l.shift()),o=l.shift(),u=l.shift(),p.push(o,u);break;case"q":p.push(o+l.shift(),u+l.shift()),o+=l.shift(),u+=l.shift(),h="Q",p.push(o,u);break;case"T":var m=o,g=u,y=s[s.length-1];y.command==="Q"&&(m=o+(o-y.points[0]),g=u+(u-y.points[1])),o=l.shift(),u=l.shift(),h="Q",p.push(m,g,o,u);break;case"t":var m=o,g=u,y=s[s.length-1];y.command==="Q"&&(m=o+(o-y.points[0]),g=u+(u-y.points[1])),o+=l.shift(),u+=l.shift(),h="Q",p.push(m,g,o,u);break;case"A":var b=l.shift(),w=l.shift(),E=l.shift(),S=l.shift(),x=l.shift(),T=o,N=u;o=l.shift(),u=l.shift(),h="A",p=this.convertEndpointToCenterParameterization(T,N,o,u,S,x,b,w,E);break;case"a":var b=l.shift(),w=l.shift(),E=l.shift(),S=l.shift(),x=l.shift(),T=o,N=u;o+=l.shift(),u+=l.shift(),h="A",p=this.convertEndpointToCenterParameterization(T,N,o,u,S,x,b,w,E)}s.push({command:h||f,points:p,start:{x:d,y:v},pathLength:this.calcLength(d,v,h||f,p)})}(f==="z"||f==="Z")&&s.push({command:"z",points:[],start:undefined,pathLength:0})}return s},Kinetic.Path.calcLength=function(e,n,r,i){var s,o,u,a=Kinetic.Path;switch(r){case"L":return a.getLineLength(e,n,i[0],i[1]);case"C":s=0,o=a.getPointOnCubicBezier(0,e,n,i[0],i[1],i[2],i[3],i[4],i[5]);for(t=.01;t<=1;t+=.01)u=a.getPointOnCubicBezier(t,e,n,i[0],i[1],i[2],i[3],i[4],i[5]),s+=a.getLineLength(o.x,o.y,u.x,u.y),o=u;return s;case"Q":s=0,o=a.getPointOnQuadraticBezier(0,e,n,i[0],i[1],i[2],i[3]);for(t=.01;t<=1;t+=.01)u=a.getPointOnQuadraticBezier(t,e,n,i[0],i[1],i[2],i[3]),s+=a.getLineLength(o.x,o.y,u.x,u.y),o=u;return s;case"A":s=0;var f=i[4],l=i[5],c=i[4]+l,h=Math.PI/180;Math.abs(f-c)c;t-=h)u=a.getPointOnEllipticalArc(i[0],i[1],i[2],i[3],t,0),s+=a.getLineLength(o.x,o.y,u.x,u.y),o=u;else for(t=f+h;t1&&(o*=Math.sqrt(h),u*=Math.sqrt(h));var p=Math.sqrt((o*o*u*u-o*o*c*c-u*u*l*l)/(o*o*c*c+u*u*l*l));i==s&&(p*=-1),isNaN(p)&&(p=0);var d=p*o*c/u,v=p*-u*l/o,m=(e+n)/2+Math.cos(f)*d-Math.sin(f)*v,g=(t+r)/2+Math.sin(f)*d+Math.cos(f)*v,y=function(e){return Math.sqrt(e[0]*e[0]+e[1]*e[1])},b=function(e,t){return(e[0]*t[0]+e[1]*t[1])/(y(e)*y(t))},w=function(e,t){return(e[0]*t[1]=1&&(T=0),s===0&&T>0&&(T-=2*Math.PI),s==1&&T<0&&(T+=2*Math.PI),[m,g,o,u,E,T,f,s]},Kinetic.Node.addGettersSetters(Kinetic.Path,["data"]),Kinetic.TextPath=function(e){this._initTextPath(e)},Kinetic.TextPath.prototype={_initTextPath:function(e){this.setDefaultAttrs({fontFamily:"Calibri",fontSize:12,fontStyle:"normal",detectionType:"path",text:""}),this.dummyCanvas=document.createElement("canvas"),this.shapeType="TextPath",this.dataArray=[];var t=this;e.drawFunc=this.drawFunc,Kinetic.Shape.call(this,e),this.dataArray=Kinetic.Path.parsePathData(this.attrs.data),this.on("dataChange",function(){t.dataArray=Kinetic.Path.parsePathData(this.attrs.data)});var n=["text","textStroke","textStrokeWidth"];for(var r=0;r0)return o=n,t[n];t[n].command=="M"&&(r={x:t[n].points[0],y:t[n].points[1]})}return{}},f=function(t,n){var o=e._getTextSize(t).width,f=0,l=0,c=!1;i=undefined;while(Math.abs(o-f)/o>.01&&l<25){l++;var h=f;while(s===undefined)s=a(),s&&h+s.pathLengtho?i=Kinetic.Path.getPointOnLine(o,r.x,r.y,s.points[0],s.points[1],r.x,r.y):s=undefined;break;case"A":var d=s.points[4],v=s.points[5],m=s.points[4]+v;u===0?u=d+1e-8:o>f?u+=Math.PI/180*v/Math.abs(v):u-=Math.PI/360*v/Math.abs(v),Math.abs(u)>Math.abs(m)&&(u=m,p=!0),i=Kinetic.Path.getPointOnEllipticalArc(s.points[0],s.points +[1],s.points[2],s.points[3],u,s.points[6]);break;case"C":u===0?o>s.pathLength?u=1e-8:u=o/s.pathLength:o>f?u+=(o-f)/s.pathLength:u-=(f-o)/s.pathLength,u>1&&(u=1,p=!0),i=Kinetic.Path.getPointOnCubicBezier(u,s.start.x,s.start.y,s.points[0],s.points[1],s.points[2],s.points[3],s.points[4],s.points[5]);break;case"Q":u===0?u=o/s.pathLength:o>f?u+=(o-f)/s.pathLength:u-=(f-o)/s.pathLength,u>1&&(u=1,p=!0),i=Kinetic.Path.getPointOnQuadraticBezier(u,s.start.x,s.start.y,s.points[0],s.points[1],s.points[2],s.points[3])}i!==undefined&&(f=Kinetic.Path.getLineLength(r.x,r.y,i.x,i.y)),p&&(p=!1,s=undefined)}};for(var l=0;l