From 37c2a777c876581c0d7d273226d301691f12b570 Mon Sep 17 00:00:00 2001 From: Anton Lavrenov Date: Tue, 17 Oct 2017 08:40:18 +0530 Subject: [PATCH] update stage in sync way --- CHANGELOG.md | 3 +++ konva.js | 4 ++-- konva.min.js | 4 ++-- src/Stage.js | 2 +- 4 files changed, 8 insertions(+), 5 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index f47b47e6..ad5e1ff4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,9 @@ This project adheres to [Semantic Versioning](http://semver.org/). ## [Not released][Not released] +### Changed +- Changing size of a stage will redraw it in synchronous way + ## [1.7.2][2017-10-11] ### Fixed diff --git a/konva.js b/konva.js index bd614cf6..cb12592f 100644 --- a/konva.js +++ b/konva.js @@ -2,7 +2,7 @@ * Konva JavaScript Framework v1.7.2 * http://konvajs.github.io/ * Licensed under the MIT or GPL Version 2 licenses. - * Date: Wed Oct 11 2017 + * Date: Tue Oct 17 2017 * * Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS) * Modified work Copyright (C) 2014 - 2017 by Anton Lavrenov (Konva) @@ -10201,7 +10201,7 @@ for (n = 0; n < len; n++) { layer = layers[n]; layer.setSize(width, height); - layer.batchDraw(); + layer.draw(); } } }, diff --git a/konva.min.js b/konva.min.js index ff9f1fae..2a50e6b0 100644 --- a/konva.min.js +++ b/konva.min.js @@ -2,7 +2,7 @@ * Konva JavaScript Framework v1.7.2 * http://konvajs.github.io/ * Licensed under the MIT or GPL Version 2 licenses. - * Date: Wed Oct 11 2017 + * Date: Tue Oct 17 2017 * * Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS) * Modified work Copyright (C) 2014 - 2017 by Anton Lavrenov (Konva) @@ -40,4 +40,4 @@ * node.cache(); * node.filters([Konva.Filters.Sepia]); */ -Konva.Filters.Sepia=function(t){var e,n,i,a,r,o,s,h,c,l=t.data,d=t.width,u=t.height,f=4*d;do{e=(u-1)*f,n=d;do{s=.393*(a=l[i=e+4*(n-1)])+.769*(r=l[i+1])+.189*(o=l[i+2]),h=.349*a+.686*r+.168*o,c=.272*a+.534*r+.131*o,l[i]=s>255?255:s,l[i+1]=h>255?255:h,l[i+2]=c>255?255:c,l[i+3]=l[i+3]}while(--n)}while(--u)}}(),function(){"use strict";Konva.Filters.Solarize=function(t){var e=t.data,n=t.width,i=4*n,a=t.height;do{var r=(a-1)*i,o=n;do{var s=r+4*(o-1),h=e[s],c=e[s+1],l=e[s+2];h>127&&(h=255-h),c>127&&(c=255-c),l>127&&(l=255-l),e[s]=h,e[s+1]=c,e[s+2]=l}while(--o)}while(--a)}}(),function(){"use strict";var t=function(t,e,n){var i,a,r,o,s=t.data,h=e.data,c=t.width,l=t.height,d=n.polarCenterX||c/2,u=n.polarCenterY||l/2,f=0,v=0,g=0,p=0,m=Math.sqrt(d*d+u*u);a=c-d,r=l-u,m=(o=Math.sqrt(a*a+r*r))>m?o:m;var _,y,S,K,C=l,x=c,w=360/x*Math.PI/180;for(y=0;yy?h:y;var S,K,C,x=u,w=d,b=n.polarRotation||0;for(a=0;au&&(K=S,C=0,x=-1),a=0;a0},removeChildren:function(){for(var t,e=Konva.Collection.toCollection(this.children),n=0;n1){for(var e=0;e0},destroy:function(){return t.Node.prototype.destroy.call(this),delete t.shapes[this.colorKey],this},_useBufferCanvas:function(t){return!t&&this.perfectDrawEnabled()&&1!==this.getAbsoluteOpacity()&&this.hasFill()&&this.hasStroke()&&this.getStage()||this.perfectDrawEnabled()&&this.hasShadow()&&1!==this.getAbsoluteOpacity()&&this.hasFill()&&this.hasStroke()&&this.getStage()},getSelfRect:function(){var t=this.getSize();return{x:this._centroid?Math.round(-t.width/2):0,y:this._centroid?Math.round(-t.height/2):0,width:t.width,height:t.height}},getClientRect:function(t){var e=(t=t||{}).skipTransform,n=t.relativeTo,i=this.getSelfRect(),a=this.hasStroke()&&this.strokeWidth()||0,r=i.width+a,o=i.height+a,s=this.hasShadow()?this.shadowOffsetX():0,h=this.hasShadow()?this.shadowOffsetY():0,c=r+Math.abs(s),l=o+Math.abs(h),d=this.hasShadow()&&this.shadowBlur()||0,u=c+2*d,f=l+2*d,v=0;Math.round(a/2)!==a/2&&(v=1);var g={width:u+v,height:f+v,x:-Math.round(a/2+d)+Math.min(s,0)+i.x,y:-Math.round(a/2+d)+Math.min(h,0)+i.y};return e?g:this._transformedRect(g,n)},drawScene:function(t,e,n,i){var a,r,o,s=this.getLayer(),h=t||s.getCanvas(),c=h.getContext(),l=this._cache.canvas,d=this.sceneFunc(),u=this.hasShadow(),f=this.hasStroke();if(!this.isVisible())return this;if(l)return c.save(),s._applyTransform(this,c,e),this._drawCachedSceneCanvas(c),c.restore(),this;if(!d)return this;if(c.save(),this._useBufferCanvas(n)&&!i){if(a=this.getStage(),r=a.bufferCanvas,(o=r.getContext()).clear(),o.save(),o._applyLineJoin(this),!n)if(s)s._applyTransform(this,o,e);else{var v=this.getAbsoluteTransform(e).getMatrix();c.transform(v[0],v[1],v[2],v[3],v[4],v[5])}d.call(this,o),o.restore();var g=r.pixelRatio;u&&!h.hitCanvas?(c.save(),c._applyShadow(this),c._applyOpacity(this),c._applyGlobalCompositeOperation(this),c.drawImage(r._canvas,0,0,r.width/g,r.height/g),c.restore()):(c._applyOpacity(this),c._applyGlobalCompositeOperation(this),c.drawImage(r._canvas,0,0,r.width/g,r.height/g))}else{if(c._applyLineJoin(this),!n)if(s)s._applyTransform(this,c,e);else{var p=this.getAbsoluteTransform(e).getMatrix();c.transform(p[0],p[1],p[2],p[3],p[4],p[5])}u&&f&&!h.hitCanvas?(c.save(),n||(c._applyOpacity(this),c._applyGlobalCompositeOperation(this)),c._applyShadow(this),d.call(this,c),c.restore(),this.hasFill()&&this.getShadowForStrokeEnabled()&&d.call(this,c)):u&&!h.hitCanvas?(c.save(),n||(c._applyOpacity(this),c._applyGlobalCompositeOperation(this)),c._applyShadow(this),d.call(this,c),c.restore()):(n||(c._applyOpacity(this),c._applyGlobalCompositeOperation(this)),d.call(this,c))}return c.restore(),this},drawHit:function(t,e,n){var i=this.getLayer(),a=t||i.hitCanvas,r=a.getContext(),o=this.hitFunc()||this.sceneFunc(),s=this._cache.canvas,h=s&&s.hit;if(!this.shouldDrawHit(a))return this;if(i&&i.clearHitCache(),h)return r.save(),i._applyTransform(this,r,e),this._drawCachedHitCanvas(r),r.restore(),this;if(!o)return this;if(r.save(),r._applyLineJoin(this),!n)if(i)i._applyTransform(this,r,e);else{var c=this.getAbsoluteTransform(e).getMatrix();r.transform(c[0],c[1],c[2],c[3],c[4],c[5])}return o.call(this,r),r.restore(),this},drawHitFromCache:function(e){var n,i,a,r,o,s=e||0,h=this._cache.canvas,c=this._getCachedSceneCanvas(),l=h.hit,d=l.getContext(),u=l.getWidth(),f=l.getHeight();d.clear(),d.drawImage(c._canvas,0,0,u,f);try{for(a=(i=(n=d.getImageData(0,0,u,f)).data).length,r=t.Util._hexToRgb(this.colorKey),o=0;os?(i[o]=r.r,i[o+1]=r.g,i[o+2]=r.b,i[o+3]=255):i[o+3]=0;d.putImageData(n,0,0)}catch(e){t.Util.error("Unable to draw hit graph from cached scene canvas. "+e.message)}return this}}),t.Util.extend(t.Shape,t.Node),t.Factory.addGetterSetter(t.Shape,"stroke"),t.Factory.addDeprecatedGetterSetter(t.Shape,"strokeRed",0,t.Validators.RGBComponent),t.Factory.addDeprecatedGetterSetter(t.Shape,"strokeGreen",0,t.Validators.RGBComponent),t.Factory.addDeprecatedGetterSetter(t.Shape,"strokeBlue",0,t.Validators.RGBComponent),t.Factory.addDeprecatedGetterSetter(t.Shape,"strokeAlpha",1,t.Validators.alphaComponent),t.Factory.addGetterSetter(t.Shape,"strokeWidth",2),t.Factory.addGetterSetter(t.Shape,"strokeHitEnabled",!0),t.Factory.addGetterSetter(t.Shape,"perfectDrawEnabled",!0),t.Factory.addGetterSetter(t.Shape,"shadowForStrokeEnabled",!0),t.Factory.addGetterSetter(t.Shape,"lineJoin"),t.Factory.addGetterSetter(t.Shape,"lineCap"),t.Factory.addGetterSetter(t.Shape,"sceneFunc"),t.Factory.addGetterSetter(t.Shape,"hitFunc"),t.Factory.addGetterSetter(t.Shape,"dash"),t.Factory.addGetterSetter(t.Shape,"dashOffset",0),t.Factory.addGetterSetter(t.Shape,"shadowColor"),t.Factory.addDeprecatedGetterSetter(t.Shape,"shadowRed",0,t.Validators.RGBComponent),t.Factory.addDeprecatedGetterSetter(t.Shape,"shadowGreen",0,t.Validators.RGBComponent),t.Factory.addDeprecatedGetterSetter(t.Shape,"shadowBlue",0,t.Validators.RGBComponent),t.Factory.addDeprecatedGetterSetter(t.Shape,"shadowAlpha",1,t.Validators.alphaComponent),t.Factory.addGetterSetter(t.Shape,"shadowBlur"),t.Factory.addGetterSetter(t.Shape,"shadowOpacity"),t.Factory.addComponentsGetterSetter(t.Shape,"shadowOffset",["x","y"]),t.Factory.addGetterSetter(t.Shape,"shadowOffsetX",0),t.Factory.addGetterSetter(t.Shape,"shadowOffsetY",0),t.Factory.addGetterSetter(t.Shape,"fillPatternImage"),t.Factory.addGetterSetter(t.Shape,"fill"),t.Factory.addDeprecatedGetterSetter(t.Shape,"fillRed",0,t.Validators.RGBComponent),t.Factory.addDeprecatedGetterSetter(t.Shape,"fillGreen",0,t.Validators.RGBComponent),t.Factory.addDeprecatedGetterSetter(t.Shape,"fillBlue",0,t.Validators.RGBComponent),t.Factory.addDeprecatedGetterSetter(t.Shape,"fillAlpha",1,t.Validators.alphaComponent),t.Factory.addGetterSetter(t.Shape,"fillPatternX",0),t.Factory.addGetterSetter(t.Shape,"fillPatternY",0),t.Factory.addGetterSetter(t.Shape,"fillLinearGradientColorStops"),t.Factory.addGetterSetter(t.Shape,"fillRadialGradientStartRadius",0),t.Factory.addGetterSetter(t.Shape,"fillRadialGradientEndRadius",0),t.Factory.addGetterSetter(t.Shape,"fillRadialGradientColorStops"),t.Factory.addGetterSetter(t.Shape,"fillPatternRepeat","repeat"),t.Factory.addGetterSetter(t.Shape,"fillEnabled",!0),t.Factory.addGetterSetter(t.Shape,"strokeEnabled",!0),t.Factory.addGetterSetter(t.Shape,"shadowEnabled",!0),t.Factory.addGetterSetter(t.Shape,"dashEnabled",!0),t.Factory.addGetterSetter(t.Shape,"strokeScaleEnabled",!0),t.Factory.addGetterSetter(t.Shape,"fillPriority","color"),t.Factory.addComponentsGetterSetter(t.Shape,"fillPatternOffset",["x","y"]),t.Factory.addGetterSetter(t.Shape,"fillPatternOffsetX",0),t.Factory.addGetterSetter(t.Shape,"fillPatternOffsetY",0),t.Factory.addComponentsGetterSetter(t.Shape,"fillPatternScale",["x","y"]),t.Factory.addGetterSetter(t.Shape,"fillPatternScaleX",1),t.Factory.addGetterSetter(t.Shape,"fillPatternScaleY",1),t.Factory.addComponentsGetterSetter(t.Shape,"fillLinearGradientStartPoint",["x","y"]),t.Factory.addGetterSetter(t.Shape,"fillLinearGradientStartPointX",0),t.Factory.addGetterSetter(t.Shape,"fillLinearGradientStartPointY",0),t.Factory.addComponentsGetterSetter(t.Shape,"fillLinearGradientEndPoint",["x","y"]),t.Factory.addGetterSetter(t.Shape,"fillLinearGradientEndPointX",0),t.Factory.addGetterSetter(t.Shape,"fillLinearGradientEndPointY",0),t.Factory.addComponentsGetterSetter(t.Shape,"fillRadialGradientStartPoint",["x","y"]),t.Factory.addGetterSetter(t.Shape,"fillRadialGradientStartPointX",0),t.Factory.addGetterSetter(t.Shape,"fillRadialGradientStartPointY",0),t.Factory.addComponentsGetterSetter(t.Shape,"fillRadialGradientEndPoint",["x","y"]),t.Factory.addGetterSetter(t.Shape,"fillRadialGradientEndPointX",0),t.Factory.addGetterSetter(t.Shape,"fillRadialGradientEndPointY",0),t.Factory.addGetterSetter(t.Shape,"fillPatternRotation",0),t.Factory.backCompat(t.Shape,{dashArray:"dash",getDashArray:"getDash",setDashArray:"getDash",drawFunc:"sceneFunc",getDrawFunc:"getSceneFunc",setDrawFunc:"setSceneFunc",drawHitFunc:"hitFunc",getDrawHitFunc:"getHitFunc",setDrawHitFunc:"setHitFunc"}),t.Collection.mapMethods(t.Shape)}(Konva),function(){"use strict";function t(t,n){t.content.addEventListener(n,function(i){t[e+n](i)},!1)}var e="_",n=["mousedown","mousemove","mouseup","mouseout","touchstart","touchmove","touchend","mouseover","wheel","contextmenu"],i=n.length;Konva.Stage=function(t){this.___init(t)},Konva.Util.addMethods(Konva.Stage,{___init:function(t){this.nodeType="Stage",Konva.Container.call(this,t),this._id=Konva.idCounter++,this._buildDOM(),this._bindContentEvents(),this._enableNestedTransforms=!1,Konva.stages.push(this)},_validateAdd:function(t){"Layer"!==t.getType()&&Konva.Util.throw("You may only add layers to the stage.")},setContainer:function(t){if("string"==typeof t){if("."===t.charAt(0)){var e=t.slice(1);t=Konva.document.getElementsByClassName(e)[0]}else{var n;n="#"!==t.charAt(0)?t:t.slice(1),t=Konva.document.getElementById(n)}if(!t)throw"Can not find container in document with id "+n}return this._setAttr("container",t),this},shouldDrawHit:function(){return!0},draw:function(){return Konva.Node.prototype.draw.call(this),this},setHeight:function(t){return Konva.Node.prototype.setHeight.call(this,t),this._resizeDOM(),this},setWidth:function(t){return Konva.Node.prototype.setWidth.call(this,t),this._resizeDOM(),this},clear:function(){var t,e=this.children,n=e.length;for(t=0;t-1&&Konva.stages.splice(e,1),this},getPointerPosition:function(){return this.pointerPos},getStage:function(){return this},getContent:function(){return this.content},toDataURL:function(t){var e=(t=t||{}).mimeType||null,n=t.quality||null,i=t.x||0,a=t.y||0,r=new Konva.SceneCanvas({width:t.width||this.getWidth(),height:t.height||this.getHeight(),pixelRatio:t.pixelRatio}),o=r.getContext()._context,s=this.children;(i||a)&&o.translate(-1*i,-1*a),s.each(function(t){var e=t.getCanvas().getWidth(),n=t.getCanvas().getHeight(),i=t.getCanvas().getPixelRatio();o.drawImage(t.getCanvas()._canvas,0,0,e/i,n/i)});var h=r.toDataURL(e,n);return t.callback&&t.callback(h),h},toImage:function(t){var e=t.callback;t.callback=function(t){Konva.Util._getImage(t,function(t){e(t)})},this.toDataURL(t)},getIntersection:function(t,e){var n,i,a=this.getChildren();for(n=a.length-1;n>=0;n--)if(i=a[n].getIntersection(t,e))return i;return null},_resizeDOM:function(){if(this.content){var t,e,n=this.getWidth(),i=this.getHeight(),a=this.getChildren(),r=a.length;for(this.content.style.width=n+"px",this.content.style.height=i+"px",this.bufferCanvas.setSize(n,i),this.bufferHitCanvas.setSize(n,i),t=0;t1){for(var e=0;e0){var a=t.touches[0];n=a.clientX-e.left,i=a.clientY-e.top}}else n=t.clientX-e.left,i=t.clientY-e.top;null!==n&&null!==i&&(this.pointerPos={x:n,y:i})},_getContentPosition:function(){var t=this.content.getBoundingClientRect?this.content.getBoundingClientRect():{top:0,left:0};return{top:t.top,left:t.left}},_buildDOM:function(){if(this.bufferCanvas=new Konva.SceneCanvas,this.bufferHitCanvas=new Konva.HitCanvas({pixelRatio:1}),Konva.isBrowser){var t=this.getContainer();if(!t)throw"Stage has no container. A container is required.";t.innerHTML="",this.content=Konva.document.createElement("div"),this.content.style.position="relative",this.content.className="konvajs-content",this.content.setAttribute("role","presentation"),t.appendChild(this.content),this._resizeDOM()}},_onContent:function(t,e){var n,i,a=t.split(" "),r=a.length;for(n=0;n0?{antialiased:!0}:{}},drawScene:function(t,e){var n=this.getLayer(),i=t||n&&n.getCanvas();return this._fire("beforeDraw",{node:this}),this.getClearBeforeDraw()&&i.getContext().clear(),Konva.Container.prototype.drawScene.call(this,i,e),this._fire("draw",{node:this}),this},drawHit:function(t,e){var n=this.getLayer(),i=t||n&&n.hitCanvas;return n&&n.getClearBeforeDraw()&&n.getHitCanvas().getContext().clear(),Konva.Container.prototype.drawHit.call(this,i,e),this.imageData=null,this},clear:function(t){return Konva.BaseLayer.prototype.clear.call(this,t),this.getHitCanvas().getContext().clear(t),this.imageData=null,this},setVisible:function(t){return Konva.Node.prototype.setVisible.call(this,t),t?(this.getCanvas()._canvas.style.display="block",this.hitCanvas._canvas.style.display="block"):(this.getCanvas()._canvas.style.display="none",this.hitCanvas._canvas.style.display="none"),this},enableHitGraph:function(){return this.setHitGraphEnabled(!0),this},disableHitGraph:function(){return this.setHitGraphEnabled(!1),this},setSize:function(t,e){return Konva.BaseLayer.prototype.setSize.call(this,t,e),this.hitCanvas.setSize(t,e),this}}),Konva.Util.extend(Konva.Layer,Konva.BaseLayer),Konva.Factory.addGetterSetter(Konva.Layer,"hitGraphEnabled",!0),Konva.Collection.mapMethods(Konva.Layer)}(),function(){"use strict";Konva.FastLayer=function(t){this.____init(t)},Konva.Util.addMethods(Konva.FastLayer,{____init:function(t){this.nodeType="Layer",this.canvas=new Konva.SceneCanvas,Konva.BaseLayer.call(this,t)},_validateAdd:function(t){"Shape"!==t.getType()&&Konva.Util.throw("You may only add shapes to a fast layer.")},_setCanvasSize:function(t,e){this.canvas.setSize(t,e)},hitGraphEnabled:function(){return!1},getIntersection:function(){return null},drawScene:function(t){var e=this.getLayer(),n=t||e&&e.getCanvas();return this.getClearBeforeDraw()&&n.getContext().clear(),Konva.Container.prototype.drawScene.call(this,n),this},draw:function(){return this.drawScene(),this},setVisible:function(t){return Konva.Node.prototype.setVisible.call(this,t),this.getCanvas()._canvas.style.display=t?"block":"none",this}}),Konva.Util.extend(Konva.FastLayer,Konva.BaseLayer),Konva.Collection.mapMethods(Konva.FastLayer)}(),function(){"use strict";Konva.Group=function(t){this.___init(t)},Konva.Util.addMethods(Konva.Group,{___init:function(t){this.nodeType="Group",Konva.Container.call(this,t)},_validateAdd:function(t){var e=t.getType();"Group"!==e&&"Shape"!==e&&Konva.Util.throw("You may only add groups and shapes to groups.")}}),Konva.Util.extend(Konva.Group,Konva.Container),Konva.Collection.mapMethods(Konva.Group)}(),function(t){"use strict";function e(t){setTimeout(t,1e3/60)}function n(){return a.apply(t.global,arguments)}var i=t.global.performance&&t.global.performance.now?function(){return t.global.performance.now()}:function(){return(new Date).getTime()},a=t.global.requestAnimationFrame||t.global.webkitRequestAnimationFrame||t.global.mozRequestAnimationFrame||t.global.oRequestAnimationFrame||t.global.msRequestAnimationFrame||e;t.Animation=function(e,n){var a=t.Animation;this.func=e,this.setLayers(n),this.id=a.animIdCounter++,this.frame={time:0,timeDiff:0,lastTime:i()}},t.Animation.prototype={setLayers:function(t){var e=[];return e=t?t.length>0?t:[t]:[],this.layers=e,this},getLayers:function(){return this.layers},addLayer:function(t){var e,n=this.layers,i=n.length;for(e=0;ethis.duration?this.yoyo?(this._time=this.duration,this.reverse()):this.finish():t<0?this.yoyo?(this._time=0,this.play()):this.reset():(this._time=t,this.update())},getTime:function(){return this._time},setPosition:function(t){this.prevPos=this._pos,this.propFunc(t),this._pos=t},getPosition:function(t){return void 0===t&&(t=this._time),this.func(t,this.begin,this._change,this.duration)},play:function(){this.state=2,this._startTime=this.getTimer()-this._time,this.onEnterFrame(),this.fire("onPlay")},reverse:function(){this.state=3,this._time=this.duration-this._time,this._startTime=this.getTimer()-this._time,this.onEnterFrame(),this.fire("onReverse")},seek:function(t){this.pause(),this._time=t,this.update(),this.fire("onSeek")},reset:function(){this.pause(),this._time=0,this.update(),this.fire("onReset")},finish:function(){this.pause(),this._time=this.duration,this.update(),this.fire("onFinish")},update:function(){this.setPosition(this.getPosition(this._time))},onEnterFrame:function(){var t=this.getTimer()-this._startTime;2===this.state?this.setTime(t):3===this.state&&this.setTime(this.duration-t)},pause:function(){this.state=1,this.fire("onPause")},getTimer:function(){return(new Date).getTime()}},Konva.Tween=function(n){var a,r,o=this,s=n.node,h=s._id,c=n.easing||Konva.Easings.Linear,l=!!n.yoyo;a=void 0===n.duration?1:0===n.duration?.001:n.duration,this.node=s,this._id=e++;var d=s.getLayer()||(s instanceof Konva.Stage?s.getLayers():null);d||Konva.Util.error("Tween constructor have `node` that is not in a layer. Please add node into layer first."),this.anim=new Konva.Animation(function(){o.tween.onEnterFrame()},d),this.tween=new i(r,function(t){o._tweenFunc(t)},c,0,1,1e3*a,l),this._addListeners(),Konva.Tween.attrs[h]||(Konva.Tween.attrs[h]={}),Konva.Tween.attrs[h][this._id]||(Konva.Tween.attrs[h][this._id]={}),Konva.Tween.tweens[h]||(Konva.Tween.tweens[h]={});for(r in n)void 0===t[r]&&this._addAttr(r,n[r]);this.reset(),this.onFinish=n.onFinish,this.onReset=n.onReset},Konva.Tween.attrs={},Konva.Tween.tweens={},Konva.Tween.prototype={_addAttr:function(t,e){var i,a,r,o,s,h,c,l=this.node,d=l._id;if((r=Konva.Tween.tweens[d][t])&&delete Konva.Tween.attrs[d][r][t],i=l.getAttr(t),Konva.Util._isArray(e))for(a=[],s=Math.max(e.length,i.length),"points"===t&&e.length!==i.length&&(e.length>i.length?(c=i,i=Konva.Util._prepareArrayForTween(i,e,l.closed())):(h=e,e=Konva.Util._prepareArrayForTween(e,i,l.closed()))),o=0;ol)for(;_.length>0;){for(var S=0,K=_.length,C="",x=0;S>>1,b=_.slice(0,w+1),F=this._getTextWidth(b);F<=l?(S=w+1,C=b,x=F):K=w}if(!C)break;if(g){var T=Math.max(C.lastIndexOf(" "),C.lastIndexOf("-"))+1;T>0&&(S=T,C=C.slice(0,S),x=this._getTextWidth(C))}if(this._addTextLine(C),i=Math.max(i,x),u+=a,!v||h&&u+a>d)break;if((_=_.slice(S)).length>0&&(y=this._getTextWidth(_))<=l){this._addTextLine(_),u+=a,i=Math.max(i,y);break}}else this._addTextLine(_),u+=a,i=Math.max(i,y);if(h&&u+a>d)break}t().restore(),this.textHeight=n,this.textWidth=i}},Konva.Util.extend(Konva.Text,Konva.Shape),Konva.Factory.addGetterSetter(Konva.Text,"fontFamily","Arial"),Konva.Factory.addGetterSetter(Konva.Text,"fontSize",12),Konva.Factory.addGetterSetter(Konva.Text,"fontStyle","normal"),Konva.Factory.addGetterSetter(Konva.Text,"fontVariant","normal"),Konva.Factory.addGetterSetter(Konva.Text,"padding",0),Konva.Factory.addGetterSetter(Konva.Text,"align","left"),Konva.Factory.addGetterSetter(Konva.Text,"lineHeight",1),Konva.Factory.addGetterSetter(Konva.Text,"wrap","word"),Konva.Factory.addGetterSetter(Konva.Text,"letterSpacing",0),Konva.Factory.addGetter(Konva.Text,"text",""),Konva.Factory.addOverloadedGetterSetter(Konva.Text,"text"),Konva.Factory.addGetterSetter(Konva.Text,"textDecoration",""),Konva.Collection.mapMethods(Konva.Text)}(),function(){"use strict";Konva.Line=function(t){this.___init(t)},Konva.Line.prototype={___init:function(t){Konva.Shape.call(this,t),this.className="Line",this.on("pointsChange.konva tensionChange.konva closedChange.konva bezierChange.konva",function(){this._clearCache("tensionPoints")}),this.sceneFunc(this._sceneFunc)},_sceneFunc:function(t){var e,n,i,a=this.getPoints(),r=a.length,o=this.getTension(),s=this.getClosed(),h=this.getBezier();if(r){if(t.beginPath(),t.moveTo(a[0],a[1]),0!==o&&r>4){for(n=(e=this.getTensionPoints()).length,i=s?0:4,s||t.quadraticCurveTo(e[0],e[1],e[2],e[3]);ih?s:h,v=s>h?1:s/h,g=s>h?h/s:1;t.translate(r,o),t.rotate(d),t.scale(v,g),t.arc(0,0,f,c,c+l,1-u),t.scale(1/v,1/g),t.rotate(-d),t.translate(-r,-o);break;case"z":t.closePath()}}t.fillStrokeShape(this)},getSelfRect:function(){var t=[];this.dataArray.forEach(function(e){t=t.concat(e.points)});for(var e,n,i=t[0],a=t[0],r=t[1],o=t[1],s=0;s0&&""===l[0]&&l.shift();for(var d=0;d0&&!isNaN(l[0]);){var u,f,v,g,p,m,_,y,S,K,C=null,x=[],w=o,b=s;switch(c){case"l":o+=l.shift(),s+=l.shift(),C="L",x.push(o,s);break;case"L":o=l.shift(),s=l.shift(),x.push(o,s);break;case"m":var F=l.shift(),T=l.shift();if(o+=F,s+=T,C="M",r.length>2&&"z"===r[r.length-1].command)for(var P=r.length-2;P>=0;P--)if("M"===r[P].command){o=r[P].points[0]+F,s=r[P].points[1]+T;break}x.push(o,s),c="l";break;case"M":o=l.shift(),s=l.shift(),C="M",x.push(o,s),c="L";break;case"h":o+=l.shift(),C="L",x.push(o,s);break;case"H":o=l.shift(),C="L",x.push(o,s);break;case"v":s+=l.shift(),C="L",x.push(o,s);break;case"V":s=l.shift(),C="L",x.push(o,s);break;case"C":x.push(l.shift(),l.shift(),l.shift(),l.shift()),o=l.shift(),s=l.shift(),x.push(o,s);break;case"c":x.push(o+l.shift(),s+l.shift(),o+l.shift(),s+l.shift()),o+=l.shift(),s+=l.shift(),C="C",x.push(o,s);break;case"S":f=o,v=s,"C"===(u=r[r.length-1]).command&&(f=o+(o-u.points[2]),v=s+(s-u.points[3])),x.push(f,v,l.shift(),l.shift()),o=l.shift(),s=l.shift(),C="C",x.push(o,s);break;case"s":f=o,v=s,"C"===(u=r[r.length-1]).command&&(f=o+(o-u.points[2]),v=s+(s-u.points[3])),x.push(f,v,o+l.shift(),s+l.shift()),o+=l.shift(),s+=l.shift(),C="C",x.push(o,s);break;case"Q":x.push(l.shift(),l.shift()),o=l.shift(),s=l.shift(),x.push(o,s);break;case"q":x.push(o+l.shift(),s+l.shift()),o+=l.shift(),s+=l.shift(),C="Q",x.push(o,s);break;case"T":f=o,v=s,"Q"===(u=r[r.length-1]).command&&(f=o+(o-u.points[0]),v=s+(s-u.points[1])),o=l.shift(),s=l.shift(),C="Q",x.push(f,v,o,s);break;case"t":f=o,v=s,"Q"===(u=r[r.length-1]).command&&(f=o+(o-u.points[0]),v=s+(s-u.points[1])),o+=l.shift(),s+=l.shift(),C="Q",x.push(f,v,o,s);break;case"A":g=l.shift(),p=l.shift(),m=l.shift(),_=l.shift(),y=l.shift(),S=o,K=s,o=l.shift(),s=l.shift(),C="A",x=this.convertEndpointToCenterParameterization(S,K,o,s,_,y,g,p,m);break;case"a":g=l.shift(),p=l.shift(),m=l.shift(),_=l.shift(),y=l.shift(),S=o,K=s,o+=l.shift(),s+=l.shift(),C="A",x=this.convertEndpointToCenterParameterization(S,K,o,s,_,y,g,p,m)}r.push({command:C||c,points:x,start:{x:w,y:b},pathLength:this.calcLength(w,b,C||c,x)})}"z"!==c&&"Z"!==c||r.push({command:"z",points:[],start:void 0,pathLength:0})}return r},Konva.Path.calcLength=function(t,e,n,i){var a,r,o,s,h=Konva.Path;switch(n){case"L":return h.getLineLength(t,e,i[0],i[1]);case"C":for(a=0,r=h.getPointOnCubicBezier(0,t,e,i[0],i[1],i[2],i[3],i[4],i[5]),s=.01;s<=1;s+=.01)o=h.getPointOnCubicBezier(s,t,e,i[0],i[1],i[2],i[3],i[4],i[5]),a+=h.getLineLength(r.x,r.y,o.x,o.y),r=o;return a;case"Q":for(a=0,r=h.getPointOnQuadraticBezier(0,t,e,i[0],i[1],i[2],i[3]),s=.01;s<=1;s+=.01)o=h.getPointOnQuadraticBezier(s,t,e,i[0],i[1],i[2],i[3]),a+=h.getLineLength(r.x,r.y,o.x,o.y),r=o;return a;case"A":a=0;var c=i[4],l=i[5],d=i[4]+l,u=Math.PI/180;if(Math.abs(c-d)d;s-=u)o=h.getPointOnEllipticalArc(i[0],i[1],i[2],i[3],s,0),a+=h.getLineLength(r.x,r.y,o.x,o.y),r=o;else for(s=c+u;s1&&(o*=Math.sqrt(u),s*=Math.sqrt(u));var f=Math.sqrt((o*o*(s*s)-o*o*(d*d)-s*s*(l*l))/(o*o*(d*d)+s*s*(l*l)));a===r&&(f*=-1),isNaN(f)&&(f=0);var v=f*o*d/s,g=f*-s*l/o,p=(t+n)/2+Math.cos(c)*v-Math.sin(c)*g,m=(e+i)/2+Math.sin(c)*v+Math.cos(c)*g,_=function(t){return Math.sqrt(t[0]*t[0]+t[1]*t[1])},y=function(t,e){return(t[0]*e[0]+t[1]*e[1])/(_(t)*_(e))},S=function(t,e){return(t[0]*e[1]=1&&(w=0),0===r&&w>0&&(w-=2*Math.PI),1===r&&w<0&&(w+=2*Math.PI),[p,m,o,s,K,w,c,r]},Konva.Factory.addGetterSetter(Konva.Path,"data"),Konva.Collection.mapMethods(Konva.Path)}(),function(){"use strict";function t(t){t.fillText(this.partialText,0,0)}function e(t){t.strokeText(this.partialText,0,0)}Konva.TextPath=function(t){this.___init(t)},Konva.TextPath.prototype={___init:function(n){var i=this;this.dummyCanvas=Konva.Util.createCanvasElement(),this.dataArray=[],Konva.Shape.call(this,n),this._fillFunc=t,this._strokeFunc=e,this._fillFuncHit=t,this._strokeFuncHit=e,this.className="TextPath",this.dataArray=Konva.Path.parsePathData(this.attrs.data),this.on("dataChange.konva",function(){i.dataArray=Konva.Path.parsePathData(this.attrs.data),i._setTextData()}),this.on("textChange.konva alignChange.konva letterSpacingChange.konva",i._setTextData),i._setTextData(),this.sceneFunc(this._sceneFunc),this.hitFunc(this._hitFunc)},_sceneFunc:function(t){t.setAttr("font",this._getContextFont()),t.setAttr("textBaseline",this.getTextBaseline()),t.setAttr("textAlign","left"),t.save();var e=this.textDecoration(),n=this.fill(),i=this.fontSize(),a=this.glyphInfo;"underline"===e&&t.beginPath();for(var r=0;r=1){var n=e[0].p0;t.moveTo(n.x,n.y)}for(var i=0;i0&&(r+=t.dataArray[o].pathLength);var s=0;"center"===i&&(s=Math.max(0,r/2-a/2)),"right"===i&&(s=Math.max(0,r-a));for(var h,c,l,d=this.getText().split(""),u=this.getText().split(" ").length-1,f=-1,v=0,g=function(){v=0;for(var e=t.dataArray,n=f+1;n0)return f=n,e[n];"M"===e[n].command&&(h={x:e[n].points[0],y:e[n].points[1]})}return{}},p=function(e){var o=t._getTextSize(e).width+n;" "===e&&"justify"===i&&(o+=(r-a)/u);var s=0,d=0;for(c=void 0;Math.abs(o-s)/o>.01&&d<25;){d++;for(var f=s;void 0===l;)(l=g())&&f+l.pathLengtho?c=Konva.Path.getPointOnLine(o,h.x,h.y,l.points[0],l.points[1],h.x,h.y):l=void 0;break;case"A":var m=l.points[4],_=l.points[5],y=l.points[4]+_;0===v?v=m+1e-8:o>s?v+=Math.PI/180*_/Math.abs(_):v-=Math.PI/360*_/Math.abs(_),(_<0&&v=0&&v>y)&&(v=y,p=!0),c=Konva.Path.getPointOnEllipticalArc(l.points[0],l.points[1],l.points[2],l.points[3],v,l.points[6]);break;case"C":0===v?v=o>l.pathLength?1e-8:o/l.pathLength:o>s?v+=(o-s)/l.pathLength:v-=(s-o)/l.pathLength,v>1&&(v=1,p=!0),c=Konva.Path.getPointOnCubicBezier(v,l.start.x,l.start.y,l.points[0],l.points[1],l.points[2],l.points[3],l.points[4],l.points[5]);break;case"Q":0===v?v=o/l.pathLength:o>s?v+=(o-s)/l.pathLength:v-=(s-o)/l.pathLength,v>1&&(v=1,p=!0),c=Konva.Path.getPointOnQuadraticBezier(v,l.start.x,l.start.y,l.points[0],l.points[1],l.points[2],l.points[3])}void 0!==c&&(s=Konva.Path.getLineLength(h.x,h.y,c.x,c.y)),p&&(p=!1,l=void 0)}},m=t._getTextSize("C").width+n,_=0;_255?255:s,l[i+1]=h>255?255:h,l[i+2]=c>255?255:c,l[i+3]=l[i+3]}while(--n)}while(--u)}}(),function(){"use strict";Konva.Filters.Solarize=function(t){var e=t.data,n=t.width,i=4*n,a=t.height;do{var r=(a-1)*i,o=n;do{var s=r+4*(o-1),h=e[s],c=e[s+1],l=e[s+2];h>127&&(h=255-h),c>127&&(c=255-c),l>127&&(l=255-l),e[s]=h,e[s+1]=c,e[s+2]=l}while(--o)}while(--a)}}(),function(){"use strict";var t=function(t,e,n){var i,a,r,o,s=t.data,h=e.data,c=t.width,l=t.height,d=n.polarCenterX||c/2,u=n.polarCenterY||l/2,f=0,v=0,g=0,p=0,m=Math.sqrt(d*d+u*u);a=c-d,r=l-u,m=(o=Math.sqrt(a*a+r*r))>m?o:m;var _,y,S,K,C=l,x=c,w=360/x*Math.PI/180;for(y=0;yy?h:y;var S,K,C,x=u,w=d,b=n.polarRotation||0;for(a=0;au&&(K=S,C=0,x=-1),a=0;a0},removeChildren:function(){for(var t,e=Konva.Collection.toCollection(this.children),n=0;n1){for(var e=0;e0},destroy:function(){return t.Node.prototype.destroy.call(this),delete t.shapes[this.colorKey],this},_useBufferCanvas:function(t){return!t&&this.perfectDrawEnabled()&&1!==this.getAbsoluteOpacity()&&this.hasFill()&&this.hasStroke()&&this.getStage()||this.perfectDrawEnabled()&&this.hasShadow()&&1!==this.getAbsoluteOpacity()&&this.hasFill()&&this.hasStroke()&&this.getStage()},getSelfRect:function(){var t=this.getSize();return{x:this._centroid?Math.round(-t.width/2):0,y:this._centroid?Math.round(-t.height/2):0,width:t.width,height:t.height}},getClientRect:function(t){var e=(t=t||{}).skipTransform,n=t.relativeTo,i=this.getSelfRect(),a=this.hasStroke()&&this.strokeWidth()||0,r=i.width+a,o=i.height+a,s=this.hasShadow()?this.shadowOffsetX():0,h=this.hasShadow()?this.shadowOffsetY():0,c=r+Math.abs(s),l=o+Math.abs(h),d=this.hasShadow()&&this.shadowBlur()||0,u=c+2*d,f=l+2*d,v=0;Math.round(a/2)!==a/2&&(v=1);var g={width:u+v,height:f+v,x:-Math.round(a/2+d)+Math.min(s,0)+i.x,y:-Math.round(a/2+d)+Math.min(h,0)+i.y};return e?g:this._transformedRect(g,n)},drawScene:function(t,e,n,i){var a,r,o,s=this.getLayer(),h=t||s.getCanvas(),c=h.getContext(),l=this._cache.canvas,d=this.sceneFunc(),u=this.hasShadow(),f=this.hasStroke();if(!this.isVisible())return this;if(l)return c.save(),s._applyTransform(this,c,e),this._drawCachedSceneCanvas(c),c.restore(),this;if(!d)return this;if(c.save(),this._useBufferCanvas(n)&&!i){if(a=this.getStage(),r=a.bufferCanvas,(o=r.getContext()).clear(),o.save(),o._applyLineJoin(this),!n)if(s)s._applyTransform(this,o,e);else{var v=this.getAbsoluteTransform(e).getMatrix();c.transform(v[0],v[1],v[2],v[3],v[4],v[5])}d.call(this,o),o.restore();var g=r.pixelRatio;u&&!h.hitCanvas?(c.save(),c._applyShadow(this),c._applyOpacity(this),c._applyGlobalCompositeOperation(this),c.drawImage(r._canvas,0,0,r.width/g,r.height/g),c.restore()):(c._applyOpacity(this),c._applyGlobalCompositeOperation(this),c.drawImage(r._canvas,0,0,r.width/g,r.height/g))}else{if(c._applyLineJoin(this),!n)if(s)s._applyTransform(this,c,e);else{var p=this.getAbsoluteTransform(e).getMatrix();c.transform(p[0],p[1],p[2],p[3],p[4],p[5])}u&&f&&!h.hitCanvas?(c.save(),n||(c._applyOpacity(this),c._applyGlobalCompositeOperation(this)),c._applyShadow(this),d.call(this,c),c.restore(),this.hasFill()&&this.getShadowForStrokeEnabled()&&d.call(this,c)):u&&!h.hitCanvas?(c.save(),n||(c._applyOpacity(this),c._applyGlobalCompositeOperation(this)),c._applyShadow(this),d.call(this,c),c.restore()):(n||(c._applyOpacity(this),c._applyGlobalCompositeOperation(this)),d.call(this,c))}return c.restore(),this},drawHit:function(t,e,n){var i=this.getLayer(),a=t||i.hitCanvas,r=a.getContext(),o=this.hitFunc()||this.sceneFunc(),s=this._cache.canvas,h=s&&s.hit;if(!this.shouldDrawHit(a))return this;if(i&&i.clearHitCache(),h)return r.save(),i._applyTransform(this,r,e),this._drawCachedHitCanvas(r),r.restore(),this;if(!o)return this;if(r.save(),r._applyLineJoin(this),!n)if(i)i._applyTransform(this,r,e);else{var c=this.getAbsoluteTransform(e).getMatrix();r.transform(c[0],c[1],c[2],c[3],c[4],c[5])}return o.call(this,r),r.restore(),this},drawHitFromCache:function(e){var n,i,a,r,o,s=e||0,h=this._cache.canvas,c=this._getCachedSceneCanvas(),l=h.hit,d=l.getContext(),u=l.getWidth(),f=l.getHeight();d.clear(),d.drawImage(c._canvas,0,0,u,f);try{for(a=(i=(n=d.getImageData(0,0,u,f)).data).length,r=t.Util._hexToRgb(this.colorKey),o=0;os?(i[o]=r.r,i[o+1]=r.g,i[o+2]=r.b,i[o+3]=255):i[o+3]=0;d.putImageData(n,0,0)}catch(e){t.Util.error("Unable to draw hit graph from cached scene canvas. "+e.message)}return this}}),t.Util.extend(t.Shape,t.Node),t.Factory.addGetterSetter(t.Shape,"stroke"),t.Factory.addDeprecatedGetterSetter(t.Shape,"strokeRed",0,t.Validators.RGBComponent),t.Factory.addDeprecatedGetterSetter(t.Shape,"strokeGreen",0,t.Validators.RGBComponent),t.Factory.addDeprecatedGetterSetter(t.Shape,"strokeBlue",0,t.Validators.RGBComponent),t.Factory.addDeprecatedGetterSetter(t.Shape,"strokeAlpha",1,t.Validators.alphaComponent),t.Factory.addGetterSetter(t.Shape,"strokeWidth",2),t.Factory.addGetterSetter(t.Shape,"strokeHitEnabled",!0),t.Factory.addGetterSetter(t.Shape,"perfectDrawEnabled",!0),t.Factory.addGetterSetter(t.Shape,"shadowForStrokeEnabled",!0),t.Factory.addGetterSetter(t.Shape,"lineJoin"),t.Factory.addGetterSetter(t.Shape,"lineCap"),t.Factory.addGetterSetter(t.Shape,"sceneFunc"),t.Factory.addGetterSetter(t.Shape,"hitFunc"),t.Factory.addGetterSetter(t.Shape,"dash"),t.Factory.addGetterSetter(t.Shape,"dashOffset",0),t.Factory.addGetterSetter(t.Shape,"shadowColor"),t.Factory.addDeprecatedGetterSetter(t.Shape,"shadowRed",0,t.Validators.RGBComponent),t.Factory.addDeprecatedGetterSetter(t.Shape,"shadowGreen",0,t.Validators.RGBComponent),t.Factory.addDeprecatedGetterSetter(t.Shape,"shadowBlue",0,t.Validators.RGBComponent),t.Factory.addDeprecatedGetterSetter(t.Shape,"shadowAlpha",1,t.Validators.alphaComponent),t.Factory.addGetterSetter(t.Shape,"shadowBlur"),t.Factory.addGetterSetter(t.Shape,"shadowOpacity"),t.Factory.addComponentsGetterSetter(t.Shape,"shadowOffset",["x","y"]),t.Factory.addGetterSetter(t.Shape,"shadowOffsetX",0),t.Factory.addGetterSetter(t.Shape,"shadowOffsetY",0),t.Factory.addGetterSetter(t.Shape,"fillPatternImage"),t.Factory.addGetterSetter(t.Shape,"fill"),t.Factory.addDeprecatedGetterSetter(t.Shape,"fillRed",0,t.Validators.RGBComponent),t.Factory.addDeprecatedGetterSetter(t.Shape,"fillGreen",0,t.Validators.RGBComponent),t.Factory.addDeprecatedGetterSetter(t.Shape,"fillBlue",0,t.Validators.RGBComponent),t.Factory.addDeprecatedGetterSetter(t.Shape,"fillAlpha",1,t.Validators.alphaComponent),t.Factory.addGetterSetter(t.Shape,"fillPatternX",0),t.Factory.addGetterSetter(t.Shape,"fillPatternY",0),t.Factory.addGetterSetter(t.Shape,"fillLinearGradientColorStops"),t.Factory.addGetterSetter(t.Shape,"fillRadialGradientStartRadius",0),t.Factory.addGetterSetter(t.Shape,"fillRadialGradientEndRadius",0),t.Factory.addGetterSetter(t.Shape,"fillRadialGradientColorStops"),t.Factory.addGetterSetter(t.Shape,"fillPatternRepeat","repeat"),t.Factory.addGetterSetter(t.Shape,"fillEnabled",!0),t.Factory.addGetterSetter(t.Shape,"strokeEnabled",!0),t.Factory.addGetterSetter(t.Shape,"shadowEnabled",!0),t.Factory.addGetterSetter(t.Shape,"dashEnabled",!0),t.Factory.addGetterSetter(t.Shape,"strokeScaleEnabled",!0),t.Factory.addGetterSetter(t.Shape,"fillPriority","color"),t.Factory.addComponentsGetterSetter(t.Shape,"fillPatternOffset",["x","y"]),t.Factory.addGetterSetter(t.Shape,"fillPatternOffsetX",0),t.Factory.addGetterSetter(t.Shape,"fillPatternOffsetY",0),t.Factory.addComponentsGetterSetter(t.Shape,"fillPatternScale",["x","y"]),t.Factory.addGetterSetter(t.Shape,"fillPatternScaleX",1),t.Factory.addGetterSetter(t.Shape,"fillPatternScaleY",1),t.Factory.addComponentsGetterSetter(t.Shape,"fillLinearGradientStartPoint",["x","y"]),t.Factory.addGetterSetter(t.Shape,"fillLinearGradientStartPointX",0),t.Factory.addGetterSetter(t.Shape,"fillLinearGradientStartPointY",0),t.Factory.addComponentsGetterSetter(t.Shape,"fillLinearGradientEndPoint",["x","y"]),t.Factory.addGetterSetter(t.Shape,"fillLinearGradientEndPointX",0),t.Factory.addGetterSetter(t.Shape,"fillLinearGradientEndPointY",0),t.Factory.addComponentsGetterSetter(t.Shape,"fillRadialGradientStartPoint",["x","y"]),t.Factory.addGetterSetter(t.Shape,"fillRadialGradientStartPointX",0),t.Factory.addGetterSetter(t.Shape,"fillRadialGradientStartPointY",0),t.Factory.addComponentsGetterSetter(t.Shape,"fillRadialGradientEndPoint",["x","y"]),t.Factory.addGetterSetter(t.Shape,"fillRadialGradientEndPointX",0),t.Factory.addGetterSetter(t.Shape,"fillRadialGradientEndPointY",0),t.Factory.addGetterSetter(t.Shape,"fillPatternRotation",0),t.Factory.backCompat(t.Shape,{dashArray:"dash",getDashArray:"getDash",setDashArray:"getDash",drawFunc:"sceneFunc",getDrawFunc:"getSceneFunc",setDrawFunc:"setSceneFunc",drawHitFunc:"hitFunc",getDrawHitFunc:"getHitFunc",setDrawHitFunc:"setHitFunc"}),t.Collection.mapMethods(t.Shape)}(Konva),function(){"use strict";function t(t,n){t.content.addEventListener(n,function(i){t[e+n](i)},!1)}var e="_",n=["mousedown","mousemove","mouseup","mouseout","touchstart","touchmove","touchend","mouseover","wheel","contextmenu"],i=n.length;Konva.Stage=function(t){this.___init(t)},Konva.Util.addMethods(Konva.Stage,{___init:function(t){this.nodeType="Stage",Konva.Container.call(this,t),this._id=Konva.idCounter++,this._buildDOM(),this._bindContentEvents(),this._enableNestedTransforms=!1,Konva.stages.push(this)},_validateAdd:function(t){"Layer"!==t.getType()&&Konva.Util.throw("You may only add layers to the stage.")},setContainer:function(t){if("string"==typeof t){if("."===t.charAt(0)){var e=t.slice(1);t=Konva.document.getElementsByClassName(e)[0]}else{var n;n="#"!==t.charAt(0)?t:t.slice(1),t=Konva.document.getElementById(n)}if(!t)throw"Can not find container in document with id "+n}return this._setAttr("container",t),this},shouldDrawHit:function(){return!0},draw:function(){return Konva.Node.prototype.draw.call(this),this},setHeight:function(t){return Konva.Node.prototype.setHeight.call(this,t),this._resizeDOM(),this},setWidth:function(t){return Konva.Node.prototype.setWidth.call(this,t),this._resizeDOM(),this},clear:function(){var t,e=this.children,n=e.length;for(t=0;t-1&&Konva.stages.splice(e,1),this},getPointerPosition:function(){return this.pointerPos},getStage:function(){return this},getContent:function(){return this.content},toDataURL:function(t){var e=(t=t||{}).mimeType||null,n=t.quality||null,i=t.x||0,a=t.y||0,r=new Konva.SceneCanvas({width:t.width||this.getWidth(),height:t.height||this.getHeight(),pixelRatio:t.pixelRatio}),o=r.getContext()._context,s=this.children;(i||a)&&o.translate(-1*i,-1*a),s.each(function(t){var e=t.getCanvas().getWidth(),n=t.getCanvas().getHeight(),i=t.getCanvas().getPixelRatio();o.drawImage(t.getCanvas()._canvas,0,0,e/i,n/i)});var h=r.toDataURL(e,n);return t.callback&&t.callback(h),h},toImage:function(t){var e=t.callback;t.callback=function(t){Konva.Util._getImage(t,function(t){e(t)})},this.toDataURL(t)},getIntersection:function(t,e){var n,i,a=this.getChildren();for(n=a.length-1;n>=0;n--)if(i=a[n].getIntersection(t,e))return i;return null},_resizeDOM:function(){if(this.content){var t,e,n=this.getWidth(),i=this.getHeight(),a=this.getChildren(),r=a.length;for(this.content.style.width=n+"px",this.content.style.height=i+"px",this.bufferCanvas.setSize(n,i),this.bufferHitCanvas.setSize(n,i),t=0;t1){for(var e=0;e0){var a=t.touches[0];n=a.clientX-e.left,i=a.clientY-e.top}}else n=t.clientX-e.left,i=t.clientY-e.top;null!==n&&null!==i&&(this.pointerPos={x:n,y:i})},_getContentPosition:function(){var t=this.content.getBoundingClientRect?this.content.getBoundingClientRect():{top:0,left:0};return{top:t.top,left:t.left}},_buildDOM:function(){if(this.bufferCanvas=new Konva.SceneCanvas,this.bufferHitCanvas=new Konva.HitCanvas({pixelRatio:1}),Konva.isBrowser){var t=this.getContainer();if(!t)throw"Stage has no container. A container is required.";t.innerHTML="",this.content=Konva.document.createElement("div"),this.content.style.position="relative",this.content.className="konvajs-content",this.content.setAttribute("role","presentation"),t.appendChild(this.content),this._resizeDOM()}},_onContent:function(t,e){var n,i,a=t.split(" "),r=a.length;for(n=0;n0?{antialiased:!0}:{}},drawScene:function(t,e){var n=this.getLayer(),i=t||n&&n.getCanvas();return this._fire("beforeDraw",{node:this}),this.getClearBeforeDraw()&&i.getContext().clear(),Konva.Container.prototype.drawScene.call(this,i,e),this._fire("draw",{node:this}),this},drawHit:function(t,e){var n=this.getLayer(),i=t||n&&n.hitCanvas;return n&&n.getClearBeforeDraw()&&n.getHitCanvas().getContext().clear(),Konva.Container.prototype.drawHit.call(this,i,e),this.imageData=null,this},clear:function(t){return Konva.BaseLayer.prototype.clear.call(this,t),this.getHitCanvas().getContext().clear(t),this.imageData=null,this},setVisible:function(t){return Konva.Node.prototype.setVisible.call(this,t),t?(this.getCanvas()._canvas.style.display="block",this.hitCanvas._canvas.style.display="block"):(this.getCanvas()._canvas.style.display="none",this.hitCanvas._canvas.style.display="none"),this},enableHitGraph:function(){return this.setHitGraphEnabled(!0),this},disableHitGraph:function(){return this.setHitGraphEnabled(!1),this},setSize:function(t,e){return Konva.BaseLayer.prototype.setSize.call(this,t,e),this.hitCanvas.setSize(t,e),this}}),Konva.Util.extend(Konva.Layer,Konva.BaseLayer),Konva.Factory.addGetterSetter(Konva.Layer,"hitGraphEnabled",!0),Konva.Collection.mapMethods(Konva.Layer)}(),function(){"use strict";Konva.FastLayer=function(t){this.____init(t)},Konva.Util.addMethods(Konva.FastLayer,{____init:function(t){this.nodeType="Layer",this.canvas=new Konva.SceneCanvas,Konva.BaseLayer.call(this,t)},_validateAdd:function(t){"Shape"!==t.getType()&&Konva.Util.throw("You may only add shapes to a fast layer.")},_setCanvasSize:function(t,e){this.canvas.setSize(t,e)},hitGraphEnabled:function(){return!1},getIntersection:function(){return null},drawScene:function(t){var e=this.getLayer(),n=t||e&&e.getCanvas();return this.getClearBeforeDraw()&&n.getContext().clear(),Konva.Container.prototype.drawScene.call(this,n),this},draw:function(){return this.drawScene(),this},setVisible:function(t){return Konva.Node.prototype.setVisible.call(this,t),this.getCanvas()._canvas.style.display=t?"block":"none",this}}),Konva.Util.extend(Konva.FastLayer,Konva.BaseLayer),Konva.Collection.mapMethods(Konva.FastLayer)}(),function(){"use strict";Konva.Group=function(t){this.___init(t)},Konva.Util.addMethods(Konva.Group,{___init:function(t){this.nodeType="Group",Konva.Container.call(this,t)},_validateAdd:function(t){var e=t.getType();"Group"!==e&&"Shape"!==e&&Konva.Util.throw("You may only add groups and shapes to groups.")}}),Konva.Util.extend(Konva.Group,Konva.Container),Konva.Collection.mapMethods(Konva.Group)}(),function(t){"use strict";function e(t){setTimeout(t,1e3/60)}function n(){return a.apply(t.global,arguments)}var i=t.global.performance&&t.global.performance.now?function(){return t.global.performance.now()}:function(){return(new Date).getTime()},a=t.global.requestAnimationFrame||t.global.webkitRequestAnimationFrame||t.global.mozRequestAnimationFrame||t.global.oRequestAnimationFrame||t.global.msRequestAnimationFrame||e;t.Animation=function(e,n){var a=t.Animation;this.func=e,this.setLayers(n),this.id=a.animIdCounter++,this.frame={time:0,timeDiff:0,lastTime:i()}},t.Animation.prototype={setLayers:function(t){var e=[];return e=t?t.length>0?t:[t]:[],this.layers=e,this},getLayers:function(){return this.layers},addLayer:function(t){var e,n=this.layers,i=n.length;for(e=0;ethis.duration?this.yoyo?(this._time=this.duration,this.reverse()):this.finish():t<0?this.yoyo?(this._time=0,this.play()):this.reset():(this._time=t,this.update())},getTime:function(){return this._time},setPosition:function(t){this.prevPos=this._pos,this.propFunc(t),this._pos=t},getPosition:function(t){return void 0===t&&(t=this._time),this.func(t,this.begin,this._change,this.duration)},play:function(){this.state=2,this._startTime=this.getTimer()-this._time,this.onEnterFrame(),this.fire("onPlay")},reverse:function(){this.state=3,this._time=this.duration-this._time,this._startTime=this.getTimer()-this._time,this.onEnterFrame(),this.fire("onReverse")},seek:function(t){this.pause(),this._time=t,this.update(),this.fire("onSeek")},reset:function(){this.pause(),this._time=0,this.update(),this.fire("onReset")},finish:function(){this.pause(),this._time=this.duration,this.update(),this.fire("onFinish")},update:function(){this.setPosition(this.getPosition(this._time))},onEnterFrame:function(){var t=this.getTimer()-this._startTime;2===this.state?this.setTime(t):3===this.state&&this.setTime(this.duration-t)},pause:function(){this.state=1,this.fire("onPause")},getTimer:function(){return(new Date).getTime()}},Konva.Tween=function(n){var a,r,o=this,s=n.node,h=s._id,c=n.easing||Konva.Easings.Linear,l=!!n.yoyo;a=void 0===n.duration?1:0===n.duration?.001:n.duration,this.node=s,this._id=e++;var d=s.getLayer()||(s instanceof Konva.Stage?s.getLayers():null);d||Konva.Util.error("Tween constructor have `node` that is not in a layer. Please add node into layer first."),this.anim=new Konva.Animation(function(){o.tween.onEnterFrame()},d),this.tween=new i(r,function(t){o._tweenFunc(t)},c,0,1,1e3*a,l),this._addListeners(),Konva.Tween.attrs[h]||(Konva.Tween.attrs[h]={}),Konva.Tween.attrs[h][this._id]||(Konva.Tween.attrs[h][this._id]={}),Konva.Tween.tweens[h]||(Konva.Tween.tweens[h]={});for(r in n)void 0===t[r]&&this._addAttr(r,n[r]);this.reset(),this.onFinish=n.onFinish,this.onReset=n.onReset},Konva.Tween.attrs={},Konva.Tween.tweens={},Konva.Tween.prototype={_addAttr:function(t,e){var i,a,r,o,s,h,c,l=this.node,d=l._id;if((r=Konva.Tween.tweens[d][t])&&delete Konva.Tween.attrs[d][r][t],i=l.getAttr(t),Konva.Util._isArray(e))for(a=[],s=Math.max(e.length,i.length),"points"===t&&e.length!==i.length&&(e.length>i.length?(c=i,i=Konva.Util._prepareArrayForTween(i,e,l.closed())):(h=e,e=Konva.Util._prepareArrayForTween(e,i,l.closed()))),o=0;ol)for(;_.length>0;){for(var S=0,K=_.length,C="",x=0;S>>1,b=_.slice(0,w+1),F=this._getTextWidth(b);F<=l?(S=w+1,C=b,x=F):K=w}if(!C)break;if(g){var T=Math.max(C.lastIndexOf(" "),C.lastIndexOf("-"))+1;T>0&&(S=T,C=C.slice(0,S),x=this._getTextWidth(C))}if(this._addTextLine(C),i=Math.max(i,x),u+=a,!v||h&&u+a>d)break;if((_=_.slice(S)).length>0&&(y=this._getTextWidth(_))<=l){this._addTextLine(_),u+=a,i=Math.max(i,y);break}}else this._addTextLine(_),u+=a,i=Math.max(i,y);if(h&&u+a>d)break}t().restore(),this.textHeight=n,this.textWidth=i}},Konva.Util.extend(Konva.Text,Konva.Shape),Konva.Factory.addGetterSetter(Konva.Text,"fontFamily","Arial"),Konva.Factory.addGetterSetter(Konva.Text,"fontSize",12),Konva.Factory.addGetterSetter(Konva.Text,"fontStyle","normal"),Konva.Factory.addGetterSetter(Konva.Text,"fontVariant","normal"),Konva.Factory.addGetterSetter(Konva.Text,"padding",0),Konva.Factory.addGetterSetter(Konva.Text,"align","left"),Konva.Factory.addGetterSetter(Konva.Text,"lineHeight",1),Konva.Factory.addGetterSetter(Konva.Text,"wrap","word"),Konva.Factory.addGetterSetter(Konva.Text,"letterSpacing",0),Konva.Factory.addGetter(Konva.Text,"text",""),Konva.Factory.addOverloadedGetterSetter(Konva.Text,"text"),Konva.Factory.addGetterSetter(Konva.Text,"textDecoration",""),Konva.Collection.mapMethods(Konva.Text)}(),function(){"use strict";Konva.Line=function(t){this.___init(t)},Konva.Line.prototype={___init:function(t){Konva.Shape.call(this,t),this.className="Line",this.on("pointsChange.konva tensionChange.konva closedChange.konva bezierChange.konva",function(){this._clearCache("tensionPoints")}),this.sceneFunc(this._sceneFunc)},_sceneFunc:function(t){var e,n,i,a=this.getPoints(),r=a.length,o=this.getTension(),s=this.getClosed(),h=this.getBezier();if(r){if(t.beginPath(),t.moveTo(a[0],a[1]),0!==o&&r>4){for(n=(e=this.getTensionPoints()).length,i=s?0:4,s||t.quadraticCurveTo(e[0],e[1],e[2],e[3]);ih?s:h,v=s>h?1:s/h,g=s>h?h/s:1;t.translate(r,o),t.rotate(d),t.scale(v,g),t.arc(0,0,f,c,c+l,1-u),t.scale(1/v,1/g),t.rotate(-d),t.translate(-r,-o);break;case"z":t.closePath()}}t.fillStrokeShape(this)},getSelfRect:function(){var t=[];this.dataArray.forEach(function(e){t=t.concat(e.points)});for(var e,n,i=t[0],a=t[0],r=t[1],o=t[1],s=0;s0&&""===l[0]&&l.shift();for(var d=0;d0&&!isNaN(l[0]);){var u,f,v,g,p,m,_,y,S,K,C=null,x=[],w=o,b=s;switch(c){case"l":o+=l.shift(),s+=l.shift(),C="L",x.push(o,s);break;case"L":o=l.shift(),s=l.shift(),x.push(o,s);break;case"m":var F=l.shift(),T=l.shift();if(o+=F,s+=T,C="M",r.length>2&&"z"===r[r.length-1].command)for(var P=r.length-2;P>=0;P--)if("M"===r[P].command){o=r[P].points[0]+F,s=r[P].points[1]+T;break}x.push(o,s),c="l";break;case"M":o=l.shift(),s=l.shift(),C="M",x.push(o,s),c="L";break;case"h":o+=l.shift(),C="L",x.push(o,s);break;case"H":o=l.shift(),C="L",x.push(o,s);break;case"v":s+=l.shift(),C="L",x.push(o,s);break;case"V":s=l.shift(),C="L",x.push(o,s);break;case"C":x.push(l.shift(),l.shift(),l.shift(),l.shift()),o=l.shift(),s=l.shift(),x.push(o,s);break;case"c":x.push(o+l.shift(),s+l.shift(),o+l.shift(),s+l.shift()),o+=l.shift(),s+=l.shift(),C="C",x.push(o,s);break;case"S":f=o,v=s,"C"===(u=r[r.length-1]).command&&(f=o+(o-u.points[2]),v=s+(s-u.points[3])),x.push(f,v,l.shift(),l.shift()),o=l.shift(),s=l.shift(),C="C",x.push(o,s);break;case"s":f=o,v=s,"C"===(u=r[r.length-1]).command&&(f=o+(o-u.points[2]),v=s+(s-u.points[3])),x.push(f,v,o+l.shift(),s+l.shift()),o+=l.shift(),s+=l.shift(),C="C",x.push(o,s);break;case"Q":x.push(l.shift(),l.shift()),o=l.shift(),s=l.shift(),x.push(o,s);break;case"q":x.push(o+l.shift(),s+l.shift()),o+=l.shift(),s+=l.shift(),C="Q",x.push(o,s);break;case"T":f=o,v=s,"Q"===(u=r[r.length-1]).command&&(f=o+(o-u.points[0]),v=s+(s-u.points[1])),o=l.shift(),s=l.shift(),C="Q",x.push(f,v,o,s);break;case"t":f=o,v=s,"Q"===(u=r[r.length-1]).command&&(f=o+(o-u.points[0]),v=s+(s-u.points[1])),o+=l.shift(),s+=l.shift(),C="Q",x.push(f,v,o,s);break;case"A":g=l.shift(),p=l.shift(),m=l.shift(),_=l.shift(),y=l.shift(),S=o,K=s,o=l.shift(),s=l.shift(),C="A",x=this.convertEndpointToCenterParameterization(S,K,o,s,_,y,g,p,m);break;case"a":g=l.shift(),p=l.shift(),m=l.shift(),_=l.shift(),y=l.shift(),S=o,K=s,o+=l.shift(),s+=l.shift(),C="A",x=this.convertEndpointToCenterParameterization(S,K,o,s,_,y,g,p,m)}r.push({command:C||c,points:x,start:{x:w,y:b},pathLength:this.calcLength(w,b,C||c,x)})}"z"!==c&&"Z"!==c||r.push({command:"z",points:[],start:void 0,pathLength:0})}return r},Konva.Path.calcLength=function(t,e,n,i){var a,r,o,s,h=Konva.Path;switch(n){case"L":return h.getLineLength(t,e,i[0],i[1]);case"C":for(a=0,r=h.getPointOnCubicBezier(0,t,e,i[0],i[1],i[2],i[3],i[4],i[5]),s=.01;s<=1;s+=.01)o=h.getPointOnCubicBezier(s,t,e,i[0],i[1],i[2],i[3],i[4],i[5]),a+=h.getLineLength(r.x,r.y,o.x,o.y),r=o;return a;case"Q":for(a=0,r=h.getPointOnQuadraticBezier(0,t,e,i[0],i[1],i[2],i[3]),s=.01;s<=1;s+=.01)o=h.getPointOnQuadraticBezier(s,t,e,i[0],i[1],i[2],i[3]),a+=h.getLineLength(r.x,r.y,o.x,o.y),r=o;return a;case"A":a=0;var c=i[4],l=i[5],d=i[4]+l,u=Math.PI/180;if(Math.abs(c-d)d;s-=u)o=h.getPointOnEllipticalArc(i[0],i[1],i[2],i[3],s,0),a+=h.getLineLength(r.x,r.y,o.x,o.y),r=o;else for(s=c+u;s1&&(o*=Math.sqrt(u),s*=Math.sqrt(u));var f=Math.sqrt((o*o*(s*s)-o*o*(d*d)-s*s*(l*l))/(o*o*(d*d)+s*s*(l*l)));a===r&&(f*=-1),isNaN(f)&&(f=0);var v=f*o*d/s,g=f*-s*l/o,p=(t+n)/2+Math.cos(c)*v-Math.sin(c)*g,m=(e+i)/2+Math.sin(c)*v+Math.cos(c)*g,_=function(t){return Math.sqrt(t[0]*t[0]+t[1]*t[1])},y=function(t,e){return(t[0]*e[0]+t[1]*e[1])/(_(t)*_(e))},S=function(t,e){return(t[0]*e[1]=1&&(w=0),0===r&&w>0&&(w-=2*Math.PI),1===r&&w<0&&(w+=2*Math.PI),[p,m,o,s,K,w,c,r]},Konva.Factory.addGetterSetter(Konva.Path,"data"),Konva.Collection.mapMethods(Konva.Path)}(),function(){"use strict";function t(t){t.fillText(this.partialText,0,0)}function e(t){t.strokeText(this.partialText,0,0)}Konva.TextPath=function(t){this.___init(t)},Konva.TextPath.prototype={___init:function(n){var i=this;this.dummyCanvas=Konva.Util.createCanvasElement(),this.dataArray=[],Konva.Shape.call(this,n),this._fillFunc=t,this._strokeFunc=e,this._fillFuncHit=t,this._strokeFuncHit=e,this.className="TextPath",this.dataArray=Konva.Path.parsePathData(this.attrs.data),this.on("dataChange.konva",function(){i.dataArray=Konva.Path.parsePathData(this.attrs.data),i._setTextData()}),this.on("textChange.konva alignChange.konva letterSpacingChange.konva",i._setTextData),i._setTextData(),this.sceneFunc(this._sceneFunc),this.hitFunc(this._hitFunc)},_sceneFunc:function(t){t.setAttr("font",this._getContextFont()),t.setAttr("textBaseline",this.getTextBaseline()),t.setAttr("textAlign","left"),t.save();var e=this.textDecoration(),n=this.fill(),i=this.fontSize(),a=this.glyphInfo;"underline"===e&&t.beginPath();for(var r=0;r=1){var n=e[0].p0;t.moveTo(n.x,n.y)}for(var i=0;i0&&(r+=t.dataArray[o].pathLength);var s=0;"center"===i&&(s=Math.max(0,r/2-a/2)),"right"===i&&(s=Math.max(0,r-a));for(var h,c,l,d=this.getText().split(""),u=this.getText().split(" ").length-1,f=-1,v=0,g=function(){v=0;for(var e=t.dataArray,n=f+1;n0)return f=n,e[n];"M"===e[n].command&&(h={x:e[n].points[0],y:e[n].points[1]})}return{}},p=function(e){var o=t._getTextSize(e).width+n;" "===e&&"justify"===i&&(o+=(r-a)/u);var s=0,d=0;for(c=void 0;Math.abs(o-s)/o>.01&&d<25;){d++;for(var f=s;void 0===l;)(l=g())&&f+l.pathLengtho?c=Konva.Path.getPointOnLine(o,h.x,h.y,l.points[0],l.points[1],h.x,h.y):l=void 0;break;case"A":var m=l.points[4],_=l.points[5],y=l.points[4]+_;0===v?v=m+1e-8:o>s?v+=Math.PI/180*_/Math.abs(_):v-=Math.PI/360*_/Math.abs(_),(_<0&&v=0&&v>y)&&(v=y,p=!0),c=Konva.Path.getPointOnEllipticalArc(l.points[0],l.points[1],l.points[2],l.points[3],v,l.points[6]);break;case"C":0===v?v=o>l.pathLength?1e-8:o/l.pathLength:o>s?v+=(o-s)/l.pathLength:v-=(s-o)/l.pathLength,v>1&&(v=1,p=!0),c=Konva.Path.getPointOnCubicBezier(v,l.start.x,l.start.y,l.points[0],l.points[1],l.points[2],l.points[3],l.points[4],l.points[5]);break;case"Q":0===v?v=o/l.pathLength:o>s?v+=(o-s)/l.pathLength:v-=(s-o)/l.pathLength,v>1&&(v=1,p=!0),c=Konva.Path.getPointOnQuadraticBezier(v,l.start.x,l.start.y,l.points[0],l.points[1],l.points[2],l.points[3])}void 0!==c&&(s=Konva.Path.getLineLength(h.x,h.y,c.x,c.y)),p&&(p=!1,l=void 0)}},m=t._getTextSize("C").width+n,_=0;_