@tsparticles/engine 4.0.0-beta.9 → 4.0.0

package/cjs/Core/ParticlesManager.js

@@ -1,4 +1,4 @@
-import { countOffset, defaultDensityFactor, defaultRemoveQuantity, deleteCount, lengthOffset, minCount, minIndex, minLimit, spatialHashGridCellSize, squareExp, } from "./Utils/Constants.js";
+import { countOffset, defaultDensityFactor, defaultRemoveQuantity, deleteCount, double, empty, minCount, minIndex, minLimit, one, spatialHashGridCellSize, squareExp, } from "./Utils/Constants.js";
 import { EventType } from "../Enums/Types/EventType.js";
 import { LimitMode } from "../Enums/Modes/LimitMode.js";
 import { Particle } from "./Particle.js";
@@ -12,10 +12,8 @@ export class ParticlesManager {
     _container;
     _groupLimits;
     _limit;
-    _maxZIndex;
-    _minZIndex;
-    _needsSort;
     _nextId;
+    _particleBuckets;
     _particleResetPlugins;
     _particleUpdatePlugins;
     _pluginManager;
@@ -24,19 +22,17 @@ export class ParticlesManager {
     _postUpdatePlugins;
     _resizeFactor;
     _updatePlugins;
-    _zArray;
+    _zBuckets;
     constructor(pluginManager, container) {
         this._pluginManager = pluginManager;
         this._container = container;
         this._nextId = 0;
         this._array = [];
-        this._zArray = [];
         this._pool = [];
         this._limit = 0;
         this._groupLimits = new Map();
-        this._needsSort = false;
-        this._minZIndex = 0;
-        this._maxZIndex = 0;
+        this._particleBuckets = new Map();
+        this._zBuckets = this._createBuckets(this._container.zLayers);
         this.grid = new SpatialHashGrid(spatialHashGridCellSize);
         this.checkParticlePositionPlugins = [];
         this._particleResetPlugins = [];
@@ -80,7 +76,7 @@ export class ParticlesManager {
                 return;
             }
             this._array.push(particle);
-            this._zArray.push(particle);
+            this._insertParticleIntoBucket(particle);
             this._nextId++;
             this._container.dispatchEvent(EventType.particleAdded, {
                 particle,
@@ -94,12 +90,14 @@ export class ParticlesManager {
     }
     clear() {
         this._array = [];
-        this._zArray = [];
+        this._particleBuckets.clear();
+        this._resetBuckets(this._container.zLayers);
     }
     destroy() {
         this._array = [];
         this._pool.length = 0;
-        this._zArray = [];
+        this._particleBuckets.clear();
+        this._zBuckets = [];
         this.checkParticlePositionPlugins = [];
         this._particleResetPlugins = [];
         this._particleUpdatePlugins = [];
@@ -108,8 +106,14 @@ export class ParticlesManager {
         this._updatePlugins = [];
     }
     drawParticles(delta) {
-        for (const particle of this._zArray) {
-            particle.draw(delta);
+        for (let i = this._zBuckets.length - one; i >= minIndex; i--) {
+            const bucket = this._zBuckets[i];
+            if (!bucket) {
+                continue;
+            }
+            for (const particle of bucket) {
+                particle.draw(delta);
+            }
         }
     }
     filter(condition) {
@@ -123,15 +127,14 @@ export class ParticlesManager {
     }
     async init() {
         const container = this._container, options = container.actualOptions;
-        this._minZIndex = 0;
-        this._maxZIndex = 0;
-        this._needsSort = false;
         this.checkParticlePositionPlugins = [];
         this._updatePlugins = [];
         this._particleUpdatePlugins = [];
         this._postUpdatePlugins = [];
         this._particleResetPlugins = [];
         this._postParticleUpdatePlugins = [];
+        this._particleBuckets.clear();
+        this._resetBuckets(container.zLayers);
         this.grid = new SpatialHashGrid(spatialHashGridCellSize * container.retina.pixelRatio);
         for (const plugin of container.plugins) {
             if (plugin.redrawInit) {
@@ -232,79 +235,25 @@ export class ParticlesManager {
         }
         this._applyDensity(options.particles, pluginsCount);
     }
-    setLastZIndex(zIndex) {
-        this._needsSort ||= zIndex >= this._maxZIndex || (zIndex > this._minZIndex && zIndex < this._maxZIndex);
-    }
     setResizeFactor(factor) {
         this._resizeFactor = factor;
     }
     update(delta) {
-        const particlesToDelete = new Set();
         this.grid.clear();
         for (const plugin of this._updatePlugins) {
             plugin.update?.(delta);
         }
-        const resizeFactor = this._resizeFactor;
-        for (const particle of this._array) {
-            if (resizeFactor && !particle.ignoresResizeRatio) {
-                particle.position.x *= resizeFactor.width;
-                particle.position.y *= resizeFactor.height;
-                particle.initialPosition.x *= resizeFactor.width;
-                particle.initialPosition.y *= resizeFactor.height;
-            }
-            particle.ignoresResizeRatio = false;
-            for (const plugin of this._particleResetPlugins) {
-                plugin.particleReset?.(particle);
-            }
-            for (const plugin of this._particleUpdatePlugins) {
-                if (particle.destroyed) {
-                    break;
-                }
-                plugin.particleUpdate?.(particle, delta);
-            }
-            if (particle.destroyed) {
-                particlesToDelete.add(particle);
-                continue;
-            }
-            this.grid.insert(particle);
-        }
+        const particlesToDelete = this._updateParticlesPhase1(delta);
         for (const plugin of this._postUpdatePlugins) {
             plugin.postUpdate?.(delta);
         }
-        for (const particle of this._array) {
-            if (particle.destroyed) {
-                particlesToDelete.add(particle);
-                continue;
-            }
-            for (const updater of this._container.particleUpdaters) {
-                updater.update(particle, delta);
-            }
-            if (!particle.destroyed && !particle.spawning) {
-                for (const plugin of this._postParticleUpdatePlugins) {
-                    plugin.postParticleUpdate?.(particle, delta);
-                }
-            }
-            else if (particle.destroyed) {
-                particlesToDelete.add(particle);
-            }
-        }
+        this._updateParticlesPhase2(delta, particlesToDelete);
         if (particlesToDelete.size) {
             for (const particle of particlesToDelete) {
                 this.remove(particle);
             }
         }
         delete this._resizeFactor;
-        if (this._needsSort) {
-            const zArray = this._zArray;
-            zArray.sort((a, b) => b.position.z - a.position.z || a.id - b.id);
-            const firstItem = zArray[minIndex], lastItem = zArray[zArray.length - lengthOffset];
-            if (!firstItem || !lastItem) {
-                return;
-            }
-            this._maxZIndex = firstItem.position.z;
-            this._minZIndex = lastItem.position.z;
-            this._needsSort = false;
-        }
     }
     _addToPool = (...particles) => {
         this._pool.push(...particles);
@@ -334,13 +283,52 @@ export class ParticlesManager {
             this.removeQuantity(particlesCount - particlesNumber, group);
         }
     };
+    _createBuckets = (zLayers) => {
+        const bucketCount = Math.max(Math.floor(zLayers), one);
+        return Array.from({ length: bucketCount }, () => []);
+    };
+    _getBucketIndex = (zIndex) => {
+        const maxBucketIndex = this._zBuckets.length - one;
+        if (maxBucketIndex <= minIndex) {
+            return minIndex;
+        }
+        return Math.min(Math.max(Math.floor(zIndex), minIndex), maxBucketIndex);
+    };
+    _getParticleInsertIndex = (bucket, particleId) => {
+        let start = minIndex, end = bucket.length;
+        while (start < end) {
+            const middle = Math.floor((start + end) / double), middleParticle = bucket[middle];
+            if (!middleParticle) {
+                end = middle;
+                continue;
+            }
+            if (middleParticle.id < particleId) {
+                start = middle + one;
+            }
+            else {
+                end = middle;
+            }
+        }
+        return start;
+    };
     _initDensityFactor = densityOptions => {
         const container = this._container;
-        if (!container.canvas.element || !densityOptions.enable) {
+        if (!densityOptions.enable) {
             return defaultDensityFactor;
         }
-        const canvas = container.canvas.element, pxRatio = container.retina.pixelRatio;
-        return (canvas.width * canvas.height) / (densityOptions.height * densityOptions.width * pxRatio ** squareExp);
+        const canvasSize = container.canvas.size, pxRatio = container.retina.pixelRatio;
+        if (!canvasSize.width || !canvasSize.height) {
+            return defaultDensityFactor;
+        }
+        return ((canvasSize.width * canvasSize.height) / (densityOptions.height * densityOptions.width * pxRatio ** squareExp));
+    };
+    _insertParticleIntoBucket = (particle) => {
+        const bucketIndex = this._getBucketIndex(particle.position.z), bucket = this._zBuckets[bucketIndex];
+        if (!bucket) {
+            return;
+        }
+        bucket.splice(this._getParticleInsertIndex(bucket, particle.id), empty, particle);
+        this._particleBuckets.set(particle.id, bucketIndex);
     };
     _removeParticle = (index, group, override) => {
         const particle = this._array[index];
@@ -350,9 +338,8 @@ export class ParticlesManager {
         if (particle.group !== group) {
             return false;
         }
-        const zIdx = this._zArray.indexOf(particle);
         this._array.splice(index, deleteCount);
-        this._zArray.splice(zIdx, deleteCount);
+        this._removeParticleFromBucket(particle);
         particle.destroy(override);
         this._container.dispatchEvent(EventType.particleRemoved, {
             particle,
@@ -360,4 +347,96 @@ export class ParticlesManager {
         this._addToPool(particle);
         return true;
     };
+    _removeParticleFromBucket = (particle) => {
+        const bucketIndex = this._particleBuckets.get(particle.id) ?? this._getBucketIndex(particle.position.z), bucket = this._zBuckets[bucketIndex];
+        if (!bucket) {
+            this._particleBuckets.delete(particle.id);
+            return;
+        }
+        const particleIndex = this._getParticleInsertIndex(bucket, particle.id);
+        if (bucket[particleIndex]?.id !== particle.id) {
+            this._particleBuckets.delete(particle.id);
+            return;
+        }
+        bucket.splice(particleIndex, deleteCount);
+        this._particleBuckets.delete(particle.id);
+    };
+    _resetBuckets = (zLayers) => {
+        const bucketCount = Math.max(Math.floor(zLayers), one);
+        if (this._zBuckets.length !== bucketCount) {
+            this._zBuckets = this._createBuckets(bucketCount);
+            return;
+        }
+        for (const bucket of this._zBuckets) {
+            bucket.length = minIndex;
+        }
+    };
+    _updateParticleBucket = (particle) => {
+        const newBucketIndex = this._getBucketIndex(particle.position.z), currentBucketIndex = this._particleBuckets.get(particle.id);
+        if (currentBucketIndex === undefined) {
+            this._insertParticleIntoBucket(particle);
+            return;
+        }
+        if (currentBucketIndex === newBucketIndex) {
+            return;
+        }
+        const currentBucket = this._zBuckets[currentBucketIndex];
+        if (currentBucket) {
+            const particleIndex = this._getParticleInsertIndex(currentBucket, particle.id);
+            if (currentBucket[particleIndex]?.id === particle.id) {
+                currentBucket.splice(particleIndex, deleteCount);
+            }
+        }
+        const newBucket = this._zBuckets[newBucketIndex];
+        if (!newBucket) {
+            this._particleBuckets.set(particle.id, newBucketIndex);
+            return;
+        }
+        newBucket.splice(this._getParticleInsertIndex(newBucket, particle.id), empty, particle);
+        this._particleBuckets.set(particle.id, newBucketIndex);
+    };
+    _updateParticlesPhase1 = (delta) => {
+        const particlesToDelete = new Set(), resizeFactor = this._resizeFactor;
+        for (const particle of this._array) {
+            if (resizeFactor && !particle.ignoresResizeRatio) {
+                particle.position.x *= resizeFactor.width;
+                particle.position.y *= resizeFactor.height;
+                particle.initialPosition.x *= resizeFactor.width;
+                particle.initialPosition.y *= resizeFactor.height;
+            }
+            particle.ignoresResizeRatio = false;
+            for (const plugin of this._particleResetPlugins) {
+                plugin.particleReset?.(particle);
+            }
+            for (const plugin of this._particleUpdatePlugins) {
+                if (particle.destroyed) {
+                    break;
+                }
+                plugin.particleUpdate?.(particle, delta);
+            }
+            if (particle.destroyed) {
+                particlesToDelete.add(particle);
+                continue;
+            }
+            this.grid.insert(particle);
+        }
+        return particlesToDelete;
+    };
+    _updateParticlesPhase2 = (delta, particlesToDelete) => {
+        for (const particle of this._array) {
+            if (particle.destroyed) {
+                particlesToDelete.add(particle);
+                continue;
+            }
+            for (const updater of this._container.particleUpdaters) {
+                updater.update(particle, delta);
+            }
+            if (!particle.spawning) {
+                for (const plugin of this._postParticleUpdatePlugins) {
+                    plugin.postParticleUpdate?.(particle, delta);
+                }
+            }
+            this._updateParticleBucket(particle);
+        }
+    };
 }

package/cjs/Core/Retina.js

@@ -13,9 +13,8 @@ export class Retina {
         const container = this.container, options = container.actualOptions;
         this.pixelRatio = options.detectRetina ? devicePixelRatio : defaultRatio;
         this.reduceFactor = defaultReduceFactor;
-        const ratio = this.pixelRatio, canvas = container.canvas;
-        if (canvas.element) {
-            const element = canvas.element;
+        const ratio = this.pixelRatio, canvas = container.canvas, element = canvas.domElement;
+        if (element) {
             canvas.size.width = element.offsetWidth * ratio;
             canvas.size.height = element.offsetHeight * ratio;
         }

package/cjs/Core/Utils/EventListeners.js

@@ -66,7 +66,7 @@ export class EventListeners {
             manageListener(globalThis, resizeEvent, handlers.resize, add);
             return;
         }
-        const canvasEl = container.canvas.element;
+        const canvasEl = container.canvas.domElement;
         if (this._resizeObserver && !add) {
             if (canvasEl) {
                 this._resizeObserver.unobserve(canvasEl);

package/cjs/Options/Classes/Particles/Fill.js

@@ -7,8 +7,6 @@ export class Fill {
     opacity;
     constructor() {
         this.enable = true;
-        this.color = new AnimatableColor();
-        this.color.value = "#fff";
         this.opacity = 1;
     }
     load(data) {

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

@@ -0,0 +1,25 @@
+import { AnimatableColor } from "../AnimatableColor.js";
+import { Fill } from "./Fill.js";
+import { Stroke } from "./Stroke.js";
+import { isNull } from "../../../Utils/TypeUtils.js";
+export class Paint {
+    color;
+    fill;
+    stroke;
+    load(data) {
+        if (isNull(data)) {
+            return;
+        }
+        if (data.color !== undefined) {
+            this.color = AnimatableColor.create(this.color, data.color);
+        }
+        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);
+        }
+    }
+}

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

@@ -1,28 +1,28 @@
 import { deepExtend, executeOnSingleOrMultiple } from "../../../Utils/Utils.js";
 import { isArray, isNull } from "../../../Utils/TypeUtils.js";
+import { AnimatableColor } from "../AnimatableColor.js";
 import { Effect } from "./Effect/Effect.js";
 import { Fill } from "./Fill.js";
 import { Move } from "./Move/Move.js";
 import { Opacity } from "./Opacity/Opacity.js";
+import { Paint } from "./Paint.js";
 import { ParticlesBounce } from "./Bounce/ParticlesBounce.js";
 import { ParticlesNumber } from "./Number/ParticlesNumber.js";
 import { Shape } from "./Shape/Shape.js";
 import { Size } from "./Size/Size.js";
-import { Stroke } from "./Stroke.js";
 import { ZIndex } from "./ZIndex/ZIndex.js";
 export class ParticlesOptions {
     bounce;
     effect;
-    fill;
     groups;
     move;
     number;
     opacity;
+    paint;
     palette;
     reduceDuplicates;
     shape;
     size;
-    stroke;
     zIndex;
     _container;
     _pluginManager;
@@ -31,15 +31,18 @@ export class ParticlesOptions {
         this._container = container;
         this.bounce = new ParticlesBounce();
         this.effect = new Effect();
-        this.fill = new Fill();
         this.groups = {};
         this.move = new Move();
         this.number = new ParticlesNumber();
         this.opacity = new Opacity();
+        this.paint = new Paint();
+        this.paint.color = new AnimatableColor();
+        this.paint.color.value = "#fff";
+        this.paint.fill = new Fill();
+        this.paint.fill.enable = true;
         this.reduceDuplicates = false;
         this.shape = new Shape();
         this.size = new Size();
-        this.stroke = new Stroke();
         this.zIndex = new ZIndex();
     }
     load(data) {
@@ -69,25 +72,26 @@ export class ParticlesOptions {
         this.move.load(data.move);
         this.number.load(data.number);
         this.opacity.load(data.opacity);
+        const paintToLoad = data.paint;
+        if (paintToLoad) {
+            if (isArray(paintToLoad)) {
+                this.paint = executeOnSingleOrMultiple(paintToLoad, t => {
+                    const tmp = new Paint();
+                    tmp.load(t);
+                    return tmp;
+                });
+            }
+            else if (isArray(this.paint)) {
+                this.paint = new Paint();
+                this.paint.load(paintToLoad);
+            }
+            else {
+                this.paint.load(paintToLoad);
+            }
+        }
         this.shape.load(data.shape);
         this.size.load(data.size);
         this.zIndex.load(data.zIndex);
-        const fillToLoad = data.fill;
-        if (fillToLoad) {
-            this.fill = executeOnSingleOrMultiple(fillToLoad, t => {
-                const tmp = new Fill();
-                tmp.load(t);
-                return tmp;
-            });
-        }
-        const strokeToLoad = data.stroke;
-        if (strokeToLoad) {
-            this.stroke = executeOnSingleOrMultiple(strokeToLoad, t => {
-                const tmp = new Stroke();
-                tmp.load(t);
-                return tmp;
-            });
-        }
         if (this._container) {
             for (const plugin of this._pluginManager.plugins) {
                 if (plugin.loadParticlesOptions) {
@@ -109,38 +113,40 @@ export class ParticlesOptions {
         if (!paletteData) {
             return;
         }
-        const paletteColors = paletteData.colors, paletteFill = paletteColors.fill, paletteStroke = paletteColors.stroke;
-        let paletteFillObj = undefined;
-        if (paletteFill) {
-            paletteFillObj = {
-                color: {
-                    value: paletteFill.value,
-                },
-                enable: paletteFill.enable,
-            };
-        }
-        let paletteStrokeObj = undefined;
-        if (paletteStroke) {
-            if (isArray(paletteStroke)) {
-                paletteStrokeObj = paletteStroke.map(s => ({
+        const paletteColors = paletteData.colors, defaultPaintStrokeWidth = 0, defaultPaintVariantsLength = 1, firstPaintVariantIndex = 0, defaultPalettePaintVariant = {}, colorVariants = isArray(paletteColors) ? paletteColors : [paletteColors], palettePaintVariants = colorVariants.flatMap(variant => {
+            const paletteFill = variant.fill, paletteStroke = variant.stroke, fillPart = paletteFill
+                ? {
                     color: {
-                        value: s.value,
+                        value: paletteFill.value,
                     },
-                    width: s.width,
-                }));
-            }
-            else {
-                paletteStrokeObj = {
-                    color: {
-                        value: paletteStroke.value,
+                    enable: paletteFill.enable,
+                    opacity: paletteFill.opacity,
+                }
+                : undefined;
+            if (!paletteStroke) {
+                return [
+                    {
+                        fill: fillPart,
                     },
-                    width: paletteStroke.width,
-                };
+                ];
             }
-        }
+            return [
+                {
+                    fill: fillPart,
+                    stroke: {
+                        color: {
+                            value: paletteStroke.value,
+                        },
+                        opacity: paletteStroke.opacity,
+                        width: paletteStroke.width || defaultPaintStrokeWidth,
+                    },
+                },
+            ];
+        }), palettePaint = palettePaintVariants.length > defaultPaintVariantsLength
+            ? palettePaintVariants
+            : (palettePaintVariants[firstPaintVariantIndex] ?? defaultPalettePaintVariant);
         this.load({
-            fill: paletteFillObj,
-            stroke: paletteStrokeObj,
+            paint: palettePaint,
             blend: {
                 enable: true,
                 mode: paletteData.blendMode,

package/cjs/Utils/CanvasUtils.js

@@ -88,12 +88,12 @@ export function drawShape(drawer, data) {
     if (particle.shapeClose) {
         context.closePath();
     }
-    if (stroke) {
-        context.stroke();
-    }
     if (fill) {
         context.fill();
     }
+    if (stroke) {
+        context.stroke();
+    }
 }
 export function drawShapeAfterDraw(drawer, data) {
     if (!drawer?.afterDraw) {

package/cjs/Utils/LogUtils.js

@@ -1,22 +1,39 @@
 const errorPrefix = "tsParticles - Error";
-const _logger = {
-    debug: console.debug,
-    error: (message, optionalParams) => {
-        console.error(`${errorPrefix} - ${message}`, optionalParams);
+const wrap = (fn) => (...args) => {
+    fn(...args);
+}, _logger = {
+    debug: wrap(console.debug),
+    error: (message, ...optionalParams) => {
+        console.error(`${errorPrefix} - ${message}`, ...optionalParams);
     },
-    info: console.info,
-    log: console.log,
-    trace: console.trace,
-    verbose: console.log,
-    warning: console.warn,
+    info: wrap(console.info),
+    log: wrap(console.log),
+    trace: wrap(console.trace),
+    verbose: wrap(console.log),
+    warning: wrap(console.warn),
 };
 export function setLogger(logger) {
-    _logger.debug = logger.debug;
-    _logger.error = logger.error;
-    _logger.info = logger.info;
-    _logger.log = logger.log;
-    _logger.verbose = logger.verbose;
-    _logger.warning = logger.warning;
+    if (logger.debug) {
+        _logger.debug = wrap(logger.debug);
+    }
+    if (logger.error) {
+        _logger.error = wrap(logger.error);
+    }
+    if (logger.info) {
+        _logger.info = wrap(logger.info);
+    }
+    if (logger.log) {
+        _logger.log = wrap(logger.log);
+    }
+    if (logger.trace) {
+        _logger.trace = wrap(logger.trace);
+    }
+    if (logger.verbose) {
+        _logger.verbose = wrap(logger.verbose);
+    }
+    if (logger.warning) {
+        _logger.warning = wrap(logger.warning);
+    }
 }
 export function getLogger() {
     return _logger;

package/cjs/Utils/Utils.js

@@ -405,6 +405,7 @@ function computeFullScreenStyle(zIndex) {
         "z-index": zIndex.toString(radix),
         top: "0",
         left: "0",
+        "pointer-events": "none",
     };
     for (const key in style) {
         const value = style[key];

package/cjs/browser.js

@@ -0,0 +1,5 @@
+import { tsParticles } from "./index.js";
+const globalObject = globalThis;
+globalObject.__tsParticlesInternals = globalObject.__tsParticlesInternals ?? {};
+globalObject.tsParticles = tsParticles;
+export * from "./index.js";

package/cjs/exports.js

@@ -28,6 +28,7 @@ export * from "./Options/Classes/Particles/Bounce/ParticlesBounce.js";
 export * from "./Options/Classes/Particles/Bounce/ParticlesBounceFactor.js";
 export * from "./Options/Classes/Particles/ParticlesOptions.js";
 export * from "./Options/Classes/Particles/Fill.js";
+export * from "./Options/Classes/Particles/Paint.js";
 export * from "./Options/Classes/Particles/Stroke.js";
 export * from "./Options/Classes/Particles/Move/Move.js";
 export * from "./Options/Classes/Particles/Move/MoveAngle.js";

package/cjs/index.js

@@ -1,5 +1,4 @@
 import { initEngine } from "./initEngine.js";
 const tsParticles = initEngine();
-globalThis.tsParticles = tsParticles;
 export * from "./exports.js";
 export { tsParticles };