@tsparticles/engine 4.0.0-alpha.26 → 4.0.0-alpha.27

package/browser/Utils/Utils.js

@@ -8,16 +8,70 @@ import { OutModeDirection } from "../Enums/Directions/OutModeDirection.js";
 import { PixelMode } from "../Enums/Modes/PixelMode.js";
 import { StartValueType } from "../Enums/Types/StartValueType.js";
 import { Vector } from "../Core/Utils/Vectors.js";
-const minRadius = 0;
-function memoize(fn) {
-    const cache = new Map();
+const minRadius = 0, minMemoizeSize = 0;
+export function memoize(fn, options) {
+    const cache = new Map(), maxSize = options?.maxSize, ttlMs = options?.ttlMs, keyFn = options?.keyFn, stableStringify = (obj, seen = new WeakSet()) => {
+        if (obj === null) {
+            return "null";
+        }
+        const t = typeof obj;
+        if (t === "undefined") {
+            return "undefined";
+        }
+        if (t === "number" || t === "boolean" || t === "string") {
+            return JSON.stringify(obj);
+        }
+        if (t === "function") {
+            try {
+                const fn = obj;
+                return fn.toString();
+            }
+            catch {
+                return '"[Function]"';
+            }
+        }
+        if (t === "symbol") {
+            try {
+                return obj.toString();
+            }
+            catch {
+                return '"[Symbol]"';
+            }
+        }
+        if (Array.isArray(obj)) {
+            return `[${obj.map(i => stableStringify(i, seen)).join(",")}]`;
+        }
+        if (seen.has(obj)) {
+            return '"[Circular]"';
+        }
+        seen.add(obj);
+        const keys = Object.keys(obj).sort();
+        return `{${keys.map(k => `${JSON.stringify(k)}:${stableStringify(obj[k], seen)}`).join(",")}}`;
+    }, defaultKeyer = (args) => stableStringify(args), makeKey = (args) => (keyFn ? keyFn(args) : defaultKeyer(args)), ensureBounds = () => {
+        if (typeof maxSize === "number" && maxSize >= minMemoizeSize) {
+            while (cache.size > maxSize) {
+                const firstKey = cache.keys().next().value;
+                if (firstKey === undefined)
+                    break;
+                cache.delete(firstKey);
+            }
+        }
+    };
     return (...args) => {
-        const key = JSON.stringify(args);
-        if (cache.has(key)) {
-            return cache.get(key);
+        const key = makeKey(args), now = Date.now(), entry = cache.get(key);
+        if (entry !== undefined) {
+            if (ttlMs && now - entry.ts > ttlMs) {
+                cache.delete(key);
+            }
+            else {
+                cache.delete(key);
+                cache.set(key, { value: entry.value, ts: entry.ts });
+                return entry.value;
+            }
         }
         const result = fn(...args);
-        cache.set(key, result);
+        cache.set(key, { value: result, ts: now });
+        ensureBounds();
         return result;
     };
 }
@@ -98,8 +152,27 @@ export function deepExtend(destination, ...sources) {
         else if (!isObject(destination) || Array.isArray(destination)) {
             destination = {};
         }
-        for (const key of Object.keys(source)) {
-            if (key === "__proto__" || key === "constructor" || key === "prototype") {
+        const sourceKeys = Object.keys(source), dangerousKeys = new Set(["__proto__", "constructor", "prototype"]), hasNested = sourceKeys.some(k => {
+            const v = source[k];
+            return isObject(v) || Array.isArray(v);
+        });
+        if (!hasNested) {
+            const sourceDict = source, destDict = destination;
+            for (const key of sourceKeys) {
+                if (dangerousKeys.has(key)) {
+                    continue;
+                }
+                if (key in sourceDict) {
+                    const v = sourceDict[key];
+                    if (v !== undefined) {
+                        destDict[key] = v;
+                    }
+                }
+            }
+            continue;
+        }
+        for (const key of sourceKeys) {
+            if (dangerousKeys.has(key)) {
                 continue;
             }
             const sourceDict = source, destDict = destination, value = sourceDict[key];
@@ -297,7 +370,7 @@ export function cloneStyle(style) {
     const clonedStyle = safeDocument().createElement("div").style;
     for (const key in style) {
         const styleKey = style[key];
-        if (!Object.hasOwn(style, key) || isNull(styleKey)) {
+        if (!(key in style) || isNull(styleKey)) {
             continue;
         }
         const styleValue = style.getPropertyValue?.(styleKey);
@@ -305,11 +378,11 @@ export function cloneStyle(style) {
             continue;
         }
         const stylePriority = style.getPropertyPriority?.(styleKey);
-        if (!stylePriority) {
-            clonedStyle.setProperty(styleKey, styleValue);
+        if (stylePriority) {
+            clonedStyle.setProperty(styleKey, styleValue, stylePriority);
         }
         else {
-            clonedStyle.setProperty(styleKey, styleValue, stylePriority);
+            clonedStyle.setProperty(styleKey, styleValue);
         }
     }
     return clonedStyle;

package/browser/exports.js

@@ -27,6 +27,7 @@ export * from "./Options/Classes/OptionsColor.js";
 export * from "./Options/Classes/Particles/Bounce/ParticlesBounce.js";
 export * from "./Options/Classes/Particles/Bounce/ParticlesBounceFactor.js";
 export * from "./Options/Classes/Particles/ParticlesOptions.js";
+export * from "./Options/Classes/Particles/Fill.js";
 export * from "./Options/Classes/Particles/Stroke.js";
 export * from "./Options/Classes/Particles/Move/Move.js";
 export * from "./Options/Classes/Particles/Move/MoveAngle.js";

package/cjs/Core/Canvas.js

@@ -1,6 +1,6 @@
 import { clear, drawParticle, drawParticlePlugin, paintBase, paintImage } from "../Utils/CanvasUtils.js";
 import { cloneStyle, getFullScreenStyle, safeMatchMedia, safeMutationObserver } from "../Utils/Utils.js";
-import { defaultTransformValue, defaultZoom, generatedAttribute, half, minimumSize, zIndexFactorOffset, } from "./Utils/Constants.js";
+import { defaultCompositeValue, defaultTransformValue, defaultZoom, generatedAttribute, half, minimumSize, zIndexFactorOffset, } from "./Utils/Constants.js";
 import { getStyleFromHsl, getStyleFromRgb, rangeColorToHsl, rangeColorToRgb } from "../Utils/ColorUtils.js";
 const fColorIndex = 0, sColorIndex = 1;
 function setTransformValue(factor, newFactor, key) {
@@ -163,14 +163,14 @@ export class Canvas {
         if (radius <= minimumSize) {
             return;
         }
-        const pfColor = particle.getFillColor(), psColor = particle.getStrokeColor() ?? pfColor;
+        const pfColor = particle.getFillColor(), psColor = particle.getStrokeColor();
         let [fColor, sColor] = this._getPluginParticleColors(particle);
         fColor ??= pfColor;
         sColor ??= psColor;
         if (!fColor && !sColor) {
             return;
         }
-        const container = this.container, zIndexOptions = particle.options.zIndex, zIndexFactor = zIndexFactorOffset - particle.zIndexFactor, { opacity, strokeOpacity } = particle.getOpacity(), transform = this._reusableTransform, colorStyles = this._reusableColorStyles, fill = fColor ? getStyleFromHsl(fColor, container.hdr, opacity) : undefined, stroke = sColor ? getStyleFromHsl(sColor, container.hdr, strokeOpacity) : fill;
+        const container = this.container, zIndexOptions = particle.options.zIndex, zIndexFactor = zIndexFactorOffset - particle.zIndexFactor, { fillOpacity, opacity, strokeOpacity } = particle.getOpacity(), transform = this._reusableTransform, colorStyles = this._reusableColorStyles, fill = fColor ? getStyleFromHsl(fColor, container.hdr, fillOpacity * opacity) : undefined, stroke = sColor ? getStyleFromHsl(sColor, container.hdr, strokeOpacity * opacity) : fill;
         transform.a = transform.b = transform.c = transform.d = undefined;
         colorStyles.fill = fill;
         colorStyles.stroke = stroke;
@@ -357,6 +357,9 @@ export class Canvas {
             willReadFrequently: false,
         };
         this._context = this.element.getContext("2d", this._canvasSettings);
+        if (this._context) {
+            this._context.globalCompositeOperation = defaultCompositeValue;
+        }
         this._safeMutationObserver(obs => {
             obs.disconnect();
         });
@@ -514,7 +517,7 @@ export class Canvas {
             this._resetOriginalStyle();
         }
         for (const key in options.style) {
-            if (!key || !Object.hasOwn(options.style, key)) {
+            if (!key || !(key in options.style)) {
                 continue;
             }
             const value = options.style[key];

package/cjs/Core/Engine.js

@@ -60,6 +60,7 @@ export class Engine {
         shapes: new Map(),
         updaters: new Map(),
     };
+    palettes = new Map();
     plugins = [];
     presets = new Map();
     shapeDrawers = new Map();
@@ -83,7 +84,7 @@ export class Engine {
         return this._domArray;
     }
     get version() {
-        return "4.0.0-alpha.26";
+        return "4.0.0-alpha.27";
     }
     addColorManager(name, manager) {
         this.colorManagers.set(name, manager);
@@ -105,6 +106,9 @@ export class Engine {
     addEventListener(type, listener) {
         this._eventDispatcher.addEventListener(type, listener);
     }
+    addPalette(name, palette) {
+        this.palettes.set(name, palette);
+    }
     addParticleUpdater(name, updaterInitializer) {
         this.initializers.updaters.set(name, updaterInitializer);
     }
@@ -145,6 +149,9 @@ export class Engine {
     getEffectDrawers(container, force = false) {
         return getItemMapFromInitializer(container, this.effectDrawers, this.initializers.effects, force);
     }
+    getPalette(name) {
+        return this.palettes.get(name);
+    }
     getPlugin(plugin) {
         return this.plugins.find(t => t.id === plugin);
     }

package/cjs/Core/Interfaces/IPalette.js

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

package/cjs/Core/Particle.js

@@ -12,14 +12,12 @@ function loadEffectData(effect, effectOptions, id, reduceDuplicates) {
     const effectData = effectOptions.options[effect];
     return deepExtend({
         close: effectOptions.close,
-        fill: effectOptions.fill,
     }, itemFromSingleOrMultiple(effectData, id, reduceDuplicates));
 }
 function loadShapeData(shape, shapeOptions, id, reduceDuplicates) {
     const shapeData = shapeOptions.options[shape];
     return deepExtend({
         close: shapeOptions.close,
-        fill: shapeOptions.fill,
     }, itemFromSingleOrMultiple(shapeData, id, reduceDuplicates));
 }
 function fixOutMode(data) {
@@ -38,13 +36,14 @@ export class Particle {
     container;
     backColor;
     bubble;
-    color;
     destroyed;
     direction;
     effect;
     effectClose;
     effectData;
-    effectFill;
+    fillColor;
+    fillEnabled;
+    fillOpacity;
     group;
     id;
     ignoresResizeRatio;
@@ -67,7 +66,6 @@ export class Particle {
     shape;
     shapeClose;
     shapeData;
-    shapeFill;
     sides;
     size;
     slow;
@@ -79,6 +77,7 @@ export class Particle {
     velocity;
     zIndexFactor;
     _cachedOpacityData = {
+        fillOpacity: defaultOpacity,
         opacity: defaultOpacity,
         strokeOpacity: defaultOpacity,
     };
@@ -126,15 +125,16 @@ export class Particle {
         return this.rotation + (this.pathRotation ? this.velocity.angle : defaultAngle);
     }
     getFillColor() {
-        return this._getRollColor(this.bubble.color ?? getHslFromAnimation(this.color));
+        return this._getRollColor(this.bubble.color ?? getHslFromAnimation(this.fillColor));
     }
     getMass() {
         return this.getRadius() ** squareExp * Math.PI * half;
     }
     getOpacity() {
-        const zIndexOptions = this.options.zIndex, zIndexFactor = zIndexFactorOffset - this.zIndexFactor, zOpacityFactor = zIndexFactor ** zIndexOptions.opacityRate, opacity = this.bubble.opacity ?? getRangeValue(this.opacity?.value ?? defaultOpacity), strokeOpacity = this.strokeOpacity ?? opacity;
+        const zIndexOptions = this.options.zIndex, zIndexFactor = zIndexFactorOffset - this.zIndexFactor, zOpacityFactor = zIndexFactor ** zIndexOptions.opacityRate, opacity = this.bubble.opacity ?? getRangeValue(this.opacity?.value ?? defaultOpacity), fillOpacity = this.fillOpacity ?? defaultOpacity, strokeOpacity = this.strokeOpacity ?? defaultOpacity;
+        this._cachedOpacityData.fillOpacity = opacity * fillOpacity * zOpacityFactor;
         this._cachedOpacityData.opacity = opacity * zOpacityFactor;
-        this._cachedOpacityData.strokeOpacity = strokeOpacity * zOpacityFactor;
+        this._cachedOpacityData.strokeOpacity = opacity * strokeOpacity * zOpacityFactor;
         return this._cachedOpacityData;
     }
     getPosition() {
@@ -172,9 +172,7 @@ export class Particle {
         this.id = id;
         this.group = group;
         this.effectClose = true;
-        this.effectFill = true;
         this.shapeClose = true;
-        this.shapeFill = true;
         this.pathRotation = false;
         this.lastPathTime = 0;
         this.destroyed = false;
@@ -226,9 +224,7 @@ export class Particle {
         if (shapeData) {
             particlesOptions.load(shapeData.particles);
         }
-        this.effectFill = effectData?.fill ?? particlesOptions.effect.fill;
         this.effectClose = effectData?.close ?? particlesOptions.effect.close;
-        this.shapeFill = shapeData?.fill ?? particlesOptions.shape.fill;
         this.shapeClose = shapeData?.close ?? particlesOptions.shape.close;
         this.options = particlesOptions;
         container.retina.initParticle(this);

package/cjs/Core/Utils/Constants.js

@@ -1,4 +1,4 @@
-export const generatedAttribute = "generated", resizeEvent = "resize", visibilityChangeEvent = "visibilitychange", percentDenominator = 100, half = 0.5, millisecondsToSeconds = 1000, originPoint = {
+export const generatedAttribute = "generated", defaultCompositeValue = "source-over", resizeEvent = "resize", visibilityChangeEvent = "visibilitychange", percentDenominator = 100, half = 0.5, millisecondsToSeconds = 1000, originPoint = {
     x: 0,
     y: 0,
     z: 0,

package/cjs/Options/Classes/ColorAnimation.js

@@ -2,9 +2,13 @@ import { AnimationOptions } from "./AnimationOptions.js";
 import { isNull } from "../../Utils/TypeUtils.js";
 import { setRangeValue } from "../../Utils/MathUtils.js";
 export class ColorAnimation extends AnimationOptions {
+    max;
+    min;
     offset;
-    constructor() {
+    constructor(min, max) {
         super();
+        this.min = min;
+        this.max = max;
         this.offset = 0;
         this.sync = true;
     }
@@ -13,6 +17,12 @@ export class ColorAnimation extends AnimationOptions {
         if (isNull(data)) {
             return;
         }
+        if (data.max !== undefined) {
+            this.max = data.max;
+        }
+        if (data.min !== undefined) {
+            this.min = data.min;
+        }
         if (data.offset !== undefined) {
             this.offset = setRangeValue(data.offset);
         }

package/cjs/Options/Classes/HslAnimation.js

@@ -1,9 +1,10 @@
+import { hMax, hMin, lMax, lMin, sMax, sMin } from "../../Core/Utils/Constants.js";
 import { ColorAnimation } from "./ColorAnimation.js";
 import { isNull } from "../../Utils/TypeUtils.js";
 export class HslAnimation {
-    h = new ColorAnimation();
-    l = new ColorAnimation();
-    s = new ColorAnimation();
+    h = new ColorAnimation(hMin, hMax);
+    l = new ColorAnimation(lMin, lMax);
+    s = new ColorAnimation(sMin, sMax);
     load(data) {
         if (isNull(data)) {
             return;

package/cjs/Options/Classes/Options.js

@@ -18,6 +18,7 @@ export class Options {
     hdr;
     key;
     name;
+    palette;
     particles;
     pauseOnBlur;
     pauseOnOutsideViewport;
@@ -54,10 +55,15 @@ export class Options {
             return;
         }
         if (data.preset !== undefined) {
-            executeOnSingleOrMultiple(data.preset, preset => {
+            this.preset = data.preset;
+            executeOnSingleOrMultiple(this.preset, preset => {
                 this._importPreset(preset);
             });
         }
+        if (data.palette !== undefined) {
+            this.palette = data.palette;
+            this._importPalette(this.palette);
+        }
         if (data.autoPlay !== undefined) {
             this.autoPlay = data.autoPlay;
         }
@@ -114,6 +120,37 @@ export class Options {
             plugin.loadOptions(this._container, this, data);
         });
     }
+    _importPalette = palette => {
+        const paletteData = this._engine.getPalette(palette);
+        if (!paletteData) {
+            return;
+        }
+        this.load({
+            background: {
+                color: paletteData.background,
+            },
+            blend: {
+                enable: true,
+                mode: paletteData.blendMode,
+            },
+            particles: {
+                fill: {
+                    color: paletteData.fill
+                        ? {
+                            value: paletteData.colors,
+                        }
+                        : undefined,
+                    enable: paletteData.fill,
+                },
+                stroke: !paletteData.fill
+                    ? paletteData.colors.map(color => ({
+                        color: { value: color },
+                        width: 1,
+                    }))
+                    : undefined,
+            },
+        });
+    };
     _importPreset = preset => {
         this.load(this._engine.getPreset(preset));
     };

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

@@ -2,12 +2,10 @@ import { deepExtend } from "../../../../Utils/Utils.js";
 import { isNull } from "../../../../Utils/TypeUtils.js";
 export class Effect {
     close;
-    fill;
     options;
     type;
     constructor() {
         this.close = true;
-        this.fill = true;
         this.options = {};
         this.type = [];
     }
@@ -27,9 +25,6 @@ export class Effect {
         if (data.close !== undefined) {
             this.close = data.close;
         }
-        if (data.fill !== undefined) {
-            this.fill = data.fill;
-        }
         if (data.type !== undefined) {
             this.type = data.type;
         }

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

@@ -0,0 +1,28 @@
+import { AnimatableColor } from "../AnimatableColor.js";
+import { isNull } from "../../../Utils/TypeUtils.js";
+import { setRangeValue } from "../../../Utils/MathUtils.js";
+export class Fill {
+    color;
+    enable;
+    opacity;
+    constructor() {
+        this.enable = true;
+        this.color = new AnimatableColor();
+        this.color.value = "#fff";
+        this.opacity = 1;
+    }
+    load(data) {
+        if (isNull(data)) {
+            return;
+        }
+        if (data.color !== undefined) {
+            this.color = AnimatableColor.create(this.color, data.color);
+        }
+        if (data.enable !== undefined) {
+            this.enable = data.enable;
+        }
+        if (data.opacity !== undefined) {
+            this.opacity = setRangeValue(data.opacity);
+        }
+    }
+}

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

@@ -1,6 +1,6 @@
 import { deepExtend, executeOnSingleOrMultiple } from "../../../Utils/Utils.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 { ParticlesBounce } from "./Bounce/ParticlesBounce.js";
@@ -12,8 +12,8 @@ import { ZIndex } from "./ZIndex/ZIndex.js";
 import { isNull } from "../../../Utils/TypeUtils.js";
 export class ParticlesOptions {
     bounce;
-    color;
     effect;
+    fill;
     groups;
     move;
     number;
@@ -29,9 +29,8 @@ export class ParticlesOptions {
         this._engine = engine;
         this._container = container;
         this.bounce = new ParticlesBounce();
-        this.color = new AnimatableColor();
-        this.color.value = "#fff";
         this.effect = new Effect();
+        this.fill = new Fill();
         this.groups = {};
         this.move = new Move();
         this.number = new ParticlesNumber();
@@ -48,7 +47,7 @@ export class ParticlesOptions {
         }
         if (data.groups !== undefined) {
             for (const group of Object.keys(data.groups)) {
-                if (!Object.hasOwn(data.groups, group)) {
+                if (!(group in data.groups)) {
                     continue;
                 }
                 const item = data.groups[group];
@@ -61,7 +60,6 @@ export class ParticlesOptions {
             this.reduceDuplicates = data.reduceDuplicates;
         }
         this.bounce.load(data.bounce);
-        this.color.load(AnimatableColor.create(this.color, data.color));
         this.effect.load(data.effect);
         this.move.load(data.move);
         this.number.load(data.number);
@@ -69,6 +67,14 @@ export class ParticlesOptions {
         this.shape.load(data.shape);
         this.size.load(data.size);
         this.zIndex.load(data.zIndex);
+        const fillToLoad = data.fill;
+        if (fillToLoad) {
+            this.fill = executeOnSingleOrMultiple(fillToLoad, t => {
+                const tmp = new Fill();
+                tmp.load(t);
+                return tmp;
+            });
+        }
         const strokeToLoad = data.stroke;
         if (strokeToLoad) {
             this.stroke = executeOnSingleOrMultiple(strokeToLoad, t => {

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

@@ -2,12 +2,10 @@ import { deepExtend } from "../../../../Utils/Utils.js";
 import { isNull } from "../../../../Utils/TypeUtils.js";
 export class Shape {
     close;
-    fill;
     options;
     type;
     constructor() {
         this.close = true;
-        this.fill = true;
         this.options = {};
         this.type = "circle";
     }
@@ -27,9 +25,6 @@ export class Shape {
         if (data.close !== undefined) {
             this.close = data.close;
         }
-        if (data.fill !== undefined) {
-            this.fill = data.fill;
-        }
         if (data.type !== undefined) {
             this.type = data.type;
         }

package/cjs/Options/Interfaces/Particles/IFill.js

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

package/cjs/Utils/CanvasUtils.js

@@ -24,7 +24,7 @@ export function drawParticle(data) {
     if (colorStyles.fill) {
         context.fillStyle = colorStyles.fill;
     }
-    const strokeWidth = particle.strokeWidth ?? minStrokeWidth;
+    const fillEnabled = !!particle.fillEnabled, strokeWidth = particle.strokeWidth ?? minStrokeWidth;
     context.lineWidth = strokeWidth;
     if (colorStyles.stroke) {
         context.strokeStyle = colorStyles.stroke;
@@ -37,8 +37,8 @@ export function drawParticle(data) {
         opacity,
         delta,
         pixelRatio: container.retina.pixelRatio,
-        fill: particle.shapeFill,
-        stroke: strokeWidth > minStrokeWidth || !particle.shapeFill,
+        fill: fillEnabled,
+        stroke: strokeWidth > minStrokeWidth,
         transformData,
         position: { ...pos },
         drawPosition,
@@ -79,7 +79,7 @@ export function drawShape(drawer, data) {
     if (!drawer) {
         return;
     }
-    const { context, particle, stroke } = data;
+    const { context, fill, particle, stroke } = data;
     if (!particle.shape) {
         return;
     }
@@ -91,7 +91,7 @@ export function drawShape(drawer, data) {
     if (stroke) {
         context.stroke();
     }
-    if (particle.shapeFill) {
+    if (fill) {
         context.fill();
     }
 }