@tsparticles/engine 4.0.4 → 4.1.0

package/cjs/Core/CanvasManager.js

@@ -56,53 +56,53 @@ export class CanvasManager {
     renderCanvas;
     size;
     zoom = defaultZoom;
-    _container;
-    _generated;
-    _mutationObserver;
-    _originalStyle;
-    _pluginManager;
-    _pointerEvents;
-    _resizePlugins;
-    _standardSize;
-    _zoomCenter;
+    #container;
+    #generated;
+    #mutationObserver;
+    #originalStyle;
+    #pluginManager;
+    #pointerEvents;
+    #resizePlugins;
+    #standardSize;
+    #zoomCenter;
     constructor(pluginManager, container) {
-        this._pluginManager = pluginManager;
-        this._container = container;
+        this.#pluginManager = pluginManager;
+        this.#container = container;
         this.render = new RenderManager(pluginManager, container, this);
-        this._standardSize = {
+        this.#standardSize = {
             height: 0,
             width: 0,
         };
-        const pxRatio = container.retina.pixelRatio, stdSize = this._standardSize;
+        const pxRatio = container.retina.pixelRatio, stdSize = this.#standardSize;
         this.size = {
             height: stdSize.height * pxRatio,
             width: stdSize.width * pxRatio,
         };
-        this._generated = false;
-        this._resizePlugins = [];
-        this._pointerEvents = "none";
+        this.#generated = false;
+        this.#resizePlugins = [];
+        this.#pointerEvents = "none";
     }
-    get _fullScreen() {
-        return this._container.actualOptions.fullScreen.enable;
+    get #fullScreen() {
+        return this.#container.actualOptions.fullScreen.enable;
     }
     destroy() {
         this.stop();
-        if (this._generated) {
+        if (this.#generated) {
             const element = this.domElement;
             element?.remove();
             this.domElement = undefined;
             this.renderCanvas = undefined;
         }
         else {
-            this._resetOriginalStyle();
+            this.#resetOriginalStyle();
         }
         this.render.destroy();
-        this._resizePlugins = [];
+        this.#resizePlugins = [];
     }
     getZoomCenter() {
-        const pxRatio = this._container.retina.pixelRatio, { width, height } = this.size;
-        if (this._zoomCenter) {
-            return this._zoomCenter;
+        const pxRatio = this.#container.retina.pixelRatio, { width, height } = this.size;
+        if (this.#zoomCenter) {
+            return this.#zoomCenter;
         }
         return {
             x: (width * half) / pxRatio,
@@ -110,20 +110,20 @@ export class CanvasManager {
         };
     }
     init() {
-        this._safeMutationObserver(obs => {
+        this.#safeMutationObserver(obs => {
             obs.disconnect();
         });
-        this._mutationObserver = safeMutationObserver(records => {
+        this.#mutationObserver = safeMutationObserver(records => {
             for (const record of records) {
                 if (record.type === "attributes" && record.attributeName === "style") {
-                    this._repairStyle();
+                    this.#repairStyle();
                 }
             }
         });
         this.resize();
-        this._initStyle();
+        this.#initStyle();
         this.initBackground();
-        this._safeMutationObserver(obs => {
+        this.#safeMutationObserver(obs => {
             const element = this.domElement;
             if (!element || !(element instanceof Node)) {
                 return;
@@ -134,13 +134,13 @@ export class CanvasManager {
         this.render.init();
     }
     initBackground() {
-        const { _container } = this, options = _container.actualOptions, background = options.background, element = this.domElement;
+        const container = this.#container, options = container.actualOptions, background = options.background, element = this.domElement;
         if (!element) {
             return;
         }
-        const elementStyle = element.style, color = rangeColorToRgb(this._pluginManager, background.color);
+        const elementStyle = element.style, color = rangeColorToRgb(this.#pluginManager, background.color);
         if (color) {
-            elementStyle.backgroundColor = getStyleFromRgb(color, _container.hdr, background.opacity);
+            elementStyle.backgroundColor = getStyleFromRgb(color, container.hdr, background.opacity);
         }
         else {
             elementStyle.backgroundColor = "";
@@ -151,27 +151,27 @@ export class CanvasManager {
         elementStyle.backgroundSize = background.size || "";
     }
     initPlugins() {
-        this._resizePlugins = [];
-        for (const plugin of this._container.plugins) {
+        this.#resizePlugins = [];
+        for (const plugin of this.#container.plugins) {
             if (plugin.resize) {
-                this._resizePlugins.push(plugin);
+                this.#resizePlugins.push(plugin);
             }
         }
     }
     loadCanvas(canvas) {
-        if (this._generated && this.domElement) {
+        if (this.#generated && this.domElement) {
             this.domElement.remove();
         }
-        const container = this._container, domCanvas = isHtmlCanvasElement(canvas) ? canvas : undefined;
+        const container = this.#container, domCanvas = isHtmlCanvasElement(canvas) ? canvas : undefined;
         this.domElement = domCanvas;
-        this._generated = domCanvas ? domCanvas.dataset[generatedAttribute] === "true" : false;
+        this.#generated = domCanvas ? domCanvas.dataset[generatedAttribute] === "true" : false;
         this.renderCanvas = domCanvas ? getTransferredCanvas(domCanvas) : canvas;
         const domElement = this.domElement;
         if (domElement) {
             domElement.ariaHidden = "true";
-            this._originalStyle = cloneStyle(domElement.style);
+            this.#originalStyle = cloneStyle(domElement.style);
         }
-        const standardSize = this._standardSize, renderCanvas = this.renderCanvas;
+        const standardSize = this.#standardSize, renderCanvas = this.renderCanvas;
         if (domElement) {
             standardSize.height = domElement.offsetHeight;
             standardSize.width = domElement.offsetWidth;
@@ -180,7 +180,7 @@ export class CanvasManager {
             standardSize.height = renderCanvas.height;
             standardSize.width = renderCanvas.width;
         }
-        const pxRatio = this._container.retina.pixelRatio, retinaSize = this.size;
+        const pxRatio = this.#container.retina.pixelRatio, retinaSize = this.size;
         renderCanvas.height = retinaSize.height = standardSize.height * pxRatio;
         renderCanvas.width = retinaSize.width = standardSize.width * pxRatio;
         const canSupportHdrQuery = safeMatchMedia("(color-gamut: p3)");
@@ -191,12 +191,12 @@ export class CanvasManager {
             willReadFrequently: false,
         });
         this.render.setContext(renderCanvas.getContext("2d", this.render.settings));
-        this._safeMutationObserver(obs => {
+        this.#safeMutationObserver(obs => {
             obs.disconnect();
         });
         container.retina.init();
         this.initBackground();
-        this._safeMutationObserver(obs => {
+        this.#safeMutationObserver(obs => {
             const element = this.domElement;
             if (!element || !(element instanceof Node)) {
                 return;
@@ -209,11 +209,11 @@ export class CanvasManager {
         if (!element) {
             return false;
         }
-        const container = this._container, renderCanvas = this.renderCanvas;
+        const container = this.#container, renderCanvas = this.renderCanvas;
         if (renderCanvas === undefined) {
             return false;
         }
-        const currentSize = container.canvas._standardSize, newSize = {
+        const currentSize = container.canvas.#standardSize, newSize = {
             width: element.offsetWidth,
             height: element.offsetHeight,
         }, pxRatio = container.retina.pixelRatio, retinaSize = {
@@ -232,7 +232,7 @@ export class CanvasManager {
         const canvasSize = this.size;
         renderCanvas.width = canvasSize.width = retinaSize.width;
         renderCanvas.height = canvasSize.height = retinaSize.height;
-        if (this._container.started) {
+        if (this.#container.started) {
             container.particles.setResizeFactor({
                 width: currentSize.width / oldSize.width,
                 height: currentSize.height / oldSize.height,
@@ -245,46 +245,46 @@ export class CanvasManager {
         if (!element) {
             return;
         }
-        this._pointerEvents = type;
-        this._repairStyle();
+        this.#pointerEvents = type;
+        this.#repairStyle();
     }
     setZoom(zoomLevel, center) {
         this.zoom = zoomLevel;
-        this._zoomCenter = center;
+        this.#zoomCenter = center;
     }
     stop() {
-        this._safeMutationObserver(obs => {
+        this.#safeMutationObserver(obs => {
             obs.disconnect();
         });
-        this._mutationObserver = undefined;
+        this.#mutationObserver = undefined;
         this.render.stop();
     }
     async windowResize() {
         if (!this.domElement || !this.resize()) {
             return;
         }
-        const container = this._container, needsRefresh = container.updateActualOptions();
+        const container = this.#container, needsRefresh = container.updateActualOptions();
         container.particles.setDensity();
-        this._applyResizePlugins();
+        this.#applyResizePlugins();
         if (needsRefresh) {
             await container.refresh();
         }
     }
-    _applyResizePlugins = () => {
-        for (const plugin of this._resizePlugins) {
+    #applyResizePlugins = () => {
+        for (const plugin of this.#resizePlugins) {
             plugin.resize?.();
         }
     };
-    _initStyle = () => {
-        const element = this.domElement, options = this._container.actualOptions;
+    #initStyle = () => {
+        const element = this.domElement, options = this.#container.actualOptions;
         if (!element) {
             return;
         }
-        if (this._fullScreen) {
-            this._setFullScreenStyle();
+        if (this.#fullScreen) {
+            this.#setFullScreenStyle();
         }
         else {
-            this._resetOriginalStyle();
+            this.#resetOriginalStyle();
         }
         for (const key in options.style) {
             if (!key || !(key in options.style)) {
@@ -297,44 +297,44 @@ export class CanvasManager {
             element.style.setProperty(key, value, "important");
         }
     };
-    _repairStyle = () => {
+    #repairStyle = () => {
         const element = this.domElement;
         if (!element) {
             return;
         }
-        this._safeMutationObserver(observer => {
+        this.#safeMutationObserver(observer => {
             observer.disconnect();
         });
-        this._initStyle();
+        this.#initStyle();
         this.initBackground();
-        const pointerEvents = this._pointerEvents;
+        const pointerEvents = this.#pointerEvents;
         element.style.pointerEvents = pointerEvents;
         element.style.setProperty("pointer-events", pointerEvents);
-        this._safeMutationObserver(observer => {
+        this.#safeMutationObserver(observer => {
             if (!(element instanceof Node)) {
                 return;
             }
             observer.observe(element, { attributes: true });
         });
     };
-    _resetOriginalStyle = () => {
-        const element = this.domElement, originalStyle = this._originalStyle;
+    #resetOriginalStyle = () => {
+        const element = this.domElement, originalStyle = this.#originalStyle;
         if (!element || !originalStyle) {
             return;
         }
         setStyle(element, originalStyle, true);
     };
-    _safeMutationObserver = callback => {
-        if (!this._mutationObserver) {
+    #safeMutationObserver = callback => {
+        if (!this.#mutationObserver) {
             return;
         }
-        callback(this._mutationObserver);
+        callback(this.#mutationObserver);
     };
-    _setFullScreenStyle = () => {
+    #setFullScreenStyle = () => {
         const element = this.domElement;
         if (!element) {
             return;
         }
-        setStyle(element, getFullScreenStyle(this._container.actualOptions.fullScreen.zIndex), true);
+        setStyle(element, getFullScreenStyle(this.#container.actualOptions.fullScreen.zIndex), true);
     };
 }

package/cjs/Core/Container.js

@@ -39,73 +39,73 @@ export class Container {
     shapeDrawers;
     started;
     zLayers;
-    _delay;
-    _delayTimeout;
-    _delta = { value: 0, factor: 0 };
-    _dispatchCallback;
-    _drawAnimationFrame;
-    _duration;
-    _eventListeners;
-    _firstStart;
-    _initialSourceOptions;
-    _lastFrameTime;
-    _lifeTime;
-    _onDestroy;
-    _options;
-    _paused;
-    _pluginManager;
-    _smooth;
-    _sourceOptions;
+    #delay;
+    #delayTimeout;
+    #delta = { value: 0, factor: 0 };
+    #dispatchCallback;
+    #drawAnimationFrame;
+    #duration;
+    #eventListeners;
+    #firstStart;
+    #initialSourceOptions;
+    #lastFrameTime;
+    #lifeTime;
+    #onDestroy;
+    #options;
+    #paused;
+    #pluginManager;
+    #smooth;
+    #sourceOptions;
     constructor(params) {
         const { dispatchCallback, pluginManager, id, onDestroy, sourceOptions } = params;
-        this._pluginManager = pluginManager;
-        this._dispatchCallback = dispatchCallback;
-        this._onDestroy = onDestroy;
+        this.#pluginManager = pluginManager;
+        this.#dispatchCallback = dispatchCallback;
+        this.#onDestroy = onDestroy;
         this.id = Symbol(id);
         this.fpsLimit = 120;
         this.hdr = false;
-        this._smooth = false;
-        this._delay = 0;
-        this._duration = 0;
-        this._lifeTime = 0;
-        this._firstStart = true;
+        this.#smooth = false;
+        this.#delay = 0;
+        this.#duration = 0;
+        this.#lifeTime = 0;
+        this.#firstStart = true;
         this.started = false;
         this.destroyed = false;
-        this._paused = true;
-        this._lastFrameTime = 0;
+        this.#paused = true;
+        this.#lastFrameTime = 0;
         this.zLayers = 100;
         this.pageHidden = false;
-        this._sourceOptions = sourceOptions;
-        this._initialSourceOptions = sourceOptions;
+        this.#sourceOptions = sourceOptions;
+        this.#initialSourceOptions = sourceOptions;
         this.effectDrawers = new Map();
         this.shapeDrawers = new Map();
         this.particleUpdaters = [];
         this.retina = new Retina(this);
-        this.canvas = new CanvasManager(this._pluginManager, this);
-        this.particles = new ParticlesManager(this._pluginManager, this);
+        this.canvas = new CanvasManager(this.#pluginManager, this);
+        this.particles = new ParticlesManager(this.#pluginManager, this);
         this.plugins = [];
         this.particleDestroyedPlugins = [];
         this.particleCreatedPlugins = [];
         this.particlePositionPlugins = [];
-        this._options = loadContainerOptions(this._pluginManager, this);
-        this.actualOptions = loadContainerOptions(this._pluginManager, this);
-        this._eventListeners = new EventListeners(this);
+        this.#options = loadContainerOptions(this.#pluginManager, this);
+        this.actualOptions = loadContainerOptions(this.#pluginManager, this);
+        this.#eventListeners = new EventListeners(this);
         this.dispatchEvent(EventType.containerBuilt);
     }
     get animationStatus() {
-        return !this._paused && !this.pageHidden && guardCheck(this);
+        return !this.#paused && !this.pageHidden && guardCheck(this);
     }
     get options() {
-        return this._options;
+        return this.#options;
     }
     get sourceOptions() {
-        return this._sourceOptions;
+        return this.#sourceOptions;
     }
     addLifeTime(value) {
-        this._lifeTime += value;
+        this.#lifeTime += value;
     }
     alive() {
-        return !this._duration || this._lifeTime <= this._duration;
+        return !this.#duration || this.#lifeTime <= this.#duration;
     }
     destroy(remove = true) {
         if (!guardCheck(this)) {
@@ -127,13 +127,13 @@ export class Container {
         this.shapeDrawers = new Map();
         this.particleUpdaters = [];
         this.plugins.length = 0;
-        this._pluginManager.clearPlugins(this);
+        this.#pluginManager.clearPlugins(this);
         this.destroyed = true;
-        this._onDestroy(remove);
+        this.#onDestroy(remove);
         this.dispatchEvent(EventType.containerDestroyed);
     }
     dispatchEvent(type, data) {
-        this._dispatchCallback(type, {
+        this.#dispatchCallback(type, {
             container: this,
             data,
         });
@@ -143,12 +143,12 @@ export class Container {
             return;
         }
         let refreshTime = force;
-        this._drawAnimationFrame = animate((timestamp) => {
+        this.#drawAnimationFrame = animate((timestamp) => {
             if (refreshTime) {
-                this._lastFrameTime = undefined;
+                this.#lastFrameTime = undefined;
                 refreshTime = false;
             }
-            this._nextFrame(timestamp);
+            this.#nextFrame(timestamp);
         });
     }
     async export(type, options = {}) {
@@ -170,7 +170,7 @@ export class Container {
             return;
         }
         const allContainerPlugins = new Map();
-        for (const plugin of this._pluginManager.plugins) {
+        for (const plugin of this.#pluginManager.plugins) {
             const containerPlugin = await plugin.getPlugin(this);
             if (containerPlugin.preInit) {
                 await containerPlugin.preInit();
@@ -178,8 +178,8 @@ export class Container {
             allContainerPlugins.set(plugin, containerPlugin);
         }
         await this.initDrawersAndUpdaters();
-        this._options = loadContainerOptions(this._pluginManager, this, this._initialSourceOptions, this.sourceOptions);
-        this.actualOptions = loadContainerOptions(this._pluginManager, this, this._options);
+        this.#options = loadContainerOptions(this.#pluginManager, this, this.#initialSourceOptions, this.sourceOptions);
+        this.actualOptions = loadContainerOptions(this.#pluginManager, this, this.#options);
         this.plugins.length = 0;
         this.particleDestroyedPlugins.length = 0;
         this.particleCreatedPlugins.length = 0;
@@ -206,11 +206,11 @@ export class Container {
         const { delay, duration, fpsLimit, hdr, smooth, zLayers } = this.actualOptions;
         this.hdr = hdr;
         this.zLayers = zLayers;
-        this._duration = getRangeValue(duration) * millisecondsToSeconds;
-        this._delay = getRangeValue(delay) * millisecondsToSeconds;
-        this._lifeTime = 0;
+        this.#duration = getRangeValue(duration) * millisecondsToSeconds;
+        this.#delay = getRangeValue(delay) * millisecondsToSeconds;
+        this.#lifeTime = 0;
         this.fpsLimit = fpsLimit > minFpsLimit ? fpsLimit : defaultFpsLimit;
-        this._smooth = smooth;
+        this.#smooth = smooth;
         for (const plugin of this.plugins) {
             await plugin.init?.();
         }
@@ -223,7 +223,7 @@ export class Container {
         this.dispatchEvent(EventType.particlesSetup);
     }
     async initDrawersAndUpdaters() {
-        const pluginManager = this._pluginManager;
+        const pluginManager = this.#pluginManager;
         this.effectDrawers = await pluginManager.getEffectDrawers(this, true);
         this.shapeDrawers = await pluginManager.getShapeDrawers(this, true);
         this.particleUpdaters = await pluginManager.getUpdaters(this, true);
@@ -232,18 +232,18 @@ export class Container {
         if (!guardCheck(this)) {
             return;
         }
-        if (this._drawAnimationFrame !== undefined) {
-            cancelAnimation(this._drawAnimationFrame);
-            delete this._drawAnimationFrame;
+        if (this.#drawAnimationFrame !== undefined) {
+            cancelAnimation(this.#drawAnimationFrame);
+            this.#drawAnimationFrame = undefined;
         }
-        if (this._paused) {
+        if (this.#paused) {
             return;
         }
         for (const plugin of this.plugins) {
             plugin.pause?.();
         }
         if (!this.pageHidden) {
-            this._paused = true;
+            this.#paused = true;
         }
         this.dispatchEvent(EventType.containerPaused);
     }
@@ -251,13 +251,13 @@ export class Container {
         if (!guardCheck(this)) {
             return;
         }
-        const needsUpdate = this._paused || force;
-        if (this._firstStart && !this.actualOptions.autoPlay) {
-            this._firstStart = false;
+        const needsUpdate = this.#paused || force;
+        if (this.#firstStart && !this.actualOptions.autoPlay) {
+            this.#firstStart = false;
             return;
         }
-        if (this._paused) {
-            this._paused = false;
+        if (this.#paused) {
+            this.#paused = false;
         }
         if (needsUpdate) {
             for (const plugin of this.plugins) {
@@ -280,10 +280,10 @@ export class Container {
         if (!guardCheck(this)) {
             return;
         }
-        this._initialSourceOptions = sourceOptions;
-        this._sourceOptions = sourceOptions;
-        this._options = loadContainerOptions(this._pluginManager, this, this._initialSourceOptions, this.sourceOptions);
-        this.actualOptions = loadContainerOptions(this._pluginManager, this, this._options);
+        this.#initialSourceOptions = sourceOptions;
+        this.#sourceOptions = sourceOptions;
+        this.#options = loadContainerOptions(this.#pluginManager, this, this.#initialSourceOptions, this.sourceOptions);
+        this.actualOptions = loadContainerOptions(this.#pluginManager, this, this.#options);
         return this.refresh();
     }
     async start() {
@@ -294,7 +294,7 @@ export class Container {
         this.started = true;
         await new Promise(resolve => {
             const start = async () => {
-                this._eventListeners.addListeners();
+                this.#eventListeners.addListeners();
                 for (const plugin of this.plugins) {
                     await plugin.start?.();
                 }
@@ -302,20 +302,20 @@ export class Container {
                 this.play();
                 resolve();
             };
-            this._delayTimeout = setTimeout(() => void start(), this._delay);
+            this.#delayTimeout = setTimeout(() => void start(), this.#delay);
         });
     }
     stop() {
         if (!guardCheck(this) || !this.started) {
             return;
         }
-        if (this._delayTimeout) {
-            clearTimeout(this._delayTimeout);
-            delete this._delayTimeout;
+        if (this.#delayTimeout) {
+            clearTimeout(this.#delayTimeout);
+            this.#delayTimeout = undefined;
         }
-        this._firstStart = true;
+        this.#firstStart = true;
         this.started = false;
-        this._eventListeners.removeListeners();
+        this.#eventListeners.removeListeners();
         this.pause();
         this.particles.clear();
         this.canvas.stop();
@@ -325,7 +325,7 @@ export class Container {
         this.particleCreatedPlugins.length = 0;
         this.particleDestroyedPlugins.length = 0;
         this.particlePositionPlugins.length = 0;
-        this._sourceOptions = this._options;
+        this.#sourceOptions = this.#options;
         this.dispatchEvent(EventType.containerStopped);
     }
     updateActualOptions() {
@@ -337,23 +337,23 @@ export class Container {
         }
         return refresh;
     }
-    _nextFrame = (timestamp) => {
+    #nextFrame = (timestamp) => {
         try {
-            if (!this._smooth &&
-                this._lastFrameTime !== undefined &&
-                timestamp < this._lastFrameTime + millisecondsToSeconds / this.fpsLimit) {
+            if (!this.#smooth &&
+                this.#lastFrameTime !== undefined &&
+                timestamp < this.#lastFrameTime + millisecondsToSeconds / this.fpsLimit) {
                 this.draw(false);
                 return;
             }
-            this._lastFrameTime ??= timestamp;
-            updateDelta(this._delta, timestamp - this._lastFrameTime, this.fpsLimit, this._smooth);
-            this.addLifeTime(this._delta.value);
-            this._lastFrameTime = timestamp;
-            if (this._delta.value > millisecondsToSeconds) {
+            this.#lastFrameTime ??= timestamp;
+            updateDelta(this.#delta, timestamp - this.#lastFrameTime, this.fpsLimit, this.#smooth);
+            this.addLifeTime(this.#delta.value);
+            this.#lastFrameTime = timestamp;
+            if (this.#delta.value > millisecondsToSeconds) {
                 this.draw(false);
                 return;
             }
-            this.canvas.render.drawParticles(this._delta);
+            this.canvas.render.drawParticles(this.#delta);
             if (!this.alive()) {
                 this.destroy();
                 return;