@tsparticles/updater-destroy 3.0.0-alpha.1 → 3.0.0-beta.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +16 -12
- package/browser/DestroyUpdater.js +15 -72
- package/browser/Options/Classes/Destroy.js +2 -2
- package/browser/Options/Classes/Split.js +18 -3
- package/browser/Types.js +1 -0
- package/browser/Utils.js +74 -0
- package/browser/index.js +3 -3
- package/browser/package.json +1 -0
- package/cjs/DestroyUpdater.js +15 -72
- package/cjs/Options/Classes/Destroy.js +4 -4
- package/cjs/Options/Classes/Split.js +19 -4
- package/cjs/Types.js +2 -0
- package/cjs/Utils.js +78 -0
- package/cjs/index.js +3 -14
- package/cjs/package.json +1 -0
- package/esm/DestroyUpdater.js +15 -72
- package/esm/Options/Classes/Destroy.js +2 -2
- package/esm/Options/Classes/Split.js +18 -3
- package/esm/Types.js +1 -0
- package/esm/Utils.js +74 -0
- package/esm/index.js +3 -3
- package/esm/package.json +1 -0
- package/package.json +19 -6
- package/report.html +4 -4
- package/tsparticles.updater.destroy.js +118 -76
- package/tsparticles.updater.destroy.min.js +1 -1
- package/tsparticles.updater.destroy.min.js.LICENSE.txt +1 -8
- package/types/DestroyUpdater.d.ts +2 -17
- package/types/Options/Classes/Destroy.d.ts +4 -4
- package/types/Options/Classes/DestroyBounds.d.ts +2 -2
- package/types/Options/Classes/Split.d.ts +6 -4
- package/types/Options/Interfaces/IDestroy.d.ts +3 -3
- package/types/Options/Interfaces/ISplit.d.ts +3 -1
- package/types/Types.d.ts +14 -0
- package/types/Utils.d.ts +3 -0
- package/types/index.d.ts +1 -1
- package/umd/DestroyUpdater.js +16 -73
- package/umd/Options/Classes/Destroy.js +5 -5
- package/umd/Options/Classes/Split.js +20 -5
- package/umd/Types.js +12 -0
- package/umd/Utils.js +88 -0
- package/umd/index.js +4 -4
package/README.md
CHANGED
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
|
|
3
3
|
# tsParticles Destroy Updater
|
|
4
4
|
|
|
5
|
-
[](https://www.jsdelivr.com/package/npm/@tsparticles/updater-destroy)
|
|
6
|
+
[](https://www.npmjs.com/package/@tsparticles/updater-destroy)
|
|
7
|
+
[](https://www.npmjs.com/package/@tsparticles/updater-destroy) [](https://github.com/sponsors/matteobruni)
|
|
8
8
|
|
|
9
9
|
[tsParticles](https://github.com/matteobruni/tsparticles) updater plugin for destroy animations.
|
|
10
10
|
|
|
@@ -26,7 +26,7 @@ Once the scripts are loaded you can set up `tsParticles` and the updater plugin
|
|
|
26
26
|
|
|
27
27
|
```javascript
|
|
28
28
|
(async () => {
|
|
29
|
-
await loadDestroyUpdater();
|
|
29
|
+
await loadDestroyUpdater(tsParticles);
|
|
30
30
|
|
|
31
31
|
await tsParticles.load({
|
|
32
32
|
id: "tsparticles",
|
|
@@ -42,29 +42,33 @@ Once the scripts are loaded you can set up `tsParticles` and the updater plugin
|
|
|
42
42
|
This package is compatible also with ES or CommonJS modules, firstly this needs to be installed, like this:
|
|
43
43
|
|
|
44
44
|
```shell
|
|
45
|
-
$ npm install tsparticles
|
|
45
|
+
$ npm install @tsparticles/updater-destroy
|
|
46
46
|
```
|
|
47
47
|
|
|
48
48
|
or
|
|
49
49
|
|
|
50
50
|
```shell
|
|
51
|
-
$ yarn add tsparticles
|
|
51
|
+
$ yarn add @tsparticles/updater-destroy
|
|
52
52
|
```
|
|
53
53
|
|
|
54
54
|
Then you need to import it in the app, like this:
|
|
55
55
|
|
|
56
56
|
```javascript
|
|
57
|
-
const { tsParticles } = require("tsparticles
|
|
58
|
-
const { loadDestroyUpdater } = require("tsparticles
|
|
57
|
+
const { tsParticles } = require("@tsparticles/engine");
|
|
58
|
+
const { loadDestroyUpdater } = require("@tsparticles/updater-destroy");
|
|
59
59
|
|
|
60
|
-
|
|
60
|
+
(async () => {
|
|
61
|
+
await loadDestroyUpdater(tsParticles);
|
|
62
|
+
})();
|
|
61
63
|
```
|
|
62
64
|
|
|
63
65
|
or
|
|
64
66
|
|
|
65
67
|
```javascript
|
|
66
|
-
import { tsParticles } from "tsparticles
|
|
67
|
-
import { loadDestroyUpdater } from "tsparticles
|
|
68
|
+
import { tsParticles } from "@tsparticles/engine";
|
|
69
|
+
import { loadDestroyUpdater } from "@tsparticles/updater-destroy";
|
|
68
70
|
|
|
69
|
-
|
|
71
|
+
(async () => {
|
|
72
|
+
await loadDestroyUpdater(tsParticles);
|
|
73
|
+
})();
|
|
70
74
|
```
|
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
import { getRangeValue,
|
|
2
|
-
import { Destroy } from "./Options/Classes/Destroy";
|
|
1
|
+
import { getRangeValue, } from "@tsparticles/engine";
|
|
2
|
+
import { Destroy } from "./Options/Classes/Destroy.js";
|
|
3
|
+
import { split } from "./Utils.js";
|
|
3
4
|
export class DestroyUpdater {
|
|
4
5
|
constructor(engine, container) {
|
|
5
6
|
this.engine = engine;
|
|
@@ -11,21 +12,22 @@ export class DestroyUpdater {
|
|
|
11
12
|
return;
|
|
12
13
|
}
|
|
13
14
|
particle.splitCount = 0;
|
|
14
|
-
const
|
|
15
|
+
const destroyBoundsOptions = destroyOptions.bounds;
|
|
15
16
|
if (!particle.destroyBounds) {
|
|
16
17
|
particle.destroyBounds = {};
|
|
17
18
|
}
|
|
18
|
-
|
|
19
|
-
|
|
19
|
+
const { bottom, left, right, top } = destroyBoundsOptions, { destroyBounds } = particle, canvasSize = container.canvas.size;
|
|
20
|
+
if (bottom) {
|
|
21
|
+
destroyBounds.bottom = (getRangeValue(bottom) * canvasSize.height) / 100;
|
|
20
22
|
}
|
|
21
|
-
if (
|
|
22
|
-
|
|
23
|
+
if (left) {
|
|
24
|
+
destroyBounds.left = (getRangeValue(left) * canvasSize.width) / 100;
|
|
23
25
|
}
|
|
24
|
-
if (
|
|
25
|
-
|
|
26
|
+
if (right) {
|
|
27
|
+
destroyBounds.right = (getRangeValue(right) * canvasSize.width) / 100;
|
|
26
28
|
}
|
|
27
|
-
if (
|
|
28
|
-
|
|
29
|
+
if (top) {
|
|
30
|
+
destroyBounds.top = (getRangeValue(top) * canvasSize.height) / 100;
|
|
29
31
|
}
|
|
30
32
|
}
|
|
31
33
|
isEnabled(particle) {
|
|
@@ -36,7 +38,7 @@ export class DestroyUpdater {
|
|
|
36
38
|
options.destroy = new Destroy();
|
|
37
39
|
}
|
|
38
40
|
for (const source of sources) {
|
|
39
|
-
options.destroy.load(source
|
|
41
|
+
options.destroy.load(source?.destroy);
|
|
40
42
|
}
|
|
41
43
|
}
|
|
42
44
|
particleDestroyed(particle, override) {
|
|
@@ -45,7 +47,7 @@ export class DestroyUpdater {
|
|
|
45
47
|
}
|
|
46
48
|
const destroyOptions = particle.options.destroy;
|
|
47
49
|
if (destroyOptions && destroyOptions.mode === "split") {
|
|
48
|
-
this.
|
|
50
|
+
split(this.engine, this.container, particle);
|
|
49
51
|
}
|
|
50
52
|
}
|
|
51
53
|
update(particle) {
|
|
@@ -63,63 +65,4 @@ export class DestroyUpdater {
|
|
|
63
65
|
particle.destroy();
|
|
64
66
|
}
|
|
65
67
|
}
|
|
66
|
-
addSplitParticle(parent, splitParticlesOptions) {
|
|
67
|
-
const destroyOptions = parent.options.destroy;
|
|
68
|
-
if (!destroyOptions) {
|
|
69
|
-
return;
|
|
70
|
-
}
|
|
71
|
-
const splitOptions = destroyOptions.split, options = loadParticlesOptions(this.engine, this.container, parent.options), factor = getValue(splitOptions.factor);
|
|
72
|
-
options.color.load({
|
|
73
|
-
value: {
|
|
74
|
-
hsl: parent.getFillColor(),
|
|
75
|
-
},
|
|
76
|
-
});
|
|
77
|
-
options.move.load({
|
|
78
|
-
center: {
|
|
79
|
-
x: parent.position.x,
|
|
80
|
-
y: parent.position.y,
|
|
81
|
-
mode: "precise",
|
|
82
|
-
},
|
|
83
|
-
});
|
|
84
|
-
if (typeof options.size.value === "number") {
|
|
85
|
-
options.size.value /= factor;
|
|
86
|
-
}
|
|
87
|
-
else {
|
|
88
|
-
options.size.value.min /= factor;
|
|
89
|
-
options.size.value.max /= factor;
|
|
90
|
-
}
|
|
91
|
-
options.load(splitParticlesOptions);
|
|
92
|
-
const offset = splitOptions.sizeOffset ? setRangeValue(-parent.size.value, parent.size.value) : 0, position = {
|
|
93
|
-
x: parent.position.x + randomInRange(offset),
|
|
94
|
-
y: parent.position.y + randomInRange(offset),
|
|
95
|
-
};
|
|
96
|
-
return this.container.particles.addParticle(position, options, parent.group, (particle) => {
|
|
97
|
-
var _a;
|
|
98
|
-
if (particle.size.value < 0.5) {
|
|
99
|
-
return false;
|
|
100
|
-
}
|
|
101
|
-
particle.velocity.length = randomInRange(setRangeValue(parent.velocity.length, particle.velocity.length));
|
|
102
|
-
particle.splitCount = ((_a = parent.splitCount) !== null && _a !== void 0 ? _a : 0) + 1;
|
|
103
|
-
particle.unbreakable = true;
|
|
104
|
-
setTimeout(() => {
|
|
105
|
-
particle.unbreakable = false;
|
|
106
|
-
}, 500);
|
|
107
|
-
return true;
|
|
108
|
-
});
|
|
109
|
-
}
|
|
110
|
-
split(particle) {
|
|
111
|
-
const destroyOptions = particle.options.destroy;
|
|
112
|
-
if (!destroyOptions) {
|
|
113
|
-
return;
|
|
114
|
-
}
|
|
115
|
-
const splitOptions = destroyOptions.split;
|
|
116
|
-
if (splitOptions.count >= 0 &&
|
|
117
|
-
(particle.splitCount === undefined || particle.splitCount++ > splitOptions.count)) {
|
|
118
|
-
return;
|
|
119
|
-
}
|
|
120
|
-
const rate = getValue(splitOptions.rate), particlesSplitOptions = itemFromSingleOrMultiple(splitOptions.particles);
|
|
121
|
-
for (let i = 0; i < rate; i++) {
|
|
122
|
-
this.addSplitParticle(particle, particlesSplitOptions);
|
|
123
|
-
}
|
|
124
|
-
}
|
|
125
68
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { deepExtend, executeOnSingleOrMultiple } from "@tsparticles/engine";
|
|
2
|
-
import { SplitFactor } from "./SplitFactor";
|
|
3
|
-
import { SplitRate } from "./SplitRate";
|
|
1
|
+
import { OptionsColor, deepExtend, executeOnSingleOrMultiple, } from "@tsparticles/engine";
|
|
2
|
+
import { SplitFactor } from "./SplitFactor.js";
|
|
3
|
+
import { SplitRate } from "./SplitRate.js";
|
|
4
4
|
export class Split {
|
|
5
5
|
constructor() {
|
|
6
6
|
this.count = 1;
|
|
@@ -12,6 +12,9 @@ export class Split {
|
|
|
12
12
|
if (!data) {
|
|
13
13
|
return;
|
|
14
14
|
}
|
|
15
|
+
if (data.color !== undefined) {
|
|
16
|
+
this.color = OptionsColor.create(this.color, data.color);
|
|
17
|
+
}
|
|
15
18
|
if (data.count !== undefined) {
|
|
16
19
|
this.count = data.count;
|
|
17
20
|
}
|
|
@@ -23,5 +26,17 @@ export class Split {
|
|
|
23
26
|
if (data.sizeOffset !== undefined) {
|
|
24
27
|
this.sizeOffset = data.sizeOffset;
|
|
25
28
|
}
|
|
29
|
+
if (data.colorOffset) {
|
|
30
|
+
this.colorOffset = this.colorOffset ?? {};
|
|
31
|
+
if (data.colorOffset.h !== undefined) {
|
|
32
|
+
this.colorOffset.h = data.colorOffset.h;
|
|
33
|
+
}
|
|
34
|
+
if (data.colorOffset.s !== undefined) {
|
|
35
|
+
this.colorOffset.s = data.colorOffset.s;
|
|
36
|
+
}
|
|
37
|
+
if (data.colorOffset.l !== undefined) {
|
|
38
|
+
this.colorOffset.l = data.colorOffset.l;
|
|
39
|
+
}
|
|
40
|
+
}
|
|
26
41
|
}
|
|
27
42
|
}
|
package/browser/Types.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/browser/Utils.js
ADDED
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
import { getRangeValue, getValue, isNumber, itemFromSingleOrMultiple, loadParticlesOptions, randomInRange, setRangeValue, } from "@tsparticles/engine";
|
|
2
|
+
function addSplitParticle(engine, container, parent, splitParticlesOptions) {
|
|
3
|
+
const destroyOptions = parent.options.destroy;
|
|
4
|
+
if (!destroyOptions) {
|
|
5
|
+
return;
|
|
6
|
+
}
|
|
7
|
+
const splitOptions = destroyOptions.split, options = loadParticlesOptions(engine, container, parent.options), factor = getValue(splitOptions.factor), parentColor = parent.getFillColor();
|
|
8
|
+
if (splitOptions.color) {
|
|
9
|
+
options.color.load(splitOptions.color);
|
|
10
|
+
}
|
|
11
|
+
else if (splitOptions.colorOffset && parentColor) {
|
|
12
|
+
options.color.load({
|
|
13
|
+
value: {
|
|
14
|
+
hsl: {
|
|
15
|
+
h: parentColor.h + getRangeValue(splitOptions.colorOffset.h ?? 0),
|
|
16
|
+
s: parentColor.s + getRangeValue(splitOptions.colorOffset.s ?? 0),
|
|
17
|
+
l: parentColor.l + getRangeValue(splitOptions.colorOffset.l ?? 0),
|
|
18
|
+
},
|
|
19
|
+
},
|
|
20
|
+
});
|
|
21
|
+
}
|
|
22
|
+
else {
|
|
23
|
+
options.color.load({
|
|
24
|
+
value: {
|
|
25
|
+
hsl: parent.getFillColor(),
|
|
26
|
+
},
|
|
27
|
+
});
|
|
28
|
+
}
|
|
29
|
+
options.move.load({
|
|
30
|
+
center: {
|
|
31
|
+
x: parent.position.x,
|
|
32
|
+
y: parent.position.y,
|
|
33
|
+
mode: "precise",
|
|
34
|
+
},
|
|
35
|
+
});
|
|
36
|
+
if (isNumber(options.size.value)) {
|
|
37
|
+
options.size.value /= factor;
|
|
38
|
+
}
|
|
39
|
+
else {
|
|
40
|
+
options.size.value.min /= factor;
|
|
41
|
+
options.size.value.max /= factor;
|
|
42
|
+
}
|
|
43
|
+
options.load(splitParticlesOptions);
|
|
44
|
+
const offset = splitOptions.sizeOffset ? setRangeValue(-parent.size.value, parent.size.value) : 0, position = {
|
|
45
|
+
x: parent.position.x + randomInRange(offset),
|
|
46
|
+
y: parent.position.y + randomInRange(offset),
|
|
47
|
+
};
|
|
48
|
+
return container.particles.addParticle(position, options, parent.group, (particle) => {
|
|
49
|
+
if (particle.size.value < 0.5) {
|
|
50
|
+
return false;
|
|
51
|
+
}
|
|
52
|
+
particle.velocity.length = randomInRange(setRangeValue(parent.velocity.length, particle.velocity.length));
|
|
53
|
+
particle.splitCount = (parent.splitCount ?? 0) + 1;
|
|
54
|
+
particle.unbreakable = true;
|
|
55
|
+
setTimeout(() => {
|
|
56
|
+
particle.unbreakable = false;
|
|
57
|
+
}, 500);
|
|
58
|
+
return true;
|
|
59
|
+
});
|
|
60
|
+
}
|
|
61
|
+
export function split(engine, container, particle) {
|
|
62
|
+
const destroyOptions = particle.options.destroy;
|
|
63
|
+
if (!destroyOptions) {
|
|
64
|
+
return;
|
|
65
|
+
}
|
|
66
|
+
const splitOptions = destroyOptions.split;
|
|
67
|
+
if (splitOptions.count >= 0 && (particle.splitCount === undefined || particle.splitCount++ > splitOptions.count)) {
|
|
68
|
+
return;
|
|
69
|
+
}
|
|
70
|
+
const rate = getValue(splitOptions.rate), particlesSplitOptions = itemFromSingleOrMultiple(splitOptions.particles);
|
|
71
|
+
for (let i = 0; i < rate; i++) {
|
|
72
|
+
addSplitParticle(engine, container, particle, particlesSplitOptions);
|
|
73
|
+
}
|
|
74
|
+
}
|
package/browser/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { DestroyUpdater } from "./DestroyUpdater";
|
|
2
|
-
export async function loadDestroyUpdater(engine) {
|
|
3
|
-
await engine.addParticleUpdater("destroy", (container) => new DestroyUpdater(engine, container));
|
|
1
|
+
import { DestroyUpdater } from "./DestroyUpdater.js";
|
|
2
|
+
export async function loadDestroyUpdater(engine, refresh = true) {
|
|
3
|
+
await engine.addParticleUpdater("destroy", (container) => new DestroyUpdater(engine, container), refresh);
|
|
4
4
|
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{ "type": "module" }
|
package/cjs/DestroyUpdater.js
CHANGED
|
@@ -2,7 +2,8 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.DestroyUpdater = void 0;
|
|
4
4
|
const engine_1 = require("@tsparticles/engine");
|
|
5
|
-
const
|
|
5
|
+
const Destroy_js_1 = require("./Options/Classes/Destroy.js");
|
|
6
|
+
const Utils_js_1 = require("./Utils.js");
|
|
6
7
|
class DestroyUpdater {
|
|
7
8
|
constructor(engine, container) {
|
|
8
9
|
this.engine = engine;
|
|
@@ -14,21 +15,22 @@ class DestroyUpdater {
|
|
|
14
15
|
return;
|
|
15
16
|
}
|
|
16
17
|
particle.splitCount = 0;
|
|
17
|
-
const
|
|
18
|
+
const destroyBoundsOptions = destroyOptions.bounds;
|
|
18
19
|
if (!particle.destroyBounds) {
|
|
19
20
|
particle.destroyBounds = {};
|
|
20
21
|
}
|
|
21
|
-
|
|
22
|
-
|
|
22
|
+
const { bottom, left, right, top } = destroyBoundsOptions, { destroyBounds } = particle, canvasSize = container.canvas.size;
|
|
23
|
+
if (bottom) {
|
|
24
|
+
destroyBounds.bottom = ((0, engine_1.getRangeValue)(bottom) * canvasSize.height) / 100;
|
|
23
25
|
}
|
|
24
|
-
if (
|
|
25
|
-
|
|
26
|
+
if (left) {
|
|
27
|
+
destroyBounds.left = ((0, engine_1.getRangeValue)(left) * canvasSize.width) / 100;
|
|
26
28
|
}
|
|
27
|
-
if (
|
|
28
|
-
|
|
29
|
+
if (right) {
|
|
30
|
+
destroyBounds.right = ((0, engine_1.getRangeValue)(right) * canvasSize.width) / 100;
|
|
29
31
|
}
|
|
30
|
-
if (
|
|
31
|
-
|
|
32
|
+
if (top) {
|
|
33
|
+
destroyBounds.top = ((0, engine_1.getRangeValue)(top) * canvasSize.height) / 100;
|
|
32
34
|
}
|
|
33
35
|
}
|
|
34
36
|
isEnabled(particle) {
|
|
@@ -36,10 +38,10 @@ class DestroyUpdater {
|
|
|
36
38
|
}
|
|
37
39
|
loadOptions(options, ...sources) {
|
|
38
40
|
if (!options.destroy) {
|
|
39
|
-
options.destroy = new
|
|
41
|
+
options.destroy = new Destroy_js_1.Destroy();
|
|
40
42
|
}
|
|
41
43
|
for (const source of sources) {
|
|
42
|
-
options.destroy.load(source
|
|
44
|
+
options.destroy.load(source?.destroy);
|
|
43
45
|
}
|
|
44
46
|
}
|
|
45
47
|
particleDestroyed(particle, override) {
|
|
@@ -48,7 +50,7 @@ class DestroyUpdater {
|
|
|
48
50
|
}
|
|
49
51
|
const destroyOptions = particle.options.destroy;
|
|
50
52
|
if (destroyOptions && destroyOptions.mode === "split") {
|
|
51
|
-
|
|
53
|
+
(0, Utils_js_1.split)(this.engine, this.container, particle);
|
|
52
54
|
}
|
|
53
55
|
}
|
|
54
56
|
update(particle) {
|
|
@@ -66,64 +68,5 @@ class DestroyUpdater {
|
|
|
66
68
|
particle.destroy();
|
|
67
69
|
}
|
|
68
70
|
}
|
|
69
|
-
addSplitParticle(parent, splitParticlesOptions) {
|
|
70
|
-
const destroyOptions = parent.options.destroy;
|
|
71
|
-
if (!destroyOptions) {
|
|
72
|
-
return;
|
|
73
|
-
}
|
|
74
|
-
const splitOptions = destroyOptions.split, options = (0, engine_1.loadParticlesOptions)(this.engine, this.container, parent.options), factor = (0, engine_1.getValue)(splitOptions.factor);
|
|
75
|
-
options.color.load({
|
|
76
|
-
value: {
|
|
77
|
-
hsl: parent.getFillColor(),
|
|
78
|
-
},
|
|
79
|
-
});
|
|
80
|
-
options.move.load({
|
|
81
|
-
center: {
|
|
82
|
-
x: parent.position.x,
|
|
83
|
-
y: parent.position.y,
|
|
84
|
-
mode: "precise",
|
|
85
|
-
},
|
|
86
|
-
});
|
|
87
|
-
if (typeof options.size.value === "number") {
|
|
88
|
-
options.size.value /= factor;
|
|
89
|
-
}
|
|
90
|
-
else {
|
|
91
|
-
options.size.value.min /= factor;
|
|
92
|
-
options.size.value.max /= factor;
|
|
93
|
-
}
|
|
94
|
-
options.load(splitParticlesOptions);
|
|
95
|
-
const offset = splitOptions.sizeOffset ? (0, engine_1.setRangeValue)(-parent.size.value, parent.size.value) : 0, position = {
|
|
96
|
-
x: parent.position.x + (0, engine_1.randomInRange)(offset),
|
|
97
|
-
y: parent.position.y + (0, engine_1.randomInRange)(offset),
|
|
98
|
-
};
|
|
99
|
-
return this.container.particles.addParticle(position, options, parent.group, (particle) => {
|
|
100
|
-
var _a;
|
|
101
|
-
if (particle.size.value < 0.5) {
|
|
102
|
-
return false;
|
|
103
|
-
}
|
|
104
|
-
particle.velocity.length = (0, engine_1.randomInRange)((0, engine_1.setRangeValue)(parent.velocity.length, particle.velocity.length));
|
|
105
|
-
particle.splitCount = ((_a = parent.splitCount) !== null && _a !== void 0 ? _a : 0) + 1;
|
|
106
|
-
particle.unbreakable = true;
|
|
107
|
-
setTimeout(() => {
|
|
108
|
-
particle.unbreakable = false;
|
|
109
|
-
}, 500);
|
|
110
|
-
return true;
|
|
111
|
-
});
|
|
112
|
-
}
|
|
113
|
-
split(particle) {
|
|
114
|
-
const destroyOptions = particle.options.destroy;
|
|
115
|
-
if (!destroyOptions) {
|
|
116
|
-
return;
|
|
117
|
-
}
|
|
118
|
-
const splitOptions = destroyOptions.split;
|
|
119
|
-
if (splitOptions.count >= 0 &&
|
|
120
|
-
(particle.splitCount === undefined || particle.splitCount++ > splitOptions.count)) {
|
|
121
|
-
return;
|
|
122
|
-
}
|
|
123
|
-
const rate = (0, engine_1.getValue)(splitOptions.rate), particlesSplitOptions = (0, engine_1.itemFromSingleOrMultiple)(splitOptions.particles);
|
|
124
|
-
for (let i = 0; i < rate; i++) {
|
|
125
|
-
this.addSplitParticle(particle, particlesSplitOptions);
|
|
126
|
-
}
|
|
127
|
-
}
|
|
128
71
|
}
|
|
129
72
|
exports.DestroyUpdater = DestroyUpdater;
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.Destroy = void 0;
|
|
4
|
-
const
|
|
5
|
-
const
|
|
4
|
+
const DestroyBounds_js_1 = require("./DestroyBounds.js");
|
|
5
|
+
const Split_js_1 = require("./Split.js");
|
|
6
6
|
class Destroy {
|
|
7
7
|
constructor() {
|
|
8
|
-
this.bounds = new
|
|
8
|
+
this.bounds = new DestroyBounds_js_1.DestroyBounds();
|
|
9
9
|
this.mode = "none";
|
|
10
|
-
this.split = new
|
|
10
|
+
this.split = new Split_js_1.Split();
|
|
11
11
|
}
|
|
12
12
|
load(data) {
|
|
13
13
|
if (!data) {
|
|
@@ -2,19 +2,22 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.Split = void 0;
|
|
4
4
|
const engine_1 = require("@tsparticles/engine");
|
|
5
|
-
const
|
|
6
|
-
const
|
|
5
|
+
const SplitFactor_js_1 = require("./SplitFactor.js");
|
|
6
|
+
const SplitRate_js_1 = require("./SplitRate.js");
|
|
7
7
|
class Split {
|
|
8
8
|
constructor() {
|
|
9
9
|
this.count = 1;
|
|
10
|
-
this.factor = new
|
|
11
|
-
this.rate = new
|
|
10
|
+
this.factor = new SplitFactor_js_1.SplitFactor();
|
|
11
|
+
this.rate = new SplitRate_js_1.SplitRate();
|
|
12
12
|
this.sizeOffset = true;
|
|
13
13
|
}
|
|
14
14
|
load(data) {
|
|
15
15
|
if (!data) {
|
|
16
16
|
return;
|
|
17
17
|
}
|
|
18
|
+
if (data.color !== undefined) {
|
|
19
|
+
this.color = engine_1.OptionsColor.create(this.color, data.color);
|
|
20
|
+
}
|
|
18
21
|
if (data.count !== undefined) {
|
|
19
22
|
this.count = data.count;
|
|
20
23
|
}
|
|
@@ -26,6 +29,18 @@ class Split {
|
|
|
26
29
|
if (data.sizeOffset !== undefined) {
|
|
27
30
|
this.sizeOffset = data.sizeOffset;
|
|
28
31
|
}
|
|
32
|
+
if (data.colorOffset) {
|
|
33
|
+
this.colorOffset = this.colorOffset ?? {};
|
|
34
|
+
if (data.colorOffset.h !== undefined) {
|
|
35
|
+
this.colorOffset.h = data.colorOffset.h;
|
|
36
|
+
}
|
|
37
|
+
if (data.colorOffset.s !== undefined) {
|
|
38
|
+
this.colorOffset.s = data.colorOffset.s;
|
|
39
|
+
}
|
|
40
|
+
if (data.colorOffset.l !== undefined) {
|
|
41
|
+
this.colorOffset.l = data.colorOffset.l;
|
|
42
|
+
}
|
|
43
|
+
}
|
|
29
44
|
}
|
|
30
45
|
}
|
|
31
46
|
exports.Split = Split;
|
package/cjs/Types.js
ADDED
package/cjs/Utils.js
ADDED
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.split = void 0;
|
|
4
|
+
const engine_1 = require("@tsparticles/engine");
|
|
5
|
+
function addSplitParticle(engine, container, parent, splitParticlesOptions) {
|
|
6
|
+
const destroyOptions = parent.options.destroy;
|
|
7
|
+
if (!destroyOptions) {
|
|
8
|
+
return;
|
|
9
|
+
}
|
|
10
|
+
const splitOptions = destroyOptions.split, options = (0, engine_1.loadParticlesOptions)(engine, container, parent.options), factor = (0, engine_1.getValue)(splitOptions.factor), parentColor = parent.getFillColor();
|
|
11
|
+
if (splitOptions.color) {
|
|
12
|
+
options.color.load(splitOptions.color);
|
|
13
|
+
}
|
|
14
|
+
else if (splitOptions.colorOffset && parentColor) {
|
|
15
|
+
options.color.load({
|
|
16
|
+
value: {
|
|
17
|
+
hsl: {
|
|
18
|
+
h: parentColor.h + (0, engine_1.getRangeValue)(splitOptions.colorOffset.h ?? 0),
|
|
19
|
+
s: parentColor.s + (0, engine_1.getRangeValue)(splitOptions.colorOffset.s ?? 0),
|
|
20
|
+
l: parentColor.l + (0, engine_1.getRangeValue)(splitOptions.colorOffset.l ?? 0),
|
|
21
|
+
},
|
|
22
|
+
},
|
|
23
|
+
});
|
|
24
|
+
}
|
|
25
|
+
else {
|
|
26
|
+
options.color.load({
|
|
27
|
+
value: {
|
|
28
|
+
hsl: parent.getFillColor(),
|
|
29
|
+
},
|
|
30
|
+
});
|
|
31
|
+
}
|
|
32
|
+
options.move.load({
|
|
33
|
+
center: {
|
|
34
|
+
x: parent.position.x,
|
|
35
|
+
y: parent.position.y,
|
|
36
|
+
mode: "precise",
|
|
37
|
+
},
|
|
38
|
+
});
|
|
39
|
+
if ((0, engine_1.isNumber)(options.size.value)) {
|
|
40
|
+
options.size.value /= factor;
|
|
41
|
+
}
|
|
42
|
+
else {
|
|
43
|
+
options.size.value.min /= factor;
|
|
44
|
+
options.size.value.max /= factor;
|
|
45
|
+
}
|
|
46
|
+
options.load(splitParticlesOptions);
|
|
47
|
+
const offset = splitOptions.sizeOffset ? (0, engine_1.setRangeValue)(-parent.size.value, parent.size.value) : 0, position = {
|
|
48
|
+
x: parent.position.x + (0, engine_1.randomInRange)(offset),
|
|
49
|
+
y: parent.position.y + (0, engine_1.randomInRange)(offset),
|
|
50
|
+
};
|
|
51
|
+
return container.particles.addParticle(position, options, parent.group, (particle) => {
|
|
52
|
+
if (particle.size.value < 0.5) {
|
|
53
|
+
return false;
|
|
54
|
+
}
|
|
55
|
+
particle.velocity.length = (0, engine_1.randomInRange)((0, engine_1.setRangeValue)(parent.velocity.length, particle.velocity.length));
|
|
56
|
+
particle.splitCount = (parent.splitCount ?? 0) + 1;
|
|
57
|
+
particle.unbreakable = true;
|
|
58
|
+
setTimeout(() => {
|
|
59
|
+
particle.unbreakable = false;
|
|
60
|
+
}, 500);
|
|
61
|
+
return true;
|
|
62
|
+
});
|
|
63
|
+
}
|
|
64
|
+
function split(engine, container, particle) {
|
|
65
|
+
const destroyOptions = particle.options.destroy;
|
|
66
|
+
if (!destroyOptions) {
|
|
67
|
+
return;
|
|
68
|
+
}
|
|
69
|
+
const splitOptions = destroyOptions.split;
|
|
70
|
+
if (splitOptions.count >= 0 && (particle.splitCount === undefined || particle.splitCount++ > splitOptions.count)) {
|
|
71
|
+
return;
|
|
72
|
+
}
|
|
73
|
+
const rate = (0, engine_1.getValue)(splitOptions.rate), particlesSplitOptions = (0, engine_1.itemFromSingleOrMultiple)(splitOptions.particles);
|
|
74
|
+
for (let i = 0; i < rate; i++) {
|
|
75
|
+
addSplitParticle(engine, container, particle, particlesSplitOptions);
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
exports.split = split;
|
package/cjs/index.js
CHANGED
|
@@ -1,19 +1,8 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
3
|
-
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
4
|
-
return new (P || (P = Promise))(function (resolve, reject) {
|
|
5
|
-
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
6
|
-
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
7
|
-
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
8
|
-
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
9
|
-
});
|
|
10
|
-
};
|
|
11
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
12
3
|
exports.loadDestroyUpdater = void 0;
|
|
13
|
-
const
|
|
14
|
-
function loadDestroyUpdater(engine) {
|
|
15
|
-
|
|
16
|
-
yield engine.addParticleUpdater("destroy", (container) => new DestroyUpdater_1.DestroyUpdater(engine, container));
|
|
17
|
-
});
|
|
4
|
+
const DestroyUpdater_js_1 = require("./DestroyUpdater.js");
|
|
5
|
+
async function loadDestroyUpdater(engine, refresh = true) {
|
|
6
|
+
await engine.addParticleUpdater("destroy", (container) => new DestroyUpdater_js_1.DestroyUpdater(engine, container), refresh);
|
|
18
7
|
}
|
|
19
8
|
exports.loadDestroyUpdater = loadDestroyUpdater;
|
package/cjs/package.json
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{ "type": "commonjs" }
|