@tsparticles/updater-twinkle 3.0.0-alpha.0 → 3.0.0-beta.0
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/Options/Classes/TwinkleValues.js +1 -1
- package/browser/TwinkleUpdater.js +2 -2
- package/browser/Types.js +1 -0
- package/browser/index.js +2 -2
- package/cjs/TwinkleUpdater.js +2 -2
- package/cjs/Types.js +2 -0
- package/cjs/index.js +2 -13
- package/esm/Options/Classes/TwinkleValues.js +1 -1
- package/esm/TwinkleUpdater.js +2 -2
- package/esm/Types.js +1 -0
- package/esm/index.js +2 -2
- package/package.json +6 -5
- package/report.html +4 -4
- package/tsparticles.updater.twinkle.js +5 -5
- package/tsparticles.updater.twinkle.min.js +1 -1
- package/tsparticles.updater.twinkle.min.js.LICENSE.txt +1 -8
- package/types/Options/Classes/TwinkleValues.d.ts +1 -2
- package/types/TwinkleUpdater.d.ts +2 -13
- package/types/Types.d.ts +12 -0
- package/types/index.d.ts +1 -1
- package/umd/TwinkleUpdater.js +1 -1
- package/umd/Types.js +12 -0
- package/umd/index.js +2 -2
package/README.md
CHANGED
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
|
|
3
3
|
# tsParticles Twinkle Updater
|
|
4
4
|
|
|
5
|
-
[](https://www.jsdelivr.com/package/npm/@tsparticles/updater-twinkle)
|
|
6
|
+
[](https://www.npmjs.com/package/@tsparticles/updater-twinkle)
|
|
7
|
+
[](https://www.npmjs.com/package/@tsparticles/updater-twinkle) [](https://github.com/sponsors/matteobruni)
|
|
8
8
|
|
|
9
9
|
[tsParticles](https://github.com/matteobruni/tsparticles) updater plugin for twinkle 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 loadTwinkleUpdater();
|
|
29
|
+
await loadTwinkleUpdater(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-twinkle
|
|
46
46
|
```
|
|
47
47
|
|
|
48
48
|
or
|
|
49
49
|
|
|
50
50
|
```shell
|
|
51
|
-
$ yarn add tsparticles
|
|
51
|
+
$ yarn add @tsparticles/updater-twinkle
|
|
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 { loadTwinkleUpdater } = require("tsparticles
|
|
57
|
+
const { tsParticles } = require("@tsparticles/engine");
|
|
58
|
+
const { loadTwinkleUpdater } = require("@tsparticles/updater-twinkle");
|
|
59
59
|
|
|
60
|
-
|
|
60
|
+
(async () => {
|
|
61
|
+
await loadTwinkleUpdater(tsParticles);
|
|
62
|
+
})();
|
|
61
63
|
```
|
|
62
64
|
|
|
63
65
|
or
|
|
64
66
|
|
|
65
67
|
```javascript
|
|
66
|
-
import { tsParticles } from "tsparticles
|
|
67
|
-
import { loadTwinkleUpdater } from "tsparticles
|
|
68
|
+
import { tsParticles } from "@tsparticles/engine";
|
|
69
|
+
import { loadTwinkleUpdater } from "@tsparticles/updater-twinkle";
|
|
68
70
|
|
|
69
|
-
|
|
71
|
+
(async () => {
|
|
72
|
+
await loadTwinkleUpdater(tsParticles);
|
|
73
|
+
})();
|
|
70
74
|
```
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { getRandom, getRangeValue, getStyleFromHsl, rangeColorToHsl } from "@tsparticles/engine";
|
|
1
|
+
import { getRandom, getRangeValue, getStyleFromHsl, rangeColorToHsl, } from "@tsparticles/engine";
|
|
2
2
|
import { Twinkle } from "./Options/Classes/Twinkle";
|
|
3
3
|
export class TwinkleUpdater {
|
|
4
4
|
getColorStyles(particle, context, radius, opacity) {
|
|
@@ -25,7 +25,7 @@ export class TwinkleUpdater {
|
|
|
25
25
|
options.twinkle = new Twinkle();
|
|
26
26
|
}
|
|
27
27
|
for (const source of sources) {
|
|
28
|
-
options.twinkle.load(source
|
|
28
|
+
options.twinkle.load(source?.twinkle);
|
|
29
29
|
}
|
|
30
30
|
}
|
|
31
31
|
update() {
|
package/browser/Types.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/browser/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { TwinkleUpdater } from "./TwinkleUpdater";
|
|
2
|
-
export async function loadTwinkleUpdater(engine) {
|
|
3
|
-
await engine.addParticleUpdater("twinkle", () => new TwinkleUpdater());
|
|
2
|
+
export async function loadTwinkleUpdater(engine, refresh = true) {
|
|
3
|
+
await engine.addParticleUpdater("twinkle", () => new TwinkleUpdater(), refresh);
|
|
4
4
|
}
|
package/cjs/TwinkleUpdater.js
CHANGED
|
@@ -9,7 +9,7 @@ class TwinkleUpdater {
|
|
|
9
9
|
if (!twinkleOptions) {
|
|
10
10
|
return {};
|
|
11
11
|
}
|
|
12
|
-
const twinkle = twinkleOptions.particles, twinkling = twinkle.enable && (0, engine_1.getRandom)() < twinkle.frequency, zIndexOptions = particle.options.zIndex, zOpacityFactor =
|
|
12
|
+
const twinkle = twinkleOptions.particles, twinkling = twinkle.enable && (0, engine_1.getRandom)() < twinkle.frequency, zIndexOptions = particle.options.zIndex, zOpacityFactor = (1 - particle.zIndexFactor) ** zIndexOptions.opacityRate, twinklingOpacity = twinkling ? (0, engine_1.getRangeValue)(twinkle.opacity) * zOpacityFactor : opacity, twinkleRgb = (0, engine_1.rangeColorToHsl)(twinkle.color), twinkleStyle = twinkleRgb ? (0, engine_1.getStyleFromHsl)(twinkleRgb, twinklingOpacity) : undefined, res = {}, needsTwinkle = twinkling && twinkleStyle;
|
|
13
13
|
res.fill = needsTwinkle ? twinkleStyle : undefined;
|
|
14
14
|
res.stroke = needsTwinkle ? twinkleStyle : undefined;
|
|
15
15
|
return res;
|
|
@@ -28,7 +28,7 @@ class TwinkleUpdater {
|
|
|
28
28
|
options.twinkle = new Twinkle_1.Twinkle();
|
|
29
29
|
}
|
|
30
30
|
for (const source of sources) {
|
|
31
|
-
options.twinkle.load(source
|
|
31
|
+
options.twinkle.load(source?.twinkle);
|
|
32
32
|
}
|
|
33
33
|
}
|
|
34
34
|
update() {
|
package/cjs/Types.js
ADDED
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.loadTwinkleUpdater = void 0;
|
|
13
4
|
const TwinkleUpdater_1 = require("./TwinkleUpdater");
|
|
14
|
-
function loadTwinkleUpdater(engine) {
|
|
15
|
-
|
|
16
|
-
yield engine.addParticleUpdater("twinkle", () => new TwinkleUpdater_1.TwinkleUpdater());
|
|
17
|
-
});
|
|
5
|
+
async function loadTwinkleUpdater(engine, refresh = true) {
|
|
6
|
+
await engine.addParticleUpdater("twinkle", () => new TwinkleUpdater_1.TwinkleUpdater(), refresh);
|
|
18
7
|
}
|
|
19
8
|
exports.loadTwinkleUpdater = loadTwinkleUpdater;
|
package/esm/TwinkleUpdater.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { getRandom, getRangeValue, getStyleFromHsl, rangeColorToHsl } from "@tsparticles/engine";
|
|
1
|
+
import { getRandom, getRangeValue, getStyleFromHsl, rangeColorToHsl, } from "@tsparticles/engine";
|
|
2
2
|
import { Twinkle } from "./Options/Classes/Twinkle";
|
|
3
3
|
export class TwinkleUpdater {
|
|
4
4
|
getColorStyles(particle, context, radius, opacity) {
|
|
@@ -25,7 +25,7 @@ export class TwinkleUpdater {
|
|
|
25
25
|
options.twinkle = new Twinkle();
|
|
26
26
|
}
|
|
27
27
|
for (const source of sources) {
|
|
28
|
-
options.twinkle.load(source
|
|
28
|
+
options.twinkle.load(source?.twinkle);
|
|
29
29
|
}
|
|
30
30
|
}
|
|
31
31
|
update() {
|
package/esm/Types.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/esm/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { TwinkleUpdater } from "./TwinkleUpdater";
|
|
2
|
-
export async function loadTwinkleUpdater(engine) {
|
|
3
|
-
await engine.addParticleUpdater("twinkle", () => new TwinkleUpdater());
|
|
2
|
+
export async function loadTwinkleUpdater(engine, refresh = true) {
|
|
3
|
+
await engine.addParticleUpdater("twinkle", () => new TwinkleUpdater(), refresh);
|
|
4
4
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tsparticles/updater-twinkle",
|
|
3
|
-
"version": "3.0.0-
|
|
3
|
+
"version": "3.0.0-beta.0",
|
|
4
4
|
"description": "tsParticles particles twinkle updater",
|
|
5
5
|
"homepage": "https://particles.js.org",
|
|
6
6
|
"repository": {
|
|
@@ -73,10 +73,11 @@
|
|
|
73
73
|
"unpkg": "tsparticles.updater.twinkle.min.js",
|
|
74
74
|
"module": "esm/index.js",
|
|
75
75
|
"types": "types/index.d.ts",
|
|
76
|
+
"sideEffects": false,
|
|
77
|
+
"dependencies": {
|
|
78
|
+
"@tsparticles/engine": "^3.0.0-beta.0"
|
|
79
|
+
},
|
|
76
80
|
"publishConfig": {
|
|
77
81
|
"access": "public"
|
|
78
|
-
},
|
|
79
|
-
"dependencies": {
|
|
80
|
-
"@tsparticles/engine": "^3.0.0-alpha.0"
|
|
81
82
|
}
|
|
82
|
-
}
|
|
83
|
+
}
|