From e518e64935e36499f11992fb8007e81a8b38f7d6 Mon Sep 17 00:00:00 2001 From: Anton Lavrenov Date: Tue, 3 Jul 2018 11:03:06 +0700 Subject: [PATCH] ome drag&drop fixes --- CHANGELOG.md | 6 ++++++ konva.js | 28 +++++++++++++++------------- konva.min.js | 4 ++-- src/DragAndDrop.js | 13 ++++++------- src/Node.js | 4 ++-- src/Stage.js | 9 ++++++--- test/ifame.html | 13 +++++++++++++ 7 files changed, 50 insertions(+), 27 deletions(-) create mode 100644 test/ifame.html diff --git a/CHANGELOG.md b/CHANGELOG.md index db9cfe87..39fa78f3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,12 @@ This project adheres to [Semantic Versioning](http://semver.org/). ## [new version][unreleased] +## [2.1.7][2018-07-03] + +## Fixed + +* Some drag&drop fixes + ## [2.1.6][2018-06-16] ## Fixed diff --git a/konva.js b/konva.js index 9c29d825..6b68c628 100644 --- a/konva.js +++ b/konva.js @@ -2,7 +2,7 @@ * Konva JavaScript Framework v2.1.6 * http://konvajs.github.io/ * Licensed under the MIT - * Date: Wed Jun 20 2018 + * Date: Tue Jul 03 2018 * * Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS) * Modified work Copyright (C) 2014 - present by Anton Lavrenov (Konva) @@ -2970,7 +2970,7 @@ }); }, /** - * remove self from parent, but don't destroy + * remove self from parent, but don't destroy. You can reuse node later. * @method * @memberof Konva.Node.prototype * @returns {Konva.Node} @@ -2997,7 +2997,7 @@ return this; }, /** - * remove and destroy self + * remove and destroy a node. Kill it forever! You should not reuse node after destroy(). * @method * @memberof Konva.Node.prototype * @example @@ -10632,9 +10632,12 @@ // always call preventDefault for desktop events because some browsers // try to drag and drop the canvas element - if (evt.cancelable) { - evt.preventDefault(); - } + // TODO: if we preventDefault() it will cancel event detection outside of window + // but we need it for better drag&drop + // can we disable native drag&drop somehow differently? + // if (evt.cancelable) { + // evt.preventDefault(); + // } }, _mouseup: function(evt) { // workaround for mobile IE to force touch event when unhandled pointer event elevates into a mouse event @@ -13038,15 +13041,14 @@ */ if (Konva.isBrowser) { - var html = Konva.document.documentElement; - html.addEventListener('mouseup', Konva.DD._endDragBefore, true); - html.addEventListener('touchend', Konva.DD._endDragBefore, true); + window.addEventListener('mouseup', Konva.DD._endDragBefore, true); + window.addEventListener('touchend', Konva.DD._endDragBefore, true); - html.addEventListener('mousemove', Konva.DD._drag); - html.addEventListener('touchmove', Konva.DD._drag); + window.addEventListener('mousemove', Konva.DD._drag); + window.addEventListener('touchmove', Konva.DD._drag); - html.addEventListener('mouseup', Konva.DD._endDragAfter, false); - html.addEventListener('touchend', Konva.DD._endDragAfter, false); + window.addEventListener('mouseup', Konva.DD._endDragAfter, false); + window.addEventListener('touchend', Konva.DD._endDragAfter, false); } })(); diff --git a/konva.min.js b/konva.min.js index aa800744..aa5b935c 100644 --- a/konva.min.js +++ b/konva.min.js @@ -2,7 +2,7 @@ * Konva JavaScript Framework v2.1.6 * http://konvajs.github.io/ * Licensed under the MIT - * Date: Wed Jun 20 2018 + * Date: Tue Jul 03 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,n,i,a,r,o,s,h,c,l=t.data,d=t.width,u=t.height,f=4*d;do{for(e=(u-1)*f,n=d;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]=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,n,i=this,a=t.node,r=a._id,o=t.easing||Konva.Easings.Linear,s=!!t.yoyo;e=void 0===t.duration?1:0===t.duration?.001:t.duration,this.node=a,this._id=l++;var h=a.getLayer()||(a instanceof Konva.Stage?a.getLayers():null);for(n 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(){i.tween.onEnterFrame()},h),this.tween=new d(n,function(t){i._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===c[n]&&this._addAttr(n,t[n]);this.reset(),this.onFinish=t.onFinish,this.onReset=t.onReset},Konva.Tween.attrs={},Konva.Tween.tweens={},Konva.Tween.prototype={_addAttr:function(t,e){var n,i,a,r,o,s,h,c=this.node,l=c._id;if((a=Konva.Tween.tweens[l][t])&&delete Konva.Tween.attrs[l][a][t],n=c.getAttr(t),Konva.Util._isArray(e))for(i=[],o=Math.max(e.length,n.length),"points"===t&&e.length!==n.length&&(e.length>n.length?(h=n,n=Konva.Util._prepareArrayForTween(n,e,c.closed())):(s=e,e=Konva.Util._prepareArrayForTween(e,n,c.closed()))),r=0;r>>1,F=_.slice(0,w+1),T=this._getTextWidth(F)+y;T<=c?(K=w+1,C=F+(v?"…":""),b=T):x=w}if(!C)break;if(g){var P,A=_[C.length];0<(P=(" "===A||"-"===A)&&b<=c?C.length:Math.max(C.lastIndexOf(" "),C.lastIndexOf("-"))+1)&&(K=P,C=C.slice(0,K),b=this._getTextWidth(C))}if(this._addTextLine(C),n=Math.max(n,b),d+=i,!f||s&&le?v=Konva.Path.getPointOnLine(e,g.x,g.y,p.points[0],p.points[1],g.x,g.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:np.pathLength?1e-8:e/p.pathLength:nthis.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,n,i=this,a=t.node,r=a._id,o=t.easing||Konva.Easings.Linear,s=!!t.yoyo;e=void 0===t.duration?1:0===t.duration?.001:t.duration,this.node=a,this._id=l++;var h=a.getLayer()||(a instanceof Konva.Stage?a.getLayers():null);for(n 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(){i.tween.onEnterFrame()},h),this.tween=new d(n,function(t){i._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===c[n]&&this._addAttr(n,t[n]);this.reset(),this.onFinish=t.onFinish,this.onReset=t.onReset},Konva.Tween.attrs={},Konva.Tween.tweens={},Konva.Tween.prototype={_addAttr:function(t,e){var n,i,a,r,o,s,h,c=this.node,l=c._id;if((a=Konva.Tween.tweens[l][t])&&delete Konva.Tween.attrs[l][a][t],n=c.getAttr(t),Konva.Util._isArray(e))for(i=[],o=Math.max(e.length,n.length),"points"===t&&e.length!==n.length&&(e.length>n.length?(h=n,n=Konva.Util._prepareArrayForTween(n,e,c.closed())):(s=e,e=Konva.Util._prepareArrayForTween(e,n,c.closed()))),r=0;r>>1,F=_.slice(0,w+1),T=this._getTextWidth(F)+y;T<=c?(K=w+1,C=F+(v?"…":""),b=T):x=w}if(!C)break;if(g){var P,A=_[C.length];0<(P=(" "===A||"-"===A)&&b<=c?C.length:Math.max(C.lastIndexOf(" "),C.lastIndexOf("-"))+1)&&(K=P,C=C.slice(0,K),b=this._getTextWidth(C))}if(this._addTextLine(C),n=Math.max(n,b),d+=i,!f||s&&le?v=Konva.Path.getPointOnLine(e,g.x,g.y,p.points[0],p.points[1],g.x,g.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:np.pathLength?1e-8:e/p.pathLength:n + + + + KonvaJS Sandbox + + + + + + + + \ No newline at end of file