@tsparticles/engine 3.6.0 → 3.7.1

package/README.md

@@ -898,6 +898,12 @@ flowchart TD
     subgraph all-plugins [Plugins]
       plugin-canvas-mask[Canvas Mask]
 
+      subgraph all-plugins-colors [Colors]
+        plugin-hsv-color[HSV Color]
+        plugin-named-color[Named Color]
+        plugin-oklch-color[Oklch Color]
+      end
+
       subgraph all-plugins-easings [Easings]
         plugin-easing-back[Back]
         plugin-easing-circ[Circ]
@@ -921,7 +927,6 @@ flowchart TD
         plugin-export-video[Video]
       end
 
-      plugin-hsv-color[HSV Color]
       plugin-infection[Infection]
       plugin-motion[Motion]
       plugin-poisson-disc[Poisson Disc]

package/browser/Core/Canvas.js

@@ -26,7 +26,7 @@ function setStyle(canvas, style, important = false) {
     }
 }
 export class Canvas {
-    constructor(container) {
+    constructor(container, engine) {
         this.container = container;
         this._applyPostDrawUpdaters = particle => {
             for (const updater of this._postDrawUpdaters) {
@@ -62,10 +62,10 @@ export class Canvas {
             let fColor, sColor;
             for (const plugin of this._colorPlugins) {
                 if (!fColor && plugin.particleFillColor) {
-                    fColor = rangeColorToHsl(plugin.particleFillColor(particle));
+                    fColor = rangeColorToHsl(this._engine, plugin.particleFillColor(particle));
                 }
                 if (!sColor && plugin.particleStrokeColor) {
-                    sColor = rangeColorToHsl(plugin.particleStrokeColor(particle));
+                    sColor = rangeColorToHsl(this._engine, plugin.particleStrokeColor(particle));
                 }
                 if (fColor && sColor) {
                     break;
@@ -76,7 +76,7 @@ export class Canvas {
         this._initCover = async () => {
             const options = this.container.actualOptions, cover = options.backgroundMask.cover, color = cover.color;
             if (color) {
-                const coverRgb = rangeColorToRgb(color);
+                const coverRgb = rangeColorToRgb(this._engine, color);
                 if (coverRgb) {
                     const coverColor = {
                         ...coverRgb,
@@ -135,7 +135,7 @@ export class Canvas {
             }
             const factorNumerator = 1, opacity = factorNumerator / trail.length;
             if (trailFill.color) {
-                const fillColor = rangeColorToRgb(trailFill.color);
+                const fillColor = rangeColorToRgb(this._engine, trailFill.color);
                 if (!fillColor) {
                     return;
                 }
@@ -216,10 +216,16 @@ export class Canvas {
                 height: "100%",
             }, true);
         };
-        this.size = {
+        this._engine = engine;
+        this._standardSize = {
             height: 0,
             width: 0,
         };
+        const pxRatio = container.retina.pixelRatio, stdSize = this._standardSize;
+        this.size = {
+            height: stdSize.height * pxRatio,
+            width: stdSize.width * pxRatio,
+        };
         this._context = null;
         this._generated = false;
         this._preDrawUpdaters = [];
@@ -363,7 +369,7 @@ export class Canvas {
             return;
         }
         if (background.color) {
-            const color = rangeColorToRgb(background.color);
+            const color = rangeColorToRgb(this._engine, background.color);
             elementStyle.backgroundColor = color ? getStyleFromRgb(color, background.opacity) : "";
         }
         else {
@@ -408,8 +414,12 @@ export class Canvas {
         this.element = canvas;
         this.element.ariaHidden = "true";
         this._originalStyle = deepExtend({}, this.element.style);
-        this.size.height = canvas.offsetHeight;
-        this.size.width = canvas.offsetWidth;
+        const standardSize = this._standardSize;
+        standardSize.height = canvas.offsetHeight;
+        standardSize.width = canvas.offsetWidth;
+        const pxRatio = this.container.retina.pixelRatio, retinaSize = this.size;
+        canvas.height = retinaSize.height = standardSize.height * pxRatio;
+        canvas.width = retinaSize.width = standardSize.width * pxRatio;
         this._context = this.element.getContext("2d");
         this._safeMutationObserver(obs => {
             if (!this.element || !(this.element instanceof Node)) {
@@ -444,23 +454,29 @@ export class Canvas {
         if (!this.element) {
             return false;
         }
-        const container = this.container, pxRatio = container.retina.pixelRatio, size = container.canvas.size, newSize = {
-            width: this.element.offsetWidth * pxRatio,
-            height: this.element.offsetHeight * pxRatio,
+        const container = this.container, currentSize = container.canvas._standardSize, newSize = {
+            width: this.element.offsetWidth,
+            height: this.element.offsetHeight,
+        }, pxRatio = container.retina.pixelRatio, retinaSize = {
+            width: newSize.width * pxRatio,
+            height: newSize.height * pxRatio,
         };
-        if (newSize.height === size.height &&
-            newSize.width === size.width &&
-            newSize.height === this.element.height &&
-            newSize.width === this.element.width) {
+        if (newSize.height === currentSize.height &&
+            newSize.width === currentSize.width &&
+            retinaSize.height === this.element.height &&
+            retinaSize.width === this.element.width) {
             return false;
         }
-        const oldSize = { ...size };
-        this.element.width = size.width = this.element.offsetWidth * pxRatio;
-        this.element.height = size.height = this.element.offsetHeight * pxRatio;
+        const oldSize = { ...currentSize };
+        currentSize.height = newSize.height;
+        currentSize.width = newSize.width;
+        const canvasSize = this.size;
+        this.element.width = canvasSize.width = retinaSize.width;
+        this.element.height = canvasSize.height = retinaSize.height;
         if (this.container.started) {
             container.particles.setResizeFactor({
-                width: size.width / oldSize.width,
-                height: size.height / oldSize.height,
+                width: currentSize.width / oldSize.width,
+                height: currentSize.height / oldSize.height,
             });
         }
         return true;

package/browser/Core/Container.js

@@ -88,7 +88,7 @@ export class Container {
         this._sourceOptions = sourceOptions;
         this._initialSourceOptions = sourceOptions;
         this.retina = new Retina(this);
-        this.canvas = new Canvas(this);
+        this.canvas = new Canvas(this, this._engine);
         this.particles = new Particles(this._engine, this);
         this.pathGenerators = new Map();
         this.interactivity = {

package/browser/Core/Engine.js

@@ -71,6 +71,8 @@ export class Engine {
         this._eventDispatcher = new EventDispatcher();
         this._initialized = false;
         this.plugins = [];
+        this.colorManagers = new Map();
+        this.easingFunctions = new Map();
         this._initializers = {
             interactors: new Map(),
             movers: new Map(),
@@ -95,13 +97,24 @@ export class Engine {
         return this._domArray;
     }
     get version() {
-        return "3.6.0";
+        return "3.7.1";
+    }
+    async addColorManager(manager, refresh = true) {
+        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)) {
+            return;
+        }
+        this.easingFunctions.set(name, easing);
+        await this.refresh(refresh);
+    }
     async addEffect(effect, drawer, refresh = true) {
         executeOnSingleOrMultiple(effect, type => {
             if (!this.getEffectDrawer(type)) {
@@ -175,6 +188,9 @@ export class Engine {
         }
         return res;
     }
+    getEasing(name) {
+        return this.easingFunctions.get(name) ?? ((value) => value);
+    }
     getEffectDrawer(type) {
         return this.effectDrawers.get(type);
     }

package/browser/Core/Particle.js

@@ -325,7 +325,7 @@ export class Particle {
             this.sides = sideCountFunc(this);
         }
         this.spawning = false;
-        this.shadowColor = rangeColorToRgb(this.options.shadow.color);
+        this.shadowColor = rangeColorToRgb(this._engine, this.options.shadow.color);
         for (const updater of particles.updaters) {
             updater.init(this);
         }

package/browser/Types/EasingFunction.js

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

package/browser/Utils/ColorUtils.js

@@ -3,83 +3,63 @@ import { isArray, isString } from "./TypeUtils.js";
 import { millisecondsToSeconds, percentDenominator } from "../Core/Utils/Constants.js";
 import { AnimationStatus } from "../Enums/AnimationStatus.js";
 import { itemFromArray } from "./Utils.js";
-var RgbIndexes;
-(function (RgbIndexes) {
-    RgbIndexes[RgbIndexes["r"] = 1] = "r";
-    RgbIndexes[RgbIndexes["g"] = 2] = "g";
-    RgbIndexes[RgbIndexes["b"] = 3] = "b";
-    RgbIndexes[RgbIndexes["a"] = 4] = "a";
-})(RgbIndexes || (RgbIndexes = {}));
-const randomColorValue = "random", midColorValue = "mid", colorManagers = new Map();
-export function addColorManager(manager) {
-    colorManagers.set(manager.key, manager);
-}
-function stringToRgba(input) {
-    for (const manager of colorManagers.values()) {
+const randomColorValue = "random", midColorValue = "mid";
+function stringToRgba(engine, input) {
+    if (!input) {
+        return;
+    }
+    for (const manager of engine.colorManagers.values()) {
         if (input.startsWith(manager.stringPrefix)) {
             return manager.parseString(input);
         }
     }
-    const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])([a-f\d])?$/i, hexFixed = input.replace(shorthandRegex, (_, r, g, b, a) => {
-        return r + r + g + g + b + b + (a !== undefined ? a + a : "");
-    }), regex = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})?$/i, result = regex.exec(hexFixed), radix = 16, defaultAlpha = 1, alphaFactor = 0xff;
-    return result
-        ? {
-            a: result[RgbIndexes.a] !== undefined
-                ? parseInt(result[RgbIndexes.a], radix) / alphaFactor
-                : defaultAlpha,
-            b: parseInt(result[RgbIndexes.b], radix),
-            g: parseInt(result[RgbIndexes.g], radix),
-            r: parseInt(result[RgbIndexes.r], radix),
-        }
-        : undefined;
 }
-export function rangeColorToRgb(input, index, useIndex = true) {
+export function rangeColorToRgb(engine, input, index, useIndex = true) {
     if (!input) {
         return;
     }
     const color = isString(input) ? { value: input } : input;
     if (isString(color.value)) {
-        return colorToRgb(color.value, index, useIndex);
+        return colorToRgb(engine, color.value, index, useIndex);
     }
     if (isArray(color.value)) {
-        return rangeColorToRgb({
+        return rangeColorToRgb(engine, {
             value: itemFromArray(color.value, index, useIndex),
         });
     }
-    for (const manager of colorManagers.values()) {
+    for (const manager of engine.colorManagers.values()) {
         const res = manager.handleRangeColor(color);
         if (res) {
             return res;
         }
     }
 }
-export function colorToRgb(input, index, useIndex = true) {
+export function colorToRgb(engine, input, index, useIndex = true) {
     if (!input) {
         return;
     }
     const color = isString(input) ? { value: input } : input;
     if (isString(color.value)) {
-        return color.value === randomColorValue ? getRandomRgbColor() : stringToRgb(color.value);
+        return color.value === randomColorValue ? getRandomRgbColor() : stringToRgb(engine, color.value);
     }
     if (isArray(color.value)) {
-        return colorToRgb({
+        return colorToRgb(engine, {
             value: itemFromArray(color.value, index, useIndex),
         });
     }
-    for (const manager of colorManagers.values()) {
+    for (const manager of engine.colorManagers.values()) {
         const res = manager.handleColor(color);
         if (res) {
             return res;
         }
     }
 }
-export function colorToHsl(color, index, useIndex = true) {
-    const rgb = colorToRgb(color, index, useIndex);
+export function colorToHsl(engine, color, index, useIndex = true) {
+    const rgb = colorToRgb(engine, color, index, useIndex);
     return rgb ? rgbToHsl(rgb) : undefined;
 }
-export function rangeColorToHsl(color, index, useIndex = true) {
-    const rgb = rangeColorToRgb(color, index, useIndex);
+export function rangeColorToHsl(engine, color, index, useIndex = true) {
+    const rgb = rangeColorToRgb(engine, color, index, useIndex);
     return rgb ? rgbToHsl(rgb) : undefined;
 }
 export function rgbToHsl(color) {
@@ -106,11 +86,11 @@ export function rgbToHsl(color) {
     }
     return res;
 }
-export function stringToAlpha(input) {
-    return stringToRgba(input)?.a;
+export function stringToAlpha(engine, input) {
+    return stringToRgba(engine, input)?.a;
 }
-export function stringToRgb(input) {
-    return stringToRgba(input);
+export function stringToRgb(engine, input) {
+    return stringToRgba(engine, input);
 }
 export function hslToRgb(hsl) {
     const hMax = 360, sMax = 100, lMax = 100, sMin = 0, lMin = 0, h = ((hsl.h % hMax) + hMax) % hMax, s = Math.max(sMin, Math.min(sMax, hsl.s)), l = Math.max(lMin, Math.min(lMax, hsl.l)), hNormalized = h / hMax, sNormalized = s / sMax, lNormalized = l / lMax, rgbFactor = 255, triple = 3;
@@ -201,11 +181,11 @@ export function getLinkColor(p1, p2, linkColor) {
         return linkColor;
     }
 }
-export function getLinkRandomColor(optColor, blink, consent) {
+export function getLinkRandomColor(engine, optColor, blink, consent) {
     const color = isString(optColor) ? optColor : optColor.value;
     if (color === randomColorValue) {
         if (consent) {
-            return rangeColorToRgb({
+            return rangeColorToRgb(engine, {
                 value: color,
             });
         }
@@ -218,7 +198,7 @@ export function getLinkRandomColor(optColor, blink, consent) {
         return midColorValue;
     }
     else {
-        return rangeColorToRgb({
+        return rangeColorToRgb(engine, {
             value: color,
         });
     }

package/browser/Utils/NumberUtils.js

@@ -6,16 +6,7 @@ let _random = Math.random;
 const _animationLoop = {
     nextFrame: (cb) => requestAnimationFrame(cb),
     cancel: (idx) => cancelAnimationFrame(idx),
-}, easingFunctions = new Map(), double = 2, doublePI = Math.PI * double;
-export function addEasing(name, easing) {
-    if (easingFunctions.get(name)) {
-        return;
-    }
-    easingFunctions.set(name, easing);
-}
-export function getEasing(name) {
-    return easingFunctions.get(name) ?? ((value) => value);
-}
+}, double = 2, doublePI = Math.PI * double;
 export function setRandom(rnd = Math.random) {
     _random = rnd;
 }

package/browser/Utils/Utils.js

@@ -414,3 +414,9 @@ export function updateAnimation(particle, data, changeDirection, destroyType, de
         data.value = clamp(data.value, minValue, maxValue);
     }
 }
+export function assertValidVersion(engine, pluginVersion) {
+    if (engine.version === pluginVersion) {
+        return;
+    }
+    throw new Error(`The tsParticles version is different from the loaded plugins version. Engine version: ${engine.version}. Plugins version: ${pluginVersion}`);
+}

package/browser/exports.js

@@ -78,9 +78,7 @@ export * from "./Options/Classes/Theme/ThemeDefault.js";
 export * from "./Options/Classes/ValueWithRandom.js";
 export * from "./Utils/CanvasUtils.js";
 export * from "./Utils/ColorUtils.js";
-export * from "./Utils/HslColorManager.js";
 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/browser/init.js

@@ -1,11 +1,5 @@
 import { Engine } from "./Core/Engine.js";
-import { HslColorManager } from "./Utils/HslColorManager.js";
-import { RgbColorManager } from "./Utils/RgbColorManager.js";
-import { addColorManager } from "./Utils/ColorUtils.js";
 export function init() {
-    const rgbColorManager = new RgbColorManager(), hslColorManager = new HslColorManager();
-    addColorManager(rgbColorManager);
-    addColorManager(hslColorManager);
     const engine = new Engine();
     engine.init();
     return engine;

package/cjs/Core/Canvas.js

@@ -29,7 +29,7 @@ function setStyle(canvas, style, important = false) {
     }
 }
 class Canvas {
-    constructor(container) {
+    constructor(container, engine) {
         this.container = container;
         this._applyPostDrawUpdaters = particle => {
             for (const updater of this._postDrawUpdaters) {
@@ -65,10 +65,10 @@ class Canvas {
             let fColor, sColor;
             for (const plugin of this._colorPlugins) {
                 if (!fColor && plugin.particleFillColor) {
-                    fColor = (0, ColorUtils_js_1.rangeColorToHsl)(plugin.particleFillColor(particle));
+                    fColor = (0, ColorUtils_js_1.rangeColorToHsl)(this._engine, plugin.particleFillColor(particle));
                 }
                 if (!sColor && plugin.particleStrokeColor) {
-                    sColor = (0, ColorUtils_js_1.rangeColorToHsl)(plugin.particleStrokeColor(particle));
+                    sColor = (0, ColorUtils_js_1.rangeColorToHsl)(this._engine, plugin.particleStrokeColor(particle));
                 }
                 if (fColor && sColor) {
                     break;
@@ -79,7 +79,7 @@ class Canvas {
         this._initCover = async () => {
             const options = this.container.actualOptions, cover = options.backgroundMask.cover, color = cover.color;
             if (color) {
-                const coverRgb = (0, ColorUtils_js_1.rangeColorToRgb)(color);
+                const coverRgb = (0, ColorUtils_js_1.rangeColorToRgb)(this._engine, color);
                 if (coverRgb) {
                     const coverColor = {
                         ...coverRgb,
@@ -138,7 +138,7 @@ class Canvas {
             }
             const factorNumerator = 1, opacity = factorNumerator / trail.length;
             if (trailFill.color) {
-                const fillColor = (0, ColorUtils_js_1.rangeColorToRgb)(trailFill.color);
+                const fillColor = (0, ColorUtils_js_1.rangeColorToRgb)(this._engine, trailFill.color);
                 if (!fillColor) {
                     return;
                 }
@@ -219,10 +219,16 @@ class Canvas {
                 height: "100%",
             }, true);
         };
-        this.size = {
+        this._engine = engine;
+        this._standardSize = {
             height: 0,
             width: 0,
         };
+        const pxRatio = container.retina.pixelRatio, stdSize = this._standardSize;
+        this.size = {
+            height: stdSize.height * pxRatio,
+            width: stdSize.width * pxRatio,
+        };
         this._context = null;
         this._generated = false;
         this._preDrawUpdaters = [];
@@ -366,7 +372,7 @@ class Canvas {
             return;
         }
         if (background.color) {
-            const color = (0, ColorUtils_js_1.rangeColorToRgb)(background.color);
+            const color = (0, ColorUtils_js_1.rangeColorToRgb)(this._engine, background.color);
             elementStyle.backgroundColor = color ? (0, ColorUtils_js_1.getStyleFromRgb)(color, background.opacity) : "";
         }
         else {
@@ -411,8 +417,12 @@ class Canvas {
         this.element = canvas;
         this.element.ariaHidden = "true";
         this._originalStyle = (0, Utils_js_1.deepExtend)({}, this.element.style);
-        this.size.height = canvas.offsetHeight;
-        this.size.width = canvas.offsetWidth;
+        const standardSize = this._standardSize;
+        standardSize.height = canvas.offsetHeight;
+        standardSize.width = canvas.offsetWidth;
+        const pxRatio = this.container.retina.pixelRatio, retinaSize = this.size;
+        canvas.height = retinaSize.height = standardSize.height * pxRatio;
+        canvas.width = retinaSize.width = standardSize.width * pxRatio;
         this._context = this.element.getContext("2d");
         this._safeMutationObserver(obs => {
             if (!this.element || !(this.element instanceof Node)) {
@@ -447,23 +457,29 @@ class Canvas {
         if (!this.element) {
             return false;
         }
-        const container = this.container, pxRatio = container.retina.pixelRatio, size = container.canvas.size, newSize = {
-            width: this.element.offsetWidth * pxRatio,
-            height: this.element.offsetHeight * pxRatio,
+        const container = this.container, currentSize = container.canvas._standardSize, newSize = {
+            width: this.element.offsetWidth,
+            height: this.element.offsetHeight,
+        }, pxRatio = container.retina.pixelRatio, retinaSize = {
+            width: newSize.width * pxRatio,
+            height: newSize.height * pxRatio,
         };
-        if (newSize.height === size.height &&
-            newSize.width === size.width &&
-            newSize.height === this.element.height &&
-            newSize.width === this.element.width) {
+        if (newSize.height === currentSize.height &&
+            newSize.width === currentSize.width &&
+            retinaSize.height === this.element.height &&
+            retinaSize.width === this.element.width) {
             return false;
         }
-        const oldSize = { ...size };
-        this.element.width = size.width = this.element.offsetWidth * pxRatio;
-        this.element.height = size.height = this.element.offsetHeight * pxRatio;
+        const oldSize = { ...currentSize };
+        currentSize.height = newSize.height;
+        currentSize.width = newSize.width;
+        const canvasSize = this.size;
+        this.element.width = canvasSize.width = retinaSize.width;
+        this.element.height = canvasSize.height = retinaSize.height;
         if (this.container.started) {
             container.particles.setResizeFactor({
-                width: size.width / oldSize.width,
-                height: size.height / oldSize.height,
+                width: currentSize.width / oldSize.width,
+                height: currentSize.height / oldSize.height,
             });
         }
         return true;

package/cjs/Core/Container.js

@@ -91,7 +91,7 @@ class Container {
         this._sourceOptions = sourceOptions;
         this._initialSourceOptions = sourceOptions;
         this.retina = new Retina_js_1.Retina(this);
-        this.canvas = new Canvas_js_1.Canvas(this);
+        this.canvas = new Canvas_js_1.Canvas(this, this._engine);
         this.particles = new Particles_js_1.Particles(this._engine, this);
         this.pathGenerators = new Map();
         this.interactivity = {

package/cjs/Core/Engine.js

@@ -74,6 +74,8 @@ class Engine {
         this._eventDispatcher = new EventDispatcher_js_1.EventDispatcher();
         this._initialized = false;
         this.plugins = [];
+        this.colorManagers = new Map();
+        this.easingFunctions = new Map();
         this._initializers = {
             interactors: new Map(),
             movers: new Map(),
@@ -98,13 +100,24 @@ class Engine {
         return this._domArray;
     }
     get version() {
-        return "3.6.0";
+        return "3.7.1";
+    }
+    async addColorManager(manager, refresh = true) {
+        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_js_1.EventType.configAdded, { data: { name: key, config } });
     }
+    async addEasing(name, easing, refresh = true) {
+        if (this.getEasing(name)) {
+            return;
+        }
+        this.easingFunctions.set(name, easing);
+        await this.refresh(refresh);
+    }
     async addEffect(effect, drawer, refresh = true) {
         (0, Utils_js_1.executeOnSingleOrMultiple)(effect, type => {
             if (!this.getEffectDrawer(type)) {
@@ -178,6 +191,9 @@ class Engine {
         }
         return res;
     }
+    getEasing(name) {
+        return this.easingFunctions.get(name) ?? ((value) => value);
+    }
     getEffectDrawer(type) {
         return this.effectDrawers.get(type);
     }

package/cjs/Core/Particle.js

@@ -328,7 +328,7 @@ class Particle {
             this.sides = sideCountFunc(this);
         }
         this.spawning = false;
-        this.shadowColor = (0, ColorUtils_js_1.rangeColorToRgb)(this.options.shadow.color);
+        this.shadowColor = (0, ColorUtils_js_1.rangeColorToRgb)(this._engine, this.options.shadow.color);
         for (const updater of particles.updaters) {
             updater.init(this);
         }

package/cjs/Types/EasingFunction.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });