@tsparticles/engine 4.0.0-beta.12 → 4.0.0-beta.15

package/browser/Core/CanvasManager.js

@@ -272,7 +272,7 @@ export class CanvasManager {
         this.initBackground();
         const pointerEvents = this._pointerEvents;
         element.style.pointerEvents = pointerEvents;
-        element.setAttribute("pointer-events", pointerEvents);
+        element.style.setProperty("pointer-events", pointerEvents);
         this._safeMutationObserver(observer => {
             if (!(element instanceof Node)) {
                 return;

package/browser/Core/Engine.js

@@ -20,9 +20,16 @@ async function getDataFromUrl(data) {
 const getCanvasFromContainer = (domContainer) => {
     const documentSafe = safeDocument();
     let canvasEl;
-    if (domContainer instanceof HTMLCanvasElement || domContainer.tagName.toLowerCase() === canvasTag) {
+    const isCanvas = domContainer instanceof HTMLCanvasElement || domContainer.tagName.toLowerCase() === canvasTag;
+    if (isCanvas) {
         canvasEl = domContainer;
         canvasEl.dataset[generatedAttribute] ??= generatedFalse;
+        if (canvasEl.dataset[generatedAttribute] === generatedTrue) {
+            canvasEl.style.width ||= fullPercent;
+            canvasEl.style.height ||= fullPercent;
+            canvasEl.style.pointerEvents = "none";
+            canvasEl.style.setProperty("pointer-events", "none");
+        }
     }
     else {
         const existingCanvases = domContainer.getElementsByTagName(canvasTag), foundCanvas = existingCanvases[canvasFirstIndex];
@@ -35,9 +42,11 @@ const getCanvasFromContainer = (domContainer) => {
             canvasEl.dataset[generatedAttribute] = generatedTrue;
             domContainer.appendChild(canvasEl);
         }
+        canvasEl.style.width ||= fullPercent;
+        canvasEl.style.height ||= fullPercent;
+        canvasEl.style.pointerEvents = "none";
+        canvasEl.style.setProperty("pointer-events", "none");
     }
-    canvasEl.style.width ||= fullPercent;
-    canvasEl.style.height ||= fullPercent;
     return canvasEl;
 }, getDomContainer = (id, source) => {
     const documentSafe = safeDocument();
@@ -60,7 +69,7 @@ export class Engine {
         return this._domArray;
     }
     get version() {
-        return "4.0.0-beta.12";
+        return "4.0.0-beta.15";
     }
     addEventListener(type, listener) {
         this._eventDispatcher.addEventListener(type, listener);

package/browser/Core/Particle.js

@@ -49,6 +49,7 @@ export class Particle {
     initialPosition;
     initialVelocity;
     isRotating;
+    justWarped;
     lastPathTime;
     misplaced;
     moveCenter;
@@ -168,6 +169,7 @@ export class Particle {
         const container = this._container;
         this.id = id;
         this.group = group;
+        this.justWarped = false;
         this.effectClose = true;
         this.shapeClose = true;
         this.pathRotation = false;

package/browser/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/browser/Options/Classes/Particles/Paint.js

@@ -1,13 +1,18 @@
+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);

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

@@ -1,6 +1,8 @@
 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";
@@ -34,6 +36,10 @@ export class ParticlesOptions {
         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();
@@ -68,11 +74,20 @@ export class ParticlesOptions {
         this.opacity.load(data.opacity);
         const paintToLoad = data.paint;
         if (paintToLoad) {
-            this.paint = executeOnSingleOrMultiple(paintToLoad, t => {
-                const tmp = new Paint();
-                tmp.load(t);
-                return tmp;
-            });
+            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);

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

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

package/cjs/Core/CanvasManager.js

@@ -272,7 +272,7 @@ export class CanvasManager {
         this.initBackground();
         const pointerEvents = this._pointerEvents;
         element.style.pointerEvents = pointerEvents;
-        element.setAttribute("pointer-events", pointerEvents);
+        element.style.setProperty("pointer-events", pointerEvents);
         this._safeMutationObserver(observer => {
             if (!(element instanceof Node)) {
                 return;

package/cjs/Core/Engine.js

@@ -20,9 +20,16 @@ async function getDataFromUrl(data) {
 const getCanvasFromContainer = (domContainer) => {
     const documentSafe = safeDocument();
     let canvasEl;
-    if (domContainer instanceof HTMLCanvasElement || domContainer.tagName.toLowerCase() === canvasTag) {
+    const isCanvas = domContainer instanceof HTMLCanvasElement || domContainer.tagName.toLowerCase() === canvasTag;
+    if (isCanvas) {
         canvasEl = domContainer;
         canvasEl.dataset[generatedAttribute] ??= generatedFalse;
+        if (canvasEl.dataset[generatedAttribute] === generatedTrue) {
+            canvasEl.style.width ||= fullPercent;
+            canvasEl.style.height ||= fullPercent;
+            canvasEl.style.pointerEvents = "none";
+            canvasEl.style.setProperty("pointer-events", "none");
+        }
     }
     else {
         const existingCanvases = domContainer.getElementsByTagName(canvasTag), foundCanvas = existingCanvases[canvasFirstIndex];
@@ -35,9 +42,11 @@ const getCanvasFromContainer = (domContainer) => {
             canvasEl.dataset[generatedAttribute] = generatedTrue;
             domContainer.appendChild(canvasEl);
         }
+        canvasEl.style.width ||= fullPercent;
+        canvasEl.style.height ||= fullPercent;
+        canvasEl.style.pointerEvents = "none";
+        canvasEl.style.setProperty("pointer-events", "none");
     }
-    canvasEl.style.width ||= fullPercent;
-    canvasEl.style.height ||= fullPercent;
     return canvasEl;
 }, getDomContainer = (id, source) => {
     const documentSafe = safeDocument();
@@ -60,7 +69,7 @@ export class Engine {
         return this._domArray;
     }
     get version() {
-        return "4.0.0-beta.12";
+        return "4.0.0-beta.15";
     }
     addEventListener(type, listener) {
         this._eventDispatcher.addEventListener(type, listener);

package/cjs/Core/Particle.js

@@ -49,6 +49,7 @@ export class Particle {
     initialPosition;
     initialVelocity;
     isRotating;
+    justWarped;
     lastPathTime;
     misplaced;
     moveCenter;
@@ -168,6 +169,7 @@ export class Particle {
         const container = this._container;
         this.id = id;
         this.group = group;
+        this.justWarped = false;
         this.effectClose = true;
         this.shapeClose = true;
         this.pathRotation = false;

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

@@ -1,13 +1,18 @@
+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);

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

@@ -1,6 +1,8 @@
 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";
@@ -34,6 +36,10 @@ export class ParticlesOptions {
         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();
@@ -68,11 +74,20 @@ export class ParticlesOptions {
         this.opacity.load(data.opacity);
         const paintToLoad = data.paint;
         if (paintToLoad) {
-            this.paint = executeOnSingleOrMultiple(paintToLoad, t => {
-                const tmp = new Paint();
-                tmp.load(t);
-                return tmp;
-            });
+            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);

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

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

package/esm/Core/CanvasManager.js

@@ -272,7 +272,7 @@ export class CanvasManager {
         this.initBackground();
         const pointerEvents = this._pointerEvents;
         element.style.pointerEvents = pointerEvents;
-        element.setAttribute("pointer-events", pointerEvents);
+        element.style.setProperty("pointer-events", pointerEvents);
         this._safeMutationObserver(observer => {
             if (!(element instanceof Node)) {
                 return;

package/esm/Core/Engine.js

@@ -20,9 +20,16 @@ async function getDataFromUrl(data) {
 const getCanvasFromContainer = (domContainer) => {
     const documentSafe = safeDocument();
     let canvasEl;
-    if (domContainer instanceof HTMLCanvasElement || domContainer.tagName.toLowerCase() === canvasTag) {
+    const isCanvas = domContainer instanceof HTMLCanvasElement || domContainer.tagName.toLowerCase() === canvasTag;
+    if (isCanvas) {
         canvasEl = domContainer;
         canvasEl.dataset[generatedAttribute] ??= generatedFalse;
+        if (canvasEl.dataset[generatedAttribute] === generatedTrue) {
+            canvasEl.style.width ||= fullPercent;
+            canvasEl.style.height ||= fullPercent;
+            canvasEl.style.pointerEvents = "none";
+            canvasEl.style.setProperty("pointer-events", "none");
+        }
     }
     else {
         const existingCanvases = domContainer.getElementsByTagName(canvasTag), foundCanvas = existingCanvases[canvasFirstIndex];
@@ -35,9 +42,11 @@ const getCanvasFromContainer = (domContainer) => {
             canvasEl.dataset[generatedAttribute] = generatedTrue;
             domContainer.appendChild(canvasEl);
         }
+        canvasEl.style.width ||= fullPercent;
+        canvasEl.style.height ||= fullPercent;
+        canvasEl.style.pointerEvents = "none";
+        canvasEl.style.setProperty("pointer-events", "none");
     }
-    canvasEl.style.width ||= fullPercent;
-    canvasEl.style.height ||= fullPercent;
     return canvasEl;
 }, getDomContainer = (id, source) => {
     const documentSafe = safeDocument();
@@ -60,7 +69,7 @@ export class Engine {
         return this._domArray;
     }
     get version() {
-        return "4.0.0-beta.12";
+        return "4.0.0-beta.15";
     }
     addEventListener(type, listener) {
         this._eventDispatcher.addEventListener(type, listener);

package/esm/Core/Particle.js

@@ -49,6 +49,7 @@ export class Particle {
     initialPosition;
     initialVelocity;
     isRotating;
+    justWarped;
     lastPathTime;
     misplaced;
     moveCenter;
@@ -168,6 +169,7 @@ export class Particle {
         const container = this._container;
         this.id = id;
         this.group = group;
+        this.justWarped = false;
         this.effectClose = true;
         this.shapeClose = true;
         this.pathRotation = false;

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

@@ -1,13 +1,18 @@
+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);

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

@@ -1,6 +1,8 @@
 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";
@@ -34,6 +36,10 @@ export class ParticlesOptions {
         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();
@@ -68,11 +74,20 @@ export class ParticlesOptions {
         this.opacity.load(data.opacity);
         const paintToLoad = data.paint;
         if (paintToLoad) {
-            this.paint = executeOnSingleOrMultiple(paintToLoad, t => {
-                const tmp = new Paint();
-                tmp.load(t);
-                return tmp;
-            });
+            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);

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";