@tsparticles/interaction-external-repulse 3.0.0-alpha.0 → 3.0.0-beta.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +25 -19
- package/browser/Options/Classes/Repulse.js +1 -1
- package/browser/Options/Classes/RepulseDiv.js +0 -10
- package/browser/Repulser.js +97 -102
- package/browser/index.js +2 -2
- package/cjs/Options/Classes/Repulse.js +1 -1
- package/cjs/Options/Classes/RepulseDiv.js +0 -10
- package/cjs/Repulser.js +104 -120
- package/cjs/index.js +2 -13
- package/esm/Options/Classes/Repulse.js +1 -1
- package/esm/Options/Classes/RepulseDiv.js +0 -10
- package/esm/Repulser.js +97 -102
- package/esm/index.js +2 -2
- package/package.json +6 -5
- package/report.html +4 -4
- package/tsparticles.interaction.external.repulse.js +139 -152
- package/tsparticles.interaction.external.repulse.min.js +1 -1
- package/tsparticles.interaction.external.repulse.min.js.LICENSE.txt +1 -8
- package/types/Options/Classes/Repulse.d.ts +1 -1
- package/types/Options/Classes/RepulseBase.d.ts +1 -2
- package/types/Options/Classes/RepulseDiv.d.ts +1 -3
- package/types/Repulser.d.ts +5 -6
- package/types/index.d.ts +1 -1
- package/umd/Options/Classes/Repulse.js +2 -2
- package/umd/Options/Classes/RepulseDiv.js +1 -11
- package/umd/Repulser.js +97 -102
- package/umd/index.js +2 -2
|
@@ -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
|
-
* v3.0.0-
|
|
7
|
+
* v3.0.0-beta.0
|
|
8
8
|
*/
|
|
9
9
|
(function webpackUniversalModuleDefinition(root, factory) {
|
|
10
10
|
if(typeof exports === 'object' && typeof module === 'object')
|
|
@@ -91,10 +91,10 @@ __webpack_require__.r(__webpack_exports__);
|
|
|
91
91
|
|
|
92
92
|
// EXPORTS
|
|
93
93
|
__webpack_require__.d(__webpack_exports__, {
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
94
|
+
Repulse: () => (/* reexport */ Repulse),
|
|
95
|
+
RepulseBase: () => (/* reexport */ RepulseBase),
|
|
96
|
+
RepulseDiv: () => (/* reexport */ RepulseDiv),
|
|
97
|
+
loadExternalRepulseInteraction: () => (/* binding */ loadExternalRepulseInteraction)
|
|
98
98
|
});
|
|
99
99
|
|
|
100
100
|
// EXTERNAL MODULE: external {"commonjs":"@tsparticles/engine","commonjs2":"@tsparticles/engine","amd":"@tsparticles/engine","root":"window"}
|
|
@@ -135,26 +135,16 @@ class RepulseBase {
|
|
|
135
135
|
}
|
|
136
136
|
;// CONCATENATED MODULE: ./dist/browser/Options/Classes/RepulseDiv.js
|
|
137
137
|
|
|
138
|
-
|
|
139
138
|
class RepulseDiv extends RepulseBase {
|
|
140
139
|
constructor() {
|
|
141
140
|
super();
|
|
142
141
|
this.selectors = [];
|
|
143
142
|
}
|
|
144
|
-
get ids() {
|
|
145
|
-
return (0,engine_root_window_.executeOnSingleOrMultiple)(this.selectors, t => t.replace("#", ""));
|
|
146
|
-
}
|
|
147
|
-
set ids(value) {
|
|
148
|
-
this.selectors = (0,engine_root_window_.executeOnSingleOrMultiple)(value, t => `#${t}`);
|
|
149
|
-
}
|
|
150
143
|
load(data) {
|
|
151
144
|
super.load(data);
|
|
152
145
|
if (!data) {
|
|
153
146
|
return;
|
|
154
147
|
}
|
|
155
|
-
if (data.ids !== undefined) {
|
|
156
|
-
this.ids = data.ids;
|
|
157
|
-
}
|
|
158
148
|
if (data.selectors !== undefined) {
|
|
159
149
|
this.selectors = data.selectors;
|
|
160
150
|
}
|
|
@@ -183,6 +173,111 @@ class Repulse extends RepulseBase {
|
|
|
183
173
|
class Repulser extends engine_root_window_.ExternalInteractorBase {
|
|
184
174
|
constructor(engine, container) {
|
|
185
175
|
super(container);
|
|
176
|
+
this._clickRepulse = () => {
|
|
177
|
+
const container = this.container,
|
|
178
|
+
repulseOptions = container.actualOptions.interactivity.modes.repulse;
|
|
179
|
+
if (!repulseOptions) {
|
|
180
|
+
return;
|
|
181
|
+
}
|
|
182
|
+
const repulse = container.repulse || {
|
|
183
|
+
particles: []
|
|
184
|
+
};
|
|
185
|
+
if (!repulse.finish) {
|
|
186
|
+
if (!repulse.count) {
|
|
187
|
+
repulse.count = 0;
|
|
188
|
+
}
|
|
189
|
+
repulse.count++;
|
|
190
|
+
if (repulse.count === container.particles.count) {
|
|
191
|
+
repulse.finish = true;
|
|
192
|
+
}
|
|
193
|
+
}
|
|
194
|
+
if (repulse.clicking) {
|
|
195
|
+
const repulseDistance = container.retina.repulseModeDistance;
|
|
196
|
+
if (!repulseDistance || repulseDistance < 0) {
|
|
197
|
+
return;
|
|
198
|
+
}
|
|
199
|
+
const repulseRadius = Math.pow(repulseDistance / 6, 3),
|
|
200
|
+
mouseClickPos = container.interactivity.mouse.clickPosition;
|
|
201
|
+
if (mouseClickPos === undefined) {
|
|
202
|
+
return;
|
|
203
|
+
}
|
|
204
|
+
const range = new engine_root_window_.Circle(mouseClickPos.x, mouseClickPos.y, repulseRadius),
|
|
205
|
+
query = container.particles.quadTree.query(range, p => this.isEnabled(p));
|
|
206
|
+
for (const particle of query) {
|
|
207
|
+
const {
|
|
208
|
+
dx,
|
|
209
|
+
dy,
|
|
210
|
+
distance
|
|
211
|
+
} = (0,engine_root_window_.getDistances)(mouseClickPos, particle.position),
|
|
212
|
+
d = distance ** 2,
|
|
213
|
+
velocity = repulseOptions.speed,
|
|
214
|
+
force = -repulseRadius * velocity / d;
|
|
215
|
+
if (d <= repulseRadius) {
|
|
216
|
+
repulse.particles.push(particle);
|
|
217
|
+
const vect = engine_root_window_.Vector.create(dx, dy);
|
|
218
|
+
vect.length = force;
|
|
219
|
+
particle.velocity.setTo(vect);
|
|
220
|
+
}
|
|
221
|
+
}
|
|
222
|
+
} else if (repulse.clicking === false) {
|
|
223
|
+
for (const particle of repulse.particles) {
|
|
224
|
+
particle.velocity.setTo(particle.initialVelocity);
|
|
225
|
+
}
|
|
226
|
+
repulse.particles = [];
|
|
227
|
+
}
|
|
228
|
+
};
|
|
229
|
+
this._hoverRepulse = () => {
|
|
230
|
+
const container = this.container,
|
|
231
|
+
mousePos = container.interactivity.mouse.position,
|
|
232
|
+
repulseRadius = container.retina.repulseModeDistance;
|
|
233
|
+
if (!repulseRadius || repulseRadius < 0 || !mousePos) {
|
|
234
|
+
return;
|
|
235
|
+
}
|
|
236
|
+
this._processRepulse(mousePos, repulseRadius, new engine_root_window_.Circle(mousePos.x, mousePos.y, repulseRadius));
|
|
237
|
+
};
|
|
238
|
+
this._processRepulse = (position, repulseRadius, area, divRepulse) => {
|
|
239
|
+
const container = this.container,
|
|
240
|
+
query = container.particles.quadTree.query(area, p => this.isEnabled(p)),
|
|
241
|
+
repulseOptions = container.actualOptions.interactivity.modes.repulse;
|
|
242
|
+
if (!repulseOptions) {
|
|
243
|
+
return;
|
|
244
|
+
}
|
|
245
|
+
for (const particle of query) {
|
|
246
|
+
const {
|
|
247
|
+
dx,
|
|
248
|
+
dy,
|
|
249
|
+
distance
|
|
250
|
+
} = (0,engine_root_window_.getDistances)(particle.position, position),
|
|
251
|
+
velocity = (divRepulse?.speed ?? repulseOptions.speed) * repulseOptions.factor,
|
|
252
|
+
repulseFactor = (0,engine_root_window_.clamp)((0,engine_root_window_.getEasing)(repulseOptions.easing)(1 - distance / repulseRadius) * velocity, 0, repulseOptions.maxSpeed),
|
|
253
|
+
normVec = engine_root_window_.Vector.create(distance === 0 ? velocity : dx / distance * repulseFactor, distance === 0 ? velocity : dy / distance * repulseFactor);
|
|
254
|
+
particle.position.addTo(normVec);
|
|
255
|
+
}
|
|
256
|
+
};
|
|
257
|
+
this._singleSelectorRepulse = (selector, div) => {
|
|
258
|
+
const container = this.container,
|
|
259
|
+
repulse = container.actualOptions.interactivity.modes.repulse;
|
|
260
|
+
if (!repulse) {
|
|
261
|
+
return;
|
|
262
|
+
}
|
|
263
|
+
const query = document.querySelectorAll(selector);
|
|
264
|
+
if (!query.length) {
|
|
265
|
+
return;
|
|
266
|
+
}
|
|
267
|
+
query.forEach(item => {
|
|
268
|
+
const elem = item,
|
|
269
|
+
pxRatio = container.retina.pixelRatio,
|
|
270
|
+
pos = {
|
|
271
|
+
x: (elem.offsetLeft + elem.offsetWidth / 2) * pxRatio,
|
|
272
|
+
y: (elem.offsetTop + elem.offsetHeight / 2) * pxRatio
|
|
273
|
+
},
|
|
274
|
+
repulseRadius = elem.offsetWidth / 2 * pxRatio,
|
|
275
|
+
area = div.type === "circle" ? new engine_root_window_.Circle(pos.x, pos.y, repulseRadius) : new engine_root_window_.Rectangle(elem.offsetLeft * pxRatio, elem.offsetTop * pxRatio, elem.offsetWidth * pxRatio, elem.offsetHeight * pxRatio),
|
|
276
|
+
divs = repulse.divs,
|
|
277
|
+
divRepulse = (0,engine_root_window_.divMode)(divs, elem);
|
|
278
|
+
this._processRepulse(pos, repulseRadius, area, divRepulse);
|
|
279
|
+
});
|
|
280
|
+
};
|
|
186
281
|
this._engine = engine;
|
|
187
282
|
if (!container.repulse) {
|
|
188
283
|
container.repulse = {
|
|
@@ -191,8 +286,8 @@ class Repulser extends engine_root_window_.ExternalInteractorBase {
|
|
|
191
286
|
}
|
|
192
287
|
this.handleClickMode = mode => {
|
|
193
288
|
const options = this.container.actualOptions,
|
|
194
|
-
|
|
195
|
-
if (!
|
|
289
|
+
repulseOpts = options.interactivity.modes.repulse;
|
|
290
|
+
if (!repulseOpts || mode !== "repulse") {
|
|
196
291
|
return;
|
|
197
292
|
}
|
|
198
293
|
if (!container.repulse) {
|
|
@@ -200,26 +295,23 @@ class Repulser extends engine_root_window_.ExternalInteractorBase {
|
|
|
200
295
|
particles: []
|
|
201
296
|
};
|
|
202
297
|
}
|
|
203
|
-
|
|
204
|
-
|
|
298
|
+
const repulse = container.repulse;
|
|
299
|
+
repulse.clicking = true;
|
|
300
|
+
repulse.count = 0;
|
|
205
301
|
for (const particle of container.repulse.particles) {
|
|
206
302
|
if (!this.isEnabled(particle)) {
|
|
207
303
|
continue;
|
|
208
304
|
}
|
|
209
305
|
particle.velocity.setTo(particle.initialVelocity);
|
|
210
306
|
}
|
|
211
|
-
|
|
212
|
-
|
|
307
|
+
repulse.particles = [];
|
|
308
|
+
repulse.finish = false;
|
|
213
309
|
setTimeout(() => {
|
|
214
|
-
if (
|
|
215
|
-
|
|
216
|
-
container.repulse = {
|
|
217
|
-
particles: []
|
|
218
|
-
};
|
|
219
|
-
}
|
|
220
|
-
container.repulse.clicking = false;
|
|
310
|
+
if (container.destroyed) {
|
|
311
|
+
return;
|
|
221
312
|
}
|
|
222
|
-
|
|
313
|
+
repulse.clicking = false;
|
|
314
|
+
}, repulseOpts.duration * 1000);
|
|
223
315
|
};
|
|
224
316
|
}
|
|
225
317
|
clear() {}
|
|
@@ -236,32 +328,35 @@ class Repulser extends engine_root_window_.ExternalInteractorBase {
|
|
|
236
328
|
options = container.actualOptions,
|
|
237
329
|
mouseMoveStatus = container.interactivity.status === engine_root_window_.mouseMoveEvent,
|
|
238
330
|
events = options.interactivity.events,
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
331
|
+
hover = events.onHover,
|
|
332
|
+
hoverEnabled = hover.enable,
|
|
333
|
+
hoverMode = hover.mode,
|
|
334
|
+
click = events.onClick,
|
|
335
|
+
clickEnabled = click.enable,
|
|
336
|
+
clickMode = click.mode,
|
|
243
337
|
divs = events.onDiv;
|
|
244
338
|
if (mouseMoveStatus && hoverEnabled && (0,engine_root_window_.isInArray)("repulse", hoverMode)) {
|
|
245
|
-
this.
|
|
339
|
+
this._hoverRepulse();
|
|
246
340
|
} else if (clickEnabled && (0,engine_root_window_.isInArray)("repulse", clickMode)) {
|
|
247
|
-
this.
|
|
341
|
+
this._clickRepulse();
|
|
248
342
|
} else {
|
|
249
|
-
(0,engine_root_window_.divModeExecute)("repulse", divs, (selector, div) => this.
|
|
343
|
+
(0,engine_root_window_.divModeExecute)("repulse", divs, (selector, div) => this._singleSelectorRepulse(selector, div));
|
|
250
344
|
}
|
|
251
345
|
}
|
|
252
346
|
isEnabled(particle) {
|
|
253
|
-
var _a;
|
|
254
347
|
const container = this.container,
|
|
255
348
|
options = container.actualOptions,
|
|
256
349
|
mouse = container.interactivity.mouse,
|
|
257
|
-
events = (
|
|
350
|
+
events = (particle?.interactivity ?? options.interactivity).events,
|
|
258
351
|
divs = events.onDiv,
|
|
352
|
+
hover = events.onHover,
|
|
353
|
+
click = events.onClick,
|
|
259
354
|
divRepulse = (0,engine_root_window_.isDivModeEnabled)("repulse", divs);
|
|
260
|
-
if (!(divRepulse ||
|
|
355
|
+
if (!(divRepulse || hover.enable && mouse.position || click.enable && mouse.clickPosition)) {
|
|
261
356
|
return false;
|
|
262
357
|
}
|
|
263
|
-
const hoverMode =
|
|
264
|
-
clickMode =
|
|
358
|
+
const hoverMode = hover.mode,
|
|
359
|
+
clickMode = click.mode;
|
|
265
360
|
return (0,engine_root_window_.isInArray)("repulse", hoverMode) || (0,engine_root_window_.isInArray)("repulse", clickMode) || divRepulse;
|
|
266
361
|
}
|
|
267
362
|
loadModeOptions(options, ...sources) {
|
|
@@ -269,123 +364,15 @@ class Repulser extends engine_root_window_.ExternalInteractorBase {
|
|
|
269
364
|
options.repulse = new Repulse();
|
|
270
365
|
}
|
|
271
366
|
for (const source of sources) {
|
|
272
|
-
options.repulse.load(source
|
|
367
|
+
options.repulse.load(source?.repulse);
|
|
273
368
|
}
|
|
274
369
|
}
|
|
275
370
|
reset() {}
|
|
276
|
-
clickRepulse() {
|
|
277
|
-
const container = this.container,
|
|
278
|
-
repulse = container.actualOptions.interactivity.modes.repulse;
|
|
279
|
-
if (!repulse) {
|
|
280
|
-
return;
|
|
281
|
-
}
|
|
282
|
-
if (!container.repulse) {
|
|
283
|
-
container.repulse = {
|
|
284
|
-
particles: []
|
|
285
|
-
};
|
|
286
|
-
}
|
|
287
|
-
if (!container.repulse.finish) {
|
|
288
|
-
if (!container.repulse.count) {
|
|
289
|
-
container.repulse.count = 0;
|
|
290
|
-
}
|
|
291
|
-
container.repulse.count++;
|
|
292
|
-
if (container.repulse.count === container.particles.count) {
|
|
293
|
-
container.repulse.finish = true;
|
|
294
|
-
}
|
|
295
|
-
}
|
|
296
|
-
if (container.repulse.clicking) {
|
|
297
|
-
const repulseDistance = container.retina.repulseModeDistance;
|
|
298
|
-
if (!repulseDistance || repulseDistance < 0) {
|
|
299
|
-
return;
|
|
300
|
-
}
|
|
301
|
-
const repulseRadius = Math.pow(repulseDistance / 6, 3),
|
|
302
|
-
mouseClickPos = container.interactivity.mouse.clickPosition;
|
|
303
|
-
if (mouseClickPos === undefined) {
|
|
304
|
-
return;
|
|
305
|
-
}
|
|
306
|
-
const range = new engine_root_window_.Circle(mouseClickPos.x, mouseClickPos.y, repulseRadius),
|
|
307
|
-
query = container.particles.quadTree.query(range, p => this.isEnabled(p));
|
|
308
|
-
for (const particle of query) {
|
|
309
|
-
const {
|
|
310
|
-
dx,
|
|
311
|
-
dy,
|
|
312
|
-
distance
|
|
313
|
-
} = (0,engine_root_window_.getDistances)(mouseClickPos, particle.position),
|
|
314
|
-
d = distance ** 2,
|
|
315
|
-
velocity = repulse.speed,
|
|
316
|
-
force = -repulseRadius * velocity / d;
|
|
317
|
-
if (d <= repulseRadius) {
|
|
318
|
-
container.repulse.particles.push(particle);
|
|
319
|
-
const vect = engine_root_window_.Vector.create(dx, dy);
|
|
320
|
-
vect.length = force;
|
|
321
|
-
particle.velocity.setTo(vect);
|
|
322
|
-
}
|
|
323
|
-
}
|
|
324
|
-
} else if (container.repulse.clicking === false) {
|
|
325
|
-
for (const particle of container.repulse.particles) {
|
|
326
|
-
particle.velocity.setTo(particle.initialVelocity);
|
|
327
|
-
}
|
|
328
|
-
container.repulse.particles = [];
|
|
329
|
-
}
|
|
330
|
-
}
|
|
331
|
-
hoverRepulse() {
|
|
332
|
-
const container = this.container,
|
|
333
|
-
mousePos = container.interactivity.mouse.position,
|
|
334
|
-
repulseRadius = container.retina.repulseModeDistance;
|
|
335
|
-
if (!repulseRadius || repulseRadius < 0 || !mousePos) {
|
|
336
|
-
return;
|
|
337
|
-
}
|
|
338
|
-
this.processRepulse(mousePos, repulseRadius, new engine_root_window_.Circle(mousePos.x, mousePos.y, repulseRadius));
|
|
339
|
-
}
|
|
340
|
-
processRepulse(position, repulseRadius, area, divRepulse) {
|
|
341
|
-
var _a;
|
|
342
|
-
const container = this.container,
|
|
343
|
-
query = container.particles.quadTree.query(area, p => this.isEnabled(p)),
|
|
344
|
-
repulseOptions = container.actualOptions.interactivity.modes.repulse;
|
|
345
|
-
if (!repulseOptions) {
|
|
346
|
-
return;
|
|
347
|
-
}
|
|
348
|
-
for (const particle of query) {
|
|
349
|
-
const {
|
|
350
|
-
dx,
|
|
351
|
-
dy,
|
|
352
|
-
distance
|
|
353
|
-
} = (0,engine_root_window_.getDistances)(particle.position, position),
|
|
354
|
-
velocity = ((_a = divRepulse === null || divRepulse === void 0 ? void 0 : divRepulse.speed) !== null && _a !== void 0 ? _a : repulseOptions.speed) * repulseOptions.factor,
|
|
355
|
-
repulseFactor = (0,engine_root_window_.clamp)((0,engine_root_window_.getEasing)(repulseOptions.easing)(1 - distance / repulseRadius) * velocity, 0, repulseOptions.maxSpeed),
|
|
356
|
-
normVec = engine_root_window_.Vector.create(distance === 0 ? velocity : dx / distance * repulseFactor, distance === 0 ? velocity : dy / distance * repulseFactor);
|
|
357
|
-
particle.position.addTo(normVec);
|
|
358
|
-
}
|
|
359
|
-
}
|
|
360
|
-
singleSelectorRepulse(selector, div) {
|
|
361
|
-
const container = this.container,
|
|
362
|
-
repulse = container.actualOptions.interactivity.modes.repulse;
|
|
363
|
-
if (!repulse) {
|
|
364
|
-
return;
|
|
365
|
-
}
|
|
366
|
-
const query = document.querySelectorAll(selector);
|
|
367
|
-
if (!query.length) {
|
|
368
|
-
return;
|
|
369
|
-
}
|
|
370
|
-
query.forEach(item => {
|
|
371
|
-
const elem = item,
|
|
372
|
-
pxRatio = container.retina.pixelRatio,
|
|
373
|
-
pos = {
|
|
374
|
-
x: (elem.offsetLeft + elem.offsetWidth / 2) * pxRatio,
|
|
375
|
-
y: (elem.offsetTop + elem.offsetHeight / 2) * pxRatio
|
|
376
|
-
},
|
|
377
|
-
repulseRadius = elem.offsetWidth / 2 * pxRatio,
|
|
378
|
-
area = div.type === "circle" ? new engine_root_window_.Circle(pos.x, pos.y, repulseRadius) : new engine_root_window_.Rectangle(elem.offsetLeft * pxRatio, elem.offsetTop * pxRatio, elem.offsetWidth * pxRatio, elem.offsetHeight * pxRatio),
|
|
379
|
-
divs = repulse.divs,
|
|
380
|
-
divRepulse = (0,engine_root_window_.divMode)(divs, elem);
|
|
381
|
-
this.processRepulse(pos, repulseRadius, area, divRepulse);
|
|
382
|
-
});
|
|
383
|
-
}
|
|
384
371
|
}
|
|
385
372
|
;// CONCATENATED MODULE: ./dist/browser/index.js
|
|
386
373
|
|
|
387
|
-
async function loadExternalRepulseInteraction(engine) {
|
|
388
|
-
await engine.addInteractor("externalRepulse", container => new Repulser(engine, container));
|
|
374
|
+
async function loadExternalRepulseInteraction(engine, refresh = true) {
|
|
375
|
+
await engine.addInteractor("externalRepulse", container => new Repulser(engine, container), refresh);
|
|
389
376
|
}
|
|
390
377
|
|
|
391
378
|
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
/*! For license information please see tsparticles.interaction.external.repulse.min.js.LICENSE.txt */
|
|
2
|
-
!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("@tsparticles/engine"));else if("function"==typeof define&&define.amd)define(["@tsparticles/engine"],t);else{var
|
|
2
|
+
!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("@tsparticles/engine"));else if("function"==typeof define&&define.amd)define(["@tsparticles/engine"],t);else{var i="object"==typeof exports?t(require("@tsparticles/engine")):t(e.window);for(var s in i)("object"==typeof exports?exports:e)[s]=i[s]}}(this,(e=>(()=>{"use strict";var t={533:t=>{t.exports=e}},i={};function s(e){var o=i[e];if(void 0!==o)return o.exports;var n=i[e]={exports:{}};return t[e](n,n.exports,s),n.exports}s.d=(e,t)=>{for(var i in t)s.o(t,i)&&!s.o(e,i)&&Object.defineProperty(e,i,{enumerable:!0,get:t[i]})},s.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),s.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var o={};return(()=>{s.r(o),s.d(o,{Repulse:()=>n,RepulseBase:()=>t,RepulseDiv:()=>i,loadExternalRepulseInteraction:()=>c});var e=s(533);class t{constructor(){this.distance=200,this.duration=.4,this.factor=100,this.speed=1,this.maxSpeed=50,this.easing="ease-out-quad"}load(e){e&&(void 0!==e.distance&&(this.distance=e.distance),void 0!==e.duration&&(this.duration=e.duration),void 0!==e.easing&&(this.easing=e.easing),void 0!==e.factor&&(this.factor=e.factor),void 0!==e.speed&&(this.speed=e.speed),void 0!==e.maxSpeed&&(this.maxSpeed=e.maxSpeed))}}class i extends t{constructor(){super(),this.selectors=[]}load(e){super.load(e),e&&void 0!==e.selectors&&(this.selectors=e.selectors)}}class n extends t{load(t){super.load(t),t&&(this.divs=(0,e.executeOnSingleOrMultiple)(t.divs,(e=>{const t=new i;return t.load(e),t})))}}class r extends e.ExternalInteractorBase{constructor(t,i){super(i),this._clickRepulse=()=>{const t=this.container,i=t.actualOptions.interactivity.modes.repulse;if(!i)return;const s=t.repulse||{particles:[]};if(s.finish||(s.count||(s.count=0),s.count++,s.count===t.particles.count&&(s.finish=!0)),s.clicking){const o=t.retina.repulseModeDistance;if(!o||o<0)return;const n=Math.pow(o/6,3),r=t.interactivity.mouse.clickPosition;if(void 0===r)return;const c=new e.Circle(r.x,r.y,n),a=t.particles.quadTree.query(c,(e=>this.isEnabled(e)));for(const t of a){const{dx:o,dy:c,distance:a}=(0,e.getDistances)(r,t.position),l=a**2,p=-n*i.speed/l;if(l<=n){s.particles.push(t);const i=e.Vector.create(o,c);i.length=p,t.velocity.setTo(i)}}}else if(!1===s.clicking){for(const e of s.particles)e.velocity.setTo(e.initialVelocity);s.particles=[]}},this._hoverRepulse=()=>{const t=this.container,i=t.interactivity.mouse.position,s=t.retina.repulseModeDistance;!s||s<0||!i||this._processRepulse(i,s,new e.Circle(i.x,i.y,s))},this._processRepulse=(t,i,s,o)=>{const n=this.container,r=n.particles.quadTree.query(s,(e=>this.isEnabled(e))),c=n.actualOptions.interactivity.modes.repulse;if(c)for(const s of r){const{dx:n,dy:r,distance:a}=(0,e.getDistances)(s.position,t),l=(o?.speed??c.speed)*c.factor,p=(0,e.clamp)((0,e.getEasing)(c.easing)(1-a/i)*l,0,c.maxSpeed),u=e.Vector.create(0===a?l:n/a*p,0===a?l:r/a*p);s.position.addTo(u)}},this._singleSelectorRepulse=(t,i)=>{const s=this.container,o=s.actualOptions.interactivity.modes.repulse;if(!o)return;const n=document.querySelectorAll(t);n.length&&n.forEach((t=>{const n=t,r=s.retina.pixelRatio,c={x:(n.offsetLeft+n.offsetWidth/2)*r,y:(n.offsetTop+n.offsetHeight/2)*r},a=n.offsetWidth/2*r,l="circle"===i.type?new e.Circle(c.x,c.y,a):new e.Rectangle(n.offsetLeft*r,n.offsetTop*r,n.offsetWidth*r,n.offsetHeight*r),p=o.divs,u=(0,e.divMode)(p,n);this._processRepulse(c,a,l,u)}))},this._engine=t,i.repulse||(i.repulse={particles:[]}),this.handleClickMode=e=>{const t=this.container.actualOptions.interactivity.modes.repulse;if(!t||"repulse"!==e)return;i.repulse||(i.repulse={particles:[]});const s=i.repulse;s.clicking=!0,s.count=0;for(const e of i.repulse.particles)this.isEnabled(e)&&e.velocity.setTo(e.initialVelocity);s.particles=[],s.finish=!1,setTimeout((()=>{i.destroyed||(s.clicking=!1)}),1e3*t.duration)}}clear(){}init(){const e=this.container,t=e.actualOptions.interactivity.modes.repulse;t&&(e.retina.repulseModeDistance=t.distance*e.retina.pixelRatio)}async interact(){const t=this.container,i=t.actualOptions,s=t.interactivity.status===e.mouseMoveEvent,o=i.interactivity.events,n=o.onHover,r=n.enable,c=n.mode,a=o.onClick,l=a.enable,p=a.mode,u=o.onDiv;s&&r&&(0,e.isInArray)("repulse",c)?this._hoverRepulse():l&&(0,e.isInArray)("repulse",p)?this._clickRepulse():(0,e.divModeExecute)("repulse",u,((e,t)=>this._singleSelectorRepulse(e,t)))}isEnabled(t){const i=this.container,s=i.actualOptions,o=i.interactivity.mouse,n=(t?.interactivity??s.interactivity).events,r=n.onDiv,c=n.onHover,a=n.onClick,l=(0,e.isDivModeEnabled)("repulse",r);if(!(l||c.enable&&o.position||a.enable&&o.clickPosition))return!1;const p=c.mode,u=a.mode;return(0,e.isInArray)("repulse",p)||(0,e.isInArray)("repulse",u)||l}loadModeOptions(e,...t){e.repulse||(e.repulse=new n);for(const i of t)e.repulse.load(i?.repulse)}reset(){}}async function c(e,t=!0){await e.addInteractor("externalRepulse",(t=>new r(e,t)),t)}})(),o})()));
|
|
@@ -1,8 +1 @@
|
|
|
1
|
-
/*!
|
|
2
|
-
* Author : Matteo Bruni
|
|
3
|
-
* MIT license: https://opensource.org/licenses/MIT
|
|
4
|
-
* Demo / Generator : https://particles.js.org/
|
|
5
|
-
* GitHub : https://www.github.com/matteobruni/tsparticles
|
|
6
|
-
* How to use? : Check the GitHub README
|
|
7
|
-
* v3.0.0-alpha.0
|
|
8
|
-
*/
|
|
1
|
+
/*! tsParticles Repulse External Interaction v3.0.0-beta.0 by Matteo Bruni */
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type
|
|
1
|
+
import { type IOptionLoader, type RecursivePartial, type SingleOrMultiple } from "@tsparticles/engine";
|
|
2
2
|
import type { IRepulse } from "../Interfaces/IRepulse";
|
|
3
3
|
import { RepulseBase } from "./RepulseBase";
|
|
4
4
|
import { RepulseDiv } from "./RepulseDiv";
|
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
import type
|
|
2
|
-
import { EasingType } from "@tsparticles/engine";
|
|
1
|
+
import { EasingType, type EasingTypeAlt, type IOptionLoader, type RecursivePartial } from "@tsparticles/engine";
|
|
3
2
|
import type { IRepulseBase } from "../Interfaces/IRepulseBase";
|
|
4
3
|
export declare abstract class RepulseBase implements IRepulseBase, IOptionLoader<IRepulseBase> {
|
|
5
4
|
distance: number;
|
|
@@ -1,10 +1,8 @@
|
|
|
1
|
-
import type
|
|
1
|
+
import { type IOptionLoader, type RecursivePartial, type SingleOrMultiple } from "@tsparticles/engine";
|
|
2
2
|
import type { IRepulseDiv } from "../Interfaces/IRepulseDiv";
|
|
3
3
|
import { RepulseBase } from "./RepulseBase";
|
|
4
4
|
export declare class RepulseDiv extends RepulseBase implements IRepulseDiv, IOptionLoader<IRepulseDiv> {
|
|
5
5
|
selectors: SingleOrMultiple<string>;
|
|
6
6
|
constructor();
|
|
7
|
-
get ids(): SingleOrMultiple<string>;
|
|
8
|
-
set ids(value: SingleOrMultiple<string>);
|
|
9
7
|
load(data?: RecursivePartial<IRepulseDiv>): void;
|
|
10
8
|
}
|
package/types/Repulser.d.ts
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
import { ExternalInteractorBase } from "@tsparticles/engine";
|
|
2
|
-
import type { Engine, IModes, Modes, Particle, RecursivePartial } from "@tsparticles/engine";
|
|
1
|
+
import { type Engine, ExternalInteractorBase, type IModes, type Modes, type Particle, type RecursivePartial } from "@tsparticles/engine";
|
|
3
2
|
import type { IRepulseMode, RepulseContainer, RepulseMode } from "./Types";
|
|
4
3
|
export declare class Repulser extends ExternalInteractorBase<RepulseContainer> {
|
|
5
4
|
handleClickMode: (mode: string) => void;
|
|
@@ -11,8 +10,8 @@ export declare class Repulser extends ExternalInteractorBase<RepulseContainer> {
|
|
|
11
10
|
isEnabled(particle?: Particle): boolean;
|
|
12
11
|
loadModeOptions(options: Modes & RepulseMode, ...sources: RecursivePartial<(IModes & IRepulseMode) | undefined>[]): void;
|
|
13
12
|
reset(): void;
|
|
14
|
-
private
|
|
15
|
-
private
|
|
16
|
-
private
|
|
17
|
-
private
|
|
13
|
+
private readonly _clickRepulse;
|
|
14
|
+
private readonly _hoverRepulse;
|
|
15
|
+
private readonly _processRepulse;
|
|
16
|
+
private readonly _singleSelectorRepulse;
|
|
18
17
|
}
|
package/types/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { Engine } from "@tsparticles/engine";
|
|
2
|
-
export declare function loadExternalRepulseInteraction(engine: Engine): Promise<void>;
|
|
2
|
+
export declare function loadExternalRepulseInteraction(engine: Engine, refresh?: boolean): Promise<void>;
|
|
3
3
|
export * from "./Options/Classes/RepulseBase";
|
|
4
4
|
export * from "./Options/Classes/RepulseDiv";
|
|
5
5
|
export * from "./Options/Classes/Repulse";
|
|
@@ -4,15 +4,15 @@
|
|
|
4
4
|
if (v !== undefined) module.exports = v;
|
|
5
5
|
}
|
|
6
6
|
else if (typeof define === "function" && define.amd) {
|
|
7
|
-
define(["require", "exports", "
|
|
7
|
+
define(["require", "exports", "@tsparticles/engine", "./RepulseBase", "./RepulseDiv"], factory);
|
|
8
8
|
}
|
|
9
9
|
})(function (require, exports) {
|
|
10
10
|
"use strict";
|
|
11
11
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
12
12
|
exports.Repulse = void 0;
|
|
13
|
+
const engine_1 = require("@tsparticles/engine");
|
|
13
14
|
const RepulseBase_1 = require("./RepulseBase");
|
|
14
15
|
const RepulseDiv_1 = require("./RepulseDiv");
|
|
15
|
-
const engine_1 = require("@tsparticles/engine");
|
|
16
16
|
class Repulse extends RepulseBase_1.RepulseBase {
|
|
17
17
|
load(data) {
|
|
18
18
|
super.load(data);
|
|
@@ -4,33 +4,23 @@
|
|
|
4
4
|
if (v !== undefined) module.exports = v;
|
|
5
5
|
}
|
|
6
6
|
else if (typeof define === "function" && define.amd) {
|
|
7
|
-
define(["require", "exports", "./RepulseBase"
|
|
7
|
+
define(["require", "exports", "./RepulseBase"], factory);
|
|
8
8
|
}
|
|
9
9
|
})(function (require, exports) {
|
|
10
10
|
"use strict";
|
|
11
11
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
12
12
|
exports.RepulseDiv = void 0;
|
|
13
13
|
const RepulseBase_1 = require("./RepulseBase");
|
|
14
|
-
const engine_1 = require("@tsparticles/engine");
|
|
15
14
|
class RepulseDiv extends RepulseBase_1.RepulseBase {
|
|
16
15
|
constructor() {
|
|
17
16
|
super();
|
|
18
17
|
this.selectors = [];
|
|
19
18
|
}
|
|
20
|
-
get ids() {
|
|
21
|
-
return (0, engine_1.executeOnSingleOrMultiple)(this.selectors, (t) => t.replace("#", ""));
|
|
22
|
-
}
|
|
23
|
-
set ids(value) {
|
|
24
|
-
this.selectors = (0, engine_1.executeOnSingleOrMultiple)(value, (t) => `#${t}`);
|
|
25
|
-
}
|
|
26
19
|
load(data) {
|
|
27
20
|
super.load(data);
|
|
28
21
|
if (!data) {
|
|
29
22
|
return;
|
|
30
23
|
}
|
|
31
|
-
if (data.ids !== undefined) {
|
|
32
|
-
this.ids = data.ids;
|
|
33
|
-
}
|
|
34
24
|
if (data.selectors !== undefined) {
|
|
35
25
|
this.selectors = data.selectors;
|
|
36
26
|
}
|