@tsparticles/engine 3.6.0-beta.1 → 3.7.0

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,13 @@ 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;
+        const retinaSize = this.size;
+        retinaSize.height = standardSize.height * pxRatio;
+        retinaSize.width = standardSize.width * pxRatio;
         this._context = this.element.getContext("2d");
         this._safeMutationObserver(obs => {
             if (!this.element || !(this.element instanceof Node)) {
@@ -444,23 +455,23 @@ 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,
         };
-        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) {
             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 }, pxRatio = container.retina.pixelRatio;
+        currentSize.height = newSize.height;
+        currentSize.width = newSize.width;
+        const retinaSize = this.size;
+        this.element.width = retinaSize.width = currentSize.width * pxRatio;
+        this.element.height = retinaSize.height = currentSize.height * pxRatio;
         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-beta.1";
+        return "3.7.0";
+    }
+    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/Options/Classes/AnimatableColor.js

@@ -1,4 +1,4 @@
-import { isArray, isString } from "../../Utils/TypeUtils.js";
+import { isArray, isNull, isString } from "../../Utils/TypeUtils.js";
 import { HslAnimation } from "./HslAnimation.js";
 import { OptionsColor } from "./OptionsColor.js";
 export class AnimatableColor extends OptionsColor {
@@ -21,7 +21,7 @@ export class AnimatableColor extends OptionsColor {
     }
     load(data) {
         super.load(data);
-        if (!data) {
+        if (isNull(data)) {
             return;
         }
         const colorAnimation = data.animation;

package/browser/Options/Classes/AnimationOptions.js

@@ -1,5 +1,6 @@
 import { AnimationMode } from "../../Enums/Modes/AnimationMode.js";
 import { StartValueType } from "../../Enums/Types/StartValueType.js";
+import { isNull } from "../../Utils/TypeUtils.js";
 import { setRangeValue } from "../../Utils/NumberUtils.js";
 export class AnimationOptions {
     constructor() {
@@ -11,7 +12,7 @@ export class AnimationOptions {
         this.sync = false;
     }
     load(data) {
-        if (!data) {
+        if (isNull(data)) {
             return;
         }
         if (data.count !== undefined) {
@@ -42,7 +43,7 @@ export class RangedAnimationOptions extends AnimationOptions {
     }
     load(data) {
         super.load(data);
-        if (!data) {
+        if (isNull(data)) {
             return;
         }
         if (data.mode !== undefined) {

package/browser/Options/Classes/Background/Background.js

@@ -1,4 +1,5 @@
 import { OptionsColor } from "../OptionsColor.js";
+import { isNull } from "../../../Utils/TypeUtils.js";
 export class Background {
     constructor() {
         this.color = new OptionsColor();
@@ -10,7 +11,7 @@ export class Background {
         this.opacity = 1;
     }
     load(data) {
-        if (!data) {
+        if (isNull(data)) {
             return;
         }
         if (data.color !== undefined) {

package/browser/Options/Classes/BackgroundMask/BackgroundMask.js

@@ -1,5 +1,5 @@
+import { isNull, isString } from "../../../Utils/TypeUtils.js";
 import { BackgroundMaskCover } from "./BackgroundMaskCover.js";
-import { isString } from "../../../Utils/TypeUtils.js";
 export class BackgroundMask {
     constructor() {
         this.composite = "destination-out";
@@ -7,7 +7,7 @@ export class BackgroundMask {
         this.enable = false;
     }
     load(data) {
-        if (!data) {
+        if (isNull(data)) {
             return;
         }
         if (data.composite !== undefined) {

package/browser/Options/Classes/BackgroundMask/BackgroundMaskCover.js

@@ -1,10 +1,11 @@
 import { OptionsColor } from "../OptionsColor.js";
+import { isNull } from "../../../Utils/TypeUtils.js";
 export class BackgroundMaskCover {
     constructor() {
         this.opacity = 1;
     }
     load(data) {
-        if (!data) {
+        if (isNull(data)) {
             return;
         }
         if (data.color !== undefined) {

package/browser/Options/Classes/ColorAnimation.js

@@ -1,4 +1,5 @@
 import { AnimationOptions } from "./AnimationOptions.js";
+import { isNull } from "../../Utils/TypeUtils.js";
 import { setRangeValue } from "../../Utils/NumberUtils.js";
 export class ColorAnimation extends AnimationOptions {
     constructor() {
@@ -8,7 +9,7 @@ export class ColorAnimation extends AnimationOptions {
     }
     load(data) {
         super.load(data);
-        if (!data) {
+        if (isNull(data)) {
             return;
         }
         if (data.offset !== undefined) {

package/browser/Options/Classes/FullScreen/FullScreen.js

@@ -1,10 +1,11 @@
+import { isNull } from "../../../Utils/TypeUtils.js";
 export class FullScreen {
     constructor() {
         this.enable = true;
         this.zIndex = 0;
     }
     load(data) {
-        if (!data) {
+        if (isNull(data)) {
             return;
         }
         if (data.enable !== undefined) {

package/browser/Options/Classes/HslAnimation.js

@@ -1,4 +1,5 @@
 import { ColorAnimation } from "./ColorAnimation.js";
+import { isNull } from "../../Utils/TypeUtils.js";
 export class HslAnimation {
     constructor() {
         this.h = new ColorAnimation();
@@ -6,7 +7,7 @@ export class HslAnimation {
         this.l = new ColorAnimation();
     }
     load(data) {
-        if (!data) {
+        if (isNull(data)) {
             return;
         }
         this.h.load(data.h);

package/browser/Options/Classes/Interactivity/Events/ClickEvent.js

@@ -1,10 +1,11 @@
+import { isNull } from "../../../../Utils/TypeUtils.js";
 export class ClickEvent {
     constructor() {
         this.enable = false;
         this.mode = [];
     }
     load(data) {
-        if (!data) {
+        if (isNull(data)) {
             return;
         }
         if (data.enable !== undefined) {

package/browser/Options/Classes/Interactivity/Events/DivEvent.js

@@ -1,4 +1,5 @@
 import { DivType } from "../../../../Enums/Types/DivType.js";
+import { isNull } from "../../../../Utils/TypeUtils.js";
 export class DivEvent {
     constructor() {
         this.selectors = [];
@@ -7,7 +8,7 @@ export class DivEvent {
         this.type = DivType.circle;
     }
     load(data) {
-        if (!data) {
+        if (isNull(data)) {
             return;
         }
         if (data.selectors !== undefined) {

package/browser/Options/Classes/Interactivity/Events/Events.js

@@ -3,6 +3,7 @@ import { DivEvent } from "./DivEvent.js";
 import { HoverEvent } from "./HoverEvent.js";
 import { ResizeEvent } from "./ResizeEvent.js";
 import { executeOnSingleOrMultiple } from "../../../../Utils/Utils.js";
+import { isNull } from "../../../../Utils/TypeUtils.js";
 export class Events {
     constructor() {
         this.onClick = new ClickEvent();
@@ -11,7 +12,7 @@ export class Events {
         this.resize = new ResizeEvent();
     }
     load(data) {
-        if (!data) {
+        if (isNull(data)) {
             return;
         }
         this.onClick.load(data.onClick);

package/browser/Options/Classes/Interactivity/Events/HoverEvent.js

@@ -1,4 +1,5 @@
 import { Parallax } from "./Parallax.js";
+import { isNull } from "../../../../Utils/TypeUtils.js";
 export class HoverEvent {
     constructor() {
         this.enable = false;
@@ -6,7 +7,7 @@ export class HoverEvent {
         this.parallax = new Parallax();
     }
     load(data) {
-        if (!data) {
+        if (isNull(data)) {
             return;
         }
         if (data.enable !== undefined) {

package/browser/Options/Classes/Interactivity/Events/Parallax.js

@@ -1,3 +1,4 @@
+import { isNull } from "../../../../Utils/TypeUtils.js";
 export class Parallax {
     constructor() {
         this.enable = false;
@@ -5,7 +6,7 @@ export class Parallax {
         this.smooth = 10;
     }
     load(data) {
-        if (!data) {
+        if (isNull(data)) {
             return;
         }
         if (data.enable !== undefined) {

package/browser/Options/Classes/Interactivity/Events/ResizeEvent.js

@@ -1,10 +1,11 @@
+import { isNull } from "../../../../Utils/TypeUtils.js";
 export class ResizeEvent {
     constructor() {
         this.delay = 0.5;
         this.enable = true;
     }
     load(data) {
-        if (data === undefined) {
+        if (isNull(data)) {
             return;
         }
         if (data.delay !== undefined) {

package/browser/Options/Classes/Interactivity/Interactivity.js

@@ -1,6 +1,7 @@
 import { Events } from "./Events/Events.js";
 import { InteractivityDetect } from "../../../Enums/InteractivityDetect.js";
 import { Modes } from "./Modes/Modes.js";
+import { isNull } from "../../../Utils/TypeUtils.js";
 export class Interactivity {
     constructor(engine, container) {
         this.detectsOn = InteractivityDetect.window;
@@ -8,7 +9,7 @@ export class Interactivity {
         this.modes = new Modes(engine, container);
     }
     load(data) {
-        if (!data) {
+        if (isNull(data)) {
             return;
         }
         const detectsOn = data.detectsOn;

package/browser/Options/Classes/Interactivity/Modes/Modes.js

@@ -1,10 +1,11 @@
+import { isNull } from "../../../../Utils/TypeUtils.js";
 export class Modes {
     constructor(engine, container) {
         this._engine = engine;
         this._container = container;
     }
     load(data) {
-        if (!data) {
+        if (isNull(data)) {
             return;
         }
         if (!this._container) {

package/browser/Options/Classes/ManualParticle.js

@@ -1,9 +1,10 @@
 import { PixelMode } from "../../Enums/Modes/PixelMode.js";
 import { deepExtend } from "../../Utils/Utils.js";
+import { isNull } from "../../Utils/TypeUtils.js";
 const defaultPosition = 50;
 export class ManualParticle {
     load(data) {
-        if (!data) {
+        if (isNull(data)) {
             return;
         }
         if (data.position) {

package/browser/Options/Classes/Options.js

@@ -1,4 +1,5 @@
 import { deepExtend, executeOnSingleOrMultiple, safeMatchMedia } from "../../Utils/Utils.js";
+import { isBoolean, isNull } from "../../Utils/TypeUtils.js";
 import { Background } from "./Background/Background.js";
 import { BackgroundMask } from "./BackgroundMask/BackgroundMask.js";
 import { FullScreen } from "./FullScreen/FullScreen.js";
@@ -8,7 +9,6 @@ import { Responsive } from "./Responsive.js";
 import { ResponsiveMode } from "../../Enums/Modes/ResponsiveMode.js";
 import { Theme } from "./Theme/Theme.js";
 import { ThemeMode } from "../../Enums/Modes/ThemeMode.js";
-import { isBoolean } from "../../Utils/TypeUtils.js";
 import { loadParticlesOptions } from "../../Utils/OptionsUtils.js";
 import { setRangeValue } from "../../Utils/NumberUtils.js";
 export class Options {
@@ -44,7 +44,7 @@ export class Options {
         this.zLayers = 100;
     }
     load(data) {
-        if (!data) {
+        if (isNull(data)) {
             return;
         }
         if (data.preset !== undefined) {

package/browser/Options/Classes/OptionsColor.js

@@ -1,4 +1,4 @@
-import { isArray, isString } from "../../Utils/TypeUtils.js";
+import { isArray, isNull, isString } from "../../Utils/TypeUtils.js";
 export class OptionsColor {
     constructor() {
         this.value = "";
@@ -17,9 +17,11 @@ export class OptionsColor {
         return color;
     }
     load(data) {
-        if (data?.value === undefined) {
+        if (isNull(data)) {
             return;
         }
-        this.value = data.value;
+        if (!isNull(data.value)) {
+            this.value = data.value;
+        }
     }
 }

package/browser/Options/Classes/Particles/Bounce/ParticlesBounce.js

@@ -1,11 +1,12 @@
 import { ParticlesBounceFactor } from "./ParticlesBounceFactor.js";
+import { isNull } from "../../../../Utils/TypeUtils.js";
 export class ParticlesBounce {
     constructor() {
         this.horizontal = new ParticlesBounceFactor();
         this.vertical = new ParticlesBounceFactor();
     }
     load(data) {
-        if (!data) {
+        if (isNull(data)) {
             return;
         }
         this.horizontal.load(data.horizontal);

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

@@ -2,6 +2,7 @@ import { CollisionMode } from "../../../../Enums/Modes/CollisionMode.js";
 import { CollisionsAbsorb } from "./CollisionsAbsorb.js";
 import { CollisionsOverlap } from "./CollisionsOverlap.js";
 import { ParticlesBounce } from "../Bounce/ParticlesBounce.js";
+import { isNull } from "../../../../Utils/TypeUtils.js";
 import { setRangeValue } from "../../../../Utils/NumberUtils.js";
 export class Collisions {
     constructor() {
@@ -13,7 +14,7 @@ export class Collisions {
         this.overlap = new CollisionsOverlap();
     }
     load(data) {
-        if (!data) {
+        if (isNull(data)) {
             return;
         }
         this.absorb.load(data.absorb);

package/browser/Options/Classes/Particles/Collisions/CollisionsAbsorb.js

@@ -1,9 +1,10 @@
+import { isNull } from "../../../../Utils/TypeUtils.js";
 export class CollisionsAbsorb {
     constructor() {
         this.speed = 2;
     }
     load(data) {
-        if (!data) {
+        if (isNull(data)) {
             return;
         }
         if (data.speed !== undefined) {

package/browser/Options/Classes/Particles/Collisions/CollisionsOverlap.js

@@ -1,10 +1,11 @@
+import { isNull } from "../../../../Utils/TypeUtils.js";
 export class CollisionsOverlap {
     constructor() {
         this.enable = true;
         this.retries = 0;
     }
     load(data) {
-        if (!data) {
+        if (isNull(data)) {
             return;
         }
         if (data.enable !== undefined) {

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

@@ -1,4 +1,5 @@
 import { deepExtend } from "../../../../Utils/Utils.js";
+import { isNull } from "../../../../Utils/TypeUtils.js";
 export class Effect {
     constructor() {
         this.close = true;
@@ -7,7 +8,7 @@ export class Effect {
         this.type = [];
     }
     load(data) {
-        if (!data) {
+        if (isNull(data)) {
             return;
         }
         const options = data.options;

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

@@ -1,5 +1,5 @@
 import { MoveDirection } from "../../../../Enums/Directions/MoveDirection.js";
-import { isNumber, isObject } from "../../../../Utils/TypeUtils.js";
+import { isNull, isNumber, isObject } from "../../../../Utils/TypeUtils.js";
 import { MoveAngle } from "./MoveAngle.js";
 import { MoveAttract } from "./MoveAttract.js";
 import { MoveCenter } from "./MoveCenter.js";
@@ -32,7 +32,7 @@ export class Move {
         this.warp = false;
     }
     load(data) {
-        if (!data) {
+        if (isNull(data)) {
             return;
         }
         this.angle.load(isNumber(data.angle) ? { value: data.angle } : data.angle);

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

@@ -1,3 +1,4 @@
+import { isNull } from "../../../../Utils/TypeUtils.js";
 import { setRangeValue } from "../../../../Utils/NumberUtils.js";
 export class MoveAngle {
     constructor() {
@@ -5,7 +6,7 @@ export class MoveAngle {
         this.value = 90;
     }
     load(data) {
-        if (!data) {
+        if (isNull(data)) {
             return;
         }
         if (data.offset !== undefined) {

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

@@ -1,3 +1,4 @@
+import { isNull } from "../../../../Utils/TypeUtils.js";
 import { setRangeValue } from "../../../../Utils/NumberUtils.js";
 export class MoveAttract {
     constructor() {
@@ -9,7 +10,7 @@ export class MoveAttract {
         };
     }
     load(data) {
-        if (!data) {
+        if (isNull(data)) {
             return;
         }
         if (data.distance !== undefined) {

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

@@ -1,4 +1,5 @@
 import { PixelMode } from "../../../../Enums/Modes/PixelMode.js";
+import { isNull } from "../../../../Utils/TypeUtils.js";
 export class MoveCenter {
     constructor() {
         this.x = 50;
@@ -7,7 +8,7 @@ export class MoveCenter {
         this.radius = 0;
     }
     load(data) {
-        if (!data) {
+        if (isNull(data)) {
             return;
         }
         if (data.x !== undefined) {