From aaf0185363b42bf49d353a7cdaee6c0aa4210210 Mon Sep 17 00:00:00 2001 From: Anton Lavrenov Date: Fri, 22 Feb 2019 12:46:46 -0500 Subject: [PATCH] type fixes, fix fast layer bug --- konva.js | 35 +++++++---------- konva.min.js | 4 +- src/Container.ts | 12 ++---- src/Context.ts | 11 ++---- src/Shape.ts | 2 +- src/Util.ts | 75 ++++++++++++++++++++----------------- test/unit/FastLayer-test.js | 20 ++++++++++ test/unit/Stage-test.js | 20 ++++++++++ tsconfig.json | 1 + 9 files changed, 105 insertions(+), 75 deletions(-) diff --git a/konva.js b/konva.js index 9e61018c..d114673a 100644 --- a/konva.js +++ b/konva.js @@ -8,7 +8,7 @@ * Konva JavaScript Framework v3.0.0-0 * http://konvajs.github.io/ * Licensed under the MIT - * Date: Wed Feb 20 2019 + * Date: Fri Feb 22 2019 * * Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS) * Modified work Copyright (C) 2014 - present by Anton Lavrenov (Konva) @@ -569,7 +569,7 @@ whitesmoke: [245, 245, 245], yellow: [255, 255, 0], yellowgreen: [154, 205, 5] - }, RGB_REGEX = /rgb\((\d{1,3}),(\d{1,3}),(\d{1,3})\)/; + }, RGB_REGEX = /rgb\((\d{1,3}),(\d{1,3}),(\d{1,3})\)/, animQueue = []; /** * @namespace Util * @memberof Konva @@ -625,13 +625,12 @@ return -1; } }, - animQueue: [], requestAnimFrame: function (callback) { - Util.animQueue.push(callback); - if (Util.animQueue.length === 1) { + animQueue.push(callback); + if (animQueue.length === 1) { requestAnimationFrame(function () { - var queue = Util.animQueue; - Util.animQueue = []; + var queue = animQueue; + animQueue = []; queue.forEach(function (cb) { cb(); }); @@ -678,9 +677,8 @@ * arg can be an image object or image data */ _urlToImage: function (url, callback) { - var imageObj; // if arg is a string, then it's a data url - imageObj = new glob.Image(); + var imageObj = new glob.Image(); imageObj.onload = function () { callback(imageObj); }; @@ -1404,16 +1402,13 @@ */ var Context = /** @class */ (function () { function Context(canvas) { - this.init(canvas); - } - Context.prototype.init = function (canvas) { this.canvas = canvas; this._context = canvas._canvas.getContext('2d'); if (getGlobalKonva().enableTrace) { this.traceArr = []; this._enableTrace(); } - }; + } /** * fill shape * @method @@ -4950,16 +4945,14 @@ * @name Konva.Container#removeChildren */ Container.prototype.removeChildren = function () { - var children = Collection.toCollection(this.children); var child; - for (var i = 0; i < children.length; i++) { - child = children[i]; + for (var i = 0; i < this.children.length; i++) { + child = this.children[i]; // reset parent to prevent many _setChildrenIndices calls child.parent = null; child.index = 0; child.remove(); } - children = null; this.children = new Collection(); return this; }; @@ -4969,16 +4962,14 @@ * @name Konva.Container#destroyChildren */ Container.prototype.destroyChildren = function () { - var children = Collection.toCollection(this.children); var child; - for (var i = 0; i < children.length; i++) { - child = children[i]; + for (var i = 0; i < this.children.length; i++) { + child = this.children[i]; // reset parent to prevent many _setChildrenIndices calls child.parent = null; child.index = 0; child.destroy(); } - children = null; this.children = new Collection(); return this; }; @@ -7342,7 +7333,7 @@ return this; }; Shape.prototype.drawHit = function (can, top, caching) { - var layer = this.getLayer(), canvas = can || layer.hitCanvas, context = canvas.getContext(), drawFunc = this.hitFunc() || this.sceneFunc(), cachedCanvas = this._getCanvasCache(), cachedHitCanvas = cachedCanvas && cachedCanvas.hit; + var layer = this.getLayer(), canvas = can || layer.hitCanvas, context = canvas && canvas.getContext(), drawFunc = this.hitFunc() || this.sceneFunc(), cachedCanvas = this._getCanvasCache(), cachedHitCanvas = cachedCanvas && cachedCanvas.hit; if (!this.colorKey) { Util.warn('Looks like your canvas has a destroyed shape in it. Do not reuse shape after you destroyed it. See the shape in logs above. If you want to reuse shape you should call remove() instead of destroy()'); } diff --git a/konva.min.js b/konva.min.js index 8bb29826..1ee4681e 100644 --- a/konva.min.js +++ b/konva.min.js @@ -3,10 +3,10 @@ * Konva JavaScript Framework v3.0.0-0 * http://konvajs.github.io/ * Licensed under the MIT - * Date: Wed Feb 20 2019 + * Date: Fri Feb 22 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,n={},o={},a="undefined"!=typeof window&&("[object Window]"==={}.toString.call(window)||"[object global]"==={}.toString.call(window)),t=/comment/.test(function(){}.toString()),h=function(t,e){e&&(n[e]||(n[e]=[]),n[e].push(t))},l=function(t,e){if(t){var i=n[t];if(i){for(var r=0;r>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 y?{r:(e=y[t])[0],g:e[1],b:e[2]}:"#"===t[0]?this._hexToRgb(t.substring(1)):"rgb("===t.substr(0,4)?(e=m.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",O._namedColorToRBA(t)||O._hex3ColorToRGBA(t)||O._hex6ColorToRGBA(t)||O._rgbColorToRGBA(t)||O._rgbaColorToRGBA(t)},_namedColorToRBA:function(t){var e=y[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 o=e;e=t,t=o}for(r=0;r=D().traceArrMax&&e.shift()},t.prototype.reset=function(){var t=this.getCanvas().getPixelRatio();this.setTransform(1*t,0,0,1*t,0,0)},t.prototype.getCanvas=function(){return this.canvas},t.prototype.clear=function(t){var e=this.getCanvas();t?this.clearRect(t.x||0,t.y||0,t.width||0,t.height||0):this.clearRect(0,0,e.getWidth()/e.pixelRatio,e.getHeight()/e.pixelRatio)},t.prototype._applyLineCap=function(t){var e=t.getLineCap();e&&this.setAttr("lineCap",e)},t.prototype._applyOpacity=function(t){var e=t.getAbsoluteOpacity();1!==e&&this.setAttr("globalAlpha",e)},t.prototype._applyLineJoin=function(t){var e=t.getLineJoin();e&&this.setAttr("lineJoin",e)},t.prototype.setAttr=function(t,e){this._context[t]=e},t.prototype.arc=function(t,e,i,r,n,a){this._context.arc(t,e,i,r,n,a)},t.prototype.arcTo=function(t,e,i,r,n,a){this._context.arc(t,e,i,r,n,a)},t.prototype.beginPath=function(){this._context.beginPath()},t.prototype.bezierCurveTo=function(t,e,i,r,n,a){this._context.bezierCurveTo(t,e,i,r,n,a)},t.prototype.clearRect=function(t,e,i,r){this._context.clearRect(t,e,i,r)},t.prototype.clip=function(){this._context.clip()},t.prototype.closePath=function(){this._context.closePath()},t.prototype.createImageData=function(t,e){var i=arguments;return 2===i.length?this._context.createImageData(t,e):1===i.length?this._context.createImageData(t):void 0},t.prototype.createLinearGradient=function(t,e,i,r){return this._context.createLinearGradient(t,e,i,r)},t.prototype.createPattern=function(t,e){return this._context.createPattern(t,e)},t.prototype.createRadialGradient=function(t,e,i,r,n,a){return this._context.createRadialGradient(t,e,i,r,n,a)},t.prototype.drawImage=function(t,e,i,r,n,a,o,s,h){var l=arguments,d=this._context;3===l.length?d.drawImage(t,e,i):5===l.length?d.drawImage(t,e,i,r,n):9===l.length&&d.drawImage(t,e,i,r,n,a,o,s,h)},t.prototype.isPointInPath=function(t,e){return this._context.isPointInPath(t,e)},t.prototype.fill=function(){this._context.fill()},t.prototype.fillRect=function(t,e,i,r){this._context.fillRect(t,e,i,r)},t.prototype.strokeRect=function(t,e,i,r){this._context.strokeRect(t,e,i,r)},t.prototype.fillText=function(t,e,i){this._context.fillText(t,e,i)},t.prototype.measureText=function(t){return this._context.measureText(t)},t.prototype.getImageData=function(t,e,i,r){return this._context.getImageData(t,e,i,r)},t.prototype.lineTo=function(t,e){this._context.lineTo(t,e)},t.prototype.moveTo=function(t,e){this._context.moveTo(t,e)},t.prototype.rect=function(t,e,i,r){this._context.rect(t,e,i,r)},t.prototype.putImageData=function(t,e,i){this._context.putImageData(t,e,i)},t.prototype.quadraticCurveTo=function(t,e,i,r){this._context.quadraticCurveTo(t,e,i,r)},t.prototype.restore=function(){this._context.restore()},t.prototype.rotate=function(t){this._context.rotate(t)},t.prototype.save=function(){this._context.save()},t.prototype.scale=function(t,e){this._context.scale(t,e)},t.prototype.setLineDash=function(t){this._context.setLineDash?this._context.setLineDash(t):"mozDash"in this._context?this._context.mozDash=t:"webkitLineDash"in this._context&&(this._context.webkitLineDash=t)},t.prototype.getLineDash=function(){return this._context.getLineDash()},t.prototype.setTransform=function(t,e,i,r,n,a){this._context.setTransform(t,e,i,r,n,a)},t.prototype.stroke=function(){this._context.stroke()},t.prototype.strokeText=function(t,e,i,r){this._context.strokeText(t,e,i,r)},t.prototype.transform=function(t,e,i,r,n,a){this._context.transform(t,e,i,r,n,a)},t.prototype.translate=function(t,e){this._context.translate(t,e)},t.prototype._enableTrace=function(){var t,r,n=this,e=k.length,a=O._simplifyArray,i=this.setAttr,o=function(t){var e,i=n[t];n[t]=function(){return r=a(Array.prototype.slice.call(arguments,0)),e=i.apply(n,arguments),n._trace({method:t,args:r}),e}};for(t=0;t=this.parent.children.length)&&O.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(z,this._getAbsoluteOpacity)},s.prototype._getAbsoluteOpacity=function(){var t=this.opacity(),e=this.getParent();return e&&!e._isUnderCache&&(t*=this.getParent().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,r={},n=this.getAttrs();for(t in r.attrs={},n)e=n[t],O.isObject(e)&&!O._isPlainObject(e)&&!O._isArray(e)||(i="function"==typeof this[t]&&this[t],delete n[t],(i?i.call(this):null)!==(n[t]=e)&&(r.attrs[t]=e));return r.className=this.getClassName(),O._prepareToStringify(r)},s.prototype.toJSON=function(){return JSON.stringify(this.toObject())},s.prototype.getParent=function(){return this.parent},s.prototype.findAncestors=function(t,e,i){var r=[];e&&this._isMatch(t)&&r.push(this);for(var n=this.parent;n;){if(n===i)return r;n._isMatch(t)&&r.push(n),n=n.parent}return r},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;var e,i,r=t.replace(/ /g,"").split(","),n=r.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}(),Yt=function(){function p(t){var e,i,r=this,n=t.node,a=n._id,o=t.easing||Xt.Linear,s=!!t.yoyo;e=void 0===t.duration?.3:0===t.duration?.001:t.duration,this.node=n,this._id=zt++;var h=n.getLayer()||(n instanceof D().Stage?n.getLayers():null);for(i in h||O.error("Tween constructor have `node` that is not in a layer. Please add node into layer first."),this.anim=new F(function(){r.tween.onEnterFrame()},h),this.tween=new Wt(i,function(t){r._tweenFunc(t)},o,0,1,1e3*e,s),this._addListeners(),p.attrs[a]||(p.attrs[a]={}),p.attrs[a][this._id]||(p.attrs[a][this._id]={}),p.tweens[a]||(p.tweens[a]={}),t)void 0===Vt[i]&&this._addAttr(i,t[i]);this.reset(),this.onFinish=t.onFinish,this.onReset=t.onReset}return p.prototype._addAttr=function(t,e){var i,r,n,a,o,s,h,l,d=this.node,c=d._id;if((n=p.tweens[c][t])&&delete p.attrs[c][n][t],i=d.getAttr(t),O._isArray(e))if(r=[],o=Math.max(e.length,i.length),"points"===t&&e.length!==i.length&&(e.length>i.length?(h=i,i=O._prepareArrayForTween(i,e,d.closed())):(s=e,e=O._prepareArrayForTween(e,i,d.closed()))),0===t.indexOf("fill"))for(a=0;athis.dataArray[i].pathLength;)t-=this.dataArray[i].pathLength,++i;if(i===r)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 n=this.dataArray[i],a=n.points;switch(n.command){case"L":return p.getPointOnLine(t,n.start.x,n.start.y,a[0],a[1]);case"C":return p.getPointOnCubicBezier(t/n.pathLength,n.start.x,n.start.y,a[0],a[1],a[2],a[3],a[4],a[5]);case"Q":return p.getPointOnQuadraticBezier(t/n.pathLength,n.start.x,n.start.y,a[0],a[1],a[2],a[3]);case"A":var o=a[0],s=a[1],h=a[2],l=a[3],d=a[4],c=a[5],u=a[6];return d+=c*t/n.pathLength,p.getPointOnEllipticalArc(o,s,h,l,d,u)}return null},p.getLineLength=function(t,e,i,r){return Math.sqrt((i-t)*(i-t)+(r-e)*(r-e))},p.getPointOnLine=function(t,e,i,r,n,a,o){void 0===a&&(a=e),void 0===o&&(o=i);var s=(n-i)/(r-e+1e-8),h=Math.sqrt(t*t/(1+s*s));r>>1,P=_.slice(0,k+1),T=this._getTextWidth(P)+v;T<=l?(S=k+1,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)&&(S=M,w=w.slice(0,S),C=this._getTextWidth(w))}if(w=w.trimRight(),this._addTextLine(w),i=Math.max(i,C),c+=r,!p||s&&de?g=ae.getPointOnLine(e,f.x,f.y,v.points[0],v.points[1],f.x,f.y):v=void 0;break;case"A":var o=v.points[4],s=v.points[5],h=v.points[4]+s;0===m?m=o+1e-8:iv.pathLength?1e-8:e/v.pathLength:i>V,0!==C?(C=255/C,P[s]=(l*B>>V)*C,P[s+1]=(d*B>>V)*C,P[s+2]=(c*B>>V)*C):P[s]=P[s+1]=P[s+2]=0,l-=p,d-=f,c-=g,u-=v,p-=F.r,f-=F.g,g-=F.b,v-=F.a,a=h+((a=i+e+1)>V,0>V)*C,P[a+1]=(d*B>>V)*C,P[a+2]=(c*B>>V)*C):P[a]=P[a+1]=P[a+2]=0,l-=p,d-=f,c-=g,u-=v,p-=F.r,f-=F.g,g-=F.b,v-=F.a,a=i+((a=r+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 y?{r:(e=y[t])[0],g:e[1],b:e[2]}:"#"===t[0]?this._hexToRgb(t.substring(1)):"rgb("===t.substr(0,4)?(e=m.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",O._namedColorToRBA(t)||O._hex3ColorToRGBA(t)||O._hex6ColorToRGBA(t)||O._rgbColorToRGBA(t)||O._rgbaColorToRGBA(t)},_namedColorToRBA:function(t){var e=y[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 o=e;e=t,t=o}for(r=0;r=D().traceArrMax&&e.shift()},t.prototype.reset=function(){var t=this.getCanvas().getPixelRatio();this.setTransform(1*t,0,0,1*t,0,0)},t.prototype.getCanvas=function(){return this.canvas},t.prototype.clear=function(t){var e=this.getCanvas();t?this.clearRect(t.x||0,t.y||0,t.width||0,t.height||0):this.clearRect(0,0,e.getWidth()/e.pixelRatio,e.getHeight()/e.pixelRatio)},t.prototype._applyLineCap=function(t){var e=t.getLineCap();e&&this.setAttr("lineCap",e)},t.prototype._applyOpacity=function(t){var e=t.getAbsoluteOpacity();1!==e&&this.setAttr("globalAlpha",e)},t.prototype._applyLineJoin=function(t){var e=t.getLineJoin();e&&this.setAttr("lineJoin",e)},t.prototype.setAttr=function(t,e){this._context[t]=e},t.prototype.arc=function(t,e,i,r,n,a){this._context.arc(t,e,i,r,n,a)},t.prototype.arcTo=function(t,e,i,r,n,a){this._context.arc(t,e,i,r,n,a)},t.prototype.beginPath=function(){this._context.beginPath()},t.prototype.bezierCurveTo=function(t,e,i,r,n,a){this._context.bezierCurveTo(t,e,i,r,n,a)},t.prototype.clearRect=function(t,e,i,r){this._context.clearRect(t,e,i,r)},t.prototype.clip=function(){this._context.clip()},t.prototype.closePath=function(){this._context.closePath()},t.prototype.createImageData=function(t,e){var i=arguments;return 2===i.length?this._context.createImageData(t,e):1===i.length?this._context.createImageData(t):void 0},t.prototype.createLinearGradient=function(t,e,i,r){return this._context.createLinearGradient(t,e,i,r)},t.prototype.createPattern=function(t,e){return this._context.createPattern(t,e)},t.prototype.createRadialGradient=function(t,e,i,r,n,a){return this._context.createRadialGradient(t,e,i,r,n,a)},t.prototype.drawImage=function(t,e,i,r,n,a,o,s,h){var l=arguments,d=this._context;3===l.length?d.drawImage(t,e,i):5===l.length?d.drawImage(t,e,i,r,n):9===l.length&&d.drawImage(t,e,i,r,n,a,o,s,h)},t.prototype.isPointInPath=function(t,e){return this._context.isPointInPath(t,e)},t.prototype.fill=function(){this._context.fill()},t.prototype.fillRect=function(t,e,i,r){this._context.fillRect(t,e,i,r)},t.prototype.strokeRect=function(t,e,i,r){this._context.strokeRect(t,e,i,r)},t.prototype.fillText=function(t,e,i){this._context.fillText(t,e,i)},t.prototype.measureText=function(t){return this._context.measureText(t)},t.prototype.getImageData=function(t,e,i,r){return this._context.getImageData(t,e,i,r)},t.prototype.lineTo=function(t,e){this._context.lineTo(t,e)},t.prototype.moveTo=function(t,e){this._context.moveTo(t,e)},t.prototype.rect=function(t,e,i,r){this._context.rect(t,e,i,r)},t.prototype.putImageData=function(t,e,i){this._context.putImageData(t,e,i)},t.prototype.quadraticCurveTo=function(t,e,i,r){this._context.quadraticCurveTo(t,e,i,r)},t.prototype.restore=function(){this._context.restore()},t.prototype.rotate=function(t){this._context.rotate(t)},t.prototype.save=function(){this._context.save()},t.prototype.scale=function(t,e){this._context.scale(t,e)},t.prototype.setLineDash=function(t){this._context.setLineDash?this._context.setLineDash(t):"mozDash"in this._context?this._context.mozDash=t:"webkitLineDash"in this._context&&(this._context.webkitLineDash=t)},t.prototype.getLineDash=function(){return this._context.getLineDash()},t.prototype.setTransform=function(t,e,i,r,n,a){this._context.setTransform(t,e,i,r,n,a)},t.prototype.stroke=function(){this._context.stroke()},t.prototype.strokeText=function(t,e,i,r){this._context.strokeText(t,e,i,r)},t.prototype.transform=function(t,e,i,r,n,a){this._context.transform(t,e,i,r,n,a)},t.prototype.translate=function(t,e){this._context.translate(t,e)},t.prototype._enableTrace=function(){var t,r,n=this,e=P.length,a=O._simplifyArray,i=this.setAttr,o=function(t){var e,i=n[t];n[t]=function(){return r=a(Array.prototype.slice.call(arguments,0)),e=i.apply(n,arguments),n._trace({method:t,args:r}),e}};for(t=0;t=this.parent.children.length)&&O.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(H,this._getAbsoluteOpacity)},s.prototype._getAbsoluteOpacity=function(){var t=this.opacity(),e=this.getParent();return e&&!e._isUnderCache&&(t*=this.getParent().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,r={},n=this.getAttrs();for(t in r.attrs={},n)e=n[t],O.isObject(e)&&!O._isPlainObject(e)&&!O._isArray(e)||(i="function"==typeof this[t]&&this[t],delete n[t],(i?i.call(this):null)!==(n[t]=e)&&(r.attrs[t]=e));return r.className=this.getClassName(),O._prepareToStringify(r)},s.prototype.toJSON=function(){return JSON.stringify(this.toObject())},s.prototype.getParent=function(){return this.parent},s.prototype.findAncestors=function(t,e,i){var r=[];e&&this._isMatch(t)&&r.push(this);for(var n=this.parent;n;){if(n===i)return r;n._isMatch(t)&&r.push(n),n=n.parent}return r},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;var e,i,r=t.replace(/ /g,"").split(","),n=r.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}(),Xt=function(){function p(t){var e,i,r=this,n=t.node,a=n._id,o=t.easing||jt.Linear,s=!!t.yoyo;e=void 0===t.duration?.3:0===t.duration?.001:t.duration,this.node=n,this._id=Ht++;var h=n.getLayer()||(n instanceof D().Stage?n.getLayers():null);for(i in h||O.error("Tween constructor have `node` that is not in a layer. Please add node into layer first."),this.anim=new E(function(){r.tween.onEnterFrame()},h),this.tween=new Yt(i,function(t){r._tweenFunc(t)},o,0,1,1e3*e,s),this._addListeners(),p.attrs[a]||(p.attrs[a]={}),p.attrs[a][this._id]||(p.attrs[a][this._id]={}),p.tweens[a]||(p.tweens[a]={}),t)void 0===zt[i]&&this._addAttr(i,t[i]);this.reset(),this.onFinish=t.onFinish,this.onReset=t.onReset}return p.prototype._addAttr=function(t,e){var i,r,n,a,o,s,h,l,d=this.node,c=d._id;if((n=p.tweens[c][t])&&delete p.attrs[c][n][t],i=d.getAttr(t),O._isArray(e))if(r=[],o=Math.max(e.length,i.length),"points"===t&&e.length!==i.length&&(e.length>i.length?(h=i,i=O._prepareArrayForTween(i,e,d.closed())):(s=e,e=O._prepareArrayForTween(e,i,d.closed()))),0===t.indexOf("fill"))for(a=0;athis.dataArray[i].pathLength;)t-=this.dataArray[i].pathLength,++i;if(i===r)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 n=this.dataArray[i],a=n.points;switch(n.command){case"L":return p.getPointOnLine(t,n.start.x,n.start.y,a[0],a[1]);case"C":return p.getPointOnCubicBezier(t/n.pathLength,n.start.x,n.start.y,a[0],a[1],a[2],a[3],a[4],a[5]);case"Q":return p.getPointOnQuadraticBezier(t/n.pathLength,n.start.x,n.start.y,a[0],a[1],a[2],a[3]);case"A":var o=a[0],s=a[1],h=a[2],l=a[3],d=a[4],c=a[5],u=a[6];return d+=c*t/n.pathLength,p.getPointOnEllipticalArc(o,s,h,l,d,u)}return null},p.getLineLength=function(t,e,i,r){return Math.sqrt((i-t)*(i-t)+(r-e)*(r-e))},p.getPointOnLine=function(t,e,i,r,n,a,o){void 0===a&&(a=e),void 0===o&&(o=i);var s=(n-i)/(r-e+1e-8),h=Math.sqrt(t*t/(1+s*s));r>>1,P=_.slice(0,k+1),T=this._getTextWidth(P)+v;T<=l?(S=k+1,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)&&(S=M,w=w.slice(0,S),C=this._getTextWidth(w))}if(w=w.trimRight(),this._addTextLine(w),i=Math.max(i,C),c+=r,!p||s&&de?g=oe.getPointOnLine(e,f.x,f.y,v.points[0],v.points[1],f.x,f.y):v=void 0;break;case"A":var o=v.points[4],s=v.points[5],h=v.points[4]+s;0===m?m=o+1e-8:iv.pathLength?1e-8:e/v.pathLength:i>V,0!==C?(C=255/C,P[s]=(l*B>>V)*C,P[s+1]=(d*B>>V)*C,P[s+2]=(c*B>>V)*C):P[s]=P[s+1]=P[s+2]=0,l-=p,d-=f,c-=g,u-=v,p-=F.r,f-=F.g,g-=F.b,v-=F.a,a=h+((a=i+e+1)>V,0>V)*C,P[a+1]=(d*B>>V)*C,P[a+2]=(c*B>>V)*C):P[a]=P[a+1]=P[a+2]=0,l-=p,d-=f,c-=g,u-=v,p-=F.r,f-=F.g,g-=F.b,v-=F.a,a=i+((a=r+L); - constructor(canvas) { - this.init(canvas); - } - - init(canvas) { + constructor(canvas: Canvas) { this.canvas = canvas; - this._context = canvas._canvas.getContext('2d'); + this._context = canvas._canvas.getContext('2d') as CanvasRenderingContext2D; if (getGlobalKonva().enableTrace) { this.traceArr = []; this._enableTrace(); } } + /** * fill shape * @method diff --git a/src/Shape.ts b/src/Shape.ts index 78c1d64d..eb5c996c 100644 --- a/src/Shape.ts +++ b/src/Shape.ts @@ -531,7 +531,7 @@ export class Shape extends Node { drawHit(can, top?, caching?) { var layer = this.getLayer(), canvas = can || layer.hitCanvas, - context = canvas.getContext(), + context = canvas && canvas.getContext(), drawFunc = this.hitFunc() || this.sceneFunc(), cachedCanvas = this._getCanvasCache(), cachedHitCanvas = cachedCanvas && cachedCanvas.hit; diff --git a/src/Util.ts b/src/Util.ts index 4430df03..0e47dcbf 100644 --- a/src/Util.ts +++ b/src/Util.ts @@ -29,11 +29,17 @@ export interface RectConf { export class Collection { [index: number]: Child; + // @ts-ignore length: number; + // @ts-ignore each: (f: Function) => void; + // @ts-ignore toArray: () => Array; + // @ts-ignore push: (item: Child) => void; + // @ts-ignore unshift: (item: Child) => void; + // @ts-ignore splice: (start: number, length: number, replace?: any) => void; /** @@ -42,7 +48,7 @@ export class Collection { * @memberof Konva.Collection * @param {Array} arr */ - static toCollection(arr) { + static toCollection(arr: Array) { var collection = new Collection(), len = arr.length, n; @@ -53,7 +59,7 @@ export class Collection { return collection; } - static _mapMethod(methodName) { + static _mapMethod(methodName: any) { Collection.prototype[methodName] = function() { var len = this.length, i; @@ -67,7 +73,7 @@ export class Collection { }; } - static mapMethods = function(constructor) { + static mapMethods = function(constructor: Function) { var prot = constructor.prototype; for (var methodName in prot) { Collection._mapMethod(methodName); @@ -156,7 +162,7 @@ export class Transform { * @param {Object} point 2D point(x, y) * @returns {Object} 2D point(x, y) */ - point(point) { + point(point: Point) { var m = this.m; return { x: m[0] * point.x + m[2] * point.y + m[4], @@ -171,7 +177,7 @@ export class Transform { * @param {Number} y * @returns {Konva.Transform} */ - translate(x, y) { + translate(x: number, y: number) { this.m[4] += this.m[0] * x + this.m[2] * y; this.m[5] += this.m[1] * x + this.m[3] * y; return this; @@ -184,7 +190,7 @@ export class Transform { * @param {Number} sy * @returns {Konva.Transform} */ - scale(sx, sy) { + scale(sx: number, sy: number) { this.m[0] *= sx; this.m[1] *= sx; this.m[2] *= sy; @@ -198,7 +204,7 @@ export class Transform { * @param {Number} rad Angle in radians * @returns {Konva.Transform} */ - rotate(rad) { + rotate(rad: number) { var c = Math.cos(rad); var s = Math.sin(rad); var m11 = this.m[0] * c + this.m[2] * s; @@ -231,7 +237,7 @@ export class Transform { * @param {Number} sy * @returns {Konva.Transform} */ - skew(sx, sy) { + skew(sx: number, sy: number) { var m11 = this.m[0] + this.m[2] * sy; var m12 = this.m[1] + this.m[3] * sy; var m21 = this.m[2] + this.m[0] * sx; @@ -249,7 +255,7 @@ export class Transform { * @param {Konva.Transform} matrix * @returns {Konva.Transform} */ - multiply(matrix) { + multiply(matrix: Transform) { var m11 = this.m[0] * matrix.m[0] + this.m[2] * matrix.m[1]; var m12 = this.m[1] * matrix.m[0] + this.m[3] * matrix.m[1]; @@ -304,7 +310,7 @@ export class Transform { * @returns {Konva.Transform} * @author ericdrowell */ - setAbsolutePosition(x, y) { + setAbsolutePosition(x: number, y: number) { var m0 = this.m[0], m1 = this.m[1], m2 = this.m[2], @@ -482,7 +488,8 @@ var OBJECT_ARRAY = '[object Array]', yellow: [255, 255, 0], yellowgreen: [154, 205, 5] }, - RGB_REGEX = /rgb\((\d{1,3}),(\d{1,3}),(\d{1,3})\)/; + RGB_REGEX = /rgb\((\d{1,3}),(\d{1,3}),(\d{1,3})\)/, + animQueue: Array = []; /** * @namespace Util @@ -492,36 +499,36 @@ export const Util = { /* * cherry-picked utilities from underscore.js */ - _isElement(obj) { + _isElement(obj: any) { return !!(obj && obj.nodeType == 1); }, - _isFunction(obj) { + _isFunction(obj: any) { return !!(obj && obj.constructor && obj.call && obj.apply); }, - _isPlainObject(obj) { + _isPlainObject(obj: any) { return !!obj && obj.constructor === Object; }, - _isArray(obj) { + _isArray(obj: any) { return Object.prototype.toString.call(obj) === OBJECT_ARRAY; }, - _isNumber(obj) { + _isNumber(obj: any) { return ( Object.prototype.toString.call(obj) === OBJECT_NUMBER && !isNaN(obj) && isFinite(obj) ); }, - _isString(obj) { + _isString(obj: any) { return Object.prototype.toString.call(obj) === OBJECT_STRING; }, - _isBoolean(obj) { + _isBoolean(obj: any) { return Object.prototype.toString.call(obj) === OBJECT_BOOLEAN; }, // arrays are objects too - isObject(val) { + isObject(val: any) { return val instanceof Object; }, - isValidSelector(selector) { + isValidSelector(selector: any) { if (typeof selector !== 'string') { return false; } @@ -532,7 +539,7 @@ export const Util = { firstChar === firstChar.toUpperCase() ); }, - _sign(number) { + _sign(number: number) { if (number === 0) { return 0; } @@ -542,13 +549,13 @@ export const Util = { return -1; } }, - animQueue: [], - requestAnimFrame(callback) { - Util.animQueue.push(callback); - if (Util.animQueue.length === 1) { + + requestAnimFrame(callback: Function) { + animQueue.push(callback); + if (animQueue.length === 1) { requestAnimationFrame(function() { - const queue = Util.animQueue; - Util.animQueue = []; + const queue = animQueue; + animQueue = []; queue.forEach(function(cb) { cb(); }); @@ -568,7 +575,7 @@ export const Util = { createImageElement() { return document.createElement('img'); }, - _isInDocument(el) { + _isInDocument(el: any) { while ((el = el.parentNode)) { if (el == document) { return true; @@ -576,7 +583,7 @@ export const Util = { } return false; }, - _simplifyArray(arr) { + _simplifyArray(arr: []) { var retArr = [], len = arr.length, util = Util, @@ -599,20 +606,18 @@ export const Util = { /* * arg can be an image object or image data */ - _urlToImage(url, callback) { - var imageObj; - + _urlToImage(url: string, callback: Function) { // if arg is a string, then it's a data url - imageObj = new glob.Image(); + var imageObj = new glob.Image(); imageObj.onload = function() { callback(imageObj); }; imageObj.src = url; }, - _rgbToHex(r, g, b) { + _rgbToHex(r: number, g: number, b: number) { return ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1); }, - _hexToRgb(hex) { + _hexToRgb(hex: string) { hex = hex.replace(HASH, EMPTY_STRING); var bigint = parseInt(hex, 16); return { diff --git a/test/unit/FastLayer-test.js b/test/unit/FastLayer-test.js index cea3f472..0c832d3e 100644 --- a/test/unit/FastLayer-test.js +++ b/test/unit/FastLayer-test.js @@ -18,6 +18,26 @@ suite('FastLayer', function() { stage.add(layer); }); + test('should not throw on shape render', function() { + var stage = addStage(); + + var layer = new Konva.FastLayer(); + + var circle = new Konva.Circle({ + x: 100, + y: stage.getHeight() / 2, + radius: 70, + fill: 'green', + stroke: 'black', + strokeWidth: 4 + }); + + layer.add(circle); + stage.add(layer); + + circle.draw(); + }); + test('transform', function() { var stage = addStage(); diff --git a/test/unit/Stage-test.js b/test/unit/Stage-test.js index bffdb1f8..1a310cbd 100644 --- a/test/unit/Stage-test.js +++ b/test/unit/Stage-test.js @@ -529,6 +529,26 @@ suite('Stage', function() { ); }); + // ====================================================== + test('Should not throw on clip for stage', function() { + // no asserts, because we check throw + var stage = addStage({ + clipFunc: () => {} + }); + var layer = new Konva.Layer(); + + var text = new Konva.Text({ + x: 0, + y: 0, + text: 'Hello world', + fontSize: 50, + name: 'intersectText' + }); + + layer.add(text); + stage.add(layer); + }); + // ====================================================== test('scale stage after add layer', function() { var stage = addStage(); diff --git a/tsconfig.json b/tsconfig.json index 47acb675..01161901 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -6,6 +6,7 @@ "target": "es5", "noEmitOnError": true, "lib": ["es2015", "dom"] + // "strict": true }, "include": [ "src/index.ts"