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

package/browser/Core/Engine.js

@@ -60,7 +60,7 @@ export class Engine {
         return this._domArray;
     }
     get version() {
-        return "4.0.0-beta.1";
+        return "4.0.0-beta.10";
     }
     addEventListener(type, listener) {
         this._eventDispatcher.addEventListener(type, listener);

package/browser/Options/Classes/Options.js

@@ -134,20 +134,7 @@ export class Options {
                 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,
+                palette,
             },
         });
     };

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

@@ -0,0 +1,20 @@
+import { Fill } from "./Fill.js";
+import { Stroke } from "./Stroke.js";
+import { isNull } from "../../../Utils/TypeUtils.js";
+export class Paint {
+    fill;
+    stroke;
+    load(data) {
+        if (isNull(data)) {
+            return;
+        }
+        if (data.fill !== undefined) {
+            this.fill ??= new Fill();
+            this.fill.load(data.fill);
+        }
+        if (data.stroke !== undefined) {
+            this.stroke ??= new Stroke();
+            this.stroke.load(data.stroke);
+        }
+    }
+}

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

@@ -1,27 +1,26 @@
 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;
     _pluginManager;
@@ -30,21 +29,24 @@ export class ParticlesOptions {
         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,25 +66,17 @@ 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._pluginManager.plugins) {
                 if (plugin.loadParticlesOptions) {
@@ -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/Utils/CanvasUtils.js

@@ -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/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";

package/cjs/Core/Engine.js

@@ -60,7 +60,7 @@ export class Engine {
         return this._domArray;
     }
     get version() {
-        return "4.0.0-beta.1";
+        return "4.0.0-beta.10";
     }
     addEventListener(type, listener) {
         this._eventDispatcher.addEventListener(type, listener);

package/cjs/Options/Classes/Options.js

@@ -134,20 +134,7 @@ export class Options {
                 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,
+                palette,
             },
         });
     };

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

@@ -0,0 +1,20 @@
+import { Fill } from "./Fill.js";
+import { Stroke } from "./Stroke.js";
+import { isNull } from "../../../Utils/TypeUtils.js";
+export class Paint {
+    fill;
+    stroke;
+    load(data) {
+        if (isNull(data)) {
+            return;
+        }
+        if (data.fill !== undefined) {
+            this.fill ??= new Fill();
+            this.fill.load(data.fill);
+        }
+        if (data.stroke !== undefined) {
+            this.stroke ??= new Stroke();
+            this.stroke.load(data.stroke);
+        }
+    }
+}

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

@@ -1,27 +1,26 @@
 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;
     _pluginManager;
@@ -30,21 +29,24 @@ export class ParticlesOptions {
         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,25 +66,17 @@ 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._pluginManager.plugins) {
                 if (plugin.loadParticlesOptions) {
@@ -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/cjs/Options/Interfaces/Particles/IPaint.js

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

package/cjs/Utils/CanvasUtils.js

@@ -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/cjs/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/cjs/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";

package/dist_browser_Core_Container_js.js

@@ -1,5 +1,5 @@
 /*!
- * tsParticles Engine v4.0.0-beta.1
+ * tsParticles Engine v4.0.0-beta.10
  * Author: Matteo Bruni
  * MIT license: https://opensource.org/licenses/MIT
  * Website: https://particles.js.org/

package/esm/Core/Engine.js

@@ -60,7 +60,7 @@ export class Engine {
         return this._domArray;
     }
     get version() {
-        return "4.0.0-beta.1";
+        return "4.0.0-beta.10";
     }
     addEventListener(type, listener) {
         this._eventDispatcher.addEventListener(type, listener);

package/esm/Options/Classes/Options.js

@@ -134,20 +134,7 @@ export class Options {
                 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,
+                palette,
             },
         });
     };

package/esm/Options/Classes/Particles/Paint.js

@@ -0,0 +1,20 @@
+import { Fill } from "./Fill.js";
+import { Stroke } from "./Stroke.js";
+import { isNull } from "../../../Utils/TypeUtils.js";
+export class Paint {
+    fill;
+    stroke;
+    load(data) {
+        if (isNull(data)) {
+            return;
+        }
+        if (data.fill !== undefined) {
+            this.fill ??= new Fill();
+            this.fill.load(data.fill);
+        }
+        if (data.stroke !== undefined) {
+            this.stroke ??= new Stroke();
+            this.stroke.load(data.stroke);
+        }
+    }
+}