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

package/umd/bundle.js

@@ -10,8 +10,8 @@
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.tsParticles = exports.loadFireworksPreset = void 0;
-    const index_js_1 = require("./index.js");
+    var 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");
+    var engine_1 = require("@tsparticles/engine");
     Object.defineProperty(exports, "tsParticles", { enumerable: true, get: function () { return engine_1.tsParticles; } });
 });

package/umd/index.js

@@ -1,37 +1,66 @@
+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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 (function (factory) {
     if (typeof module === "object" && typeof module.exports === "object") {
         var v = factory(require, exports);
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "@tsparticles/basic", "@tsparticles/updater-destroy", "@tsparticles/plugin-emitters", "@tsparticles/plugin-emitters-shape-square", "@tsparticles/updater-life", "@tsparticles/shape-line", "@tsparticles/updater-rotate", "@tsparticles/plugin-sounds", "@tsparticles/updater-stroke-color", "./options.js"], factory);
+        define(["require", "exports"], factory);
     }
 })(function (require, exports) {
     "use strict";
+    var __syncRequire = typeof module === "object" && typeof module.exports === "object";
     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);
-    }
     exports.loadFireworksPreset = loadFireworksPreset;
+    function loadFireworksPreset(engine) {
+        engine.register(async (e) => {
+            const { loadBasic } = await (__syncRequire ? Promise.resolve().then(() => __importStar(require("@tsparticles/basic"))) : new Promise((resolve_1, reject_1) => { require(["@tsparticles/basic"], resolve_1, reject_1); }).then(__importStar)), { loadEmittersPlugin } = await (__syncRequire ? Promise.resolve().then(() => __importStar(require("@tsparticles/plugin-emitters"))) : new Promise((resolve_2, reject_2) => { require(["@tsparticles/plugin-emitters"], resolve_2, reject_2); }).then(__importStar)), { loadTrailEffect } = await (__syncRequire ? Promise.resolve().then(() => __importStar(require("@tsparticles/effect-trail"))) : new Promise((resolve_3, reject_3) => { require(["@tsparticles/effect-trail"], resolve_3, reject_3); }).then(__importStar)), { loadEmittersShapeSquare } = await (__syncRequire ? Promise.resolve().then(() => __importStar(require("@tsparticles/plugin-emitters-shape-square"))) : new Promise((resolve_4, reject_4) => { require(["@tsparticles/plugin-emitters-shape-square"], resolve_4, reject_4); }).then(__importStar)), { loadHexColorPlugin } = await (__syncRequire ? Promise.resolve().then(() => __importStar(require("@tsparticles/plugin-hex-color"))) : new Promise((resolve_5, reject_5) => { require(["@tsparticles/plugin-hex-color"], resolve_5, reject_5); }).then(__importStar)), { loadHslColorPlugin } = await (__syncRequire ? Promise.resolve().then(() => __importStar(require("@tsparticles/plugin-hsl-color"))) : new Promise((resolve_6, reject_6) => { require(["@tsparticles/plugin-hsl-color"], resolve_6, reject_6); }).then(__importStar)), { loadRgbColorPlugin } = await (__syncRequire ? Promise.resolve().then(() => __importStar(require("@tsparticles/plugin-rgb-color"))) : new Promise((resolve_7, reject_7) => { require(["@tsparticles/plugin-rgb-color"], resolve_7, reject_7); }).then(__importStar)), { loadSoundsPlugin } = await (__syncRequire ? Promise.resolve().then(() => __importStar(require("@tsparticles/plugin-sounds"))) : new Promise((resolve_8, reject_8) => { require(["@tsparticles/plugin-sounds"], resolve_8, reject_8); }).then(__importStar)), { loadLineShape } = await (__syncRequire ? Promise.resolve().then(() => __importStar(require("@tsparticles/shape-line"))) : new Promise((resolve_9, reject_9) => { require(["@tsparticles/shape-line"], resolve_9, reject_9); }).then(__importStar)), { loadRotateUpdater } = await (__syncRequire ? Promise.resolve().then(() => __importStar(require("@tsparticles/updater-rotate"))) : new Promise((resolve_10, reject_10) => { require(["@tsparticles/updater-rotate"], resolve_10, reject_10); }).then(__importStar)), { loadDestroyUpdater } = await (__syncRequire ? Promise.resolve().then(() => __importStar(require("@tsparticles/updater-destroy"))) : new Promise((resolve_11, reject_11) => { require(["@tsparticles/updater-destroy"], resolve_11, reject_11); }).then(__importStar)), { loadLifeUpdater } = await (__syncRequire ? Promise.resolve().then(() => __importStar(require("@tsparticles/updater-life"))) : new Promise((resolve_12, reject_12) => { require(["@tsparticles/updater-life"], resolve_12, reject_12); }).then(__importStar)), { loadStrokeColorUpdater } = await (__syncRequire ? Promise.resolve().then(() => __importStar(require("@tsparticles/updater-stroke-color"))) : new Promise((resolve_13, reject_13) => { require(["@tsparticles/updater-stroke-color"], resolve_13, reject_13); }).then(__importStar)), { initOptions, presetName } = await (__syncRequire ? Promise.resolve().then(() => __importStar(require("./options.js"))) : new Promise((resolve_14, reject_14) => { require(["./options.js"], resolve_14, reject_14); }).then(__importStar));
+            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/umd/options.js

@@ -9,216 +9,284 @@
 })(function (require, exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
-    exports.options = void 0;
+    exports.presetName = void 0;
+    exports.initOptions = initOptions;
     const engine_1 = require("@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 = (0, engine_1.setRangeValue)(value);
-        if (diffSMax) {
-            res = (0, engine_1.setRangeValue)(value.min - diffSMax, max);
-        }
-        const diffSMin = value.min < min ? value.min : minValue;
-        if (diffSMin) {
-            res = (0, engine_1.setRangeValue)(minValue, value.max + diffSMin);
-        }
-        return res;
-    };
-    const fireworksOptions = ["#ff595e", "#ffca3a", "#8ac926", "#1982c4", "#6a4c93"]
-        .map(color => {
-        const rgb = (0, engine_1.stringToRgb)(color);
-        if (!rgb) {
-            return undefined;
-        }
-        const hsl = (0, engine_1.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,
+    exports.presetName = "fireworks";
+    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 = (0, engine_1.setRangeValue)(value);
+            if (diffSMax) {
+                res = (0, engine_1.setRangeValue)(value.min - diffSMax, max);
+            }
+            const diffSMin = value.min < min ? value.min : minValue;
+            if (diffSMin) {
+                res = (0, engine_1.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) : engine_1.none,
+                g: values.g ? Number.parseInt(values.g, hexRadix) : engine_1.none,
+                b: values.b ? Number.parseInt(values.b, hexRadix) : engine_1.none,
+                a: values.a ? Number.parseInt(values.a, hexRadix) : engine_1.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) {
+                (0, engine_1.getLogger)().log("color not found", color);
+                return undefined;
+            }
+            const hsl = (0, engine_1.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);
+            (0, engine_1.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: engine_1.StartValueType.max,
-                    destroy: engine_1.DestroyType.min,
+                stroke: {
+                    width: 0,
                 },
-            },
-            shape: {
-                type: "circle",
-            },
-            size: {
-                value: { min: 1, max: 2 },
-                animation: {
-                    enable: true,
-                    speed: 5,
-                    count: 1,
-                    sync: false,
-                    startValue: engine_1.StartValueType.min,
-                    destroy: engine_1.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: engine_1.StartValueType.max,
+                        destroy: engine_1.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: engine_1.OutMode.destroy,
-            },
-        };
-    })
-        .filter(t => t !== undefined);
-    exports.options = {
-        detectRetina: true,
-        background: {
-            color: "#000",
-        },
-        fpsLimit: 120,
-        emitters: {
-            direction: engine_1.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: engine_1.StartValueType.min,
+                        destroy: engine_1.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: engine_1.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: engine_1.MoveDirection.top,
+                rate: {
+                    delay: 0.3,
+                    quantity: 1,
                 },
-                animation: {
-                    enable: true,
-                    sync: true,
-                    speed: 90,
-                    startValue: engine_1.StartValueType.max,
-                    destroy: engine_1.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: engine_1.OutMode.destroy,
-                    top: engine_1.OutMode.none,
+                life: {
+                    count: 1,
                 },
-                trail: {
-                    fill: {
-                        color: "#000",
+                shape: {
+                    type: "circle",
+                },
+                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: engine_1.OutMode.destroy,
+                        top: engine_1.OutMode.none,
+                    },
                 },
             },
-        },
-        sounds: {
-            enable: true,
-            events: [
-                {
-                    event: engine_1.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: engine_1.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,
+            },
+        };
+    }
 });