@tsparticles/engine 4.0.0-beta.8 → 4.0.0

package/esm/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/esm/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/esm/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/esm/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/esm/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";
-import { isNull } from "../../../Utils/TypeUtils.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,21 +113,40 @@ export class ParticlesOptions {
         if (!paletteData) {
             return;
         }
+        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: paletteFill.value,
+                    },
+                    enable: paletteFill.enable,
+                    opacity: paletteFill.opacity,
+                }
+                : undefined;
+            if (!paletteStroke) {
+                return [
+                    {
+                        fill: fillPart,
+                    },
+                ];
+            }
+            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: {
-                color: paletteData.fill
-                    ? {
-                        value: paletteData.colors,
-                    }
-                    : undefined,
-                enable: paletteData.fill,
-            },
-            stroke: paletteData.fill
-                ? undefined
-                : paletteData.colors.map(color => ({
-                    color: { value: color },
-                    width: 1,
-                })),
+            paint: palettePaint,
             blend: {
                 enable: true,
                 mode: paletteData.blendMode,

package/esm/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/esm/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/esm/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/esm/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/esm/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/esm/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsparticles/engine",
-  "version": "4.0.0-beta.8",
+  "version": "4.0.0",
   "description": "Easily create highly customizable particle, confetti and fireworks animations and use them as animated backgrounds for your website. Ready to use components available also for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Riot.js, Inferno.",
   "homepage": "https://particles.js.org",
   "scripts": {
@@ -98,6 +98,13 @@
       "require": "./cjs/index.js",
       "default": "./esm/index.js"
     },
+    "./lazy": {
+      "types": "./types/index.lazy.d.ts",
+      "browser": "./browser/index.lazy.js",
+      "import": "./esm/index.lazy.js",
+      "require": "./cjs/index.lazy.js",
+      "default": "./esm/index.lazy.js"
+    },
     "./package.json": "./package.json"
   },
   "publishConfig": {