@tsparticles/confetti 4.0.0-beta.9 → 4.0.1

package/cjs/confetti.js

@@ -1,42 +1,24 @@
-import { isString, millisecondsToSeconds, tsParticles, } from "@tsparticles/engine";
-import { ConfettiOptions } from "./ConfettiOptions.js";
-let initialized = false, initializing = false;
-const ids = new Map(), defaultGravity = 9.81, sizeFactor = 5, speedFactor = 3, decayOffset = 1, disableRotate = 0, disableTilt = 0;
-async function initPlugins(engine) {
-    if (initialized) {
-        return;
-    }
-    if (initializing) {
-        return new Promise(resolve => {
-            const timeout = 100, interval = setInterval(() => {
-                if (!initialized) {
-                    return;
-                }
-                clearInterval(interval);
-                resolve();
-            }, timeout);
-        });
-    }
-    initializing = true;
-    engine.checkVersion("4.0.0-beta.9");
+import { isString, tsParticles } from "@tsparticles/engine";
+import { loadBasic } from "@tsparticles/basic";
+import { loadCardSuitsShape } from "@tsparticles/shape-cards/suits";
+import { loadEmittersPluginSimple } from "@tsparticles/plugin-emitters/plugin";
+import { loadEmojiShape } from "@tsparticles/shape-emoji";
+import { loadHeartShape } from "@tsparticles/shape-heart";
+import { loadImageShape } from "@tsparticles/shape-image";
+import { loadLifeUpdater } from "@tsparticles/updater-life";
+import { loadMotionPlugin } from "@tsparticles/plugin-motion";
+import { loadPolygonShape } from "@tsparticles/shape-polygon";
+import { loadRollUpdater } from "@tsparticles/updater-roll";
+import { loadRotateUpdater } from "@tsparticles/updater-rotate";
+import { loadSquareShape } from "@tsparticles/shape-square";
+import { loadStarShape } from "@tsparticles/shape-star";
+import { loadTiltUpdater } from "@tsparticles/updater-tilt";
+import { loadWobbleUpdater } from "@tsparticles/updater-wobble";
+import { setConfetti } from "./utils.js";
+let initPromise = null;
+async function doInitPlugins(engine) {
+    engine.checkVersion("4.0.1");
     await engine.pluginManager.register(async (e) => {
-        const [{ loadBasic }, { loadEmittersPluginSimple }, { loadMotionPlugin }, { loadCardSuitsShape }, { loadHeartShape }, { loadImageShape }, { loadPolygonShape }, { loadSquareShape }, { loadStarShape }, { loadEmojiShape }, { loadRotateUpdater }, { loadLifeUpdater }, { loadRollUpdater }, { loadTiltUpdater }, { loadWobbleUpdater },] = await Promise.all([
-            import("@tsparticles/basic"),
-            import("@tsparticles/plugin-emitters/plugin"),
-            import("@tsparticles/plugin-motion"),
-            import("@tsparticles/shape-cards/suits"),
-            import("@tsparticles/shape-heart"),
-            import("@tsparticles/shape-image"),
-            import("@tsparticles/shape-polygon"),
-            import("@tsparticles/shape-square"),
-            import("@tsparticles/shape-star"),
-            import("@tsparticles/shape-emoji"),
-            import("@tsparticles/updater-rotate"),
-            import("@tsparticles/updater-life"),
-            import("@tsparticles/updater-roll"),
-            import("@tsparticles/updater-tilt"),
-            import("@tsparticles/updater-wobble"),
-        ]);
         await Promise.all([
             loadBasic(e),
             loadMotionPlugin(e),
@@ -55,265 +37,13 @@ async function initPlugins(engine) {
             loadWobbleUpdater(e),
         ]);
     });
-    initializing = false;
-    initialized = true;
 }
-async function setConfetti(params) {
-    const actualOptions = new ConfettiOptions();
-    actualOptions.load(params.options);
-    let container;
-    const fpsLimit = 120, fpsLimitFactor = 3.6, opacitySpeed = (actualOptions.ticks * millisecondsToSeconds) / (fpsLimitFactor * millisecondsToSeconds * fpsLimit);
-    if (ids.has(params.id)) {
-        container = ids.get(params.id);
-        if (container && !container.destroyed) {
-            const alias = container;
-            if ("addEmitter" in alias) {
-                await alias.addEmitter?.({
-                    startCount: actualOptions.count,
-                    position: actualOptions.position,
-                    size: {
-                        width: 0,
-                        height: 0,
-                    },
-                    rate: {
-                        delay: 0,
-                        quantity: 0,
-                    },
-                    life: {
-                        duration: 0.1,
-                        count: 1,
-                    },
-                    particles: {
-                        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,
-                            },
-                        },
-                    },
-                });
-                return;
-            }
-        }
+async function initPlugins(engine) {
+    if (initPromise) {
+        return initPromise;
     }
-    const particlesOptions = {
-        fullScreen: {
-            enable: !params.canvas,
-            zIndex: actualOptions.zIndex,
-        },
-        fpsLimit: 120,
-        particles: {
-            number: {
-                value: 0,
-            },
-            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,
-            },
-        },
-    };
-    container = await tsParticles.load({ id: params.id, element: params.canvas, options: particlesOptions });
-    ids.set(params.id, container);
-    return container;
+    initPromise = doInitPlugins(engine);
+    return initPromise;
 }
 export async function confetti(idOrOptions, confettiOptions) {
     await initPlugins(tsParticles);
@@ -326,15 +56,20 @@ export async function confetti(idOrOptions, confettiOptions) {
         id = "confetti";
         options = idOrOptions;
     }
-    return setConfetti({
+    return setConfetti(tsParticles, {
         id,
         options,
     });
 }
-confetti.create = async (canvas, options) => {
+confetti.create = async (canvas, options = {}) => {
     await initPlugins(tsParticles);
-    const id = canvas.getAttribute("id") ?? "confetti";
-    canvas.setAttribute("id", id);
+    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)) {
@@ -345,9 +80,9 @@ confetti.create = async (canvas, options) => {
             subId = id;
             subOptions = idOrOptions;
         }
-        return setConfetti({
+        return setConfetti(tsParticles, {
             id: subId,
-            canvas,
+            canvas: canvas ?? undefined,
             options: subOptions,
         });
     };
@@ -355,5 +90,5 @@ confetti.create = async (canvas, options) => {
 confetti.init = async () => {
     await initPlugins(tsParticles);
 };
-confetti.version = "4.0.0-beta.9";
+confetti.version = "4.0.1";
 globalThis.confetti = confetti;

package/cjs/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.1");
+    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.1";
+globalThis.confetti = confetti;

package/cjs/index.lazy.js

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

package/cjs/types.js

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