@tsparticles/plugin-absorbers 3.9.1 → 4.0.0-alpha.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/47.min.js +2 -0
- package/47.min.js.LICENSE.txt +1 -0
- package/browser/AbsorberInstance.js +4 -7
- package/browser/Absorbers.js +5 -4
- package/browser/index.js +6 -5
- package/cjs/AbsorberContainer.js +1 -2
- package/cjs/AbsorberInstance.js +28 -35
- package/cjs/Absorbers.js +12 -15
- package/cjs/AbsorbersPlugin.js +12 -16
- package/cjs/Enums/AbsorberClickMode.js +2 -5
- package/cjs/Options/Classes/Absorber.js +9 -13
- package/cjs/Options/Classes/AbsorberSize.js +6 -10
- package/cjs/Options/Classes/AbsorberSizeLimit.js +3 -7
- package/cjs/Options/Interfaces/IAbsorber.js +1 -2
- package/cjs/Options/Interfaces/IAbsorberSize.js +1 -2
- package/cjs/Options/Interfaces/IAbsorberSizeLimit.js +1 -2
- package/cjs/index.js +7 -23
- package/cjs/types.js +1 -2
- package/dist_browser_AbsorbersPlugin_js.js +80 -0
- package/esm/AbsorberInstance.js +4 -7
- package/esm/Absorbers.js +5 -4
- package/esm/index.js +6 -5
- package/package.json +4 -3
- package/report.html +5 -4
- package/tsparticles.plugin.absorbers.js +212 -83
- package/tsparticles.plugin.absorbers.min.js +1 -1
- package/tsparticles.plugin.absorbers.min.js.LICENSE.txt +1 -1
- package/types/AbsorberInstance.d.ts +1 -3
- package/types/Absorbers.d.ts +1 -1
- package/types/index.d.ts +2 -2
- package/umd/AbsorberInstance.js +4 -7
- package/umd/Absorbers.js +6 -5
- package/umd/index.js +30 -6
package/47.min.js
ADDED
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
/*! For license information please see 47.min.js.LICENSE.txt */
|
|
2
|
+
(this.webpackChunk_tsparticles_plugin_absorbers=this.webpackChunk_tsparticles_plugin_absorbers||[]).push([[47],{47(i,t,s){s.d(t,{AbsorbersPlugin:()=>d});var o=s(303);class e{constructor(){this.radius=0,this.mass=0}load(i){(0,o.isNull)(i)||(void 0!==i.mass&&(this.mass=i.mass),void 0!==i.radius&&(this.radius=i.radius))}}class r extends o.ValueWithRandom{constructor(){super(),this.density=5,this.value=50,this.limit=new e}load(i){(0,o.isNull)(i)||(super.load(i),void 0!==i.density&&(this.density=i.density),(0,o.isNumber)(i.limit)?this.limit.radius=i.limit:this.limit.load(i.limit))}}class n{constructor(){this.color=new o.OptionsColor,this.color.value="#000000",this.draggable=!1,this.opacity=1,this.destroy=!0,this.orbits=!1,this.size=new r}load(i){(0,o.isNull)(i)||(void 0!==i.color&&(this.color=o.OptionsColor.create(this.color,i.color)),void 0!==i.draggable&&(this.draggable=i.draggable),this.name=i.name,void 0!==i.opacity&&(this.opacity=i.opacity),void 0!==i.position&&(this.position={},void 0!==i.position.x&&(this.position.x=(0,o.setRangeValue)(i.position.x)),void 0!==i.position.y&&(this.position.y=(0,o.setRangeValue)(i.position.y))),void 0!==i.size&&this.size.load(i.size),void 0!==i.destroy&&(this.destroy=i.destroy),void 0!==i.orbits&&(this.orbits=i.orbits))}}var a=s(633);const c=2*Math.PI;class h{constructor(i,t,s,e){this._calcPosition=()=>{const i=(0,o.calcPositionOrRandomFromSizeRanged)({size:this._container.canvas.size,position:this.options.position});return o.Vector.create(i.x,i.y)},this._updateParticlePosition=(i,t)=>{if(i.destroyed)return;const s=this._container,e=s.canvas.size;if(i.needsNewPosition){const t=(0,o.calcPositionOrRandomFromSize)({size:e});i.position.setTo(t),i.velocity.setTo(i.initialVelocity),i.absorberOrbit=void 0,i.needsNewPosition=!1}if(this.options.orbits){if(void 0===i.absorberOrbit&&(i.absorberOrbit=o.Vector.origin,i.absorberOrbit.length=(0,o.getDistance)(i.getPosition(),this.position),i.absorberOrbit.angle=(0,o.getRandom)()*c),i.absorberOrbit.length<=this.size&&!this.options.destroy){const t=Math.min(e.width,e.height),s=1,r=.1,n=.2;i.absorberOrbit.length=t*(s+((0,o.getRandom)()*n-r))}i.absorberOrbitDirection??=i.velocity.x>=0?o.RotateDirection.clockwise:o.RotateDirection.counterClockwise;const r=i.absorberOrbit.length,n=i.absorberOrbit.angle,a=i.absorberOrbitDirection;i.velocity.setTo(o.Vector.origin);const h={x:a===o.RotateDirection.clockwise?Math.cos:Math.sin,y:a===o.RotateDirection.clockwise?Math.sin:Math.cos};i.position.x=this.position.x+r*h.x(n),i.position.y=this.position.y+r*h.y(n),i.absorberOrbit.length-=t.length,i.absorberOrbit.angle+=(i.retina.moveSpeed??0)*s.retina.pixelRatio/o.percentDenominator*s.retina.reduceFactor}else{const s=o.Vector.origin;s.length=t.length,s.angle=t.angle,i.velocity.addTo(s)}},this._container=i,this._engine=t,this.initialPosition=e?o.Vector.create(e.x,e.y):void 0,s instanceof n?this.options=s:(this.options=new n,this.options.load(s)),this.dragging=!1,this.name=this.options.name,this.opacity=this.options.opacity,this.size=(0,o.getRangeValue)(this.options.size.value)*i.retina.pixelRatio,this.mass=this.size*this.options.size.density*i.retina.reduceFactor;const r=this.options.size.limit;this.limit={radius:r.radius*i.retina.pixelRatio*i.retina.reduceFactor,mass:r.mass},this.color=(0,o.rangeColorToRgb)(this._engine,this.options.color)??{b:0,g:0,r:0},this.position=this.initialPosition?.copy()??this._calcPosition()}attract(i){const t=this._container,s=this.options;if(s.draggable){const i=t.interactivity.mouse;if(i.clicking&&i.downPosition){(0,o.getDistance)(this.position,i.downPosition)<=this.size&&(this.dragging=!0)}else this.dragging=!1;this.dragging&&i.position&&(this.position.x=i.position.x,this.position.y=i.position.y)}const e=i.getPosition(),{dx:r,dy:n,distance:a}=(0,o.getDistances)(this.position,e),c=o.Vector.create(r,n);if(c.length=this.mass/Math.pow(a,2)*t.retina.reduceFactor,a<this.size+i.getRadius()){const o=.033*i.getRadius()*t.retina.pixelRatio;this.size>i.getRadius()&&a<this.size-i.getRadius()||void 0!==i.absorberOrbit&&i.absorberOrbit.length<0?s.destroy?i.destroy():(i.needsNewPosition=!0,this._updateParticlePosition(i,c)):(s.destroy&&(i.size.value-=o),this._updateParticlePosition(i,c)),(this.limit.radius<=0||this.size<this.limit.radius)&&(this.size+=o),(this.limit.mass<=0||this.mass<this.limit.mass)&&(this.mass+=o*this.options.size.density*t.retina.reduceFactor)}else this._updateParticlePosition(i,c)}draw(i){i.translate(this.position.x,this.position.y),i.beginPath(),i.arc(o.originPoint.x,o.originPoint.y,this.size,0,c,!1),i.closePath(),i.fillStyle=(0,o.getStyleFromRgb)(this.color,this._container.hdr,this.opacity),i.fill()}resize(){const i=this.initialPosition;this.position=i&&(0,o.isPointInside)(i,this._container.canvas.size,o.Vector.origin)?i:this._calcPosition()}}class l{constructor(i,t){this._container=i,this._engine=t,this.array=[],this.absorbers=[],this.interactivityAbsorbers=[],i.getAbsorber=i=>void 0===i||(0,o.isNumber)(i)?this.array[i??0]:this.array.find((t=>t.name===i)),i.addAbsorber=async(i,t)=>this.addAbsorber(i,t)}async addAbsorber(i,t){const s=new h(this._container,this._engine,i,t);return this.array.push(s),Promise.resolve(s)}draw(i){for(const t of this.array)t.draw(i)}handleClickMode(i){const t=this.interactivityAbsorbers;if(i===a.w.absorber){const i=(0,o.itemFromSingleOrMultiple)(t)??new n,s=this._container.interactivity.mouse.clickPosition;this.addAbsorber(i,s)}}async init(){this.absorbers=this._container.actualOptions.absorbers,this.interactivityAbsorbers=this._container.actualOptions.interactivity.modes.absorbers;const i=(0,o.executeOnSingleOrMultiple)(this.absorbers,(async i=>{await this.addAbsorber(i)}));i instanceof Array?await Promise.all(i):await i}particleUpdate(i){for(const t of this.array)if(t.attract(i),i.destroyed)break}removeAbsorber(i){const t=this.array.indexOf(i);t>=0&&this.array.splice(t,1)}resize(){for(const i of this.array)i.resize()}stop(){this.array=[]}}class d{constructor(i){this.id="absorbers",this._engine=i}async getPlugin(i){return Promise.resolve(new l(i,this._engine))}loadOptions(i,t){(this.needsPlugin(i)||this.needsPlugin(t))&&(t?.absorbers&&(i.absorbers=(0,o.executeOnSingleOrMultiple)(t.absorbers,(i=>{const t=new n;return t.load(i),t}))),i.interactivity.modes.absorbers=(0,o.executeOnSingleOrMultiple)(t?.interactivity?.modes?.absorbers,(i=>{const t=new n;return t.load(i),t})))}needsPlugin(i){if(!i)return!1;const t=i.absorbers;return(0,o.isArray)(t)?!!t.length:!!t||!(!i.interactivity?.events?.onClick?.mode||!(0,o.isInArray)(a.w.absorber,i.interactivity.events.onClick.mode))}}}}]);
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
/*! tsParticles Absorbers Plugin v4.0.0-alpha.1 by Matteo Bruni */
|
|
@@ -2,7 +2,7 @@ import { RotateDirection, Vector, calcPositionOrRandomFromSize, calcPositionOrRa
|
|
|
2
2
|
import { Absorber } from "./Options/Classes/Absorber.js";
|
|
3
3
|
const squareExp = 2, absorbFactor = 0.033, minOrbitLength = 0, minRadius = 0, minMass = 0, minAngle = 0, double = 2, maxAngle = Math.PI * double, minVelocity = 0;
|
|
4
4
|
export class AbsorberInstance {
|
|
5
|
-
constructor(
|
|
5
|
+
constructor(container, engine, options, position) {
|
|
6
6
|
this._calcPosition = () => {
|
|
7
7
|
const exactPosition = calcPositionOrRandomFromSizeRanged({
|
|
8
8
|
size: this._container.canvas.size,
|
|
@@ -32,10 +32,8 @@ export class AbsorberInstance {
|
|
|
32
32
|
const minSize = Math.min(canvasSize.width, canvasSize.height), offset = 1, randomOffset = 0.1, randomFactor = 0.2;
|
|
33
33
|
particle.absorberOrbit.length = minSize * (offset + (getRandom() * randomFactor - randomOffset));
|
|
34
34
|
}
|
|
35
|
-
|
|
36
|
-
particle.
|
|
37
|
-
particle.velocity.x >= minVelocity ? RotateDirection.clockwise : RotateDirection.counterClockwise;
|
|
38
|
-
}
|
|
35
|
+
particle.absorberOrbitDirection ??=
|
|
36
|
+
particle.velocity.x >= minVelocity ? RotateDirection.clockwise : RotateDirection.counterClockwise;
|
|
39
37
|
const orbitRadius = particle.absorberOrbit.length, orbitAngle = particle.absorberOrbit.angle, orbitDirection = particle.absorberOrbitDirection;
|
|
40
38
|
particle.velocity.setTo(Vector.origin);
|
|
41
39
|
const updateFunc = {
|
|
@@ -56,7 +54,6 @@ export class AbsorberInstance {
|
|
|
56
54
|
particle.velocity.addTo(addV);
|
|
57
55
|
}
|
|
58
56
|
};
|
|
59
|
-
this._absorbers = absorbers;
|
|
60
57
|
this._container = container;
|
|
61
58
|
this._engine = engine;
|
|
62
59
|
this.initialPosition = position ? Vector.create(position.x, position.y) : undefined;
|
|
@@ -138,7 +135,7 @@ export class AbsorberInstance {
|
|
|
138
135
|
context.beginPath();
|
|
139
136
|
context.arc(originPoint.x, originPoint.y, this.size, minAngle, maxAngle, false);
|
|
140
137
|
context.closePath();
|
|
141
|
-
context.fillStyle = getStyleFromRgb(this.color, this.opacity);
|
|
138
|
+
context.fillStyle = getStyleFromRgb(this.color, this._container.hdr, this.opacity);
|
|
142
139
|
context.fill();
|
|
143
140
|
}
|
|
144
141
|
resize() {
|
package/browser/Absorbers.js
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { executeOnSingleOrMultiple, isNumber, itemFromSingleOrMultiple, } from "@tsparticles/engine";
|
|
2
|
+
import { Absorber } from "./Options/Classes/Absorber.js";
|
|
2
3
|
import { AbsorberClickMode } from "./Enums/AbsorberClickMode.js";
|
|
3
4
|
import { AbsorberInstance } from "./AbsorberInstance.js";
|
|
4
5
|
const defaultIndex = 0;
|
|
@@ -15,7 +16,7 @@ export class Absorbers {
|
|
|
15
16
|
container.addAbsorber = async (options, position) => this.addAbsorber(options, position);
|
|
16
17
|
}
|
|
17
18
|
async addAbsorber(options, position) {
|
|
18
|
-
const absorber = new AbsorberInstance(this
|
|
19
|
+
const absorber = new AbsorberInstance(this._container, this._engine, options, position);
|
|
19
20
|
this.array.push(absorber);
|
|
20
21
|
return Promise.resolve(absorber);
|
|
21
22
|
}
|
|
@@ -25,10 +26,10 @@ export class Absorbers {
|
|
|
25
26
|
}
|
|
26
27
|
}
|
|
27
28
|
handleClickMode(mode) {
|
|
28
|
-
const
|
|
29
|
+
const modeAbsorbers = this.interactivityAbsorbers;
|
|
29
30
|
if (mode === AbsorberClickMode.absorber) {
|
|
30
|
-
const absorbersModeOptions = itemFromSingleOrMultiple(modeAbsorbers)
|
|
31
|
-
void this.addAbsorber(
|
|
31
|
+
const absorbersModeOptions = itemFromSingleOrMultiple(modeAbsorbers) ?? new Absorber(), aPosition = this._container.interactivity.mouse.clickPosition;
|
|
32
|
+
void this.addAbsorber(absorbersModeOptions, aPosition);
|
|
32
33
|
}
|
|
33
34
|
}
|
|
34
35
|
async init() {
|
package/browser/index.js
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
engine.
|
|
4
|
-
|
|
1
|
+
export function loadAbsorbersPlugin(engine) {
|
|
2
|
+
engine.checkVersion("4.0.0-alpha.1");
|
|
3
|
+
engine.register(async (e) => {
|
|
4
|
+
const { AbsorbersPlugin } = await import("./AbsorbersPlugin.js");
|
|
5
|
+
e.addPlugin(new AbsorbersPlugin(e));
|
|
6
|
+
});
|
|
5
7
|
}
|
|
6
|
-
export * from "./AbsorberContainer.js";
|
|
7
8
|
export * from "./Enums/AbsorberClickMode.js";
|
package/cjs/AbsorberContainer.js
CHANGED
|
@@ -1,2 +1 @@
|
|
|
1
|
-
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
1
|
+
export {};
|
package/cjs/AbsorberInstance.js
CHANGED
|
@@ -1,17 +1,14 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
exports.AbsorberInstance = void 0;
|
|
4
|
-
const engine_1 = require("@tsparticles/engine");
|
|
5
|
-
const Absorber_js_1 = require("./Options/Classes/Absorber.js");
|
|
1
|
+
import { RotateDirection, Vector, calcPositionOrRandomFromSize, calcPositionOrRandomFromSizeRanged, getDistance, getDistances, getRandom, getRangeValue, getStyleFromRgb, isPointInside, originPoint, percentDenominator, rangeColorToRgb, } from "@tsparticles/engine";
|
|
2
|
+
import { Absorber } from "./Options/Classes/Absorber.js";
|
|
6
3
|
const squareExp = 2, absorbFactor = 0.033, minOrbitLength = 0, minRadius = 0, minMass = 0, minAngle = 0, double = 2, maxAngle = Math.PI * double, minVelocity = 0;
|
|
7
|
-
class AbsorberInstance {
|
|
8
|
-
constructor(
|
|
4
|
+
export class AbsorberInstance {
|
|
5
|
+
constructor(container, engine, options, position) {
|
|
9
6
|
this._calcPosition = () => {
|
|
10
|
-
const exactPosition =
|
|
7
|
+
const exactPosition = calcPositionOrRandomFromSizeRanged({
|
|
11
8
|
size: this._container.canvas.size,
|
|
12
9
|
position: this.options.position,
|
|
13
10
|
});
|
|
14
|
-
return
|
|
11
|
+
return Vector.create(exactPosition.x, exactPosition.y);
|
|
15
12
|
};
|
|
16
13
|
this._updateParticlePosition = (particle, v) => {
|
|
17
14
|
if (particle.destroyed) {
|
|
@@ -19,7 +16,7 @@ class AbsorberInstance {
|
|
|
19
16
|
}
|
|
20
17
|
const container = this._container, canvasSize = container.canvas.size;
|
|
21
18
|
if (particle.needsNewPosition) {
|
|
22
|
-
const newPosition =
|
|
19
|
+
const newPosition = calcPositionOrRandomFromSize({ size: canvasSize });
|
|
23
20
|
particle.position.setTo(newPosition);
|
|
24
21
|
particle.velocity.setTo(particle.initialVelocity);
|
|
25
22
|
particle.absorberOrbit = undefined;
|
|
@@ -27,60 +24,57 @@ class AbsorberInstance {
|
|
|
27
24
|
}
|
|
28
25
|
if (this.options.orbits) {
|
|
29
26
|
if (particle.absorberOrbit === undefined) {
|
|
30
|
-
particle.absorberOrbit =
|
|
31
|
-
particle.absorberOrbit.length =
|
|
32
|
-
particle.absorberOrbit.angle =
|
|
27
|
+
particle.absorberOrbit = Vector.origin;
|
|
28
|
+
particle.absorberOrbit.length = getDistance(particle.getPosition(), this.position);
|
|
29
|
+
particle.absorberOrbit.angle = getRandom() * maxAngle;
|
|
33
30
|
}
|
|
34
31
|
if (particle.absorberOrbit.length <= this.size && !this.options.destroy) {
|
|
35
32
|
const minSize = Math.min(canvasSize.width, canvasSize.height), offset = 1, randomOffset = 0.1, randomFactor = 0.2;
|
|
36
|
-
particle.absorberOrbit.length = minSize * (offset + (
|
|
37
|
-
}
|
|
38
|
-
if (particle.absorberOrbitDirection === undefined) {
|
|
39
|
-
particle.absorberOrbitDirection =
|
|
40
|
-
particle.velocity.x >= minVelocity ? engine_1.RotateDirection.clockwise : engine_1.RotateDirection.counterClockwise;
|
|
33
|
+
particle.absorberOrbit.length = minSize * (offset + (getRandom() * randomFactor - randomOffset));
|
|
41
34
|
}
|
|
35
|
+
particle.absorberOrbitDirection ??=
|
|
36
|
+
particle.velocity.x >= minVelocity ? RotateDirection.clockwise : RotateDirection.counterClockwise;
|
|
42
37
|
const orbitRadius = particle.absorberOrbit.length, orbitAngle = particle.absorberOrbit.angle, orbitDirection = particle.absorberOrbitDirection;
|
|
43
|
-
particle.velocity.setTo(
|
|
38
|
+
particle.velocity.setTo(Vector.origin);
|
|
44
39
|
const updateFunc = {
|
|
45
|
-
x: orbitDirection ===
|
|
46
|
-
y: orbitDirection ===
|
|
40
|
+
x: orbitDirection === RotateDirection.clockwise ? Math.cos : Math.sin,
|
|
41
|
+
y: orbitDirection === RotateDirection.clockwise ? Math.sin : Math.cos,
|
|
47
42
|
};
|
|
48
43
|
particle.position.x = this.position.x + orbitRadius * updateFunc.x(orbitAngle);
|
|
49
44
|
particle.position.y = this.position.y + orbitRadius * updateFunc.y(orbitAngle);
|
|
50
45
|
particle.absorberOrbit.length -= v.length;
|
|
51
46
|
particle.absorberOrbit.angle +=
|
|
52
|
-
(((particle.retina.moveSpeed ?? minVelocity) * container.retina.pixelRatio) /
|
|
47
|
+
(((particle.retina.moveSpeed ?? minVelocity) * container.retina.pixelRatio) / percentDenominator) *
|
|
53
48
|
container.retina.reduceFactor;
|
|
54
49
|
}
|
|
55
50
|
else {
|
|
56
|
-
const addV =
|
|
51
|
+
const addV = Vector.origin;
|
|
57
52
|
addV.length = v.length;
|
|
58
53
|
addV.angle = v.angle;
|
|
59
54
|
particle.velocity.addTo(addV);
|
|
60
55
|
}
|
|
61
56
|
};
|
|
62
|
-
this._absorbers = absorbers;
|
|
63
57
|
this._container = container;
|
|
64
58
|
this._engine = engine;
|
|
65
|
-
this.initialPosition = position ?
|
|
66
|
-
if (options instanceof
|
|
59
|
+
this.initialPosition = position ? Vector.create(position.x, position.y) : undefined;
|
|
60
|
+
if (options instanceof Absorber) {
|
|
67
61
|
this.options = options;
|
|
68
62
|
}
|
|
69
63
|
else {
|
|
70
|
-
this.options = new
|
|
64
|
+
this.options = new Absorber();
|
|
71
65
|
this.options.load(options);
|
|
72
66
|
}
|
|
73
67
|
this.dragging = false;
|
|
74
68
|
this.name = this.options.name;
|
|
75
69
|
this.opacity = this.options.opacity;
|
|
76
|
-
this.size =
|
|
70
|
+
this.size = getRangeValue(this.options.size.value) * container.retina.pixelRatio;
|
|
77
71
|
this.mass = this.size * this.options.size.density * container.retina.reduceFactor;
|
|
78
72
|
const limit = this.options.size.limit;
|
|
79
73
|
this.limit = {
|
|
80
74
|
radius: limit.radius * container.retina.pixelRatio * container.retina.reduceFactor,
|
|
81
75
|
mass: limit.mass,
|
|
82
76
|
};
|
|
83
|
-
this.color =
|
|
77
|
+
this.color = rangeColorToRgb(this._engine, this.options.color) ?? {
|
|
84
78
|
b: 0,
|
|
85
79
|
g: 0,
|
|
86
80
|
r: 0,
|
|
@@ -92,7 +86,7 @@ class AbsorberInstance {
|
|
|
92
86
|
if (options.draggable) {
|
|
93
87
|
const mouse = container.interactivity.mouse;
|
|
94
88
|
if (mouse.clicking && mouse.downPosition) {
|
|
95
|
-
const mouseDist =
|
|
89
|
+
const mouseDist = getDistance(this.position, mouse.downPosition);
|
|
96
90
|
if (mouseDist <= this.size) {
|
|
97
91
|
this.dragging = true;
|
|
98
92
|
}
|
|
@@ -105,7 +99,7 @@ class AbsorberInstance {
|
|
|
105
99
|
this.position.y = mouse.position.y;
|
|
106
100
|
}
|
|
107
101
|
}
|
|
108
|
-
const pos = particle.getPosition(), { dx, dy, distance } =
|
|
102
|
+
const pos = particle.getPosition(), { dx, dy, distance } = getDistances(this.position, pos), v = Vector.create(dx, dy);
|
|
109
103
|
v.length = (this.mass / Math.pow(distance, squareExp)) * container.retina.reduceFactor;
|
|
110
104
|
if (distance < this.size + particle.getRadius()) {
|
|
111
105
|
const sizeFactor = particle.getRadius() * absorbFactor * container.retina.pixelRatio;
|
|
@@ -139,17 +133,16 @@ class AbsorberInstance {
|
|
|
139
133
|
draw(context) {
|
|
140
134
|
context.translate(this.position.x, this.position.y);
|
|
141
135
|
context.beginPath();
|
|
142
|
-
context.arc(
|
|
136
|
+
context.arc(originPoint.x, originPoint.y, this.size, minAngle, maxAngle, false);
|
|
143
137
|
context.closePath();
|
|
144
|
-
context.fillStyle =
|
|
138
|
+
context.fillStyle = getStyleFromRgb(this.color, this._container.hdr, this.opacity);
|
|
145
139
|
context.fill();
|
|
146
140
|
}
|
|
147
141
|
resize() {
|
|
148
142
|
const initialPosition = this.initialPosition;
|
|
149
143
|
this.position =
|
|
150
|
-
initialPosition &&
|
|
144
|
+
initialPosition && isPointInside(initialPosition, this._container.canvas.size, Vector.origin)
|
|
151
145
|
? initialPosition
|
|
152
146
|
: this._calcPosition();
|
|
153
147
|
}
|
|
154
148
|
}
|
|
155
|
-
exports.AbsorberInstance = AbsorberInstance;
|
package/cjs/Absorbers.js
CHANGED
|
@@ -1,24 +1,22 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
const AbsorberClickMode_js_1 = require("./Enums/AbsorberClickMode.js");
|
|
6
|
-
const AbsorberInstance_js_1 = require("./AbsorberInstance.js");
|
|
1
|
+
import { executeOnSingleOrMultiple, isNumber, itemFromSingleOrMultiple, } from "@tsparticles/engine";
|
|
2
|
+
import { Absorber } from "./Options/Classes/Absorber.js";
|
|
3
|
+
import { AbsorberClickMode } from "./Enums/AbsorberClickMode.js";
|
|
4
|
+
import { AbsorberInstance } from "./AbsorberInstance.js";
|
|
7
5
|
const defaultIndex = 0;
|
|
8
|
-
class Absorbers {
|
|
6
|
+
export class Absorbers {
|
|
9
7
|
constructor(container, engine) {
|
|
10
8
|
this._container = container;
|
|
11
9
|
this._engine = engine;
|
|
12
10
|
this.array = [];
|
|
13
11
|
this.absorbers = [];
|
|
14
12
|
this.interactivityAbsorbers = [];
|
|
15
|
-
container.getAbsorber = (idxOrName) => idxOrName === undefined ||
|
|
13
|
+
container.getAbsorber = (idxOrName) => idxOrName === undefined || isNumber(idxOrName)
|
|
16
14
|
? this.array[idxOrName ?? defaultIndex]
|
|
17
15
|
: this.array.find(t => t.name === idxOrName);
|
|
18
16
|
container.addAbsorber = async (options, position) => this.addAbsorber(options, position);
|
|
19
17
|
}
|
|
20
18
|
async addAbsorber(options, position) {
|
|
21
|
-
const absorber = new
|
|
19
|
+
const absorber = new AbsorberInstance(this._container, this._engine, options, position);
|
|
22
20
|
this.array.push(absorber);
|
|
23
21
|
return Promise.resolve(absorber);
|
|
24
22
|
}
|
|
@@ -28,16 +26,16 @@ class Absorbers {
|
|
|
28
26
|
}
|
|
29
27
|
}
|
|
30
28
|
handleClickMode(mode) {
|
|
31
|
-
const
|
|
32
|
-
if (mode ===
|
|
33
|
-
const absorbersModeOptions =
|
|
34
|
-
void this.addAbsorber(
|
|
29
|
+
const modeAbsorbers = this.interactivityAbsorbers;
|
|
30
|
+
if (mode === AbsorberClickMode.absorber) {
|
|
31
|
+
const absorbersModeOptions = itemFromSingleOrMultiple(modeAbsorbers) ?? new Absorber(), aPosition = this._container.interactivity.mouse.clickPosition;
|
|
32
|
+
void this.addAbsorber(absorbersModeOptions, aPosition);
|
|
35
33
|
}
|
|
36
34
|
}
|
|
37
35
|
async init() {
|
|
38
36
|
this.absorbers = this._container.actualOptions.absorbers;
|
|
39
37
|
this.interactivityAbsorbers = this._container.actualOptions.interactivity.modes.absorbers;
|
|
40
|
-
const promises =
|
|
38
|
+
const promises = executeOnSingleOrMultiple(this.absorbers, async (absorber) => {
|
|
41
39
|
await this.addAbsorber(absorber);
|
|
42
40
|
});
|
|
43
41
|
if (promises instanceof Array) {
|
|
@@ -70,4 +68,3 @@ class Absorbers {
|
|
|
70
68
|
this.array = [];
|
|
71
69
|
}
|
|
72
70
|
}
|
|
73
|
-
exports.Absorbers = Absorbers;
|
package/cjs/AbsorbersPlugin.js
CHANGED
|
@@ -1,31 +1,28 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
const AbsorberClickMode_js_1 = require("./Enums/AbsorberClickMode.js");
|
|
7
|
-
const Absorbers_js_1 = require("./Absorbers.js");
|
|
8
|
-
class AbsorbersPlugin {
|
|
1
|
+
import { executeOnSingleOrMultiple, isArray, isInArray, } from "@tsparticles/engine";
|
|
2
|
+
import { Absorber } from "./Options/Classes/Absorber.js";
|
|
3
|
+
import { AbsorberClickMode } from "./Enums/AbsorberClickMode.js";
|
|
4
|
+
import { Absorbers } from "./Absorbers.js";
|
|
5
|
+
export class AbsorbersPlugin {
|
|
9
6
|
constructor(engine) {
|
|
10
7
|
this.id = "absorbers";
|
|
11
8
|
this._engine = engine;
|
|
12
9
|
}
|
|
13
10
|
async getPlugin(container) {
|
|
14
|
-
return Promise.resolve(new
|
|
11
|
+
return Promise.resolve(new Absorbers(container, this._engine));
|
|
15
12
|
}
|
|
16
13
|
loadOptions(options, source) {
|
|
17
14
|
if (!this.needsPlugin(options) && !this.needsPlugin(source)) {
|
|
18
15
|
return;
|
|
19
16
|
}
|
|
20
17
|
if (source?.absorbers) {
|
|
21
|
-
options.absorbers =
|
|
22
|
-
const tmp = new
|
|
18
|
+
options.absorbers = executeOnSingleOrMultiple(source.absorbers, absorber => {
|
|
19
|
+
const tmp = new Absorber();
|
|
23
20
|
tmp.load(absorber);
|
|
24
21
|
return tmp;
|
|
25
22
|
});
|
|
26
23
|
}
|
|
27
|
-
options.interactivity.modes.absorbers =
|
|
28
|
-
const tmp = new
|
|
24
|
+
options.interactivity.modes.absorbers = executeOnSingleOrMultiple(source?.interactivity?.modes?.absorbers, absorber => {
|
|
25
|
+
const tmp = new Absorber();
|
|
29
26
|
tmp.load(absorber);
|
|
30
27
|
return tmp;
|
|
31
28
|
});
|
|
@@ -35,17 +32,16 @@ class AbsorbersPlugin {
|
|
|
35
32
|
return false;
|
|
36
33
|
}
|
|
37
34
|
const absorbers = options.absorbers;
|
|
38
|
-
if (
|
|
35
|
+
if (isArray(absorbers)) {
|
|
39
36
|
return !!absorbers.length;
|
|
40
37
|
}
|
|
41
38
|
else if (absorbers) {
|
|
42
39
|
return true;
|
|
43
40
|
}
|
|
44
41
|
else if (options.interactivity?.events?.onClick?.mode &&
|
|
45
|
-
|
|
42
|
+
isInArray(AbsorberClickMode.absorber, options.interactivity.events.onClick.mode)) {
|
|
46
43
|
return true;
|
|
47
44
|
}
|
|
48
45
|
return false;
|
|
49
46
|
}
|
|
50
47
|
}
|
|
51
|
-
exports.AbsorbersPlugin = AbsorbersPlugin;
|
|
@@ -1,7 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.AbsorberClickMode = void 0;
|
|
4
|
-
var AbsorberClickMode;
|
|
1
|
+
export var AbsorberClickMode;
|
|
5
2
|
(function (AbsorberClickMode) {
|
|
6
3
|
AbsorberClickMode["absorber"] = "absorber";
|
|
7
|
-
})(AbsorberClickMode || (
|
|
4
|
+
})(AbsorberClickMode || (AbsorberClickMode = {}));
|
|
@@ -1,24 +1,21 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
const engine_1 = require("@tsparticles/engine");
|
|
5
|
-
const AbsorberSize_js_1 = require("./AbsorberSize.js");
|
|
6
|
-
class Absorber {
|
|
1
|
+
import { OptionsColor, isNull, setRangeValue, } from "@tsparticles/engine";
|
|
2
|
+
import { AbsorberSize } from "./AbsorberSize.js";
|
|
3
|
+
export class Absorber {
|
|
7
4
|
constructor() {
|
|
8
|
-
this.color = new
|
|
5
|
+
this.color = new OptionsColor();
|
|
9
6
|
this.color.value = "#000000";
|
|
10
7
|
this.draggable = false;
|
|
11
8
|
this.opacity = 1;
|
|
12
9
|
this.destroy = true;
|
|
13
10
|
this.orbits = false;
|
|
14
|
-
this.size = new
|
|
11
|
+
this.size = new AbsorberSize();
|
|
15
12
|
}
|
|
16
13
|
load(data) {
|
|
17
|
-
if (
|
|
14
|
+
if (isNull(data)) {
|
|
18
15
|
return;
|
|
19
16
|
}
|
|
20
17
|
if (data.color !== undefined) {
|
|
21
|
-
this.color =
|
|
18
|
+
this.color = OptionsColor.create(this.color, data.color);
|
|
22
19
|
}
|
|
23
20
|
if (data.draggable !== undefined) {
|
|
24
21
|
this.draggable = data.draggable;
|
|
@@ -30,10 +27,10 @@ class Absorber {
|
|
|
30
27
|
if (data.position !== undefined) {
|
|
31
28
|
this.position = {};
|
|
32
29
|
if (data.position.x !== undefined) {
|
|
33
|
-
this.position.x =
|
|
30
|
+
this.position.x = setRangeValue(data.position.x);
|
|
34
31
|
}
|
|
35
32
|
if (data.position.y !== undefined) {
|
|
36
|
-
this.position.y =
|
|
33
|
+
this.position.y = setRangeValue(data.position.y);
|
|
37
34
|
}
|
|
38
35
|
}
|
|
39
36
|
if (data.size !== undefined) {
|
|
@@ -47,4 +44,3 @@ class Absorber {
|
|
|
47
44
|
}
|
|
48
45
|
}
|
|
49
46
|
}
|
|
50
|
-
exports.Absorber = Absorber;
|
|
@@ -1,24 +1,21 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
const engine_1 = require("@tsparticles/engine");
|
|
5
|
-
const AbsorberSizeLimit_js_1 = require("./AbsorberSizeLimit.js");
|
|
6
|
-
class AbsorberSize extends engine_1.ValueWithRandom {
|
|
1
|
+
import { ValueWithRandom, isNull, isNumber } from "@tsparticles/engine";
|
|
2
|
+
import { AbsorberSizeLimit } from "./AbsorberSizeLimit.js";
|
|
3
|
+
export class AbsorberSize extends ValueWithRandom {
|
|
7
4
|
constructor() {
|
|
8
5
|
super();
|
|
9
6
|
this.density = 5;
|
|
10
7
|
this.value = 50;
|
|
11
|
-
this.limit = new
|
|
8
|
+
this.limit = new AbsorberSizeLimit();
|
|
12
9
|
}
|
|
13
10
|
load(data) {
|
|
14
|
-
if (
|
|
11
|
+
if (isNull(data)) {
|
|
15
12
|
return;
|
|
16
13
|
}
|
|
17
14
|
super.load(data);
|
|
18
15
|
if (data.density !== undefined) {
|
|
19
16
|
this.density = data.density;
|
|
20
17
|
}
|
|
21
|
-
if (
|
|
18
|
+
if (isNumber(data.limit)) {
|
|
22
19
|
this.limit.radius = data.limit;
|
|
23
20
|
}
|
|
24
21
|
else {
|
|
@@ -26,4 +23,3 @@ class AbsorberSize extends engine_1.ValueWithRandom {
|
|
|
26
23
|
}
|
|
27
24
|
}
|
|
28
25
|
}
|
|
29
|
-
exports.AbsorberSize = AbsorberSize;
|
|
@@ -1,14 +1,11 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
exports.AbsorberSizeLimit = void 0;
|
|
4
|
-
const engine_1 = require("@tsparticles/engine");
|
|
5
|
-
class AbsorberSizeLimit {
|
|
1
|
+
import { isNull } from "@tsparticles/engine";
|
|
2
|
+
export class AbsorberSizeLimit {
|
|
6
3
|
constructor() {
|
|
7
4
|
this.radius = 0;
|
|
8
5
|
this.mass = 0;
|
|
9
6
|
}
|
|
10
7
|
load(data) {
|
|
11
|
-
if (
|
|
8
|
+
if (isNull(data)) {
|
|
12
9
|
return;
|
|
13
10
|
}
|
|
14
11
|
if (data.mass !== undefined) {
|
|
@@ -19,4 +16,3 @@ class AbsorberSizeLimit {
|
|
|
19
16
|
}
|
|
20
17
|
}
|
|
21
18
|
}
|
|
22
|
-
exports.AbsorberSizeLimit = AbsorberSizeLimit;
|
|
@@ -1,2 +1 @@
|
|
|
1
|
-
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
1
|
+
export {};
|
|
@@ -1,2 +1 @@
|
|
|
1
|
-
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
1
|
+
export {};
|
|
@@ -1,2 +1 @@
|
|
|
1
|
-
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
1
|
+
export {};
|
package/cjs/index.js
CHANGED
|
@@ -1,24 +1,8 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
}
|
|
8
|
-
Object.defineProperty(o, k2, desc);
|
|
9
|
-
}) : (function(o, m, k, k2) {
|
|
10
|
-
if (k2 === undefined) k2 = k;
|
|
11
|
-
o[k2] = m[k];
|
|
12
|
-
}));
|
|
13
|
-
var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
14
|
-
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
15
|
-
};
|
|
16
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
-
exports.loadAbsorbersPlugin = loadAbsorbersPlugin;
|
|
18
|
-
const AbsorbersPlugin_js_1 = require("./AbsorbersPlugin.js");
|
|
19
|
-
async function loadAbsorbersPlugin(engine, refresh = true) {
|
|
20
|
-
engine.checkVersion("3.9.1");
|
|
21
|
-
await engine.addPlugin(new AbsorbersPlugin_js_1.AbsorbersPlugin(engine), refresh);
|
|
1
|
+
export function loadAbsorbersPlugin(engine) {
|
|
2
|
+
engine.checkVersion("4.0.0-alpha.1");
|
|
3
|
+
engine.register(async (e) => {
|
|
4
|
+
const { AbsorbersPlugin } = await import("./AbsorbersPlugin.js");
|
|
5
|
+
e.addPlugin(new AbsorbersPlugin(e));
|
|
6
|
+
});
|
|
22
7
|
}
|
|
23
|
-
|
|
24
|
-
__exportStar(require("./Enums/AbsorberClickMode.js"), exports);
|
|
8
|
+
export * from "./Enums/AbsorberClickMode.js";
|
package/cjs/types.js
CHANGED
|
@@ -1,2 +1 @@
|
|
|
1
|
-
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
1
|
+
export {};
|