@tsparticles/pjs 3.0.0-beta.4 → 3.0.0

package/tsparticles.pjs.bundle.js

@@ -4,7 +4,7 @@
  * Demo / Generator : https://particles.js.org/
  * GitHub : https://www.github.com/matteobruni/tsparticles
  * How to use? : Check the GitHub README
- * v3.0.0-beta.4
+ * v3.0.0
  */
 (function webpackUniversalModuleDefinition(root, factory) {
 	if(typeof exports === 'object' && typeof module === 'object')
@@ -1229,7 +1229,8 @@ function drawParticle(data) {
     particle,
     radius,
     opacity,
-    delta
+    delta,
+    transformData
   };
   context.beginPath();
   drawShape(drawData);
@@ -1254,7 +1255,8 @@ function drawEffect(data) {
     particle,
     radius,
     opacity,
-    delta
+    delta,
+    transformData
   } = data;
   if (!particle.effect) {
     return;
@@ -1269,7 +1271,10 @@ function drawEffect(data) {
     radius,
     opacity,
     delta,
-    pixelRatio: container.retina.pixelRatio
+    pixelRatio: container.retina.pixelRatio,
+    transformData: {
+      ...transformData
+    }
   });
 }
 function drawShape(data) {
@@ -1279,7 +1284,8 @@ function drawShape(data) {
     particle,
     radius,
     opacity,
-    delta
+    delta,
+    transformData
   } = data;
   if (!particle.shape) {
     return;
@@ -1294,7 +1300,10 @@ function drawShape(data) {
     radius,
     opacity,
     delta,
-    pixelRatio: container.retina.pixelRatio
+    pixelRatio: container.retina.pixelRatio,
+    transformData: {
+      ...transformData
+    }
   });
 }
 function drawShapeAfterDraw(data) {
@@ -1304,7 +1313,8 @@ function drawShapeAfterDraw(data) {
     particle,
     radius,
     opacity,
-    delta
+    delta,
+    transformData
   } = data;
   if (!particle.shape) {
     return;
@@ -1319,7 +1329,10 @@ function drawShapeAfterDraw(data) {
     radius,
     opacity,
     delta,
-    pixelRatio: container.retina.pixelRatio
+    pixelRatio: container.retina.pixelRatio,
+    transformData: {
+      ...transformData
+    }
   });
 }
 function drawPlugin(context, plugin, delta) {
@@ -1556,7 +1569,7 @@ class Canvas {
       } else if (trailFill.image) {
         this._paintImage(trailFill.image, trailFill.opacity);
       }
-    } else {
+    } else if (options.clear) {
       this.draw(ctx => {
         clear(ctx, this.size);
       });
@@ -2403,11 +2416,7 @@ class Events {
       });
     }
     this.onHover.load(data.onHover);
-    if (isBoolean(data.resize)) {
-      this.resize.enable = data.resize;
-    } else {
-      this.resize.load(data.resize);
-    }
+    this.resize.load(data.resize);
   }
 }
 ;// CONCATENATED MODULE: ../../engine/dist/browser/Options/Classes/Interactivity/Modes/Modes.js
@@ -3432,23 +3441,26 @@ class ParticlesOptions {
     if (!data) {
       return;
     }
-    this.bounce.load(data.bounce);
-    this.color.load(AnimatableColor.create(this.color, data.color));
-    this.effect.load(data.effect);
     if (data.groups !== undefined) {
-      for (const group in data.groups) {
+      for (const group of Object.keys(data.groups)) {
+        if (!Object.hasOwn(data.groups, group)) {
+          continue;
+        }
         const item = data.groups[group];
         if (item !== undefined) {
           this.groups[group] = deepExtend(this.groups[group] ?? {}, item);
         }
       }
     }
-    this.move.load(data.move);
-    this.number.load(data.number);
-    this.opacity.load(data.opacity);
     if (data.reduceDuplicates !== undefined) {
       this.reduceDuplicates = data.reduceDuplicates;
     }
+    this.bounce.load(data.bounce);
+    this.color.load(AnimatableColor.create(this.color, data.color));
+    this.effect.load(data.effect);
+    this.move.load(data.move);
+    this.number.load(data.number);
+    this.opacity.load(data.opacity);
     this.shape.load(data.shape);
     this.size.load(data.size);
     this.shadow.load(data.shadow);
@@ -3521,6 +3533,7 @@ class Options {
     this.autoPlay = true;
     this.background = new Background();
     this.backgroundMask = new BackgroundMask();
+    this.clear = true;
     this.defaultThemes = {};
     this.delay = 0;
     this.fullScreen = new FullScreen();
@@ -3548,6 +3561,12 @@ class Options {
     if (data.autoPlay !== undefined) {
       this.autoPlay = data.autoPlay;
     }
+    if (data.clear !== undefined) {
+      this.clear = data.clear;
+    }
+    if (data.name !== undefined) {
+      this.name = data.name;
+    }
     if (data.delay !== undefined) {
       this.delay = setRangeValue(data.delay);
     }
@@ -3873,7 +3892,9 @@ class Particle {
     this.bubble.inRange = false;
     this.slow.inRange = false;
     const container = this.container,
-      pathGenerator = this.pathGenerator;
+      pathGenerator = this.pathGenerator,
+      shapeDrawer = container.shapeDrawers.get(this.shape);
+    shapeDrawer && shapeDrawer.particleDestroy && shapeDrawer.particleDestroy(this);
     for (const [, plugin] of container.plugins) {
       plugin.particleDestroyed && plugin.particleDestroyed(this, override);
     }
@@ -5127,7 +5148,7 @@ class Engine {
     return res;
   }
   get version() {
-    return "3.0.0-beta.4";
+    return "3.0.0";
   }
   addConfig(config) {
     const name = config.name ?? "default";
@@ -5625,11 +5646,248 @@ class Particles_Particles {
   }
 }
 ;// CONCATENATED MODULE: ./dist/browser/VincentGarreau/particles.js
+
+const defaultPjsOptions = {
+  particles: {
+    number: {
+      value: 400,
+      density: {
+        enable: true,
+        value_area: 800
+      }
+    },
+    color: {
+      value: "#fff"
+    },
+    shape: {
+      type: "circle",
+      stroke: {
+        width: 0,
+        color: "#ff0000"
+      },
+      polygon: {
+        nb_sides: 5
+      },
+      image: {
+        src: "",
+        width: 100,
+        height: 100
+      }
+    },
+    opacity: {
+      value: 1,
+      random: false,
+      anim: {
+        enable: false,
+        speed: 2,
+        opacity_min: 0,
+        sync: false
+      }
+    },
+    size: {
+      value: 20,
+      random: false,
+      anim: {
+        enable: false,
+        speed: 20,
+        size_min: 0,
+        sync: false
+      }
+    },
+    line_linked: {
+      enable: true,
+      distance: 100,
+      color: "#fff",
+      opacity: 1,
+      width: 1
+    },
+    move: {
+      enable: true,
+      speed: 2,
+      direction: "none",
+      random: false,
+      straight: false,
+      out_mode: "out",
+      bounce: false,
+      attract: {
+        enable: false,
+        rotateX: 3000,
+        rotateY: 3000
+      }
+    }
+  },
+  interactivity: {
+    detect_on: "canvas",
+    events: {
+      onhover: {
+        enable: true,
+        mode: "grab"
+      },
+      onclick: {
+        enable: true,
+        mode: "push"
+      },
+      resize: true
+    },
+    modes: {
+      grab: {
+        distance: 100,
+        line_linked: {
+          opacity: 1
+        }
+      },
+      bubble: {
+        distance: 200,
+        size: 80,
+        duration: 0.4,
+        opacity: 1,
+        speed: 3
+      },
+      repulse: {
+        distance: 200,
+        duration: 0.4
+      },
+      push: {
+        particles_nb: 4
+      },
+      remove: {
+        particles_nb: 2
+      }
+    }
+  },
+  retina_detect: false
+};
 const initParticlesJS = engine => {
   const particlesJS = (tagId, options) => {
+    const fixedOptions = deepExtend(defaultPjsOptions, options);
     return engine.load({
       id: tagId,
-      options
+      options: {
+        fullScreen: {
+          enable: false
+        },
+        detectRetina: fixedOptions.retina_detect,
+        smooth: true,
+        interactivity: {
+          detectsOn: fixedOptions.interactivity.detect_on,
+          events: {
+            onHover: {
+              enable: fixedOptions.interactivity.events.onhover.enable,
+              mode: fixedOptions.interactivity.events.onhover.mode
+            },
+            onClick: {
+              enable: fixedOptions.interactivity.events.onclick.enable,
+              mode: fixedOptions.interactivity.events.onclick.mode
+            },
+            resize: {
+              enable: fixedOptions.interactivity.events.resize
+            }
+          },
+          modes: {
+            grab: {
+              distance: fixedOptions.interactivity.modes.grab.distance,
+              links: {
+                opacity: fixedOptions.interactivity.modes.grab.line_linked.opacity
+              }
+            },
+            bubble: {
+              distance: fixedOptions.interactivity.modes.bubble.distance,
+              size: fixedOptions.interactivity.modes.bubble.size,
+              duration: fixedOptions.interactivity.modes.bubble.duration,
+              opacity: fixedOptions.interactivity.modes.bubble.opacity,
+              speed: fixedOptions.interactivity.modes.bubble.speed
+            },
+            repulse: {
+              distance: fixedOptions.interactivity.modes.repulse.distance,
+              duration: fixedOptions.interactivity.modes.repulse.duration
+            },
+            push: {
+              quantity: fixedOptions.interactivity.modes.push.particles_nb
+            },
+            remove: {
+              quantity: fixedOptions.interactivity.modes.remove.particles_nb
+            }
+          }
+        },
+        particles: {
+          collisions: {
+            enable: fixedOptions.particles.move.bounce
+          },
+          number: {
+            value: fixedOptions.particles.number.value,
+            density: {
+              enable: fixedOptions.particles.number.density.enable,
+              width: fixedOptions.particles.number.density.value_area
+            }
+          },
+          color: {
+            value: fixedOptions.particles.color.value
+          },
+          stroke: {
+            width: fixedOptions.particles.shape.stroke.width,
+            color: {
+              value: fixedOptions.particles.shape.stroke.color
+            }
+          },
+          shape: {
+            type: fixedOptions.particles.shape.type,
+            options: {
+              polygon: {
+                sides: fixedOptions.particles.shape.polygon.nb_sides
+              },
+              image: {
+                src: fixedOptions.particles.shape.image.src,
+                width: fixedOptions.particles.shape.image.width,
+                height: fixedOptions.particles.shape.image.height
+              }
+            }
+          },
+          opacity: {
+            value: fixedOptions.particles.opacity.random ? {
+              min: fixedOptions.particles.opacity.anim.enable ? fixedOptions.particles.opacity.anim.opacity_min : 0,
+              max: fixedOptions.particles.opacity.value
+            } : fixedOptions.particles.opacity.value,
+            animation: {
+              enable: fixedOptions.particles.opacity.anim.enable,
+              speed: fixedOptions.particles.opacity.anim.speed,
+              sync: fixedOptions.particles.opacity.anim.sync
+            }
+          },
+          size: {
+            value: fixedOptions.particles.size.random ? {
+              min: fixedOptions.particles.size.anim.enable ? fixedOptions.particles.size.anim.size_min : 0,
+              max: fixedOptions.particles.size.value
+            } : fixedOptions.particles.size.value,
+            animation: {
+              enable: fixedOptions.particles.size.anim.enable,
+              speed: fixedOptions.particles.size.anim.speed,
+              sync: fixedOptions.particles.size.anim.sync
+            }
+          },
+          links: {
+            enable: fixedOptions.particles.line_linked.enable,
+            distance: fixedOptions.particles.line_linked.distance,
+            color: fixedOptions.particles.line_linked.color,
+            opacity: fixedOptions.particles.line_linked.opacity,
+            width: fixedOptions.particles.line_linked.width
+          },
+          move: {
+            enable: fixedOptions.particles.move.enable,
+            speed: fixedOptions.particles.move.speed / 3,
+            direction: fixedOptions.particles.move.direction,
+            random: fixedOptions.particles.move.random,
+            straight: fixedOptions.particles.move.straight,
+            outModes: fixedOptions.particles.move.out_mode,
+            attract: {
+              enable: fixedOptions.particles.move.attract.enable,
+              rotate: {
+                x: fixedOptions.particles.move.attract.rotateX,
+                y: fixedOptions.particles.move.attract.rotateY
+              }
+            }
+          }
+        }
+      }
     });
   };
   particlesJS.load = (tagId, pathConfigJson, callback) => {