diff --git a/CHANGELOG.md b/CHANGELOG.md index 804a4220..296caafc 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -12,6 +12,9 @@ This project adheres to [Semantic Versioning](http://semver.org/). ### Fixed * `getClientRect` calculation fix for groups +* Update of `Konva.Transformer` on `rotateEnabled` change +* Fix click stage event on dragend +* Fix some Transformer cursor behavior ## [2.4.0][2018-09-19] diff --git a/konva.js b/konva.js index ee62cfb2..34d05d53 100644 --- a/konva.js +++ b/konva.js @@ -2,7 +2,7 @@ * Konva JavaScript Framework v2.4.0 * http://konvajs.github.io/ * Licensed under the MIT - * Date: Mon Sep 24 2018 + * Date: Thu Sep 27 2018 * * Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS) * Modified work Copyright (C) 2014 - present by Anton Lavrenov (Konva) @@ -11040,7 +11040,10 @@ } } else { this._fire(MOUSEUP, { evt: evt, target: this, currentTarget: this }); - this._fire(CLICK, { evt: evt, target: this, currentTarget: this }); + if (Konva.listenClickTap) { + this._fire(CLICK, { evt: evt, target: this, currentTarget: this }); + } + if (fireDblClick) { this._fire(DBL_CLICK, { evt: evt, @@ -11145,7 +11148,9 @@ } } else { this._fire(TOUCHEND, { evt: evt, target: this, currentTarget: this }); - this._fire(TAP, { evt: evt, target: this, currentTarget: this }); + if (Konva.listenClickTap) { + this._fire(TAP, { evt: evt, target: this, currentTarget: this }); + } if (fireDblClick) { this._fire(DBL_TAP, { evt: evt, @@ -19440,6 +19445,7 @@ var ATTR_CHANGE_LIST = [ 'resizeEnabledChange', 'rotateAnchorOffsetChange', + 'rotateEnabledChange', 'enabledAnchorsChange', 'anchorSizeChange', 'borderEnabledChange', @@ -19767,7 +19773,6 @@ // add hover styling anchor.on('mouseenter', function() { - var layer = this.getLayer(); var tr = this.getParent(); var rad = Konva.getAngle(tr.rotation()); @@ -19777,15 +19782,14 @@ var isMirrored = scale.y * scale.x < 0; var cursor = getCursor(name, rad, isMirrored); anchor.getStage().content.style.cursor = cursor; - layer.batchDraw(); + tr._cursorChange = true; }); anchor.on('mouseout', function() { - var layer = this.getLayer(); - if (!layer) { + if (!anchor.getStage() || !this.getParent()) { return; } anchor.getStage().content.style.cursor = ''; - layer.batchDraw(); + this.getParent()._cursorChange = false; }); this.add(anchor); }, @@ -20245,6 +20249,10 @@ } }, destroy: function() { + // console.log(this.isTransforming() && this.getStage()); + if (this.getStage() && this._cursorChange) { + this.getStage().content.style.cursor = ''; + } Konva.Group.prototype.destroy.call(this); this.detach(); this._removeEvents(); diff --git a/konva.min.js b/konva.min.js index 3687179b..89e79598 100644 --- a/konva.min.js +++ b/konva.min.js @@ -2,7 +2,7 @@ * Konva JavaScript Framework v2.4.0 * http://konvajs.github.io/ * Licensed under the MIT - * Date: Mon Sep 24 2018 + * Date: Thu Sep 27 2018 * * Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS) * Modified work Copyright (C) 2014 - present by Anton Lavrenov (Konva) @@ -23,4 +23,4 @@ * @example * node.cache(); * node.filters([Konva.Filters.Sepia]); - */Konva.Filters.Sepia=function(t){var e,i,n,a,r,o,s,h,l,c=t.data,d=t.width,u=t.height,g=4*d;do{for(e=(u-1)*g,i=d;s=.393*(a=c[n=e+4*(i-1)])+.769*(r=c[n+1])+.189*(o=c[n+2]),h=.349*a+.686*r+.168*o,l=.272*a+.534*r+.131*o,c[n]=255this.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(t){var e,i,n=this,a=t.node,r=a._id,o=t.easing||Konva.Easings.Linear,s=!!t.yoyo;e=void 0===t.duration?.3:0===t.duration?.001:t.duration,this.node=a,this._id=c++;var h=a.getLayer()||(a instanceof Konva.Stage?a.getLayers():null);for(i in h||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(){n.tween.onEnterFrame()},h),this.tween=new d(i,function(t){n._tweenFunc(t)},o,0,1,1e3*e,s),this._addListeners(),Konva.Tween.attrs[r]||(Konva.Tween.attrs[r]={}),Konva.Tween.attrs[r][this._id]||(Konva.Tween.attrs[r][this._id]={}),Konva.Tween.tweens[r]||(Konva.Tween.tweens[r]={}),t)void 0===l[i]&&this._addAttr(i,t[i]);this.reset(),this.onFinish=t.onFinish,this.onReset=t.onReset},Konva.Tween.attrs={},Konva.Tween.tweens={},Konva.Tween.prototype={_addAttr:function(t,e){var i,n,a,r,o,s,h,l,c=this.node,d=c._id;if((a=Konva.Tween.tweens[d][t])&&delete Konva.Tween.attrs[d][a][t],i=c.getAttr(t),Konva.Util._isArray(e))if(n=[],o=Math.max(e.length,i.length),"points"===t&&e.length!==i.length&&(e.length>i.length?(h=i,i=Konva.Util._prepareArrayForTween(i,e,c.closed())):(s=e,e=Konva.Util._prepareArrayForTween(e,i,c.closed()))),0===t.indexOf("fill"))for(r=0;r>>1,F=_.slice(0,w+1),T=this._getTextWidth(F)+y;T<=l?(S=w+1,x=F+(v?"…":""),C=T):b=w}if(!x)break;if(f){var P,A=_[x.length];0<(P=(" "===A||"-"===A)&&C<=l?x.length:Math.max(x.lastIndexOf(" "),x.lastIndexOf("-"))+1)&&(S=P,x=x.slice(0,S),C=this._getTextWidth(x))}if(x=x.trimRight(),this._addTextLine(x),i=Math.max(i,C),d+=n,!g||s&&cthis.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 a=this.dataArray[i],r=a.points;switch(a.command){case"L":return Konva.Path.getPointOnLine(t,a.start.x,a.start.y,r[0],r[1]);case"C":return Konva.Path.getPointOnCubicBezier(t/a.pathLength,a.start.x,a.start.y,r[0],r[1],r[2],r[3],r[4],r[5]);case"Q":return Konva.Path.getPointOnQuadraticBezier(t/a.pathLength,a.start.x,a.start.y,r[0],r[1],r[2],r[3]);case"A":var o=r[0],s=r[1],h=r[2],l=r[3],c=r[4],d=r[5],u=r[6];return c+=d*t/a.pathLength,Konva.Path.getPointOnEllipticalArc(o,s,h,l,c,u)}return null}},Konva.Util.extend(Konva.Path,Konva.Shape),Konva.Path.getLineLength=function(t,e,i,n){return Math.sqrt((i-t)*(i-t)+(n-e)*(n-e))},Konva.Path.getPointOnLine=function(t,e,i,n,a,r,o){void 0===r&&(r=e),void 0===o&&(o=i);var s=(a-i)/(n-e+1e-8),h=Math.sqrt(t*t/(1+s*s));ne?v=Konva.Path.getPointOnLine(e,f.x,f.y,p.points[0],p.points[1],f.x,f.y):p=void 0;break;case"A":var o=p.points[4],s=p.points[5],h=p.points[4]+s;0===_?_=o+1e-8:ip.pathLength?1e-8:e/p.pathLength:ithis.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(t){var e,i,n=this,a=t.node,r=a._id,o=t.easing||Konva.Easings.Linear,s=!!t.yoyo;e=void 0===t.duration?.3:0===t.duration?.001:t.duration,this.node=a,this._id=c++;var h=a.getLayer()||(a instanceof Konva.Stage?a.getLayers():null);for(i in h||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(){n.tween.onEnterFrame()},h),this.tween=new d(i,function(t){n._tweenFunc(t)},o,0,1,1e3*e,s),this._addListeners(),Konva.Tween.attrs[r]||(Konva.Tween.attrs[r]={}),Konva.Tween.attrs[r][this._id]||(Konva.Tween.attrs[r][this._id]={}),Konva.Tween.tweens[r]||(Konva.Tween.tweens[r]={}),t)void 0===l[i]&&this._addAttr(i,t[i]);this.reset(),this.onFinish=t.onFinish,this.onReset=t.onReset},Konva.Tween.attrs={},Konva.Tween.tweens={},Konva.Tween.prototype={_addAttr:function(t,e){var i,n,a,r,o,s,h,l,c=this.node,d=c._id;if((a=Konva.Tween.tweens[d][t])&&delete Konva.Tween.attrs[d][a][t],i=c.getAttr(t),Konva.Util._isArray(e))if(n=[],o=Math.max(e.length,i.length),"points"===t&&e.length!==i.length&&(e.length>i.length?(h=i,i=Konva.Util._prepareArrayForTween(i,e,c.closed())):(s=e,e=Konva.Util._prepareArrayForTween(e,i,c.closed()))),0===t.indexOf("fill"))for(r=0;r>>1,F=_.slice(0,w+1),T=this._getTextWidth(F)+y;T<=l?(S=w+1,x=F+(v?"…":""),C=T):b=w}if(!x)break;if(f){var P,A=_[x.length];0<(P=(" "===A||"-"===A)&&C<=l?x.length:Math.max(x.lastIndexOf(" "),x.lastIndexOf("-"))+1)&&(S=P,x=x.slice(0,S),C=this._getTextWidth(x))}if(x=x.trimRight(),this._addTextLine(x),i=Math.max(i,C),d+=n,!g||s&&cthis.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 a=this.dataArray[i],r=a.points;switch(a.command){case"L":return Konva.Path.getPointOnLine(t,a.start.x,a.start.y,r[0],r[1]);case"C":return Konva.Path.getPointOnCubicBezier(t/a.pathLength,a.start.x,a.start.y,r[0],r[1],r[2],r[3],r[4],r[5]);case"Q":return Konva.Path.getPointOnQuadraticBezier(t/a.pathLength,a.start.x,a.start.y,r[0],r[1],r[2],r[3]);case"A":var o=r[0],s=r[1],h=r[2],l=r[3],c=r[4],d=r[5],u=r[6];return c+=d*t/a.pathLength,Konva.Path.getPointOnEllipticalArc(o,s,h,l,c,u)}return null}},Konva.Util.extend(Konva.Path,Konva.Shape),Konva.Path.getLineLength=function(t,e,i,n){return Math.sqrt((i-t)*(i-t)+(n-e)*(n-e))},Konva.Path.getPointOnLine=function(t,e,i,n,a,r,o){void 0===r&&(r=e),void 0===o&&(o=i);var s=(a-i)/(n-e+1e-8),h=Math.sqrt(t*t/(1+s*s));ne?v=Konva.Path.getPointOnLine(e,f.x,f.y,p.points[0],p.points[1],f.x,f.y):p=void 0;break;case"A":var o=p.points[4],s=p.points[5],h=p.points[4]+s;0===_?_=o+1e-8:ip.pathLength?1e-8:e/p.pathLength:i