@tsparticles/engine 3.9.1 → 4.0.0-alpha.1

package/esm/Core/Engine.js

@@ -1,9 +1,9 @@
-import { canvasFirstIndex, canvasTag, errorPrefix, generatedAttribute, generatedFalse, generatedTrue, loadMinIndex, loadRandomFactor, none, one, removeDeleteCount, } from "./Utils/Constants.js";
-import { executeOnSingleOrMultiple, getLogger, itemFromSingleOrMultiple } from "../Utils/Utils.js";
-import { Container } from "./Container.js";
+import { canvasFirstIndex, canvasTag, generatedAttribute, generatedFalse, generatedTrue, loadMinIndex, loadRandomFactor, none, one, removeDeleteCount, } from "./Utils/Constants.js";
+import { itemFromSingleOrMultiple, safeDocument } from "../Utils/Utils.js";
 import { EventDispatcher } from "../Utils/EventDispatcher.js";
 import { EventType } from "../Enums/Types/EventType.js";
-import { getRandom } from "../Utils/NumberUtils.js";
+import { getLogger } from "../Utils/LogUtils.js";
+import { getRandom } from "../Utils/MathUtils.js";
 async function getItemsFromInitializer(container, map, initializers, force = false) {
     let res = map.get(container);
     if (!res || force) {
@@ -21,25 +21,23 @@ async function getDataFromUrl(data) {
     if (response.ok) {
         return (await response.json());
     }
-    getLogger().error(`${errorPrefix} ${response.status} while retrieving config file`);
+    getLogger().error(`${response.status.toString()} while retrieving config file`);
     return data.fallback;
 }
 const getCanvasFromContainer = (domContainer) => {
     let canvasEl;
     if (domContainer instanceof HTMLCanvasElement || domContainer.tagName.toLowerCase() === canvasTag) {
         canvasEl = domContainer;
-        if (!canvasEl.dataset[generatedAttribute]) {
-            canvasEl.dataset[generatedAttribute] = generatedFalse;
-        }
+        canvasEl.dataset[generatedAttribute] ??= generatedFalse;
     }
     else {
-        const existingCanvases = domContainer.getElementsByTagName(canvasTag);
-        if (existingCanvases.length) {
-            canvasEl = existingCanvases[canvasFirstIndex];
+        const existingCanvases = domContainer.getElementsByTagName(canvasTag), foundCanvas = existingCanvases[canvasFirstIndex];
+        if (foundCanvas) {
+            canvasEl = foundCanvas;
             canvasEl.dataset[generatedAttribute] = generatedFalse;
         }
         else {
-            canvasEl = document.createElement(canvasTag);
+            canvasEl = safeDocument().createElement(canvasTag);
             canvasEl.dataset[generatedAttribute] = generatedTrue;
             domContainer.appendChild(canvasEl);
         }
@@ -53,14 +51,14 @@ const getCanvasFromContainer = (domContainer) => {
     }
     return canvasEl;
 }, getDomContainer = (id, source) => {
-    let domContainer = source ?? document.getElementById(id);
+    let domContainer = source ?? safeDocument().getElementById(id);
     if (domContainer) {
         return domContainer;
     }
-    domContainer = document.createElement("div");
+    domContainer = safeDocument().createElement("div");
     domContainer.id = id;
     domContainer.dataset[generatedAttribute] = generatedTrue;
-    document.body.append(domContainer);
+    safeDocument().body.append(domContainer);
     return domContainer;
 };
 export class Engine {
@@ -69,6 +67,7 @@ export class Engine {
         this._domArray = [];
         this._eventDispatcher = new EventDispatcher();
         this._initialized = false;
+        this._loadPromises = new Set();
         this.plugins = [];
         this.colorManagers = new Map();
         this.easingFunctions = new Map();
@@ -96,73 +95,65 @@ export class Engine {
         return this._domArray;
     }
     get version() {
-        return "3.9.1";
+        return "4.0.0-alpha.1";
     }
-    async addColorManager(manager, refresh = true) {
+    addColorManager(manager) {
         this.colorManagers.set(manager.key, manager);
-        await this.refresh(refresh);
     }
     addConfig(config) {
         const key = config.key ?? config.name ?? "default";
         this._configs.set(key, config);
         this._eventDispatcher.dispatchEvent(EventType.configAdded, { data: { name: key, config } });
     }
-    async addEasing(name, easing, refresh = true) {
-        if (this.getEasing(name)) {
+    addEasing(name, easing) {
+        if (this.easingFunctions.get(name)) {
             return;
         }
         this.easingFunctions.set(name, easing);
-        await this.refresh(refresh);
     }
-    async addEffect(effect, drawer, refresh = true) {
-        executeOnSingleOrMultiple(effect, type => {
-            if (!this.getEffectDrawer(type)) {
-                this.effectDrawers.set(type, drawer);
-            }
-        });
-        await this.refresh(refresh);
+    addEffect(effect, drawer) {
+        if (this.getEffectDrawer(effect)) {
+            return;
+        }
+        this.effectDrawers.set(effect, drawer);
     }
     addEventListener(type, listener) {
         this._eventDispatcher.addEventListener(type, listener);
     }
-    async addInteractor(name, interactorInitializer, refresh = true) {
+    addInteractor(name, interactorInitializer) {
         this._initializers.interactors.set(name, interactorInitializer);
-        await this.refresh(refresh);
     }
-    async addMover(name, moverInitializer, refresh = true) {
+    addMover(name, moverInitializer) {
         this._initializers.movers.set(name, moverInitializer);
-        await this.refresh(refresh);
     }
-    async addParticleUpdater(name, updaterInitializer, refresh = true) {
+    addParticleUpdater(name, updaterInitializer) {
         this._initializers.updaters.set(name, updaterInitializer);
-        await this.refresh(refresh);
     }
-    async addPathGenerator(name, generator, refresh = true) {
-        if (!this.getPathGenerator(name)) {
-            this.pathGenerators.set(name, generator);
+    addPathGenerator(name, generator) {
+        if (this.getPathGenerator(name)) {
+            return;
         }
-        await this.refresh(refresh);
+        this.pathGenerators.set(name, generator);
     }
-    async addPlugin(plugin, refresh = true) {
-        if (!this.getPlugin(plugin.id)) {
-            this.plugins.push(plugin);
+    addPlugin(plugin) {
+        if (this.getPlugin(plugin.id)) {
+            return;
         }
-        await this.refresh(refresh);
+        this.plugins.push(plugin);
     }
-    async addPreset(preset, options, override = false, refresh = true) {
-        if (override || !this.getPreset(preset)) {
-            this.presets.set(preset, options);
+    addPreset(preset, options, override = false) {
+        if (!(override || !this.getPreset(preset))) {
+            return;
         }
-        await this.refresh(refresh);
+        this.presets.set(preset, options);
     }
-    async addShape(drawer, refresh = true) {
+    addShape(drawer) {
         for (const validType of drawer.validTypes) {
             if (this.getShapeDrawer(validType)) {
                 continue;
             }
             this.shapeDrawers.set(validType, drawer);
         }
-        await this.refresh(refresh);
     }
     checkVersion(pluginVersion) {
         if (this.version === pluginVersion) {
@@ -226,22 +217,29 @@ export class Engine {
     async getUpdaters(container, force = false) {
         return getItemsFromInitializer(container, this.updaters, this._initializers.updaters, force);
     }
-    init() {
+    async init() {
         if (this._initialized) {
             return;
         }
+        for (const loadPromise of this._loadPromises) {
+            await loadPromise(this);
+        }
+        this._loadPromises.clear();
         this._initialized = true;
     }
     item(index) {
         const { items } = this, item = items[index];
-        if (!item || item.destroyed) {
+        if (item?.destroyed) {
             items.splice(index, removeDeleteCount);
             return;
         }
         return item;
     }
     async load(params) {
-        const id = params.id ?? params.element?.id ?? `tsparticles${Math.floor(getRandom() * loadRandomFactor)}`, { index, url } = params, options = url ? await getDataFromUrl({ fallback: params.options, url, index }) : params.options, currentOptions = itemFromSingleOrMultiple(options, index), { items } = this, oldIndex = items.findIndex(v => v.id.description === id), newItem = new Container(this, id, currentOptions);
+        await this.init();
+        const { Container } = await import("./Container.js"), id = params.id ??
+            params.element?.id ??
+            `tsparticles${Math.floor(getRandom() * loadRandomFactor).toString()}`, { index, url } = params, options = url ? await getDataFromUrl({ fallback: params.options, url, index }) : params.options, currentOptions = itemFromSingleOrMultiple(options, index), { items } = this, oldIndex = items.findIndex(v => v.id.description === id), newItem = new Container(this, id, currentOptions);
         if (oldIndex >= loadMinIndex) {
             const old = this.item(oldIndex), deleteCount = old ? one : none;
             if (old && !old.destroyed) {
@@ -258,7 +256,9 @@ export class Engine {
         return newItem;
     }
     loadOptions(options, sourceOptions) {
-        this.plugins.forEach(plugin => plugin.loadOptions?.(options, sourceOptions));
+        this.plugins.forEach(plugin => {
+            plugin.loadOptions(options, sourceOptions);
+        });
     }
     loadParticlesOptions(container, options, ...sourceOptions) {
         const updaters = this.updaters.get(container);
@@ -273,14 +273,24 @@ export class Engine {
         }
         await Promise.all(this.items.map(t => t.refresh()));
     }
+    register(...loadPromises) {
+        if (this._initialized) {
+            throw new Error(`Register plugins can only be done before calling tsParticles.load()`);
+        }
+        for (const loadPromise of loadPromises) {
+            this._loadPromises.add(loadPromise);
+        }
+    }
     removeEventListener(type, listener) {
         this._eventDispatcher.removeEventListener(type, listener);
     }
     setOnClickHandler(callback) {
         const { items } = this;
         if (!items.length) {
-            throw new Error(`${errorPrefix} can only set click handlers after calling tsParticles.load()`);
+            throw new Error("Click handlers can only be set after calling tsParticles.load()");
         }
-        items.forEach(item => item.addClickHandler(callback));
+        items.forEach(item => {
+            item.addClickHandler(callback);
+        });
     }
 }

package/esm/Core/Particle.js

@@ -1,21 +1,17 @@
 import { Vector, Vector3d } from "./Utils/Vectors.js";
-import { calcExactPositionOrRandomFromSize, clamp, degToRad, getDistance, getParticleBaseVelocity, getParticleDirectionAngle, getRandom, getRangeValue, randomInRange, setRangeValue, } from "../Utils/NumberUtils.js";
-import { decayOffset, defaultRadius, defaultRetryCount, double, errorPrefix, half, millisecondsToSeconds, minRetries, minZ, none, randomColorValue, rollFactor, squareExp, tryCountIncrement, } from "./Utils/Constants.js";
+import { calcExactPositionOrRandomFromSize, clamp, degToRad, getParticleBaseVelocity, getParticleDirectionAngle, getRandom, getRangeValue, randomInRangeValue, setRangeValue, } from "../Utils/MathUtils.js";
+import { decayOffset, defaultAngle, defaultRetryCount, double, half, millisecondsToSeconds, minZ, none, randomColorValue, rollFactor, squareExp, tryCountIncrement, } from "./Utils/Constants.js";
 import { deepExtend, getPosition, initParticleNumericAnimationValue, isInArray, itemFromSingleOrMultiple, } from "../Utils/Utils.js";
-import { getHslFromAnimation, rangeColorToRgb } from "../Utils/ColorUtils.js";
 import { EventType } from "../Enums/Types/EventType.js";
 import { Interactivity } from "../Options/Classes/Interactivity/Interactivity.js";
 import { MoveDirection } from "../Enums/Directions/MoveDirection.js";
 import { OutMode } from "../Enums/Modes/OutMode.js";
 import { ParticleOutType } from "../Enums/Types/ParticleOutType.js";
-import { PixelMode } from "../Enums/Modes/PixelMode.js";
 import { alterHsl } from "../Utils/CanvasUtils.js";
+import { getHslFromAnimation } from "../Utils/ColorUtils.js";
 import { loadParticlesOptions } from "../Utils/OptionsUtils.js";
 function loadEffectData(effect, effectOptions, id, reduceDuplicates) {
     const effectData = effectOptions.options[effect];
-    if (!effectData) {
-        return;
-    }
     return deepExtend({
         close: effectOptions.close,
         fill: effectOptions.fill,
@@ -23,9 +19,6 @@ function loadEffectData(effect, effectOptions, id, reduceDuplicates) {
 }
 function loadShapeData(shape, shapeOptions, id, reduceDuplicates) {
     const shapeData = shapeOptions.options[shape];
-    if (!shapeData) {
-        return;
-    }
     return deepExtend({
         close: shapeOptions.close,
         fill: shapeOptions.fill,
@@ -47,8 +40,9 @@ export class Particle {
     constructor(engine, container) {
         this.container = container;
         this._calcPosition = (container, position, zIndex, tryCount = defaultRetryCount) => {
-            for (const plugin of container.plugins.values()) {
-                const pluginPos = plugin.particlePosition !== undefined ? plugin.particlePosition(position, this) : undefined;
+            const plugins = container.plugins.values();
+            for (const plugin of plugins) {
+                const pluginPos = plugin.particlePosition?.(position, this);
                 if (pluginPos) {
                     return Vector3d.create(pluginPos.x, pluginPos.y, zIndex);
                 }
@@ -79,7 +73,14 @@ export class Particle {
             fixHorizontal(outModes.right ?? outModes.default);
             fixVertical(outModes.top ?? outModes.default);
             fixVertical(outModes.bottom ?? outModes.default);
-            if (this._checkOverlap(pos, tryCount)) {
+            let isValidPosition = true;
+            for (const plugin of plugins) {
+                isValidPosition = plugin.checkParticlePosition?.(this, pos, tryCount);
+                if (isValidPosition === false) {
+                    break;
+                }
+            }
+            if (!isValidPosition) {
                 return this._calcPosition(container, undefined, zIndex, tryCount + tryCountIncrement);
             }
             return pos;
@@ -94,33 +95,18 @@ export class Particle {
                 right: radOffset + rad * half,
             };
             if (!moveOptions.straight) {
-                res.angle += randomInRange(setRangeValue(range.left, range.right));
+                res.angle += randomInRangeValue(setRangeValue(range.left, range.right));
             }
             if (moveOptions.random && typeof moveOptions.speed === "number") {
                 res.length *= getRandom();
             }
             return res;
         };
-        this._checkOverlap = (pos, tryCount = defaultRetryCount) => {
-            const collisionsOptions = this.options.collisions, radius = this.getRadius();
-            if (!collisionsOptions.enable) {
-                return false;
-            }
-            const overlapOptions = collisionsOptions.overlap;
-            if (overlapOptions.enable) {
-                return false;
-            }
-            const retries = overlapOptions.retries;
-            if (retries >= minRetries && tryCount > retries) {
-                throw new Error(`${errorPrefix} particle is overlapping and can't be placed`);
-            }
-            return !!this.container.particles.find(particle => getDistance(pos, particle.position) < radius + particle.getRadius());
-        };
         this._getRollColor = color => {
             if (!color || !this.roll || (!this.backColor && !this.roll.alter)) {
                 return color;
             }
-            const backFactor = this.roll.horizontal && this.roll.vertical ? double * rollFactor : rollFactor, backSum = this.roll.horizontal ? Math.PI * half : none, rolled = Math.floor(((this.roll.angle ?? none) + backSum) / (Math.PI / backFactor)) % double;
+            const backFactor = this.roll.horizontal && this.roll.vertical ? double * rollFactor : rollFactor, backSum = this.roll.horizontal ? Math.PI * half : none, rolled = Math.floor((this.roll.angle + backSum) / (Math.PI / backFactor)) % double;
             if (!rolled) {
                 return color;
             }
@@ -139,8 +125,8 @@ export class Particle {
             const canvasSize = container.canvas.size;
             this.moveCenter = {
                 ...getPosition(this.options.move.center, canvasSize),
-                radius: this.options.move.center.radius ?? defaultRadius,
-                mode: this.options.move.center.mode ?? PixelMode.percent,
+                radius: this.options.move.center.radius,
+                mode: this.options.move.center.mode,
             };
             this.direction = getParticleDirectionAngle(this.options.move.direction, this.position, this.moveCenter);
             switch (this.options.move.direction) {
@@ -162,7 +148,7 @@ export class Particle {
         this.destroyed = true;
         this.bubble.inRange = false;
         this.slow.inRange = false;
-        const container = this.container, pathGenerator = this.pathGenerator, shapeDrawer = container.shapeDrawers.get(this.shape);
+        const container = this.container, pathGenerator = this.pathGenerator, shapeDrawer = this.shape ? container.shapeDrawers.get(this.shape) : undefined;
         shapeDrawer?.particleDestroy?.(this);
         for (const plugin of container.plugins.values()) {
             plugin.particleDestroyed?.(this, override);
@@ -185,6 +171,9 @@ export class Particle {
         }
         canvas.drawParticle(this, delta);
     }
+    getAngle() {
+        return this.rotation + (this.pathRotation ? this.velocity.angle : defaultAngle);
+    }
     getFillColor() {
         return this._getRollColor(this.bubble.color ?? getHslFromAnimation(this.color));
     }
@@ -224,7 +213,7 @@ export class Particle {
         };
         this.outType = ParticleOutType.normal;
         this.ignoresResizeRatio = true;
-        const pxRatio = container.retina.pixelRatio, mainOptions = container.actualOptions, particlesOptions = loadParticlesOptions(this._engine, container, mainOptions.particles), { reduceDuplicates } = particlesOptions, effectType = particlesOptions.effect.type, shapeType = particlesOptions.shape.type;
+        const pxRatio = container.retina.pixelRatio, mainOptions = container.actualOptions, particlesOptions = loadParticlesOptions(this._engine, container, mainOptions.particles), reduceDuplicates = particlesOptions.reduceDuplicates, effectType = particlesOptions.effect.type, shapeType = particlesOptions.shape.type;
         this.effect = itemFromSingleOrMultiple(effectType, this.id, reduceDuplicates);
         this.shape = itemFromSingleOrMultiple(shapeType, this.id, reduceDuplicates);
         const effectOptions = particlesOptions.effect, shapeOptions = particlesOptions.shape;
@@ -252,8 +241,10 @@ export class Particle {
             const availableShapes = [...this.container.shapeDrawers.keys()];
             this.shape = availableShapes[Math.floor(getRandom() * availableShapes.length)];
         }
-        this.effectData = loadEffectData(this.effect, effectOptions, this.id, reduceDuplicates);
-        this.shapeData = loadShapeData(this.shape, shapeOptions, this.id, reduceDuplicates);
+        this.effectData = this.effect
+            ? loadEffectData(this.effect, effectOptions, this.id, reduceDuplicates)
+            : undefined;
+        this.shapeData = this.shape ? loadShapeData(this.shape, shapeOptions, this.id, reduceDuplicates) : undefined;
         particlesOptions.load(overrideOptions);
         const effectData = this.effectData;
         if (effectData) {
@@ -297,21 +288,26 @@ export class Particle {
         particles.setLastZIndex(this.position.z);
         this.zIndexFactor = this.position.z / container.zLayers;
         this.sides = 24;
-        let effectDrawer = container.effectDrawers.get(this.effect);
-        if (!effectDrawer) {
-            effectDrawer = this._engine.getEffectDrawer(this.effect);
-            if (effectDrawer) {
-                container.effectDrawers.set(this.effect, effectDrawer);
+        let effectDrawer, shapeDrawer;
+        if (this.effect) {
+            effectDrawer = container.effectDrawers.get(this.effect);
+            if (!effectDrawer) {
+                effectDrawer = this._engine.getEffectDrawer(this.effect);
+                if (effectDrawer) {
+                    container.effectDrawers.set(this.effect, effectDrawer);
+                }
             }
         }
         if (effectDrawer?.loadEffect) {
             effectDrawer.loadEffect(this);
         }
-        let shapeDrawer = container.shapeDrawers.get(this.shape);
-        if (!shapeDrawer) {
-            shapeDrawer = this._engine.getShapeDrawer(this.shape);
-            if (shapeDrawer) {
-                container.shapeDrawers.set(this.shape, shapeDrawer);
+        if (this.shape) {
+            shapeDrawer = container.shapeDrawers.get(this.shape);
+            if (!shapeDrawer) {
+                shapeDrawer = this._engine.getShapeDrawer(this.shape);
+                if (shapeDrawer) {
+                    container.shapeDrawers.set(this.shape, shapeDrawer);
+                }
             }
         }
         if (shapeDrawer?.loadShape) {
@@ -322,12 +318,11 @@ export class Particle {
             this.sides = sideCountFunc(this);
         }
         this.spawning = false;
-        this.shadowColor = rangeColorToRgb(this._engine, this.options.shadow.color);
         for (const updater of particles.updaters) {
             updater.init(this);
         }
         for (const mover of particles.movers) {
-            mover.init?.(this);
+            mover.init(this);
         }
         effectDrawer?.particleInit?.(container, this);
         shapeDrawer?.particleInit?.(container, this);

package/esm/Core/Particles.js

@@ -1,5 +1,4 @@
-import { countOffset, defaultDensityFactor, defaultRemoveQuantity, deleteCount, errorPrefix, lengthOffset, minCount, minIndex, minLimit, posOffset, qTreeCapacity, sizeFactor, squareExp, } from "./Utils/Constants.js";
-import { getLogger, getPosition } from "../Utils/Utils.js";
+import { countOffset, defaultDensityFactor, defaultRemoveQuantity, deleteCount, lengthOffset, minCount, minIndex, minLimit, posOffset, qTreeCapacity, sizeFactor, squareExp, } from "./Utils/Constants.js";
 import { EventType } from "../Enums/Types/EventType.js";
 import { InteractionManager } from "./Utils/InteractionManager.js";
 import { LimitMode } from "../Enums/Modes/LimitMode.js";
@@ -7,6 +6,9 @@ import { Particle } from "./Particle.js";
 import { Point } from "./Utils/Point.js";
 import { QuadTree } from "./Utils/QuadTree.js";
 import { Rectangle } from "./Utils/Ranges.js";
+import { getLogger } from "../Utils/LogUtils.js";
+import { getPosition } from "../Utils/Utils.js";
+import { loadParticlesOptions } from "../Utils/OptionsUtils.js";
 const qTreeRectangle = (canvasSize) => {
     const { height, width } = canvasSize;
     return new Rectangle(posOffset * width, posOffset * height, sizeFactor * width, sizeFactor * height);
@@ -18,12 +20,12 @@ export class Particles {
         };
         this._applyDensity = (options, manualCount, group, groupOptions) => {
             const numberOptions = options.number;
-            if (!options.number.density?.enable) {
+            if (!numberOptions.density.enable) {
                 if (group === undefined) {
                     this._limit = numberOptions.limit.value;
                 }
-                else if (groupOptions?.number.limit?.value ?? numberOptions.limit.value) {
-                    this._groupLimits.set(group, groupOptions?.number.limit?.value ?? numberOptions.limit.value);
+                else if (groupOptions?.number.limit.value ?? numberOptions.limit.value) {
+                    this._groupLimits.set(group, groupOptions?.number.limit.value ?? numberOptions.limit.value);
                 }
                 return;
             }
@@ -51,10 +53,7 @@ export class Particles {
         };
         this._pushParticle = (position, overrideOptions, group, initializer) => {
             try {
-                let particle = this._pool.pop();
-                if (!particle) {
-                    particle = new Particle(this._engine, this._container);
-                }
+                const particle = this._pool.pop() ?? new Particle(this._engine, this._container);
                 particle.init(this._nextId, position, overrideOptions, group);
                 let canAdd = true;
                 if (initializer) {
@@ -75,12 +74,16 @@ export class Particles {
                 return particle;
             }
             catch (e) {
-                getLogger().warning(`${errorPrefix} adding particle: ${e}`);
+                getLogger().warning(`error adding particle: ${e}`);
             }
+            return undefined;
         };
         this._removeParticle = (index, group, override) => {
             const particle = this._array[index];
-            if (!particle || particle.group !== group) {
+            if (!particle) {
+                return false;
+            }
+            if (particle.group !== group) {
                 return false;
             }
             const zIdx = this._zArray.indexOf(particle);
@@ -151,15 +154,9 @@ export class Particles {
         this.movers = [];
         this.updaters = [];
     }
-    draw(delta) {
-        const container = this._container, canvas = container.canvas;
-        canvas.clear();
-        this.update(delta);
-        for (const plugin of container.plugins.values()) {
-            canvas.drawPlugin(plugin, delta);
-        }
-        for (const p of this._zArray) {
-            p.draw(delta);
+    drawParticles(delta) {
+        for (const particle of this._zArray) {
+            particle.draw(delta);
         }
     }
     filter(condition) {
@@ -191,7 +188,10 @@ export class Particles {
             const particlesOptions = options.particles, groups = particlesOptions.groups;
             for (const group in groups) {
                 const groupOptions = groups[group];
-                for (let i = this.count, j = 0; j < groupOptions.number?.value && i < particlesOptions.number.value; i++, j++) {
+                if (!groupOptions) {
+                    continue;
+                }
+                for (let i = this.count, j = 0; j < groupOptions.number.value && i < particlesOptions.number.value; i++, j++) {
                     this.addParticle(undefined, groupOptions, group);
                 }
             }
@@ -220,7 +220,7 @@ export class Particles {
     async redraw() {
         this.clear();
         await this.init();
-        this.draw({ value: 0, factor: 0 });
+        this._container.canvas.drawParticles({ value: 0, factor: 0 });
     }
     remove(particle, group, override) {
         this.removeAt(this._array.indexOf(particle), undefined, group, override);
@@ -243,7 +243,12 @@ export class Particles {
     setDensity() {
         const options = this._container.actualOptions, groups = options.particles.groups, manualCount = options.manualParticles.length;
         for (const group in groups) {
-            this._applyDensity(groups[group], manualCount, group);
+            const groupData = groups[group];
+            if (!groupData) {
+                continue;
+            }
+            const groupDataOptions = loadParticlesOptions(this._engine, this._container, groupData);
+            this._applyDensity(groupDataOptions, manualCount, group);
         }
         this._applyDensity(options.particles, manualCount);
     }
@@ -317,7 +322,11 @@ export class Particles {
         if (this._needsSort) {
             const zArray = this._zArray;
             zArray.sort((a, b) => b.position.z - a.position.z || a.id - b.id);
-            this._lastZIndex = zArray[zArray.length - lengthOffset].position.z;
+            const lastItem = zArray[zArray.length - lengthOffset];
+            if (!lastItem) {
+                return;
+            }
+            this._lastZIndex = lastItem.position.z;
             this._needsSort = false;
         }
     }

package/esm/Core/Retina.js

@@ -1,6 +1,5 @@
 import { defaultRatio, defaultReduceFactor } from "./Utils/Constants.js";
-import { getRangeValue } from "../Utils/NumberUtils.js";
-import { isSsr } from "../Utils/Utils.js";
+import { getRangeValue } from "../Utils/MathUtils.js";
 export class Retina {
     constructor(container) {
         this.container = container;
@@ -9,7 +8,7 @@ export class Retina {
     }
     init() {
         const container = this.container, options = container.actualOptions;
-        this.pixelRatio = !options.detectRetina || isSsr() ? defaultRatio : devicePixelRatio;
+        this.pixelRatio = options.detectRetina ? devicePixelRatio : defaultRatio;
         this.reduceFactor = defaultReduceFactor;
         const ratio = this.pixelRatio, canvas = container.canvas;
         if (canvas.element) {

package/esm/Core/Utils/Constants.js

@@ -1,4 +1,4 @@
-export const generatedAttribute = "generated", mouseDownEvent = "pointerdown", mouseUpEvent = "pointerup", mouseLeaveEvent = "pointerleave", mouseOutEvent = "pointerout", mouseMoveEvent = "pointermove", touchStartEvent = "touchstart", touchEndEvent = "touchend", touchMoveEvent = "touchmove", touchCancelEvent = "touchcancel", resizeEvent = "resize", visibilityChangeEvent = "visibilitychange", errorPrefix = "tsParticles - Error", percentDenominator = 100, half = 0.5, millisecondsToSeconds = 1000, originPoint = {
+export const generatedAttribute = "generated", mouseDownEvent = "pointerdown", mouseUpEvent = "pointerup", mouseLeaveEvent = "pointerleave", mouseOutEvent = "pointerout", mouseMoveEvent = "pointermove", touchStartEvent = "touchstart", touchEndEvent = "touchend", touchMoveEvent = "touchmove", touchCancelEvent = "touchcancel", resizeEvent = "resize", visibilityChangeEvent = "visibilitychange", percentDenominator = 100, half = 0.5, millisecondsToSeconds = 1000, originPoint = {
     x: 0,
     y: 0,
     z: 0,
@@ -7,4 +7,4 @@ export const generatedAttribute = "generated", mouseDownEvent = "pointerdown", m
     b: 0,
     c: 0,
     d: 1,
-}, randomColorValue = "random", midColorValue = "mid", double = 2, doublePI = Math.PI * double, defaultFps = 60, defaultAlpha = 1, generatedTrue = "true", generatedFalse = "false", canvasTag = "canvas", defaultRetryCount = 0, squareExp = 2, qTreeCapacity = 4, defaultRemoveQuantity = 1, defaultRatio = 1, defaultReduceFactor = 1, subdivideCount = 4, inverseFactorNumerator = 1.0, rgbMax = 255, hMax = 360, sMax = 100, lMax = 100, hMin = 0, sMin = 0, hPhase = 60, empty = 0, quarter = 0.25, threeQuarter = half + quarter, minVelocity = 0, defaultTransformValue = 1, minimumSize = 0, minimumLength = 0, zIndexFactorOffset = 1, defaultOpacity = 1, clickRadius = 1, touchEndLengthOffset = 1, minCoordinate = 0, removeDeleteCount = 1, removeMinIndex = 0, defaultFpsLimit = 120, minFpsLimit = 0, canvasFirstIndex = 0, loadRandomFactor = 10000, loadMinIndex = 0, one = 1, none = 0, decayOffset = 1, tryCountIncrement = 1, minRetries = 0, rollFactor = 1, minZ = 0, defaultRadius = 0, posOffset = -quarter, sizeFactor = 1.5, minLimit = 0, countOffset = 1, minCount = 0, minIndex = 0, manualCount = 0, lengthOffset = 1, defaultDensityFactor = 1, deleteCount = 1, touchDelay = 500, manualDefaultPosition = 50, defaultAngle = 0, identity = 1, minStrokeWidth = 0, lFactor = 1, lMin = 0, rgbFactor = 255, triple = 3, sextuple = 6, sNormalizedOffset = 1, phaseNumerator = 1, defaultRgbMin = 0, defaultVelocity = 0, defaultLoops = 0, defaultTime = 0;
+}, randomColorValue = "random", midColorValue = "mid", double = 2, doublePI = Math.PI * double, defaultFps = 60, defaultAlpha = 1, generatedTrue = "true", generatedFalse = "false", canvasTag = "canvas", defaultRetryCount = 0, squareExp = 2, qTreeCapacity = 4, defaultRemoveQuantity = 1, defaultRatio = 1, defaultReduceFactor = 1, subdivideCount = 4, inverseFactorNumerator = 1.0, rgbMax = 255, hMax = 360, sMax = 100, lMax = 100, hMin = 0, sMin = 0, hPhase = 60, empty = 0, quarter = 0.25, threeQuarter = half + quarter, minVelocity = 0, defaultTransformValue = 1, minimumSize = 0, minimumLength = 0, zIndexFactorOffset = 1, defaultOpacity = 1, clickRadius = 1, touchEndLengthOffset = 1, minCoordinate = 0, removeDeleteCount = 1, removeMinIndex = 0, defaultFpsLimit = 120, minFpsLimit = 0, canvasFirstIndex = 0, loadRandomFactor = 10000, loadMinIndex = 0, one = 1, none = 0, decayOffset = 1, tryCountIncrement = 1, minRetries = 0, rollFactor = 1, minZ = 0, defaultRadius = 0, posOffset = -quarter, sizeFactor = 1.5, minLimit = 0, countOffset = 1, minCount = 0, minIndex = 0, manualCount = 0, lengthOffset = 1, defaultDensityFactor = 1, deleteCount = 1, touchDelay = 500, manualDefaultPosition = 50, defaultAngle = 0, identity = 1, minStrokeWidth = 0, lFactor = 1, lMin = 0, triple = 3, sextuple = 6, sNormalizedOffset = 1, phaseNumerator = 1, defaultRgbMin = 0, defaultVelocity = 0, defaultLoops = 0, defaultTime = 0;