@tsparticles/pjs 3.0.0-beta.4 → 3.0.0-beta.5

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-beta.5
  */
 (function webpackUniversalModuleDefinition(root, factory) {
 	if(typeof exports === 'object' && typeof module === 'object')
@@ -2403,11 +2403,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 +3428,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);
@@ -3873,7 +3872,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 +5128,7 @@ class Engine {
     return res;
   }
   get version() {
-    return "3.0.0-beta.4";
+    return "3.0.0-beta.5";
   }
   addConfig(config) {
     const name = config.name ?? "default";
@@ -5625,11 +5626,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) => {