@tsparticles/updater-twinkle 4.0.0-alpha.8 → 4.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/802.min.js +1 -0
- package/browser/Options/Classes/Twinkle.js +7 -4
- package/{cjs/Options/Classes/TwinkleValues.js → browser/Options/Classes/TwinkleLinksValues.js} +5 -1
- package/browser/Options/Classes/TwinkleParticlesValues.js +33 -0
- package/browser/TwinkleUpdater.js +17 -9
- package/browser/index.js +4 -4
- package/cjs/Options/Classes/Twinkle.js +7 -4
- package/{esm/Options/Classes/TwinkleValues.js → cjs/Options/Classes/TwinkleLinksValues.js} +5 -1
- package/cjs/Options/Classes/TwinkleParticlesValues.js +33 -0
- package/cjs/Options/Interfaces/ITwinkleParticlesValues.js +1 -0
- package/cjs/TwinkleUpdater.js +17 -9
- package/cjs/index.js +4 -4
- package/dist_browser_TwinkleUpdater_js.js +18 -8
- package/esm/Options/Classes/Twinkle.js +7 -4
- package/{browser/Options/Classes/TwinkleValues.js → esm/Options/Classes/TwinkleLinksValues.js} +5 -1
- package/esm/Options/Classes/TwinkleParticlesValues.js +33 -0
- package/esm/Options/Interfaces/ITwinkleLinksValues.js +1 -0
- package/esm/Options/Interfaces/ITwinkleParticlesValues.js +1 -0
- package/esm/TwinkleUpdater.js +17 -9
- package/esm/index.js +4 -4
- package/package.json +2 -2
- package/report.html +84 -29
- package/tsparticles.updater.twinkle.js +31 -19
- package/tsparticles.updater.twinkle.min.js +2 -2
- package/types/Options/Classes/Twinkle.d.ts +4 -3
- package/types/Options/Classes/TwinkleLinksValues.d.ts +10 -0
- package/types/Options/Classes/TwinkleParticlesValues.d.ts +11 -0
- package/types/Options/Interfaces/ITwinkle.d.ts +4 -3
- package/types/Options/Interfaces/{ITwinkleValues.d.ts → ITwinkleLinksValues.d.ts} +1 -1
- package/types/Options/Interfaces/ITwinkleParticlesValues.d.ts +8 -0
- package/types/TwinkleUpdater.d.ts +5 -4
- package/umd/Options/Classes/Twinkle.js +8 -5
- package/umd/Options/Classes/{TwinkleValues.js → TwinkleLinksValues.js} +7 -3
- package/umd/Options/Classes/TwinkleParticlesValues.js +47 -0
- package/umd/Options/Interfaces/ITwinkleParticlesValues.js +12 -0
- package/umd/TwinkleUpdater.js +17 -9
- package/umd/index.js +4 -4
- package/467.min.js +0 -2
- package/467.min.js.LICENSE.txt +0 -1
- package/tsparticles.updater.twinkle.min.js.LICENSE.txt +0 -1
- package/types/Options/Classes/TwinkleValues.d.ts +0 -10
- /package/browser/Options/Interfaces/{ITwinkleValues.js → ITwinkleLinksValues.js} +0 -0
- /package/{cjs/Options/Interfaces/ITwinkleValues.js → browser/Options/Interfaces/ITwinkleParticlesValues.js} +0 -0
- /package/{esm/Options/Interfaces/ITwinkleValues.js → cjs/Options/Interfaces/ITwinkleLinksValues.js} +0 -0
- /package/umd/Options/Interfaces/{ITwinkleValues.js → ITwinkleLinksValues.js} +0 -0
package/802.min.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";(this.webpackChunk_tsparticles_updater_twinkle=this.webpackChunk_tsparticles_updater_twinkle||[]).push([[802],{802(e,t,o){o.d(t,{TwinkleUpdater:()=>n});var l=o(303);class i{color;enable;frequency;opacity;constructor(){this.enable=!1,this.frequency=.05,this.opacity=1}load(e){(0,l.isNull)(e)||(void 0!==e.color&&(this.color=l.OptionsColor.create(this.color,e.color)),void 0!==e.enable&&(this.enable=e.enable),void 0!==e.frequency&&(this.frequency=e.frequency),void 0!==e.opacity&&(this.opacity=(0,l.setRangeValue)(e.opacity)))}}class r{enable;fillColor;frequency;opacity;strokeColor;constructor(){this.enable=!1,this.frequency=.05,this.opacity=1}load(e){(0,l.isNull)(e)||(void 0!==e.fillColor&&(this.fillColor=l.OptionsColor.create(this.fillColor,e.fillColor)),void 0!==e.strokeColor&&(this.strokeColor=l.OptionsColor.create(this.strokeColor,e.strokeColor)),void 0!==e.enable&&(this.enable=e.enable),void 0!==e.frequency&&(this.frequency=e.frequency),void 0!==e.opacity&&(this.opacity=(0,l.setRangeValue)(e.opacity)))}}class s{links;particles;constructor(){this.links=new i,this.particles=new r}load(e){(0,l.isNull)(e)||(this.links.load(e.links),this.particles.load(e.particles))}}class n{_container;_pluginManager;constructor(e,t){this._pluginManager=e,this._container=t}getColorStyles(e,t,o,i){let r=e.options,{_container:s}=this,n=r.twinkle;if(!n)return{};let a=n.particles,c=a.enable&&(0,l.getRandom)()<a.frequency,p=e.options.zIndex,u=(1-e.zIndexFactor)**p.opacityRate,h=c?(0,l.getRangeValue)(a.opacity)*u:i,d=(0,l.rangeColorToHsl)(this._pluginManager,a.fillColor),y=(0,l.rangeColorToHsl)(this._pluginManager,a.strokeColor),f=(()=>{if(d)return(0,l.getStyleFromHsl)(d,s.hdr,h)})(),k=(()=>{if(y)return(0,l.getStyleFromHsl)(y,s.hdr,h)})(),C={},g=c&&(!!f||!!k);return C.fill=g?f:void 0,C.stroke=g?k:void 0,C}init(){}isEnabled(e){let t=e.options.twinkle;return!!t&&t.particles.enable}loadOptions(e,...t){for(let o of(e.twinkle??=new s,t))e.twinkle.load(o?.twinkle)}update(){}}}}]);
|
|
@@ -1,15 +1,18 @@
|
|
|
1
1
|
import { isNull } from "@tsparticles/engine";
|
|
2
|
-
import {
|
|
2
|
+
import { TwinkleLinksValues } from "./TwinkleLinksValues.js";
|
|
3
|
+
import { TwinkleParticlesValues } from "./TwinkleParticlesValues.js";
|
|
3
4
|
export class Twinkle {
|
|
5
|
+
links;
|
|
6
|
+
particles;
|
|
4
7
|
constructor() {
|
|
5
|
-
this.
|
|
6
|
-
this.particles = new
|
|
8
|
+
this.links = new TwinkleLinksValues();
|
|
9
|
+
this.particles = new TwinkleParticlesValues();
|
|
7
10
|
}
|
|
8
11
|
load(data) {
|
|
9
12
|
if (isNull(data)) {
|
|
10
13
|
return;
|
|
11
14
|
}
|
|
12
|
-
this.
|
|
15
|
+
this.links.load(data.links);
|
|
13
16
|
this.particles.load(data.particles);
|
|
14
17
|
}
|
|
15
18
|
}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { OptionsColor, isNull, setRangeValue, } from "@tsparticles/engine";
|
|
2
|
+
export class TwinkleParticlesValues {
|
|
3
|
+
enable;
|
|
4
|
+
fillColor;
|
|
5
|
+
frequency;
|
|
6
|
+
opacity;
|
|
7
|
+
strokeColor;
|
|
8
|
+
constructor() {
|
|
9
|
+
this.enable = false;
|
|
10
|
+
this.frequency = 0.05;
|
|
11
|
+
this.opacity = 1;
|
|
12
|
+
}
|
|
13
|
+
load(data) {
|
|
14
|
+
if (isNull(data)) {
|
|
15
|
+
return;
|
|
16
|
+
}
|
|
17
|
+
if (data.fillColor !== undefined) {
|
|
18
|
+
this.fillColor = OptionsColor.create(this.fillColor, data.fillColor);
|
|
19
|
+
}
|
|
20
|
+
if (data.strokeColor !== undefined) {
|
|
21
|
+
this.strokeColor = OptionsColor.create(this.strokeColor, data.strokeColor);
|
|
22
|
+
}
|
|
23
|
+
if (data.enable !== undefined) {
|
|
24
|
+
this.enable = data.enable;
|
|
25
|
+
}
|
|
26
|
+
if (data.frequency !== undefined) {
|
|
27
|
+
this.frequency = data.frequency;
|
|
28
|
+
}
|
|
29
|
+
if (data.opacity !== undefined) {
|
|
30
|
+
this.opacity = setRangeValue(data.opacity);
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
}
|
|
@@ -1,22 +1,30 @@
|
|
|
1
1
|
import { getRandom, getRangeValue, getStyleFromHsl, rangeColorToHsl, } from "@tsparticles/engine";
|
|
2
2
|
import { Twinkle } from "./Options/Classes/Twinkle.js";
|
|
3
3
|
export class TwinkleUpdater {
|
|
4
|
-
|
|
5
|
-
|
|
4
|
+
_container;
|
|
5
|
+
_pluginManager;
|
|
6
|
+
constructor(pluginManager, container) {
|
|
7
|
+
this._pluginManager = pluginManager;
|
|
8
|
+
this._container = container;
|
|
6
9
|
}
|
|
7
10
|
getColorStyles(particle, _context, _radius, opacity) {
|
|
8
|
-
const pOptions = particle.options, { container } =
|
|
11
|
+
const pOptions = particle.options, { _container: container } = this, twinkleOptions = pOptions["twinkle"];
|
|
9
12
|
if (!twinkleOptions) {
|
|
10
13
|
return {};
|
|
11
14
|
}
|
|
12
|
-
const twinkle = twinkleOptions.particles, twinkling = twinkle.enable && getRandom() < twinkle.frequency, zIndexOptions = particle.options.zIndex, zOffset = 1, zOpacityFactor = (zOffset - particle.zIndexFactor) ** zIndexOptions.opacityRate, twinklingOpacity = twinkling ? getRangeValue(twinkle.opacity) * zOpacityFactor : opacity,
|
|
13
|
-
if (!
|
|
15
|
+
const twinkle = twinkleOptions.particles, twinkling = twinkle.enable && getRandom() < twinkle.frequency, zIndexOptions = particle.options.zIndex, zOffset = 1, zOpacityFactor = (zOffset - particle.zIndexFactor) ** zIndexOptions.opacityRate, twinklingOpacity = twinkling ? getRangeValue(twinkle.opacity) * zOpacityFactor : opacity, twinkleFillRgb = rangeColorToHsl(this._pluginManager, twinkle.fillColor), twinkleStrokeRgb = rangeColorToHsl(this._pluginManager, twinkle.strokeColor), getTwinkleFillStyle = () => {
|
|
16
|
+
if (!twinkleFillRgb) {
|
|
14
17
|
return undefined;
|
|
15
18
|
}
|
|
16
|
-
return getStyleFromHsl(
|
|
17
|
-
},
|
|
18
|
-
|
|
19
|
-
|
|
19
|
+
return getStyleFromHsl(twinkleFillRgb, container.hdr, twinklingOpacity);
|
|
20
|
+
}, getTwinkleStrokeStyle = () => {
|
|
21
|
+
if (!twinkleStrokeRgb) {
|
|
22
|
+
return undefined;
|
|
23
|
+
}
|
|
24
|
+
return getStyleFromHsl(twinkleStrokeRgb, container.hdr, twinklingOpacity);
|
|
25
|
+
}, twinkleFillStyle = getTwinkleFillStyle(), twinkleStrokeStyle = getTwinkleStrokeStyle(), res = {}, needsTwinkle = twinkling && (!!twinkleFillStyle || !!twinkleStrokeStyle);
|
|
26
|
+
res.fill = needsTwinkle ? twinkleFillStyle : undefined;
|
|
27
|
+
res.stroke = needsTwinkle ? twinkleStrokeStyle : undefined;
|
|
20
28
|
return res;
|
|
21
29
|
}
|
|
22
30
|
init() {
|
package/browser/index.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
export async function loadTwinkleUpdater(engine) {
|
|
2
|
-
engine.checkVersion("4.0.0-
|
|
3
|
-
await engine.register(e => {
|
|
4
|
-
e.addParticleUpdater("twinkle", async () => {
|
|
2
|
+
engine.checkVersion("4.0.0-beta.1");
|
|
3
|
+
await engine.pluginManager.register(e => {
|
|
4
|
+
e.pluginManager.addParticleUpdater("twinkle", async (container) => {
|
|
5
5
|
const { TwinkleUpdater } = await import("./TwinkleUpdater.js");
|
|
6
|
-
return new TwinkleUpdater(e);
|
|
6
|
+
return new TwinkleUpdater(e.pluginManager, container);
|
|
7
7
|
});
|
|
8
8
|
});
|
|
9
9
|
}
|
|
@@ -1,15 +1,18 @@
|
|
|
1
1
|
import { isNull } from "@tsparticles/engine";
|
|
2
|
-
import {
|
|
2
|
+
import { TwinkleLinksValues } from "./TwinkleLinksValues.js";
|
|
3
|
+
import { TwinkleParticlesValues } from "./TwinkleParticlesValues.js";
|
|
3
4
|
export class Twinkle {
|
|
5
|
+
links;
|
|
6
|
+
particles;
|
|
4
7
|
constructor() {
|
|
5
|
-
this.
|
|
6
|
-
this.particles = new
|
|
8
|
+
this.links = new TwinkleLinksValues();
|
|
9
|
+
this.particles = new TwinkleParticlesValues();
|
|
7
10
|
}
|
|
8
11
|
load(data) {
|
|
9
12
|
if (isNull(data)) {
|
|
10
13
|
return;
|
|
11
14
|
}
|
|
12
|
-
this.
|
|
15
|
+
this.links.load(data.links);
|
|
13
16
|
this.particles.load(data.particles);
|
|
14
17
|
}
|
|
15
18
|
}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { OptionsColor, isNull, setRangeValue, } from "@tsparticles/engine";
|
|
2
|
+
export class TwinkleParticlesValues {
|
|
3
|
+
enable;
|
|
4
|
+
fillColor;
|
|
5
|
+
frequency;
|
|
6
|
+
opacity;
|
|
7
|
+
strokeColor;
|
|
8
|
+
constructor() {
|
|
9
|
+
this.enable = false;
|
|
10
|
+
this.frequency = 0.05;
|
|
11
|
+
this.opacity = 1;
|
|
12
|
+
}
|
|
13
|
+
load(data) {
|
|
14
|
+
if (isNull(data)) {
|
|
15
|
+
return;
|
|
16
|
+
}
|
|
17
|
+
if (data.fillColor !== undefined) {
|
|
18
|
+
this.fillColor = OptionsColor.create(this.fillColor, data.fillColor);
|
|
19
|
+
}
|
|
20
|
+
if (data.strokeColor !== undefined) {
|
|
21
|
+
this.strokeColor = OptionsColor.create(this.strokeColor, data.strokeColor);
|
|
22
|
+
}
|
|
23
|
+
if (data.enable !== undefined) {
|
|
24
|
+
this.enable = data.enable;
|
|
25
|
+
}
|
|
26
|
+
if (data.frequency !== undefined) {
|
|
27
|
+
this.frequency = data.frequency;
|
|
28
|
+
}
|
|
29
|
+
if (data.opacity !== undefined) {
|
|
30
|
+
this.opacity = setRangeValue(data.opacity);
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/cjs/TwinkleUpdater.js
CHANGED
|
@@ -1,22 +1,30 @@
|
|
|
1
1
|
import { getRandom, getRangeValue, getStyleFromHsl, rangeColorToHsl, } from "@tsparticles/engine";
|
|
2
2
|
import { Twinkle } from "./Options/Classes/Twinkle.js";
|
|
3
3
|
export class TwinkleUpdater {
|
|
4
|
-
|
|
5
|
-
|
|
4
|
+
_container;
|
|
5
|
+
_pluginManager;
|
|
6
|
+
constructor(pluginManager, container) {
|
|
7
|
+
this._pluginManager = pluginManager;
|
|
8
|
+
this._container = container;
|
|
6
9
|
}
|
|
7
10
|
getColorStyles(particle, _context, _radius, opacity) {
|
|
8
|
-
const pOptions = particle.options, { container } =
|
|
11
|
+
const pOptions = particle.options, { _container: container } = this, twinkleOptions = pOptions["twinkle"];
|
|
9
12
|
if (!twinkleOptions) {
|
|
10
13
|
return {};
|
|
11
14
|
}
|
|
12
|
-
const twinkle = twinkleOptions.particles, twinkling = twinkle.enable && getRandom() < twinkle.frequency, zIndexOptions = particle.options.zIndex, zOffset = 1, zOpacityFactor = (zOffset - particle.zIndexFactor) ** zIndexOptions.opacityRate, twinklingOpacity = twinkling ? getRangeValue(twinkle.opacity) * zOpacityFactor : opacity,
|
|
13
|
-
if (!
|
|
15
|
+
const twinkle = twinkleOptions.particles, twinkling = twinkle.enable && getRandom() < twinkle.frequency, zIndexOptions = particle.options.zIndex, zOffset = 1, zOpacityFactor = (zOffset - particle.zIndexFactor) ** zIndexOptions.opacityRate, twinklingOpacity = twinkling ? getRangeValue(twinkle.opacity) * zOpacityFactor : opacity, twinkleFillRgb = rangeColorToHsl(this._pluginManager, twinkle.fillColor), twinkleStrokeRgb = rangeColorToHsl(this._pluginManager, twinkle.strokeColor), getTwinkleFillStyle = () => {
|
|
16
|
+
if (!twinkleFillRgb) {
|
|
14
17
|
return undefined;
|
|
15
18
|
}
|
|
16
|
-
return getStyleFromHsl(
|
|
17
|
-
},
|
|
18
|
-
|
|
19
|
-
|
|
19
|
+
return getStyleFromHsl(twinkleFillRgb, container.hdr, twinklingOpacity);
|
|
20
|
+
}, getTwinkleStrokeStyle = () => {
|
|
21
|
+
if (!twinkleStrokeRgb) {
|
|
22
|
+
return undefined;
|
|
23
|
+
}
|
|
24
|
+
return getStyleFromHsl(twinkleStrokeRgb, container.hdr, twinklingOpacity);
|
|
25
|
+
}, twinkleFillStyle = getTwinkleFillStyle(), twinkleStrokeStyle = getTwinkleStrokeStyle(), res = {}, needsTwinkle = twinkling && (!!twinkleFillStyle || !!twinkleStrokeStyle);
|
|
26
|
+
res.fill = needsTwinkle ? twinkleFillStyle : undefined;
|
|
27
|
+
res.stroke = needsTwinkle ? twinkleStrokeStyle : undefined;
|
|
20
28
|
return res;
|
|
21
29
|
}
|
|
22
30
|
init() {
|
package/cjs/index.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
export async function loadTwinkleUpdater(engine) {
|
|
2
|
-
engine.checkVersion("4.0.0-
|
|
3
|
-
await engine.register(e => {
|
|
4
|
-
e.addParticleUpdater("twinkle", async () => {
|
|
2
|
+
engine.checkVersion("4.0.0-beta.1");
|
|
3
|
+
await engine.pluginManager.register(e => {
|
|
4
|
+
e.pluginManager.addParticleUpdater("twinkle", async (container) => {
|
|
5
5
|
const { TwinkleUpdater } = await import("./TwinkleUpdater.js");
|
|
6
|
-
return new TwinkleUpdater(e);
|
|
6
|
+
return new TwinkleUpdater(e.pluginManager, container);
|
|
7
7
|
});
|
|
8
8
|
});
|
|
9
9
|
}
|
|
@@ -4,7 +4,7 @@
|
|
|
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
|
-
* v4.0.0-
|
|
7
|
+
* v4.0.0-beta.1
|
|
8
8
|
*/
|
|
9
9
|
"use strict";
|
|
10
10
|
/*
|
|
@@ -23,17 +23,27 @@
|
|
|
23
23
|
\*************************************************/
|
|
24
24
|
(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
|
|
25
25
|
|
|
26
|
-
eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ Twinkle: () => (/* binding */ Twinkle)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var
|
|
26
|
+
eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ Twinkle: () => (/* binding */ Twinkle)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _TwinkleLinksValues_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./TwinkleLinksValues.js */ \"./dist/browser/Options/Classes/TwinkleLinksValues.js\");\n/* harmony import */ var _TwinkleParticlesValues_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./TwinkleParticlesValues.js */ \"./dist/browser/Options/Classes/TwinkleParticlesValues.js\");\n\n\n\nclass Twinkle {\n links;\n particles;\n constructor(){\n this.links = new _TwinkleLinksValues_js__WEBPACK_IMPORTED_MODULE_1__.TwinkleLinksValues();\n this.particles = new _TwinkleParticlesValues_js__WEBPACK_IMPORTED_MODULE_2__.TwinkleParticlesValues();\n }\n load(data) {\n if ((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isNull)(data)) {\n return;\n }\n this.links.load(data.links);\n this.particles.load(data.particles);\n }\n}\n\n\n//# sourceURL=webpack://@tsparticles/updater-twinkle/./dist/browser/Options/Classes/Twinkle.js?\n}");
|
|
27
27
|
|
|
28
28
|
/***/ },
|
|
29
29
|
|
|
30
|
-
/***/ "./dist/browser/Options/Classes/
|
|
31
|
-
|
|
32
|
-
!*** ./dist/browser/Options/Classes/
|
|
33
|
-
|
|
30
|
+
/***/ "./dist/browser/Options/Classes/TwinkleLinksValues.js"
|
|
31
|
+
/*!************************************************************!*\
|
|
32
|
+
!*** ./dist/browser/Options/Classes/TwinkleLinksValues.js ***!
|
|
33
|
+
\************************************************************/
|
|
34
34
|
(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
|
|
35
35
|
|
|
36
|
-
eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */
|
|
36
|
+
eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ TwinkleLinksValues: () => (/* binding */ TwinkleLinksValues)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n\nclass TwinkleLinksValues {\n color;\n enable;\n frequency;\n opacity;\n constructor(){\n this.enable = false;\n this.frequency = 0.05;\n this.opacity = 1;\n }\n load(data) {\n if ((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isNull)(data)) {\n return;\n }\n if (data.color !== undefined) {\n this.color = _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.OptionsColor.create(this.color, data.color);\n }\n if (data.enable !== undefined) {\n this.enable = data.enable;\n }\n if (data.frequency !== undefined) {\n this.frequency = data.frequency;\n }\n if (data.opacity !== undefined) {\n this.opacity = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.setRangeValue)(data.opacity);\n }\n }\n}\n\n\n//# sourceURL=webpack://@tsparticles/updater-twinkle/./dist/browser/Options/Classes/TwinkleLinksValues.js?\n}");
|
|
37
|
+
|
|
38
|
+
/***/ },
|
|
39
|
+
|
|
40
|
+
/***/ "./dist/browser/Options/Classes/TwinkleParticlesValues.js"
|
|
41
|
+
/*!****************************************************************!*\
|
|
42
|
+
!*** ./dist/browser/Options/Classes/TwinkleParticlesValues.js ***!
|
|
43
|
+
\****************************************************************/
|
|
44
|
+
(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
|
|
45
|
+
|
|
46
|
+
eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ TwinkleParticlesValues: () => (/* binding */ TwinkleParticlesValues)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n\nclass TwinkleParticlesValues {\n enable;\n fillColor;\n frequency;\n opacity;\n strokeColor;\n constructor(){\n this.enable = false;\n this.frequency = 0.05;\n this.opacity = 1;\n }\n load(data) {\n if ((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isNull)(data)) {\n return;\n }\n if (data.fillColor !== undefined) {\n this.fillColor = _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.OptionsColor.create(this.fillColor, data.fillColor);\n }\n if (data.strokeColor !== undefined) {\n this.strokeColor = _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.OptionsColor.create(this.strokeColor, data.strokeColor);\n }\n if (data.enable !== undefined) {\n this.enable = data.enable;\n }\n if (data.frequency !== undefined) {\n this.frequency = data.frequency;\n }\n if (data.opacity !== undefined) {\n this.opacity = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.setRangeValue)(data.opacity);\n }\n }\n}\n\n\n//# sourceURL=webpack://@tsparticles/updater-twinkle/./dist/browser/Options/Classes/TwinkleParticlesValues.js?\n}");
|
|
37
47
|
|
|
38
48
|
/***/ },
|
|
39
49
|
|
|
@@ -43,7 +53,7 @@ eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpa
|
|
|
43
53
|
\****************************************/
|
|
44
54
|
(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
|
|
45
55
|
|
|
46
|
-
eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ TwinkleUpdater: () => (/* binding */ TwinkleUpdater)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _Options_Classes_Twinkle_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Options/Classes/Twinkle.js */ \"./dist/browser/Options/Classes/Twinkle.js\");\n\n\nclass TwinkleUpdater {\n
|
|
56
|
+
eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ TwinkleUpdater: () => (/* binding */ TwinkleUpdater)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _Options_Classes_Twinkle_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Options/Classes/Twinkle.js */ \"./dist/browser/Options/Classes/Twinkle.js\");\n\n\nclass TwinkleUpdater {\n _container;\n _pluginManager;\n constructor(pluginManager, container){\n this._pluginManager = pluginManager;\n this._container = container;\n }\n getColorStyles(particle, _context, _radius, opacity) {\n const pOptions = particle.options, { _container: container } = this, twinkleOptions = pOptions[\"twinkle\"];\n if (!twinkleOptions) {\n return {};\n }\n const twinkle = twinkleOptions.particles, twinkling = twinkle.enable && (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getRandom)() < twinkle.frequency, zIndexOptions = particle.options.zIndex, zOffset = 1, zOpacityFactor = (zOffset - particle.zIndexFactor) ** zIndexOptions.opacityRate, twinklingOpacity = twinkling ? (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getRangeValue)(twinkle.opacity) * zOpacityFactor : opacity, twinkleFillRgb = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.rangeColorToHsl)(this._pluginManager, twinkle.fillColor), twinkleStrokeRgb = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.rangeColorToHsl)(this._pluginManager, twinkle.strokeColor), getTwinkleFillStyle = ()=>{\n if (!twinkleFillRgb) {\n return undefined;\n }\n return (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getStyleFromHsl)(twinkleFillRgb, container.hdr, twinklingOpacity);\n }, getTwinkleStrokeStyle = ()=>{\n if (!twinkleStrokeRgb) {\n return undefined;\n }\n return (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getStyleFromHsl)(twinkleStrokeRgb, container.hdr, twinklingOpacity);\n }, twinkleFillStyle = getTwinkleFillStyle(), twinkleStrokeStyle = getTwinkleStrokeStyle(), res = {}, needsTwinkle = twinkling && (!!twinkleFillStyle || !!twinkleStrokeStyle);\n res.fill = needsTwinkle ? twinkleFillStyle : undefined;\n res.stroke = needsTwinkle ? twinkleStrokeStyle : undefined;\n return res;\n }\n init() {}\n isEnabled(particle) {\n const pOptions = particle.options, twinkleOptions = pOptions.twinkle;\n if (!twinkleOptions) {\n return false;\n }\n return twinkleOptions.particles.enable;\n }\n loadOptions(options, ...sources) {\n options.twinkle ??= new _Options_Classes_Twinkle_js__WEBPACK_IMPORTED_MODULE_1__.Twinkle();\n for (const source of sources){\n options.twinkle.load(source?.twinkle);\n }\n }\n update() {}\n}\n\n\n//# sourceURL=webpack://@tsparticles/updater-twinkle/./dist/browser/TwinkleUpdater.js?\n}");
|
|
47
57
|
|
|
48
58
|
/***/ }
|
|
49
59
|
|
|
@@ -1,15 +1,18 @@
|
|
|
1
1
|
import { isNull } from "@tsparticles/engine";
|
|
2
|
-
import {
|
|
2
|
+
import { TwinkleLinksValues } from "./TwinkleLinksValues.js";
|
|
3
|
+
import { TwinkleParticlesValues } from "./TwinkleParticlesValues.js";
|
|
3
4
|
export class Twinkle {
|
|
5
|
+
links;
|
|
6
|
+
particles;
|
|
4
7
|
constructor() {
|
|
5
|
-
this.
|
|
6
|
-
this.particles = new
|
|
8
|
+
this.links = new TwinkleLinksValues();
|
|
9
|
+
this.particles = new TwinkleParticlesValues();
|
|
7
10
|
}
|
|
8
11
|
load(data) {
|
|
9
12
|
if (isNull(data)) {
|
|
10
13
|
return;
|
|
11
14
|
}
|
|
12
|
-
this.
|
|
15
|
+
this.links.load(data.links);
|
|
13
16
|
this.particles.load(data.particles);
|
|
14
17
|
}
|
|
15
18
|
}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { OptionsColor, isNull, setRangeValue, } from "@tsparticles/engine";
|
|
2
|
+
export class TwinkleParticlesValues {
|
|
3
|
+
enable;
|
|
4
|
+
fillColor;
|
|
5
|
+
frequency;
|
|
6
|
+
opacity;
|
|
7
|
+
strokeColor;
|
|
8
|
+
constructor() {
|
|
9
|
+
this.enable = false;
|
|
10
|
+
this.frequency = 0.05;
|
|
11
|
+
this.opacity = 1;
|
|
12
|
+
}
|
|
13
|
+
load(data) {
|
|
14
|
+
if (isNull(data)) {
|
|
15
|
+
return;
|
|
16
|
+
}
|
|
17
|
+
if (data.fillColor !== undefined) {
|
|
18
|
+
this.fillColor = OptionsColor.create(this.fillColor, data.fillColor);
|
|
19
|
+
}
|
|
20
|
+
if (data.strokeColor !== undefined) {
|
|
21
|
+
this.strokeColor = OptionsColor.create(this.strokeColor, data.strokeColor);
|
|
22
|
+
}
|
|
23
|
+
if (data.enable !== undefined) {
|
|
24
|
+
this.enable = data.enable;
|
|
25
|
+
}
|
|
26
|
+
if (data.frequency !== undefined) {
|
|
27
|
+
this.frequency = data.frequency;
|
|
28
|
+
}
|
|
29
|
+
if (data.opacity !== undefined) {
|
|
30
|
+
this.opacity = setRangeValue(data.opacity);
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/esm/TwinkleUpdater.js
CHANGED
|
@@ -1,22 +1,30 @@
|
|
|
1
1
|
import { getRandom, getRangeValue, getStyleFromHsl, rangeColorToHsl, } from "@tsparticles/engine";
|
|
2
2
|
import { Twinkle } from "./Options/Classes/Twinkle.js";
|
|
3
3
|
export class TwinkleUpdater {
|
|
4
|
-
|
|
5
|
-
|
|
4
|
+
_container;
|
|
5
|
+
_pluginManager;
|
|
6
|
+
constructor(pluginManager, container) {
|
|
7
|
+
this._pluginManager = pluginManager;
|
|
8
|
+
this._container = container;
|
|
6
9
|
}
|
|
7
10
|
getColorStyles(particle, _context, _radius, opacity) {
|
|
8
|
-
const pOptions = particle.options, { container } =
|
|
11
|
+
const pOptions = particle.options, { _container: container } = this, twinkleOptions = pOptions["twinkle"];
|
|
9
12
|
if (!twinkleOptions) {
|
|
10
13
|
return {};
|
|
11
14
|
}
|
|
12
|
-
const twinkle = twinkleOptions.particles, twinkling = twinkle.enable && getRandom() < twinkle.frequency, zIndexOptions = particle.options.zIndex, zOffset = 1, zOpacityFactor = (zOffset - particle.zIndexFactor) ** zIndexOptions.opacityRate, twinklingOpacity = twinkling ? getRangeValue(twinkle.opacity) * zOpacityFactor : opacity,
|
|
13
|
-
if (!
|
|
15
|
+
const twinkle = twinkleOptions.particles, twinkling = twinkle.enable && getRandom() < twinkle.frequency, zIndexOptions = particle.options.zIndex, zOffset = 1, zOpacityFactor = (zOffset - particle.zIndexFactor) ** zIndexOptions.opacityRate, twinklingOpacity = twinkling ? getRangeValue(twinkle.opacity) * zOpacityFactor : opacity, twinkleFillRgb = rangeColorToHsl(this._pluginManager, twinkle.fillColor), twinkleStrokeRgb = rangeColorToHsl(this._pluginManager, twinkle.strokeColor), getTwinkleFillStyle = () => {
|
|
16
|
+
if (!twinkleFillRgb) {
|
|
14
17
|
return undefined;
|
|
15
18
|
}
|
|
16
|
-
return getStyleFromHsl(
|
|
17
|
-
},
|
|
18
|
-
|
|
19
|
-
|
|
19
|
+
return getStyleFromHsl(twinkleFillRgb, container.hdr, twinklingOpacity);
|
|
20
|
+
}, getTwinkleStrokeStyle = () => {
|
|
21
|
+
if (!twinkleStrokeRgb) {
|
|
22
|
+
return undefined;
|
|
23
|
+
}
|
|
24
|
+
return getStyleFromHsl(twinkleStrokeRgb, container.hdr, twinklingOpacity);
|
|
25
|
+
}, twinkleFillStyle = getTwinkleFillStyle(), twinkleStrokeStyle = getTwinkleStrokeStyle(), res = {}, needsTwinkle = twinkling && (!!twinkleFillStyle || !!twinkleStrokeStyle);
|
|
26
|
+
res.fill = needsTwinkle ? twinkleFillStyle : undefined;
|
|
27
|
+
res.stroke = needsTwinkle ? twinkleStrokeStyle : undefined;
|
|
20
28
|
return res;
|
|
21
29
|
}
|
|
22
30
|
init() {
|
package/esm/index.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
export async function loadTwinkleUpdater(engine) {
|
|
2
|
-
engine.checkVersion("4.0.0-
|
|
3
|
-
await engine.register(e => {
|
|
4
|
-
e.addParticleUpdater("twinkle", async () => {
|
|
2
|
+
engine.checkVersion("4.0.0-beta.1");
|
|
3
|
+
await engine.pluginManager.register(e => {
|
|
4
|
+
e.pluginManager.addParticleUpdater("twinkle", async (container) => {
|
|
5
5
|
const { TwinkleUpdater } = await import("./TwinkleUpdater.js");
|
|
6
|
-
return new TwinkleUpdater(e);
|
|
6
|
+
return new TwinkleUpdater(e.pluginManager, container);
|
|
7
7
|
});
|
|
8
8
|
});
|
|
9
9
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tsparticles/updater-twinkle",
|
|
3
|
-
"version": "4.0.0-
|
|
3
|
+
"version": "4.0.0-beta.1",
|
|
4
4
|
"description": "tsParticles particles twinkle updater",
|
|
5
5
|
"homepage": "https://particles.js.org",
|
|
6
6
|
"repository": {
|
|
@@ -87,7 +87,7 @@
|
|
|
87
87
|
"./package.json": "./package.json"
|
|
88
88
|
},
|
|
89
89
|
"dependencies": {
|
|
90
|
-
"@tsparticles/engine": "4.0.0-
|
|
90
|
+
"@tsparticles/engine": "4.0.0-beta.1"
|
|
91
91
|
},
|
|
92
92
|
"publishConfig": {
|
|
93
93
|
"access": "public"
|