@tsparticles/updater-twinkle 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/Options/Classes/Twinkle.js +1 -1
- package/browser/Options/Classes/TwinkleValues.js +1 -1
- package/browser/TwinkleUpdater.js +3 -3
- package/browser/Types.js +1 -0
- package/browser/index.js +3 -3
- package/browser/package.json +1 -0
- package/cjs/Options/Classes/Twinkle.js +3 -3
- package/cjs/TwinkleUpdater.js +4 -4
- package/cjs/Types.js +2 -0
- package/cjs/index.js +3 -14
- package/cjs/package.json +1 -0
- package/esm/Options/Classes/Twinkle.js +1 -1
- package/esm/Options/Classes/TwinkleValues.js +1 -1
- package/esm/TwinkleUpdater.js +3 -3
- package/esm/Types.js +1 -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.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/Twinkle.d.ts +2 -2
- package/types/Options/Classes/TwinkleValues.d.ts +2 -3
- package/types/Options/Interfaces/ITwinkle.d.ts +1 -1
- package/types/TwinkleUpdater.d.ts +2 -13
- package/types/Types.d.ts +12 -0
- package/types/index.d.ts +1 -1
- package/umd/Options/Classes/Twinkle.js +4 -4
- package/umd/TwinkleUpdater.js +4 -4
- package/umd/Types.js +12 -0
- package/umd/index.js +4 -4
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,5 +1,5 @@
|
|
|
1
|
-
import { getRandom, getRangeValue, getStyleFromHsl, rangeColorToHsl } from "@tsparticles/engine";
|
|
2
|
-
import { Twinkle } from "./Options/Classes/Twinkle";
|
|
1
|
+
import { getRandom, getRangeValue, getStyleFromHsl, rangeColorToHsl, } from "@tsparticles/engine";
|
|
2
|
+
import { Twinkle } from "./Options/Classes/Twinkle.js";
|
|
3
3
|
export class TwinkleUpdater {
|
|
4
4
|
getColorStyles(particle, context, radius, opacity) {
|
|
5
5
|
const pOptions = particle.options, twinkleOptions = pOptions.twinkle;
|
|
@@ -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
|
-
import { TwinkleUpdater } from "./TwinkleUpdater";
|
|
2
|
-
export async function loadTwinkleUpdater(engine) {
|
|
3
|
-
await engine.addParticleUpdater("twinkle", () => new TwinkleUpdater());
|
|
1
|
+
import { TwinkleUpdater } from "./TwinkleUpdater.js";
|
|
2
|
+
export async function loadTwinkleUpdater(engine, refresh = true) {
|
|
3
|
+
await engine.addParticleUpdater("twinkle", () => new TwinkleUpdater(), refresh);
|
|
4
4
|
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{ "type": "module" }
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.Twinkle = void 0;
|
|
4
|
-
const
|
|
4
|
+
const TwinkleValues_js_1 = require("./TwinkleValues.js");
|
|
5
5
|
class Twinkle {
|
|
6
6
|
constructor() {
|
|
7
|
-
this.lines = new
|
|
8
|
-
this.particles = new
|
|
7
|
+
this.lines = new TwinkleValues_js_1.TwinkleValues();
|
|
8
|
+
this.particles = new TwinkleValues_js_1.TwinkleValues();
|
|
9
9
|
}
|
|
10
10
|
load(data) {
|
|
11
11
|
if (!data) {
|
package/cjs/TwinkleUpdater.js
CHANGED
|
@@ -2,14 +2,14 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.TwinkleUpdater = void 0;
|
|
4
4
|
const engine_1 = require("@tsparticles/engine");
|
|
5
|
-
const
|
|
5
|
+
const Twinkle_js_1 = require("./Options/Classes/Twinkle.js");
|
|
6
6
|
class TwinkleUpdater {
|
|
7
7
|
getColorStyles(particle, context, radius, opacity) {
|
|
8
8
|
const pOptions = particle.options, twinkleOptions = pOptions.twinkle;
|
|
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;
|
|
@@ -25,10 +25,10 @@ class TwinkleUpdater {
|
|
|
25
25
|
}
|
|
26
26
|
loadOptions(options, ...sources) {
|
|
27
27
|
if (!options.twinkle) {
|
|
28
|
-
options.twinkle = new
|
|
28
|
+
options.twinkle = new Twinkle_js_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
|
-
const
|
|
14
|
-
function loadTwinkleUpdater(engine) {
|
|
15
|
-
|
|
16
|
-
yield engine.addParticleUpdater("twinkle", () => new TwinkleUpdater_1.TwinkleUpdater());
|
|
17
|
-
});
|
|
4
|
+
const TwinkleUpdater_js_1 = require("./TwinkleUpdater.js");
|
|
5
|
+
async function loadTwinkleUpdater(engine, refresh = true) {
|
|
6
|
+
await engine.addParticleUpdater("twinkle", () => new TwinkleUpdater_js_1.TwinkleUpdater(), refresh);
|
|
18
7
|
}
|
|
19
8
|
exports.loadTwinkleUpdater = loadTwinkleUpdater;
|
package/cjs/package.json
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{ "type": "commonjs" }
|
package/esm/TwinkleUpdater.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { getRandom, getRangeValue, getStyleFromHsl, rangeColorToHsl } from "@tsparticles/engine";
|
|
2
|
-
import { Twinkle } from "./Options/Classes/Twinkle";
|
|
1
|
+
import { getRandom, getRangeValue, getStyleFromHsl, rangeColorToHsl, } from "@tsparticles/engine";
|
|
2
|
+
import { Twinkle } from "./Options/Classes/Twinkle.js";
|
|
3
3
|
export class TwinkleUpdater {
|
|
4
4
|
getColorStyles(particle, context, radius, opacity) {
|
|
5
5
|
const pOptions = particle.options, twinkleOptions = pOptions.twinkle;
|
|
@@ -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
|
-
import { TwinkleUpdater } from "./TwinkleUpdater";
|
|
2
|
-
export async function loadTwinkleUpdater(engine) {
|
|
3
|
-
await engine.addParticleUpdater("twinkle", () => new TwinkleUpdater());
|
|
1
|
+
import { TwinkleUpdater } from "./TwinkleUpdater.js";
|
|
2
|
+
export async function loadTwinkleUpdater(engine, refresh = true) {
|
|
3
|
+
await engine.addParticleUpdater("twinkle", () => new TwinkleUpdater(), refresh);
|
|
4
4
|
}
|
package/esm/package.json
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{ "type": "module" }
|
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.1",
|
|
4
4
|
"description": "tsParticles particles twinkle updater",
|
|
5
5
|
"homepage": "https://particles.js.org",
|
|
6
6
|
"repository": {
|
|
@@ -68,15 +68,28 @@
|
|
|
68
68
|
"bugs": {
|
|
69
69
|
"url": "https://github.com/matteobruni/tsparticles/issues"
|
|
70
70
|
},
|
|
71
|
-
"
|
|
71
|
+
"sideEffects": false,
|
|
72
72
|
"jsdelivr": "tsparticles.updater.twinkle.min.js",
|
|
73
73
|
"unpkg": "tsparticles.updater.twinkle.min.js",
|
|
74
|
+
"browser": "browser/index.js",
|
|
75
|
+
"main": "cjs/index.js",
|
|
74
76
|
"module": "esm/index.js",
|
|
75
77
|
"types": "types/index.d.ts",
|
|
76
|
-
"
|
|
77
|
-
"
|
|
78
|
+
"exports": {
|
|
79
|
+
".": {
|
|
80
|
+
"types": "./types/index.d.ts",
|
|
81
|
+
"browser": "./browser/index.js",
|
|
82
|
+
"import": "./esm/index.js",
|
|
83
|
+
"require": "./cjs/index.js",
|
|
84
|
+
"umd": "./umd/index.js",
|
|
85
|
+
"default": "./cjs/index.js"
|
|
86
|
+
},
|
|
87
|
+
"./package.json": "./package.json"
|
|
78
88
|
},
|
|
79
89
|
"dependencies": {
|
|
80
|
-
"@tsparticles/engine": "^3.0.0-
|
|
90
|
+
"@tsparticles/engine": "^3.0.0-beta.1"
|
|
91
|
+
},
|
|
92
|
+
"publishConfig": {
|
|
93
|
+
"access": "public"
|
|
81
94
|
}
|
|
82
|
-
}
|
|
95
|
+
}
|