@tsparticles/engine 3.0.0-beta.4 → 3.0.0

package/browser/Core/Canvas.js

@@ -202,7 +202,7 @@ export class Canvas {
                 this._paintImage(trailFill.image, trailFill.opacity);
             }
         }
-        else {
+        else if (options.clear) {
             this.draw((ctx) => {
                 clear(ctx, this.size);
             });

package/browser/Core/Engine.js

@@ -51,7 +51,7 @@ export class Engine {
         return res;
     }
     get version() {
-        return "3.0.0-beta.4";
+        return "3.0.0";
     }
     addConfig(config) {
         const name = config.name ?? "default";

package/browser/Core/Particle.js

@@ -159,7 +159,8 @@ export class Particle {
         this.destroyed = true;
         this.bubble.inRange = false;
         this.slow.inRange = false;
-        const container = this.container, pathGenerator = this.pathGenerator;
+        const container = this.container, pathGenerator = this.pathGenerator, shapeDrawer = container.shapeDrawers.get(this.shape);
+        shapeDrawer && shapeDrawer.particleDestroy && shapeDrawer.particleDestroy(this);
         for (const [, plugin] of container.plugins) {
             plugin.particleDestroyed && plugin.particleDestroyed(this, override);
         }

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

@@ -1,8 +1,8 @@
-import { executeOnSingleOrMultiple, isBoolean } from "../../../../Utils/Utils.js";
 import { ClickEvent } from "./ClickEvent.js";
 import { DivEvent } from "./DivEvent.js";
 import { HoverEvent } from "./HoverEvent.js";
 import { ResizeEvent } from "./ResizeEvent.js";
+import { executeOnSingleOrMultiple } from "../../../../Utils/Utils.js";
 export class Events {
     constructor() {
         this.onClick = new ClickEvent();
@@ -24,11 +24,6 @@ export class Events {
             });
         }
         this.onHover.load(data.onHover);
-        if (isBoolean(data.resize)) {
-            this.resize.enable = data.resize;
-        }
-        else {
-            this.resize.load(data.resize);
-        }
+        this.resize.load(data.resize);
     }
 }

package/browser/Options/Classes/Options.js

@@ -22,6 +22,7 @@ export class Options {
         this.autoPlay = true;
         this.background = new Background();
         this.backgroundMask = new BackgroundMask();
+        this.clear = true;
         this.defaultThemes = {};
         this.delay = 0;
         this.fullScreen = new FullScreen();
@@ -49,6 +50,12 @@ export class Options {
         if (data.autoPlay !== undefined) {
             this.autoPlay = data.autoPlay;
         }
+        if (data.clear !== undefined) {
+            this.clear = data.clear;
+        }
+        if (data.name !== undefined) {
+            this.name = data.name;
+        }
         if (data.delay !== undefined) {
             this.delay = setRangeValue(data.delay);
         }

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

@@ -35,23 +35,26 @@ export class ParticlesOptions {
         if (!data) {
             return;
         }
-        this.bounce.load(data.bounce);
-        this.color.load(AnimatableColor.create(this.color, data.color));
-        this.effect.load(data.effect);
         if (data.groups !== undefined) {
-            for (const group in data.groups) {
+            for (const group of Object.keys(data.groups)) {
+                if (!Object.hasOwn(data.groups, group)) {
+                    continue;
+                }
                 const item = data.groups[group];
                 if (item !== undefined) {
                     this.groups[group] = deepExtend(this.groups[group] ?? {}, item);
                 }
             }
         }
-        this.move.load(data.move);
-        this.number.load(data.number);
-        this.opacity.load(data.opacity);
         if (data.reduceDuplicates !== undefined) {
             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);
+        this.opacity.load(data.opacity);
         this.shape.load(data.shape);
         this.size.load(data.size);
         this.shadow.load(data.shadow);

package/browser/Utils/CanvasUtils.js

@@ -50,7 +50,7 @@ export function drawParticle(data) {
     if (colorStyles.stroke) {
         context.strokeStyle = colorStyles.stroke;
     }
-    const drawData = { container, context, particle, radius, opacity, delta };
+    const drawData = { container, context, particle, radius, opacity, delta, transformData };
     context.beginPath();
     drawShape(drawData);
     if (particle.shapeClose) {
@@ -68,7 +68,7 @@ export function drawParticle(data) {
     context.setTransform(1, 0, 0, 1, 0, 0);
 }
 export function drawEffect(data) {
-    const { container, context, particle, radius, opacity, delta } = data;
+    const { container, context, particle, radius, opacity, delta, transformData } = data;
     if (!particle.effect) {
         return;
     }
@@ -76,10 +76,18 @@ export function drawEffect(data) {
     if (!drawer) {
         return;
     }
-    drawer.draw({ context, particle, radius, opacity, delta, pixelRatio: container.retina.pixelRatio });
+    drawer.draw({
+        context,
+        particle,
+        radius,
+        opacity,
+        delta,
+        pixelRatio: container.retina.pixelRatio,
+        transformData: { ...transformData },
+    });
 }
 export function drawShape(data) {
-    const { container, context, particle, radius, opacity, delta } = data;
+    const { container, context, particle, radius, opacity, delta, transformData } = data;
     if (!particle.shape) {
         return;
     }
@@ -87,10 +95,18 @@ export function drawShape(data) {
     if (!drawer) {
         return;
     }
-    drawer.draw({ context, particle, radius, opacity, delta, pixelRatio: container.retina.pixelRatio });
+    drawer.draw({
+        context,
+        particle,
+        radius,
+        opacity,
+        delta,
+        pixelRatio: container.retina.pixelRatio,
+        transformData: { ...transformData },
+    });
 }
 export function drawShapeAfterDraw(data) {
-    const { container, context, particle, radius, opacity, delta } = data;
+    const { container, context, particle, radius, opacity, delta, transformData } = data;
     if (!particle.shape) {
         return;
     }
@@ -98,7 +114,15 @@ export function drawShapeAfterDraw(data) {
     if (!drawer || !drawer.afterDraw) {
         return;
     }
-    drawer.afterDraw({ context, particle, radius, opacity, delta, pixelRatio: container.retina.pixelRatio });
+    drawer.afterDraw({
+        context,
+        particle,
+        radius,
+        opacity,
+        delta,
+        pixelRatio: container.retina.pixelRatio,
+        transformData: { ...transformData },
+    });
 }
 export function drawPlugin(context, plugin, delta) {
     if (!plugin.draw) {

package/cjs/Core/Canvas.js

@@ -205,7 +205,7 @@ class Canvas {
                 this._paintImage(trailFill.image, trailFill.opacity);
             }
         }
-        else {
+        else if (options.clear) {
             this.draw((ctx) => {
                 (0, CanvasUtils_js_1.clear)(ctx, this.size);
             });

package/cjs/Core/Engine.js

@@ -54,7 +54,7 @@ class Engine {
         return res;
     }
     get version() {
-        return "3.0.0-beta.4";
+        return "3.0.0";
     }
     addConfig(config) {
         const name = config.name ?? "default";

package/cjs/Core/Particle.js

@@ -162,7 +162,8 @@ class Particle {
         this.destroyed = true;
         this.bubble.inRange = false;
         this.slow.inRange = false;
-        const container = this.container, pathGenerator = this.pathGenerator;
+        const container = this.container, pathGenerator = this.pathGenerator, shapeDrawer = container.shapeDrawers.get(this.shape);
+        shapeDrawer && shapeDrawer.particleDestroy && shapeDrawer.particleDestroy(this);
         for (const [, plugin] of container.plugins) {
             plugin.particleDestroyed && plugin.particleDestroyed(this, override);
         }

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

@@ -1,11 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Events = void 0;
-const Utils_js_1 = require("../../../../Utils/Utils.js");
 const ClickEvent_js_1 = require("./ClickEvent.js");
 const DivEvent_js_1 = require("./DivEvent.js");
 const HoverEvent_js_1 = require("./HoverEvent.js");
 const ResizeEvent_js_1 = require("./ResizeEvent.js");
+const Utils_js_1 = require("../../../../Utils/Utils.js");
 class Events {
     constructor() {
         this.onClick = new ClickEvent_js_1.ClickEvent();
@@ -27,12 +27,7 @@ class Events {
             });
         }
         this.onHover.load(data.onHover);
-        if ((0, Utils_js_1.isBoolean)(data.resize)) {
-            this.resize.enable = data.resize;
-        }
-        else {
-            this.resize.load(data.resize);
-        }
+        this.resize.load(data.resize);
     }
 }
 exports.Events = Events;

package/cjs/Options/Classes/Options.js

@@ -25,6 +25,7 @@ class Options {
         this.autoPlay = true;
         this.background = new Background_js_1.Background();
         this.backgroundMask = new BackgroundMask_js_1.BackgroundMask();
+        this.clear = true;
         this.defaultThemes = {};
         this.delay = 0;
         this.fullScreen = new FullScreen_js_1.FullScreen();
@@ -52,6 +53,12 @@ class Options {
         if (data.autoPlay !== undefined) {
             this.autoPlay = data.autoPlay;
         }
+        if (data.clear !== undefined) {
+            this.clear = data.clear;
+        }
+        if (data.name !== undefined) {
+            this.name = data.name;
+        }
         if (data.delay !== undefined) {
             this.delay = (0, NumberUtils_js_1.setRangeValue)(data.delay);
         }

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

@@ -38,23 +38,26 @@ class ParticlesOptions {
         if (!data) {
             return;
         }
-        this.bounce.load(data.bounce);
-        this.color.load(AnimatableColor_js_1.AnimatableColor.create(this.color, data.color));
-        this.effect.load(data.effect);
         if (data.groups !== undefined) {
-            for (const group in data.groups) {
+            for (const group of Object.keys(data.groups)) {
+                if (!Object.hasOwn(data.groups, group)) {
+                    continue;
+                }
                 const item = data.groups[group];
                 if (item !== undefined) {
                     this.groups[group] = (0, Utils_js_1.deepExtend)(this.groups[group] ?? {}, item);
                 }
             }
         }
-        this.move.load(data.move);
-        this.number.load(data.number);
-        this.opacity.load(data.opacity);
         if (data.reduceDuplicates !== undefined) {
             this.reduceDuplicates = data.reduceDuplicates;
         }
+        this.bounce.load(data.bounce);
+        this.color.load(AnimatableColor_js_1.AnimatableColor.create(this.color, data.color));
+        this.effect.load(data.effect);
+        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.shadow.load(data.shadow);

package/cjs/Utils/CanvasUtils.js

@@ -57,7 +57,7 @@ function drawParticle(data) {
     if (colorStyles.stroke) {
         context.strokeStyle = colorStyles.stroke;
     }
-    const drawData = { container, context, particle, radius, opacity, delta };
+    const drawData = { container, context, particle, radius, opacity, delta, transformData };
     context.beginPath();
     drawShape(drawData);
     if (particle.shapeClose) {
@@ -76,7 +76,7 @@ function drawParticle(data) {
 }
 exports.drawParticle = drawParticle;
 function drawEffect(data) {
-    const { container, context, particle, radius, opacity, delta } = data;
+    const { container, context, particle, radius, opacity, delta, transformData } = data;
     if (!particle.effect) {
         return;
     }
@@ -84,11 +84,19 @@ function drawEffect(data) {
     if (!drawer) {
         return;
     }
-    drawer.draw({ context, particle, radius, opacity, delta, pixelRatio: container.retina.pixelRatio });
+    drawer.draw({
+        context,
+        particle,
+        radius,
+        opacity,
+        delta,
+        pixelRatio: container.retina.pixelRatio,
+        transformData: { ...transformData },
+    });
 }
 exports.drawEffect = drawEffect;
 function drawShape(data) {
-    const { container, context, particle, radius, opacity, delta } = data;
+    const { container, context, particle, radius, opacity, delta, transformData } = data;
     if (!particle.shape) {
         return;
     }
@@ -96,11 +104,19 @@ function drawShape(data) {
     if (!drawer) {
         return;
     }
-    drawer.draw({ context, particle, radius, opacity, delta, pixelRatio: container.retina.pixelRatio });
+    drawer.draw({
+        context,
+        particle,
+        radius,
+        opacity,
+        delta,
+        pixelRatio: container.retina.pixelRatio,
+        transformData: { ...transformData },
+    });
 }
 exports.drawShape = drawShape;
 function drawShapeAfterDraw(data) {
-    const { container, context, particle, radius, opacity, delta } = data;
+    const { container, context, particle, radius, opacity, delta, transformData } = data;
     if (!particle.shape) {
         return;
     }
@@ -108,7 +124,15 @@ function drawShapeAfterDraw(data) {
     if (!drawer || !drawer.afterDraw) {
         return;
     }
-    drawer.afterDraw({ context, particle, radius, opacity, delta, pixelRatio: container.retina.pixelRatio });
+    drawer.afterDraw({
+        context,
+        particle,
+        radius,
+        opacity,
+        delta,
+        pixelRatio: container.retina.pixelRatio,
+        transformData: { ...transformData },
+    });
 }
 exports.drawShapeAfterDraw = drawShapeAfterDraw;
 function drawPlugin(context, plugin, delta) {

package/esm/Core/Canvas.js

@@ -202,7 +202,7 @@ export class Canvas {
                 this._paintImage(trailFill.image, trailFill.opacity);
             }
         }
-        else {
+        else if (options.clear) {
             this.draw((ctx) => {
                 clear(ctx, this.size);
             });

package/esm/Core/Engine.js

@@ -51,7 +51,7 @@ export class Engine {
         return res;
     }
     get version() {
-        return "3.0.0-beta.4";
+        return "3.0.0";
     }
     addConfig(config) {
         const name = config.name ?? "default";

package/esm/Core/Particle.js

@@ -159,7 +159,8 @@ export class Particle {
         this.destroyed = true;
         this.bubble.inRange = false;
         this.slow.inRange = false;
-        const container = this.container, pathGenerator = this.pathGenerator;
+        const container = this.container, pathGenerator = this.pathGenerator, shapeDrawer = container.shapeDrawers.get(this.shape);
+        shapeDrawer && shapeDrawer.particleDestroy && shapeDrawer.particleDestroy(this);
         for (const [, plugin] of container.plugins) {
             plugin.particleDestroyed && plugin.particleDestroyed(this, override);
         }

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

@@ -1,8 +1,8 @@
-import { executeOnSingleOrMultiple, isBoolean } from "../../../../Utils/Utils.js";
 import { ClickEvent } from "./ClickEvent.js";
 import { DivEvent } from "./DivEvent.js";
 import { HoverEvent } from "./HoverEvent.js";
 import { ResizeEvent } from "./ResizeEvent.js";
+import { executeOnSingleOrMultiple } from "../../../../Utils/Utils.js";
 export class Events {
     constructor() {
         this.onClick = new ClickEvent();
@@ -24,11 +24,6 @@ export class Events {
             });
         }
         this.onHover.load(data.onHover);
-        if (isBoolean(data.resize)) {
-            this.resize.enable = data.resize;
-        }
-        else {
-            this.resize.load(data.resize);
-        }
+        this.resize.load(data.resize);
     }
 }

package/esm/Options/Classes/Options.js

@@ -22,6 +22,7 @@ export class Options {
         this.autoPlay = true;
         this.background = new Background();
         this.backgroundMask = new BackgroundMask();
+        this.clear = true;
         this.defaultThemes = {};
         this.delay = 0;
         this.fullScreen = new FullScreen();
@@ -49,6 +50,12 @@ export class Options {
         if (data.autoPlay !== undefined) {
             this.autoPlay = data.autoPlay;
         }
+        if (data.clear !== undefined) {
+            this.clear = data.clear;
+        }
+        if (data.name !== undefined) {
+            this.name = data.name;
+        }
         if (data.delay !== undefined) {
             this.delay = setRangeValue(data.delay);
         }

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

@@ -35,23 +35,26 @@ export class ParticlesOptions {
         if (!data) {
             return;
         }
-        this.bounce.load(data.bounce);
-        this.color.load(AnimatableColor.create(this.color, data.color));
-        this.effect.load(data.effect);
         if (data.groups !== undefined) {
-            for (const group in data.groups) {
+            for (const group of Object.keys(data.groups)) {
+                if (!Object.hasOwn(data.groups, group)) {
+                    continue;
+                }
                 const item = data.groups[group];
                 if (item !== undefined) {
                     this.groups[group] = deepExtend(this.groups[group] ?? {}, item);
                 }
             }
         }
-        this.move.load(data.move);
-        this.number.load(data.number);
-        this.opacity.load(data.opacity);
         if (data.reduceDuplicates !== undefined) {
             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);
+        this.opacity.load(data.opacity);
         this.shape.load(data.shape);
         this.size.load(data.size);
         this.shadow.load(data.shadow);

package/esm/Utils/CanvasUtils.js

@@ -50,7 +50,7 @@ export function drawParticle(data) {
     if (colorStyles.stroke) {
         context.strokeStyle = colorStyles.stroke;
     }
-    const drawData = { container, context, particle, radius, opacity, delta };
+    const drawData = { container, context, particle, radius, opacity, delta, transformData };
     context.beginPath();
     drawShape(drawData);
     if (particle.shapeClose) {
@@ -68,7 +68,7 @@ export function drawParticle(data) {
     context.setTransform(1, 0, 0, 1, 0, 0);
 }
 export function drawEffect(data) {
-    const { container, context, particle, radius, opacity, delta } = data;
+    const { container, context, particle, radius, opacity, delta, transformData } = data;
     if (!particle.effect) {
         return;
     }
@@ -76,10 +76,18 @@ export function drawEffect(data) {
     if (!drawer) {
         return;
     }
-    drawer.draw({ context, particle, radius, opacity, delta, pixelRatio: container.retina.pixelRatio });
+    drawer.draw({
+        context,
+        particle,
+        radius,
+        opacity,
+        delta,
+        pixelRatio: container.retina.pixelRatio,
+        transformData: { ...transformData },
+    });
 }
 export function drawShape(data) {
-    const { container, context, particle, radius, opacity, delta } = data;
+    const { container, context, particle, radius, opacity, delta, transformData } = data;
     if (!particle.shape) {
         return;
     }
@@ -87,10 +95,18 @@ export function drawShape(data) {
     if (!drawer) {
         return;
     }
-    drawer.draw({ context, particle, radius, opacity, delta, pixelRatio: container.retina.pixelRatio });
+    drawer.draw({
+        context,
+        particle,
+        radius,
+        opacity,
+        delta,
+        pixelRatio: container.retina.pixelRatio,
+        transformData: { ...transformData },
+    });
 }
 export function drawShapeAfterDraw(data) {
-    const { container, context, particle, radius, opacity, delta } = data;
+    const { container, context, particle, radius, opacity, delta, transformData } = data;
     if (!particle.shape) {
         return;
     }
@@ -98,7 +114,15 @@ export function drawShapeAfterDraw(data) {
     if (!drawer || !drawer.afterDraw) {
         return;
     }
-    drawer.afterDraw({ context, particle, radius, opacity, delta, pixelRatio: container.retina.pixelRatio });
+    drawer.afterDraw({
+        context,
+        particle,
+        radius,
+        opacity,
+        delta,
+        pixelRatio: container.retina.pixelRatio,
+        transformData: { ...transformData },
+    });
 }
 export function drawPlugin(context, plugin, delta) {
     if (!plugin.draw) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsparticles/engine",
-  "version": "3.0.0-beta.4",
+  "version": "3.0.0",
   "description": "Easily create highly customizable particle, confetti and fireworks animations and use them as animated backgrounds for your website. Ready to use components available also for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Riot.js, Inferno.",
   "homepage": "https://particles.js.org",
   "scripts": {