From 9cef088d249561498f4365123feae7fbc95d10fc Mon Sep 17 00:00:00 2001 From: Anton Lavrenov Date: Thu, 18 Jul 2019 07:55:22 +0700 Subject: [PATCH] Fix wrong double tap trigger --- CHANGELOG.md | 4 +- konva-node/demo.js | 1 + konva.js | 9 ++-- konva.min.js | 4 +- src/Stage.ts | 6 ++- test/functional/TouchEvents-test.js | 72 ++++++++++++++++++++++++++++- 6 files changed, 85 insertions(+), 11 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index cdd59597..01eec146 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,7 +5,9 @@ This project adheres to [Semantic Versioning](http://semver.org/). ## Not released: --- +## [3.4.1][2019-07-18] + +* Fix wrong double tap trigger ## [3.4.0][2019-07-12] diff --git a/konva-node/demo.js b/konva-node/demo.js index 81edfb84..0df28daf 100644 --- a/konva-node/demo.js +++ b/konva-node/demo.js @@ -64,6 +64,7 @@ setTimeout(function() { }); // now try to create image from url Konva.Image.fromURL(data, () => { + console.log('image loaded'); // shoul'd throw }); } diff --git a/konva.js b/konva.js index 206d5ac1..7567fdaa 100644 --- a/konva.js +++ b/konva.js @@ -8,7 +8,7 @@ * Konva JavaScript Framework v3.4.0 * http://konvajs.org/ * Licensed under the MIT - * Date: Fri Jul 12 2019 + * Date: Thu Jul 18 2019 * * Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS) * Modified work Copyright (C) 2014 - present by Anton Lavrenov (Konva) @@ -5975,7 +5975,7 @@ clickStartShape && clickStartShape._id === shape._id) { shape._fireAndBubble(CLICK, { evt: evt }); - if (fireDblClick && clickEndShape && clickEndShape._id === shape._id) { + if (fireDblClick && clickEndShape && clickEndShape === shape) { shape._fireAndBubble(DBL_CLICK, { evt: evt }); } } @@ -6047,7 +6047,7 @@ }; Stage.prototype._touchend = function (evt) { this.setPointersPositions(evt); - var shape = this.getIntersection(this.getPointerPosition()), fireDblClick = false; + var shape = this.getIntersection(this.getPointerPosition()), clickEndShape = this.clickEndShape, fireDblClick = false; if (Konva.inDblClickWindow) { fireDblClick = true; clearTimeout(this.dblTimeout); @@ -6061,13 +6061,14 @@ Konva.inDblClickWindow = false; }, Konva.dblClickWindow); if (shape && shape.isListening()) { + this.clickEndShape = shape; shape._fireAndBubble(TOUCHEND, { evt: evt }); // detect if tap or double tap occurred if (Konva.listenClickTap && this.tapStartShape && shape._id === this.tapStartShape._id) { shape._fireAndBubble(TAP, { evt: evt }); - if (fireDblClick) { + if (fireDblClick && clickEndShape && clickEndShape === shape) { shape._fireAndBubble(DBL_TAP, { evt: evt }); } } diff --git a/konva.min.js b/konva.min.js index c4f839c3..6c15f9c2 100644 --- a/konva.min.js +++ b/konva.min.js @@ -3,10 +3,10 @@ * Konva JavaScript Framework v3.4.0 * http://konvajs.org/ * Licensed under the MIT - * Date: Fri Jul 12 2019 + * Date: Thu Jul 18 2019 * * Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS) * Modified work Copyright (C) 2014 - present by Anton Lavrenov (Konva) * * @license - */var e=Math.PI/180;var t=function(t){var e=t.toLowerCase(),i=/(chrome)[ /]([\w.]+)/.exec(e)||/(webkit)[ /]([\w.]+)/.exec(e)||/(opera)(?:.*version|)[ /]([\w.]+)/.exec(e)||/(msie) ([\w.]+)/.exec(e)||e.indexOf("compatible")<0&&/(mozilla)(?:.*? rv:([\w.]+)|)/.exec(e)||[],n=!!t.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i),r=!!t.match(/IEMobile/i);return{browser:i[1]||"",version:i[2]||"0",isIE:function(t){var e=t.indexOf("msie ");if(0>16&255,g:e>>8&255,b:255&e}},getRandomColor:function(){for(var t=(16777215*Math.random()<<0).toString(16);t.length<6;)t="0"+t;return"#"+t},get:function(t,e){return void 0===t?e:t},getRGB:function(t){var e;return t in l?{r:(e=l[t])[0],g:e[1],b:e[2]}:"#"===t[0]?this._hexToRgb(t.substring(1)):"rgb("===t.substr(0,4)?(e=d.exec(t.replace(/ /g,"")),{r:parseInt(e[1],10),g:parseInt(e[2],10),b:parseInt(e[3],10)}):{r:0,g:0,b:0}},colorToRGBA:function(t){return t=t||"black",D._namedColorToRBA(t)||D._hex3ColorToRGBA(t)||D._hex6ColorToRGBA(t)||D._rgbColorToRGBA(t)||D._rgbaColorToRGBA(t)},_namedColorToRBA:function(t){var e=l[t.toLowerCase()];return e?{r:e[0],g:e[1],b:e[2],a:1}:null},_rgbColorToRGBA:function(t){if(0===t.indexOf("rgb(")){var e=(t=t.match(/rgb\(([^)]+)\)/)[1]).split(/ *, */).map(Number);return{r:e[0],g:e[1],b:e[2],a:1}}},_rgbaColorToRGBA:function(t){if(0===t.indexOf("rgba(")){var e=(t=t.match(/rgba\(([^)]+)\)/)[1]).split(/ *, */).map(Number);return{r:e[0],g:e[1],b:e[2],a:e[3]}}},_hex6ColorToRGBA:function(t){if("#"===t[0]&&7===t.length)return{r:parseInt(t.slice(1,3),16),g:parseInt(t.slice(3,5),16),b:parseInt(t.slice(5,7),16),a:1}},_hex3ColorToRGBA:function(t){if("#"===t[0]&&4===t.length)return{r:parseInt(t[1]+t[1],16),g:parseInt(t[2]+t[2],16),b:parseInt(t[3]+t[3],16),a:1}},haveIntersection:function(t,e){return!(e.x>t.x+t.width||e.x+e.widtht.y+t.height||e.y+e.heighte.length){var a=e;e=t,t=a}for(n=0;n=this.parent.children.length)&&D.warn("Unexpected value "+t+" for zIndex property. zIndex is just index of a node in children of its parent. Expected value is from 0 to "+(this.parent.children.length-1)+".");var e=this.index;return this.parent.children.splice(e,1),this.parent.children.splice(t,0,this),this.parent._setChildrenIndices(),this},s.prototype.getAbsoluteOpacity=function(){return this._getCache(N,this._getAbsoluteOpacity)},s.prototype._getAbsoluteOpacity=function(){var t=this.opacity(),e=this.getParent();return e&&!e._isUnderCache&&(t*=e.getAbsoluteOpacity()),t},s.prototype.moveTo=function(t){return this.getParent()!==t&&(this._remove(),t.add(this)),this},s.prototype.toObject=function(){var t,e,i,n={},r=this.getAttrs();for(t in n.attrs={},r)e=r[t],D.isObject(e)&&!D._isPlainObject(e)&&!D._isArray(e)||(i="function"==typeof this[t]&&this[t],delete r[t],(i?i.call(this):null)!==(r[t]=e)&&(n.attrs[t]=e));return n.className=this.getClassName(),D._prepareToStringify(n)},s.prototype.toJSON=function(){return JSON.stringify(this.toObject())},s.prototype.getParent=function(){return this.parent},s.prototype.findAncestors=function(t,e,i){var n=[];e&&this._isMatch(t)&&n.push(this);for(var r=this.parent;r;){if(r===i)return n;r._isMatch(t)&&n.push(r),r=r.parent}return n},s.prototype.isAncestorOf=function(t){return!1},s.prototype.findAncestor=function(t,e,i){return this.findAncestors(t,e,i)[0]},s.prototype._isMatch=function(t){if(!t)return!1;if("function"==typeof t)return t(this);var e,i,n=t.replace(/ /g,"").split(","),r=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())},t.prototype.getTime=function(){return this._time},t.prototype.setPosition=function(t){this.prevPos=this._pos,this.propFunc(t),this._pos=t},t.prototype.getPosition=function(t){return void 0===t&&(t=this._time),this.func(t,this.begin,this._change,this.duration)},t.prototype.play=function(){this.state=2,this._startTime=this.getTimer()-this._time,this.onEnterFrame(),this.fire("onPlay")},t.prototype.reverse=function(){this.state=3,this._time=this.duration-this._time,this._startTime=this.getTimer()-this._time,this.onEnterFrame(),this.fire("onReverse")},t.prototype.seek=function(t){this.pause(),this._time=t,this.update(),this.fire("onSeek")},t.prototype.reset=function(){this.pause(),this._time=0,this.update(),this.fire("onReset")},t.prototype.finish=function(){this.pause(),this._time=this.duration,this.update(),this.fire("onFinish")},t.prototype.update=function(){this.setPosition(this.getPosition(this._time))},t.prototype.onEnterFrame=function(){var t=this.getTimer()-this._startTime;2===this.state?this.setTime(t):3===this.state&&this.setTime(this.duration-t)},t.prototype.pause=function(){this.state=1,this.fire("onPause")},t.prototype.getTimer=function(){return(new Date).getTime()},t}(),ie=function(){function u(t){var e,i,n=this,r=t.node,o=r._id,a=t.easing||ne.Linear,s=!!t.yoyo;e=void 0===t.duration?.3:0===t.duration?.001:t.duration,this.node=r,this._id=$t++;var h=r.getLayer()||(r instanceof O.Stage?r.getLayers():null);for(i in h||D.error("Tween constructor have `node` that is not in a layer. Please add node into layer first."),this.anim=new I(function(){n.tween.onEnterFrame()},h),this.tween=new ee(i,function(t){n._tweenFunc(t)},a,0,1,1e3*e,s),this._addListeners(),u.attrs[o]||(u.attrs[o]={}),u.attrs[o][this._id]||(u.attrs[o][this._id]={}),u.tweens[o]||(u.tweens[o]={}),t)void 0===Zt[i]&&this._addAttr(i,t[i]);this.reset(),this.onFinish=t.onFinish,this.onReset=t.onReset}return u.prototype._addAttr=function(t,e){var i,n,r,o,a,s,h,l,c=this.node,d=c._id;if((r=u.tweens[d][t])&&delete u.attrs[d][r][t],i=c.getAttr(t),D._isArray(e))if(n=[],a=Math.max(e.length,i.length),"points"===t&&e.length!==i.length&&(e.length>i.length?(h=i,i=D._prepareArrayForTween(i,e,c.closed())):(s=e,e=D._prepareArrayForTween(e,i,c.closed()))),0===t.indexOf("fill"))for(o=0;othis.dataArray[i].pathLength;)t-=this.dataArray[i].pathLength,++i;if(i===n)return{x:(e=this.dataArray[i-1].points.slice(-2))[0],y:e[1]};if(t<.01)return{x:(e=this.dataArray[i].points.slice(0,2))[0],y:e[1]};var r=this.dataArray[i],o=r.points;switch(r.command){case"L":return u.getPointOnLine(t,r.start.x,r.start.y,o[0],o[1]);case"C":return u.getPointOnCubicBezier(t/r.pathLength,r.start.x,r.start.y,o[0],o[1],o[2],o[3],o[4],o[5]);case"Q":return u.getPointOnQuadraticBezier(t/r.pathLength,r.start.x,r.start.y,o[0],o[1],o[2],o[3]);case"A":var a=o[0],s=o[1],h=o[2],l=o[3],c=o[4],d=o[5],p=o[6];return c+=d*t/r.pathLength,u.getPointOnEllipticalArc(a,s,h,l,c,p)}return null},u.getLineLength=function(t,e,i,n){return Math.sqrt((i-t)*(i-t)+(n-e)*(n-e))},u.getPointOnLine=function(t,e,i,n,r,o,a){void 0===o&&(o=e),void 0===a&&(a=i);var s=(r-i)/(n-e+1e-8),h=Math.sqrt(t*t/(1+s*s));n>>1,P=_.slice(0,1+k),T=this._getTextWidth(P)+v;T<=l?(b=1+k,w=P+(g?"…":""),C=T):x=k}if(!w)break;if(f){var M,A=_[w.length];0<(M=(" "===A||"-"===A)&&C<=l?w.length:Math.max(w.lastIndexOf(" "),w.lastIndexOf("-"))+1)&&(b=M,w=w.slice(0,b),C=this._getTextWidth(w))}if(w=w.trimRight(),this._addTextLine(w),i=Math.max(i,C),d+=n,!u||s&&ce?g=me.getPointOnLine(e,f.x,f.y,v.points[0],v.points[1],f.x,f.y):v=void 0;break;case"A":var a=v.points[4],s=v.points[5],h=v.points[4]+s;0===m?m=a+1e-8:iv.pathLength?1e-8:e/v.pathLength:ithis.findOne(".bottom-right").x()?-1:1;e=n*this.cos*c,i=n*this.sin*c,this.findOne(".top-left").x(this.findOne(".bottom-right").x()-e),this.findOne(".top-left").y(this.findOne(".bottom-right").y()-i)}}else if("top-center"===this.movingResizer)this.findOne(".top-left").y(r.y());else if("top-right"===this.movingResizer){if(l){n=Math.sqrt(Math.pow(this.findOne(".bottom-left").x()-r.x(),2)+Math.pow(this.findOne(".bottom-left").y()-r.y(),2));c=this.findOne(".top-right").x()this.findOne(".bottom-right").x()?-1:1;e=n*this.cos*c,i=n*this.sin*c,this.findOne(".bottom-right").x(e),this.findOne(".bottom-right").y(i)}}else if("rotater"===this.movingResizer){var p=this.padding(),u=this._getNodeRect();e=r.x()-u.width/2,i=-r.y()+u.height/2;var f=Math.atan2(-i,e)+Math.PI/2;u.height<0&&(f-=Math.PI);for(var g=O.getAngle(this.rotation()),v=D._radToDeg(g)+D._radToDeg(f),y=O.getAngle(this.getNode().rotation()),m=D._degToRad(v),_=this.rotationSnaps(),S=0;S<_.length;S++){var b=O.getAngle(_[S]);Math.abs(b-D._degToRad(v))%(2*Math.PI)<.1&&(v=D._radToDeg(b),m=D._degToRad(v))}var x=p,w=p;this._fitNodeInto({rotation:O.angleDeg?v:D._degToRad(v),x:u.x+(u.width/2+p)*(Math.cos(y)-Math.cos(m))+(u.height/2+p)*(Math.sin(-y)-Math.sin(-m))-(x*Math.cos(g)+w*Math.sin(-g)),y:u.y+(u.height/2+p)*(Math.cos(y)-Math.cos(m))+(u.width/2+p)*(Math.sin(y)-Math.sin(m))-(w*Math.cos(g)+x*Math.sin(g)),width:u.width+2*p,height:u.height+2*p},t)}else console.error(new Error("Wrong position argument of selection resizer: "+this.movingResizer));if("rotater"!==this.movingResizer){var C=this.findOne(".top-left").getAbsolutePosition(this.getParent());if(this.centeredScaling()||t.altKey){var k=this.findOne(".top-left"),P=this.findOne(".bottom-right"),T=k.x(),M=k.y(),A=this.getWidth()-P.x(),G=this.getHeight()-P.y();P.move({x:-T,y:-M}),k.move({x:A,y:G}),C=k.getAbsolutePosition(this.getParent())}e=C.x,i=C.y;var R=this.findOne(".bottom-right").x()-this.findOne(".top-left").x(),L=this.findOne(".bottom-right").y()-this.findOne(".top-left").y();this._fitNodeInto({x:e+this.offsetX(),y:i+this.offsetY(),width:R,height:L},t)}},t.prototype._handleMouseUp=function(t){this._removeEvents(t)},t.prototype._removeEvents=function(t){if(this._transforming){this._transforming=!1,window.removeEventListener("mousemove",this._handleMouseMove),window.removeEventListener("touchmove",this._handleMouseMove),window.removeEventListener("mouseup",this._handleMouseUp,!0),window.removeEventListener("touchend",this._handleMouseUp,!0),this._fire("transformend",{evt:t});var e=this.getNode();e&&e.fire("transformend",{evt:t})}},t.prototype._fitNodeInto=function(t,e){var i=this.boundBoxFunc();if(i){var n=this._getNodeRect();t=i.call(this,n,t)}var r=this.getNode();void 0!==t.rotation&&this.getNode().rotation(t.rotation);var o=r.getClientRect({skipTransform:!0,skipShadow:!0,skipStroke:this.ignoreStroke()}),a=this.padding(),s=(t.width-2*a)/o.width,h=(t.height-2*a)/o.height,l=O.getAngle(r.rotation()),c=o.x*s-a-r.offsetX()*s,d=o.y*h-a-r.offsetY()*h;this.getNode().setAttrs({scaleX:s,scaleY:h,x:t.x-(c*Math.cos(l)+d*Math.sin(-l)),y:t.y-(d*Math.cos(l)+c*Math.sin(l))}),this._fire("transform",{evt:e}),this.getNode()._fire("transform",{evt:e}),this.update(),this.getLayer().batchDraw()},t.prototype.forceUpdate=function(){this._resetTransformCache(),this.update()},t.prototype.update=function(){var e=this,t=this._getNodeRect(),i=this.getNode(),n={x:1,y:1};i&&i.getParent()&&(n=i.getParent().getAbsoluteScale());var r={x:1/n.x,y:1/n.y},o=t.width,a=t.height,s=this.enabledAnchors(),h=this.resizeEnabled(),l=this.padding(),c=this.anchorSize();this.find("._anchor").each(function(t){return t.setAttrs({width:c,height:c,offsetX:c/2,offsetY:c/2,stroke:e.anchorStroke(),strokeWidth:e.anchorStrokeWidth(),fill:e.anchorFill(),cornerRadius:e.anchorCornerRadius()})}),this.findOne(".top-left").setAttrs({x:-l,y:-l,scale:r,visible:h&&0<=s.indexOf("top-left")}),this.findOne(".top-center").setAttrs({x:o/2,y:-l,scale:r,visible:h&&0<=s.indexOf("top-center")}),this.findOne(".top-right").setAttrs({x:o+l,y:-l,scale:r,visible:h&&0<=s.indexOf("top-right")}),this.findOne(".middle-left").setAttrs({x:-l,y:a/2,scale:r,visible:h&&0<=s.indexOf("middle-left")}),this.findOne(".middle-right").setAttrs({x:o+l,y:a/2,scale:r,visible:h&&0<=s.indexOf("middle-right")}),this.findOne(".bottom-left").setAttrs({x:-l,y:a+l,scale:r,visible:h&&0<=s.indexOf("bottom-left")}),this.findOne(".bottom-center").setAttrs({x:o/2,y:a+l,scale:r,visible:h&&0<=s.indexOf("bottom-center")}),this.findOne(".bottom-right").setAttrs({x:o+l,y:a+l,scale:r,visible:h&&0<=s.indexOf("bottom-right")});var d=-this.rotateAnchorOffset()*Math.abs(r.y);this.findOne(".rotater").setAttrs({x:o/2,y:d*D._sign(a),scale:r,visible:this.rotateEnabled()}),this.findOne(".back").setAttrs({width:o*n.x,height:a*n.y,scale:r,visible:this.borderEnabled(),stroke:this.borderStroke(),strokeWidth:this.borderStrokeWidth(),dash:this.borderDash()})},t.prototype.isTransforming=function(){return this._transforming},t.prototype.stopTransform=function(){if(this._transforming){this._removeEvents();var t=this.findOne("."+this.movingResizer);t&&t.stopDrag()}},t.prototype.destroy=function(){return this.getStage()&&this._cursorChange&&(this.getStage().content.style.cursor=""),Jt.prototype.destroy.call(this),this.detach(),this._removeEvents(),this},t.prototype.toObject=function(){return et.prototype.toObject.call(this)},t}(Jt);We.prototype.className="Transformer",i(We),b.addGetterSetter(We,"enabledAnchors",Be,function(t){return t instanceof Array||D.warn("enabledAnchors value should be an array"),t instanceof Array&&t.forEach(function(t){-1===Be.indexOf(t)&&D.warn("Unknown anchor name: "+t+". Available names are: "+Be.join(", "))}),t||[]}),b.addGetterSetter(We,"resizeEnabled",!0),b.addGetterSetter(We,"anchorSize",10,g()),b.addGetterSetter(We,"rotateEnabled",!0),b.addGetterSetter(We,"rotationSnaps",[]),b.addGetterSetter(We,"rotateAnchorOffset",50,g()),b.addGetterSetter(We,"borderEnabled",!0),b.addGetterSetter(We,"anchorStroke","rgb(0, 161, 255)"),b.addGetterSetter(We,"anchorStrokeWidth",1,g()),b.addGetterSetter(We,"anchorFill","white"),b.addGetterSetter(We,"anchorCornerRadius",0,g()),b.addGetterSetter(We,"borderStroke","rgb(0, 161, 255)"),b.addGetterSetter(We,"borderStrokeWidth",1,g()),b.addGetterSetter(We,"borderDash"),b.addGetterSetter(We,"keepRatio",!0),b.addGetterSetter(We,"centeredScaling",!1),b.addGetterSetter(We,"ignoreStroke",!1),b.addGetterSetter(We,"padding",0,g()),b.addGetterSetter(We,"node"),b.addGetterSetter(We,"boundBoxFunc"),b.backCompat(We,{lineEnabled:"borderEnabled",rotateHandlerOffset:"rotateAnchorOffset",enabledHandlers:"enabledAnchors"}),o.mapMethods(We);var Ne=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return w(e,t),e.prototype._sceneFunc=function(t){t.beginPath(),t.arc(0,0,this.radius(),0,O.getAngle(this.angle()),this.clockwise()),t.lineTo(0,0),t.closePath(),t.fillStrokeShape(this)},e.prototype.getWidth=function(){return 2*this.radius()},e.prototype.getHeight=function(){return 2*this.radius()},e.prototype.setWidth=function(t){this.radius(t/2)},e.prototype.setHeight=function(t){this.radius(t/2)},e}(Ut);function He(){this.r=0,this.g=0,this.b=0,this.a=0,this.next=null}Ne.prototype.className="Wedge",Ne.prototype._centroid=!0,Ne.prototype._attrsAffectingSize=["radius"],i(Ne),b.addGetterSetter(Ne,"radius",0,g()),b.addGetterSetter(Ne,"angle",0,g()),b.addGetterSetter(Ne,"clockwise",!1),b.backCompat(Ne,{angleDeg:"angle",getAngleDeg:"getAngle",setAngleDeg:"setAngle"}),o.mapMethods(Ne);var Ye=[512,512,456,512,328,456,335,512,405,328,271,456,388,335,292,512,454,405,364,328,298,271,496,456,420,388,360,335,312,292,273,512,482,454,428,405,383,364,345,328,312,298,284,271,259,496,475,456,437,420,404,388,374,360,347,335,323,312,302,292,282,273,265,512,497,482,468,454,441,428,417,405,394,383,373,364,354,345,337,328,320,312,305,298,291,284,278,271,265,259,507,496,485,475,465,456,446,437,428,420,412,404,396,388,381,374,367,360,354,347,341,335,329,323,318,312,307,302,297,292,287,282,278,273,269,265,261,512,505,497,489,482,475,468,461,454,447,441,435,428,422,417,411,405,399,394,389,383,378,373,368,364,359,354,350,345,341,337,332,328,324,320,316,312,309,305,301,298,294,291,287,284,281,278,274,271,268,265,262,259,257,507,501,496,491,485,480,475,470,465,460,456,451,446,442,437,433,428,424,420,416,412,408,404,400,396,392,388,385,381,377,374,370,367,363,360,357,354,350,347,344,341,338,335,332,329,326,323,320,318,315,312,310,307,304,302,299,297,294,292,289,287,285,282,280,278,275,273,271,269,267,265,263,261,259],Xe=[9,11,12,13,13,14,14,15,15,15,15,16,16,16,16,17,17,17,17,17,17,17,18,18,18,18,18,18,18,18,18,19,19,19,19,19,19,19,19,19,19,19,19,19,19,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24];b.addGetterSetter(et,"blurRadius",0,g(),b.afterSetFilter);b.addGetterSetter(et,"brightness",0,g(),b.afterSetFilter);b.addGetterSetter(et,"contrast",0,g(),b.afterSetFilter);function je(t,e,i,n,r){var o=i-e,a=r-n;return 0==o?n+a/2:0==a?n:a*((t-e)/o)+n}b.addGetterSetter(et,"embossStrength",.5,g(),b.afterSetFilter),b.addGetterSetter(et,"embossWhiteLevel",.5,g(),b.afterSetFilter),b.addGetterSetter(et,"embossDirection","top-left",null,b.afterSetFilter),b.addGetterSetter(et,"embossBlend",!1,null,b.afterSetFilter);b.addGetterSetter(et,"enhance",0,g(),b.afterSetFilter);b.addGetterSetter(et,"hue",0,g(),b.afterSetFilter),b.addGetterSetter(et,"saturation",0,g(),b.afterSetFilter),b.addGetterSetter(et,"luminance",0,g(),b.afterSetFilter);b.addGetterSetter(et,"hue",0,g(),b.afterSetFilter),b.addGetterSetter(et,"saturation",0,g(),b.afterSetFilter),b.addGetterSetter(et,"value",0,g(),b.afterSetFilter);function Ue(t,e,i){var n=4*(i*t.width+e),r=[];return r.push(t.data[n++],t.data[n++],t.data[n++],t.data[n++]),r}function qe(t,e){return Math.sqrt(Math.pow(t[0]-e[0],2)+Math.pow(t[1]-e[1],2)+Math.pow(t[2]-e[2],2))}b.addGetterSetter(et,"kaleidoscopePower",2,g(),b.afterSetFilter),b.addGetterSetter(et,"kaleidoscopeAngle",0,g(),b.afterSetFilter);b.addGetterSetter(et,"threshold",0,g(),b.afterSetFilter);b.addGetterSetter(et,"noise",.2,g(),b.afterSetFilter);b.addGetterSetter(et,"pixelSize",8,g(),b.afterSetFilter);b.addGetterSetter(et,"levels",.5,g(),b.afterSetFilter);b.addGetterSetter(et,"red",0,function(t){return this._filterUpToDate=!1,255>W,0!==C?(C=255/C,P[s]=(l*B>>W)*C,P[s+1]=(c*B>>W)*C,P[s+2]=(d*B>>W)*C):P[s]=P[s+1]=P[s+2]=0,l-=u,c-=f,d-=g,p-=v,u-=F.r,f-=F.g,g-=F.b,v-=F.a,o=h+((o=i+e+1)>W,0>W)*C,P[o+1]=(c*B>>W)*C,P[o+2]=(d*B>>W)*C):P[o]=P[o+1]=P[o+2]=0,l-=u,c-=f,d-=g,p-=v,u-=F.r,f-=F.g,g-=F.b,v-=F.a,o=i+((o=n+L)>16&255,g:e>>8&255,b:255&e}},getRandomColor:function(){for(var t=(16777215*Math.random()<<0).toString(16);t.length<6;)t="0"+t;return"#"+t},get:function(t,e){return void 0===t?e:t},getRGB:function(t){var e;return t in l?{r:(e=l[t])[0],g:e[1],b:e[2]}:"#"===t[0]?this._hexToRgb(t.substring(1)):"rgb("===t.substr(0,4)?(e=d.exec(t.replace(/ /g,"")),{r:parseInt(e[1],10),g:parseInt(e[2],10),b:parseInt(e[3],10)}):{r:0,g:0,b:0}},colorToRGBA:function(t){return t=t||"black",D._namedColorToRBA(t)||D._hex3ColorToRGBA(t)||D._hex6ColorToRGBA(t)||D._rgbColorToRGBA(t)||D._rgbaColorToRGBA(t)},_namedColorToRBA:function(t){var e=l[t.toLowerCase()];return e?{r:e[0],g:e[1],b:e[2],a:1}:null},_rgbColorToRGBA:function(t){if(0===t.indexOf("rgb(")){var e=(t=t.match(/rgb\(([^)]+)\)/)[1]).split(/ *, */).map(Number);return{r:e[0],g:e[1],b:e[2],a:1}}},_rgbaColorToRGBA:function(t){if(0===t.indexOf("rgba(")){var e=(t=t.match(/rgba\(([^)]+)\)/)[1]).split(/ *, */).map(Number);return{r:e[0],g:e[1],b:e[2],a:e[3]}}},_hex6ColorToRGBA:function(t){if("#"===t[0]&&7===t.length)return{r:parseInt(t.slice(1,3),16),g:parseInt(t.slice(3,5),16),b:parseInt(t.slice(5,7),16),a:1}},_hex3ColorToRGBA:function(t){if("#"===t[0]&&4===t.length)return{r:parseInt(t[1]+t[1],16),g:parseInt(t[2]+t[2],16),b:parseInt(t[3]+t[3],16),a:1}},haveIntersection:function(t,e){return!(e.x>t.x+t.width||e.x+e.widtht.y+t.height||e.y+e.heighte.length){var a=e;e=t,t=a}for(n=0;n=this.parent.children.length)&&D.warn("Unexpected value "+t+" for zIndex property. zIndex is just index of a node in children of its parent. Expected value is from 0 to "+(this.parent.children.length-1)+".");var e=this.index;return this.parent.children.splice(e,1),this.parent.children.splice(t,0,this),this.parent._setChildrenIndices(),this},s.prototype.getAbsoluteOpacity=function(){return this._getCache(N,this._getAbsoluteOpacity)},s.prototype._getAbsoluteOpacity=function(){var t=this.opacity(),e=this.getParent();return e&&!e._isUnderCache&&(t*=e.getAbsoluteOpacity()),t},s.prototype.moveTo=function(t){return this.getParent()!==t&&(this._remove(),t.add(this)),this},s.prototype.toObject=function(){var t,e,i,n={},r=this.getAttrs();for(t in n.attrs={},r)e=r[t],D.isObject(e)&&!D._isPlainObject(e)&&!D._isArray(e)||(i="function"==typeof this[t]&&this[t],delete r[t],(i?i.call(this):null)!==(r[t]=e)&&(n.attrs[t]=e));return n.className=this.getClassName(),D._prepareToStringify(n)},s.prototype.toJSON=function(){return JSON.stringify(this.toObject())},s.prototype.getParent=function(){return this.parent},s.prototype.findAncestors=function(t,e,i){var n=[];e&&this._isMatch(t)&&n.push(this);for(var r=this.parent;r;){if(r===i)return n;r._isMatch(t)&&n.push(r),r=r.parent}return n},s.prototype.isAncestorOf=function(t){return!1},s.prototype.findAncestor=function(t,e,i){return this.findAncestors(t,e,i)[0]},s.prototype._isMatch=function(t){if(!t)return!1;if("function"==typeof t)return t(this);var e,i,n=t.replace(/ /g,"").split(","),r=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())},t.prototype.getTime=function(){return this._time},t.prototype.setPosition=function(t){this.prevPos=this._pos,this.propFunc(t),this._pos=t},t.prototype.getPosition=function(t){return void 0===t&&(t=this._time),this.func(t,this.begin,this._change,this.duration)},t.prototype.play=function(){this.state=2,this._startTime=this.getTimer()-this._time,this.onEnterFrame(),this.fire("onPlay")},t.prototype.reverse=function(){this.state=3,this._time=this.duration-this._time,this._startTime=this.getTimer()-this._time,this.onEnterFrame(),this.fire("onReverse")},t.prototype.seek=function(t){this.pause(),this._time=t,this.update(),this.fire("onSeek")},t.prototype.reset=function(){this.pause(),this._time=0,this.update(),this.fire("onReset")},t.prototype.finish=function(){this.pause(),this._time=this.duration,this.update(),this.fire("onFinish")},t.prototype.update=function(){this.setPosition(this.getPosition(this._time))},t.prototype.onEnterFrame=function(){var t=this.getTimer()-this._startTime;2===this.state?this.setTime(t):3===this.state&&this.setTime(this.duration-t)},t.prototype.pause=function(){this.state=1,this.fire("onPause")},t.prototype.getTimer=function(){return(new Date).getTime()},t}(),ie=function(){function u(t){var e,i,n=this,r=t.node,o=r._id,a=t.easing||ne.Linear,s=!!t.yoyo;e=void 0===t.duration?.3:0===t.duration?.001:t.duration,this.node=r,this._id=$t++;var h=r.getLayer()||(r instanceof O.Stage?r.getLayers():null);for(i in h||D.error("Tween constructor have `node` that is not in a layer. Please add node into layer first."),this.anim=new I(function(){n.tween.onEnterFrame()},h),this.tween=new ee(i,function(t){n._tweenFunc(t)},a,0,1,1e3*e,s),this._addListeners(),u.attrs[o]||(u.attrs[o]={}),u.attrs[o][this._id]||(u.attrs[o][this._id]={}),u.tweens[o]||(u.tweens[o]={}),t)void 0===Zt[i]&&this._addAttr(i,t[i]);this.reset(),this.onFinish=t.onFinish,this.onReset=t.onReset}return u.prototype._addAttr=function(t,e){var i,n,r,o,a,s,h,l,c=this.node,d=c._id;if((r=u.tweens[d][t])&&delete u.attrs[d][r][t],i=c.getAttr(t),D._isArray(e))if(n=[],a=Math.max(e.length,i.length),"points"===t&&e.length!==i.length&&(e.length>i.length?(h=i,i=D._prepareArrayForTween(i,e,c.closed())):(s=e,e=D._prepareArrayForTween(e,i,c.closed()))),0===t.indexOf("fill"))for(o=0;othis.dataArray[i].pathLength;)t-=this.dataArray[i].pathLength,++i;if(i===n)return{x:(e=this.dataArray[i-1].points.slice(-2))[0],y:e[1]};if(t<.01)return{x:(e=this.dataArray[i].points.slice(0,2))[0],y:e[1]};var r=this.dataArray[i],o=r.points;switch(r.command){case"L":return u.getPointOnLine(t,r.start.x,r.start.y,o[0],o[1]);case"C":return u.getPointOnCubicBezier(t/r.pathLength,r.start.x,r.start.y,o[0],o[1],o[2],o[3],o[4],o[5]);case"Q":return u.getPointOnQuadraticBezier(t/r.pathLength,r.start.x,r.start.y,o[0],o[1],o[2],o[3]);case"A":var a=o[0],s=o[1],h=o[2],l=o[3],c=o[4],d=o[5],p=o[6];return c+=d*t/r.pathLength,u.getPointOnEllipticalArc(a,s,h,l,c,p)}return null},u.getLineLength=function(t,e,i,n){return Math.sqrt((i-t)*(i-t)+(n-e)*(n-e))},u.getPointOnLine=function(t,e,i,n,r,o,a){void 0===o&&(o=e),void 0===a&&(a=i);var s=(r-i)/(n-e+1e-8),h=Math.sqrt(t*t/(1+s*s));n>>1,P=_.slice(0,1+k),T=this._getTextWidth(P)+v;T<=l?(b=1+k,w=P+(g?"…":""),C=T):x=k}if(!w)break;if(f){var M,A=_[w.length];0<(M=(" "===A||"-"===A)&&C<=l?w.length:Math.max(w.lastIndexOf(" "),w.lastIndexOf("-"))+1)&&(b=M,w=w.slice(0,b),C=this._getTextWidth(w))}if(w=w.trimRight(),this._addTextLine(w),i=Math.max(i,C),d+=n,!u||s&&ce?g=me.getPointOnLine(e,f.x,f.y,v.points[0],v.points[1],f.x,f.y):v=void 0;break;case"A":var a=v.points[4],s=v.points[5],h=v.points[4]+s;0===m?m=a+1e-8:iv.pathLength?1e-8:e/v.pathLength:ithis.findOne(".bottom-right").x()?-1:1;e=n*this.cos*c,i=n*this.sin*c,this.findOne(".top-left").x(this.findOne(".bottom-right").x()-e),this.findOne(".top-left").y(this.findOne(".bottom-right").y()-i)}}else if("top-center"===this.movingResizer)this.findOne(".top-left").y(r.y());else if("top-right"===this.movingResizer){if(l){n=Math.sqrt(Math.pow(this.findOne(".bottom-left").x()-r.x(),2)+Math.pow(this.findOne(".bottom-left").y()-r.y(),2));c=this.findOne(".top-right").x()this.findOne(".bottom-right").x()?-1:1;e=n*this.cos*c,i=n*this.sin*c,this.findOne(".bottom-right").x(e),this.findOne(".bottom-right").y(i)}}else if("rotater"===this.movingResizer){var p=this.padding(),u=this._getNodeRect();e=r.x()-u.width/2,i=-r.y()+u.height/2;var f=Math.atan2(-i,e)+Math.PI/2;u.height<0&&(f-=Math.PI);for(var g=O.getAngle(this.rotation()),v=D._radToDeg(g)+D._radToDeg(f),y=O.getAngle(this.getNode().rotation()),m=D._degToRad(v),_=this.rotationSnaps(),S=0;S<_.length;S++){var b=O.getAngle(_[S]);Math.abs(b-D._degToRad(v))%(2*Math.PI)<.1&&(v=D._radToDeg(b),m=D._degToRad(v))}var x=p,w=p;this._fitNodeInto({rotation:O.angleDeg?v:D._degToRad(v),x:u.x+(u.width/2+p)*(Math.cos(y)-Math.cos(m))+(u.height/2+p)*(Math.sin(-y)-Math.sin(-m))-(x*Math.cos(g)+w*Math.sin(-g)),y:u.y+(u.height/2+p)*(Math.cos(y)-Math.cos(m))+(u.width/2+p)*(Math.sin(y)-Math.sin(m))-(w*Math.cos(g)+x*Math.sin(g)),width:u.width+2*p,height:u.height+2*p},t)}else console.error(new Error("Wrong position argument of selection resizer: "+this.movingResizer));if("rotater"!==this.movingResizer){var C=this.findOne(".top-left").getAbsolutePosition(this.getParent());if(this.centeredScaling()||t.altKey){var k=this.findOne(".top-left"),P=this.findOne(".bottom-right"),T=k.x(),M=k.y(),A=this.getWidth()-P.x(),G=this.getHeight()-P.y();P.move({x:-T,y:-M}),k.move({x:A,y:G}),C=k.getAbsolutePosition(this.getParent())}e=C.x,i=C.y;var R=this.findOne(".bottom-right").x()-this.findOne(".top-left").x(),L=this.findOne(".bottom-right").y()-this.findOne(".top-left").y();this._fitNodeInto({x:e+this.offsetX(),y:i+this.offsetY(),width:R,height:L},t)}},t.prototype._handleMouseUp=function(t){this._removeEvents(t)},t.prototype._removeEvents=function(t){if(this._transforming){this._transforming=!1,window.removeEventListener("mousemove",this._handleMouseMove),window.removeEventListener("touchmove",this._handleMouseMove),window.removeEventListener("mouseup",this._handleMouseUp,!0),window.removeEventListener("touchend",this._handleMouseUp,!0),this._fire("transformend",{evt:t});var e=this.getNode();e&&e.fire("transformend",{evt:t})}},t.prototype._fitNodeInto=function(t,e){var i=this.boundBoxFunc();if(i){var n=this._getNodeRect();t=i.call(this,n,t)}var r=this.getNode();void 0!==t.rotation&&this.getNode().rotation(t.rotation);var o=r.getClientRect({skipTransform:!0,skipShadow:!0,skipStroke:this.ignoreStroke()}),a=this.padding(),s=(t.width-2*a)/o.width,h=(t.height-2*a)/o.height,l=O.getAngle(r.rotation()),c=o.x*s-a-r.offsetX()*s,d=o.y*h-a-r.offsetY()*h;this.getNode().setAttrs({scaleX:s,scaleY:h,x:t.x-(c*Math.cos(l)+d*Math.sin(-l)),y:t.y-(d*Math.cos(l)+c*Math.sin(l))}),this._fire("transform",{evt:e}),this.getNode()._fire("transform",{evt:e}),this.update(),this.getLayer().batchDraw()},t.prototype.forceUpdate=function(){this._resetTransformCache(),this.update()},t.prototype.update=function(){var e=this,t=this._getNodeRect(),i=this.getNode(),n={x:1,y:1};i&&i.getParent()&&(n=i.getParent().getAbsoluteScale());var r={x:1/n.x,y:1/n.y},o=t.width,a=t.height,s=this.enabledAnchors(),h=this.resizeEnabled(),l=this.padding(),c=this.anchorSize();this.find("._anchor").each(function(t){return t.setAttrs({width:c,height:c,offsetX:c/2,offsetY:c/2,stroke:e.anchorStroke(),strokeWidth:e.anchorStrokeWidth(),fill:e.anchorFill(),cornerRadius:e.anchorCornerRadius()})}),this.findOne(".top-left").setAttrs({x:-l,y:-l,scale:r,visible:h&&0<=s.indexOf("top-left")}),this.findOne(".top-center").setAttrs({x:o/2,y:-l,scale:r,visible:h&&0<=s.indexOf("top-center")}),this.findOne(".top-right").setAttrs({x:o+l,y:-l,scale:r,visible:h&&0<=s.indexOf("top-right")}),this.findOne(".middle-left").setAttrs({x:-l,y:a/2,scale:r,visible:h&&0<=s.indexOf("middle-left")}),this.findOne(".middle-right").setAttrs({x:o+l,y:a/2,scale:r,visible:h&&0<=s.indexOf("middle-right")}),this.findOne(".bottom-left").setAttrs({x:-l,y:a+l,scale:r,visible:h&&0<=s.indexOf("bottom-left")}),this.findOne(".bottom-center").setAttrs({x:o/2,y:a+l,scale:r,visible:h&&0<=s.indexOf("bottom-center")}),this.findOne(".bottom-right").setAttrs({x:o+l,y:a+l,scale:r,visible:h&&0<=s.indexOf("bottom-right")});var d=-this.rotateAnchorOffset()*Math.abs(r.y);this.findOne(".rotater").setAttrs({x:o/2,y:d*D._sign(a),scale:r,visible:this.rotateEnabled()}),this.findOne(".back").setAttrs({width:o*n.x,height:a*n.y,scale:r,visible:this.borderEnabled(),stroke:this.borderStroke(),strokeWidth:this.borderStrokeWidth(),dash:this.borderDash()})},t.prototype.isTransforming=function(){return this._transforming},t.prototype.stopTransform=function(){if(this._transforming){this._removeEvents();var t=this.findOne("."+this.movingResizer);t&&t.stopDrag()}},t.prototype.destroy=function(){return this.getStage()&&this._cursorChange&&(this.getStage().content.style.cursor=""),Jt.prototype.destroy.call(this),this.detach(),this._removeEvents(),this},t.prototype.toObject=function(){return et.prototype.toObject.call(this)},t}(Jt);We.prototype.className="Transformer",i(We),b.addGetterSetter(We,"enabledAnchors",Be,function(t){return t instanceof Array||D.warn("enabledAnchors value should be an array"),t instanceof Array&&t.forEach(function(t){-1===Be.indexOf(t)&&D.warn("Unknown anchor name: "+t+". Available names are: "+Be.join(", "))}),t||[]}),b.addGetterSetter(We,"resizeEnabled",!0),b.addGetterSetter(We,"anchorSize",10,g()),b.addGetterSetter(We,"rotateEnabled",!0),b.addGetterSetter(We,"rotationSnaps",[]),b.addGetterSetter(We,"rotateAnchorOffset",50,g()),b.addGetterSetter(We,"borderEnabled",!0),b.addGetterSetter(We,"anchorStroke","rgb(0, 161, 255)"),b.addGetterSetter(We,"anchorStrokeWidth",1,g()),b.addGetterSetter(We,"anchorFill","white"),b.addGetterSetter(We,"anchorCornerRadius",0,g()),b.addGetterSetter(We,"borderStroke","rgb(0, 161, 255)"),b.addGetterSetter(We,"borderStrokeWidth",1,g()),b.addGetterSetter(We,"borderDash"),b.addGetterSetter(We,"keepRatio",!0),b.addGetterSetter(We,"centeredScaling",!1),b.addGetterSetter(We,"ignoreStroke",!1),b.addGetterSetter(We,"padding",0,g()),b.addGetterSetter(We,"node"),b.addGetterSetter(We,"boundBoxFunc"),b.backCompat(We,{lineEnabled:"borderEnabled",rotateHandlerOffset:"rotateAnchorOffset",enabledHandlers:"enabledAnchors"}),o.mapMethods(We);var Ne=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return w(e,t),e.prototype._sceneFunc=function(t){t.beginPath(),t.arc(0,0,this.radius(),0,O.getAngle(this.angle()),this.clockwise()),t.lineTo(0,0),t.closePath(),t.fillStrokeShape(this)},e.prototype.getWidth=function(){return 2*this.radius()},e.prototype.getHeight=function(){return 2*this.radius()},e.prototype.setWidth=function(t){this.radius(t/2)},e.prototype.setHeight=function(t){this.radius(t/2)},e}(Ut);function He(){this.r=0,this.g=0,this.b=0,this.a=0,this.next=null}Ne.prototype.className="Wedge",Ne.prototype._centroid=!0,Ne.prototype._attrsAffectingSize=["radius"],i(Ne),b.addGetterSetter(Ne,"radius",0,g()),b.addGetterSetter(Ne,"angle",0,g()),b.addGetterSetter(Ne,"clockwise",!1),b.backCompat(Ne,{angleDeg:"angle",getAngleDeg:"getAngle",setAngleDeg:"setAngle"}),o.mapMethods(Ne);var Ye=[512,512,456,512,328,456,335,512,405,328,271,456,388,335,292,512,454,405,364,328,298,271,496,456,420,388,360,335,312,292,273,512,482,454,428,405,383,364,345,328,312,298,284,271,259,496,475,456,437,420,404,388,374,360,347,335,323,312,302,292,282,273,265,512,497,482,468,454,441,428,417,405,394,383,373,364,354,345,337,328,320,312,305,298,291,284,278,271,265,259,507,496,485,475,465,456,446,437,428,420,412,404,396,388,381,374,367,360,354,347,341,335,329,323,318,312,307,302,297,292,287,282,278,273,269,265,261,512,505,497,489,482,475,468,461,454,447,441,435,428,422,417,411,405,399,394,389,383,378,373,368,364,359,354,350,345,341,337,332,328,324,320,316,312,309,305,301,298,294,291,287,284,281,278,274,271,268,265,262,259,257,507,501,496,491,485,480,475,470,465,460,456,451,446,442,437,433,428,424,420,416,412,408,404,400,396,392,388,385,381,377,374,370,367,363,360,357,354,350,347,344,341,338,335,332,329,326,323,320,318,315,312,310,307,304,302,299,297,294,292,289,287,285,282,280,278,275,273,271,269,267,265,263,261,259],Xe=[9,11,12,13,13,14,14,15,15,15,15,16,16,16,16,17,17,17,17,17,17,17,18,18,18,18,18,18,18,18,18,19,19,19,19,19,19,19,19,19,19,19,19,19,19,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24];b.addGetterSetter(et,"blurRadius",0,g(),b.afterSetFilter);b.addGetterSetter(et,"brightness",0,g(),b.afterSetFilter);b.addGetterSetter(et,"contrast",0,g(),b.afterSetFilter);function je(t,e,i,n,r){var o=i-e,a=r-n;return 0==o?n+a/2:0==a?n:a*((t-e)/o)+n}b.addGetterSetter(et,"embossStrength",.5,g(),b.afterSetFilter),b.addGetterSetter(et,"embossWhiteLevel",.5,g(),b.afterSetFilter),b.addGetterSetter(et,"embossDirection","top-left",null,b.afterSetFilter),b.addGetterSetter(et,"embossBlend",!1,null,b.afterSetFilter);b.addGetterSetter(et,"enhance",0,g(),b.afterSetFilter);b.addGetterSetter(et,"hue",0,g(),b.afterSetFilter),b.addGetterSetter(et,"saturation",0,g(),b.afterSetFilter),b.addGetterSetter(et,"luminance",0,g(),b.afterSetFilter);b.addGetterSetter(et,"hue",0,g(),b.afterSetFilter),b.addGetterSetter(et,"saturation",0,g(),b.afterSetFilter),b.addGetterSetter(et,"value",0,g(),b.afterSetFilter);function Ue(t,e,i){var n=4*(i*t.width+e),r=[];return r.push(t.data[n++],t.data[n++],t.data[n++],t.data[n++]),r}function qe(t,e){return Math.sqrt(Math.pow(t[0]-e[0],2)+Math.pow(t[1]-e[1],2)+Math.pow(t[2]-e[2],2))}b.addGetterSetter(et,"kaleidoscopePower",2,g(),b.afterSetFilter),b.addGetterSetter(et,"kaleidoscopeAngle",0,g(),b.afterSetFilter);b.addGetterSetter(et,"threshold",0,g(),b.afterSetFilter);b.addGetterSetter(et,"noise",.2,g(),b.afterSetFilter);b.addGetterSetter(et,"pixelSize",8,g(),b.afterSetFilter);b.addGetterSetter(et,"levels",.5,g(),b.afterSetFilter);b.addGetterSetter(et,"red",0,function(t){return this._filterUpToDate=!1,255>W,0!==C?(C=255/C,P[s]=(l*B>>W)*C,P[s+1]=(c*B>>W)*C,P[s+2]=(d*B>>W)*C):P[s]=P[s+1]=P[s+2]=0,l-=u,c-=f,d-=g,p-=v,u-=F.r,f-=F.g,g-=F.b,v-=F.a,o=h+((o=i+e+1)>W,0>W)*C,P[o+1]=(c*B>>W)*C,P[o+2]=(d*B>>W)*C):P[o]=P[o+1]=P[o+2]=0,l-=u,c-=f,d-=g,p-=v,u-=F.r,f-=F.g,g-=F.b,v-=F.a,o=i+((o=n+L) { ) { shape._fireAndBubble(CLICK, { evt: evt }); - if (fireDblClick && clickEndShape && clickEndShape._id === shape._id) { + if (fireDblClick && clickEndShape && clickEndShape === shape) { shape._fireAndBubble(DBL_CLICK, { evt: evt }); } } @@ -642,6 +642,7 @@ export class Stage extends Container { _touchend(evt) { this.setPointersPositions(evt); var shape = this.getIntersection(this.getPointerPosition()), + clickEndShape = this.clickEndShape, fireDblClick = false; if (Konva.inDblClickWindow) { @@ -658,6 +659,7 @@ export class Stage extends Container { }, Konva.dblClickWindow); if (shape && shape.isListening()) { + this.clickEndShape = shape; shape._fireAndBubble(TOUCHEND, { evt: evt }); // detect if tap or double tap occurred @@ -668,7 +670,7 @@ export class Stage extends Container { ) { shape._fireAndBubble(TAP, { evt: evt }); - if (fireDblClick) { + if (fireDblClick && clickEndShape && clickEndShape === shape) { shape._fireAndBubble(DBL_TAP, { evt: evt }); } } diff --git a/test/functional/TouchEvents-test.js b/test/functional/TouchEvents-test.js index 730926d1..38de63b5 100644 --- a/test/functional/TouchEvents-test.js +++ b/test/functional/TouchEvents-test.js @@ -105,8 +105,8 @@ suite('TouchEvents', function() { var dbltap = false; /* - * mobile - */ + * mobile + */ circle.on('touchstart', function() { touchstart = true; //log('touchstart'); @@ -283,4 +283,72 @@ suite('TouchEvents', function() { assert.equal(stageContentTouchend, 1); assert.equal(circleTouchend, 1); }); + + test('tap on one shape, then fast tap on another shape should no trigger double tap', function() { + var stage = addStage(); + var layer = new Konva.Layer(); + stage.add(layer); + + var circle1 = new Konva.Circle({ + x: 100, + y: 100, + radius: 70, + fill: 'green', + stroke: 'black', + strokeWidth: 4, + name: 'myCircle' + }); + + layer.add(circle1); + + var circle2 = new Konva.Circle({ + x: 200, + y: 100, + radius: 70, + fill: 'green', + stroke: 'black', + strokeWidth: 4, + name: 'myCircle' + }); + + layer.add(circle2); + + layer.draw(); + + var circle1Tap = 0; + var circle2Tap = 0; + var circle2DoubleTap = 0; + + circle1.on('tap', function() { + circle1Tap++; + }); + circle2.on('tap', function() { + circle2Tap++; + }); + circle2.on('dbltap', function() { + circle2DoubleTap++; + }); + + stage.simulateTouchStart({ x: 100, y: 100 }); + stage.simulateTouchEnd({ x: 100, y: 100 }); + + assert.equal(circle1Tap, 1, 'should trigger tap on first circle'); + assert.equal(circle2Tap, 0, 'should NOT trigger tap on second circle'); + assert.equal( + circle2DoubleTap, + 0, + 'should NOT trigger dbltap on second circle' + ); + + stage.simulateTouchStart({ x: 200, y: 100 }); + stage.simulateTouchEnd({ x: 200, y: 100 }); + + assert.equal(circle1Tap, 1, 'should trigger tap on first circle'); + assert.equal(circle2Tap, 1, 'should trigger tap on second circle'); + assert.equal( + circle2DoubleTap, + 0, + 'should NOT trigger dbltap on second circle' + ); + }); });