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

package/esm/Core/RenderManager.js

@@ -0,0 +1,303 @@
+import { clear, drawParticle, drawParticlePlugin, paintBase, paintImage } from "../Utils/CanvasUtils.js";
+import { defaultCompositeValue, defaultTransformValue, minimumSize, zIndexFactorOffset } from "./Utils/Constants.js";
+import { getStyleFromHsl, rangeColorToHsl } from "../Utils/ColorUtils.js";
+const fColorIndex = 0, sColorIndex = 1;
+function setTransformValue(factor, newFactor, key) {
+    const newValue = newFactor[key];
+    if (newValue !== undefined) {
+        factor[key] = (factor[key] ?? defaultTransformValue) * newValue;
+    }
+}
+export 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 => {
+            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 <= 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 = zIndexFactorOffset - particle.zIndexFactor, { fillOpacity, opacity, strokeOpacity } = particle.getOpacity(), transform = this._reusableTransform, colorStyles = this._reusableColorStyles, fill = fColor ? getStyleFromHsl(fColor, container.hdr, fillOpacity * opacity) : undefined, stroke = sColor ? 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);
+            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) {
+                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 => {
+            paintBase(ctx, this._canvasManager.size, baseColor);
+        });
+    }
+    paintImage(image, opacity) {
+        this.draw(ctx => {
+            paintImage(ctx, this._canvasManager.size, image, opacity);
+        });
+    }
+    setContext(context) {
+        this._context = context;
+        if (this._context) {
+            this._context.globalCompositeOperation = defaultCompositeValue;
+        }
+    }
+    setContextSettings(settings) {
+        this._contextSettings = settings;
+    }
+    stop() {
+        this.draw(ctx => {
+            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 = rangeColorToHsl(this._pluginManager, plugin.particleFillColor(particle));
+            }
+            if (!sColor && plugin.particleStrokeColor) {
+                sColor = rangeColorToHsl(this._pluginManager, plugin.particleStrokeColor(particle));
+            }
+            if (fColor && sColor) {
+                break;
+            }
+        }
+        this._reusablePluginColors[fColorIndex] = fColor;
+        this._reusablePluginColors[sColorIndex] = sColor;
+        return this._reusablePluginColors;
+    };
+}

package/esm/Core/Retina.js

@@ -2,10 +2,8 @@ import { defaultRatio, defaultReduceFactor } from "./Utils/Constants.js";
 import { getRangeValue } from "../Utils/MathUtils.js";
 export class Retina {
     container;
-    maxSpeed;
     pixelRatio;
     reduceFactor;
-    sizeAnimationSpeed;
     constructor(container) {
         this.container = container;
         this.pixelRatio = defaultRatio;
@@ -21,18 +19,15 @@ export class Retina {
             canvas.size.width = element.offsetWidth * ratio;
             canvas.size.height = element.offsetHeight * ratio;
         }
-        const particles = options.particles, moveOptions = particles.move;
-        this.maxSpeed = getRangeValue(moveOptions.gravity.maxSpeed) * ratio;
-        this.sizeAnimationSpeed = 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 = getRangeValue(moveOptions.gravity.maxSpeed) * ratio;
         props.moveDrift = getRangeValue(moveOptions.drift) * ratio;
         props.moveSpeed = getRangeValue(moveOptions.speed) * ratio;
         props.sizeAnimationSpeed = 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 = getRangeValue(moveOptions.gravity.maxSpeed) * ratio;
+        maxDistance.horizontal = moveDistance.horizontal === undefined ? undefined : moveDistance.horizontal * ratio;
+        maxDistance.vertical = moveDistance.vertical === undefined ? undefined : moveDistance.vertical * ratio;
     }
 }

package/esm/Core/Utils/PluginManager.js

@@ -0,0 +1,145 @@
+import { getItemMapFromInitializer, getItemsFromInitializer } from "../../Utils/Utils.js";
+import { EventType } from "../../Enums/Types/EventType.js";
+export 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.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 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 getItemMapFromInitializer(container, this.shapeDrawers, this.initializers.shapes, force);
+    }
+    async getUpdaters(container, force = false) {
+        return 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);
+    }
+}

package/esm/Options/Classes/Options.js

@@ -28,9 +28,9 @@ export class Options {
     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();
@@ -42,7 +42,7 @@ export class Options {
         this.duration = 0;
         this.fpsLimit = 120;
         this.hdr = true;
-        this.particles = loadParticlesOptions(this._engine, this._container);
+        this.particles = loadParticlesOptions(this._pluginManager, this._container);
         this.pauseOnBlur = true;
         this.pauseOnOutsideViewport = true;
         this.resize = new ResizeEvent();
@@ -116,12 +116,12 @@ export class Options {
         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;
         }
@@ -134,24 +134,11 @@ export class Options {
                 mode: paletteData.blendMode,
             },
             particles: {
-                fill: {
-                    color: paletteData.fill
-                        ? {
-                            value: paletteData.colors,
-                        }
-                        : undefined,
-                    enable: paletteData.fill,
-                },
-                stroke: !paletteData.fill
-                    ? paletteData.colors.map(color => ({
-                        color: { value: color },
-                        width: 1,
-                    }))
-                    : undefined,
+                palette,
             },
         });
     };
     _importPreset = preset => {
-        this.load(this._engine.getPreset(preset));
+        this.load(this._pluginManager.getPreset(preset));
     };
 }

package/esm/Options/Classes/Particles/Paint.js

@@ -0,0 +1,20 @@
+import { Fill } from "./Fill.js";
+import { Stroke } from "./Stroke.js";
+import { isNull } from "../../../Utils/TypeUtils.js";
+export class Paint {
+    fill;
+    stroke;
+    load(data) {
+        if (isNull(data)) {
+            return;
+        }
+        if (data.fill !== undefined) {
+            this.fill ??= new Fill();
+            this.fill.load(data.fill);
+        }
+        if (data.stroke !== undefined) {
+            this.stroke ??= new Stroke();
+            this.stroke.load(data.stroke);
+        }
+    }
+}