@tsparticles/updater-destroy 4.0.0-beta.9 → 4.0.0

package/browser/DestroyUpdater.js

@@ -2,6 +2,7 @@ import { getRangeValue, percentDenominator, } from "@tsparticles/engine";
 import { Destroy } from "./Options/Classes/Destroy.js";
 import { DestroyMode } from "./Enums/DestroyMode.js";
 import { split } from "./Utils.js";
+const defaultDeltaFactor = 1, fpsFactor = 60, minExplodeSpeed = 0.01, maxExplodeProgress = 1;
 export class DestroyUpdater {
     _container;
     _pluginManager;
@@ -14,6 +15,7 @@ export class DestroyUpdater {
         if (!destroyOptions) {
             return;
         }
+        particle.exploding = undefined;
         particle.splitCount = 0;
         const destroyBoundsOptions = destroyOptions.bounds;
         particle.destroyBounds ??= {};
@@ -32,7 +34,8 @@ export class DestroyUpdater {
         }
     }
     isEnabled(particle) {
-        return !particle.destroyed;
+        const destroyParticle = particle;
+        return !destroyParticle.destroyed || !!destroyParticle.exploding;
     }
     loadOptions(options, ...sources) {
         options.destroy ??= new Destroy();
@@ -45,11 +48,48 @@ export class DestroyUpdater {
             return;
         }
         const destroyOptions = particle.options.destroy;
-        if (destroyOptions?.mode === DestroyMode.split) {
-            split(this._pluginManager, this._container, particle);
+        switch (destroyOptions?.mode) {
+            case DestroyMode.split:
+                split(this._pluginManager, this._container, particle);
+                break;
+            case DestroyMode.explode: {
+                if (particle.exploding) {
+                    particle.destroyed = false;
+                    break;
+                }
+                const { explode } = destroyOptions, initialSize = particle.size.value, maxSize = initialSize * explode.maxSizeFactor, opacity = particle.getOpacity();
+                particle.exploding = {
+                    initialFillOpacity: opacity.fillOpacity,
+                    initialSize,
+                    initialStrokeOpacity: opacity.strokeOpacity,
+                    maxSize,
+                    progress: 0,
+                    speed: Math.max(explode.speed, minExplodeSpeed),
+                };
+                particle.fillOpacity = opacity.fillOpacity;
+                particle.strokeOpacity = opacity.strokeOpacity;
+                particle.destroyed = false;
+                break;
+            }
+            default:
+                break;
         }
     }
-    update(particle) {
+    update(particle, delta) {
+        if (particle.exploding) {
+            const explosionState = particle.exploding, deltaFactor = delta.factor || defaultDeltaFactor;
+            explosionState.progress = Math.min(maxExplodeProgress, explosionState.progress + (explosionState.speed * deltaFactor) / fpsFactor);
+            const progress = explosionState.progress;
+            particle.size.value =
+                explosionState.initialSize + (explosionState.maxSize - explosionState.initialSize) * progress;
+            particle.fillOpacity = explosionState.initialFillOpacity * (maxExplodeProgress - progress);
+            particle.strokeOpacity = explosionState.initialStrokeOpacity * (maxExplodeProgress - progress);
+            if (progress >= maxExplodeProgress) {
+                particle.exploding = undefined;
+                particle.destroy(true);
+            }
+            return;
+        }
         if (particle.unbreakableUntil !== undefined && performance.now() >= particle.unbreakableUntil) {
             particle.unbreakable = false;
             particle.unbreakableUntil = undefined;

package/browser/Enums/DestroyMode.js

@@ -1,5 +1,6 @@
 export var DestroyMode;
 (function (DestroyMode) {
+    DestroyMode["explode"] = "explode";
     DestroyMode["none"] = "none";
     DestroyMode["split"] = "split";
 })(DestroyMode || (DestroyMode = {}));

package/browser/Options/Classes/Destroy.js

@@ -1,13 +1,16 @@
 import { isNull } from "@tsparticles/engine";
 import { DestroyBounds } from "./DestroyBounds.js";
 import { DestroyMode } from "../../Enums/DestroyMode.js";
+import { Explode } from "./Explode.js";
 import { Split } from "./Split.js";
 export class Destroy {
     bounds;
+    explode;
     mode;
     split;
     constructor() {
         this.bounds = new DestroyBounds();
+        this.explode = new Explode();
         this.mode = DestroyMode.none;
         this.split = new Split();
     }
@@ -21,6 +24,7 @@ export class Destroy {
         if (data.bounds) {
             this.bounds.load(data.bounds);
         }
+        this.explode.load(data.explode);
         this.split.load(data.split);
     }
 }

package/browser/Options/Classes/Explode.js

@@ -0,0 +1,20 @@
+import { isNull } from "@tsparticles/engine";
+export class Explode {
+    maxSizeFactor;
+    speed;
+    constructor() {
+        this.maxSizeFactor = 3;
+        this.speed = 2;
+    }
+    load(data) {
+        if (isNull(data)) {
+            return;
+        }
+        if (data.maxSizeFactor !== undefined) {
+            this.maxSizeFactor = data.maxSizeFactor;
+        }
+        if (data.speed !== undefined) {
+            this.speed = data.speed;
+        }
+    }
+}

package/browser/Options/Interfaces/IExplode.js

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

package/browser/Utils.js

@@ -53,7 +53,7 @@ function addSplitParticle(pluginManager, container, parent, splitParticlesOption
         splitParticleOptions.size.value.max *= factor;
     }
     splitParticleOptions.load(splitParticlesOptions);
-    const splitParticleFillOptions = itemFromSingleOrMultiple(splitParticleOptions.fill), splitParticleStrokeOptions = itemFromSingleOrMultiple(splitParticleOptions.stroke), fillColor = resolveSplitColor(splitOptions.fillColorOffset, splitFillColor, splitParticleFillOptions?.color, parentFillColor), strokeColor = resolveSplitColor(splitOptions.strokeColorOffset, splitStrokeColor, splitParticleStrokeOptions?.color, parentStrokeColor);
+    const splitParticlePaintOptions = itemFromSingleOrMultiple(splitParticleOptions.paint), splitParticleFillOptions = splitParticlePaintOptions?.fill, splitParticleStrokeOptions = splitParticlePaintOptions?.stroke, fillColor = resolveSplitColor(splitOptions.fillColorOffset, splitFillColor, splitParticleFillOptions?.color, parentFillColor), strokeColor = resolveSplitColor(splitOptions.strokeColorOffset, splitStrokeColor, splitParticleStrokeOptions?.color, parentStrokeColor);
     if (fillColor && splitParticleFillOptions) {
         splitParticleFillOptions.color = fillColor;
     }

package/browser/browser.js

@@ -0,0 +1,5 @@
+import { loadDestroyUpdater } from "./index.js";
+const globalObject = globalThis;
+globalObject.__tsParticlesInternals = globalObject.__tsParticlesInternals ?? {};
+globalObject.loadDestroyUpdater = loadDestroyUpdater;
+export * from "./index.js";

package/browser/index.js

@@ -1,9 +1,9 @@
+import { DestroyUpdater } from "./DestroyUpdater.js";
 export async function loadDestroyUpdater(engine) {
-    engine.checkVersion("4.0.0-beta.9");
+    engine.checkVersion("4.0.0");
     await engine.pluginManager.register(e => {
-        e.pluginManager.addParticleUpdater("destroy", async (container) => {
-            const { DestroyUpdater } = await import("./DestroyUpdater.js");
-            return new DestroyUpdater(e.pluginManager, container);
+        e.pluginManager.addParticleUpdater("destroy", container => {
+            return Promise.resolve(new DestroyUpdater(e.pluginManager, container));
         });
     });
 }

package/browser/index.lazy.js

@@ -0,0 +1,9 @@
+export async function loadDestroyUpdater(engine) {
+    engine.checkVersion("4.0.0");
+    await engine.pluginManager.register(e => {
+        e.pluginManager.addParticleUpdater("destroy", async (container) => {
+            const { DestroyUpdater } = await import("./DestroyUpdater.js");
+            return new DestroyUpdater(e.pluginManager, container);
+        });
+    });
+}

package/cjs/DestroyUpdater.js

@@ -2,6 +2,7 @@ import { getRangeValue, percentDenominator, } from "@tsparticles/engine";
 import { Destroy } from "./Options/Classes/Destroy.js";
 import { DestroyMode } from "./Enums/DestroyMode.js";
 import { split } from "./Utils.js";
+const defaultDeltaFactor = 1, fpsFactor = 60, minExplodeSpeed = 0.01, maxExplodeProgress = 1;
 export class DestroyUpdater {
     _container;
     _pluginManager;
@@ -14,6 +15,7 @@ export class DestroyUpdater {
         if (!destroyOptions) {
             return;
         }
+        particle.exploding = undefined;
         particle.splitCount = 0;
         const destroyBoundsOptions = destroyOptions.bounds;
         particle.destroyBounds ??= {};
@@ -32,7 +34,8 @@ export class DestroyUpdater {
         }
     }
     isEnabled(particle) {
-        return !particle.destroyed;
+        const destroyParticle = particle;
+        return !destroyParticle.destroyed || !!destroyParticle.exploding;
     }
     loadOptions(options, ...sources) {
         options.destroy ??= new Destroy();
@@ -45,11 +48,48 @@ export class DestroyUpdater {
             return;
         }
         const destroyOptions = particle.options.destroy;
-        if (destroyOptions?.mode === DestroyMode.split) {
-            split(this._pluginManager, this._container, particle);
+        switch (destroyOptions?.mode) {
+            case DestroyMode.split:
+                split(this._pluginManager, this._container, particle);
+                break;
+            case DestroyMode.explode: {
+                if (particle.exploding) {
+                    particle.destroyed = false;
+                    break;
+                }
+                const { explode } = destroyOptions, initialSize = particle.size.value, maxSize = initialSize * explode.maxSizeFactor, opacity = particle.getOpacity();
+                particle.exploding = {
+                    initialFillOpacity: opacity.fillOpacity,
+                    initialSize,
+                    initialStrokeOpacity: opacity.strokeOpacity,
+                    maxSize,
+                    progress: 0,
+                    speed: Math.max(explode.speed, minExplodeSpeed),
+                };
+                particle.fillOpacity = opacity.fillOpacity;
+                particle.strokeOpacity = opacity.strokeOpacity;
+                particle.destroyed = false;
+                break;
+            }
+            default:
+                break;
         }
     }
-    update(particle) {
+    update(particle, delta) {
+        if (particle.exploding) {
+            const explosionState = particle.exploding, deltaFactor = delta.factor || defaultDeltaFactor;
+            explosionState.progress = Math.min(maxExplodeProgress, explosionState.progress + (explosionState.speed * deltaFactor) / fpsFactor);
+            const progress = explosionState.progress;
+            particle.size.value =
+                explosionState.initialSize + (explosionState.maxSize - explosionState.initialSize) * progress;
+            particle.fillOpacity = explosionState.initialFillOpacity * (maxExplodeProgress - progress);
+            particle.strokeOpacity = explosionState.initialStrokeOpacity * (maxExplodeProgress - progress);
+            if (progress >= maxExplodeProgress) {
+                particle.exploding = undefined;
+                particle.destroy(true);
+            }
+            return;
+        }
         if (particle.unbreakableUntil !== undefined && performance.now() >= particle.unbreakableUntil) {
             particle.unbreakable = false;
             particle.unbreakableUntil = undefined;

package/cjs/Enums/DestroyMode.js

@@ -1,5 +1,6 @@
 export var DestroyMode;
 (function (DestroyMode) {
+    DestroyMode["explode"] = "explode";
     DestroyMode["none"] = "none";
     DestroyMode["split"] = "split";
 })(DestroyMode || (DestroyMode = {}));

package/cjs/Options/Classes/Destroy.js

@@ -1,13 +1,16 @@
 import { isNull } from "@tsparticles/engine";
 import { DestroyBounds } from "./DestroyBounds.js";
 import { DestroyMode } from "../../Enums/DestroyMode.js";
+import { Explode } from "./Explode.js";
 import { Split } from "./Split.js";
 export class Destroy {
     bounds;
+    explode;
     mode;
     split;
     constructor() {
         this.bounds = new DestroyBounds();
+        this.explode = new Explode();
         this.mode = DestroyMode.none;
         this.split = new Split();
     }
@@ -21,6 +24,7 @@ export class Destroy {
         if (data.bounds) {
             this.bounds.load(data.bounds);
         }
+        this.explode.load(data.explode);
         this.split.load(data.split);
     }
 }

package/cjs/Options/Classes/Explode.js

@@ -0,0 +1,20 @@
+import { isNull } from "@tsparticles/engine";
+export class Explode {
+    maxSizeFactor;
+    speed;
+    constructor() {
+        this.maxSizeFactor = 3;
+        this.speed = 2;
+    }
+    load(data) {
+        if (isNull(data)) {
+            return;
+        }
+        if (data.maxSizeFactor !== undefined) {
+            this.maxSizeFactor = data.maxSizeFactor;
+        }
+        if (data.speed !== undefined) {
+            this.speed = data.speed;
+        }
+    }
+}

package/cjs/Options/Interfaces/IExplode.js

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

package/cjs/Utils.js

@@ -53,7 +53,7 @@ function addSplitParticle(pluginManager, container, parent, splitParticlesOption
         splitParticleOptions.size.value.max *= factor;
     }
     splitParticleOptions.load(splitParticlesOptions);
-    const splitParticleFillOptions = itemFromSingleOrMultiple(splitParticleOptions.fill), splitParticleStrokeOptions = itemFromSingleOrMultiple(splitParticleOptions.stroke), fillColor = resolveSplitColor(splitOptions.fillColorOffset, splitFillColor, splitParticleFillOptions?.color, parentFillColor), strokeColor = resolveSplitColor(splitOptions.strokeColorOffset, splitStrokeColor, splitParticleStrokeOptions?.color, parentStrokeColor);
+    const splitParticlePaintOptions = itemFromSingleOrMultiple(splitParticleOptions.paint), splitParticleFillOptions = splitParticlePaintOptions?.fill, splitParticleStrokeOptions = splitParticlePaintOptions?.stroke, fillColor = resolveSplitColor(splitOptions.fillColorOffset, splitFillColor, splitParticleFillOptions?.color, parentFillColor), strokeColor = resolveSplitColor(splitOptions.strokeColorOffset, splitStrokeColor, splitParticleStrokeOptions?.color, parentStrokeColor);
     if (fillColor && splitParticleFillOptions) {
         splitParticleFillOptions.color = fillColor;
     }

package/cjs/browser.js

@@ -0,0 +1,5 @@
+import { loadDestroyUpdater } from "./index.js";
+const globalObject = globalThis;
+globalObject.__tsParticlesInternals = globalObject.__tsParticlesInternals ?? {};
+globalObject.loadDestroyUpdater = loadDestroyUpdater;
+export * from "./index.js";

package/cjs/index.js

@@ -1,9 +1,9 @@
+import { DestroyUpdater } from "./DestroyUpdater.js";
 export async function loadDestroyUpdater(engine) {
-    engine.checkVersion("4.0.0-beta.9");
+    engine.checkVersion("4.0.0");
     await engine.pluginManager.register(e => {
-        e.pluginManager.addParticleUpdater("destroy", async (container) => {
-            const { DestroyUpdater } = await import("./DestroyUpdater.js");
-            return new DestroyUpdater(e.pluginManager, container);
+        e.pluginManager.addParticleUpdater("destroy", container => {
+            return Promise.resolve(new DestroyUpdater(e.pluginManager, container));
         });
     });
 }

package/cjs/index.lazy.js

@@ -0,0 +1,9 @@
+export async function loadDestroyUpdater(engine) {
+    engine.checkVersion("4.0.0");
+    await engine.pluginManager.register(e => {
+        e.pluginManager.addParticleUpdater("destroy", async (container) => {
+            const { DestroyUpdater } = await import("./DestroyUpdater.js");
+            return new DestroyUpdater(e.pluginManager, container);
+        });
+    });
+}

package/esm/DestroyUpdater.js

@@ -2,6 +2,7 @@ import { getRangeValue, percentDenominator, } from "@tsparticles/engine";
 import { Destroy } from "./Options/Classes/Destroy.js";
 import { DestroyMode } from "./Enums/DestroyMode.js";
 import { split } from "./Utils.js";
+const defaultDeltaFactor = 1, fpsFactor = 60, minExplodeSpeed = 0.01, maxExplodeProgress = 1;
 export class DestroyUpdater {
     _container;
     _pluginManager;
@@ -14,6 +15,7 @@ export class DestroyUpdater {
         if (!destroyOptions) {
             return;
         }
+        particle.exploding = undefined;
         particle.splitCount = 0;
         const destroyBoundsOptions = destroyOptions.bounds;
         particle.destroyBounds ??= {};
@@ -32,7 +34,8 @@ export class DestroyUpdater {
         }
     }
     isEnabled(particle) {
-        return !particle.destroyed;
+        const destroyParticle = particle;
+        return !destroyParticle.destroyed || !!destroyParticle.exploding;
     }
     loadOptions(options, ...sources) {
         options.destroy ??= new Destroy();
@@ -45,11 +48,48 @@ export class DestroyUpdater {
             return;
         }
         const destroyOptions = particle.options.destroy;
-        if (destroyOptions?.mode === DestroyMode.split) {
-            split(this._pluginManager, this._container, particle);
+        switch (destroyOptions?.mode) {
+            case DestroyMode.split:
+                split(this._pluginManager, this._container, particle);
+                break;
+            case DestroyMode.explode: {
+                if (particle.exploding) {
+                    particle.destroyed = false;
+                    break;
+                }
+                const { explode } = destroyOptions, initialSize = particle.size.value, maxSize = initialSize * explode.maxSizeFactor, opacity = particle.getOpacity();
+                particle.exploding = {
+                    initialFillOpacity: opacity.fillOpacity,
+                    initialSize,
+                    initialStrokeOpacity: opacity.strokeOpacity,
+                    maxSize,
+                    progress: 0,
+                    speed: Math.max(explode.speed, minExplodeSpeed),
+                };
+                particle.fillOpacity = opacity.fillOpacity;
+                particle.strokeOpacity = opacity.strokeOpacity;
+                particle.destroyed = false;
+                break;
+            }
+            default:
+                break;
         }
     }
-    update(particle) {
+    update(particle, delta) {
+        if (particle.exploding) {
+            const explosionState = particle.exploding, deltaFactor = delta.factor || defaultDeltaFactor;
+            explosionState.progress = Math.min(maxExplodeProgress, explosionState.progress + (explosionState.speed * deltaFactor) / fpsFactor);
+            const progress = explosionState.progress;
+            particle.size.value =
+                explosionState.initialSize + (explosionState.maxSize - explosionState.initialSize) * progress;
+            particle.fillOpacity = explosionState.initialFillOpacity * (maxExplodeProgress - progress);
+            particle.strokeOpacity = explosionState.initialStrokeOpacity * (maxExplodeProgress - progress);
+            if (progress >= maxExplodeProgress) {
+                particle.exploding = undefined;
+                particle.destroy(true);
+            }
+            return;
+        }
         if (particle.unbreakableUntil !== undefined && performance.now() >= particle.unbreakableUntil) {
             particle.unbreakable = false;
             particle.unbreakableUntil = undefined;

package/esm/Enums/DestroyMode.js

@@ -1,5 +1,6 @@
 export var DestroyMode;
 (function (DestroyMode) {
+    DestroyMode["explode"] = "explode";
     DestroyMode["none"] = "none";
     DestroyMode["split"] = "split";
 })(DestroyMode || (DestroyMode = {}));

package/esm/Options/Classes/Destroy.js

@@ -1,13 +1,16 @@
 import { isNull } from "@tsparticles/engine";
 import { DestroyBounds } from "./DestroyBounds.js";
 import { DestroyMode } from "../../Enums/DestroyMode.js";
+import { Explode } from "./Explode.js";
 import { Split } from "./Split.js";
 export class Destroy {
     bounds;
+    explode;
     mode;
     split;
     constructor() {
         this.bounds = new DestroyBounds();
+        this.explode = new Explode();
         this.mode = DestroyMode.none;
         this.split = new Split();
     }
@@ -21,6 +24,7 @@ export class Destroy {
         if (data.bounds) {
             this.bounds.load(data.bounds);
         }
+        this.explode.load(data.explode);
         this.split.load(data.split);
     }
 }

package/esm/Options/Classes/Explode.js

@@ -0,0 +1,20 @@
+import { isNull } from "@tsparticles/engine";
+export class Explode {
+    maxSizeFactor;
+    speed;
+    constructor() {
+        this.maxSizeFactor = 3;
+        this.speed = 2;
+    }
+    load(data) {
+        if (isNull(data)) {
+            return;
+        }
+        if (data.maxSizeFactor !== undefined) {
+            this.maxSizeFactor = data.maxSizeFactor;
+        }
+        if (data.speed !== undefined) {
+            this.speed = data.speed;
+        }
+    }
+}

package/esm/Options/Interfaces/IExplode.js

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

package/esm/Utils.js

@@ -53,7 +53,7 @@ function addSplitParticle(pluginManager, container, parent, splitParticlesOption
         splitParticleOptions.size.value.max *= factor;
     }
     splitParticleOptions.load(splitParticlesOptions);
-    const splitParticleFillOptions = itemFromSingleOrMultiple(splitParticleOptions.fill), splitParticleStrokeOptions = itemFromSingleOrMultiple(splitParticleOptions.stroke), fillColor = resolveSplitColor(splitOptions.fillColorOffset, splitFillColor, splitParticleFillOptions?.color, parentFillColor), strokeColor = resolveSplitColor(splitOptions.strokeColorOffset, splitStrokeColor, splitParticleStrokeOptions?.color, parentStrokeColor);
+    const splitParticlePaintOptions = itemFromSingleOrMultiple(splitParticleOptions.paint), splitParticleFillOptions = splitParticlePaintOptions?.fill, splitParticleStrokeOptions = splitParticlePaintOptions?.stroke, fillColor = resolveSplitColor(splitOptions.fillColorOffset, splitFillColor, splitParticleFillOptions?.color, parentFillColor), strokeColor = resolveSplitColor(splitOptions.strokeColorOffset, splitStrokeColor, splitParticleStrokeOptions?.color, parentStrokeColor);
     if (fillColor && splitParticleFillOptions) {
         splitParticleFillOptions.color = fillColor;
     }

package/esm/browser.js

@@ -0,0 +1,5 @@
+import { loadDestroyUpdater } from "./index.js";
+const globalObject = globalThis;
+globalObject.__tsParticlesInternals = globalObject.__tsParticlesInternals ?? {};
+globalObject.loadDestroyUpdater = loadDestroyUpdater;
+export * from "./index.js";

package/esm/index.js

@@ -1,9 +1,9 @@
+import { DestroyUpdater } from "./DestroyUpdater.js";
 export async function loadDestroyUpdater(engine) {
-    engine.checkVersion("4.0.0-beta.9");
+    engine.checkVersion("4.0.0");
     await engine.pluginManager.register(e => {
-        e.pluginManager.addParticleUpdater("destroy", async (container) => {
-            const { DestroyUpdater } = await import("./DestroyUpdater.js");
-            return new DestroyUpdater(e.pluginManager, container);
+        e.pluginManager.addParticleUpdater("destroy", container => {
+            return Promise.resolve(new DestroyUpdater(e.pluginManager, container));
         });
     });
 }

package/esm/index.lazy.js

@@ -0,0 +1,9 @@
+export async function loadDestroyUpdater(engine) {
+    engine.checkVersion("4.0.0");
+    await engine.pluginManager.register(e => {
+        e.pluginManager.addParticleUpdater("destroy", async (container) => {
+            const { DestroyUpdater } = await import("./DestroyUpdater.js");
+            return new DestroyUpdater(e.pluginManager, container);
+        });
+    });
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsparticles/updater-destroy",
-  "version": "4.0.0-beta.9",
+  "version": "4.0.0",
   "description": "tsParticles particles destroy updater",
   "homepage": "https://particles.js.org",
   "repository": {
@@ -83,10 +83,17 @@
       "require": "./cjs/index.js",
       "default": "./esm/index.js"
     },
+    "./lazy": {
+      "types": "./types/index.lazy.d.ts",
+      "browser": "./browser/index.lazy.js",
+      "import": "./esm/index.lazy.js",
+      "require": "./cjs/index.lazy.js",
+      "default": "./esm/index.lazy.js"
+    },
     "./package.json": "./package.json"
   },
   "peerDependencies": {
-    "@tsparticles/engine": "4.0.0-beta.9"
+    "@tsparticles/engine": "4.0.0"
   },
   "publishConfig": {
     "access": "public"