@tsparticles/confetti 4.0.0-beta.8 → 4.0.0

package/esm/confetti.lazy.js

@@ -0,0 +1,96 @@
+import { isString, tsParticles } from "@tsparticles/engine/lazy";
+import { setConfetti } from "./utils.js";
+let initPromise = null;
+async function doInitPlugins(engine) {
+    engine.checkVersion("4.0.0");
+    await engine.pluginManager.register(async (e) => {
+        const [{ loadBasic }, { loadEmittersPluginSimple }, { loadMotionPlugin }, { loadCardSuitsShape }, { loadEmojiShape }, { loadHeartShape }, { loadImageShape }, { loadPolygonShape }, { loadSquareShape }, { loadStarShape }, { loadRotateUpdater }, { loadLifeUpdater }, { loadRollUpdater }, { loadTiltUpdater }, { loadWobbleUpdater },] = await Promise.all([
+            import("@tsparticles/basic/lazy"),
+            import("@tsparticles/plugin-emitters/plugin/lazy"),
+            import("@tsparticles/plugin-motion/lazy"),
+            import("@tsparticles/shape-cards/suits/lazy"),
+            import("@tsparticles/shape-emoji/lazy"),
+            import("@tsparticles/shape-heart/lazy"),
+            import("@tsparticles/shape-image/lazy"),
+            import("@tsparticles/shape-polygon/lazy"),
+            import("@tsparticles/shape-square/lazy"),
+            import("@tsparticles/shape-star/lazy"),
+            import("@tsparticles/updater-rotate/lazy"),
+            import("@tsparticles/updater-life/lazy"),
+            import("@tsparticles/updater-roll/lazy"),
+            import("@tsparticles/updater-tilt/lazy"),
+            import("@tsparticles/updater-wobble/lazy"),
+        ]);
+        await Promise.all([
+            loadBasic(e),
+            loadMotionPlugin(e),
+            loadEmittersPluginSimple(e),
+            loadCardSuitsShape(e),
+            loadHeartShape(e),
+            loadImageShape(e),
+            loadPolygonShape(e),
+            loadSquareShape(e),
+            loadStarShape(e),
+            loadEmojiShape(e),
+            loadRotateUpdater(e),
+            loadLifeUpdater(e),
+            loadRollUpdater(e),
+            loadTiltUpdater(e),
+            loadWobbleUpdater(e),
+        ]);
+    });
+}
+async function initPlugins(engine) {
+    if (initPromise) {
+        return initPromise;
+    }
+    initPromise = doInitPlugins(engine);
+    return initPromise;
+}
+export async function confetti(idOrOptions, confettiOptions) {
+    await initPlugins(tsParticles);
+    let options, id;
+    if (isString(idOrOptions)) {
+        id = idOrOptions;
+        options = confettiOptions ?? {};
+    }
+    else {
+        id = "confetti";
+        options = idOrOptions;
+    }
+    return setConfetti(tsParticles, {
+        id,
+        options,
+    });
+}
+confetti.create = async (canvas, options = {}) => {
+    await initPlugins(tsParticles);
+    const id = canvas?.getAttribute("id") ?? "confetti";
+    canvas?.setAttribute("id", id);
+    await setConfetti(tsParticles, {
+        id,
+        canvas: canvas ?? undefined,
+        options,
+    });
+    return async (idOrOptions, confettiOptions) => {
+        let subOptions, subId;
+        if (isString(idOrOptions)) {
+            subId = idOrOptions;
+            subOptions = confettiOptions ?? options;
+        }
+        else {
+            subId = id;
+            subOptions = idOrOptions;
+        }
+        return setConfetti(tsParticles, {
+            id: subId,
+            canvas: canvas ?? undefined,
+            options: subOptions,
+        });
+    };
+};
+confetti.init = async () => {
+    await initPlugins(tsParticles);
+};
+confetti.version = "4.0.0";
+globalThis.confetti = confetti;

package/esm/index.lazy.js

@@ -0,0 +1 @@
+export * from "./confetti.lazy.js";

package/esm/types.js

@@ -0,0 +1 @@
+export {};

package/esm/utils.js

@@ -0,0 +1,279 @@
+import { millisecondsToSeconds } from "@tsparticles/engine";
+import { ConfettiOptions } from "./ConfettiOptions.js";
+const defaultGravity = 9.81, sizeFactor = 5, speedFactor = 3, decayOffset = 1, disableRotate = 0, disableTilt = 0, ids = new Map();
+export async function addEmitter(container, actualOptions, opacitySpeed) {
+    await container.addEmitter?.({
+        startCount: actualOptions.count,
+        position: actualOptions.position,
+        size: {
+            width: 0,
+            height: 0,
+        },
+        rate: {
+            delay: 0,
+            quantity: 0,
+        },
+        life: {
+            duration: 0.1,
+            count: 1,
+        },
+        particles: {
+            paint: {
+                fill: {
+                    color: {
+                        value: actualOptions.colors,
+                    },
+                    enable: true,
+                },
+            },
+            shape: {
+                type: actualOptions.shapes,
+                options: actualOptions.shapeOptions,
+            },
+            life: {
+                count: 1,
+            },
+            opacity: {
+                value: { min: 0, max: 1 },
+                animation: {
+                    enable: true,
+                    sync: true,
+                    speed: opacitySpeed,
+                    startValue: "max",
+                    destroy: "min",
+                    count: 1,
+                },
+            },
+            size: {
+                value: sizeFactor * actualOptions.scalar,
+            },
+            move: {
+                angle: {
+                    value: actualOptions.spread,
+                    offset: 0,
+                },
+                drift: {
+                    min: -actualOptions.drift,
+                    max: actualOptions.drift,
+                },
+                gravity: {
+                    acceleration: actualOptions.gravity * defaultGravity,
+                },
+                speed: actualOptions.startVelocity * speedFactor,
+                decay: decayOffset - actualOptions.decay,
+                direction: -actualOptions.angle,
+            },
+            rotate: {
+                value: actualOptions.flat
+                    ? disableRotate
+                    : {
+                        min: 0,
+                        max: 360,
+                    },
+                direction: "random",
+                animation: {
+                    enable: !actualOptions.flat,
+                    speed: 60,
+                },
+            },
+            tilt: {
+                direction: "random",
+                enable: !actualOptions.flat,
+                value: actualOptions.flat
+                    ? disableTilt
+                    : {
+                        min: 0,
+                        max: 360,
+                    },
+                animation: {
+                    enable: true,
+                    speed: 60,
+                },
+            },
+            roll: {
+                darken: {
+                    enable: true,
+                    value: 25,
+                },
+                enable: !actualOptions.flat,
+                speed: {
+                    min: 15,
+                    max: 25,
+                },
+            },
+            wobble: {
+                distance: 30,
+                enable: !actualOptions.flat,
+                speed: {
+                    min: -15,
+                    max: 15,
+                },
+            },
+        },
+    });
+}
+export function convertOptions(actualOptions, params, opacitySpeed) {
+    return {
+        fullScreen: {
+            enable: !params.canvas,
+            zIndex: actualOptions.zIndex,
+        },
+        fpsLimit: 120,
+        particles: {
+            number: {
+                value: 0,
+            },
+            paint: {
+                fill: {
+                    color: {
+                        value: actualOptions.colors,
+                    },
+                    enable: true,
+                },
+            },
+            shape: {
+                type: actualOptions.shapes,
+                options: actualOptions.shapeOptions,
+            },
+            opacity: {
+                value: { min: 0, max: 1 },
+                animation: {
+                    enable: true,
+                    sync: true,
+                    speed: opacitySpeed,
+                    startValue: "max",
+                    destroy: "min",
+                    count: 1,
+                },
+            },
+            size: {
+                value: sizeFactor * actualOptions.scalar,
+            },
+            links: {
+                enable: false,
+            },
+            life: {
+                count: 1,
+            },
+            move: {
+                angle: {
+                    value: actualOptions.spread,
+                    offset: 0,
+                },
+                drift: {
+                    min: -actualOptions.drift,
+                    max: actualOptions.drift,
+                },
+                enable: true,
+                gravity: {
+                    enable: true,
+                    acceleration: actualOptions.gravity * defaultGravity,
+                },
+                speed: actualOptions.startVelocity * speedFactor,
+                decay: decayOffset - actualOptions.decay,
+                direction: -actualOptions.angle,
+                random: true,
+                straight: false,
+                outModes: {
+                    default: "none",
+                    bottom: "destroy",
+                },
+            },
+            rotate: {
+                value: actualOptions.flat
+                    ? disableRotate
+                    : {
+                        min: 0,
+                        max: 360,
+                    },
+                direction: "random",
+                animation: {
+                    enable: !actualOptions.flat,
+                    speed: 60,
+                },
+            },
+            tilt: {
+                direction: "random",
+                enable: !actualOptions.flat,
+                value: actualOptions.flat
+                    ? disableTilt
+                    : {
+                        min: 0,
+                        max: 360,
+                    },
+                animation: {
+                    enable: true,
+                    speed: 60,
+                },
+            },
+            roll: {
+                darken: {
+                    enable: true,
+                    value: 25,
+                },
+                enable: !actualOptions.flat,
+                speed: {
+                    min: 15,
+                    max: 25,
+                },
+            },
+            wobble: {
+                distance: 30,
+                enable: !actualOptions.flat,
+                speed: {
+                    min: -15,
+                    max: 15,
+                },
+            },
+        },
+        motion: {
+            disable: actualOptions.disableForReducedMotion,
+        },
+        emitters: {
+            name: "confetti",
+            startCount: actualOptions.count,
+            position: actualOptions.position,
+            size: {
+                width: 0,
+                height: 0,
+            },
+            rate: {
+                delay: 0,
+                quantity: 0,
+            },
+            life: {
+                duration: 0.1,
+                count: 1,
+            },
+        },
+    };
+}
+export async function setConfetti(engine, params) {
+    const actualOptions = new ConfettiOptions();
+    actualOptions.load(params.options);
+    const fpsLimit = 120, fpsLimitFactor = 3.6, opacitySpeed = (actualOptions.ticks * millisecondsToSeconds) / (fpsLimitFactor * millisecondsToSeconds * fpsLimit);
+    let containerOrPromise = ids.get(params.id);
+    if (containerOrPromise instanceof Promise) {
+        await containerOrPromise;
+        containerOrPromise = ids.get(params.id);
+    }
+    const container = containerOrPromise;
+    if (container && !container.destroyed) {
+        const alias = container;
+        if ("addEmitter" in alias) {
+            await addEmitter(alias, actualOptions, opacitySpeed);
+            return container;
+        }
+    }
+    const create = async () => {
+        const particlesOptions = convertOptions(actualOptions, params, opacitySpeed), newContainer = await engine.load({
+            id: params.id,
+            element: params.canvas,
+            options: particlesOptions,
+        });
+        ids.set(params.id, newContainer);
+        return newContainer;
+    }, createPromise = create();
+    ids.set(params.id, createPromise);
+    return createPromise;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsparticles/confetti",
-  "version": "4.0.0-beta.8",
+  "version": "4.0.0",
   "description": "Easily create highly customizable particle animations and use them as animated backgrounds for your website. Ready to use components available also for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Riot.js, Inferno.",
   "homepage": "https://particles.js.org",
   "repository": {
@@ -95,25 +95,32 @@
       "require": "./cjs/index.js",
       "default": "./esm/index.js"
     },
+    "./lazy": {
+      "types": "./types/index.lazy.d.ts",
+      "browser": "./browser/index.lazy.js",
+      "import": "./esm/index.lazy.js",
+      "require": "./cjs/index.lazy.js",
+      "default": "./esm/index.lazy.js"
+    },
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@tsparticles/basic": "4.0.0-beta.8",
-    "@tsparticles/engine": "4.0.0-beta.8",
-    "@tsparticles/plugin-emitters": "4.0.0-beta.8",
-    "@tsparticles/plugin-motion": "4.0.0-beta.8",
-    "@tsparticles/shape-cards": "4.0.0-beta.8",
-    "@tsparticles/shape-emoji": "4.0.0-beta.8",
-    "@tsparticles/shape-heart": "4.0.0-beta.8",
-    "@tsparticles/shape-image": "4.0.0-beta.8",
-    "@tsparticles/shape-polygon": "4.0.0-beta.8",
-    "@tsparticles/shape-square": "4.0.0-beta.8",
-    "@tsparticles/shape-star": "4.0.0-beta.8",
-    "@tsparticles/updater-life": "4.0.0-beta.8",
-    "@tsparticles/updater-roll": "4.0.0-beta.8",
-    "@tsparticles/updater-rotate": "4.0.0-beta.8",
-    "@tsparticles/updater-tilt": "4.0.0-beta.8",
-    "@tsparticles/updater-wobble": "4.0.0-beta.8"
+    "@tsparticles/basic": "4.0.0",
+    "@tsparticles/engine": "4.0.0",
+    "@tsparticles/plugin-emitters": "4.0.0",
+    "@tsparticles/plugin-motion": "4.0.0",
+    "@tsparticles/shape-cards": "4.0.0",
+    "@tsparticles/shape-emoji": "4.0.0",
+    "@tsparticles/shape-heart": "4.0.0",
+    "@tsparticles/shape-image": "4.0.0",
+    "@tsparticles/shape-polygon": "4.0.0",
+    "@tsparticles/shape-square": "4.0.0",
+    "@tsparticles/shape-star": "4.0.0",
+    "@tsparticles/updater-life": "4.0.0",
+    "@tsparticles/updater-roll": "4.0.0",
+    "@tsparticles/updater-rotate": "4.0.0",
+    "@tsparticles/updater-tilt": "4.0.0",
+    "@tsparticles/updater-wobble": "4.0.0"
   },
   "publishConfig": {
     "access": "public"