@tsparticles/updater-destroy 3.0.0-alpha.1 → 3.0.0-beta.0

package/README.md

@@ -2,9 +2,9 @@
 
 # tsParticles Destroy Updater
 
-[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-updater-destroy/badge)](https://www.jsdelivr.com/package/npm/tsparticles-updater-destroy)
-[![npmjs](https://badge.fury.io/js/tsparticles-updater-destroy.svg)](https://www.npmjs.com/package/tsparticles-updater-destroy)
-[![npmjs](https://img.shields.io/npm/dt/tsparticles-updater-destroy)](https://www.npmjs.com/package/tsparticles-updater-destroy) [![GitHub Sponsors](https://img.shields.io/github/sponsors/matteobruni)](https://github.com/sponsors/matteobruni)
+[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/@tsparticles/updater-destroy/badge)](https://www.jsdelivr.com/package/npm/@tsparticles/updater-destroy)
+[![npmjs](https://badge.fury.io/js/@tsparticles/updater-destroy.svg)](https://www.npmjs.com/package/@tsparticles/updater-destroy)
+[![npmjs](https://img.shields.io/npm/dt/@tsparticles/updater-destroy)](https://www.npmjs.com/package/@tsparticles/updater-destroy) [![GitHub Sponsors](https://img.shields.io/github/sponsors/matteobruni)](https://github.com/sponsors/matteobruni)
 
 [tsParticles](https://github.com/matteobruni/tsparticles) updater plugin for destroy animations.
 
@@ -26,7 +26,7 @@ Once the scripts are loaded you can set up `tsParticles` and the updater plugin
 
 ```javascript
 (async () => {
-  await loadDestroyUpdater();
+  await loadDestroyUpdater(tsParticles);
 
   await tsParticles.load({
     id: "tsparticles",
@@ -42,29 +42,33 @@ Once the scripts are loaded you can set up `tsParticles` and the updater plugin
 This package is compatible also with ES or CommonJS modules, firstly this needs to be installed, like this:
 
 ```shell
-$ npm install tsparticles-updater-destroy
+$ npm install @tsparticles/updater-destroy
 ```
 
 or
 
 ```shell
-$ yarn add tsparticles-updater-destroy
+$ yarn add @tsparticles/updater-destroy
 ```
 
 Then you need to import it in the app, like this:
 
 ```javascript
-const { tsParticles } = require("tsparticles-engine");
-const { loadDestroyUpdater } = require("tsparticles-updater-destroy");
+const { tsParticles } = require("@tsparticles/engine");
+const { loadDestroyUpdater } = require("@tsparticles/updater-destroy");
 
-loadDestroyUpdater(tsParticles);
+(async () => {
+  await loadDestroyUpdater(tsParticles);
+})();
 ```
 
 or
 
 ```javascript
-import { tsParticles } from "tsparticles-engine";
-import { loadDestroyUpdater } from "tsparticles-updater-destroy";
+import { tsParticles } from "@tsparticles/engine";
+import { loadDestroyUpdater } from "@tsparticles/updater-destroy";
 
-loadDestroyUpdater(tsParticles);
+(async () => {
+  await loadDestroyUpdater(tsParticles);
+})();
 ```

package/browser/DestroyUpdater.js

@@ -1,5 +1,6 @@
-import { getRangeValue, getValue, itemFromSingleOrMultiple, loadParticlesOptions, randomInRange, setRangeValue, } from "@tsparticles/engine";
+import { getRangeValue, } from "@tsparticles/engine";
 import { Destroy } from "./Options/Classes/Destroy";
+import { split } from "./Utils";
 export class DestroyUpdater {
     constructor(engine, container) {
         this.engine = engine;
@@ -11,21 +12,22 @@ export class DestroyUpdater {
             return;
         }
         particle.splitCount = 0;
-        const destroyBounds = destroyOptions.bounds;
+        const destroyBoundsOptions = destroyOptions.bounds;
         if (!particle.destroyBounds) {
             particle.destroyBounds = {};
         }
-        if (destroyBounds.bottom) {
-            particle.destroyBounds.bottom = (getRangeValue(destroyBounds.bottom) * container.canvas.size.height) / 100;
+        const { bottom, left, right, top } = destroyBoundsOptions, { destroyBounds } = particle, canvasSize = container.canvas.size;
+        if (bottom) {
+            destroyBounds.bottom = (getRangeValue(bottom) * canvasSize.height) / 100;
         }
-        if (destroyBounds.left) {
-            particle.destroyBounds.left = (getRangeValue(destroyBounds.left) * container.canvas.size.width) / 100;
+        if (left) {
+            destroyBounds.left = (getRangeValue(left) * canvasSize.width) / 100;
         }
-        if (destroyBounds.right) {
-            particle.destroyBounds.right = (getRangeValue(destroyBounds.right) * container.canvas.size.width) / 100;
+        if (right) {
+            destroyBounds.right = (getRangeValue(right) * canvasSize.width) / 100;
         }
-        if (destroyBounds.top) {
-            particle.destroyBounds.top = (getRangeValue(destroyBounds.top) * container.canvas.size.height) / 100;
+        if (top) {
+            destroyBounds.top = (getRangeValue(top) * canvasSize.height) / 100;
         }
     }
     isEnabled(particle) {
@@ -36,7 +38,7 @@ export class DestroyUpdater {
             options.destroy = new Destroy();
         }
         for (const source of sources) {
-            options.destroy.load(source === null || source === void 0 ? void 0 : source.destroy);
+            options.destroy.load(source?.destroy);
         }
     }
     particleDestroyed(particle, override) {
@@ -45,7 +47,7 @@ export class DestroyUpdater {
         }
         const destroyOptions = particle.options.destroy;
         if (destroyOptions && destroyOptions.mode === "split") {
-            this.split(particle);
+            split(this.engine, this.container, particle);
         }
     }
     update(particle) {
@@ -63,63 +65,4 @@ export class DestroyUpdater {
             particle.destroy();
         }
     }
-    addSplitParticle(parent, splitParticlesOptions) {
-        const destroyOptions = parent.options.destroy;
-        if (!destroyOptions) {
-            return;
-        }
-        const splitOptions = destroyOptions.split, options = loadParticlesOptions(this.engine, this.container, parent.options), factor = getValue(splitOptions.factor);
-        options.color.load({
-            value: {
-                hsl: parent.getFillColor(),
-            },
-        });
-        options.move.load({
-            center: {
-                x: parent.position.x,
-                y: parent.position.y,
-                mode: "precise",
-            },
-        });
-        if (typeof options.size.value === "number") {
-            options.size.value /= factor;
-        }
-        else {
-            options.size.value.min /= factor;
-            options.size.value.max /= factor;
-        }
-        options.load(splitParticlesOptions);
-        const offset = splitOptions.sizeOffset ? setRangeValue(-parent.size.value, parent.size.value) : 0, position = {
-            x: parent.position.x + randomInRange(offset),
-            y: parent.position.y + randomInRange(offset),
-        };
-        return this.container.particles.addParticle(position, options, parent.group, (particle) => {
-            var _a;
-            if (particle.size.value < 0.5) {
-                return false;
-            }
-            particle.velocity.length = randomInRange(setRangeValue(parent.velocity.length, particle.velocity.length));
-            particle.splitCount = ((_a = parent.splitCount) !== null && _a !== void 0 ? _a : 0) + 1;
-            particle.unbreakable = true;
-            setTimeout(() => {
-                particle.unbreakable = false;
-            }, 500);
-            return true;
-        });
-    }
-    split(particle) {
-        const destroyOptions = particle.options.destroy;
-        if (!destroyOptions) {
-            return;
-        }
-        const splitOptions = destroyOptions.split;
-        if (splitOptions.count >= 0 &&
-            (particle.splitCount === undefined || particle.splitCount++ > splitOptions.count)) {
-            return;
-        }
-        const rate = getValue(splitOptions.rate), particlesSplitOptions = itemFromSingleOrMultiple(splitOptions.particles);
-        for (let i = 0; i < rate; i++) {
-            this.addSplitParticle(particle, particlesSplitOptions);
-        }
-    }
 }

package/browser/Options/Classes/Split.js

@@ -1,4 +1,4 @@
-import { deepExtend, executeOnSingleOrMultiple } from "@tsparticles/engine";
+import { OptionsColor, deepExtend, executeOnSingleOrMultiple, } from "@tsparticles/engine";
 import { SplitFactor } from "./SplitFactor";
 import { SplitRate } from "./SplitRate";
 export class Split {
@@ -12,6 +12,9 @@ export class Split {
         if (!data) {
             return;
         }
+        if (data.color !== undefined) {
+            this.color = OptionsColor.create(this.color, data.color);
+        }
         if (data.count !== undefined) {
             this.count = data.count;
         }
@@ -23,5 +26,17 @@ export class Split {
         if (data.sizeOffset !== undefined) {
             this.sizeOffset = data.sizeOffset;
         }
+        if (data.colorOffset) {
+            this.colorOffset = this.colorOffset ?? {};
+            if (data.colorOffset.h !== undefined) {
+                this.colorOffset.h = data.colorOffset.h;
+            }
+            if (data.colorOffset.s !== undefined) {
+                this.colorOffset.s = data.colorOffset.s;
+            }
+            if (data.colorOffset.l !== undefined) {
+                this.colorOffset.l = data.colorOffset.l;
+            }
+        }
     }
 }

package/browser/Types.js

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

package/browser/Utils.js

@@ -0,0 +1,74 @@
+import { getRangeValue, getValue, isNumber, itemFromSingleOrMultiple, loadParticlesOptions, randomInRange, setRangeValue, } from "@tsparticles/engine";
+function addSplitParticle(engine, container, parent, splitParticlesOptions) {
+    const destroyOptions = parent.options.destroy;
+    if (!destroyOptions) {
+        return;
+    }
+    const splitOptions = destroyOptions.split, options = loadParticlesOptions(engine, container, parent.options), factor = getValue(splitOptions.factor), parentColor = parent.getFillColor();
+    if (splitOptions.color) {
+        options.color.load(splitOptions.color);
+    }
+    else if (splitOptions.colorOffset && parentColor) {
+        options.color.load({
+            value: {
+                hsl: {
+                    h: parentColor.h + getRangeValue(splitOptions.colorOffset.h ?? 0),
+                    s: parentColor.s + getRangeValue(splitOptions.colorOffset.s ?? 0),
+                    l: parentColor.l + getRangeValue(splitOptions.colorOffset.l ?? 0),
+                },
+            },
+        });
+    }
+    else {
+        options.color.load({
+            value: {
+                hsl: parent.getFillColor(),
+            },
+        });
+    }
+    options.move.load({
+        center: {
+            x: parent.position.x,
+            y: parent.position.y,
+            mode: "precise",
+        },
+    });
+    if (isNumber(options.size.value)) {
+        options.size.value /= factor;
+    }
+    else {
+        options.size.value.min /= factor;
+        options.size.value.max /= factor;
+    }
+    options.load(splitParticlesOptions);
+    const offset = splitOptions.sizeOffset ? setRangeValue(-parent.size.value, parent.size.value) : 0, position = {
+        x: parent.position.x + randomInRange(offset),
+        y: parent.position.y + randomInRange(offset),
+    };
+    return container.particles.addParticle(position, options, parent.group, (particle) => {
+        if (particle.size.value < 0.5) {
+            return false;
+        }
+        particle.velocity.length = randomInRange(setRangeValue(parent.velocity.length, particle.velocity.length));
+        particle.splitCount = (parent.splitCount ?? 0) + 1;
+        particle.unbreakable = true;
+        setTimeout(() => {
+            particle.unbreakable = false;
+        }, 500);
+        return true;
+    });
+}
+export function split(engine, container, particle) {
+    const destroyOptions = particle.options.destroy;
+    if (!destroyOptions) {
+        return;
+    }
+    const splitOptions = destroyOptions.split;
+    if (splitOptions.count >= 0 && (particle.splitCount === undefined || particle.splitCount++ > splitOptions.count)) {
+        return;
+    }
+    const rate = getValue(splitOptions.rate), particlesSplitOptions = itemFromSingleOrMultiple(splitOptions.particles);
+    for (let i = 0; i < rate; i++) {
+        addSplitParticle(engine, container, particle, particlesSplitOptions);
+    }
+}

package/browser/index.js

@@ -1,4 +1,4 @@
 import { DestroyUpdater } from "./DestroyUpdater";
-export async function loadDestroyUpdater(engine) {
-    await engine.addParticleUpdater("destroy", (container) => new DestroyUpdater(engine, container));
+export async function loadDestroyUpdater(engine, refresh = true) {
+    await engine.addParticleUpdater("destroy", (container) => new DestroyUpdater(engine, container), refresh);
 }

package/cjs/DestroyUpdater.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DestroyUpdater = void 0;
 const engine_1 = require("@tsparticles/engine");
 const Destroy_1 = require("./Options/Classes/Destroy");
+const Utils_1 = require("./Utils");
 class DestroyUpdater {
     constructor(engine, container) {
         this.engine = engine;
@@ -14,21 +15,22 @@ class DestroyUpdater {
             return;
         }
         particle.splitCount = 0;
-        const destroyBounds = destroyOptions.bounds;
+        const destroyBoundsOptions = destroyOptions.bounds;
         if (!particle.destroyBounds) {
             particle.destroyBounds = {};
         }
-        if (destroyBounds.bottom) {
-            particle.destroyBounds.bottom = ((0, engine_1.getRangeValue)(destroyBounds.bottom) * container.canvas.size.height) / 100;
+        const { bottom, left, right, top } = destroyBoundsOptions, { destroyBounds } = particle, canvasSize = container.canvas.size;
+        if (bottom) {
+            destroyBounds.bottom = ((0, engine_1.getRangeValue)(bottom) * canvasSize.height) / 100;
         }
-        if (destroyBounds.left) {
-            particle.destroyBounds.left = ((0, engine_1.getRangeValue)(destroyBounds.left) * container.canvas.size.width) / 100;
+        if (left) {
+            destroyBounds.left = ((0, engine_1.getRangeValue)(left) * canvasSize.width) / 100;
         }
-        if (destroyBounds.right) {
-            particle.destroyBounds.right = ((0, engine_1.getRangeValue)(destroyBounds.right) * container.canvas.size.width) / 100;
+        if (right) {
+            destroyBounds.right = ((0, engine_1.getRangeValue)(right) * canvasSize.width) / 100;
         }
-        if (destroyBounds.top) {
-            particle.destroyBounds.top = ((0, engine_1.getRangeValue)(destroyBounds.top) * container.canvas.size.height) / 100;
+        if (top) {
+            destroyBounds.top = ((0, engine_1.getRangeValue)(top) * canvasSize.height) / 100;
         }
     }
     isEnabled(particle) {
@@ -39,7 +41,7 @@ class DestroyUpdater {
             options.destroy = new Destroy_1.Destroy();
         }
         for (const source of sources) {
-            options.destroy.load(source === null || source === void 0 ? void 0 : source.destroy);
+            options.destroy.load(source?.destroy);
         }
     }
     particleDestroyed(particle, override) {
@@ -48,7 +50,7 @@ class DestroyUpdater {
         }
         const destroyOptions = particle.options.destroy;
         if (destroyOptions && destroyOptions.mode === "split") {
-            this.split(particle);
+            (0, Utils_1.split)(this.engine, this.container, particle);
         }
     }
     update(particle) {
@@ -66,64 +68,5 @@ class DestroyUpdater {
             particle.destroy();
         }
     }
-    addSplitParticle(parent, splitParticlesOptions) {
-        const destroyOptions = parent.options.destroy;
-        if (!destroyOptions) {
-            return;
-        }
-        const splitOptions = destroyOptions.split, options = (0, engine_1.loadParticlesOptions)(this.engine, this.container, parent.options), factor = (0, engine_1.getValue)(splitOptions.factor);
-        options.color.load({
-            value: {
-                hsl: parent.getFillColor(),
-            },
-        });
-        options.move.load({
-            center: {
-                x: parent.position.x,
-                y: parent.position.y,
-                mode: "precise",
-            },
-        });
-        if (typeof options.size.value === "number") {
-            options.size.value /= factor;
-        }
-        else {
-            options.size.value.min /= factor;
-            options.size.value.max /= factor;
-        }
-        options.load(splitParticlesOptions);
-        const offset = splitOptions.sizeOffset ? (0, engine_1.setRangeValue)(-parent.size.value, parent.size.value) : 0, position = {
-            x: parent.position.x + (0, engine_1.randomInRange)(offset),
-            y: parent.position.y + (0, engine_1.randomInRange)(offset),
-        };
-        return this.container.particles.addParticle(position, options, parent.group, (particle) => {
-            var _a;
-            if (particle.size.value < 0.5) {
-                return false;
-            }
-            particle.velocity.length = (0, engine_1.randomInRange)((0, engine_1.setRangeValue)(parent.velocity.length, particle.velocity.length));
-            particle.splitCount = ((_a = parent.splitCount) !== null && _a !== void 0 ? _a : 0) + 1;
-            particle.unbreakable = true;
-            setTimeout(() => {
-                particle.unbreakable = false;
-            }, 500);
-            return true;
-        });
-    }
-    split(particle) {
-        const destroyOptions = particle.options.destroy;
-        if (!destroyOptions) {
-            return;
-        }
-        const splitOptions = destroyOptions.split;
-        if (splitOptions.count >= 0 &&
-            (particle.splitCount === undefined || particle.splitCount++ > splitOptions.count)) {
-            return;
-        }
-        const rate = (0, engine_1.getValue)(splitOptions.rate), particlesSplitOptions = (0, engine_1.itemFromSingleOrMultiple)(splitOptions.particles);
-        for (let i = 0; i < rate; i++) {
-            this.addSplitParticle(particle, particlesSplitOptions);
-        }
-    }
 }
 exports.DestroyUpdater = DestroyUpdater;

package/cjs/Options/Classes/Split.js

@@ -15,6 +15,9 @@ class Split {
         if (!data) {
             return;
         }
+        if (data.color !== undefined) {
+            this.color = engine_1.OptionsColor.create(this.color, data.color);
+        }
         if (data.count !== undefined) {
             this.count = data.count;
         }
@@ -26,6 +29,18 @@ class Split {
         if (data.sizeOffset !== undefined) {
             this.sizeOffset = data.sizeOffset;
         }
+        if (data.colorOffset) {
+            this.colorOffset = this.colorOffset ?? {};
+            if (data.colorOffset.h !== undefined) {
+                this.colorOffset.h = data.colorOffset.h;
+            }
+            if (data.colorOffset.s !== undefined) {
+                this.colorOffset.s = data.colorOffset.s;
+            }
+            if (data.colorOffset.l !== undefined) {
+                this.colorOffset.l = data.colorOffset.l;
+            }
+        }
     }
 }
 exports.Split = Split;

package/cjs/Types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/cjs/Utils.js

@@ -0,0 +1,78 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.split = void 0;
+const engine_1 = require("@tsparticles/engine");
+function addSplitParticle(engine, container, parent, splitParticlesOptions) {
+    const destroyOptions = parent.options.destroy;
+    if (!destroyOptions) {
+        return;
+    }
+    const splitOptions = destroyOptions.split, options = (0, engine_1.loadParticlesOptions)(engine, container, parent.options), factor = (0, engine_1.getValue)(splitOptions.factor), parentColor = parent.getFillColor();
+    if (splitOptions.color) {
+        options.color.load(splitOptions.color);
+    }
+    else if (splitOptions.colorOffset && parentColor) {
+        options.color.load({
+            value: {
+                hsl: {
+                    h: parentColor.h + (0, engine_1.getRangeValue)(splitOptions.colorOffset.h ?? 0),
+                    s: parentColor.s + (0, engine_1.getRangeValue)(splitOptions.colorOffset.s ?? 0),
+                    l: parentColor.l + (0, engine_1.getRangeValue)(splitOptions.colorOffset.l ?? 0),
+                },
+            },
+        });
+    }
+    else {
+        options.color.load({
+            value: {
+                hsl: parent.getFillColor(),
+            },
+        });
+    }
+    options.move.load({
+        center: {
+            x: parent.position.x,
+            y: parent.position.y,
+            mode: "precise",
+        },
+    });
+    if ((0, engine_1.isNumber)(options.size.value)) {
+        options.size.value /= factor;
+    }
+    else {
+        options.size.value.min /= factor;
+        options.size.value.max /= factor;
+    }
+    options.load(splitParticlesOptions);
+    const offset = splitOptions.sizeOffset ? (0, engine_1.setRangeValue)(-parent.size.value, parent.size.value) : 0, position = {
+        x: parent.position.x + (0, engine_1.randomInRange)(offset),
+        y: parent.position.y + (0, engine_1.randomInRange)(offset),
+    };
+    return container.particles.addParticle(position, options, parent.group, (particle) => {
+        if (particle.size.value < 0.5) {
+            return false;
+        }
+        particle.velocity.length = (0, engine_1.randomInRange)((0, engine_1.setRangeValue)(parent.velocity.length, particle.velocity.length));
+        particle.splitCount = (parent.splitCount ?? 0) + 1;
+        particle.unbreakable = true;
+        setTimeout(() => {
+            particle.unbreakable = false;
+        }, 500);
+        return true;
+    });
+}
+function split(engine, container, particle) {
+    const destroyOptions = particle.options.destroy;
+    if (!destroyOptions) {
+        return;
+    }
+    const splitOptions = destroyOptions.split;
+    if (splitOptions.count >= 0 && (particle.splitCount === undefined || particle.splitCount++ > splitOptions.count)) {
+        return;
+    }
+    const rate = (0, engine_1.getValue)(splitOptions.rate), particlesSplitOptions = (0, engine_1.itemFromSingleOrMultiple)(splitOptions.particles);
+    for (let i = 0; i < rate; i++) {
+        addSplitParticle(engine, container, particle, particlesSplitOptions);
+    }
+}
+exports.split = split;

package/cjs/index.js

@@ -1,19 +1,8 @@
 "use strict";
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.loadDestroyUpdater = void 0;
 const DestroyUpdater_1 = require("./DestroyUpdater");
-function loadDestroyUpdater(engine) {
-    return __awaiter(this, void 0, void 0, function* () {
-        yield engine.addParticleUpdater("destroy", (container) => new DestroyUpdater_1.DestroyUpdater(engine, container));
-    });
+async function loadDestroyUpdater(engine, refresh = true) {
+    await engine.addParticleUpdater("destroy", (container) => new DestroyUpdater_1.DestroyUpdater(engine, container), refresh);
 }
 exports.loadDestroyUpdater = loadDestroyUpdater;