@tsparticles/confetti 3.0.0-beta.0

package/cjs/ConfettiOptions.js

@@ -0,0 +1,123 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConfettiOptions = void 0;
+const engine_1 = require("@tsparticles/engine");
+class ConfettiOptions {
+    constructor() {
+        this.angle = 90;
+        this.count = 50;
+        this.spread = 45;
+        this.startVelocity = 45;
+        this.decay = 0.9;
+        this.gravity = 1;
+        this.drift = 0;
+        this.ticks = 200;
+        this.position = {
+            x: 50,
+            y: 50,
+        };
+        this.colors = ["#26ccff", "#a25afd", "#ff5e7e", "#88ff5a", "#fcff42", "#ffa62d", "#ff36ff"];
+        this.shapes = ["square", "circle"];
+        this.scalar = 1;
+        this.zIndex = 100;
+        this.disableForReducedMotion = true;
+        this.shapeOptions = {};
+    }
+    get origin() {
+        return {
+            x: this.position.x / 100,
+            y: this.position.y / 100,
+        };
+    }
+    set origin(value) {
+        this.position.x = value.x * 100;
+        this.position.y = value.y * 100;
+    }
+    get particleCount() {
+        return this.count;
+    }
+    set particleCount(value) {
+        this.count = value;
+    }
+    load(data) {
+        if (!data) {
+            return;
+        }
+        if (data.angle !== undefined) {
+            this.angle = data.angle;
+        }
+        const count = data.count ?? data.particleCount;
+        if (count !== undefined) {
+            this.count = count;
+        }
+        if (data.spread !== undefined) {
+            this.spread = data.spread;
+        }
+        if (data.startVelocity !== undefined) {
+            this.startVelocity = data.startVelocity;
+        }
+        if (data.decay !== undefined) {
+            this.decay = data.decay;
+        }
+        if (data.gravity !== undefined) {
+            this.gravity = data.gravity;
+        }
+        if (data.drift !== undefined) {
+            this.drift = data.drift;
+        }
+        if (data.ticks !== undefined) {
+            this.ticks = data.ticks;
+        }
+        const origin = data.origin;
+        if (origin && !data.position) {
+            data.position = {
+                x: origin.x !== undefined ? origin.x * 100 : undefined,
+                y: origin.y !== undefined ? origin.y * 100 : undefined,
+            };
+        }
+        const position = data.position;
+        if (position) {
+            if (position.x !== undefined) {
+                this.position.x = position.x;
+            }
+            if (position.y !== undefined) {
+                this.position.y = position.y;
+            }
+        }
+        if (data.colors !== undefined) {
+            if ((0, engine_1.isArray)(data.colors)) {
+                this.colors = [...data.colors];
+            }
+            else {
+                this.colors = data.colors;
+            }
+        }
+        const options = data.shapeOptions;
+        if (options !== undefined) {
+            for (const shape in options) {
+                const item = options[shape];
+                if (item) {
+                    this.shapeOptions[shape] = (0, engine_1.deepExtend)(this.shapeOptions[shape] ?? {}, item);
+                }
+            }
+        }
+        if (data.shapes !== undefined) {
+            if ((0, engine_1.isArray)(data.shapes)) {
+                this.shapes = [...data.shapes];
+            }
+            else {
+                this.shapes = data.shapes;
+            }
+        }
+        if (data.scalar !== undefined) {
+            this.scalar = data.scalar;
+        }
+        if (data.zIndex !== undefined) {
+            this.zIndex = data.zIndex;
+        }
+        if (data.disableForReducedMotion !== undefined) {
+            this.disableForReducedMotion = data.disableForReducedMotion;
+        }
+    }
+}
+exports.ConfettiOptions = ConfettiOptions;

package/cjs/IConfettiOptions.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/cjs/bundle.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+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 });
+__exportStar(require("."), exports);
+__exportStar(require("@tsparticles/engine"), exports);

package/cjs/confetti.js

@@ -0,0 +1,304 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.confetti = void 0;
+const engine_1 = require("@tsparticles/engine");
+const ConfettiOptions_1 = require("./ConfettiOptions");
+const basic_1 = require("@tsparticles/basic");
+const shape_cards_1 = require("@tsparticles/shape-cards");
+const plugin_emitters_1 = require("@tsparticles/plugin-emitters");
+const shape_heart_1 = require("@tsparticles/shape-heart");
+const shape_image_1 = require("@tsparticles/shape-image");
+const updater_life_1 = require("@tsparticles/updater-life");
+const plugin_motion_1 = require("@tsparticles/plugin-motion");
+const shape_polygon_1 = require("@tsparticles/shape-polygon");
+const updater_roll_1 = require("@tsparticles/updater-roll");
+const updater_rotate_1 = require("@tsparticles/updater-rotate");
+const shape_square_1 = require("@tsparticles/shape-square");
+const shape_star_1 = require("@tsparticles/shape-star");
+const shape_text_1 = require("@tsparticles/shape-text");
+const updater_tilt_1 = require("@tsparticles/updater-tilt");
+const updater_wobble_1 = require("@tsparticles/updater-wobble");
+let initialized = false;
+let initializing = false;
+const ids = new Map();
+async function initPlugins(engine) {
+    if (initialized) {
+        return;
+    }
+    if (initializing) {
+        return new Promise((resolve) => {
+            const interval = setInterval(() => {
+                if (!initialized) {
+                    return;
+                }
+                clearInterval(interval);
+                resolve();
+            }, 100);
+        });
+    }
+    initializing = true;
+    await (0, plugin_emitters_1.loadEmittersPlugin)(engine, false);
+    await (0, plugin_motion_1.loadMotionPlugin)(engine, false);
+    await (0, shape_cards_1.loadCardsShape)(engine, false);
+    await (0, shape_heart_1.loadHeartShape)(engine, false);
+    await (0, shape_image_1.loadImageShape)(engine, false);
+    await (0, shape_polygon_1.loadPolygonShape)(engine, false);
+    await (0, shape_square_1.loadSquareShape)(engine, false);
+    await (0, shape_star_1.loadStarShape)(engine, false);
+    await (0, shape_text_1.loadTextShape)(engine, false);
+    await (0, updater_rotate_1.loadRotateUpdater)(engine, false);
+    await (0, updater_life_1.loadLifeUpdater)(engine, false);
+    await (0, updater_roll_1.loadRollUpdater)(engine, false);
+    await (0, updater_tilt_1.loadTiltUpdater)(engine, false);
+    await (0, updater_wobble_1.loadWobbleUpdater)(engine, false);
+    await (0, basic_1.loadBasic)(engine);
+    initializing = false;
+    initialized = true;
+}
+async function setConfetti(params) {
+    const actualOptions = new ConfettiOptions_1.ConfettiOptions();
+    actualOptions.load(params.options);
+    let container;
+    const fpsLimit = 120, opacitySpeed = (actualOptions.ticks * 1000) / (3600 * fpsLimit);
+    if (ids.has(params.id)) {
+        container = ids.get(params.id);
+        if (container && !container.destroyed) {
+            const alias = container;
+            if (alias.addEmitter) {
+                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: {
+                        color: {
+                            value: actualOptions.colors,
+                        },
+                        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",
+                            },
+                        },
+                        size: {
+                            value: 5 * actualOptions.scalar,
+                        },
+                        move: {
+                            angle: {
+                                value: actualOptions.spread,
+                                offset: 0,
+                            },
+                            drift: {
+                                min: -actualOptions.drift,
+                                max: actualOptions.drift,
+                            },
+                            gravity: {
+                                acceleration: actualOptions.gravity * 9.81,
+                            },
+                            speed: actualOptions.startVelocity * 3,
+                            decay: 1 - actualOptions.decay,
+                            direction: -actualOptions.angle,
+                        },
+                    },
+                });
+                return;
+            }
+        }
+    }
+    const particlesOptions = {
+        fullScreen: {
+            enable: !params.canvas,
+            zIndex: actualOptions.zIndex,
+        },
+        fpsLimit: 120,
+        particles: {
+            number: {
+                value: 0,
+            },
+            color: {
+                value: actualOptions.colors,
+            },
+            shape: {
+                type: actualOptions.shapes,
+                options: actualOptions.shapeOptions,
+            },
+            opacity: {
+                value: { min: 0, max: 1 },
+                animation: {
+                    enable: true,
+                    sync: true,
+                    speed: opacitySpeed,
+                    startValue: "max",
+                    destroy: "min",
+                },
+            },
+            size: {
+                value: 5 * 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 * 9.81,
+                },
+                speed: actualOptions.startVelocity * 3,
+                decay: 1 - actualOptions.decay,
+                direction: -actualOptions.angle,
+                random: true,
+                straight: false,
+                outModes: {
+                    default: "none",
+                    bottom: "destroy",
+                },
+            },
+            rotate: {
+                value: {
+                    min: 0,
+                    max: 360,
+                },
+                direction: "random",
+                animation: {
+                    enable: true,
+                    speed: 60,
+                },
+            },
+            tilt: {
+                direction: "random",
+                enable: true,
+                value: {
+                    min: 0,
+                    max: 360,
+                },
+                animation: {
+                    enable: true,
+                    speed: 60,
+                },
+            },
+            roll: {
+                darken: {
+                    enable: true,
+                    value: 25,
+                },
+                enable: true,
+                speed: {
+                    min: 15,
+                    max: 25,
+                },
+            },
+            wobble: {
+                distance: 30,
+                enable: true,
+                speed: {
+                    min: -15,
+                    max: 15,
+                },
+            },
+        },
+        detectRetina: true,
+        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 engine_1.tsParticles.load({ id: params.id, element: params.canvas, options: particlesOptions });
+    ids.set(params.id, container);
+    return container;
+}
+async function confetti(idOrOptions, confettiOptions) {
+    await initPlugins(engine_1.tsParticles);
+    let options;
+    let id;
+    if ((0, engine_1.isString)(idOrOptions)) {
+        id = idOrOptions;
+        options = confettiOptions ?? {};
+    }
+    else {
+        id = "confetti";
+        options = idOrOptions;
+    }
+    return setConfetti({
+        id,
+        options,
+    });
+}
+exports.confetti = confetti;
+confetti.create = async (canvas, options) => {
+    if (!canvas) {
+        return confetti;
+    }
+    await initPlugins(engine_1.tsParticles);
+    const id = canvas.getAttribute("id") || "confetti";
+    canvas.setAttribute("id", id);
+    return async (idOrOptions, confettiOptions) => {
+        let subOptions;
+        let subId;
+        if ((0, engine_1.isString)(idOrOptions)) {
+            subId = idOrOptions;
+            subOptions = confettiOptions ?? options;
+        }
+        else {
+            subId = id;
+            subOptions = idOrOptions;
+        }
+        return setConfetti({
+            id: subId,
+            canvas,
+            options: subOptions,
+        });
+    };
+};
+confetti.version = engine_1.tsParticles.version;
+if (!(0, engine_1.isSsr)()) {
+    window.confetti = confetti;
+}

package/cjs/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+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 });
+__exportStar(require("./confetti"), exports);

package/esm/ConfettiOptions.js

@@ -0,0 +1,119 @@
+import { deepExtend, isArray, } from "@tsparticles/engine";
+export class ConfettiOptions {
+    constructor() {
+        this.angle = 90;
+        this.count = 50;
+        this.spread = 45;
+        this.startVelocity = 45;
+        this.decay = 0.9;
+        this.gravity = 1;
+        this.drift = 0;
+        this.ticks = 200;
+        this.position = {
+            x: 50,
+            y: 50,
+        };
+        this.colors = ["#26ccff", "#a25afd", "#ff5e7e", "#88ff5a", "#fcff42", "#ffa62d", "#ff36ff"];
+        this.shapes = ["square", "circle"];
+        this.scalar = 1;
+        this.zIndex = 100;
+        this.disableForReducedMotion = true;
+        this.shapeOptions = {};
+    }
+    get origin() {
+        return {
+            x: this.position.x / 100,
+            y: this.position.y / 100,
+        };
+    }
+    set origin(value) {
+        this.position.x = value.x * 100;
+        this.position.y = value.y * 100;
+    }
+    get particleCount() {
+        return this.count;
+    }
+    set particleCount(value) {
+        this.count = value;
+    }
+    load(data) {
+        if (!data) {
+            return;
+        }
+        if (data.angle !== undefined) {
+            this.angle = data.angle;
+        }
+        const count = data.count ?? data.particleCount;
+        if (count !== undefined) {
+            this.count = count;
+        }
+        if (data.spread !== undefined) {
+            this.spread = data.spread;
+        }
+        if (data.startVelocity !== undefined) {
+            this.startVelocity = data.startVelocity;
+        }
+        if (data.decay !== undefined) {
+            this.decay = data.decay;
+        }
+        if (data.gravity !== undefined) {
+            this.gravity = data.gravity;
+        }
+        if (data.drift !== undefined) {
+            this.drift = data.drift;
+        }
+        if (data.ticks !== undefined) {
+            this.ticks = data.ticks;
+        }
+        const origin = data.origin;
+        if (origin && !data.position) {
+            data.position = {
+                x: origin.x !== undefined ? origin.x * 100 : undefined,
+                y: origin.y !== undefined ? origin.y * 100 : undefined,
+            };
+        }
+        const position = data.position;
+        if (position) {
+            if (position.x !== undefined) {
+                this.position.x = position.x;
+            }
+            if (position.y !== undefined) {
+                this.position.y = position.y;
+            }
+        }
+        if (data.colors !== undefined) {
+            if (isArray(data.colors)) {
+                this.colors = [...data.colors];
+            }
+            else {
+                this.colors = data.colors;
+            }
+        }
+        const options = data.shapeOptions;
+        if (options !== undefined) {
+            for (const shape in options) {
+                const item = options[shape];
+                if (item) {
+                    this.shapeOptions[shape] = deepExtend(this.shapeOptions[shape] ?? {}, item);
+                }
+            }
+        }
+        if (data.shapes !== undefined) {
+            if (isArray(data.shapes)) {
+                this.shapes = [...data.shapes];
+            }
+            else {
+                this.shapes = data.shapes;
+            }
+        }
+        if (data.scalar !== undefined) {
+            this.scalar = data.scalar;
+        }
+        if (data.zIndex !== undefined) {
+            this.zIndex = data.zIndex;
+        }
+        if (data.disableForReducedMotion !== undefined) {
+            this.disableForReducedMotion = data.disableForReducedMotion;
+        }
+    }
+}

package/esm/IConfettiOptions.js

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

package/esm/bundle.js

@@ -0,0 +1,2 @@
+export * from ".";
+export * from "@tsparticles/engine";