@tsparticles/updater-orbit 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/Enums.js +1 -0
- package/browser/Options/Classes/Orbit.js +2 -2
- package/browser/OrbitUpdater.js +11 -27
- package/browser/Types.js +1 -0
- package/browser/Utils.js +15 -0
- package/browser/index.js +3 -3
- package/browser/package.json +1 -0
- package/cjs/Enums.js +2 -0
- package/cjs/Options/Classes/Orbit.js +2 -2
- package/cjs/OrbitUpdater.js +11 -27
- package/cjs/Types.js +2 -0
- package/cjs/Utils.js +19 -0
- package/cjs/index.js +3 -3
- package/cjs/package.json +1 -0
- package/esm/Enums.js +1 -0
- package/esm/Options/Classes/Orbit.js +2 -2
- package/esm/OrbitUpdater.js +11 -27
- package/esm/Types.js +1 -0
- package/esm/Utils.js +15 -0
- package/esm/index.js +3 -3
- package/esm/package.json +1 -0
- package/package.json +23 -6
- package/report.html +4 -4
- package/tsparticles.updater.orbit.js +17 -17
- package/tsparticles.updater.orbit.min.js +1 -1
- package/tsparticles.updater.orbit.min.js.LICENSE.txt +1 -8
- package/types/Enums.d.ts +4 -0
- package/types/Options/Classes/Orbit.d.ts +3 -4
- package/types/Options/Classes/OrbitRotation.d.ts +1 -2
- package/types/OrbitUpdater.d.ts +3 -31
- package/types/Types.d.ts +26 -0
- package/types/Utils.d.ts +2 -0
- package/types/index.d.ts +1 -1
- package/umd/Enums.js +12 -0
- package/umd/Options/Classes/Orbit.js +3 -3
- package/umd/OrbitUpdater.js +12 -28
- package/umd/Types.js +12 -0
- package/umd/Utils.js +29 -0
- package/umd/index.js +4 -4
package/README.md
CHANGED
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
|
|
3
3
|
# tsParticles Orbit Updater
|
|
4
4
|
|
|
5
|
-
[](https://www.jsdelivr.com/package/npm/@tsparticles/updater-orbit)
|
|
6
|
+
[](https://www.npmjs.com/package/@tsparticles/updater-orbit)
|
|
7
|
+
[](https://www.npmjs.com/package/@tsparticles/updater-orbit) [](https://github.com/sponsors/matteobruni)
|
|
8
8
|
|
|
9
9
|
[tsParticles](https://github.com/matteobruni/tsparticles) updater plugin for orbit 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 loadOrbitUpdater();
|
|
29
|
+
await loadOrbitUpdater(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-orbit
|
|
46
46
|
```
|
|
47
47
|
|
|
48
48
|
or
|
|
49
49
|
|
|
50
50
|
```shell
|
|
51
|
-
$ yarn add tsparticles
|
|
51
|
+
$ yarn add @tsparticles/updater-orbit
|
|
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 { loadOrbitUpdater } = require("tsparticles
|
|
57
|
+
const { tsParticles } = require("@tsparticles/engine");
|
|
58
|
+
const { loadOrbitUpdater } = require("@tsparticles/updater-orbit");
|
|
59
59
|
|
|
60
|
-
|
|
60
|
+
(async () => {
|
|
61
|
+
await loadOrbitUpdater(tsParticles);
|
|
62
|
+
})();
|
|
61
63
|
```
|
|
62
64
|
|
|
63
65
|
or
|
|
64
66
|
|
|
65
67
|
```javascript
|
|
66
|
-
import { tsParticles } from "tsparticles
|
|
67
|
-
import { loadOrbitUpdater } from "tsparticles
|
|
68
|
+
import { tsParticles } from "@tsparticles/engine";
|
|
69
|
+
import { loadOrbitUpdater } from "@tsparticles/updater-orbit";
|
|
68
70
|
|
|
69
|
-
|
|
71
|
+
(async () => {
|
|
72
|
+
await loadOrbitUpdater(tsParticles);
|
|
73
|
+
})();
|
|
70
74
|
```
|
package/browser/Enums.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { AnimationOptions, OptionsColor, setRangeValue } from "@tsparticles/engine";
|
|
2
|
-
import { OrbitRotation } from "./OrbitRotation";
|
|
1
|
+
import { AnimationOptions, OptionsColor, setRangeValue, } from "@tsparticles/engine";
|
|
2
|
+
import { OrbitRotation } from "./OrbitRotation.js";
|
|
3
3
|
export class Orbit {
|
|
4
4
|
constructor() {
|
|
5
5
|
this.animation = new AnimationOptions();
|
package/browser/OrbitUpdater.js
CHANGED
|
@@ -1,32 +1,19 @@
|
|
|
1
|
-
import { getRangeValue,
|
|
2
|
-
import { Orbit } from "./Options/Classes/Orbit";
|
|
3
|
-
|
|
4
|
-
if (width <= 0) {
|
|
5
|
-
return;
|
|
6
|
-
}
|
|
7
|
-
const pos = particle.getPosition();
|
|
8
|
-
if (fillColorValue) {
|
|
9
|
-
context.strokeStyle = getStyleFromHsl(fillColorValue, opacity);
|
|
10
|
-
}
|
|
11
|
-
context.lineWidth = width;
|
|
12
|
-
const rotationRadian = (rotation * Math.PI) / 180;
|
|
13
|
-
context.beginPath();
|
|
14
|
-
context.ellipse(pos.x, pos.y, radius / 2, radius * 2, rotationRadian, start, end);
|
|
15
|
-
context.stroke();
|
|
16
|
-
}
|
|
1
|
+
import { getRangeValue, rangeColorToHsl, } from "@tsparticles/engine";
|
|
2
|
+
import { Orbit } from "./Options/Classes/Orbit.js";
|
|
3
|
+
import { drawEllipse } from "./Utils.js";
|
|
17
4
|
export class OrbitUpdater {
|
|
18
5
|
constructor(container) {
|
|
19
6
|
this.container = container;
|
|
20
7
|
}
|
|
21
8
|
afterDraw(particle) {
|
|
22
9
|
const orbitOptions = particle.options.orbit;
|
|
23
|
-
if (orbitOptions
|
|
10
|
+
if (orbitOptions?.enable) {
|
|
24
11
|
this.drawOrbit(particle, "front");
|
|
25
12
|
}
|
|
26
13
|
}
|
|
27
14
|
beforeDraw(particle) {
|
|
28
15
|
const orbitOptions = particle.options.orbit;
|
|
29
|
-
if (orbitOptions
|
|
16
|
+
if (orbitOptions?.enable) {
|
|
30
17
|
this.drawOrbit(particle, "back");
|
|
31
18
|
}
|
|
32
19
|
}
|
|
@@ -47,13 +34,12 @@ export class OrbitUpdater {
|
|
|
47
34
|
end = 2 * Math.PI;
|
|
48
35
|
}
|
|
49
36
|
container.canvas.draw((ctx) => {
|
|
50
|
-
|
|
51
|
-
drawEllipse(ctx, particle, (_a = particle.orbitColor) !== null && _a !== void 0 ? _a : particle.getFillColor(), (_c = (_b = particle.retina.orbitRadius) !== null && _b !== void 0 ? _b : container.retina.orbitRadius) !== null && _c !== void 0 ? _c : particle.getRadius(), (_d = particle.orbitOpacity) !== null && _d !== void 0 ? _d : 1, (_e = particle.orbitWidth) !== null && _e !== void 0 ? _e : 1, ((_f = particle.orbitRotation) !== null && _f !== void 0 ? _f : 0) * container.retina.pixelRatio, start, end);
|
|
37
|
+
drawEllipse(ctx, particle, particle.orbitColor ?? particle.getFillColor(), particle.retina.orbitRadius ?? container.retina.orbitRadius ?? particle.getRadius(), particle.orbitOpacity ?? 1, particle.orbitWidth ?? 1, (particle.orbitRotation ?? 0) * container.retina.pixelRatio, start, end);
|
|
52
38
|
});
|
|
53
39
|
}
|
|
54
40
|
init(particle) {
|
|
55
41
|
const container = this.container, particlesOptions = particle.options, orbitOptions = particlesOptions.orbit;
|
|
56
|
-
if (!
|
|
42
|
+
if (!orbitOptions?.enable) {
|
|
57
43
|
return;
|
|
58
44
|
}
|
|
59
45
|
particle.orbitRotation = getRangeValue(orbitOptions.rotation.value);
|
|
@@ -68,26 +54,24 @@ export class OrbitUpdater {
|
|
|
68
54
|
particle.orbitOpacity = getRangeValue(orbitOptions.opacity);
|
|
69
55
|
}
|
|
70
56
|
isEnabled(particle) {
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
return !particle.destroyed && !particle.spawning && !!(orbitAnimations === null || orbitAnimations === void 0 ? void 0 : orbitAnimations.enable);
|
|
57
|
+
const orbitAnimations = particle.options.orbit?.animation;
|
|
58
|
+
return !particle.destroyed && !particle.spawning && !!orbitAnimations?.enable;
|
|
74
59
|
}
|
|
75
60
|
loadOptions(options, ...sources) {
|
|
76
61
|
if (!options.orbit) {
|
|
77
62
|
options.orbit = new Orbit();
|
|
78
63
|
}
|
|
79
64
|
for (const source of sources) {
|
|
80
|
-
options.orbit.load(source
|
|
65
|
+
options.orbit.load(source?.orbit);
|
|
81
66
|
}
|
|
82
67
|
}
|
|
83
68
|
update(particle, delta) {
|
|
84
|
-
var _a;
|
|
85
69
|
if (!this.isEnabled(particle)) {
|
|
86
70
|
return;
|
|
87
71
|
}
|
|
88
72
|
if (particle.orbitRotation === undefined) {
|
|
89
73
|
particle.orbitRotation = 0;
|
|
90
74
|
}
|
|
91
|
-
particle.orbitRotation += (
|
|
75
|
+
particle.orbitRotation += (particle.orbitAnimationSpeed ?? 0 / (Math.PI * 2)) * delta.factor;
|
|
92
76
|
}
|
|
93
77
|
}
|
package/browser/Types.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/browser/Utils.js
ADDED
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { getStyleFromHsl } from "@tsparticles/engine";
|
|
2
|
+
export function drawEllipse(context, particle, fillColorValue, radius, opacity, width, rotation, start, end) {
|
|
3
|
+
if (width <= 0) {
|
|
4
|
+
return;
|
|
5
|
+
}
|
|
6
|
+
const pos = particle.getPosition();
|
|
7
|
+
if (fillColorValue) {
|
|
8
|
+
context.strokeStyle = getStyleFromHsl(fillColorValue, opacity);
|
|
9
|
+
}
|
|
10
|
+
context.lineWidth = width;
|
|
11
|
+
const rotationRadian = (rotation * Math.PI) / 180;
|
|
12
|
+
context.beginPath();
|
|
13
|
+
context.ellipse(pos.x, pos.y, radius / 2, radius * 2, rotationRadian, start, end);
|
|
14
|
+
context.stroke();
|
|
15
|
+
}
|
package/browser/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { OrbitUpdater } from "./OrbitUpdater";
|
|
2
|
-
export function loadOrbitUpdater(engine) {
|
|
3
|
-
engine.addParticleUpdater("orbit", (container) => new OrbitUpdater(container));
|
|
1
|
+
import { OrbitUpdater } from "./OrbitUpdater.js";
|
|
2
|
+
export async function loadOrbitUpdater(engine, refresh = true) {
|
|
3
|
+
await engine.addParticleUpdater("orbit", (container) => new OrbitUpdater(container), refresh);
|
|
4
4
|
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{ "type": "module" }
|
package/cjs/Enums.js
ADDED
|
@@ -2,13 +2,13 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.Orbit = void 0;
|
|
4
4
|
const engine_1 = require("@tsparticles/engine");
|
|
5
|
-
const
|
|
5
|
+
const OrbitRotation_js_1 = require("./OrbitRotation.js");
|
|
6
6
|
class Orbit {
|
|
7
7
|
constructor() {
|
|
8
8
|
this.animation = new engine_1.AnimationOptions();
|
|
9
9
|
this.enable = false;
|
|
10
10
|
this.opacity = 1;
|
|
11
|
-
this.rotation = new
|
|
11
|
+
this.rotation = new OrbitRotation_js_1.OrbitRotation();
|
|
12
12
|
this.width = 1;
|
|
13
13
|
}
|
|
14
14
|
load(data) {
|
package/cjs/OrbitUpdater.js
CHANGED
|
@@ -2,34 +2,21 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.OrbitUpdater = void 0;
|
|
4
4
|
const engine_1 = require("@tsparticles/engine");
|
|
5
|
-
const
|
|
6
|
-
|
|
7
|
-
if (width <= 0) {
|
|
8
|
-
return;
|
|
9
|
-
}
|
|
10
|
-
const pos = particle.getPosition();
|
|
11
|
-
if (fillColorValue) {
|
|
12
|
-
context.strokeStyle = (0, engine_1.getStyleFromHsl)(fillColorValue, opacity);
|
|
13
|
-
}
|
|
14
|
-
context.lineWidth = width;
|
|
15
|
-
const rotationRadian = (rotation * Math.PI) / 180;
|
|
16
|
-
context.beginPath();
|
|
17
|
-
context.ellipse(pos.x, pos.y, radius / 2, radius * 2, rotationRadian, start, end);
|
|
18
|
-
context.stroke();
|
|
19
|
-
}
|
|
5
|
+
const Orbit_js_1 = require("./Options/Classes/Orbit.js");
|
|
6
|
+
const Utils_js_1 = require("./Utils.js");
|
|
20
7
|
class OrbitUpdater {
|
|
21
8
|
constructor(container) {
|
|
22
9
|
this.container = container;
|
|
23
10
|
}
|
|
24
11
|
afterDraw(particle) {
|
|
25
12
|
const orbitOptions = particle.options.orbit;
|
|
26
|
-
if (orbitOptions
|
|
13
|
+
if (orbitOptions?.enable) {
|
|
27
14
|
this.drawOrbit(particle, "front");
|
|
28
15
|
}
|
|
29
16
|
}
|
|
30
17
|
beforeDraw(particle) {
|
|
31
18
|
const orbitOptions = particle.options.orbit;
|
|
32
|
-
if (orbitOptions
|
|
19
|
+
if (orbitOptions?.enable) {
|
|
33
20
|
this.drawOrbit(particle, "back");
|
|
34
21
|
}
|
|
35
22
|
}
|
|
@@ -50,13 +37,12 @@ class OrbitUpdater {
|
|
|
50
37
|
end = 2 * Math.PI;
|
|
51
38
|
}
|
|
52
39
|
container.canvas.draw((ctx) => {
|
|
53
|
-
|
|
54
|
-
drawEllipse(ctx, particle, (_a = particle.orbitColor) !== null && _a !== void 0 ? _a : particle.getFillColor(), (_c = (_b = particle.retina.orbitRadius) !== null && _b !== void 0 ? _b : container.retina.orbitRadius) !== null && _c !== void 0 ? _c : particle.getRadius(), (_d = particle.orbitOpacity) !== null && _d !== void 0 ? _d : 1, (_e = particle.orbitWidth) !== null && _e !== void 0 ? _e : 1, ((_f = particle.orbitRotation) !== null && _f !== void 0 ? _f : 0) * container.retina.pixelRatio, start, end);
|
|
40
|
+
(0, Utils_js_1.drawEllipse)(ctx, particle, particle.orbitColor ?? particle.getFillColor(), particle.retina.orbitRadius ?? container.retina.orbitRadius ?? particle.getRadius(), particle.orbitOpacity ?? 1, particle.orbitWidth ?? 1, (particle.orbitRotation ?? 0) * container.retina.pixelRatio, start, end);
|
|
55
41
|
});
|
|
56
42
|
}
|
|
57
43
|
init(particle) {
|
|
58
44
|
const container = this.container, particlesOptions = particle.options, orbitOptions = particlesOptions.orbit;
|
|
59
|
-
if (!
|
|
45
|
+
if (!orbitOptions?.enable) {
|
|
60
46
|
return;
|
|
61
47
|
}
|
|
62
48
|
particle.orbitRotation = (0, engine_1.getRangeValue)(orbitOptions.rotation.value);
|
|
@@ -71,27 +57,25 @@ class OrbitUpdater {
|
|
|
71
57
|
particle.orbitOpacity = (0, engine_1.getRangeValue)(orbitOptions.opacity);
|
|
72
58
|
}
|
|
73
59
|
isEnabled(particle) {
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
return !particle.destroyed && !particle.spawning && !!(orbitAnimations === null || orbitAnimations === void 0 ? void 0 : orbitAnimations.enable);
|
|
60
|
+
const orbitAnimations = particle.options.orbit?.animation;
|
|
61
|
+
return !particle.destroyed && !particle.spawning && !!orbitAnimations?.enable;
|
|
77
62
|
}
|
|
78
63
|
loadOptions(options, ...sources) {
|
|
79
64
|
if (!options.orbit) {
|
|
80
|
-
options.orbit = new
|
|
65
|
+
options.orbit = new Orbit_js_1.Orbit();
|
|
81
66
|
}
|
|
82
67
|
for (const source of sources) {
|
|
83
|
-
options.orbit.load(source
|
|
68
|
+
options.orbit.load(source?.orbit);
|
|
84
69
|
}
|
|
85
70
|
}
|
|
86
71
|
update(particle, delta) {
|
|
87
|
-
var _a;
|
|
88
72
|
if (!this.isEnabled(particle)) {
|
|
89
73
|
return;
|
|
90
74
|
}
|
|
91
75
|
if (particle.orbitRotation === undefined) {
|
|
92
76
|
particle.orbitRotation = 0;
|
|
93
77
|
}
|
|
94
|
-
particle.orbitRotation += (
|
|
78
|
+
particle.orbitRotation += (particle.orbitAnimationSpeed ?? 0 / (Math.PI * 2)) * delta.factor;
|
|
95
79
|
}
|
|
96
80
|
}
|
|
97
81
|
exports.OrbitUpdater = OrbitUpdater;
|
package/cjs/Types.js
ADDED
package/cjs/Utils.js
ADDED
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.drawEllipse = void 0;
|
|
4
|
+
const engine_1 = require("@tsparticles/engine");
|
|
5
|
+
function drawEllipse(context, particle, fillColorValue, radius, opacity, width, rotation, start, end) {
|
|
6
|
+
if (width <= 0) {
|
|
7
|
+
return;
|
|
8
|
+
}
|
|
9
|
+
const pos = particle.getPosition();
|
|
10
|
+
if (fillColorValue) {
|
|
11
|
+
context.strokeStyle = (0, engine_1.getStyleFromHsl)(fillColorValue, opacity);
|
|
12
|
+
}
|
|
13
|
+
context.lineWidth = width;
|
|
14
|
+
const rotationRadian = (rotation * Math.PI) / 180;
|
|
15
|
+
context.beginPath();
|
|
16
|
+
context.ellipse(pos.x, pos.y, radius / 2, radius * 2, rotationRadian, start, end);
|
|
17
|
+
context.stroke();
|
|
18
|
+
}
|
|
19
|
+
exports.drawEllipse = drawEllipse;
|
package/cjs/index.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.loadOrbitUpdater = void 0;
|
|
4
|
-
const
|
|
5
|
-
function loadOrbitUpdater(engine) {
|
|
6
|
-
engine.addParticleUpdater("orbit", (container) => new
|
|
4
|
+
const OrbitUpdater_js_1 = require("./OrbitUpdater.js");
|
|
5
|
+
async function loadOrbitUpdater(engine, refresh = true) {
|
|
6
|
+
await engine.addParticleUpdater("orbit", (container) => new OrbitUpdater_js_1.OrbitUpdater(container), refresh);
|
|
7
7
|
}
|
|
8
8
|
exports.loadOrbitUpdater = loadOrbitUpdater;
|
package/cjs/package.json
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{ "type": "commonjs" }
|
package/esm/Enums.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { AnimationOptions, OptionsColor, setRangeValue } from "@tsparticles/engine";
|
|
2
|
-
import { OrbitRotation } from "./OrbitRotation";
|
|
1
|
+
import { AnimationOptions, OptionsColor, setRangeValue, } from "@tsparticles/engine";
|
|
2
|
+
import { OrbitRotation } from "./OrbitRotation.js";
|
|
3
3
|
export class Orbit {
|
|
4
4
|
constructor() {
|
|
5
5
|
this.animation = new AnimationOptions();
|
package/esm/OrbitUpdater.js
CHANGED
|
@@ -1,32 +1,19 @@
|
|
|
1
|
-
import { getRangeValue,
|
|
2
|
-
import { Orbit } from "./Options/Classes/Orbit";
|
|
3
|
-
|
|
4
|
-
if (width <= 0) {
|
|
5
|
-
return;
|
|
6
|
-
}
|
|
7
|
-
const pos = particle.getPosition();
|
|
8
|
-
if (fillColorValue) {
|
|
9
|
-
context.strokeStyle = getStyleFromHsl(fillColorValue, opacity);
|
|
10
|
-
}
|
|
11
|
-
context.lineWidth = width;
|
|
12
|
-
const rotationRadian = (rotation * Math.PI) / 180;
|
|
13
|
-
context.beginPath();
|
|
14
|
-
context.ellipse(pos.x, pos.y, radius / 2, radius * 2, rotationRadian, start, end);
|
|
15
|
-
context.stroke();
|
|
16
|
-
}
|
|
1
|
+
import { getRangeValue, rangeColorToHsl, } from "@tsparticles/engine";
|
|
2
|
+
import { Orbit } from "./Options/Classes/Orbit.js";
|
|
3
|
+
import { drawEllipse } from "./Utils.js";
|
|
17
4
|
export class OrbitUpdater {
|
|
18
5
|
constructor(container) {
|
|
19
6
|
this.container = container;
|
|
20
7
|
}
|
|
21
8
|
afterDraw(particle) {
|
|
22
9
|
const orbitOptions = particle.options.orbit;
|
|
23
|
-
if (orbitOptions
|
|
10
|
+
if (orbitOptions?.enable) {
|
|
24
11
|
this.drawOrbit(particle, "front");
|
|
25
12
|
}
|
|
26
13
|
}
|
|
27
14
|
beforeDraw(particle) {
|
|
28
15
|
const orbitOptions = particle.options.orbit;
|
|
29
|
-
if (orbitOptions
|
|
16
|
+
if (orbitOptions?.enable) {
|
|
30
17
|
this.drawOrbit(particle, "back");
|
|
31
18
|
}
|
|
32
19
|
}
|
|
@@ -47,13 +34,12 @@ export class OrbitUpdater {
|
|
|
47
34
|
end = 2 * Math.PI;
|
|
48
35
|
}
|
|
49
36
|
container.canvas.draw((ctx) => {
|
|
50
|
-
|
|
51
|
-
drawEllipse(ctx, particle, (_a = particle.orbitColor) !== null && _a !== void 0 ? _a : particle.getFillColor(), (_c = (_b = particle.retina.orbitRadius) !== null && _b !== void 0 ? _b : container.retina.orbitRadius) !== null && _c !== void 0 ? _c : particle.getRadius(), (_d = particle.orbitOpacity) !== null && _d !== void 0 ? _d : 1, (_e = particle.orbitWidth) !== null && _e !== void 0 ? _e : 1, ((_f = particle.orbitRotation) !== null && _f !== void 0 ? _f : 0) * container.retina.pixelRatio, start, end);
|
|
37
|
+
drawEllipse(ctx, particle, particle.orbitColor ?? particle.getFillColor(), particle.retina.orbitRadius ?? container.retina.orbitRadius ?? particle.getRadius(), particle.orbitOpacity ?? 1, particle.orbitWidth ?? 1, (particle.orbitRotation ?? 0) * container.retina.pixelRatio, start, end);
|
|
52
38
|
});
|
|
53
39
|
}
|
|
54
40
|
init(particle) {
|
|
55
41
|
const container = this.container, particlesOptions = particle.options, orbitOptions = particlesOptions.orbit;
|
|
56
|
-
if (!
|
|
42
|
+
if (!orbitOptions?.enable) {
|
|
57
43
|
return;
|
|
58
44
|
}
|
|
59
45
|
particle.orbitRotation = getRangeValue(orbitOptions.rotation.value);
|
|
@@ -68,26 +54,24 @@ export class OrbitUpdater {
|
|
|
68
54
|
particle.orbitOpacity = getRangeValue(orbitOptions.opacity);
|
|
69
55
|
}
|
|
70
56
|
isEnabled(particle) {
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
return !particle.destroyed && !particle.spawning && !!(orbitAnimations === null || orbitAnimations === void 0 ? void 0 : orbitAnimations.enable);
|
|
57
|
+
const orbitAnimations = particle.options.orbit?.animation;
|
|
58
|
+
return !particle.destroyed && !particle.spawning && !!orbitAnimations?.enable;
|
|
74
59
|
}
|
|
75
60
|
loadOptions(options, ...sources) {
|
|
76
61
|
if (!options.orbit) {
|
|
77
62
|
options.orbit = new Orbit();
|
|
78
63
|
}
|
|
79
64
|
for (const source of sources) {
|
|
80
|
-
options.orbit.load(source
|
|
65
|
+
options.orbit.load(source?.orbit);
|
|
81
66
|
}
|
|
82
67
|
}
|
|
83
68
|
update(particle, delta) {
|
|
84
|
-
var _a;
|
|
85
69
|
if (!this.isEnabled(particle)) {
|
|
86
70
|
return;
|
|
87
71
|
}
|
|
88
72
|
if (particle.orbitRotation === undefined) {
|
|
89
73
|
particle.orbitRotation = 0;
|
|
90
74
|
}
|
|
91
|
-
particle.orbitRotation += (
|
|
75
|
+
particle.orbitRotation += (particle.orbitAnimationSpeed ?? 0 / (Math.PI * 2)) * delta.factor;
|
|
92
76
|
}
|
|
93
77
|
}
|
package/esm/Types.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/esm/Utils.js
ADDED
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { getStyleFromHsl } from "@tsparticles/engine";
|
|
2
|
+
export function drawEllipse(context, particle, fillColorValue, radius, opacity, width, rotation, start, end) {
|
|
3
|
+
if (width <= 0) {
|
|
4
|
+
return;
|
|
5
|
+
}
|
|
6
|
+
const pos = particle.getPosition();
|
|
7
|
+
if (fillColorValue) {
|
|
8
|
+
context.strokeStyle = getStyleFromHsl(fillColorValue, opacity);
|
|
9
|
+
}
|
|
10
|
+
context.lineWidth = width;
|
|
11
|
+
const rotationRadian = (rotation * Math.PI) / 180;
|
|
12
|
+
context.beginPath();
|
|
13
|
+
context.ellipse(pos.x, pos.y, radius / 2, radius * 2, rotationRadian, start, end);
|
|
14
|
+
context.stroke();
|
|
15
|
+
}
|
package/esm/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { OrbitUpdater } from "./OrbitUpdater";
|
|
2
|
-
export function loadOrbitUpdater(engine) {
|
|
3
|
-
engine.addParticleUpdater("orbit", (container) => new OrbitUpdater(container));
|
|
1
|
+
import { OrbitUpdater } from "./OrbitUpdater.js";
|
|
2
|
+
export async function loadOrbitUpdater(engine, refresh = true) {
|
|
3
|
+
await engine.addParticleUpdater("orbit", (container) => new OrbitUpdater(container), 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-orbit",
|
|
3
|
-
"version": "3.0.0-
|
|
3
|
+
"version": "3.0.0-beta.1",
|
|
4
4
|
"description": "tsParticles particles orbit updater",
|
|
5
5
|
"homepage": "https://particles.js.org",
|
|
6
6
|
"repository": {
|
|
@@ -73,20 +73,37 @@
|
|
|
73
73
|
"type": "github",
|
|
74
74
|
"url": "https://github.com/sponsors/matteobruni"
|
|
75
75
|
},
|
|
76
|
+
{
|
|
77
|
+
"type": "github",
|
|
78
|
+
"url": "https://github.com/sponsors/tsparticles"
|
|
79
|
+
},
|
|
76
80
|
{
|
|
77
81
|
"type": "buymeacoffee",
|
|
78
82
|
"url": "https://www.buymeacoffee.com/matteobruni"
|
|
79
83
|
}
|
|
80
84
|
],
|
|
81
|
-
"
|
|
85
|
+
"sideEffects": false,
|
|
82
86
|
"jsdelivr": "tsparticles.updater.orbit.min.js",
|
|
83
87
|
"unpkg": "tsparticles.updater.orbit.min.js",
|
|
88
|
+
"browser": "browser/index.js",
|
|
89
|
+
"main": "cjs/index.js",
|
|
84
90
|
"module": "esm/index.js",
|
|
85
91
|
"types": "types/index.d.ts",
|
|
86
|
-
"
|
|
87
|
-
"
|
|
92
|
+
"exports": {
|
|
93
|
+
".": {
|
|
94
|
+
"types": "./types/index.d.ts",
|
|
95
|
+
"browser": "./browser/index.js",
|
|
96
|
+
"import": "./esm/index.js",
|
|
97
|
+
"require": "./cjs/index.js",
|
|
98
|
+
"umd": "./umd/index.js",
|
|
99
|
+
"default": "./cjs/index.js"
|
|
100
|
+
},
|
|
101
|
+
"./package.json": "./package.json"
|
|
88
102
|
},
|
|
89
103
|
"dependencies": {
|
|
90
|
-
"@tsparticles/engine": "^3.0.0-
|
|
104
|
+
"@tsparticles/engine": "^3.0.0-beta.1"
|
|
105
|
+
},
|
|
106
|
+
"publishConfig": {
|
|
107
|
+
"access": "public"
|
|
91
108
|
}
|
|
92
|
-
}
|
|
109
|
+
}
|