@tsparticles/updater-destroy 4.0.0-alpha.8 → 4.0.0-beta.1

package/513.min.js

@@ -0,0 +1 @@
+"use strict";(this.webpackChunk_tsparticles_updater_destroy=this.webpackChunk_tsparticles_updater_destroy||[]).push([[513],{513(e,t,o){o.d(t,{DestroyUpdater:()=>d});var l,s,i=o(303);class r{bottom;left;right;top;load(e){(0,i.isNull)(e)||(void 0!==e.bottom&&(this.bottom=(0,i.setRangeValue)(e.bottom)),void 0!==e.left&&(this.left=(0,i.setRangeValue)(e.left)),void 0!==e.right&&(this.right=(0,i.setRangeValue)(e.right)),void 0!==e.top&&(this.top=(0,i.setRangeValue)(e.top)))}}(l=s||(s={})).none="none",l.split="split";class a extends i.ValueWithRandom{constructor(){super(),this.value=3}}class n extends i.ValueWithRandom{constructor(){super(),this.value={min:4,max:9}}}class f{count;factor;fillColor;fillColorOffset;particles;rate;sizeOffset;strokeColor;strokeColorOffset;constructor(){this.count=1,this.factor=new a,this.rate=new n,this.sizeOffset=!0}load(e){!(0,i.isNull)(e)&&(void 0!==e.fillColor&&(this.fillColor=i.OptionsColor.create(this.fillColor,e.fillColor)),void 0!==e.strokeColor&&(this.strokeColor=i.OptionsColor.create(this.strokeColor,e.strokeColor)),void 0!==e.count&&(this.count=e.count),this.factor.load(e.factor),this.rate.load(e.rate),this.particles=(0,i.executeOnSingleOrMultiple)(e.particles,e=>(0,i.deepExtend)({},e)),void 0!==e.sizeOffset&&(this.sizeOffset=e.sizeOffset),e.fillColorOffset&&(this.fillColorOffset=this.fillColorOffset??{},void 0!==e.fillColorOffset.h&&(this.fillColorOffset.h=e.fillColorOffset.h),void 0!==e.fillColorOffset.s&&(this.fillColorOffset.s=e.fillColorOffset.s),void 0!==e.fillColorOffset.l&&(this.fillColorOffset.l=e.fillColorOffset.l)),e.strokeColorOffset&&(this.strokeColorOffset=this.strokeColorOffset??{},void 0!==e.strokeColorOffset.h&&(this.strokeColorOffset.h=e.strokeColorOffset.h),void 0!==e.strokeColorOffset.s&&(this.strokeColorOffset.s=e.strokeColorOffset.s),void 0!==e.strokeColorOffset.l&&(this.strokeColorOffset.l=e.strokeColorOffset.l)))}}class u{bounds;mode;split;constructor(){this.bounds=new r,this.mode=s.none,this.split=new f}load(e){(0,i.isNull)(e)||(e.mode&&(this.mode=e.mode),e.bounds&&this.bounds.load(e.bounds),this.split.load(e.split))}}class d{_container;_pluginManager;constructor(e,t){this._container=t,this._pluginManager=e}init(e){let t=this._container,o=e.options.destroy;if(!o)return;e.splitCount=0;let l=o.bounds;e.destroyBounds??={};let{bottom:s,left:r,right:a,top:n}=l,{destroyBounds:f}=e,u=t.canvas.size;s&&(f.bottom=(0,i.getRangeValue)(s)*u.height/i.percentDenominator),r&&(f.left=(0,i.getRangeValue)(r)*u.width/i.percentDenominator),a&&(f.right=(0,i.getRangeValue)(a)*u.width/i.percentDenominator),n&&(f.top=(0,i.getRangeValue)(n)*u.height/i.percentDenominator)}isEnabled(e){return!e.destroyed}loadOptions(e,...t){for(let o of(e.destroy??=new u,t))e.destroy.load(o?.destroy)}particleDestroyed(e,t){if(t)return;let o=e.options.destroy;o?.mode===s.split&&function(e,t,o){let l=o.options.destroy;if(!l)return;let s=l.split;if(s.count>=0){if(void 0===o.splitCount||o.splitCount>s.count)return;o.splitCount++}let r=(0,i.getRangeValue)(s.rate.value),a=(0,i.itemFromSingleOrMultiple)(s.particles);for(let l=0;l<r;l++)!function(e,t,o,l){let s=o.options.destroy;if(!s)return;let r=s.split,a=(0,i.loadParticlesOptions)(e,t,o.options),n=(0,i.itemFromSingleOrMultiple)(a.fill),f=(0,i.itemFromSingleOrMultiple)(a.stroke);if(n?.enable){let e=i.AnimatableColor.create(void 0,n.color),t=o.getFillColor();e.value?e.load(r.fillColor):r.fillColorOffset&&t?e.load({value:{hsl:{h:t.h+(0,i.getRangeValue)(r.fillColorOffset.h??0),s:t.s+(0,i.getRangeValue)(r.fillColorOffset.s??0),l:t.l+(0,i.getRangeValue)(r.fillColorOffset.l??0)}}}):e.load({value:{hsl:o.getFillColor()}})}if(f?.width){let e=i.AnimatableColor.create(void 0,f.color),t=o.getStrokeColor();e.value?e.load(r.strokeColor):r.strokeColorOffset&&t?e.load({value:{hsl:{h:t.h+(0,i.getRangeValue)(r.strokeColorOffset.h??0),s:t.s+(0,i.getRangeValue)(r.strokeColorOffset.s??0),l:t.l+(0,i.getRangeValue)(r.strokeColorOffset.l??0)}}}):e.load({value:{hsl:o.getStrokeColor()}})}a.move.load({center:{x:o.position.x,y:o.position.y,mode:i.PixelMode.precise}});let u=i.identity/(0,i.getRangeValue)(r.factor.value);(0,i.isNumber)(a.size.value)?a.size.value*=u:(a.size.value.min*=u,a.size.value.max*=u),a.load(l);let d=r.sizeOffset?(0,i.setRangeValue)(-o.size.value,o.size.value):0,h={x:o.position.x+(0,i.randomInRangeValue)(d),y:o.position.y+(0,i.randomInRangeValue)(d)};t.particles.addParticle(h,a,o.group,e=>!(e.size.value<.5)&&(e.velocity.length=(0,i.randomInRangeValue)((0,i.setRangeValue)(o.velocity.length,e.velocity.length)),e.splitCount=(o.splitCount??0)+1,e.unbreakable=!0,e.unbreakableUntil=performance.now()+500,!0))}(e,t,o,a)}(this._pluginManager,this._container,e)}update(e){void 0!==e.unbreakableUntil&&performance.now()>=e.unbreakableUntil&&(e.unbreakable=!1,e.unbreakableUntil=void 0);let t=e.getPosition(),o=e.destroyBounds;o&&(void 0!==o.bottom&&t.y>=o.bottom||void 0!==o.left&&t.x<=o.left||void 0!==o.right&&t.x>=o.right||void 0!==o.top&&t.y<=o.top)&&e.destroy()}}}}]);

package/browser/DestroyUpdater.js

@@ -3,12 +3,14 @@ import { Destroy } from "./Options/Classes/Destroy.js";
 import { DestroyMode } from "./Enums/DestroyMode.js";
 import { split } from "./Utils.js";
 export class DestroyUpdater {
-    constructor(engine, container) {
-        this.container = container;
-        this.engine = engine;
+    _container;
+    _pluginManager;
+    constructor(pluginManager, container) {
+        this._container = container;
+        this._pluginManager = pluginManager;
     }
     init(particle) {
-        const container = this.container, particlesOptions = particle.options, destroyOptions = particlesOptions.destroy;
+        const container = this._container, particlesOptions = particle.options, destroyOptions = particlesOptions.destroy;
         if (!destroyOptions) {
             return;
         }
@@ -44,12 +46,13 @@ export class DestroyUpdater {
         }
         const destroyOptions = particle.options.destroy;
         if (destroyOptions?.mode === DestroyMode.split) {
-            split(this.engine, this.container, particle);
+            split(this._pluginManager, this._container, particle);
         }
     }
     update(particle) {
-        if (!this.isEnabled(particle)) {
-            return;
+        if (particle.unbreakableUntil !== undefined && performance.now() >= particle.unbreakableUntil) {
+            particle.unbreakable = false;
+            particle.unbreakableUntil = undefined;
         }
         const position = particle.getPosition(), bounds = particle.destroyBounds;
         if (!bounds) {

package/browser/Options/Classes/Destroy.js

@@ -3,6 +3,9 @@ import { DestroyBounds } from "./DestroyBounds.js";
 import { DestroyMode } from "../../Enums/DestroyMode.js";
 import { Split } from "./Split.js";
 export class Destroy {
+    bounds;
+    mode;
+    split;
     constructor() {
         this.bounds = new DestroyBounds();
         this.mode = DestroyMode.none;

package/browser/Options/Classes/DestroyBounds.js

@@ -1,5 +1,9 @@
 import { isNull, setRangeValue } from "@tsparticles/engine";
 export class DestroyBounds {
+    bottom;
+    left;
+    right;
+    top;
     load(data) {
         if (isNull(data)) {
             return;

package/browser/Options/Classes/Split.js

@@ -2,6 +2,15 @@ import { OptionsColor, deepExtend, executeOnSingleOrMultiple, isNull, } from "@t
 import { SplitFactor } from "./SplitFactor.js";
 import { SplitRate } from "./SplitRate.js";
 export class Split {
+    count;
+    factor;
+    fillColor;
+    fillColorOffset;
+    particles;
+    rate;
+    sizeOffset;
+    strokeColor;
+    strokeColorOffset;
     constructor() {
         this.count = 1;
         this.factor = new SplitFactor();
@@ -12,8 +21,11 @@ export class Split {
         if (isNull(data)) {
             return;
         }
-        if (data.color !== undefined) {
-            this.color = OptionsColor.create(this.color, data.color);
+        if (data.fillColor !== undefined) {
+            this.fillColor = OptionsColor.create(this.fillColor, data.fillColor);
+        }
+        if (data.strokeColor !== undefined) {
+            this.strokeColor = OptionsColor.create(this.strokeColor, data.strokeColor);
         }
         if (data.count !== undefined) {
             this.count = data.count;
@@ -26,16 +38,28 @@ 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.fillColorOffset) {
+            this.fillColorOffset = this.fillColorOffset ?? {};
+            if (data.fillColorOffset.h !== undefined) {
+                this.fillColorOffset.h = data.fillColorOffset.h;
+            }
+            if (data.fillColorOffset.s !== undefined) {
+                this.fillColorOffset.s = data.fillColorOffset.s;
+            }
+            if (data.fillColorOffset.l !== undefined) {
+                this.fillColorOffset.l = data.fillColorOffset.l;
+            }
+        }
+        if (data.strokeColorOffset) {
+            this.strokeColorOffset = this.strokeColorOffset ?? {};
+            if (data.strokeColorOffset.h !== undefined) {
+                this.strokeColorOffset.h = data.strokeColorOffset.h;
             }
-            if (data.colorOffset.s !== undefined) {
-                this.colorOffset.s = data.colorOffset.s;
+            if (data.strokeColorOffset.s !== undefined) {
+                this.strokeColorOffset.s = data.strokeColorOffset.s;
             }
-            if (data.colorOffset.l !== undefined) {
-                this.colorOffset.l = data.colorOffset.l;
+            if (data.strokeColorOffset.l !== undefined) {
+                this.strokeColorOffset.l = data.strokeColorOffset.l;
             }
         }
     }

package/browser/Utils.js

@@ -1,31 +1,58 @@
-import { PixelMode, getRangeValue, isNumber, itemFromSingleOrMultiple, loadParticlesOptions, randomInRangeValue, setRangeValue, } from "@tsparticles/engine";
+import { AnimatableColor, PixelMode, getRangeValue, identity, isNumber, itemFromSingleOrMultiple, loadParticlesOptions, randomInRangeValue, setRangeValue, } from "@tsparticles/engine";
 const defaultOffset = 0, minDestroySize = 0.5, defaultSplitCount = 0, increment = 1, unbreakableTime = 500, minSplitCount = 0;
-function addSplitParticle(engine, container, parent, splitParticlesOptions) {
+function addSplitParticle(pluginManager, container, parent, splitParticlesOptions) {
     const destroyOptions = parent.options.destroy;
     if (!destroyOptions) {
         return;
     }
-    const splitOptions = destroyOptions.split, options = loadParticlesOptions(engine, container, parent.options), factor = getRangeValue(splitOptions.factor.value), 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 ?? defaultOffset),
-                    s: parentColor.s + getRangeValue(splitOptions.colorOffset.s ?? defaultOffset),
-                    l: parentColor.l + getRangeValue(splitOptions.colorOffset.l ?? defaultOffset),
+    const splitOptions = destroyOptions.split, options = loadParticlesOptions(pluginManager, container, parent.options), fillOptions = itemFromSingleOrMultiple(options.fill), strokeOptions = itemFromSingleOrMultiple(options.stroke);
+    if (fillOptions?.enable) {
+        const fillColor = AnimatableColor.create(undefined, fillOptions.color), parentFillColor = parent.getFillColor();
+        if (fillColor.value) {
+            fillColor.load(splitOptions.fillColor);
+        }
+        else if (splitOptions.fillColorOffset && parentFillColor) {
+            fillColor.load({
+                value: {
+                    hsl: {
+                        h: parentFillColor.h + getRangeValue(splitOptions.fillColorOffset.h ?? defaultOffset),
+                        s: parentFillColor.s + getRangeValue(splitOptions.fillColorOffset.s ?? defaultOffset),
+                        l: parentFillColor.l + getRangeValue(splitOptions.fillColorOffset.l ?? defaultOffset),
+                    },
+                },
+            });
+        }
+        else {
+            fillColor.load({
+                value: {
+                    hsl: parent.getFillColor(),
                 },
-            },
-        });
+            });
+        }
     }
-    else {
-        options.color.load({
-            value: {
-                hsl: parent.getFillColor(),
-            },
-        });
+    if (strokeOptions?.width) {
+        const strokeColor = AnimatableColor.create(undefined, strokeOptions.color), parentStrokeColor = parent.getStrokeColor();
+        if (strokeColor.value) {
+            strokeColor.load(splitOptions.strokeColor);
+        }
+        else if (splitOptions.strokeColorOffset && parentStrokeColor) {
+            strokeColor.load({
+                value: {
+                    hsl: {
+                        h: parentStrokeColor.h + getRangeValue(splitOptions.strokeColorOffset.h ?? defaultOffset),
+                        s: parentStrokeColor.s + getRangeValue(splitOptions.strokeColorOffset.s ?? defaultOffset),
+                        l: parentStrokeColor.l + getRangeValue(splitOptions.strokeColorOffset.l ?? defaultOffset),
+                    },
+                },
+            });
+        }
+        else {
+            strokeColor.load({
+                value: {
+                    hsl: parent.getStrokeColor(),
+                },
+            });
+        }
     }
     options.move.load({
         center: {
@@ -34,12 +61,13 @@ function addSplitParticle(engine, container, parent, splitParticlesOptions) {
             mode: PixelMode.precise,
         },
     });
+    const factor = identity / getRangeValue(splitOptions.factor.value);
     if (isNumber(options.size.value)) {
-        options.size.value /= factor;
+        options.size.value *= factor;
     }
     else {
-        options.size.value.min /= factor;
-        options.size.value.max /= factor;
+        options.size.value.min *= factor;
+        options.size.value.max *= factor;
     }
     options.load(splitParticlesOptions);
     const offset = splitOptions.sizeOffset ? setRangeValue(-parent.size.value, parent.size.value) : defaultOffset, position = {
@@ -53,24 +81,24 @@ function addSplitParticle(engine, container, parent, splitParticlesOptions) {
         particle.velocity.length = randomInRangeValue(setRangeValue(parent.velocity.length, particle.velocity.length));
         particle.splitCount = (parent.splitCount ?? defaultSplitCount) + increment;
         particle.unbreakable = true;
-        setTimeout(() => {
-            particle.unbreakable = false;
-        }, unbreakableTime);
+        particle.unbreakableUntil = performance.now() + unbreakableTime;
         return true;
     });
 }
-export function split(engine, container, particle) {
+export function split(pluginManager, container, particle) {
     const destroyOptions = particle.options.destroy;
     if (!destroyOptions) {
         return;
     }
     const splitOptions = destroyOptions.split;
-    if (splitOptions.count >= minSplitCount &&
-        (particle.splitCount === undefined || particle.splitCount++ > splitOptions.count)) {
-        return;
+    if (splitOptions.count >= minSplitCount) {
+        if (particle.splitCount === undefined || particle.splitCount > splitOptions.count) {
+            return;
+        }
+        particle.splitCount++;
     }
     const rate = getRangeValue(splitOptions.rate.value), particlesSplitOptions = itemFromSingleOrMultiple(splitOptions.particles);
     for (let i = 0; i < rate; i++) {
-        addSplitParticle(engine, container, particle, particlesSplitOptions);
+        addSplitParticle(pluginManager, container, particle, particlesSplitOptions);
     }
 }

package/browser/index.js

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

package/cjs/DestroyUpdater.js

@@ -3,12 +3,14 @@ import { Destroy } from "./Options/Classes/Destroy.js";
 import { DestroyMode } from "./Enums/DestroyMode.js";
 import { split } from "./Utils.js";
 export class DestroyUpdater {
-    constructor(engine, container) {
-        this.container = container;
-        this.engine = engine;
+    _container;
+    _pluginManager;
+    constructor(pluginManager, container) {
+        this._container = container;
+        this._pluginManager = pluginManager;
     }
     init(particle) {
-        const container = this.container, particlesOptions = particle.options, destroyOptions = particlesOptions.destroy;
+        const container = this._container, particlesOptions = particle.options, destroyOptions = particlesOptions.destroy;
         if (!destroyOptions) {
             return;
         }
@@ -44,12 +46,13 @@ export class DestroyUpdater {
         }
         const destroyOptions = particle.options.destroy;
         if (destroyOptions?.mode === DestroyMode.split) {
-            split(this.engine, this.container, particle);
+            split(this._pluginManager, this._container, particle);
         }
     }
     update(particle) {
-        if (!this.isEnabled(particle)) {
-            return;
+        if (particle.unbreakableUntil !== undefined && performance.now() >= particle.unbreakableUntil) {
+            particle.unbreakable = false;
+            particle.unbreakableUntil = undefined;
         }
         const position = particle.getPosition(), bounds = particle.destroyBounds;
         if (!bounds) {

package/cjs/Options/Classes/Destroy.js

@@ -3,6 +3,9 @@ import { DestroyBounds } from "./DestroyBounds.js";
 import { DestroyMode } from "../../Enums/DestroyMode.js";
 import { Split } from "./Split.js";
 export class Destroy {
+    bounds;
+    mode;
+    split;
     constructor() {
         this.bounds = new DestroyBounds();
         this.mode = DestroyMode.none;

package/cjs/Options/Classes/DestroyBounds.js

@@ -1,5 +1,9 @@
 import { isNull, setRangeValue } from "@tsparticles/engine";
 export class DestroyBounds {
+    bottom;
+    left;
+    right;
+    top;
     load(data) {
         if (isNull(data)) {
             return;

package/cjs/Options/Classes/Split.js

@@ -2,6 +2,15 @@ import { OptionsColor, deepExtend, executeOnSingleOrMultiple, isNull, } from "@t
 import { SplitFactor } from "./SplitFactor.js";
 import { SplitRate } from "./SplitRate.js";
 export class Split {
+    count;
+    factor;
+    fillColor;
+    fillColorOffset;
+    particles;
+    rate;
+    sizeOffset;
+    strokeColor;
+    strokeColorOffset;
     constructor() {
         this.count = 1;
         this.factor = new SplitFactor();
@@ -12,8 +21,11 @@ export class Split {
         if (isNull(data)) {
             return;
         }
-        if (data.color !== undefined) {
-            this.color = OptionsColor.create(this.color, data.color);
+        if (data.fillColor !== undefined) {
+            this.fillColor = OptionsColor.create(this.fillColor, data.fillColor);
+        }
+        if (data.strokeColor !== undefined) {
+            this.strokeColor = OptionsColor.create(this.strokeColor, data.strokeColor);
         }
         if (data.count !== undefined) {
             this.count = data.count;
@@ -26,16 +38,28 @@ 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.fillColorOffset) {
+            this.fillColorOffset = this.fillColorOffset ?? {};
+            if (data.fillColorOffset.h !== undefined) {
+                this.fillColorOffset.h = data.fillColorOffset.h;
+            }
+            if (data.fillColorOffset.s !== undefined) {
+                this.fillColorOffset.s = data.fillColorOffset.s;
+            }
+            if (data.fillColorOffset.l !== undefined) {
+                this.fillColorOffset.l = data.fillColorOffset.l;
+            }
+        }
+        if (data.strokeColorOffset) {
+            this.strokeColorOffset = this.strokeColorOffset ?? {};
+            if (data.strokeColorOffset.h !== undefined) {
+                this.strokeColorOffset.h = data.strokeColorOffset.h;
             }
-            if (data.colorOffset.s !== undefined) {
-                this.colorOffset.s = data.colorOffset.s;
+            if (data.strokeColorOffset.s !== undefined) {
+                this.strokeColorOffset.s = data.strokeColorOffset.s;
             }
-            if (data.colorOffset.l !== undefined) {
-                this.colorOffset.l = data.colorOffset.l;
+            if (data.strokeColorOffset.l !== undefined) {
+                this.strokeColorOffset.l = data.strokeColorOffset.l;
             }
         }
     }

package/cjs/Utils.js

@@ -1,31 +1,58 @@
-import { PixelMode, getRangeValue, isNumber, itemFromSingleOrMultiple, loadParticlesOptions, randomInRangeValue, setRangeValue, } from "@tsparticles/engine";
+import { AnimatableColor, PixelMode, getRangeValue, identity, isNumber, itemFromSingleOrMultiple, loadParticlesOptions, randomInRangeValue, setRangeValue, } from "@tsparticles/engine";
 const defaultOffset = 0, minDestroySize = 0.5, defaultSplitCount = 0, increment = 1, unbreakableTime = 500, minSplitCount = 0;
-function addSplitParticle(engine, container, parent, splitParticlesOptions) {
+function addSplitParticle(pluginManager, container, parent, splitParticlesOptions) {
     const destroyOptions = parent.options.destroy;
     if (!destroyOptions) {
         return;
     }
-    const splitOptions = destroyOptions.split, options = loadParticlesOptions(engine, container, parent.options), factor = getRangeValue(splitOptions.factor.value), 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 ?? defaultOffset),
-                    s: parentColor.s + getRangeValue(splitOptions.colorOffset.s ?? defaultOffset),
-                    l: parentColor.l + getRangeValue(splitOptions.colorOffset.l ?? defaultOffset),
+    const splitOptions = destroyOptions.split, options = loadParticlesOptions(pluginManager, container, parent.options), fillOptions = itemFromSingleOrMultiple(options.fill), strokeOptions = itemFromSingleOrMultiple(options.stroke);
+    if (fillOptions?.enable) {
+        const fillColor = AnimatableColor.create(undefined, fillOptions.color), parentFillColor = parent.getFillColor();
+        if (fillColor.value) {
+            fillColor.load(splitOptions.fillColor);
+        }
+        else if (splitOptions.fillColorOffset && parentFillColor) {
+            fillColor.load({
+                value: {
+                    hsl: {
+                        h: parentFillColor.h + getRangeValue(splitOptions.fillColorOffset.h ?? defaultOffset),
+                        s: parentFillColor.s + getRangeValue(splitOptions.fillColorOffset.s ?? defaultOffset),
+                        l: parentFillColor.l + getRangeValue(splitOptions.fillColorOffset.l ?? defaultOffset),
+                    },
+                },
+            });
+        }
+        else {
+            fillColor.load({
+                value: {
+                    hsl: parent.getFillColor(),
                 },
-            },
-        });
+            });
+        }
     }
-    else {
-        options.color.load({
-            value: {
-                hsl: parent.getFillColor(),
-            },
-        });
+    if (strokeOptions?.width) {
+        const strokeColor = AnimatableColor.create(undefined, strokeOptions.color), parentStrokeColor = parent.getStrokeColor();
+        if (strokeColor.value) {
+            strokeColor.load(splitOptions.strokeColor);
+        }
+        else if (splitOptions.strokeColorOffset && parentStrokeColor) {
+            strokeColor.load({
+                value: {
+                    hsl: {
+                        h: parentStrokeColor.h + getRangeValue(splitOptions.strokeColorOffset.h ?? defaultOffset),
+                        s: parentStrokeColor.s + getRangeValue(splitOptions.strokeColorOffset.s ?? defaultOffset),
+                        l: parentStrokeColor.l + getRangeValue(splitOptions.strokeColorOffset.l ?? defaultOffset),
+                    },
+                },
+            });
+        }
+        else {
+            strokeColor.load({
+                value: {
+                    hsl: parent.getStrokeColor(),
+                },
+            });
+        }
     }
     options.move.load({
         center: {
@@ -34,12 +61,13 @@ function addSplitParticle(engine, container, parent, splitParticlesOptions) {
             mode: PixelMode.precise,
         },
     });
+    const factor = identity / getRangeValue(splitOptions.factor.value);
     if (isNumber(options.size.value)) {
-        options.size.value /= factor;
+        options.size.value *= factor;
     }
     else {
-        options.size.value.min /= factor;
-        options.size.value.max /= factor;
+        options.size.value.min *= factor;
+        options.size.value.max *= factor;
     }
     options.load(splitParticlesOptions);
     const offset = splitOptions.sizeOffset ? setRangeValue(-parent.size.value, parent.size.value) : defaultOffset, position = {
@@ -53,24 +81,24 @@ function addSplitParticle(engine, container, parent, splitParticlesOptions) {
         particle.velocity.length = randomInRangeValue(setRangeValue(parent.velocity.length, particle.velocity.length));
         particle.splitCount = (parent.splitCount ?? defaultSplitCount) + increment;
         particle.unbreakable = true;
-        setTimeout(() => {
-            particle.unbreakable = false;
-        }, unbreakableTime);
+        particle.unbreakableUntil = performance.now() + unbreakableTime;
         return true;
     });
 }
-export function split(engine, container, particle) {
+export function split(pluginManager, container, particle) {
     const destroyOptions = particle.options.destroy;
     if (!destroyOptions) {
         return;
     }
     const splitOptions = destroyOptions.split;
-    if (splitOptions.count >= minSplitCount &&
-        (particle.splitCount === undefined || particle.splitCount++ > splitOptions.count)) {
-        return;
+    if (splitOptions.count >= minSplitCount) {
+        if (particle.splitCount === undefined || particle.splitCount > splitOptions.count) {
+            return;
+        }
+        particle.splitCount++;
     }
     const rate = getRangeValue(splitOptions.rate.value), particlesSplitOptions = itemFromSingleOrMultiple(splitOptions.particles);
     for (let i = 0; i < rate; i++) {
-        addSplitParticle(engine, container, particle, particlesSplitOptions);
+        addSplitParticle(pluginManager, container, particle, particlesSplitOptions);
     }
 }

package/cjs/index.js

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