js-confetti - npm Package Compare versions

Comparing version 0.4.0 to 0.5.0

dist/es/index.js

@@ -135,8 +135,6 @@ function _classCallCheck(instance, Constructor) {
       this.rotationSpeed -= ROTATION_SLOWDOWN_ACCELERATION * iterationTimeDelta;
-      if (this.rotationSpeed < 0) this.rotationSpeed = 0; // Do not update confettiSpeed while confetti is invisible
-
-      var needUpdateSpeed = direction === 'left' ? this.currentPosition.x >= 0 : this.currentPosition.x <= canvasWidth;
-      if (needUpdateSpeed && confettiSpeed.x > finalConfettiSpeedX) this.confettiSpeed.x -= dragForceCoefficient * iterationTimeDelta;
+      if (this.rotationSpeed < 0) this.rotationSpeed = 0;
+      if (confettiSpeed.x > finalConfettiSpeedX) this.confettiSpeed.x -= dragForceCoefficient * iterationTimeDelta;
       this.currentPosition.x += confettiSpeed.x * (direction === 'left' ? -this.absCos : this.absCos) * iterationTimeDelta;
-      this.currentPosition.y = this.initialPosition.y - confettiSpeed.y * this.absSin * timeDeltaSinceCreation + (needUpdateSpeed ? FREE_FALLING_OBJECT_ACCELERATION * Math.pow(timeDeltaSinceCreation, 2) / 2 : 0);
+      this.currentPosition.y = this.initialPosition.y - confettiSpeed.y * this.absSin * timeDeltaSinceCreation + FREE_FALLING_OBJECT_ACCELERATION * Math.pow(timeDeltaSinceCreation, 2) / 2;
 
@@ -198,4 +196,2 @@ if (radiusYUpdateDirection === 'down') {
   function JSConfetti() {
-    var _this = this;
-
     _classCallCheck(this, JSConfetti);
@@ -207,5 +203,5 @@
     this.lastUpdated = new Date().getTime();
-    setTimeout(function () {
-      return _this.loop.call(_this, 0);
-    }, 0);
+    this.iterationIndex = 0;
+    this.loop = this.loop.bind(this);
+    requestAnimationFrame(this.loop);
   }
@@ -215,4 +211,4 @@
     key: "loop",
-    value: function loop(iterationIndex) {
-      var _this2 = this;
+    value: function loop() {
+      var _this = this;
 
@@ -226,6 +222,6 @@ fixDPR(this.canvas);
         shape.updatePosition(timeDelta, currentTime, canvasWidth);
-        shape.draw(_this2.canvasContext);
+        shape.draw(_this.canvasContext);
       }); // Do not remove invisible shapes on every iteration
 
-      if (iterationIndex % 100 === 0) {
+      if (this.iterationIndex % 100 === 0) {
         this.shapes = this.shapes.filter(function (shape) {
@@ -237,5 +233,4 @@ return shape.getIsVisibleOnCanvas(canvasHeight);
       this.lastUpdated = currentTime;
-      setTimeout(function () {
-        return _this2.loop.call(_this2, ++iterationIndex);
-      }, 0);
+      this.iterationIndex++;
+      requestAnimationFrame(this.loop);
     }
@@ -242,0 +237,0 @@ }, {

dist/js-confetti.min.js

@@ -1,1 +0,1 @@
-!function(t,i){"object"==typeof exports&&"undefined"!=typeof module?module.exports=i():"function"==typeof define&&define.amd?define(i):(t="undefined"!=typeof globalThis?globalThis:t||self).jsConfetti=i()}(this,(function(){"use strict";function t(t,i){if(!(t instanceof i))throw new TypeError("Cannot call a class as a function")}function i(t,i){for(var e=0;e<i.length;e++){var n=i[e];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}function e(t,e,n){return e&&i(t.prototype,e),n&&i(t,n),t}function n(t){return+t.replace(/px/,"")}function o(t,i){var e=arguments.length>2&&void 0!==arguments[2]?arguments[2]:0,n=Math.random()*(i-t)+t;return Math.floor(n*Math.pow(10,e))/Math.pow(10,e)}var s=["#fcf403","#62fc03","#f4fc03","#03e7fc","#03fca5","#a503fc","#fc03ad","#fc03c2"];var a=function(){function i(e){var n=e.initialPosition,s=e.direction,a=e.confettiRadius,r=e.confettiColors;t(this,i);var h=o(.9,1.7,3)*(Math.log(window.innerWidth)/Math.log(1920));this.confettiSpeed={x:h,y:h},this.finalConfettiSpeedX=o(.2,.6,3),this.rotationSpeed=o(.03,.1,3),this.dragForceCoefficient=o(5e-4,9e-4,6),this.radius={x:a,y:a},this.initialRadius=a,this.rotationAngle="left"===s?o(0,.2,3):o(-.2,0,3),this.radiusYUpdateDirection="down";var c="left"===s?o(82,15)*Math.PI/180:o(-15,-82)*Math.PI/180;this.absCos=Math.abs(Math.cos(c)),this.absSin=Math.abs(Math.sin(c));var d=o(-150,0),f={x:n.x+("left"===s?-d:d)*this.absCos,y:n.y-d*this.absSin};this.currentPosition=Object.assign({},f),this.initialPosition=Object.assign({},f),this.color=function(t){return t[o(0,t.length)]}(r),this.createdAt=(new Date).getTime(),this.direction=s}return e(i,[{key:"draw",value:function(t){var i=this.currentPosition,e=this.radius,n=this.color,o=this.rotationAngle,s=window.devicePixelRatio;t.fillStyle=n,t.beginPath(),t.ellipse(i.x*s,i.y*s,e.x*s,e.y*s,o,0,2*Math.PI),t.fill()}},{key:"updatePosition",value:function(t,i,e){var n=this.confettiSpeed,o=this.dragForceCoefficient,s=this.finalConfettiSpeedX,a=this.radiusYUpdateDirection,r=this.rotationSpeed,h=this.createdAt,c=this.direction,d=i-h;this.rotationSpeed-=1e-5*t,this.rotationSpeed<0&&(this.rotationSpeed=0);var f="left"===c?this.currentPosition.x>=0:this.currentPosition.x<=e;f&&n.x>s&&(this.confettiSpeed.x-=o*t),this.currentPosition.x+=n.x*("left"===c?-this.absCos:this.absCos)*t,this.currentPosition.y=this.initialPosition.y-n.y*this.absSin*d+(f?.00125*Math.pow(d,2)/2:0),"down"===a?(this.radius.y-=t*r,this.radius.y<=0&&(this.radius.y=0,this.radiusYUpdateDirection="up")):(this.radius.y+=t*r,this.radius.y>=this.initialRadius&&(this.radius.y=this.initialRadius,this.radiusYUpdateDirection="down"))}},{key:"getIsVisibleOnCanvas",value:function(t){return this.currentPosition.y<t+100}}]),i}();function r(t){var i=t.confettiRadius,e=void 0===i?8:i,n=t.confettiesNumber,o=void 0===n?200:n,a=t.confettiColors;return{confettiRadius:e,confettiesNumber:o,confettiColors:void 0===a?s:a}}return function(){function i(){var e,n=this;t(this,i),this.canvas=((e=document.createElement("canvas")).style.position="fixed",e.style.width="100%",e.style.height="100%",e.style.top="0",e.style.left="0",e.style.zIndex="1000",e.style.pointerEvents="none",document.body.appendChild(e),e),this.canvasContext=this.canvas.getContext("2d"),this.shapes=[],this.lastUpdated=(new Date).getTime(),setTimeout((function(){return n.loop.call(n,0)}),0)}return e(i,[{key:"loop",value:function(t){var i,e,o,s,a,r=this;i=this.canvas,e=window.devicePixelRatio,o=getComputedStyle(i),s=n(o.getPropertyValue("width")),a=n(o.getPropertyValue("height")),i.setAttribute("width",(s*e).toString()),i.setAttribute("height",(a*e).toString());var h=(new Date).getTime(),c=h-this.lastUpdated,d=this.canvas.offsetHeight,f=this.canvas.offsetWidth;this.shapes.forEach((function(t){t.updatePosition(c,h,f),t.draw(r.canvasContext)})),t%100==0&&(this.shapes=this.shapes.filter((function(t){return t.getIsVisibleOnCanvas(d)}))),this.lastUpdated=h,setTimeout((function(){return r.loop.call(r,++t)}),0)}},{key:"addConfetti",value:function(){for(var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},i=r(t),e=i.confettiRadius,n=i.confettiesNumber,o=i.confettiColors,s=5*window.innerHeight/7,h={x:0,y:s},c={x:window.innerWidth,y:s},d=0;d<n/2;d++)this.shapes.push(new a({initialPosition:h,direction:"right",confettiRadius:e,confettiColors:o})),this.shapes.push(new a({initialPosition:c,direction:"left",confettiRadius:e,confettiColors:o}))}}]),i}()}));
+!function(t,i){"object"==typeof exports&&"undefined"!=typeof module?module.exports=i():"function"==typeof define&&define.amd?define(i):(t="undefined"!=typeof globalThis?globalThis:t||self).jsConfetti=i()}(this,(function(){"use strict";function t(t,i){if(!(t instanceof i))throw new TypeError("Cannot call a class as a function")}function i(t,i){for(var e=0;e<i.length;e++){var n=i[e];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}function e(t,e,n){return e&&i(t.prototype,e),n&&i(t,n),t}function n(t){return+t.replace(/px/,"")}function s(t,i){var e=arguments.length>2&&void 0!==arguments[2]?arguments[2]:0,n=Math.random()*(i-t)+t;return Math.floor(n*Math.pow(10,e))/Math.pow(10,e)}var o=["#fcf403","#62fc03","#f4fc03","#03e7fc","#03fca5","#a503fc","#fc03ad","#fc03c2"];var a=function(){function i(e){var n=e.initialPosition,o=e.direction,a=e.confettiRadius,r=e.confettiColors;t(this,i);var h=s(.9,1.7,3)*(Math.log(window.innerWidth)/Math.log(1920));this.confettiSpeed={x:h,y:h},this.finalConfettiSpeedX=s(.2,.6,3),this.rotationSpeed=s(.03,.1,3),this.dragForceCoefficient=s(5e-4,9e-4,6),this.radius={x:a,y:a},this.initialRadius=a,this.rotationAngle="left"===o?s(0,.2,3):s(-.2,0,3),this.radiusYUpdateDirection="down";var d="left"===o?s(82,15)*Math.PI/180:s(-15,-82)*Math.PI/180;this.absCos=Math.abs(Math.cos(d)),this.absSin=Math.abs(Math.sin(d));var c=s(-150,0),f={x:n.x+("left"===o?-c:c)*this.absCos,y:n.y-c*this.absSin};this.currentPosition=Object.assign({},f),this.initialPosition=Object.assign({},f),this.color=function(t){return t[s(0,t.length)]}(r),this.createdAt=(new Date).getTime(),this.direction=o}return e(i,[{key:"draw",value:function(t){var i=this.currentPosition,e=this.radius,n=this.color,s=this.rotationAngle,o=window.devicePixelRatio;t.fillStyle=n,t.beginPath(),t.ellipse(i.x*o,i.y*o,e.x*o,e.y*o,s,0,2*Math.PI),t.fill()}},{key:"updatePosition",value:function(t,i,e){var n=this.confettiSpeed,s=this.dragForceCoefficient,o=this.finalConfettiSpeedX,a=this.radiusYUpdateDirection,r=this.rotationSpeed,h=this.createdAt,d=this.direction,c=i-h;this.rotationSpeed-=1e-5*t,this.rotationSpeed<0&&(this.rotationSpeed=0),n.x>o&&(this.confettiSpeed.x-=s*t),this.currentPosition.x+=n.x*("left"===d?-this.absCos:this.absCos)*t,this.currentPosition.y=this.initialPosition.y-n.y*this.absSin*c+.00125*Math.pow(c,2)/2,"down"===a?(this.radius.y-=t*r,this.radius.y<=0&&(this.radius.y=0,this.radiusYUpdateDirection="up")):(this.radius.y+=t*r,this.radius.y>=this.initialRadius&&(this.radius.y=this.initialRadius,this.radiusYUpdateDirection="down"))}},{key:"getIsVisibleOnCanvas",value:function(t){return this.currentPosition.y<t+100}}]),i}();function r(t){var i=t.confettiRadius,e=void 0===i?8:i,n=t.confettiesNumber,s=void 0===n?200:n,a=t.confettiColors;return{confettiRadius:e,confettiesNumber:s,confettiColors:void 0===a?o:a}}return function(){function i(){var e;t(this,i),this.canvas=((e=document.createElement("canvas")).style.position="fixed",e.style.width="100%",e.style.height="100%",e.style.top="0",e.style.left="0",e.style.zIndex="1000",e.style.pointerEvents="none",document.body.appendChild(e),e),this.canvasContext=this.canvas.getContext("2d"),this.shapes=[],this.lastUpdated=(new Date).getTime(),this.iterationIndex=0,this.loop=this.loop.bind(this),requestAnimationFrame(this.loop)}return e(i,[{key:"loop",value:function(){var t,i,e,s,o,a=this;t=this.canvas,i=window.devicePixelRatio,e=getComputedStyle(t),s=n(e.getPropertyValue("width")),o=n(e.getPropertyValue("height")),t.setAttribute("width",(s*i).toString()),t.setAttribute("height",(o*i).toString());var r=(new Date).getTime(),h=r-this.lastUpdated,d=this.canvas.offsetHeight,c=this.canvas.offsetWidth;this.shapes.forEach((function(t){t.updatePosition(h,r,c),t.draw(a.canvasContext)})),this.iterationIndex%100==0&&(this.shapes=this.shapes.filter((function(t){return t.getIsVisibleOnCanvas(d)}))),this.lastUpdated=r,this.iterationIndex++,requestAnimationFrame(this.loop)}},{key:"addConfetti",value:function(){for(var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},i=r(t),e=i.confettiRadius,n=i.confettiesNumber,s=i.confettiColors,o=5*window.innerHeight/7,h={x:0,y:o},d={x:window.innerWidth,y:o},c=0;c<n/2;c++)this.shapes.push(new a({initialPosition:h,direction:"right",confettiRadius:e,confettiColors:s})),this.shapes.push(new a({initialPosition:d,direction:"left",confettiRadius:e,confettiColors:s}))}}]),i}()}));

package.json

 {
   "name": "js-confetti",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "license": "MIT",
@@ -5,0 +5,0 @@ "description": "JS Confetti library with zero dependencies, works without any config, TS typings included, adapts to user screen",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

19619

decreased by-1.5%

Lines of code

272

decreased by-1.09%

No dependency changes