@tsparticles/engine 4.0.0-beta.0 → 4.0.0-beta.1

package/umd/Core/RenderManager.js

@@ -0,0 +1,317 @@
+(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", "../Utils/CanvasUtils.js", "./Utils/Constants.js", "../Utils/ColorUtils.js"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.RenderManager = void 0;
+    const CanvasUtils_js_1 = require("../Utils/CanvasUtils.js");
+    const Constants_js_1 = require("./Utils/Constants.js");
+    const ColorUtils_js_1 = require("../Utils/ColorUtils.js");
+    const fColorIndex = 0, sColorIndex = 1;
+    function setTransformValue(factor, newFactor, key) {
+        const newValue = newFactor[key];
+        if (newValue !== undefined) {
+            factor[key] = (factor[key] ?? Constants_js_1.defaultTransformValue) * newValue;
+        }
+    }
+    class RenderManager {
+        _canvasClearPlugins;
+        _canvasManager;
+        _canvasPaintPlugins;
+        _clearDrawPlugins;
+        _colorPlugins;
+        _container;
+        _context;
+        _contextSettings;
+        _drawParticlePlugins;
+        _drawParticlesCleanupPlugins;
+        _drawParticlesSetupPlugins;
+        _drawPlugins;
+        _drawSettingsCleanupPlugins;
+        _drawSettingsSetupPlugins;
+        _pluginManager;
+        _postDrawUpdaters;
+        _preDrawUpdaters;
+        _reusableColorStyles = {};
+        _reusablePluginColors = [undefined, undefined];
+        _reusableTransform = {};
+        constructor(pluginManager, container, canvasManager) {
+            this._pluginManager = pluginManager;
+            this._container = container;
+            this._canvasManager = canvasManager;
+            this._context = null;
+            this._preDrawUpdaters = [];
+            this._postDrawUpdaters = [];
+            this._colorPlugins = [];
+            this._canvasClearPlugins = [];
+            this._canvasPaintPlugins = [];
+            this._clearDrawPlugins = [];
+            this._drawParticlePlugins = [];
+            this._drawParticlesCleanupPlugins = [];
+            this._drawParticlesSetupPlugins = [];
+            this._drawPlugins = [];
+            this._drawSettingsSetupPlugins = [];
+            this._drawSettingsCleanupPlugins = [];
+        }
+        get settings() {
+            return this._contextSettings;
+        }
+        canvasClear() {
+            if (!this._container.actualOptions.clear) {
+                return;
+            }
+            this.draw(ctx => {
+                (0, CanvasUtils_js_1.clear)(ctx, this._canvasManager.size);
+            });
+        }
+        clear() {
+            let pluginHandled = false;
+            for (const plugin of this._canvasClearPlugins) {
+                pluginHandled = plugin.canvasClear?.() ?? false;
+                if (pluginHandled) {
+                    break;
+                }
+            }
+            if (pluginHandled) {
+                return;
+            }
+            this.canvasClear();
+        }
+        destroy() {
+            this.stop();
+            this._preDrawUpdaters = [];
+            this._postDrawUpdaters = [];
+            this._colorPlugins = [];
+            this._canvasClearPlugins = [];
+            this._canvasPaintPlugins = [];
+            this._clearDrawPlugins = [];
+            this._drawParticlePlugins = [];
+            this._drawParticlesCleanupPlugins = [];
+            this._drawParticlesSetupPlugins = [];
+            this._drawPlugins = [];
+            this._drawSettingsSetupPlugins = [];
+            this._drawSettingsCleanupPlugins = [];
+        }
+        draw(cb) {
+            const ctx = this._context;
+            if (!ctx) {
+                return;
+            }
+            return cb(ctx);
+        }
+        drawParticle(particle, delta) {
+            if (particle.spawning || particle.destroyed) {
+                return;
+            }
+            const radius = particle.getRadius();
+            if (radius <= Constants_js_1.minimumSize) {
+                return;
+            }
+            const pfColor = particle.getFillColor(), psColor = particle.getStrokeColor();
+            let [fColor, sColor] = this._getPluginParticleColors(particle);
+            fColor ??= pfColor;
+            sColor ??= psColor;
+            if (!fColor && !sColor) {
+                return;
+            }
+            const container = this._container, zIndexOptions = particle.options.zIndex, zIndexFactor = Constants_js_1.zIndexFactorOffset - particle.zIndexFactor, { fillOpacity, opacity, strokeOpacity } = particle.getOpacity(), transform = this._reusableTransform, colorStyles = this._reusableColorStyles, fill = fColor ? (0, ColorUtils_js_1.getStyleFromHsl)(fColor, container.hdr, fillOpacity * opacity) : undefined, stroke = sColor ? (0, ColorUtils_js_1.getStyleFromHsl)(sColor, container.hdr, strokeOpacity * opacity) : fill;
+            transform.a = transform.b = transform.c = transform.d = undefined;
+            colorStyles.fill = fill;
+            colorStyles.stroke = stroke;
+            this.draw((context) => {
+                for (const plugin of this._drawParticlesSetupPlugins) {
+                    plugin.drawParticleSetup?.(context, particle, delta);
+                }
+                this._applyPreDrawUpdaters(context, particle, radius, opacity, colorStyles, transform);
+                (0, CanvasUtils_js_1.drawParticle)({
+                    container,
+                    context,
+                    particle,
+                    delta,
+                    colorStyles,
+                    radius: radius * zIndexFactor ** zIndexOptions.sizeRate,
+                    opacity: opacity,
+                    transform,
+                });
+                this._applyPostDrawUpdaters(particle);
+                for (const plugin of this._drawParticlesCleanupPlugins) {
+                    plugin.drawParticleCleanup?.(context, particle, delta);
+                }
+            });
+        }
+        drawParticlePlugins(particle, delta) {
+            this.draw(ctx => {
+                for (const plugin of this._drawParticlePlugins) {
+                    (0, CanvasUtils_js_1.drawParticlePlugin)(ctx, plugin, particle, delta);
+                }
+            });
+        }
+        drawParticles(delta) {
+            const { particles } = this._container;
+            this.clear();
+            particles.update(delta);
+            this.draw(ctx => {
+                for (const plugin of this._drawSettingsSetupPlugins) {
+                    plugin.drawSettingsSetup?.(ctx, delta);
+                }
+                for (const plugin of this._drawPlugins) {
+                    plugin.draw?.(ctx, delta);
+                }
+                particles.drawParticles(delta);
+                for (const plugin of this._clearDrawPlugins) {
+                    plugin.clearDraw?.(ctx, delta);
+                }
+                for (const plugin of this._drawSettingsCleanupPlugins) {
+                    plugin.drawSettingsCleanup?.(ctx, delta);
+                }
+            });
+        }
+        init() {
+            this.initUpdaters();
+            this.initPlugins();
+            this.paint();
+        }
+        initPlugins() {
+            this._colorPlugins = [];
+            this._canvasClearPlugins = [];
+            this._canvasPaintPlugins = [];
+            this._clearDrawPlugins = [];
+            this._drawParticlePlugins = [];
+            this._drawParticlesSetupPlugins = [];
+            this._drawParticlesCleanupPlugins = [];
+            this._drawPlugins = [];
+            this._drawSettingsSetupPlugins = [];
+            this._drawSettingsCleanupPlugins = [];
+            for (const plugin of this._container.plugins) {
+                if (plugin.particleFillColor ?? plugin.particleStrokeColor) {
+                    this._colorPlugins.push(plugin);
+                }
+                if (plugin.canvasClear) {
+                    this._canvasClearPlugins.push(plugin);
+                }
+                if (plugin.canvasPaint) {
+                    this._canvasPaintPlugins.push(plugin);
+                }
+                if (plugin.drawParticle) {
+                    this._drawParticlePlugins.push(plugin);
+                }
+                if (plugin.drawParticleSetup) {
+                    this._drawParticlesSetupPlugins.push(plugin);
+                }
+                if (plugin.drawParticleCleanup) {
+                    this._drawParticlesCleanupPlugins.push(plugin);
+                }
+                if (plugin.draw) {
+                    this._drawPlugins.push(plugin);
+                }
+                if (plugin.drawSettingsSetup) {
+                    this._drawSettingsSetupPlugins.push(plugin);
+                }
+                if (plugin.drawSettingsCleanup) {
+                    this._drawSettingsCleanupPlugins.push(plugin);
+                }
+                if (plugin.clearDraw) {
+                    this._clearDrawPlugins.push(plugin);
+                }
+            }
+        }
+        initUpdaters() {
+            this._preDrawUpdaters = [];
+            this._postDrawUpdaters = [];
+            for (const updater of this._container.particleUpdaters) {
+                if (updater.afterDraw) {
+                    this._postDrawUpdaters.push(updater);
+                }
+                if (updater.getColorStyles ?? updater.getTransformValues ?? updater.beforeDraw) {
+                    this._preDrawUpdaters.push(updater);
+                }
+            }
+        }
+        paint() {
+            let handled = false;
+            for (const plugin of this._canvasPaintPlugins) {
+                handled = plugin.canvasPaint?.() ?? false;
+                if (handled) {
+                    break;
+                }
+            }
+            if (handled) {
+                return;
+            }
+            this.paintBase();
+        }
+        paintBase(baseColor) {
+            this.draw(ctx => {
+                (0, CanvasUtils_js_1.paintBase)(ctx, this._canvasManager.size, baseColor);
+            });
+        }
+        paintImage(image, opacity) {
+            this.draw(ctx => {
+                (0, CanvasUtils_js_1.paintImage)(ctx, this._canvasManager.size, image, opacity);
+            });
+        }
+        setContext(context) {
+            this._context = context;
+            if (this._context) {
+                this._context.globalCompositeOperation = Constants_js_1.defaultCompositeValue;
+            }
+        }
+        setContextSettings(settings) {
+            this._contextSettings = settings;
+        }
+        stop() {
+            this.draw(ctx => {
+                (0, CanvasUtils_js_1.clear)(ctx, this._canvasManager.size);
+            });
+        }
+        _applyPostDrawUpdaters = particle => {
+            for (const updater of this._postDrawUpdaters) {
+                updater.afterDraw?.(particle);
+            }
+        };
+        _applyPreDrawUpdaters = (ctx, particle, radius, zOpacity, colorStyles, transform) => {
+            for (const updater of this._preDrawUpdaters) {
+                if (updater.getColorStyles) {
+                    const { fill, stroke } = updater.getColorStyles(particle, ctx, radius, zOpacity);
+                    if (fill) {
+                        colorStyles.fill = fill;
+                    }
+                    if (stroke) {
+                        colorStyles.stroke = stroke;
+                    }
+                }
+                if (updater.getTransformValues) {
+                    const updaterTransform = updater.getTransformValues(particle);
+                    for (const key in updaterTransform) {
+                        setTransformValue(transform, updaterTransform, key);
+                    }
+                }
+                updater.beforeDraw?.(particle);
+            }
+        };
+        _getPluginParticleColors = particle => {
+            let fColor, sColor;
+            for (const plugin of this._colorPlugins) {
+                if (!fColor && plugin.particleFillColor) {
+                    fColor = (0, ColorUtils_js_1.rangeColorToHsl)(this._pluginManager, plugin.particleFillColor(particle));
+                }
+                if (!sColor && plugin.particleStrokeColor) {
+                    sColor = (0, ColorUtils_js_1.rangeColorToHsl)(this._pluginManager, plugin.particleStrokeColor(particle));
+                }
+                if (fColor && sColor) {
+                    break;
+                }
+            }
+            this._reusablePluginColors[fColorIndex] = fColor;
+            this._reusablePluginColors[sColorIndex] = sColor;
+            return this._reusablePluginColors;
+        };
+    }
+    exports.RenderManager = RenderManager;
+});

package/umd/Core/Retina.js

@@ -14,10 +14,8 @@
     const MathUtils_js_1 = require("../Utils/MathUtils.js");
     class Retina {
         container;
-        maxSpeed;
         pixelRatio;
         reduceFactor;
-        sizeAnimationSpeed;
         constructor(container) {
             this.container = container;
             this.pixelRatio = Constants_js_1.defaultRatio;
@@ -33,19 +31,16 @@
                 canvas.size.width = element.offsetWidth * ratio;
                 canvas.size.height = element.offsetHeight * ratio;
             }
-            const particles = options.particles, moveOptions = particles.move;
-            this.maxSpeed = (0, MathUtils_js_1.getRangeValue)(moveOptions.gravity.maxSpeed) * ratio;
-            this.sizeAnimationSpeed = (0, MathUtils_js_1.getRangeValue)(particles.size.animation.speed) * ratio;
         }
         initParticle(particle) {
             const options = particle.options, ratio = this.pixelRatio, moveOptions = options.move, moveDistance = moveOptions.distance, props = particle.retina;
+            props.maxSpeed = (0, MathUtils_js_1.getRangeValue)(moveOptions.gravity.maxSpeed) * ratio;
             props.moveDrift = (0, MathUtils_js_1.getRangeValue)(moveOptions.drift) * ratio;
             props.moveSpeed = (0, MathUtils_js_1.getRangeValue)(moveOptions.speed) * ratio;
             props.sizeAnimationSpeed = (0, MathUtils_js_1.getRangeValue)(options.size.animation.speed) * ratio;
             const maxDistance = props.maxDistance;
-            maxDistance.horizontal = moveDistance.horizontal !== undefined ? moveDistance.horizontal * ratio : undefined;
-            maxDistance.vertical = moveDistance.vertical !== undefined ? moveDistance.vertical * ratio : undefined;
-            props.maxSpeed = (0, MathUtils_js_1.getRangeValue)(moveOptions.gravity.maxSpeed) * ratio;
+            maxDistance.horizontal = moveDistance.horizontal === undefined ? undefined : moveDistance.horizontal * ratio;
+            maxDistance.vertical = moveDistance.vertical === undefined ? undefined : moveDistance.vertical * ratio;
         }
     }
     exports.Retina = Retina;

package/umd/Core/Utils/PluginManager.js

@@ -0,0 +1,159 @@
+(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", "../../Utils/Utils.js", "../../Enums/Types/EventType.js"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.PluginManager = void 0;
+    const Utils_js_1 = require("../../Utils/Utils.js");
+    const EventType_js_1 = require("../../Enums/Types/EventType.js");
+    class PluginManager {
+        colorManagers = new Map();
+        easingFunctions = new Map();
+        effectDrawers = new Map();
+        initializers = {
+            effects: new Map(),
+            shapes: new Map(),
+            updaters: new Map(),
+        };
+        palettes = new Map();
+        plugins = [];
+        presets = new Map();
+        shapeDrawers = new Map();
+        updaters = new Map();
+        _allLoadersSet = new Set();
+        _configs = new Map();
+        _engine;
+        _executedSet = new Set();
+        _initialized = false;
+        _isRunningLoaders = false;
+        _loadPromises = new Set();
+        constructor(engine) {
+            this._engine = engine;
+        }
+        get configs() {
+            const res = {};
+            for (const [name, config] of this._configs) {
+                res[name] = config;
+            }
+            return res;
+        }
+        addColorManager(name, manager) {
+            this.colorManagers.set(name, manager);
+        }
+        addConfig(config) {
+            const key = config.key ?? config.name ?? "default";
+            this._configs.set(key, config);
+            this._engine.dispatchEvent(EventType_js_1.EventType.configAdded, { data: { name: key, config } });
+        }
+        addEasing(name, easing) {
+            if (this.easingFunctions.get(name)) {
+                return;
+            }
+            this.easingFunctions.set(name, easing);
+        }
+        addEffect(effect, drawer) {
+            this.initializers.effects.set(effect, drawer);
+        }
+        addPalette(name, palette) {
+            this.palettes.set(name, palette);
+        }
+        addParticleUpdater(name, updaterInitializer) {
+            this.initializers.updaters.set(name, updaterInitializer);
+        }
+        addPlugin(plugin) {
+            if (this.getPlugin(plugin.id)) {
+                return;
+            }
+            this.plugins.push(plugin);
+        }
+        addPreset(preset, options, override = false) {
+            if (!(override || !this.getPreset(preset))) {
+                return;
+            }
+            this.presets.set(preset, options);
+        }
+        addShape(shapes, drawer) {
+            for (const shape of shapes) {
+                this.initializers.shapes.set(shape, drawer);
+            }
+        }
+        clearPlugins(container) {
+            this.effectDrawers.delete(container);
+            this.shapeDrawers.delete(container);
+            this.updaters.delete(container);
+        }
+        getEasing(name) {
+            return this.easingFunctions.get(name) ?? ((value) => value);
+        }
+        getEffectDrawers(container, force = false) {
+            return (0, Utils_js_1.getItemMapFromInitializer)(container, this.effectDrawers, this.initializers.effects, force);
+        }
+        getPalette(name) {
+            return this.palettes.get(name);
+        }
+        getPlugin(plugin) {
+            return this.plugins.find(t => t.id === plugin);
+        }
+        getPreset(preset) {
+            return this.presets.get(preset);
+        }
+        async getShapeDrawers(container, force = false) {
+            return (0, Utils_js_1.getItemMapFromInitializer)(container, this.shapeDrawers, this.initializers.shapes, force);
+        }
+        async getUpdaters(container, force = false) {
+            return (0, Utils_js_1.getItemsFromInitializer)(container, this.updaters, this.initializers.updaters, force);
+        }
+        async init() {
+            if (this._initialized || this._isRunningLoaders) {
+                return;
+            }
+            this._isRunningLoaders = true;
+            this._executedSet = new Set();
+            this._allLoadersSet = new Set(this._loadPromises);
+            try {
+                for (const loader of this._allLoadersSet) {
+                    await this._runLoader(loader, this._executedSet, this._allLoadersSet);
+                }
+            }
+            finally {
+                this._loadPromises.clear();
+                this._isRunningLoaders = false;
+                this._initialized = true;
+            }
+        }
+        loadParticlesOptions(container, options, ...sourceOptions) {
+            const updaters = this.updaters.get(container);
+            if (!updaters) {
+                return;
+            }
+            updaters.forEach(updater => updater.loadOptions?.(options, ...sourceOptions));
+        }
+        async register(...loaders) {
+            if (this._initialized) {
+                throw new Error("Register plugins can only be done before calling tsParticles.load()");
+            }
+            for (const loader of loaders) {
+                if (this._isRunningLoaders) {
+                    await this._runLoader(loader, this._executedSet, this._allLoadersSet);
+                }
+                else {
+                    this._loadPromises.add(loader);
+                }
+            }
+        }
+        async _runLoader(loader, executed, allLoaders) {
+            if (executed.has(loader))
+                return;
+            executed.add(loader);
+            allLoaders.add(loader);
+            await loader(this._engine);
+        }
+    }
+    exports.PluginManager = PluginManager;
+});

package/umd/Options/Classes/Options.js

@@ -40,9 +40,9 @@
         style;
         zLayers;
         _container;
-        _engine;
-        constructor(engine, container) {
-            this._engine = engine;
+        _pluginManager;
+        constructor(pluginManager, container) {
+            this._pluginManager = pluginManager;
             this._container = container;
             this.autoPlay = true;
             this.background = new Background_js_1.Background();
@@ -54,7 +54,7 @@
             this.duration = 0;
             this.fpsLimit = 120;
             this.hdr = true;
-            this.particles = (0, OptionsUtils_js_1.loadParticlesOptions)(this._engine, this._container);
+            this.particles = (0, OptionsUtils_js_1.loadParticlesOptions)(this._pluginManager, this._container);
             this.pauseOnBlur = true;
             this.pauseOnOutsideViewport = true;
             this.resize = new ResizeEvent_js_1.ResizeEvent();
@@ -128,12 +128,12 @@
             if (data.smooth !== undefined) {
                 this.smooth = data.smooth;
             }
-            this._engine.plugins.forEach(plugin => {
+            this._pluginManager.plugins.forEach(plugin => {
                 plugin.loadOptions(this._container, this, data);
             });
         }
         _importPalette = palette => {
-            const paletteData = this._engine.getPalette(palette);
+            const paletteData = this._pluginManager.getPalette(palette);
             if (!paletteData) {
                 return;
             }
@@ -164,7 +164,7 @@
             });
         };
         _importPreset = preset => {
-            this.load(this._engine.getPreset(preset));
+            this.load(this._pluginManager.getPreset(preset));
         };
     }
     exports.Options = Options;

package/umd/Options/Classes/Particles/ParticlesOptions.js

@@ -36,9 +36,9 @@
         stroke;
         zIndex;
         _container;
-        _engine;
-        constructor(engine, container) {
-            this._engine = engine;
+        _pluginManager;
+        constructor(pluginManager, container) {
+            this._pluginManager = pluginManager;
             this._container = container;
             this.bounce = new ParticlesBounce_js_1.ParticlesBounce();
             this.effect = new Effect_js_1.Effect();
@@ -96,12 +96,12 @@
                 });
             }
             if (this._container) {
-                for (const plugin of this._engine.plugins) {
+                for (const plugin of this._pluginManager.plugins) {
                     if (plugin.loadParticlesOptions) {
                         plugin.loadParticlesOptions(this._container, this, data);
                     }
                 }
-                const updaters = this._engine.updaters.get(this._container);
+                const updaters = this._pluginManager.updaters.get(this._container);
                 if (updaters) {
                     for (const updater of updaters) {
                         if (updater.loadOptions) {

package/umd/Types/CanvasContextType.js

@@ -0,0 +1,12 @@
+(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"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+});

package/umd/Utils/CanvasUtils.js

@@ -37,7 +37,7 @@
         context.clearRect(Constants_js_1.originPoint.x, Constants_js_1.originPoint.y, dimension.width, dimension.height);
     }
     function drawParticle(data) {
-        const { container, context, particle, delta, colorStyles, radius, opacity, transform } = data, { effectDrawers, shapeDrawers } = container.particles, pos = particle.getPosition(), transformData = particle.getTransformData(transform), drawScale = Constants_js_1.defaultZoom, drawPosition = {
+        const { container, context, particle, delta, colorStyles, radius, opacity, transform } = data, { effectDrawers, shapeDrawers } = container, pos = particle.getPosition(), transformData = particle.getTransformData(transform), drawScale = Constants_js_1.defaultZoom, drawPosition = {
             x: pos.x,
             y: pos.y,
         };