@tsparticles/interaction-external-bubble 3.0.0-beta.3 → 3.0.0-beta.5
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/browser/Bubbler.js +7 -6
- package/cjs/Bubbler.js +7 -6
- package/esm/Bubbler.js +7 -6
- package/package.json +3 -3
- package/report.html +4 -22
- package/tsparticles.interaction.external.bubble.js +8 -7
- package/tsparticles.interaction.external.bubble.min.js +1 -1
- package/tsparticles.interaction.external.bubble.min.js.LICENSE.txt +1 -1
- package/types/Bubbler.d.ts +2 -2
- package/umd/Bubbler.js +7 -6
|
@@ -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-beta.
|
|
7
|
+
* v3.0.0-beta.5
|
|
8
8
|
*/
|
|
9
9
|
(function webpackUniversalModuleDefinition(root, factory) {
|
|
10
10
|
if(typeof exports === 'object' && typeof module === 'object')
|
|
@@ -183,6 +183,7 @@ function calculateBubbleValue(particleValue, modeValue, optionsValue, ratio) {
|
|
|
183
183
|
|
|
184
184
|
|
|
185
185
|
|
|
186
|
+
const bubbleMode = "bubble";
|
|
186
187
|
class Bubbler extends engine_root_window_.ExternalInteractorBase {
|
|
187
188
|
constructor(container) {
|
|
188
189
|
super(container);
|
|
@@ -419,7 +420,7 @@ class Bubbler extends engine_root_window_.ExternalInteractorBase {
|
|
|
419
420
|
container.bubble = {};
|
|
420
421
|
}
|
|
421
422
|
this.handleClickMode = mode => {
|
|
422
|
-
if (mode !==
|
|
423
|
+
if (mode !== bubbleMode) {
|
|
423
424
|
return;
|
|
424
425
|
}
|
|
425
426
|
if (!container.bubble) {
|
|
@@ -458,12 +459,12 @@ class Bubbler extends engine_root_window_.ExternalInteractorBase {
|
|
|
458
459
|
clickEnabled = onClick.enable,
|
|
459
460
|
clickMode = onClick.mode,
|
|
460
461
|
divs = events.onDiv;
|
|
461
|
-
if (hoverEnabled && (0,engine_root_window_.isInArray)(
|
|
462
|
+
if (hoverEnabled && (0,engine_root_window_.isInArray)(bubbleMode, hoverMode)) {
|
|
462
463
|
this._hoverBubble();
|
|
463
|
-
} else if (clickEnabled && (0,engine_root_window_.isInArray)(
|
|
464
|
+
} else if (clickEnabled && (0,engine_root_window_.isInArray)(bubbleMode, clickMode)) {
|
|
464
465
|
this._clickBubble();
|
|
465
466
|
} else {
|
|
466
|
-
(0,engine_root_window_.divModeExecute)(
|
|
467
|
+
(0,engine_root_window_.divModeExecute)(bubbleMode, divs, (selector, div) => this._singleSelectorHover(delta, selector, div));
|
|
467
468
|
}
|
|
468
469
|
}
|
|
469
470
|
isEnabled(particle) {
|
|
@@ -476,11 +477,11 @@ class Bubbler extends engine_root_window_.ExternalInteractorBase {
|
|
|
476
477
|
onDiv,
|
|
477
478
|
onHover
|
|
478
479
|
} = events,
|
|
479
|
-
divBubble = (0,engine_root_window_.isDivModeEnabled)(
|
|
480
|
+
divBubble = (0,engine_root_window_.isDivModeEnabled)(bubbleMode, onDiv);
|
|
480
481
|
if (!(divBubble || onHover.enable && mouse.position || onClick.enable && mouse.clickPosition)) {
|
|
481
482
|
return false;
|
|
482
483
|
}
|
|
483
|
-
return (0,engine_root_window_.isInArray)(
|
|
484
|
+
return (0,engine_root_window_.isInArray)(bubbleMode, onHover.mode) || (0,engine_root_window_.isInArray)(bubbleMode, onClick.mode) || divBubble;
|
|
484
485
|
}
|
|
485
486
|
loadModeOptions(options, ...sources) {
|
|
486
487
|
if (!options.bubble) {
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
/*! For license information please see tsparticles.interaction.external.bubble.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 i="object"==typeof exports?t(require("@tsparticles/engine")):t(e.window);for(var o in i)("object"==typeof exports?exports:e)[o]=i[o]}}(this,(e=>(()=>{"use strict";var t={533:t=>{t.exports=e}},i={};function o(e){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 o in i)("object"==typeof exports?exports:e)[o]=i[o]}}(this,(e=>(()=>{"use strict";var t={533:t=>{t.exports=e}},i={};function o(e){var n=i[e];if(void 0!==n)return n.exports;var b=i[e]={exports:{}};return t[e](b,b.exports,o),b.exports}o.d=(e,t)=>{for(var i in t)o.o(t,i)&&!o.o(e,i)&&Object.defineProperty(e,i,{enumerable:!0,get:t[i]})},o.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),o.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var n={};return(()=>{o.r(n),o.d(n,{Bubble:()=>b,BubbleBase:()=>t,BubbleDiv:()=>i,loadExternalBubbleInteraction:()=>a});var e=o(533);class t{constructor(){this.distance=200,this.duration=.4,this.mix=!1}load(t){if(t){if(void 0!==t.distance&&(this.distance=t.distance),void 0!==t.duration&&(this.duration=t.duration),void 0!==t.mix&&(this.mix=t.mix),void 0!==t.opacity&&(this.opacity=t.opacity),void 0!==t.color){const i=(0,e.isArray)(this.color)?void 0:this.color;this.color=(0,e.executeOnSingleOrMultiple)(t.color,(t=>e.OptionsColor.create(i,t)))}void 0!==t.size&&(this.size=t.size)}}}class i extends t{constructor(){super(),this.selectors=[]}load(e){super.load(e),e&&void 0!==e.selectors&&(this.selectors=e.selectors)}}class b 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})))}}function l(t,i,o,n){if(i>=o){const b=t+(i-o)*n;return(0,e.clamp)(b,t,i)}if(i<o){const b=t-(o-i)*n;return(0,e.clamp)(b,i,t)}}const s="bubble";class r extends e.ExternalInteractorBase{constructor(t){super(t),this._clickBubble=()=>{const t=this.container,i=t.actualOptions,o=t.interactivity.mouse.clickPosition,n=i.interactivity.modes.bubble;if(!n||!o)return;t.bubble||(t.bubble={});const b=t.retina.bubbleModeDistance;if(!b||b<0)return;const l=t.particles.quadTree.queryCircle(o,b,(e=>this.isEnabled(e))),{bubble:s}=t;for(const i of l){if(!s.clicking)continue;i.bubble.inRange=!s.durationEnd;const l=i.getPosition(),r=(0,e.getDistance)(l,o),a=((new Date).getTime()-(t.interactivity.mouse.clickTime||0))/1e3;a>n.duration&&(s.durationEnd=!0),a>2*n.duration&&(s.clicking=!1,s.durationEnd=!1);const c={bubbleObj:{optValue:t.retina.bubbleModeSize,value:i.bubble.radius},particlesObj:{optValue:(0,e.getRangeMax)(i.options.size.value)*t.retina.pixelRatio,value:i.size.value},type:"size"};this._process(i,r,a,c);const u={bubbleObj:{optValue:n.opacity,value:i.bubble.opacity},particlesObj:{optValue:(0,e.getRangeMax)(i.options.opacity.value),value:i.opacity?.value??1},type:"opacity"};this._process(i,r,a,u),!s.durationEnd&&r<=b?this._hoverBubbleColor(i,r):delete i.bubble.color}},this._hoverBubble=()=>{const t=this.container,i=t.interactivity.mouse.position,o=t.retina.bubbleModeDistance;if(!o||o<0||void 0===i)return;const n=t.particles.quadTree.queryCircle(i,o,(e=>this.isEnabled(e)));for(const b of n){b.bubble.inRange=!0;const n=b.getPosition(),l=(0,e.getDistance)(n,i),s=1-l/o;l<=o?s>=0&&t.interactivity.status===e.mouseMoveEvent&&(this._hoverBubbleSize(b,s),this._hoverBubbleOpacity(b,s),this._hoverBubbleColor(b,s)):this.reset(b),t.interactivity.status===e.mouseLeaveEvent&&this.reset(b)}},this._hoverBubbleColor=(t,i,o)=>{const n=this.container.actualOptions,b=o??n.interactivity.modes.bubble;if(b){if(!t.bubble.finalColor){const i=b.color;if(!i)return;const o=(0,e.itemFromSingleOrMultiple)(i);t.bubble.finalColor=(0,e.rangeColorToHsl)(o)}if(t.bubble.finalColor)if(b.mix){t.bubble.color=void 0;const o=t.getFillColor();t.bubble.color=o?(0,e.rgbToHsl)((0,e.colorMix)(o,t.bubble.finalColor,1-i,i)):t.bubble.finalColor}else t.bubble.color=t.bubble.finalColor}},this._hoverBubbleOpacity=(t,i,o)=>{const n=this.container.actualOptions,b=o?.opacity??n.interactivity.modes.bubble?.opacity;if(!b)return;const s=t.options.opacity.value,r=l(t.opacity?.value??1,b,(0,e.getRangeMax)(s),i);void 0!==r&&(t.bubble.opacity=r)},this._hoverBubbleSize=(t,i,o)=>{const n=this.container,b=o?.size?o.size*n.retina.pixelRatio:n.retina.bubbleModeSize;if(void 0===b)return;const s=(0,e.getRangeMax)(t.options.size.value)*n.retina.pixelRatio,r=l(t.size.value,b,s,i);void 0!==r&&(t.bubble.radius=r)},this._process=(e,t,i,o)=>{const n=this.container,b=o.bubbleObj.optValue,l=n.actualOptions.interactivity.modes.bubble;if(!l||void 0===b)return;const s=l.duration,r=n.retina.bubbleModeDistance,a=o.particlesObj.optValue,c=o.bubbleObj.value,u=o.particlesObj.value||0,d=o.type;if(r&&!(r<0)&&b!==a)if(n.bubble||(n.bubble={}),n.bubble.durationEnd)c&&("size"===d&&delete e.bubble.radius,"opacity"===d&&delete e.bubble.opacity);else if(t<=r){if((c??u)!==b){const t=u-i*(u-b)/s;"size"===d&&(e.bubble.radius=t),"opacity"===d&&(e.bubble.opacity=t)}}else"size"===d&&delete e.bubble.radius,"opacity"===d&&delete e.bubble.opacity},this._singleSelectorHover=(t,i,o)=>{const n=this.container,b=document.querySelectorAll(i),l=n.actualOptions.interactivity.modes.bubble;l&&b.length&&b.forEach((i=>{const b=i,s=n.retina.pixelRatio,r={x:(b.offsetLeft+b.offsetWidth/2)*s,y:(b.offsetTop+b.offsetHeight/2)*s},a=b.offsetWidth/2*s,c="circle"===o.type?new e.Circle(r.x,r.y,a):new e.Rectangle(b.offsetLeft*s,b.offsetTop*s,b.offsetWidth*s,b.offsetHeight*s),u=n.particles.quadTree.query(c,(e=>this.isEnabled(e)));for(const i of u){if(!c.contains(i.getPosition()))continue;i.bubble.inRange=!0;const o=l.divs,n=(0,e.divMode)(o,b);i.bubble.div&&i.bubble.div===b||(this.clear(i,t,!0),i.bubble.div=b),this._hoverBubbleSize(i,1,n),this._hoverBubbleOpacity(i,1,n),this._hoverBubbleColor(i,1,n)}}))},t.bubble||(t.bubble={}),this.handleClickMode=e=>{e===s&&(t.bubble||(t.bubble={}),t.bubble.clicking=!0)}}clear(e,t,i){e.bubble.inRange&&!i||(delete e.bubble.div,delete e.bubble.opacity,delete e.bubble.radius,delete e.bubble.color)}init(){const e=this.container,t=e.actualOptions.interactivity.modes.bubble;t&&(e.retina.bubbleModeDistance=t.distance*e.retina.pixelRatio,void 0!==t.size&&(e.retina.bubbleModeSize=t.size*e.retina.pixelRatio))}async interact(t){const i=this.container.actualOptions.interactivity.events,o=i.onHover,n=i.onClick,b=o.enable,l=o.mode,r=n.enable,a=n.mode,c=i.onDiv;b&&(0,e.isInArray)(s,l)?this._hoverBubble():r&&(0,e.isInArray)(s,a)?this._clickBubble():(0,e.divModeExecute)(s,c,((e,i)=>this._singleSelectorHover(t,e,i)))}isEnabled(t){const i=this.container,o=i.actualOptions,n=i.interactivity.mouse,b=(t?.interactivity??o.interactivity).events,{onClick:l,onDiv:r,onHover:a}=b,c=(0,e.isDivModeEnabled)(s,r);return!!(c||a.enable&&n.position||l.enable&&n.clickPosition)&&((0,e.isInArray)(s,a.mode)||(0,e.isInArray)(s,l.mode)||c)}loadModeOptions(e,...t){e.bubble||(e.bubble=new b);for(const i of t)e.bubble.load(i?.bubble)}reset(e){e.bubble.inRange=!1}}async function a(e,t=!0){await e.addInteractor("externalBubble",(e=>new r(e)),t)}})(),n})()));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
/*! tsParticles Bubble External Interaction v3.0.0-beta.
|
|
1
|
+
/*! tsParticles Bubble External Interaction v3.0.0-beta.5 by Matteo Bruni */
|
package/types/Bubbler.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import type { BubbleContainer, BubbleMode, IBubbleMode } from "./Types.js";
|
|
2
|
-
import {
|
|
2
|
+
import { ExternalInteractorBase, type IDelta, type IModes, type Modes, type Particle, type RecursivePartial } from "@tsparticles/engine";
|
|
3
3
|
export declare class Bubbler extends ExternalInteractorBase<BubbleContainer> {
|
|
4
|
-
handleClickMode: (mode:
|
|
4
|
+
handleClickMode: (mode: string) => void;
|
|
5
5
|
constructor(container: BubbleContainer);
|
|
6
6
|
clear(particle: Particle, delta: IDelta, force?: boolean): void;
|
|
7
7
|
init(): void;
|
package/umd/Bubbler.js
CHANGED
|
@@ -13,6 +13,7 @@
|
|
|
13
13
|
const engine_1 = require("@tsparticles/engine");
|
|
14
14
|
const Bubble_js_1 = require("./Options/Classes/Bubble.js");
|
|
15
15
|
const Utils_js_1 = require("./Utils.js");
|
|
16
|
+
const bubbleMode = "bubble";
|
|
16
17
|
class Bubbler extends engine_1.ExternalInteractorBase {
|
|
17
18
|
constructor(container) {
|
|
18
19
|
super(container);
|
|
@@ -222,7 +223,7 @@
|
|
|
222
223
|
container.bubble = {};
|
|
223
224
|
}
|
|
224
225
|
this.handleClickMode = (mode) => {
|
|
225
|
-
if (mode !==
|
|
226
|
+
if (mode !== bubbleMode) {
|
|
226
227
|
return;
|
|
227
228
|
}
|
|
228
229
|
if (!container.bubble) {
|
|
@@ -252,22 +253,22 @@
|
|
|
252
253
|
}
|
|
253
254
|
async interact(delta) {
|
|
254
255
|
const options = this.container.actualOptions, events = options.interactivity.events, onHover = events.onHover, onClick = events.onClick, hoverEnabled = onHover.enable, hoverMode = onHover.mode, clickEnabled = onClick.enable, clickMode = onClick.mode, divs = events.onDiv;
|
|
255
|
-
if (hoverEnabled && (0, engine_1.isInArray)(
|
|
256
|
+
if (hoverEnabled && (0, engine_1.isInArray)(bubbleMode, hoverMode)) {
|
|
256
257
|
this._hoverBubble();
|
|
257
258
|
}
|
|
258
|
-
else if (clickEnabled && (0, engine_1.isInArray)(
|
|
259
|
+
else if (clickEnabled && (0, engine_1.isInArray)(bubbleMode, clickMode)) {
|
|
259
260
|
this._clickBubble();
|
|
260
261
|
}
|
|
261
262
|
else {
|
|
262
|
-
(0, engine_1.divModeExecute)(
|
|
263
|
+
(0, engine_1.divModeExecute)(bubbleMode, divs, (selector, div) => this._singleSelectorHover(delta, selector, div));
|
|
263
264
|
}
|
|
264
265
|
}
|
|
265
266
|
isEnabled(particle) {
|
|
266
|
-
const container = this.container, options = container.actualOptions, mouse = container.interactivity.mouse, events = (particle?.interactivity ?? options.interactivity).events, { onClick, onDiv, onHover } = events, divBubble = (0, engine_1.isDivModeEnabled)(
|
|
267
|
+
const container = this.container, options = container.actualOptions, mouse = container.interactivity.mouse, events = (particle?.interactivity ?? options.interactivity).events, { onClick, onDiv, onHover } = events, divBubble = (0, engine_1.isDivModeEnabled)(bubbleMode, onDiv);
|
|
267
268
|
if (!(divBubble || (onHover.enable && mouse.position) || (onClick.enable && mouse.clickPosition))) {
|
|
268
269
|
return false;
|
|
269
270
|
}
|
|
270
|
-
return (0, engine_1.isInArray)(
|
|
271
|
+
return (0, engine_1.isInArray)(bubbleMode, onHover.mode) || (0, engine_1.isInArray)(bubbleMode, onClick.mode) || divBubble;
|
|
271
272
|
}
|
|
272
273
|
loadModeOptions(options, ...sources) {
|
|
273
274
|
if (!options.bubble) {
|