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

package/umd/VincentGarreau/particles.js

@@ -0,0 +1,284 @@
+(function (factory) {
+    if (typeof module === "object" && typeof module.exports === "object") {
+        var v = factory(require, exports);
+        if (v !== undefined) module.exports = v;
+    }
+    else if (typeof define === "function" && define.amd) {
+        define(["require", "exports", "@tsparticles/engine"], factory);
+    }
+})(function (require, exports) {
+    "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/umd/bundle.js

@@ -23,11 +23,12 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 })(function (require, exports) {
     "use strict";
     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/umd/index.js

@@ -4,33 +4,20 @@
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports"], factory);
+        define(["require", "exports", "./marcbruederlin/Particles.js", "./VincentGarreau/particles.js"], factory);
     }
 })(function (require, exports) {
     "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/umd/marcbruederlin/Particles.js

@@ -0,0 +1,97 @@
+(function (factory) {
+    if (typeof module === "object" && typeof module.exports === "object") {
+        var v = factory(require, exports);
+        if (v !== undefined) module.exports = v;
+    }
+    else if (typeof define === "function" && define.amd) {
+        define(["require", "exports", "@tsparticles/engine"], factory);
+    }
+})(function (require, exports) {
+    "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/types/IParticlesJS.d.ts

@@ -1,6 +0,0 @@
-import type { Container, ISourceOptions } from "@tsparticles/engine";
-export interface IParticlesJS {
-    (tagId: string, options: ISourceOptions): Promise<Container | undefined>;
-    load(tagId: string, pathConfigJson: string, callback: (container?: Container) => void): void;
-    setOnClickHandler(callback: EventListenerOrEventListenerObject): void;
-}