@tsparticles/pjs 3.0.0-alpha.1 → 3.0.0-beta.5

package/README.md

@@ -2,9 +2,9 @@
 
 # tsParticles Particles.js Compatibility Package
 
-[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-particles.js/badge)](https://www.jsdelivr.com/package/npm/tsparticles-particles.js) [![npmjs](https://badge.fury.io/js/tsparticles-particles.js.svg)](https://www.npmjs.com/package/tsparticles-particles.js) [![npmjs](https://img.shields.io/npm/dt/tsparticles-particles.js)](https://www.npmjs.com/package/tsparticles-particles.js) [![GitHub Sponsors](https://img.shields.io/github/sponsors/matteobruni)](https://github.com/sponsors/matteobruni)
+[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/@tsparticles/particles.js/badge)](https://www.jsdelivr.com/package/npm/@tsparticles/particles.js) [![npmjs](https://badge.fury.io/js/@tsparticles/particles.js.svg)](https://www.npmjs.com/package/@tsparticles/particles.js) [![npmjs](https://img.shields.io/npm/dt/@tsparticles/particles.js)](https://www.npmjs.com/package/@tsparticles/particles.js) [![GitHub Sponsors](https://img.shields.io/github/sponsors/matteobruni)](https://github.com/sponsors/matteobruni)
 
-[tsParticles](https://github.com/matteobruni/tsparticles) particles.js compatibility library.
+[tsParticles](https://github.com/tsparticles/tsparticles) particles.js compatibility library.
 
 ## How to use it
 
@@ -17,12 +17,8 @@ The CDN/Vanilla version JS has two different files:
 
 #### Bundle
 
-Including the `tsparticles.pjs.bundle.min.js` file will work exactly like `v1`, you can start using the `tsParticles` or
-the `particlesJS` instance in the same way.
-
-This is the easiest usage, since it's a single file with the some of the `v1` features.
-
-All new features will be added as external packages, this bundle is recommended for migrating from `v1` easily.
+Including the `tsparticles.pjs.bundle.min.js` file will work exactly like `v1`, you can start using the `tsParticles`,
+the `particlesJS` instance, or the `Particles` object in the same way.
 
 #### Not Bundle
 
@@ -49,3 +45,45 @@ tsParticles.load({
   },
 });
 ```
+
+#### Options
+
+Here you can use ParticlesJS or tsParticles options, they will work both fine.
+
+### Alternative Usage
+
+```javascript
+const { Particles } = initPjs(tsParticles); // not needed if using the bundle script, required for any other installation
+
+Particles.init({
+  /* options */
+});
+```
+
+#### Particles Options (only for Particles.init)
+
+| Option             | Type               | Default   | Description                                                           |
+| ------------------ | ------------------ | --------- | --------------------------------------------------------------------- |
+| `selector`         | string             | -         | _Required:_ The CSS selector of your canvas element                   |
+| `maxParticles`     | integer            | `100`     | _Optional:_ Maximum amount of particles                               |
+| `sizeVariations`   | integer            | `3`       | _Optional:_ Amount of size variations                                 |
+| `speed`            | integer            | `0.5`     | _Optional:_ Movement speed of the particles                           |
+| `color`            | string or string[] | `#000000` | _Optional:_ Color(s) of the particles and connecting lines            |
+| `minDistance`      | integer            | `120`     | _Optional:_ Distance in `px` for connecting lines                     |
+| `connectParticles` | boolean            | `false`   | _Optional:_ `true`/`false` if connecting lines should be drawn or not |
+| `responsive`       | array              | `null`    | _Optional:_ Array of objects containing breakpoints and options       |
+
+##### Responsive Options
+
+| Option       | Type    | Default | Description                                               |
+| ------------ | ------- | ------- | --------------------------------------------------------- |
+| `breakpoint` | integer | -       | _Required:_ Breakpoint in `px`                            |
+| `options`    | object  | -       | _Required:_ Options object, that overrides default values |
+
+#### Methods
+
+| Method            | Description                         |
+| ----------------- | ----------------------------------- |
+| `pauseAnimation`  | Pauses/stops the particle animation |
+| `resumeAnimation` | Continues the particle animation    |
+| `destroy`         | Destroys the plugin                 |

package/browser/VincentGarreau/particles.js

@@ -0,0 +1,271 @@
+import { deepExtend } from "@tsparticles/engine";
+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: {
+                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) => {
+        engine
+            .load({ id: tagId, url: pathConfigJson })
+            .then((container) => {
+            if (container) {
+                callback(container);
+            }
+        })
+            .catch(() => {
+            callback(undefined);
+        });
+    };
+    particlesJS.setOnClickHandler = (callback) => {
+        engine.setOnClickHandler(callback);
+    };
+    const pJSDom = engine.dom();
+    return { particlesJS, pJSDom };
+};
+export { initParticlesJS };

package/browser/bundle.js

@@ -1,5 +1,5 @@
 import { initPjs } from ".";
 import { tsParticles } from "@tsparticles/engine";
-const { particlesJS, pJSDom } = initPjs(tsParticles);
+const { particlesJS, pJSDom, Particles } = initPjs(tsParticles);
 export * from "@tsparticles/engine";
-export { particlesJS, pJSDom };
+export { particlesJS, pJSDom, Particles };

package/browser/index.js

@@ -1,23 +1,10 @@
+import { Particles } from "./marcbruederlin/Particles.js";
+import { initParticlesJS } from "./VincentGarreau/particles.js";
 const initPjs = (engine) => {
-    const particlesJS = (tagId, options) => {
-        return engine.load({ id: tagId, options: options });
-    };
-    particlesJS.load = (tagId, pathConfigJson, callback) => {
-        engine
-            .load({ id: tagId, url: pathConfigJson })
-            .then((container) => {
-            if (container) {
-                callback(container);
-            }
-        })
-            .catch(() => {
-            callback(undefined);
-        });
-    };
-    particlesJS.setOnClickHandler = (callback) => {
-        engine.setOnClickHandler(callback);
-    };
-    const pJSDom = engine.dom();
-    return { particlesJS, pJSDom };
+    const { particlesJS, pJSDom } = initParticlesJS(engine);
+    window.particlesJS = particlesJS;
+    window.pJSDom = pJSDom;
+    window.Particles = Particles;
+    return { particlesJS, pJSDom, Particles };
 };
 export { initPjs };

package/browser/marcbruederlin/Particles.js

@@ -0,0 +1,83 @@
+import { tsParticles } from "@tsparticles/engine";
+export class Particles {
+    static init(options) {
+        const particles = new Particles(), selector = options.selector;
+        if (!selector) {
+            throw new Error("No selector provided");
+        }
+        const el = document.querySelector(selector);
+        if (!el) {
+            throw new Error("No element found for selector");
+        }
+        tsParticles
+            .load({
+            id: selector.replace(".", "").replace("!", ""),
+            element: el,
+            options: {
+                fullScreen: {
+                    enable: false,
+                },
+                particles: {
+                    color: {
+                        value: options.color ?? "!000000",
+                    },
+                    links: {
+                        color: "random",
+                        distance: options.minDistance ?? 120,
+                        enable: options.connectParticles ?? false,
+                    },
+                    move: {
+                        enable: true,
+                        speed: options.speed ?? 0.5,
+                    },
+                    number: {
+                        value: options.maxParticles ?? 100,
+                    },
+                    size: {
+                        value: { min: 1, max: options.sizeVariations ?? 3 },
+                    },
+                },
+                responsive: options.responsive?.map((responsive) => ({
+                    maxWidth: responsive.breakpoint,
+                    options: {
+                        particles: {
+                            color: {
+                                value: responsive.options?.color,
+                            },
+                            links: {
+                                distance: responsive.options?.minDistance,
+                                enable: responsive.options?.connectParticles,
+                            },
+                            number: {
+                                value: options.maxParticles,
+                            },
+                            move: {
+                                enable: true,
+                                speed: responsive.options?.speed,
+                            },
+                            size: {
+                                value: responsive.options?.sizeVariations,
+                            },
+                        },
+                    },
+                })),
+            },
+        })
+            .then((container) => {
+            particles._container = container;
+        });
+        return particles;
+    }
+    destroy() {
+        const container = this._container;
+        container && container.destroy();
+    }
+    pauseAnimation() {
+        const container = this._container;
+        container && container.pause();
+    }
+    resumeAnimation() {
+        const container = this._container;
+        container && container.play();
+    }
+}

package/browser/package.json

@@ -0,0 +1 @@
+{ "type": "module" }