@tsparticles/engine 4.0.0-beta.0 → 4.0.0-beta.10

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

@@ -1,50 +1,52 @@
 import { deepExtend, executeOnSingleOrMultiple } from "../../../Utils/Utils.js";
+import { isArray, isNull } from "../../../Utils/TypeUtils.js";
 import { Effect } from "./Effect/Effect.js";
-import { Fill } from "./Fill.js";
 import { Move } from "./Move/Move.js";
 import { Opacity } from "./Opacity/Opacity.js";
+import { Paint } from "./Paint.js";
 import { ParticlesBounce } from "./Bounce/ParticlesBounce.js";
 import { ParticlesNumber } from "./Number/ParticlesNumber.js";
 import { Shape } from "./Shape/Shape.js";
 import { Size } from "./Size/Size.js";
-import { Stroke } from "./Stroke.js";
 import { ZIndex } from "./ZIndex/ZIndex.js";
-import { isNull } from "../../../Utils/TypeUtils.js";
 export class ParticlesOptions {
     bounce;
     effect;
-    fill;
     groups;
     move;
     number;
     opacity;
+    paint;
+    palette;
     reduceDuplicates;
     shape;
     size;
-    stroke;
     zIndex;
     _container;
-    _engine;
-    constructor(engine, container) {
-        this._engine = engine;
+    _pluginManager;
+    constructor(pluginManager, container) {
+        this._pluginManager = pluginManager;
         this._container = container;
         this.bounce = new ParticlesBounce();
         this.effect = new Effect();
-        this.fill = new Fill();
         this.groups = {};
         this.move = new Move();
         this.number = new ParticlesNumber();
         this.opacity = new Opacity();
+        this.paint = new Paint();
         this.reduceDuplicates = false;
         this.shape = new Shape();
         this.size = new Size();
-        this.stroke = new Stroke();
         this.zIndex = new ZIndex();
     }
     load(data) {
         if (isNull(data)) {
             return;
         }
+        if (data.palette) {
+            this.palette = data.palette;
+            this._importPalette(this.palette);
+        }
         if (data.groups !== undefined) {
             for (const group of Object.keys(data.groups)) {
                 if (!(group in data.groups)) {
@@ -64,32 +66,24 @@ export class ParticlesOptions {
         this.move.load(data.move);
         this.number.load(data.number);
         this.opacity.load(data.opacity);
-        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 => {
-                const tmp = new Stroke();
+        const paintToLoad = data.paint;
+        if (paintToLoad) {
+            this.paint = executeOnSingleOrMultiple(paintToLoad, t => {
+                const tmp = new Paint();
                 tmp.load(t);
                 return tmp;
             });
         }
+        this.shape.load(data.shape);
+        this.size.load(data.size);
+        this.zIndex.load(data.zIndex);
         if (this._container) {
-            for (const plugin of this._engine.plugins) {
+            for (const plugin of this._pluginManager.plugins) {
                 if (plugin.loadParticlesOptions) {
                     plugin.loadParticlesOptions(this._container, this, data);
                 }
             }
-            const updaters = this._engine.updaters.get(this._container);
+            const updaters = this._pluginManager.updaters.get(this._container);
             if (updaters) {
                 for (const updater of updaters) {
                     if (updater.loadOptions) {
@@ -99,4 +93,48 @@ export class ParticlesOptions {
             }
         }
     }
+    _importPalette = (palette) => {
+        const paletteData = this._pluginManager.getPalette(palette);
+        if (!paletteData) {
+            return;
+        }
+        const paletteColors = paletteData.colors, paletteFill = paletteColors.fill, paletteStroke = paletteColors.stroke, defaultPaintStrokeIndex = 0, defaultPaintStrokeWidth = 0, palettePaint = {
+            fill: paletteFill
+                ? {
+                    color: {
+                        value: paletteFill.value,
+                    },
+                    enable: paletteFill.enable,
+                }
+                : undefined,
+        };
+        if (paletteStroke) {
+            if (isArray(paletteStroke)) {
+                const firstStroke = paletteStroke[defaultPaintStrokeIndex];
+                if (firstStroke) {
+                    palettePaint.stroke = {
+                        color: {
+                            value: firstStroke.value,
+                        },
+                        width: firstStroke.width || defaultPaintStrokeWidth,
+                    };
+                }
+            }
+            else {
+                palettePaint.stroke = {
+                    color: {
+                        value: paletteStroke.value,
+                    },
+                    width: paletteStroke.width,
+                };
+            }
+        }
+        this.load({
+            paint: palettePaint,
+            blend: {
+                enable: true,
+                mode: paletteData.blendMode,
+            },
+        });
+    };
 }

package/browser/Options/Interfaces/Particles/IPaint.js

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

package/browser/Types/CanvasContextType.js

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

package/browser/Utils/CanvasUtils.js

@@ -16,7 +16,7 @@ export function clear(context, dimension) {
     context.clearRect(originPoint.x, originPoint.y, dimension.width, dimension.height);
 }
 export function drawParticle(data) {
-    const { container, context, particle, delta, colorStyles, radius, opacity, transform } = data, { effectDrawers, shapeDrawers } = container.particles, pos = particle.getPosition(), transformData = particle.getTransformData(transform), drawScale = defaultZoom, drawPosition = {
+    const { container, context, particle, delta, colorStyles, radius, opacity, transform } = data, { effectDrawers, shapeDrawers } = container, pos = particle.getPosition(), transformData = particle.getTransformData(transform), drawScale = defaultZoom, drawPosition = {
         x: pos.x,
         y: pos.y,
     };
@@ -88,12 +88,12 @@ export function drawShape(drawer, data) {
     if (particle.shapeClose) {
         context.closePath();
     }
-    if (stroke) {
-        context.stroke();
-    }
     if (fill) {
         context.fill();
     }
+    if (stroke) {
+        context.stroke();
+    }
 }
 export function drawShapeAfterDraw(drawer, data) {
     if (!drawer?.afterDraw) {

package/browser/Utils/ColorUtils.js

@@ -17,35 +17,35 @@ function getCachedStyle(key, generator) {
     }
     return cached;
 }
-function stringToRgba(engine, input) {
+function stringToRgba(pluginManager, input) {
     if (!input) {
         return;
     }
-    for (const manager of engine.colorManagers.values()) {
+    for (const manager of pluginManager.colorManagers.values()) {
         if (manager.accepts(input)) {
             return manager.parseString(input);
         }
     }
     return undefined;
 }
-export function rangeColorToRgb(engine, input, index, useIndex = true) {
+export function rangeColorToRgb(pluginManager, input, index, useIndex = true) {
     if (!input) {
         return;
     }
     const color = isString(input) ? { value: input } : input;
     if (isString(color.value)) {
-        return colorToRgb(engine, color.value, index, useIndex);
+        return colorToRgb(pluginManager, color.value, index, useIndex);
     }
     if (isArray(color.value)) {
         const value = itemFromArray(color.value, index, useIndex);
         if (!value) {
             return;
         }
-        return rangeColorToRgb(engine, {
+        return rangeColorToRgb(pluginManager, {
             value,
         });
     }
-    for (const manager of engine.colorManagers.values()) {
+    for (const manager of pluginManager.colorManagers.values()) {
         const res = manager.handleRangeColor(color);
         if (res) {
             return res;
@@ -53,24 +53,24 @@ export function rangeColorToRgb(engine, input, index, useIndex = true) {
     }
     return undefined;
 }
-export function colorToRgb(engine, input, index, useIndex = true) {
+export function colorToRgb(pluginManager, input, index, useIndex = true) {
     if (!input) {
         return;
     }
     const color = isString(input) ? { value: input } : input;
     if (isString(color.value)) {
-        return color.value === randomColorValue ? getRandomRgbColor() : stringToRgb(engine, color.value);
+        return color.value === randomColorValue ? getRandomRgbColor() : stringToRgb(pluginManager, color.value);
     }
     if (isArray(color.value)) {
         const value = itemFromArray(color.value, index, useIndex);
         if (!value) {
             return;
         }
-        return colorToRgb(engine, {
+        return colorToRgb(pluginManager, {
             value,
         });
     }
-    for (const manager of engine.colorManagers.values()) {
+    for (const manager of pluginManager.colorManagers.values()) {
         const res = manager.handleColor(color);
         if (res) {
             return res;
@@ -78,12 +78,12 @@ export function colorToRgb(engine, input, index, useIndex = true) {
     }
     return undefined;
 }
-export function colorToHsl(engine, color, index, useIndex = true) {
-    const rgb = colorToRgb(engine, color, index, useIndex);
+export function colorToHsl(pluginManager, color, index, useIndex = true) {
+    const rgb = colorToRgb(pluginManager, color, index, useIndex);
     return rgb ? rgbToHsl(rgb) : undefined;
 }
-export function rangeColorToHsl(engine, color, index, useIndex = true) {
-    const rgb = rangeColorToRgb(engine, color, index, useIndex);
+export function rangeColorToHsl(pluginManager, color, index, useIndex = true) {
+    const rgb = rangeColorToRgb(pluginManager, color, index, useIndex);
     return rgb ? rgbToHsl(rgb) : undefined;
 }
 export function rgbToHsl(color) {
@@ -115,11 +115,11 @@ export function rgbToHsl(color) {
     }
     return res;
 }
-export function stringToAlpha(engine, input) {
-    return stringToRgba(engine, input)?.a;
+export function stringToAlpha(pluginManager, input) {
+    return stringToRgba(pluginManager, input)?.a;
 }
-export function stringToRgb(engine, input) {
-    return stringToRgba(engine, input);
+export function stringToRgb(pluginManager, input) {
+    return stringToRgba(pluginManager, input);
 }
 export function hslToRgb(hsl) {
     const 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;
@@ -223,11 +223,11 @@ export function getLinkColor(p1, p2, linkColor) {
     }
     return undefined;
 }
-export function getLinkRandomColor(engine, optColor, blink, consent) {
+export function getLinkRandomColor(pluginManager, optColor, blink, consent) {
     const color = isString(optColor) ? optColor : optColor.value;
     if (color === randomColorValue) {
         if (consent) {
-            return rangeColorToRgb(engine, {
+            return rangeColorToRgb(pluginManager, {
                 value: color,
             });
         }
@@ -240,7 +240,7 @@ export function getLinkRandomColor(engine, optColor, blink, consent) {
         return midColorValue;
     }
     else {
-        return rangeColorToRgb(engine, {
+        return rangeColorToRgb(pluginManager, {
             value: color,
         });
     }

package/browser/Utils/LogUtils.js

@@ -6,6 +6,7 @@ const _logger = {
     },
     info: console.info,
     log: console.log,
+    trace: console.trace,
     verbose: console.log,
     warning: console.warn,
 };

package/browser/Utils/OptionsUtils.js

@@ -4,8 +4,8 @@ export function loadOptions(options, ...sourceOptionsArr) {
         options.load(sourceOptions);
     }
 }
-export function loadParticlesOptions(engine, container, ...sourceOptionsArr) {
-    const options = new ParticlesOptions(engine, container);
+export function loadParticlesOptions(pluginManager, container, ...sourceOptionsArr) {
+    const options = new ParticlesOptions(pluginManager, container);
     loadOptions(options, ...sourceOptionsArr);
     return options;
 }

package/browser/Utils/Utils.js

@@ -326,6 +326,19 @@ export function updateAnimation(particle, data, changeDirection, destroyType, de
     if ((data.delayTime ?? minDelay) > minDelay && data.time < (data.delayTime ?? minDelay)) {
         return;
     }
+    switch (data.status) {
+        case AnimationStatus.increasing:
+            data.value += velocity;
+            break;
+        case AnimationStatus.decreasing:
+            data.value -= velocity;
+            break;
+        default:
+            break;
+    }
+    if (data.velocity && decay !== identity) {
+        data.velocity *= decay;
+    }
     switch (data.status) {
         case AnimationStatus.increasing:
             if (data.value >= maxValue) {
@@ -338,9 +351,6 @@ export function updateAnimation(particle, data, changeDirection, destroyType, de
                 data.loops ??= minLoops;
                 data.loops++;
             }
-            else {
-                data.value += velocity;
-            }
             break;
         case AnimationStatus.decreasing:
             if (data.value <= minValue) {
@@ -353,18 +363,14 @@ export function updateAnimation(particle, data, changeDirection, destroyType, de
                 data.loops ??= minLoops;
                 data.loops++;
             }
-            else {
-                data.value -= velocity;
-            }
             break;
         default:
             break;
     }
-    if (data.velocity && decay !== identity) {
-        data.velocity *= decay;
-    }
     checkDestroy(particle, destroyType, data.value, minValue, maxValue);
-    data.value = clamp(data.value, minValue, maxValue);
+    if (!particle.destroyed) {
+        data.value = clamp(data.value, minValue, maxValue);
+    }
 }
 export function cloneStyle(style) {
     const clonedStyle = safeDocument().createElement("div").style;

package/browser/exports.js

@@ -28,6 +28,7 @@ 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/Paint.js";
 export * from "./Options/Classes/Particles/Stroke.js";
 export * from "./Options/Classes/Particles/Move/Move.js";
 export * from "./Options/Classes/Particles/Move/MoveAngle.js";