@tsparticles/engine 3.2.1 → 3.3.0

package/browser/Options/Classes/Options.js

@@ -1,4 +1,4 @@
-import { deepExtend, executeOnSingleOrMultiple, isBoolean, safeMatchMedia } from "../../Utils/Utils.js";
+import { deepExtend, executeOnSingleOrMultiple, safeMatchMedia } from "../../Utils/Utils.js";
 import { Background } from "./Background/Background.js";
 import { BackgroundMask } from "./BackgroundMask/BackgroundMask.js";
 import { FullScreen } from "./FullScreen/FullScreen.js";
@@ -6,6 +6,7 @@ import { Interactivity } from "./Interactivity/Interactivity.js";
 import { ManualParticle } from "./ManualParticle.js";
 import { Responsive } from "./Responsive.js";
 import { Theme } from "./Theme/Theme.js";
+import { isBoolean } from "../../Utils/TypeUtils.js";
 import { loadParticlesOptions } from "../../Utils/OptionsUtils.js";
 import { setRangeValue } from "../../Utils/NumberUtils.js";
 export class Options {

package/browser/Options/Classes/OptionsColor.js

@@ -1,4 +1,4 @@
-import { isArray, isString } from "../../Utils/Utils.js";
+import { isArray, isString } from "../../Utils/TypeUtils.js";
 export class OptionsColor {
     constructor() {
         this.value = "";

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

@@ -1,4 +1,4 @@
-import { isNumber, isObject } from "../../../../Utils/Utils.js";
+import { isNumber, isObject } from "../../../../Utils/TypeUtils.js";
 import { MoveAngle } from "./MoveAngle.js";
 import { MoveAttract } from "./MoveAttract.js";
 import { MoveCenter } from "./MoveCenter.js";

package/browser/Types/RangeType.js

@@ -0,0 +1 @@
+export {};

package/browser/Utils/CanvasUtils.js

@@ -21,7 +21,7 @@ export function paintImage(context, dimension, image, opacity) {
 export function clear(context, dimension) {
     context.clearRect(origin.x, origin.y, dimension.width, dimension.height);
 }
-export async function drawParticle(data) {
+export function drawParticle(data) {
     const { container, context, particle, delta, colorStyles, backgroundMask, composite, radius, opacity, shadow, transform, } = data, pos = particle.getPosition(), defaultAngle = 0, angle = particle.rotation + (particle.pathRotation ? particle.velocity.angle : defaultAngle), rotateData = {
         sin: Math.sin(angle),
         cos: Math.cos(angle),
@@ -60,13 +60,13 @@ export async function drawParticle(data) {
         transformData,
         strokeWidth,
     };
-    await drawShape(drawData);
-    await drawShapeAfterDraw(drawData);
-    await drawEffect(drawData);
+    drawShape(drawData);
+    drawShapeAfterDraw(drawData);
+    drawEffect(drawData);
     context.globalCompositeOperation = "source-over";
     context.resetTransform();
 }
-export async function drawEffect(data) {
+export function drawEffect(data) {
     const { container, context, particle, radius, opacity, delta, transformData } = data;
     if (!particle.effect) {
         return;
@@ -75,7 +75,7 @@ export async function drawEffect(data) {
     if (!drawer) {
         return;
     }
-    await drawer.draw({
+    drawer.draw({
         context,
         particle,
         radius,
@@ -85,7 +85,7 @@ export async function drawEffect(data) {
         transformData: { ...transformData },
     });
 }
-export async function drawShape(data) {
+export function drawShape(data) {
     const { container, context, particle, radius, opacity, delta, strokeWidth, transformData } = data, minStrokeWidth = 0;
     if (!particle.shape) {
         return;
@@ -95,7 +95,7 @@ export async function drawShape(data) {
         return;
     }
     context.beginPath();
-    await drawer.draw({
+    drawer.draw({
         context,
         particle,
         radius,
@@ -114,7 +114,7 @@ export async function drawShape(data) {
         context.fill();
     }
 }
-export async function drawShapeAfterDraw(data) {
+export function drawShapeAfterDraw(data) {
     const { container, context, particle, radius, opacity, delta, transformData } = data;
     if (!particle.shape) {
         return;
@@ -123,7 +123,7 @@ export async function drawShapeAfterDraw(data) {
     if (!drawer?.afterDraw) {
         return;
     }
-    await drawer.afterDraw({
+    drawer.afterDraw({
         context,
         particle,
         radius,
@@ -133,17 +133,17 @@ export async function drawShapeAfterDraw(data) {
         transformData: { ...transformData },
     });
 }
-export async function drawPlugin(context, plugin, delta) {
+export function drawPlugin(context, plugin, delta) {
     if (!plugin.draw) {
         return;
     }
-    await plugin.draw(context, delta);
+    plugin.draw(context, delta);
 }
-export async function drawParticlePlugin(context, plugin, particle, delta) {
+export function drawParticlePlugin(context, plugin, particle, delta) {
     if (!plugin.drawParticle) {
         return;
     }
-    await plugin.drawParticle(context, particle, delta);
+    plugin.drawParticle(context, particle, delta);
 }
 export function alterHsl(color, type, value) {
     const lFactor = 1;

package/browser/Utils/ColorUtils.js

@@ -1,6 +1,7 @@
 import { clamp, getRandom, getRangeMax, getRangeMin, getRangeValue, mix, randomInRange, setRangeValue, } from "./NumberUtils.js";
-import { isArray, isString, itemFromArray } from "./Utils.js";
+import { isArray, isString } from "./TypeUtils.js";
 import { millisecondsToSeconds, percentDenominator } from "../Core/Utils/Constants.js";
+import { itemFromArray } from "./Utils.js";
 const randomColorValue = "random", midColorValue = "mid", colorManagers = new Map();
 export function addColorManager(manager) {
     colorManagers.set(manager.key, manager);

package/browser/Utils/NumberUtils.js

@@ -1,5 +1,5 @@
-import { Vector } from "../Core/Utils/Vector.js";
-import { isNumber } from "./Utils.js";
+import { Vector } from "../Core/Utils/Vectors.js";
+import { isNumber } from "./TypeUtils.js";
 import { percentDenominator } from "../Core/Utils/Constants.js";
 let _random = Math.random;
 const easings = new Map(), double = 2, doublePI = Math.PI * double;

package/browser/Utils/TypeUtils.js

@@ -0,0 +1,18 @@
+export function isBoolean(arg) {
+    return typeof arg === "boolean";
+}
+export function isString(arg) {
+    return typeof arg === "string";
+}
+export function isNumber(arg) {
+    return typeof arg === "number";
+}
+export function isFunction(arg) {
+    return typeof arg === "function";
+}
+export function isObject(arg) {
+    return typeof arg === "object" && arg !== null;
+}
+export function isArray(arg) {
+    return Array.isArray(arg);
+}

package/browser/Utils/Utils.js

@@ -1,6 +1,7 @@
 import { clamp, collisionVelocity, getDistances, getRandom, getRangeMax, getRangeMin, getRangeValue, randomInRange, } from "./NumberUtils.js";
 import { halfRandom, millisecondsToSeconds, percentDenominator } from "../Core/Utils/Constants.js";
-import { Vector } from "../Core/Utils/Vector.js";
+import { isArray, isObject } from "./TypeUtils.js";
+import { Vector } from "../Core/Utils/Vectors.js";
 const _logger = {
     debug: console.debug,
     error: console.error,
@@ -332,24 +333,6 @@ export function getPosition(position, canvasSize) {
 export function getSize(size, canvasSize) {
     return getPositionOrSize(size, canvasSize);
 }
-export function isBoolean(arg) {
-    return typeof arg === "boolean";
-}
-export function isString(arg) {
-    return typeof arg === "string";
-}
-export function isNumber(arg) {
-    return typeof arg === "number";
-}
-export function isFunction(arg) {
-    return typeof arg === "function";
-}
-export function isObject(arg) {
-    return typeof arg === "object" && arg !== null;
-}
-export function isArray(arg) {
-    return Array.isArray(arg);
-}
 function checkDestroy(particle, destroyType, value, minValue, maxValue) {
     switch (destroyType) {
         case "max":

package/browser/exports.js

@@ -1,12 +1,9 @@
-export * from "./Core/Utils/Circle.js";
 export * from "./Core/Utils/Constants.js";
 export * from "./Core/Utils/ExternalInteractorBase.js";
 export * from "./Core/Utils/ParticlesInteractorBase.js";
 export * from "./Core/Utils/Point.js";
-export * from "./Core/Utils/Range.js";
-export * from "./Core/Utils/Rectangle.js";
-export * from "./Core/Utils/Vector.js";
-export * from "./Core/Utils/Vector3d.js";
+export * from "./Core/Utils/Ranges.js";
+export * from "./Core/Utils/Vectors.js";
 export * from "./Enums/Directions/MoveDirection.js";
 export * from "./Enums/Directions/RotateDirection.js";
 export * from "./Enums/Directions/OutModeDirection.js";
@@ -86,3 +83,4 @@ export * from "./Utils/NumberUtils.js";
 export * from "./Utils/OptionsUtils.js";
 export * from "./Utils/RgbColorManager.js";
 export * from "./Utils/Utils.js";
+export * from "./Utils/TypeUtils.js";

package/cjs/Core/Canvas.js

@@ -273,11 +273,11 @@ class Canvas {
     drawAsync(cb) {
         const ctx = this._context;
         if (!ctx) {
-            return Promise.resolve(undefined);
+            return undefined;
         }
         return cb(ctx);
     }
-    async drawParticle(particle, delta) {
+    drawParticle(particle, delta) {
         if (particle.spawning || particle.destroyed) {
             return;
         }
@@ -296,13 +296,13 @@ class Canvas {
         if (!fColor && !sColor) {
             return;
         }
-        await this.drawAsync(async (ctx) => {
+        this.draw((ctx) => {
             const container = this.container, options = container.actualOptions, zIndexOptions = particle.options.zIndex, zIndexFactorOffset = 1, zIndexFactor = zIndexFactorOffset - particle.zIndexFactor, zOpacityFactor = zIndexFactor ** zIndexOptions.opacityRate, defaultOpacity = 1, opacity = particle.bubble.opacity ?? particle.opacity?.value ?? defaultOpacity, strokeOpacity = particle.strokeOpacity ?? opacity, zOpacity = opacity * zOpacityFactor, zStrokeOpacity = strokeOpacity * zOpacityFactor, transform = {}, colorStyles = {
                 fill: fColor ? (0, ColorUtils_js_1.getStyleFromHsl)(fColor, zOpacity) : undefined,
             };
             colorStyles.stroke = sColor ? (0, ColorUtils_js_1.getStyleFromHsl)(sColor, zStrokeOpacity) : colorStyles.fill;
             this._applyPreDrawUpdaters(ctx, particle, radius, zOpacity, colorStyles, transform);
-            await (0, CanvasUtils_js_1.drawParticle)({
+            (0, CanvasUtils_js_1.drawParticle)({
                 container,
                 context: ctx,
                 particle,
@@ -318,11 +318,11 @@ class Canvas {
             this._applyPostDrawUpdaters(particle);
         });
     }
-    async drawParticlePlugin(plugin, particle, delta) {
-        await this.drawAsync((ctx) => (0, CanvasUtils_js_1.drawParticlePlugin)(ctx, plugin, particle, delta));
+    drawParticlePlugin(plugin, particle, delta) {
+        this.draw((ctx) => (0, CanvasUtils_js_1.drawParticlePlugin)(ctx, plugin, particle, delta));
     }
-    async drawPlugin(plugin, delta) {
-        await this.drawAsync((ctx) => (0, CanvasUtils_js_1.drawPlugin)(ctx, plugin, delta));
+    drawPlugin(plugin, delta) {
+        this.draw((ctx) => (0, CanvasUtils_js_1.drawPlugin)(ctx, plugin, delta));
     }
     async init() {
         this._safeMutationObserver((obs) => obs.disconnect());
@@ -475,7 +475,7 @@ class Canvas {
             return;
         }
         const container = this.container, needsRefresh = container.updateActualOptions();
-        await container.particles.setDensity();
+        container.particles.setDensity();
         this._applyResizePlugins();
         if (needsRefresh) {
             await container.refresh();

package/cjs/Core/Container.js

@@ -36,14 +36,14 @@ class Container {
                     continue;
                 }
                 if (entry.isIntersecting) {
-                    this.play();
+                    void this.play();
                 }
                 else {
                     this.pause();
                 }
             }
         };
-        this._nextFrame = async (timestamp) => {
+        this._nextFrame = (timestamp) => {
             try {
                 if (!this._smooth &&
                     this._lastFrameTime !== undefined &&
@@ -59,7 +59,7 @@ class Container {
                     this.draw(false);
                     return;
                 }
-                await this.particles.draw(delta);
+                this.particles.draw(delta);
                 if (!this.alive()) {
                     this.destroy();
                     return;
@@ -240,14 +240,14 @@ class Container {
             return;
         }
         let refreshTime = force;
-        const frame = async (timestamp) => {
+        const frame = (timestamp) => {
             if (refreshTime) {
                 this._lastFrameTime = undefined;
                 refreshTime = false;
             }
-            await this._nextFrame(timestamp);
+            this._nextFrame(timestamp);
         };
-        this._drawAnimationFrame = requestAnimationFrame((timestamp) => void frame(timestamp));
+        this._drawAnimationFrame = requestAnimationFrame((timestamp) => frame(timestamp));
     }
     async export(type, options = {}) {
         for (const [, plugin] of this.plugins) {
@@ -319,7 +319,7 @@ class Container {
         }
         this._engine.dispatchEvent("containerInit", { container: this });
         await this.particles.init();
-        await this.particles.setDensity();
+        this.particles.setDensity();
         for (const [, plugin] of this.plugins) {
             plugin.particlesSetup?.();
         }

package/cjs/Core/Engine.js

@@ -1,27 +1,4 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Engine = void 0;
 const Constants_js_1 = require("./Utils/Constants.js");
@@ -76,7 +53,7 @@ class Engine {
         return res;
     }
     get version() {
-        return "3.2.1";
+        return "3.3.0";
     }
     addConfig(config) {
         const key = config.key ?? config.name ?? "default";
@@ -238,7 +215,7 @@ class Engine {
         if (!canvasEl.style.height) {
             canvasEl.style.height = "100%";
         }
-        const { Container } = await Promise.resolve().then(() => __importStar(require("./Container.js"))), newItem = new Container(this, id, currentOptions);
+        const { Container } = await import("./Container.js"), newItem = new Container(this, id, currentOptions);
         if (oldIndex >= minIndex) {
             const deleteCount = 0;
             dom.splice(oldIndex, deleteCount, newItem);

package/cjs/Core/Particle.js

@@ -1,13 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Particle = void 0;
+const Vectors_js_1 = require("./Utils/Vectors.js");
 const NumberUtils_js_1 = require("../Utils/NumberUtils.js");
 const Utils_js_1 = require("../Utils/Utils.js");
 const Constants_js_1 = require("./Utils/Constants.js");
 const ColorUtils_js_1 = require("../Utils/ColorUtils.js");
 const Interactivity_js_1 = require("../Options/Classes/Interactivity/Interactivity.js");
-const Vector_js_1 = require("./Utils/Vector.js");
-const Vector3d_js_1 = require("./Utils/Vector3d.js");
 const CanvasUtils_js_1 = require("../Utils/CanvasUtils.js");
 const OptionsUtils_js_1 = require("../Utils/OptionsUtils.js");
 const defaultRetryCount = 0, double = 2, half = 0.5, squareExp = 2;
@@ -50,13 +49,13 @@ class Particle {
             for (const [, plugin] of container.plugins) {
                 const pluginPos = plugin.particlePosition !== undefined ? plugin.particlePosition(position, this) : undefined;
                 if (pluginPos) {
-                    return Vector3d_js_1.Vector3d.create(pluginPos.x, pluginPos.y, zIndex);
+                    return Vectors_js_1.Vector3d.create(pluginPos.x, pluginPos.y, zIndex);
                 }
             }
             const canvasSize = container.canvas.size, exactPosition = (0, NumberUtils_js_1.calcExactPositionOrRandomFromSize)({
                 size: canvasSize,
                 position: position,
-            }), pos = Vector3d_js_1.Vector3d.create(exactPosition.x, exactPosition.y, zIndex), radius = this.getRadius(), outModes = this.options.move.outModes, fixHorizontal = (outMode) => {
+            }), pos = Vectors_js_1.Vector3d.create(exactPosition.x, exactPosition.y, zIndex), radius = this.getRadius(), outModes = this.options.move.outModes, fixHorizontal = (outMode) => {
                 fixOutMode({
                     outMode,
                     checkModes: ["bounce"],
@@ -152,7 +151,7 @@ class Particle {
                     this.outType = "outside";
                     break;
             }
-            this.offset = Vector_js_1.Vector.origin;
+            this.offset = Vectors_js_1.Vector.origin;
         };
         this._engine = engine;
     }
@@ -179,12 +178,12 @@ class Particle {
             },
         });
     }
-    async draw(delta) {
+    draw(delta) {
         const container = this.container, canvas = container.canvas;
         for (const [, plugin] of container.plugins) {
-            await canvas.drawParticlePlugin(plugin, this, delta);
+            canvas.drawParticlePlugin(plugin, this, delta);
         }
-        await canvas.drawParticle(this, delta);
+        canvas.drawParticle(this, delta);
     }
     getFillColor() {
         return this._getRollColor(this.bubble.color ?? (0, ColorUtils_js_1.getHslFromAnimation)(this.color));
@@ -205,7 +204,7 @@ class Particle {
     getStrokeColor() {
         return this._getRollColor(this.bubble.color ?? (0, ColorUtils_js_1.getHslFromAnimation)(this.strokeColor));
     }
-    async init(id, position, overrideOptions, group) {
+    init(id, position, overrideOptions, group) {
         const container = this.container, engine = this._engine;
         this.id = id;
         this.group = group;
@@ -269,7 +268,7 @@ class Particle {
         if (pathOptions.generator) {
             this.pathGenerator = this._engine.getPathGenerator(pathOptions.generator);
             if (this.pathGenerator && container.addPath(pathOptions.generator, this.pathGenerator)) {
-                await this.pathGenerator.init(container);
+                this.pathGenerator.init(container);
             }
         }
         container.retina.initParticle(this);
@@ -298,7 +297,7 @@ class Particle {
             }
         }
         if (effectDrawer?.loadEffect) {
-            await effectDrawer.loadEffect(this);
+            effectDrawer.loadEffect(this);
         }
         let shapeDrawer = container.shapeDrawers.get(this.shape);
         if (!shapeDrawer) {
@@ -308,7 +307,7 @@ class Particle {
             }
         }
         if (shapeDrawer?.loadShape) {
-            await shapeDrawer.loadShape(this);
+            shapeDrawer.loadShape(this);
         }
         const sideCountFunc = shapeDrawer?.getSidesCount;
         if (sideCountFunc) {
@@ -317,13 +316,13 @@ class Particle {
         this.spawning = false;
         this.shadowColor = (0, ColorUtils_js_1.rangeColorToRgb)(this.options.shadow.color);
         for (const updater of particles.updaters) {
-            await updater.init(this);
+            updater.init(this);
         }
         for (const mover of particles.movers) {
-            await mover.init?.(this);
+            mover.init?.(this);
         }
-        await effectDrawer?.particleInit?.(container, this);
-        await shapeDrawer?.particleInit?.(container, this);
+        effectDrawer?.particleInit?.(container, this);
+        shapeDrawer?.particleInit?.(container, this);
         for (const [, plugin] of container.plugins) {
             plugin.particleCreated?.(this);
         }