tsparticles 1.42.0 → 1.42.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (81) hide show
  1. package/Core/Canvas.d.ts +1 -1
  2. package/Core/Canvas.js +16 -7
  3. package/Core/Particles.js +2 -3
  4. package/Plugins/Emitters/Options/Classes/Emitter.js +2 -2
  5. package/browser/Core/Canvas.d.ts +1 -1
  6. package/browser/Core/Canvas.js +16 -7
  7. package/browser/Core/Particles.js +3 -4
  8. package/browser/Plugins/Emitters/Options/Classes/Emitter.js +2 -2
  9. package/esm/Core/Canvas.d.ts +1 -1
  10. package/esm/Core/Canvas.js +16 -7
  11. package/esm/Core/Particles.js +2 -3
  12. package/esm/Plugins/Emitters/Options/Classes/Emitter.js +2 -2
  13. package/package.json +15 -3
  14. package/report.html +2 -2
  15. package/report.slim.html +2 -2
  16. package/tsparticles.engine.js +15 -10
  17. package/tsparticles.engine.min.js +2 -2
  18. package/tsparticles.interaction.external.attract.js +15 -10
  19. package/tsparticles.interaction.external.attract.min.js +1 -1
  20. package/tsparticles.interaction.external.bounce.js +15 -10
  21. package/tsparticles.interaction.external.bounce.min.js +1 -1
  22. package/tsparticles.interaction.external.bubble.js +15 -10
  23. package/tsparticles.interaction.external.bubble.min.js +1 -1
  24. package/tsparticles.interaction.external.connect.js +15 -10
  25. package/tsparticles.interaction.external.connect.min.js +1 -1
  26. package/tsparticles.interaction.external.grab.js +15 -10
  27. package/tsparticles.interaction.external.grab.min.js +1 -1
  28. package/tsparticles.interaction.external.repulse.js +15 -10
  29. package/tsparticles.interaction.external.repulse.min.js +1 -1
  30. package/tsparticles.interaction.external.trail.js +15 -10
  31. package/tsparticles.interaction.external.trail.min.js +1 -1
  32. package/tsparticles.interaction.particles.attract.js +15 -10
  33. package/tsparticles.interaction.particles.attract.min.js +1 -1
  34. package/tsparticles.interaction.particles.collisions.js +15 -10
  35. package/tsparticles.interaction.particles.collisions.min.js +1 -1
  36. package/tsparticles.interaction.particles.links.js +15 -10
  37. package/tsparticles.interaction.particles.links.min.js +1 -1
  38. package/tsparticles.js +17 -12
  39. package/tsparticles.min.js +2 -2
  40. package/tsparticles.pathseg.min.js +1 -1
  41. package/tsparticles.plugins.absorbers.js +15 -10
  42. package/tsparticles.plugins.absorbers.min.js +1 -1
  43. package/tsparticles.plugins.emitters.js +17 -12
  44. package/tsparticles.plugins.emitters.min.js +2 -2
  45. package/tsparticles.plugins.polygonMask.js +15 -10
  46. package/tsparticles.plugins.polygonMask.min.js +1 -1
  47. package/tsparticles.shape.circle.min.js +1 -1
  48. package/tsparticles.shape.image.js +15 -10
  49. package/tsparticles.shape.image.min.js +1 -1
  50. package/tsparticles.shape.line.min.js +1 -1
  51. package/tsparticles.shape.polygon.min.js +1 -1
  52. package/tsparticles.shape.square.min.js +1 -1
  53. package/tsparticles.shape.star.min.js +1 -1
  54. package/tsparticles.shape.text.js +15 -10
  55. package/tsparticles.shape.text.min.js +1 -1
  56. package/tsparticles.slim.js +15 -10
  57. package/tsparticles.slim.min.js +2 -2
  58. package/tsparticles.updater.angle.js +15 -10
  59. package/tsparticles.updater.angle.min.js +1 -1
  60. package/tsparticles.updater.color.js +15 -10
  61. package/tsparticles.updater.color.min.js +1 -1
  62. package/tsparticles.updater.life.js +15 -10
  63. package/tsparticles.updater.life.min.js +1 -1
  64. package/tsparticles.updater.opacity.js +15 -10
  65. package/tsparticles.updater.opacity.min.js +1 -1
  66. package/tsparticles.updater.outModes.js +15 -10
  67. package/tsparticles.updater.outModes.min.js +1 -1
  68. package/tsparticles.updater.roll.js +15 -10
  69. package/tsparticles.updater.roll.min.js +1 -1
  70. package/tsparticles.updater.size.js +15 -10
  71. package/tsparticles.updater.size.min.js +1 -1
  72. package/tsparticles.updater.strokeColor.js +15 -10
  73. package/tsparticles.updater.strokeColor.min.js +1 -1
  74. package/tsparticles.updater.tilt.js +15 -10
  75. package/tsparticles.updater.tilt.min.js +1 -1
  76. package/tsparticles.updater.wobble.js +15 -10
  77. package/tsparticles.updater.wobble.min.js +1 -1
  78. package/umd/Core/Canvas.d.ts +1 -1
  79. package/umd/Core/Canvas.js +16 -7
  80. package/umd/Core/Particles.js +2 -3
  81. package/umd/Plugins/Emitters/Options/Classes/Emitter.js +2 -2
@@ -1994,9 +1994,9 @@
1994
1994
  paint() {
1995
1995
  const options = this.container.actualOptions;
1996
1996
  this.draw((ctx => {
1997
- if (options.backgroundMask.enable && options.backgroundMask.cover && this.coverColor) {
1997
+ if (options.backgroundMask.enable && options.backgroundMask.cover) {
1998
1998
  clear(ctx, this.size);
1999
- this.paintBase(getStyleFromRgb(this.coverColor, this.coverColor.a));
1999
+ this.paintBase(this.coverColorStyle);
2000
2000
  } else {
2001
2001
  this.paintBase();
2002
2002
  }
@@ -2039,11 +2039,16 @@
2039
2039
  const container = this.container;
2040
2040
  const pxRatio = container.retina.pixelRatio;
2041
2041
  const size = container.canvas.size;
2042
+ const newSize = {
2043
+ width: this.element.offsetWidth * pxRatio,
2044
+ height: this.element.offsetHeight * pxRatio
2045
+ };
2046
+ if (newSize.height === size.height && newSize.width === size.width && newSize.height === this.element.height && newSize.width === this.element.width) {
2047
+ return;
2048
+ }
2042
2049
  const oldSize = Object.assign({}, size);
2043
- size.width = this.element.offsetWidth * pxRatio;
2044
- size.height = this.element.offsetHeight * pxRatio;
2045
- this.element.width = size.width;
2046
- this.element.height = size.height;
2050
+ this.element.width = size.width = this.element.offsetWidth * pxRatio;
2051
+ this.element.height = size.height = this.element.offsetHeight * pxRatio;
2047
2052
  if (this.container.started) {
2048
2053
  this.resizeFactor = {
2049
2054
  width: size.width / oldSize.width,
@@ -2167,12 +2172,13 @@
2167
2172
  const color = cover.color;
2168
2173
  const coverRgb = colorToRgb(color);
2169
2174
  if (coverRgb) {
2170
- this.coverColor = {
2175
+ const coverColor = {
2171
2176
  r: coverRgb.r,
2172
2177
  g: coverRgb.g,
2173
2178
  b: coverRgb.b,
2174
2179
  a: cover.opacity
2175
2180
  };
2181
+ this.coverColorStyle = getStyleFromRgb(coverColor, coverColor.a);
2176
2182
  }
2177
2183
  }
2178
2184
  initTrail() {
@@ -4359,9 +4365,7 @@
4359
4365
  delete container.canvas.resizeFactor;
4360
4366
  }
4361
4367
  async draw(delta) {
4362
- const container = this.container;
4363
- container.canvas.clear();
4364
- const canvasSize = this.container.canvas.size;
4368
+ const container = this.container, canvasSize = this.container.canvas.size;
4365
4369
  this.quadTree = new QuadTree(new Rectangle(-canvasSize.width / 4, -canvasSize.height / 4, canvasSize.width * 3 / 2, canvasSize.height * 3 / 2), 4);
4366
4370
  await this.update(delta);
4367
4371
  if (this.needsSort) {
@@ -4369,6 +4373,7 @@
4369
4373
  this.lastZIndex = this.zArray[this.zArray.length - 1].position.z;
4370
4374
  this.needsSort = false;
4371
4375
  }
4376
+ container.canvas.clear();
4372
4377
  for (const [, plugin] of container.plugins) {
4373
4378
  container.canvas.drawPlugin(plugin, delta);
4374
4379
  }
@@ -1,2 +1,2 @@
1
- /*! tsParticles v1.42.0 by Matteo Bruni */
1
+ /*! tsParticles v1.42.3 by Matteo Bruni */
2
2
  !function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t();else if("function"==typeof define&&define.amd)define([],t);else{var o=t();for(var n in o)("object"==typeof exports?exports:e)[n]=o[n]}}(window,(function(){return function(){"use strict";var e={d:function(t,o){for(var n in o)e.o(o,n)&&!e.o(t,n)&&Object.defineProperty(t,n,{enumerable:!0,get:o[n]})},o:function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r:function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},t={};function o(e,t){const o=e.x-t.x,n=e.y-t.y;return{dx:o,dy:n,distance:Math.sqrt(o*o+n*n)}}e.r(t),e.d(t,{loadParticlesAttractInteraction:function(){return r}});class n{}n.generatedAttribute="generated",n.randomColorValue="random",n.midColorValue="mid",n.touchEndEvent="touchend",n.mouseDownEvent="mousedown",n.mouseUpEvent="mouseup",n.mouseMoveEvent="mousemove",n.touchStartEvent="touchstart",n.touchMoveEvent="touchmove",n.mouseLeaveEvent="mouseleave",n.mouseOutEvent="mouseout",n.touchCancelEvent="touchcancel",n.resizeEvent="resize",n.visibilityChangeEvent="visibilitychange",n.noPolygonDataLoaded="No polygon data loaded.",n.noPolygonFound="No polygon found, you need to specify SVG url in config.";new WeakMap;new WeakMap;new WeakMap,new WeakSet;new WeakMap;new WeakMap;new WeakMap;new WeakMap;class a extends class{constructor(e){this.container=e,this.type=1}}{constructor(e){super(e)}async interact(e){var t;const n=this.container,a=null!==(t=e.retina.attractDistance)&&void 0!==t?t:n.retina.attractDistance,r=e.getPosition(),i=n.particles.quadTree.queryCircle(r,a);for(const t of i){if(e===t||!t.options.move.attract.enable||t.destroyed||t.spawning)continue;const n=t.getPosition(),{dx:a,dy:i}=o(r,n),c=e.options.move.attract.rotate,s=a/(1e3*c.x),u=i/(1e3*c.y),l=t.size.value/e.size.value,d=1/l;e.velocity.x-=s*l,e.velocity.y-=u*l,t.velocity.x+=s*d,t.velocity.y+=u*d}}isEnabled(e){return e.options.move.attract.enable}reset(){}}async function r(e){await e.addInteractor("particlesAttract",(e=>new a(e)))}return t}()}));
@@ -1038,9 +1038,9 @@
1038
1038
  paint() {
1039
1039
  const options = this.container.actualOptions;
1040
1040
  this.draw((ctx => {
1041
- if (options.backgroundMask.enable && options.backgroundMask.cover && this.coverColor) {
1041
+ if (options.backgroundMask.enable && options.backgroundMask.cover) {
1042
1042
  clear(ctx, this.size);
1043
- this.paintBase(getStyleFromRgb(this.coverColor, this.coverColor.a));
1043
+ this.paintBase(this.coverColorStyle);
1044
1044
  } else {
1045
1045
  this.paintBase();
1046
1046
  }
@@ -1083,11 +1083,16 @@
1083
1083
  const container = this.container;
1084
1084
  const pxRatio = container.retina.pixelRatio;
1085
1085
  const size = container.canvas.size;
1086
+ const newSize = {
1087
+ width: this.element.offsetWidth * pxRatio,
1088
+ height: this.element.offsetHeight * pxRatio
1089
+ };
1090
+ if (newSize.height === size.height && newSize.width === size.width && newSize.height === this.element.height && newSize.width === this.element.width) {
1091
+ return;
1092
+ }
1086
1093
  const oldSize = Object.assign({}, size);
1087
- size.width = this.element.offsetWidth * pxRatio;
1088
- size.height = this.element.offsetHeight * pxRatio;
1089
- this.element.width = size.width;
1090
- this.element.height = size.height;
1094
+ this.element.width = size.width = this.element.offsetWidth * pxRatio;
1095
+ this.element.height = size.height = this.element.offsetHeight * pxRatio;
1091
1096
  if (this.container.started) {
1092
1097
  this.resizeFactor = {
1093
1098
  width: size.width / oldSize.width,
@@ -1211,12 +1216,13 @@
1211
1216
  const color = cover.color;
1212
1217
  const coverRgb = colorToRgb(color);
1213
1218
  if (coverRgb) {
1214
- this.coverColor = {
1219
+ const coverColor = {
1215
1220
  r: coverRgb.r,
1216
1221
  g: coverRgb.g,
1217
1222
  b: coverRgb.b,
1218
1223
  a: cover.opacity
1219
1224
  };
1225
+ this.coverColorStyle = getStyleFromRgb(coverColor, coverColor.a);
1220
1226
  }
1221
1227
  }
1222
1228
  initTrail() {
@@ -3403,9 +3409,7 @@
3403
3409
  delete container.canvas.resizeFactor;
3404
3410
  }
3405
3411
  async draw(delta) {
3406
- const container = this.container;
3407
- container.canvas.clear();
3408
- const canvasSize = this.container.canvas.size;
3412
+ const container = this.container, canvasSize = this.container.canvas.size;
3409
3413
  this.quadTree = new QuadTree(new Rectangle(-canvasSize.width / 4, -canvasSize.height / 4, canvasSize.width * 3 / 2, canvasSize.height * 3 / 2), 4);
3410
3414
  await this.update(delta);
3411
3415
  if (this.needsSort) {
@@ -3413,6 +3417,7 @@
3413
3417
  this.lastZIndex = this.zArray[this.zArray.length - 1].position.z;
3414
3418
  this.needsSort = false;
3415
3419
  }
3420
+ container.canvas.clear();
3416
3421
  for (const [, plugin] of container.plugins) {
3417
3422
  container.canvas.drawPlugin(plugin, delta);
3418
3423
  }
@@ -1,2 +1,2 @@
1
- /*! tsParticles v1.42.0 by Matteo Bruni */
1
+ /*! tsParticles v1.42.3 by Matteo Bruni */
2
2
  !function(t,e){if("object"==typeof exports&&"object"==typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var o=e();for(var i in o)("object"==typeof exports?exports:t)[i]=o[i]}}(window,(function(){return function(){"use strict";var t={d:function(e,o){for(var i in o)t.o(o,i)&&!t.o(e,i)&&Object.defineProperty(e,i,{enumerable:!0,get:o[i]})},o:function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},r:function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})}},e={};t.r(e),t.d(e,{loadParticlesCollisionsInteraction:function(){return g}});class o{}o.generatedAttribute="generated",o.randomColorValue="random",o.midColorValue="mid",o.touchEndEvent="touchend",o.mouseDownEvent="mousedown",o.mouseUpEvent="mouseup",o.mouseMoveEvent="mousemove",o.touchStartEvent="touchstart",o.touchMoveEvent="touchmove",o.mouseLeaveEvent="mouseleave",o.mouseOutEvent="mouseout",o.touchCancelEvent="touchcancel",o.resizeEvent="resize",o.visibilityChangeEvent="visibilitychange",o.noPolygonDataLoaded="No polygon data loaded.",o.noPolygonFound="No polygon found, you need to specify SVG url in config.";new WeakMap;new WeakMap;class i{constructor(t,e){let o,i;if(void 0===e){if("number"==typeof t)throw new Error("tsParticles - Vector not initialized correctly");const e=t;[o,i]=[e.x,e.y]}else[o,i]=[t,e];this.x=o,this.y=i}static clone(t){return i.create(t.x,t.y)}static create(t,e){return new i(t,e)}static get origin(){return i.create(0,0)}get angle(){return Math.atan2(this.y,this.x)}set angle(t){this.updateFromAngle(t,this.length)}get length(){return Math.sqrt(this.x**2+this.y**2)}set length(t){this.updateFromAngle(this.angle,t)}add(t){return i.create(this.x+t.x,this.y+t.y)}addTo(t){this.x+=t.x,this.y+=t.y}sub(t){return i.create(this.x-t.x,this.y-t.y)}subFrom(t){this.x-=t.x,this.y-=t.y}mult(t){return i.create(this.x*t,this.y*t)}multTo(t){this.x*=t,this.y*=t}div(t){return i.create(this.x/t,this.y/t)}divTo(t){this.x/=t,this.y/=t}distanceTo(t){return this.sub(t).length}getLengthSq(){return this.x**2+this.y**2}distanceToSq(t){return this.sub(t).getLengthSq()}manhattanDistanceTo(t){return Math.abs(t.x-this.x)+Math.abs(t.y-this.y)}copy(){return i.clone(this)}setTo(t){this.x=t.x,this.y=t.y}rotate(t){return i.create(this.x*Math.cos(t)-this.y*Math.sin(t),this.x*Math.sin(t)+this.y*Math.cos(t))}updateFromAngle(t,e){this.x=Math.cos(t)*e,this.y=Math.sin(t)*e}}new WeakMap,new WeakSet;new WeakMap;new WeakMap;new WeakMap;function n(t,e,o){return Math.min(Math.max(t,e),o)}function s(t){return"number"==typeof t?t:function(t){const e=r(t);let o=a(t);return e===o&&(o=0),Math.random()*(e-o)+o}(t)}function a(t){return"number"==typeof t?t:t.min}function r(t){return"number"==typeof t?t:t.max}function u(t,e){if(t===e||void 0===e&&"number"==typeof t)return t;const o=a(t),i=r(t);return void 0!==e?{min:Math.min(o,e),max:Math.max(i,e)}:u(o,i)}function c(t){const e=t.random,{enable:o,minimumValue:i}="boolean"==typeof e?{enable:e,minimumValue:0}:e;return s(o?u(t.value,i):t.value)}function d(t,e){const o=t.x-e.x,i=t.y-e.y;return{dx:o,dy:i,distance:Math.sqrt(o*o+i*i)}}function l(t,e,o,n){return i.create(t.x*(o-n)/(o+n)+2*e.x*n/(o+n),t.y)}function y(t){return{position:t.getPosition(),radius:t.getRadius(),mass:t.getMass(),velocity:t.velocity,factor:i.create(c(t.options.bounce.horizontal),c(t.options.bounce.vertical))}}function h(t,e){!function(t,e){const{x:o,y:i}=t.velocity.sub(e.velocity),[n,s]=[t.position,e.position],{dx:a,dy:r}=d(s,n);if(o*a+i*r>=0){const o=-Math.atan2(r,a),i=t.mass,n=e.mass,s=t.velocity.rotate(o),u=e.velocity.rotate(o),c=l(s,u,i,n),d=l(u,s,i,n),y=c.rotate(-o),h=d.rotate(-o);t.velocity.x=y.x*t.factor.x,t.velocity.y=y.y*t.factor.y,e.velocity.x=h.x*e.factor.x,e.velocity.y=h.y*e.factor.y}}(y(t),y(e))}new WeakMap;class f extends class{constructor(t){this.container=t,this.type=1}}{constructor(t){super(t)}isEnabled(t){return t.options.collisions.enable}reset(){}async interact(t){const e=this.container,o=t.getPosition(),i=t.getRadius(),n=e.particles.quadTree.queryCircle(o,2*i);for(const e of n){if(t===e||!e.options.collisions.enable||t.options.collisions.mode!==e.options.collisions.mode||e.destroyed||e.spawning)continue;const n=e.getPosition();if(Math.round(o.z)!==Math.round(n.z))continue;d(o,n).distance<=i+e.getRadius()&&this.resolveCollision(t,e)}}resolveCollision(t,e){switch(t.options.collisions.mode){case"absorb":this.absorb(t,e);break;case"bounce":h(t,e);break;case"destroy":!function(t,e){t.unbreakable||e.unbreakable||h(t,e),void 0===t.getRadius()&&void 0!==e.getRadius()?t.destroy():void 0!==t.getRadius()&&void 0===e.getRadius()?e.destroy():void 0!==t.getRadius()&&void 0!==e.getRadius()&&(t.getRadius()>=e.getRadius()?e.destroy():t.destroy())}(t,e)}}absorb(t,e){const o=this.container,i=o.fpsLimit/1e3;if(void 0===t.getRadius()&&void 0!==e.getRadius())t.destroy();else if(void 0!==t.getRadius()&&void 0===e.getRadius())e.destroy();else if(void 0!==t.getRadius()&&void 0!==e.getRadius())if(t.getRadius()>=e.getRadius()){const s=n(t.getRadius()/e.getRadius(),0,e.getRadius())*i;t.size.value+=s,e.size.value-=s,e.getRadius()<=o.retina.pixelRatio&&(e.size.value=0,e.destroy())}else{const s=n(e.getRadius()/t.getRadius(),0,t.getRadius())*i;t.size.value-=s,e.size.value+=s,t.getRadius()<=o.retina.pixelRatio&&(t.size.value=0,t.destroy())}}}async function g(t){await t.addInteractor("particlesCollisions",(t=>new f(t)))}return e}()}));
@@ -2034,9 +2034,9 @@
2034
2034
  paint() {
2035
2035
  const options = this.container.actualOptions;
2036
2036
  this.draw((ctx => {
2037
- if (options.backgroundMask.enable && options.backgroundMask.cover && this.coverColor) {
2037
+ if (options.backgroundMask.enable && options.backgroundMask.cover) {
2038
2038
  clear(ctx, this.size);
2039
- this.paintBase(getStyleFromRgb(this.coverColor, this.coverColor.a));
2039
+ this.paintBase(this.coverColorStyle);
2040
2040
  } else {
2041
2041
  this.paintBase();
2042
2042
  }
@@ -2079,11 +2079,16 @@
2079
2079
  const container = this.container;
2080
2080
  const pxRatio = container.retina.pixelRatio;
2081
2081
  const size = container.canvas.size;
2082
+ const newSize = {
2083
+ width: this.element.offsetWidth * pxRatio,
2084
+ height: this.element.offsetHeight * pxRatio
2085
+ };
2086
+ if (newSize.height === size.height && newSize.width === size.width && newSize.height === this.element.height && newSize.width === this.element.width) {
2087
+ return;
2088
+ }
2082
2089
  const oldSize = Object.assign({}, size);
2083
- size.width = this.element.offsetWidth * pxRatio;
2084
- size.height = this.element.offsetHeight * pxRatio;
2085
- this.element.width = size.width;
2086
- this.element.height = size.height;
2090
+ this.element.width = size.width = this.element.offsetWidth * pxRatio;
2091
+ this.element.height = size.height = this.element.offsetHeight * pxRatio;
2087
2092
  if (this.container.started) {
2088
2093
  this.resizeFactor = {
2089
2094
  width: size.width / oldSize.width,
@@ -2207,12 +2212,13 @@
2207
2212
  const color = cover.color;
2208
2213
  const coverRgb = colorToRgb(color);
2209
2214
  if (coverRgb) {
2210
- this.coverColor = {
2215
+ const coverColor = {
2211
2216
  r: coverRgb.r,
2212
2217
  g: coverRgb.g,
2213
2218
  b: coverRgb.b,
2214
2219
  a: cover.opacity
2215
2220
  };
2221
+ this.coverColorStyle = getStyleFromRgb(coverColor, coverColor.a);
2216
2222
  }
2217
2223
  }
2218
2224
  initTrail() {
@@ -4399,9 +4405,7 @@
4399
4405
  delete container.canvas.resizeFactor;
4400
4406
  }
4401
4407
  async draw(delta) {
4402
- const container = this.container;
4403
- container.canvas.clear();
4404
- const canvasSize = this.container.canvas.size;
4408
+ const container = this.container, canvasSize = this.container.canvas.size;
4405
4409
  this.quadTree = new QuadTree(new Rectangle(-canvasSize.width / 4, -canvasSize.height / 4, canvasSize.width * 3 / 2, canvasSize.height * 3 / 2), 4);
4406
4410
  await this.update(delta);
4407
4411
  if (this.needsSort) {
@@ -4409,6 +4413,7 @@
4409
4413
  this.lastZIndex = this.zArray[this.zArray.length - 1].position.z;
4410
4414
  this.needsSort = false;
4411
4415
  }
4416
+ container.canvas.clear();
4412
4417
  for (const [, plugin] of container.plugins) {
4413
4418
  container.canvas.drawPlugin(plugin, delta);
4414
4419
  }
@@ -1,2 +1,2 @@
1
- /*! tsParticles v1.42.0 by Matteo Bruni */
1
+ /*! tsParticles v1.42.3 by Matteo Bruni */
2
2
  !function(t,n){if("object"==typeof exports&&"object"==typeof module)module.exports=n();else if("function"==typeof define&&define.amd)define([],n);else{var i=n();for(var e in i)("object"==typeof exports?exports:t)[e]=i[e]}}(window,(function(){return function(){"use strict";var t={d:function(n,i){for(var e in i)t.o(i,e)&&!t.o(n,e)&&Object.defineProperty(n,e,{enumerable:!0,get:i[e]})},o:function(t,n){return Object.prototype.hasOwnProperty.call(t,n)},r:function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})}},n={};function i(t,n,i,e){return Math.floor((t*i+n*e)/(i+e))}function e(t){const n=r(t);let i=s(t);return n===i&&(i=0),Math.random()*(n-i)+i}function o(t){return"number"==typeof t?t:e(t)}function s(t){return"number"==typeof t?t:t.min}function r(t){return"number"==typeof t?t:t.max}function a(t,n){if(t===n||void 0===n&&"number"==typeof t)return t;const i=s(t),e=r(t);return void 0!==n?{min:Math.min(i,n),max:Math.max(e,n)}:a(i,e)}function l(t,n){const i=t.x-n.x,e=t.y-n.y;return{dx:i,dy:e,distance:Math.sqrt(i*i+e*e)}}function c(t,n){return l(t,n).distance}function u(t,n,i=!0){return t[void 0!==n&&i?n%t.length:function(t){return Math.floor(Math.random()*t.length)}(t)]}function d(t,n,i){let e=i;return e<0&&(e+=1),e>1&&(e-=1),e<1/6?t+6*(n-t)*e:e<.5?n:e<2/3?t+(n-t)*(2/3-e)*6:t}function h(t){if(t.startsWith("rgb")){const n=/rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(,\s*([\d.]+)\s*)?\)/i.exec(t);return n?{a:n.length>4?parseFloat(n[5]):1,b:parseInt(n[3],10),g:parseInt(n[2],10),r:parseInt(n[1],10)}:void 0}if(t.startsWith("hsl")){const n=/hsla?\(\s*(\d+)\s*,\s*(\d+)%\s*,\s*(\d+)%\s*(,\s*([\d.]+)\s*)?\)/i.exec(t);return n?function(t){const n=p(t);return{a:t.a,b:n.b,g:n.g,r:n.r}}({a:n.length>4?parseFloat(n[5]):1,h:parseInt(n[1],10),l:parseInt(n[3],10),s:parseInt(n[2],10)}):void 0}if(t.startsWith("hsv")){const n=/hsva?\(\s*(\d+)°\s*,\s*(\d+)%\s*,\s*(\d+)%\s*(,\s*([\d.]+)\s*)?\)/i.exec(t);return n?function(t){const n=y(t);return{a:t.a,b:n.b,g:n.g,r:n.r}}({a:n.length>4?parseFloat(n[5]):1,h:parseInt(n[1],10),s:parseInt(n[2],10),v:parseInt(n[3],10)}):void 0}{const n=/^#?([a-f\d])([a-f\d])([a-f\d])([a-f\d])?$/i,i=t.replace(n,((t,n,i,e,o)=>n+n+i+i+e+e+(void 0!==o?o+o:""))),e=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})?$/i.exec(i);return e?{a:void 0!==e[4]?parseInt(e[4],16)/255:1,b:parseInt(e[3],16),g:parseInt(e[2],16),r:parseInt(e[1],16)}:void 0}}function f(t,n,i=!0){var e,o,s;if(void 0===t)return;const r="string"==typeof t?{value:t}:t;let a;if("string"==typeof r.value)a=r.value===C.randomColorValue?g():function(t){return h(t)}(r.value);else if(r.value instanceof Array){a=f({value:u(r.value,n,i)})}else{const t=r.value,n=null!==(e=t.rgb)&&void 0!==e?e:r.value;if(void 0!==n.r)a=n;else{const n=null!==(o=t.hsl)&&void 0!==o?o:r.value;if(void 0!==n.h&&void 0!==n.l)a=p(n);else{const n=null!==(s=t.hsv)&&void 0!==s?s:r.value;void 0!==n.h&&void 0!==n.v&&(a=y(n))}}}return a}function p(t){const n={b:0,g:0,r:0},i={h:t.h/360,l:t.l/100,s:t.s/100};if(0===i.s)n.b=i.l,n.g=i.l,n.r=i.l;else{const t=i.l<.5?i.l*(1+i.s):i.l+i.s-i.l*i.s,e=2*i.l-t;n.r=d(e,t,i.h+1/3),n.g=d(e,t,i.h),n.b=d(e,t,i.h-1/3)}return n.r=Math.floor(255*n.r),n.g=Math.floor(255*n.g),n.b=Math.floor(255*n.b),n}function y(t){const n={b:0,g:0,r:0},i=t.h/60,e=t.s/100,o=t.v/100,s=o*e,r=s*(1-Math.abs(i%2-1));let a;if(i>=0&&i<=1?a={r:s,g:r,b:0}:i>1&&i<=2?a={r:r,g:s,b:0}:i>2&&i<=3?a={r:0,g:s,b:r}:i>3&&i<=4?a={r:0,g:r,b:s}:i>4&&i<=5?a={r:r,g:0,b:s}:i>5&&i<=6&&(a={r:s,g:0,b:r}),a){const t=o-s;n.r=Math.floor(255*(a.r+t)),n.g=Math.floor(255*(a.g+t)),n.b=Math.floor(255*(a.b+t))}return n}function g(t){const n=null!=t?t:0;return{b:Math.floor(e(a(n,256))),g:Math.floor(e(a(n,256))),r:Math.floor(e(a(n,256)))}}function v(t,n){return`rgba(${t.r}, ${t.g}, ${t.b}, ${null!=n?n:1})`}function x(t,n,e){var o,s;if(e===C.randomColorValue)return g();if("mid"!==e)return e;{const e=null!==(o=t.getFillColor())&&void 0!==o?o:t.getStrokeColor(),r=null!==(s=null==n?void 0:n.getFillColor())&&void 0!==s?s:null==n?void 0:n.getStrokeColor();if(e&&r&&n)return function(t,n,e,o){let s=t,r=n;return void 0===s.r&&(s=p(t)),void 0===r.r&&(r=p(n)),{b:i(s.b,r.b,e,o),g:i(s.g,r.g,e,o),r:i(s.r,r.r,e,o)}}(e,r,t.getRadius(),n.getRadius());{const t=null!=e?e:r;if(t)return p(t)}}}function k(t,n,i){t.beginPath(),t.moveTo(n.x,n.y),t.lineTo(i.x,i.y),t.closePath()}t.r(n),t.d(n,{loadParticlesLinksInteraction:function(){return W}});class b{constructor(t,n){this.position={x:t,y:n}}}class w extends b{constructor(t,n,i){super(t,n),this.radius=i}contains(t){return c(t,this.position)<=this.radius}intersects(t){const n=t,i=t,e=this.position,o=t.position,s=Math.abs(o.x-e.x),r=Math.abs(o.y-e.y),a=this.radius;if(void 0!==i.radius){return a+i.radius>Math.sqrt(s*s+r+r)}if(void 0!==n.size){const t=n.size.width,i=n.size.height,e=Math.pow(s-t,2)+Math.pow(r-i,2);return!(s>a+t||r>a+i)&&(s<=t||r<=i||e<=a*a)}return!1}}class m extends b{constructor(t,n,i,e){super(t,n),this.size={height:e,width:i}}contains(t){const n=this.size.width,i=this.size.height,e=this.position;return t.x>=e.x&&t.x<=e.x+n&&t.y>=e.y&&t.y<=e.y+i}intersects(t){const n=t,i=t,e=this.size.width,o=this.size.height,s=this.position,r=t.position;if(void 0!==i.radius)return i.intersects(this);if(void 0!==n.size){const t=n.size,i=t.width,a=t.height;return r.x<s.x+e&&r.x+i>s.x&&r.y<s.y+o&&r.y+a>s.y}return!1}}class M extends w{constructor(t,n,i,e){super(t,n,i),this.canvasSize=e,this.canvasSize={height:e.height,width:e.width}}contains(t){if(super.contains(t))return!0;const n={x:t.x-this.canvasSize.width,y:t.y};if(super.contains(n))return!0;const i={x:t.x-this.canvasSize.width,y:t.y-this.canvasSize.height};if(super.contains(i))return!0;const e={x:t.x,y:t.y-this.canvasSize.height};return super.contains(e)}intersects(t){if(super.intersects(t))return!0;const n=t,i=t,e={x:t.position.x-this.canvasSize.width,y:t.position.y-this.canvasSize.height};if(void 0!==i.radius){const t=new w(e.x,e.y,2*i.radius);return super.intersects(t)}if(void 0!==n.size){const t=new m(e.x,e.y,2*n.size.width,2*n.size.height);return super.intersects(t)}return!1}}class C{}C.generatedAttribute="generated",C.randomColorValue="random",C.midColorValue="mid",C.touchEndEvent="touchend",C.mouseDownEvent="mousedown",C.mouseUpEvent="mouseup",C.mouseMoveEvent="mousemove",C.touchStartEvent="touchstart",C.touchMoveEvent="touchmove",C.mouseLeaveEvent="mouseleave",C.mouseOutEvent="mouseout",C.touchCancelEvent="touchcancel",C.resizeEvent="resize",C.visibilityChangeEvent="visibilitychange",C.noPolygonDataLoaded="No polygon data loaded.",C.noPolygonFound="No polygon found, you need to specify SVG url in config.";new WeakMap;new WeakMap;new WeakMap,new WeakSet;new WeakMap;new WeakMap;new WeakMap;function z(t,n,i,e,o){let s=c(t,n);if(!o||s<=i)return s;if(s=c(t,{x:n.x-e.width,y:n.y}),s<=i)return s;if(s=c(t,{x:n.x-e.width,y:n.y-e.height}),s<=i)return s;return s=c(t,{x:n.x,y:n.y-e.height}),s}new WeakMap;class P extends class{constructor(t){this.container=t,this.type=1}}{constructor(t){super(t)}isEnabled(t){return t.options.links.enable}reset(){}async interact(t){var n;t.links=[];const i=t.getPosition(),e=this.container,o=e.canvas.size;if(i.x<0||i.y<0||i.x>o.width||i.y>o.height)return;const s=t.options.links,r=s.opacity,a=null!==(n=t.retina.linksDistance)&&void 0!==n?n:e.retina.linksDistance,l=s.warp,c=l?new M(i.x,i.y,a,o):new w(i.x,i.y,a),u=e.particles.quadTree.query(c);for(const n of u){const e=n.options.links;if(t===n||!e.enable||s.id!==e.id||n.spawning||n.destroyed||-1!==t.links.map((t=>t.destination)).indexOf(n)||-1!==n.links.map((t=>t.destination)).indexOf(t))continue;const c=n.getPosition();if(c.x<0||c.y<0||c.x>o.width||c.y>o.height)continue;const u=z(i,c,a,o,l&&e.warp);if(u>a)return;const d=(1-u/a)*r;this.setColor(t),t.links.push({destination:n,opacity:d})}}setColor(t){const n=this.container,i=t.options.links;let e=void 0===i.id?n.particles.linksColor:n.particles.linksColors.get(i.id);if(!e){e=function(t,n,i){const e="string"==typeof t?t:t.value;return e===C.randomColorValue?i?f({value:e}):n?C.randomColorValue:C.midColorValue:f({value:e})}(i.color,i.blink,i.consent),void 0===i.id?n.particles.linksColor=e:n.particles.linksColors.set(i.id,e)}}}class S{constructor(t){this.container=t}particleCreated(t){t.links=[]}particleDestroyed(t){t.links=[]}drawParticle(t,n){const i=n,e=this.container,o=e.particles,s=n.options;if(i.links.length>0){t.save();const n=i.links.filter((t=>e.particles.getLinkFrequency(i,t.destination)<=s.links.frequency));for(const t of n){const r=t.destination;if(s.links.triangles.enable){const a=n.map((t=>t.destination)),l=r.links.filter((t=>e.particles.getLinkFrequency(r,t.destination)<=r.options.links.frequency&&a.indexOf(t.destination)>=0));if(l.length)for(const n of l){const e=n.destination;o.getTriangleFrequency(i,r,e)>s.links.triangles.frequency||this.drawLinkTriangle(i,t,n)}}t.opacity>0&&e.retina.linksWidth>0&&this.drawLinkLine(i,t)}t.restore()}}drawLinkTriangle(t,n,i){var e;const o=this.container,s=o.actualOptions,r=n.destination,a=i.destination,l=t.options.links.triangles,u=null!==(e=l.opacity)&&void 0!==e?e:(n.opacity+i.opacity)/2;if(u<=0)return;const d=t.getPosition(),h=r.getPosition(),p=a.getPosition();o.canvas.draw((n=>{if(c(d,h)>o.retina.linksDistance||c(p,h)>o.retina.linksDistance||c(p,d)>o.retina.linksDistance)return;let i=f(l.color);if(!i){const n=t.options.links,e=void 0!==n.id?o.particles.linksColors.get(n.id):o.particles.linksColor;i=x(t,r,e)}i&&function(t,n,i,e,o,s,r,a){!function(t,n,i,e){t.beginPath(),t.moveTo(n.x,n.y),t.lineTo(i.x,i.y),t.lineTo(e.x,e.y),t.closePath()}(t,n,i,e),o&&(t.globalCompositeOperation=s),t.fillStyle=v(r,a),t.fill()}(n,d,h,p,s.backgroundMask.enable,s.backgroundMask.composite,i,u)}))}drawLinkLine(t,n){const i=this.container,e=i.actualOptions,s=n.destination;let r=n.opacity;const a=t.getPosition(),u=s.getPosition();i.canvas.draw((n=>{var d,h;let p;const y=t.options.twinkle.lines;if(y.enable){const t=y.frequency,n=f(y.color);Math.random()<t&&void 0!==n&&(p=n,r=o(y.opacity))}if(!p){const n=t.options.links,e=void 0!==n.id?i.particles.linksColors.get(n.id):i.particles.linksColor;p=x(t,s,e)}if(!p)return;const g=null!==(d=t.retina.linksWidth)&&void 0!==d?d:i.retina.linksWidth,b=null!==(h=t.retina.linksDistance)&&void 0!==h?h:i.retina.linksDistance;!function(t,n,i,e,o,s,r,a,u,d,h,p){let y=!1;if(c(i,e)<=o)k(t,i,e),y=!0;else if(r){let n,r;const a=l(i,{x:e.x-s.width,y:e.y});if(a.distance<=o){const t=i.y-a.dy/a.dx*i.x;n={x:0,y:t},r={x:s.width,y:t}}else{const t=l(i,{x:e.x,y:e.y-s.height});if(t.distance<=o){const e=-(i.y-t.dy/t.dx*i.x)/(t.dy/t.dx);n={x:e,y:0},r={x:e,y:s.height}}else{const t=l(i,{x:e.x-s.width,y:e.y-s.height});if(t.distance<=o){const e=i.y-t.dy/t.dx*i.x;n={x:-e/(t.dy/t.dx),y:e},r={x:n.x+s.width,y:n.y+s.height}}}}n&&r&&(k(t,i,n),k(t,e,r),y=!0)}if(y){if(t.lineWidth=n,a&&(t.globalCompositeOperation=u),t.strokeStyle=v(d,h),p.enable){const n=f(p.color);n&&(t.shadowBlur=p.blur,t.shadowColor=v(n))}t.stroke()}}(n,g,a,u,b,i.canvas.size,t.options.links.warp,e.backgroundMask.enable,e.backgroundMask.composite,p,r,t.options.links.shadow)}))}}class I{constructor(){this.id="links"}getPlugin(t){return new S(t)}needsPlugin(){return!0}loadOptions(){}}async function W(t){await async function(t){await t.addInteractor("particlesLinks",(t=>new P(t)))}(t),await async function(t){const n=new I;await t.addPlugin(n)}(t)}return n}()}));
package/tsparticles.js CHANGED
@@ -2780,9 +2780,9 @@
2780
2780
  paint() {
2781
2781
  const options = this.container.actualOptions;
2782
2782
  this.draw((ctx => {
2783
- if (options.backgroundMask.enable && options.backgroundMask.cover && this.coverColor) {
2783
+ if (options.backgroundMask.enable && options.backgroundMask.cover) {
2784
2784
  clear(ctx, this.size);
2785
- this.paintBase(getStyleFromRgb(this.coverColor, this.coverColor.a));
2785
+ this.paintBase(this.coverColorStyle);
2786
2786
  } else {
2787
2787
  this.paintBase();
2788
2788
  }
@@ -2825,11 +2825,16 @@
2825
2825
  const container = this.container;
2826
2826
  const pxRatio = container.retina.pixelRatio;
2827
2827
  const size = container.canvas.size;
2828
+ const newSize = {
2829
+ width: this.element.offsetWidth * pxRatio,
2830
+ height: this.element.offsetHeight * pxRatio
2831
+ };
2832
+ if (newSize.height === size.height && newSize.width === size.width && newSize.height === this.element.height && newSize.width === this.element.width) {
2833
+ return;
2834
+ }
2828
2835
  const oldSize = Object.assign({}, size);
2829
- size.width = this.element.offsetWidth * pxRatio;
2830
- size.height = this.element.offsetHeight * pxRatio;
2831
- this.element.width = size.width;
2832
- this.element.height = size.height;
2836
+ this.element.width = size.width = this.element.offsetWidth * pxRatio;
2837
+ this.element.height = size.height = this.element.offsetHeight * pxRatio;
2833
2838
  if (this.container.started) {
2834
2839
  this.resizeFactor = {
2835
2840
  width: size.width / oldSize.width,
@@ -2953,12 +2958,13 @@
2953
2958
  const color = cover.color;
2954
2959
  const coverRgb = colorToRgb(color);
2955
2960
  if (coverRgb) {
2956
- this.coverColor = {
2961
+ const coverColor = {
2957
2962
  r: coverRgb.r,
2958
2963
  g: coverRgb.g,
2959
2964
  b: coverRgb.b,
2960
2965
  a: cover.opacity
2961
2966
  };
2967
+ this.coverColorStyle = getStyleFromRgb(coverColor, coverColor.a);
2962
2968
  }
2963
2969
  }
2964
2970
  initTrail() {
@@ -6167,9 +6173,7 @@
6167
6173
  delete container.canvas.resizeFactor;
6168
6174
  }
6169
6175
  async draw(delta) {
6170
- const container = this.container;
6171
- container.canvas.clear();
6172
- const canvasSize = this.container.canvas.size;
6176
+ const container = this.container, canvasSize = this.container.canvas.size;
6173
6177
  this.quadTree = new QuadTree(new Rectangle(-canvasSize.width / 4, -canvasSize.height / 4, canvasSize.width * 3 / 2, canvasSize.height * 3 / 2), 4);
6174
6178
  await this.update(delta);
6175
6179
  if (this.needsSort) {
@@ -6177,6 +6181,7 @@
6177
6181
  this.lastZIndex = this.zArray[this.zArray.length - 1].position.z;
6178
6182
  this.needsSort = false;
6179
6183
  }
6184
+ container.canvas.clear();
6180
6185
  for (const [, plugin] of container.plugins) {
6181
6186
  container.canvas.drawPlugin(plugin, delta);
6182
6187
  }
@@ -7622,10 +7627,10 @@
7622
7627
  }
7623
7628
  if (data.position !== undefined) {
7624
7629
  this.position = {};
7625
- if (data.position.x) {
7630
+ if (data.position.x !== undefined) {
7626
7631
  this.position.x = setRangeValue(data.position.x);
7627
7632
  }
7628
- if (data.position.y) {
7633
+ if (data.position.y !== undefined) {
7629
7634
  this.position.y = setRangeValue(data.position.y);
7630
7635
  }
7631
7636
  }