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

package/cjs/VincentGarreau/particles.js

@@ -0,0 +1,274 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.initParticlesJS = void 0;
+const engine_1 = require("@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 = (0, engine_1.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 };
+};
+exports.initParticlesJS = initParticlesJS;

package/cjs/bundle.js

@@ -14,10 +14,11 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.pJSDom = exports.particlesJS = void 0;
+exports.Particles = exports.pJSDom = exports.particlesJS = void 0;
 const _1 = require(".");
 const engine_1 = require("@tsparticles/engine");
-const { particlesJS, pJSDom } = (0, _1.initPjs)(engine_1.tsParticles);
+const { particlesJS, pJSDom, Particles } = (0, _1.initPjs)(engine_1.tsParticles);
 exports.particlesJS = particlesJS;
 exports.pJSDom = pJSDom;
+exports.Particles = Particles;
 __exportStar(require("@tsparticles/engine"), exports);

package/cjs/index.js

@@ -1,26 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.initPjs = void 0;
+const Particles_js_1 = require("./marcbruederlin/Particles.js");
+const particles_js_1 = require("./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 } = (0, particles_js_1.initParticlesJS)(engine);
+    window.particlesJS = particlesJS;
+    window.pJSDom = pJSDom;
+    window.Particles = Particles_js_1.Particles;
+    return { particlesJS, pJSDom, Particles: Particles_js_1.Particles };
 };
 exports.initPjs = initPjs;

package/cjs/marcbruederlin/Particles.js

@@ -0,0 +1,87 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Particles = void 0;
+const engine_1 = require("@tsparticles/engine");
+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");
+        }
+        engine_1.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();
+    }
+}
+exports.Particles = Particles;

package/cjs/package.json

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

package/esm/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/esm/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 };