@tsparticles/preset-fireworks 3.1.0 → 4.0.0-alpha.0

package/browser/index.js

@@ -1,23 +1,19 @@
-import { loadBasic } from "@tsparticles/basic";
-import { loadDestroyUpdater } from "@tsparticles/updater-destroy";
-import { loadEmittersPlugin } from "@tsparticles/plugin-emitters";
-import { loadEmittersShapeSquare } from "@tsparticles/plugin-emitters-shape-square";
-import { loadLifeUpdater } from "@tsparticles/updater-life";
-import { loadLineShape } from "@tsparticles/shape-line";
-import { loadRotateUpdater } from "@tsparticles/updater-rotate";
-import { loadSoundsPlugin } from "@tsparticles/plugin-sounds";
-import { loadStrokeColorUpdater } from "@tsparticles/updater-stroke-color";
-import { options } from "./options.js";
-export async function loadFireworksPreset(engine, refresh = true) {
-    await loadBasic(engine, false);
-    await loadEmittersPlugin(engine, false);
-    await loadEmittersShapeSquare(engine, false);
-    await loadSoundsPlugin(engine, false);
-    await loadLineShape(engine, false);
-    await loadRotateUpdater(engine, false);
-    await loadDestroyUpdater(engine, false);
-    await loadLifeUpdater(engine, false);
-    await loadStrokeColorUpdater(engine, false);
-    await engine.addPreset("fireworks", options, false);
-    await engine.refresh(refresh);
+export function loadFireworksPreset(engine) {
+    engine.register(async (e) => {
+        const { loadBasic } = await import("@tsparticles/basic"), { loadEmittersPlugin } = await import("@tsparticles/plugin-emitters"), { loadTrailEffect } = await import("@tsparticles/effect-trail"), { loadEmittersShapeSquare } = await import("@tsparticles/plugin-emitters-shape-square"), { loadHexColorPlugin } = await import("@tsparticles/plugin-hex-color"), { loadHslColorPlugin } = await import("@tsparticles/plugin-hsl-color"), { loadRgbColorPlugin } = await import("@tsparticles/plugin-rgb-color"), { loadSoundsPlugin } = await import("@tsparticles/plugin-sounds"), { loadLineShape } = await import("@tsparticles/shape-line"), { loadRotateUpdater } = await import("@tsparticles/updater-rotate"), { loadDestroyUpdater } = await import("@tsparticles/updater-destroy"), { loadLifeUpdater } = await import("@tsparticles/updater-life"), { loadStrokeColorUpdater } = await import("@tsparticles/updater-stroke-color"), { initOptions, presetName } = await import("./options.js");
+        loadBasic(e);
+        loadHexColorPlugin(e);
+        loadHslColorPlugin(e);
+        loadRgbColorPlugin(e);
+        loadEmittersPlugin(e);
+        loadTrailEffect(e);
+        loadEmittersShapeSquare(e);
+        loadSoundsPlugin(e);
+        loadLineShape(e);
+        loadRotateUpdater(e);
+        loadDestroyUpdater(e);
+        loadLifeUpdater(e);
+        loadStrokeColorUpdater(e);
+        e.addPreset(presetName, initOptions(), false);
+    });
 }

package/browser/options.js

@@ -1,211 +1,278 @@
-import { DestroyType, EventType, MoveDirection, OutMode, StartValueType, rgbToHsl, setRangeValue, stringToRgb, } from "@tsparticles/engine";
-const explodeSoundCheck = (args) => {
-    const data = args.data;
-    return data.particle.shape === "line";
-};
-const fixRange = (value, min, max) => {
-    const minValue = 0, diffSMax = value.max > max ? value.max - max : minValue;
-    let res = setRangeValue(value);
-    if (diffSMax) {
-        res = setRangeValue(value.min - diffSMax, max);
-    }
-    const diffSMin = value.min < min ? value.min : minValue;
-    if (diffSMin) {
-        res = setRangeValue(minValue, value.max + diffSMin);
-    }
-    return res;
-};
-const fireworksOptions = ["#ff595e", "#ffca3a", "#8ac926", "#1982c4", "#6a4c93"]
-    .map(color => {
-    const rgb = stringToRgb(color);
-    if (!rgb) {
-        return undefined;
-    }
-    const hsl = rgbToHsl(rgb), sOffset = 30, lOffset = 30, sBounds = {
-        min: 0,
-        max: 100,
-    }, lBounds = {
-        min: 0,
-        max: 100,
-    }, sRange = fixRange({ min: hsl.s - sOffset, max: hsl.s + sOffset }, sBounds.min, sBounds.max), lRange = fixRange({ min: hsl.l - lOffset, max: hsl.l + lOffset }, lBounds.min, lBounds.max);
-    return {
-        color: {
-            value: {
-                h: hsl.h,
-                s: sRange,
-                l: lRange,
-            },
-        },
-        stroke: {
-            width: 0,
-        },
-        number: {
-            value: 0,
-        },
-        opacity: {
-            value: {
-                min: 0.1,
-                max: 1,
+import { DestroyType, EventType, MoveDirection, OutMode, StartValueType, defaultAlpha, getLogger, none, rgbToHsl, setRangeValue, } from "@tsparticles/engine";
+export const presetName = "fireworks";
+export function initOptions() {
+    const explodeSoundCheck = (args) => {
+        const data = args.data;
+        return data.particle.options.move.gravity.inverse;
+    }, fixRange = (value, min, max) => {
+        const minValue = 0, diffSMax = value.max > max ? value.max - max : minValue;
+        let res = setRangeValue(value);
+        if (diffSMax) {
+            res = setRangeValue(value.min - diffSMax, max);
+        }
+        const diffSMin = value.min < min ? value.min : minValue;
+        if (diffSMin) {
+            res = setRangeValue(minValue, value.max + diffSMin);
+        }
+        return res;
+    }, hexToRgba = (hex) => {
+        let hexValue = hex;
+        const shortRegex = /^#?([a-f\d])([a-f\d])([a-f\d])([a-f\d])?$/i;
+        if (shortRegex.test(hexValue)) {
+            hexValue = hexValue.replace(shortRegex, (_m, r, g, b, a) => r + r + g + g + b + b + (a ? a + a : ""));
+        }
+        const regex = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})?$/i, result = regex.exec(hexValue);
+        if (!result) {
+            return undefined;
+        }
+        result.shift();
+        const indexes = {
+            a: 3,
+            b: 2,
+            g: 1,
+            r: 0,
+        }, values = {
+            a: result[indexes.a],
+            b: result[indexes.b],
+            g: result[indexes.g],
+            r: result[indexes.r],
+        }, hexRadix = 16;
+        return {
+            r: values.r ? Number.parseInt(values.r, hexRadix) : none,
+            g: values.g ? Number.parseInt(values.g, hexRadix) : none,
+            b: values.b ? Number.parseInt(values.b, hexRadix) : none,
+            a: values.a ? Number.parseInt(values.a, hexRadix) : defaultAlpha,
+        };
+    }, fireworksOptions = [
+        "#FF0000",
+        "#FF2A00",
+        "#FF5500",
+        "#FF8000",
+        "#FFAA00",
+        "#FFD400",
+        "#FFFF00",
+        "#D4FF00",
+        "#AAFF00",
+        "#80FF00",
+        "#55FF00",
+        "#2AFF00",
+        "#00FF00",
+        "#00FF2A",
+        "#00FF55",
+        "#00FF80",
+        "#00FFAA",
+        "#00FFD4",
+        "#00FFFF",
+        "#00D4FF",
+        "#00AAFF",
+        "#0080FF",
+        "#0055FF",
+        "#002AFF",
+        "#0000FF",
+        "#2A00FF",
+        "#5500FF",
+        "#8000FF",
+        "#AA00FF",
+        "#D400FF",
+        "#FF00FF",
+        "#FF00D4",
+        "#FF00AA",
+        "#FF0080",
+        "#FF0055",
+        "#FF002A",
+    ]
+        .map(color => {
+        const rgb = hexToRgba(color);
+        if (!rgb) {
+            getLogger().log("color not found", color);
+            return undefined;
+        }
+        const hsl = rgbToHsl(rgb), sOffset = 30, lOffset = 30, sBounds = {
+            min: 0,
+            max: 100,
+        }, lBounds = {
+            min: 0,
+            max: 100,
+        }, sRange = fixRange({ min: hsl.s - sOffset, max: hsl.s + sOffset }, sBounds.min, sBounds.max), lRange = fixRange({ min: hsl.l - lOffset, max: hsl.l + lOffset }, lBounds.min, lBounds.max);
+        getLogger().log(hsl.h, sRange, lRange);
+        return {
+            color: {
+                value: {
+                    h: hsl.h,
+                    s: sRange,
+                    l: lRange,
+                },
             },
-            animation: {
-                enable: true,
-                speed: 0.7,
-                sync: false,
-                startValue: StartValueType.max,
-                destroy: DestroyType.min,
+            stroke: {
+                width: 0,
             },
-        },
-        shape: {
-            type: "circle",
-        },
-        size: {
-            value: { min: 1, max: 2 },
-            animation: {
-                enable: true,
-                speed: 5,
-                count: 1,
-                sync: false,
-                startValue: StartValueType.min,
-                destroy: DestroyType.none,
+            number: {
+                value: 0,
             },
-        },
-        life: {
-            count: 1,
-            duration: {
+            opacity: {
                 value: {
-                    min: 1,
-                    max: 2,
+                    min: 0.1,
+                    max: 1,
+                },
+                animation: {
+                    enable: true,
+                    speed: 0.7,
+                    sync: false,
+                    startValue: StartValueType.max,
+                    destroy: DestroyType.min,
                 },
             },
-        },
-        move: {
-            decay: { min: 0.075, max: 0.1 },
-            enable: true,
-            gravity: {
-                enable: true,
-                inverse: false,
-                acceleration: 5,
+            shape: {
+                type: "circle",
             },
-            speed: { min: 5, max: 15 },
-            direction: "none",
-            outModes: OutMode.destroy,
-        },
-    };
-})
-    .filter(t => t !== undefined);
-export const options = {
-    detectRetina: true,
-    background: {
-        color: "#000",
-    },
-    fpsLimit: 120,
-    emitters: {
-        direction: MoveDirection.top,
-        life: {
-            count: 0,
-            duration: 0.1,
-            delay: 0.1,
-        },
-        rate: {
-            delay: 0.05,
-            quantity: 1,
-        },
-        size: {
-            width: 100,
-            height: 0,
-        },
-        position: {
-            y: 100,
-            x: 50,
-        },
-    },
-    particles: {
-        number: {
-            value: 0,
-        },
-        destroy: {
-            mode: "split",
-            bounds: {
-                top: { min: 10, max: 30 },
+            effect: {
+                type: "trail",
+                options: {
+                    trail: {
+                        length: {
+                            min: 5,
+                            max: 10,
+                        },
+                    },
+                },
+            },
+            size: {
+                value: { min: 1, max: 2 },
+                animation: {
+                    enable: true,
+                    speed: 5,
+                    count: 1,
+                    sync: false,
+                    startValue: StartValueType.min,
+                    destroy: DestroyType.none,
+                },
             },
-            split: {
-                sizeOffset: false,
+            life: {
                 count: 1,
-                factor: {
-                    value: 0.333333,
+                duration: {
+                    value: {
+                        min: 1,
+                        max: 2,
+                    },
                 },
-                rate: {
-                    value: { min: 75, max: 150 },
+            },
+            move: {
+                decay: { min: 0.075, max: 0.1 },
+                enable: true,
+                gravity: {
+                    enable: true,
+                    inverse: false,
+                    acceleration: 5,
                 },
-                particles: fireworksOptions,
+                speed: { min: 5, max: 15 },
+                direction: "none",
+                outModes: OutMode.destroy,
             },
+        };
+    })
+        .filter(t => t !== undefined);
+    return {
+        detectRetina: true,
+        background: {
+            color: "#000",
         },
-        life: {
-            count: 1,
-        },
-        shape: {
-            type: "line",
-        },
-        size: {
-            value: {
-                min: 0.1,
-                max: 50,
+        fpsLimit: 120,
+        emitters: {
+            direction: MoveDirection.top,
+            rate: {
+                delay: 0.3,
+                quantity: 1,
             },
-            animation: {
-                enable: true,
-                sync: true,
-                speed: 90,
-                startValue: StartValueType.max,
-                destroy: DestroyType.min,
+            size: {
+                width: 100,
+                height: 0,
             },
-        },
-        stroke: {
-            color: {
-                value: "#ffffff",
+            position: {
+                y: 100,
+                x: 50,
             },
-            width: 1,
         },
-        rotate: {
-            path: true,
-        },
-        move: {
-            enable: true,
-            gravity: {
-                acceleration: 15,
-                enable: true,
-                inverse: true,
-                maxSpeed: 100,
+        particles: {
+            number: {
+                value: 0,
             },
-            speed: {
-                min: 10,
-                max: 20,
+            destroy: {
+                mode: "split",
+                bounds: {
+                    top: { min: 15, max: 35 },
+                },
+                split: {
+                    sizeOffset: false,
+                    count: 1,
+                    factor: {
+                        value: 0.333333,
+                    },
+                    rate: {
+                        value: { min: 75, max: 150 },
+                    },
+                    particles: fireworksOptions,
+                },
             },
-            outModes: {
-                default: OutMode.destroy,
-                top: OutMode.none,
+            life: {
+                count: 1,
+            },
+            shape: {
+                type: "circle",
             },
-            trail: {
-                fill: {
-                    color: "#000",
+            effect: {
+                type: "trail",
+                options: {
+                    trail: {
+                        length: {
+                            min: 5,
+                            max: 15,
+                        },
+                        minWidth: 1,
+                        maxWidth: 1,
+                    },
                 },
+            },
+            size: {
+                value: 1,
+            },
+            stroke: {
+                color: {
+                    value: "#ffffff",
+                },
+                width: 1,
+            },
+            move: {
                 enable: true,
-                length: 10,
+                gravity: {
+                    acceleration: 15,
+                    enable: true,
+                    inverse: true,
+                    maxSpeed: 100,
+                },
+                speed: {
+                    min: 10,
+                    max: 20,
+                },
+                outModes: {
+                    default: OutMode.destroy,
+                    top: OutMode.none,
+                },
             },
         },
-    },
-    sounds: {
-        enable: true,
-        events: [
-            {
-                event: EventType.particleRemoved,
-                filter: explodeSoundCheck,
-                audio: [
-                    "https://particles.js.org/audio/explosion0.mp3",
-                    "https://particles.js.org/audio/explosion1.mp3",
-                    "https://particles.js.org/audio/explosion2.mp3",
-                ],
-            },
-        ],
-        volume: 50,
-    },
-};
+        sounds: {
+            enable: true,
+            events: [
+                {
+                    event: EventType.particleRemoved,
+                    filter: explodeSoundCheck,
+                    audio: [
+                        "https://particles.js.org/audio/explosion0.mp3",
+                        "https://particles.js.org/audio/explosion1.mp3",
+                        "https://particles.js.org/audio/explosion2.mp3",
+                    ],
+                },
+            ],
+            volume: 50,
+        },
+    };
+}

package/cjs/bundle.js

@@ -1,7 +1,2 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.tsParticles = exports.loadFireworksPreset = void 0;
-const index_js_1 = require("./index.js");
-Object.defineProperty(exports, "loadFireworksPreset", { enumerable: true, get: function () { return index_js_1.loadFireworksPreset; } });
-const engine_1 = require("@tsparticles/engine");
-Object.defineProperty(exports, "tsParticles", { enumerable: true, get: function () { return engine_1.tsParticles; } });
+export { loadFireworksPreset } from "./index.js";
+export { tsParticles } from "@tsparticles/engine";

package/cjs/index.js

@@ -1,27 +1,19 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.loadFireworksPreset = void 0;
-const basic_1 = require("@tsparticles/basic");
-const updater_destroy_1 = require("@tsparticles/updater-destroy");
-const plugin_emitters_1 = require("@tsparticles/plugin-emitters");
-const plugin_emitters_shape_square_1 = require("@tsparticles/plugin-emitters-shape-square");
-const updater_life_1 = require("@tsparticles/updater-life");
-const shape_line_1 = require("@tsparticles/shape-line");
-const updater_rotate_1 = require("@tsparticles/updater-rotate");
-const plugin_sounds_1 = require("@tsparticles/plugin-sounds");
-const updater_stroke_color_1 = require("@tsparticles/updater-stroke-color");
-const options_js_1 = require("./options.js");
-async function loadFireworksPreset(engine, refresh = true) {
-    await (0, basic_1.loadBasic)(engine, false);
-    await (0, plugin_emitters_1.loadEmittersPlugin)(engine, false);
-    await (0, plugin_emitters_shape_square_1.loadEmittersShapeSquare)(engine, false);
-    await (0, plugin_sounds_1.loadSoundsPlugin)(engine, false);
-    await (0, shape_line_1.loadLineShape)(engine, false);
-    await (0, updater_rotate_1.loadRotateUpdater)(engine, false);
-    await (0, updater_destroy_1.loadDestroyUpdater)(engine, false);
-    await (0, updater_life_1.loadLifeUpdater)(engine, false);
-    await (0, updater_stroke_color_1.loadStrokeColorUpdater)(engine, false);
-    await engine.addPreset("fireworks", options_js_1.options, false);
-    await engine.refresh(refresh);
+export function loadFireworksPreset(engine) {
+    engine.register(async (e) => {
+        const { loadBasic } = await import("@tsparticles/basic"), { loadEmittersPlugin } = await import("@tsparticles/plugin-emitters"), { loadTrailEffect } = await import("@tsparticles/effect-trail"), { loadEmittersShapeSquare } = await import("@tsparticles/plugin-emitters-shape-square"), { loadHexColorPlugin } = await import("@tsparticles/plugin-hex-color"), { loadHslColorPlugin } = await import("@tsparticles/plugin-hsl-color"), { loadRgbColorPlugin } = await import("@tsparticles/plugin-rgb-color"), { loadSoundsPlugin } = await import("@tsparticles/plugin-sounds"), { loadLineShape } = await import("@tsparticles/shape-line"), { loadRotateUpdater } = await import("@tsparticles/updater-rotate"), { loadDestroyUpdater } = await import("@tsparticles/updater-destroy"), { loadLifeUpdater } = await import("@tsparticles/updater-life"), { loadStrokeColorUpdater } = await import("@tsparticles/updater-stroke-color"), { initOptions, presetName } = await import("./options.js");
+        loadBasic(e);
+        loadHexColorPlugin(e);
+        loadHslColorPlugin(e);
+        loadRgbColorPlugin(e);
+        loadEmittersPlugin(e);
+        loadTrailEffect(e);
+        loadEmittersShapeSquare(e);
+        loadSoundsPlugin(e);
+        loadLineShape(e);
+        loadRotateUpdater(e);
+        loadDestroyUpdater(e);
+        loadLifeUpdater(e);
+        loadStrokeColorUpdater(e);
+        e.addPreset(presetName, initOptions(), false);
+    });
 }
-exports.loadFireworksPreset = loadFireworksPreset;