tsparticles 2.0.0-beta.4 → 2.0.2
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/107.js +41 -40
- package/README.md +12 -12
- package/bundle.js +1 -1
- package/index.d.ts +2 -2
- package/index.js +14 -14
- package/package.json +10 -10
- package/report.html +2 -2
- package/tsparticles.bundle.js +16496 -18867
- package/tsparticles.bundle.min.js +2 -2
- package/tsparticles.js +30 -30
- package/tsparticles.min.js +2 -2
package/107.js
CHANGED
|
@@ -4,12 +4,12 @@
|
|
|
4
4
|
* Demo / Generator : https://particles.js.org/
|
|
5
5
|
* GitHub : https://www.github.com/matteobruni/tsparticles
|
|
6
6
|
* How to use? : Check the GitHub README
|
|
7
|
-
* v2.0.
|
|
7
|
+
* v2.0.2
|
|
8
8
|
*/
|
|
9
9
|
"use strict";
|
|
10
10
|
(this["webpackChunktsparticles"] = this["webpackChunktsparticles"] || []).push([[107],{
|
|
11
11
|
|
|
12
|
-
/***/
|
|
12
|
+
/***/ 107:
|
|
13
13
|
/***/ (() => {
|
|
14
14
|
|
|
15
15
|
|
|
@@ -1188,9 +1188,9 @@
|
|
|
1188
1188
|
if (!("getPathSegAtLength" in window.SVGPathElement.prototype)) {
|
|
1189
1189
|
window.SVGPathElement.prototype.getPathSegAtLength = function (distance) {
|
|
1190
1190
|
if (distance === undefined || !isFinite(distance)) throw "Invalid arguments.";
|
|
1191
|
-
|
|
1191
|
+
const measurementElement = document.createElementNS("http://www.w3.org/2000/svg", "path");
|
|
1192
1192
|
measurementElement.setAttribute("d", this.getAttribute("d"));
|
|
1193
|
-
|
|
1193
|
+
let lastPathSegment = measurementElement.pathSegList.numberOfItems - 1;
|
|
1194
1194
|
if (lastPathSegment <= 0) return 0;
|
|
1195
1195
|
|
|
1196
1196
|
do {
|
|
@@ -1266,7 +1266,7 @@
|
|
|
1266
1266
|
|
|
1267
1267
|
window.SVGPathSegList.prototype._updateListFromPathMutations = function (mutationRecords) {
|
|
1268
1268
|
if (!this._pathElement) return;
|
|
1269
|
-
|
|
1269
|
+
let hasPathMutations = false;
|
|
1270
1270
|
mutationRecords.forEach(function (record) {
|
|
1271
1271
|
if (record.attributeName == "d") hasPathMutations = true;
|
|
1272
1272
|
});
|
|
@@ -1360,7 +1360,7 @@
|
|
|
1360
1360
|
|
|
1361
1361
|
this._checkValidIndex(index);
|
|
1362
1362
|
|
|
1363
|
-
|
|
1363
|
+
const item = this._list[index];
|
|
1364
1364
|
|
|
1365
1365
|
this._list.splice(index, 1);
|
|
1366
1366
|
|
|
@@ -1386,8 +1386,8 @@
|
|
|
1386
1386
|
};
|
|
1387
1387
|
|
|
1388
1388
|
window.SVGPathSegList._pathSegArrayAsString = function (pathSegArray) {
|
|
1389
|
-
|
|
1390
|
-
|
|
1389
|
+
let string = "";
|
|
1390
|
+
let first = true;
|
|
1391
1391
|
pathSegArray.forEach(function (pathSeg) {
|
|
1392
1392
|
if (first) {
|
|
1393
1393
|
first = false;
|
|
@@ -1401,9 +1401,9 @@
|
|
|
1401
1401
|
|
|
1402
1402
|
window.SVGPathSegList.prototype._parsePath = function (string) {
|
|
1403
1403
|
if (!string || string.length == 0) return [];
|
|
1404
|
-
|
|
1404
|
+
const owningPathSegList = this;
|
|
1405
1405
|
|
|
1406
|
-
|
|
1406
|
+
const Builder = function () {
|
|
1407
1407
|
this.pathSegList = [];
|
|
1408
1408
|
};
|
|
1409
1409
|
|
|
@@ -1411,7 +1411,7 @@
|
|
|
1411
1411
|
this.pathSegList.push(pathSeg);
|
|
1412
1412
|
};
|
|
1413
1413
|
|
|
1414
|
-
|
|
1414
|
+
const Source = function (string) {
|
|
1415
1415
|
this._string = string;
|
|
1416
1416
|
this._currentIndex = 0;
|
|
1417
1417
|
this._endIndex = this._string.length;
|
|
@@ -1421,7 +1421,7 @@
|
|
|
1421
1421
|
};
|
|
1422
1422
|
|
|
1423
1423
|
Source.prototype._isCurrentSpace = function () {
|
|
1424
|
-
|
|
1424
|
+
const character = this._string[this._currentIndex];
|
|
1425
1425
|
return character <= " " && (character == " " || character == "\n" || character == "\t" || character == "\r" || character == "\f");
|
|
1426
1426
|
};
|
|
1427
1427
|
|
|
@@ -1450,7 +1450,7 @@
|
|
|
1450
1450
|
};
|
|
1451
1451
|
|
|
1452
1452
|
Source.prototype.peekSegmentType = function () {
|
|
1453
|
-
|
|
1453
|
+
const lookahead = this._string[this._currentIndex];
|
|
1454
1454
|
return this._pathSegTypeFromChar(lookahead);
|
|
1455
1455
|
};
|
|
1456
1456
|
|
|
@@ -1531,18 +1531,18 @@
|
|
|
1531
1531
|
|
|
1532
1532
|
Source.prototype.initialCommandIsMoveTo = function () {
|
|
1533
1533
|
if (!this.hasMoreData()) return true;
|
|
1534
|
-
|
|
1534
|
+
const command = this.peekSegmentType();
|
|
1535
1535
|
return command == window.SVGPathSeg.PATHSEG_MOVETO_ABS || command == window.SVGPathSeg.PATHSEG_MOVETO_REL;
|
|
1536
1536
|
};
|
|
1537
1537
|
|
|
1538
1538
|
Source.prototype._parseNumber = function () {
|
|
1539
|
-
|
|
1540
|
-
|
|
1541
|
-
|
|
1542
|
-
|
|
1543
|
-
|
|
1544
|
-
|
|
1545
|
-
|
|
1539
|
+
let exponent = 0;
|
|
1540
|
+
let integer = 0;
|
|
1541
|
+
let frac = 1;
|
|
1542
|
+
let decimal = 0;
|
|
1543
|
+
let sign = 1;
|
|
1544
|
+
let expsign = 1;
|
|
1545
|
+
const startIndex = this._currentIndex;
|
|
1546
1546
|
|
|
1547
1547
|
this._skipOptionalSpaces();
|
|
1548
1548
|
|
|
@@ -1551,13 +1551,13 @@
|
|
|
1551
1551
|
sign = -1;
|
|
1552
1552
|
}
|
|
1553
1553
|
if (this._currentIndex == this._endIndex || (this._string.charAt(this._currentIndex) < "0" || this._string.charAt(this._currentIndex) > "9") && this._string.charAt(this._currentIndex) != ".") return undefined;
|
|
1554
|
-
|
|
1554
|
+
const startIntPartIndex = this._currentIndex;
|
|
1555
1555
|
|
|
1556
1556
|
while (this._currentIndex < this._endIndex && this._string.charAt(this._currentIndex) >= "0" && this._string.charAt(this._currentIndex) <= "9") this._currentIndex++;
|
|
1557
1557
|
|
|
1558
1558
|
if (this._currentIndex != startIntPartIndex) {
|
|
1559
|
-
|
|
1560
|
-
|
|
1559
|
+
let scanIntPartIndex = this._currentIndex - 1;
|
|
1560
|
+
let multiplier = 1;
|
|
1561
1561
|
|
|
1562
1562
|
while (scanIntPartIndex >= startIntPartIndex) {
|
|
1563
1563
|
integer += multiplier * (this._string.charAt(scanIntPartIndex--) - "0");
|
|
@@ -1595,7 +1595,7 @@
|
|
|
1595
1595
|
}
|
|
1596
1596
|
}
|
|
1597
1597
|
|
|
1598
|
-
|
|
1598
|
+
let number = integer + decimal;
|
|
1599
1599
|
number *= sign;
|
|
1600
1600
|
if (exponent) number *= Math.pow(10, expsign * exponent);
|
|
1601
1601
|
if (startIndex == this._currentIndex) return undefined;
|
|
@@ -1607,9 +1607,9 @@
|
|
|
1607
1607
|
|
|
1608
1608
|
Source.prototype._parseArcFlag = function () {
|
|
1609
1609
|
if (this._currentIndex >= this._endIndex) return undefined;
|
|
1610
|
-
|
|
1610
|
+
let flag = false;
|
|
1611
1611
|
|
|
1612
|
-
|
|
1612
|
+
const flagChar = this._string.charAt(this._currentIndex++);
|
|
1613
1613
|
|
|
1614
1614
|
if (flagChar == "0") flag = false;else if (flagChar == "1") flag = true;else return undefined;
|
|
1615
1615
|
|
|
@@ -1619,9 +1619,9 @@
|
|
|
1619
1619
|
};
|
|
1620
1620
|
|
|
1621
1621
|
Source.prototype.parseSegment = function () {
|
|
1622
|
-
|
|
1622
|
+
const lookahead = this._string[this._currentIndex];
|
|
1623
1623
|
|
|
1624
|
-
|
|
1624
|
+
let command = this._pathSegTypeFromChar(lookahead);
|
|
1625
1625
|
|
|
1626
1626
|
if (command == window.SVGPathSeg.PATHSEG_UNKNOWN) {
|
|
1627
1627
|
if (this._previousCommand == window.SVGPathSeg.PATHSEG_UNKNOWN) return null;
|
|
@@ -1632,6 +1632,7 @@
|
|
|
1632
1632
|
}
|
|
1633
1633
|
|
|
1634
1634
|
this._previousCommand = command;
|
|
1635
|
+
let points;
|
|
1635
1636
|
|
|
1636
1637
|
switch (command) {
|
|
1637
1638
|
case window.SVGPathSeg.PATHSEG_MOVETO_REL:
|
|
@@ -1664,7 +1665,7 @@
|
|
|
1664
1665
|
return new window.SVGPathSegClosePath(owningPathSegList);
|
|
1665
1666
|
|
|
1666
1667
|
case window.SVGPathSeg.PATHSEG_CURVETO_CUBIC_REL:
|
|
1667
|
-
|
|
1668
|
+
points = {
|
|
1668
1669
|
x1: this._parseNumber(),
|
|
1669
1670
|
y1: this._parseNumber(),
|
|
1670
1671
|
x2: this._parseNumber(),
|
|
@@ -1675,7 +1676,7 @@
|
|
|
1675
1676
|
return new window.SVGPathSegCurvetoCubicRel(owningPathSegList, points.x, points.y, points.x1, points.y1, points.x2, points.y2);
|
|
1676
1677
|
|
|
1677
1678
|
case window.SVGPathSeg.PATHSEG_CURVETO_CUBIC_ABS:
|
|
1678
|
-
|
|
1679
|
+
points = {
|
|
1679
1680
|
x1: this._parseNumber(),
|
|
1680
1681
|
y1: this._parseNumber(),
|
|
1681
1682
|
x2: this._parseNumber(),
|
|
@@ -1686,7 +1687,7 @@
|
|
|
1686
1687
|
return new window.SVGPathSegCurvetoCubicAbs(owningPathSegList, points.x, points.y, points.x1, points.y1, points.x2, points.y2);
|
|
1687
1688
|
|
|
1688
1689
|
case window.SVGPathSeg.PATHSEG_CURVETO_CUBIC_SMOOTH_REL:
|
|
1689
|
-
|
|
1690
|
+
points = {
|
|
1690
1691
|
x2: this._parseNumber(),
|
|
1691
1692
|
y2: this._parseNumber(),
|
|
1692
1693
|
x: this._parseNumber(),
|
|
@@ -1695,7 +1696,7 @@
|
|
|
1695
1696
|
return new window.SVGPathSegCurvetoCubicSmoothRel(owningPathSegList, points.x, points.y, points.x2, points.y2);
|
|
1696
1697
|
|
|
1697
1698
|
case window.SVGPathSeg.PATHSEG_CURVETO_CUBIC_SMOOTH_ABS:
|
|
1698
|
-
|
|
1699
|
+
points = {
|
|
1699
1700
|
x2: this._parseNumber(),
|
|
1700
1701
|
y2: this._parseNumber(),
|
|
1701
1702
|
x: this._parseNumber(),
|
|
@@ -1704,7 +1705,7 @@
|
|
|
1704
1705
|
return new window.SVGPathSegCurvetoCubicSmoothAbs(owningPathSegList, points.x, points.y, points.x2, points.y2);
|
|
1705
1706
|
|
|
1706
1707
|
case window.SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_REL:
|
|
1707
|
-
|
|
1708
|
+
points = {
|
|
1708
1709
|
x1: this._parseNumber(),
|
|
1709
1710
|
y1: this._parseNumber(),
|
|
1710
1711
|
x: this._parseNumber(),
|
|
@@ -1713,7 +1714,7 @@
|
|
|
1713
1714
|
return new window.SVGPathSegCurvetoQuadraticRel(owningPathSegList, points.x, points.y, points.x1, points.y1);
|
|
1714
1715
|
|
|
1715
1716
|
case window.SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_ABS:
|
|
1716
|
-
|
|
1717
|
+
points = {
|
|
1717
1718
|
x1: this._parseNumber(),
|
|
1718
1719
|
y1: this._parseNumber(),
|
|
1719
1720
|
x: this._parseNumber(),
|
|
@@ -1728,7 +1729,7 @@
|
|
|
1728
1729
|
return new window.SVGPathSegCurvetoQuadraticSmoothAbs(owningPathSegList, this._parseNumber(), this._parseNumber());
|
|
1729
1730
|
|
|
1730
1731
|
case window.SVGPathSeg.PATHSEG_ARC_REL:
|
|
1731
|
-
|
|
1732
|
+
points = {
|
|
1732
1733
|
x1: this._parseNumber(),
|
|
1733
1734
|
y1: this._parseNumber(),
|
|
1734
1735
|
arcAngle: this._parseNumber(),
|
|
@@ -1740,7 +1741,7 @@
|
|
|
1740
1741
|
return new window.SVGPathSegArcRel(owningPathSegList, points.x, points.y, points.x1, points.y1, points.arcAngle, points.arcLarge, points.arcSweep);
|
|
1741
1742
|
|
|
1742
1743
|
case window.SVGPathSeg.PATHSEG_ARC_ABS:
|
|
1743
|
-
|
|
1744
|
+
points = {
|
|
1744
1745
|
x1: this._parseNumber(),
|
|
1745
1746
|
y1: this._parseNumber(),
|
|
1746
1747
|
arcAngle: this._parseNumber(),
|
|
@@ -1756,12 +1757,12 @@
|
|
|
1756
1757
|
}
|
|
1757
1758
|
};
|
|
1758
1759
|
|
|
1759
|
-
|
|
1760
|
-
|
|
1760
|
+
const builder = new Builder();
|
|
1761
|
+
const source = new Source(string);
|
|
1761
1762
|
if (!source.initialCommandIsMoveTo()) return [];
|
|
1762
1763
|
|
|
1763
1764
|
while (source.hasMoreData()) {
|
|
1764
|
-
|
|
1765
|
+
const pathSeg = source.parseSegment();
|
|
1765
1766
|
if (!pathSeg) return [];
|
|
1766
1767
|
builder.appendSegment(pathSeg);
|
|
1767
1768
|
}
|
package/README.md
CHANGED
|
@@ -69,14 +69,14 @@ _Class Components_
|
|
|
69
69
|
```typescript jsx
|
|
70
70
|
import React from "react";
|
|
71
71
|
import Particles from "react-tsparticles";
|
|
72
|
-
import type {
|
|
72
|
+
import type { Engine } from "tsparticles-engine";
|
|
73
73
|
import { loadFull } from "tsparticles";
|
|
74
74
|
|
|
75
75
|
export class ParticlesContainer extends PureComponent<unknown> {
|
|
76
76
|
// this customizes the component tsParticles installation
|
|
77
|
-
customInit(
|
|
77
|
+
customInit(engine: Engine) {
|
|
78
78
|
// this adds the bundle to tsParticles
|
|
79
|
-
loadFull(
|
|
79
|
+
loadFull(engine);
|
|
80
80
|
}
|
|
81
81
|
|
|
82
82
|
render() {
|
|
@@ -94,14 +94,14 @@ _Hooks / Functional Components_
|
|
|
94
94
|
```typescript jsx
|
|
95
95
|
import React, { useCallback } from "react";
|
|
96
96
|
import Particles from "react-tsparticles";
|
|
97
|
-
import type {
|
|
97
|
+
import type { Engine } from "tsparticles-engine";
|
|
98
98
|
import { loadFull } from "tsparticles";
|
|
99
99
|
|
|
100
100
|
export function ParticlesContainer(props: unknown) {
|
|
101
101
|
// this customizes the component tsParticles installation
|
|
102
|
-
const customInit = useCallback((
|
|
102
|
+
const customInit = useCallback((engine: Engine) => {
|
|
103
103
|
// this adds the bundle to tsParticles
|
|
104
|
-
loadFull(
|
|
104
|
+
loadFull(engine);
|
|
105
105
|
});
|
|
106
106
|
|
|
107
107
|
const options = {
|
|
@@ -121,8 +121,8 @@ _The syntax for `Vue.js 2.x` and `3.x` is the same_
|
|
|
121
121
|
```
|
|
122
122
|
|
|
123
123
|
```js
|
|
124
|
-
function particlesInit(
|
|
125
|
-
loadFull(
|
|
124
|
+
function particlesInit(engine: Engine) {
|
|
125
|
+
loadFull(engine);
|
|
126
126
|
}
|
|
127
127
|
```
|
|
128
128
|
|
|
@@ -138,8 +138,8 @@ function particlesInit(main: Main) {
|
|
|
138
138
|
```
|
|
139
139
|
|
|
140
140
|
```ts
|
|
141
|
-
function particlesInit(
|
|
142
|
-
loadFull(
|
|
141
|
+
function particlesInit(engine: Engine): void {
|
|
142
|
+
loadFull(engine);
|
|
143
143
|
}
|
|
144
144
|
```
|
|
145
145
|
|
|
@@ -155,7 +155,7 @@ function particlesInit(main: Main): void {
|
|
|
155
155
|
```
|
|
156
156
|
|
|
157
157
|
```js
|
|
158
|
-
let onParticlesInit = (
|
|
159
|
-
loadFull(
|
|
158
|
+
let onParticlesInit = (engine) => {
|
|
159
|
+
loadFull(engine);
|
|
160
160
|
};
|
|
161
161
|
```
|
package/bundle.js
CHANGED
package/index.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import type {
|
|
2
|
-
export declare function loadFull(
|
|
1
|
+
import type { Engine } from "tsparticles-engine";
|
|
2
|
+
export declare function loadFull(engine: Engine): Promise<void>;
|
package/index.js
CHANGED
|
@@ -7,23 +7,23 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
|
|
|
7
7
|
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
8
8
|
});
|
|
9
9
|
};
|
|
10
|
-
import { loadSlim } from "tsparticles-slim";
|
|
11
|
-
import { loadTiltUpdater } from "tsparticles-updater-tilt";
|
|
12
|
-
import { loadRollUpdater } from "tsparticles-updater-roll";
|
|
13
|
-
import { loadWobbleUpdater } from "tsparticles-updater-wobble";
|
|
14
|
-
import { loadExternalTrailInteraction } from "tsparticles-interaction-external-trail";
|
|
15
10
|
import { loadAbsorbersPlugin } from "tsparticles-plugin-absorbers";
|
|
16
11
|
import { loadEmittersPlugin } from "tsparticles-plugin-emitters";
|
|
12
|
+
import { loadExternalTrailInteraction } from "tsparticles-interaction-external-trail";
|
|
17
13
|
import { loadPolygonMaskPlugin } from "tsparticles-plugin-polygon-mask";
|
|
18
|
-
|
|
14
|
+
import { loadRollUpdater } from "tsparticles-updater-roll";
|
|
15
|
+
import { loadSlim } from "tsparticles-slim";
|
|
16
|
+
import { loadTiltUpdater } from "tsparticles-updater-tilt";
|
|
17
|
+
import { loadWobbleUpdater } from "tsparticles-updater-wobble";
|
|
18
|
+
export function loadFull(engine) {
|
|
19
19
|
return __awaiter(this, void 0, void 0, function* () {
|
|
20
|
-
yield loadSlim(
|
|
21
|
-
yield loadTiltUpdater(
|
|
22
|
-
yield loadRollUpdater(
|
|
23
|
-
yield loadWobbleUpdater(
|
|
24
|
-
yield loadExternalTrailInteraction(
|
|
25
|
-
yield loadAbsorbersPlugin(
|
|
26
|
-
yield loadEmittersPlugin(
|
|
27
|
-
yield loadPolygonMaskPlugin(
|
|
20
|
+
yield loadSlim(engine);
|
|
21
|
+
yield loadTiltUpdater(engine);
|
|
22
|
+
yield loadRollUpdater(engine);
|
|
23
|
+
yield loadWobbleUpdater(engine);
|
|
24
|
+
yield loadExternalTrailInteraction(engine);
|
|
25
|
+
yield loadAbsorbersPlugin(engine);
|
|
26
|
+
yield loadEmittersPlugin(engine);
|
|
27
|
+
yield loadPolygonMaskPlugin(engine);
|
|
28
28
|
});
|
|
29
29
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "tsparticles",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.2",
|
|
4
4
|
"description": "Easily create highly customizable particle animations and use them as animated backgrounds for your website. Ready to use components available also for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Riot.js, Inferno.",
|
|
5
5
|
"homepage": "https://particles.js.org/",
|
|
6
6
|
"scripts": {
|
|
@@ -66,14 +66,14 @@
|
|
|
66
66
|
"browser": "index.js",
|
|
67
67
|
"types": "index.d.ts",
|
|
68
68
|
"dependencies": {
|
|
69
|
-
"tsparticles-engine": "^2.0.
|
|
70
|
-
"tsparticles-interaction-external-trail": "^2.0.
|
|
71
|
-
"tsparticles-plugin-absorbers": "^2.0.
|
|
72
|
-
"tsparticles-plugin-emitters": "^2.0.
|
|
73
|
-
"tsparticles-plugin-polygon-mask": "^2.0.
|
|
74
|
-
"tsparticles-slim": "^2.0.
|
|
75
|
-
"tsparticles-updater-roll": "^2.0.
|
|
76
|
-
"tsparticles-updater-tilt": "^2.0.
|
|
77
|
-
"tsparticles-updater-wobble": "^2.0.
|
|
69
|
+
"tsparticles-engine": "^2.0.2",
|
|
70
|
+
"tsparticles-interaction-external-trail": "^2.0.2",
|
|
71
|
+
"tsparticles-plugin-absorbers": "^2.0.2",
|
|
72
|
+
"tsparticles-plugin-emitters": "^2.0.2",
|
|
73
|
+
"tsparticles-plugin-polygon-mask": "^2.0.2",
|
|
74
|
+
"tsparticles-slim": "^2.0.2",
|
|
75
|
+
"tsparticles-updater-roll": "^2.0.2",
|
|
76
|
+
"tsparticles-updater-tilt": "^2.0.2",
|
|
77
|
+
"tsparticles-updater-wobble": "^2.0.2"
|
|
78
78
|
}
|
|
79
79
|
}
|