@tsparticles/confetti 3.0.0-beta.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Matteo Bruni
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,158 @@
+[![banner](https://particles.js.org/images/banner2.png)](https://particles.js.org)
+
+# tsParticles Confetti Bundle
+
+[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/@tsparticles/confetti/badge)](https://www.jsdelivr.com/package/npm/@tsparticles/confetti) [![npmjs](https://badge.fury.io/js/@tsparticles/confetti.svg)](https://www.npmjs.com/package/@tsparticles/confetti) [![npmjs](https://img.shields.io/npm/dt/@tsparticles/confetti)](https://www.npmjs.com/package/@tsparticles/confetti) [![GitHub Sponsors](https://img.shields.io/github/sponsors/matteobruni)](https://github.com/sponsors/matteobruni)
+
+[tsParticles](https://github.com/matteobruni/tsparticles) confetti bundle loads all the features necessary to create beautiful confetti effects with ease.
+
+**Included Packages**
+
+- [@tsparticles/engine](https://github.com/matteobruni/tsparticles/tree/main/engine)
+- [@tsparticles/move-base](https://github.com/matteobruni/tsparticles/tree/main/move/base)
+- [@tsparticles/plugin-emitters](https://github.com/matteobruni/tsparticles/tree/main/plugins/emitters)
+- [@tsparticles/plugin-motion](https://github.com/matteobruni/tsparticles/tree/main/plugins/motion)
+- [@tsparticles/shape-cards](https://github.com/matteobruni/tsparticles/tree/main/shapes/cards)
+- [@tsparticles/shape-circle](https://github.com/matteobruni/tsparticles/tree/main/shapes/circle)
+- [@tsparticles/shape-heart](https://github.com/matteobruni/tsparticles/tree/main/shapes/heart)
+- [@tsparticles/shape-image](https://github.com/matteobruni/tsparticles/tree/main/shapes/image)
+- [@tsparticles/shape-polygon](https://github.com/matteobruni/tsparticles/tree/main/shapes/polygon)
+- [@tsparticles/shape-square](https://github.com/matteobruni/tsparticles/tree/main/shapes/square)
+- [@tsparticles/shape-star](https://github.com/matteobruni/tsparticles/tree/main/shapes/star)
+- [@tsparticles/shape-text](https://github.com/matteobruni/tsparticles/tree/main/shapes/text)
+- [@tsparticles/updater-color](https://github.com/matteobruni/tsparticles/tree/main/updaters/color)
+- [@tsparticles/updater-life](https://github.com/matteobruni/tsparticles/tree/main/updaters/life)
+- [@tsparticles/updater-opacity](https://github.com/matteobruni/tsparticles/tree/main/updaters/opacity)
+- [@tsparticles/updater-out-modes](https://github.com/matteobruni/tsparticles/tree/main/updaters/outModes)
+- [@tsparticles/updater-roll](https://github.com/matteobruni/tsparticles/tree/main/updaters/roll)
+- [@tsparticles/updater-rotate](https://github.com/matteobruni/tsparticles/tree/main/updaters/rotate)
+- [@tsparticles/updater-size](https://github.com/matteobruni/tsparticles/tree/main/updaters/size)
+- [@tsparticles/updater-tilt](https://github.com/matteobruni/tsparticles/tree/main/updaters/tilt)
+- [@tsparticles/updater-wobble](https://github.com/matteobruni/tsparticles/tree/main/updaters/wobble)
+
+## How to use it
+
+### CDN / Vanilla JS / jQuery
+
+The CDN/Vanilla version JS has two different files:
+
+- One is a bundle file with all the scripts included in a single file
+- One is a file including just the `confetti` function to load the tsParticles confetti bunddle, all dependencies must be
+  included manually
+
+#### Bundle
+
+Including the `tsparticles.confetti.bundle.min.js` file will out of the box.
+
+This is the easiest usage, since it's a single file with all the features loaded.
+
+You can still add additional packages, loading them like all the other packages.
+
+#### Not Bundle
+
+This installation requires more work since all dependencies must be included in the page. Some lines above are all
+specified in the **Included Packages** section.
+
+### Usage
+
+Once the scripts are loaded you can set up `tsParticles` like the following examples:
+
+````javascript
+
+** Easiest Way **
+
+```javascript
+confetti()
+````
+
+** Async Way, best practice **
+
+```javascript
+(async () => {
+  await confetti();
+})();
+```
+
+** Confetti Options **
+
+```javascript
+confetti("tsparticles", {
+  /**
+   * @deprecated use count property instead
+   */
+  particleCount: 50,
+  /**
+   * @deprecated use position property instead
+   */
+  origin: {
+    x: 0.5,
+    y: 0.5,
+  },
+  //------------------------------------------
+  angle: 90,
+  count: 50,
+  position: {
+    x: 50,
+    y: 50,
+  },
+  spread: 45,
+  startVelocity: 45,
+  decay: 0.9,
+  gravity: 1,
+  drift: 0,
+  ticks: 200,
+  colors: ["#ffffff", "#ff0000"],
+  shapes: ["square", "circle"],
+  scalar: 1,
+  zIndex: 100,
+  disableForReducedMotion: true,
+});
+```
+
+#### Options
+
+The `confetti` first parameter can be an id and the second parameter a single `options` object, or just the single options object without the id, which will be `confetti` by default. The `options` object has the following properties:
+
+- `count` _Integer (default: 50)_: The number of confetti to launch. More is always fun... but be cool, there's a lot of
+  math involved. (`particleCount` can be used too, but it's deprecated)
+- `angle` _Number (default: 90)_: The angle in which to launch the confetti, in degrees: 90 is straight up.
+- `spread` _Number (default: 45)_: How far off center the confetti can go, in degrees. 45 means the confetti will launch
+  at the defined `angle` plus or minus 22.5 degrees.
+- `startVelocity` _Number (default: 45)_: How fast the confetti will start going, in pixels.
+- `decay` _Number (default: 0.9)_: How quickly the confetti will lose speed. Keep this number between 0 and 1, otherwise
+  the confetti will gain speed. Better yet, just never change it.
+- `gravity` _Number (default: 1)_: How quickly the particles are pulled down: 1 is full gravity, 0.5 is half gravity,
+  etc., but there are no limits. You can even make particles go up if you'd like.
+- `drift` _Number (default: 0)_: How much to the side the confetti will drift. The default is 0, meaning that they will
+  fall straight down. Use a negative number for left and positive number for right.
+- `ticks` _Number (default: 200)_: How many times the confetti will move. This is abstract... but play with it if the
+  confetti disappear too quickly for you.
+- `position` _Object_: Where to start firing confetti from. Feel free to launch off-screen if you'd like. (`origin` can
+  be used too, but it's deprecated)
+  - `position.x` _Number (default: 50)_: The `x` position on the page, with `0` being the left edge and `100` being the
+    right edge.
+  - `position.y` _Number (default: 50)_: The `y` position on the page, with `0` being the top edge and `100` being the
+    bottom edge.
+- `colors` _Array<String>_: An array of color strings, in the HEX format... you know, like `#bada55`.
+- `shapes` _Array<String>_: An array of shapes for the confetti. The possible values are:
+  - `circle`
+  - `square`
+  - `star`
+  - `polygon`
+  - `image`
+  - `heart`
+  - `hearts`
+  - `spades`
+  - `clubs`
+  - `diamonds`
+  - `text`
+    The default is to use both shapes in an even mix. You can even change the mix by providing a value such
+    as `['circle', 'circle', 'square']` to use two third circles and one third squares.
+- `scalar` _Number (default: 1)_: Scale factor for each confetti particle. Use decimals to make the confetti smaller. Go
+  on, try teeny tiny confetti, they are adorable!
+- `zIndex` _Integer (default: 100)_: The confetti should be on top, after all. But if you have a crazy high page, you
+  can set it even higher.
+- `disableForReducedMotion` _Boolean (default: true)_: Disables confetti entirely for users
+  that [prefer reduced motion](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion).
+
+And for those asking, yes you can paste your canvas-confetti code and migrate to tsParticles Confetti without changing a thing

package/browser/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/browser/IConfettiOptions.js

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

package/browser/bundle.js

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

package/browser/confetti.js

@@ -0,0 +1,300 @@
+import { isSsr, isString, tsParticles, } from "@tsparticles/engine";
+import { ConfettiOptions } from "./ConfettiOptions";
+import { loadBasic } from "@tsparticles/basic";
+import { loadCardsShape } from "@tsparticles/shape-cards";
+import { loadEmittersPlugin } from "@tsparticles/plugin-emitters";
+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 { loadTextShape } from "@tsparticles/shape-text";
+import { loadTiltUpdater } from "@tsparticles/updater-tilt";
+import { loadWobbleUpdater } from "@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 loadEmittersPlugin(engine, false);
+    await loadMotionPlugin(engine, false);
+    await loadCardsShape(engine, false);
+    await loadHeartShape(engine, false);
+    await loadImageShape(engine, false);
+    await loadPolygonShape(engine, false);
+    await loadSquareShape(engine, false);
+    await loadStarShape(engine, false);
+    await loadTextShape(engine, false);
+    await loadRotateUpdater(engine, false);
+    await loadLifeUpdater(engine, false);
+    await loadRollUpdater(engine, false);
+    await loadTiltUpdater(engine, false);
+    await loadWobbleUpdater(engine, false);
+    await loadBasic(engine);
+    initializing = false;
+    initialized = true;
+}
+async function setConfetti(params) {
+    const actualOptions = new 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 tsParticles.load({ id: params.id, element: params.canvas, options: particlesOptions });
+    ids.set(params.id, container);
+    return container;
+}
+export async function confetti(idOrOptions, confettiOptions) {
+    await initPlugins(tsParticles);
+    let options;
+    let id;
+    if (isString(idOrOptions)) {
+        id = idOrOptions;
+        options = confettiOptions ?? {};
+    }
+    else {
+        id = "confetti";
+        options = idOrOptions;
+    }
+    return setConfetti({
+        id,
+        options,
+    });
+}
+confetti.create = async (canvas, options) => {
+    if (!canvas) {
+        return confetti;
+    }
+    await initPlugins(tsParticles);
+    const id = canvas.getAttribute("id") || "confetti";
+    canvas.setAttribute("id", id);
+    return async (idOrOptions, confettiOptions) => {
+        let subOptions;
+        let subId;
+        if (isString(idOrOptions)) {
+            subId = idOrOptions;
+            subOptions = confettiOptions ?? options;
+        }
+        else {
+            subId = id;
+            subOptions = idOrOptions;
+        }
+        return setConfetti({
+            id: subId,
+            canvas,
+            options: subOptions,
+        });
+    };
+};
+confetti.version = tsParticles.version;
+if (!isSsr()) {
+    window.confetti = confetti;
+}

package/browser/index.js

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