@tsparticles/engine 4.0.5 → 4.1.1

package/browser/Core/RenderManager.js

@@ -9,58 +9,58 @@ function setTransformValue(factor, newFactor, key) {
     }
 }
 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 = {};
+    #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 = [];
+        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;
+        return this.#contextSettings;
     }
     canvasClear() {
-        if (!this._container.actualOptions.clear) {
+        if (!this.#container.actualOptions.clear) {
             return;
         }
         this.draw(ctx => {
-            clear(ctx, this._canvasManager.size);
+            clear(ctx, this.#canvasManager.size);
         });
     }
     clear() {
         let pluginHandled = false;
-        for (const plugin of this._canvasClearPlugins) {
+        for (const plugin of this.#canvasClearPlugins) {
             pluginHandled = plugin.canvasClear?.() ?? false;
             if (pluginHandled) {
                 break;
@@ -73,21 +73,21 @@ export class RenderManager {
     }
     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 = [];
+        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;
+        const ctx = this.#context;
         if (!ctx) {
             return;
         }
@@ -102,21 +102,21 @@ export class RenderManager {
             return;
         }
         const pfColor = particle.getFillColor(), psColor = particle.getStrokeColor();
-        let [fColor, sColor] = this._getPluginParticleColors(particle);
+        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;
+        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) {
+            for (const plugin of this.#drawParticlesSetupPlugins) {
                 plugin.drawParticleSetup?.(context, particle, delta);
             }
-            this._applyPreDrawUpdaters(context, particle, radius, opacity, colorStyles, transform);
+            this.#applyPreDrawUpdaters(context, particle, radius, opacity, colorStyles, transform);
             drawParticle({
                 container,
                 context,
@@ -127,35 +127,35 @@ export class RenderManager {
                 opacity: opacity,
                 transform,
             });
-            this._applyPostDrawUpdaters(particle);
-            for (const plugin of this._drawParticlesCleanupPlugins) {
+            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) {
+            for (const plugin of this.#drawParticlePlugins) {
                 drawParticlePlugin(ctx, plugin, particle, delta);
             }
         });
     }
     drawParticles(delta) {
-        const { particles } = this._container;
+        const { particles } = this.#container;
         this.clear();
         particles.update(delta);
         this.draw(ctx => {
-            for (const plugin of this._drawSettingsSetupPlugins) {
+            for (const plugin of this.#drawSettingsSetupPlugins) {
                 plugin.drawSettingsSetup?.(ctx, delta);
             }
-            for (const plugin of this._drawPlugins) {
+            for (const plugin of this.#drawPlugins) {
                 plugin.draw?.(ctx, delta);
             }
             particles.drawParticles(delta);
-            for (const plugin of this._clearDrawPlugins) {
+            for (const plugin of this.#clearDrawPlugins) {
                 plugin.clearDraw?.(ctx, delta);
             }
-            for (const plugin of this._drawSettingsCleanupPlugins) {
+            for (const plugin of this.#drawSettingsCleanupPlugins) {
                 plugin.drawSettingsCleanup?.(ctx, delta);
             }
         });
@@ -166,64 +166,64 @@ export class RenderManager {
         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) {
+        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);
+                this.#colorPlugins.push(plugin);
             }
             if (plugin.canvasClear) {
-                this._canvasClearPlugins.push(plugin);
+                this.#canvasClearPlugins.push(plugin);
             }
             if (plugin.canvasPaint) {
-                this._canvasPaintPlugins.push(plugin);
+                this.#canvasPaintPlugins.push(plugin);
             }
             if (plugin.drawParticle) {
-                this._drawParticlePlugins.push(plugin);
+                this.#drawParticlePlugins.push(plugin);
             }
             if (plugin.drawParticleSetup) {
-                this._drawParticlesSetupPlugins.push(plugin);
+                this.#drawParticlesSetupPlugins.push(plugin);
             }
             if (plugin.drawParticleCleanup) {
-                this._drawParticlesCleanupPlugins.push(plugin);
+                this.#drawParticlesCleanupPlugins.push(plugin);
             }
             if (plugin.draw) {
-                this._drawPlugins.push(plugin);
+                this.#drawPlugins.push(plugin);
             }
             if (plugin.drawSettingsSetup) {
-                this._drawSettingsSetupPlugins.push(plugin);
+                this.#drawSettingsSetupPlugins.push(plugin);
             }
             if (plugin.drawSettingsCleanup) {
-                this._drawSettingsCleanupPlugins.push(plugin);
+                this.#drawSettingsCleanupPlugins.push(plugin);
             }
             if (plugin.clearDraw) {
-                this._clearDrawPlugins.push(plugin);
+                this.#clearDrawPlugins.push(plugin);
             }
         }
     }
     initUpdaters() {
-        this._preDrawUpdaters = [];
-        this._postDrawUpdaters = [];
-        for (const updater of this._container.particleUpdaters) {
+        this.#preDrawUpdaters = [];
+        this.#postDrawUpdaters = [];
+        for (const updater of this.#container.particleUpdaters) {
             if (updater.afterDraw) {
-                this._postDrawUpdaters.push(updater);
+                this.#postDrawUpdaters.push(updater);
             }
             if (updater.getColorStyles ?? updater.getTransformValues ?? updater.beforeDraw) {
-                this._preDrawUpdaters.push(updater);
+                this.#preDrawUpdaters.push(updater);
             }
         }
     }
     paint() {
         let handled = false;
-        for (const plugin of this._canvasPaintPlugins) {
+        for (const plugin of this.#canvasPaintPlugins) {
             handled = plugin.canvasPaint?.() ?? false;
             if (handled) {
                 break;
@@ -236,35 +236,35 @@ export class RenderManager {
     }
     paintBase(baseColor) {
         this.draw(ctx => {
-            paintBase(ctx, this._canvasManager.size, baseColor);
+            paintBase(ctx, this.#canvasManager.size, baseColor);
         });
     }
     paintImage(image, opacity) {
         this.draw(ctx => {
-            paintImage(ctx, this._canvasManager.size, image, opacity);
+            paintImage(ctx, this.#canvasManager.size, image, opacity);
         });
     }
     setContext(context) {
-        this._context = context;
-        if (this._context) {
-            this._context.globalCompositeOperation = defaultCompositeValue;
+        this.#context = context;
+        if (this.#context) {
+            this.#context.globalCompositeOperation = defaultCompositeValue;
         }
     }
     setContextSettings(settings) {
-        this._contextSettings = settings;
+        this.#contextSettings = settings;
     }
     stop() {
         this.draw(ctx => {
-            clear(ctx, this._canvasManager.size);
+            clear(ctx, this.#canvasManager.size);
         });
     }
-    _applyPostDrawUpdaters = particle => {
-        for (const updater of this._postDrawUpdaters) {
+    #applyPostDrawUpdaters = particle => {
+        for (const updater of this.#postDrawUpdaters) {
             updater.afterDraw?.(particle);
         }
     };
-    _applyPreDrawUpdaters = (ctx, particle, radius, zOpacity, colorStyles, transform) => {
-        for (const updater of this._preDrawUpdaters) {
+    #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) {
@@ -283,21 +283,21 @@ export class RenderManager {
             updater.beforeDraw?.(particle);
         }
     };
-    _getPluginParticleColors = particle => {
+    #getPluginParticleColors = particle => {
         let fColor, sColor;
-        for (const plugin of this._colorPlugins) {
+        for (const plugin of this.#colorPlugins) {
             if (!fColor && plugin.particleFillColor) {
-                fColor = rangeColorToHsl(this._pluginManager, plugin.particleFillColor(particle));
+                fColor = rangeColorToHsl(this.#pluginManager, plugin.particleFillColor(particle));
             }
             if (!sColor && plugin.particleStrokeColor) {
-                sColor = rangeColorToHsl(this._pluginManager, plugin.particleStrokeColor(particle));
+                sColor = rangeColorToHsl(this.#pluginManager, plugin.particleStrokeColor(particle));
             }
             if (fColor && sColor) {
                 break;
             }
         }
-        this._reusablePluginColors[fColorIndex] = fColor;
-        this._reusablePluginColors[sColorIndex] = sColor;
-        return this._reusablePluginColors;
+        this.#reusablePluginColors[fColorIndex] = fColor;
+        this.#reusablePluginColors[sColorIndex] = sColor;
+        return this.#reusablePluginColors;
     };
 }

package/browser/Core/Retina.js

@@ -1,16 +1,16 @@
 import { defaultRatio, defaultReduceFactor } from "./Utils/Constants.js";
 import { getRangeValue } from "../Utils/MathUtils.js";
 export class Retina {
-    container;
     pixelRatio;
     reduceFactor;
+    #container;
     constructor(container) {
-        this.container = container;
+        this.#container = container;
         this.pixelRatio = defaultRatio;
         this.reduceFactor = defaultReduceFactor;
     }
     init() {
-        const container = this.container, options = container.actualOptions;
+        const container = this.#container, options = container.actualOptions;
         this.pixelRatio = options.detectRetina ? devicePixelRatio : defaultRatio;
         this.reduceFactor = defaultReduceFactor;
         const ratio = this.pixelRatio, canvas = container.canvas, element = canvas.domElement;
@@ -24,7 +24,6 @@ export class 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 ? undefined : moveDistance.horizontal * ratio;
         maxDistance.vertical = moveDistance.vertical === undefined ? undefined : moveDistance.vertical * ratio;

package/browser/Core/Utils/EventListeners.js

@@ -1,29 +1,29 @@
 import { manageListener, safeDocument } from "../../Utils/Utils.js";
 import { millisecondsToSeconds, resizeEvent, visibilityChangeEvent } from "./Constants.js";
 export class EventListeners {
-    container;
-    _handlers;
-    _resizeObserver;
-    _resizeTimeout;
+    #container;
+    #handlers;
+    #resizeObserver;
+    #resizeTimeout;
     constructor(container) {
-        this.container = container;
-        this._handlers = {
+        this.#container = container;
+        this.#handlers = {
             visibilityChange: () => {
-                this._handleVisibilityChange();
+                this.#handleVisibilityChange();
             },
             resize: () => {
-                this._handleWindowResize();
+                this.#handleWindowResize();
             },
         };
     }
     addListeners() {
-        this._manageListeners(true);
+        this.#manageListeners(true);
     }
     removeListeners() {
-        this._manageListeners(false);
+        this.#manageListeners(false);
     }
-    _handleVisibilityChange = () => {
-        const container = this.container, options = container.actualOptions;
+    #handleVisibilityChange = () => {
+        const container = this.#container, options = container.actualOptions;
         if (!options.pauseOnBlur) {
             return;
         }
@@ -41,24 +41,24 @@ export class EventListeners {
             }
         }
     };
-    _handleWindowResize = () => {
-        if (this._resizeTimeout) {
-            clearTimeout(this._resizeTimeout);
-            delete this._resizeTimeout;
+    #handleWindowResize = () => {
+        if (this.#resizeTimeout) {
+            clearTimeout(this.#resizeTimeout);
+            this.#resizeTimeout = undefined;
         }
         const handleResize = async () => {
-            const canvas = this.container.canvas;
+            const canvas = this.#container.canvas;
             await canvas.windowResize();
         };
-        this._resizeTimeout = setTimeout(() => void handleResize(), this.container.actualOptions.resize.delay * millisecondsToSeconds);
+        this.#resizeTimeout = setTimeout(() => void handleResize(), this.#container.actualOptions.resize.delay * millisecondsToSeconds);
     };
-    _manageListeners = add => {
-        const handlers = this._handlers;
-        this._manageResize(add);
+    #manageListeners = add => {
+        const handlers = this.#handlers;
+        this.#manageResize(add);
         manageListener(document, visibilityChangeEvent, handlers.visibilityChange, add, false);
     };
-    _manageResize = add => {
-        const handlers = this._handlers, container = this.container, options = container.actualOptions;
+    #manageResize = add => {
+        const handlers = this.#handlers, container = this.#container, options = container.actualOptions;
         if (!options.resize.enable) {
             return;
         }
@@ -67,22 +67,22 @@ export class EventListeners {
             return;
         }
         const canvasEl = container.canvas.domElement;
-        if (this._resizeObserver && !add) {
+        if (this.#resizeObserver && !add) {
             if (canvasEl) {
-                this._resizeObserver.unobserve(canvasEl);
+                this.#resizeObserver.unobserve(canvasEl);
             }
-            this._resizeObserver.disconnect();
-            delete this._resizeObserver;
+            this.#resizeObserver.disconnect();
+            this.#resizeObserver = undefined;
         }
-        else if (!this._resizeObserver && add && canvasEl) {
-            this._resizeObserver = new ResizeObserver((entries) => {
+        else if (!this.#resizeObserver && add && canvasEl) {
+            this.#resizeObserver = new ResizeObserver((entries) => {
                 const entry = entries.find(e => e.target === canvasEl);
                 if (!entry) {
                     return;
                 }
-                this._handleWindowResize();
+                this.#handleWindowResize();
             });
-            this._resizeObserver.observe(canvasEl);
+            this.#resizeObserver.observe(canvasEl);
         }
     };
 }

package/browser/Core/Utils/PluginManager.js

@@ -14,19 +14,19 @@ export class PluginManager {
     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();
+    #allLoadersSet = new Set();
+    #configs = new Map();
+    #engine;
+    #executedSet = new Set();
+    #initialized = false;
+    #isRunningLoaders = false;
+    #loadPromises = new Set();
     constructor(engine) {
-        this._engine = engine;
+        this.#engine = engine;
     }
     get configs() {
         const res = {};
-        for (const [name, config] of this._configs) {
+        for (const [name, config] of this.#configs) {
             res[name] = config;
         }
         return res;
@@ -36,8 +36,8 @@ export class PluginManager {
     }
     addConfig(config) {
         const key = config.key ?? config.name ?? "default";
-        this._configs.set(key, config);
-        this._engine.dispatchEvent(EventType.configAdded, { data: { name: key, config } });
+        this.#configs.set(key, config);
+        this.#engine.dispatchEvent(EventType.configAdded, { data: { name: key, config } });
     }
     addEasing(name, easing) {
         if (this.easingFunctions.get(name)) {
@@ -98,21 +98,21 @@ export class PluginManager {
         return getItemsFromInitializer(container, this.updaters, this.initializers.updaters, force);
     }
     async init() {
-        if (this._initialized || this._isRunningLoaders) {
+        if (this.#initialized || this.#isRunningLoaders) {
             return;
         }
-        this._isRunningLoaders = true;
-        this._executedSet = new Set();
-        this._allLoadersSet = new Set(this._loadPromises);
+        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);
+            for (const loader of this.#allLoadersSet) {
+                await this.#runLoader(loader, this.#executedSet, this.#allLoadersSet);
             }
         }
         finally {
-            this._loadPromises.clear();
-            this._isRunningLoaders = false;
-            this._initialized = true;
+            this.#loadPromises.clear();
+            this.#isRunningLoaders = false;
+            this.#initialized = true;
         }
     }
     loadParticlesOptions(container, options, ...sourceOptions) {
@@ -123,23 +123,23 @@ export class PluginManager {
         updaters.forEach(updater => updater.loadOptions?.(options, ...sourceOptions));
     }
     async register(...loaders) {
-        if (this._initialized) {
+        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);
+            if (this.#isRunningLoaders) {
+                await this.#runLoader(loader, this.#executedSet, this.#allLoadersSet);
             }
             else {
-                this._loadPromises.add(loader);
+                this.#loadPromises.add(loader);
             }
         }
     }
-    async _runLoader(loader, executed, allLoaders) {
+    async #runLoader(loader, executed, allLoaders) {
         if (executed.has(loader))
             return;
         executed.add(loader);
         allLoaders.add(loader);
-        await loader(this._engine);
+        await loader(this.#engine);
     }
 }